/* ==========================================================================
   smudges: design tokens
   Paper, ink and one marker yellow. Rationale in docs/brand.md.
   ========================================================================== */
@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800; font-stretch: 75% 112.5%; font-style: normal; font-display: swap;
}

:root {
  --paper: #F1F1EE;      /* card stock: neutral, not cream */
  --paper-2: #E8E8E3;    /* tinted bands, skeletons */
  --card: #FAFAF8;       /* raised surfaces */
  --ink: #141519;        /* 16.1:1 on paper */
  --ink-2: #3B3D43;      /* body copy, 9.6:1 */
  --graphite: #62646B;   /* secondary, 5.2:1 */
  --rule: rgba(20, 21, 25, .14);
  --rule-2: rgba(20, 21, 25, .08);
  --signal: #FFD02B;       /* marker yellow: buttons, the highlighter, evidence marks. Ink on it 12.4:1 */
  --signal-ink: #141519;   /* yellow can't be read on paper, so text accents stay ink (on a yellow chip or swipe) */
  --signal-hover: #FFC400;
  --signal-deep: #E9B200;  /* the wetter edge of a highlighter stroke */
  --signal-warm: #FF8A1F;  /* tangerine: only inside the product washes, always with yellow */
  --signal-soft: #F5DE8A;
  --on-signal: #141519;
  --signal-night: #FFD84D; /* text and marks on night, 13.5:1 */

  --night: #111215;
  --night-2: #1B1C20;
  --on-night: #ECECE7;
  --on-night-2: #A2A4AA;
  --rule-night: rgba(236, 236, 231, .14);

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --f-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-display: "Big Shoulders Display", "Arial Narrow", ui-sans-serif, sans-serif;
  --r-btn: 4px;
  --signal-halo: rgba(20, 21, 25, .8);      /* outline that keeps yellow marks legible on paper */
  --stamp: 3px 3px 0 var(--ink);            /* the hard offset shadow of a stamped button */
  --f-mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --shadow-paper: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 28px 56px -36px rgba(20, 21, 25, .42), 0 2px 6px -2px rgba(20, 21, 25, .12);
  --tick: rgba(20, 21, 25, .5);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; scroll-padding-top: 110px; }
body {
  margin: 0; font-family: var(--f-sans); font-size: 17px; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  background: var(--paper);
}
main { overflow-x: clip; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg, canvas { display: block; }
::selection { background: var(--signal); color: var(--on-signal); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.section--night :focus-visible, .footer :focus-visible, .nav[data-theme="dark"] :focus-visible { outline-color: var(--signal-night); }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.mono { font-family: var(--f-mono); font-size: 11px; line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; font-stretch: 87.5%; font-weight: 400; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { top: 16px; }

/* ==========================================================================
   Brand lockup
   ========================================================================== */
.brand { display: inline-flex; align-items: center; gap: 7px; line-height: 1; white-space: nowrap; }
/* the mark is an alpha mask filled with currentColor; a pre-filtered small mask keeps the ridges clean on 1x screens */
.brand__mark {
  width: 62px; height: 38px; flex: none; background: currentColor;
  -webkit-mask: url("../img/mark.png") left center / contain no-repeat; mask: url("../img/mark.png") left center / contain no-repeat;
  -webkit-mask-image: -webkit-image-set(url("../img/mark-sm.png") 1x, url("../img/mark.png") 2x);
  mask-image: image-set(url("../img/mark-sm.png") 1x, url("../img/mark.png") 2x);
}
.brand__word { font-family: var(--f-display); font-weight: 800; font-size: 27px; letter-spacing: .01em; text-transform: uppercase; }
.brand__dot { display: inline-block; width: .15em; height: .15em; background: var(--signal); box-shadow: 0 0 0 1px var(--ink); margin: 0 .06em; vertical-align: baseline; }
.brand--lg .brand__mark { width: 78px; height: 48px; -webkit-mask-image: url("../img/mark.png"); mask-image: url("../img/mark.png"); }
.brand--lg .brand__word { font-size: 40px; }
.footer .brand__dot { background: var(--signal-night); box-shadow: none; }

/* ==========================================================================
   Floating nav: Arcademy's pattern. One rounded object floating over a
   square-cornered document. Its theme follows the section beneath it.
   ========================================================================== */
.nav { position: fixed; inset: 16px 0 auto; z-index: 50; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.nav__bar {
  pointer-events: auto;
  width: min(1200px, calc(100% - 32px)); height: 60px; padding: 0 8px 0 20px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-radius: calc(var(--r-btn) + 8px);   /* = CTA radius + 8px inset: corners stay concentric */
  background: rgba(250, 250, 248, .8);
  border: 1px solid rgba(20, 21, 25, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 40px -26px rgba(20, 21, 25, .45);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  color: var(--ink);
  transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.nav[data-theme="dark"] .nav__bar {
  background: rgba(27, 28, 32, .74); color: var(--on-night);
  border-color: rgba(236, 236, 231, .1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 40px -24px rgba(0, 0, 0, .6);
}
.nav__links { display: flex; gap: 30px; font-size: 15.5px; font-weight: 500; }
.nav[data-theme="dark"] .brand__dot { background: var(--signal-night); box-shadow: none; }
.nav__links a { position: relative; isolation: isolate; padding: 6px 0; opacity: .86; transition: opacity .2s; }
.nav__links a:hover { opacity: 1; }
.nav__links a::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 2px; height: 6px; z-index: -1; background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav__login { font-size: 15.5px; font-weight: 500; opacity: .86; }
.nav__login:hover { opacity: 1; }
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 18px; margin-right: 3px; border-radius: var(--r-btn);
  background: var(--signal); color: var(--on-signal); font-weight: 700; font-size: 15px; white-space: nowrap;
  border: 1.5px solid var(--ink); box-shadow: var(--stamp);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .12s;
}
.nav__cta svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.nav__cta:hover svg { transform: translateX(3px); }
.nav__cta:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.nav__cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.nav[data-theme="dark"] .nav__cta { border-color: var(--signal-night); box-shadow: 3px 3px 0 rgba(255, 216, 77, .35); }
.nav__menu { display: none; width: 44px; height: 44px; border-radius: var(--r-btn); position: relative; }
.nav__menu i { position: absolute; left: 13px; right: 13px; height: 1.5px; background: currentColor; transition: transform .25s var(--ease); }
.nav__menu i:first-of-type { top: 18px; } .nav__menu i:last-of-type { top: 25px; }
.nav__menu[aria-expanded="true"] i:first-of-type { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-of-type { transform: translateY(-3.5px) rotate(-45deg); }
.nav__sheet {
  pointer-events: auto; width: calc(100% - 32px); margin-top: 8px; padding: 10px 20px; border-radius: 12px;
  background: rgba(250, 250, 248, .96); border: 1px solid rgba(20, 21, 25, .08); box-shadow: 0 18px 40px -26px rgba(20, 21, 25, .45);
  display: grid; backdrop-filter: blur(18px);
}
.nav__sheet[hidden] { display: none; }
.nav__sheet a { padding: 13px 0; font-size: 18px; font-weight: 600; border-bottom: 1px solid var(--rule-2); }
.nav__sheet a:last-child { border-bottom: 0; }

/* ==========================================================================
   Buttons, links, form
   ========================================================================== */
/* Stamped: marker yellow, an ink edge and a hard offset shadow. It lifts on hover and presses flat on click. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: var(--r-btn); font-weight: 700; font-size: 16px; white-space: nowrap; transition: transform .12s var(--ease), box-shadow .12s var(--ease), background-color .12s; }
.btn svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--signal { background: var(--signal); color: var(--on-signal); border: 1.5px solid var(--ink); box-shadow: var(--stamp); }
.btn--signal:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn--signal:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.lookup__row .btn--signal { height: 46px; margin-right: 3px; }
.section--night .btn--signal { border-color: var(--signal-night); box-shadow: 3px 3px 0 rgba(255, 216, 77, .35); }
.section--night .btn--signal:hover { box-shadow: 4px 4px 0 rgba(255, 216, 77, .45); }
.btn--ghost { color: var(--signal-ink); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--signal-soft); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--signal); }

.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); padding: 0 2px; background: linear-gradient(var(--signal), var(--signal)) left 88% / 100% 34% no-repeat; transition: background-size .3s var(--ease); }
.link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.link:hover svg { transform: translateX(3px); }
.link:hover { background-size: 100% 88%; }
.link--night { color: var(--signal-night); }
.link--night { background: none; }
.link--night:hover { color: #FFE48A; }

.lookup { margin-top: 40px; max-width: 560px; }
.lookup__types { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 10px; border-radius: 7px; background: var(--paper-2); }
.lookup__types button { height: 32px; padding: 0 14px; border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--graphite); transition: background-color .15s, color .15s, box-shadow .15s; }
.lookup__types button:hover { color: var(--ink); }
.lookup__types button[aria-checked="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 21, 25, .12), 0 0 0 1px rgba(20, 21, 25, .06); }
.lookup__row { display: flex; align-items: center; gap: 6px; height: 62px; padding: 6px; border-radius: calc(var(--r-btn) + 5px); border: 1px solid rgba(20, 21, 25, .2); background: var(--card); box-shadow: 0 18px 36px -30px rgba(20, 21, 25, .5); }
.lookup__row:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 55%, transparent); }
.lookup__row input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; padding: 0 12px; font-size: 17px; outline: none; }
.lookup__row input::placeholder { color: var(--graphite); opacity: 1; }

/* ==========================================================================
   Section header: forensic scale rule + index label
   ========================================================================== */
.section { padding-block: clamp(72px, 8.5vw, 124px); position: relative; }
.section--tint { background: var(--paper-2); }
.section--night { background: var(--night); color: var(--on-night); --tick: rgba(236, 236, 231, .45); --rule: var(--rule-night); }

.sh { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 28px; align-items: end; margin-bottom: clamp(48px, 6vw, 72px); }
.sh__label { grid-column: 1 / -1; }
.sh__label, .principle .sh__label, .conduct .sh__label { display: flex; align-items: center; gap: 12px; color: inherit; }
.sh__label span { color: var(--on-signal); background: var(--signal); padding: 2px 6px; font-weight: 600; }
.sh__label::after {
  content: ""; flex: 1; height: 9px; margin-left: 6px;
  background:
    linear-gradient(var(--tick), var(--tick)) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 8px) left bottom / 100% 4px no-repeat,
    repeating-linear-gradient(to right, var(--tick) 0 1px, transparent 1px 40px) left bottom / 100% 9px no-repeat;
}
.sh__title { grid-column: 1 / span 7; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(44px, 5.2vw, 76px); line-height: .92; letter-spacing: 0; font-weight: 800; text-wrap: balance; }
.sh__intro { grid-column: 9 / -1; font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 30em; text-wrap: pretty; }
.sh--stack { display: block; }
.sh--stack .sh__title { margin-top: 28px; }

/* ==========================================================================
   The highlighter: a marker-yellow stroke that sweeps behind key phrases as
   they come into view (assets/js/main.js adds .is-lit). Ragged ends and a wetter
   lower edge, like a real chisel-tip marker; each wrapped line gets its own stroke.
   ========================================================================== */
mark.hl {
  --hl-y: 62%; --hl-h: 64%;
  color: inherit; padding: 0 .1em; margin: 0 -.06em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M7 13C62 8 160 11 238 7c62-3 122 1 156-2l4 13c-2 12 1 23-4 34-74 3-194 0-274 3-50 2-90-1-120 1L2 44c3-10-1-20 5-31Z' fill='%23FFD02B'/%3E%3Cpath d='M6 45c118 3 258-2 388 1l-1 6c-92 3-242 0-387 4Z' fill='%23E9B200' fill-opacity='.5'/%3E%3Cpath d='M7 13c40-3 80-3 120-4L10 22Z' fill='%23FFE27A' fill-opacity='.6'/%3E%3C/svg%3E") 0 var(--hl-y) / 0% var(--hl-h) no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .85s cubic-bezier(.6, .04, .3, 1), color .3s var(--ease) .25s;
}
mark.hl.is-lit { background-size: 100% var(--hl-h); }
.display mark.hl, .statement mark.hl { --hl-y: 70%; --hl-h: 58%; padding: 0 .06em; }
/* on dark bands the text turns ink, so the stroke covers the whole letter height */
.section--night mark.hl, .section--night .statement mark.hl { --hl-y: 54%; --hl-h: 96%; padding: 0 .08em; }
.section--night mark.hl.is-lit { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { mark.hl { transition: none; } }

/* ==========================================================================
   03 Product: proof of working. One claim per tile (what it is in ink, what it
   does in graphite), a stamped arrow, and the product view floating on a wash of
   highlighter over graph paper. The whole tile is the link. Frames stay blank
   until there is a product to show.
   ========================================================================== */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tile {
  position: relative; display: grid; grid-template-rows: auto 1fr; min-width: 0; padding: 26px 26px 0; overflow: hidden; isolation: isolate;
  background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 48px -40px rgba(20, 21, 25, .45);
  transition: border-color .25s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.tile--wide { grid-column: span 2; }
.tile--full { grid-column: 1 / -1; }
.tile:hover { border-color: rgba(20, 21, 25, .4); transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 36px 60px -40px rgba(20, 21, 25, .55); }
.tile__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.tile__head h3 { max-width: 32ch; font-size: 21px; line-height: 1.32; font-weight: 500; letter-spacing: -.015em; color: var(--graphite); text-wrap: pretty; }
.tile__head h3 b { font-weight: 700; color: var(--ink); }
.tile__go {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 3px 3px 0; border-radius: var(--r-btn);
  background: var(--signal); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); color: var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.tile__go svg { width: 15px; height: 15px; transform: rotate(-45deg); transition: transform .25s var(--ease); }
.tile:hover .tile__go { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.tile:hover .tile__go svg { transform: rotate(-45deg) translateX(2px); }
.tile:active .tile__go { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.tile__pic { position: relative; align-self: end; display: flex; align-items: flex-end; min-height: 280px; margin: 0 -26px; padding: 0 26px 26px; }
.tile--full .tile__pic { min-height: 320px; padding-inline: 12%; }
/* the wash: two pools of highlighter light (yellow and tangerine) rising from under the grid over faint graph
   paper. Each tile is lit from the side of the grid it sits on, and neighbours swap which colour leads, so the
   bento reads as one light source rather than six copies of the same glow. */
.tile__pic { --pa: 12% 100%; --pb: 88% 100%; --ang: 180deg; --wa: var(--signal); --ka: 62%; --wb: var(--signal-warm); --kb: 50%; }
.tile__pic::before {
  content: ""; position: absolute; inset: 14% 0 0; z-index: -1; opacity: .9; transition: opacity .4s var(--ease);
  background:
    radial-gradient(70% 90% at var(--pa), color-mix(in srgb, var(--wa) var(--ka), transparent), transparent 70%),
    radial-gradient(62% 82% at var(--pb), color-mix(in srgb, var(--wb) var(--kb), transparent), transparent 72%),
    linear-gradient(rgba(20, 21, 25, .055) 1px, transparent 1px) 0 0 / 100% 18px,
    linear-gradient(90deg, rgba(20, 21, 25, .055) 1px, transparent 1px) 0 0 / 18px 100%;
  -webkit-mask-image: linear-gradient(var(--ang), transparent 0%, #000 55%); mask-image: linear-gradient(var(--ang), transparent 0%, #000 55%);
}
/* lit from the outside of the grid: left tiles from bottom-left, right tiles from bottom-right, the middle from below */
.tiles .tile:nth-child(1) .tile__pic { --pa: 0% 100%; --pb: 88% 118%; --ang: 200deg; }
.tiles .tile:nth-child(2) .tile__pic { --pa: 100% 100%; --pb: 10% 120%; --ang: 160deg; --wa: var(--signal-warm); --ka: 50%; --wb: var(--signal); --kb: 62%; }
.tiles .tile:nth-child(3) .tile__pic { --pa: 0% 90%; --pb: 75% 120%; --ang: 215deg; --wa: var(--signal-warm); --ka: 50%; --wb: var(--signal); --kb: 62%; }
.tiles .tile:nth-child(4) .tile__pic { --pa: 50% 120%; --pb: 50% 135%; --ang: 180deg; }
.tiles .tile:nth-child(5) .tile__pic { --pa: 100% 90%; --pb: 25% 120%; --ang: 145deg; }
.tiles .tile:nth-child(6) .tile__pic { --pa: 0% 100%; --pb: 100% 100%; --ang: 180deg; }
/* the step cards get the same light, from the side their picture sits on */
.steps .step:nth-child(1) .step__pic { --pa: 100% 100%; --pb: 0% 115%; }
.steps .step:nth-child(2) .step__pic { --pa: 0% 100%; --pb: 100% 115%; --wa: var(--signal-warm); --ka: 50%; --wb: var(--signal); --kb: 62%; }
.steps .step:nth-child(3) .step__pic { --pa: 100% 100%; --pb: 0% 115%; }
.tile:hover .tile__pic::before { opacity: 1; }
.tile__frame {
  position: relative; width: 100%; height: 250px; overflow: hidden; border-radius: 12px; background: #FFFFFF;
  border: 1px solid rgba(20, 21, 25, .12);
  box-shadow: 0 34px 60px -36px rgba(20, 21, 25, .55), 0 12px 24px -16px rgba(20, 21, 25, .22);
  transition: transform .45s var(--ease);
}
.tile--full .tile__frame { height: 280px; }
.tile:hover .tile__frame { transform: translateY(-4px); }
.tile__frame::before {
  content: ""; position: absolute; inset: 34px 0 0;
  background-image: radial-gradient(circle, rgba(20, 21, 25, .13) 1px, transparent 1.4px); background-size: 18px 18px; background-position: center;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent); mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent);
}
.tile__frame:has(img) { background: var(--paper); }
.tile__frame:has(img)::before { display: none; }
.tile__frame img { position: absolute; top: 34px; left: 0; width: 100%; height: calc(100% - 34px); object-fit: cover; object-position: left top; }
.tile__bar { position: relative; z-index: 1; background: #FFFFFF; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--rule-2); color: var(--graphite); }
.tile__bar i { width: 7px; height: 7px; border-radius: 2px; background: rgba(20, 21, 25, .14); }
.tile__bar i:last-of-type { margin-right: 8px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: 112px; padding-bottom: clamp(36px, 4vw, 60px); }
.hero__inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 24px; align-items: center; min-height: min(740px, calc(100svh - 120px)); }
.hero__copy { padding-block: 32px; position: relative; z-index: 2; }
.display { font-family: var(--f-display); text-transform: uppercase; font-size: clamp(60px, 7.2vw, 108px); line-height: .86; letter-spacing: -.005em; font-weight: 850; max-width: 8ch; text-wrap: balance; }
.lede { margin-top: 30px; font-size: clamp(18px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 31em; text-wrap: pretty; }
.hero__notes { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; color: var(--graphite); }
.hero__notes li { display: flex; align-items: center; gap: 8px; }
.hero__notes li::before { content: ""; width: 6px; height: 6px; background: var(--signal); box-shadow: 0 0 0 1px var(--ink); }
/* the print is the hero: the stage bleeds to the viewport edge so the smudge can run off it */
.hero__art { position: relative; height: clamp(580px, 50vw, 740px); margin-right: calc(-1 * var(--gutter) - max(0px, (100vw - var(--wrap) - 2 * var(--gutter)) / 2)); }
.art-stage, .art-lens { position: absolute; inset: 0; width: 100%; height: 100%; }
.art-pins, .art-pops { position: absolute; inset: 0; pointer-events: none; }

/* where the glass locked on: a bracketed box, closing in like the reticle */
.mark-box {
  position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; --c: var(--signal);
  background:
    linear-gradient(var(--c) 0 0) 0 0 / 10px 3px, linear-gradient(var(--c) 0 0) 0 0 / 3px 10px,
    linear-gradient(var(--c) 0 0) 100% 0 / 10px 3px, linear-gradient(var(--c) 0 0) 100% 0 / 3px 10px,
    linear-gradient(var(--c) 0 0) 0 100% / 10px 3px, linear-gradient(var(--c) 0 0) 0 100% / 3px 10px,
    linear-gradient(var(--c) 0 0) 100% 100% / 10px 3px, linear-gradient(var(--c) 0 0) 100% 100% / 3px 10px;
  background-repeat: no-repeat; background-color: color-mix(in srgb, var(--signal) 16%, transparent);
  filter: drop-shadow(0 0 1px rgba(20, 21, 25, .95)) drop-shadow(0 0 .5px rgba(20, 21, 25, .95));
  opacity: 0; transform: scale(1.9); transition: opacity .2s var(--ease), transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mark-box.is-in { opacity: 1; transform: none; }

/* the account a ridge point resolves to: who, where, why, and how sure */
@property --p { syntax: "<integer>"; inherits: true; initial-value: 0; }
.acct {
  position: absolute; display: grid; grid-template-columns: 56px minmax(0, 1fr) 60px; align-items: center; column-gap: 14px;
  padding: 0 14px 0 14px; overflow: hidden;
  background: #FFFFFF; border: 1px solid rgba(20, 21, 25, .1); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 28px 50px -22px rgba(20, 21, 25, .5), 0 6px 16px -6px rgba(20, 21, 25, .2);
  opacity: 0; transform: scale(.4);
  transition: opacity .2s var(--ease), transform .65s cubic-bezier(.26, 1.5, .5, 1),
    left .55s var(--ease), top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease), padding .55s var(--ease), column-gap .55s var(--ease);
}
.acct.is-in { opacity: 1; transform: none; }
.acct__ava { position: relative; width: 56px; height: 56px; transition: width .55s var(--ease), height .55s var(--ease); }
.acct__pic { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 50%; background: #DADAD5; box-shadow: 0 0 0 1px rgba(20, 21, 25, .08); }
.acct__pic img { width: 100%; height: 100%; object-fit: cover; }
.acct__badge {
  position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px;
  background: var(--brand); box-shadow: 0 0 0 2.5px #FFFFFF; transition: transform .55s var(--ease);
}
.acct__badge svg { width: 13px; height: 13px; fill: var(--glyph, #fff); }
.acct__body { display: grid; gap: 5px; min-width: 0; transition: opacity .3s var(--ease); }
.acct__user { font-size: 17px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__url { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .01em; font-stretch: 87.5%; color: var(--graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* confidence: a ring that fills as the number counts up, in its tier's colour */
.acct__score { --p: 0; --tone: #0E9F6E; --tone-ink: #057A55; position: relative; display: grid; justify-items: center; gap: 3px; counter-reset: pct var(--p); transition: --p 1.1s cubic-bezier(.2, .7, .2, 1) .3s; }
.acct.is-in .acct__score { --p: var(--v); }
.acct__score--mid { --tone: #E8A400; --tone-ink: #A86A00; }
.acct__score--lo { --tone: #F26B1D; --tone-ink: #C2410C; }
.acct__ring {
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(var(--tone) calc(var(--p) * 1%), rgba(20, 21, 25, .08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px));
  transition: opacity .3s var(--ease), width .55s var(--ease), height .55s var(--ease);
}
.acct__score b { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: grid; place-items: center; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--tone-ink); font-variant-numeric: tabular-nums; transition: height .55s var(--ease), font-size .55s var(--ease); }
.acct__score b::before { content: counter(pct) "%"; }
.acct__score small { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase; font-stretch: 87.5%; color: var(--graphite); transition: opacity .3s var(--ease); }
/* folded: just the face, the platform and the number */
.acct.is-chip { grid-template-columns: 34px 0 auto; column-gap: 6px; padding: 0 12px 0 8px; border-radius: 999px; }
.acct.is-chip .acct__ava { width: 34px; height: 34px; }
.acct.is-chip .acct__badge { transform: scale(.72) translate(4px, 4px); }
.acct.is-chip .acct__body { opacity: 0; height: 0; overflow: hidden; }
.acct.is-chip .acct__score small { display: none; }
.acct.is-chip .acct__ring { opacity: 0; width: 0; height: 0; }
.acct.is-chip .acct__score b { position: static; height: auto; font-size: 14px; }
.art-pops.is-clearing .acct, .art-pins.is-clearing .mark-box { opacity: 0; transform: scale(.94); transition: opacity .45s var(--ease), transform .45s var(--ease); }
/* phones */
.hero__art.is-narrow .acct { grid-template-columns: 46px minmax(0, 1fr) 50px; column-gap: 11px; padding: 0 10px; border-radius: 14px; }
.hero__art.is-narrow .acct__ava { width: 46px; height: 46px; }
.hero__art.is-narrow .acct__user { font-size: 14.5px; }
.hero__art.is-narrow .acct__ring { width: 46px; height: 46px; }
.hero__art.is-narrow .acct__score b { height: 46px; font-size: 13px; }
.hero__art.is-narrow .acct.is-chip { grid-template-columns: 30px 0 auto; padding: 0 10px 0 7px; border-radius: 999px; }
.hero__art.is-narrow .acct.is-chip .acct__ava { width: 30px; height: 30px; }
.hero__art.is-narrow .acct.is-chip .acct__ring { width: 0; height: 0; }
.hero__art.is-narrow .acct.is-chip .acct__score b { height: auto; font-size: 13px; }

/* ==========================================================================
   Proof band: the numbers, straight under the hero, on a stroke of marker
   yellow with a ragged highlighter edge. The problem sheet is laid over its foot.
   ========================================================================== */
.proof { position: relative; z-index: 1; background: var(--signal); color: var(--ink); padding: 30px 0 72px; margin-top: 16px; }
.proof::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 16px; background: var(--signal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V9c18-3 34 2 54-1s38-5 58-2 40 4 62 0 44-3 66 3v7Z'/%3E%3C/svg%3E") left bottom / 240px 16px repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' preserveAspectRatio='none'%3E%3Cpath d='M0 16V9c18-3 34 2 54-1s38-5 58-2 40 4 62 0 44-3 66 3v7Z'/%3E%3C/svg%3E") left bottom / 240px 16px repeat-x;
}
.proof__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof__stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 4px 24px 0; border-left: 1.5px solid rgba(20, 21, 25, .2); }
.proof__stats > div:first-child { border-left: 0; padding-left: 0; }
.proof__stats dd { font-family: var(--f-display); font-size: clamp(48px, 5vw, 72px); line-height: .95; font-weight: 850; letter-spacing: -.005em; }
.proof__stats dt { font-size: 15.5px; font-weight: 600; line-height: 1.35; color: rgba(20, 21, 25, .78); max-width: 16em; }

/* ==========================================================================
   01 Problem: a sheet of paper laid over the yellow band, three pains on it
   ========================================================================== */
.problem { z-index: 2; margin-top: -32px; background: var(--paper); border-radius: 32px 32px 0 0; }
.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pains li {
  padding: 26px 26px 30px; background: var(--card); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 24px 48px -40px rgba(20, 21, 25, .45);
}
.pains__n { display: inline-block; padding: 2px 6px; background: var(--signal); font-weight: 600; }
.pains h3 { margin-top: 20px; font-size: 21px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.pains p { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }

/* ==========================================================================
   03 How it works: three step cards, alternating, each with its proof
   (Arcademy's steps, in the tile style). Frames stay blank until the product exists.
   ========================================================================== */
.steps { display: grid; gap: 22px; }
.step {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding: clamp(22px, 2.6vw, 34px); background: var(--card); border: 1px solid var(--rule); border-radius: 24px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 34px 64px -52px rgba(20, 21, 25, .5);
}
.step--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.step--flip .step__text { order: 2; }
.step__text { padding-block: 8px; }
.step__k { display: flex; align-items: center; gap: 10px; color: var(--graphite); }
.step__k span { display: grid; place-items: center; width: 26px; height: 26px; background: var(--signal); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-size: 12px; font-weight: 700; }
.step h3 { margin-top: 20px; font-size: clamp(28px, 2.7vw, 38px); line-height: 1.1; font-weight: 700; letter-spacing: -.028em; color: var(--graphite); }
.step h3 b { display: block; color: var(--ink); }
.step__text > p:not([class]) { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 30em; }
.step__proof { display: inline-grid; gap: 4px; margin-top: 24px; padding: 12px 20px 14px 16px; border-left: 4px solid var(--signal); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--signal) 22%, transparent); }
.step__proof b { font-family: var(--f-display); font-size: 40px; line-height: 1; font-weight: 850; }
.step__proof span { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.step__pic { align-self: stretch; margin: 0; padding: 26px; min-height: 0; border-radius: 16px; overflow: hidden; isolation: isolate; }
.step__pic::before { inset: 0; opacity: .65; -webkit-mask-image: none; mask-image: none; }
.step__pic .tile__frame { height: 100%; min-height: 260px; }
.steps__end { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: clamp(40px, 5vw, 64px); text-align: center; }
.steps__end p { font-size: clamp(20px, 2vw, 25px); font-weight: 700; letter-spacing: -.015em; }
.steps__end .mono { color: var(--graphite); }

/* coverage: the selectors you can start from */
.sh__intro .sh__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.sh__chips .mono { margin-right: 4px; color: var(--graphite); }
.sh__chips i { padding: 5px 12px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--ink); background: var(--card); border: 1.5px solid var(--ink); border-radius: 999px; }

/* ==========================================================================
   02 Principle (night)
   ========================================================================== */
.principle { overflow: hidden; }
.principle__inner { position: relative; z-index: 2; }
.principle__art { position: absolute; z-index: 1; top: 50%; right: max(-40px, calc((100vw - var(--wrap)) / 2 - 160px)); width: min(58vw, 780px); aspect-ratio: 760 / 900; transform: translateY(-46%); }
.principle__art canvas { width: 100%; height: 100%; }
.statement { margin-top: 36px; font-family: var(--f-display); text-transform: uppercase; font-size: clamp(72px, 11vw, 176px); line-height: .84; letter-spacing: -.005em; font-weight: 850; max-width: 9ch; text-wrap: balance; }
.principle__body { margin-top: clamp(40px, 5vw, 64px); max-width: 30em; font-size: 19px; line-height: 1.6; color: var(--on-night-2); }
.principle__body p + p { margin-top: 1em; }
.principle__body p:last-child { color: var(--on-night); }

/* ==========================================================================
   04 Ten-print card
   ========================================================================== */
.tenprint { background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow-paper); }
.tenprint__head { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 2px solid var(--ink); }
.tenprint__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tp { padding: 12px 14px 16px; border-right: 1px solid var(--ink); display: flex; flex-direction: column; }
.tp:nth-child(5n) { border-right: 0; }
.tp:nth-child(-n + 5) { border-bottom: 1px solid var(--ink); }
.tp__n { font-weight: 600; }
.tp__print { width: 100%; aspect-ratio: 1 / 1.08; margin: 10px 0 12px; }
.tp p { margin-top: auto; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }

/* ==========================================================================
   05 Use: case index
   ========================================================================== */
.index { border-top: 1px solid var(--ink); }
.index__head, .index__row { display: grid; grid-template-columns: 4fr 3fr 5fr; column-gap: 24px; }
.index__head { padding: 12px 0; color: var(--graphite); border-bottom: 1px solid var(--rule); }
.index__row { padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: baseline; transition: background-color .2s; }
.index__row h3 { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.2; letter-spacing: -.01em; font-weight: 700; }
.index__row .mono { color: var(--graphite); text-transform: none; font-size: 12px; }
.index__row p:last-child { color: var(--ink-2); }

/* ==========================================================================
   06 Conduct
   ========================================================================== */
.conduct { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.conduct__lead { grid-column: 1 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.conduct__lead .sh__label { width: 100%; }
.conduct__lead .sh__title, .conduct__lead .sh__intro { grid-column: auto; }
.rules { grid-column: 7 / -1; border-top: 1px solid var(--ink); align-self: end; }
.rules li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.rules span { justify-self: start; align-self: start; margin-top: 4px; padding: 2px 6px; background: var(--signal); color: var(--on-signal); font-weight: 600; }
.rules p { font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.rules strong { color: var(--ink); font-weight: 650; }

/* ==========================================================================
   07 FAQ
   ========================================================================== */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.faq .sh { grid-column: 1 / span 4; margin: 0; align-self: start; }
.faq__list { grid-column: 6 / -1; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 6px; text-underline-offset: -2px; text-decoration-skip-ink: none; }
.faq details p { padding: 0 0 26px; max-width: 36em; color: var(--ink-2); }

/* ==========================================================================
   CTA + footer (night)
   ========================================================================== */
.cta__inner { display: flex; flex-direction: column; align-items: flex-start; }
.statement--cta { margin-top: 0; max-width: 10ch; }
.cta__sub { margin-top: 28px; font-size: 20px; color: var(--on-night-2); }
.lookup--night { width: 100%; max-width: 620px; margin-top: 40px; margin-bottom: 28px; }
.lookup--night .lookup__row { background: var(--night-2); border-color: rgba(236, 236, 231, .22); box-shadow: none; }
.lookup--night input { color: var(--on-night); }
.lookup--night input::placeholder { color: var(--on-night-2); }
.lookup--night .lookup__row:focus-within { border-color: var(--signal-night); box-shadow: 0 0 0 4px rgba(255, 216, 77, .25); }

.footer { background: var(--night); color: var(--on-night); padding: 0 0 36px; }
.footer__top { border-top: 1px solid var(--rule-night); padding-top: 64px; }
.footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.footer__brand { grid-column: 1 / span 4; }
.footer__brand p { margin-top: 18px; color: var(--on-night-2); max-width: 22em; }
.footer__cols { grid-column: 6 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.footer__cols h3 { color: var(--on-night-2); margin-bottom: 14px; }
.footer__cols a { display: block; padding: 5px 0; font-size: 15.5px; opacity: .9; }
.footer__cols a:hover { color: var(--signal-night); opacity: 1; }
.footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 72px; padding-top: 20px; border-top: 1px solid var(--rule-night); color: var(--on-night-2); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__links { gap: 22px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--wide, .tile--full { grid-column: 1 / -1; }
  .sh__title { grid-column: 1 / -1; }
  .sh__intro { grid-column: 1 / span 9; }
}
@media (max-width: 900px) {
  .nav__bar { height: 56px; padding-left: 16px; grid-template-columns: 1fr auto; }
  .nav__links, .nav__login { display: none; }
  .nav__cta { height: 42px; padding: 0 16px; font-size: 14.5px; }
  .nav__menu { display: block; }
  .hero { padding-top: 104px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__art { height: 560px; margin-inline: calc(-1 * var(--gutter)); }
  .proof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .proof__stats > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .pains { grid-template-columns: 1fr; }
  .step, .step--flip { grid-template-columns: 1fr; }
  .step--flip .step__text { order: 0; }
  .step__pic .tile__frame { min-height: 0; height: auto; aspect-ratio: 1 / .62; }
  .tenprint__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tenprint__head span:nth-child(2) { display: none; }
  .tp { border-bottom: 1px solid var(--ink); }
  .tp:nth-child(5n) { border-right: 1px solid var(--ink); }
  .tp:nth-child(2n) { border-right: 0; }
  .tp:nth-last-child(-n + 2) { border-bottom: 0; }
  .index__head { display: none; }
  .index__row { grid-template-columns: 1fr; row-gap: 8px; }
  .conduct__lead, .rules, .faq .sh, .faq__list { grid-column: 1 / -1; }
  .rules, .faq__list { margin-top: 48px; }
  .footer__brand, .footer__cols { grid-column: 1 / -1; }
  .footer__cols { margin-top: 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .principle__art { width: 120vw; right: -62vw; opacity: .28; }
}
@media (max-width: 640px) {
  /* phones: near edge to edge, a big title with a square arrow, the product inset in its frame */
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-inline: calc(-1 * var(--gutter) + 8px); }
  .tile, .tile--wide, .tile--full { grid-column: auto; padding: 22px 0 0; border-radius: 22px; }
  .tile__head { margin: 0 0 18px; padding: 0 18px 0 22px; gap: 14px; }
  .tile__head h3 { font-size: 22px; line-height: 1.28; letter-spacing: -.02em; max-width: none; }
  .tile__go { width: 44px; height: 44px; }
  .tile__pic, .tile--full .tile__pic { min-height: 0; margin: 0; padding: 4px 14px 14px; }
  .tile__frame, .tile--full .tile__frame { height: auto; aspect-ratio: 1 / .7; border-radius: 16px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .sh__intro { grid-column: 1 / -1; font-size: 17px; }
  .lookup__types { display: grid; grid-template-columns: repeat(5, auto); }
  .lookup__types button { padding-inline: 10px; }
  .lookup__row .btn { padding: 0 18px; }
  .nav__cta { height: 40px; padding: 0 14px; gap: 6px; }
  .nav__cta-more { display: none; }
  .brand { gap: 8px; }
  .brand__mark { width: 49px; height: 30px; }
  .brand__word { font-size: 22px; }
  .hero__art { height: 500px; }
  .problem { border-radius: 24px 24px 0 0; margin-top: -26px; }
  .proof__stats > div { padding-inline: 14px 0; }
  .step { padding: 18px; border-radius: 20px; }
  .step__pic { padding: 14px; }
  .step__pic .tile__frame { aspect-ratio: 1 / .72; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (min-width: 901px) { .nav__sheet { display: none !important; } }