*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light only;-webkit-text-size-adjust:100%}
html,body{background-image:linear-gradient(#FAF6EF,#FAF6EF)}

:root{
  --ink:#0E3B3A;
  --ink-70:rgba(14,59,58,.7);
  --ink-45:rgba(14,59,58,.45);
  --ink-10:rgba(14,59,58,.1);
  --base:#FAF6EF;
  --card:#FFFFFF;
  --cta:#FF4D2E;           /* used ONLY for buy actions */
  --mint:#BFE6D9;
  --star:#FFC531;
  --f:"Hanken Grotesk",system-ui,sans-serif;
  --pad:clamp(20px,5vw,64px);
}

body{
  margin:0;background-color:var(--base);background-image:linear-gradient(var(--base),var(--base));
  color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{margin:0;font-family:"Bebas Neue","Oswald",var(--f);font-weight:400;letter-spacing:.012em;line-height:.98;text-wrap:balance}
p{margin:0}
a{color:inherit}
.wrap{max-width:1220px;margin:0 auto;padding-inline:var(--pad)}
.kick{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-45)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--f);font-weight:800;font-size:17px;letter-spacing:-.01em;
  padding:16px 28px;border-radius:14px;border:0;text-decoration:none;cursor:pointer;
  background:var(--ink);color:#fff;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.25)}
.btn--cta{background:var(--cta);box-shadow:0 8px 22px -8px rgba(255,77,46,.65)}
.btn--cta:hover{filter:brightness(1.06);box-shadow:0 12px 26px -8px rgba(255,77,46,.7)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink-10)}
.btn--ghost:hover{filter:none;box-shadow:inset 0 0 0 2px var(--ink)}
.btn--sm{font-size:14.5px;padding:11px 18px;border-radius:11px}
.btn__sub{display:block;font-size:10.5px;font-weight:600;opacity:.8;letter-spacing:.04em;margin-top:1px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,label:focus-visible{outline:3px solid var(--cta);outline-offset:3px}

.rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}

/* stars */
.stars{display:inline-flex;gap:2px;vertical-align:-2px}
.stars svg{width:15px;height:15px;fill:var(--star)}

/* ---------- honest urgency bar ---------- */
.ship{
  background-color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink));
  color:#fff;text-align:center;padding:9px var(--pad);
  font-size:13px;font-weight:600;letter-spacing:.02em;
}
.ship b{color:var(--mint);font-weight:800}

/* ---------- nav ---------- */
/* ================= HEADER =================================================
   One grid, two shapes. Below 1024 the links drop to a second row that scrolls
   sideways; from 1024 up everything sits on one line. It is one <nav> in one
   place in the DOM either way — grid-template-areas moves it — so there is no
   duplicate set of anchors for a screen reader to read twice.

   Why not a burger. NN/g, 179 participants across 6 sites: hidden navigation
   cost more than 20% of content discoverability, made desktop 39% slower and
   mobile 15% slower, and raised task-difficulty ratings by 21%. Their rule is
   that four links or fewer stay visible on mobile. This site has four.

   Pages that exist to convert rather than to browse set .nav--bare and drop
   the second row: at the basket, a section link is an exit, not a service.

   Every child takes an explicit grid-area. Leave one out and it auto-places
   into an implicit row — which is how the cart header briefly became 640px
   tall on desktop.
   ======================================================================== */
.nav{position:sticky;top:0;z-index:70;background-image:linear-gradient(rgba(250,248,244,.92),rgba(250,248,244,.92));backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-10)}
.nav__in{
  display:grid;align-items:center;column-gap:12px;
  grid-template-columns:1fr auto auto;
  grid-template-areas:"brand cart cta" "links links links";
  min-height:60px;
}
.brand{grid-area:brand;display:flex;align-items:center;gap:9px;text-decoration:none;min-width:0}
.brand__sub{display:block;font-size:8.5px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cta);margin-top:2px;white-space:nowrap}
@media(max-width:400px){.brand__sub{letter-spacing:.16em;font-size:8px}}
.brand__n{font-family:"Bebas Neue","Oswald",var(--f);font-weight:400;font-size:20px;letter-spacing:.02em;text-transform:uppercase}
.nav__l{
  grid-area:links;display:flex;gap:clamp(12px,1.6vw,20px);align-items:center;
  margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 9px;
  overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav__l::-webkit-scrollbar{display:none}
.nav__l a{text-decoration:none;font-size:14.5px;font-weight:600;color:var(--ink-70);
  white-space:nowrap;padding:4px 0}
.nav__l a:hover{color:var(--ink)}
.nav--bare .nav__l{display:none}

/* On a phone the header action duplicates the sticky bar at the bottom of the
   screen, so it wears a shorter label rather than wrapping onto two lines.
   Both labels are in the markup; neither is generated, so the button still
   reads correctly with JavaScript off. */
.nav__cta-lg{display:none}
.nav__cta-sm{display:inline}
.nav__in .btn{grid-area:cta;white-space:nowrap}

@media(min-width:1024px){
  .nav__in{grid-template-columns:auto minmax(0,1fr) auto auto;
    grid-template-areas:"brand links cart cta";column-gap:26px;min-height:64px}
  .nav__l{margin:0;padding:0;overflow-x:auto}
  .nav__cta-lg{display:inline}
  .nav__cta-sm{display:none}
}
@media(max-width:1023px){
  .nav__in{padding-top:8px}
  .nav--bare .nav__in{padding-top:0}
  .brand__sub{display:block;font-size:8.5px;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cta);margin-top:2px;white-space:nowrap}
@media(max-width:400px){.brand__sub{letter-spacing:.16em;font-size:8px}}
.brand__n{font-size:18px}
}

/* The basket, in the header, on every page. Jakob's Law: this is where people
   look for it, and until now there was nothing to look at — you could add a
   pair and the site gave no sign it had happened. Visible at every width,
   because the nav links are the thing that collapses on a phone, not this. */
.navcart{
  grid-area:cart;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;text-decoration:none;color:var(--ink);
  flex:0 0 auto;transition:background .14s ease;
}
.navcart:hover{background:var(--ink-10)}
.navcart svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.navcart__b{
  position:absolute;top:3px;right:2px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--cta);color:#fff;
  font-size:11.5px;font-weight:800;line-height:19px;text-align:center;
  box-shadow:0 0 0 2px var(--base);
}
.navcart__b[hidden]{display:none}
.navcart[aria-current="page"]{background:var(--ink-10)}


/* ---------- hero ---------- */
.hero{padding-block:clamp(28px,4vw,52px) clamp(40px,5vw,72px)}
.hero__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(26px,4vw,56px);align-items:center}
@media(max-width:980px){.hero__in{grid-template-columns:1fr}}
.hero__proof{margin:18px 0 0;display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-70)}
.hero h1{font-size:clamp(42px,6vw,80px);margin-top:14px}
.hero h1 em,.pagehead h1 em{font-style:normal;color:var(--cta)}
.hero__sub{margin-top:18px;font-size:clamp(16.5px,1.5vw,18.5px);color:var(--ink-70);max-width:44ch}
/* The brand proposition. Set in the display face at a size that reads as a
   spoken line rather than a label — it is the first thing said, and a
   letter-spaced micro-caps eyebrow would make it look like a category tag. */
/* The reaction bubble. It holds its own height so nothing on the page jumps
   when the line changes, and the label sets it as anticipation rather than
   attribution. The bubble is the only thing in the hero allowed to sound
   excited — the headline underneath stays calm, which is Print LOUD, Hang
   loose doing its job in one block of copy. */
/* Stacked and height-locked. Laid out in a row it wrapped whenever a longer
   reaction came round, which grew the block and shoved the headline down nine
   pixels every few seconds — a page that twitches under the reader's eye. The
   column never reflows and the bubble is not allowed to wrap. */
.react{display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  min-height:58px;margin:0 0 12px}
.react__lab{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-45)}
.react__bubble{display:inline-flex;align-items:center;height:36px;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--card);border:1px solid var(--ink-10);
  border-radius:15px 15px 15px 4px;padding:0 13px;font-size:14.5px;font-weight:700;
  color:var(--ink);box-shadow:0 1px 0 rgba(14,59,58,.05);
  transition:opacity .42s ease,transform .42s ease}
.react__bubble.out{opacity:0;transform:translateY(-5px)}
@media (prefers-reduced-motion:reduce){.react__bubble{transition:none}}

/* text carried for assistive tech only */
.vh{position:absolute;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}

/* the brand lock-up, in the footer where a lock-up belongs */
.foot__prop{margin:14px 0 0;font-size:14.5px;font-weight:800;letter-spacing:-.01em;color:#fff}
.foot__prop span{display:block;font-weight:500;color:rgba(255,255,255,.62);margin-top:2px}
/* The functional descriptor: six words that tell a stranger what this is.
   Weighted up inside the paragraph so it reads first, without becoming a
   second heading and competing with the h1 for the page's structure. */
.hero__desc{display:block;color:var(--ink);font-weight:700;margin-bottom:5px}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:24px;align-items:center}
.hero__risk{margin-top:18px;display:grid;gap:7px}
.hero__risk span{font-size:13.5px;font-weight:600;color:var(--ink-70);display:flex;gap:8px;align-items:center}
.hero__risk svg{width:15px;height:15px;flex:none;fill:none;stroke:#1D9E63;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- studio ---------- */
.studio{border-radius:22px;background-color:var(--card);background-image:linear-gradient(var(--card),var(--card));box-shadow:0 1px 0 var(--ink-10),0 26px 54px -30px rgba(14,59,58,.4);padding:clamp(14px,1.8vw,20px)}
.heroshot{position:relative;border-radius:15px;overflow:hidden;aspect-ratio:5/6;
  background-color:#F2F0EA;
  background-image:radial-gradient(120% 90% at 50% 18%,#FFFFFF 0%,#EFEDE6 100%);
  background-size:cover}
/* There is no still behind this any more, and that is deliberate. A stand-in
   image under a transparent frame means there is always some window — however
   short — in which the frame has painted its blank default sock and the still
   is still there, and the hero shows two pairs. No amount of timing closes that
   window reliably across devices; removing one of the two layers does.
   So the card holds the empty stage until the frame says it has the design on
   it, and then the frame fades in over it. One pair, always, or none. */
.heroshot iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  background:transparent;opacity:0;pointer-events:none;transition:opacity .28s ease}
.heroshot.ready iframe{opacity:1;pointer-events:auto}
@media(prefers-reduced-motion:reduce){.heroshot iframe{transition:none}}
.heroshot__note{margin:12px 2px 0;font-size:13.5px;font-weight:600;color:var(--ink-70);line-height:1.6}
.studio__cta{margin-top:14px;display:grid;gap:9px}
.studio__cta .btn{width:100%}
.studio .hero__risk{margin-top:14px}
.prog{display:flex;gap:6px;margin-bottom:12px}
.prog span{
  flex:1;text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:8px 4px;border-radius:9px;background-color:rgba(14,59,58,.05);color:var(--ink-45);
  transition:background-color .2s ease,color .2s ease;
}
.prog span.on{background-color:var(--ink);color:#fff}
.prog span.done{background-color:var(--mint);color:var(--ink)}

.stage{position:relative;border-radius:15px;overflow:hidden;background-color:#F2F0EA;background-image:linear-gradient(#F2F0EA,#F2F0EA);aspect-ratio:4/3;display:grid;place-items:center}
.stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 64% at 50% 50%,#FFF 0%,rgba(255,255,255,.9) 46%,rgba(255,255,255,0) 80%)}
.layer{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .45s ease,transform .45s ease;transform:scale(.97);padding:20px}
.stage[data-step="0"] .layer--photo,.stage[data-step="1"] .layer--cut,.stage[data-step="2"] .layer--sock{opacity:1;transform:scale(1)}
.layer svg,.layer img{max-width:min(70%,300px);max-height:100%;width:auto;height:auto}
.layer--cut>*,.layer--sock>*{filter:drop-shadow(0 12px 22px rgba(14,59,58,.16))}
.stage[data-mode="demo"] .u{display:none}
.stage[data-mode="user"] .d{display:none}
#cutImg{filter:drop-shadow(1px 0 0 var(--cta)) drop-shadow(-1px 0 0 var(--cta)) drop-shadow(0 1px 0 var(--cta)) drop-shadow(0 -1px 0 var(--cta)) drop-shadow(0 12px 22px rgba(14,59,58,.16))}
.ants{fill:none;stroke:var(--cta);stroke-width:3;stroke-dasharray:9 7;animation:ants 1s linear infinite}
@keyframes ants{to{stroke-dashoffset:-16}}
.stage__hint{position:absolute;bottom:10px;left:0;right:0;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45)}
.confetti{position:absolute;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:8}

.tools{display:grid;gap:9px;margin-top:12px}
.drop{
  border:2px dashed rgba(14,59,58,.22);border-radius:13px;padding:14px;text-align:center;cursor:pointer;display:block;position:relative;
  transition:border-color .18s ease,background-color .18s ease;
}
.drop:hover,.drop.over{border-color:var(--cta);background-color:#FFF}
.drop b{font-weight:800;font-size:15.5px;display:block}
.drop small{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);display:block;margin-top:4px}
.drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.pick{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;border-radius:9px;border:0;cursor:pointer;background-color:rgba(14,59,58,.06);color:var(--ink-70);transition:background-color .16s ease,color .16s ease}
.pick:hover{background-color:rgba(14,59,58,.11)}
.pick[aria-pressed="true"]{background-color:var(--ink);color:#fff}
.edge{flex:1;min-width:150px;display:flex;align-items:center;gap:9px}
.edge span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);white-space:nowrap}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;width:100%;height:4px;border-radius:4px;background:rgba(14,59,58,.14);outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ink);cursor:pointer;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--ink);cursor:pointer;border:3px solid #fff}
/* ---------- trust bar ---------- */
.trust{border-block:1px solid var(--ink-10);background-color:var(--card);background-image:linear-gradient(var(--card),var(--card))}
.trust__in{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding-block:20px}
@media(max-width:860px){.trust__in{grid-template-columns:1fr 1fr}}
.t{display:flex;gap:11px;align-items:flex-start}
.t svg{width:22px;height:22px;flex:none;fill:none;stroke:#1D9E63;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.t b{font-size:14.5px;font-weight:800;display:block;letter-spacing:-.01em}
.t span{font-size:12.5px;color:var(--ink-70)}

/* ---------- sections ---------- */
.sec{padding-block:clamp(52px,7vw,96px)}
.head{max-width:58ch}
.head h2{font-size:clamp(30px,4.4vw,56px);margin-top:12px}
.head>p{margin-top:14px;color:var(--ink-70);font-size:17px;max-width:52ch}

/* ---------- reviews ---------- */
.agg{display:flex;align-items:center;gap:10px;margin-top:18px;font-weight:700;font-size:15px}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
@media(max-width:860px){.revs{grid-template-columns:1fr}}
.rev{background-color:var(--card);background-image:linear-gradient(var(--card),var(--card));border-radius:16px;padding:22px;box-shadow:inset 0 0 0 1px var(--ink-10)}
.rev p{margin-top:12px;font-size:15.5px;color:var(--ink-70)}
.rev__who{display:flex;align-items:center;gap:10px;margin-top:16px}
.rev__av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none}
.rev__who b{font-size:13.5px;display:block}
.rev__who span{font-size:11.5px;color:var(--ink-45);font-weight:600}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:36px;align-items:stretch}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{position:relative;background-color:var(--card);background-image:linear-gradient(var(--card),var(--card));border-radius:18px;padding:26px 24px;box-shadow:inset 0 0 0 1px var(--ink-10);display:flex;flex-direction:column}
.tier--hot{box-shadow:inset 0 0 0 2.5px var(--ink),0 18px 40px -24px rgba(14,59,58,.4);transform:scale(1.02)}
.tier__flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background-color:var(--ink);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:99px;white-space:nowrap}
.tier h3{font-size:19px;font-weight:800}
.tier__price{display:flex;align-items:baseline;gap:8px;margin-top:12px}
.tier__price b{font-size:38px;font-weight:900;letter-spacing:-.04em;line-height:1}
.tier__price s{color:var(--ink-45);font-size:16px;font-weight:600}
.tier__save{display:inline-block;margin-top:9px;background-color:var(--mint);color:var(--ink);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;align-self:flex-start}
.tier ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:8px;flex:1}
.tier li{font-size:14px;color:var(--ink-70);padding-left:22px;position:relative}
.tier li::before{content:"✓";position:absolute;left:0;color:#1D9E63;font-weight:800}
.tier .btn{margin-top:20px;width:100%}

/* ---------- bulk ---------- */
.sec--ink{background-color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink));color:#fff}
.sec--ink .kick{color:rgba(255,255,255,.45)}
.sec--ink .head>p{color:rgba(255,255,255,.66)}
.bulk{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(24px,3.4vw,50px);align-items:start;margin-top:40px}
@media(max-width:960px){.bulk{grid-template-columns:1fr}}
.calc{border-radius:20px;padding:clamp(24px,3vw,32px);background-color:rgba(255,255,255,.06);background-image:linear-gradient(rgba(255,255,255,.06),rgba(255,255,255,.06))}
.calc__qty{display:flex;align-items:baseline;gap:9px;margin-top:4px}
.calc__qty b{font-size:clamp(40px,5.4vw,62px);font-weight:900;line-height:1;letter-spacing:-.04em}
.calc__qty span{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.calc__sl{margin-top:18px}
.calc input[type=range]{background:rgba(255,255,255,.2)}
.calc input[type=range]::-webkit-slider-thumb{background:#fff;border-color:var(--ink)}
.calc__ticks{display:flex;justify-content:space-between;margin-top:8px;font-size:10.5px;font-weight:700;color:rgba(255,255,255,.4)}
.calc__out{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:20px}
.out{border-radius:13px;padding:15px 17px;background-color:rgba(255,255,255,.07);background-image:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07))}
.out b{font-size:clamp(22px,2.8vw,32px);font-weight:900;display:block;line-height:1}
.out span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);display:block;margin-top:7px}
.out--hero{background-color:var(--cta);background-image:linear-gradient(var(--cta),var(--cta))}
.out--hero span{color:rgba(255,255,255,.8)}
.calc__note{margin-top:14px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.55);line-height:1.7}

.quote{background-color:var(--card);background-image:linear-gradient(var(--card),var(--card));color:var(--ink);border-radius:20px;padding:clamp(24px,3vw,32px)}
.quote h3{font-size:clamp(21px,2.5vw,28px);font-weight:900}
.quote>p{margin-top:8px;font-size:14.5px;color:var(--ink-70)}
.f{display:block;margin-top:13px}
.f span{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);display:block;margin-bottom:6px}
.f label{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45);display:block;margin-bottom:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.quote__qty{margin-top:13px;font-size:13.5px;font-weight:600;color:var(--ink-70)}
.quote__qty b{color:var(--ink)}
.quote__msg{margin-top:10px;font-size:13px;font-weight:600;line-height:1.5;color:var(--ink-70)}
.quote__msg.bad{color:var(--cta)}
.quote__msg:empty{display:none}
.f input,.f textarea{width:100%;font-family:var(--f);font-size:15.5px;color:var(--ink);background-color:var(--base);border:1px solid var(--ink-10);border-radius:10px;padding:12px 14px}
.f textarea{resize:vertical;min-height:64px}
.quote .btn{margin-top:16px;width:100%}
.quote__fine{margin-top:10px;font-size:12px;font-weight:600;color:var(--ink-45)}
.quote details{margin-top:6px}
.quote summary{font-size:12.5px;font-weight:700;color:var(--ink-45);cursor:pointer;padding-block:6px;list-style:none}
.quote summary::-webkit-details-marker{display:none}

/* ---------- faq ---------- */
.faq{margin-top:34px;max-width:840px}
.faq details{border-bottom:1px solid var(--ink-10)}
.faq summary{list-style:none;cursor:pointer;padding:18px 42px 18px 0;position:relative;font-weight:800;font-size:clamp(17px,2vw,21px);letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:10px;top:50%;width:10px;height:10px;border-right:2.4px solid var(--cta);border-bottom:2.4px solid var(--cta);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq p{padding:0 44px 20px 0;color:var(--ink-70);font-size:15.5px;max-width:62ch}

/* ---------- footer ---------- */
.foot{background-color:var(--ink);background-image:linear-gradient(var(--ink),var(--ink));color:#fff;padding-block:clamp(44px,5.6vw,72px) 30px}
.foot__t{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
@media(max-width:900px){.foot__t{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot__t{grid-template-columns:1fr}}
.foot__line{font-family:"Bebas Neue","Oswald",var(--f);font-weight:400;font-size:clamp(24px,3vw,34px);letter-spacing:.01em;line-height:1.04;margin-top:14px;text-transform:uppercase}
.foot__line em{font-style:normal;color:var(--cta)}
.foot h3{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{text-decoration:none;font-size:14px;font-weight:500;color:rgba(255,255,255,.76)}
.foot ul a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot__b{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(255,255,255,.45)}

/* ---------- sticky mobile CTA (thumb zone) ---------- */
.stick{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:none;
  transform:translateY(120%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.stick.on{transform:none}
.stick a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background-color:var(--cta);background-image:linear-gradient(var(--cta),var(--cta));color:#fff;text-decoration:none;
  border-radius:16px;padding:15px 20px;font-weight:800;font-size:16px;
  box-shadow:0 14px 34px -10px rgba(255,77,46,.7);
}
.stick small{display:block;font-size:10.5px;font-weight:700;opacity:.85;letter-spacing:.05em}
@media(max-width:900px){.stick{display:block}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}
@media(prefers-color-scheme:dark){
  html,body{background-image:linear-gradient(#FAF6EF,#FAF6EF)!important;background-color:#FAF6EF!important;color:#0E3B3A!important}
  .nav{background-image:linear-gradient(rgba(250,248,244,.94),rgba(250,248,244,.94))!important}
}

/* ---------- shared building blocks for product & category pages ----------
   Two layouts the home page never needed: a grid of short claims, and a
   numbered sequence. Both take their spacing and colour from the same tokens
   as everything above, so a new page inherits the shop rather than restating
   it. `.cards--ink` is the same grid on the deep-teal ground. */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
@media(max-width:860px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--ink-10);border-radius:16px;padding:22px 20px}
.card h3{margin:0 0 7px;font-size:17px;letter-spacing:-.02em}
.card p{margin:0;color:var(--ink-70);font-size:14.5px;line-height:1.6}
.sec--ink .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.sec--ink .card p{color:rgba(255,255,255,.7)}

.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;position:relative;padding-top:40px}
.step::before{content:counter(s);position:absolute;top:0;left:0;width:29px;height:29px;border-radius:50%;
  display:grid;place-items:center;background:var(--cta);color:#fff;font-weight:900;font-size:14px}
.step h3{margin:0 0 6px;font-size:16.5px;letter-spacing:-.02em}
.step p{margin:0;color:var(--ink-70);font-size:14.5px;line-height:1.6}

/* the plain lead paragraph under a category-page h1 */
.lede{font-size:clamp(16px,1.9vw,19px);line-height:1.65;color:var(--ink-70);max-width:60ch;margin:14px 0 0}
.pagehead{padding-block:clamp(40px,6vw,84px) clamp(20px,3vw,36px)}
.pagehead h1{margin:8px 0 0;font-size:clamp(36px,6.6vw,66px);line-height:1.03;letter-spacing:-.035em}
.crumb{font-size:13px;color:var(--ink-45);margin:0 0 4px}
.crumb a{color:var(--ink-45)}

/* The skip link: first thing a keyboard reaches, invisible until it has focus.
   Without it a keyboard user tabs the whole header on every page. */
.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 18px;border-radius:0 0 12px 0;
  background:var(--ink);color:#fff;font-weight:800;text-decoration:none}
.skip:focus{left:0}

/* The composition line. Set in the mono-ish register of a care label — small,
   letter-spaced, quiet. It is there to be checked, not read. */
.spec{margin:24px 0 0;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-45);line-height:1.9}

/* The delivery caveat travels with the date rather than living on a policy
   page. Quieter than the date, but on the same line and never hidden. */
.ship em{font-style:normal;font-weight:500;opacity:.72}
@media(max-width:560px){.ship em{display:block;margin-top:2px;font-size:11.5px}}

/* Two flagged tiers, so they must not read as the same claim. Best value is
   arithmetic, keeps the heavy ring and the ink badge, and stays the loudest
   thing in the row. Most popular is a statement about other people: a lighter
   ring and a coral badge, present but not competing — otherwise the eye
   bounces between two identical pills and neither wins. */
.tier--pop{box-shadow:inset 0 0 0 1.5px rgba(14,59,58,.34)}
.tier__flag--pop{background-color:var(--cta);color:#fff}

/* The sign-off on the price-match note. It is the brand line, so it is set
   like one: bigger than body copy, in the display face, in the accent. */
.match__sign{margin-top:22px;font-family:"Bebas Neue",Impact,sans-serif;
  font-size:clamp(22px,2.6vw,30px);letter-spacing:.045em;color:var(--cta);
  text-transform:uppercase}
#match .head p{max-width:62ch}

/* The order-or-help chooser. Two equal buttons rather than a dropdown: the
   choice changes what the form asks for, so it has to be visible before
   anyone starts typing, not hidden behind a click. */
.mode{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:18px}
@media(max-width:430px){.mode{grid-template-columns:1fr}}
.mode__b{appearance:none;cursor:pointer;text-align:left;border:1.5px solid var(--line);
  background:transparent;color:inherit;border-radius:12px;padding:11px 13px;line-height:1.35}
.mode__b b{display:block;font-size:14.5px}
.mode__b span{display:block;font-size:12.5px;opacity:.7;margin-top:2px}
.mode__b:hover{border-color:var(--cta)}
.mode__b.on{border-color:var(--cta);background:rgba(255,77,46,.08)}
.f .opt{font-weight:500;opacity:.6;font-size:12px}
form.help .ord{display:none}

/* The credit line sits with the copyright, one notch quieter: it is true and
   worth reading once, and it is not what anybody came for. */
.foot__by{opacity:.72}
.foot__by a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.foot__by a:hover{color:var(--cta)}

/* The scroll cue on the links row. It occupies the same grid area as the nav
   rather than living inside it - a hint that scrolls away with the thing it is
   hinting at is no hint - and pulls out to the screen edge with the same
   negative margin the row uses, so it sits where the links actually stop
   rather than where the content column does.

   The fade is the header background, not white: this bar is translucent over
   whatever is behind it, and a white block would read as a hole. */
.nav__cue{grid-area:links;justify-self:end;align-self:center;z-index:1;
  display:flex;align-items:center;pointer-events:none;
  margin-right:calc(var(--pad) * -1);padding:0 var(--pad) 9px 20px;
  color:var(--cta);font-size:21px;line-height:1;
  background:linear-gradient(90deg,rgba(250,248,244,0),rgba(250,248,244,.96) 48%);
  transition:opacity .2s ease}
.nav__cue.off{opacity:0}
@media(min-width:1024px){.nav__cue{display:none}}
@media(prefers-reduced-motion:reduce){.nav__cue{transition:none}}

/* Legal pages. One column, measured for reading rather than for filling the
   width - a policy nobody can read is a policy nobody read. */
.legal{max-width:70ch}
.legal h2{margin:32px 0 10px;font-size:clamp(18px,2.4vw,22px);letter-spacing:-.02em}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 12px;font-size:15.5px;line-height:1.72;color:var(--ink-70)}
.legal ul{margin:0 0 14px;padding-left:20px}
.legal li{margin-bottom:8px;font-size:15.5px;line-height:1.7;color:var(--ink-70)}
.legal b{color:var(--ink)}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--cta)}
.legal__id{list-style:none;padding-left:0}
.legal__id li{border-left:3px solid var(--cta);padding-left:12px}
.legal__date{margin-top:14px;font-size:12.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-45)}