/* ============================================================
   FIND A PAW, palette taken from the supplied brand artwork
   (the pin logo and the two illustrations), which overlaps the
   live site's colors closely and is warmer and richer:

     #23A7AC  teal        the logo pin. primary brand color
     #26858B  teal-deep   its shadow side
     #B2EDED  teal-pale   tints and washes
     #294D67  navy        the map pins in the illustrations
     #226288  navy-lt
     #EB2124  red         the bandana. alerts only
     #FED136  gold        the roads on the map. CTAs
     #FFDAB0  peach       warm blocking
     #FFF6EE  cream       page ground
     #F9EBE1  cream-2     alternating bands
     #4F2010  brown       illustration outlines, body text
   ============================================================ */
:root{
  --teal:#23A7AC;
  --teal-deep:#26858B;
  --teal-pale:#B2EDED;
  --teal-wash:#EAFAFA;
  --navy:#294D67;
  --navy-lt:#226288;
  --navy-deep:#1B3A4E;
  --red:#EB2124;
  --gold:#FED136;
  --gold-deep:#E8B800;
  --peach:#FFDAB0;
  --cream:#FFF6EE;
  --cream-2:#F9EBE1;
  --cream-3:#FFFAF5;
  --brown:#4F2010;
  --white:#FFFFFF;

  --ink:#3A2418;
  --body:#6B5245;
  --muted:#9B8578;
  --hair:rgba(79,32,16,.14);
  --hair-soft:rgba(79,32,16,.08);

  /* on dark teal panels */
  --on-dark:rgba(255,255,255,.82);
  --on-dark-dim:rgba(255,255,255,.55);
  --hair-dark:rgba(255,255,255,.16);
  --surface-dark:rgba(255,255,255,.07);

  --r-sm:8px; --r:14px; --r-lg:22px; --r-xl:30px; --r-pill:999px;
  --font:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --tap:52px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --header-h:66px;
  --shadow:0 2px 4px rgba(79,32,16,.05), 0 14px 34px -14px rgba(79,32,16,.22);
  --shadow-lg:0 4px 8px rgba(79,32,16,.06), 0 34px 70px -28px rgba(79,32,16,.35);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font);background:var(--cream);color:var(--ink);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%}
img{display:block}
button{font:inherit;color:inherit}
a{color:var(--teal-deep);text-underline-offset:3px}

/* ---------- type ---------- */
.mono{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.display{font-weight:800;font-size:clamp(2rem,6.2vw,3.5rem);line-height:1.04;letter-spacing:-.03em;margin:0;color:var(--navy)}
.h2{font-weight:800;font-size:clamp(1.5rem,4.4vw,2.3rem);line-height:1.14;letter-spacing:-.022em;margin:0 0 .5em;color:var(--navy)}
.h3{font-weight:700;font-size:1.08rem;line-height:1.32;margin:0 0 .4em;color:var(--navy)}
.lede{font-size:clamp(1rem,2.6vw,1.12rem);color:var(--body);line-height:1.62;margin:0}
.tiny{font-size:.77rem;color:var(--muted);line-height:1.55}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
.center{text-align:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--tap);padding:0 1.7rem;border-radius:var(--r-pill);
  font-weight:700;font-size:1rem;border:2px solid transparent;cursor:pointer;
  text-decoration:none;transition:transform .12s,background .15s,box-shadow .15s;
}
.btn:active{transform:translateY(1px)}
.btn-alert{background:var(--gold);color:var(--brown);box-shadow:0 6px 20px -7px rgba(254,209,54,.9)}
.btn-alert:hover{background:var(--gold-deep)}
.btn-alert:disabled{background:var(--cream-2);color:var(--muted);cursor:not-allowed;box-shadow:none}
.btn-teal{background:var(--teal);color:#fff;box-shadow:0 6px 20px -8px rgba(35,167,172,.85)}
.btn-teal:hover{background:var(--teal-deep)}
.btn-quiet{background:transparent;border-color:var(--hair);color:var(--navy)}
.btn-quiet:hover{background:var(--cream-2)}
.btn-onDark{background:transparent;border-color:var(--hair-dark);color:#fff}
.btn-onDark:hover{background:var(--surface-dark)}
.btn-block{display:flex;width:100%}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(255,246,238,.93);
     backdrop-filter:blur(14px);border-bottom:1px solid var(--hair-soft)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:100%;gap:1rem}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--navy)}
.mark svg{flex:none}
.mark b{font-weight:800;font-size:1.08rem;letter-spacing:-.025em}
.hdr-links{display:none;gap:1.6rem}
.hdr-links a{color:var(--body);text-decoration:none;font-size:.88rem;font-weight:600}
.hdr-links a:hover{color:var(--teal-deep)}
@media(min-width:900px){.hdr-links{display:flex}}
.hdr .mono{color:var(--muted)}

/* ============================================================
   THE DESK, now on a deep teal ground, not flat navy
   ============================================================ */
.desk{
  background:linear-gradient(168deg, var(--navy) 0%, #235863 55%, var(--teal-deep) 100%);
  color:#fff;padding:clamp(1.8rem,4vw,3rem) 0 clamp(3rem,7vw,4.5rem);
  position:relative;overflow:hidden;
}
.desk::before{
  content:"";position:absolute;top:-20vw;right:-28vw;width:82vw;height:82vw;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle, transparent 39%, rgba(178,237,237,.16) 39.4%, transparent 40%),
    radial-gradient(circle, transparent 55%, rgba(178,237,237,.11) 55.4%, transparent 56%),
    radial-gradient(circle, transparent 71%, rgba(178,237,237,.07) 71.4%, transparent 72%);
}
.desk .display.desk .h2{color:#fff}
.desk .lede{color:var(--on-dark)}
.desk-head{position:relative;z-index:2;max-width:40ch;margin-bottom:clamp(1.8rem,4vw,2.6rem)}
.desk-head .mono{color:var(--gold);display:block;margin-bottom:.9rem}
.desk-head .display{margin-bottom:1rem}
.desk-head .display em{font-style:normal;color:var(--gold)}
/* The headline and the trust card start at the same height, so the
   number is the first thing in view rather than buried below the fold. */
.desk-grid{position:relative;z-index:2;display:grid;gap:1.6rem}
@media(min-width:960px){
  .desk-grid{grid-template-columns:minmax(0,1fr) 380px;column-gap:3.2rem;row-gap:0;align-items:start}
  .desk-head{grid-column:1;grid-row:1;margin-bottom:2.2rem}
  .build{grid-column:1;grid-row:2}
  .rail{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--header-h) + 20px)}
}
@media(max-width:959px){
  .desk-head{order:1}
  .rail{order:2}
  .build{order:3}
}

/* ------------------------------------------------------------
   The form sits in its own panel. On the gradient it was reading
   as loose fields floating on the page; a darker surface with a
   pale edge separates it and still lets the inner blocks
   (coverage map, flyer preview) read as raised on top of it.
   ------------------------------------------------------------ */
.build{
  background:rgba(4,28,38,.42);
  border:1px solid rgba(178,237,237,.24);
  border-radius:var(--r-lg);
  padding:1.3rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.06);
}
@media(min-width:620px){.build{padding:1.9rem}}

/* progress rail */
.steps{display:flex;gap:.45rem;margin-bottom:1.7rem;list-style:none;padding:0}
.steps li{flex:1;min-width:0}
.steps button{width:100%;text-align:left;background:none;border:0;padding:0 0 .6rem;cursor:pointer;
  border-top:3px solid var(--hair-dark);color:var(--on-dark-dim);transition:color .15s,border-color .15s}
.steps li.done button{border-top-color:var(--teal-pale);color:var(--on-dark)}
.steps li.now button{border-top-color:var(--gold);color:#fff}
.steps .n{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;margin:.55rem 0 .15rem}
.steps .t{display:block;font-size:.83rem;font-weight:600;line-height:1.25}
.steps button:disabled{cursor:default}

.panel{display:none}
.panel.on{display:block;animation:rise .28s cubic-bezier(.2.7.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel h2{font-size:clamp(1.3rem,3.4vw,1.75rem);font-weight:800;letter-spacing:-.02em;margin:0 0 .35rem;color:#fff}
.panel .sub{color:var(--on-dark);font-size:.95rem;margin:0 0 1.7rem;max-width:52ch}

/* fields */
.field{margin-bottom:1.15rem}
.field > label.legend{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem;color:#fff}
.opt{color:var(--on-dark-dim);font-weight:500;font-size:.8rem}
.hint{font-size:.8rem;color:var(--on-dark-dim);margin:-.15rem 0 .5rem;line-height:1.5}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;min-height:var(--tap);padding:.8rem .95rem;font-family:inherit;font-size:16px;
  background:var(--surface-dark);border:1.5px solid var(--hair-dark);border-radius:var(--r);
  color:#fff;transition:border-color .15s,background .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;
}
textarea{min-height:96px;resize:vertical;line-height:1.55}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.34)}
input:focus,textarea:focus{outline:none;border-color:var(--teal-pale);background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(178,237,237,.24)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--red)}
.err{color:var(--gold);font-size:.82rem;margin:.4rem 0 0;font-weight:600;display:none}
.err.on{display:block}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{border:1.5px solid var(--hair-dark);background:var(--surface-dark);border-radius:var(--r-pill);
  padding:0 1.05rem;min-height:46px;display:inline-flex;align-items:center;cursor:pointer;
  font-size:.92rem;font-weight:600;color:var(--on-dark);transition:all .13s}
.chip:hover{border-color:var(--teal-pale);color:#fff}
.chip[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:var(--brown)}
.vh{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   THE ALERT PREVIEW, a static illustration, not a live editor.
   Showing a finished example is clearer than watching a half-built
   one assemble itself while you type.
   ============================================================ */
.rail-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;gap:1rem}
.rail-label .mono{color:var(--on-dark-dim)}
.phonemock{display:block;width:100%;max-width:300px;height:auto;margin:0 auto;
  filter:drop-shadow(0 26px 50px rgba(0,0,0,.42))}
.rail-cap{margin:1.1rem auto 0;max-width:32ch;text-align:center;font-size:.84rem;
  line-height:1.55;color:var(--on-dark-dim)}

@media(max-width:959px){
  /* no longer a live preview, so it sits after the form rather than
     hogging the top of the screen */
  .rail{margin:.5rem auto 2.2rem;max-width:320px}
  body{padding-bottom:84px}
}

/* ---------- coverage selector ---------- */
.coverage{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);
  padding:1.2rem;margin-bottom:1.3rem}
.cov-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:rgba(0,0,0,.2)}
.cov-stage svg{position:absolute;inset:0;width:100%;height:100%}
.cov-ring{fill:rgba(254,209,54,.09);stroke:var(--gold);stroke-width:2.2;transition:r .55s cubic-bezier(.3.85.3,1)}
.cov-pin{fill:var(--gold)}
.cov-cap{display:flex;justify-content:space-between;align-items:baseline;margin-top:.8rem;gap:1rem}
.cov-cap b{font-size:.92rem;font-weight:700;color:#fff}
.cov-cap .mono{color:var(--on-dark-dim)}

.tiers{display:grid;gap:.6rem;margin-bottom:1.2rem}
.tier{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;cursor:pointer;
  background:var(--surface-dark);border:1.5px solid var(--hair-dark);border-radius:var(--r);
  padding:.95rem 1rem;transition:border-color .15s,background .15s,box-shadow .15s;color:#fff}
.tier:hover{border-color:var(--teal-pale)}
.tier[aria-pressed=true]{border-color:var(--gold);background:rgba(254,209,54,.11);box-shadow:0 0 0 2px rgba(254,209,54,.26)}
.tier .dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--hair-dark);display:grid;place-items:center}
.tier[aria-pressed=true] .dot{border-color:var(--gold)}
.tier[aria-pressed=true] .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--gold)}
.tier .info{flex:1;min-width:0}
.tier .info b{display:block;font-size:.98rem;font-weight:700}
.tier .info span{display:block;font-size:.82rem;color:var(--on-dark-dim);line-height:1.4;margin-top:.1rem}
.tier .cost{flex:none;font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.tbc{display:inline-block;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;
  background:rgba(254,209,54,.18);color:var(--gold);border:1px solid rgba(254,209,54,.45);
  padding:.15rem .45rem;border-radius:3px;vertical-align:middle}
.addon{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;cursor:pointer;color:#fff;
  background:transparent;border:1.5px dashed var(--hair-dark);border-radius:var(--r);padding:.9rem 1rem}
.addon[aria-pressed=true]{border-style:solid;border-color:var(--gold);background:rgba(254,209,54,.09)}
.addon .box{flex:none;width:20px;height:20px;border-radius:5px;border:2px solid var(--hair-dark);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:var(--brown)}
.addon[aria-pressed=true] .box{background:var(--gold);border-color:var(--gold)}
.addon[aria-pressed=true] .box::after{content:"✓"}

/* receipt */
.receipt{border:1px solid var(--hair-dark);border-radius:var(--r);overflow:hidden;margin-bottom:1.2rem}
.receipt-row{display:flex;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--hair-dark);font-size:.9rem;align-items:baseline}
.receipt-row:last-child{border-bottom:0}
.receipt-row .k{flex:none;width:104px;font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;color:var(--on-dark-dim);text-transform:uppercase}
.receipt-row .v{flex:1;min-width:0;word-wrap:break-word}
.receipt-row .v.dim{color:var(--on-dark-dim)}
.receipt-row .edit{background:none;border:0;color:var(--teal-pale);font-size:.78rem;font-weight:600;cursor:pointer;text-decoration:underline;padding:.2rem}
.total{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:rgba(255,255,255,.11);font-weight:800;font-size:1.12rem}

.notice{background:var(--surface-dark);border:1px solid var(--hair-dark);border-left:3px solid var(--teal-pale);
  border-radius:var(--r-sm);padding:.9rem 1rem;font-size:.86rem;color:var(--on-dark);line-height:1.55}
.notice strong{color:#fff}
.notice.warn{border-left-color:var(--gold)}
/* the same block on light sections */
.notice.light{background:var(--cream-2);border-color:var(--hair);border-left-color:var(--teal);color:var(--body)}
.notice.light strong{color:var(--navy)}

.done-tick{width:64px;height:64px;border-radius:50%;background:rgba(178,237,237,.2);color:var(--teal-pale);
  display:grid;place-items:center;margin:0 auto 1.1rem}
.nextlist{list-style:none;padding:0;margin:0;counter-reset:n;display:grid;gap:.9rem}
.nextlist li{display:flex;gap:.8rem;font-size:.9rem;color:var(--on-dark);line-height:1.5}
.nextlist li::before{counter-increment:n;content:counter(n,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:.66rem;color:var(--gold);padding-top:.25rem;letter-spacing:.1em}

/* ============================================================
   BELOW THE FOLD, alternating warm bands
   ============================================================ */
.sec{padding:clamp(3.2rem,7.5vw,5rem) 0}
.sec-cream{background:var(--cream)}
.sec-cream2{background:var(--cream-2)}
.sec-teal{background:var(--teal-wash)}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy .h2.sec-navy .h3{color:#fff}
.sec-navy .lede{color:var(--on-dark)}
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-deep);display:block;margin-bottom:.9rem}
.sec-navy .eyebrow{color:var(--gold)}

/* trust strip */

/* split with illustration */
.split{display:grid;gap:2.2rem;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:3.4rem}}
.split-art svg{width:100%;height:auto;display:block}
@media(max-width:899px){.split-art{max-width:480px;margin-inline:auto}}
.checklist{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.85rem;font-size:.95rem;color:var(--body)}
.checklist li{display:flex;gap:.65rem;align-items:flex-start;line-height:1.5}
.checklist .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:.7rem;font-weight:800;margin-top:1px}

/* three steps */

/* reunions */
.reunions{display:grid;gap:1.2rem;margin-top:2.2rem}
.reunions[data-count="1"]{max-width:380px;margin-inline:auto}
.reunions[data-count="2"]{max-width:680px;margin-inline:auto}
.reunions[data-count="3"]{max-width:1000px;margin-inline:auto}
@media(min-width:700px){
  .reunions{grid-template-columns:repeat(3,1fr)}
  .reunions[data-count="2"]{grid-template-columns:repeat(2,1fr)}
  .reunions[data-count="1"]{grid-template-columns:1fr}
}
.reunion{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
/* No fixed frame and no object-fit: each photo renders at its own
   ratio, so nothing is ever cropped whatever shape it was shot in. */
.reunion img{width:100%;height:auto;display:block}
.reunion-ph{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,var(--cream-2) 0 12px,var(--cream-3) 12px 24px);
  display:grid;place-items:center;text-align:center;padding:1rem;border-bottom:1px solid var(--hair-soft)}
.reunion-ph .mono{color:var(--muted);font-size:.6rem}
.reunion-body{padding:1.1rem 1.2rem 1.3rem}
.reunion-body .tagline{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--teal-deep);display:block;margin-bottom:.45rem}
.reunion-body p{margin:0;font-size:.9rem;color:var(--body);line-height:1.55}
.placeholder-flag{background:var(--gold);color:var(--brown);font-family:var(--mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.3rem .6rem;border-radius:4px;display:inline-block;font-weight:600}

/* timeline */
.timeline{list-style:none;padding:0;margin:2.2rem 0 0;display:grid;gap:0;position:relative}
.timeline li{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding-bottom:1.7rem;position:relative}
.timeline li:last-child{padding-bottom:0}
.tl-dot{width:34px;height:34px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;
  font-family:var(--mono);font-size:.66rem;font-weight:600;z-index:2;position:relative}
.timeline li:not(:last-child)::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--teal-pale)}
.tl-body h3{margin:.3rem 0 .3rem;font-size:1.02rem}
.tl-body p{margin:0;font-size:.92rem;color:var(--body);line-height:1.6}
.sec-navy .tl-body p{color:var(--on-dark)}
.sec-navy .tl-dot{background:var(--gold);color:var(--brown)}
.sec-navy .timeline li:not(:last-child)::before{background:rgba(255,255,255,.22)}

/* faq */
.faq{max-width:800px}
.faq details{border-bottom:1px solid var(--hair-soft)}
.faq details:first-of-type{border-top:1px solid var(--hair-soft)}
.faq summary{cursor:pointer;list-style:none;padding:1.2rem 2.2rem 1.2rem 0;position:relative;
  font-weight:600;font-size:1rem;min-height:var(--tap);display:flex;align-items:center;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.4rem;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--teal);border-bottom:2.5px solid var(--teal);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq .a{padding:0 0 1.3rem;color:var(--body);font-size:.93rem;max-width:66ch}
.faq .a p{margin:0 0 .65rem}.faq .a p:last-child{margin:0}

/* closing band */
.closing{background:linear-gradient(150deg,var(--teal) 0%,var(--teal-deep) 100%);color:#fff;text-align:center}
.closing .h2{color:#fff}
.closing .lede{color:rgba(255,255,255,.92)}

footer{background:var(--navy);color:var(--on-dark-dim);padding:3rem 0 calc(2rem + var(--safe-b));font-size:.86rem}
.foot-grid{display:grid;gap:2rem;margin-bottom:2.2rem}
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr}}
footer h4{margin:0 0 .85rem;color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
footer a{color:var(--on-dark);text-decoration:none}
footer a:hover{color:var(--teal-pale)}
footer .mark b{color:#fff}
.foot-legal{border-top:1px solid var(--hair-dark);padding-top:1.5rem;font-size:.76rem;line-height:1.7}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:45;background:rgba(41,77,103,.97);
  backdrop-filter:blur(12px);border-top:1px solid var(--hair-dark);
  padding:.6rem 16px calc(.6rem + var(--safe-b));display:none}
.dock.on{display:block}
@media(min-width:960px){.dock{display:none!important}}
.demobar{background:var(--brown);color:rgba(255,255,255,.78);font-size:.75rem;text-align:center;padding:.5rem 16px;line-height:1.45}
.demobar b{color:var(--gold)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ============================================================
   ORIGINAL ILLUSTRATION SET
   The sprite draws with these tokens so one palette drives the
   logo, the spot icons and the two scenes.
   ============================================================ */
:root{
  --ink-line:#1F3A4D;   /* the single outline weight across all art */
  --fur:#FFFAF5;
  --gold-soft:#FFF0BF;
  --paper-2:#FFFFFF;
}
.logo{height:42px;width:auto;display:block}
.logo-sm{height:38px}
.art{width:100%;height:auto;display:block}
.ico{width:64px;height:64px;display:block;margin-bottom:1rem}
.reunion-ph .ph-art{width:96px;height:80px;margin:0 auto .7rem;display:block}

/* ------------------------------------------------------------
   The photo slot ships filled.
   An empty dashed box read as broken, so the card loads with a
   sample portrait and a standing label that says exactly what it
   is. The moment a real photo arrives, both disappear.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Flyer panel + richer plan cards
   ------------------------------------------------------------ */
.flyerbox{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-lg);padding:1rem;margin-top:1.6rem}
.flyerbox-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem;gap:1rem}
.flyerbox-head .mono{color:var(--gold)}
.btn-mini{background:transparent;border:1px solid var(--hair-dark);color:var(--on-dark);
  border-radius:var(--r-pill);font-size:.74rem;font-weight:600;padding:.32rem .8rem;cursor:pointer}
.btn-mini:hover{background:var(--surface-dark);color:#fff}
.flyer-canvas{width:100%;height:auto;display:block;border-radius:var(--r-sm);
  background:#fff;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.btn-quiet.onDark{border-color:var(--hair-dark);color:#fff}
.btn-quiet.onDark:hover{background:var(--surface-dark)}

.tier .specs{display:block;font-size:.84rem;color:var(--on-dark);margin-top:.15rem}
.tier .specs b{display:inline;font-weight:700;color:#fff}
.tier .info > b .flag{background:var(--gold);color:var(--brown);font-family:var(--mono);
  font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.16rem .4rem;
  border-radius:3px;margin-left:.4rem;vertical-align:middle}
.tier .cost{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.addon .cost{font-weight:800}

/* ------------------------------------------------------------
   Header trust block + the real logo
   ------------------------------------------------------------ */
.logo{height:44px;width:auto;display:block}
.logo-sm{height:40px}

/* phone mockup */
.phonemock{display:block;width:100%;max-width:290px;height:auto;margin:0 auto;
  filter:drop-shadow(0 28px 54px rgba(0,0,0,.45))}
.phonemock-tag{margin:.9rem auto 0;text-align:center;font-family:var(--mono);
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-dim)}

/* ------------------------------------------------------------
   Trust card, sits above the phone, the first thing that lands
   after the headline. The number counts up on every visit.
   ------------------------------------------------------------ */
.trustcard{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='108' viewBox='0 0 120 120'%3E%3Cg fill='%2323A7AC' fill-opacity='0.075'%3E%3Cellipse cx='27' cy='62' rx='13' ry='17.5' transform='rotate(-24 27 62)'/%3E%3Cellipse cx='49' cy='40' rx='13.5' ry='18.5' transform='rotate(-9 49 40)'/%3E%3Cellipse cx='77' cy='40' rx='13.5' ry='18.5' transform='rotate(9 77 40)'/%3E%3Cellipse cx='99' cy='62' rx='13' ry='17.5' transform='rotate(24 99 62)'/%3E%3Cpath d='M63 66c18 0 32 13 34 27 2 15-13 26-34 26s-36-11-34-26c2-14 16-27 34-27z'/%3E%3C/g%3E%3C/svg%3E") repeat, linear-gradient(170deg, var(--teal-wash) 0%, var(--paper-2) 46%);
  background-size:108px 108px, auto;
  padding:1.5rem 1.2rem 1.5rem;text-align:center;margin:0 auto 1.5rem;max-width:310px;
  box-shadow:0 18px 44px -18px rgba(0,0,0,.5);
  border:1px solid rgba(35,167,172,.22);
}
/* a warm bar across the top so the card never reads as a blank panel */
.trustcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg, var(--teal) 0%, var(--gold) 55%, var(--red) 100%);
}
.trustcard-tag{
  display:inline-block;background:var(--gold);color:var(--brown);white-space:nowrap;
  font-family:var(--font);font-size:.86rem;font-weight:800;letter-spacing:.01em;
  padding:.42rem 1.1rem;border-radius:var(--r-pill);margin:0 auto .9rem;
  box-shadow:0 5px 14px -6px rgba(254,209,54,.8);
}
.trustcard-badge{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--teal-wash);margin:.3rem auto .7rem;
}
.trustcard-badge svg{width:26px;height:26px;--dog-fill:var(--teal-deep)}
.trustcard-num{
  display:block;font-size:2.9rem;font-weight:800;letter-spacing:-.035em;line-height:1;
  color:var(--teal-deep);font-variant-numeric:tabular-nums;
}
.trustcard-cap{
  display:block;margin-top:.5rem;font-size:.86rem;font-weight:500;color:var(--body);
}
@media(max-width:959px){.trustcard{margin-top:.5rem}}

/* the number gives a small nod as it lands on the real figure */
.trustcard-num #ownerCount{display:inline-block;transition:transform .3s cubic-bezier(.2,1.6.4,1)}
.trustcard-num #ownerCount.counted{transform:scale(1.06)}

/* trust card interior, facts row and the live dot fill what was blank space */
.trustcard-cap{position:relative}
.livedot{
  display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok, #00B656);
  margin-right:.45rem;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(0,182,86,.55);animation:livepulse 2.4s ease-out infinite;
}
@keyframes livepulse{
  0%{box-shadow:0 0 0 0 rgba(0,182,86,.5)}
  70%{box-shadow:0 0 0 8px rgba(0,182,86,0)}
  100%{box-shadow:0 0 0 0 rgba(0,182,86,0)}
}
@media(prefers-reduced-motion:reduce){.livedot{animation:none}}

/* ------------------------------------------------------------
   Consent checkbox, a real 24px target, not a hairline default
   ------------------------------------------------------------ */
.consent{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--hair-dark)}
.check{display:flex;gap:.75rem;align-items:flex-start;cursor:pointer;font-weight:500}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check-box{
  flex:none;width:24px;height:24px;border-radius:6px;margin-top:1px;
  border:2px solid var(--hair-dark);background:var(--surface-dark);
  display:grid;place-items:center;transition:background .13s,border-color .13s;
}
.check input:checked + .check-box{background:var(--gold);border-color:var(--gold)}
.check input:checked + .check-box::after{content:"✓";color:var(--brown);font-size:.85rem;font-weight:800;line-height:1}
.check input:focus-visible + .check-box{outline:3px solid var(--teal-pale);outline-offset:2px}
.check-text{font-size:.86rem;line-height:1.5;color:var(--on-dark)}
.check-text a{color:var(--teal-pale);text-decoration:underline;text-underline-offset:2px}
.check[aria-invalid="true"] .check-box{border-color:var(--red)}

/* ------------------------------------------------------------
   Step pages: everything below the funnel belongs to step 1 only
   ------------------------------------------------------------ */
body:not(.step-1) .home-only,
body:not(.step-1) .desk-head,
body:not(.step-1) .rail.fap-scope:not(.fap-step-1) .home-only.fap-scope:not(.fap-step-1) .desk-head.fap-scope:not(.fap-step-1) .rail{display:none}
body:not(.step-1) .desk-grid.fap-scope:not(.fap-step-1) .desk-grid{grid-template-columns:minmax(0,1fr)}
body:not(.step-1) .build.fap-scope:not(.fap-step-1) .build{grid-column:1;grid-row:1;max-width:620px;margin:0 auto}
body:not(.step-1) .desk.fap-scope:not(.fap-step-1) .desk{padding-top:clamp(1.4rem,3vw,2.2rem)}
.steppage-head{display:none;margin-bottom:1.6rem}
body:not(.step-1) .steppage-head.fap-scope:not(.fap-step-1) .steppage-head{display:block}
.steppage-head .mono{color:var(--gold);display:block;margin-bottom:.5rem}
.steppage-head h2{font-size:clamp(1.4rem,4vw,2rem);font-weight:800;letter-spacing:-.025em;margin:0;color:#fff}

/* ------------------------------------------------------------
   Coverage map, a neighborhood, phones lighting up inside the
   area the plan actually covers
   ------------------------------------------------------------ */
.cov-set{opacity:0;pointer-events:none;transition:opacity .35s ease}
.cov-set.on{opacity:1}
.cov-phone{animation:phoneIn .4s ease both}
@keyframes phoneIn{from{opacity:0}to{opacity:1}}
.cov-pin{filter:drop-shadow(0 0 7px rgba(254,209,54,.7))}
@media(prefers-reduced-motion:reduce){
  .cov-ring{transition:none}
  .cov-phone{animation:none}
  .cov-set{transition:none}
}
@keyframes covRipple{
  0%{opacity:.55;transform:scale(.28)}
  75%{opacity:0;transform:scale(4.4)}
  100%{opacity:0;transform:scale(4.4)}
}
.cov-pin{filter:drop-shadow(0 0 6px rgba(254,209,54,.85))}
@media(prefers-reduced-motion:reduce){
  .cov-ripple{animation:none;opacity:.18;transform:scale(2.2)}
  }

/* ------------------------------------------------------------
   Legal pages, real pages, not a '#'
   ------------------------------------------------------------ */
.fap-legal{background:var(--cream);padding:clamp(2.5rem,6vw,4rem) 20px}
.legal{max-width:760px;margin:0 auto;color:var(--body);font-size:.97rem;line-height:1.72}
.legal h1{margin:0 0 .4rem}
.legal h2{font-size:1.12rem;font-weight:800;color:var(--navy);margin:2.2rem 0 .6rem;letter-spacing:-.015em}
.legal p{margin:0 0 1rem}
.legal ul{margin:0 0 1.2rem;padding-left:1.2rem}
.legal li{margin-bottom:.5rem}
.legal a{color:var(--teal-deep)}
.legal strong{color:var(--navy)}
.legal-date{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.8rem}
.legal-callout{background:var(--teal-wash);border-left:4px solid var(--teal);border-radius:var(--r-sm);
  padding:1rem 1.2rem;margin:0 0 1.8rem;font-size:.95rem}
.legal-foot{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--hair);font-size:.9rem}

/* ------------------------------------------------------------
   How it works, icon, label, description. No ring around the
   icon: at this size the shapes carry themselves, and the extra
   circle was competing with the paw and the pin inside it.
   ------------------------------------------------------------ */
.howsteps{list-style:none;display:grid;gap:1.3rem;margin:2.8rem 0 0;padding:0;align-items:stretch}
@media(min-width:820px){.howsteps{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.howsteps li{
  background:var(--paper-2);
  border-radius:var(--r-lg);
  border-top:5px solid var(--teal);
  padding:2rem 1.6rem 2.2rem;
  box-shadow:var(--shadow);
  text-align:center;
}
.howsteps li:nth-child(2){border-top-color:var(--gold)}
.howsteps li:nth-child(3){border-top-color:var(--red)}
.howicon{display:block;width:76px;margin:0 auto 1.3rem}
.howicon svg{width:100%;height:auto;display:block;color:var(--teal-deep)}
.howsteps h3{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:var(--navy);margin:0 0 .65rem}
.howsteps p{margin:0;font-size:.93rem;color:var(--body);line-height:1.65}

/* small trust line under the hero lede, carries the reassurances the
   old stat band used to (no account, free flyer, secure checkout) */
.hero-note{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin:1.4rem 0 0;
  font-size:.83rem;color:var(--on-dark-dim)}
.hero-note span{display:inline-flex;align-items:center;gap:.45rem}
.dotk{width:6px;height:6px;border-radius:50%;background:var(--teal-pale);flex:none}
.fap-cta-row{margin:1.8rem 0 0}

/* WordPress integration, scoped so nothing leaks into the theme */
.fap-scope{font-family:var(--font);color:var(--ink)}
.fap-scope *.fap-scope *::before.fap-scope *::after{box-sizing:border-box}
.fap-bleed{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.fap-vh{position:absolute!important;width:1px;height:1px;opacity:0;pointer-events:none;overflow:hidden}
.fap-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   CORRECTIONS
   The step-scoping selectors were flattened into one impossible
   compound selector during a build step, so nothing matched.
   Restated here, where the cascade puts them last.
   ============================================================ */

.desk .display,
.desk-head .display { color: #FFF6EE; }

body:not(.step-1) .home-only,
body:not(.step-1) .desk-head,
body:not(.step-1) .rail,
.fap-scope:not(.fap-step-1) .home-only,
.fap-scope:not(.fap-step-1) .desk-head,
.fap-scope:not(.fap-step-1) .rail { display: none !important; }

body:not(.step-1) .desk-grid,
.fap-scope:not(.fap-step-1) .desk-grid { grid-template-columns: minmax(0,1fr) !important; }

body:not(.step-1) .build,
.fap-scope:not(.fap-step-1) .build { grid-column: 1 !important; grid-row: 1 !important; max-width: 620px; margin: 0 auto; }

body:not(.step-1) .steppage-head,
.fap-scope:not(.fap-step-1) .steppage-head { display: block; }

body.step-2 footer, body.step-3 footer, body.step-4 footer,
body.step-2 .hdr-links, body.step-3 .hdr-links, body.step-4 .hdr-links { display: none !important; }

@media (max-width: 959px) {
  .desk-head { order: 1; }
  .rail      { order: 2; margin: 0 auto 1.6rem; }
  .build     { order: 3; }
}

/* Step pages already state the step in the header; the panel heading
   underneath repeats it verbatim. Keep one. */
body:not(.step-1) .panel > h2,
.fap-scope:not(.fap-step-1) .panel > h2 { display: none; }

/* ============================================================
   DENSITY
   The forms were taller than a phone screen, so the primary
   action sat below the fold on both steps. Tighter spacing, and
   phone/email share a row once there is width for it.
   ============================================================ */
.field { margin-bottom: .95rem; }
.field > label, .field .legend { margin-bottom: .2rem; display:block; }
.hint { font-size: .78rem; line-height: 1.4; margin: .1rem 0 .4rem; }
.panel h2 { margin-bottom: .35rem; }
.panel .sub { margin-bottom: 1.1rem; }
.build { padding: 1.15rem; }
@media (min-width: 620px){ .build { padding: 1.5rem; } }
input[type=text], input[type=tel], input[type=email], textarea {
  min-height: 48px; padding: .62rem .85rem;
}
textarea { min-height: 76px; }
.consent { margin-top: 1rem; padding-top: 1rem; }
.check-text { font-size: .8rem; line-height: 1.45; }
.chips { gap: .4rem; }
.steps { margin-bottom: 1.1rem; }

/* Two-up for the short fields once the panel is wide enough. */
@media (min-width: 620px){
  .panel[data-step="1"].on { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }
  .panel[data-step="1"].on > * { grid-column: 1 / -1; }
  .panel[data-step="1"].on .field:has(#fPhone) { grid-column: 1; }
  .panel[data-step="1"].on .field:has(#fEmail) { grid-column: 2; }
}

/* The flyer preview is a tall portrait; cap it so the buttons stay visible. */
.flyer-canvas { max-height: 300px; width: auto; max-width: 100%; margin: 0 auto; }
.flyerbox { padding: .8rem; margin-top: 1.1rem; }

/* ===== HERO HEIGHT =====
   The 40ch cap wrapped the headline onto five lines, pushing the
   form off screen. Wider measure, slightly smaller cap. */
@media (min-width: 960px){
  .desk-head { max-width: 52ch; margin-bottom: 1.4rem; }
  .desk-head .display { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
  .desk-head .lede { max-width: 48ch; }
  .desk { padding-top: clamp(1.4rem, 3vw, 2.2rem); }
}
.hero-note { margin-top: 1rem; }


/* ============================================================
   ARTICLES + REFINEMENT
   ============================================================ */

/* ---------- long-form reading ---------- */
.fap-articles{background:var(--cream);padding:clamp(2.5rem,6vw,4.5rem) 0}
.article{max-width:68ch;margin:0 auto}
.article-title{margin:.2rem 0 .5rem}
.article-meta{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 2rem}
.article-body{font-size:1.04rem;line-height:1.75;color:var(--body)}
.article-body p{margin:0 0 1.25rem}
.article-body h2{font-size:1.35rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;margin:2.4rem 0 .8rem}
.article-body strong{color:var(--navy)}
.article-body a{color:var(--teal-deep);font-weight:600}
.article-cta{margin-top:2.6rem;padding-top:2rem;border-top:1px solid var(--hair)}

/* ---------- post cards ---------- */
.cardgrid{display:grid;gap:1.2rem;margin-top:2.6rem}
@media(min-width:820px){.cardgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{background:var(--paper-2);border-radius:var(--r-lg);box-shadow:var(--shadow);
  border-top:5px solid var(--teal);overflow:hidden;transition:transform .18s,box-shadow .18s}
.pcard:nth-child(2){border-top-color:var(--gold)}
.pcard:nth-child(3){border-top-color:var(--red)}
.pcard:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(41,77,103,.45)}
.pcard-link{display:block;padding:1.6rem 1.4rem 1.8rem;text-decoration:none;color:inherit}
.pcard-link .mono{color:var(--muted);font-size:.62rem;display:block;margin-bottom:.6rem}
.pcard-link h2{font-size:1.08rem;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.3;margin:0 0 .6rem}
.pcard-link p{font-size:.9rem;line-height:1.6;color:var(--body);margin:0 0 1rem}
.pcard-more{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-deep);font-weight:600}

/* ---------- refinement: depth and texture ---------- */

/* A faint paw field behind the cream bands, so large flat areas have
   something to catch the eye without competing with the content. */
.sec-cream::before,.sec-cream2::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='104' height='104' viewBox='0 0 120 120'%3E%3Cg fill='%2323A7AC' fill-opacity='0.028'%3E%3Cellipse cx='27' cy='62' rx='13' ry='17.5' transform='rotate(-24 27 62)'/%3E%3Cellipse cx='49' cy='40' rx='13.5' ry='18.5' transform='rotate(-9 49 40)'/%3E%3Cellipse cx='77' cy='40' rx='13.5' ry='18.5' transform='rotate(9 77 40)'/%3E%3Cellipse cx='99' cy='62' rx='13' ry='17.5' transform='rotate(24 99 62)'/%3E%3Cpath d='M63 66c18 0 32 13 34 27 2 15-13 26-34 26s-36-11-34-26c2-14 16-27 34-27z'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
.sec-cream,.sec-cream2{position:relative}
.sec-cream>*,.sec-cream2>*{position:relative;z-index:1}

/* Hairline rules between bands, so sections read as deliberate. */
.sec+.sec{border-top:1px solid rgba(41,77,103,.07)}

/* Cards lift on hover across the site. */
.howsteps li,.reunion{transition:transform .18s ease,box-shadow .18s ease}
.howsteps li:hover,.reunion:hover{transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(41,77,103,.4)}

/* Buttons get a touch of dimension. */
.btn-alert{box-shadow:0 8px 20px -8px rgba(254,209,54,.75)}
.btn-alert:hover{box-shadow:0 12px 26px -10px rgba(254,209,54,.9)}

/* The eyebrow gets a small rule, a detail that reads as considered. */
.eyebrow{position:relative;display:inline-block}
.sec .center .eyebrow::after{content:"";display:block;width:34px;height:2px;
  background:var(--gold);margin:.55rem auto 0;border-radius:2px}

/* Section headings sit on a slightly tighter measure for rhythm. */
.sec .center .h2{max-width:22ch;margin-inline:auto}

/* Softer, warmer shadow across cards. */
:root{--shadow:0 14px 34px -16px rgba(41,77,103,.35)}

/* ===== MENU LIST =====
   wp_nav_menu emits bare <li>, which renders bullets inside the flex nav. */
.hdr-links{list-style:none;margin:0;padding:0}
.hdr-links li{list-style:none;display:block;margin:0}
.hdr-links li::marker{content:""}

/* ===== MOBILE PROOF BLOCK =====
   The counter and the example ad sit above the form on phones, the way
   people expect proof before a form. Both are made compact so the first
   field still arrives quickly rather than a screen and a half later. */
@media (max-width: 959px) {
  .rail { max-width: 420px; }
  .trustcard { padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
  .trustcard-num { font-size: clamp(2rem, 11vw, 2.9rem); line-height: 1.05; }
  .trustcard-badge svg { width: 20px; height: 20px; }
  .trustcard-tag { font-size: .68rem; padding: .28rem .7rem; }
  .phonemock { max-width: 208px; }
  .rail-cap { font-size: .78rem; margin-top: .8rem; max-width: 34ch; }
  .rail-label { margin-bottom: .5rem; }
}
@media (max-width: 480px) {
  .phonemock { max-width: 184px; }
}

/* ============================================================
   MOBILE PAIR
   Counter and example ad sit side by side above the form. The
   counter is stripped back for this size: no paw watermark, no
   badge, no gradient edge, just the number and one line under it.
   ============================================================ */
@media (max-width: 959px) {
  .rail{
    display:grid; grid-template-columns:1fr 1fr;
    gap:.9rem; align-items:center;
    max-width:460px; margin:0 auto 1.8rem;
  }
  .rail .trustcard{ grid-column:1; margin:0; }
  .rail .phonemock{ grid-column:2; grid-row:1; max-width:100%; margin:0; }
  .rail .phonemock-tag,
  .rail .rail-cap{ grid-column:1 / -1; margin:.2rem 0 0; text-align:center; }

  /* simplified counter */
  .trustcard{
    background:var(--paper-2) !important;
    padding:1rem .8rem !important;
    text-align:center; border-radius:var(--r-md);
  }
  .trustcard::before{ display:none !important; }
  .trustcard-badge{ display:none !important; }
  .trustcard-tag{
    position:static; display:inline-block; margin:0 0 .5rem;
    font-size:.6rem; padding:.22rem .55rem; letter-spacing:.04em;
  }
  .trustcard-num{ font-size:clamp(1.7rem,8.5vw,2.3rem); line-height:1; margin:0; display:block; }
  .trustcard-cap{ font-size:.7rem; line-height:1.35; margin-top:.35rem; display:block; }
  .trustcard-cap .livedot{ display:none; }
  .rail-cap{ font-size:.76rem; }
  .phonemock-tag{ font-size:.6rem; }
}


/* ===== COUNTER CARD MOBILE =====
   Softer corners and real colour: a teal wash, a brand-gradient cap
   and the number in teal, so it reads as part of the site rather
   than a plain white box. */
@media (max-width: 959px) {
  .trustcard{
    border-radius: 22px !important;
    background: linear-gradient(160deg,#FFFFFF 0%,#F3FBFB 55%,#E7F6F6 100%) !important;
    border: 1px solid rgba(35,167,172,.28);
    box-shadow: 0 10px 26px -14px rgba(41,77,103,.45);
    position: relative; overflow: hidden;
    padding: 1.1rem .85rem 1rem !important;
  }
  .trustcard::after{
    content:""; position:absolute; top:0; left:0; right:0; height:5px;
    background: linear-gradient(90deg,var(--teal) 0%,var(--gold) 55%,var(--red) 100%);
  }
  .trustcard-tag{
    background: var(--gold) !important; color: var(--navy) !important;
    border-radius: 999px; font-weight: 800;
  }
  .trustcard-num{ color: var(--teal-deep) !important; letter-spacing: -.02em; }
  .trustcard-cap{ color: var(--body) !important; }
}


/* ===== MOBILE CTA HEAD =====
   The label belongs under the phone it describes, not centred across
   the pair. The explanatory line goes: the mockup already says it. */
.mobile-cta-head{ display:none; }

@media (max-width: 959px) {
  .rail .rail-cap{ display:none !important; }

  .rail .phonemock-tag{
    grid-column: 2 !important;
    text-align: center;
    margin: .45rem 0 0 !important;
    font-size: .58rem;
    letter-spacing: .12em;
  }

  .mobile-cta-head{
    display: block;
    order: 3;
    margin: .2rem 0 1rem;
    text-align: center;
    font-family: var(--font);
    font-weight: 800;
    font-size: clamp(1.35rem, 6.6vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #FFF6EE;
  }
  .build{ order: 4 !important; }
}