/* =========================================================
   mouthguards.pro — v2
   Concept: the product is the interface. The page is graphite
   and bone; the only colour on it comes from the guard itself.
   ========================================================= */

:root{
  --ground:#15171A;
  --raise:#1C1F23;
  --line:#2B2F35;
  --line-soft:#22262B;
  --bone:#EDE9E3;
  --muted:#8A9099;

  /* brand: red and white */
  --accent:#E63946;
  --on-accent:#FFFFFF;
  --guard:#E63946;

  --gut:clamp(20px,5vw,64px);
  --max:1240px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
/* height:auto matters. Without it an img carrying width/height
   attributes keeps its attribute height while max-width squeezes the
   width, which stretched every gallery picture vertically. */
img,svg{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.defs{position:absolute;width:0;height:0;overflow:hidden}

body{
  font-family:Archivo,system-ui,sans-serif;
  font-variation-settings:'wdth' 100;
  font-weight:400;
  font-size:clamp(15.5px,.4vw + 14.6px,17px);
  line-height:1.62;
  color:var(--bone);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{overflow:hidden}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--bone);color:var(--ground);padding:12px 18px;font-weight:600}
.skip:focus{left:8px;top:8px}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type ---------- */
h1,h2,h3{
  font-weight:700;
  font-variation-settings:'wdth' 118;
  letter-spacing:-.022em;
  line-height:1.02;
  text-wrap:balance;
}
h1{font-size:clamp(2.3rem,6.4vw,3.75rem)}
.big{font-size:clamp(1.9rem,5.2vw,3.1rem);margin-bottom:.55em}
h3{font-size:1.14rem;font-variation-settings:'wdth' 112;letter-spacing:-.012em;line-height:1.18}

.lede,.band-lede,.order-lede,.what-lead{
  color:var(--muted);font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.68;max-width:46ch;
}
.what-lead{color:var(--bone)}

/* ---------- buttons ---------- */
.go,.ghost{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 26px;font-weight:600;font-variation-settings:'wdth' 108;
  letter-spacing:-.005em;border-radius:2px;
  transition:background .45s var(--ease),color .45s var(--ease),
             border-color .45s var(--ease),transform .18s var(--ease);
}
.go{background:var(--accent);color:var(--on-accent)}
.go:hover{transform:translateY(-2px)}
.go:active{transform:none}
.ghost{border:1px solid var(--line);color:var(--bone)}
.ghost:hover{border-color:var(--accent);color:var(--accent)}
.go-wide,.ghost-wide{width:100%}

/* ---------- top bar ---------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:color-mix(in srgb,var(--ground) 86%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.bar.stuck{border-bottom-color:var(--line-soft);
  background:color-mix(in srgb,var(--ground) 95%,transparent)}
.bar-in{
  max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  height:76px;display:flex;align-items:center;gap:20px;
}
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:700;
  font-variation-settings:'wdth' 112;letter-spacing:-.02em;font-size:1.02rem;margin-right:auto}
.mark b{font-weight:700;color:var(--accent)}
.mark-ico{width:auto;height:42px}
.links{display:none}
.bar-go{display:none;padding:10px 18px;font-size:.93rem}

.tog{width:40px;height:40px;display:grid;place-content:center;gap:5px;margin-right:-8px}
.tog span{display:block;width:19px;height:1.5px;background:var(--bone);border-radius:2px;
  transition:transform .3s var(--ease),opacity .3s var(--ease)}
.tog[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.tog[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ---------- mobile sheet ---------- */
.sheet{
  position:fixed;inset:76px 0 0;z-index:55;background:var(--ground);
  padding:clamp(24px,7vw,48px) var(--gut) 48px;
  display:flex;flex-direction:column;justify-content:center;gap:34px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility .32s;
}
.sheet.open{opacity:1;visibility:visible;transform:none}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{
  font-size:clamp(1.65rem,7vw,2.3rem);font-weight:700;
  font-variation-settings:'wdth' 116;letter-spacing:-.022em;
  padding:14px 0;border-bottom:1px solid var(--line-soft);
  opacity:0;transform:translateY(10px);
}
.sheet.open nav a{opacity:1;transform:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sheet.open nav a:nth-child(1){transition-delay:.04s}
.sheet.open nav a:nth-child(2){transition-delay:.08s}
.sheet.open nav a:nth-child(3){transition-delay:.12s}
.sheet.open nav a:nth-child(4){transition-delay:.16s}
.sheet.open nav a:nth-child(5){transition-delay:.20s}

/* ---------- hero ---------- */
.hero{padding:calc(76px + clamp(34px,9vh,78px)) 0 clamp(44px,8vh,80px)}
.hero-in{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);
  display:grid;gap:clamp(36px,7vw,60px)}
/* A grid item defaults to min-width:auto, so the finish rail's eight
   52px chips (483px of them) set the hero's minimum width and pushed
   the whole phone layout out to 504px — the page was being rendered
   zoomed out. With min-width:0 the rail scrolls, as it was meant to. */
.hero-in > *{min-width:0}
.hero-say h1{margin-bottom:.46em}
.hero-say .lede{margin-bottom:1.7em}
.hero-do{display:flex;flex-wrap:wrap;gap:12px}

/* the explainer. 16/9 for the canvas plus room for the control row
   underneath, which is why the box is not itself 16/9. */
.hero-film{position:relative;width:100%;aspect-ratio:16/10.4;min-height:200px;
  border:1px solid var(--line-soft);border-radius:3px;overflow:hidden;
  background:var(--ground)}
.hero-film iframe{display:block;width:100%;height:100%;border:0}
@media (max-width:640px){.hero-film{aspect-ratio:16/11.4}}

/* The film sits at 60% of the band, centred: full width overpowered
   everything around it. Full width on a phone, where 60% would be
   too small to read. */
/* 60% of the reading column, not of the viewport: the band is
   --max wide, so 60% of the page measured 70% of the band. */
.film-wide{width:min(calc(var(--max) * .6), calc(100% - var(--gut) * 2));
  margin:clamp(20px,3vw,30px) auto 0}
@media (max-width:860px){.film-wide{width:100%;padding-inline:var(--gut)}}
.film-wide .hero-film{border-radius:4px}
.film-wide + .wrap .rail-note{margin-top:14px}

/* three prices, a row each, the number doing the work */
.pricerows{list-style:none;margin:clamp(18px,3vw,26px) 0 clamp(22px,3.5vw,30px);padding:0;
  max-width:460px}
.pricerows li{display:flex;align-items:baseline;gap:16px;
  padding:14px 0;border-top:1px solid var(--line-soft)}
.pricerows li:last-child{border-bottom:1px solid var(--line-soft)}
.pricerows strong{font-family:var(--disp,inherit);font-weight:700;
  font-variation-settings:'wdth' 118;font-size:clamp(1.5rem,4vw,1.95rem);
  min-width:3.4ch;letter-spacing:-.02em}
.pricerows span{color:var(--muted);font-size:1rem}

/* the closing block: a price, two things to do, nothing else */
.next .sub{margin-bottom:clamp(20px,3vw,28px)}
.next .hero-do{margin-bottom:clamp(18px,3vw,26px)}

/* the guard */
.stage{
  position:relative;padding:clamp(28px,6vw,46px) clamp(14px,4vw,34px);
  background:
    radial-gradient(120% 140% at 50% -10%,
      color-mix(in srgb,var(--guard) 16%,transparent),transparent 62%),
    var(--raise);
  border:1px solid var(--line-soft);border-radius:3px;
  transition:background .6s var(--ease);
}
.plate{position:relative;border-radius:2px;overflow:hidden}
.plate img{width:100%;height:auto;aspect-ratio:7/5;object-fit:cover;object-position:center 100%;
  animation:settle .7s var(--ease) both}

.g-deep{fill:color-mix(in srgb,var(--guard) 42%,#000);transition:fill .55s var(--ease)}
.g-deep2{fill:color-mix(in srgb,var(--guard) 68%,#000);transition:fill .55s var(--ease)}
.g-body{fill:var(--guard);transition:fill .55s var(--ease)}
.g-edge{fill:none;stroke:color-mix(in srgb,var(--bone) 26%,transparent);stroke-width:2}
.g-sheen{fill:#fff;opacity:.1}

/* one orchestrated entrance, nothing else auto-animates */

@keyframes settle{
  from{opacity:0;transform:translateY(16px) scale(.965)}
  to{opacity:1;transform:none}
}

.stage-cap{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:clamp(16px,4vw,24px);padding-top:16px;
  border-top:1px solid var(--line-soft);
  font-weight:600;font-variation-settings:'wdth' 108;
}
.swatch-dot{width:11px;height:11px;border-radius:50%;background:var(--guard);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--bone) 30%,transparent);
  transition:background .55s var(--ease)}
.stage-tier{margin-left:auto;color:var(--muted);font-weight:400;font-size:.92rem}

/* colour rail */
.rail{display:flex;gap:9px;overflow-x:auto;padding:18px 2px 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;width:52px;height:52px;border-radius:2px;
  background:#15171A var(--c) center 100%/170% no-repeat;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.chip:hover{transform:scale(1.11)}
.chip.is-on{box-shadow:0 0 0 2px var(--ground),0 0 0 3.5px var(--accent)}
.rail-note{margin-top:12px;font-size:.9rem;color:var(--muted)}
.rail-note a{border-bottom:1px solid var(--line);padding-bottom:1px}
.rail-note a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- bands ---------- */
.band{padding:clamp(62px,11vh,116px) 0;border-top:1px solid var(--line-soft)}
/* The top bar is fixed and 77px tall. The hero allows for it; every
   other page opened with a band that did not, so each inside page
   ran its headline up to within 17px of the bar. The rule below gives
   them the same allowance the hero gets, and drops the hairline that
   sat directly beneath the bar with nothing above it. */
main > .band:first-child{padding-top:calc(77px + clamp(44px,7vh,74px));border-top:0}
.band-raise{background:var(--raise)}
.band-lede{margin-bottom:clamp(30px,5vw,46px)}

.what-cols{display:grid;gap:18px;max-width:62ch}
.what-cols p:not(.what-lead){color:var(--muted)}

/* steps — genuinely a sequence, so numbered */
.steps{display:grid;gap:2px;counter-reset:s}
/* Three children in a two-column grid auto-placed the paragraph into
   column 1, which is `auto`, so the 52ch paragraph set the column width
   and crushed the heading into the 1fr beside it — "Built in the lab"
   came out as four stacked words. The number spans both rows instead,
   and the heading and the text are both explicitly in column 2. */
.steps li{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:2px clamp(15px,3vw,24px);align-items:start;
  padding:clamp(22px,4vw,30px) 0;border-top:1px solid var(--line-soft);
}
.steps li:first-child{border-top:0}
.step-n{grid-column:1;grid-row:1 / span 2}
.steps h3{grid-column:2;grid-row:1}
.steps p{grid-column:2;grid-row:2}
.step-n{
  font-weight:700;font-variation-settings:'wdth' 118;
  font-size:clamp(1.5rem,4vw,2rem);line-height:1;
  color:var(--accent);min-width:1.2em;transition:color .45s var(--ease);
}
.steps h3{margin-bottom:.42em}
.steps p{color:var(--muted);max-width:52ch}

/* questions — the objections people actually raise before booking.
   Not an accordion: six short answers are quicker to read than to open. */
.qa{display:grid;gap:0;max-width:74ch}
.qa > div{padding:clamp(20px,3.4vw,26px) 0;border-top:1px solid var(--line-soft)}
.qa > div:first-child{border-top:0;padding-top:0}
.qa h3{font-size:clamp(1.02rem,2.4vw,1.16rem);margin-bottom:.5em}
.qa p{color:var(--muted);max-width:58ch}
.qa p + p{margin-top:.7em}
@media (min-width:860px){
  .qa{grid-template-columns:1fr 1fr;gap:0 clamp(32px,5vw,64px);max-width:none}
  .qa > div:nth-child(2){border-top:0;padding-top:0}
}

/* closing call to action — every page should end with the next move,
   not with the footer. Sits inside .wrap, never on it: .wrap carries
   margin-inline:auto, so a max-width here would centre the block. */
.end{max-width:62ch}
.end .sub{margin-bottom:clamp(20px,3vw,28px)}
.end .hero-do{margin-bottom:clamp(18px,3vw,26px)}

/* ---------- tiers ---------- */
.tiers{display:grid;gap:14px}
.tier{
  display:flex;flex-direction:column;
  padding:clamp(24px,4.5vw,32px);
  background:var(--ground);border:1px solid var(--line-soft);border-radius:3px;
}
.band-raise .tier{background:var(--raise)}
.tier.is-top{border-color:color-mix(in srgb,var(--accent) 48%,var(--line));
  transition:border-color .45s var(--ease)}
.tier-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--line-soft)}
.tier-fig{font-weight:700;font-variation-settings:'wdth' 118;
  font-size:clamp(1.7rem,4.6vw,2.15rem);letter-spacing:-.03em;line-height:1}
.tier-say{margin:16px 0 18px;color:var(--muted);font-size:.97rem}
.tier ul{display:grid;gap:9px;margin-bottom:26px;flex:1}
.tier li{position:relative;padding-left:17px;color:var(--muted);font-size:.95rem;line-height:1.5}
.tier li::before{content:"";position:absolute;left:0;top:.6em;
  width:7px;height:1.5px;background:var(--accent);transition:background .45s var(--ease)}
.tier-foot{margin-top:24px;color:var(--muted);font-size:.94rem}
.tier-foot a{border-bottom:1px solid var(--line);padding-bottom:1px}
.tier-foot a:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- colour grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:14px 10px}
.sw{display:block;text-align:left;transition:transform .22s var(--ease)}
.sw i{
  display:block;aspect-ratio:1;border-radius:3px;background:var(--c);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  transition:box-shadow .22s var(--ease);
}
.sw span{display:block;margin-top:7px;font-size:.72rem;line-height:1.3;color:var(--muted)}
.sw:hover{transform:translateY(-2px)}
.sw:hover span{color:var(--bone)}
.sw.is-on i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 0 0 2px var(--accent)}
.sw.is-on span{color:var(--bone)}

.designs{margin-top:clamp(42px,7vw,64px)}
.sub{margin-bottom:18px}
/* The gallery tile. These rules were written against a class name
   the markup no longer uses (.shots/.shots li), so none of them were
   reaching the gallery at all: no tile background, no border, no
   caption rule, and no image sizing. Matched to the real markup,
   which is ul.gal > li.shot. The grid itself is set in gallery.css. */
.gal .shot{background:var(--ground);border:1px solid var(--line-soft);border-radius:3px;
  overflow:hidden}
.band-raise .gal .shot{background:var(--ground)}
.gal .shot img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.gal .shot span{display:block;padding:9px 11px;font-size:.84rem;color:var(--muted);
  border-top:1px solid var(--line-soft)}

/* ---------- order ---------- */
.order-in{max-width:760px}
.order-lede{margin-bottom:clamp(26px,5vw,38px)}
.ways{display:grid;gap:12px;margin-bottom:clamp(30px,5vw,44px)}
.way{
  display:grid;grid-template-columns:auto 1fr;gap:4px 16px;align-items:center;
  padding:20px 22px;border:1px solid var(--line);border-radius:3px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.way:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,transparent)}
.way svg{grid-row:span 2;color:var(--accent);transition:color .45s var(--ease)}
.way-t{font-weight:600;font-variation-settings:'wdth' 108}
.way-s{color:var(--muted);font-size:.93rem}

.facts{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.facts div{display:flex;justify-content:space-between;gap:16px;
  padding:15px 0;border-bottom:1px solid var(--line-soft)}
.facts dt{font-weight:600;font-variation-settings:'wdth' 108}
.facts dd{color:var(--muted);text-align:right}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-soft);padding:clamp(40px,7vw,56px) 0}
.foot-in{display:grid;gap:22px}
.mark-sm{font-size:.98rem;margin-right:0}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-nav a{color:var(--muted);font-size:.93rem}
.foot-nav a:hover{color:var(--bone)}
.foot-fine{color:var(--muted);font-size:.85rem;line-height:1.6}
.foot-fine a{border-bottom:1px solid var(--line)}
.foot-fine a:hover{color:var(--bone)}

/* =========================================================
   wider screens
   ========================================================= */
@media (min-width:680px){
  .tiers{grid-template-columns:repeat(3,1fr)}
  .ways{grid-template-columns:1fr 1fr}
  .what-cols{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);max-width:none}
  .steps{grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,56px)}
  .steps li:nth-child(2){border-top:0}
}

@media (min-width:900px){
  .mark-ico{height:52px}
  .mark{font-size:1.48rem}
  .tog{display:none}
  .sheet{display:none}
  .links{display:flex;gap:clamp(18px,2.4vw,32px);align-items:center}
  .links a{color:var(--muted);font-size:.95rem;position:relative;padding:4px 0;
    transition:color .25s var(--ease)}
  .links a:hover{color:var(--bone)}
  .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;
    transition:transform .3s var(--ease),background .45s var(--ease)}
  .links a:hover::after{transform:scaleX(1)}
  .bar-go{display:inline-flex}
  .bar-in{height:88px;gap:32px}

  .hero{padding-top:calc(88px + clamp(48px,9vh,96px))}
  .hero-in{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    align-items:center;gap:clamp(40px,5vw,78px)}

  .steps{grid-template-columns:repeat(4,1fr)}
  .steps li{border-top:0;padding-top:0}
  .steps li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
    background:var(--line-soft)}
  .steps li{padding-top:clamp(22px,3vw,30px);display:block}
  .step-n{display:block;margin-bottom:14px}
}

/* =========================================================
   reduced motion
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}


/* =========================================================
   enquiry form
   ========================================================= */
.ask{display:grid;gap:14px;margin-bottom:clamp(30px,5vw,44px)}
.ask-row{display:grid;gap:14px}
.ask label{display:grid;gap:7px;font-size:.84rem;color:var(--muted)}
.ask input,.ask select,.ask textarea{
  font:inherit;font-size:1rem;color:var(--bone);
  background:var(--ground);border:1px solid var(--line);border-radius:2px;
  padding:13px 14px;width:100%;
  transition:border-color .25s var(--ease);
}
.band-raise .ask input,.band-raise .ask select,.band-raise .ask textarea{background:var(--raise)}
.ask input:focus,.ask select:focus,.ask textarea:focus{outline:none;border-color:var(--accent)}
.ask textarea{resize:vertical;min-height:84px}
.ask select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 14px) 22px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.ask .trap{position:absolute;left:-9999px;width:1px;height:1px}
.ask-note{min-height:1.3em;font-size:.9rem;line-height:1.5}
.ask-note.ok{color:#79cf96}
.ask-note.bad{color:var(--accent)}
.ask-note a{text-decoration:underline}
@media (min-width:600px){.ask-row{grid-template-columns:1fr 1fr}}

.foot-social{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot-social a{font-size:.93rem;color:var(--muted);transition:color .25s var(--ease)}
.foot-social a:hover{color:var(--accent)}

/* =========================================================
   why it costs what it costs
   ========================================================= */
.worth{margin-top:clamp(34px,5vw,54px);padding-top:clamp(30px,4vw,44px);
  border-top:1px solid var(--line)}
.worth h3{font-size:clamp(1.3rem,2.6vw,1.85rem);margin-bottom:clamp(20px,3vw,30px);max-width:22ch}
.worth-grid{display:grid;gap:18px;max-width:64ch}
.worth-grid p{color:var(--muted);line-height:1.75}
.worth-grid strong{color:var(--bone);font-weight:600}
.worth-nums{display:grid;gap:0;margin-top:clamp(28px,4vw,40px);border-top:1px solid var(--line-soft)}
.worth-nums div{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line-soft)}
.worth-nums dt{font-weight:700;font-variation-settings:'wdth' 118;
  font-size:clamp(1.25rem,3vw,1.7rem);letter-spacing:-.025em}
.worth-nums div:last-child dt{color:var(--accent)}
.worth-nums dd{color:var(--muted);text-align:right;font-size:.95rem}
@media (min-width:720px){
  .worth-grid{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,46px);max-width:none}
  .worth-nums{grid-template-columns:repeat(3,1fr);border-top:0}
  .worth-nums div{flex-direction:column;align-items:flex-start;gap:6px;
    border-top:1px solid var(--line-soft);border-bottom:0;padding:18px 0}
  .worth-nums dd{text-align:left}
}

.strap{font-size:.96rem;font-weight:500;letter-spacing:.01em;color:var(--accent);
  margin-bottom:clamp(14px,2vw,20px)}
.foot-brand{display:grid;gap:7px}
.foot-strap{font-size:.88rem;color:var(--muted)}

/* =========================================================
   gyms
   ========================================================= */
.gym-list{display:grid;gap:2px}
.gym-list li{padding:clamp(20px,3.4vw,26px) 0;border-top:1px solid var(--line-soft)}
.gym-list li:first-child{border-top:0}
.gym-list h3{margin-bottom:.45em}
.gym-list p{color:var(--muted);max-width:56ch}
.gym-foot{margin-top:clamp(26px,4vw,38px);color:var(--muted);font-size:.95rem;max-width:60ch}
.gym-foot a{color:var(--bone);border-bottom:1px solid var(--line);padding-bottom:1px}
.gym-foot a:hover{border-color:var(--accent);color:var(--accent)}
@media (min-width:720px){
  .gym-list{grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,56px)}
  .gym-list li:nth-child(2){border-top:0}
}

.seed{margin-top:clamp(30px,4.5vw,44px);padding:clamp(24px,4vw,32px);
  background:var(--ground);border:1px solid var(--line);border-radius:3px;
  display:grid;gap:14px;justify-items:start}
.seed h3{font-size:1.15rem}
.seed p{color:var(--muted);max-width:58ch}

/* =========================================================
   boil-and-bite vs custom
   ========================================================= */
.vs{display:grid;gap:0}
.vs-row{padding:clamp(26px,4vw,38px) 0;border-top:1px solid var(--line-soft)}
.vs-row:first-child{border-top:0;padding-top:0}
.vs-row h3{font-size:clamp(1.2rem,2.4vw,1.55rem);margin-bottom:clamp(16px,2.4vw,22px)}
.vs-pair{display:grid;gap:18px}
.vs-tag{display:block;font-size:.73rem;font-weight:600;letter-spacing:.04em;
  margin-bottom:8px;color:var(--muted)}
.vs-b .vs-tag{color:var(--accent)}
.vs-pair p{color:var(--muted);line-height:1.72;font-size:.97rem}
.vs-b{padding-left:16px;border-left:1px solid var(--accent)}
.vs-a{padding-left:16px;border-left:1px solid var(--line)}
@media (min-width:760px){
  .vs-pair{grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,46px)}
}

/* =========================================================
   homepage hub
   ========================================================= */
.hub{display:grid;gap:2px}
.hub li{border-top:1px solid var(--line-soft)}
.hub li:first-child{border-top:0}
.hub a{display:block;padding:clamp(20px,3vw,26px) 0;transition:padding-left .3s var(--ease)}
.hub a:hover{padding-left:10px}
.hub h3{margin-bottom:.4em;transition:color .25s var(--ease)}
.hub a:hover h3{color:var(--accent)}
.hub p{color:var(--muted);font-size:.95rem;max-width:52ch}
@media (min-width:720px){
  .hub{grid-template-columns:1fr 1fr;gap:0 clamp(28px,5vw,56px)}
  .hub li:nth-child(2){border-top:0}
}
.links a.is-here{color:var(--bone)}
.links a.is-here::after{transform:scaleX(1)}

.rush{margin-top:clamp(30px,4.5vw,44px);padding:clamp(24px,4vw,32px);
  border:1px solid var(--accent);border-radius:3px;
  display:grid;gap:18px;align-items:center}
.rush h3{font-size:1.15rem;margin-bottom:.5em}
.rush p{color:var(--muted);max-width:60ch;font-size:.96rem}
@media (min-width:760px){.rush{grid-template-columns:1fr auto;gap:28px}}

.same{margin-top:clamp(30px,4.5vw,44px);padding-top:clamp(26px,4vw,34px);
  border-top:1px solid var(--line);display:grid;gap:14px}
.same h3{font-size:clamp(1.18rem,2.4vw,1.5rem);max-width:24ch}
.same p{color:var(--muted);max-width:60ch;line-height:1.72}

/* film card */
.filmcard{display:flex;align-items:center;gap:18px;padding:clamp(18px,3vw,24px);
  border:1px solid var(--line);border-radius:3px;max-width:520px;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.filmcard:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent)}
.filmcard-play{flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;padding-left:4px}
.filmcard-txt{display:grid;gap:3px}
.filmcard-txt strong{font-weight:600;font-size:1.02rem}
.filmcard-txt span{color:var(--muted);font-size:.88rem}