/* ============================================================================
   WONS — public / marketing stylesheet
   Editorial layout system for the landing page and the auth pages.

   Everything is sized in ONE fluid unit (--u = one design pixel), so the whole
   page scales with the viewport instead of jumping between breakpoints. Design
   grid: 375 (handheld) and 1600 (desktop), both capped so ultra-wide screens
   stop growing.

   Type pair:  Archivo        — grotesk, used uppercase for all display sizes
               Instrument Serif italic — the lowercase counter-voice
               IBM Plex Mono  — labels, indices, meta
   Both display faces are self-hosted (scripts/fetch-fonts.sh); no CDN, so the
   'self'-only font-src CSP holds.
   ========================================================================= */

:root {
  --u: min(calc(100vw / 375), 1.42px);
  --gut: calc(16 * var(--u));
  --col: 100%;

  /* paper (default / light) */
  --pg: #efece4;
  --pg-2: #e6e2d8;
  --fg: #0c100e;
  --fg-soft: #4b524e;
  --rule: rgba(12, 16, 14, 0.18);
  --rule-soft: rgba(12, 16, 14, 0.1);

  /* ink band (the dark full-bleed sections + footer) */
  --band: #0f231c;
  --band-2: #0a1a15;
  --band-fg: #f1eee6;
  --band-mud: #8d9a93;
  --band-rule: rgba(241, 238, 230, 0.16);

  /* accents — constant across themes so the brand stays put */
  --em: #16b07c;
  --em-deep: #0d9b6c;
  --sun: #e9a13c;
  --flame: #dd5340;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ONE vertical rhythm for the whole page. Every top-level section uses
     --sec for its block padding and --hd for the header→content gap, so the
     spacing between sections is identical everywhere instead of hand-tuned
     per section. Do not hardcode section paddings anywhere else. */
  --sec: calc(66 * var(--u));
  --hd: calc(40 * var(--u));
}

@media only screen and (min-width: 860px) {
  :root {
    --u: min(calc(100vw / 1600), 1.2px);
    --gut: calc(64 * var(--u));
    --col: calc(1400 * var(--u));
    --sec: calc(110 * var(--u));
    --hd: calc(68 * var(--u));
  }
}

[data-theme="dark"] {
  --pg: #0a0e0c;
  --pg-2: #0f1512;
  --fg: #ece9e0;
  --fg-soft: #a2a9a4;
  --rule: rgba(236, 233, 224, 0.2);
  --rule-soft: rgba(236, 233, 224, 0.1);
  --band: #05100c;
  --band-2: #030a07;
  --band-fg: #ece9e0;
  --band-mud: #7c8983;
  --band-rule: rgba(236, 233, 224, 0.14);
}

/* ── primitives ─────────────────────────────────────────────────────────── */

.mkt {
  background: var(--pg);
  color: var(--fg);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: calc(15 * var(--u));
  line-height: 1.45;
}
@media only screen and (min-width: 860px) {
  .mkt { font-size: calc(17 * var(--u)); }
}

/* Element resets go through :where() so they carry ZERO specificity — otherwise
   `.mkt h1` (0,1,1) quietly outranks component rules like `.intro__hl` (0,1,0)
   and swallows their margins. */
.mkt a { color: inherit; text-decoration: none; }
.mkt :where(p) { margin: 0; }
.mkt :where(h1, h2, h3, h4) { margin: 0; font-weight: 400; }
.mkt :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mkt :where(ul) { margin: 0; padding: 0; list-style: none; }
.mkt code { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 0.88em; }

.wrap { width: var(--col); margin: 0 auto; padding: 0 var(--gut); box-sizing: border-box; }
@media only screen and (min-width: 860px) { .wrap { padding: 0; } }

/* display scale — uppercase grotesk, tight leading */
.d0, .d1, .d2, .d3 { text-transform: uppercase; font-weight: 400; }
.d0 { font-size: calc(58 * var(--u)); line-height: 0.9; letter-spacing: calc(-0.5 * var(--u)); }
.d1 { font-size: calc(42 * var(--u)); line-height: 0.9; letter-spacing: calc(-0.4 * var(--u)); }
.d2 { font-size: calc(30 * var(--u)); line-height: 0.94; letter-spacing: calc(-0.2 * var(--u)); }
.d3 { font-size: calc(19 * var(--u)); line-height: 1.05; }
@media only screen and (min-width: 860px) {
  .d0 { font-size: calc(132 * var(--u)); line-height: 0.86; letter-spacing: calc(-2 * var(--u)); }
  .d1 { font-size: calc(92 * var(--u)); line-height: 0.86; letter-spacing: calc(-1.5 * var(--u)); }
  .d2 { font-size: calc(56 * var(--u)); line-height: 0.92; letter-spacing: calc(-1 * var(--u)); }
  .d3 { font-size: calc(26 * var(--u)); }
}

/* the counter-voice: lowercase italic serif set inside display lines */
.it {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0;
  font-size: 0.62em;
  color: var(--em-deep);
}
[data-theme="dark"] .it, .band .it { color: var(--em); }

/* mono label */
.lbl {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(11 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg-soft);
}
@media only screen and (min-width: 860px) { .lbl { font-size: calc(13 * var(--u)); } }
.band .lbl { color: var(--band-mud); }

.lede {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: calc(22 * var(--u));
  line-height: 1.3;
}
@media only screen and (min-width: 860px) { .lede { font-size: calc(32 * var(--u)); } }

.band { background: var(--band); color: var(--band-fg); }
.band .lede, .band p { color: var(--band-fg); }

/* rule */
.hr { height: 1px; background: var(--rule); border: 0; margin: 0; }
.band .hr { background: var(--band-rule); }

/* text link with the sliding underline */
.tl { position: relative; display: inline-block; }
.tl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-3 * var(--u));
  height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.tl:hover::after, .tl:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* letters that hop on hover */
[data-jump] span { display: inline-block; }
[data-jump]:hover span { animation: ed-jump 0.5s ease-in-out; }
[data-jump]:hover span:nth-child(2) { animation-delay: 0.04s; }
[data-jump]:hover span:nth-child(3) { animation-delay: 0.08s; }
[data-jump]:hover span:nth-child(4) { animation-delay: 0.12s; }
[data-jump]:hover span:nth-child(5) { animation-delay: 0.16s; }
[data-jump]:hover span:nth-child(6) { animation-delay: 0.2s; }
[data-jump]:hover span:nth-child(7) { animation-delay: 0.24s; }
@keyframes ed-jump {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-24%); }
}

/* line reveal — wrapper clips, inner slides up when .in lands. The padding /
   negative-margin pair gives descenders room so `overflow:hidden` doesn't
   shave the tail off a lowercase italic "y".
   The hidden start state is gated behind `.js` (set by an inline script the
   moment the page parses) so that with JS off — or in a print / full-page
   snapshot where the observer never fires — every line is simply visible. */
.ln { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.ln > span { display: block; transition: transform 0.9s var(--ease); }
.js .ln > span { transform: translateY(110%); }
.in .ln > span, .ln.in > span { transform: translateY(0); }
.ln:nth-child(2) > span { transition-delay: 0.07s; }
.ln:nth-child(3) > span { transition-delay: 0.14s; }
.ln:nth-child(4) > span { transition-delay: 0.21s; }

/* generic fade-rise (same `.js` gate as .ln above) */
[data-rise] { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.js [data-rise] { opacity: 0; transform: translateY(calc(28 * var(--u))); }
.js [data-rise].in { opacity: 1; transform: none; }

/* ── curtain (first paint) ──────────────────────────────────────────────── */

.curtain {
  position: fixed; inset: 0; z-index: 200; background: var(--band); color: var(--band-fg);
  display: grid; place-items: center;
  transform-origin: center top;
  transition: transform 1s var(--ease), opacity 0.6s ease 0.5s;
}
.curtain-up { transform: translateY(-101%); opacity: 0; pointer-events: none; }
/* The curtain is the dark band in BOTH themes, so the green logo reads either
   way. The intrinsic file is 623px square — width/height are pinned so the
   browser downsamples instead of painting it at full size. */
.curtain__mark { display: flex; flex-direction: column; align-items: center; gap: calc(22 * var(--u)); }
.curtain__logo {
  width: calc(116 * var(--u)); height: calc(116 * var(--u));
  max-width: 132px; max-height: 132px;
  object-fit: contain; display: block;
  animation: ed-cur 0.9s var(--ease) both;
}
.curtain__name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(12 * var(--u)); letter-spacing: calc(4 * var(--u));
  text-transform: uppercase; color: var(--band-mud); padding-left: calc(4 * var(--u));
  animation: ed-cur 0.9s var(--ease) 0.12s both;
}
.curtain__rule {
  width: calc(150 * var(--u)); height: 1px; background: var(--band-rule); position: relative; overflow: hidden;
}
.curtain__rule::after {
  content: ""; position: absolute; inset: 0; background: var(--em);
  transform: scaleX(0); transform-origin: left; animation: ed-curline 1.3s var(--ease) 0.2s both;
}
@keyframes ed-cur { from { opacity: 0; transform: translateY(28%) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes ed-curline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── insight (the analytics payoff) ─────────────────────────────────────── */

.insight { padding: var(--sec) 0; }
.insight__grid { display: grid; gap: calc(34 * var(--u)); margin-top: var(--hd); }
@media only screen and (min-width: 960px) { .insight__grid { grid-template-columns: calc(500 * var(--u)) 1fr; gap: calc(90 * var(--u)); align-items: start; } }
.insight__lead { color: var(--fg-soft); }
.insight__list { margin-top: calc(34 * var(--u)); border-top: 1px solid var(--rule); }
.insight__list li { padding: calc(18 * var(--u)) 0; border-bottom: 1px solid var(--rule); display: flex; gap: calc(16 * var(--u)); align-items: baseline; }
.insight__list b {
  font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: calc(11 * var(--u));
  letter-spacing: calc(1.2 * var(--u)); color: var(--em-deep); flex: none; width: calc(24 * var(--u));
}
[data-theme="dark"] .insight__list b { color: var(--em); }
.insight__list span { font-size: calc(15 * var(--u)); }
.insight__list em { font-style: normal; display: block; color: var(--fg-soft); font-size: calc(13.5 * var(--u)); margin-top: calc(4 * var(--u)); }
.insight__plate svg { width: 100%; height: auto; display: block; }

/* ── header ─────────────────────────────────────────────────────────────── */

#mkhead {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 90;
  padding: calc(20 * var(--u)) 0;
  transition: transform 0.5s var(--ease), background 0.3s, backdrop-filter 0.3s;
}
@media only screen and (min-width: 860px) { #mkhead { padding: calc(30 * var(--u)) 0; } }
body.sd #mkhead { transform: translateY(calc(-130 * var(--u))); }
body.stuck #mkhead { background: color-mix(in srgb, var(--pg) 86%, transparent); backdrop-filter: blur(10px); }
body.stuck.on-band #mkhead { background: color-mix(in srgb, var(--band) 86%, transparent); }
body.on-band #mkhead { color: var(--band-fg); }
/* the open sheet is always dark, so the header (which floats above it) has to
   flip to light ink regardless of theme or which band it was over */
body.menu #mkhead { color: var(--band-fg); background: none; backdrop-filter: none; }

.mkhead__in { display: flex; align-items: center; gap: calc(20 * var(--u)); }
.brand { display: flex; align-items: center; gap: calc(10 * var(--u)); text-transform: uppercase; letter-spacing: calc(0.6 * var(--u)); font-size: calc(16 * var(--u)); }
.brand img, .brand .brand__sq {
  width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: calc(3 * var(--u));
  object-fit: cover; display: grid; place-items: center; flex: none;
}
.brand .brand__sq { background: var(--em-deep); color: #fff; font-size: calc(14 * var(--u)); }

.mknav { display: none; gap: calc(44 * var(--u)); margin: 0 auto; }
@media only screen and (min-width: 860px) { .mknav { display: flex; } }
.mknav a { position: relative; white-space: nowrap; text-transform: uppercase; font-size: calc(14 * var(--u)); letter-spacing: calc(0.8 * var(--u)); }
.mknav a::after {
  content: ""; position: absolute; left: 50%; top: calc(-14 * var(--u));
  width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin-left: calc(-3.5 * var(--u));
  border-radius: 50%; background: var(--sun); filter: blur(2px);
  transform: scale(0); transition: transform 0.3s var(--ease);
}
.mknav a:hover::after { transform: scale(1); }

.mkhead__act { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-left: auto; }
@media only screen and (min-width: 860px) { .mkhead__act { margin-left: 0; } }

/* editorial button — square, hairline, fills on hover */
.eb {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  height: calc(38 * var(--u)); padding: 0 calc(18 * var(--u));
  border: 1px solid currentColor; border-radius: calc(999 * var(--u));
  text-transform: uppercase; font-size: calc(12.5 * var(--u)); letter-spacing: calc(1 * var(--u));
  overflow: hidden; white-space: nowrap; box-sizing: border-box;
}
@media only screen and (min-width: 860px) { .eb { height: calc(46 * var(--u)); padding: 0 calc(26 * var(--u)); font-size: calc(14 * var(--u)); } }
.eb > span { position: relative; z-index: 1; transition: color 0.35s var(--ease); }
.eb::before {
  content: ""; position: absolute; inset: 0; background: currentColor;
  transform: translateY(101%); transition: transform 0.45s var(--ease);
}
.eb:hover::before, .eb:focus-visible::before { transform: translateY(0); }
.eb:hover > span { color: var(--pg); }
.band .eb:hover > span, .on-band .eb:hover > span { color: var(--band); }

.eb--solid { background: var(--em-deep); border-color: var(--em-deep); color: #fff; }
.eb--solid::before { background: var(--fg); }
.eb--solid:hover > span { color: var(--pg); }
.eb--lg { height: calc(52 * var(--u)); padding: 0 calc(30 * var(--u)); font-size: calc(14 * var(--u)); }
@media only screen and (min-width: 860px) { .eb--lg { height: calc(64 * var(--u)); padding: 0 calc(44 * var(--u)); font-size: calc(16 * var(--u)); } }

/* theme segmented control */
.seg { display: none; gap: calc(2 * var(--u)); padding: calc(3 * var(--u)); border: 1px solid var(--rule); border-radius: calc(999 * var(--u)); }
@media only screen and (min-width: 1100px) { .seg { display: inline-flex; } }
.on-band .seg { border-color: var(--band-rule); }
.seg button {
  width: calc(30 * var(--u)); height: calc(28 * var(--u)); display: grid; place-items: center;
  border-radius: calc(999 * var(--u)); color: inherit; opacity: 0.45; transition: opacity 0.2s, background 0.2s;
}
.seg button:hover { opacity: 0.85; }
.seg button.on { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.seg .ms { font-size: calc(16 * var(--u)); }

/* mobile menu */
.burger { display: inline-grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
@media only screen and (min-width: 860px) { .burger { display: none; } }
.burger span { display: block; width: calc(20 * var(--u)); height: 1px; background: currentColor; position: relative; transition: transform 0.3s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform 0.3s var(--ease);
}
.burger span::before { top: calc(-6 * var(--u)); }
.burger span::after { top: calc(6 * var(--u)); }
body.menu .burger span { background: transparent; }
body.menu .burger span::before { transform: translateY(calc(6 * var(--u))) rotate(45deg); }
body.menu .burger span::after { transform: translateY(calc(-6 * var(--u))) rotate(-45deg); }

.sheet {
  position: fixed; inset: 0; z-index: 80; background: var(--band); color: var(--band-fg);
  display: flex; flex-direction: column; justify-content: center; gap: calc(6 * var(--u));
  padding: 0 var(--gut);
  clip-path: inset(0 0 100% 0); transition: clip-path 0.6s var(--ease);
}
body.menu .sheet { clip-path: inset(0 0 0 0); }
/* block + nowrap: the letter-hop script replaces the label with one
   inline-block <span> per character, which would otherwise let the links run
   into each other and break mid-word */
.sheet a { display: block; white-space: nowrap; width: fit-content; font-size: calc(34 * var(--u)); text-transform: uppercase; line-height: 1.3; }
.sheet .lbl { margin-bottom: calc(18 * var(--u)); }
@media only screen and (min-width: 860px) { .sheet { display: none; } }

/* ── main stack (sits above the sticky footer) ──────────────────────────── */

#mkmain { position: relative; z-index: 1; background: var(--pg); }

/* Where two sections share the same ground their --sec paddings stack into a
   big unexplained void. A hairline marks the seam so the gap reads as a
   deliberate break; where the ground colour changes, the colour IS the seam. */
.steps, .more, .price { border-top: 1px solid var(--rule); }
.band + .band { border-top: 1px solid var(--band-rule); }
.stats + .works .works__rows { padding-top: var(--hd); }

/* anchor jumps must clear the fixed header */
#work, #insight, #build, #pricing, #faq { scroll-margin-top: calc(90 * var(--u)); }
@media (prefers-reduced-motion: no-preference) { html:has(.mkt) { scroll-behavior: smooth; } }

/* ── intro ──────────────────────────────────────────────────────────────── */

/* only the top differs from the shared rhythm — it has to clear the fixed header */
.intro { position: relative; padding: calc(120 * var(--u)) 0 var(--sec); overflow: hidden; }
@media only screen and (min-width: 860px) { .intro { padding-top: calc(200 * var(--u)); } }

.intro__label { display: flex; justify-content: space-between; }
.intro__hl {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  column-gap: calc(10 * var(--u)); margin: calc(30 * var(--u)) auto 0;
  width: 100%; text-align: center;
}
@media only screen and (min-width: 860px) {
  .intro__hl { column-gap: calc(26 * var(--u)); width: calc(1080 * var(--u)); margin-top: calc(36 * var(--u)); }
}

.intro__body {
  margin: calc(56 * var(--u)) 0 0; display: grid; gap: calc(28 * var(--u));
}
@media only screen and (min-width: 860px) {
  .intro__body { grid-template-columns: calc(520 * var(--u)) 1fr; margin-top: calc(150 * var(--u)); gap: calc(80 * var(--u)); }
}
.intro__meta { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.intro__meta li { display: flex; gap: calc(12 * var(--u)); align-items: baseline; font-size: calc(14 * var(--u)); color: var(--fg-soft); }
.intro__meta li b { font-weight: 400; color: var(--em-deep); font-family: "IBM Plex Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: calc(1 * var(--u)); }
[data-theme="dark"] .intro__meta li b { color: var(--em); }
.intro__cta { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-top: calc(30 * var(--u)); }

/* flanking plates */
.intro__plate { position: absolute; width: calc(150 * var(--u)); opacity: 0.9; pointer-events: none; }
.intro__plate--l { left: calc(-40 * var(--u)); top: calc(300 * var(--u)); display: none; }
.intro__plate--r { right: calc(-30 * var(--u)); top: calc(210 * var(--u)); display: none; }
/* The headline box is 1080u inside a 1400u wrap, which leaves ~0.16vw of free
   gutter on each side at any width. Sizing the plates as a fraction of the
   viewport (rather than a fixed u-multiple) keeps them fully on screen and
   clear of the type instead of bleeding off the edges. Below 1200px there
   isn't room for both, so they stay hidden. */
@media only screen and (min-width: 1200px) {
  .intro__plate { display: block !important; width: min(calc(300 * var(--u)), 12.5vw); }
  .intro__plate--l { left: 1.6vw; top: calc(310 * var(--u)); }
  .intro__plate--r { right: 1.6vw; top: calc(232 * var(--u)); }
}
/* text always wins if a plate creeps under it */
.intro .wrap { position: relative; z-index: 1; }
.intro__plate svg { width: 100%; height: auto; display: block; }

/* vertical scroll cue */
.scrollcue {
  position: absolute; right: var(--gut); bottom: calc(40 * var(--u));
  writing-mode: vertical-rl; display: none;
}
@media only screen and (min-width: 860px) { .scrollcue { display: block; right: calc(24 * var(--u)); } }
.scrollcue::after {
  content: ""; display: block; width: 1px; height: calc(60 * var(--u)); margin: calc(14 * var(--u)) auto 0;
  background: linear-gradient(var(--rule), transparent);
}

/* ── ticker ─────────────────────────────────────────────────────────────── */

.ticker { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden; padding: calc(16 * var(--u)) 0; }
.ticker__in { display: flex; width: max-content; }
.ticker__t {
  display: flex; align-items: center; gap: calc(38 * var(--u)); padding-right: calc(38 * var(--u));
  animation: ed-marq 34s linear infinite; text-transform: uppercase;
  font-size: calc(15 * var(--u)); letter-spacing: calc(1.5 * var(--u)); white-space: nowrap;
}
@media only screen and (min-width: 860px) { .ticker__t { font-size: calc(20 * var(--u)); gap: calc(56 * var(--u)); padding-right: calc(56 * var(--u)); } }
.ticker__t i { font-style: normal; color: var(--em-deep); }
[data-theme="dark"] .ticker__t i { color: var(--em); }
@keyframes ed-marq { to { transform: translateX(-100%); } }
.ticker:hover .ticker__t { animation-play-state: paused; }

/* ── creed (dark statement band) ────────────────────────────────────────── */

/* ── clients ────────────────────────────────────────────────────────────
   Each mark sits on a CONSTANT light plate rather than the page background.
   Several of these emblems are black-on-transparent and would disappear in
   dark mode, and one ships with a baked-in white box — a fixed plate renders
   every one of them the way its owner intended, in both themes, without us
   recolouring anyone's coat of arms. Flex-wrap (not a fixed grid) so a
   partial last row centres itself as the list grows. */

.clients { padding: var(--sec) 0; }
.clients__head { display: grid; gap: calc(14 * var(--u)); }
@media only screen and (min-width: 860px) {
  .clients__head { grid-template-columns: 1fr calc(470 * var(--u)); gap: calc(80 * var(--u)); align-items: baseline; }
}
.clients__note { color: var(--fg-soft); font-size: calc(14.5 * var(--u)); }

.clients__grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(12 * var(--u)); margin-top: var(--hd);
}
.client {
  flex: 0 0 auto; width: calc(186 * var(--u));
  padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u));
  background: #fbfaf7; border: 1px solid var(--rule); border-radius: calc(3 * var(--u));
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
/* 252u + gap divides the 1400u wrap into 5 per row, so nine entries land as
   5 + 4 rather than a lopsided 6 + 3 */
@media only screen and (min-width: 860px) { .client { width: calc(252 * var(--u)); } }
.client:hover {
  border-color: var(--em); transform: translateY(calc(-3 * var(--u)));
  box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) calc(-14 * var(--u)) rgba(12, 16, 14, 0.35);
}
/* Absolute caps, not percentages: a % max-height here resolves against a grid
   area rather than the box and lets the marks spill out of their tiles. */
.client__mark { width: 100%; height: calc(86 * var(--u)); display: grid; place-items: center; }
.client__mark img {
  max-height: calc(86 * var(--u)); max-width: 100%;
  width: auto; height: auto; display: block; object-fit: contain;
}
/* on a fixed light plate the caption can't follow the theme's ink colour */
.client__name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: calc(10 * var(--u)); letter-spacing: calc(1.3 * var(--u));
  text-transform: uppercase; color: #6b736d; text-align: center;
}

/* ── stats band — the four numbers a shop owner is actually buying ──────── */

.stats { padding: var(--sec) 0; }
.stats__grid { display: grid; margin-top: var(--hd); border-top: 1px solid var(--band-rule); }
@media only screen and (min-width: 700px) { .stats__grid { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (min-width: 1000px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: calc(30 * var(--u)) calc(26 * var(--u)) calc(34 * var(--u)) 0; border-bottom: 1px solid var(--band-rule); }
@media only screen and (min-width: 700px) { .stat { border-bottom: 0; border-right: 1px solid var(--band-rule); padding-left: calc(26 * var(--u)); } }
@media only screen and (min-width: 700px) { .stat:first-child { padding-left: 0; } }
@media only screen and (min-width: 1000px) { .stat:last-child { border-right: 0; } }
.stat__fig {
  font-size: calc(56 * var(--u)); line-height: 0.82; letter-spacing: calc(-2 * var(--u));
  display: block; font-variant-numeric: tabular-nums;
}
@media only screen and (min-width: 860px) { .stat__fig { font-size: calc(88 * var(--u)); letter-spacing: calc(-3 * var(--u)); } }
.stat__unit { font-size: 0.42em; letter-spacing: 0; color: var(--em); }
.stat h3 {
  margin-top: calc(20 * var(--u)); text-transform: uppercase;
  font-size: calc(15 * var(--u)); letter-spacing: calc(0.6 * var(--u));
}
.stat p { margin-top: calc(10 * var(--u)); color: var(--band-mud); font-size: calc(14 * var(--u)); max-width: calc(290 * var(--u)); }

/* ── works (sticky blurred label + numbered rows) ───────────────────────── */

.works { position: relative; overflow: clip; }
.works__label {
  position: sticky; top: 0; height: 100vh; margin-bottom: -100vh;
  display: grid; place-items: center; z-index: 0; pointer-events: none;
}
/* Word length is NOT hardcoded. JS writes --n (letter count) on the word and
   --d (signed distance from centre) / --odd (±1) on each letter, so the type
   auto-fits and the spread works for any word you put in data-word. */
.works__word {
  display: flex; opacity: 0.34; filter: blur(2px);
  line-height: 0.72; text-transform: uppercase;
  font-size: min(calc(64 * var(--u)), calc(300 * var(--u) / var(--n, 4)));
  gap: min(calc(18 * var(--u)), calc(70 * var(--u) / var(--n, 4)));
}
@media only screen and (min-width: 860px) {
  .works__word {
    opacity: 0.38; filter: blur(7px);
    font-size: min(calc(224 * var(--u)), calc(1420 * var(--u) / var(--n, 4)));
    gap: min(calc(64 * var(--u)), calc(260 * var(--u) / var(--n, 4)));
  }
}
/* --p is scroll progress through the section (0→1), written by the rAF loop.
   The letters drift apart continuously as you read the cases rather than
   snapping once — that's what makes it feel alive instead of decorative.
   They also carry a standing offset at p=0 so they sit above and below the
   reading band instead of smearing straight through the body copy. */
.works__word span {
  display: block;
  transform: translate(
    calc(var(--d, 0) * (42 + var(--p, 0) * 62) * var(--u)),
    calc(var(--odd, 1) * (110 + var(--p, 0) * 150) * var(--u))
  );
}

/* the section already has a seam rule above it — don't stack a second one */
.case:first-child { border-top: 0; }

.works__rows { position: relative; z-index: 1; padding: var(--sec) 0; }

.case { display: grid; gap: calc(26 * var(--u)); padding: calc(46 * var(--u)) 0; border-top: 1px solid var(--band-rule); }
@media only screen and (min-width: 860px) {
  .case { grid-template-columns: calc(620 * var(--u)) 1fr; gap: calc(100 * var(--u)); align-items: center; padding: calc(80 * var(--u)) 0; }
  .case:nth-child(even) .case__plate { order: 2; }
  .case:nth-child(even) .case__text { order: 1; }
}
.case__plate { position: relative; }
.case__plate svg { width: 100%; height: auto; display: block; border-radius: calc(4 * var(--u)); }
.case__ix { display: flex; align-items: baseline; gap: calc(14 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.case__ix b { font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: calc(12 * var(--u)); letter-spacing: calc(1.4 * var(--u)); color: var(--em); }
.case__text p { color: var(--band-mud); margin-top: calc(18 * var(--u)); max-width: calc(460 * var(--u)); }
.case__tags { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(24 * var(--u)); }
.case__tags span {
  font-family: "IBM Plex Mono", monospace; font-size: calc(10.5 * var(--u)); letter-spacing: calc(1 * var(--u));
  text-transform: uppercase; padding: calc(6 * var(--u)) calc(11 * var(--u));
  border: 1px solid var(--band-rule); border-radius: calc(999 * var(--u)); color: var(--band-mud);
}

/* ── steps ──────────────────────────────────────────────────────────────── */

.steps { padding: var(--sec) 0; }
.steps__grid { display: grid; gap: 0; margin-top: var(--hd); border-bottom: 1px solid var(--rule); }
@media only screen and (min-width: 860px) { .steps__grid { grid-template-columns: repeat(4, 1fr); } }
.step { padding: calc(26 * var(--u)) 0; border-top: 1px solid var(--rule); }
@media only screen and (min-width: 860px) { .step { padding: calc(28 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u)) 0; } }
.step b { display: block; font-family: "IBM Plex Mono", monospace; font-weight: 400; font-size: calc(12 * var(--u)); letter-spacing: calc(1.4 * var(--u)); color: var(--em-deep); }
[data-theme="dark"] .step b { color: var(--em); }
.step h3 { margin-top: calc(16 * var(--u)); }
.step p { margin-top: calc(12 * var(--u)); color: var(--fg-soft); font-size: calc(14.5 * var(--u)); }

/* ── tiles ("more") ─────────────────────────────────────────────────────── */

.more { position: relative; padding: var(--sec) 0; overflow: clip; }
.more__ghost {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: calc(140 * var(--u)); line-height: 1; text-transform: uppercase; letter-spacing: calc(20 * var(--u));
  color: var(--rule-soft); pointer-events: none; white-space: nowrap; z-index: 0;
}
@media only screen and (min-width: 860px) { .more__ghost { font-size: calc(340 * var(--u)); letter-spacing: calc(40 * var(--u)); } }
/* hairlines are drawn per-tile rather than as grid gaps, so the tiles stay
   transparent and the giant ghost word shows through behind them */
.more__grid { position: relative; z-index: 1; display: grid; margin-top: var(--hd); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media only screen and (min-width: 640px) { .more__grid { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (min-width: 860px) { .more__grid { grid-template-columns: repeat(3, 1fr); } }
.tile {
  position: relative; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(34 * var(--u));
  min-height: calc(190 * var(--u)); display: flex; flex-direction: column; overflow: hidden;
  transition: color 0.4s var(--ease);
}
@media only screen and (min-width: 860px) { .tile { padding: calc(38 * var(--u)) calc(34 * var(--u)) calc(46 * var(--u)); min-height: calc(260 * var(--u)); } }
.tile::before { content: ""; position: absolute; inset: 0; background: var(--band); transform: translateY(101%); transition: transform 0.5s var(--ease); }
.tile:hover::before { transform: translateY(0); }
.tile > * { position: relative; z-index: 1; }
.tile:hover { color: var(--band-fg); }
.tile:hover .lbl, .tile:hover p { color: var(--band-mud); }
.tile h3 { margin-top: auto; }
.tile p { margin-top: calc(12 * var(--u)); color: var(--fg-soft); font-size: calc(14 * var(--u)); max-width: calc(300 * var(--u)); }
.tile__gl { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.tile__gl svg { width: 100%; height: 100%; display: block; }

/* ── pricing ────────────────────────────────────────────────────────────── */

.price { padding: var(--sec) 0; }
.price__head { display: grid; gap: calc(26 * var(--u)); }
@media only screen and (min-width: 860px) { .price__head { grid-template-columns: 1fr calc(470 * var(--u)); gap: calc(120 * var(--u)); align-items: end; } }
.price__note { color: var(--fg-soft); font-size: calc(14.5 * var(--u)); }
.price__note b { font-weight: 400; color: var(--fg); border-bottom: 1px solid var(--em-deep); }

.plans { display: grid; margin-top: var(--hd); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media only screen and (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (min-width: 1000px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan {
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u));
  display: flex; flex-direction: column; position: relative;
}
@media only screen and (min-width: 860px) { .plan { padding: calc(38 * var(--u)) calc(30 * var(--u)) calc(36 * var(--u)); } }
.plan--on { background: var(--pg-2); }
.plan__top { display: flex; align-items: baseline; justify-content: space-between; gap: calc(10 * var(--u)); }
.plan__name { text-transform: uppercase; font-size: calc(15 * var(--u)); letter-spacing: calc(0.8 * var(--u)); }
.plan__flag { font-family: "IBM Plex Mono", monospace; font-size: calc(9.5 * var(--u)); letter-spacing: calc(1.1 * var(--u)); text-transform: uppercase; color: var(--em-deep); }
[data-theme="dark"] .plan__flag { color: var(--em); }
.plan__fig { display: flex; align-items: baseline; gap: calc(6 * var(--u)); margin-top: calc(26 * var(--u)); }
.plan__cur { font-family: "IBM Plex Mono", monospace; font-size: calc(13 * var(--u)); color: var(--fg-soft); }
.plan__amt { font-size: calc(54 * var(--u)); line-height: 0.85; letter-spacing: calc(-1.6 * var(--u)); }
@media only screen and (min-width: 860px) { .plan__amt { font-size: calc(64 * var(--u)); } }
.plan__amt--word { font-size: calc(34 * var(--u)); text-transform: uppercase; letter-spacing: calc(-0.6 * var(--u)); }
@media only screen and (min-width: 860px) { .plan__amt--word { font-size: calc(42 * var(--u)); } }
.plan__alt { margin-top: calc(8 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: calc(11 * var(--u)); color: var(--fg-soft); }
.plan__cred { margin-top: calc(4 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: calc(11.5 * var(--u)); letter-spacing: calc(0.6 * var(--u)); text-transform: uppercase; color: var(--em-deep); }
[data-theme="dark"] .plan__cred { color: var(--em); }
.plan__list { margin: calc(28 * var(--u)) 0 calc(30 * var(--u)); display: flex; flex-direction: column; gap: calc(11 * var(--u)); }
.plan__list li { display: flex; gap: calc(10 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.4; color: var(--fg-soft); }
.plan__list li i { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: calc(11 * var(--u)); color: var(--em-deep); flex: none; line-height: 1.5; }
[data-theme="dark"] .plan__list li i { color: var(--em); }
.plan__list li.off { opacity: 0.42; }
.plan__list li.off i { color: var(--fg-soft); }
.plan__list li b { font-weight: 400; color: var(--fg); }
.plan .eb { margin-top: auto; width: 100%; }
.price__foot { margin-top: calc(30 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--fg-soft); }

/* ── faq ────────────────────────────────────────────────────────────────── */

.faq { padding: var(--sec) 0; }
.faq__list { margin-top: var(--hd); border-top: 1px solid var(--band-rule); }
.qa { border-bottom: 1px solid var(--band-rule); }
.qa__q {
  width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: calc(20 * var(--u));
  padding: calc(24 * var(--u)) 0; text-align: left; text-transform: uppercase;
  font-size: calc(18 * var(--u)); line-height: 1.15; letter-spacing: calc(0.2 * var(--u));
  transition: color 0.25s;
}
@media only screen and (min-width: 860px) { .qa__q { font-size: calc(28 * var(--u)); padding: calc(34 * var(--u)) 0; } }
.qa__q:hover { color: var(--em); }
.qa__n { font-family: "IBM Plex Mono", monospace; font-size: calc(11 * var(--u)); color: var(--band-mud); flex: none; }
.qa__sig { flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); position: relative; align-self: center; }
.qa__sig::before, .qa__sig::after { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor; transition: transform 0.35s var(--ease); }
.qa__sig::after { transform: rotate(90deg); }
.qa.on .qa__sig::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.qa.on .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { color: var(--band-mud); max-width: calc(720 * var(--u)); padding-bottom: calc(28 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.55; }

/* ── closing cta ────────────────────────────────────────────────────────── */

.close { padding: var(--sec) 0; text-align: center; }
.close__hl { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: calc(18 * var(--u)); }
.close .eb { margin-top: calc(44 * var(--u)); }
.close__fine { margin-top: calc(20 * var(--u)); font-family: "IBM Plex Mono", monospace; font-size: calc(11.5 * var(--u)); letter-spacing: calc(1 * var(--u)); text-transform: uppercase; color: var(--fg-soft); }

/* ── footer (sticky — the page scrolls off it) ──────────────────────────── */

.mkfoot {
  position: sticky; bottom: 0; z-index: 0; background: var(--band-2); color: var(--band-fg);
  padding: calc(44 * var(--u)) 0 calc(20 * var(--u));
}
@media only screen and (min-width: 860px) { .mkfoot { padding: calc(70 * var(--u)) 0 calc(24 * var(--u)); } }
.mkfoot__msg {
  display: flex; align-items: flex-end; justify-content: space-between; opacity: 0.35;
  margin-bottom: calc(40 * var(--u)); font-size: calc(28 * var(--u)); line-height: 0.9;
  text-transform: uppercase; letter-spacing: calc(-0.3 * var(--u));
}
@media only screen and (min-width: 860px) { .mkfoot__msg { margin-bottom: calc(80 * var(--u)); font-size: calc(92 * var(--u)); letter-spacing: calc(-1.5 * var(--u)); } }
.mkfoot__msg span:nth-child(even) { align-self: flex-start; }
.mkfoot__body { display: grid; gap: calc(34 * var(--u)); }
@media only screen and (min-width: 860px) { .mkfoot__body { grid-template-columns: calc(520 * var(--u)) 1fr 1fr 1fr; gap: calc(40 * var(--u)); } }
.mkfoot__body p { color: var(--band-mud); max-width: calc(400 * var(--u)); margin-top: calc(16 * var(--u)); font-size: calc(14.5 * var(--u)); }
.mkfoot__col { display: flex; flex-direction: column; gap: calc(11 * var(--u)); }
.mkfoot__col .lbl { margin-bottom: calc(8 * var(--u)); }
.mkfoot__col a { font-size: calc(14.5 * var(--u)); width: fit-content; }
.mkfoot__bar {
  margin-top: calc(44 * var(--u)); padding-top: calc(18 * var(--u)); border-top: 1px solid var(--band-rule);
  display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); justify-content: space-between;
  font-family: "IBM Plex Mono", monospace; font-size: calc(10.5 * var(--u)); letter-spacing: calc(1 * var(--u));
  text-transform: uppercase; color: var(--band-mud);
}
@media only screen and (min-width: 860px) { .mkfoot__bar { margin-top: calc(80 * var(--u)); } }

/* ── shared svg plate palette ───────────────────────────────────────────── */

.pl-bg { fill: var(--pg); }
.pl-bg2 { fill: var(--pg-2); }
.pl-ln { stroke: var(--rule); stroke-width: 1; fill: none; }
.pl-fill-soft { fill: var(--rule-soft); }
.pl-fg { fill: var(--fg); }
.pl-mut { fill: var(--fg-soft); }
.pl-em { fill: var(--em); }
.pl-em-s { stroke: var(--em); fill: none; }
.pl-sun { fill: var(--sun); }
.pl-flame { fill: var(--flame); }
.pl-txt { font-family: "IBM Plex Mono", monospace; fill: var(--fg-soft); }
/* plates that sit on the dark band read against band tokens instead */
.band .pl-bg { fill: var(--band-2); }
.band .pl-bg2 { fill: color-mix(in srgb, var(--band-fg) 7%, var(--band)); }
.band .pl-ln { stroke: var(--band-rule); }
.band .pl-fill-soft { fill: color-mix(in srgb, var(--band-fg) 9%, transparent); }
.band .pl-fg { fill: var(--band-fg); }
.band .pl-mut { fill: var(--band-mud); }
.band .pl-txt { fill: var(--band-mud); }

/* animated bits inside the plates, played once the row reveals.
   `stroke-dasharray` stays on the element as a presentation attribute (each
   ring needs its own circumference); only the offset is animated here. */
.pl-ring { stroke-dashoffset: 382; transition: stroke-dashoffset 1.5s var(--ease) 0.25s; }
.in .pl-ring { stroke-dashoffset: 0; }
.pl-fade { opacity: 0; transition: opacity 0.7s var(--ease) 0.3s; }
.in .pl-fade { opacity: 1; }
.pl-grow { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform 0.8s var(--ease); }
.in .pl-grow { transform: scaleY(1); }
.in .pl-grow:nth-of-type(2) { transition-delay: 0.08s; }
.in .pl-grow:nth-of-type(3) { transition-delay: 0.16s; }
.in .pl-grow:nth-of-type(4) { transition-delay: 0.24s; }
.in .pl-grow:nth-of-type(5) { transition-delay: 0.32s; }
.pl-pop { opacity: 0; transform: translateY(calc(10 * var(--u))); transition: opacity 0.5s var(--ease) 0.55s, transform 0.5s var(--ease) 0.55s; }
.in .pl-pop { opacity: 1; transform: none; }
.pl-blink { animation: ed-blink 1.2s steps(1) infinite; }
@keyframes ed-blink { 50% { opacity: 0; } }

/* ── hero chat preview: a looping replay of the conversation ────────────── */
/* One 9s cycle shared by every bubble; each keyframe set just carves out the
   slice of that cycle it is on screen for, so the four stages stay in step. */
.hc > g { opacity: 0; }
.hc-1 { animation: hc-a 9s var(--ease) infinite; }
.hc-2 { animation: hc-b 9s var(--ease) infinite; }
.hc-dots { animation: hc-c 9s steps(1) infinite; }
.hc-ans { animation: hc-d 9s var(--ease) infinite; }
@keyframes hc-a { 0%, 2% { opacity: 0 } 8%, 93% { opacity: 1 } 98%, 100% { opacity: 0 } }
@keyframes hc-b { 0%, 17% { opacity: 0 } 23%, 93% { opacity: 1 } 98%, 100% { opacity: 0 } }
@keyframes hc-c { 0%, 31% { opacity: 0 } 32%, 46% { opacity: 1 } 47%, 100% { opacity: 0 } }
@keyframes hc-d { 0%, 47% { opacity: 0 } 53%, 93% { opacity: 1 } 98%, 100% { opacity: 0 } }
.hc-dots circle { animation: hc-dot 1.1s ease-in-out infinite; }
.hc-dots circle:nth-of-type(2) { animation-delay: 0.15s; }
.hc-dots circle:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes hc-dot { 0%, 100% { opacity: 0.3 } 50% { opacity: 1 } }

/* ── reduced motion ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .mkt *, .mkt *::before, .mkt *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .ln > span { transform: none; }
  [data-rise] { opacity: 1; transform: none; }
  .curtain { display: none; }
  /* the chat replay is animation-driven, so killing the animation would leave
     every bubble at its opacity:0 start — show the finished conversation */
  .hc > g, .hc-dots circle { opacity: 1; }
  .hc-dots { display: none; }
}

/* ============================================================================
   AUTH PAGES — same editorial system, scoped to .auth so the dashboard
   (which shares ds.css) is untouched.
   ========================================================================= */

.auth {
  --u: min(calc(100vw / 375), 1.42px);
  font-family: "Archivo", system-ui, sans-serif;
}
@media only screen and (min-width: 900px) { .auth { --u: min(calc(100vw / 1600), 1.2px); } }

.auth__brand {
  background: var(--band, #0f231c); color: #f1eee6;
  padding: calc(44 * var(--u)) calc(56 * var(--u));
}
[data-theme="dark"] .auth__brand { background: #05100c; }
/* kill the old aurora blobs */
.auth__brand::before { display: none; }
.auth__brand::after {
  content: ""; display: block; position: absolute; inset: auto 0 0 0; height: 1px;
  background: none; filter: none; opacity: 1; animation: none; border-radius: 0;
}

.auth__logo {
  text-transform: uppercase; letter-spacing: calc(0.8 * var(--u));
  font-weight: 400; font-size: calc(16 * var(--u)); color: #f1eee6;
}
.auth .rail__mark {
  border-radius: calc(3 * var(--u)) !important; color: #04140e;
  box-shadow: none !important; font-family: "Archivo", sans-serif; font-weight: 500;
}

.auth__quote {
  font-family: "Archivo", system-ui, sans-serif; font-weight: 400;
  font-size: calc(46 * var(--u)); line-height: 0.92; letter-spacing: calc(-1 * var(--u));
  text-transform: uppercase; max-width: calc(620 * var(--u));
}
@media only screen and (min-width: 900px) { .auth__quote { font-size: calc(74 * var(--u)); } }
.auth__quote .u {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic;
  text-transform: lowercase; font-size: 0.72em; color: #16b07c; letter-spacing: 0;
}

.auth__points { gap: calc(14 * var(--u)); margin-top: calc(40 * var(--u)); }
.auth__pt {
  align-items: baseline; gap: calc(14 * var(--u)); font-size: calc(14.5 * var(--u));
  color: rgba(241, 238, 230, 0.6); max-width: calc(500 * var(--u));
  padding-top: calc(14 * var(--u)); border-top: 1px solid rgba(241, 238, 230, 0.14);
}
.auth__pt .ms { display: none; }
.auth__pt::before {
  content: attr(data-n); font-family: "IBM Plex Mono", monospace; font-size: calc(10.5 * var(--u));
  letter-spacing: calc(1 * var(--u)); color: #16b07c; flex: none;
}

/* the little conversation proof on the login panel */
.auth-demo { gap: calc(10 * var(--u)); margin-top: calc(42 * var(--u)); max-width: calc(470 * var(--u)); }
.auth-demo__b {
  border-radius: calc(4 * var(--u)); font-size: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
}
.auth-demo__b--bot { background: rgba(241, 238, 230, 0.06); border: 1px solid rgba(241, 238, 230, 0.14); color: rgba(241, 238, 230, 0.78); }
.auth-demo__b--usr { background: #16b07c; color: #04140e; font-weight: 400; }

.auth__foot { letter-spacing: calc(1.2 * var(--u)); color: rgba(241, 238, 230, 0.35); }

.auth__panel { background: var(--pg, #efece4); }
.auth__card { max-width: calc(430 * var(--u)); }

/* the form itself: flat sheet, hairline rules — no floating card */
.auth .card {
  background: none !important; border: 0 !important; border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: calc(32 * var(--u)) 0 0 !important;
}
.auth .card:hover { transform: none; box-shadow: none; }
.auth .font-display {
  font-family: "Archivo", system-ui, sans-serif !important; font-weight: 400 !important;
  text-transform: uppercase; letter-spacing: calc(-0.5 * var(--u)) !important;
  font-size: calc(34 * var(--u)) !important; line-height: 0.95;
}
.auth .field__l {
  font-family: "IBM Plex Mono", monospace; font-weight: 400; text-transform: uppercase;
  font-size: calc(10.5 * var(--u)); letter-spacing: calc(1.2 * var(--u)); color: var(--fg-soft);
}
.auth .input {
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: none;
  height: calc(42 * var(--u)); padding: 0; font-size: calc(15 * var(--u));
}
.auth .input:focus { box-shadow: none; border-bottom-color: var(--em); }
.auth .btn--ink {
  background: var(--fg); color: var(--pg); border-radius: calc(999 * var(--u)); box-shadow: none;
  text-transform: uppercase; letter-spacing: calc(1.2 * var(--u)); font-weight: 400;
  font-size: calc(13 * var(--u)); height: calc(48 * var(--u)) !important;
}
.auth .btn--ink::after { display: none; }
.auth .btn--ink:hover { background: var(--em-deep); color: #fff; transform: none; box-shadow: none; }
.auth .link-brass { color: var(--em-deep); font-weight: 400; border-bottom: 1px solid currentColor; }
[data-theme="dark"] .auth .link-brass { color: var(--em); }
.auth .flash { border-radius: 0; border-left: 2px solid currentColor; font-size: calc(13 * var(--u)); }

@media (max-width: 900px) {
  .auth__brand { display: none; }
}