/* Toolroom — mint and white. Boska for display, Satoshi for text and interface. */
:root {
  --bg: #f4fbf8;
  --surface: #e1f3ec;
  --surface-2: #c9e7db;
  --ink: #10302a;
  --muted: #4a685e;
  --accent: #12a37f;       /* fills: bands, buttons, dots */
  --accent-text: #0a7259;  /* accent used as text, passes AA on every light surface */
  --accent-ink: #06231c;   /* text on an accent fill */

  --fd: "Boska", Georgia, serif;                                                  /* display: headlines and big figures */
  --f: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;               /* text and interface */
  --f-code: ui-monospace, Menlo, Consolas, monospace; /* taste-skill-ignore: real code output only */

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.4375rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-poster: clamp(52px, 7.4vw, 120px);

  --m: clamp(20px, 2.4vw, 32px);
  --gap: clamp(120px, 13vw, 200px);
  --r: 12px;

  /* one motion language for the whole site */
  --ease: cubic-bezier(.4, 0, .2, 1);      /* hovers and small changes */
  --ease-out: cubic-bezier(.22, 1, .36, 1); /* things arriving */
  --t: 280ms;
  --t-slow: 700ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--step-body)/1.6 var(--f); letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
  text-rendering: optimizeLegibility; font-kerning: normal;
  font-feature-settings: "kern", "liga";
}
html { scrollbar-color: #9fd3c1 var(--bg); scrollbar-width: thin; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--fd); font-weight: 400; letter-spacing: -0.025em; line-height: .98; text-wrap: balance; }
p { text-wrap: pretty; }
em { font-style: italic; }
b, strong { font-weight: 700; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; z-index: 9; }
.skip:focus { left: 16px; }

/* the page slides away to uncover the footer; small icons float fixed behind it */
.page { position: relative; z-index: 2; background: var(--bg); clip-path: inset(0); }

/* ---------- floating icons: a calm layer behind everything ---------- */
.floaters { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* each icon is placed here at rest; script.js then moves it (glide, spin, bounce) with transform */
.fl {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  color: var(--accent-text); opacity: var(--o, .24); will-change: transform;
}
.fl-i { display: block; width: 100%; height: 100%; }
.fl svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .fl:nth-child(n+13) { display: none; }
  .fl { --o: .18; }
}

.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 54px; padding: 0 30px; border-radius: 0;
  background: var(--ink); color: var(--bg);
  font: 700 var(--step-body)/1 var(--f); letter-spacing: .01em; text-decoration: none;
  transition: transform 200ms var(--ease), color var(--t) var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent-text); /* dark enough that the light label stays readable mid-sweep */
  clip-path: inset(100% 0 0 0); transition: clip-path 520ms var(--ease-out);
}
.btn:active { transform: scale(.97); }
.text-link { position: relative; text-decoration: none; padding-bottom: 3px; transition: color var(--t) var(--ease); }
.t-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.t-actions .text-link::after { bottom: 9px; }
.text-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; /* taste-skill-ignore: link underline */
  transform-origin: right; transition: transform 520ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::before { clip-path: inset(0 0 0 0); }
  .text-link:hover { color: var(--accent-text); }
  .text-link:hover::after { animation: redraw 800ms var(--ease-out); }
}

/* ---------- bar ---------- */
.bar { display: flex; justify-content: space-between; align-items: center; padding: 26px var(--m); }
.bar-mark { text-decoration: none; text-transform: uppercase; letter-spacing: .32em; font-size: var(--step-small); font-weight: 700; }
.bar-nav { display: flex; gap: clamp(16px, 2.6vw, 40px); }
.bar-nav a {
  position: relative; font-size: var(--step-body); font-weight: 500; text-decoration: none; color: var(--muted); transition: color var(--t) var(--ease);
}
.bar-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; /* taste-skill-ignore: hover underline */
  transform: scaleX(0); transform-origin: right; transition: transform 520ms var(--ease-out);
}
.bar-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
@media (hover: hover) and (pointer: fine) {
  .bar-nav a:hover { color: var(--ink); }
  .bar-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* ---------- hero: the counter ---------- */
.hero {
  min-height: calc(100svh - 80px);
  display: grid; grid-template-columns: 7fr 5fr; align-items: center; gap: clamp(32px, 5vw, 96px);
  padding: clamp(16px, 4vh, 48px) var(--m) clamp(48px, 8vh, 96px);
}
.counter { position: relative; width: 100%; display: grid; }
.obj {
  position: relative; grid-area: 1 / 1; text-align: left;
  background: var(--surface); padding: 22px; font: 400 15px/1.5 var(--f);
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(10px) scale(.992); overflow: hidden; pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease); /* the outgoing card leaves quickly... */
  font-variant-numeric: lining-nums tabular-nums;
}
.obj.is-on { opacity: 1; transform: none; pointer-events: auto; transition: opacity 700ms var(--ease) 240ms, transform 1000ms var(--ease-out) 240ms; } /* ...then the next one arrives */
.obj-head { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.obj-head span:first-child { color: var(--ink); font-weight: 700; }
.o-score { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.o-score b { font: 400 clamp(48px, 4vw, 60px)/.9 var(--fd); letter-spacing: -0.04em; }
.o-score span { color: var(--muted); font-size: 18px; }
.o-grade { color: var(--accent-text); font-size: 15px; font-weight: 500; }
.o-rows { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 4px; }
.o-rows li { display: flex; justify-content: space-between; background: var(--bg); padding: 11px 12px; }
.o-rows li.hl { background: var(--surface-2); }
.o-rows b { font-weight: 700; font-variant-numeric: tabular-nums; }
.ok { color: var(--accent-text); }
.obj pre { margin: 0; flex: 1 0 auto; background: var(--bg); padding: 16px; overflow: hidden; }
.obj > * { flex-shrink: 0; }
.obj code { font: 13px/1.65 var(--f-code); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.o-serp { background: #fff; color: #202124; padding: 16px; display: grid; gap: 4px; box-shadow: inset 0 0 0 1px var(--surface-2); }
.o-url { font-size: 13px; color: #4d5156; }
.o-title { font-size: 18px; color: #1a0dab; line-height: 1.3; }
.o-desc { font-size: 13px; color: #4d5156; }
.o-ask { font: 400 26px/1.15 var(--fd); margin-top: 18px; }
.o-stars { display: flex; gap: 6px; font-size: 34px; color: var(--accent-text); }
.o-btn { align-self: start; background: var(--accent); color: var(--accent-ink); padding: 12px 18px; font-weight: 700; margin-top: 8px; }
.o-foot { color: var(--muted); margin-top: auto; }

/* ---------- tools: one per poster line ---------- */
.tools { padding: var(--gap) var(--m) 80px; }
.section-title { font-size: var(--step-head); margin-bottom: 64px; }
.shelf { list-style: none; margin: 0; padding: 0; }
.t-row {
  display: grid; grid-template-columns: 1fr minmax(260px, 30%); gap: 32px; align-items: baseline;
  text-decoration: none; color: inherit; padding: 6px 0;
}
.t-name {
  font: 400 var(--step-poster)/.95 var(--fd); letter-spacing: -0.03em; text-transform: lowercase;
  transition: color .3s, transform .5s var(--ease);
}
.t-meta { display: grid; gap: 6px; font-size: var(--step-body); }
.t-what { color: var(--ink); }
.t-status { color: var(--muted); }
.tool.is-live .t-status { color: var(--accent-text); font-weight: 700; }
.tool:not(.is-live) .t-name { color: var(--muted); }

/* ---------- ask: one word is the button ---------- */
.ask { padding: var(--gap) 0 0; }
.ask-band {
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 60svh; padding: 20px var(--m) 0;
  background: var(--accent); color: var(--accent-ink); text-decoration: none; overflow: hidden;
}
.ask-band:focus-visible { outline: 3px solid var(--ink); outline-offset: -6px; }
.ask-top { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.ask-say { font: 400 var(--step-lead)/1.2 var(--fd); letter-spacing: 0; max-width: 20em; }
.ask-top svg { flex: none; transition: transform var(--t) var(--ease-out); }
.ask-band:hover .ask-top svg { transform: translate(6px, -6px); }
.ask-word { display: block; width: 100%; height: auto; margin-bottom: -2px; overflow: hidden; pointer-events: none; }
.ask-word text { font: 700 300px var(--fd); fill: currentColor; }

/* ---------- footer: uncovered, inverted ---------- */
.foot {
  position: sticky; bottom: 0; z-index: 1;
  min-height: 100svh; background: var(--ink); color: var(--bg);
  display: grid; grid-template-rows: auto 1fr auto auto; padding: 40px var(--m) 20px;
}
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-cols > div { display: grid; align-content: start; gap: 6px; font-size: var(--step-body); color: #8fb5a8; }
.foot-cols .f-lead { color: var(--bg); font-weight: 700; }
.foot-cols a { text-decoration: none; transition: color var(--t) var(--ease); }
.foot-cols a:hover { color: var(--bg); text-decoration: underline; }
.foot-word { grid-row: 3; width: 100%; height: auto; margin-bottom: 20px; }
.foot-word text { font: 500 160px var(--fd); fill: var(--bg); text-transform: uppercase; letter-spacing: 0; text-rendering: geometricPrecision; }
/* the pinned footer sits a fraction of a pixel differently on each scroll frame; on its own layer it moves as one picture
   instead of the big word being redrawn (and nudged) every frame */
.foot { will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.foot-word { will-change: transform; transform: translateZ(0); }
.legal { grid-row: 4; font-size: var(--step-small); color: #8fb5a8; }
.legal a { color: var(--bg); }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .hero { padding-top: 4svh; }
  .counter { justify-self: center; width: min(100%, 360px); }
  .wordmark { font-size: 16px; letter-spacing: .5em; }
  .hero-line { font-size: 11vw; }
  .hero-lead { font-size: 18px; }
  .hero-row { width: 100%; }
  .hero-row .btn { width: 100%; }
  .section-title { margin-bottom: 40px; }
  .t-row { grid-template-columns: 1fr; gap: 6px; padding-bottom: 26px; }
  .t-name { font-size: 12vw; }
  .t-meta { display: block; font-size: 16px; }
  .t-what, .t-status { display: inline; }
  .t-status::before { content: " "; }
  .ask-band { min-height: 46svh; }

  .ask-top svg { width: 32px; height: 32px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* report fragment: status code split */
.o-codes { display: flex; gap: 3px; height: 10px; margin-top: 6px; }
.o-codes i { display: block; background: var(--accent); }
.o-codes i:nth-child(2) { background: var(--ink); }
.o-codes i:nth-child(3) { background: #d9a273; }
.o-codes i:nth-child(4) { background: #d97a6c; }
.o-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; color: var(--muted); font-size: 14px; }
.o-legend b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: 4px; }

/* ---------- shared sections ---------- */
.split { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: 5fr 7fr; gap: 32px clamp(32px, 5vw, 96px); }
.split-title { font-size: var(--step-head); max-width: 7em; }
.split-body { display: grid; gap: 24px; align-content: start; font-size: var(--step-lead); line-height: 1.5; max-width: 34em; }

.checks { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 48px; font-size: var(--step-lead); line-height: 1.35; }
.checks li { break-inside: avoid; padding: 0 0 18px 1.1em; position: relative; }
.checks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .42em; height: .42em; background: var(--accent); border-radius: 50%; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 48px 8px; }
.facts p { background: var(--surface); padding: 28px 24px; color: var(--muted); font-size: var(--step-body); }
.facts b { display: block; color: var(--ink); font: 400 var(--step-head)/1 var(--fd); letter-spacing: -0.03em; margin-bottom: 10px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px 32px; }
.steps li { display: grid; gap: 10px; align-content: start; }
.step-lead { font: 400 var(--step-lead)/1.2 var(--fd); }
.steps li p:not(.step-lead) { color: var(--muted); }

.note-small { margin-top: 24px; color: var(--muted); font-size: var(--step-body); max-width: 60ch; }

/* ---------- tool pages ---------- */
.t-hero { padding: clamp(48px, 8vh, 96px) var(--m) 0; display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.t-hero h1 { font-size: var(--step-poster); letter-spacing: -0.03em; line-height: .95; }
.t-sub { margin-top: 20px; font: italic 400 var(--step-lead)/1.3 var(--fd); color: var(--accent-text); }
.t-intro { margin-top: 28px; font-size: var(--step-lead); line-height: 1.5; max-width: 30em; }
.t-actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.t-frag { position: relative; display: grid; width: 100%; max-width: 440px; justify-self: end; }
.t-list, .t-facts, .t-steps, .faq, .record, .sentence, .ways { padding: var(--gap) var(--m) 0; }
.pager { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pager-link { background: var(--surface); padding: 32px; text-decoration: none; display: grid; gap: 8px; transition: background-color var(--t) var(--ease); }
.pager-link:hover { background: var(--surface-2); }
.pager-link span { color: var(--muted); }
.pager-link b { font: 400 var(--step-head)/1 var(--fd); letter-spacing: -0.03em; transition: color var(--t) var(--ease); }
.pager-link:hover b { color: var(--accent-text); }
.pager-next { text-align: right; }
.o-plan { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.o-plan li { display: grid; grid-template-columns: 44px 1fr; gap: 2px 10px; background: var(--bg); padding: 12px; }
.o-plan li.hl { background: var(--surface-2); }
.o-plan b { grid-row: span 2; font-weight: 700; }
.o-plan i { color: var(--muted); font-size: 13px; font-style: normal; }

/* ---------- about ---------- */
.record-list { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 88px 40px; }
.record-list dt { font: 400 clamp(56px, 6.4vw, 104px)/.9 var(--fd); letter-spacing: -0.04em; color: var(--accent-text); }
.record-list dd { margin: 12px 0 0; font-size: var(--step-body); line-height: 1.45; max-width: 18em; }

/* ---------- work with raj ---------- */
.offers { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.offer { background: var(--surface); padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 22px; align-items: start; }
.offer h2 { font-size: var(--step-head); }
.offer > p:first-of-type { font-size: var(--step-lead); line-height: 1.45; }
.faq-list { display: grid; gap: 4px; max-width: 980px; }
.faq details { background: var(--surface); overflow: hidden; }
.faq summary { cursor: pointer; padding: 24px 28px; font-size: var(--step-lead); font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: 16px; transition: color var(--t) var(--ease); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); transition: transform var(--t) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent-text); }
.faq details p { padding: 0 28px 26px; max-width: 40em; color: var(--muted); }

/* ---------- contact ---------- */
.ask-form { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .35em; font: 400 clamp(28px, 3vw, 36px)/1.3 var(--fd); }
.ask-form input { font: inherit; color: var(--ink); background: var(--surface-2); border: 0; height: 1.6em; padding: 0 .45em; width: 11em; max-width: 100%; transition: background-color var(--t) var(--ease); }
.ask-form input::placeholder { color: var(--muted); font-style: italic; }
.ask-form input:focus { outline: none; background: var(--surface); }
.ask-form button { font: inherit; cursor: pointer; background: var(--accent); color: var(--accent-ink); border: 0; height: 1.6em; padding: 0 .6em; transition: transform 160ms var(--ease), background-color var(--t) var(--ease), color var(--t) var(--ease); }
.ask-form button:hover { background: var(--ink); color: var(--bg); }
.ask-form button:active { transform: scale(.96); }
.ask-form button.is-busy { opacity: .7; pointer-events: none; }
.ways-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ways-list a { display: grid; gap: 14px; background: var(--surface); padding: 32px; text-decoration: none; min-height: 180px; align-content: space-between; transition: background-color var(--t) var(--ease); }
.ways-list a:hover { background: var(--surface-2); }
.ways-list span { color: var(--muted); }
.ways-list b { font: 400 var(--step-head)/1 var(--fd); letter-spacing: -0.03em; overflow-wrap: anywhere; transition: color var(--t) var(--ease); }
.ways-list a:hover b { color: var(--accent-text); }

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .counter { justify-self: start; }
  .t-hero { grid-template-columns: 1fr; }
  .t-frag { justify-self: start; }
}
@media (max-width: 760px) {
  .bar { flex-wrap: wrap; gap: 12px; }
  .bar-nav { width: 100%; justify-content: space-between; }
  .bar-nav a { font-size: 16px; }
  .split { grid-template-columns: 1fr; }
  .split-title { font-size: 9vw; }
  .t-hero h1 { font-size: 12vw; }
  .checks { columns: 1; }
  .t-frag { max-width: none; }
  .record-list { grid-template-columns: 1fr; }
  .offers, .pager, .ways-list { grid-template-columns: 1fr; }
  .offers { gap: 48px; }
  .pager-next { text-align: left; }
  .ways-list b { font-size: 28px; }
}

/* sample fill inside the cards */
.obj .o-serp + .o-serp { margin-top: -6px; }
.o-review { background: var(--bg); padding: 14px; display: grid; gap: 6px; }
.o-who { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.o-who b { color: var(--ink); font-weight: 700; }
.counter .o-rows li, .t-frag .o-rows li { padding: 9px 12px; }

/* ================= refinement layer ================= */

/* page to page: a quiet cross-dissolve */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 300ms var(--ease) both vt-out; }
::view-transition-new(root) { animation: 500ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* section heads carry a quiet aside on the same baseline */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 64px; }
.section-head .section-title { margin-bottom: 0; }

/* the shelf: the name leans into italic and an arrow arrives */
.t-row { position: relative; padding: 10px 0; transition: none; }
.t-name { display: inline-flex; align-items: baseline; gap: .25em; }
.t-arrow {
  font-size: .5em; color: var(--accent-text); opacity: 0; transform: translateX(-12px);
  transition: opacity var(--t) var(--ease), transform 500ms var(--ease-out);
}
.tool .t-row .t-name { transition: color var(--t) var(--ease), transform 600ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tool .t-row:hover .t-name { font-style: italic; color: var(--ink); transform: translateX(14px); }
  .tool.is-live .t-row:hover .t-name { color: var(--accent-text); }
  .tool .t-row:hover .t-arrow { opacity: 1; transform: none; }
  .tool .t-row:hover .t-what { color: var(--ink); }
}
.tool:not(.is-live) .t-what { color: var(--muted); transition: color var(--t) var(--ease); }
@keyframes tab-fill { to { transform: scaleX(1); } }

/* figures: lining numerals where numbers are the point */
.facts b, .record-list dt, .o-score b, .time { font-variant-numeric: lining-nums; }

/* footer close */
.legal { display: flex; justify-content: space-between; gap: 24px; align-items: baseline; }
.legal p { margin: 0; }
.to-top { color: var(--bg); text-decoration: none; font-weight: 700; }
.to-top span { display: inline-block; transition: transform var(--t) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .to-top:hover span { transform: translateY(-4px); } }

/* cards on tool pages sit still and crisp */
.t-frag .obj { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 760px) {
  .section-head { flex-direction: column; gap: 10px; margin-bottom: 40px; }
  .bar { padding: 18px var(--m); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .obj { transform: none; }
}

@keyframes redraw { 0% { transform: scaleX(1); transform-origin: right; } 45% { transform: scaleX(0); transform-origin: right; } 46% { transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
@media (max-width: 760px) { .t-row { padding: 6px 0 32px; } }

/* ================= hero, fuller ================= */
.hero {
  min-height: calc(100svh - 84px);
  grid-template-columns: 1fr minmax(0, 520px); grid-template-rows: 1fr auto;
  gap: 48px clamp(40px, 6vw, 120px);
  padding-top: clamp(8px, 2vh, 24px); padding-bottom: 0;
}

/* figures beneath the actions */
.hero-figures {
  list-style: none; margin: 56px 0 0; padding: 28px 0 0; width: 100%; max-width: 640px;
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(28px, 4vw, 64px);
  box-shadow: inset 0 1px 0 var(--surface-2); /* taste-skill-ignore: tone step above the figures */
}
.hero-figures li { display: grid; gap: 10px; align-content: start; }
.hero-figures b { font: 400 clamp(32px, 3vw, 48px)/1 var(--fd); letter-spacing: -0.03em; font-variant-numeric: lining-nums; }
.hero-figures li:last-child b { color: var(--accent-text); font-style: italic; }
.hero-figures span { color: var(--muted); font-size: var(--step-small); max-width: 12em; }

/* the card sits on a small deck of cards */
.counter { isolation: isolate; }
.counter::before, .counter::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface);
  transition: transform 1100ms var(--ease-out);
}
.counter::before { transform: translate(14px, 14px); background: #d3ece2; }
.counter::after { display: none; }

/* a slow band of what the tools make;
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 1024px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto; }
}
@media (max-width: 760px) {
  .hero-figures { grid-template-columns: repeat(3, 1fr); gap: 0 16px; margin-top: 40px; }
  .hero-figures b { font-size: 28px; }
  .counter::before { transform: translate(8px, 8px); }
}

/* ================= the studio: Meenox ================= */
.bar-nav .bar-studio { color: var(--accent-text); }
@media (hover: hover) and (pointer: fine) { .bar-nav .bar-studio:hover { color: var(--accent-text); } }

.studio { padding: var(--gap) var(--m) 0; }
.studio-card {
  display: grid; grid-template-columns: 6fr 4fr; grid-template-rows: 1fr auto; gap: 48px clamp(32px, 5vw, 96px);
  background: var(--surface); padding: clamp(32px, 4.4vw, 72px); text-decoration: none; color: inherit;
  transition: background-color 500ms var(--ease), transform 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .studio-card:hover { background: var(--surface-2); }
}
.studio-card:active { transform: scale(.995); }

@media (max-width: 1024px) { .studio-card { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .bar-nav { flex-wrap: wrap; row-gap: 8px; }
}

/* ================= entrances: fade and rise, never a jump ================= */
@media (prefers-reduced-motion: no-preference) {
  /* first screen: the heading stays put, its company arrives */
  .showcase, .hero-lead, .hero-row, .hero-figures li, .p-lead, .t-sub, .t-intro, .t-actions, .t-frag {
    animation: arrive var(--t-slow) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 80ms + 120ms);
  }
  .hero-row, .t-intro { --i: 1; }
  .hero-figures li:nth-child(1), .t-actions { --i: 2; }
  .hero-figures li:nth-child(2) { --i: 3; }
  .hero-figures li:nth-child(3) { --i: 4; }
  .showcase, .t-frag { --i: 2; }

  /* everything else rises once as it enters the screen (script.js adds .rv, then .in) */
  .js .rv:not(.in) { opacity: 0; transform: translateY(26px); }
  .js .rv.in { animation: arrive var(--t-slow) var(--ease-out) var(--d, 0ms) backwards; }
  .js .tool.rv:not(.in) { opacity: 1; transform: none; }
  .js .tool.rv:not(.in) .t-name { opacity: 0; transform: translateX(-40px); }
  .js .tool.rv:not(.in) .t-meta { opacity: 0; transform: translateY(16px); }
  .js .tool.rv.in { animation: none; }
  .js .tool.rv.in .t-name { animation: slide-in 900ms var(--ease-out) backwards; }
  .js .tool.rv.in .t-meta { animation: arrive 800ms var(--ease-out) 90ms backwards; }
  .js .ask-band.rv:not(.in) .ask-word { opacity: 0; transform: translateY(28%); }
  .js .ask-band.rv.in .ask-word { animation: arrive 1000ms var(--ease-out) backwards; }
  .js .ask-band.rv:not(.in), .js .ask-band.rv.in { opacity: 1; transform: none; animation: none; }
}
@keyframes arrive { from { opacity: 0; transform: translateY(26px); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-40px); } }

/* ================= phones and touch ================= */
a, button, summary, label { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(18, 163, 127, .16); }

@media (max-width: 760px) {
  /* header: every link is a comfortable thumb target, and the five fit on one line where they can */
  .bar { padding: 8px var(--m) 0; gap: 0; }
  .bar-mark { display: inline-flex; align-items: center; min-height: 44px; }
  .bar-nav { gap: 0; row-gap: 0; justify-content: space-between; margin-inline: -6px; width: calc(100% + 12px); }
  .bar-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 15px; }
  .bar-nav a::after { left: 6px; right: 6px; bottom: 8px; }

  .t-actions .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  .t-actions .text-link::after { bottom: 9px; }

  /* footer: links with room around them */
  .foot-cols > div { gap: 0; }
  .foot-cols a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot-cols .f-lead { display: flex; align-items: center; min-height: 44px; }
  .foot { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .to-top { display: inline-flex; align-items: center; min-height: 44px; }

  /* floating icons: fewer and fainter, so they never fight the words */
  .fl:nth-child(n+9) { display: none; }
  .fl { --o: .12; }

  /* a little less empty space between sections, and easier reading */
  :root { --gap: clamp(88px, 22vw, 120px); }
  .section-title { margin-bottom: 32px; }
  .t-intro { font-size: 1.125rem; }
}
@media (max-width: 400px) {
  .bar-nav { margin-inline: -4px; width: calc(100% + 8px); }
  .bar-nav a { font-size: 14px; padding: 0 4px; min-width: 44px; justify-content: center; }
  .bar-nav a::after { left: 4px; right: 4px; }
}

/* ================= a tool page with its own app (Bot Bouncer) ================= */

/* the app's logo, stamped on the sample file like a bouncer at the door */
.t-hero { overflow-x: clip; } /* the stamped emblem never widens the page */
.t-frag.has-emblem .obj-head { padding-right: 150px; } /* the header makes room for the stamp */
.t-emblem {
  position: absolute; z-index: 2; top: -64px; right: 12px; width: 136px; height: 136px;
  transform: rotate(8deg); pointer-events: none;
  filter: drop-shadow(0 12px 18px rgba(16, 48, 42, .16));
}
@media (prefers-reduced-motion: no-preference) {
  .t-emblem { animation: stamp 720ms var(--ease-out) 520ms backwards; }
}
@keyframes stamp {
  0%   { opacity: 0; transform: translateY(-14px) rotate(20deg) scale(1.3); }
  55%  { opacity: 1; transform: translateY(0) rotate(5deg) scale(.95); }
  100% { transform: rotate(8deg) scale(1); }
}
.t-figures { margin-top: 48px; grid-template-columns: repeat(4, auto); }

/* features as cards on a tinted band: an uneven grid, each card led by one of the site's own outline icons */
.t-feat {
  margin-top: var(--gap); padding: clamp(72px, 9vw, 128px) var(--m);
  background: var(--surface);
}
.t-feat .section-title { margin-bottom: 40px; }
.bento {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
  grid-template-areas: "a a a a b b" "c c c d d d" "e e e e e e";
}
.b-1 { grid-area: a; } .b-2 { grid-area: c; } .b-3 { grid-area: b; } .b-4 { grid-area: d; } .b-5 { grid-area: e; }
.bento-card {
  position: relative; display: grid; align-content: start; gap: 16px;
  padding: clamp(24px, 3vw, 40px); background: var(--bg); color: var(--ink);
  transition: transform 450ms var(--ease-out), box-shadow 450ms var(--ease-out);
}
.bento-card h3 { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--fd); letter-spacing: -0.02em; }
.bento-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bento-card li { position: relative; padding-left: 20px; line-height: 1.5; max-width: 62ch; }
.bento-card li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.b-5 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.b-icon {
  width: 52px; height: 52px; padding: 11px; margin-bottom: 4px;
  background: var(--surface); color: var(--accent-text);
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 120; stroke-dashoffset: 0; /* drawn; the reveal below starts it undrawn */
}
.bento-card.is-dark { background: var(--ink); color: var(--bg); }
.bento-card.is-dark .b-icon { background: rgba(255, 255, 255, .08); color: #7ee8c0; }
.bento-card.is-dark li { color: #d6ebe3; }
.bento-card.is-dark li::before { background: #7ee8c0; }
@media (hover: hover) and (pointer: fine) {
  .bento-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px -18px rgba(16, 48, 42, .35); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .bento-card.rv .b-icon { stroke-dashoffset: 120; transition: stroke-dashoffset 1400ms var(--ease-out) calc(var(--d, 0ms) + 250ms); }
  .js .bento-card.rv.in .b-icon { stroke-dashoffset: 0; }
}

/* who it covers, as a guest list: kept out on one side, let in on the other */
.t-cover { padding: var(--gap) var(--m) 0; }
.t-cover .section-title { margin-bottom: 20px; }
.guest-lead { font-size: var(--step-lead); line-height: 1.5; max-width: 38em; margin-bottom: 40px; }
.guest-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 8px; align-items: start; }
.guest-col { background: var(--surface); padding: clamp(24px, 3vw, 40px); display: grid; gap: 12px; }
.guest-head { display: flex; align-items: center; gap: 12px; font: 700 var(--step-small)/1.2 var(--f); }
.guest-head b { margin-left: auto; font: 400 clamp(36px, 3.4vw, 52px)/1 var(--fd); letter-spacing: -0.03em; text-transform: none; }
.mark { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.mark svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.is-blocked .mark { background: #c5432d; }
.is-allowed .mark { background: var(--accent-text); }
.is-blocked .guest-head b { color: #a83a27; }
.is-allowed .guest-head b { color: var(--accent-text); }
.guest-col h3 { font: 400 var(--step-lead)/1.2 var(--fd); letter-spacing: -0.01em; margin-top: 14px; }
.guest-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.guest-col li { font-size: var(--step-small); font-weight: 500; line-height: 1.2; padding: 7px 12px; background: var(--bg); overflow-wrap: anywhere; }
.is-blocked li { color: #7a2a1b; }

/* the closing call, led by the app's logo */
.t-cta {
  margin: var(--gap) var(--m) 0; padding: clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px clamp(24px, 4vw, 56px);
  background: var(--ink); color: var(--bg);
}
.t-cta-logo { width: 112px; height: 112px; transform: rotate(-6deg); }
.t-cta h2 { font-size: var(--step-head); }
.t-cta p { margin-top: 10px; font-size: var(--step-lead); line-height: 1.45; color: #a9cbbf; max-width: 32em; }
.t-cta .btn { background: var(--bg); color: var(--ink); }
.t-cta .btn::before { background: var(--surface-2); } /* a light sweep, so the dark label never sits on dark */

@media (max-width: 1024px) {
  .guest-cols { grid-template-columns: 1fr; }
  .t-frag.has-emblem { margin-top: 56px; }
}
@media (max-width: 760px) {
  .t-emblem { width: 100px; height: 100px; top: -48px; right: 8px; }
  .t-frag.has-emblem .obj-head { padding-right: 96px; }
  .t-figures { margin-top: 36px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .t-cta { grid-template-columns: 1fr; }
  .t-cta-logo { width: 84px; height: 84px; }
  .t-cta .btn { width: 100%; }
}

/* ================= the live preview, the bot cascade and the dark "how it works" band ================= */

/* the sample card is a working preview: three presets rewrite the file */
.demo pre code { display: block; }
.demo-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.demo-bar button {
  min-height: 44px; padding: 0 10px; border: 0; cursor: pointer;
  font: 700 13px/1.2 var(--f); color: var(--ink); background: var(--bg);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform 160ms var(--ease);
}
.demo-bar button:hover { background: var(--surface-2); }
.demo-bar button:active { transform: scale(.97); }
.demo-bar button.is-on { background: var(--ink); color: var(--bg); }
.demo-bar button:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.demo-count { color: var(--muted); font-size: 13px; }
.demo-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
  .demo pre.swap code { animation: swap 420ms var(--ease-out); }
}
@keyframes swap { from { opacity: 0; transform: translateY(6px); } }

/* the guest list fills in name by name */
@media (prefers-reduced-motion: no-preference) {
  .js .guest-col.rv.in li { animation: chip-in 520ms var(--ease-out) backwards; animation-delay: calc(var(--k, 0) * 35ms + 250ms); }
}
@keyframes chip-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* how it works: a dark band, three stops joined by a line that draws across */
.t-flow {
  margin-top: var(--gap); padding: clamp(72px, 9vw, 128px) var(--m);
  background: var(--ink); color: var(--bg);
}
.t-flow .section-title { color: var(--bg); }
.flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.flow::before {
  content: ""; position: absolute; top: 28px; left: 28px; right: calc((100% - 80px) / 3 - 28px); height: 2px; /* first stop to last stop */
  background: linear-gradient(90deg, var(--accent), #7ee8c0); transform-origin: left;
}
.flow li { position: relative; display: grid; align-content: start; gap: 12px; }
.flow-node {
  position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 400 28px/1 var(--fd);
  outline: 8px solid var(--ink);
}
.flow .step-lead { font: 400 var(--step-lead)/1.2 var(--fd); color: var(--bg); }
.flow li p:not(.step-lead) { color: #a9cbbf; line-height: 1.55; max-width: 30em; }
@media (prefers-reduced-motion: no-preference) {
  .js .flow.rv::before { transform: scaleX(0); transition: transform 1500ms var(--ease-out) 300ms; }
  .js .flow.rv.in::before { transform: scaleX(1); }
  .js .flow.rv.in .flow-node { animation: node-in 600ms var(--ease-out) backwards; animation-delay: calc(var(--k) * 380ms + 300ms); }
}
@keyframes node-in { from { opacity: 0; transform: scale(.6); } }
/* the questions that follow the dark band start a new rhythm */
.t-flow + .faq { padding-top: var(--gap); }

@media (max-width: 1024px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "a a" "c b" "d d" "e e"; }
}
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; grid-template-areas: "a" "c" "b" "d" "e"; }
  .b-5 ul { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; gap: 32px; }
  .flow::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; transform-origin: top; background: linear-gradient(180deg, var(--accent), #7ee8c0); }
  .flow li { grid-template-columns: 56px minmax(0, 1fr); column-gap: 20px; }
  .flow-node { grid-row: span 2; margin-bottom: 0; }
  .demo-bar button { font-size: 12px; padding: 0 6px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .js .flow.rv::before { transform: scaleY(0); }
  .js .flow.rv.in::before { transform: scaleY(1); }
}

/* ================= tool page: links into the app, the bot inspector, and the spacing rhythm ================= */

/* each feature card ends with a way into that part of the app */
.bento-card { display: flex; flex-direction: column; }
.b-link {
  margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-top: 8px;
  font-weight: 700; text-decoration: none; color: var(--accent-text);
}
.b-link span { display: inline-block; transition: transform var(--t) var(--ease-out); }
.bento-card.is-dark .b-link { color: #7ee8c0; }
@media (hover: hover) and (pointer: fine) {
  .b-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .b-link:hover span { transform: translate(3px, -3px); }
}

/* the guest list as an inspector: pick a bot, read what it does */
.guest-col li.is-chip { padding: 0; background: none; }
.chip {
  display: block; min-height: 36px; padding: 7px 12px; border: 0; cursor: pointer;
  font: 500 var(--step-small)/1.2 var(--f); color: inherit; background: var(--bg);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform 160ms var(--ease);
}
.chip:hover { background: var(--surface-2); }
.chip:active { transform: scale(.97); }
.chip:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.is-blocked .chip.is-on { background: #a83a27; color: #fff; }
.is-allowed .chip.is-on { background: var(--accent-text); color: #fff; }
.guest-note { margin-top: 16px; padding: 16px 18px; background: var(--bg); font-size: var(--step-small); line-height: 1.5; }
.guest-note b { font-weight: 700; margin-right: 4px; }
.guest-note a { font-weight: 700; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.is-blocked .guest-note a { color: #a83a27; }
.guest-note a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .guest-note.swap > * { animation: swap 380ms var(--ease-out); display: inline; }
}

/* spacing rhythm: shorter gaps around the coloured bands (their edges already separate), one heading gap throughout */
.t-feat, .t-flow { margin-top: clamp(80px, 9vw, 136px); padding-top: clamp(64px, 7vw, 104px); padding-bottom: clamp(64px, 7vw, 104px); }
.t-feat + .t-cover, .t-flow + .faq { padding-top: clamp(80px, 9vw, 136px); }
.t-cta { margin-top: clamp(80px, 9vw, 136px); }
.t-cta + .pager { padding-top: clamp(40px, 5vw, 64px); }
.t-feat .section-title, .t-flow .section-title, .t-flow + .faq .section-title { margin-bottom: 40px; }
.t-cover .guest-lead { margin-bottom: 40px; }
@media (max-width: 760px) {
  .t-feat .section-title, .t-flow .section-title, .t-flow + .faq .section-title { margin-bottom: 28px; }
  .t-cover .guest-lead { margin-bottom: 28px; }
}

/* ================= tool page: terminal replay, even card layout, code in steps ================= */
.term .term-screen { background: var(--ink); padding: 16px 18px; white-space: pre-wrap; overflow-wrap: anywhere; height: 380px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2f5a50 var(--ink); }
@media (max-width: 760px) { .term .term-screen { height: 300px; } }
.term .term-screen code { font: 12.5px/1.65 var(--f-code); color: #d6ebe3; display: block; }
.tl-cmd, .tl-done, .tl-head { color: #7ee8c0; }
.tl-done, .tl-head { font-weight: 700; }
.tl-skip { color: #f2a48f; }
.tl-info, .tl-quote { color: #a9cbbf; }
.tl-page { color: #d6ebe3; }
.tl-cursor { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.15em; background: #7ee8c0; }
@media (prefers-reduced-motion: no-preference) { .tl-cursor { animation: blink 1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: 0; } }
.term-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* four equal stages in two rows, the options card across the bottom */
.bento.is-even { grid-template-areas: "a a a b b b" "c c c d d d" "e e e e e e"; }
.bento.is-even .b-2 { grid-area: b; }
.bento.is-even .b-3 { grid-area: c; }
@media (max-width: 1024px) { .bento.is-even { grid-template-areas: "a b" "c d" "e e"; } }
@media (max-width: 760px) { .bento.is-even { grid-template-areas: "a" "b" "c" "d" "e"; } }

/* commands inside the dark "how it works" band */
.flow code { font: 14px/1.55 var(--f-code); color: #7ee8c0; overflow-wrap: anywhere; }

/* on a terminal card the emblem sits on the corner above the screen, never over the text */
.t-frag.is-term .t-emblem { width: 100px; height: 100px; top: -78px; right: 22px; }
.t-frag.is-term .obj-head { padding-right: 116px; }
@media (max-width: 760px) {
  .t-frag.is-term .t-emblem { width: 80px; height: 80px; top: -62px; right: 14px; }
  .t-frag.is-term .obj-head { padding-right: 90px; }
}

/* ================= llmstxt-gen: its own sections ================= */

/* a heading with its short lead beside it */
.l-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26em); gap: 20px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: 48px; }
.l-head .section-title { margin-bottom: 0; }
.l-head p { font-size: var(--step-lead); line-height: 1.45; }
.l-pipe, .l-anat, .l-setup, .l-notes { padding: clamp(80px, 9vw, 136px) var(--m) 0; }
.l-setup .section-title, .l-notes .section-title { margin-bottom: 40px; }

/* what it does: four stages on one track; a page rides along it and each stage lights as it passes */
.rail-wrap { position: relative; padding-top: 40px; }
.rail { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 4px solid var(--surface-2); }
.rail::before { content: ""; position: absolute; top: -4px; left: 0; width: 100%; height: 4px; background: var(--accent); transform-origin: left; }
.stage { display: grid; align-content: start; gap: 14px; padding: 32px clamp(18px, 2.4vw, 36px) 0; border-left: 1px solid var(--surface-2); }
.stage:first-child { padding-left: 0; border-left: 0; }
.stage-top { display: flex; align-items: center; gap: 14px; }
.stage-dot { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); transition: background-color 500ms var(--ease), color 500ms var(--ease); }
.stage-dot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stage h3 { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--fd); letter-spacing: -0.02em; }
.stage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stage ul li { line-height: 1.5; padding-left: 16px; position: relative; }
.stage ul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1.5px; background: var(--accent-text); }
.stage-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; text-decoration: none; color: var(--accent-text); }
.stage-link span { display: inline-block; transition: transform var(--t) var(--ease-out); }
.rail-token { display: none; position: absolute; top: 2px; left: 0; width: 30px; height: 30px; padding: 3px; background: var(--bg); color: var(--ink); }
.rail-token svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) and (pointer: fine) {
  .stage-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .stage-link:hover span { transform: translate(3px, -3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .rail-wrap.rv .rail-token { display: block; }
  .js .rail-wrap.rv .rail::before { transform: scaleX(0); }
  .js .rail-wrap.rv .stage-dot { background: var(--surface); color: var(--muted); }
  .js .rail-wrap.rv .stage :is(h3, ul, .stage-link) { opacity: 0; transform: translateY(12px); }
  .js .rail-wrap.rv.in .rail::before { transform: scaleX(1); transition: transform 3000ms cubic-bezier(.45, 0, .55, 1) 300ms; }
  .js .rail-wrap.rv.in .rail-token { animation: ride 3000ms cubic-bezier(.45, 0, .55, 1) 300ms both; }
  .js .rail-wrap.rv.in .stage-dot { background: var(--accent); color: var(--accent-ink); transition-delay: calc(var(--k) * 720ms + 400ms); }
  .js .rail-wrap.rv.in .stage :is(h3, ul, .stage-link) { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--k) * 720ms + 500ms); }
}
@keyframes ride {
  0% { left: 0; opacity: 0; }
  6% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 30px); opacity: 0; }
}

/* before and after: the clutter is marked, then swept away; the Markdown it leaves is on the right */
.l-sweep { margin-top: clamp(80px, 9vw, 136px); padding: clamp(64px, 7vw, 104px) var(--m); background: var(--surface); }
.l-sweep .l-head p { grid-column: 2; }
.l-sweep .section-title { grid-row: 1 / span 2; align-self: end; }
.sweep-btn {
  grid-column: 2; justify-self: start; min-height: 48px; padding: 0 22px; border: 0; cursor: pointer;
  font: 700 var(--step-body)/1 var(--f); background: var(--ink); color: var(--bg);
  transition: background-color var(--t) var(--ease), transform 160ms var(--ease);
}
.sweep-btn:hover { background: var(--accent-text); }
.sweep-btn:active { transform: scale(.97); }
.sweep-btn:focus-visible, .anat-part:focus-visible, .copy:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.sweep { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.sw-pane { margin: 0; min-width: 0; background: var(--bg); }
.sw-pane figcaption { padding: 14px 18px; font: 700 13px/1.3 var(--f); border-bottom: 1px solid var(--surface-2); }
.sw-pane.is-md { background: var(--ink); color: #d6ebe3; }
.sw-pane.is-md figcaption { color: #a9cbbf; border-bottom-color: rgba(255, 255, 255, .1); }
.sw-pre { margin: 0; padding: 12px 0; font: 12.5px/1.65 var(--f-code); white-space: pre-wrap; overflow-wrap: anywhere; transition: opacity 700ms var(--ease) 500ms; }
.sw-line { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 650ms var(--ease-out), opacity 450ms var(--ease); transition-delay: calc(var(--k) * 110ms); }
.sw-in { min-height: 0; overflow: hidden; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 1px 18px; }
.sw-code { min-width: 0; }
.sw-tag { flex: none; padding: 1px 8px; font: 700 11px/1.5 var(--f); letter-spacing: .02em; white-space: nowrap; transition: opacity 400ms var(--ease); }
.is-junk .sw-in { background: rgba(197, 67, 45, .08); }
.is-junk .sw-code { color: #7a2a1b; }
.is-junk .sw-tag, .is-partial .sw-tag { background: #a83a27; color: #fff; }
.is-keep .sw-tag { background: var(--surface); color: var(--accent-text); }
.sw-part { display: inline-block; max-width: 100%; max-height: 5em; overflow: hidden; vertical-align: bottom; overflow-wrap: anywhere; background: rgba(197, 67, 45, .16); color: #7a2a1b; transition: max-width 650ms var(--ease-out), max-height 650ms var(--ease-out), opacity 450ms var(--ease); }
.is-gain .sw-tag { background: rgba(126, 232, 192, .14); color: #7ee8c0; }
.md-h, .md-url { color: #7ee8c0; }
.md-h { font-weight: 700; }
.md-fence { color: #a9cbbf; }
.sw-arrow { align-self: center; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.sw-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.l-sweep .note-small { margin-top: 20px; }
.l-sweep .note-small code, .anat-foot code { font: 13px var(--f-code); padding: 2px 6px; background: var(--bg); }
.sweep.is-swept .is-junk { grid-template-rows: 0fr; opacity: 0; }
.sweep.is-swept .sw-part { max-width: 0; max-height: 1.65em; opacity: 0; }
.sweep.is-swept .is-partial .sw-tag { opacity: 0; }
.js .sweep:not(.is-swept) .is-md .sw-pre { opacity: .4; transition-delay: 0ms; }
.js .sweep:not(.is-swept) .is-gain .sw-tag { opacity: 0; }
.js .sweep.is-swept .is-gain .sw-tag { transition-delay: calc(var(--k) * 60ms + 900ms); }
@media (prefers-reduced-motion: reduce) {
  .sw-line, .sw-part, .sw-tag, .sw-pre { transition: none !important; }
}

/* shape the output: one command, each part numbered and explained below it */
.anat-cmd {
  background: var(--ink); color: #d6ebe3; padding: clamp(20px, 3vw, 36px);
  font: clamp(13px, 1.2vw, 15px)/2.3 var(--f-code); overflow-wrap: anywhere;
}
.anat-run { color: #a9cbbf; margin-right: 4px; }
.anat-part {
  font: inherit; line-height: 1.4; color: #d6ebe3; background: rgba(255, 255, 255, .07); border: 0; cursor: pointer;
  padding: 6px 10px; min-height: 36px; text-align: left; overflow-wrap: anywhere;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.anat-part sup { font: 700 10px/1 var(--f); color: #7ee8c0; margin-right: 6px; vertical-align: 4px; }
.anat-part:hover { background: rgba(255, 255, 255, .14); }
.anat-part.is-on { background: var(--accent); color: var(--accent-ink); }
.anat-part.is-on sup { color: var(--accent-ink); }
.anat-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 56px); }
.anat-notes li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 16px; padding: 20px 16px; border-bottom: 1px solid var(--surface-2); transition: background-color var(--t) var(--ease); }
.anat-n { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 700 13px/1 var(--f); background: var(--surface); color: var(--accent-text); transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
.anat-notes h3 { font: 400 1.3rem/1.2 var(--fd); }
.anat-notes p { line-height: 1.55; color: var(--muted); }
.anat-notes code { font: 13px var(--f-code); color: var(--ink); }
.anat-notes li.is-on { background: var(--surface); }
.anat-notes li.is-on .anat-n { background: var(--accent-text); color: #fff; }
.anat-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 32px; }
.anat-foot p { line-height: 2; }
.anat-foot p span { color: var(--muted); }
.anat-foot code { background: var(--surface); }

/* setup: three numbered lines, each with the command to copy */
.setup { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.setup > li { display: grid; grid-template-columns: clamp(56px, 7vw, 112px) minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px clamp(20px, 3vw, 48px); align-items: center; padding: clamp(24px, 3vw, 36px) 0; border-bottom: 1px solid var(--surface-2); }
.setup-n { font: 400 clamp(56px, 6vw, 96px)/.8 var(--fd); letter-spacing: -0.04em; color: var(--accent-text); }
.setup-copy h3 { font: 400 var(--step-lead)/1.2 var(--fd); }
.setup-copy p { margin-top: 6px; line-height: 1.55; color: var(--muted); }
.setup-copy code { font: 13px var(--f-code); color: var(--ink); }
.setup-cmd { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 18px; background: var(--ink); color: #7ee8c0; }
.setup-cmd code { flex: 1; min-width: 0; font: 13.5px/1.5 var(--f-code); overflow-wrap: anywhere; }
.setup-cmd.is-link { justify-content: space-between; padding-right: 18px; background: var(--surface); color: var(--ink); font-weight: 700; text-decoration: none; transition: background-color var(--t) var(--ease); }
.setup-cmd.is-link:hover { background: var(--surface-2); }
.copy { flex: none; min-height: 44px; min-width: 76px; padding: 0 14px; border: 0; cursor: pointer; font: 700 13px/1 var(--f); background: rgba(255, 255, 255, .1); color: #fff; transition: background-color var(--t) var(--ease), color var(--t) var(--ease), transform 160ms var(--ease); }
.copy:hover { background: rgba(255, 255, 255, .18); }
.copy:active { transform: scale(.96); }
.copy.is-done { background: var(--accent); color: var(--accent-ink); }

/* good to know: an open ledger, question on the left, answer on the right */
.ledger { margin: 0; border-top: 1px solid var(--ink); }
.ledger > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 10px clamp(24px, 4vw, 64px); padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--surface-2); }
.ledger dt { font: 400 var(--step-lead)/1.25 var(--fd); }
.ledger dd { margin: 0; line-height: 1.6; max-width: 40em; color: var(--muted); }

/* the closing call: a dark panel, the app's logo set in mint rings */
.l-call {
  margin: clamp(80px, 9vw, 136px) var(--m) 0; padding: clamp(40px, 6vw, 88px) clamp(28px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px clamp(32px, 6vw, 96px);
  background: var(--ink); color: var(--bg); overflow: hidden;
}
.l-call h2 { font-size: var(--step-head); max-width: 12em; }
.l-call p { margin-top: 14px; font-size: var(--step-lead); line-height: 1.45; color: #a9cbbf; max-width: 30em; }
.l-call-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.l-call .btn { background: var(--accent); color: var(--accent-ink); }
.l-call .btn::before { background: var(--bg); }
.l-call .text-link { color: var(--bg); font-weight: 700; }
.l-call-logo {
  width: clamp(132px, 16vw, 220px); height: auto; margin: 28px; border-radius: 27.5%; transform: rotate(-8deg);
  box-shadow: none;
}
.l-call + .pager { padding-top: clamp(40px, 5vw, 64px); }
@media (hover: hover) and (pointer: fine) { .l-call .text-link:hover { color: #7ee8c0; } }
@media (prefers-reduced-motion: no-preference) {
  .js .l-call.rv.in .l-call-logo { animation: tilt-in 1100ms var(--ease-out) 300ms backwards; }
}
@keyframes tilt-in { from { opacity: 0; transform: rotate(10deg) scale(.8); } }

@media (max-width: 1024px) {
  .l-head { grid-template-columns: 1fr; }
  .l-sweep .l-head p, .sweep-btn { grid-column: 1; }
  .l-sweep .section-title { grid-row: auto; }
  .rail-wrap { padding-top: 0; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; row-gap: 40px; }
  .rail::before { display: none; }
  .stage, .stage:first-child { border-left: 0; border-top: 4px solid var(--accent); padding: 28px 24px 0 0; }
  .js .rail-wrap.rv .rail-token { display: none; }
  .sweep { grid-template-columns: 1fr; }
  .sw-arrow { justify-self: center; transform: rotate(90deg); }
  .anat-notes { grid-template-columns: 1fr; }
  .setup > li { grid-template-columns: clamp(48px, 9vw, 80px) minmax(0, 1fr); }
  .setup-cmd { grid-column: 2; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .rail-wrap.rv .stage { border-top-color: var(--surface-2); transition: border-color 600ms var(--ease); }
  .js .rail-wrap.rv.in .stage { border-top-color: var(--accent); transition-delay: calc(var(--k) * 400ms + 300ms); }
  .js .rail-wrap.rv.in .stage-dot { transition-delay: calc(var(--k) * 400ms + 400ms); }
  .js .rail-wrap.rv.in .stage :is(h3, ul, .stage-link) { transition-delay: calc(var(--k) * 400ms + 500ms); }
}
@media (max-width: 760px) {
  .l-head { margin-bottom: 32px; }
  .l-setup .section-title, .l-notes .section-title { margin-bottom: 28px; }
  .rail { grid-template-columns: 1fr; row-gap: 36px; }
  .stage, .stage:first-child { padding-right: 0; }
  .sw-in { padding: 1px 14px; }
  .sw-tag { font-size: 10px; padding: 1px 6px; }
  .setup > li { grid-template-columns: 40px minmax(0, 1fr); gap: 16px 12px; align-items: start; }
  .setup-cmd { grid-column: 1 / -1; }
  .setup-n { font-size: 44px; }
  .ledger > div { grid-template-columns: 1fr; }
  .l-call { grid-template-columns: 1fr; }
  .l-call-logo { order: -1; width: 96px; margin: 16px; }
  .l-call .btn { width: 100%; }
}

/* ================= Schema Forge: its own sections ================= */

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.f-types, .f-gaps, .f-bench, .f-limits { padding: clamp(80px, 9vw, 136px) var(--m) 0; }
.f-bench .section-title, .f-limits .section-title { margin-bottom: 40px; }

/* nine types laid out like a table of elements; picking one shows what it reads and what it writes */
.ptable { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.pt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pt-el {
  position: relative; display: grid; align-content: space-between; gap: 6px; aspect-ratio: 1; min-height: 96px; padding: 12px 14px;
  text-align: left; cursor: pointer; border: 1px solid var(--surface-2); background: var(--bg); color: var(--ink); font: inherit;
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform 160ms var(--ease);
}
.pt-el b { font: 400 clamp(2rem, 1.4rem + 2.2vw, 3.2rem)/1 var(--fd); letter-spacing: -0.03em; }
.pt-n { font: 600 var(--step-small)/1 var(--f); color: var(--muted); }
.pt-name { font-size: var(--step-small); font-weight: 600; overflow-wrap: anywhere; }
.pt-el.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pt-el.is-on .pt-n { color: #7ee8c0; }
.pt-el:active { transform: scale(.97); }
.pt-el:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pt-el:not(.is-on):hover { border-color: var(--accent); background: var(--surface); } }
.pt-panel { position: sticky; top: 96px; }
.pt-card { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); background: var(--surface); }
.pt-card[hidden] { display: none; }
.pt-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 20px; }
.pt-top h3 { font: 400 clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem)/1.05 var(--fd); letter-spacing: -0.02em; }
.pt-card p { font-size: var(--step-lead); line-height: 1.45; }
.pt-card pre, .gap-out pre { margin: 0; padding: 18px 20px; background: var(--ink); color: #d6efe6; font: 12.5px/1.65 var(--f-code); white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  .pt-card.is-on { animation: pt-in 420ms var(--ease-out); }
  .js .pt-grid.rv .pt-el { opacity: 0; transform: translateY(14px); }
  .js .pt-grid.rv.in .pt-el { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out) calc(var(--k) * 60ms), transform 600ms var(--ease-out) calc(var(--k) * 60ms), background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
}
@keyframes pt-in { from { opacity: 0; transform: translateY(8px); } }

/* a gap that fills in: each field writes straight into the markup beside it */
.f-gaps .l-head { margin-bottom: 40px; }
.gapbox { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: start; padding: clamp(24px, 3.4vw, 48px); background: var(--surface); }
.gap-fields { display: grid; gap: 16px; }
.gap-count { font-size: var(--step-lead); }
.gap-count b { font: 400 1.6em/1 var(--fd); color: #8a5200; transition: color var(--t) var(--ease); }
.gap-count.is-done b { color: var(--accent-text); }
.gap-f { display: grid; gap: 6px; font-weight: 600; }
.gap-f input {
  min-height: 48px; padding: 0 14px; font: 500 var(--step-body) var(--f); color: var(--ink);
  background: var(--bg); border: 1.5px dashed #b97a12; transition: border-color var(--t) var(--ease);
}
.gap-f input:not(:placeholder-shown) { border-style: solid; border-color: var(--accent); }
.gap-f input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.gap-out { margin: 0; min-width: 0; }
.gap-out figcaption { padding: 10px 20px; font: 600 var(--step-small)/1 var(--f-code); background: #0a2520; color: #a9cbbf; }
.gap-code mark { background: rgba(126, 232, 192, .22); color: #fff; border-radius: 2px; }

/* the health score as a dial that fills once */
.f-score { margin-top: clamp(80px, 9vw, 136px); padding: clamp(64px, 7vw, 104px) var(--m); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; background: var(--ink); color: var(--bg); }
.f-score .section-title { margin-bottom: 20px; }
.f-score-copy > p { font-size: var(--step-lead); line-height: 1.45; color: #a9cbbf; max-width: 34em; }
.f-score-dial { position: relative; width: clamp(200px, 24vw, 300px); aspect-ratio: 1; }
.f-score-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-track, .dial-fill { fill: none; stroke-width: 10; }
.dial-track { stroke: rgba(255, 255, 255, .1); }
.dial-fill { stroke: #7ee8c0; stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: calc(var(--c) * (1 - var(--v) / 100)); }
.dial-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial-num b { font: 400 clamp(4rem, 3rem + 4vw, 6.5rem)/.9 var(--fd); letter-spacing: -0.04em; }
.dial-num span { font-size: var(--step-small); color: #a9cbbf; }
.reasons { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.reasons li { padding-left: 22px; position: relative; line-height: 1.5; }
.reasons li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 2px; background: #7ee8c0; }
.f-score .note-small { margin-top: 20px; color: #a9cbbf; }
@media (prefers-reduced-motion: no-preference) {
  .js .f-score.rv .dial-fill { stroke-dashoffset: var(--c); }
  .js .f-score.rv.in .dial-fill { stroke-dashoffset: calc(var(--c) * (1 - var(--v) / 100)); transition: stroke-dashoffset 1600ms cubic-bezier(.22, 1, .36, 1) 300ms; }
}

/* the app's tools as a route table */
.routes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--surface-2); }
.routes a {
  display: grid; grid-template-columns: minmax(150px, .7fr) minmax(0, .7fr) minmax(0, 2fr) auto; gap: 8px 28px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--surface-2); text-decoration: none; color: inherit;
  transition: background-color var(--t) var(--ease), padding var(--t) var(--ease-out);
}
.routes code { font: 600 var(--step-small)/1.4 var(--f-code); color: var(--accent-text); }
.r-name { font: 400 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.1 var(--fd); }
.r-what { line-height: 1.5; color: var(--muted); }
.r-go { font-weight: 700; color: var(--accent-text); transition: transform var(--t) var(--ease-out); }
.routes a:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .routes a:hover { background: var(--surface); padding-left: 16px; padding-right: 16px; }
  .routes a:hover .r-go { transform: translate(3px, -3px); }
}

/* limits, said plainly */
.limits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.limits li { padding: 24px 0 0; border-top: 3px solid #b97a12; line-height: 1.55; }
.limits b { display: block; margin-bottom: 6px; font: 400 clamp(1.25rem, 1.05rem + .7vw, 1.6rem)/1.15 var(--fd); }

/* open the app on your own page */
.f-launch {
  margin: clamp(80px, 9vw, 136px) var(--m) 0; padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 72px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 72px); align-items: center; background: var(--surface);
}
.f-launch h2 { font-size: var(--step-head); }
.f-launch p { margin-top: 12px; font-size: var(--step-lead); line-height: 1.45; max-width: 32em; }
.f-launch-logo { width: clamp(104px, 12vw, 160px); height: auto; border-radius: 22%; }
.launch { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; max-width: 640px; }
.launch input {
  flex: 1 1 260px; min-width: 0; min-height: 52px; padding: 0 16px; font: 500 var(--step-body) var(--f); color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--surface-2); transition: border-color var(--t) var(--ease);
}
.launch input:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-color: var(--accent); }
.f-launch + .pager { padding-top: clamp(40px, 5vw, 64px); }
@media (prefers-reduced-motion: no-preference) {
  .js .f-launch.rv.in .f-launch-logo { animation: tilt-in 1100ms var(--ease-out) 300ms backwards; }
}

@media (max-width: 1024px) {
  .ptable { grid-template-columns: 1fr; }
  .pt-panel { position: static; }
  .gapbox { grid-template-columns: 1fr; }
  .routes a { grid-template-columns: minmax(0, 1fr) auto; }
  .routes code { grid-column: 1 / -1; }
  .r-what { grid-column: 1; }
  .r-go { grid-row: 2; grid-column: 2; }
  .limits { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pt-el { min-height: 0; padding: 10px; }
  .pt-name { font-size: 11.5px; }
  .f-score { grid-template-columns: 1fr; justify-items: start; }
  .f-launch { grid-template-columns: 1fr; }
  .launch .btn { width: 100%; }
}

/* ================= ReviewKind: its own sections ================= */
/* the logo's own colours: a deep green speech bubble, cream paper and a gold star */
.k-rate, .k-fork, .k-setup, .k-promise, .k-why, .k-close { --k-green: #17694f; --k-cream: #fffaf2; --k-gold: #f0a500; --k-gold-edge: #8a5a00; }
.k-rate, .k-fork, .k-setup, .k-promise, .k-close { padding: clamp(80px, 9vw, 136px) var(--m) 0; }
.k-head { max-width: 46em; margin-bottom: 40px; }
.k-head .section-title { margin-bottom: 18px; }
.k-head p { font-size: var(--step-lead); line-height: 1.45; color: var(--muted); }

/* rate it: four aspects, one to five stars, and a draft that changes its tone */
.k-rate-box { padding: clamp(20px, 3.4vw, 48px); background: var(--surface); border-radius: 32px 32px 32px 6px; }
.k-types { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.k-type {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--surface-2); background: var(--bg); color: var(--ink); font: 700 var(--step-small)/1 var(--f);
  transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform 160ms var(--ease);
}
.k-type.is-on { background: var(--k-green); border-color: var(--k-green); color: var(--k-cream); }
.k-type:active { transform: scale(.97); }
.k-type:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .k-type:not(.is-on):hover { border-color: var(--accent); } }
.k-rate-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.k-aspects { display: grid; }
.k-asp { margin: 0; padding: 12px 0; border: 0; border-bottom: 1px solid var(--surface-2); min-width: 0; }
.k-asp:last-child { border-bottom: 0; }
.k-asp legend { padding: 0; font: 400 clamp(1.3rem, 1.1rem + .7vw, 1.7rem)/1.1 var(--fd); letter-spacing: -0.01em; }
.k-stars { display: flex; flex-wrap: wrap; margin-top: 4px; margin-left: -7px; }
.k-star { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; border-radius: 10px; }
.k-star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.k-star svg { width: 30px; height: 30px; fill: transparent; stroke: var(--muted); stroke-width: 1.4; stroke-linejoin: round; pointer-events: none; transition: fill 200ms var(--ease), stroke 200ms var(--ease), transform 200ms var(--ease); }
.k-star.is-lit svg { fill: var(--k-gold); stroke: var(--k-gold-edge); }
.k-star:has(input:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .k-stars:hover .k-star svg { fill: var(--k-gold); stroke: var(--k-gold-edge); }
  .k-stars .k-star:hover ~ .k-star svg { fill: transparent; stroke: var(--muted); }
  .k-star:hover svg { transform: scale(1.12); }
}
.k-draft { position: sticky; top: 96px; margin: 0; display: grid; gap: 18px; padding: clamp(20px, 2.6vw, 32px); background: var(--bg); border-radius: 24px 24px 24px 4px; }
.k-draft-top { display: flex; align-items: center; gap: 12px; }
.k-draft-top img { flex: none; border-radius: 9px; }
.k-draft-top p { display: grid; line-height: 1.25; min-width: 0; }
.k-draft-top p span { font-size: var(--step-small); color: var(--muted); }
.k-biz { overflow-wrap: anywhere; }
.k-draft-top .k-avg { display: block; margin-left: auto; font: 400 2rem/1 var(--fd); white-space: nowrap; }
.k-avg span[aria-hidden] { color: var(--k-gold-edge); font-size: .8em; }
.k-tone { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 4px; border-radius: 999px; background: var(--surface); font: 700 var(--step-small)/1 var(--f); }
.k-tone span { position: relative; z-index: 1; padding: 9px 4px; text-align: center; color: var(--muted); transition: color var(--t) var(--ease); }
.k-tone-mark { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--k-green); transform: translateX(calc(var(--tone, 0) * 100%)); transition: transform 520ms var(--ease-out), background-color 520ms var(--ease); }
.k-draft[data-tone="1"] { --tone: 1; }
.k-draft[data-tone="2"] { --tone: 2; }
.k-draft[data-tone="1"] .k-tone-mark { background: #7a4f00; }
.k-draft[data-tone="2"] .k-tone-mark { background: #9a3412; }
.k-draft[data-tone="0"] .k-tone span:nth-child(1), .k-draft[data-tone="1"] .k-tone span:nth-child(2), .k-draft[data-tone="2"] .k-tone span:nth-child(3) { color: #fff; }
.k-text { margin: 0; min-height: 7.2em; font: 400 clamp(1.2rem, 1.05rem + .7vw, 1.6rem)/1.4 var(--fd); letter-spacing: -0.01em; }
.k-text p::before { content: "\201C"; }
.k-text p::after { content: "\201D"; }
.k-draft figcaption { font-size: var(--step-small); color: var(--muted); }
.k-tone-name { color: var(--ink); }
.k-rate-foot { margin-top: 28px; max-width: 62em; line-height: 1.6; color: var(--muted); }
.k-rate-foot .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent-text); font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .k-star.pop svg { animation: k-pop 380ms var(--ease-out); }
  .k-text .w { animation: k-word 420ms var(--ease-out) backwards; animation-delay: calc(var(--w) * 22ms); }
  .js .k-rate-box.rv .k-asp { opacity: 0; transform: translateY(12px); }
  .js .k-rate-box.rv.in .k-asp { opacity: 1; transform: none; transition: opacity 500ms var(--ease-out) calc(var(--k) * 90ms + 200ms), transform 600ms var(--ease-out) calc(var(--k) * 90ms + 200ms); }
}
@keyframes k-pop { 40% { transform: scale(1.32) rotate(-8deg); } }
@keyframes k-word { from { opacity: 0; } }

/* the fork: one review, two doors, the same for every rating */
.k-fork-box { display: grid; justify-items: center; }
.k-fork-top { display: grid; justify-items: center; gap: 8px; text-align: center; width: 100%; }
.k-slide { font-weight: 700; }
.k-range { width: min(320px, 100%); height: 44px; margin: 0; accent-color: var(--k-green); cursor: pointer; }
.k-range:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.k-chip { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.k-chip-stars { display: flex; gap: 2px; }
.k-chip-stars svg { width: 18px; height: 18px; fill: rgba(255, 255, 255, .2); transition: fill 240ms var(--ease); }
.k-chip-stars svg.is-lit { fill: var(--k-gold); }
.k-branch { display: block; width: 100%; max-width: 1040px; height: 110px; overflow: visible; }
.k-branch path { fill: none; stroke: var(--k-green); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.k-doors { width: 100%; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.k-door { display: grid; align-content: start; gap: 12px; padding: clamp(22px, 3vw, 36px); background: var(--surface); border-radius: 26px 26px 26px 4px; }
.k-door.is-owner { border-radius: 26px 26px 4px 26px; }
.k-door h3 { display: flex; align-items: center; gap: 12px; font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1.1 var(--fd); letter-spacing: -0.02em; }
.k-door-ico { flex: none; width: 1em; height: 1em; fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k-door p { line-height: 1.55; }
.k-fork-say { margin-top: 28px; font-size: var(--step-lead); text-align: center; }
.k-policy { max-width: 46em; margin: 24px auto 0; text-align: center; line-height: 1.6; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .js .k-fork-box.rv .k-branch path { stroke-dashoffset: 1; }
  .js .k-fork-box.rv.in .k-branch path { stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms cubic-bezier(.45, 0, .2, 1) 300ms; }
  .js .k-fork-box.rv .k-door { opacity: 0; transform: translateY(16px); }
  .js .k-fork-box.rv.in .k-door { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out) 1300ms, transform 700ms var(--ease-out) 1300ms; }
  .k-door.ping { animation: k-ping 700ms var(--ease-out); }
  .k-chip.ping { animation: k-nudge 420ms var(--ease-out); }
}
@keyframes k-ping { from { box-shadow: 0 0 0 0 rgba(23, 105, 79, .45); } to { box-shadow: 0 0 0 16px rgba(23, 105, 79, 0); } }
@keyframes k-nudge { 40% { transform: scale(1.06); } }

/* set it up once: a few fields, a link that carries the settings, and a printable card */
.k-setup { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.k-setup .section-title { margin-bottom: 20px; }
.k-setup-lead { font-size: var(--step-lead); line-height: 1.45; max-width: 32em; }
.k-try { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; max-width: 580px; }
.k-field { display: grid; gap: 6px; font-weight: 600; min-width: 0; }
.k-field input, .k-field select {
  width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 10px;
  font: 500 var(--step-body) var(--f); color: var(--ink); background: #fff; border: 1.5px solid var(--surface-2);
  transition: border-color var(--t) var(--ease);
}
.k-field input:focus-visible, .k-field select:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-color: var(--accent); }
.k-link { margin-top: 18px; max-width: 580px; padding: 14px 16px; border-radius: 10px; background: var(--ink); color: #d6efe6; font: 13px/1.55 var(--f-code); overflow-wrap: anywhere; }
.k-link-b { color: #ffd166; }
.k-setup .note-small { margin-top: 12px; max-width: 40em; }
.k-card-wrap { display: grid; place-items: center; padding: 12px; }
.k-card {
  width: min(100%, 340px); display: grid; justify-items: center; gap: 4px; padding: 26px 26px 24px; text-align: center;
  background: var(--k-cream); color: var(--ink); border-top: 12px solid var(--k-green); border-radius: 18px;
  box-shadow: none;
  transform: rotate(-3deg); transition: transform 700ms var(--ease-out);
}
.k-card-ask { font: 400 clamp(1.6rem, 1.3rem + 1vw, 2rem)/1.05 var(--fd); letter-spacing: -0.02em; }
.k-card-name { margin-top: 4px; font-size: 1.15rem; font-weight: 700; overflow-wrap: anywhere; }
.k-card-type { font-size: var(--step-small); color: var(--muted); }
.k-qr { width: 76%; height: auto; margin: 14px 0 8px; border-radius: 6px; }
.k-card-foot { font-weight: 700; color: var(--k-green); }
@media (hover: hover) and (pointer: fine) { .k-card:hover { transform: rotate(0deg) translateY(-6px); } }
@media (prefers-reduced-motion: no-preference) {
  .k-card-name.swap, .k-card-type.swap, .k-link-b.swap { animation: swap 360ms var(--ease-out); }
  .js .k-card-wrap.rv .k-card { opacity: 0; transform: translateY(48px) rotate(8deg); }
  .js .k-card-wrap.rv.in .k-card { opacity: 1; transform: rotate(-3deg); transition: opacity 600ms var(--ease-out) 150ms, transform 1100ms var(--ease-out) 150ms; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .js .k-card-wrap.rv.in .k-card:hover { transform: rotate(0deg) translateY(-6px); transition: transform 700ms var(--ease-out); }
}
@media (prefers-reduced-motion: reduce) { .k-card { transition: none; } }

/* honest by design: the promises printed as a till receipt */
.k-promise { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.k-promise-copy { position: sticky; top: 110px; }
.k-promise-copy .section-title { margin-bottom: 20px; }
.k-promise-copy p { font-size: var(--step-lead); line-height: 1.45; max-width: 26em; }
.k-receipt-wrap { display: grid; justify-items: center; padding-bottom: 16px; }
.k-receipt { position: relative; width: min(100%, 520px); padding: 28px clamp(20px, 3vw, 36px) 32px; background: #fff; box-shadow: none; }
.k-receipt::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px; background: conic-gradient(from 135deg at top, #fff 90deg, transparent 0) 0 0 / 18px 100%; }
.k-rc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 2px dashed var(--surface-2); }
.k-rc-head img { grid-row: span 2; border-radius: 10px; }
.k-rc-head b { font-size: 1.15rem; }
.k-rc-head span { font-size: var(--step-small); color: var(--muted); }
.k-rc-list { margin: 0; }
.k-rc-list > div { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 14px; padding: 14px 0; border-bottom: 1px dotted #9cc7b7; }
.k-rc-list > div::before {
  content: ""; grid-row: span 2; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--k-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fffaf2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.k-rc-list dt { font-weight: 700; }
.k-rc-list dd { margin: 0; color: var(--muted); line-height: 1.5; }
.k-rc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 6px; padding-top: 18px; border-top: 2px dashed var(--surface-2); font-weight: 700; }
.k-rc-total b { font: 400 3rem/1 var(--fd); color: var(--k-green); }
@media (prefers-reduced-motion: no-preference) {
  .js .k-receipt-wrap.rv .k-receipt { clip-path: inset(0 0 100% 0); }
  .js .k-receipt-wrap.rv.in .k-receipt { clip-path: inset(0 0 -12px 0); transition: clip-path 1600ms cubic-bezier(.3, 0, .2, 1) 150ms; }
  .js .k-receipt-wrap.rv .k-rc-list > div { opacity: 0; }
  .js .k-receipt-wrap.rv.in .k-rc-list > div { opacity: 1; transition: opacity 400ms var(--ease) calc(var(--k) * 160ms + 450ms); }
}

/* why it helps: fresh reviews keep rising, beside what Google says */
.k-why {
  margin-top: clamp(80px, 9vw, 136px); padding: clamp(64px, 8vw, 120px) var(--m);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(36px, 6vw, 96px); align-items: center;
  background: var(--k-green); color: var(--k-cream); overflow: hidden;
}
.k-why .section-title { color: var(--k-cream); margin-bottom: 24px; }
.k-why-big { font: 400 clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem)/1.18 var(--fd); letter-spacing: -0.015em; max-width: 22em; }
.k-why-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; max-width: 36em; }
.k-why-list li { position: relative; padding-left: 30px; line-height: 1.55; color: #e9f6f0; }
.k-why-list li::before { content: "\2605"; position: absolute; left: 0; top: -.05em; color: var(--k-gold); font-size: 1.15em; }
.k-stream { height: clamp(320px, 34vw, 440px); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent); }
.k-stream-track { display: grid; gap: 14px; padding-bottom: 14px; }
.k-bub { display: grid; gap: 6px; width: fit-content; max-width: 92%; padding: 14px 18px; background: var(--k-cream); color: var(--ink); border-radius: 18px 18px 18px 4px; line-height: 1.4; }
.k-bub:nth-child(even) { margin-left: auto; border-radius: 18px 18px 4px 18px; }
.k-bub-stars { display: flex; gap: 2px; }
.k-bub-stars svg { width: 16px; height: 16px; fill: #ddd3c2; }
.k-bub-stars svg.is-lit { fill: var(--k-gold); stroke: var(--k-gold-edge); stroke-width: 1; }
@media (prefers-reduced-motion: no-preference) {
  .k-stream-track { animation: k-rise 28s linear infinite; }
  .k-stream:hover .k-stream-track { animation-play-state: paused; }
}
@keyframes k-rise { to { transform: translateY(-50%); } }

/* the call: a speech bubble, with the logo landing on its corner */
.k-bubble { position: relative; max-width: 1000px; margin: 0 auto; padding: clamp(44px, 6vw, 80px) clamp(24px, 6vw, 88px); background: var(--surface); border-radius: 40px 40px 40px 10px; }
.k-bubble::after { content: ""; position: absolute; left: clamp(40px, 8vw, 110px); top: calc(100% - 1px); width: 56px; height: 36px; background: var(--surface); clip-path: polygon(0 0, 100% 0, 0 100%); }
.k-bubble h2 { font-size: var(--step-head); max-width: 9em; padding-right: clamp(0px, 10vw, 120px); }
.k-bubble p { margin-top: 16px; font-size: var(--step-lead); line-height: 1.45; max-width: 30em; }
.k-close-logo { position: absolute; top: -44px; right: clamp(16px, 5vw, 64px); width: clamp(88px, 10vw, 128px); height: auto; transform: rotate(-8deg); filter: drop-shadow(0 14px 20px rgba(16, 48, 42, .2)); }
.k-close-actions { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.k-close-actions .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--accent-text); }
.k-close + .pager { padding-top: clamp(80px, 9vw, 128px); }
@media (prefers-reduced-motion: no-preference) {
  .js .k-bubble.rv.in .k-close-logo { animation: k-land 1000ms var(--ease-out) 250ms backwards; }
}
@keyframes k-land { 0% { opacity: 0; transform: translateY(-30px) rotate(-30deg) scale(.6); } 60% { opacity: 1; transform: rotate(4deg) scale(1.06); } 100% { transform: rotate(-8deg); } }

@media (max-width: 1024px) {
  .k-rate-grid { grid-template-columns: 1fr; }
  .k-draft { position: static; }
  .k-setup, .k-promise { grid-template-columns: 1fr; }
  .k-promise-copy { position: static; }
  .k-why { grid-template-columns: 1fr; }
  .k-stream { order: 2; height: 300px; }
}
@media (max-width: 640px) {
  .k-branch { display: none; }
  .k-doors { grid-template-columns: 1fr; margin-top: 24px; }
  .k-try { grid-template-columns: 1fr; }
  .k-text { min-height: 0; }
  .k-close-actions .btn { width: 100%; }
  .k-bubble h2 { padding-right: 72px; }
  .k-close-logo { width: 80px; top: -36px; }
}
@media (max-width: 380px) {
  .k-stars { margin-left: -9px; }
  .k-star svg { width: 26px; height: 26px; }
  .k-tone { font-size: 12px; }
}

/* ================= Titleon: its own sections ================= */
/* the logo's own colours: a navy tile, a white pill that reads "on", and a gold knob */
.ti-fit, .ti-run, .ti-scan, .ti-never, .ti-bulk, .ti-board, .ti-close {
  --ti-navy: #111a2e; --ti-navy-2: #26324d; --ti-gold: #d9a441; --ti-paper: #fff;
  --ti-over: #c2410c; --ti-over-text: #9a3412; --ti-near: #b7791f;
  padding: clamp(80px, 9vw, 136px) var(--m) 0;
}
.ti-head { max-width: 50em; margin-bottom: 40px; padding-left: clamp(16px, 2vw, 28px); border-left: 3px solid var(--ti-navy); }
.ti-head .section-title { margin-bottom: 18px; }
.ti-head p { font-size: var(--step-lead); line-height: 1.45; color: var(--muted); }
.ti-fit button, .ti-run button, .ti-scan button, .ti-never button, .ti-bulk button { font-family: var(--f); cursor: pointer; }

/* 1. the meter: type a title, watch two bars fill, and see where Google would cut it */
.ti-meter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 44px); align-items: start; padding: clamp(16px, 3.2vw, 44px); background: var(--surface); border-radius: 30px; }
.ti-meter-in { display: grid; gap: 22px; min-width: 0; }
.ti-meter-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ti-switch { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: var(--ti-navy); isolation: isolate; }
.ti-switch button { position: relative; z-index: 1; min-height: 44px; padding: 0 34px 0 18px; border: 0; border-radius: 999px; background: none; color: #f3f5fa; font: 700 var(--step-small)/1 var(--f); }
.ti-switch button.is-on { color: var(--ti-navy); }
.ti-switch button:focus-visible { outline: 2px solid var(--ti-gold); outline-offset: 2px; }
.ti-switch-knob { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--ti-paper); transform: translateX(0); }
.ti-switch-knob::after { content: ""; position: absolute; right: 7px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--ti-gold); }
.ti-meter[data-mode="desc"] .ti-switch-knob { transform: translateX(100%); }
.ti-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-pre { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--surface-2); background: var(--bg); color: var(--ink); font: 700 var(--step-small)/1 var(--f); }
.ti-pre:active { transform: scale(.97); }
.ti-field { display: grid; gap: 8px; }
.ti-field-l { font-weight: 700; }
.ti-field textarea { width: 100%; min-height: 96px; padding: 14px 16px; resize: vertical; border: 1.5px solid var(--surface-2); border-radius: 16px; background: var(--ti-paper); color: var(--ink); font: 500 1.0625rem/1.5 var(--f); }
.ti-field textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-color: var(--accent); }
.ti-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ti-g-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; font-size: var(--step-small); }
.ti-g-top > span:first-child { font-weight: 700; }
.ti-g-n { font: 400 1.9rem/1 var(--fd); font-variant-numeric: tabular-nums; }
.ti-g-of { color: var(--muted); }
.ti-bar { position: relative; display: block; height: 12px; border-radius: 999px; background: var(--surface-2); }
.ti-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--f, 0) * 100%); border-radius: 999px; background: var(--accent); }
.ti-band { position: absolute; top: -3px; bottom: -3px; left: calc(var(--b0, 0) * 100%); width: calc((var(--b1, 0) - var(--b0, 0)) * 100%); border-radius: 4px; background: rgba(17, 26, 46, .12); }
.ti-tick { position: absolute; top: -6px; bottom: -6px; left: calc(var(--lim, .8) * 100%); width: 2px; margin-left: -1px; background: var(--ti-navy); }
.ti-gauge[data-s="near"] .ti-fill { background: var(--ti-near); }
.ti-gauge[data-s="over"] .ti-fill, .ti-gauge[data-s="short"] .ti-fill { background: var(--ti-over); }
.ti-gauge[data-s="over"] .ti-g-n, .ti-gauge[data-s="short"] .ti-g-n { color: var(--ti-over-text); }
.ti-say { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.ti-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.ti-meter[data-state="over"] .ti-dot, .ti-meter[data-state="short"] .ti-dot { background: var(--ti-over); }
.ti-meter[data-state="near"] .ti-dot { background: var(--ti-near); }
.ti-meter[data-state="over"] .ti-say, .ti-meter[data-state="short"] .ti-say { color: var(--ti-over-text); }

/* a Google-style result, in Arial at Google's sizes, so the pixel count and the cut agree */
.ti-serp { margin: 0; display: grid; gap: 6px; padding: clamp(18px, 2.4vw, 28px); background: var(--ti-paper); border-radius: 20px; color: #202124; font-family: Arial, sans-serif; box-shadow: none; min-width: 0; }
.ti-site { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ti-site p { display: grid; line-height: 1.3; min-width: 0; }
.ti-site b { font-size: 14px; font-weight: 400; color: #202124; }
.ti-site span { font-size: 13px; color: #4d5156; overflow-wrap: anywhere; }
.ti-site img { flex: none; border-radius: 50%; background: #f1f3f4; }
.ti-fav { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ti-navy); color: #fff; font: 700 13px/1 Arial, sans-serif; }
.ti-serp-title { margin-top: 4px; font: 400 20px/1.3 Arial, sans-serif; color: #1a0dab; overflow-wrap: anywhere; }
.ti-serp-desc { font: 400 14px/1.58 Arial, sans-serif; color: #4d5156; overflow-wrap: anywhere; }
.ti-cut { color: #8a9096; text-decoration: line-through; text-decoration-color: var(--ti-over); text-decoration-thickness: 1.5px; }
.ti-cut:empty { display: none; }
.ti-serp figcaption { margin-top: 10px; padding-top: 12px; border-top: 1px solid #e8eaed; font: 400 var(--step-small)/1.5 var(--f); color: var(--muted); }
.ti-foot { margin-top: 22px; max-width: 62em; line-height: 1.6; color: var(--muted); }
.ti-foot .text-link, .ti-board-head .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent-text); font-weight: 700; }

/* 2. a real run: the result card flips between its options */
.ti-run-box { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); grid-template-areas: "picks stage" "meas stage" "copy stage"; gap: 22px clamp(24px, 4vw, 64px); align-items: start; }
.ti-picks { grid-area: picks; display: grid; gap: 12px; }
.ti-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ti-pick-l { width: 7.5em; font-weight: 700; }
.ti-pick button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--surface-2); background: var(--bg); color: var(--ink); font: 700 1rem/1 var(--f); }
.ti-pick button.is-on { background: var(--ti-navy); border-color: var(--ti-navy); color: #fff; box-shadow: inset 0 0 0 3px var(--ti-navy), inset 0 0 0 5px var(--ti-gold); }
.ti-pick button:focus-visible, .ti-copy-btn:focus-visible, .ti-src button:focus-visible, .ti-chips button:focus-visible, .ti-pre:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.ti-stage { grid-area: stage; perspective: 1400px; }
.ti-card { margin: 0; display: grid; gap: 10px; padding: clamp(22px, 3vw, 40px); background: var(--ti-paper); border-radius: 26px; color: #202124; font-family: Arial, sans-serif; box-shadow: none; transform-origin: 50% 50%; }
.ti-card-title { font: 400 clamp(20px, 1.1rem + .6vw, 26px)/1.3 Arial, sans-serif; color: #1a0dab; }
.ti-card-desc { font: 400 clamp(14px, .85rem + .2vw, 16px)/1.6 Arial, sans-serif; color: #4d5156; }
.ti-card-desc b { color: #202124; }
.ti-meas { grid-area: meas; margin: 0; display: grid; gap: 14px; }
.ti-meas > div { display: grid; gap: 4px; padding-top: 14px; border-top: 1px solid var(--surface-2); }
.ti-meas dt { font: 400 1.4rem/1.1 var(--fd); }
.ti-meas dd { margin: 0; color: var(--muted); }
.ti-meas dd b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ti-mini { display: block; height: 8px; margin-top: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ti-mini i { display: block; height: 100%; width: calc(var(--f, 0) * 100%); border-radius: 999px; background: var(--accent); }
.ti-copy { grid-area: copy; display: grid; gap: 12px; min-width: 0; }
.ti-copy-btn { justify-self: start; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--ti-navy); background: var(--ti-paper); color: var(--ti-navy); font: 700 var(--step-body)/1 var(--f); }
.ti-copy-btn.is-done { background: var(--ti-navy); color: #fff; }
.ti-copy pre { margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--ti-navy); }
.ti-copy code { font: 13px/1.6 var(--f-code); color: #e7ecf6; white-space: pre-wrap; overflow-wrap: anywhere; }
.ti-run .note-small { margin-top: 24px; }

/* 3. the page, read part by part: a scan line passes, the part you pick lights up */
.ti-scan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.ti-scan .section-title { margin-bottom: 18px; }
.ti-scan-lead { font-size: var(--step-lead); line-height: 1.45; color: var(--muted); margin-bottom: 26px; }
.ti-opt { margin-bottom: 18px; }
.ti-opt-l { font-weight: 700; margin-bottom: 8px; }
.ti-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-chips button, .ti-src button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--surface-2); background: var(--bg); color: var(--ink); font: 700 var(--step-small)/1 var(--f); }
.ti-chips button.is-on, .ti-src button.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ti-page { position: relative; overflow: hidden; border-radius: 22px; background: var(--ti-paper); box-shadow: none; }
.ti-page-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--surface); }
.ti-page-bar span { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-2); }
.ti-page-bar p { margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: var(--bg); font-size: 13px; color: var(--muted); overflow-wrap: anywhere; min-width: 0; }
.ti-page-in { position: relative; display: grid; gap: 8px; padding: clamp(16px, 2.4vw, 28px); }
.ti-badge { justify-self: end; padding: 6px 14px; border-radius: 999px; background: var(--ti-navy); color: #fff; font: 700 13px/1.2 var(--f); }
.ti-zone { display: grid; justify-items: start; gap: 6px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px transparent; }
.ti-zone i { display: block; width: var(--w); height: 9px; border-radius: 6px; background: #dfe9e5; }
.ti-zone i.is-h1 { height: 18px; background: #c7d6d0; }
.ti-zone i.is-h2 { height: 13px; background: #d3e0db; }
.ti-tag { font: 600 13px/1 var(--f); color: var(--muted); }
.ti-page[data-z="title"] .ti-zone[data-z="title"], .ti-page[data-z="meta"] .ti-zone[data-z="meta"], .ti-page[data-z="heads"] .ti-zone[data-z="heads"], .ti-page[data-z="text"] .ti-zone[data-z="text"] { background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ti-page[data-z="title"] .ti-zone[data-z="title"] i, .ti-page[data-z="meta"] .ti-zone[data-z="meta"] i, .ti-page[data-z="heads"] .ti-zone[data-z="heads"] i, .ti-page[data-z="text"] .ti-zone[data-z="text"] i { background: var(--accent); }
.ti-kw { display: grid; gap: 8px; margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--bg); }
.ti-kw-l { font: 700 13px/1.2 var(--f); color: var(--muted); }
.ti-kw-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-kw-row b { padding: 4px 10px; border-radius: 999px; background: var(--ti-gold); color: var(--ti-navy); font: 700 13px/1.3 var(--f); }
.ti-kw-row s { width: 46px; height: 22px; border-radius: 999px; border: 1.5px dashed var(--surface-2); }
.ti-beam { position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; background: rgba(18, 163, 127, .55); height: 3px; opacity: 0; }

/* 4. the switch: Gemini on, or its own writer, and six lines either way */
.ti-never-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy sw" "lanes lanes" "out out"; gap: 32px clamp(24px, 4vw, 64px); padding: clamp(28px, 5vw, 72px); border-radius: 40px; background: var(--ti-navy); color: #f3f5fa; }
.ti-never-copy { grid-area: copy; }
.ti-never-copy h2 { font-size: var(--step-head); color: #fff; }
.ti-never-copy p { margin-top: 18px; font-size: var(--step-lead); line-height: 1.45; color: #c9d0de; max-width: 32em; }
.ti-big-wrap { grid-area: sw; display: grid; justify-items: center; align-content: center; gap: 10px; }
.ti-big-wrap p { font-weight: 700; color: #f3f5fa; }
.ti-big { position: relative; width: 176px; height: 88px; padding: 0; border: 0; border-radius: 999px; background: var(--ti-paper); color: var(--ti-navy); }
.ti-big:focus-visible { outline: 3px solid var(--ti-gold); outline-offset: 4px; }
.ti-big-on, .ti-big-off { position: absolute; top: 50%; transform: translateY(-50%); font: 700 30px/1 var(--f); letter-spacing: -0.02em; }
.ti-big-on { left: 24px; }
.ti-big-off { right: 22px; color: #e4e8f0; opacity: 0; }
.ti-big i { position: absolute; top: 10px; left: 10px; width: 68px; height: 68px; border-radius: 50%; background: var(--ti-gold); transform: translateX(88px); }
.ti-big[aria-checked="false"] { background: var(--ti-navy-2); box-shadow: inset 0 0 0 2px #4a5878; }
.ti-big[aria-checked="false"] .ti-big-on { opacity: 0; }
.ti-big[aria-checked="false"] .ti-big-off { opacity: 1; }
.ti-big[aria-checked="false"] i { transform: none; background: #aab3c5; }
.ti-lanes { grid-area: lanes; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ti-lane { padding: clamp(20px, 2.6vw, 32px); border-radius: 24px; box-shadow: inset 0 0 0 1.5px #34405c; }
.ti-lane h3 { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--fd); color: #fff; margin-bottom: 10px; }
.ti-lane p { color: #c9d0de; line-height: 1.55; }
.ti-never-box[data-ai="on"] .ti-lane.is-ai, .ti-never-box[data-ai="off"] .ti-lane.is-own { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 2px var(--ti-gold); }
.ti-ingr { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ti-ingr li { padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #4a5878; color: #e4e8f0; font: 700 var(--step-small)/1.2 var(--f); }
.ti-never-box[data-ai="off"] .ti-ingr li { background: var(--ti-gold); color: var(--ti-navy); box-shadow: none; }
.ti-out { grid-area: out; font-size: var(--step-lead); color: #f3f5fa; }
.ti-out b { display: inline-block; font: 700 1.4em/1 var(--f); color: var(--ti-gold); }
.ti-out-by { color: #c9d0de; }

/* 5. bulk: a queue that writes, pauses at the hourly limit, carries on, and hands over three files */
.ti-bulk-box { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ti-bulk-run { display: grid; gap: 16px; min-width: 0; }
.ti-src { display: flex; flex-wrap: wrap; gap: 8px; }
.ti-queue-wrap { padding: clamp(16px, 2.2vw, 26px); border-radius: 22px; background: var(--ti-paper); box-shadow: none; }
.ti-queue-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-weight: 700; }
.ti-src-name { font-family: var(--f); font-size: var(--step-small); }
.ti-count { color: var(--muted); font-weight: 500; }
.ti-count b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ti-prog { display: block; height: 6px; margin: 12px 0 6px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.ti-prog i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); border-radius: 999px; }
.ti-queue { list-style: none; margin: 0; padding: 0; }
.ti-queue li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--surface); border-radius: 6px; }
.ti-queue li:last-child { border-bottom: 0; }
.ti-q-url { font: 13px/1.4 var(--f); overflow-wrap: anywhere; min-width: 0; }
.ti-q-st { flex: none; padding: 4px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font: 700 12px/1.2 var(--f); }
.ti-queue li[data-s="writing"] .ti-q-st { background: var(--ti-gold); color: var(--ti-navy); }
.ti-queue li[data-s="done"] .ti-q-st { background: var(--accent); color: var(--accent-ink); }
.ti-queue li[data-s="paused"] .ti-q-st { background: var(--ti-navy); color: #fff; }
.ti-bulk-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ti-bulk-say { font-weight: 700; }
.ti-files { display: grid; gap: 14px; }
.ti-files-l { font: 400 1.6rem/1 var(--fd); }
.ti-files ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ti-file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--surface); }
.ti-file b { display: block; font-size: 1.05rem; }
.ti-file code { font: 13px/1.4 var(--f-code); color: var(--muted); }
.ti-file p { margin-top: 4px; font-size: var(--step-small); line-height: 1.5; color: var(--muted); }
.ti-doc { display: grid; place-items: end center; width: 46px; height: 56px; padding-bottom: 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink); font: 700 11px/1 var(--f); clip-path: polygon(0 0, 68% 0, 100% 24%, 100% 100%, 0 100%); }
.ti-files.is-ready .ti-doc { background: var(--ti-navy); color: var(--ti-gold); }
.ti-toast { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 18px; background: var(--ti-navy); color: #f3f5fa; visibility: hidden; opacity: 0; transform: translateY(12px); }
.ti-toast img { flex: none; border-radius: 10px; }
.ti-toast p { display: grid; line-height: 1.35; }
.ti-toast span { color: #c9d0de; font-size: var(--step-small); }
.ti-files.is-ready .ti-toast { visibility: visible; opacity: 1; transform: none; }

/* 6. the extras, as a board of switches that flick on */
.ti-board-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: 36px; }
.ti-board-head .section-title { margin-bottom: 0; }
.ti-board-head p { color: var(--muted); max-width: 26em; }
.ti-board-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.ti-board-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px 0; border-top: 1px solid var(--surface-2); }
.ti-board-list h3 { font: 400 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.15 var(--fd); margin-bottom: 6px; }
.ti-board-list p { color: var(--muted); line-height: 1.55; }
.ti-sw { position: relative; display: block; width: 52px; height: 30px; margin-top: 2px; border-radius: 999px; background: var(--ti-navy); }
.ti-sw i { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--ti-gold); transform: translateX(22px); }
.js .ti-board-list.rv:not(.in) .ti-sw { background: var(--surface-2); }
.js .ti-board-list.rv:not(.in) .ti-sw i { background: #fff; transform: none; }

/* 7. the close: the wordmark's own toggle switches on */
.ti-close { position: relative; }
.ti-close-box { position: relative; max-width: 1080px; margin: 0 auto; padding: clamp(36px, 6vw, 84px) clamp(22px, 6vw, 88px); border-radius: 40px; background: var(--surface); }
.ti-word { display: flex; align-items: center; gap: .12em; margin-bottom: 26px; font: 700 clamp(52px, 9vw, 132px)/1 var(--f); letter-spacing: -0.045em; color: var(--ti-navy); }
.ti-word-pill { position: relative; display: inline-block; flex: none; width: 1.62em; height: .8em; border-radius: 999px; background: var(--ti-navy); }
.ti-word-pill b { position: absolute; left: .26em; top: 50%; transform: translateY(-52%); font-size: .42em; letter-spacing: -0.02em; color: #fff; }
.ti-word-pill i { position: absolute; top: .09em; right: .09em; width: .62em; height: .62em; border-radius: 50%; background: var(--ti-gold); }
.js .ti-close-box.rv:not(.in) .ti-word-pill { background: #9fb3ab; }
.js .ti-close-box.rv:not(.in) .ti-word-pill b { opacity: 0; }
.js .ti-close-box.rv:not(.in) .ti-word-pill i { transform: translateX(-.82em); background: #fff; }
.ti-close-box h2 { font-size: var(--step-head); max-width: 10em; }
.ti-close-box > p:not(.ti-word) { margin-top: 16px; font-size: var(--step-lead); line-height: 1.45; max-width: 28em; color: var(--muted); }
.ti-close-actions { margin-top: 30px; }
.ti-close-links { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 26px; }
.ti-close-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--accent-text); font-weight: 700; text-decoration: none; }
.ti-close-links a:hover { text-decoration: underline; }
.ti-close-logo { position: absolute; right: calc(var(--m) + clamp(24px, 5vw, 72px)); bottom: clamp(30px, 5vw, 70px); width: clamp(120px, 15vw, 200px); height: auto; border-radius: 22%; transform: rotate(8deg); filter: drop-shadow(0 18px 26px rgba(17, 26, 46, .28)); }
.ti-close + .pager { padding-top: clamp(80px, 9vw, 128px); }

@media (hover: hover) and (pointer: fine) {
  .ti-pre:hover, .ti-chips button:not(.is-on):hover, .ti-src button:not(.is-on):hover, .ti-pick button:not(.is-on):hover { border-color: var(--accent); }
  .ti-copy-btn:not(.is-done):hover { background: var(--surface); }
}
@media (prefers-reduced-motion: no-preference) {
  .ti-switch-knob { transition: transform 420ms var(--ease-out); }
  .ti-switch button, .ti-pre, .ti-chips button, .ti-src button, .ti-pick button, .ti-copy-btn { transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform 160ms var(--ease); }
  .ti-fill, .ti-mini i { transition: width 320ms var(--ease-out), background-color var(--t) var(--ease); }
  .ti-band, .ti-tick { transition: left 420ms var(--ease-out), width 420ms var(--ease-out); }
  .ti-dot { transition: background-color var(--t) var(--ease); }
  .ti-say.pulse .ti-dot { animation: ti-pulse 600ms var(--ease-out); }
  .ti-zone, .ti-zone i { transition: background-color 360ms var(--ease), box-shadow 360ms var(--ease); }
  .ti-badge.swap { animation: ti-pop 420ms var(--ease-out); }
  .ti-page-in.swap { animation: ti-fade 420ms var(--ease-out); }
  .js .ti-page .ti-beam { animation: ti-beam 4.2s cubic-bezier(.45, 0, .55, 1) infinite; }
  .ti-big, .ti-big-on, .ti-big-off { transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease), opacity 300ms var(--ease); }
  .ti-big i { transition: transform 520ms cubic-bezier(.34, 1.4, .64, 1), background-color 420ms var(--ease); }
  .ti-lane { transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease); }
  .ti-ingr li { transition: background-color 360ms var(--ease) calc(var(--k) * 90ms), color 360ms var(--ease) calc(var(--k) * 90ms), box-shadow 360ms var(--ease) calc(var(--k) * 90ms); }
  .ti-out.pulse b { animation: ti-pop 520ms var(--ease-out); }
  .ti-prog i { transition: width 360ms var(--ease-out); }
  .ti-q-st { transition: background-color 260ms var(--ease), color 260ms var(--ease); }
  .ti-queue li[data-s="writing"] { animation: ti-row 700ms var(--ease) infinite alternate; }
  .ti-doc { transition: background-color 420ms var(--ease) calc(var(--k) * 140ms), color 420ms var(--ease) calc(var(--k) * 140ms); }
  .ti-files.is-ready .ti-file { animation: ti-drop 620ms var(--ease-out) calc(var(--k) * 140ms) backwards; }
  .ti-toast { transition: opacity 500ms var(--ease-out) 520ms, transform 600ms var(--ease-out) 520ms, visibility 0s linear 520ms; }
  .ti-sw, .ti-sw i { transition: transform 520ms cubic-bezier(.34, 1.4, .64, 1) calc(var(--k, 0) * 110ms + 250ms), background-color 360ms var(--ease) calc(var(--k, 0) * 110ms + 250ms); }
  .ti-word-pill, .ti-word-pill b, .ti-word-pill i { transition: transform 720ms cubic-bezier(.34, 1.4, .64, 1) 500ms, background-color 500ms var(--ease) 500ms, opacity 400ms var(--ease) 700ms; }
  .ti-close-logo { transition: transform 600ms var(--ease-out); }
  .ti-card.flip-out { animation: ti-flip-out 200ms cubic-bezier(.55, 0, 1, .45) forwards; }
  .ti-card.flip-in { animation: ti-flip-in 420ms var(--ease-out); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .ti-close:hover .ti-close-logo { transform: rotate(0deg) translateY(-6px); }
}
@keyframes ti-pulse { 40% { transform: scale(1.7); } }
@keyframes ti-pop { 40% { transform: scale(1.18); } }
@keyframes ti-fade { from { opacity: .3; } }
@keyframes ti-beam { 0% { transform: translateY(-100px); opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(560px); opacity: 0; } }
@keyframes ti-row { from { background-color: transparent; } to { background-color: rgba(217, 164, 65, .16); } }
@keyframes ti-drop { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes ti-flip-out { to { transform: rotateX(80deg); opacity: .2; } }
@keyframes ti-flip-in { from { transform: rotateX(-80deg); opacity: .2; } }

@media (max-width: 1024px) {
  .ti-meter { grid-template-columns: 1fr; }
  .ti-run-box { grid-template-columns: 1fr; grid-template-areas: "picks" "stage" "meas" "copy"; }
  .ti-scan { grid-template-columns: 1fr; }
  .ti-bulk-box { grid-template-columns: 1fr; }
  .ti-close-logo { width: 110px; right: calc(var(--m) + 24px); bottom: auto; top: clamp(100px, 10vw, 140px); }
}
@media (max-width: 760px) {
  .ti-never-box { grid-template-columns: 1fr; grid-template-areas: "copy" "sw" "lanes" "out"; border-radius: 28px; }
  .ti-big-wrap { justify-items: start; }
  .ti-lanes { grid-template-columns: 1fr; }
  .ti-board-list { grid-template-columns: 1fr; }
  .ti-close-box { border-radius: 28px; }
  .ti-close-logo { width: 72px; top: 100px; right: calc(var(--m) + 16px); }
  .ti-close-actions .btn { width: 100%; }
}
@media (max-width: 560px) {
  .ti-gauges { grid-template-columns: 1fr; }
  .ti-switch { width: 100%; }
  .ti-pick-l { width: 100%; }
  .ti-word { font-size: 48px; }
  .ti-close-logo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ti-fit *, .ti-run *, .ti-scan *, .ti-never *, .ti-bulk *, .ti-board *, .ti-close * { transition: none !important; animation: none !important; }
}
.d-shot { width: 100%; height: auto; border-radius: var(--r); background: var(--surface); }
.d-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0 0 32px; }
.d-figs div { padding: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.d-figs dd { margin: 0; font: 400 clamp(30px, 2.6vw, 44px)/1 var(--fd); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.d-figs dt { font-size: var(--step-small); line-height: 1.35; }
.d-soon { position: relative; z-index: 1; display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px 24px; margin-top: 64px; padding: 24px 28px; border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; transition: background var(--t) var(--ease); }
.d-soon b { font: 400 var(--step-lead)/1.2 var(--fd); }
.d-soon:hover { background: var(--surface-2); }

@media (max-width: 900px) {

  .d-figs dd { font-size: clamp(24px, 6.4vw, 34px); }
}
@media (max-width: 560px) {
  .d-figs { gap: 6px; }
  .d-figs dt { font-size: 13px; }
  .d-soon { grid-template-columns: 1fr; }
}

/* ================= Logo marks for tools ================= */
.tmark { width: 32px; height: 32px; border-radius: 9px; background: #fff; object-fit: contain; flex: none; }
.tmark-letter { display: inline-grid; place-content: center; font: 400 22px/1 var(--fd); color: var(--bg); background: var(--ink); }

.screens { padding: var(--gap) var(--m) 0; }
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 24px; }
.strip a, .screens-own { display: block; color: var(--ink); text-decoration: none; }
.strip figure, .screens-own figure { margin: 0; }
.strip img, .screens-own img { display: block; width: 100%; height: auto; aspect-ratio: 960 / 660; object-fit: cover; object-position: top; border-radius: var(--r); background: var(--surface); transition: transform 320ms var(--ease-out); }
.strip figcaption { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 12px; margin-top: 14px; }
.strip figcaption .tmark { grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; }
.strip figcaption .tmark-letter { font-size: 18px; }
.strip figcaption b { font-weight: 500; }
.strip figcaption span { font-size: var(--step-small); color: var(--muted); }
.screens-own figcaption { margin-top: 14px; font-size: var(--step-small); }
.screens-sub { font: 400 var(--step-lead)/1.2 var(--fd); margin: 72px 0 24px; }
.strip-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .strip a:hover img, .screens-own:hover img { transform: translateY(-6px); }
}
.strip a:active img, .screens-own:active img { transform: scale(.99); }
@media (max-width: 760px) { .strip-three { grid-template-columns: 1fr; } }

/* about: the area of each result reads as a plain line under it, not a pill above it */
.record-list > div { display: flex; flex-direction: column; }
.screens-own { max-width: 1040px; }
.record .note-small { margin: 56px 0 0; }
.record + .record { padding-top: calc(var(--gap) + 24px); }

/* Three endings for the tool pages' screenshot section, rotated by tool. */
/* v1: the live app on the left, the three neighbours as a column of smaller pictures on the right */
.screens.is-v1 { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-template-areas: "title title" "own sub" "own list"; column-gap: clamp(24px, 3vw, 48px); align-items: start; }
.screens.is-v1 .section-title { grid-area: title; }
.screens.is-v1 .screens-own { grid-area: own; max-width: none; }
.screens.is-v1 .screens-sub { grid-area: sub; margin: 0 0 20px; }
.screens.is-v1 .strip-three { grid-area: list; grid-template-columns: 1fr; gap: 24px; }
.screens.is-v1 .strip-three figure { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.screens.is-v1 .strip-three figcaption { margin-top: 0; }
/* v2: a dark field with the live app centred on it, the neighbours on the page ground below */
.screens.is-v2 .section-title { text-align: center; }
.screens.is-v2 .screens-own { margin: 0 auto; padding: clamp(20px, 4vw, 56px); border-radius: calc(var(--r) * 2); background: var(--ink); color: var(--bg); max-width: 1180px; }
.screens.is-v2 .screens-own figcaption { text-align: center; color: var(--bg); }
.screens.is-v2 .screens-sub { text-align: center; }
@media (max-width: 900px) {
  .screens.is-v1 { grid-template-columns: 1fr; grid-template-areas: "title" "own" "sub" "list"; }
  .screens.is-v1 .screens-sub { margin-top: 56px; }
}

/* ================= the board: the shared pages as a toolroom wall, tiles fitted edge to edge ================= */
/* a tile spans --c of 12 columns (and --r rows of 88px); on phones it spans --pc of 2 columns */
:root { --fig: clamp(30px, 2.4vw, 36px); }
.board, .tr {
  position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(88px, auto);
  gap: 8px; padding: 0 var(--m); margin: 0; list-style: none;
}
.tile { grid-column: span var(--c, 12); grid-row: span var(--r, 1); position: relative; min-width: 0; margin: 0; padding: clamp(20px, 2vw, 28px); }
.t-s1 { background: var(--surface); color: var(--ink); }
.t-s2 { background: var(--surface-2); color: var(--ink); }
.t-acc { background: var(--accent); color: var(--accent-ink); }
.t-deep { background: var(--accent-text); color: #fff; }
.t-ink { background: var(--ink); color: var(--bg); }
.t-deep .text-link, .t-ink .text-link { color: inherit; }
a.tile { text-decoration: none; }
.tile > a:not(.btn) { color: inherit; text-decoration: none; }
a.tile { transition: transform var(--t) var(--ease-out), background-color var(--t) var(--ease); }
a.tile:focus-visible { outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { a.tile:hover { transform: translateY(-4px); } }
a.tile:active { transform: scale(.985); }
.tile-title { font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; }
.tile .tmark { border-radius: 10px; }

/* the section rhythm on board pages */
.pw, .pr, .pb, .pc, .lb, .wo, .wh, .wq, .cw, .ta { padding-top: clamp(96px, 11vw, 168px); }
.ta + .ta { padding-top: clamp(64px, 7vw, 112px); }
.tp, .ph { padding-top: 4px; }
.ta-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28em) auto; align-items: end; gap: 16px 40px; min-height: 220px; }
.ta-title { font-size: clamp(48px, 7vw, 120px); line-height: .9; letter-spacing: -0.04em; }
.ta-head p { font-size: var(--step-lead); line-height: 1.4; }
.ta-count { font-size: var(--step-lead); font-weight: 700; white-space: nowrap; }
.tr { padding-top: 8px; }
.tr-shot { padding: 0; overflow: hidden; aspect-ratio: 960 / 660; background: var(--surface); }
.tr-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 900ms var(--ease-out); }
.tr-shot:hover img { transform: scale(1.03); }
.tr-cap { position: absolute; left: 0; bottom: 0; background: var(--bg); color: var(--ink); padding: 12px 18px; font-size: var(--step-lead); font-weight: 700; }
.is-flip .tr-shot { order: 2; }
.tr-info { display: flex; flex-direction: column; gap: 14px; }
.tr-name { display: flex; align-items: center; gap: 16px; font-size: clamp(32px, 3vw, 52px); }
.tr-name .tmark { width: 52px; height: 52px; border-radius: 13px; }
.tr-what { color: var(--accent-text); font-weight: 700; }
.tr-info > p:not(.tr-what) { max-width: 34em; }
.tr-go .btn, .tr-go .text-link { font-size: var(--step-lead); }
.tr-go { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.tr-fig, .pb-fig { display: flex; flex-direction: column; gap: 8px; }
.tr-fig b, .pb-fig b { font: 400 clamp(36px, 3.4vw, 56px)/1 var(--fd); letter-spacing: -0.03em; }
.tr-fig span, .pb-fig span { font-size: var(--step-body); line-height: 1.4; }
.is-flip .tr-fig { order: 3; }

/* ---------- about ---------- */
.pw-head { display: flex; align-items: flex-end; }
.pw-body { display: grid; gap: 18px; font-size: var(--step-body); line-height: 1.6; }
.pw-body p { max-width: 42em; }
.pr-head { padding: 0 var(--m); }
.pr-note { font-size: var(--step-lead); color: var(--muted); max-width: 26em; }
.pr-fig { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.pr-fig dt { font: 400 clamp(48px, 5.4vw, 92px)/.9 var(--fd); letter-spacing: -0.04em; }
.pr-fig:first-child dt { font-size: clamp(72px, 10vw, 176px); }
.pr-fig dd { margin: 0; font-size: var(--step-body); line-height: 1.45; max-width: 30em; }
.pb-head { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.pb-note { font-size: 14px; line-height: 1.45; }
.pc-main { display: grid; align-content: center; gap: 18px; min-height: 360px; padding: clamp(28px, 4vw, 56px); }
.pc-main p { font-size: var(--step-lead); line-height: 1.45; max-width: 32em; }
.pc-go { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 8px; }
.pc-main .btn::before { background: var(--accent-ink); }

/* the seven tools as a small wall, at the end of the inner pages */
.lb-head { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.lb-head p { font-size: var(--step-body); line-height: 1.45; }
.lb-tool { display: flex; flex-direction: column; gap: 12px; padding: 0 0 clamp(18px, 1.8vw, 24px); overflow: hidden; }
.lb-shot { display: block; width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: top left; transition: transform 900ms var(--ease-out); }
a.lb-tool:hover .lb-shot { transform: scale(1.03); }
.lb-name, .lb-what { padding-inline: clamp(18px, 1.8vw, 24px); }
.lb-name { display: flex; align-items: center; gap: 12px; }
.lb-name b { font: 400 var(--fig)/1 var(--fd); letter-spacing: -0.02em; }
.lb-what { font-size: var(--step-lead); line-height: 1.3; }
.lb-tool .tmark { width: 36px; height: 36px; }

/* ---------- work with raj ---------- */
.wo-offer { display: flex; flex-direction: column; gap: 18px; padding: clamp(40px, 3.4vw, 48px); }
.wo-offer > p:first-of-type { font-size: var(--step-body); line-height: 1.5; max-width: 34em; }
.wo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wo-list li { position: relative; padding-left: 22px; line-height: 1.45; }
.wo-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 10px; background: var(--accent); }
.wo-note { font-size: 14px; }
.wo-offer .btn { align-self: flex-start; margin-top: auto; }
.t-ink .btn { background: var(--accent); color: var(--accent-ink); }
.t-ink .btn::before { background: var(--bg); }
.wh-title, .cw-title { padding: 0 var(--m); margin-bottom: clamp(32px, 4vw, 56px); }
.wh-steps li { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.wh-lead { font: 400 clamp(26px, 2.4vw, 36px)/1.05 var(--fd); letter-spacing: -0.02em; }
.wh-steps li p:last-child { font-size: var(--step-body); line-height: 1.5; }
.wq-head { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.wq-list { display: grid; align-content: start; gap: 4px; padding: 8px; max-width: none; }
.wq.faq details { background: var(--bg); }
.wq.faq { padding-inline: 0; }
.ct-form { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.ct-form .ask-form { font-size: clamp(24px, 2.2vw, 32px); }
.ct-form .ask-form input { background: var(--bg); }
.ct-form .ask-form button { background: var(--ink); color: var(--bg); }
.ct-form .ask-form button:hover { background: var(--accent-ink); }
.ct-note { font-size: 14px; }
.cw-list li { padding: 0; }
.cw-list a { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; height: 100%; padding: clamp(20px, 2vw, 28px); transition: transform var(--t) var(--ease-out); }
.cw-list b { font: 400 clamp(32px, 3vw, 48px)/1 var(--fd); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.cw-list span { font-size: var(--step-lead); }
@media (hover: hover) and (pointer: fine) { .cw-list a:hover { transform: translateY(-4px); } }

/* ---------- smaller screens ---------- */
@media (max-width: 1024px) {
  .tp-name, .tp-say, .ph-name, .ph-say { --c: 12 !important; --r: 2 !important; }
  .tr-shot, .tr-info { --c: 12 !important; }
  .is-flip .tr-shot { order: 0; }
  .ta-head { grid-template-columns: 1fr; }
  .pw-head, .pw-body, .pb-head { --c: 12 !important; }
  .pb-fig { --c: 4 !important; }
  .pc-flank { display: none; }
  .pc-main { --c: 12 !important; }
  .wo-offer, .wq-head, .wq-list { --c: 12 !important; }
  .wh-steps li { --c: 6 !important; --r: 2 !important; }
  .ct-name, .ct-form { --c: 12 !important; --r: 3 !important; }
  .lb-head { --c: 12 !important; }
  .lb-tool { --c: 6 !important; }
  .lb-tool:last-child { --c: 12 !important; }
}
@media (max-width: 760px) {
  .board, .tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; grid-auto-rows: auto; }
  .tile { grid-column: span var(--pc, 2) !important; grid-row: auto !important; }
  .lb-name b { font-size: 24px; min-width: 0; overflow-wrap: anywhere; }
  .lb-tool .tmark { width: 28px; height: 28px; }
  .lb-what { font-size: var(--step-body); }
  .ta-head { min-height: 0; }
  .tr-fig b, .pb-fig b { font-size: 34px; }
  .pr-fig:first-child dt { font-size: 88px; }
  .wh-steps li { min-height: 160px; }
}

/* ================= home: the sticker shelf (soft neo-brutalism: outlines, hard shadows, chunky buttons) ================= */
.hp-hero, .hp-shelf, .hp-maker {
  --line: 2.5px solid var(--ink); --hard: 5px 5px 0 var(--ink); --hard-sm: 3px 3px 0 var(--ink); --rr: 18px; --mint: #9fe3c9;
  position: relative; z-index: 1;
}
.hp-sr { position: absolute; left: -9999px; }
.hp-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(16px, 4vh, 56px) var(--m) clamp(56px, 8vh, 96px); }
.hp-title { font-size: clamp(44px, 5.4vw, 88px); line-height: .98; letter-spacing: -0.035em; max-width: 11em; }
.hp-lead { margin: 22px 0 30px; font-size: var(--step-lead); line-height: 1.45; max-width: 30em; }
.hp-search {
  display: flex; align-items: center; gap: 10px; max-width: 620px; padding: 6px 8px 6px 22px;
  background: #fff; border: var(--line); border-radius: 999px; box-shadow: var(--hard); transition: box-shadow var(--t) var(--ease);
}
.hp-search svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.hp-search input { flex: 1; min-width: 0; padding: 12px 0; border: 0; background: none; color: var(--ink); font: 500 clamp(16px, 1.4vw, 19px) var(--f); }
.hp-search input::placeholder { color: var(--muted); }
.hp-search input:focus { outline: none; }
.hp-search:focus-within { box-shadow: 7px 7px 0 var(--accent-text); }
.hp-tries { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: var(--step-body); color: var(--muted); }
.hp-tries button {
  min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  font: 600 var(--step-body) var(--f); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: color var(--t) var(--ease);
}
.hp-tries button:hover { color: var(--accent-text); }
/* the seven logos as a pile of stickers; each straightens and lifts under the cursor */
.hp-pile { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: end; }
.hp-pile a {
  position: absolute; left: var(--x); top: var(--y); width: 31%; aspect-ratio: 1; display: grid; place-items: center;
  background: #fff; border: var(--line); border-radius: 26%; box-shadow: var(--hard); transform: rotate(var(--tilt));
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
.hp-pile img { width: 72%; height: 72%; object-fit: contain; border-radius: 20%; }
.hp-pile a:hover, .hp-pile a:focus-visible { z-index: 2; transform: rotate(0) scale(1.08); box-shadow: 8px 8px 0 var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .hp-pile a { animation: stick 700ms var(--ease-out) backwards; }
  .hp-pile a:nth-child(2) { animation-delay: 70ms; } .hp-pile a:nth-child(3) { animation-delay: 140ms; } .hp-pile a:nth-child(4) { animation-delay: 210ms; }
  .hp-pile a:nth-child(5) { animation-delay: 280ms; } .hp-pile a:nth-child(6) { animation-delay: 350ms; } .hp-pile a:nth-child(7) { animation-delay: 420ms; }
}
@keyframes stick { from { opacity: 0; transform: translateY(-24px) rotate(calc(var(--tilt) * -2)) scale(1.15); } }

/* the shelf: area chips, then big outlined cards with each tool's live home page */
.hp-shelf { padding: 0 var(--m); }
.hp-shelf-top { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 28px; }
.hp-h2 { font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; }
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chips button {
  min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
  font: 600 15px var(--f); cursor: pointer; transition: background-color var(--t) var(--ease), transform 160ms var(--ease);
}
.hp-chips button:hover { background: var(--surface-2); }
.hp-chips button.is-on { background: var(--ink); color: var(--bg); }
.hp-chips button:active { transform: scale(.96); }
.hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); }
.hp-card {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: var(--ink);
  background: #fff; border: var(--line); border-radius: var(--rr); box-shadow: var(--hard);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.hp-card[hidden] { display: none; }
.hp-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.hp-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.hp-card:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 4px; }
.hp-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: var(--line); }
.hp-card-b { display: grid; align-content: start; gap: 12px; flex: 1; padding: 18px 20px 22px; }
.hp-card-n { display: flex; align-items: center; gap: 12px; }
.hp-card-n .tmark { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--ink); }
.hp-card-n b { display: block; font: 400 var(--fig, 32px)/1 var(--fd); letter-spacing: -0.02em; }
.hp-card-n small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.hp-card-p { color: var(--ink); font-size: var(--step-body); line-height: 1.5; }
.hp-card-go { margin-top: auto; padding-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; }
.hp-pill { display: inline-block; padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--mint); font-size: 13px; font-weight: 700; }
.hp-card.is-wide { grid-column: span 2; flex-direction: row; }
.hp-card.is-wide .hp-shot { width: 58%; aspect-ratio: auto; min-height: 100%; border-bottom: 0; border-right: var(--line); }
.hp-empty { display: none; padding: 24px 28px; background: #fff; border: var(--line); border-radius: var(--rr); box-shadow: var(--hard-sm); font-weight: 500; font-size: var(--step-lead); }
.hp-empty.is-on { display: block; }
.hp-empty a { color: var(--accent-text); font-weight: 700; }
.hp-all {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 36px; min-height: 52px; padding: 0 24px;
  background: var(--mint); color: var(--ink); border: var(--line); border-radius: 999px; box-shadow: var(--hard-sm);
  font-weight: 700; text-decoration: none; transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.hp-all:hover, .hp-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--hard); }
.hp-all:active, .hp-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }

/* made by one marketer: one mint card, with four facts as stickers */
.hp-maker { padding: clamp(96px, 11vw, 160px) var(--m) 0; }
.hp-maker-card {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 5vw, 72px); background: var(--mint); border: var(--line); border-radius: 32px; box-shadow: 8px 8px 0 var(--ink);
}
.hp-maker-say { margin-top: 20px; font-size: var(--step-lead); line-height: 1.5; max-width: 34em; }
.hp-maker-act { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hp-btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 52px; padding: 0 24px; border: var(--line); border-radius: 999px;
  background: var(--ink); color: var(--bg); box-shadow: var(--hard-sm); font-weight: 700; text-decoration: none;
  transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
.hp-btn.is-light { background: #fff; color: var(--ink); }
.hp-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp-facts li {
  display: grid; gap: 6px; padding: 18px 20px; background: #fff; border: var(--line); border-radius: 20px; box-shadow: var(--hard-sm);
  font-size: var(--step-lead); line-height: 1.25; font-weight: 500;
}
.hp-facts li:nth-child(odd) { transform: rotate(-1.5deg); }
.hp-facts li:nth-child(even) { transform: rotate(1.5deg); }
.hp-facts b { font: 400 var(--step-head)/1 var(--fd); letter-spacing: -0.03em; }

@media (max-width: 1024px) {
  .hp-hero { grid-template-columns: 1fr; }
  .hp-pile { justify-self: center; max-width: 420px; }
  .hp-grid { grid-template-columns: 1fr 1fr; }
  .hp-maker-card { grid-template-columns: 1fr; }
  .hp-facts { margin-top: 56px; }
}
@media (max-width: 640px) {
  .hp-title { font-size: 9vw; }
  .hp-pile { max-width: 330px; }
  .hp-grid { grid-template-columns: 1fr; }
  .hp-card.is-wide { grid-column: auto; flex-direction: column; }
  .hp-card.is-wide .hp-shot { width: 100%; aspect-ratio: 16 / 10; min-height: 0; border-right: 0; border-bottom: var(--line); }
  .hp-facts li { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-facts li { transform: none; }
}

/* ================= the inner pages, matched to the home page's sticker shelf ================= */
/* the board's tiles become outlined stickers: white and mint, a hard shadow, round corners and more air between them */
.board, .tr { --line: 2.5px solid var(--ink); --hard: 5px 5px 0 var(--ink); --mint: #9fe3c9; gap: clamp(16px, 1.6vw, 22px); }
.tile { border: var(--line); border-radius: 22px; box-shadow: var(--hard); }
.t-s1 { background: #fff; }
.t-s2 { background: var(--surface); }
.t-acc { background: var(--mint); color: var(--ink); }
.t-deep { background: var(--accent-text); color: #fff; }
.t-ink { background: var(--ink); color: var(--bg); }
a.tile { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { a.tile:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); } }
a.tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.tile .tmark { border: 2px solid var(--ink); border-radius: 12px; }
.t-ink .tmark, .t-deep .tmark { border-color: var(--bg); }
/* a row of tiles that holds no card of its own (the home-style rail on the hero) keeps its own spacing */
.pc-flank { box-shadow: none; }

/* pictures inside stickers: rounded with the card, a dark line where the picture meets the text */
.tr-shot { overflow: hidden; }
.tr-cap { left: 14px; bottom: 14px; border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); padding: 8px 18px; font-size: var(--step-lead); }
.lb-tool { overflow: hidden; }
.lb-shot { border-bottom: var(--line); }

/* buttons on these pages: chunky pills that press in */
:is(.tp, .ta, .ph, .pw, .pr, .pb, .pc, .lb, .wo, .wh, .wq, .cw) .btn {
  border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink);
  background: var(--ink); color: var(--bg); transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
:is(.tp, .ta, .ph, .pw, .pr, .pb, .pc, .lb, .wo, .wh, .wq, .cw) .btn::before { display: none; }
:is(.tp, .ta, .ph, .pw, .pr, .pb, .pc, .lb, .wo, .wh, .wq, .cw) .btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
:is(.tp, .ta, .ph, .pw, .pr, .pb, .pc, .lb, .wo, .wh, .wq, .cw) .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.t-ink .btn, .t-deep .btn { background: var(--mint); color: var(--ink); border-color: var(--bg); box-shadow: 3px 3px 0 var(--bg); }
.t-ink .btn:hover, .t-deep .btn:hover { box-shadow: 5px 5px 0 var(--bg); }

/* questions: each one its own small sticker */
.wq-list { gap: 12px; padding: clamp(14px, 1.6vw, 20px); }
.wq.faq details { background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); }
.wq.faq details[open] { background: var(--surface); }

/* the contact line: a white field and a dark button, both outlined */
.ct-form .ask-form input { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; }
.ct-form .ask-form button { border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); transition: transform 180ms var(--ease-out), box-shadow 180ms var(--ease-out), background-color var(--t) var(--ease); }
.ct-form .ask-form button:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

/* the track record and the steps: a slight tilt on the figure stickers, as on the home page's facts */
@media (prefers-reduced-motion: no-preference) and (min-width: 761px) {
  .pr-fig:nth-child(3n + 2), .wh-steps li:nth-child(even) { transform: rotate(.8deg); }
  .pr-fig:nth-child(3n), .wh-steps li:nth-child(odd) { transform: rotate(-.6deg); }
}

@media (max-width: 760px) {
  .board, .tr { gap: 14px; }
  .tile { border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
}

/* tools page spacing: clear air between one tool and the next; the picture beside the text and its three figures */
.tr { padding-top: clamp(56px, 6vw, 96px); }
.ta .board + .tr { padding-top: clamp(16px, 1.6vw, 22px); }
.tr-shot { aspect-ratio: auto; min-height: 340px; }
.tr-shot img { position: absolute; inset: 0; }
.is-flip .tr-figs { order: 3; }
.tr-figs { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 20px; align-content: center; }
.tr-figs .tr-fig { display: grid; gap: 6px; align-content: start; }
.tr-figs dt { font: 400 clamp(30px, 2.6vw, 44px)/1 var(--fd); letter-spacing: -0.03em; }
.tr-figs dd { margin: 0; font-size: var(--step-body); line-height: 1.35; }
@media (max-width: 1024px) {
  .tr-shot { --r: 1 !important; aspect-ratio: 960 / 660; min-height: 0; }
  .tr-figs { --c: 12 !important; }
}
@media (max-width: 760px) {
  .tr { padding-top: 48px; }
  .tr-figs { grid-template-columns: 1fr 1fr; }
}

/* inside the cards: the small tool cards let their picture fill the height (no empty space under the text),
   and the title and statement cards at the top of the inner pages are only as tall as two rows */
.lb-tool .lb-shot { flex: 1 1 auto; height: auto; min-height: 180px; aspect-ratio: auto; }
/* the heading card runs across the top: title, line and link on one row, wrapping on small screens */
.lb-head { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 40px; }
.lb-head .tile-title { flex: 1 1 auto; }
.lb-head p { flex: 0 1 26em; }
.lb-head .text-link { align-self: flex-end; white-space: nowrap; }

/* ================= inner pages: an open hero like the home page (headline and intro on the page, stickers on the right) ================= */
.ih {
  --line: 2.5px solid var(--ink); --hard: 5px 5px 0 var(--ink); --hard-sm: 3px 3px 0 var(--ink); --mint: #9fe3c9;
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(16px, 4vh, 56px) var(--m) clamp(8px, 2vh, 24px);
}
.ih-title { font-size: clamp(44px, 5.4vw, 88px); line-height: .98; letter-spacing: -0.035em; max-width: 11em; }
.ih-lead { margin-top: 22px; font-size: var(--step-lead); line-height: 1.45; max-width: 30em; }
.ih-act { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.ih .hp-btn { min-height: 48px; padding: 0 20px; }
/* four facts as tilted stickers that straighten under the cursor */
.ih-stick { list-style: none; margin: 0; padding: 12px 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; max-width: 540px; justify-self: end; }
.ih-stick li {
  display: grid; align-content: start; gap: 8px; padding: 22px 24px; background: #fff; color: var(--ink);
  border: var(--line); border-radius: 22px; box-shadow: var(--hard); transform: rotate(var(--tilt, -2deg));
  transition: transform 350ms var(--ease-out), box-shadow 350ms var(--ease-out);
}
.ih-stick li:nth-child(2) { --tilt: 2.5deg; margin-top: 28px; }
.ih-stick li:nth-child(3) { --tilt: 1.5deg; margin-top: -10px; }
.ih-stick li:nth-child(4) { --tilt: -2.5deg; margin-top: 18px; }
.ih-stick li:hover { transform: rotate(0) scale(1.03); box-shadow: 8px 8px 0 var(--ink); }
.ih-stick li.is-mint { background: var(--mint); }
.ih-stick li.is-ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ih-stick b { font: 400 clamp(34px, 3.2vw, 52px)/1 var(--fd); letter-spacing: -0.03em; }
.ih-stick span { font-size: var(--step-body); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .ih-stick li { animation: stick 700ms var(--ease-out) backwards; }
  .ih-stick li:nth-child(2) { animation-delay: 90ms; } .ih-stick li:nth-child(3) { animation-delay: 180ms; } .ih-stick li:nth-child(4) { animation-delay: 270ms; }
}
.ih .hp-pile { justify-self: end; }
/* the contact form as one big mint sticker */
.ih-form { display: grid; gap: 20px; padding: clamp(24px, 3vw, 40px); background: var(--mint); border: var(--line); border-radius: 28px; box-shadow: 8px 8px 0 var(--ink); }

/* section rhythm: closer than before, so the sticker pages read as one flow */
.pw, .pr, .pb, .pc, .lb, .wo, .wh, .wq, .cw, .ta { padding-top: clamp(64px, 7vw, 112px); }
.ta + .ta { padding-top: clamp(56px, 6vw, 96px); }
.pr-head { margin-bottom: 28px; align-items: flex-end; }
/* why free tools: the heading centred in its card, the two paragraphs side by side so the text card fills */
.pw-head { align-items: center; }
.pw-body { grid-template-columns: 1fr 1fr; gap: 20px clamp(24px, 3vw, 48px); align-content: center; }
.pw-body p { max-width: none; }

@media (max-width: 1024px) {
  .ih { grid-template-columns: 1fr; }
  .ih-stick, .ih .hp-pile { justify-self: start; }
  .ih .hp-pile { justify-self: center; max-width: 420px; }
  .pw-body { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ih-title { font-size: 9vw; }
  .ih-stick { gap: 14px; padding: 6px 4px; }
  .ih-stick li { padding: 16px 18px; }
  .ih-stick li:nth-child(n) { margin-top: 0; }
  .ih .hp-pile { max-width: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  .ih-stick li { transform: none; }
}

/* the hero stickers: wider, no overlap, and the dark one gets a green shadow so its edge reads */
.ih { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ih-stick { max-width: 660px; gap: 24px 22px; }
.ih-stick li { padding: 24px 28px; }
.ih-stick li:nth-child(3) { margin-top: 6px; }
.ih-stick li.is-ink { box-shadow: 5px 5px 0 var(--accent); }
.ih-stick li.is-ink:hover { box-shadow: 8px 8px 0 var(--accent); }
@media (max-width: 1024px) { .ih-stick { max-width: none; } }
@media (max-width: 1024px) { .ih { grid-template-columns: 1fr; } }
@media (max-width: 1024px) { .ih { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .ih-stick { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .ih-stick li { padding: 16px; min-width: 0; }
  .ih-stick b { font-size: clamp(26px, 8vw, 34px); overflow-wrap: anywhere; }
  .ih-stick span { font-size: 15px; }
  .ih-form .ask-form { min-width: 0; }
  .ih-form .ask-form input { width: 100%; }
}

/* ================= internal links: breadcrumbs, "use it with" stickers, links inside running text ================= */
.crumbs { position: relative; z-index: 1; padding: 0 var(--m); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 15px; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--surface-2); font-weight: 700; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--surface-2); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease); }
.crumbs a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.crumbs [aria-current] { color: var(--muted); }

/* a link inside a sentence: the text colour, a mint underline that darkens on hover */
a.il { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: #9fe3c9; text-decoration-thickness: 3px; text-underline-offset: 4px; transition: text-decoration-color var(--t) var(--ease), color var(--t) var(--ease); }
a.il:hover { color: var(--accent-text); text-decoration-color: var(--accent); }
.t-ink a.il, .is-ink a.il { text-decoration-color: var(--accent); }
.t-ink a.il:hover { color: #9fe3c9; }

/* use it with: two outlined stickers with the reason, and a column of onward links */
.pair { --line: 2.5px solid var(--ink); --hard: 5px 5px 0 var(--ink); position: relative; z-index: 1; padding: clamp(64px, 7vw, 112px) var(--m) 0; }
.pair-title { font-size: var(--step-head); line-height: 1; letter-spacing: -0.03em; margin-bottom: 28px; }
.pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: clamp(16px, 1.6vw, 22px); align-items: stretch; }
.pair-card {
  display: grid; align-content: start; gap: 14px; padding: clamp(22px, 2.2vw, 30px); color: var(--ink); text-decoration: none;
  background: #fff; border: var(--line); border-radius: 22px; box-shadow: var(--hard); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.pair-card:nth-child(2) { background: #9fe3c9; }
.pair-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 var(--ink); }
.pair-card:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pair-n { display: flex; align-items: center; gap: 12px; }
.pair-n .tmark { width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 12px; }
.pair-n b { font: 400 var(--fig, 32px)/1 var(--fd); letter-spacing: -0.02em; }
.pair-why { font-size: var(--step-body); line-height: 1.5; }
.pair-go { margin-top: auto; font-weight: 700; }
.pair-more { display: grid; align-content: center; gap: 4px; padding: 8px 4px; }
.pair-more a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--surface-2); transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.pair-more a:hover { color: var(--accent-text); border-color: var(--accent); }
@media (max-width: 1024px) { .pair-row { grid-template-columns: 1fr 1fr; } .pair-more { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; column-gap: 24px; } }
@media (max-width: 640px) { .pair-row { grid-template-columns: 1fr; } .pair-more { grid-template-columns: 1fr; } }

/* contact: the WhatsApp form runs the full width under the headline, on one line where it fits */
.ih:has(.ih-form) { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 44px); }
.ih-form { width: 100%; grid-template-columns: minmax(0, 1fr); }
.ih-form .ask-form { flex-wrap: wrap; gap: .4em .5em; }
.ih-form .ask-form input { flex: 1 1 12em; width: auto; min-width: 0; }

/* home: questions people ask, each one its own small sticker */
.hp-faq { --line: 2.5px solid var(--ink); position: relative; z-index: 1; padding: clamp(96px, 11vw, 160px) var(--m) 0; }
.hp-faq .hp-h2 { margin-bottom: 28px; }
.hp-faq .faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; max-width: none; align-items: start; }
.hp-faq details { background: #fff; border: var(--line); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); }
.hp-faq details[open] { background: #9fe3c9; }
.hp-faq details p { color: var(--ink); }
@media (max-width: 760px) { .hp-faq .faq-list { grid-template-columns: 1fr; } }
/* the area headings on the Tools page carry longer, searchable names */
.ta-title { font-size: clamp(40px, 5.2vw, 88px); }

/* contact ends without the message band, so its last section keeps its own space above the footer */
.cw { padding-bottom: clamp(80px, 9vw, 136px); }
/* the @ in an address, set in the text face: the headline face draws it as a thin oversized ring */
.cw-list .at { font: 500 .78em var(--f); letter-spacing: 0; vertical-align: .08em; margin: 0 .04em; }