/* ============================================================================
   resolvix.pro — public homepage
   ----------------------------------------------------------------------------
   The palette is not invented here. Every colour below is lifted from the
   product's own theme.js, so a screenshot dropped onto this page sits in a
   surface it already matches: the navy is the app's sidebar, the teal is its
   accent on dark, and the amber is the exact colour the app uses to say "this
   has not been reviewed in a while". That last one is the page's whole
   argument, so it had better be the same amber.

   Organised in page order. Shared primitives (type, buttons, ticks, tags) live
   at the top because more than one section uses them.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts ----
   Self-hosted, latin subset only, weights 400/500/600 of each family — 700 is
   not used anywhere in this file. Previously these came from Google Fonts,
   which cost two extra DNS/TLS handshakes and a render-blocking stylesheet
   before the first glyph could even be requested. Same files, same faces, one
   origin. It also means the page survives the product app's own CSP, which
   sets font-src 'self' data:.
   ------------------------------------------------------------------------- */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("assets/fonts/geist-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/geist-mono-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- theme.js, light ---- */
  --bg:            #F4F6FA;
  --surface:       #FFFFFF;
  --ink:           #16181D;
  --ink-2:         #434A57;
  --ink-3:         #6B7688;
  --ink-4:         #8A94A6;
  --line:          #E3E7EE;
  --line-soft:     #EDF0F5;

  /* ---- the navy rail, and what lives on it ---- */
  --navy:          #0E1E2E;
  --navy-deep:     #0A1420;
  --on-navy:       #EAF1F8;
  --on-navy-dim:   #93A6B8;
  --teal:          #5BBCC8;
  --accent:        #0F505A;

  /* ---- status, straight from the product ---- */
  --published:     #2E8055;
  --amber:         #9A6B10;
  --amber-lit:     #D9A441;

  --radius-card:   14px;
  --radius-ctl:    8px;
  --radius-pill:   999px;

  --shadow-lift:   0 1px 2px rgba(16,24,40,.04), 0 12px 32px -8px rgba(16,24,40,.10);
  --shadow-deep:   0 40px 90px -30px rgba(6,14,24,.55), 0 8px 24px -8px rgba(6,14,24,.35);

  --page:          1200px;
  --gutter:        clamp(20px, 5vw, 56px);
  --navh:          66px;

  --font: "Geist", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--navh) + 18px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }

/* Keyboard users land on a page whose first stop is a fixed header; give them
   a way past it that costs a mouse user nothing. */
.skip {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -160%);
  z-index: 90; padding: 10px 18px; border-radius: var(--radius-ctl);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lift);
  font: 600 14px/1 var(--font); text-decoration: none;
  transition: transform .25s var(--ease-out);
}
.skip:focus-visible { transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- type ---- */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
h1 { font-size: clamp(2.35rem, 5.2vw, 4.05rem); letter-spacing: -0.038em; }
h2 { font-size: clamp(1.8rem, 3.3vw, 2.5rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.06rem, 1.5vw, 1.26rem); letter-spacing: -0.018em; line-height: 1.25; }
p  { margin: 0; }

.eyebrow {
  display: inline-block;
  font: 600 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: 20px;
}
.eyebrow--onNavy { color: var(--teal); }

.lede { font-size: clamp(1.02rem, 1.4vw, 1.22rem); line-height: 1.62; color: var(--ink-2); max-width: 62ch; }
.lede--onNavy { color: var(--on-navy-dim); }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- layout ---- */
.wrap { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.section { padding: clamp(84px, 11vh, 138px) 0; position: relative; }
.section--navy { background: var(--navy); color: var(--on-navy); }
.section--paper { background: var(--surface); border-block: 1px solid var(--line); }
.section--tight { padding-block: clamp(60px, 8vh, 94px); }
.section__head { max-width: 60ch; margin-bottom: clamp(38px, 5.5vh, 64px); }
.section__head--wide { max-width: 68ch; }
.section__head h2 + .lede { margin-top: 20px; }

/* ---------------------------------------------------------- primitives ---- */
/* A tick and a "no" mark, used by the hero, the is-not list and the API list.
   Drawn in CSS rather than as six copies of an inline SVG. */
.tick {
  flex: none; width: 17px; height: 17px; border-radius: 50%; margin-top: 4px;
  background: color-mix(in srgb, var(--published) 16%, transparent);
  position: relative;
}
.tick::after {
  content: ""; position: absolute; left: 5px; top: 4.5px;
  width: 4px; height: 7px; border: solid var(--published);
  border-width: 0 1.7px 1.7px 0; transform: rotate(42deg);
}
.tick--teal { background: rgba(91,188,200,.16); }
.tick--teal::after { border-color: var(--teal); }

.no {
  flex: none; width: 17px; height: 17px; border-radius: 50%; margin-top: 4px;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  position: relative;
}
.no::after {
  content: ""; position: absolute; left: 4.5px; top: 8px;
  width: 8px; height: 1.7px; background: var(--amber); border-radius: 2px;
}

.tag {
  font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 5px;
  background: rgba(217,164,65,.18); color: var(--amber-lit); flex: none;
  display: inline-block;
}
.tag--blue { background: rgba(91,188,200,.16); color: var(--teal); }

/* ------------------------------------------------------------- buttons ---- */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; gap: .55em;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--radius-ctl);
  background: var(--btn-bg); color: var(--btn-fg);
  font: 600 14.5px/1 var(--font);
  text-decoration: none; cursor: pointer;
  position: relative; overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background-color .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -10px rgba(15,80,90,.6); }
.btn:active { transform: translateY(0); }
.btn .arw { transition: transform .35s var(--ease-out); }
.btn:hover .arw { transform: translateX(4px); }

.btn--onNavy { --btn-bg: var(--teal); --btn-fg: #05202b; }
.btn--onNavy:hover { box-shadow: 0 12px 30px -10px rgba(91,188,200,.55); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: #fff; box-shadow: var(--shadow-lift); }
.btn--ghostOnNavy { --btn-bg: transparent; --btn-fg: var(--on-navy); border-color: rgba(255,255,255,.22); }
.btn--ghostOnNavy:hover { background: rgba(255,255,255,.06); box-shadow: none; }

/* A light sweep that crosses the button on hover. Cheap, and it makes the
   primary action feel like a surface rather than a rectangle. */
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease-out);
}
.btn:hover::after { transform: translateX(120%); }

/* ------------------------------------------------------- reveal on scroll -- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ============================================================== NAV ======= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 15px var(--gutter);
  color: var(--on-navy);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease-soft), border-color .4s, padding .4s var(--ease-soft), color .4s;
}
.nav.stuck {
  /* A backdrop blur on a fixed bar is re-computed every scroll frame over
     whatever is passing underneath it. The radius is what costs, so it is kept
     modest and the background is opaque enough that the blur is a refinement
     rather than the thing doing the work. */
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom-color: var(--line);
  color: var(--ink);
  padding-block: 10px;
}
/* How far down the page you are. One pixel of chrome that answers a question
   every long page raises and none of them usually answer. */
.nav__progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: left;
  background: linear-gradient(90deg, var(--teal), var(--amber-lit));
  opacity: 0; transition: opacity .4s;
}
.nav.stuck .nav__progress { opacity: 1; }

.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.nav__mark {
  width: 27px; height: 24px; background: currentColor;
  -webkit-mask: url("assets/brand/resolvix-mark.svg") center/contain no-repeat;
          mask: url("assets/brand/resolvix-mark.svg") center/contain no-repeat;
}
.nav__word { font: 600 17px/1 var(--font); letter-spacing: -.02em; }

.nav__links { display: flex; align-items: center; gap: 24px; }
.nav__links a {
  position: relative; font: 500 14px/1 var(--font); text-decoration: none;
  opacity: .74; transition: opacity .2s; padding-block: 4px;
}
.nav__links a:hover { opacity: 1; }
/* The current section, marked. Set by the scroll loop, not by :target — :target
   only fires when someone clicks a link, which is the one case they already
   know where they are. */
.nav__links a.is-current { opacity: 1; }
.nav__links a.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1.5px;
  border-radius: 2px; background: currentColor; opacity: .5;
}

.nav__right { display: flex; align-items: center; gap: 10px; }
.nav__cta { padding: 9px 16px; font-size: 13.5px; }

.nav__burger {
  display: none; width: 40px; height: 36px; padding: 0;
  border: 1px solid currentColor; border-radius: var(--radius-ctl);
  background: transparent; color: inherit; cursor: pointer;
  position: relative; opacity: .8;
}
.nav__burger span {
  position: absolute; left: 11px; right: 11px; height: 1.6px; border-radius: 2px;
  background: currentColor;
  transition: transform .35s var(--ease-out), opacity .2s;
}
.nav__burger span:nth-child(1) { top: 14px; }
.nav__burger span:nth-child(2) { top: 20px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav__burger { display: block; }
  .nav__cta { display: none; }
  /* The menu is a panel, not four links crushed into a row. It inherits the
     header's own colour so it works over navy and over the stuck white bar. */
  .nav__links {
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px; border-radius: 12px;
    background: var(--navy-deep); color: var(--on-navy);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 30px 60px -20px rgba(6,14,24,.6);
    opacity: 0; transform: translateY(-8px) scale(.99); pointer-events: none;
    transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
  }
  .nav__links a { padding: 13px 14px; border-radius: 8px; opacity: .9; font-size: 15px; }
  .nav__links a:hover { background: rgba(255,255,255,.07); }
  .nav__links a.is-current::after { display: none; }
  .nav__links a.is-current { background: rgba(91,188,200,.14); color: var(--teal); }
  .nav.open .nav__links { opacity: 1; transform: none; pointer-events: auto; }
}

/* ============================================================== HERO ====== */
.hero {
  position: relative;
  background: var(--navy);
  color: var(--on-navy);
  padding: clamp(118px, 15vh, 168px) 0 0;
  overflow: hidden;
  isolation: isolate;
}

.gapdemo__note { font-size:11px; color:var(--on-navy-dim); margin-bottom:17px; }

/* Depth in three layers that never move together: a fixed radial wash, a
   pointer-tracked glow, and a ruled grid. The parallax between them is what
   stops a flat navy rectangle from reading as a flat navy rectangle. */
.hero__wash {
  position: absolute; inset: -20% -10% auto; height: 130%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(91,188,200,.16), transparent 62%),
    radial-gradient(50% 45% at 88% 22%, rgba(46,107,214,.13), transparent 60%),
    radial-gradient(70% 60% at 50% 108%, rgba(154,107,16,.10), transparent 60%);
}
.hero__glow {
  position: absolute; width: 620px; height: 620px; left: 0; top: 0; margin: -310px 0 0 -310px;
  background: radial-gradient(circle, rgba(91,188,200,.13), transparent 62%);
  z-index: -2; pointer-events: none;
  transform: translate3d(var(--gx, 50vw), var(--gy, 40vh), 0);
}
.hero__rule {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 78%);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(34px, 5vw, 66px);
  align-items: center;
}
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 20px; }
.hero h1 .drift {
  position: relative;
  background: linear-gradient(96deg, var(--amber-lit), #E7C98A 55%, var(--amber-lit));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* An underline that draws itself once, then stays put. */
.hero h1 .drift::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: 3px;
  background: linear-gradient(90deg, var(--amber-lit), rgba(217,164,65,.14));
  border-radius: 3px; transform: scaleX(0); transform-origin: left;
  animation: draw 1.5s var(--ease-out) .9s forwards;
}
@keyframes draw { to { transform: scaleX(1); } }

/* The definition sentence. Deliberately the highest-contrast paragraph in the
   hero: it is the one line that has to survive a five-second visit. */
.hero__def { max-width: 54ch; }
.hero__def b { color: var(--on-navy); font-weight: 600; }

.hero__points {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 52ch;
}
.hero__points li {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14.6px; line-height: 1.55; color: var(--on-navy-dim);
}
.hero__points .tick { background: rgba(91,188,200,.15); margin-top: 3px; }
.hero__points .tick::after { border-color: var(--teal); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__note { margin-top: 22px; font: 400 13px/1.6 var(--font); color: var(--on-navy-dim); max-width: 46ch; }
.hero__note b { color: var(--teal); font-weight: 600; }

/* ---------------------------------------------------- hero screenshot ----- */
.shotwrap { margin-top: clamp(44px, 6vh, 74px); padding-bottom: clamp(56px, 8vh, 96px); }
.shot {
  border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: var(--navy-deep);
  box-shadow: var(--shadow-deep);
}
.shot__bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08);
}
.shot__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.16); }
.shot__url {
  margin-left: 10px; padding: 3px 12px; border-radius: var(--radius-pill);
  background: rgba(0,0,0,.28); font: 500 11.5px/1.5 var(--mono); color: var(--on-navy-dim);
}
.shot img { width: 100%; height: auto; }
/* The hero shot rides a slight 3D tilt that eases out as it scrolls into
   place: it arrives as an object and settles into a page. */
/* will-change is applied ONLY while the tilt is actually being scrubbed. Left
   on permanently it pins a full-size texture of the largest image on the page
   into GPU memory for the whole session, for an animation that is over in one
   viewport of scrolling. */
.shot--tilt { transform: perspective(2200px) rotateX(var(--rx, 7deg)) scale(var(--sc, .97)); }
.shot--tilt.tilting { will-change: transform; }
.shotcap { margin-top: 16px; text-align: center; font: 400 12.6px/1.5 var(--font); color: var(--on-navy-dim); }

/* ========================================================= WHAT IT IS ===== */
.trio {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 18px;
}
.tri {
  position: relative; padding: 30px 26px 26px;
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--bg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.tri:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #D5DCE7; }
/* The middle card is the one the whole product turns on, so it is the one
   wearing the accent. */
.tri--lit { background: var(--surface); border-color: color-mix(in srgb, var(--amber) 30%, var(--line)); }
.tri--lit::before {
  content: ""; position: absolute; inset: -1px -1px auto; height: 3px;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: linear-gradient(90deg, var(--amber), var(--amber-lit));
}
.tri__n { position: absolute; top: 22px; right: 24px; font: 600 11px/1 var(--mono); color: var(--ink-4); letter-spacing: .1em; }
.tri__ico { width: 26px; height: 26px; color: var(--accent); margin-bottom: 18px; }
.tri--lit .tri__ico { color: var(--amber); }
.tri h3 { margin-bottom: 9px; }
.tri > p { font-size: 14.2px; line-height: 1.62; color: var(--ink-3); }
.tri__list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); }
.tri__list li {
  position: relative; padding-left: 16px; font-size: 13.2px; line-height: 1.5;
  color: var(--ink-2); margin-bottom: 8px;
}
.tri__list li:last-child { margin-bottom: 0; }
.tri__list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4);
}
.tri--lit .tri__list li::before { background: var(--amber); }

/* ---- what it is not ------------------------------------------------------ */
.isnot {
  margin-top: 20px; padding: 28px clamp(22px, 3vw, 32px);
  border: 1px dashed var(--line); border-radius: var(--radius-card);
  background: var(--bg);
}
.isnot__h { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 20px; }
.isnot__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px 30px;
}
.isnot__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.8px; line-height: 1.58; color: var(--ink-3); }
.isnot__list b { display: block; color: var(--ink); font-weight: 600; }

/* ---- who it is for ------------------------------------------------------
   A stranger's first question is not "what is it" but "is it me?", and the
   page had no answer anywhere. Three conditions, stated as conditions rather
   than as flattery, so a reader who does not meet them can leave early — which
   is a service to both parties. */
.forwho {
  margin-top: 20px; padding: 30px clamp(22px, 3vw, 34px);
  border-radius: var(--radius-card); border: 1px solid var(--line);
  background: var(--bg);
}
.forwho__head { max-width: 52ch; margin-bottom: 24px; }
.forwho__h { font: 600 clamp(1.15rem, 1.9vw, 1.45rem)/1.28 var(--font); letter-spacing: -.022em; }

.forwho__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.forwho__list li {
  background: var(--surface); padding: 20px 20px 22px;
  font-size: 13.8px; line-height: 1.58; color: var(--ink-3);
}
.forwho__n { display: block; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--accent); margin-bottom: 12px; }
.forwho__list b { display: block; color: var(--ink); font-weight: 600; font-size: 14.6px; line-height: 1.4; margin-bottom: 4px; }

.forwho__f {
  margin-top: 20px; font-size: 13.6px; line-height: 1.62; color: var(--ink-3);
  max-width: 74ch;
}
.forwho__f b { color: var(--ink); font-weight: 600; }

/* ======================================================= DRIFT / STORY ==== */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 940px) { .story { grid-template-columns: 1fr; } }
.story__sticky { position: sticky; top: clamp(92px, 15vh, 148px); }

.days { display: flex; flex-direction: column; padding-bottom: clamp(40px, 9vh, 120px); }
.day {
  display: grid; grid-template-columns: 88px 1fr; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--line);
  transition: opacity .5s var(--ease-soft);
}
.day:first-child { border-top: 0; padding-top: 0; }
.day__n { font: 600 13px/1.3 var(--mono); color: var(--ink-4); padding-top: 3px; letter-spacing: .02em; transition: color .5s var(--ease-soft); }
.day__h { font: 600 17px/1.35 var(--font); letter-spacing: -.015em; margin-bottom: 7px; }
.day__p { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.day.is-on .day__n { color: var(--amber); }

/* The card that ages beside the story. */
.aging {
  border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); box-shadow: var(--shadow-lift);
  padding: 24px; position: relative; overflow: hidden;
}
.aging__strip { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--published); transition: background-color .8s var(--ease-soft); }
.aging__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.aging__kb { font: 500 11.5px/1 var(--mono); color: var(--ink-4); }
.pill {
  display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-pill);
  font: 600 11px/1.35 var(--font); background: #DDF2E6; color: #14663F;
  transition: background-color .8s var(--ease-soft), color .8s var(--ease-soft);
}
.pill--warn { background: #FBF0D8; color: #7A5206; }
.aging__title { font: 600 18px/1.35 var(--font); letter-spacing: -.018em; margin-bottom: 6px; }
.aging__meta { font-size: 13px; color: var(--ink-3); }
.aging__bar { position: relative; height: 4px; border-radius: 4px; background: var(--line-soft); margin: 20px 0 4px; }
/* The review threshold, drawn where it actually falls: 180 of 234 days. */
.aging__due { position: absolute; top: -4px; bottom: -4px; left: 76.9%; width: 1.5px; background: var(--amber); opacity: .55; }
.aging__scale { position: relative; height: 14px; }
.aging__scale span { position: absolute; top: 0; font: 500 10.5px/1 var(--mono); color: var(--ink-4); }
.aging__scale span:nth-child(1) { left: 0; }
.aging__scale span:nth-child(2) { left: 76.9%; transform: translateX(-50%); color: var(--amber); }
.aging__scale span:nth-child(3) { right: 0; }
.aging__fill { height: 100%; width: 0%; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, var(--published), var(--amber-lit)); transition: width .35s linear; display: block; }
.aging__flags { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
.flagline {
  display: flex; align-items: flex-start; gap: 9px; font-size: 13.2px; color: var(--ink-3);
  opacity: .3; transition: opacity .6s var(--ease-soft), color .6s;
}
.flagline.lit { opacity: 1; color: var(--ink-2); }
.flagline i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-4); margin-top: 7px; flex: none; transition: background-color .6s; }
.flagline.lit i { background: var(--amber); }
.aging__foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 12.4px; line-height: 1.5; color: var(--ink-4);
}

/* ========================================================= LIFECYCLE ====== */
/* The connector is built from two flex segments either side of each dot, rather
   than one line drawn across the whole row at fixed percentages. That was the
   previous approach and it was wrong at every width but one: the dots sat below
   a line that stopped short of them. Segments that grow from the dot outwards
   cannot miss, because the dot is what they are measured from. */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
}
.step { padding-inline: 10px; }
.step:first-child { padding-left: 0; }
.step:last-child { padding-right: 0; }

.step__rail { display: flex; align-items: center; margin-bottom: 18px; }
.step__seg {
  flex: 1; height: 2px; background: var(--line); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out) calc(var(--i) * 130ms);
}
/* No LEADING segment. The dot sits at the start of its column, flush with the
   "01", the pill and the paragraph beneath it, and the line runs from it to the
   next dot. Centring the dot over the column was geometrically correct and read
   as scattered, because everything under it is left-aligned and the eye follows
   the text edge, not the column. */
.step__seg:first-child { display: none; }
.step:last-child .step__seg:last-child { visibility: hidden; }
.life.in .step__seg { transform: scaleX(1); }

.step__dot {
  width: 13px; height: 13px; border-radius: 50%; flex: none; margin-right: 6px;
  background: var(--sc);
  transform: scale(0);
  transition: transform .5s var(--ease-out) calc(var(--i) * 130ms + 90ms), box-shadow .4s;
}
.life.in .step__dot { transform: scale(1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--sc) 15%, transparent); }

.step__n { display: block; font: 600 11px/1 var(--mono); color: var(--ink-4); letter-spacing: .1em; margin-bottom: 10px; }
.step__pill {
  display: inline-block; padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--pb); color: var(--pt);
  font: 600 12px/1.35 var(--font); margin-bottom: 10px;
}
.step__p { font-size: 13.4px; line-height: 1.6; color: var(--ink-3); }
.step__p b { color: var(--ink-2); font-weight: 600; }

/* The two loops. A straight line of five states says an article is a conveyor
   belt; these say it is a cycle, which is the entire product. */
.loops {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px; margin-top: clamp(40px, 6vh, 60px);
}
.loop {
  display: flex; gap: 18px; align-items: flex-start;
  padding: 24px; border-radius: var(--radius-card);
  border: 1px solid var(--line); background: var(--bg);
}
.loop__arc { flex: none; width: 56px; color: var(--published); margin-top: 2px; }
.loop--back .loop__arc { color: var(--amber); }
.loop__h { font: 600 15px/1.35 var(--font); letter-spacing: -.012em; margin-bottom: 7px; }
.loop__p { font-size: 13.6px; line-height: 1.62; color: var(--ink-3); }

@media (max-width: 860px) {
  /* Vertical, and the rail turns with it — the segments still grow from the
     dot, so nothing here needs different numbers, only a different axis. */
  .steps { grid-template-columns: 1fr; gap: 0; }
  .step {
    display: grid; grid-template-columns: 13px 1fr; column-gap: 18px; padding: 0 0 26px;
  }
  .step:last-child { padding-bottom: 0; }
  .step__rail { flex-direction: column; align-items: center; margin: 0; grid-row: 1 / span 3; height: 100%; }
  .step__seg { width: 2px; height: auto; flex: 1; transform: scaleY(0); transform-origin: top; }
  .life.in .step__seg { transform: scaleY(1); }
  .step__dot { margin: 3px 0 6px; }
  .step__n { margin-bottom: 8px; }
  /* A grid item stretches by default, which turned each pill into a full-width
     bar. A status pill has to hug its label — that is what makes it read as the
     same object the app puts on an article. */
  .step__pill { justify-self: start; }
  .step__p { grid-column: 2; }
}

/* ---- what a week looks like --------------------------------------------- */
.week {
  margin-top: clamp(40px, 6vh, 60px); padding: 28px clamp(22px, 3vw, 32px);
  border-radius: var(--radius-card); border: 1px solid var(--line);
  background: var(--bg);
}
.week__h { font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 22px; }
.week__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.week__list li {
  background: var(--surface); padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 9px;
  font-size: 13.6px; line-height: 1.55; color: var(--ink-2);
}
.week__k {
  align-self: flex-start; padding: 3px 8px; border-radius: 5px;
  background: var(--line-soft); color: var(--ink-3);
  font: 600 10.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase;
}
.week__f { margin-top: 16px; font-size: 13.2px; color: var(--ink-3); }

/* ==================================================== SHOWCASE (sticky) === */
.showcase { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 1000px) {
  /* One column, and the screenshot goes ABOVE the list and stays pinned there.
     Stacked the other way round, tapping a chapter changed a picture that was
     already off the bottom of the screen — a control with no visible effect. */
  .showcase { grid-template-columns: 1fr; gap: 22px; }
  .stage { order: -1; position: sticky; top: calc(var(--navh) + 6px); z-index: 1; }
}

.chapters { display: flex; flex-direction: column; gap: 4px; }
.chapter {
  border: 0; background: none; text-align: left; cursor: pointer;
  padding: 19px 20px 19px 22px; border-radius: 12px; position: relative;
  color: inherit; font-family: inherit; display: block; width: 100%;
  transition: background-color .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
.chapter::before {
  content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 2px;
  border-radius: 2px; background: var(--line);
  transform: scaleY(.45); transform-origin: center;
  transition: background-color .45s, transform .45s var(--ease-out);
}
.chapter.on { background: var(--surface); box-shadow: var(--shadow-lift); }
.chapter.on::before { background: var(--accent); transform: scaleY(1); }
.chapter__n { display: block; font: 600 10.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink-4); margin-bottom: 9px; transition: color .3s; }
.chapter.on .chapter__n { color: var(--accent); }
.chapter__h { display: block; font: 600 16.5px/1.3 var(--font); letter-spacing: -.015em; margin-bottom: 5px; }
.chapter__p { display: block; font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.chapter.on .chapter__p { color: var(--ink-2); }

.stage { position: sticky; top: clamp(96px, 15vh, 150px); }
.stage__frame {
  position: relative; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: 0 2px 4px rgba(16,24,40,.04), 0 30px 70px -24px rgba(16,24,40,.22);
  aspect-ratio: 16 / 10;
}
.stage__frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top left;
  opacity: 0; transform: scale(1.014);
  transition: opacity .7s var(--ease-soft), transform 1.1s var(--ease-out);
}
.stage__frame img.on { opacity: 1; transform: none; }

@media (max-width: 700px) {
  /* A 1440-wide application shot scaled into a 350px column is a grey smudge
     that proves nothing. Crop into the top-left instead — the rail, the queue
     and the article title stay readable, and it is still the untouched
     screenshot, just not all of it at once. */
  .stage__frame { aspect-ratio: 4 / 3; }
  /* max-width:none, or the global img reset caps this back to 100% and the
     crop silently does nothing. */
  .stage__frame img { width: 165%; max-width: none; height: auto; }
}

/* ============================================================ GAPS ======== */
.apigrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (max-width: 940px) { .apigrid { grid-template-columns: 1fr; } }

/* The two kinds of gap, side by side. They look identical from outside the
   product and cost completely different amounts to fix, which is the point. */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; margin-top: 26px; }
.split__side {
  padding: 18px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.035);
}
.split__side p { margin-top: 11px; font-size: 13.4px; line-height: 1.55; color: var(--on-navy-dim); }
.split__side em { font-style: italic; color: var(--on-navy); }

.checks { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.2px; line-height: 1.55; color: var(--on-navy-dim); max-width: 52ch; }
.checks b { color: var(--on-navy); font-weight: 600; }

/* The other half of the gaps argument: what you do about one. A section that
   only diagnoses is a section that ends on a shrug. */
.actgap {
  margin-top: 26px; padding: 20px 22px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(91,188,200,.22);
  background: linear-gradient(180deg, rgba(91,188,200,.09), rgba(91,188,200,.03));
}
.actgap__h { font: 600 15px/1.35 var(--font); letter-spacing: -.014em; color: var(--on-navy); margin-bottom: 8px; }
.actgap__p { font-size: 13.8px; line-height: 1.62; color: var(--on-navy-dim); max-width: 56ch; }
.actgap__p b { color: var(--on-navy); font-weight: 600; }

.gapdemo {
  border-radius: var(--radius-card); border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.035); padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-deep);
}
.gapbar {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-radius: var(--radius-ctl); background: rgba(10,20,32,.62);
  border: 1px solid rgba(255,255,255,.10);
  font: 500 15px/1.3 var(--font); color: var(--on-navy);
}
.gapbar svg { flex: none; color: var(--on-navy-dim); }
.caret { display: inline-block; width: 1.5px; height: 1.05em; background: var(--teal); vertical-align: -.16em; animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.gapresult {
  margin-top: 12px; padding: 15px 18px; border-radius: var(--radius-ctl);
  border: 1px dashed rgba(217,164,65,.4); background: rgba(154,107,16,.12);
  display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--on-navy);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.gapresult.on { opacity: 1; transform: none; }
/* The offer the product actually makes on an empty search. Decorative here —
   the demo is a picture of a screen, not the screen — hence aria-hidden. */
.gapact {
  margin-left: auto; flex: none; white-space: nowrap;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid rgba(91,188,200,.4); background: rgba(91,188,200,.14);
  color: var(--teal); font: 600 11px/1.3 var(--font);
}
@media (max-width: 460px) { .gapact { display: none; } }
.gaplist { margin-top: 22px; }
.gaprow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 2px; border-top: 1px solid rgba(255,255,255,.08); font-size: 14px;
}
.gaprow em { font-style: normal; font-family: var(--mono); font-size: 13px; color: var(--on-navy); }
.gaprow span { color: var(--on-navy-dim); font-size: 12.6px; white-space: nowrap; }

/* ===================================================== FEATURE GRID ======= */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.card {
  padding: 26px; border-radius: var(--radius-card);
  border: 1px solid var(--line); background: var(--bg);
  position: relative; overflow: hidden;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: #D5DCE7; }
/* A pointer-tracked highlight, so the grid responds as one surface. */
.card::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(15,80,90,.055), transparent 60%);
  transition: opacity .4s;
}
.card:hover::before { opacity: 1; }
.card__ico { width: 28px; height: 28px; margin-bottom: 16px; color: var(--accent); }
.card h3 { margin-bottom: 8px; position: relative; }
.card p { font-size: 14.3px; line-height: 1.62; color: var(--ink-3); position: relative; }

/* ========================================================== NUMBERS ======= */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 212px), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-card); overflow: hidden;
}
.stat { background: var(--surface); padding: 30px 26px; }
.stat__n { font: 600 clamp(1.9rem, 3.3vw, 2.6rem)/1 var(--font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stat__l { font-size: 13.4px; line-height: 1.5; color: var(--ink-3); margin-top: 10px; }

/* ============================================================== API ======= */
.code { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: var(--navy-deep); box-shadow: var(--shadow-deep); }
.code__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); }
.code__t { font: 500 11.5px/1 var(--mono); color: var(--on-navy-dim); }
.code pre { margin: 0; padding: 20px 22px; overflow-x: auto; font: 400 12.7px/1.75 var(--mono); color: #C9D6E4; }
.code .k { color: var(--teal); }
.code .s { color: #A8D4A0; }
.code .c { color: #5D7085; font-style: italic; }
.code .n { color: #E0B978; }

/* ============================================================== FAQ ======= */
.faqgrid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 940px) { .faqgrid { grid-template-columns: 1fr; } }
.faqgrid__head { margin-bottom: 0; position: sticky; top: clamp(96px, 15vh, 150px); }
@media (max-width: 940px) { .faqgrid__head { position: static; margin-bottom: 34px; } }

.faq { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer; padding: 20px 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  font: 600 16px/1.45 var(--font); letter-spacing: -.012em; color: var(--ink);
  transition: color .25s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
/* A plus that becomes a minus. Two bars, one of which rotates — cheaper and
   crisper at small sizes than swapping an icon. */
.qa summary i {
  flex: none; position: relative; width: 18px; height: 18px; margin-top: 3px;
}
.qa summary i::before, .qa summary i::after {
  content: ""; position: absolute; left: 3px; top: 8px; width: 12px; height: 1.7px;
  border-radius: 2px; background: var(--ink-3);
  transition: transform .35s var(--ease-out), background-color .25s;
}
.qa summary i::after { transform: rotate(90deg); }
.qa[open] summary { color: var(--accent); }
.qa[open] summary i::before, .qa[open] summary i::after { background: var(--accent); }
.qa[open] summary i::after { transform: rotate(0deg); }

.qa__body { padding: 0 40px 22px 0; animation: qaIn .4s var(--ease-out); }
.qa__body p { font-size: 14.4px; line-height: 1.66; color: var(--ink-2); }
.qa__body p + p { margin-top: 12px; }
.qa__body ul { margin: 12px 0 0; padding: 0; list-style: none; }
.qa__body li {
  position: relative; padding-left: 17px; margin-bottom: 8px;
  font-size: 14.2px; line-height: 1.6; color: var(--ink-2);
}
.qa__body li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--amber);
}
@keyframes qaIn { from { opacity: 0; transform: translateY(-4px); } }

/* =========================================================== CLOSER ======= */
.closer { text-align: center; }
.closer h2 { max-width: 20ch; margin-inline: auto; }
.closer .lede { margin: 22px auto 0; }
.closer__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.closer__note { margin-top: 20px; font-size: 12.8px; color: var(--ink-4); }

/* ============================================================ FOOTER ====== */
.foot { background: var(--navy-deep); color: var(--on-navy-dim); padding: 56px 0 42px; }
.foot__grid { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.foot__brand { display: flex; align-items: center; gap: 10px; color: var(--on-navy); }
.foot__mark {
  width: 25px; height: 22px; background: currentColor;
  -webkit-mask: url("assets/brand/resolvix-mark.svg") center/contain no-repeat;
          mask: url("assets/brand/resolvix-mark.svg") center/contain no-repeat;
}
.foot__tag { margin-top: 12px; font-size: 13.2px; max-width: 34ch; line-height: 1.6; }
.foot__cols { display: flex; flex-wrap: wrap; gap: 52px; }
.foot__col h4 { margin: 0 0 12px; font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy); }
.foot__col a { display: block; text-decoration: none; font-size: 13.6px; padding: 4px 0; opacity: .8; transition: opacity .2s; }
.foot__col a:hover { opacity: 1; }
.foot__fine {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: 12.6px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
}

/* ======================================================== reduced motion == */
/* The rule the whole page is built to: every animation's final state is also
   its resting state, so switching motion off removes the movement and not the
   argument. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .shot--tilt { transform: none; }
  .stage__frame img.on { transform: none; }
  .caret { opacity: 1; }
  .hero h1 .drift::after { transform: scaleX(1); }
}