/* ═══════════════════════════════════════════════════════════════════════════
   ORDINAL — landing page.

   The idea: order, and the one thing out of it. Every photograph shows an
   ordered logistics system with exactly one element in our orange — the same
   orange the product uses for "this needs you". The page's one signature move
   is the hero catching that element with a detection box, the way the product
   catches an exception.

   Craft rules, kept from studying burthq.com and measuring rather than guessing:
     a grey ground (#E1E1E1) with visible grain tiled at 153.5px;
     display type at weight 400, never heavier;
     square corners on photographs, pill corners on chrome;
     blocks that rise 40px and fade in as they enter view.

   Colour is disciplined underneath: --need only where something needs a person
   or a clock is running, --good only on money recovered. Nothing else is
   coloured, which is what lets one orange container carry a whole headline.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Host Grotesk";src:url(../assets/fonts/host-grotesk-var.woff2) format("woff2");
  font-weight:300 800;font-display:swap}
@font-face{font-family:"DM Sans";src:url(../assets/fonts/dm-sans-var.woff2) format("woff2");
  font-weight:100 1000;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../assets/fonts/dm-mono-400.woff2) format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url(../assets/fonts/dm-mono-500.woff2) format("woff2");
  font-weight:500;font-display:swap}

:root{
  --ground:#E1E1E1;
  --paper:#FFFFFF;
  --ink:#16161A;
  --dim:#55555B;        /* 6.1:1 on the ground */
  --faint:#5C5C63;      /* 5.1:1 on the ground, 4.7:1 on its darkest grain */
  --said:#8E8E88;       /* the grey setup line of a heading — display size only */
  --rule:#CBCBCB;
  --rule-2:#B9B9B9;

  --need:#C2410C;
  --need-soft:#FBF0EA;
  --good:#12704A;
  --wait:#946200;               /* waiting on someone else — amber, 5.2:1 */
  --wait-soft:#FBF3E0;

  --wash:238,238,236;           /* rgb of the photo washes */
  --lede:#3A3A40;               /* body text sitting on photographs */
  --chrome:rgba(var(--wash),.76);/* the floating nav */
  --btn-bg:rgba(255,255,255,.72);
  --btn-line:rgba(22,22,26,.16);
  --primary:var(--ink); --primary-hi:#000; --on-primary:#fff;
  --panel:rgba(255,255,255,.62);
  --grain-blend:multiply; --grain-op:.5;
  --mark:var(--ink); --mark-bar:var(--ink);

  --display:"Host Grotesk","DM Sans",-apple-system,system-ui,sans-serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --pad:clamp(20px,5vw,48px);
  --sec:clamp(76px,9vw,132px);
  --out:cubic-bezier(.16,1,.3,1);          /* exponential ease-out */
  --soft:cubic-bezier(.44,0,.56,1);        /* burthq's colour transition */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;position:relative;background:var(--ground);color:var(--ink);
  font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* The grain, over the whole document. It is meant to be seen: it is what stops
   a flat grey from reading as a wireframe. */
body::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:var(--grain-op);
  mix-blend-mode:var(--grain-blend);background-size:153.5px 153.5px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
p{margin:0}

::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--need);outline-offset:3px;border-radius:4px}
input{caret-color:var(--need)}

.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:var(--pad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;z-index:99;background:var(--ink);color:var(--paper);padding:12px 18px}
.skip:focus{left:8px;top:8px}

/* ── type ───────────────────────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;text-wrap:balance}
h1{font-size:clamp(2.6rem,5.4vw,4.1rem);letter-spacing:-.034em;line-height:1.02}
h2{font-size:clamp(1.95rem,3.4vw,2.7rem);letter-spacing:-.03em;line-height:1.08}
h3{font-size:1.2rem;letter-spacing:-.02em;line-height:1.25}
/* the setup line in grey, the claim in black */
h2 .said{display:block;color:var(--said)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;
  border:1px solid var(--btn-line);border-radius:999px;background:var(--btn-bg);
  font-size:.95rem;font-weight:500;letter-spacing:-.01em;cursor:pointer;white-space:nowrap;
  transition:background .4s var(--soft),border-color .4s var(--soft),color .4s var(--soft),transform .2s var(--out)}
.btn:hover{background:var(--paper);border-color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.btn-p:hover{background:var(--primary-hi);border-color:var(--primary-hi)}
.cta{display:flex;gap:10px;flex-wrap:wrap}

/* ── masthead: a pill floating over the page ───────────────────────────── */
.mast{position:fixed;inset:14px var(--pad) auto;z-index:40;pointer-events:none}
.mast-in{display:flex;align-items:center;gap:26px;max-width:1084px;min-height:56px;margin-inline:auto;
  padding:0 8px 0 22px;border-radius:999px;pointer-events:auto;
  background:var(--chrome);backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);box-shadow:inset 0 0 0 1px rgba(22,22,26,.06)}
.word{display:inline-flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.03em;font-size:1.06rem}
.word-m{width:18px;height:18px;color:var(--mark);flex:none}
.word-m rect{fill:var(--mark-bar)}
.mast-n{display:flex;gap:24px;margin-inline-start:auto;font-size:.92rem;color:var(--dim)}
.mast-n a{transition:color .4s var(--soft)}
.mast-n a:hover{color:var(--ink)}
.mast-cta{padding:9px 18px;font-size:.9rem}
@media (max-width:720px){.mast-n{display:none}.mast-cta{margin-inline-start:auto}}

/* ── hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden;min-height:min(92svh,880px);
  display:flex;align-items:flex-start}
.hero-scene,.hero-move{position:absolute;inset:0;transform-origin:var(--ox,70%) var(--oy,80%)}
.hero-scene{z-index:-1}
.hero-img{position:absolute;inset:0}
/* Biased right so a narrow screen crops toward the orange container, not away. */
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
/* Washed where the words are, clear where the exception is. The orange has to
   stay the one warm, saturated thing in the frame or the picture stops saying
   anything. */
.hero-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(var(--wash),.90) 0%,rgba(var(--wash),.82) 26%,
      rgba(var(--wash),.40) 45%,rgba(var(--wash),0) 60%),
    linear-gradient(180deg,rgba(var(--wash),.45) 0%,rgba(var(--wash),0) 26%)}
.hero-in{padding-top:clamp(128px,19vh,180px);padding-bottom:64px}
.hero h1{max-width:none}
.hero .lede{margin-top:22px;max-width:44ch;font-size:clamp(1.04rem,1.3vw,1.16rem);line-height:1.55;color:var(--lede)}
.hero .cta{margin-top:30px}

/* the detection box: the product catching the exception in the photograph */
.catch{position:absolute;inset:0;z-index:2;pointer-events:none}
.catch-box{position:absolute;left:var(--bx,0);top:var(--by,0);width:var(--bw,0);height:var(--bh,0);
  opacity:0;transform:scale(1.18);transition:opacity .5s var(--out),transform .7s var(--out)}
.catch-box i{position:absolute;width:14px;height:14px;border:2px solid var(--need)}
.catch-box i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0}
.catch-box i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0}
.catch-box i:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0}
.catch-box i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0}
.catch-line{position:absolute;left:var(--lx,0);top:var(--ly,0);width:var(--lw,0);height:var(--lh,1px);
  background:var(--need);transform-origin:right center;transform:scaleX(0);
  transition:transform .5s var(--out) .35s}
/* below or above the box, the hairline runs vertically and grows from the box */
.catch[data-o="v"] .catch-line{transform-origin:center top;transform:scaleY(0)}
.catch-tag{position:absolute;left:var(--tx,0);top:var(--ty,0);width:250px;max-width:calc(100% - 32px);padding:11px 14px 12px;
  background:rgba(255,255,255,.94);border-radius:10px;box-shadow:0 1px 0 rgba(22,22,26,.05),0 10px 30px -14px rgba(22,22,26,.35);
  opacity:0;transform:translateY(6px);transition:opacity .5s var(--out) .7s,transform .6s var(--out) .7s}
.catch-k{display:block;font:500 .75rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--need)}
.catch-tag b{display:block;margin-top:7px;font-weight:560;font-size:.93rem;letter-spacing:-.012em}
.catch-v{display:block;margin-top:4px;font:400 .76rem/1.4 var(--mono);color:var(--dim)}
.catch.on .catch-box{opacity:1;transform:none}
.catch.on .catch-line{transform:none}
.catch.on .catch-tag{opacity:1;transform:none}
.catch.hide-tag .catch-tag,.catch.hide-tag .catch-line{display:none}

/* ── bands ──────────────────────────────────────────────────────────────── */
.band,.uses,.close{padding-block:var(--sec)}
.band-ft{margin-top:clamp(34px,4vw,52px);padding-top:22px;border-top:1px solid var(--rule);
  max-width:64ch;color:var(--dim);font-size:.98rem}

/* how it works: four cards in a row, the one in focus opens. After freehand.ai's
   spend cards, except ours open to the details instead of only zooming. The
   details live in the same frosted glass as the use-case panels, so the page
   speaks one visual language. */
.band-lede{margin-top:16px;max-width:52ch;font-family:var(--display);font-size:clamp(1.12rem,1.5vw,1.3rem);
  letter-spacing:-.02em;color:var(--lede)}
.team{list-style:none;display:flex;gap:12px;height:clamp(480px,40vw,560px);margin:clamp(34px,4vw,52px) 0 0;padding:0}
.mate{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:#D3D3D0;cursor:pointer;
  transition:flex-grow .8s var(--out)}
.mate.is-open{flex-grow:3.1;cursor:default}
.mate:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transition:transform 1.4s var(--out)}
.mate.is-open img{transform:scale(1.05)}
.mate-in{position:absolute;left:14px;right:14px;bottom:14px;max-width:460px;z-index:1;padding:13px 15px 14px;
  border-radius:12px;background:rgba(250,250,248,.86);border:1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  box-shadow:0 1px 0 rgba(22,22,26,.04),0 20px 40px -24px rgba(22,22,26,.5)}
.mate h3{font-size:clamp(1.08rem,1.3vw,1.22rem);letter-spacing:-.02em;line-height:1.2}
/* the details: a grid-rows accordion (transitions.dev #21), so height animates without measuring */
.mate-more{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .6s var(--out),opacity .25s var(--out)}
.mate-more>div{min-height:0;overflow:hidden}
.mate.is-open .mate-more{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .6s var(--out) .12s,opacity .5s var(--out) .3s}
.mate-p{margin-top:9px;font-size:.94rem;line-height:1.5}
.mate-ex{display:flex;justify-content:space-between;gap:12px;margin-top:11px;padding:8px 11px;border-radius:9px;
  background:rgba(22,22,26,.05);font:400 .8rem/1.4 var(--mono);color:var(--dim)}
.mate-ex b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mate-who{margin-top:10px;font:400 .78rem/1.4 var(--mono);color:var(--faint)}
.mate-never{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(22,22,26,.08);
  font-size:.86rem;line-height:1.45;color:var(--ink)}
.mate-never .ic{flex:none;width:15px;height:15px;margin-top:2px;stroke:var(--need)}
.mate-acts{display:flex;gap:6px;margin-top:11px}
.mate-acts span{padding:7px 13px;border-radius:999px;border:1px solid rgba(22,22,26,.14);background:#fff;font-size:.8rem;font-weight:500}
.mate-acts span:first-child{background:var(--ink);border-color:var(--ink);color:#fff}
.mate .src-row{margin-top:11px}
.mate .src-row li{padding:5px 9px 5px 7px;font-size:.76rem;background:rgba(255,255,255,.7)}
.mate .src-row .ic{width:13px;height:13px}
@media (prefers-reduced-motion:reduce){.mate,.mate img,.mate-more{transition:none}}
/* On a wide screen the row holds still while the page scrolls through it, and
   each step opens the next card, so nobody has to hover to read all four. The
   scroll is the browser's own; the bars below fill as you go and jump on click. */
.team-steps{display:none}
@media (min-width:761px) and (prefers-reduced-motion:no-preference){
  .team-pin{height:300svh}
  .team-stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
    padding-top:64px}
  .team{height:clamp(360px,calc(100svh - 330px),540px)}
  .team-steps{display:flex;gap:6px;margin-top:16px}
  .team-steps button{appearance:none;border:0;background:none;width:46px;padding:9px 0;cursor:pointer}
  .team-steps span{position:relative;display:block;height:2px;border-radius:2px;overflow:hidden;background:var(--rule-2)}
  .team-steps span::after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;
    transform:scaleX(var(--f,0))}
  .team-steps button:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:4px}
  #team{padding-top:0}
}
/* A phone has no hover: the cards stack, every one open, the glass just below
   its photograph and overlapping its bottom edge, as on the use-case tabs. */
@media (max-width:760px){
  .team{flex-direction:column;height:auto;gap:22px}
  .mate{overflow:visible;background:none;cursor:default}
  .mate img{position:relative;display:block;height:auto;aspect-ratio:4/3;transform:none!important}
  .mate-in{position:relative;left:auto;right:auto;bottom:auto;max-width:none;margin:-36px 12px 0}
  .mate-more{grid-template-rows:1fr;opacity:1}
}

/* the closing band: full colour, words in the left third */
.cta-band{position:relative;isolation:isolate;margin:clamp(24px,4vw,56px) var(--pad) clamp(56px,7vw,96px)}
.cta-band img{width:100%;height:clamp(420px,44vw,600px);object-fit:cover}
.cta-band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(98deg,rgba(var(--wash),.9) 0%,rgba(var(--wash),.58) 34%,rgba(var(--wash),0) 60%)}
.cta-band-in{position:absolute;z-index:1;left:clamp(26px,4.4vw,64px);top:0;bottom:0;width:min(430px,44%);
  display:flex;flex-direction:column;justify-content:center}
.cta-band-in p{margin-top:14px;color:var(--lede)}
.cta-band-in .req{margin-top:26px}
.cta-band-in .close-n{margin-top:10px}

/* the ask */
.close-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,5vw,76px);align-items:start}
.close-t p{margin-top:16px;max-width:48ch;color:var(--dim)}
.close-f{padding-top:10px}
.req{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-start}
.req input{flex:1 1 220px;min-width:0;padding:12px 18px;background:var(--btn-bg);
  border:1px solid var(--btn-line);border-radius:999px;font-size:.96rem;transition:border-color .3s var(--soft)}
.req input::placeholder{color:var(--faint)}
.req input:hover{border-color:rgba(22,22,26,.3)}
.req input:focus{border-color:var(--ink);outline:none}
.req input[aria-invalid="true"]{border-color:var(--need)}
.req-msg{flex-basis:100%;min-height:1.2em;margin-top:4px;font-size:.87rem;color:var(--need)}
.req-msg:empty{min-height:0;margin:0}
.req-msg.is-ok{color:var(--dim)}
.close-n{margin-top:12px;font-size:.88rem;color:var(--faint)}

/* footer */
.foot{border-top:1px solid var(--rule);padding-block:30px}
.foot-in{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}
.foot-c{font-size:.88rem;color:var(--faint)}
.foot-c a{transition:color .4s var(--soft)}
.foot-c a:hover{color:var(--ink)}

/* ── reveal: measured off burthq.com, 40px rise and fade ───────────────── */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(40px);
    transition:opacity .8s var(--out),transform .8s var(--out);transition-delay:var(--d,0ms)}
  .rise.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0ms!important}
}

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .close-in{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero-img img{object-position:80% 50%}
  .hero-img::after{background:linear-gradient(180deg,rgba(var(--wash),.92) 0%,rgba(var(--wash),.8) 42%,
    rgba(var(--wash),.25) 62%,rgba(var(--wash),0) 74%)}
  .cta-band{margin-inline:0}
  .cta-band img{height:auto;aspect-ratio:4/3;object-position:var(--close-x,84%) 50%}
  .cta-band::after{display:none}
  .cta-band-in{position:static;width:auto;display:block;padding:28px var(--pad) 0}

}

/* ── the hero drifts ────────────────────────────────────────────────────── */
/* Two nested moves, both centred on the exception. First the camera pulls back
   from the orange trailer to reveal the park (fast, then settling); after that
   it breathes, slowly, for as long as the page is open. */
@media (prefers-reduced-motion:no-preference){
  .hero-scene{animation:reveal 11s cubic-bezier(.16,1,.3,1) both}
  .hero-move{animation:breathe 26s cubic-bezier(.45,0,.55,1) 11s infinite alternate both}
  .hero-scene,.hero-move{will-change:transform}
}
@keyframes reveal{from{transform:scale(1.14)}to{transform:none}}
@keyframes breathe{from{transform:none}to{transform:scale(1.05)}}

/* ═══ themes (exploration) ═══════════════════════════════════════════════
   Switch with ?t=ember or ?t=night. Mono is the default. The product mock and
   the exception tag stay light in every theme: they are the product, and the
   product is light. */
:root[data-theme="ember"]{
  --ground:#F6F4F1; --paper:#FFFFFF; --ink:#1B1613; --dim:#5A524B; --faint:#6B625A; --said:#A0968C;
  --rule:#E3DED8; --rule-2:#D4CDC5;
  --wash:246,244,241; --lede:#3A322C; --chrome:rgba(250,248,246,.8);
  --btn-bg:rgba(255,255,255,.8); --btn-line:rgba(27,22,19,.14);
  --primary:#C2410C; --primary-hi:#A6370A; --on-primary:#fff;
  --panel:rgba(255,255,255,.8); --grain-op:.35;
  --mark:var(--ink); --mark-bar:#C2410C;
}
:root[data-theme="night"]{
  --ground:#101113; --paper:#FFFFFF; --ink:#ECECEA; --dim:#A3A3AA; --faint:#8E8E96; --said:#6E6E76;
  --rule:#26272B; --rule-2:#34353A;
  --wash:16,17,19; --lede:#C6C6CC; --chrome:rgba(24,25,28,.72);
  --btn-bg:rgba(255,255,255,.06); --btn-line:rgba(236,236,234,.18);
  --primary:#ECECEA; --primary-hi:#fff; --on-primary:#101113;
  --panel:rgba(255,255,255,.04); --grain-blend:overlay; --grain-op:.35;
  --mark:var(--ink); --mark-bar:var(--ink);
}
:root[data-theme="night"] .catch-tag,:root[data-theme="night"] .frag{color:#16161A}

/* ═══ use cases ═══════════════════════════════════════════════════════════
   Burt's form with our content: tabs, one photograph each, one piece of product
   over it, a short paragraph. The photograph's orange thing is the tab's
   exception, caught by the same corner box as the hero; the glass panel is what
   the agents do about it, assembling row by row when the tab opens. */
.ic{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.uses{border-top:1px solid var(--rule)}
.uses-t{max-width:780px}
.uses-lede{margin-top:18px;max-width:50ch;font-family:var(--display);font-size:clamp(1.12rem,1.5vw,1.3rem);
  letter-spacing:-.02em;color:var(--lede)}

.tabs{display:flex;gap:4px;margin-top:clamp(34px,4vw,52px);border-bottom:1px solid var(--rule-2)}
.tab{position:relative;appearance:none;border:0;background:none;padding:12px 14px 15px;cursor:pointer;
  font:400 1rem/1 var(--sans);color:var(--faint);transition:color .3s var(--soft)}
.tab:hover,.tab[aria-selected="true"]{color:var(--ink)}
.tab::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;
  background:var(--ink);transform:scaleX(0);transition:transform .5s var(--out)}
.tab[aria-selected="true"]::after{transform:none}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:10px}

.use{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:clamp(28px,5vw,76px);
  align-items:center;margin-top:clamp(22px,2.6vw,32px)}
.use[hidden]{display:none}
.use-shot{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:#D3D3D0}
.use-shot img{width:100%;height:100%;object-fit:cover}

/* the exception, boxed; placed from the image's own data-box by site.js */
.use-box{position:absolute;left:var(--bx,0);top:var(--by,0);width:var(--bw,0);height:var(--bh,0);
  pointer-events:none;display:none}
.use-box.ok{display:block}
.use-box i{position:absolute;width:12px;height:12px;border:2px solid var(--need)}
.use-box i:nth-child(1){left:-2px;top:-2px;border-right:0;border-bottom:0}
.use-box i:nth-child(2){right:-2px;top:-2px;border-left:0;border-bottom:0}
.use-box i:nth-child(3){left:-2px;bottom:-2px;border-right:0;border-top:0}
.use-box i:nth-child(4){right:-2px;bottom:-2px;border-left:0;border-top:0}

/* the product, in frosted glass over the photograph's calm lower-left */
.frag{position:absolute;left:clamp(12px,4%,24px);bottom:clamp(12px,4.5%,24px);width:min(calc(100% - 24px),344px);
  display:flex;flex-direction:column;gap:7px;padding:12px 13px 12px;border-radius:12px;color:var(--ink);
  background:rgba(250,250,248,.86);border:1px solid rgba(255,255,255,.72);
  box-shadow:0 1px 0 rgba(22,22,26,.04),0 24px 44px -22px rgba(22,22,26,.55);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  font-size:.8rem;line-height:1.35}
.fh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.fa{display:inline-flex;align-items:center;gap:7px;font-weight:600;letter-spacing:-.01em}
.fa .ic{width:20px;height:20px;padding:4px;border-radius:6px;background:var(--ink);stroke:#fff}
.fp{flex:none;display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;
  background:#EDEDEA;color:var(--dim);font:500 .75rem/1 var(--mono)}
.fp::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.fp.need{background:var(--need-soft);color:var(--need)}
.ft{color:var(--dim)}
.fq{font-style:italic}
.fq small{display:block;margin-top:2px;font:400 .75rem/1.3 var(--mono);font-style:normal;color:var(--faint)}
.fr{display:flex;justify-content:space-between;gap:12px;padding-top:7px;border-top:1px solid rgba(22,22,26,.08)}
.fr span{color:var(--dim)}
.fr b{flex:none;font:500 .8rem/1.35 var(--mono);font-variant-numeric:tabular-nums}
.ff{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:9px;
  border-top:1px solid rgba(22,22,26,.08)}
.ff small{font-size:.75rem;line-height:1.3;color:var(--faint)}
.fb{flex:none;padding:8px 11px;border-radius:999px;background:var(--ink);color:#fff;
  font:500 .75rem/1 var(--sans);white-space:nowrap}

.use-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:46ch}
.use-k{font:500 .78rem/1 var(--mono);color:var(--faint)}
.use-p{font:400 clamp(1.14rem,1.6vw,1.34rem)/1.45 var(--display);letter-spacing:-.015em}
.use-who{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.use-who li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(22,22,26,.08);font-size:.84rem}
.use-who .ic{width:15px;height:15px}
.use-who i{margin-left:2px;font:400 .75rem/1 var(--mono);font-style:normal;color:var(--faint)}

/* a tab opening: the photograph settles, the panel assembles, the box lands */
@media (prefers-reduced-motion:no-preference){
  .js .use-shot img{transform:scale(1.045);transition:transform 1.6s var(--out)}
  .js .frag{opacity:0;transform:translateY(12px);transition:opacity .6s var(--out),transform .8s var(--out)}
  .js .frag>*{opacity:0;transform:translateY(6px);transition:opacity .5s var(--out),transform .6s var(--out);
    transition-delay:calc(var(--i,0)*90ms + 220ms)}
  .js .use-box{opacity:0;transform:scale(1.25);transition:opacity .45s var(--out) .8s,transform .7s var(--out) .8s}
  .js .use-copy{opacity:0;transform:translateY(8px);transition:opacity .6s var(--out) .08s,transform .7s var(--out) .08s}
  .js .use.on .use-shot img,.js .use.on .frag,.js .use.on .frag>*,.js .use.on .use-box,.js .use.on .use-copy{opacity:1;transform:none}
}

.src-row{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0}
.src-row li{display:inline-flex;align-items:center;gap:7px;padding:6px 11px 6px 9px;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(22,22,26,.08);font-size:.82rem;color:var(--dim)}
.src-row .ic{width:15px;height:15px;stroke:var(--ink)}

@media (max-width:860px){
  .use{grid-template-columns:1fr}
  .use-copy{max-width:none}
}
/* On a phone the glass would cover the exception, so it drops below the
   photograph and overlaps only its bottom edge. Tabs become a two-by-two grid:
   four labels never fit one row, and a scrolling row hides half of them. */
@media (max-width:640px){
  .tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;border-bottom:0}
  .tab{padding:11px 10px;border:1px solid var(--rule-2);border-radius:999px;background:rgba(255,255,255,.4);
    font-size:.92rem;text-align:center}
  .tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
  .tab::after{display:none}
  .use-shot{aspect-ratio:auto;overflow:visible;background:none}
  .use-shot img{aspect-ratio:4/3;height:auto}
  .frag{position:relative;left:auto;bottom:auto;width:auto;margin:-40px 12px 0}
}