/* ═══════════════════════════════════════════════════════════
   MARLOOP — Shore palette, brand kit v1 (November 2026)
   Deep water #0C3140 · Bone #F4EFE6 · Wet sand #F3E3A6
   Mustard #C9A033 · Coral #D9694A · Sea glass #A3D3C8
   Mustard = lines + large display only, never body text.
   Sea glass = on Deep water only, never on Bone.
   Mustard and Coral never share a surface.
   ═══════════════════════════════════════════════════════════ */
:root{
  --butter:#F7E6A4;   /* a lighter, brighter yellow, used only for the hero lights */
  --deep:#0C3140; --bone:#F4EFE6; --sand:#F3E3A6;
  --mustard:#C9A033; --coral:#D9694A; --seaglass:#A3D3C8;
  --muted:color-mix(in srgb, var(--deep) 62%, var(--bone));
  --line:color-mix(in srgb, var(--deep) 14%, var(--bone));
  --display:'Averia Serif Libre',Georgia,serif;
  --body:'Albert Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
/* the UA's [hidden] rule loses to any class that sets display (.btn, .sum-row, …) */
[hidden]{display:none !important}
html,body{margin:0}
body{
  background:var(--bone); color:var(--deep);
  font-family:var(--body); font-weight:400; line-height:1.45; letter-spacing:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.12; margin:0}
p{margin:0}
img{display:block; max-width:100%}
a{color:inherit}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px}

/* caps label — Albert Sans 500 at +8% tracking (brand rule) */
.eyebrow{
  font-weight:500; font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:14px;
}
/* lot numbers, specs, dates — DM Mono +6% */
.spec{font-family:var(--mono); font-size:12px; letter-spacing:.06em}
/* one line of voice per surface — Averia italic */
.voice{font-family:var(--display); font-style:italic; font-size:19px; color:var(--muted)}

.btn{
  display:inline-block; font-family:var(--body); font-weight:500; font-size:15px;
  padding:15px 30px; border-radius:999px; text-decoration:none;
  background:var(--deep); color:var(--bone); border:1px solid var(--deep);
  transition:transform .15s ease, opacity .15s ease;
}
.btn:hover{transform:translateY(-1px); opacity:.92}
/* The one button on this band carries the whole section, so it is bigger than
   a default .btn and keeps a shadow to lift it off the Wet sand surface. */
.buy .btn.big{
  font-size:17px; padding:18px 42px;
  box-shadow:0 10px 26px rgba(12,49,64,.22);
}
.buy .btn.big:hover{transform:translateY(-2px); box-shadow:0 14px 32px rgba(12,49,64,.26)}
.btn.ghost{background:transparent; color:var(--deep)}
.btn.light{background:var(--bone); color:var(--deep); border-color:var(--bone)}

/* ── SPLASH ───────────────────────────────────────────────── */
/* set by an inline head script when this tab has already seen the intro */
.no-splash .splash{display:none}
.splash{
  position:fixed; inset:0; z-index:90; background:var(--bone);
  display:grid; place-items:center; pointer-events:none;
}
.splash svg{width:min(46vw,380px); height:auto}
/* the swell draws itself, then the wordmark resolves in */
.splash .swell{stroke-dasharray:1; stroke-dashoffset:1}
.splash .word{opacity:0}
.splash.run .swell{animation:draw 2.6s cubic-bezier(.4,0,.2,1) forwards}
.splash.run .word{animation:rise .9s ease 2.3s forwards}
.splash.run{animation:lift .7s ease 4.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
@keyframes lift{to{opacity:0; visibility:hidden}}

/* ── TEST CONTROL BAR (not part of the design) ────────────── */
.controls{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:80;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center;
  background:var(--deep); color:var(--bone);
  padding:9px 13px; border-radius:999px; font-size:12px;
  box-shadow:0 8px 28px rgba(12,49,64,.26);
}
.controls span{font-weight:500; letter-spacing:.08em; text-transform:uppercase; opacity:.62; font-size:10px}
.controls button{
  font-family:var(--body); font-weight:500; font-size:12px; cursor:pointer;
  background:transparent; color:var(--bone); border:1px solid rgba(244,239,230,.34);
  padding:6px 12px; border-radius:999px;
}
.controls button[aria-pressed="true"]{background:var(--bone); color:var(--deep); border-color:var(--bone)}

/* ── NAV ──────────────────────────────────────────────────── */
.nav{position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--bone) 88%,transparent); backdrop-filter:blur(9px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:30px; height:74px}
.nav .logo{width:140px}            /* brand rule: 140px desktop */
.nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0; margin-left:auto}
.nav-menu-cta{display:none}            /* drawer-only; the bar has its own Buy */
/* Hamburger. Hidden on desktop, where the links sit in the bar already. */
.sr-only{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.nav-toggle{
  display:none; width:38px; height:38px; flex:none; padding:0; cursor:pointer;
  border:1px solid var(--line); border-radius:11px; background:var(--bone);
  place-content:center; justify-items:center; gap:4px;
}
.nav-toggle i{
  display:block; width:17px; height:1.7px; border-radius:2px; background:var(--deep);
  transition:transform .22s ease, opacity .16s ease;
}
.nav.is-open .nav-toggle i:nth-child(2){transform:translateY(5.7px) rotate(45deg)}
.nav.is-open .nav-toggle i:nth-child(3){opacity:0}
.nav.is-open .nav-toggle i:nth-child(4){transform:translateY(-5.7px) rotate(-45deg)}

/* language switch, in the bar on the right */
.lang{display:flex; gap:3px; padding:3px; border-radius:999px; border:1px solid var(--line); background:var(--bone)}
.lang button{
  font-family:var(--body); font-weight:500; font-size:11.5px; letter-spacing:.06em;
  padding:6px 11px; border:0; border-radius:999px; background:transparent;
  color:var(--muted); cursor:pointer; line-height:1;
}
.lang button[aria-pressed="true"]{background:var(--deep); color:var(--bone)}
.lang .flag{display:none; font-size:15px; line-height:1}
.nav a{text-decoration:none; font-size:14px; color:var(--muted)}
.nav a:hover{color:var(--deep)}
.nav .cta{
  font-weight:500; font-size:14px; padding:11px 24px; border-radius:999px;
  background:var(--deep); color:var(--bone); text-decoration:none;
}

/* ── HERO ─────────────────────────────────────────────────── */
/* The cart lives beside the Buy pill in both documents and shares its id with
   app.html's badge, so one updateCartBadge() works either side. */
.nav-cart{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex:none; color:var(--deep); border-radius:11px;
  transition:background .18s ease;
}
.nav-cart:hover{background:color-mix(in srgb,var(--deep) 7%,transparent)}
.cart-badge{
  position:absolute; top:1px; right:0; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; background:var(--coral); color:#fff;
  font-family:var(--mono); font-size:10px; line-height:17px; text-align:center;
}
.cart-badge.hidden{display:none}
/* ── the feedback sunflower ───────────────────────────────── */
.fb-fab{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:58px; height:58px; padding:0; border:0; background:transparent; cursor:pointer;
  filter:drop-shadow(0 6px 14px rgba(12,49,64,.22));
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.fb-fab:hover{transform:scale(1.12) rotate(-8deg)}
.fb-fab img{width:100%; height:100%; object-fit:contain; display:block}
.fb-tip{
  position:absolute; right:68px; top:50%; transform:translateY(-50%);
  /* Bone on a border, not Deep water: the button floats over the footer too,
     and a Deep water pill simply disappears against it. */
  background:var(--bone); color:var(--deep); border:1px solid var(--line);
  box-shadow:0 8px 20px rgba(12,49,64,.18);
  font-family:var(--body);
  font-size:12.5px; padding:8px 14px; border-radius:999px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .4s ease;
}
.fb-tip.show{opacity:1}
.fb-pop{
  position:fixed; right:22px; bottom:92px; z-index:61; width:min(320px,calc(100vw - 44px));
  background:var(--bone); border:1px solid var(--line); border-radius:18px;
  padding:16px 16px 18px; box-shadow:0 22px 48px rgba(12,49,64,.18);
}
.fb-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px}
.fb-head b{font-family:var(--display); font-size:16px}
.fb-x{background:none; border:0; font-size:22px; line-height:1; cursor:pointer; color:var(--muted)}
.fb-pop textarea,.fb-pop input{
  width:100%; font-family:var(--body); font-size:14px; color:var(--deep);
  background:#fff; border:1px solid var(--line); border-radius:11px;
  padding:10px 12px; margin-bottom:9px; resize:vertical;
}
.fb-done{font-size:14px; text-align:center; padding:14px 4px}
@media (max-width:900px){
  .fb-fab{right:14px; bottom:14px; width:50px; height:50px}
  .fb-pop{right:14px; bottom:76px}
}
.hero{padding:46px 0 58px}
.hero{position:relative; overflow:hidden}
.hero-glow{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero-glow i{
  position:absolute; display:block; width:var(--gw); height:var(--gh); border-radius:50%;
  background:radial-gradient(closest-side, var(--glow,var(--mustard)), transparent 72%);
  filter:blur(26px);
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center}
.hero .wrap > div:not(.hero-stickers),.hero-fig{position:relative; z-index:1}
/* 50px, not 54: the text column narrowed when the photo moved left, and at 54
   the English first line no longer fitted, so the forced break produced three
   lines instead of the two Maria asked for. Measured at 1440 and 1120. */
.hero h1{font-size:clamp(36px,4.3vw,50px); margin-bottom:20px}
/* a break that only exists where there is room for it */
.br-wide{display:none}
@media (min-width:901px){ .br-wide{display:inline} }
.hero .lede{font-size:18px; color:var(--muted); max-width:30ch; margin-bottom:30px}
.hero .rule{width:54px; height:2px; background:var(--mustard); margin-bottom:22px} /* the one yellow here */
/* bled toward the viewport edge so more of the shot is on screen */
/* bled both ways: right past the gutter, left into the gap so the small shot
   clears the Holder instead of covering it */
.hero-fig{position:relative; margin:0 -42px 0 -130px; padding:0 0 22px 130px}
.shot{
  display:block; border-radius:18px; box-shadow:0 22px 46px rgba(12,49,64,.17);
  transition:transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease;
  will-change:transform;
}
.shot-a{width:100%}
.shot-b{
  /* capped like .shot-a: the figure column is wider than the picture now, and
     44% of it would push the small shot past the bottom of the hero, which
     clips because .hero is overflow:hidden. */
  position:absolute; left:0; bottom:0; width:44%; max-width:233px; z-index:2;
  border:7px solid #fff; border-radius:20px;
}
.shot-b:hover{transform:scale(1.16); box-shadow:0 30px 64px rgba(12,49,64,.26); z-index:4}
.shot-a:hover{transform:scale(1.03); z-index:3}
/* the three pieces, floating loose over the copy like the live site */
/* Above the photo, not behind it. The figure sits at z-index 1, so the loose
   pieces were being covered the moment one of them moved over the picture. */
.hero-stickers{position:absolute; inset:0; z-index:3; pointer-events:none}
.hsticker{
  position:absolute; left:var(--sx,auto); right:var(--rsx,auto); top:var(--sy,auto);
  width:var(--w); transform:rotate(var(--rot,0deg));
  animation:bob var(--dur,7s) ease-in-out infinite; animation-delay:var(--delay,0s);
  filter:drop-shadow(0 12px 16px rgba(12,49,64,.14));
}
.shot-a{
  width:100%; max-width:318px; height:auto; max-height:614px;
  object-fit:cover; object-position:50% 72%;
}
/* The floating brush sat at the wrap's own left edge, which is where the
   headline starts - so it landed on top of the type. It now slides out into the
   page margin, using whatever room there is beside the wrap: the calc goes to 0
   below ~1150px, where there is no margin to move into, and .hero already has
   overflow:hidden so it can never add a scrollbar. The 14px keeps it off the
   viewport edge and absorbs a classic scrollbar's width, since 100vw counts it.
   An inline custom property beats a plain rule, hence !important. */
@media (min-width: 901px){
  .hsticker:first-child{
    --sx: calc(-1 * min(70px, max(0px, (100vw - 1120px) / 2 - 14px))) !important;
  }
}
.hero-chip{
  position:absolute; right:14px; bottom:58px; z-index:3; background:var(--bone);
  border:1px solid var(--line); border-radius:13px; padding:11px 14px;
  box-shadow:0 14px 34px rgba(12,49,64,.12); font-size:11.5px; color:var(--muted); line-height:1.35;
}
.hero-chip b{display:block; font-family:var(--display); font-size:17px; color:var(--deep); margin-bottom:3px}

/* ── WAITLIST (landing) ───────────────────────────────────── */
/* Wet sand surface. Coral is the accent here — no mustard on this surface. */
.wait{background:var(--bone); padding:26px 0 54px}
/* a panel, not a full-bleed band — it should read as one object on the page */
.wait-panel{
  background:var(--sand); border-radius:26px; padding:46px 50px;
  display:grid; grid-template-columns:1.06fr .94fr; gap:46px; align-items:center;
  box-shadow:0 22px 52px rgba(12,49,64,.08);
}
.wait h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:16px}
.wait p.lede{color:color-mix(in srgb,var(--deep) 72%,var(--sand)); font-size:16.5px; margin-bottom:22px}
.wait .count{display:flex; align-items:center; gap:10px; margin-bottom:18px}
.wait .dot{width:9px; height:9px; border-radius:50%; background:var(--coral); flex:none; animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.35}}
.wait .count b{font-family:var(--display); font-size:17px}
.wait-form{display:flex; gap:10px; flex-wrap:wrap}
.wait-form input{
  flex:1 1 230px; font-family:var(--body); font-size:15px; padding:15px 18px;
  border-radius:999px; border:1px solid color-mix(in srgb,var(--deep) 24%,var(--sand));
  background:var(--bone); color:var(--deep);
}
.wait-form input::placeholder{color:color-mix(in srgb,var(--deep) 45%,var(--sand))}
/* countdown to the pre-sale */
.cd{margin:0}
.cd-lbl{color:var(--muted); margin-bottom:11px}
.cd-row{display:flex; gap:10px; flex-wrap:wrap}
.cd-u{
  display:grid; justify-items:center; gap:4px; min-width:64px; padding:11px 10px 9px;
  background:var(--sand); border-radius:12px;
  border:1px solid color-mix(in srgb,var(--deep) 9%,var(--sand));
}
.cd-u b{font-family:var(--display); font-size:27px; line-height:1; font-variant-numeric:tabular-nums}
.cd-u i{
  font-family:var(--body); font-style:normal; font-weight:500; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.wait-note{font-size:12.5px; color:color-mix(in srgb,var(--deep) 58%,var(--sand)); margin-top:12px}
.wait-card{background:var(--bone); border-radius:18px; padding:28px 30px}
.wait-rule{border:0; border-top:1px solid var(--line); margin:22px 0 20px}
.wait-card h3{font-size:19px; margin-bottom:14px}
.wait-card ul{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.wait-card li{display:flex; gap:11px; font-size:14.5px; color:var(--muted); line-height:1.4}
.wait-card li i{color:var(--coral); font-style:normal; font-weight:500; flex:none}
/* the queue position, shown after someone joins */
.wait-done{background:var(--deep); color:var(--bone); border-radius:18px; padding:22px 26px}
.wait-done .eyebrow{color:var(--seaglass); margin-bottom:6px}
.wait-done .place{
  display:block; font-family:var(--display); font-size:clamp(46px,6vw,64px);
  line-height:.95; font-variant-numeric:tabular-nums;
}
.wait-done .done-p{
  font-size:13.5px; margin-top:11px;
  color:color-mix(in srgb,var(--bone) 74%,var(--deep));
}

/* ── CORAL CUT-OUTS ──────────────────────────────────────────
   One line drawing tucked into a corner of each section. Mustard is
   the brand's ink for every drawing; on Wet sand it is darkened so the
   line still reads. Purely decorative — aria-hidden and behind content. */
.has-coral{position:relative; overflow:hidden}
/* loose coral cutouts bled off the gutter — the shapes as they are, no paper */
.scrap{
  position:absolute; z-index:var(--z,0); pointer-events:none; line-height:0;
  width:var(--w); transform:rotate(var(--rot,0deg));
  left:var(--x,auto); right:var(--rx,auto); top:var(--y,auto); bottom:var(--yb,auto);
}
.scrap img{
  display:block; width:100%; height:auto; transform:scaleX(var(--flip,1));
  filter:drop-shadow(0 14px 18px rgba(12,49,64,.16));
}
.has-coral > .wrap{position:relative; z-index:1}
.coral{position:absolute; z-index:0; pointer-events:none; opacity:.5; line-height:0}
.coral svg{
  display:block; width:100%; height:auto;
  fill:none; stroke:var(--mustard); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.coral.tr{top:26px;    right:18px;  width:122px}
.coral.br{bottom:22px; right:22px;  width:132px}
.coral.bl{bottom:22px; left:18px;   width:118px}
.coral.tl{top:26px;    left:18px;   width:108px}
/* Wet sand surfaces: plain Mustard on sand is barely a line */
.wait-panel .coral svg,.buy .coral svg{stroke:color-mix(in srgb,var(--mustard) 62%,var(--deep))}
.wait-panel .coral{opacity:.42}
/* inside the panel the coral is a child of the panel, not the section */
.wait-panel{position:relative; overflow:hidden}
.wait-panel > div{position:relative; z-index:1}

/* ── TICKER — a Deep water band between two light surfaces ──
   Brand rule: on Deep water the accent is Sea glass, never Mustard. */
.alert{
  display:block; background:var(--sand); color:var(--deep);
  padding:11px 0; overflow:hidden; text-decoration:none; position:relative;
  border-bottom:1px solid color-mix(in srgb,var(--deep) 12%,var(--sand));
}
.alert-track{
  display:flex; align-items:center; gap:0; width:max-content; white-space:nowrap;
  animation:ticker 28s linear infinite;
}
.alert:hover .alert-track{animation-play-state:paused}
.alert b{
  font-family:var(--body); font-weight:600; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; padding:0 18px;
}
.alert i{
  width:7px; height:7px; border-radius:50%; background:var(--coral); flex:none;
  animation:pulse 1.8s ease-in-out infinite;
}
@media (max-width:900px){ .alert b{font-size:11.5px; letter-spacing:.1em; padding:0 13px} }
.ticker{
  background:var(--deep); color:var(--bone); padding:14px 0; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker-track{
  display:flex; align-items:center; gap:26px; width:max-content; white-space:nowrap;
  animation:ticker 46s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  font-weight:500; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
}
.ticker-track i{
  width:5px; height:5px; border-radius:50%; background:var(--seaglass);
  flex:none; display:block;
}
/* two identical runs sit side by side, so -50% lands exactly on the seam */
@keyframes ticker{to{transform:translateX(-50%)}}

/* ── HEADS SHOWCASE ───────────────────────────────────────── */
.heads-sec{padding:64px 0 16px}
.heads-layout{display:grid; grid-template-columns:214px 1fr; gap:30px; align-items:stretch}
.handle-fig{
  margin:0; display:flex; flex-direction:column; justify-content:center; gap:16px;
  min-height:0; padding:8px 0;
}
/* capped so the handle column follows the card stack instead of driving it */
.handle-fig img{
  flex:1 1 auto; min-height:0; max-height:380px; width:100%; object-fit:contain;
  filter:drop-shadow(0 20px 24px rgba(12,49,64,.17));
  animation:bob 7s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* same float, but for the phone's rotated handle - the rotation has to be
   carried in every keyframe or the turn is thrown away mid-animation */
@keyframes bob-lying{
  0%,100%{transform:translate(-50%,-50%) rotate(90deg)}
  50%    {transform:translate(-50%,calc(-50% - 7px)) rotate(90deg)}
}
.handle-fig figcaption{color:var(--muted); text-align:center; flex:none; font-size:10.5px; letter-spacing:.05em}
.heads-grid{display:grid; grid-template-columns:1fr; gap:12px; align-content:start}
.head-card{
  margin:0; display:grid; grid-template-columns:76px 1fr; align-items:center; gap:20px;
  background:var(--bone); border:1px solid var(--line); border-radius:15px; padding:12px 20px 12px 12px;
}
.head-card img{width:100%; height:120px; object-fit:contain; object-position:center; background:transparent; padding:0}
.head-card figcaption{padding:0; align-self:center}
.head-card .tag{
  display:inline-block; background:var(--coral); color:#fff; border:0;
  text-transform:uppercase; border-radius:999px;
  padding:4px 11px 3px; margin-bottom:10px; font-size:10.5px; letter-spacing:.08em;
}
.head-card h3{font-size:16px; margin-bottom:5px; line-height:1.2}
.head-card figcaption p:last-child{font-size:13.5px; color:var(--muted)}
.hd-pts{list-style:none; margin:0; padding:0; display:grid; gap:6px}
.hd-pts li{
  position:relative; padding-left:14px; font-size:13.5px; line-height:1.4; color:var(--muted);
}
.hd-pts li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:5px; height:5px; border-radius:50%; background:var(--coral);
}

/* ── PILLARS ──────────────────────────────────────────────── */
.pillars{padding:56px 0 84px}
.sec-head{max-width:46ch; margin-bottom:32px}
.sec-head h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:12px}
.sec-head p{color:var(--muted)}
.pillars .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:44px}
.pillar svg{height:58px; width:auto; margin-bottom:20px}
.pillar svg g,.pillar svg path{stroke:var(--mustard); fill:none; stroke-linecap:round; stroke-linejoin:round}
.pillar h3{font-size:20px; margin-bottom:9px}
.pillar p{font-size:14.5px; color:var(--muted)}

/* ── SYSTEM ───────────────────────────────────────────────── */
.system{background:color-mix(in srgb,var(--deep) 5%,var(--bone)); padding:58px 0}
.system .wrap{display:grid; grid-template-columns:.95fr 1.05fr; gap:58px; align-items:center}
/* a stack of prints — only the edges of the ones underneath show */
.pile{position:relative; aspect-ratio:1/1; cursor:pointer; user-select:none}
.sheet{
  position:absolute; inset:0; margin:0; background:var(--bone);
  border:1px solid var(--line); border-radius:16px; padding:14px 14px 0;
  box-shadow:0 10px 30px rgba(12,49,64,.10);
  display:flex; flex-direction:column;
  transition:transform .42s cubic-bezier(.3,.8,.35,1), opacity .3s ease;
}
.sheet img{flex:1; min-height:0; width:100%; object-fit:contain; border-radius:9px}
.sheet figcaption{
  font-size:12.5px; color:var(--muted); padding:11px 2px 13px;
  opacity:0; transition:opacity .25s ease;
}
/* depth: 0 is face up, 1 and 2 peek out behind it */
.sheet[data-pos="0"]{transform:none; z-index:3}
.sheet[data-pos="0"] figcaption{opacity:1}
.sheet[data-pos="1"]{transform:translate(13px,13px) rotate(1.4deg); z-index:2}
.sheet[data-pos="2"]{transform:translate(25px,25px) rotate(2.8deg); z-index:1}
.pile:hover .sheet[data-pos="1"]{transform:translate(17px,16px) rotate(1.8deg)}
.pile:hover .sheet[data-pos="2"]{transform:translate(32px,30px) rotate(3.4deg)}
.pile-hint{
  position:absolute; left:2px; bottom:-26px; z-index:4; margin:0;
  color:var(--muted); text-transform:uppercase; pointer-events:none;
}

/* how does it work */
.how-sub{font-size:19px; margin:30px 0 16px}
.hw{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.hw li{display:flex; gap:15px}
.hw-n{color:var(--mustard); padding-top:2px; flex:none}
.hw b{font-family:var(--display); font-size:15.5px; display:block; margin-bottom:3px}
.hw p{font-size:14px; color:var(--muted)}
.hw-note{font-size:12.5px; color:var(--muted); margin-top:16px; font-style:italic}
.system h2{font-size:clamp(26px,3.3vw,37px); margin-bottom:15px}

/* ── DETAIL STRIP ─────────────────────────────────────────── */

/* ── PROTOTYPE (Deep water → sea glass lives here) ────────── */
.proto{background:var(--deep); color:var(--bone); padding:82px 0}
.proto .wrap{display:grid; grid-template-columns:1fr .85fr; gap:56px; align-items:center}
.proto .eyebrow{color:var(--seaglass)}
.proto h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:16px}
.proto p{color:color-mix(in srgb,var(--bone) 74%,var(--deep))}
.proto img{border-radius:16px}
.proto .voice{color:var(--seaglass); margin-top:20px}


/* ── HOW IT WORKS ─────────────────────────────────────────── */
.how{padding:82px 0; background:color-mix(in srgb,var(--deep) 5%,var(--bone))}
.how-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.how-step{background:var(--bone); border-radius:18px; padding:26px 26px 30px; text-align:center; position:relative}
.how-img{aspect-ratio:4/3; border-radius:14px; overflow:hidden; margin-bottom:18px; background:#f3efe9}
.how-img img{width:100%; height:100%; object-fit:cover; display:block}
.how-num{
  width:30px; height:30px; margin:0 auto 12px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--mono); font-size:13px;
  border:1.5px solid var(--mustard); color:var(--deep);
}
.how-step h3{font-size:19px; margin-bottom:8px}
/* Same chip the builder uses for the travel case, so "not yet" looks the same
   wherever it appears. */
.how-soon{
  display:inline-block; vertical-align:2px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.08em; color:var(--deep);
  border:1px solid var(--mustard); border-radius:999px; padding:2px 8px;
}
.how-step p{font-size:14.5px; color:var(--muted)}

/* ── BUY — Wet sand surface, Deep water type, Mustard as the one accent ── */
.buy{background:var(--sand); color:var(--deep); padding:92px 0; overflow:hidden}
.buy .wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.buy .eyebrow{color:color-mix(in srgb,var(--deep) 58%,var(--sand))}
.buy h2{font-size:clamp(32px,4.4vw,52px); margin-bottom:28px; line-height:1.08}
.buy-price{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:22px}
.buy-price .from{color:color-mix(in srgb,var(--deep) 58%,var(--sand)); text-transform:uppercase}
.buy-price b{font-family:var(--display); font-size:clamp(30px,3.4vw,40px); line-height:1; color:var(--mustard)}
.buy-what{font-size:13.5px; line-height:1.35; color:color-mix(in srgb,var(--deep) 70%,var(--sand))}
.btn.big{font-size:16px; padding:17px 38px}
.buy-fine{color:color-mix(in srgb,var(--deep) 55%,var(--sand)); margin-top:18px}

.buy-fig{position:relative; margin:0}
.buy-fig img{
  width:100%; border-radius:18px; background:var(--bone);
  padding:16px; transform:rotate(-1.6deg);
  box-shadow:0 18px 44px rgba(12,49,64,.14);
}
/* a hand-drawn-feeling stamp, mustard outline only — no second yellow fill */
.buy-sticker{
  position:absolute; right:6px; bottom:-20px; width:112px; height:112px;
  border-radius:50%; background:var(--bone); border:1.5px solid var(--mustard);
  display:grid; place-content:center; text-align:center; gap:2px;
  transform:rotate(9deg); box-shadow:0 8px 22px rgba(12,49,64,.12);
}
.buy-sticker b{font-family:var(--display); font-size:30px; line-height:1; color:var(--mustard)}
.buy-sticker span{
  font-family:var(--body); font-weight:500; font-size:9.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--deep); line-height:1.35;
}

/* ── BUILDER ──────────────────────────────────────────────── */
/* white ground here, matching the live builder page */
#view-build{padding:30px 0 90px; background:#fff; min-height:100vh}
/* Step 4 sells nothing yet: the pre-sale includes the heads, so the cadence and
   billing choices are shown as a preview of the future and switched off. */
.presale-note{
  border:1px solid var(--mustard); border-radius:13px; padding:15px 17px; margin-bottom:22px;
  background:color-mix(in srgb,var(--mustard) 9%,var(--bone));
}
.presale-note b{display:block; font-family:var(--display); font-size:16.5px; margin-bottom:5px}
.presale-note p{font-size:13.5px; color:var(--muted); line-height:1.5}
.future-lbl{margin:0 0 10px}
.future{border:0; margin:0; padding:0; min-width:0; opacity:.42; filter:grayscale(1)}
.build-back{display:inline-block; font-size:14px; color:var(--muted); text-decoration:none; margin-bottom:22px}
.build-back:hover{color:var(--deep)}
.build-grid{display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:start}
.build-sub{color:var(--muted); font-size:15px; margin:-14px 0 22px}
.ritual{font-family:var(--display); font-style:italic; font-size:clamp(30px,3.6vw,44px); margin-bottom:14px}
.ritual-p{color:var(--muted); font-size:16px; margin-bottom:30px}

/* pan-y leaves vertical scrolling to the browser and hands us the horizontal
   gesture; without it a phone eats the swipe as a scroll attempt. */
.car{position:relative; text-align:center; touch-action:pan-y; cursor:grab}
.car:active{cursor:grabbing}
.car img{-webkit-user-drag:none; user-select:none}
.car-track{position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden; background:#faf9f7}
/* Stacked rather than swapped, so one shot can fade out while the next fades
   in. The small drift carries the direction of the swipe - without it a pure
   cross-fade reads as a flicker rather than as movement. */
.car-track img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none;
  transition:opacity .38s ease, transform .38s cubic-bezier(.2,.7,.3,1);
}
.car-track img.is-on{opacity:1; pointer-events:auto}
.car-btn{
  position:absolute; top:40%; transform:translateY(-50%); width:38px; height:38px;
  border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.92);
  color:var(--deep); font-size:18px; line-height:1; cursor:pointer;
}
.car-btn.prev{left:12px} .car-btn.next{right:12px}
.car-dots{display:flex; gap:7px; justify-content:center; margin-top:16px}
.car-dots i{width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer}
.car-dots i.is-on{background:var(--mustard)}
.car-name{color:var(--muted); margin-top:10px; text-transform:uppercase}

.inside{margin-top:26px}
.inside h3{font-size:18px; margin-bottom:16px}
/* The heading is a button so it can fold the list on phones. On desktop the
   collapse rule below simply does not exist, so the list is always open there
   whatever the stored flag says - no JS branch, no way for the two to disagree. */
.ins-h{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:0; padding:0; margin-bottom:16px; cursor:default;
  font-family:var(--display); font-size:18px; font-weight:700; color:var(--deep);
  text-align:left;
}
.ins-chev{display:none; margin-left:auto; flex:none; transition:transform .22s ease}
.ins-row{display:flex; gap:13px; margin-bottom:15px}
.ins-row i{width:7px; height:7px; border-radius:50%; background:var(--mustard); margin-top:7px; flex:none}
.ins-row b{font-family:var(--display); font-size:15px; display:block; margin-bottom:2px}
.ins-row p{font-size:13.5px; color:var(--muted)}

.config{padding:4px 0 0}
.config h2{font-size:27px; margin-bottom:22px}
.config h3{font-size:17px; margin-bottom:10px}
.config h3 em{font-style:normal; font-weight:400; font-size:13px; color:var(--muted)}
.addon{font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--mustard)}
.note{font-size:13px; color:var(--muted); line-height:1.45}
.note.center{text-align:center; margin-top:12px}

.stepper{display:flex; justify-content:space-between; position:relative; margin-bottom:14px}
.stepper-line{position:absolute; left:14px; right:14px; top:14px; height:2px; background:var(--line)}
.stepper-line i{display:block; height:100%; width:0; background:var(--mustard); transition:width .3s ease}
.stp{background:none; border:0; cursor:pointer; display:grid; gap:7px; justify-items:center; position:relative; padding:0; font-family:var(--body)}
.stp-dot{
  width:29px; height:29px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--mono); font-size:12px; background:var(--bone);
  border:1.5px solid var(--line); color:var(--muted);
}
.stp.is-on .stp-dot,.stp.is-done .stp-dot{border-color:var(--deep); background:var(--deep); color:var(--bone)}
.stp-lbl{font-size:11.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.stp.is-on .stp-lbl{color:var(--deep)}
.step-count{color:var(--muted); margin-bottom:22px}

.panel{min-height:210px}
.swatches{display:flex; gap:20px; flex-wrap:wrap; margin-bottom:8px}
.swatches .sw{background:none; border:0; padding:0; cursor:pointer; display:grid; gap:9px; justify-items:center; font-family:var(--body)}
.sw-dot{width:44px; height:44px; border-radius:50%; display:block; border:1.5px solid rgba(12,49,64,.12)}
.sw.is-on .sw-dot{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--deep)}
.sw-lbl{font-size:12.5px; font-weight:500; color:var(--muted)}
.sw.is-on .sw-lbl{color:var(--deep)}
.opt{
  display:grid; gap:7px; width:100%; text-align:left; cursor:pointer;
  font-family:var(--body); background:transparent;
  border:1px solid var(--line); border-radius:14px;
  padding:15px 17px; color:var(--deep);
  transition:border-color .18s ease, background .18s ease;
}
.opt-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.opt-top b{font-size:15px; line-height:1.25}
.opt-price{font-family:var(--mono); font-size:13.5px; white-space:nowrap}
.opt-p{font-size:12.5px; line-height:1.5}
/* The kit's contents read as a list, not a paragraph - five things in one
   sentence is a wall. Real list items rather than typed bullets, so a screen
   reader counts them. */
.opt-p .opt-li{display:list-item; list-style:disc; margin-left:15px; padding-left:2px}
/* in the flow rather than pinned to a corner, so it can never collide with the
   heading above it or with the neighbouring card */
.opt-badge{
  justify-self:start; font-size:9.5px; letter-spacing:.09em; line-height:1.6;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
}
.setups{display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch}
.setups .opt{background:transparent; border-color:var(--line); color:var(--deep)}
.setups .opt:hover,.setups .opt.is-on{border-color:var(--deep); background:color-mix(in srgb,var(--deep) 4%,var(--bone))}
.setups .opt-price{color:var(--muted)}
.setups .opt-p{color:var(--muted)}
.setups .opt-badge{background:var(--deep); color:var(--bone)}

#name-input{
  width:100%; font-family:var(--body); font-size:15px; padding:14px 17px; margin:12px 0 9px;
  border-radius:12px; border:1px solid var(--line); background:var(--bone); color:var(--deep);
}
.toggle{
  display:flex; align-items:center; gap:14px; width:100%; text-align:left; cursor:pointer;
  font-family:var(--body); background:transparent; border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; margin-top:14px; color:var(--deep);
}
.toggle.is-on{border-color:var(--deep)}
.toggle.is-soon{opacity:.55; cursor:not-allowed}
.toggle.is-soon .tick{border-style:dashed}
.toggle.is-gift{cursor:default; border-color:var(--mustard); background:color-mix(in srgb,var(--mustard) 7%,var(--bone))}
.toggle.is-gift .tick{border:0; background:none; display:grid; place-items:center; color:var(--mustard); font-size:17px}
.toggle.is-gift .addon{color:var(--mustard); text-transform:uppercase}
.addon s{opacity:.5}
.addon .ars{font-size:10.5px; opacity:.75}
.sum-row s{opacity:.5; margin-right:4px}
/* The five heads are a pre-sale gift, so the line is a panel rather than one
   more grey row in the tally. Mustard carries the border, the star and the tag;
   the words stay Deep water, because Mustard on Bone is 2.1:1 and the brand
   book reserves it for lines and large display, never body text. */
.sum-gift{
  display:flex; align-items:center; gap:12px;
  margin:12px 0 14px; padding:12px 14px; border-radius:13px;
  border:1px solid var(--mustard);
  background:color-mix(in srgb,var(--mustard) 12%,var(--bone));
}
.sum-gift .gift-mark{width:26px; height:auto; flex:none; display:block}
.sum-gift .gift-text{display:grid; gap:2px; min-width:0}
.sum-gift b{font-family:var(--display); font-size:14.5px; color:var(--deep); font-weight:700}
.sum-gift .gift-text > span{font-size:12px; line-height:1.35; color:var(--deep)}
.sum-gift .gift-tag{
  margin-left:auto; flex:none; align-self:center;
  background:var(--mustard); color:var(--deep);
  font-size:9.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; line-height:1.5;
}
.sum-row .free{color:var(--deep); text-transform:lowercase}
.toggle .tick{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); flex:none}
.toggle.is-on .tick{background:var(--deep); border-color:var(--deep)}
.toggle b{font-family:var(--display); font-size:15px; display:block}
.toggle span span{font-size:13px; color:var(--muted)}

/* One row, always: the unit is in the label above, so each button is a bare
   number and five of them fit across a 360px phone without wrapping. */
.freqs{display:flex; gap:8px; margin-bottom:18px}
.freqs button{
  flex:1 1 0; min-width:0; text-align:center;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; cursor:pointer;
  padding:9px 0; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--muted);
}
/* The order button is repeated beside Back, because on a phone the summary
   that holds the other one is a full screen further down. */
#nav-add{display:none !important}
@media (max-width:900px){
  #nav-add:not([hidden]){display:inline-block !important}
  .presale-note{padding:12px 14px; margin-bottom:14px}
  .presale-note b{font-size:15px; margin-bottom:3px}
  .presale-note p{font-size:12.5px}
  .future-lbl{margin:0 0 7px}
  .future .note{font-size:12.5px}
  .freqs{gap:6px; margin-bottom:0}
  .step-nav{margin-top:18px}
}
.freqs button.is-on{background:var(--deep); border-color:var(--deep); color:var(--bone)}
.step-nav{display:flex; justify-content:space-between; gap:12px; margin:24px 0 0}
.btn.sm{font-size:14px; padding:11px 22px}
.btn.wide{width:100%; text-align:center; margin-top:16px}
.summary{border-top:1px solid var(--line); margin-top:24px; padding-top:20px}
.sum-row{display:flex; justify-content:space-between; font-size:14px; color:var(--muted); margin-bottom:9px}
.sum-row b{font-family:var(--mono); font-size:13px; font-weight:400; color:var(--deep)}
.sum-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:13px; margin-top:13px}
.sum-total span{font-family:var(--display); font-weight:700; font-size:16px}
/* "ARS$ 69.000" is long enough to wrap onto two lines in the narrow column,
   which reads as broken rather than as a total. Keep it on one line and let the
   label beside it do the wrapping instead. */
.sum-total b{font-family:var(--display); font-size:26px; white-space:nowrap}
.sum-total span{max-width:52%}
.summary .btn.light{background:var(--deep); color:var(--bone); border-color:var(--deep)}

/* ── SUSTAINABILITY (sits under Buy) ──────────────────────── */
.equiv{padding:84px 0}
.equiv .head{max-width:50ch; margin-bottom:38px}
.equiv h2{font-size:clamp(28px,3.6vw,42px); margin-bottom:12px}
.equiv .head p{color:var(--muted)}
.equiv-card{display:grid; grid-template-columns:230px 1fr; gap:42px; align-items:center;
  background:var(--bone); border:1px solid var(--line); border-radius:20px; padding:34px 36px}
.equiv-num .big{display:block; font-family:var(--display); font-size:76px; line-height:1; color:var(--mustard)} /* large display — allowed */
.equiv-num .lbl{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--muted)}
.eq-age{margin-bottom:20px}
.eq-age-lbl{display:block; font-size:15px; color:var(--deep); margin-bottom:10px}
.eq-age-lbl b{font-family:var(--mono); font-size:17px; color:var(--mustard)}
/* A range input has no shared styling across engines, so the track and the
   thumb are drawn per engine. The filled part of the track is painted from JS
   as a gradient, because only WebKit can style ::-webkit-slider-runnable-track
   and Firefox needs ::-moz-range-progress instead. */
#eq-age{
  -webkit-appearance:none; appearance:none; width:100%; height:6px;
  border-radius:999px; background:var(--line); outline:none; cursor:pointer;
}
#eq-age::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px;
  border-radius:50%; background:var(--deep); border:3px solid var(--bone);
  box-shadow:0 2px 8px rgba(12,49,64,.3); cursor:grab;
}
#eq-age::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%; background:var(--deep);
  border:3px solid var(--bone); box-shadow:0 2px 8px rgba(12,49,64,.3); cursor:grab;
}
#eq-age:active::-webkit-slider-thumb{cursor:grabbing}
.eq-scale{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:7px}
.eq-split{font-size:11.5px; color:var(--muted); margin:-12px 0 18px}
.eq-split b{font-family:var(--mono); color:var(--deep); font-weight:400}
.dots{display:flex; flex-wrap:wrap; gap:3px; margin-bottom:22px}
.dots i{width:7px; height:7px; border-radius:50%; background:color-mix(in srgb,var(--deep) 17%,var(--bone))}
.dots i.on{background:var(--deep)}
.equiv-rows{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.equiv-rows li{display:flex; justify-content:space-between; gap:16px; font-size:14.5px; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:9px}
.equiv-rows li b{font-family:var(--mono); font-size:13px; color:var(--deep); font-weight:400}
.equiv-foot{font-size:12.5px; color:var(--muted); margin-top:18px}

/* ── FOOTER ───────────────────────────────────────────────── */
/* Carries the whole site: these are the only links to the inner pages on a
   phone, where the top nav is hidden. */
.foot{background:var(--deep); color:var(--bone); padding:62px 0 40px}
.foot-top{display:grid; grid-template-columns:minmax(210px,1fr) 1.7fr; gap:52px; align-items:start}
.foot .logo{width:132px; margin-bottom:15px}
.foot-tag{font-family:var(--display); font-style:italic; font-size:15.5px; margin-bottom:18px}
.foot-social{display:flex; gap:11px}
.foot-social a{
  width:35px; height:35px; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(244,239,230,.26); color:var(--bone); transition:background .2s ease, color .2s ease;
}
.foot-social a:hover{background:var(--bone); color:var(--deep); border-color:var(--bone)}
.foot-links{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.foot-links h5{
  font-family:var(--body); font-weight:500; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; margin-bottom:13px;
  color:color-mix(in srgb,var(--bone) 54%,var(--deep));
}
.foot-links a{
  display:block; font-size:14px; margin-bottom:10px;
  color:var(--bone); text-decoration:none;
}
.foot-links a:hover{text-decoration:underline; text-underline-offset:3px}
.foot-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:48px; padding-top:22px; border-top:1px solid rgba(244,239,230,.16);
}
.foot-bottom p{font-size:12.5px; color:color-mix(in srgb,var(--bone) 62%,var(--deep))}
.foot-bottom a{font-size:12.5px; color:var(--bone); text-decoration:none}
.foot-bottom a:hover{text-decoration:underline}
.foot-legal{display:flex; gap:20px; flex-wrap:wrap}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width:900px){
  .hero .wrap,.wait .wrap,.system .wrap,.proto .wrap,.buy .wrap{grid-template-columns:1fr; gap:38px}
  .pillars .grid{grid-template-columns:1fr; gap:34px}
  .pile{aspect-ratio:4/5; margin-right:36px}   /* room for the offset sheets */
  .pile:hover .sheet[data-pos="1"]{transform:translate(13px,13px) rotate(1.4deg)}
  .pile:hover .sheet[data-pos="2"]{transform:translate(25px,25px) rotate(2.8deg)}
  .pile-hint{bottom:-24px}
  .wait-panel{grid-template-columns:1fr; gap:34px; padding:34px 24px; border-radius:20px}
  /* the panel's own padding narrows the row, so the four units have to shrink with it */
  .cd-row{gap:8px}
  .cd-u{min-width:56px; padding:10px 6px 8px}
  .cd-u b{font-size:24px}
  .heads-layout{grid-template-columns:1fr; gap:16px}
  /* A handle is a tall, narrow object: standing up it spent 260px of a phone
     screen on a 34px-wide silhouette. On a phone it lies down instead - the
     whole handle is still visible, in a third of the height.
     The image comes out of flow because a rotated element keeps its ORIGINAL
     layout box, so the figure's padding-top, not the image, sets the lane it
     lies in and the caption still follows underneath. */
  .handle-fig{display:block; position:relative; height:auto; padding:88px 0 0}
  .handle-fig img{
    position:absolute; top:44px; left:50%; margin:0;
    width:72px;                  /* after the turn, this is how thick it reads */
    height:min(300px,84vw);      /* after the turn, this is how long it reads */
    max-height:none;
    transform:translate(-50%,-50%) rotate(90deg);
    animation:bob-lying 7s ease-in-out infinite;
  }
  .coral{opacity:.38}
  .coral.tr,.coral.br,.coral.bl,.coral.tl{width:86px}
  .scrap{opacity:.82; width:calc(var(--w) * .56)}
  /* the four units share the row instead of claiming a min-width that cannot fit */
  .cd-row{display:flex; gap:7px}
  .cd-u{flex:1 1 0; min-width:0; padding:9px 4px 7px}
  .wait-card{padding:22px 18px}
  .equiv-card{grid-template-columns:1fr; gap:26px}
  /* The four links move into a drawer under the bar. Opened by class rather
     than the hidden attribute, so desktop never sees any of this. */
  .nav ul{
    display:none; position:absolute; left:0; right:0; top:100%;
    margin:0; padding:6px 22px 14px; gap:0;
    background:var(--bone); border-bottom:1px solid var(--line);
    box-shadow:0 18px 30px rgba(12,49,64,.10);
  }
  .nav.is-open ul{display:block}
  .nav ul li + li{border-top:1px solid var(--line)}
  .nav ul a{display:block; padding:13px 2px; font-size:15.5px; color:var(--deep)}
  /* the top-level rule hides it for the desktop bar; the drawer turns it on */
  .nav ul li.nav-menu-cta{display:block; border-top:0; padding-top:14px}
  .nav ul li.nav-menu-cta a{
    padding:13px 20px; color:var(--bone); text-align:center; border-radius:999px;
  }
  .nav-toggle{display:grid}
  .nav .wrap{gap:7px; padding:0 14px}
  .nav .wrap > a:first-child{flex:none; margin-right:auto}
  .lang{flex:none}
  .nav .cta{padding:9px 13px; font-size:12.5px; white-space:nowrap}
  .nav-cart{width:34px; height:34px; flex:none}
  .nav-toggle{flex:none}
  /* on a phone the flag carries it — 🇺🇸 for English, 🇦🇷 for Spanish */
  .lang .lab{display:none}
  .lang .flag{display:block}
  .lang button{padding:5px 7px}
  .lang .flag{font-size:13px}
  /* The brand book says 110px, but with only one of Buy/cart in the row there
     is room, and at 110 the wordmark read as an afterthought beside a 34px
     icon. 132 with tighter gutters still clears every other control. */
  .nav .logo{width:132px}
  .hero-chip{right:10px; bottom:46px}
  /* On a phone the hero stacks, and .hero-stickers spans the whole stacked
     column — so these percentages reach down over the photos. That overlap is
     wanted: they are stickers laid on the page, not labels pointing at it.
     Inline custom properties outrank a stylesheet rule, so these need !important. */
  .hsticker{--w:64px !important}
  .hsticker:first-child{--sy:-1% !important; --sx:auto !important; --rsx:3% !important}
  /* the floss head sits ON the big photo's top-left corner, straddling it */
  .hsticker:nth-child(2){--w:58px !important; --sy:46% !important; --sx:23% !important; --rsx:auto !important}
  .hsticker:nth-child(3){--w:60px !important; --sy:63% !important; --sx:2% !important}
  /* On a phone the small shot was sitting over 49% of the big one, which is
     most of the product. The figure bleeds into the right gutter and starts
     further right, and the big shot is cropped from its left edge - that
     slides the holder rightwards inside its own frame, clear of the overlay,
     without shrinking it. */
  .hero-fig{margin:0 -22px 0 0; padding:0 0 30px 86px}
  .shot-a{height:50vh; max-height:430px; object-fit:cover; object-position:14% 62%}
  .shot-b{width:48%}
  /* a patchwork needs room: on a phone only the outer clipping of each pair stays */
  .scrap + .scrap{display:none}
  .how-grid{grid-template-columns:1fr}
  .buy-fig{order:-1}
  .buy-sticker{width:92px; height:92px; right:4px; bottom:-14px}
  .foot-top{grid-template-columns:1fr; gap:34px}
  .foot-links{grid-template-columns:1fr 1fr; gap:24px}
  .build-grid{grid-template-columns:1fr; gap:34px}
  .swatches{gap:9px; flex-wrap:nowrap; justify-content:space-between}
  .swatches .sw{flex:1 1 0; min-width:0}
  .sw-dot{width:38px; height:38px}
  .sw-lbl{font-size:10.5px; line-height:1.25; text-align:center}
  .config{padding:0}
  /* phones only: the kit contents fold, so the configurator starts higher up */
  .ins-h{cursor:pointer}
  .ins-chev{display:block}
  .ins-h[aria-expanded="false"] .ins-chev{transform:rotate(-90deg)}
  .ins-body[data-collapsed="1"]{display:none}
  .setups{grid-template-columns:1fr}
  .stp-lbl{display:none}
}
@media (max-width:420px){
  .btn{display:block; text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .splash.run .swell,.splash.run .word,.splash.run{animation-duration:.01ms; animation-delay:0ms}
  .wait .dot{animation:none}
  .ticker-track,.handle-fig img,.hsticker{animation:none}
}


/* The build stamps width/height on every <img> so the browser reserves the box
   and nothing reflows as images arrive. Wherever CSS does not set a height of
   its own, that attribute would win and stretch the image, so hand the box back
   to CSS globally. Rules like .head-card img{height:120px} are more specific
   and still win; max-height rules are unaffected. */
img { height: auto; }