/* ============================================================
   FIZZY design system v2 — editorial / dark-first
   Poly (serif display) + Space Grotesk (UI/data) · Fizz brand
   ============================================================ */

/* ---------- tokens (dark-first) ---------- */
:root{
  --bg:#09090b; --bg-2:#0f0f12; --panel:#0f0f12; --panel-2:#141418;
  --border:#26262b; --border-2:#1b1b1f;
  --fg:#f6f6f8; --fg-2:#c7c7cf; --muted:#8a8a94;
  --accent:#6c8cff; --accent-solid:#1B3BFF; --teal:#00D8C4;
  /* text-safe teal: the bright teal is a graphic colour, it fails 4.5:1 as small text on white */
  --teal-ink:#00D8C4; --baslic:#7fae95;
  /* receipt surface: must differ from --bg, which --panel does not in light mode */
  --tape-bg:#111116;
  --invert-bg:#ffffff; --invert-fg:#0b0b0d;
  --ok:#00c2a8; --warn:#F5A300; --err:#E1341A;
  --nav-h:60px; --maxw:1280px;
  --dot:rgba(255,255,255,.10);
  --shadow:0 30px 80px -40px rgba(0,0,0,.75);
}
:root[data-theme="light"]{
  /* neutrals carry a slight bias toward Fizz Blue rather than sitting on pure grey */
  --bg:#ffffff; --bg-2:#f7f8fc; --panel:#ffffff; --panel-2:#f3f5fb; --tape-bg:#f3f5fb;
  --border:#e6e8ee; --border-2:#eef0f4;
  --fg:#0B1020; --fg-2:#3a4152; --muted:#63697a;
  --accent:#1B3BFF; --accent-solid:#1B3BFF; --teal:#00b39a;
  --teal-ink:#00796B; --baslic:#4a7a5f; --ok:#008a76;
  --invert-bg:#0B1020; --invert-fg:#ffffff;
  --dot:rgba(11,16,32,.08);
  --shadow:0 30px 80px -44px rgba(11,16,32,.4);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; }
*::selection{ background:var(--accent-solid); color:#fff; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 14px); }
body{ margin:0; padding-top:var(--nav-h); background:var(--bg); color:var(--fg); font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-wrap:break-word;
  transition:background .3s ease,color .3s ease; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4,p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- type ---------- */
.serif{ font-family:'Poly',Georgia,serif; font-weight:400; }
.serif-i{ font-family:'Poly',Georgia,serif; font-style:italic; font-weight:400; }
.mono{ font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; }
.tnum{ font-variant-numeric:tabular-nums; }
.wm{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.05em; }
.display{ font-family:'Poly',Georgia,serif; font-weight:400; letter-spacing:-.01em; line-height:1.02; font-size:clamp(2.8rem,6.2vw,5.2rem); text-wrap:balance; }
.h1{ font-family:'Poly',Georgia,serif; font-weight:400; letter-spacing:-.005em; line-height:1.06; font-size:clamp(2.2rem,4.4vw,3.6rem); text-wrap:balance; }
.h2{ font-family:'Poly',Georgia,serif; font-weight:400; line-height:1.1; font-size:clamp(1.8rem,3.4vw,2.8rem); text-wrap:balance; }
.h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:-.01em; line-height:1.2; font-size:clamp(1.15rem,1.9vw,1.45rem); }
.lead{ font-size:clamp(1.06rem,1.4vw,1.28rem); line-height:1.55; color:var(--fg-2); }
.muted{ color:var(--muted); }
.eyebrow{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; color:var(--muted); }
.accent{ color:var(--accent); } .teal{ color:var(--teal-ink); }
.balance{ text-wrap:balance; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,44px); }
.section{ padding-block:clamp(72px,10vw,132px); }
.section-sm{ padding-block:clamp(48px,7vw,84px); }
/* Four steps, not one. A page that breathes at a single interval reads as
   spaced; a page that compresses and opens reads as paced. -tight follows a
   hard rule (a marquee, a table) where the default gap would be dead air;
   -air is spent once per page, on the thing the page is actually asking for. */
.section-tight{ padding-block:clamp(36px,5vw,64px); }
.section-air{ padding-block:clamp(104px,14vw,208px); }
/* two stacked sections on the same surface should not pay for the seam twice */
.section + .section{ padding-top:clamp(44px,6vw,88px); }
.stack{ display:flex; flex-direction:column; } .row{ display:flex; align-items:center; } .wrap{ flex-wrap:wrap; }
.grid{ display:grid; gap:20px; } .between{ justify-content:space-between; }
/* grid and flex children default to min-width:auto and refuse to shrink below
   their content, which blows the track out past the container */
.grid>*, .split>*{ min-width:0; }
.gap-sm{ gap:10px; } .gap{ gap:16px; } .gap-lg{ gap:28px; } .center-x{ text-align:center; }
.hairline-top{ border-top:1px solid var(--border); }
@media(min-width:768px){ .cols-2{ grid-template-columns:repeat(2,1fr); } .cols-3{ grid-template-columns:repeat(3,1fr); } .cols-4{ grid-template-columns:repeat(4,1fr); } }
.split{ display:grid; gap:clamp(28px,4vw,60px); align-items:center; }
@media(min-width:900px){ .split{ grid-template-columns:1.05fr .95fr; } .split.rev>*:first-child{ order:2; } }

/* ---------- textures ---------- */
.dots{ background-image:radial-gradient(var(--dot) 1px, transparent 1px); background-size:22px 22px; }
.glow-top{ position:relative; }
.glow-top::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(58% 46% at 60% -6%, color-mix(in srgb,var(--accent-solid) 20%,transparent), transparent 70%); }
.glow-top>*{ position:relative; z-index:1; }

/* Interior heroes carry the product's own texture instead of the launch-page
   gradient: ruled ledger lines that fade as they fall, closed by a single
   accent hairline where the day gets sealed. The blue glow now happens exactly
   twice on the whole site, both of them on the home page, so it still means
   something when you see it. Legal pages get no texture at all. */
.ledger-hero{ position:relative; isolation:isolate; }
.ledger-hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background-image:repeating-linear-gradient(to bottom,
    color-mix(in srgb,var(--fg) 7%,transparent) 0 1px, transparent 1px 38px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 84%);
          mask-image:linear-gradient(to bottom,#000 0%,transparent 84%); }
.ledger-hero::after{ content:""; position:absolute; left:0; bottom:-1px; z-index:1;
  height:1px; width:clamp(88px,13vw,190px); background:var(--accent-solid); }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:.5rem; height:44px; padding:0 20px; font-size:14.5px; font-weight:500;
  border:1px solid transparent; background:transparent; color:var(--fg); transition:.16s ease; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-lg{ height:50px; padding:0 26px; font-size:15.5px; }
/* Buttons that carry an email address run right to the edge of a 375px screen in
   English and past it in Turkish. Let the label wrap on phones; the 44px target
   is kept by min-height rather than a fixed one. */
@media(max-width:479px){
  .btn{ white-space:normal; height:auto; min-height:44px; padding:11px 18px;
        text-align:center; overflow-wrap:anywhere; max-width:100%; }
  .btn-lg{ height:auto; min-height:50px; padding:14px 22px; }
}
.btn-primary{ background:var(--accent-solid); color:#fff; border-color:var(--accent-solid); }
.btn-primary:hover{ background:#2f4bff; border-color:#2f4bff; }
.btn-invert{ background:var(--invert-bg); color:var(--invert-fg); }
.btn-invert:hover{ opacity:.9; }
.btn-outline,.btn-line{ border-color:var(--border); color:var(--fg); background:transparent; }
.btn-outline:hover,.btn-line:hover{ border-color:var(--fg); }
.btn-ghost:hover{ color:var(--accent); }
.arrow{ transition:transform .2s ease; } .btn:hover .arrow{ transform:translateX(3px); }

/* ---------- bits ---------- */
.badge{ display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px; font-size:12.5px; color:var(--fg-2);
  border:1px solid var(--border); background:color-mix(in srgb,var(--fg) 3%,transparent); }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:5px 11px; font-size:12px; border:1px solid var(--border); color:var(--fg-2); }
.dot{ width:8px; height:8px; background:var(--teal); display:inline-block; }
.kbd{ font-family:ui-monospace,monospace; font-size:11px; border:1px solid var(--border); padding:2px 6px; color:var(--muted); }
.live::before{ content:""; width:7px; height:7px; background:var(--teal); border-radius:50%; animation:pulse 2s infinite; margin-right:2px; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(0,216,196,.5)} 70%{box-shadow:0 0 0 7px rgba(0,216,196,0)} 100%{box-shadow:0 0 0 0 rgba(0,216,196,0)} }
.divider{ height:1px; background:var(--border); border:0; }
.mk{ color:var(--teal-ink); flex:none; margin-top:2px; }

/* ---------- cards ---------- */
.card{ background:var(--panel); border:1px solid var(--border); padding:24px; transition:border-color .2s ease,transform .2s ease; }
.card:hover{ border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); }
.card-link:hover{ transform:translateY(-2px); }
.hgrid{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); }
.hgrid>*{ background:var(--bg); padding:24px; min-width:0; }
@media(min-width:640px){ .hgrid.c3{ grid-template-columns:repeat(3,1fr); } .hgrid.c2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .hgrid.c6{ grid-template-columns:repeat(6,1fr); } .hgrid.c4{ grid-template-columns:repeat(4,1fr); } }

/* ---------- team portraits ----------
   The six source photos are wildly different (passport scan, webcam grab, studio),
   so they ship pre-normalised to one duotone. The frame keeps them on one grid. */
/* Six people, so only 2, 3 or 6 across ever leaves a full last row.
   The whole team on one line is the point, so 6 wins once there's room. */
.person-grid{ display:grid; gap:clamp(12px,1.6vw,22px);
  grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:620px){ .person-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(min-width:1240px){ .person-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
.person{ display:flex; flex-direction:column; background:var(--panel);
  border:1px solid var(--border); overflow:hidden; transition:border-color .2s ease; }
.person:hover{ border-color:color-mix(in srgb,var(--accent) 50%,var(--border)); }
.person figure{ margin:0; aspect-ratio:4/5; overflow:hidden; background:var(--bg-2); }
.person img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.2,.7,.3,1); }
.person:hover img{ transform:scale(1.035); }
.person-body{ display:flex; flex-direction:column; flex:1;
  padding:15px 17px 14px; border-top:1px solid var(--border); }
.person-name{ font-weight:600; font-size:17px; letter-spacing:-.01em; }
.person-role{ margin-top:2px; font-size:13px; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); }
.person-note{ margin-top:9px; font-size:15px; color:var(--muted); }
.person-mail{ margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:flex-end; min-height:44px; font-size:13.5px;
  color:var(--fg-2); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--border); overflow-wrap:anywhere; }
.person-mail:hover{ color:var(--accent); text-decoration-color:currentColor; }
/* Two-up cards run ~143px wide, where 13.5px snaps the address mid-domain.
   Tighter padding and 12px keep it on one line from 360px up. */
@media(max-width:619px){
  .person-body{ padding:13px 13px 12px; }
  .person-mail{ font-size:12px; }
}
@media(prefers-reduced-motion:reduce){ .person:hover img{ transform:none; } }

/* ---------- Ask Fizzy, still ----------
   Stands in for a screenshot by showing the real exchange instead of faking a
   UI chrome: a question in the operator's language, an answer that cites its
   own source. Same content the live demo lower down types out. */
.ask-still{ display:flex; flex-direction:column; justify-content:center; gap:18px;
  padding:clamp(20px,3vw,34px); background:var(--bg-2);
  border-bottom:1px solid var(--border); }
.ask-q{ align-self:flex-start; max-width:88%; padding:10px 14px;
  background:var(--accent-solid); color:#fff; font-size:clamp(14px,1.15vw,16px); }
.ask-a{ align-self:flex-end; max-width:88%; padding:12px 16px; text-align:right;
  background:var(--panel); border:1px solid var(--border); }
.ask-fig{ font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1; letter-spacing:-.02em; }
.ask-src{ margin-top:7px; font-size:clamp(11.5px,.95vw,13px); color:var(--muted); }

/* ---------- Kitchen pass, still ----------
   The kitchen display runs dark in the product, because the room is bright and
   the board is read from two metres away with your hands full. It stays dark
   here in both themes for the same reason a screenshot would: this is a
   picture of a screen, not a panel of the site. The colour of the left edge is
   the whole interface, so it is drawn from the product's own state colours
   rather than the brand palette. */
.pass-still{ display:flex; flex-direction:column; justify-content:center; gap:11px;
  padding:clamp(16px,2.4vw,28px); background:#0b0b0d; color:#f6f6f8;
  border-bottom:1px solid var(--border); font-size:clamp(13px,1.05vw,15px); }
.pass-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8a8a94; }
.pass-live{ color:#00D8C4; letter-spacing:.1em; }
.kot{ background:#141418; border:1px solid #26262b; border-left:3px solid var(--kot); }
.kot.fresh{ --kot:#00D8C4; } .kot.working{ --kot:#F5A300; } .kot.late{ --kot:#E1341A; }
.kot-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:8px 12px; border-bottom:1px solid #26262b; }
.kot-head b{ font-weight:600; letter-spacing:-.01em; }
.kot-age{ color:var(--kot); font-size:12.5px; }
.kot-line{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:7px 12px; border-top:1px solid #1b1b1f; }
.kot-line:first-of-type{ border-top:0; }
/* drawn, not clickable: a span, so nothing here claims to be a control */
.kot-done{ flex:none; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:#8a8a94; border:1px solid #26262b; padding:3px 9px; }

/* ---------- Guest order, still ----------
   The order a table sent, sitting where it waits: an inbox on the register.
   Accept and reject are drawn rather than wired, because the point of the
   picture is that a person makes that call. */
.qr-still{ display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:clamp(18px,2.6vw,30px); background:var(--bg-2);
  border-bottom:1px solid var(--border); }
.qr-head{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.qr-card{ background:var(--panel); border:1px solid var(--border); }
.qr-card-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--border); font-size:13.5px; }
.qr-lines{ display:flex; flex-direction:column; gap:5px; padding:11px 14px; font-size:15px; }
.qr-note{ color:var(--muted); font-size:13.5px; }
.qr-act{ display:flex; flex-wrap:wrap; gap:8px; padding:0 14px 13px; }
.qr-act span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:6px 13px; border:1px solid var(--border); color:var(--fg-2); }
.qr-act .yes{ background:var(--invert-bg); color:var(--invert-fg); border-color:var(--invert-bg); }

/* ---------- the day, twice ----------
   Two columns of the same day, read across rather than down. The left one is
   recessed because it is the day the reader already has; the right one sits on
   the page surface because it is the offer. Times rather than 01/02/03: the
   numbering would be decoration, the clock is the actual claim. */
.rail{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); }
@media(min-width:860px){ .rail{ grid-template-columns:1fr 1fr; } }
.rail-col{ background:var(--bg); padding:clamp(20px,2.5vw,32px); min-width:0; }
.rail-col.before{ background:var(--bg-2); }
.rail-h{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.rail-col.after .rail-h{ color:var(--teal-ink); }
.rail-list{ list-style:none; margin:18px 0 0; padding:0; }
.rail-list li{ display:grid; grid-template-columns:58px 1fr; gap:14px; align-items:baseline;
  padding:11px 0; border-top:1px solid var(--border-2); font-size:16.5px; }
.rail-list li:first-child{ border-top:0; padding-top:0; }
.rail-t{ color:var(--muted); font-size:14px; }
.rail-col.after .rail-t{ color:var(--teal-ink); }

/* ---------- one product, several codes ----------
   The retail mechanism that is impossible to explain in a sentence and obvious
   in a picture: a tin has the maker's EAN, the shop's own shelf label, and the
   six-pack is a different article entirely. */
.codes-still{ display:flex; flex-direction:column; justify-content:center; gap:14px;
  padding:clamp(18px,2.6vw,30px); background:var(--bg-2);
  border-bottom:1px solid var(--border); }
.codes-card{ background:var(--panel); border:1px solid var(--border); }
.codes-name{ padding:12px 15px; border-bottom:1px solid var(--border); font-size:16.5px; font-weight:500; }
.code-row{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:9px 15px; border-top:1px solid var(--border-2); font-size:14.5px; }
.code-row:first-of-type{ border-top:0; }
.code-row .what{ color:var(--muted); font-size:13px; }
.codes-trace{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 15px; background:var(--panel); border:1px solid var(--border);
  border-left:3px solid var(--teal); font-size:15px; }

/* ---------- the appointment book ----------
   A schedule, not a ledger, and the still has to say so: the status is the
   only column that matters and none of these rows is money yet. */
.book-still{ display:flex; flex-direction:column; justify-content:center; gap:12px;
  padding:clamp(18px,2.6vw,30px); background:var(--bg-2);
  border-bottom:1px solid var(--border); }
.book-day{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.book-row{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center;
  padding:11px 14px; background:var(--panel); border:1px solid var(--border); font-size:15.5px; }
.book-t{ color:var(--muted); font-size:14px; }
.book-st{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  padding:3px 9px; border:1px solid var(--border); color:var(--muted); white-space:nowrap; }
.book-st.done{ border-color:var(--teal); color:var(--teal-ink); }
.book-st.here{ border-color:var(--warn); color:var(--warn); }

/* ---------- FAQ accordion ----------
   Lived inline in help.html until the sector pages needed it too. Native
   <details>, so it opens without JavaScript and a browser find-in-page can
   still reach the answers. */
.faq{ border:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq details:last-child{ border-bottom:0; }
.faq summary{ list-style:none; cursor:pointer; padding:16px 18px; font-size:19px; font-weight:500;
  display:flex; gap:14px; align-items:flex-start; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; color:var(--muted); font-weight:400; flex:none; }
.faq details[open] summary::after{ content:"–"; }
.faq summary:hover{ background:var(--bg-2); }
.faq .ans{ padding:0 18px 18px; color:var(--fg-2); font-size:18px; max-width:70ch; }
.faq .ans p+p{ margin-top:10px; }

/* image frame (placeholder for real screenshots) */
.frame{ border:1px solid var(--border); position:relative; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent-solid) 12%,transparent), color-mix(in srgb,var(--teal) 8%,transparent)); }
.frame::after{ content:attr(data-label); position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11.5px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase; text-align:center; padding:12px; }
.frame img{ width:100%; height:100%; object-fit:cover; }

/* logo cloud */
.logo-row{ display:flex; flex-wrap:wrap; gap:24px 40px; align-items:center; justify-content:center; }
.logo-row span{ font-size:17px; color:var(--muted); letter-spacing:-.01em; opacity:.85; }
.logo-row span.teal{ color:var(--teal-ink); } /* was losing to .logo-row span on specificity */

/* ---------- surfaces ---------- */
.surface-2{ background:var(--bg-2); }
.surface-panel{ background:var(--panel); }

/* ---------- NAV ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:60; background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--border); }
.nav-inner{ height:var(--nav-h); display:flex; align-items:center; gap:22px; }
.brand{ display:flex; align-items:center; gap:9px; }
.brand-wm{ font-weight:700; letter-spacing:-.05em; font-size:21px; }
.nav-links{ display:none; align-items:center; gap:2px; margin-left:6px; }
.nav-item{ position:relative; }
.nav-link{ display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px; font-size:14.5px; color:var(--fg-2); }
.nav-link:hover{ color:var(--fg); }
.nav-link .chev{ opacity:.6; }
.nav-item:hover .chev{ transform:rotate(180deg); }
.mega{ position:absolute; top:calc(100% + 8px); left:0; min-width:520px; padding:12px; background:var(--panel); border:1px solid var(--border);
  box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(6px); transition:.18s ease; }
.mega.right{ left:auto; right:0; }
.nav-item:hover .mega,.mega:hover{ opacity:1; visibility:visible; transform:translateY(0); }
.mega-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.mega-link{ display:block; padding:11px 12px; border:1px solid transparent; }
.mega-link:hover{ background:var(--bg-2); border-color:var(--border); }
.mega-link b{ display:block; font-size:14px; font-weight:600; }
.mega-link span{ font-size:12.5px; color:var(--muted); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }

/* ---------- nav utilities: search, theme segment, language ---------- */
.nav-search{ display:none; align-items:center; gap:9px; height:38px; padding:0 10px 0 12px;
  border:1px solid var(--border); background:color-mix(in srgb,var(--fg) 3%,transparent);
  color:var(--muted); font-size:14px; transition:border-color .2s ease,color .2s ease; }
.nav-search:hover{ border-color:var(--fg-2); color:var(--fg-2); }
.nav-search-label{ display:none; padding-right:26px; }
.nav-kbd{ font-family:ui-monospace,monospace; font-size:11.5px; line-height:1; padding:4px 6px;
  border:1px solid var(--border); color:var(--muted); background:var(--bg); }
/* icon only until there is room for the label and the shortcut hint */
.nav-search{ display:inline-flex; width:38px; padding:0; justify-content:center; }
.nav-search [data-kbd]{ display:none; }
@media(min-width:1500px){
  .nav-search{ width:auto; padding:0 10px 0 12px; justify-content:flex-start; }
  .nav-search-label{ display:inline; }
  .nav-search [data-kbd]{ display:inline; }
}

.seg{ display:flex; align-items:center; gap:2px; padding:3px; border:1px solid var(--border); }
.seg-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px;
  border:0; background:transparent; color:var(--muted); transition:.18s ease; }
.seg-btn:hover{ color:var(--fg); }
.seg-btn[aria-pressed="true"]{ background:color-mix(in srgb,var(--fg) 9%,transparent); color:var(--fg); }
/* the theme switch is icon-sized; a labelled switch needs to fit words */
.seg-text .seg-btn{ width:auto; min-height:38px; padding:0 18px; font-size:14.5px; font-weight:500; }
@media(max-width:479px){ .seg-text .seg-btn{ min-height:44px; padding:0 20px; } }

/* ---------- pricing: both periods live in the DOM ----------
   Rendering the yearly price with JS would leave it untranslated, because the
   dictionary is keyed on the strings present at load. Both are marked up, the
   toggle only flips which one is shown. */
.price{ font-size:3rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; }
.price .per{ font-size:17px; font-weight:400; }
.p-y{ display:none; }
.billing-y .p-m{ display:none; }
.billing-y .p-y{ display:inline; }

.lang{ position:relative; }
.lang-btn{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 10px;
  border:1px solid var(--border); background:transparent; color:var(--fg-2); font-size:14px;
  transition:border-color .2s ease,color .2s ease; }
.lang-btn:hover{ border-color:var(--fg-2); color:var(--fg); }
.lang-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.lang-btn .chev{ opacity:.65; transition:transform .2s ease; }
.lang-pop{ position:absolute; top:calc(100% + 8px); right:0; min-width:210px; padding:6px;
  background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); z-index:70; }
.lang-pop[hidden]{ display:none; }
.lang-row{ display:flex; align-items:center; gap:12px; width:100%; padding:10px 11px;
  border:0; background:transparent; color:var(--fg-2); font-size:15px; text-align:left; }
.lang-row:hover{ background:var(--bg-2); color:var(--fg); }
.lang-code{ font-size:11.5px; letter-spacing:.1em; color:var(--muted); min-width:22px; }
.lang-name{ flex:1; }
.lang-tick{ opacity:0; color:var(--teal-ink); flex:none; }
.lang-row[aria-checked="true"]{ color:var(--fg); }
.lang-row[aria-checked="true"] .lang-tick{ opacity:1; }

/* Phones carry brand, search and menu only; theme, language and the two account
   actions live in the drawer, where there is room to label them. */
.nav-signin{ display:none; }
@media(max-width:899px){
  .nav .seg, .nav-right>.lang, .nav-cta{ display:none; }
}
@media(min-width:1500px){ .nav-signin{ display:inline-flex; } }
.drawer-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding-top:16px; margin-top:6px; border-top:1px solid var(--border); }
.drawer-langs{ display:flex; flex-wrap:wrap; gap:6px; }
.drawer-lang{ border:1px solid var(--border); background:transparent; color:var(--fg-2); font-size:14px;
  min-height:44px; padding:0 14px; letter-spacing:.06em; }
.drawer-lang[aria-checked="true"]{ border-color:var(--fg); color:var(--fg); }

/* ---------- search palette ---------- */
.palette{ position:fixed; inset:0; z-index:120; display:flex; align-items:flex-start; justify-content:center;
  padding:clamp(60px,12vh,140px) 18px 18px; }
.palette[hidden]{ display:none; }
.palette-scrim{ position:absolute; inset:0; background:color-mix(in srgb,var(--invert-fg) 55%,transparent);
  backdrop-filter:blur(3px); }
.palette-box{ position:relative; width:min(640px,100%); max-height:min(70vh,560px); display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow); }
.palette-head{ display:flex; align-items:center; gap:12px; padding:14px 14px; border-bottom:1px solid var(--border); color:var(--muted); }
.palette-input{ flex:1; min-width:0; border:0; background:transparent; color:var(--fg);
  font:inherit; font-size:17px; outline:none; }
.palette-input::placeholder{ color:var(--muted); }
.palette-esc{ border:1px solid var(--border); background:transparent; color:var(--muted);
  font-size:11.5px; padding:4px 8px; font-family:ui-monospace,monospace; }
.palette-results{ overflow-y:auto; padding:6px; }
.palette-item{ display:block; width:100%; text-align:left; padding:11px 12px; border:1px solid transparent;
  background:transparent; color:var(--fg-2); }
.palette-item b{ display:block; font-size:15.5px; font-weight:600; color:var(--fg); }
.palette-item span{ display:block; font-size:13.5px; color:var(--muted); margin-top:2px; }
.palette-item[aria-selected="true"]{ background:var(--bg-2); border-color:var(--border); }
.palette-empty{ padding:26px 14px; color:var(--muted); font-size:14.5px; text-align:center; }
.palette-foot{ display:flex; gap:16px; align-items:center; padding:10px 14px; border-top:1px solid var(--border);
  color:var(--muted); font-size:12.5px; }
.palette-foot .nav-kbd{ margin-right:3px; }
.palette-foot>*:last-child{ margin-left:auto; }
.icon-btn{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); background:transparent; color:var(--fg-2); }
.icon-btn:hover{ color:var(--fg); border-color:var(--fg); }
.theme-btn .moon{ display:none; }
:root[data-theme="light"] .theme-btn .sun{ display:none; } :root[data-theme="light"] .theme-btn .moon{ display:block; }
.menu-btn{ display:inline-flex; }
@media(min-width:1260px){ .nav-links{ display:flex; } .menu-btn{ display:none; } }
/* Danish sets the longest labels in the five languages and pushed the bar 11px
   past its own width in the 1260-1400 band. Tighten the link padding there
   rather than move the breakpoint, which would drop the menu on English too. */
@media(min-width:1260px) and (max-width:1400px){
  .nav-inner{ gap:14px; }
  .nav-links{ gap:0; }
  .nav-links > *{ letter-spacing:-.005em; }
}
.drawer{ display:none; border-bottom:1px solid var(--border); background:var(--bg); }
.drawer.open{ display:block; }
.drawer a{ display:block; padding:13px 0; border-bottom:1px solid var(--border-2); color:var(--fg-2); font-size:16px; }
.drawer .grp{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-top:16px; }

/* ---------- FOOTER ---------- */
.footer{ border-top:1px solid var(--border); background:var(--bg-2); padding-block:60px 36px; }
.footer-grid{ display:grid; gap:36px 24px; grid-template-columns:1fr; }
@media(min-width:640px){ .footer-grid{ grid-template-columns:repeat(2,1fr); } }
/* five link columns since Solutions was added; the brand column keeps its
   extra width and the rest share what is left */
@media(min-width:960px){ .footer-grid{ grid-template-columns:1.5fr repeat(5,1fr); } }
.footer h4{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:14px; }
.footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer a{ color:var(--fg-2); font-size:14px; } .footer a:hover{ color:var(--fg); }
.footer-bottom{ margin-top:44px; padding-top:24px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:var(--muted); font-size:12.5px; }

/* skip link: keyboard users should not tab the whole nav to reach content */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:80; background:var(--invert-bg); color:var(--invert-fg);
  padding:12px 18px; font-size:15px; font-weight:500; border:1px solid var(--border); }
.skip-link:focus{ left:12px; top:12px; }

/* ---------- page hero ---------- */
.page-hero{ padding-block:clamp(64px,9vw,124px) clamp(40px,6vw,72px); border-bottom:1px solid var(--border); }
.crumb{ font-size:12.5px; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:22px; }
.crumb a:hover{ color:var(--fg); }

/* doc / legal */
.doc{ max-width:760px; }
.doc h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.3rem; margin-top:40px; margin-bottom:10px; }
.doc p{ color:var(--fg-2); margin-bottom:14px; } .doc ul{ color:var(--fg-2); padding-left:20px; margin-bottom:14px; }

/* ---------- hardware ----------
   Schematic device drawings rather than stock photography: they stay sharp at any
   size, follow the theme, and carry no licensing question. Swap in real product
   shots later by replacing the <svg> inside .device. */
.device{ display:grid; place-items:center; aspect-ratio:4/3; padding:22px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--accent-solid) 10%,transparent), transparent 62%),
    var(--panel-2);
  border-bottom:1px solid var(--border); }
.device svg{ width:100%; height:auto; max-height:100%; color:var(--fg-2); }
.device .lit{ color:var(--accent); }
.device-sm{ aspect-ratio:3/2; padding:16px; }

/* Photographed devices sit on a fixed-height shelf rather than an aspect box, so a
   portrait packshot and a squat printer read at the same scale across a row. */
/* Flex, not the grid the other frames use: a cash drawer is nearly 3:1 and has to be
   capped by the frame WIDTH, and a percentage does not resolve against a centred grid
   item. min-height keeps a wide product's card level with its neighbours, and svg is
   sized the same way so a card still awaiting a photo lines up with the ones that
   have it. */
.device-photo{ aspect-ratio:auto; padding:20px 18px;
  display:flex; align-items:center; justify-content:center;
  min-height:calc(clamp(156px,13.5vw,232px) + 40px); }
.device-photo picture{ display:contents; }
.device-photo img,
.device-photo svg{ width:auto; height:auto; max-width:100%;
  max-height:clamp(156px,13.5vw,232px); object-fit:contain; }
.device-photo img{ filter:drop-shadow(0 16px 26px rgb(0 0 0 / .45)); }
:root[data-theme="light"] .device-photo img{ filter:drop-shadow(0 14px 22px rgb(16 22 48 / .18)); }
/* two-across cards are twice as wide, so the product needs to grow with them or it
   floats in an empty frame */
.device-lg{ min-height:calc(clamp(200px,20vw,330px) + 46px); padding:23px 20px; }
.device-lg img,
.device-lg svg{ max-height:clamp(200px,20vw,330px); }

/* Never more than three across, whatever the viewport: a fourth column makes the
   cards too narrow for the spec lists to stay on one line. */
.dev-grid{ display:grid; gap:clamp(18px,1.9vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); }
@media(min-width:1080px){ .dev-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.spec-row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid var(--border-2); font-size:16.5px; }
.spec-row:last-child{ border-bottom:0; }
.spec-row .muted{ flex:none; }

.visually-hidden{ 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; }
.table-wrap{ overflow-x:auto; border:1px solid var(--border); }
table.spec{ width:100%; border-collapse:collapse; font-size:16.5px; min-width:640px; }
table.spec th, table.spec td{ text-align:left; padding:15px 18px; border-bottom:1px solid var(--border-2); vertical-align:top; }
table.spec thead th{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:500;
  background:var(--panel-2); border-bottom:1px solid var(--border); }
table.spec tbody th{ font-weight:500; color:var(--fg-2); white-space:nowrap; }
table.spec tr:last-child td, table.spec tr:last-child th{ border-bottom:0; }
table.spec td.num{ font-variant-numeric:tabular-nums; }

/* ---------- legal document shell ----------
   A reading rail on the left (contents, last updated, sibling documents) and the
   text on the right, capped near 70 characters. */
.legal{ display:grid; gap:clamp(28px,4vw,56px); align-items:start; }
/* the text column is sized by the reading measure, not by the page width */
@media(min-width:1000px){ .legal{ grid-template-columns:232px minmax(0,72ch); } }

.doc-rail{ position:static; }
@media(min-width:1000px){ .doc-rail{ position:sticky; top:calc(var(--nav-h) + 28px); max-height:calc(100vh - var(--nav-h) - 56px); overflow-y:auto; } }
.doc-toc{ list-style:none; margin:14px 0 0; padding:0; border-left:1px solid var(--border); }
.doc-toc a{ display:block; padding:7px 0 7px 14px; margin-left:-1px; font-size:14.5px; color:var(--muted);
  border-left:1px solid transparent; transition:color .18s ease,border-color .18s ease; }
.doc-toc a:hover{ color:var(--fg-2); }
.doc-toc a[aria-current="true"]{ color:var(--fg); border-left-color:var(--teal-ink); }
.rail-meta{ margin-top:26px; padding-top:22px; border-top:1px solid var(--border); }
.rail-meta .tnum{ display:block; font-size:16.5px; margin-top:6px; }
.doc-pills{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.doc-pills a{ font-size:13px; padding:6px 11px; border:1px solid var(--border); color:var(--muted); }
.doc-pills a:hover{ border-color:var(--fg-2); color:var(--fg); }
.doc-pills a[aria-current="page"]{ border-color:var(--teal-ink); color:var(--fg); }

.doc-body{ max-width:70ch; }
.doc-body h2{ font-family:'Poly',Georgia,serif; font-weight:400; font-size:clamp(1.6rem,2.4vw,2.05rem);
  line-height:1.15; margin:52px 0 14px; scroll-margin-top:calc(var(--nav-h) + 24px); }
.doc-body h2:first-of-type{ margin-top:0; }
.doc-body h3{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:1.12rem; margin:28px 0 8px; }
.doc-body p{ color:var(--fg-2); margin-bottom:16px; }
.doc-body ul{ color:var(--fg-2); padding-left:20px; margin-bottom:16px; }
.doc-body li{ margin-bottom:9px; }
.doc-body a:not(.btn){ color:var(--accent); }

/* labelled plain-language box: the summary a reader actually needs */
.callout{ border:1px solid var(--border); background:var(--panel-2); padding:22px 24px; margin:0 0 28px; }
.callout .callout-label{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal-ink); font-weight:500; }
.callout p{ margin:12px 0 0; color:var(--fg-2); }
.callout p:last-child{ margin-bottom:0; }

/* status */
/* Label left, value right. Finnish compounds ("käytettävyyssitoumus") are longer
   than half a phone screen, so the pair stacks rather than pushing the page wide. */
.status-row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:16px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.status-row>*{ min-width:0; overflow-wrap:anywhere; }
.status-ok{ color:var(--ok); } .status-badge{ display:inline-flex; align-items:center; gap:8px; font-size:13.5px; }
/* the other four states a monitor can report. -unknown is deliberately grey and
   not green: a page that cannot reach its monitor must not claim health. */
.status-down{ color:var(--err); } .status-warn{ color:var(--warn); }
.status-maint{ color:var(--accent); } .status-unknown{ color:var(--muted); }
.status-uptime{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.status-row .status-meta{ display:flex; align-items:center; gap:12px; }

/* marquee */
.marquee-wrap{ overflow:hidden; border-block:1px solid var(--border); background:var(--bg-2); }
.marquee{ display:flex; width:max-content; animation:scrollx 44s linear infinite; }
.marquee-wrap:hover .marquee{ animation-play-state:paused; }
.marquee .item{ padding:14px 28px; font-size:13px; color:var(--muted); white-space:nowrap; }
.marquee .sep{ color:var(--teal-ink); align-self:center; }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* seal / ledger */
.seal{ box-shadow:inset 0 0 0 1.5px var(--teal); }

/* AI chat */
.chat{ border:1px solid var(--border); background:var(--panel); max-width:440px; margin-inline:auto; width:100%; }
.chat-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); }
.chat-body{ padding:16px; min-height:300px; display:flex; flex-direction:column; }
.bubble-q{ margin-left:auto; max-width:85%; background:var(--accent-solid); color:#fff; padding:10px 13px; font-size:14px; min-height:42px; }
.bubble-a{ background:var(--panel-2); border:1px solid var(--border); padding:14px; }
.fade-soft{ transition:opacity .45s ease; }
.caret::after{ content:'|'; margin-left:1px; color:var(--teal); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0} }
.tdot{ width:6px; height:6px; background:var(--muted); display:inline-block; opacity:.4; animation:bounce 1.2s infinite; }
.tdot:nth-child(2){ animation-delay:.15s } .tdot:nth-child(3){ animation-delay:.3s }
@keyframes bounce{ 0%,60%,100%{transform:translateY(0);opacity:.35} 30%{transform:translateY(-4px);opacity:.9} }

/* reveal */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1); }
.js .reveal.in{ opacity:1; transform:none; }

/* utilities */
/* mt-5 was used on product.html and worldline.html but never defined, so seven
   lists sat flush against the paragraph above them. Sized between mt-4 and
   mt-6, which is what the markup was asking for. */
.mt-2{margin-top:8px}.mt-3{margin-top:14px}.mt-4{margin-top:20px}.mt-5{margin-top:26px}.mt-6{margin-top:32px}.mt-8{margin-top:44px}.mt-10{margin-top:60px}
.maxw-xl{max-width:640px}.maxw-lg{max-width:560px}.maxw-2xl{max-width:820px}
.list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.list li{ display:flex; gap:12px; align-items:flex-start; }

/* ============================================================
   WIDE + LARGER TYPE — opt-in per page via <body class="wide">
   Trial on index.html first; roll out by adding the class.
   ============================================================ */
html:has(body.wide){ --nav-h:72px; }
.wide{ --maxw:1840px; --nav-h:72px; font-size:19px; }
.wide .container{ max-width:min(94vw,var(--maxw)); padding-inline:clamp(20px,3.4vw,64px); }

.wide .display{ font-size:clamp(3.2rem,5.6vw,6.2rem); }
.wide .h1{ font-size:clamp(2.6rem,4.2vw,4.3rem); }
.wide .h2{ font-size:clamp(2.15rem,3.2vw,3.35rem); }
.wide .h3{ font-size:clamp(1.35rem,1.8vw,1.75rem); }
.wide .lead{ font-size:clamp(1.25rem,1.35vw,1.55rem); }
.wide .eyebrow{ font-size:14px; }
.wide .doc h2{ font-size:1.5rem; }
.wide .doc{ max-width:860px; }

.wide .btn{ height:52px; padding:0 26px; font-size:17px; }
.wide .btn-lg{ height:58px; padding:0 32px; font-size:18.5px; }
.wide .badge{ height:38px; padding:0 17px; font-size:15px; }
.wide .pill{ padding:7px 13px; font-size:14.5px; }
.wide .kbd{ font-size:13px; }

.wide .card{ padding:30px; }
.wide .hgrid>*{ padding:30px; }
.wide .list{ gap:14px; }
.wide .logo-row span{ font-size:21px; }
.wide .marquee .item{ font-size:15.5px; padding:16px 34px; }
.wide .status-badge{ font-size:16px; }
.wide .crumb{ font-size:15px; }
.wide .frame::after{ font-size:13px; }

.wide .brand-wm{ font-size:25px; }
.wide .nav-link{ height:40px; font-size:17px; }
.wide .mega{ min-width:600px; }
.wide .mega-link b{ font-size:16.5px; }
.wide .mega-link span{ font-size:14.5px; }
.wide .icon-btn{ width:44px; height:44px; } /* stays a 44px touch target at every width */
.wide .drawer a{ font-size:18px; padding:15px 0; }
.wide .drawer .grp{ font-size:12.5px; }
.wide .footer h4{ font-size:12.5px; }
.wide .footer a{ font-size:16.5px; }
.wide .footer-bottom{ font-size:15px; }
/* phones: keep the taller nav bits from crowding the 375px bar */
@media(max-width:639px){
  .wide .nav-inner{ gap:10px; }
  .wide .nav-right{ gap:6px; }
  .wide .nav-right .btn{ height:44px; padding:0 14px; font-size:14.5px; }
  .wide .icon-btn{ width:44px; height:44px; }
  .wide .btn-lg{ height:54px; padding:0 22px; font-size:17px; }
}
.wide .maxw-xl{ max-width:780px; } .wide .maxw-lg{ max-width:700px; } .wide .maxw-2xl{ max-width:1000px; }
.wide .chat{ max-width:540px; }
.wide .bubble-q{ font-size:16.5px; min-height:48px; }

/* ============================================================
   EDITORIAL MOTION + MEDIA PHYSICS (wide pages)
   Every effect is progressive: unsupported browsers and
   reduced-motion users get the static page, not a broken one.
   ============================================================ */
.wide .section{ padding-block:clamp(88px,9vw,152px); }
.wide .section-tight{ padding-block:clamp(44px,4.6vw,76px); }
.wide .section-air{ padding-block:clamp(124px,13vw,236px); }
.wide .section + .section{ padding-top:clamp(52px,5.4vw,100px); }

/* media cards: the screenshot pushes in slightly, anchored left so
   the amount columns never drift out of frame */
.media-card{ transition:border-color .3s ease; }
.wide .frame img{ transform-origin:left top; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.media-card:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .media-card:hover .frame img,
  .wide .frame:hover img{ transform:scale(1.045); }
}

/* Word-by-word scrub. Deliberately NOT dimmed in CSS: opacity is applied by JS
   only once the effect is proven running, so any failure leaves readable text.
   (CSS animation-timeline:view() was tried first and never activated here.) */
.scrub-word{ display:inline-block; }
.scrub-on .scrub-word{ will-change:opacity; }

/* step cards stack under the fixed nav on phones, where they are one column */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .stack-cards>.card{ position:sticky; top:calc(var(--nav-h) + 14px); }
}

/* ============================================================
   CRAFT LAYER
   Texture, cursor light and staggered entrances. The flat ground
   and the uniform 1px box grid were what made the page read as
   machine-made; this is the antidote.
   ============================================================ */

/* --- grain: a flat #09090b field is the giveaway. 3% noise gives the
       ground a material quality without reading as a texture --- */
:root{ --grain:.05; }
:root[data-theme="light"]{ --grain:.035; }
body::after{
  content:""; position:fixed; inset:0; z-index:300; pointer-events:none; opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- cursor light. Painted as background-image so it sits above the
       surface colour but below the text, never tinting the copy --- */
.card, .hgrid>*, .surface-panel, .tape{
  background-image:radial-gradient(240px circle at var(--mx,-200px) var(--my,-200px),
    color-mix(in srgb,var(--accent) 15%,transparent), transparent 68%);
}
.hgrid>*{ transition:background-color .3s ease; }

/* --- ledger rule: a hairline texture drawn from the product's own
       vocabulary, replacing the generic dot field where it suits --- */
.rules{ background-image:repeating-linear-gradient(to bottom,
  color-mix(in srgb,var(--fg) 5%,transparent) 0 1px, transparent 1px 34px); }

/* --- receipt edge: the three feature cards tear off like a slip --- */
.tape{ position:relative; border:0 !important; background-color:var(--tape-bg); }
.tape::after{ content:""; position:absolute; left:0; right:0; bottom:-9px; height:9px; pointer-events:none;
  background:radial-gradient(circle 9px at 9px 0, var(--tape-bg) 8px, transparent 8.5px) 0 0/18px 9px repeat-x; }

/* --- promoted feature: no box at all, which is what makes it read as primary --- */
.feature-lead{ display:grid; gap:clamp(24px,3vw,52px); align-items:center; }
@media(min-width:900px){ .feature-lead{ grid-template-columns:1.15fr .85fr; } }

/* --- an oversized numeral behind a step: real sequence, not decoration --- */
.ghost-num{ position:absolute; right:14px; top:-6px; font-family:'Poly',Georgia,serif; line-height:1;
  font-size:clamp(4.5rem,7vw,7rem); color:var(--fg); opacity:.06; pointer-events:none; user-select:none; }

/* --- the lead quote is set as a statement, not parked in a card --- */
.quote-lead{ margin:0; display:grid; gap:clamp(20px,3vw,48px); }
.quote-lead blockquote{ margin:0; font-size:clamp(2rem,3.6vw,3.3rem); line-height:1.14; letter-spacing:-.01em; }
.quote-lead blockquote::before{ content:"\201C"; color:var(--teal-ink); margin-right:.06em; }
@media(min-width:900px){
  .quote-lead{ grid-template-columns:minmax(0,1.55fr) minmax(0,.45fr); align-items:end; }
  .quote-lead figcaption{ padding-bottom:.5rem; border-top:1px solid var(--border); padding-top:18px; }
}

/* --- ledger rows: information without another bordered box --- */
.ledger{ border-top:1px solid var(--border); }
.ledger>*{ display:grid; grid-template-columns:1fr; gap:6px; padding:22px 2px;
  border-bottom:1px solid var(--border-2); transition:padding-left .3s cubic-bezier(.16,1,.3,1); }
@media(min-width:760px){ .ledger>*{ grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:32px; align-items:baseline; } }
@media(hover:hover){ .ledger>*:hover{ padding-left:12px; } }

/* --- text links earn an underline instead of only changing colour --- */
.footer a, .doc a, a.accent[href], .mega-link b{
  background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat;
  background-size:0% 1px; background-position:0 100%; transition:background-size .32s cubic-bezier(.16,1,.3,1); }
.footer a:hover, .doc a:hover, a.accent[href]:hover, .mega-link:hover b{ background-size:100% 1px; }

/* --- staggered entrance: siblings arrive in sequence, not as one slab --- */
.js .reveal-seq>*{ opacity:0; transform:translateY(15px);
  transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); }
.js .reveal-seq.in>*{ opacity:1; transform:none; }
.js .reveal-seq.in>*:nth-child(1){ transition-delay:.00s }
.js .reveal-seq.in>*:nth-child(2){ transition-delay:.07s }
.js .reveal-seq.in>*:nth-child(3){ transition-delay:.14s }
.js .reveal-seq.in>*:nth-child(4){ transition-delay:.21s }
.js .reveal-seq.in>*:nth-child(5){ transition-delay:.28s }
.js .reveal-seq.in>*:nth-child(6){ transition-delay:.35s }
.js .reveal-seq.in>*:nth-child(7){ transition-delay:.42s }

/* --- the seal: the one moment that is the product's whole thesis --- */
.seal-mark path{ stroke-dasharray:48; stroke-dashoffset:48; }
.js .seal-armed .seal-mark path{ animation:sealDraw .7s cubic-bezier(.16,1,.3,1) forwards; }
.js .seal-armed .seal-mark path:last-child{ animation-delay:.42s; }
@keyframes sealDraw{ to{ stroke-dashoffset:0 } }
.js .seal-armed.seal{ animation:sealPulse 1.5s ease-out .5s 1; }
@keyframes sealPulse{
  0%{ box-shadow:inset 0 0 0 1.5px var(--teal), 0 0 0 0 color-mix(in srgb,var(--teal) 45%,transparent) }
  60%{ box-shadow:inset 0 0 0 1.5px var(--teal), 0 0 0 10px transparent }
  100%{ box-shadow:inset 0 0 0 1.5px var(--teal), 0 0 0 0 transparent }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .js .reveal-seq>*{ opacity:1; transform:none; transition:none; }
  .marquee{ animation:none; } .caret::after,.tdot,.live::before{ animation:none; }
  .seal-mark path{ stroke-dashoffset:0; }
  .js .seal-armed .seal-mark path,.js .seal-armed.seal{ animation:none; }
  .ledger>*{ transition:none; } .wide .frame img{ transition:none; }
}