/* ==========================================================================
   FLA 2026 — v3 (campaign rebuild)

   style.css still supplies the locked hero, masthead, buttons, footer, dock,
   type primitives and motion. Everything below is the AIDA rebuild.

   AIDA spine:
     A  hero
     I  story  →  principles  →  the loop (the bridge to the buyer)
     D  proof  →  awards  →  brands  →  why  →  support  →  growth
     A  essentials + FAQ  →  register

   Three action points, not one: a gold CTA closes the proof band and the
   support band, and the register section closes the page. A visitor who is
   convinced at outlet number two hundred should not have to scroll past six
   more chapters to act on it.
   ========================================================================== */

:root{
  --cream:      #FBF1DC;
  --cream-2:    #F5E7C9;
  --paper:      #FFFDF8;
  --ink-soft:   #3A3226;
}

.tbc{ background:#FCEEC7; color:#7A5A00; padding:1px 6px; border-radius:3px; font-weight:700; }

/* --------------------------------------------------------------------------
   Shared editorial primitives
   -------------------------------------------------------------------------- */

/* Every section used to open with a small gold kicker above its heading.
   They were dropped: ten of them down one page turned the accent colour into
   wallpaper, and none of them told the reader anything the heading below did
   not already say. The headings now lead, and the gold is left to carry the
   rule, the pillars and the CTAs, where it still means something.
   The 16px that sat between kicker and heading goes with them. */
.head h2,
.register-copy h2{ margin-top:0; }

/* the CTA that closes a navy band */
.band-cta{
  margin-top:clamp(40px, 4.6vw, 62px);
  padding-top:clamp(30px, 3.4vw, 44px);
  border-top:1px solid rgba(255,255,255,.14);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.band-cta-line{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(17px, 2vw, 24px);
  text-transform:uppercase;
  letter-spacing:.005em;
  color:#fff;
  max-width:22ch;
}
@media (max-width:520px){
  .band-cta .btn{ width:100%; }
}

/* ==========================================================================
   1 — HERO stat strip (the artwork itself is untouched, from style.css)
   --------------------------------------------------------------------------
   Four equal cells rather than a wrapping flex row. The old version let the
   fourth stat drop to a second line with an orphaned divider next to it.
   ========================================================================== */
.hero-stats{
  display:grid;
  grid-template-columns:repeat(4, auto);
  justify-content:start;
  margin-top:24px;
}
.hero-stats li{
  padding:0 clamp(12px, 1.4vw, 20px);
  border-left:1px solid var(--line);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--text-2);
  line-height:1.4;
}
.hero-stats li:first-child{ padding-left:0; border-left:0; }
.hero-stats strong{
  display:block;
  font-family:var(--display);
  font-variation-settings:'wdth' 90;
  font-weight:800;
  font-size:17px;
  color:var(--navy);
  letter-spacing:-.01em;
}

/* --- mobile hero ---------------------------------------------------------
   The deck is the only thing on the page that shows all four brands at once,
   and at 390px inside the gutters each panel was about 90px wide, which is
   below the size the logos are legible at. Let it run to both edges. */
@media (max-width:999px){
  .deck{
    width:calc(100% + var(--gutter) * 2);
    max-width:none;
    margin-inline:calc(var(--gutter) * -1);
  }
}
@media (max-width:520px){
  .hero-stats{ grid-template-columns:repeat(2, 1fr); gap:14px 0; max-width:300px; }
  .hero-stats li:nth-child(odd){ padding-left:0; border-left:0; }
  .hero-stats li:nth-child(even){ padding-left:16px; border-left:1px solid var(--line); }

  /* style.css hides the header CTA below 520px, which leaves the masthead as
     a logo and nothing else on exactly the device most of this traffic will
     arrive on. Kept, just compact. */
  .masthead-cta{
    display:inline-flex;
    margin-left:auto;
    padding:11px 15px;
    font-size:11px;
    letter-spacing:.06em;
    gap:0;
  }
  .masthead-cta svg{ display:none; }
}

/* ==========================================================================
   2 — THE STORY: the gap we saw, and the fix each brand was built around
   -------------------------------------------------------------------------
   A centred head, then a row-by-row comparison table: the problem on the
   left, the fix directly across from it on the right, joined by an arrow.
   Row order matches so a reader never has to hunt for which fix answers
   which gap.
   ========================================================================== */
.story{
  padding:var(--band) 0;
  background:var(--cream);
}

.story-head{ margin-bottom:clamp(18px, 2vw, 26px); }
.story-head h2{
  margin-top:0;
  color:var(--navy);
  font-size:clamp(28px, 3.5vw, 46px);
  line-height:1.02;
}
.story-head h2 .dark{ color:var(--ink); }
.story-lede{
  margin-top:22px;
  font-size:clamp(15.5px, 1.7vw, 17.5px);
  line-height:1.65;
  color:var(--text-2);
  max-width:56ch;
  margin-inline:auto;
}

/* ---- the comparison table ----
   A single bordered card, not a bare list: a two-tone header bar (grey /
   gold) over two column-tinted zones (grey / cream), split by one
   continuous seam with a gold arrow-circle straddling it at every row.
   Both columns read the same way — badge, then copy, left to right — so
   the eye tracks straight down instead of ping-ponging side to side. */
.compare-table{
  position:relative;
  margin-top:clamp(40px, 4.6vw, 60px);
  border:1px solid var(--line);
  border-radius:clamp(16px, 1.8vw, 22px);
  overflow:hidden;
  box-shadow:0 30px 60px -32px rgba(11,30,75,.32);
}

.compare-table-head{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.compare-th{
  padding:clamp(18px, 2vw, 24px) 20px;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-size:clamp(15px, 1.6vw, 18px);
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
}
.compare-th--gap{
  background:var(--silver-2);
  color:var(--text-2);
  border-right:1px solid var(--line);
}
.compare-th--fix{
  background:linear-gradient(135deg, var(--gold-lt), var(--gold));
  color:var(--navy-deep);
}

.compare-table-row{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
}
.compare-table-row:not(:first-of-type){ border-top:1px solid var(--line); }

.compare-table-cell{
  display:flex;
  align-items:center;
  gap:clamp(20px, 2.2vw, 28px);
  padding:clamp(30px, 3.6vw, 44px) clamp(24px, 3.4vw, 48px);
}
.compare-table-cell--gap{
  background:var(--silver-1);
  border-right:1px solid var(--line);
}
.compare-table-cell--fix{
  background:var(--cream-2);
}

/* icon badges — a raised, shadowed disc behind every icon so both columns
   carry equal visual weight instead of the fix side reading as an
   afterthought next to the solid gap icons. */
.compare-badge{
  display:grid;
  place-items:center;
  flex:none;
  width:clamp(78px, 6.4vw, 96px);
  height:clamp(78px, 6.4vw, 96px);
  border-radius:50%;
}
.compare-badge--gap{ background:#fff; }
.compare-badge--gap .compare-ico{
  width:78%;
  height:78%;
  filter:drop-shadow(0 12px 20px rgba(20,24,31,.22)) drop-shadow(0 2px 6px rgba(20,24,31,.16));
}
.compare-badge--fix{
  background:linear-gradient(135deg, var(--gold-lt), var(--gold));
  box-shadow:0 16px 30px -10px rgba(176,134,43,.6), 0 4px 10px -3px rgba(20,24,31,.2);
}
.compare-ico-svg{
  width:46%;
  height:46%;
  color:#fff;
}

.compare-table-cell h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(20px, 2vw, 25px);
  line-height:1.2;
}
.compare-table-cell--gap h3{ color:var(--ink); }
.compare-table-cell--fix h3{ color:var(--navy); }
.compare-table-cell p{
  margin-top:8px;
  font-size:clamp(15px, 1.5vw, 17px);
  line-height:1.55;
  color:var(--text-2);
}

.compare-table-arrow{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  z-index:2;
  display:grid;
  place-items:center;
  width:clamp(46px, 3.8vw, 58px);
  height:clamp(46px, 3.8vw, 58px);
  border-radius:50%;
  background:var(--gold);
  color:#fff;
  box-shadow:0 10px 22px -5px rgba(176,134,43,.6), 0 0 0 5px var(--paper);
}
.compare-table-arrow svg{ width:clamp(20px, 1.8vw, 24px); height:clamp(20px, 1.8vw, 24px); }

@media (max-width:760px){
  .compare-table-head{ display:none; }
  .compare-table-row,
  .compare-table-row:not(:first-of-type){
    grid-template-columns:1fr;
    border-top:none;
    border-bottom:1px solid var(--line);
  }
  .compare-table-row:last-of-type{ border-bottom:none; }
  .compare-table-cell,
  .compare-table-cell--fix{
    flex-direction:column;
    text-align:center;
    border-right:none;
    padding:clamp(28px, 7vw, 36px) clamp(22px, 6vw, 30px);
    gap:16px;
  }
  .compare-table-cell--fix{ padding-top:clamp(16px, 4vw, 20px); }
  .compare-table-arrow{
    position:relative;
    left:auto; top:auto;
    transform:rotate(90deg);
    margin:0 auto;
    box-shadow:0 10px 22px -5px rgba(176,134,43,.45);
  }
}

/* ==========================================================================
   3 — THE BRIDGE: customer-first loop
   -------------------------------------------------------------------------
   The page has spent two sections on why customers like this. This is the
   section that converts that into a reason to buy the franchise, so the
   fourth step lands on the owner rather than on the customer. Drawn as a
   closed track: the old version had a small floating return arrow that read
   as a stray mark rather than as a cycle.
   ========================================================================== */
.loop{
  padding:var(--band) 0;
  background:var(--paper);
  text-align:center;
}
.loop-head{ margin-bottom:clamp(20px, 2.2vw, 28px); }
/* Default h2 sizing (clamp floor 30px) lets "Recession-Proof By Model" wrap
   onto its own second line below ~430px, turning this two-line heading into
   three. Scaled down further so the line stays intact from 320px up, still
   reaching the same 52px cap as every other h2 on wider screens. */
.loop-head h2{ color:var(--navy); font-size:clamp(17px, 5.4vw, 52px); }
.loop-sub{
  max-width:58ch;
  margin-inline:auto;
  font-size:17px;
  line-height:1.65;
  color:var(--text-2);
}

.loop-chain{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(14px, 2vw, 26px);
  margin-top:clamp(44px, 5vw, 68px);
  counter-reset:none;
}
/* the track the four steps sit on */
.loop-chain::before{
  content:"";
  position:absolute;
  left:12.5%; right:12.5%; top:32px;
  height:2px;
  background:linear-gradient(90deg, var(--silver-3), var(--gold-pale), var(--silver-3));
  z-index:0;
}
.loop-node{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 4px;
}
.loop-node-mark{
  width:64px; height:64px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--paper);
  border:2px solid var(--navy);
  box-shadow:0 0 0 8px var(--paper);
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:22px;
  color:var(--navy);
}
.loop-node.is-owner .loop-node-mark{
  border-color:var(--gold);
  color:var(--navy-ink);
  background:var(--gold-lt);
}
.loop-node-label{
  margin-top:18px;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(13px, 1.35vw, 16px);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.2;
  color:var(--navy);
  max-width:14ch;
}
.loop-node.is-owner .loop-node-label{ color:var(--gold); }
.loop-node-note{
  margin-top:9px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-3);
  max-width:20ch;
}

.loop-return{
  margin-top:clamp(30px, 3.2vw, 42px);
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 20px;
  border:1px dashed var(--silver-3);
  border-radius:999px;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-2);
}
.loop-return span{ font-size:17px; color:var(--gold); line-height:1; }

@media (max-width:820px){
  .loop-chain{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:36px 16px; }
  .loop-chain::before{ display:none; }
  .loop-node-label,
  .loop-node-note{ max-width:none; }
}
@media (max-width:420px){
  .loop-node-mark{ width:52px; height:52px; font-size:19px; }
}

/* ==========================================================================
   4 — PROOF: the 200+ moment
   ========================================================================== */
.proof{
  position:relative;
  overflow:hidden;
  padding:clamp(50px, 5.6vw, 78px) 0;
  background:linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-ink) 100%);
  text-align:center;
  color:#fff;
}
/* diagonal line motif lives on its own layer so it can be masked away from
   the centre, where the 200+ figure and the copy need a clean field to sit
   on, and left to read toward the edges instead */
.proof::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:repeating-linear-gradient(108.6deg,
    rgba(216,180,92,.3) 0 2px,
    rgba(216,180,92,0) 2px 26px);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 7%, transparent 18%, transparent 82%, #000 93%, #000 100%);
  mask-image:linear-gradient(90deg, #000 0%, #000 7%, transparent 18%, transparent 82%, #000 93%, #000 100%);
  pointer-events:none;
}
.proof .shell{ position:relative; z-index:1; }
.proof-flag{
  position:absolute; left:0; right:0; top:0;
  height:6px;
  z-index:2;
  display:flex;
}
.proof-flag span{ flex:1; }
.proof-flag span:nth-child(1){ background:var(--kcuts); }
.proof-flag span:nth-child(2){ background:#9AA3B4; }
.proof-flag span:nth-child(3){ background:var(--clippers); }
.proof-flag span:nth-child(4){ background:#6C87B8; }

.proof-eyebrow{
  font-family:var(--display);
  font-variation-settings:'wdth' 90;
  font-size:clamp(17px, 2.2vw, 27px);
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  line-height:1.35;
  color:#fff;
  max-width:32ch;
  margin-inline:auto;
}
.proof-eyebrow-accent{ color:var(--gold-lt); }

.proof-num{
  margin-top:clamp(14px, 1.8vw, 22px);
  font-family:var(--display);
  font-variation-settings:'wdth' 90;
  font-weight:800;
  font-size:clamp(80px, 16.5vw, 248px);
  line-height:.86;
  color:var(--gold-lt);
  letter-spacing:-.02em;
}
.proof-num-label{
  margin-top:6px;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(24px, 3.6vw, 42px);
  text-transform:uppercase;
  letter-spacing:.16em;
  color:#fff;
}
.proof-num-rule{
  display:block;
  width:78px; height:3px;
  margin:14px auto 0;
  background:linear-gradient(90deg, var(--gold) 0%, var(--gold-lt) 100%);
}
.proof-markets{
  margin-top:clamp(22px, 2.6vw, 30px);
  font-size:clamp(15px, 1.7vw, 18px);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.proof-markets i{
  font-style:normal;
  color:var(--gold-lt);
  font-size:1.3em;
  font-weight:900;
  margin:0 14px;
  vertical-align:-.03em;
}

.proof-row{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  max-width:840px;
  margin:clamp(40px, 4.6vw, 58px) auto 0;
}
.proof-stat{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 clamp(10px, 2.2vw, 24px);
}
.proof-stat:not(:first-child)::before{
  content:"";
  position:absolute;
  left:0; top:6px; bottom:6px;
  width:1px;
  background:rgba(255,255,255,.16);
}
.proof-stat b{
  font-family:var(--display);
  font-variation-settings:'wdth' 90;
  font-weight:800;
  font-size:clamp(30px, 3.8vw, 46px);
  color:#fff;
  transition:color .2s ease;
}
.proof-stat i{
  display:block;
  width:28px; height:4px;
  margin-top:10px;
  border-radius:2px;
  transition:width .2s ease;
}
.proof-stat-name{
  margin-top:12px;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(18px, 2.1vw, 24px);
  line-height:1.15;
  color:#fff;
}
.proof-stat-kcuts i{ background:var(--kcuts); }
.proof-stat-kskin i{ background:#9AA3B4; }
.proof-stat-clippers i{ background:var(--clippers); }
.proof-stat-smoovee i{ background:#6C87B8; }
@media (min-width:901px){
  .proof-stat:hover b{ color:var(--gold-lt); }
  .proof-stat:hover i{ width:40px; }
}
@media (max-width:640px){
  .proof-row{ grid-template-columns:repeat(2, minmax(0, 1fr)); row-gap:32px; }
  .proof-stat::before{ display:none; }
}

.proof .band-cta-line{ max-width:none; }
.proof .btn-gold{
  background:linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 16px 30px -14px rgba(0,0,0,.55);
}
.proof .btn-gold:hover{
  background:linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-lt) 100%);
}
.proof .band-cta-copy{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.proof .band-cta-aside{
  font-family:var(--sans);
  font-size:clamp(15px, 1.6vw, 18px);
  font-style:italic;
  font-weight:500;
  color:var(--gold-lt);
}

/* ==========================================================================
   6 — FOUR BRANDS
   -------------------------------------------------------------------------
   A pill eyebrow, a two-tone headline and four icon-badged cards.
   ========================================================================== */
.brands-sec{
  padding:var(--band) 0;
  background:var(--cream);
}

.brands-head{ margin-bottom:clamp(18px, 2vw, 26px); }
.brands-head h2{ color:var(--navy); }
.brands-head h2 em{ font-style:normal; color:var(--gold); }

.brand-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:18px;
  margin-top:clamp(40px, 5vw, 64px);
}
.bcard{
  --brand:var(--navy);
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--white);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 26px 46px -32px rgba(11,30,75,.5);
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.bcard:hover{ transform:translateY(-5px); box-shadow:0 34px 56px -32px rgba(11,30,75,.55); }
.bcard-kcuts   { --brand:var(--kcuts); }
.bcard-kskin   { --brand:var(--kskin); }
.bcard-clippers{ --brand:#1F4E79; } /* blue on this card only, per request — global --clippers red is untouched elsewhere on the page */
.bcard-smoovee { --brand:var(--smoovee); }

.bcard-art{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--silver-2);
}
.bcard-art img.bcard-photo{
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 28%;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.bcard:hover .bcard-photo{ transform:scale(1.04); }
/* keeps the brand colour present on the image without tinting the skin */
.bcard-art::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(7,20,51,.28) 100%);
  pointer-events:none;
}
.bcard-body{
  padding:20px 20px 22px;
  background:var(--white);
  flex:1;
  display:flex;
  flex-direction:column;
}
/* one optical height for four logos of very different proportions */
.bcard-logo{
  display:flex;
  align-items:center;
  height:42px;
  margin-bottom:14px;
}
.bcard-logo img{ width:auto; max-width:100%; display:block; }
.bcard-kcuts    .bcard-logo img{ height:28px; }
.bcard-kskin    .bcard-logo img{ height:36px; }
.bcard-clippers .bcard-logo img{ height:42px; }
.bcard-smoovee  .bcard-logo img{ height:36px; }

.bcard-title{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:24px;
  line-height:1.18;
  color:var(--brand);
}
.bcard-kskin .bcard-title{ color:var(--navy); }

.bcard-traits{
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px 12px;
  flex:1;
  align-content:start;
}
.bcard-traits li{
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
}
.tico{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--silver-1);
  background:color-mix(in srgb, var(--brand) 14%, white);
}
.bcard-traits svg{
  width:19px; height:19px;
  color:var(--brand);
}
.bcard-kskin .bcard-traits svg{ color:var(--navy); }
.bcard-traits span{
  font-size:13.5px;
  line-height:1.28;
  font-weight:700;
  color:var(--text-2);
}

@media (max-width:1000px){
  .brand-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:560px){
  .brand-grid{ grid-template-columns:1fr; gap:16px; }
}

/* ==========================================================================
   7 — WHY THIS MODEL WORKS: an editorial list, not icon cards
   -------------------------------------------------------------------------
   .why in style.css is authored for v1's navy band and sets colour:white on
   the section. v3 puts it on paper, so the inherited colour has to be reset
   here or anything added to this section later renders invisible.
   ========================================================================== */
.why{ padding:var(--band) 0; background:var(--paper); color:var(--ink); }
.why-head{ margin-bottom:clamp(18px, 2vw, 26px); }
.why-head h2{ color:var(--navy); }
.why-sub{
  max-width:48ch;
  margin:0 auto;
  text-align:center;
  font-size:17px;
  color:var(--text-2);
}
.why :focus-visible{ outline-color:var(--gold); }

.why-list{ margin-top:clamp(36px, 4vw, 56px); border-top:1px solid var(--line); }
.why-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);
  gap:clamp(14px, 3vw, 40px);
  padding:clamp(22px, 2.6vw, 32px) 0;
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.why-row h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 90;
  font-weight:800;
  font-size:clamp(20px, 2.3vw, 29px);
  text-transform:uppercase;
  line-height:1.06;
  color:var(--navy);
}
.why-row h3 em{ font-style:normal; color:var(--gold); }
.why-row p{ font-size:15.5px; line-height:1.6; color:var(--text-2); max-width:52ch; }
.why-close{
  margin-top:clamp(28px, 3vw, 40px);
  text-align:center;
  font-family:var(--display);
  font-variation-settings:'wdth' 90;
  font-weight:800;
  font-size:clamp(18px, 2.2vw, 26px);
  text-transform:uppercase;
  color:var(--navy);
}
@media (max-width:860px){
  .why-row{ grid-template-columns:1fr; gap:6px; }
}

/* ==========================================================================
   8 — THE HANDHOLDING: a typographic relay
   -------------------------------------------------------------------------
   Each arrow belongs to the word that follows it, not the one before, so a
   wrap never leaves a separator dangling at the end of a line.
   ========================================================================== */
.hand{
  position:relative;
  overflow:hidden;
  padding:var(--band) 0;
  background:linear-gradient(200deg, var(--navy-deep) 0%, var(--navy-ink) 100%);
  color:#fff;
  text-align:center;
}
/* same treatment as the proof section: a tight gold line motif, masked away
   from the centre so it reads at the edges instead of behind the copy */
.hand::after{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background:repeating-linear-gradient(108.6deg,
    rgba(216,180,92,.3) 0 2px,
    rgba(216,180,92,0) 2px 26px);
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 7%, transparent 18%, transparent 82%, #000 93%, #000 100%);
  mask-image:linear-gradient(90deg, #000 0%, #000 7%, transparent 18%, transparent 82%, #000 93%, #000 100%);
  pointer-events:none;
}
.hand .shell{ position:relative; z-index:1; }
.hand-head h2{ color:#fff; }

.relay{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:center;
  margin-top:clamp(36px, 4.4vw, 56px);
}
.relay-item{
  display:inline-flex;
  align-items:baseline;
  white-space:nowrap;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(23px, 4.4vw, 54px);
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.relay-item.is-you{ color:var(--gold-lt); }
.relay .relay-sep{
  font-style:normal;
  font-size:clamp(15px, 1.9vw, 23px);
  color:var(--gold);
  opacity:.75;
  margin:0 .42em;
}

.hand-note{
  margin:clamp(32px, 3.4vw, 44px) auto 0;
  max-width:62ch;
  font-size:16px;
  line-height:1.7;
  color:rgba(255,255,255,.72);
}
.hand .band-cta{ border-top:0; padding-top:0; margin-top:clamp(34px, 3.6vw, 46px); }
.hand .btn-gold{
  background:linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 16px 30px -14px rgba(0,0,0,.55);
}
.hand .btn-gold:hover{
  background:linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-lt) 100%);
}
.hand-disclaimer{
  margin-top:clamp(30px, 3.2vw, 42px);
  font-size:12.5px;
  color:rgba(255,255,255,.55);
}

/* ==========================================================================
   9 — MULTI-OUTLET AMBITION
   ========================================================================== */
.grow{ padding:var(--band) 0; background:var(--cream); text-align:center; }
.grow-head h2{ color:var(--navy); }

/* three-step chain, mirroring the .loop-chain pattern used earlier on the
   page, so "start with one" reads as a process rather than a numeric claim */
.grow-chain{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px, 2vw, 26px);
  max-width:640px;
  margin:clamp(36px, 4.4vw, 56px) auto 0;
}
.grow-chain::before{
  content:"";
  position:absolute;
  left:16%; right:16%; top:32px;
  height:2px;
  background:linear-gradient(90deg, var(--silver-3), var(--gold-pale), var(--silver-3));
  z-index:0;
}
.grow-node{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 4px;
}
.grow-node-mark{
  width:64px; height:64px;
  border-radius:50%;
  display:grid; place-items:center;
  background:var(--cream);
  border:2px solid var(--navy);
  box-shadow:0 0 0 8px var(--cream);
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:22px;
  color:var(--navy);
}
.grow-node.is-owner .grow-node-mark{
  border-color:var(--gold);
  color:var(--navy-ink);
  background:var(--gold-lt);
}
.grow-node-label{
  margin-top:14px;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(13px, 1.35vw, 16px);
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1.25;
  color:var(--navy);
  max-width:15ch;
}
.grow-node.is-owner .grow-node-label{ color:var(--gold); }

@media (max-width:480px){
  .grow-chain{ gap:8px; }
  .grow-node-label{ max-width:none; font-size:11.5px; }
}

.grow-body{ margin:clamp(32px, 3.6vw, 46px) auto 0; max-width:62ch; font-size:17px; line-height:1.7; color:var(--text-2); }
.grow-close{
  margin-top:22px;
  font-family:var(--display);
  font-variation-settings:'wdth' 90;
  font-weight:800;
  font-size:clamp(20px, 2.6vw, 30px);
  text-transform:uppercase;
  color:var(--navy);
}
.grow .band-cta{ border-top:0; padding-top:0; margin-top:clamp(28px, 3vw, 40px); }
.grow-note{ margin-top:16px; font-size:12.5px; color:var(--text-2); opacity:.8; }

@media (max-width:420px){
  .grow-node-mark{ width:52px; height:52px; font-size:19px; }
}

/* ==========================================================================
   10 — THE ESSENTIALS + FAQ
   -------------------------------------------------------------------------
   The three numbers a franchise buyer looks for were previously only inside
   a collapsed accordion row. They are the last thing standing between
   interest and the form, so they are stated in the open above it.
   ========================================================================== */
.faq{ padding:var(--band) 0; background:var(--paper); }
.faq-head{ margin-bottom:clamp(34px, 3.6vw, 46px); }
.faq-head h2{ color:var(--navy); }

.essentials{
  max-width:820px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.essential{
  background:var(--cream);
  padding:clamp(20px, 2.4vw, 28px) clamp(16px, 2vw, 24px);
  text-align:center;
}
.essential dt{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.essential dd{ margin:0; }
.essential dd b{
  display:block;
  margin-top:12px;
  font-family:var(--display);
  font-variation-settings:'wdth' 90;
  font-weight:800;
  font-size:clamp(21px, 2.5vw, 30px);
  line-height:1.05;
  letter-spacing:-.015em;
  color:var(--navy);
}
.essential dd b i{ font-style:normal; letter-spacing:-.03em; }
.essential-note{
  margin-top:10px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--text-2);
}
@media (max-width:640px){
  .essentials{ grid-template-columns:1fr; }
}

.faq-list{ max-width:820px; margin:clamp(28px,3vw,40px) auto 0; display:flex; flex-direction:column; gap:10px; }
.qa-row{
  position:relative;
  border:1px solid var(--silver-3);
  border-radius:14px;
  background:var(--white);
  overflow:hidden;
  transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.qa-row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--silver-3); transition:background-color .18s ease; }
.qa-row:hover{ border-color:var(--gold-pale); }
.qa-row[open]{ border-color:var(--gold-pale); box-shadow:0 20px 36px -28px rgba(11,30,75,.4); }
.qa-row[open]::before{ background:var(--gold); }
.qa-row summary{
  cursor:pointer; list-style:none;
  padding:20px 58px 20px 26px;
  position:relative;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:700;
  font-size:clamp(15.5px, 1.5vw, 17.5px);
  line-height:1.35;
  color:var(--navy);
}
.qa-row summary::-webkit-details-marker{ display:none; }
.qa-row summary::after{
  content:'+'; position:absolute; right:20px; top:17px;
  width:26px; height:26px; display:grid; place-items:center;
  border-radius:50%; background:var(--gold-pale);
  font-size:18px; font-weight:700; line-height:1; color:var(--navy-ink);
  transition:background-color .18s ease;
}
.qa-row[open] summary::after{ content:'\2013'; background:var(--gold); }
.qa-body{ padding:0 26px 22px; }
.qa-body p{ font-size:15.5px; line-height:1.65; color:var(--text-2); }
.qa-body p + p{ margin-top:10px; }

/* ==========================================================================
   11 — ACTION / REGISTER
   ========================================================================== */

/* the free-gift hook: leads the section so it is the first thing read,
   not a footnote buried under the form. A soft pulsing ring behind the
   badge gives it one beat of motion to catch a scrolling eye, then settles.
   Only rendered when the "Show the booth gift offer" Customizer toggle is
   on (Appearance > Customize > FLA 2026 Campaign), off by default. */
.gift-badge{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:9px 20px 9px 12px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--gold-lt) 0%, var(--gold) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 14px 28px -16px rgba(0,0,0,.6);
}
.gift-badge::before{
  content:"";
  position:absolute; inset:0;
  border-radius:999px;
  box-shadow:0 0 0 0 rgba(233,196,106,.55);
  animation:gift-pulse 2.6s ease-out 2;
  pointer-events:none;
}
@keyframes gift-pulse{
  0%{ box-shadow:0 0 0 0 rgba(233,196,106,.55); }
  70%{ box-shadow:0 0 0 14px rgba(233,196,106,0); }
  100%{ box-shadow:0 0 0 14px rgba(233,196,106,0); }
}
.gift-badge-icon{
  display:grid;
  place-items:center;
  flex:none;
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(7,20,51,.12);
  color:var(--navy-ink);
}
.gift-badge-icon svg{ width:16px; height:16px; }
.gift-badge-text{
  font-size:13.5px;
  font-weight:700;
  line-height:1.35;
  color:var(--navy-ink);
}
.gift-badge-text strong{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  margin-right:7px;
}
@media (prefers-reduced-motion: reduce){
  .gift-badge::before{ animation:none; }
}

.register-lede{ margin-top:24px; color:rgba(255,255,255,.78); max-width:44ch; }
.register-emph{
  margin-top:18px;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(16px, 1.8vw, 20px);
  text-transform:uppercase;
  color:var(--gold-lt);
}

.gift-strip{
  margin-top:clamp(28px, 3vw, 40px);
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  padding-top:18px;
  border-top:1px solid var(--line-dark);
  font-size:13.5px;
  line-height:1.6;
  color:rgba(255,255,255,.68);
}
.gift-strip strong{
  flex:none;
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:12.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--gold-lt);
}

.field-check{ display:flex; align-items:flex-start; gap:10px; margin-top:4px; }
.field-check input{ width:auto; margin-top:4px; flex:none; }
.field-check label{ font-size:13.5px; line-height:1.5; color:var(--text-2); text-transform:none; letter-spacing:0; font-weight:500; }

.field-checklist .field-check{ margin-top:0; }
.field-checklist .field-check + .field-check{ margin-top:10px; }

.form-done-t2{ margin-top:4px; font-size:14.5px; color:var(--text-2); }

/* the second field row needs the same collapse the first one gets */
@media (max-width:560px){
  .form .row + .row{ margin-top:0; }
}

/* --------------------------------------------------------------------------
   Small phones (≤380px)

   Three things push the page wider than the viewport at this size, all of
   them pre-existing: the single-column register grid resolves to a plain
   `1fr`, which takes its width from the widest child's min-content rather
   than from the container; the submit button inside it is `white-space:nowrap`
   at 313px; and the masthead lockup plus the header CTA no longer fit on one
   line. Fixed together, because one alone still leaves the page scrolling
   sideways.
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .register-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:380px){
  .form .btn-block{
    white-space:normal;
    font-size:13px;
    letter-spacing:.05em;
    padding-inline:16px;
  }
  .masthead-cta{ padding:11px 13px; }
}


/* ==========================================================================
   12 — WORDPRESS THEME LAYER
   --------------------------------------------------------------------------
   Everything below was added when the static build became a theme. Three
   groups: the mobile menu the static page never had, the form states the
   wired backend needs, and the inner-page styles for the pages that live
   around a landing page (privacy, terms, 404).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Accessible-hidden utility (WordPress convention)
   -------------------------------------------------------------------------- */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* --------------------------------------------------------------------------
   Mobile menu

   base.css hides .mainnav outright below 880px, which left the four section
   links unreachable on exactly the device most of this traffic arrives on.
   The toggle re-opens them as a panel under the sticky masthead. Above 880px
   nothing here applies and the desktop nav is untouched.
   -------------------------------------------------------------------------- */
.navtoggle{
  display:none;
  flex:none;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;   /* 44px is the minimum comfortable tap target */
  padding:0;
  background:transparent;
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--navy);
  cursor:pointer;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.navtoggle-bars{ display:grid; gap:4px; width:18px; }
.navtoggle-bars i{
  display:block;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1), opacity .16s ease;
}
.masthead.is-nav-open .navtoggle{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.masthead.is-nav-open .navtoggle-bars i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.masthead.is-nav-open .navtoggle-bars i:nth-child(2){ opacity:0; }
.masthead.is-nav-open .navtoggle-bars i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* the CTA inside the panel; hidden while the nav is a desktop row */
.mainnav-cta{ display:none; }

/* the masthead CTA has two labels: the long one does not fit next to a logo
   and a menu button on a 320px screen */
.cta-short{ display:none; }

@media (max-width:880px){
  .navtoggle{ display:inline-flex; }

  .mainnav{
    display:block;              /* overrides base.css display:none */
    position:absolute;
    left:0; right:0; top:100%;
    margin:0;
    padding:4px var(--gutter) 16px;
    /* Solid, not translucent. .masthead already carries a backdrop-filter,
       and a second one nested inside it samples an already-filtered backdrop,
       so a 97% white panel still let the hero headline read straight through
       the menu. */
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:0 26px 44px -30px rgba(11,30,75,.6);
    max-height:calc(100vh - var(--header-h));
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .2s ease, transform .22s cubic-bezier(.2,.7,.3,1), visibility .22s;
  }
  .masthead.is-nav-open .mainnav{ opacity:1; visibility:visible; transform:none; }

  .mainnav a{
    display:block;
    padding:15px 2px;           /* 48px rows, comfortably tappable */
    font-size:16px;
    font-weight:600;
    border-bottom:1px solid var(--silver-2);
  }
  .mainnav a::after{ display:none; }

  /* `a.` is load-bearing: base.css sets .mainnav a{color:var(--ink)}, which is
     one specificity point above a lone .mainnav-cta and left this button
     rendering navy text on a navy fill. */
  .mainnav a.mainnav-cta{
    display:block;
    margin-top:14px;
    padding:15px 18px;
    text-align:center;
    background:var(--navy);
    color:#fff;
    border:0;
    border-radius:6px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  /* three items now share the row, so the 28px desktop gap has to go */
  .masthead-row{ gap:10px; }
  .masthead-cta{ margin-left:auto; }
}

@media (max-width:560px){
  .cta-long{ display:none; }
  .cta-short{ display:inline; }
}

/* --------------------------------------------------------------------------
   Form: the states the wired backend introduced
   -------------------------------------------------------------------------- */

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.fla-hp{
  position:absolute !important;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.form-error{
  margin:0 0 18px;
  padding:13px 15px;
  border-left:4px solid var(--clippers);
  border-radius:3px;
  background:#FDF3F4;
  font-size:14.5px;
  line-height:1.5;
  color:#8A1F26;
}

/* after a successful submit, whether in place or via the no-JS round trip */
.form.is-done .btn-block,
.form.is-done .form-note{ display:none; }

/* --------------------------------------------------------------------------
   Inner pages

   Privacy policy, terms, a thank-you page, search, 404. They inherit the
   masthead, the type system and the footer, and nothing else.
   -------------------------------------------------------------------------- */
.shell-narrow{ max-width:820px; }

.inner{ padding:var(--band) 0 calc(var(--band) + 10px); background:var(--paper); }
.inner-head{ margin-bottom:clamp(28px, 3vw, 40px); }
.inner-head h2{ color:var(--navy); }
.inner-meta{
  margin-top:12px;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-3);
}

.inner-body{ font-size:17px; line-height:1.75; color:var(--text-2); }
.inner-body > * + *{ margin-top:20px; }
.inner-body h2,
.inner-body h3,
.inner-body h4{ color:var(--navy); margin-top:38px; }
.inner-body h3{ font-size:clamp(20px, 2.2vw, 26px); text-transform:uppercase; }
.inner-body h4{ font-size:clamp(17px, 1.8vw, 20px); text-transform:uppercase; }
.inner-body a{ color:var(--navy); text-decoration:underline; text-underline-offset:3px; }
.inner-body a:hover{ color:var(--gold); }
/* base.css strips list markers globally, so they are re-declared here */
.inner-body ul,
.inner-body ol{ padding-left:24px; }
.inner-body ul li{ list-style:disc; }
.inner-body ol li{ list-style:decimal; }
.inner-body li + li{ margin-top:8px; }
.inner-body img{ border-radius:12px; }
.inner-body blockquote{
  border-left:4px solid var(--gold);
  padding-left:22px;
  color:var(--ink);
  font-size:18px;
}
.inner-body table{ width:100%; border-collapse:collapse; font-size:15.5px; }
.inner-body th,
.inner-body td{ padding:12px 14px; border:1px solid var(--line); text-align:left; }
.inner-body th{ background:var(--cream); color:var(--navy); }

.inner-thumb{ margin-bottom:28px; }
.inner-thumb img{ border-radius:14px; }

.inner-list{ display:grid; gap:18px; }
.inner-item{
  padding:24px 26px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
}
.inner-item h3{
  font-family:var(--display);
  font-variation-settings:'wdth' 92;
  font-weight:800;
  font-size:clamp(19px, 2vw, 24px);
  line-height:1.2;
  text-transform:uppercase;
  color:var(--navy);
}
.inner-item a:hover{ color:var(--gold); }
.inner-excerpt{ margin-top:10px; font-size:15.5px; color:var(--text-2); }
.inner-empty{ text-align:center; color:var(--text-2); }

.inner-nav{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:46px;
  padding-top:22px;
  border-top:1px solid var(--line);
  font-weight:600;
  color:var(--navy);
}

.inner-404{ text-align:center; }
.inner-404-body{ max-width:46ch; margin:0 auto; font-size:17px; color:var(--text-2); }
.inner-404-cta{ margin-top:34px; }

.pagination{ margin-top:44px; display:flex; justify-content:center; }
.pagination .page-numbers{
  display:inline-block;
  min-width:44px;
  padding:11px 14px;
  margin:0 4px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:7px;
  font-weight:600;
  color:var(--navy);
}
.pagination .current{ background:var(--navy); border-color:var(--navy); color:#fff; }

/* ==========================================================================
   13 — MOBILE OPTIMISATION
   --------------------------------------------------------------------------
   Measured on the built page from 320px to 1600px rather than guessed at.
   Each rule below fixes something that was observably wrong, and the widths
   it was wrong at are recorded next to it.
   ========================================================================== */

/* Belt and braces against a future element escaping the viewport. `clip`
   rather than `hidden`: `hidden` on a root element silently turns the
   masthead's position:sticky into position:static. */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

/* Grey flash on every tap on Android; the buttons already have :active states. */
a, button, summary, label, .chip span{ -webkit-tap-highlight-color:rgba(22,53,127,.12); }

/* --------------------------------------------------------------------------
   Notch and home indicator

   header.php ships viewport-fit=cover so env(safe-area-inset-*) returns real
   values. That is what the dock's bottom padding has always assumed. It also
   means a landscape phone puts the notch over the left gutter, so the shell
   takes the larger of its gutter and the inset.
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  .shell{
    padding-left:max(var(--gutter), env(safe-area-inset-left));
    padding-right:max(var(--gutter), env(safe-area-inset-right));
  }
}

/* --------------------------------------------------------------------------
   Buttons that were too long for a phone

   .btn is white-space:nowrap, which is right for a row of buttons and wrong
   for a full-width one. Measured at 320px: "Explore Franchise Opportunities"
   ran 39px past its own button and pushed the arrow outside the gold fill;
   "Talk To Our Franchise Team" ran 13px past. Still spilling at 390px.
   Both are full-width at this size, so wrapping costs nothing.
   -------------------------------------------------------------------------- */
/* The arrow disc is a flex item with no flex:none of its own, so a label that
   is wider than the button squashes the circle into an ellipse instead of
   overflowing. Measured 18x30 in the form's submit button at 390px. This is
   not a mobile-only fault, it is just where the labels get tight, so the rule
   is unscoped. */
.btn-arrow{ flex:none; }

@media (max-width:430px){
  .band-cta .btn,
  .hero-copy .btn-hero,
  .dock .btn{
    white-space:normal;
    text-align:center;
    line-height:1.25;
    font-size:13px;
    letter-spacing:.05em;
    padding-inline:18px;
  }
}

/* The form's submit label only wrapped below 380px, so between 380 and 430 it
   stayed on one line and squeezed the arrow. Same treatment as the band CTAs. */
@media (max-width:430px){
  .form .btn-block{
    white-space:normal;
    line-height:1.25;
    font-size:13px;
    letter-spacing:.05em;
    padding-inline:16px;
  }
}

/* --------------------------------------------------------------------------
   Touch targets

   Anything a thumb has to hit gets 44px, which is the smallest reliable
   target. The chips and the FAQ rows were both under it.
   -------------------------------------------------------------------------- */
@media (max-width:880px){
  .chip span{
    display:flex;
    align-items:center;
    min-height:44px;
    padding-block:0;
  }
  .field-check input{ width:20px; height:20px; }
  .qa-row summary{ padding-block:18px; }
  .dock .btn{ padding-block:17px; }
}

/* --------------------------------------------------------------------------
   Story comparison table

   Stacked into one column below 760px, where the 78px badge disc and the
   44px cell padding between them left the copy about a third of the row.
   -------------------------------------------------------------------------- */
@media (max-width:420px){
  .compare-badge{ width:66px; height:66px; }
  .compare-table-arrow{ width:40px; height:40px; }
  .compare-table-arrow svg{ width:18px; height:18px; }
  .compare-table-cell{ padding-inline:18px; }
}

/* --------------------------------------------------------------------------
   Proof band

   The market list is five names with a 14px margin either side of each
   separator, which forced a third line at phone widths and left one country
   stranded on it. Tightening the separators pulls it back to two.
   -------------------------------------------------------------------------- */
@media (max-width:520px){
  .proof-markets{ font-size:13.5px; letter-spacing:.06em; }
  .proof-markets i{ margin:0 7px; }
  .proof-num-label{ letter-spacing:.1em; }
}

/* --------------------------------------------------------------------------
   Landscape phones

   A 390x844 phone turned sideways is 390px tall. The full-height rhythm and
   the hero become a lot of scrolling for very little content, so the bands
   tighten and the scroll cue, which points at content already on screen,
   goes away.
   -------------------------------------------------------------------------- */
@media (max-height:520px) and (orientation:landscape){
  :root{ --band:44px; --band-tight:32px; }
  .hero{ padding-block:26px 34px; }
  .scroll-cue{ display:none; }
  .mainnav{ max-height:calc(100dvh - var(--header-h)); }
}