/* The site's three typefaces, served from this site (all under the SIL Open Font License).
   The -ext files hold extra accented letters and only load on pages that use them. */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/geist-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/geist.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/assets/fonts/geist-mono-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/assets/fonts/geist-mono.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrument-serif-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/instrument-serif.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* bisica site
   Layout: one 1200px column with a fluid gutter; sections alternate paper, band and night grounds.
   Motion: one easing, three durations, short distances. Everything reads without JavaScript. */

:root {
  /* color */
  --paper: #F4F1EA;
  --band: #EAE6DC;
  --card: #FBFAF6;
  --ink: #16150F;
  --ink-2: #3E3B34;
  --ink-3: #55524A;
  --ink-4: #6B675D;
  --line: #DDD7CA;
  --line-2: #D9D3C5;
  --line-3: #E3DED2;
  --bar: #8F897B;
  --accent: #D6F24A;
  --logo-ground: #FFFFFF;     /* the ground of a company's icon tile: icons are drawn for white (ClientHeader) */
  --night: #16150F;
  --night-2: #24221B;
  --night-line: #33312A;
  --night-chip: #4A473D;
  --on-night: #F4F1EA;
  --on-night-2: #C9C4B7;
  --on-night-3: #A8A396;
  --error: #A3321F;

  /* type */
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* layout */
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --section: clamp(64px, 8vw, 96px);
  --header-h: 72px;
  --radius: 20px;
  --radius-sm: 12px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 180ms;
  --t-med: 560ms;
  --t-slow: 900ms;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* short pages (the not-found page) still push the footer to the bottom of the window */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main { flex: 1 0 auto; min-width: 0; }

html.is-ready { scroll-behavior: smooth; }

::selection { background: var(--accent); color: var(--ink); }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.on-night :focus-visible { outline-color: var(--accent); }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 100;
  padding: 12px 16px; border-radius: 10px;
  background: var(--ink); color: var(--paper); font-weight: 500;
  transition: top var(--t-fast) var(--ease);
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--band { background: var(--band); }
.section--rule { border-top: 1px solid var(--line); }
.on-night { background: var(--night); color: var(--on-night); }

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.4;
}
.eyebrow--sm { font-size: 0.75rem; }
.on-night .eyebrow { color: var(--on-night-3); }

.display, .h2, .h3 {
  font-family: var(--serif); font-weight: 400; text-wrap: balance;
}
.display { font-size: clamp(3.25rem, 1.9rem + 5.6vw, 6rem); line-height: 0.98; letter-spacing: -0.02em; }
.display__line { display: block; }
.h2 { font-size: clamp(2.5rem, 1.75rem + 3.1vw, 4rem); line-height: 1.03; letter-spacing: -0.015em; }
.h2--sm { font-size: clamp(2.375rem, 1.7rem + 2.6vw, 3.5rem); }
.h3 { font-size: clamp(2rem, 1.7rem + 1vw, 2.375rem); line-height: 1.05; }

.lede { font-size: clamp(1.0625rem, 0.98rem + 0.45vw, 1.25rem); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.on-night .lede { color: var(--on-night-2); }
.body-2 { color: var(--ink-2); text-wrap: pretty; }

/* The marker: a rounded lime band behind the letters that sweeps in from the left.
   The band is sized to the letters, not the line box, so it never covers the line above. */
.mark {
  position: relative; z-index: 0; display: inline-block; white-space: nowrap;
  padding: 0 0.1em; margin: 0 -0.02em; color: var(--ink);
}
.mark::before {
  content: ""; position: absolute; z-index: -1; inset: 0.05em 0 -0.04em;
  background: var(--accent); border-radius: 0.08em; transform-origin: left center;
}
.display__line:first-child { position: relative; z-index: 1; }

/* ---------- buttons, chips, links ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border-radius: 10px;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font-size: 1rem; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.btn svg { flex-shrink: 0; transition: transform var(--t-fast) var(--ease); }
.btn--accent { background: var(--accent); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ghost { font-weight: 500; }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.875rem; letter-spacing: 0.04em; }
.btn--block { width: 100%; }

@media (hover: hover) {
  /* On hover a lime or outline button turns ink, and a solid ink button turns lime. */
  .btn--accent:hover { background: var(--ink); color: var(--paper); }
  .on-night .btn--accent:hover { background: var(--on-night); color: var(--ink); border-color: var(--on-night); }
  .btn--ink:hover { background: var(--accent); color: var(--ink); }
  .btn--ghost:hover { background: var(--ink); color: var(--paper); }
  .btn:hover svg { transform: translateX(3px); }
}
.btn:active { transform: translateY(1px); }
.btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }

.link {
  font-weight: 500; padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 1.5px;
  transition: background-size var(--t-med) var(--ease);
}
@media (hover: hover) {
  .link:hover { background-position: 100% 100%; background-size: 0% 1.5px; }
  .link:not(:hover) { background-position: 0 100%; }
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2);
  font-size: 0.8125rem; line-height: 1.3; white-space: nowrap;
}
.chip--mono { font-family: var(--mono); font-size: 0.75rem; }
.chip--paper { background: var(--paper); }

.check { flex-shrink: 0; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) ease, background-color var(--t-med) ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.site-header__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }

.logo { display: inline-flex; align-items: baseline; gap: 8px; padding-block: 6px; color: inherit; }
.logo__word { font-family: var(--serif); font-size: 2.125rem; line-height: 1; letter-spacing: -0.01em; }
.logo__dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--accent); border: 1.5px solid var(--ink);
  transition: transform var(--t-med) var(--ease);
}
.on-night .logo__dot { border-color: transparent; }
@media (hover: hover) { .logo:hover .logo__dot { transform: scale(1.35); } }

.nav { display: flex; gap: clamp(20px, 2.6vw, 36px); font-size: 0.9375rem; }
.nav a { position: relative; padding-block: 8px; color: var(--ink); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease);
}
.nav a[aria-current="true"]::after { transform: scaleX(1); }
@media (hover: hover) { .nav a:hover::after { transform: scaleX(1); } }

.site-header__actions { display: flex; align-items: center; gap: 20px; }
.site-header__call { font-size: 0.9375rem; font-weight: 500; }

.menu-btn {
  display: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent;
  align-items: center; justify-content: center; border-radius: 10px;
}
.menu-btn span { position: relative; width: 20px; height: 10px; }
.menu-btn span::before, .menu-btn span::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 1.75px; border-radius: 2px; background: var(--ink);
  transition: transform var(--t-med) var(--ease);
}
.menu-btn span::before { transform: translateY(-4px); }
.menu-btn span::after { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: rotate(-45deg); }
html:not(.js) .menu-btn { display: none; }

.menu {
  position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0 0; z-index: 49;
  background: var(--paper); padding: 16px var(--gutter) 32px;
  display: flex; flex-direction: column; gap: 24px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity var(--t-fast) ease, transform var(--t-med) var(--ease), visibility 0s linear var(--t-med);
}
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu__links { display: flex; flex-direction: column; }
.menu__links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-family: var(--serif); font-size: 2rem; line-height: 1.1;
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--t-med) ease, transform var(--t-med) var(--ease);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; transition-delay: calc(60ms + var(--i, 0) * 40ms); }
.menu__actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }

/* ---------- hero ---------- */

/* --strip-gap is one distance used three times: from the hero's content to the rule, from the rule to
   the logo strip and from the strip to the end of the hero */
.hero { --strip-gap: clamp(32px, 3.4vw, 48px); padding-block: clamp(40px, 5.5vw, 72px) var(--strip-gap); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 600fr) minmax(0, 536fr); gap: clamp(40px, 5vw, 64px); align-items: center; }
.hero__copy { display: flex; flex-direction: column; min-width: 0; }
.hero__copy .display { margin-top: 24px; }
.hero__copy .eyebrow { text-wrap: balance; }   /* on a phone the first line breaks into two even lines */
.hero__copy .lede { margin-top: 28px; max-width: 540px; }

.site-form { display: flex; flex-direction: column; gap: 10px; margin-top: 36px; }
.label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.on-night .label { color: var(--on-night-3); }
.site-form__field {
  display: flex; align-items: center; gap: 8px; padding: 6px;
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 12px;
}
/* The ring goes around the whole field while its input has keyboard focus: ink on paper, lime on ink. */
.site-form__field:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.on-night .site-form__field { background: var(--paper); border-color: var(--paper); }
.on-night .site-form__field:has(input:focus-visible) { outline-color: var(--accent); }
.site-form__field input {
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 14px;
  border: 0; background: transparent; font-size: 1.0625rem; color: var(--ink);
}
.site-form__field input::placeholder { color: var(--ink-4); }
.site-form__field input:focus-visible { outline: none; }
.site-form__field .btn { border-radius: 8px; }
.site-form__note { margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); }
.site-form__error { font-size: 0.875rem; font-weight: 500; color: var(--error); }
.on-night .site-form__error { color: #FFB4A3; }

/* the four AI tools a snapshot asks, as plain names in the site's own type */
.tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(24px, 4vw, 56px);
  margin-top: var(--strip-gap); padding-top: var(--strip-gap); border-top: 1px solid var(--line);
}
.tools .eyebrow { flex-shrink: 0; }
.tools ul { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px clamp(24px, 4vw, 56px); }
.tools li { display: flex; align-items: center; }
/* Each company's own file, shown as supplied. The heights differ so the letters come out the same size:
   OpenAI's symbol, which is also ChatGPT's, carries its own clear space. The negative margin takes it back out of the row. */
.tools__logo { display: block; flex: none; max-width: none; height: calc(var(--h) * var(--tools-scale, 1)); width: calc(var(--h) * var(--r) * var(--tools-scale, 1)); }
.tools__logo--openai { --h: 68px; --r: 1; margin: calc(var(--h) * var(--tools-scale, 1) * -0.26); }
.tools__logo--claude { --h: 28px; --r: 4.578; }
.tools__logo--perplexity { --h: 31px; --r: 4.603; }
.tools__logo--google { --h: 31px; --r: 3.299; }

/* hero examples: AI answers that rotate, one at a time */
.demo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.demo__card {
  display: flex; flex-direction: column; padding: clamp(20px, 2.4vw, 28px);
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.demo__head { display: flex; align-items: center; gap: 12px; min-height: 28px; }
.demo__head .eyebrow { margin-right: auto; }
.demo__cat { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; color: var(--ink); text-align: right; }
/* On the homepage the label is a link to that industry's page. The padding makes it a 44px target. */
.demo__cat a { display: inline-flex; align-items: center; gap: 6px; margin: -14px -8px; padding: 14px 8px; border-radius: 8px; text-decoration: underline; text-decoration-color: var(--bar); text-underline-offset: 4px; }
.demo__cat svg { flex-shrink: 0; width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .demo__cat a:hover { text-decoration-color: var(--ink); } }
.demo__stage { display: grid; margin-top: 20px; touch-action: pan-y; }
.demo__panel {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: 18px; min-width: 0;
  visibility: hidden; opacity: 0;
  transition: opacity 240ms ease, transform 240ms var(--ease), visibility 0s linear 240ms;
  transform: translateY(-6px);
}
.demo__panel.is-active { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.demo__q {
  align-self: flex-end; max-width: min(380px, 88%); padding: 12px 16px;
  background: var(--ink); color: var(--paper); border-radius: 16px 16px 4px 16px;
  font-size: 1rem; line-height: 1.45; transform-origin: 100% 100%;
}
/* The two answers sit in the same place, so the card keeps its height when one gives way to the other.
   "The answer you want" is the one on show unless the script is playing the first part. */
.demo__a { position: relative; display: grid; font-size: 1rem; line-height: 1.55; }
.demo__ans { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: opacity 260ms ease, visibility 0s linear 0s; }
.demo__ans--today, .demo__panel.is-today .demo__ans--aim { visibility: hidden; opacity: 0; transition: opacity 260ms ease, visibility 0s linear 260ms; }
.demo__panel.is-today .demo__ans--today { visibility: visible; opacity: 1; transition: opacity 260ms ease, visibility 0s linear 0s; }
.demo__panel.is-today .demo__aim { opacity: 0; }
.demo__aim { transition: opacity 320ms ease; }
/* The reader's name in the list of the answer that recommends them. With their website among the sources, the two lime marks on the card. */
.demo__you { padding: 1px 5px; margin: 0 -1px 0 -5px; border-radius: 4px; background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.demo__n--you { background: var(--ink); color: var(--paper); }
.demo__typing { position: absolute; left: 0; top: 4px; display: none; gap: 5px; z-index: 1; }
.demo__label { margin-bottom: -4px; color: var(--ink); }
.demo__typing i { width: 7px; height: 7px; border-radius: 999px; background: var(--bar); }
.demo__list { display: flex; flex-direction: column; gap: 10px; }
.demo__list li { display: flex; gap: 12px; align-items: flex-start; }
.demo__n {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; border: 1px solid var(--ink);
  font-family: var(--mono); font-size: 0.75rem;
}
.demo__list strong { font-weight: 600; }
.demo__sources {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-3);
}
.demo__sources .eyebrow { margin-right: 4px; }

/* The line each example ends on: what the answer did with the reader's website. */
.demo__verdict { font-size: 0.9375rem; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.demo__verdict span { display: block; }
.demo__verdict .demo__aim { font-weight: 500; color: var(--ink); }
/* The controls under the examples: back, the count, forward, a line that fills while an example is on show, and
   pause. Hidden until the script runs. The line and the pause button only show when the examples move on their own. */
.demo__controls { display: flex; align-items: center; margin: 18px 0 -12px; padding: 4px 0 0; border-top: 1px solid var(--line-3); }
.demo__controls > :first-child { margin-left: -12px; }
.demo__controls > .demo__toggle { margin-right: -12px; }
.demo__controls[hidden] { display: none; }
.demo__btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2);
  transition: color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.demo__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .demo__btn:hover { color: var(--ink); background: var(--line-3); } }
.demo__count { display: flex; gap: 6px; min-width: 58px; justify-content: center; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.demo__count b { font-weight: 500; color: var(--ink); }
.demo__progress { display: none; position: relative; flex: 1 1 auto; height: 2px; margin: 0 8px 0 12px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.demo__progress i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.demo__toggle { display: none; margin-left: auto; }
.demo__toggle .icon-play { display: none; }
.demo.is-user-paused .demo__toggle .icon-play { display: block; }
.demo.is-user-paused .demo__toggle .icon-pause { display: none; }

/* "This one is you": the reader's own website among the sources. The one lime mark on the card. */
.chip--you {
  border-color: var(--ink); color: var(--ink); font-weight: 500;
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 100% 100%;
}

/* The first screen on a laptop or desktop: the hero fills the window below the header, the logo strip sits at its
   bottom and the next section starts right at the fold. The spaces shrink with the window's height, and so does the
   headline. On a short window (860px or less) the copy and the example card tighten as well. Below about 720px the
   content can't fit, and the hero simply runs past the fold as before. Phones and tablets keep the stacked hero. */
@media (min-width: 1081px) {
  .hero {
    --strip-gap: clamp(20px, 4.6vh - 12px, 48px);
    display: flex; flex-direction: column;
    /* the header is its row plus a 1px line. Past 1010px the hero stops growing, so on a very tall monitor the
       content doesn't float in empty space and the next section shows below it. */
    min-height: min(calc(100vh - var(--header-h) - 1px), 1010px);
    padding-top: var(--strip-gap);
  }
  .hero__grid { flex: 1 0 auto; }   /* takes the spare height and keeps both columns centred in it */
  .hero .display { font-size: clamp(3.25rem, min(1.9rem + 5.6vw, 11.5vh), 6rem); }
  .hero .display--sm { font-size: clamp(3rem, min(1.9rem + 4.4vw, 9vh), 5.25rem); }
}
@media (min-width: 1081px) and (max-height: 860px) {
  .hero__copy .display { margin-top: 16px; }
  .hero__copy .lede { margin-top: 20px; }
  .hero .site-form { margin-top: 24px; }
  .hero .hero__alt { margin-top: 12px; }
  .hero .demo__card { padding: 20px 24px; }
  .hero .demo__stage { margin-top: 14px; }
  .hero .demo__panel { gap: 12px; }
  .hero .demo__a { font-size: 0.9375rem; line-height: 1.5; }
  .hero .demo__controls { margin-top: 12px; }
}
@media (min-width: 1081px) and (max-height: 760px) {
  .hero { --strip-gap: 18px; }
  .hero .demo__stage { margin-top: 10px; }
  .hero .demo__q { max-width: min(440px, 92%); padding: 10px 14px; }
}


/* ---------- why now ---------- */

.intro { display: flex; flex-direction: column; gap: 20px; }
.intro--split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 48px; }
.intro--split > div { display: flex; flex-direction: column; gap: 20px; }
.intro--split > p { max-width: 440px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 48px); margin-top: 56px; }
.stat { position: relative; padding-top: 28px; }
.rule-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px;
  background: currentColor; transform-origin: left;
}
.stat__n { font-family: var(--serif); font-size: clamp(5rem, 3.4rem + 6.4vw, 7.5rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.stat__t { margin-top: 16px; font-size: 1.125rem; line-height: 1.5; text-wrap: pretty; }
.stat__src { margin-top: 20px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; color: var(--ink-4); }

.on-night .rule-top::before { background: var(--on-night-3); }
.on-night .stat__t { color: var(--on-night-2); }
.on-night .stat__src { color: var(--on-night-3); }

/* ---------- what we do: three kinds of work ---------- */

.work { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.work__card { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 3vw, 32px); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); }
.work__card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.875rem, 1.6rem + 0.9vw, 2.25rem); line-height: 1.05; }
.work__card p { margin-top: 14px; color: var(--ink-2); text-wrap: pretty; }
.work__card .work__scope { margin-top: auto; padding-top: 20px; min-height: calc(20px + 15px + 3em); font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.work__card .work__scope::before { content: ""; display: block; margin-bottom: 14px; border-top: 1px solid var(--line-3); }
.work__note { margin-top: 28px; font-size: 1.0625rem; color: var(--ink-2); }
.section__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 32px; }
.steps + .section__cta { margin-top: 48px; }
.hero__alt { margin-top: 18px; font-size: 0.9375rem; color: var(--ink-3); }

/* ---------- what being left out could cost: the estimate ---------- */

.cost { display: grid; grid-template-columns: minmax(0, 500fr) minmax(0, 628fr); gap: clamp(40px, 6vw, 72px); align-items: start; }
.cost__copy { display: flex; flex-direction: column; min-width: 0; }
.cost__copy .h2 { margin-top: 20px; }
.cost__copy .body-2 { margin-top: 20px; font-size: 1.125rem; max-width: 440px; }

.est {
  display: flex; flex-direction: column; gap: 24px; min-width: 0; padding: clamp(22px, 2.8vw, 32px);
  background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius);
}
.est__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.875rem, 1.6rem + 0.9vw, 2.375rem); line-height: 1.05; text-wrap: balance; }
.est__title span { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; vertical-align: 0.5em; }
.est__form { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 12px; }
html:not(.js) .est__form { display: none; }   /* the sum needs scripts; without them the worked example stands alone */
.est__form .label { line-height: 1.4; }
.affix { position: relative; display: flex; align-items: center; }
.affix span { position: absolute; right: 14px; color: var(--ink-3); pointer-events: none; }
.affix .input { padding-right: 34px; }
.affix--pre span { left: 14px; right: auto; }
.affix--pre .input { padding-left: 28px; padding-right: 14px; }
.est__hint { font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); }
.est__out { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line-3); }
.est__result { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.est__result b {
  display: table; margin-block: 8px; padding: 0 0.1em; border-radius: 0.08em; background: var(--accent);
  font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 2.1rem + 3.2vw, 4.75rem); line-height: 1.02;
  letter-spacing: -0.015em; font-variant-numeric: lining-nums; color: var(--ink);
}
.est__sum { font-family: var(--mono); font-size: 0.75rem; line-height: 1.6; color: var(--ink-3); }
.est__fine { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-4); text-wrap: pretty; }
.est .est__go { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.est__error { font-size: 0.875rem; font-weight: 500; color: var(--error); }
.est__next { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.est__next p { font-size: 0.9375rem; color: var(--ink-2); }

/* ---------- snapshot ---------- */

.snap { display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 688fr); gap: clamp(40px, 6vw, 72px); align-items: center; }
.snap__copy { display: flex; flex-direction: column; min-width: 0; }
.snap__copy .h2 { margin-top: 20px; }
.snap__copy .body-2 { margin-top: 20px; font-size: 1.125rem; }
.snap__copy .btn { align-self: flex-start; margin-top: 36px; }
.snap__label { margin-top: 32px; }
.gets { display: flex; flex-direction: column; margin-top: 12px; border-bottom: 1px solid var(--line-2); }
.gets li { display: flex; gap: 14px; padding-block: 14px; border-top: 1px solid var(--line-2); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.gets li strong { font-weight: 600; }
.gets li > span:first-child { flex-shrink: 0; width: 18px; padding-top: 3px; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }
.snap__note { margin-top: 16px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-3); }
.snap__proof { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }

.report {
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
  padding: clamp(18px, 2.4vw, 28px); background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
}
.report__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.report__brand { display: flex; align-items: baseline; gap: 10px; }
.report__brand b { font-family: var(--serif); font-weight: 400; font-size: 1.625rem; line-height: 1; }
.report__brand span { font-size: 0.875rem; color: var(--ink-3); }
.report__meta { margin-top: -8px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-4); }
.report__note { margin-top: -6px; font-size: 0.8125rem; line-height: 1.45; color: var(--ink-3); }
.report__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tile { display: flex; flex-direction: column; background: var(--paper); border-radius: var(--radius-sm); padding: 16px 18px; min-width: 0; }
.tile p { font-size: 0.8125rem; line-height: 1.35; color: var(--ink-3); }
.tile b { display: block; margin-top: auto; padding-top: 8px; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1; white-space: nowrap; }
.tile p small { display: block; font-size: 0.75rem; color: var(--ink-4); }
.report__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel { border: 1px solid var(--line-3); border-radius: var(--radius-sm); padding: 18px; min-width: 0; }
.panel--ink { border: 1.5px solid var(--ink); }
.panel h3 { font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.panel__sub { margin-top: 2px; font-size: 0.75rem; line-height: 1.4; color: var(--ink-3); }
.bars { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.bars__row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; }
.bars__row span:last-child { font-family: var(--mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.bars__row--you { font-weight: 600; }
.bar { margin-top: 6px; height: 8px; border-radius: 4px; background: var(--line-3); overflow: hidden; }
.bar i { display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: 4px; background: var(--bar); transform-origin: left; }
.bar--you i { background: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.panel .chips { margin-top: 12px; }
.gap__label { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gap__label i { width: 8px; height: 8px; border-radius: 999px; background: var(--accent); border: 1px solid var(--ink); }
/* the homepage sample: four numbers, who AI mentions, the sites it cites, what to fix first */
.report__tag { padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.3; color: var(--ink-3); }
.report__tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.report__tiles--4 .tile { padding: 14px 14px 16px; }
.report__tiles--4 .tile p strong { font-weight: 600; color: var(--ink); }
.report__tiles--4 .tile b { margin-top: 0; padding-top: 10px; font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem); }
.report__tiles--4 .tile p:last-child { margin-top: 8px; }
.report__stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.report__stack .panel--ink { flex: 1 1 auto; }
.fixes { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; font-size: 0.875rem; line-height: 1.4; }
.fixes li { display: flex; gap: 10px; }
.fixes li span { flex-shrink: 0; padding-top: 2px; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3); }

/* ---------- the Sprint ---------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.step { position: relative; padding-top: 24px; }
.step__n { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }
.step .h3 { margin-top: 20px; }
.step p:last-child { margin-top: 12px; font-size: 1rem; color: var(--ink-2); text-wrap: pretty; }

/* ---------- compare ---------- */

.compare { margin-top: 48px; }
.compare th, .compare td { text-align: left; vertical-align: middle; }
.compare thead th { padding: 16px; vertical-align: bottom; font-size: 0.9375rem; font-weight: 500; color: var(--on-night-2); }
.compare thead th:first-child { width: 31%; padding-left: 0; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-night-3); }
.compare thead th.compare__us { width: 19%; padding: 18px 20px; background: var(--night-2); border-radius: 12px 12px 0 0; }
.compare__brand { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; line-height: 1; color: var(--on-night); }
.compare__brand i { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); }
.compare tbody tr { border-top: 1px solid var(--night-line); }
.compare tbody th { padding: 18px 16px 18px 0; font-size: 1.0625rem; font-weight: 500; color: var(--on-night); }
.compare tbody td { padding: 18px 16px; font-size: 0.9375rem; color: var(--on-night-3); }
.compare tbody td.compare__us { padding-inline: 20px; background: var(--night-2); color: var(--on-night); font-weight: 500; }
.compare tbody tr:last-child td.compare__us { border-radius: 0 0 12px 12px; }
.yes {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; background: var(--accent); color: var(--ink);
}
.yes svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- lists of ticks, and the industry links ---------- */

.ticks { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; font-size: 1rem; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; }
.ticks .check { margin-top: 3px; }
.ticks--sm { font-size: 0.9375rem; }
.ticks--sm li { gap: 10px; }
.ticks--sm .check { width: 16px; height: 16px; }

.ind {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--night-chip); font-size: 0.875rem; color: var(--on-night);
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.ind svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) {
  a.ind:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  a.ind:hover svg { transform: translate(2px, -2px); }
}

/* ---------- pricing ---------- */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; margin-top: 48px; }
.plan {
  display: flex; flex-direction: column; min-width: 0; padding: 32px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius);
  transition: border-color var(--t-fast) ease;
}
.plan--featured { border: 2px solid var(--ink); padding: 31px; }
@media (hover: hover) {
  .plan:hover { border-color: var(--ink); }
}
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 30px; }
.plan__name { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.plan__flag { font-size: 0.8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: var(--accent); border: 1px solid var(--ink); }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.plan__price b { font-family: var(--serif); font-weight: 400; font-size: clamp(3.25rem, 2.6rem + 1.6vw, 4rem); line-height: 1; }
.plan__price span { font-size: 0.9375rem; color: var(--ink-3); white-space: nowrap; }
/* three narrow cards side by side: keep each price on one line and the rules below it level */
@media (min-width: 1081px) and (max-width: 1339px) {
  .plan__price b { font-size: 3rem; }
  .plan__sub { min-height: 3em; }
}
@media (max-width: 360px) { .plan__price { flex-wrap: wrap; row-gap: 2px; } }
/* how the plan is paid for: once, or every month */
.plan__terms { margin-top: 14px; font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.plan__sub { margin-top: 12px; font-size: 1rem; line-height: 1.5; color: var(--ink-3); }
.plan .ticks { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-3); }
.plan .btn { margin-top: auto; }
.plan__spacer { flex: 1 1 auto; min-height: 32px; }
.plans__more { margin-top: 28px; font-size: 1.0625rem; font-weight: 500; text-wrap: pretty; }
.plans__more + .plans__note { margin-top: 8px; }
.plans__note { margin-top: 24px; font-size: 0.9375rem; color: var(--ink-3); max-width: 880px; text-wrap: pretty; }

/* ---------- faq ---------- */

.faq { display: grid; grid-template-columns: minmax(0, 400fr) minmax(0, 728fr); gap: clamp(40px, 6vw, 72px); align-items: start; }
.faq__intro { position: sticky; top: calc(var(--header-h) + 32px); display: flex; flex-direction: column; gap: 20px; }
.faq__intro p:last-child { font-size: 1rem; color: var(--ink-3); }
.faq__list { border-top: 1px solid var(--line-2); }
.faq__item { padding: 22px 0; border-bottom: 1px solid var(--line-2); }
.faq__item dt { font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.faq__item dd { margin-top: 10px; color: var(--ink-2); line-height: 1.6; text-wrap: pretty; }

/* ---------- final call ---------- */

.final { padding-block: clamp(72px, 9vw, 104px) clamp(64px, 7vw, 80px); text-align: center; }
.final .wrap { display: flex; flex-direction: column; align-items: center; }
.final .display { margin-top: 24px; font-size: clamp(3rem, 1.9rem + 4.8vw, 5.5rem); line-height: 1.02; }
.final .lede { margin-top: 24px; max-width: 620px; }
.final .site-form { width: 100%; max-width: 600px; margin-top: 40px; text-align: left; }
.final__alt { margin-top: 28px; font-size: 0.9375rem; color: var(--on-night-2); }
.final__alt a { color: var(--on-night); }
.final__inds {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px;
  width: 100%; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--night-line);
}
.final__inds p { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-night-3); }
.final__inds ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.final__inds .ind { min-height: 44px; padding-inline: 16px; border-color: var(--on-night-3); }

/* ---------- industries page ---------- */

.hub { padding-block: clamp(48px, 6vw, 88px) var(--section); }
.hub__title { margin-top: 20px; }
.hub__lede { margin-top: 24px; max-width: 640px; }
.hub__group { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px 48px; margin-top: 56px; padding-top: 28px; }
.hub__name { font-family: var(--mono); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.hub__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hub__card {
  position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 20px 52px 22px 22px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; color: inherit;
  transition: border-color var(--t-fast) ease;
}
.hub__ind { font-weight: 600; }
.hub__line { font-family: var(--serif); font-size: 1.625rem; line-height: 1.1; }
.hub__card .btn__arrow { position: absolute; top: 22px; right: 20px; transition: transform var(--t-fast) var(--ease); }
@media (hover: hover) { .hub__card:hover { border-color: var(--ink); } .hub__card:hover .btn__arrow { transform: translateX(3px); } }
@media (max-width: 860px) { .hub__group { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .hub__list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */

.site-footer { padding-block: 48px 56px; border-top: 1px solid #2E2C25; }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 0.9375rem; }
.site-footer nav a, .site-footer__legal a { padding-block: 11px; }
.site-footer nav a, .site-footer__legal a { color: var(--on-night-2); transition: color var(--t-fast) ease; }
.site-footer__legal { margin-top: 40px; font-size: 0.8125rem; color: var(--on-night-3); }
.site-footer__legal a { color: var(--on-night-3); padding-block: 12px; }
.site-footer__legal div { display: flex; flex-wrap: wrap; gap: 0 20px; }
.site-footer__legal { align-items: center; }
@media (hover: hover) { .site-footer nav a:hover, .site-footer__legal a:hover { color: var(--on-night); } }

/* ---------- request dialog ---------- */

.dialog {
  width: min(640px, calc(100vw - 24px)); max-height: min(860px, calc(100dvh - 24px));
  padding: 0; border: 1.5px solid var(--ink); border-radius: var(--radius);
  background: var(--paper); color: var(--ink); overflow: hidden;
}
.dialog::backdrop { background: rgba(22, 21, 15, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialog[open] { display: flex; flex-direction: column; animation: dialog-in var(--t-med) var(--ease); }
.dialog[open]::backdrop { animation: fade-in var(--t-med) ease; }
.dialog.is-closing { animation: dialog-out 200ms ease forwards; }
.dialog.is-closing::backdrop { animation: fade-out 200ms ease forwards; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } }
@keyframes dialog-out { to { opacity: 0; transform: translateY(8px) scale(0.99); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.dialog__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 16px 28px;
  border-bottom: 1px solid transparent; transition: border-color var(--t-fast) ease;
}
/* a hairline under the heading once the form has scrolled beneath it */
.dialog.is-scrolled .dialog__head { border-bottom-color: var(--line-2); }
.dialog__head h2 { font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1.05; letter-spacing: -0.01em; }
.dialog__head p { margin-top: 8px; font-size: 0.9375rem; color: var(--ink-3); }
.dialog__close {
  flex-shrink: 0; width: 44px; height: 44px; margin: -6px -8px 0 0; padding: 0; border: 0; border-radius: 999px; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color var(--t-fast) ease, transform var(--t-med) var(--ease);
}
.dialog__close svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linecap: round; }
@media (hover: hover) { .dialog__close:hover { background: var(--line-3); transform: rotate(90deg); } }
.dialog__body { padding: 8px 28px 28px; overflow-y: auto; overscroll-behavior: contain; }

.fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px 12px; }
.field { grid-column: span 6; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--half { grid-column: span 3; }
.field--third { grid-column: span 2; }
.field .label em { font-style: normal; text-transform: none; letter-spacing: 0; color: var(--ink-4); }
/* A line under a box that says what an answer will do (the customers box: "Worldwide", "Which country?"). */
.field__note { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-3); }
.on-night .field__note { color: var(--on-night-3); }
.input {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--bar); border-radius: 10px;
  background: var(--card); font-size: 1rem; line-height: 1.4; color: var(--ink);
  transition: border-color var(--t-fast) ease;
}
textarea.input { resize: vertical; min-height: 76px; }
select.input {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2316150F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.input::placeholder { color: var(--ink-4); }
.input:hover { border-color: var(--ink-3); }
.input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 10px; border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.field__error { font-size: 0.8125rem; font-weight: 500; color: var(--error); }

.toggle { grid-column: span 6; display: flex; align-items: flex-start; gap: 12px; font-size: 0.9375rem; line-height: 1.4; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle i {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-top: -1px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--card);
  transition: background-color var(--t-fast) ease;
}
.toggle i svg { width: 14px; height: 14px; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 260ms var(--ease); }
.toggle input:checked + i { background: var(--accent); }
.toggle input:checked + i svg { stroke-dashoffset: 0; }
.toggle input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }

/* a row that opens and closes smoothly */
.reveal-row { grid-column: span 6; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-med) var(--ease), margin-top var(--t-med) var(--ease); margin-top: -18px; }
.reveal-row > div { overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; visibility: hidden; transition: visibility 0s linear var(--t-med); }
.reveal-row.is-open { grid-template-rows: 1fr; margin-top: 0; }
.reveal-row.is-open > div { visibility: visible; transition-delay: 0s; }
.reveal-row .field { padding: 3px; margin: -3px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dialog__foot { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.dialog__fine { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-4); }
.dialog__fine a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.dialog__status { font-size: 0.875rem; font-weight: 500; color: var(--error); }
.spinner { display: none; width: 16px; height: 16px; border-radius: 999px; border: 2px solid var(--ink); border-right-color: transparent; animation: spin 700ms linear infinite; }
.is-sending .spinner { display: block; }
.is-sending .btn__arrow { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

.done { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 12px 0 4px; }
.done__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 999px; background: var(--accent); border: 1.5px solid var(--ink); }
.done__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 520ms var(--ease) 180ms forwards; }
.done h3 { font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1.05; }
.done p { color: var(--ink-2); max-width: 46ch; }
.done p.done__preview { max-width: none; font-family: var(--mono); font-size: 0.75rem; color: var(--ink-4); }
/* The walk-through call offered once the request is sent, as on the quick check's page. */
.done__call { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); }
.done__call strong { color: var(--ink); font-weight: 600; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- industry pages ---------- */

.display--sm { font-size: clamp(3rem, 1.9rem + 4.4vw, 5.25rem); line-height: 1; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.crumbs a { color: var(--ink-3); background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px; transition: background-size var(--t-med) var(--ease), color var(--t-fast) ease; }
.crumbs [aria-current] { color: var(--ink); }
@media (hover: hover) { .crumbs a:hover { color: var(--ink); background-size: 100% 1px; } }

/* what buyers ask: three stages, each a column of questions written like chat messages */
.asks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); margin-top: 48px; }
.asks__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.asks__stage { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1.5px solid var(--ink); font-weight: 500; color: var(--ink); }
.asks__stage span { color: var(--ink-3); }
.asks__col ul { display: flex; flex-direction: column; gap: 12px; }
.ask {
  padding: 14px 18px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: 18px 18px 18px 4px; font-size: 1rem; line-height: 1.45; text-wrap: pretty;
  transition: border-color var(--t-fast) ease, transform var(--t-med) var(--ease);
}
@media (hover: hover) { .ask:hover { border-color: var(--ink); transform: translateY(-2px); } }

/* where AI gets its answers */
.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.source { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(22px, 2.6vw, 32px); background: var(--night-2); border-radius: var(--radius); }
.source h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); line-height: 1.05; color: var(--on-night); }
.source__eg { display: flex; flex-wrap: wrap; gap: 6px; }
.source__eg li { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--night-chip); font-size: 0.8125rem; line-height: 1.3; color: var(--on-night); }
.source:first-child .source__eg li:first-child { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.source > p { font-size: 1rem; line-height: 1.55; color: var(--on-night-2); text-wrap: pretty; }
.source > p.source__src { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; color: var(--on-night-3); }

/* what we do for this industry */
.plays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.play { position: relative; padding-top: 24px; }
.play p { margin-top: 12px; font-size: 1rem; color: var(--ink-2); text-wrap: pretty; }
.play .h3 { font-size: clamp(1.75rem, 1.5rem + 0.7vw, 2rem); }

/* ---------- privacy, terms and the not-found page ---------- */

.doc { padding-block: clamp(48px, 6vw, 88px) var(--section); }
.doc__wrap { max-width: calc(760px + 2 * var(--gutter)); }
.doc .display { margin-top: 20px; }
.doc__meta { margin-top: 20px; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }
.doc__lede { margin-top: 28px; }
.prose { margin-top: 48px; display: flex; flex-direction: column; gap: 40px; }
.prose section { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid var(--line-2); }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); line-height: 1.1; text-wrap: balance; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.65; text-wrap: pretty; }
.prose ul { display: flex; flex-direction: column; gap: 10px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); border: 1px solid var(--ink); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.notfound { min-height: 56vh; display: flex; flex-direction: column; justify-content: center; }
.notfound .lede { margin-top: 24px; max-width: 520px; }
.notfound__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

@media (max-width: 1080px) {
  .asks { grid-template-columns: minmax(0, 1fr); gap: 36px; max-width: 640px; }
  .plays { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 860px) { .sources { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .plays { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* ---------- motion: applies only when JavaScript is running and motion is welcome ---------- */

.motion [data-reveal] { opacity: 0; transform: translateY(18px); }
.motion [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t-med) ease var(--d, 0ms), transform var(--t-slow) var(--ease) var(--d, 0ms);
}
.motion .mark[data-sweep]::before { transform: scaleX(0); }
.motion .is-in .mark[data-sweep]::before { transform: none; transition: transform 760ms var(--ease) var(--sweep, 520ms); }

.motion .rule-top::before { transform: scaleX(0); }
.motion .is-in.rule-top::before, .motion .is-in .rule-top::before { transform: scaleX(1); transition: transform var(--t-slow) var(--ease) var(--d, 0ms); }

.motion .report .bar i { transform: scaleX(0); }
.motion .report.is-in .bar i { transform: scaleX(1); transition: transform 1000ms var(--ease) calc(320ms + var(--i, 0) * 90ms); }

.motion .compare .yes { transform: scale(0.4); opacity: 0; }
.motion .compare.is-in .yes { transform: none; opacity: 1; transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(200ms + var(--r, 0) * 110ms), opacity 200ms ease calc(200ms + var(--r, 0) * 110ms); }
.motion .compare tbody tr { opacity: 0; transform: translateY(10px); }
.motion .compare.is-in tbody tr { opacity: 1; transform: none; transition: opacity var(--t-med) ease calc(120ms + var(--r, 0) * 110ms), transform var(--t-slow) var(--ease) calc(120ms + var(--r, 0) * 110ms); }

.motion .chips--pop .chip { opacity: 0; transform: translateY(8px); }
.motion .is-in .chips--pop .chip, .motion .chips--pop.is-in .chip { opacity: 1; transform: none; transition: opacity 360ms ease calc(160ms + var(--i, 0) * 28ms), transform 560ms var(--ease) calc(160ms + var(--i, 0) * 28ms); }

/* hero demo choreography: question, a beat of thinking, then the answer */

.motion .demo__panel.is-playing .demo__q { animation: bubble 420ms var(--ease) both; }
.motion .demo__panel.is-playing .demo__typing { display: flex; animation: typing 1050ms ease 260ms both; }
.motion .demo__panel.is-playing .demo__typing i { animation: dot 900ms ease-in-out infinite; }
.motion .demo__panel.is-playing .demo__typing i:nth-child(2) { animation-delay: 140ms; }
.motion .demo__panel.is-playing .demo__typing i:nth-child(3) { animation-delay: 280ms; }
.motion .demo__panel.is-playing .demo__ans--today .demo__label,
.motion .demo__panel.is-playing .demo__ans--today .demo__intro,
.motion .demo__panel.is-playing .demo__ans--today .demo__list li,
.motion .demo__panel.is-playing .demo__sources { animation: rise 520ms var(--ease) both; animation-delay: calc(1250ms + var(--i, 0) * 130ms); }
/* the second part: the list of the answer that recommends the reader comes in from the reader's line down */
.motion .demo__panel.is-playing:not(.is-today) .demo__ans--aim .demo__list li { animation: rise 520ms var(--ease) both; animation-delay: calc(120ms + var(--i, 0) * 110ms); }
.motion .demo__panel.is-playing:not(.is-today) .demo__you { background-size: 0% 100%; animation: sweep 640ms var(--ease) 620ms forwards; }
.motion .demo__panel.is-playing .mark { background-size: 0% 100%; animation: sweep 640ms var(--ease) 2050ms forwards; }
.motion .demo__panel.is-playing .chip--you { background-size: 0% 100%; animation: sweep 640ms var(--ease) 2200ms forwards; }
.motion .demo__toggle { display: inline-flex; }
.motion .demo__progress { display: block; }
.motion .demo__panel.is-playing .demo__verdict { animation: rise 520ms var(--ease) 2600ms both; }
.motion .demo.is-running .demo__progress i { animation: fill var(--demo-ms, 11500ms) linear forwards; }
/* once the answer the reader wants is on show, the line about today steps back */
.motion .demo__panel.is-playing:not(.is-today) .demo__verdict span:first-child { color: var(--ink-3); transition: color 320ms ease; }
.motion .demo.is-held .demo__progress i { animation-play-state: paused; }
.motion .demo.is-user-paused .demo__progress i { animation: none; }
@keyframes fill { to { transform: scaleX(1); } }
@keyframes bubble { from { opacity: 0; transform: translateY(8px) scale(0.96); } }
@keyframes typing { 0% { opacity: 0; } 18%, 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes sweep { to { background-size: 100% 100%; } }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .nav, .site-header__call { display: none; }
  .menu-btn { display: inline-flex; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__copy .lede { max-width: 620px; }
  .demo { max-width: 640px; }
  .snap, .cost, .faq { grid-template-columns: minmax(0, 1fr); }
  .est { max-width: 640px; }
  .work { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
  .report__tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq__intro { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .intro--split { flex-direction: column; align-items: flex-start; gap: 20px; }
  .intro--split > p { max-width: 640px; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .plan__spacer { min-height: 28px; }
}
@media (min-width: 1081px) { .menu { display: none; } }

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 40px; }
  /* the four logos stay on one line. Each takes a share of the row in proportion to its desktop width
     (--w, in px) and never grows past that width */
  .tools { flex-direction: column; align-items: stretch; gap: 20px; }
  .tools ul { flex-wrap: nowrap; gap: clamp(12px, 4.6vw, 22px); width: 100%; }
  .tools__item { flex: var(--w) 1 0; min-width: 0; max-width: calc(var(--w) * 1px); }
  .tools__item--openai { --w: 33; }
  .tools__item--claude { --w: 128; }
  .tools__item--perplexity { --w: 143; }
  .tools__item--google { --w: 102; }
  .tools__logo { width: 100%; height: auto; }
  /* the symbol's file has empty space around the mark, so the image is wider than its slot */
  .tools__logo--openai { width: 208.33%; margin: -54.17%; }

  /* the comparison table becomes one block per row */
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare tbody tr { padding: 20px 0; }
  .compare tbody th { padding: 0 0 12px; font-size: 1.125rem; }
  .compare tbody td, .compare tbody td.compare__us {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 10px 14px; background: transparent; border-radius: 0; text-align: right;
  }
  .compare tbody td::before { content: attr(data-label); color: var(--on-night-2); text-align: left; }
  .compare tbody td.compare__us { background: var(--night-2); border-radius: 10px; }
  .compare tbody td.compare__us::before { font-family: var(--serif); font-size: 1.25rem; color: var(--on-night); }
  .compare tbody tr:last-child td.compare__us { border-radius: 10px; }
}

/* The header's "FREE CHATGPT CHECK" reads "FREE CHECK" where it would push the menu button off a narrow phone. */
@media (max-width: 380px) { .btn__long { display: none; } }

@media (max-width: 620px) {
  .logo__word { font-size: 1.75rem; }
  .logo__dot { width: 8px; height: 8px; }
  .site-header__actions { gap: 4px; }
  .site-form__field { flex-direction: column; align-items: stretch; padding: 0; border: 0; background: transparent; gap: 10px; }
  .site-form__field:has(input:focus-visible) { outline: none; }
  .site-form__field input { height: 52px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); }
  .site-form__field input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }
  .on-night .site-form__field input:focus-visible { outline-color: var(--accent); }
  .on-night .site-form__field { background: transparent; border: 0; }
  .on-night .site-form__field input { border-color: var(--paper); background: var(--paper); }
  .site-form__field .btn { border-radius: 12px; }
  .report__tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .tile b { margin-top: 0; padding-top: 0; font-size: 2rem; }
  .report__pair { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .plan, .plan--featured { padding: 24px; }
  .final__inds { flex-direction: column; }
  .site-footer__row { flex-direction: column; align-items: flex-start; }
  .dialog__head { padding: 20px 16px 14px 20px; }
  .dialog__body { padding: 6px 20px 24px; }
  textarea.input { min-height: 100px; }
  .field--half, .field--third { grid-column: span 6; }
  .reveal-row > div { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- the quick check (/chatgpt/) ----------
   Built from the design (version 9) and the redesign of October 10, 2026 with the site's own type and buttons. One
   lime thing in each view: the button on the first screen, the bar while answers come in, the count on the result,
   the request button in the dark section, the tick after a request. The dot that rings while the page waits is the
   one thing that repeats, and only until what it waits for arrives (the design system's motion rules). */

.qc-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px 64px; padding-block: clamp(48px, 7vw, 72px) clamp(56px, 7vw, 88px); }
.qc-start__copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.qc-start__copy .lede { max-width: 560px; }
.qc-form { margin-top: 12px; padding: 32px; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius); }
.qc-form .input { border-color: var(--ink); background: var(--card); }
.qc-form__go { justify-content: flex-end; }
.qc-form__note { margin-top: 14px; font-size: 0.875rem; color: var(--ink-3); }
.qc-form .btn .qc-live { display: none; }
.qc-form .btn.is-sending .qc-live { display: inline-block; }
.qc-person { margin-top: 12px; }
.qc-form .dialog__status { margin-top: 14px; }
.qc-fine { font-size: 0.8125rem; line-height: 1.5; color: var(--ink-4); max-width: 620px; }
.qc-fine a, .qc-notice a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.qc-start__fine { grid-column: 1 / -1; margin-top: -24px; }
/* The ChatGPT check's own page: the form alone, in one column in the middle. The visitor's own result is the
   example, about a minute later. */
.qc-start.qc-start--solo { grid-template-columns: minmax(0, 760px); justify-content: center; }   /* two classes: it holds under 1080px too */
.qc-start--solo .qc-start__copy > .display, .qc-start--solo .qc-start__copy > .lede, .qc-start--solo .qc-start__fine { text-align: center; margin-inline: auto; }
.qc-notice { padding: 14px 18px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--card); font-size: 0.9375rem; color: var(--ink-2); }

.qc-sample { margin: 0; padding: 28px 28px 12px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qc-sample__tag { align-self: flex-start; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.qc-sample__count { font-family: var(--serif); font-size: clamp(2rem, 1.6rem + 1.2vw, 2.375rem); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.qc-sample__line { font-size: 0.9375rem; color: var(--ink-2); }
.qc-sample__rows { margin-top: auto; }
.qc-sample__rows li { padding: 16px 0; border-top: 1px solid var(--line-3); display: flex; flex-direction: column; gap: 10px; }
.qc-sample__rows p { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.25; }

.qc-result { padding-block: clamp(40px, 6vw, 64px) clamp(56px, 7vw, 88px); display: flex; flex-direction: column; gap: 32px; }
/* The dot that says the page is waiting: the wordmark's lime dot, sending out a ring every 1.6 seconds while
   something the visitor started is under way. With less motion asked for, the dot stays and the ring doesn't. */
.qc-live { position: relative; flex: none; display: inline-block; width: 12px; height: 12px; border-radius: 999px; background: var(--accent); box-shadow: inset 0 0 0 1.5px var(--ink); }
.qc-live--on-accent { background: var(--paper); }
.qc-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1.5px solid var(--ink); opacity: 0; }
.motion .qc-live::after { animation: qc-ping 1600ms var(--ease) infinite; }
@keyframes qc-ping { 0% { transform: scale(1); opacity: 0.55; } 80%, 100% { transform: scale(2.6); opacity: 0; } }

.qc-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line-2); }
/* Whose result this is, first on the page: the company's icon (or its first letter), its name, then the website,
   the place and the day. On a computer the icon sits beside both lines. On a phone it sits beside the name only,
   centred on it, and the website and the day run under both from the icon's left edge. */
.qc-who { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mark name" "mark meta"; column-gap: 16px; align-items: center; min-width: 0; }
.qc-who__mark { grid-area: mark; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--logo-ground); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.qc-who__mark img { width: 40px; height: 40px; object-fit: contain; }
.qc-who__mark img.is-small { width: 32px; height: 32px; }
.qc-who__mark span { font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--ink); transform: translateY(1px); }
.qc-who__name { grid-area: name; align-self: end; font-family: var(--serif); font-size: clamp(2rem, 1.7rem + 1vw, 2.375rem); line-height: 1.05; color: var(--ink); overflow-wrap: anywhere; }
/* Space separates the website, the place and the day. The design system gives each fact its own cell, with no dot or dash. */
.qc-who__meta { grid-area: meta; align-self: start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 20px; min-width: 0; overflow-wrap: anywhere; margin-top: 6px; font-size: 0.9375rem; color: var(--ink-3); }
.qc-who__where { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 20px; min-width: 0; }
.qc-who__meta span:empty { display: none; }
.qc-who__site { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; color: var(--ink-2); }
/* The share link beside the company: a button that reads as the site's link. It shows only where the result is
   one column, because there the share section is a screen further down. On a wide screen that section is in view. */
.qc-context__share { display: none; border: 0; margin-top: -8px; padding: 12px 0 2px; font: inherit; font-weight: 500; color: inherit; cursor: pointer; }
.qc-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px 56px; align-items: end; }
[data-phase="done"] .qc-top { align-items: start; }
/* With the result in: the count and its button, then the share section under them, with the chart beside both. */
[data-phase="done"] .qc-board { grid-column: 2; grid-row: 1 / span 2; }
[data-phase="done"] .qc-send { grid-column: 1; }
.qc-head { display: flex; flex-direction: column; gap: 16px; max-width: 880px; min-width: 0; }
/* The lime box is as tall as the letters' full height, which is more than the heading's tight line. A looser line
   keeps the box clear of the words above it. Only the heading with the box in it: the others keep the site's line. */
.qc-count { text-wrap: balance; }
.qc-count:has(.qc-count__n) { line-height: 1.17; }
.qc-count:focus { outline: none; }
.qc-count__n { padding: 0 0.14em; border-radius: 6px; background: var(--accent); box-shadow: inset 0 0 0 1px var(--ink); white-space: nowrap; }
.motion .qc-result.is-fresh .qc-count__n { background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 0 / 0% 100%; animation: sweep 600ms var(--ease) 200ms forwards; }
.qc-work { display: flex; align-items: center; gap: 14px; }
[data-phase="writing"] .qc-work .qc-live { display: none; }   /* the steps carry the dot while questions are written */

/* While the questions are written: the three steps. */
.qc-stages { padding: 8px 28px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); }
.qc-stages li { display: flex; align-items: center; gap: 16px; padding: 14px 0; color: var(--ink-3); }
.qc-stages li + li { border-top: 1px solid var(--line-3); }
.qc-stages li.is-now { color: var(--ink); font-weight: 600; }
.qc-stages li.is-done { color: var(--ink); }
.qc-stages__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--bar); }
.qc-stages__mark .check { display: none; width: 10px; height: 10px; stroke: var(--paper); stroke-width: 3; }
.qc-stages li.is-now .qc-stages__mark { box-shadow: inset 0 0 0 1.5px var(--ink); }
.qc-stages li.is-done .qc-stages__mark { width: 16px; height: 16px; background: var(--ink); box-shadow: none; }
.qc-stages li.is-done .qc-stages__mark .check { display: block; }

/* While ChatGPT answers: how many are back, as a bar of ten. */
.qc-progress { display: flex; flex-direction: column; gap: 10px; }
.qc-progress__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.qc-progress__n { font-family: var(--serif); font-size: 2.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.qc-progress__top span:last-child { font-size: 0.875rem; color: var(--ink-3); }
.qc-progress__bar, .qc-strip__bar { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.qc-progress__bar i, .qc-strip__bar i { height: 10px; border-radius: 4px; background: var(--line-3); transition: background-color 300ms ease, box-shadow 300ms ease; }
.qc-progress__bar i.is-on, .qc-strip__bar i.is-on { background: var(--accent); box-shadow: inset 0 0 0 1px var(--ink); }
.qc-progress__bar i.is-late, .qc-strip__bar i.is-late { background: var(--bar); }
.qc-progress__so { font-size: 0.875rem; color: var(--ink-3); }
.qc-strip { display: none; }

/* The result: who ChatGPT mentioned, as bars. */
.qc-board { padding: 28px 32px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.qc-board__title { font-size: 0.9375rem; font-weight: 600; }
.qc-board__line { margin-top: -10px; font-size: 0.875rem; color: var(--ink-3); }
.qc-board__rows { display: flex; flex-direction: column; gap: 14px; }
/* the name and its count on one line, the bar under them at the card's full width */
.qc-board__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; font-size: 0.875rem; }
.qc-board__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.qc-board__row.is-you .qc-board__name { font-weight: 600; }
.qc-mark { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--logo-ground); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; font-size: 0.75rem; font-weight: 600; line-height: 1; color: var(--ink-2); }
.qc-mark img { width: 16px; height: 16px; object-fit: contain; }
.qc-board__row.is-you .qc-mark { box-shadow: inset 0 0 0 1.5px var(--ink); }
.qc-board__track { grid-column: 1 / -1; grid-row: 2; display: block; height: 8px; border-radius: 4px; background: var(--line-3); overflow: hidden; }
.qc-board__track i { display: block; height: 100%; border-radius: 4px; background: var(--bar); transform-origin: left; }
.qc-board__row.is-you .qc-board__track i { background: var(--ink); }
.qc-board__val { font-family: var(--mono); font-size: 0.8125rem; text-align: right; font-variant-numeric: tabular-nums; }
.motion .qc-result.is-fresh .qc-board__track i { animation: qc-grow 600ms var(--ease) both; animation-delay: calc(300ms + var(--i, 0) * 80ms); }
@keyframes qc-grow { from { transform: scaleX(0); } }
.qc-table-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: -12px; }
.qc-table-head p { color: var(--ink-2); }
/* A page opened at a saved result's address (the program marks it) keeps its form out of sight until the page
   script has the result, so the form doesn't flash by first. If the script never arrives, the form shows itself. */
html.js[data-check-opening] .qc-start { visibility: hidden; animation: qc-opening 1ms linear 6s forwards; }
@keyframes qc-opening { to { visibility: visible; } }
/* Without scripts the check can't run, so its form isn't offered (the page says so under it). */
html:not(.js) .qc-form { display: none; }
.qc-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.qc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.qc-cta span { font-size: 0.9375rem; color: var(--ink-3); }
/* in the button's place once the full report has been requested for this result */
.qc-asked { margin-top: 8px; font-weight: 500; }

/* Sharing: the link as it looks where it is pasted, beside why and how to send it. */
/* The picture keeps its width and the words take the rest. Where the rest is too narrow for the button, the
   words go under the picture. */
.qc-send { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; max-width: 880px; padding: 20px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); }
.qc-send__link { flex: 0 1 260px; min-width: 0; margin: 0; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--paper); overflow: hidden; }
.qc-send__link img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; border-bottom: 1px solid var(--line-2); }
.qc-send__link figcaption { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; font-size: 0.8125rem; line-height: 1.35; overflow-wrap: anywhere; }
.qc-send__link figcaption strong { font-weight: 600; }
.qc-send__link figcaption span { color: var(--ink-3); }
.qc-send__copy { flex: 1 1 260px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.qc-send__title { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.qc-send__copy p { max-width: 520px; font-size: 0.9375rem; color: var(--ink-2); }
.qc-send__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
/* one wording of "mentioned you" shows at a time: the short one under the column's heading */
.qc-yes__long { display: none; }

.qc-table-wrap { border-top: 1.5px solid var(--ink); }
.qc-table { width: 100%; border-collapse: collapse; }
.qc-table th { padding: 14px 16px 14px 0; text-align: left; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.qc-table td { padding: 18px 16px 18px 0; vertical-align: top; border-top: 1px solid var(--line-3); }
.qc-table th:nth-child(2), .qc-table td.qc-yes { width: 11rem; }
.qc-table th:nth-child(3) { width: 38%; }
.qc-q { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; text-wrap: pretty; }
/* padding with a matching negative margin: a taller place to tap, in the same spot */
.qc-read { margin: -2px 0 -10px; padding: 10px 0; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 500; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qc-read[aria-expanded="true"] { color: var(--ink); }
.qc-wait { color: var(--ink-3); font-size: 0.9375rem; }
.qc-yes__yes { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.qc-yes__yes .check { width: 16px; height: 16px; stroke-width: 2.4; }
.qc-yes__no { color: var(--ink-3); }
.chip--self { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; }
.qc-table tr.is-waiting .qc-q { color: var(--ink-3); }
.qc-slot { display: inline-block; width: 92px; height: 28px; margin-right: 8px; border: 1px dashed var(--bar); border-radius: 999px; vertical-align: middle; }
.qc-slot--short { width: 74px; }
.qc-ph td { padding: 22px 0; }
.qc-ph__n { display: inline-block; width: 48px; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-4); vertical-align: middle; }
.qc-ph__line { display: inline-block; max-width: calc(100% - 64px); height: 12px; border: 1px dashed var(--bar); border-radius: 4px; vertical-align: middle; }
.qc-answer td { padding: 0 0 20px; border-top: 0; }
.qc-answer td > p { max-width: 72ch; padding: 0 20px; color: var(--ink-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.qc-answer td > p:first-child { padding-top: 18px; }
.qc-answer td > p:last-child { padding-bottom: 18px; }
.qc-answer td > p + p { margin-top: 12px; }
.qc-answer td { background: var(--card); }
.motion .qc-table tr.is-new td { animation: fade-in var(--t-med) var(--ease); }

.qc-name { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.qc-name__form { display: flex; align-items: flex-end; gap: 12px; }
.qc-name__form .field { flex: 1 1 auto; }
.qc-name__form .btn { min-height: 48px; }

.qc-next__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px 72px; align-items: start; }
.qc-next__copy { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.qc-next__copy .h2:focus { outline: none; }
.qc-steps { margin-top: 8px; border-top: 1px solid var(--night-line); }
.qc-steps li { display: flex; align-items: flex-start; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--night-line); }
.qc-steps__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--bar); border-radius: 999px; font-family: var(--mono); font-size: 0.75rem; }
.qc-steps__n .check { width: 14px; height: 14px; stroke: var(--ink); stroke-width: 2.5; }
.qc-steps__n:has([data-check-step-done]:not([hidden])) { background: var(--accent); border-color: var(--accent); }
.qc-steps strong { display: block; font-weight: 600; }
.qc-steps span:not(.qc-steps__n) { color: var(--on-night-2); }
.qc-next__alt { font-size: 0.9375rem; color: var(--on-night-2); }
.qc-next__alt a { color: var(--on-night); }
.qc-request { display: flex; flex-direction: column; gap: 18px; }
.on-night .qc-request .input { border-color: var(--paper); background: var(--paper); }
.on-night .qc-request .input:focus-visible { outline-color: var(--accent); }
.qc-ticks, .qc-names { margin: 0; padding: 0; border: 0; }
.qc-ticks legend, .qc-names legend { margin-bottom: 8px; }
.qc-ticks__list { display: flex; flex-direction: column; }
.qc-tick { min-height: 44px; align-items: center; }
.on-night .qc-tick i { border-color: var(--paper); background: transparent; }
.on-night .qc-tick input:checked + i { background: var(--paper); }
.on-night .qc-tick input:disabled + i { opacity: 0.4; }
.on-night .qc-tick input:focus-visible + i { outline-color: var(--accent); }
.qc-names__list { display: flex; flex-direction: column; gap: 10px; }
.qc-request .dialog__status { color: #FFB4A3; }
.qc-request__fine { font-size: 0.8125rem; line-height: 1.5; color: var(--on-night-3); }
.qc-request__fine a { color: var(--on-night-2); text-decoration: underline; text-underline-offset: 2px; }
.qc-after { display: flex; flex-direction: column; gap: 20px; }
.qc-after__box { padding: 24px; border: 1px solid var(--night-line); border-radius: var(--radius); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.qc-after__box h3 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; }
.qc-after__box p { color: var(--on-night-2); }
.qc-after__box .btn--accent { background: var(--paper); border-color: var(--paper); }
.qc-after__copy { border-color: var(--paper); color: var(--paper); }
@media (hover: hover) {
  .qc-after__copy:hover { background: var(--paper); color: var(--ink); }
  .qc-read:hover { color: var(--ink); }
}

@media (max-width: 1080px) {
  .qc-start, .qc-next__grid, .qc-top { grid-template-columns: minmax(0, 1fr); }
  .qc-top { align-items: start; }
  /* one column: the count, the chart, then the share section */
  [data-phase="done"] .qc-board, [data-phase="done"] .qc-send { grid-column: auto; grid-row: auto; }
  .qc-send { max-width: none; }               /* as wide as the chart over it */
  .qc-context__share:not([hidden]) { display: inline; }
  .qc-start__fine { margin-top: -16px; }
}
@media (max-width: 720px) {
  .qc-form { padding: 20px; }
  .qc-cta .btn { width: 100%; }
  /* on a phone: the heading, the link as it will look, the button */
  .qc-send { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .qc-send__copy { display: contents; }
  .qc-send__title { order: -1; }
  .qc-send__copy p { display: none; }
  .qc-send__go { flex-direction: column; align-items: stretch; margin-top: 0; }
  .qc-send__go .link { align-self: flex-start; }
  /* smaller names, so three fit on a line more often */
  .qc-table .chip { padding: 4px 10px; font-size: 0.75rem; }
  /* each question becomes a small card */
  .qc-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .qc-table, .qc-table tbody, .qc-table tr, .qc-table td { display: block; width: auto; }
  .qc-table tr:not(.qc-answer) { margin-top: 12px; padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--card); }
  /* an opened answer is the lower part of its question's card */
  .qc-table tbody:has(.qc-answer:not([hidden])) tr:not(.qc-answer) { border-bottom-color: var(--line-3); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .qc-table tr.qc-answer { border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); overflow: hidden; }
  .qc-table-wrap { border-top: 0; }
  .qc-table td { padding: 0; border-top: 0; }
  /* A card has no column headings over it, so it says "Mentioned you" in full and the names follow with no
     label. That keeps the ten cards to about half the height they had with a label over each line. */
  .qc-table td.qc-yes, .qc-table td[data-label] { display: block; margin-top: 10px; }
  .qc-table td.qc-yes { width: auto; font-size: 0.9375rem; }
  /* "No companies" reads as part of the line over it, and a cell with nothing to say takes no room */
  .qc-table td[data-label]:not(.qc-yes) { font-size: 0.9375rem; color: var(--ink-3); }
  .qc-table td[data-label] .chips { color: var(--ink); }
  .qc-table td[data-label]:empty { display: none; }
  .qc-yes__short { display: none; }
  .qc-yes__long { display: inline; }
  .qc-table td[data-label] > .chips { flex: 1 1 auto; min-width: 0; }
  /* a long company name wraps inside its chip instead of running off the card */
  .qc-table .chip { white-space: normal; overflow-wrap: anywhere; }
  .qc-wait { margin-top: 10px; }
  .qc-table tr.is-waiting { border-style: dashed; border-color: var(--bar); background: transparent; }
  .qc-table td.qc-slots { display: none; }
  .qc-table tr.qc-ph { padding: 18px 16px; }
  .qc-ph td { padding: 0; }
  .qc-board { padding: 20px; }
  .qc-who { grid-template-areas: "mark name" "meta meta"; column-gap: 14px; width: 100%; }
  .qc-who__name { align-self: center; }
  .qc-who__mark { width: 48px; height: 48px; border-radius: 12px; }
  .qc-who__mark img { width: 34px; height: 34px; }
  .qc-who__mark img.is-small { width: 28px; height: 28px; }
  .qc-who__mark span { font-size: 1.75rem; }
  .qc-who__meta { flex-direction: column; margin-top: 14px; }
  /* While answers come in, a strip under the header keeps the count in view. */
  .qc-strip:not([hidden]) { display: flex; align-items: center; gap: 10px; position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 40; margin: -8px calc(var(--gutter) * -1) -16px; padding: 10px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--line-2); font-size: 0.8125rem; font-weight: 600; }
  .qc-strip__bar { flex: 1 1 auto; max-width: 160px; margin-left: auto; gap: 3px; }
  .qc-strip__bar i { height: 6px; border-radius: 3px; }
  .qc-answer td > p { padding: 0 16px; }
  .qc-name__form { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

@media print {
  .site-header, .menu, .demo__controls, .dialog { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- the fact check (/chatgpt/facts/): "Is ChatGPT right about you?" ----------
   From the canvas "Fact check design" (11 October 2026). Everything else on its screens is the quick check's own:
   .qc-start, .qc-form, .qc-sample, .qc-result, .qc-context, .qc-top, .qc-head, .qc-count, .qc-progress, .qc-board,
   .qc-send, .qc-next and the request form. No new text size. One lime thing in each view: the button on the first
   screen, the count on the result. New pieces: the answer card, the three mark buttons, the note and the box of
   sources. A chosen mark is an ink fill with a tick, so it is told apart without color. */
.fc-bar5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* The count and the box of sources start level. On the quick check the box sits at the foot of the headline. */
.fc-root .qc-top { align-items: start; }
.fc-root .qc-top .qc-progress { align-self: end; }
.fc-notice { display: flex; flex-direction: column; gap: 4px; max-width: 720px; font-size: 0.875rem; color: var(--ink-3); }
.fc-marked { max-width: 620px; font-size: 0.9375rem; color: var(--ink-3); }
.fc-how { margin-top: -4px; }
.fc-cards { display: flex; flex-direction: column; gap: 16px; }
.fc-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; padding: 28px 32px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); }
/* A 1.5px ink border means "this one": an answer marked wrong. */
.fc-card.is-wrong { padding: 27.5px 31.5px; border: 1.5px solid var(--ink); }
.fc-card__n { padding-top: 2px; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }
.fc-card__body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fc-card__topic { margin-bottom: -8px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.fc-card__q { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.fc-card__a { display: flex; flex-direction: column; gap: 12px; max-width: 72ch; color: var(--ink-2); line-height: 1.65; overflow-wrap: anywhere; }
.fc-card__a ul, .fc-card__a ol { display: flex; flex-direction: column; gap: 4px; padding-left: 20px; }
.fc-card__a ul { list-style: disc; }
.fc-card__a ol { list-style: decimal; }
/* A long answer is cut, fading out, until "Show the whole answer" opens it. The fact test of October 11, 2026 put
   a typical answer at about 140 words and the longest at 442. So the cut is about 12 lines on a wide screen and 16
   on a phone: a typical answer shows whole and a long one is cut (assets/facts.js decides which, with a few lines
   to spare). */
.fc-card__a.is-cut { max-height: calc(1.65em * 12); overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.fc-card__body > .qc-read { align-self: flex-start; margin: -12px 0 -6px; }
.fc-card__src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.8125rem; color: var(--ink-3); }
/* The visitor's own site among the sources: an ink outline and the words "Your site". Never a filled pill, which
   would read as a pressed button. */
.chip--yours { border-color: var(--ink); background: var(--card); color: var(--ink); font-weight: 500; }
.fc-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 20px; border-top: 1px solid var(--line-3); }
.fc-marks__label { font-size: 0.9375rem; font-weight: 600; }
.fc-marks__set { display: flex; flex-wrap: wrap; gap: 8px; }
.fc-mark { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--card); font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--ink); cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.fc-mark svg { display: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Chosen: an ink fill and a tick. Hover is a tint, never the fill. */
.fc-mark[aria-checked="true"], .fc-mark.is-on { background: var(--ink); color: var(--paper); }
.fc-mark[aria-checked="true"] svg, .fc-mark.is-on svg { display: block; }
.fc-mark:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (hover: hover) { .fc-mark[aria-checked="false"]:hover { background: var(--band); } }
.fc-note { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.fc-note .label { font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.fc-note textarea { min-height: 0; resize: vertical; line-height: 1.5; padding-block: 10px; }
.fc-note__status { font-size: 0.8125rem; color: var(--ink-3); }
/* A card still waiting, or one that ran out of time: the question and a line, on one row. */
.fc-card.is-waiting { grid-template-columns: 36px minmax(0, 1fr) auto; align-items: baseline; }
.fc-card.is-waiting .fc-card__q { font-size: 1.25rem; line-height: 1.25; color: var(--ink-3); }
.fc-wait { font-size: 0.875rem; color: var(--ink-3); white-space: nowrap; }
.fc-card.is-late { border-style: dashed; border-color: var(--bar); background: transparent; }
.motion .fc-card.is-new { animation: fade-in var(--t-med) var(--ease); }
.fc-sample { align-self: start; padding-bottom: 8px; }
.fc-sample__rows li { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-top: 1px solid var(--line-3); }
.fc-sample__q { font-family: var(--serif); font-size: 1.25rem; line-height: 1.25; text-wrap: balance; }
.fc-sample__a { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }
.fc-sample .fc-mark { min-height: 40px; padding: 0 14px; font-size: 0.875rem; cursor: default; }
/* "This is the company's name" shows only when the name and the website share no word. Its tick is ink: the
   button under it is the one lime thing on this screen. */
.fc-own .toggle input:checked + i { background: var(--ink); }
.fc-own .toggle i svg { stroke: var(--paper); }
/* After the last card: the next step first, the other check under it. */
.fc-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 24px 32px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--card); }
.fc-end p { max-width: 620px; font-family: var(--serif); font-size: 1.75rem; line-height: 1.1; text-wrap: balance; }
.fc-also { font-size: 0.9375rem; color: var(--ink-2); }
.fc-also a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1080px) {
  .fc-root .qc-top .qc-progress { align-self: auto; }
}
@media (max-width: 720px) {
  .fc-card, .fc-card.is-waiting { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .fc-card.is-wrong { padding: 19.5px; }
  .fc-card__n { padding: 0 0 6px; }
  .fc-card__q { font-size: 1.25rem; line-height: 1.25; }
  .fc-card__a.is-cut { max-height: calc(1.65em * 16); }
  .fc-card.is-waiting .fc-wait { margin-top: 8px; white-space: normal; }
  .fc-marks__set { width: 100%; flex-wrap: nowrap; }
  .fc-mark { flex: 1 1 0; min-width: 0; padding: 0 8px; gap: 6px; }
  /* Three in a row leave no room for the tick. A phone has no hover to confuse with the ink fill. */
  .fc-mark[aria-checked="true"] svg, .fc-mark.is-on svg { display: none; }
  .fc-end { padding: 20px; }
  .fc-end p { font-size: 1.25rem; line-height: 1.25; }
  .fc-end .btn { flex: 1 1 100%; }
}
@media (max-width: 360px) {
  /* "Incomplete" is the longest of the three. On the narrowest phones the cards and the sample give the row more
     room, and the three buttons share it more tightly. */
  .fc-card, .fc-card.is-waiting { padding: 16px; }
  .fc-card.is-wrong { padding: 15.5px; }
  .fc-sample { padding: 20px 16px 8px; }
  .fc-marks__set { gap: 6px; }
  .fc-mark, .fc-sample .fc-mark { padding: 0 2px; font-size: 0.8125rem; }
}

/* ---------- the tools page (/tools/), the access check (/can-ai-read-your-site/) and the connector's help page ----------
   New styles for three pages. Everything else on them is the site's own: .snap, .gets, .site-form, .qc-start,
   .qc-form, .qc-sample, .qc-result, .qc-context, .qc-stages, .qc-next, .doc and .prose. No new text size: each size
   here is one the site already uses. One lime thing in each view: the marked words in a headline, or the one button
   that starts the next step. */

/* ----- the tools page: a headline, then one section per tool, on alternating grounds like the homepage ----- */
.tl-hero { padding-block: clamp(48px, 6vw, 88px) clamp(48px, 6vw, 72px); }
.tl-hero .display { margin-top: 20px; }
.tl-hero .lede { margin-top: 28px; max-width: 600px; }
.tl .snap { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); }
.tl .snap__copy .btn { margin-top: 32px; }
.tl .qc-sample { align-self: center; }
.section--band .qc-sample, .section--band .tl-chat { background: var(--card); }
.tl__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.tl .snap__copy .tl__row .btn { margin-top: 0; }
.tl__row .link, .tl__time { font-size: 0.9375rem; }
.tl__time { color: var(--ink-3); }
/* the access check starts from this page: one field and its button */
.tl-site { margin-top: 28px; max-width: 520px; }
.tl .snap__copy .tl-site .btn { margin-top: 0; align-self: auto; }
/* what a person types into a chat: set in serif like every quoted question on the site */
.tl-chat { margin: 0; padding: 28px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tl-chat .chip--mono { align-self: flex-start; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; }
.tl-chat__ask { font-family: var(--serif); font-size: clamp(1.5rem, 1.3rem + 0.7vw, 1.75rem); line-height: 1.2; text-wrap: pretty; }
.tl-chat__back { padding-top: 16px; border-top: 1px solid var(--line-3); font-size: 0.9375rem; color: var(--ink-2); }

/* ----- the access check: the form is one field and its button on a row ----- */
.ac-form__row { display: flex; align-items: flex-end; gap: 12px; }
.ac-form__row .field { flex: 1 1 auto; }
.ac-form__row .btn { flex: 0 0 auto; min-height: 48px; }
.ac-reads { margin-top: 20px; max-width: 620px; }

/* a crawler and what robots.txt tells it, in the sample card */
.ac-rows li { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-3); }
.qc-sample .ac-rows li { flex-direction: row; padding: 14px 0; }
.qc-sample:has(.ac-rows) { align-self: start; padding-bottom: 14px; }
.qc-sample .ac-rows { margin-top: 4px; }
.ac-bot { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink); overflow-wrap: anywhere; }
.ac-state { font-size: 0.9375rem; color: var(--ink-2); white-space: nowrap; }
/* "Told to stay out" is said in words and set in ink. There is no warning color. */
.ac-state--out { padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.8125rem; font-weight: 500; line-height: 1.3; }

/* while the four requests are out: the steps, with the dot that waits */
.ac-wait { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 32px 56px; align-items: start; }
.ac-wait__head { display: flex; flex-direction: column; gap: 16px; }
.ac-wait__line { display: flex; align-items: center; gap: 12px; }

/* the result */
.ac-done { display: flex; flex-direction: column; gap: 32px; }
.ac-head { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.ac-head .lede { max-width: 720px; }
.ac-head .h2:focus, .ac-wait .h2:focus { outline: none; }
/* a finding that names many crawlers is a long sentence: it is set at the size of a section heading */
.ac-head .h2.is-long { font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.125rem); line-height: 1.15; letter-spacing: 0; }
.ac-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 8px; }
.ac-share span { font-size: 0.9375rem; color: var(--ink-3); }
/* the lines of the visitor's own robots.txt, quoted with their line numbers */
.ac-rule { margin: 0; max-width: 720px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.ac-rule figcaption { padding: 12px 20px; border-bottom: 1px solid var(--line-3); font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ac-rule ol { padding: 14px 20px; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.9; overflow-x: auto; }
.ac-rule li { display: flex; gap: 20px; white-space: pre; }
.ac-rule li > span:first-child { flex: none; width: 2ch; text-align: right; color: var(--ink-4); }
.ac-rule__note { padding: 12px 20px 16px; border-top: 1px solid var(--line-3); font-size: 0.9375rem; color: var(--ink-2); }
/* the crawlers, in two groups: the ones that read pages for answers, then the ones that collect training data */
.ac-groups { display: flex; flex-direction: column; gap: 32px; }
.ac-group .eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); color: var(--ink); }
.ac-group .eyebrow span { color: var(--ink-3); text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 0.875rem; }
.ac-list li { display: grid; grid-template-columns: 15rem minmax(0, 1fr) auto; align-items: baseline; gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line-3); }
.ac-maker { margin-left: 10px; font-family: var(--sans); font-size: 0.8125rem; color: var(--ink-3); }
.ac-does { color: var(--ink-2); }
.ac-does small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--ink-3); }
.ac-list .ac-state { justify-self: end; }
/* the homepage: the number of words, then the two optional files */
.ac-home { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; }
/* an odd card at the end takes the whole row, so no half of a row is left empty */
.ac-home > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.ac-fact, .ac-files { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.ac-fact p, .ac-files p { color: var(--ink-2); }
.ac-fact .ac-label, .ac-files .ac-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.ac-fact .ac-fact__n { font-family: var(--serif); font-size: clamp(2.5rem, 1.75rem + 3.1vw, 4rem); line-height: 1.03; letter-spacing: -0.015em; color: var(--ink); }
.ac-files dl { margin: 0; }
.ac-files dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-top: 1px solid var(--line-3); }
.ac-files dt { font-weight: 600; }
.ac-files dd { margin: 0; color: var(--ink-2); }
.ac-files dd.ac-files__why { grid-column: 1 / -1; font-size: 0.9375rem; }
/* what comes next, on ink, as the quick check ends */
.ac-next .qc-next__copy .btn { align-self: flex-start; margin-top: 8px; }
.ac-next .qc-after__box { gap: 14px; }
.ac-end { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }

/* ----- the connector's help page ----- */
.help__adds { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.prose .help-asks { gap: 12px; }
.prose .help-asks li { padding: 18px 20px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); font-family: var(--serif); font-size: 1.1875rem; line-height: 1.3; color: var(--ink); }
.prose .help-asks li::before { content: none; }
/* three numbered steps, then the reference sections */
.help__facts { margin-top: 16px; color: var(--ink-3); }
.help__or { margin-top: 16px; font-size: 0.9375rem; color: var(--ink-3); }
.prose h2 .help-n { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 10px; border: 1.5px solid var(--ink); border-radius: 999px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0; vertical-align: 0.2em; }
.help-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 6px; }
.help-way { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); min-width: 0; }
.help-way h3 { font-size: 1.0625rem; font-weight: 600; color: var(--ink); }
.prose .help-way ol { display: flex; flex-direction: column; gap: 10px; counter-reset: way; }
.prose .help-way ol li { padding-left: 30px; counter-increment: way; line-height: 1.5; }
.prose .help-way ol li::before { content: counter(way); left: 0; top: 0.1em; width: auto; height: auto; border: 0; border-radius: 0; background: none; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }
.prose .help-way__note { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-3); font-size: 0.875rem; color: var(--ink-3); }
.help-url { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--radius-sm); }
.help-url code { font-family: var(--mono); font-size: 0.9375rem; overflow-wrap: anywhere; }

/* ----- how we count (/how-we-count/): the quick check and the snapshot side by side ----- */
.count-table { margin-top: 6px; border-top: 1.5px solid var(--ink); }
.count-table th, .count-table td { padding: 14px 16px 14px 0; text-align: left; vertical-align: top; line-height: 1.5; }
.count-table tbody th, .count-table tbody td { border-top: 1px solid var(--line-3); }
.count-table thead th { font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.count-table tbody th { width: 34%; font-weight: 400; color: var(--ink-2); }
.count-table tbody td { width: 33%; color: var(--ink); }
.count-table th:last-child, .count-table td:last-child { padding-right: 0; }
.prose .help__adds { margin-top: 10px; }
.prose a.btn { text-decoration: none; }
/* under a quick check result's "how it was asked" line: the link sits with that line, not a section's gap below it */
.qc-result .qc-how-link { margin-top: -22px; }

/* On a tool's page the header carries no snapshot button until a result is on screen: until then the page has one
   job, which is the check. "Free snapshot" stays in the menu. */
.tool-page:not(:has([data-phase="done"] [data-tool-result]:not([hidden]))) .site-header [data-snapshot-open] { display: none; }
/* Once the quick check's full report has been requested, neither the header nor the menu offers it again. */
.tool-page:has([data-check][data-asked]) :is(.site-header, .menu) [data-snapshot-open] { display: none; }
/* The same on the fact check's page (assets/facts.js). */
.tool-page:has([data-facts][data-asked]) :is(.site-header, .menu) [data-snapshot-open] { display: none; }
.ac-copied { font-weight: 500; color: var(--ink); }

/* Five links at most in the header (site.yml, nav), so from 1081px up they keep their normal spacing, "Book a call"
   stays in view and no link wraps. */
.nav a { white-space: nowrap; }
@media (max-width: 1080px) {
  .tl .snap, .ac-wait { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .ac-home, .help-ways { grid-template-columns: minmax(0, 1fr); }
  .help__adds .btn, .tl__row .btn { flex: 1 1 100%; }
  .tl .snap__copy > .btn, .ac-next .qc-next__copy .btn, .ac-next .qc-after__box .btn { align-self: stretch; }
  .ac-share .btn { flex: 1 1 100%; }
}
@media (max-width: 620px) {
  .ac-form__row { flex-direction: column; align-items: stretch; }
  /* a crawler's name and what it is told stay on one line. What it does goes under them. */
  .ac-list li { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 0; }
  .ac-list .ac-does { grid-column: 1 / -1; grid-row: 2; font-size: 0.9375rem; }
  .ac-maker { display: block; margin: 2px 0 0; }
}

/* ---------- the contact page (/contact/) ----------
   The site's own parts: .qc-form for the card, .fields and .input for the boxes, .done for the sent screen and the
   tools page's headline. New here: the grid, the topic choices and the side column. No new text size. One lime
   thing in each view, as on the tools page: the marked words in the headline, then the send button. A picked topic
   is ink, like a selected chip. */
.ct {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  grid-template-areas: "head ." "card ways"; column-gap: 72px;
  padding-block: clamp(48px, 6vw, 88px) var(--section);
}
.ct__head { grid-area: head; }
.ct__head .display { margin-top: 20px; }
.ct__head .lede { margin-top: 24px; max-width: 600px; }
.ct__card { grid-area: card; align-self: start; margin-top: 40px; max-width: 760px; }
.ct__card .input[aria-invalid="true"] { border-color: var(--error); }   /* over .qc-form's ink border */
html:not(.js) .ct__card { display: block; }          /* the card stays, with its line about JavaScript */
html:not(.js) .ct__card form { display: none; }
.ct__card textarea.input { min-height: 168px; }
.ct__card .dialog__status { margin-top: 0; }
.dialog__status a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* "book a call or send us a message": each link stays whole when the line wraps on a phone */
.hero__alt .link, .final__alt .link, .qc-next__alt .link { white-space: nowrap; }
.ct-send { align-self: flex-start; }
.ct-send:disabled { opacity: 0.7; }

.ct-topics__list { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-topic { position: relative; display: inline-flex; cursor: pointer; }
.ct-topic input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-topic span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--card);
  font-size: 0.9375rem; line-height: 1.3;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
@media (hover: hover) { .ct-topic:hover span { background: var(--line-3); } }
.ct-topic input:checked + span { background: var(--ink); color: var(--paper); }
.ct-topic input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.ct-topics[aria-invalid="true"] .ct-topic span { border-color: var(--error); }

.ct-done__title { font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1.05; }
.ct-next { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line-3); }

.ct-ways { grid-area: ways; align-self: start; margin-top: 40px; border-top: 1.5px solid var(--ink); }
.ct-ways > .eyebrow { padding-top: 16px; }
.ct-way { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
.ct-way:last-child { border-bottom: 0; }
.ct-way__title { font-family: var(--serif); font-weight: 400; font-size: 1.625rem; line-height: 1.1; }
.ct-way p { font-size: 0.9375rem; color: var(--ink-2); }
.ct-way .btn { margin-top: 6px; }

@media (max-width: 1080px) {
  .ct { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "card" "ways"; }
  .ct-ways { max-width: 760px; margin-top: 56px; }
}
@media (max-width: 620px) {
  .ct__card { margin-top: 32px; }
  .ct-send, .ct-way .btn { align-self: stretch; }
}

/* ---------- briefs: a hidden page made for one prospect (/for/<slug>/, from site/src/briefs/) ----------
   The headline, every brand at a glance, what stands out, then one table per kind of product. Table rows become
   cards on a tablet or a phone (960px and narrower).
   A dot per question: ink where the answer mentioned the brand, a ring where it didn't. The count is always
   printed beside the dots, so the dots never carry the number alone. */
.brief { padding-block: clamp(40px, 6vw, 72px) clamp(64px, 8vw, 96px); }
.brief__hero { display: flex; flex-direction: column; gap: 20px; }
.brief__for { font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem); line-height: 1.4; color: var(--ink-3); }
.brief__for strong { font-weight: 600; color: var(--ink); }
.brief__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 1.5rem + 3.8vw, 4.25rem); line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; }
.brief__lede { max-width: none; }
.brief__asked { font-size: 0.8125rem; color: var(--ink-4); }
.brief__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 8px; }
.brief__cta-alt { font-size: 0.9375rem; color: var(--ink-3); }
.brief__cta-alt a { color: var(--ink); }
/* A brand name in the text: bold, in ink, and never split across two lines. */
.brief__lede strong, .brief__sub strong, .brief__finding p strong, .brief__gnote strong, .brief__top strong, .brief__named strong, .brief__method dd strong { font-weight: 600; color: var(--ink); white-space: nowrap; }
.brief__all { margin-top: clamp(56px, 7vw, 80px); }
.brief__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 64px); margin-top: 24px; align-items: start; }
.brief__gh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; }
.brief__gh span { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); white-space: nowrap; }
.brief__rank a { display: grid; grid-template-columns: minmax(0, 1fr) auto 3.75rem; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-3); color: var(--ink); text-decoration: none; }
.brief__who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brief__who .qc-mark { width: 28px; height: 28px; border-radius: 7px; }
.brief__who .qc-mark img { width: 20px; height: 20px; }
.brief__rname { font-weight: 600; line-height: 1.3; }
.brief__rname small { display: block; margin-top: 2px; font-size: 0.8125rem; font-weight: 400; color: var(--ink-4); }
.brief__rank .brief__dots, .brief__rank .brief__count { margin-top: 0; }
.brief__rank .brief__count { text-align: right; white-space: nowrap; }
.brief__gnote { margin-top: 14px; font-size: 0.875rem; color: var(--ink-3); text-wrap: pretty; }
.brief__h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.5rem); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; }
.brief__stand { margin-top: clamp(56px, 7vw, 80px); }
.brief__findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
.brief__finding { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.brief__finding h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; text-wrap: balance; }
.brief__finding p { color: var(--ink-2); text-wrap: pretty; }
.brief__cat { margin-top: clamp(56px, 7vw, 80px); }
.brief__sub { margin-top: 10px; color: var(--ink-2); text-wrap: pretty; }
.brief__table { width: 100%; margin-top: 20px; border-collapse: collapse; table-layout: fixed; }
.brief__table thead th { padding: 0 14px 10px 0; border-bottom: 1px solid var(--line); font-size: 0.8125rem; font-weight: 500; color: var(--ink-3); text-align: left; }
.brief__table thead th:nth-child(1) { width: 20%; }
.brief__table thead th:nth-child(2) { width: 15%; }
.brief__table thead th:nth-child(3) { width: 25%; }
.brief__table thead th:nth-child(4) { width: 40%; }
.brief__table tbody tr:target th, .brief__table tbody tr:target td { background: var(--card); }
.brief__table tbody tr:target th { box-shadow: -16px 0 0 var(--card); }
.brief__table tbody tr:target td:last-child { box-shadow: 16px 0 0 var(--card); }
.brief__table tbody th, .brief__table tbody td { padding: 18px 14px 18px 0; border-bottom: 1px solid var(--line-3); text-align: left; vertical-align: top; font-weight: 400; }
.brief__brand { display: block; font-weight: 600; line-height: 1.35; }
/* The way into a brand's 10 questions and answers: a small outlined button, so it reads as something to open. */
.brief__open { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 0.8125rem; font-weight: 500; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; transition: background var(--t-fast) ease, color var(--t-fast) ease; }
.brief__ext { flex: none; }
.brief__dots { display: flex; gap: 4px; margin-top: 6px; }
.brief__dots i { display: block; width: 10px; height: 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--bar); }
.brief__dots i.on { background: var(--ink); box-shadow: none; }
.brief__count { display: block; margin-top: 8px; font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-3); }
.brief__count b { font-weight: 500; color: var(--ink); }
.brief__top { font-size: 0.9375rem; }
.brief__keep { white-space: nowrap; }
.brief__q q { display: block; quotes: "\201C" "\201D"; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.3; color: var(--ink); text-wrap: pretty; }
.brief__named { display: block; margin-top: 8px; font-size: 0.875rem; color: var(--ink-3); }
.brief__label { display: none; }
.brief__method { margin-top: clamp(56px, 7vw, 80px); }
.brief__method dl { display: grid; grid-template-columns: 160px minmax(0, 1fr); margin-top: 20px; border-top: 1px solid var(--line); }
.brief__method dt, .brief__method dd { padding: 14px 0; border-bottom: 1px solid var(--line-3); }
.brief__method dt { font-weight: 500; }
.brief__method dd { color: var(--ink-2); text-wrap: pretty; }
.brief__next .display { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); max-width: 14em; text-wrap: balance; }
.brief__next .lede { max-width: 960px; text-wrap: balance; }
.brief__promise { margin-top: 20px; max-width: 960px; font-family: var(--serif); font-size: 1.375rem; line-height: 1.3; color: var(--on-night); text-wrap: balance; }
.brief__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
/* OneCal's booking page, on the page. Its own background is a light grey, so the frame carries it to the edges. */
.brief__cal { width: 100%; max-width: 960px; margin: 40px auto 0; border-radius: var(--radius); overflow: hidden; background: #F3F4F6; }
/* OneCal opens a booking window of about 690px once a time is picked, more with questions, so the frame fills the
   screen below the header (the page already stops in-page links just under it), between 660px and 900px. */
.brief__cal iframe { display: block; width: 100%; height: clamp(660px, calc(100vh - var(--header-h) - 32px), 900px); border: 0; }
.brief__cal-new { margin-top: 14px; font-size: 0.875rem; color: var(--on-night-2); }
.brief__cal-new a { color: var(--on-night); }
.brief__pick { display: none; }
.brief__next .btn--ghost { border-color: var(--on-night); color: var(--on-night); }
@media (hover: hover) {
  .brief__rank a:hover .brief__rname { text-decoration: underline; text-underline-offset: 3px; }
  .brief__open:hover { background: var(--ink); color: var(--bg); }
  .brief__next .btn--ghost:hover { background: var(--on-night); color: var(--ink); }
}
@media (min-width: 961px) {
  .brief__table tbody tr:last-child th, .brief__table tbody tr:last-child td { padding-bottom: 0; border-bottom: 0; }
}
/* A narrower laptop: the brand column keeps room for its "10 questions and answers" button, the dots for all ten. */
@media (min-width: 961px) and (max-width: 1180px) {
  .brief__table thead th:nth-child(1) { width: 24%; }
  .brief__table thead th:nth-child(2) { width: 18%; }
  .brief__table thead th:nth-child(3) { width: 22%; }
  .brief__table thead th:nth-child(4) { width: 36%; }
}
/* A tablet or a phone: each table row becomes a card. */
@media (max-width: 960px) {
  .brief__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brief__table, .brief__table tbody, .brief__table tr, .brief__table tbody th, .brief__table tbody td { display: block; width: 100%; }
  .brief__table tbody tr { margin-bottom: 12px; padding: 16px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
  .brief__table tbody th, .brief__table tbody td { padding: 0; border: 0; }
  .brief__table tbody th { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-3); }
  .brief__open { margin-top: 0; }
  .brief__table tbody th .brief__brand { flex-basis: 100%; }   /* the button always sits on its own line under the name */
  .brief__table td.brief__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding-top: 12px; }
  .brief__dots, .brief__count { margin-top: 0; }
  .brief__table td.brief__top, .brief__table td.brief__q { padding-top: 14px; }
  .brief__label { display: block; margin-bottom: 4px; font-size: 0.8125rem; color: var(--ink-3); }
  .brief__label--inline { display: inline; margin-bottom: 0; }
}
/* Below about 880px OneCal turns its booking page into a long list of times, so a button opens it on its own. */
@media (max-width: 880px) {
  .brief__cal, .brief__cal-new { display: none; }
  .brief__pick { display: flex; }
}
@media (max-width: 900px) {
  .brief__groups { grid-template-columns: minmax(0, 1fr); }
  .brief__findings { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 760px) {
  .brief__rank a { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .brief__rank .brief__dots { gap: 2px; }
  .brief__rank .brief__dots i { width: 8px; height: 8px; }
  .brief__group--never .brief__rank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .brief__group--never .brief__rank a { grid-template-columns: minmax(0, 1fr); }
  .brief__group--never .brief__dots, .brief__group--never .brief__count { display: none; }
  .brief__method dl { grid-template-columns: minmax(0, 1fr); }
  .brief__method dt { padding-bottom: 0; border-bottom: 0; }
  .brief__method dd { padding-top: 4px; }
  .brief__actions { flex-direction: column; align-items: stretch; max-width: 320px; margin-inline: auto; }
}

/* ---------- three-words briefs (/for/<slug>/ with "kind": "three-words") ----------
   Every answer to "Describe <brand> in three words." from ChatGPT, Claude and Perplexity, the words the answers chose,
   then the same for a brand set beside it. A dot per answer, in threes by tool: ink where the answer used the word, a
   ring where it didn't. The count is always printed beside the dots, so the dots never carry the number alone.
   One dot group is 3 x 12px + 2 x 5px = 46px wide, and the groups sit 20px apart, so the tool names above line up. */
.words__sec { margin-top: clamp(56px, 7vw, 80px); }
.words .mark--wrap { white-space: normal; }   /* a phrase in the headline may break across lines on a phone */
.words__tally { margin-top: 24px; border-top: 1.5px solid var(--ink); }
.words__tally li { display: grid; grid-template-columns: minmax(0, 1fr) 178px 4.5rem; align-items: center; gap: 24px; padding: 14px 0; border-bottom: 1px solid var(--line-3); }
.words__tally li.words__head { padding: 10px 0 8px; border-bottom: 1px solid var(--line); }
.words__tools { display: grid; grid-template-columns: repeat(3, 46px); column-gap: 20px; }
.words__tools span { display: flex; justify-content: center; white-space: nowrap; font-size: 0.75rem; color: var(--ink-3); }
.words__word { font-family: var(--serif); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.15; overflow-wrap: anywhere; }
.words__tally--small .words__word { font-size: clamp(1.1875rem, 1.1rem + 0.3vw, 1.375rem); }
.words__dots { display: flex; align-items: center; gap: 5px; }
.words__dots i { display: block; flex: none; width: 12px; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--bar); }
.words__dots i.on { background: var(--ink); box-shadow: none; }
.words__dots b { display: block; flex: none; width: 10px; }   /* the space between one tool's answers and the next tool's */
.words__count { font-family: var(--mono); font-size: 0.875rem; color: var(--ink-3); text-align: right; white-space: nowrap; }
.words__count b { font-weight: 500; color: var(--ink); }
.words__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; align-items: start; }
.words__toolname { padding-bottom: 10px; border-bottom: 1.5px solid var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.1; }
.words__answer { margin: 12px 0 0; padding: 14px 18px 16px; background: var(--card); border: 1px solid var(--line-2); border-radius: var(--radius-sm); }
.words__answer figcaption { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-4); }
.words__answer blockquote { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.words__answer blockquote p + p { margin-top: 8px; }
.words__answer blockquote strong { font-weight: 600; }
.words__answer--short blockquote { font-family: var(--serif); font-size: 1.375rem; line-height: 1.2; }
.words__answer--short blockquote strong { font-weight: 400; }   /* a serif face has one weight: the whole answer is the words */
.words__vs .brief__sub strong { font-weight: 600; }
.words__same { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }   /* the brand's own top word, beside the other brand */
.words__more { margin-top: 20px; }
.words__more summary { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 0.875rem; font-weight: 500; cursor: pointer; list-style: none; }
.words__more summary::-webkit-details-marker { display: none; }
.words__more summary::after { content: "+"; font-family: var(--mono); }
.words__more[open] summary::after { content: "\2212"; }
@media (hover: hover) {
  .words__more summary:hover { background: var(--ink); color: var(--paper); }
}
@media (max-width: 960px) {
  .words__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
/* A phone: the word and its count on one line, the dots under them. The tool names above the dots go. */
@media (max-width: 620px) {
  .words__tally li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "word count" "dots dots"; gap: 8px 16px; }
  .words__tally li.words__head { display: none; }
  .words__word { grid-area: word; }
  .words__dots { grid-area: dots; }
  .words__count { grid-area: count; }
}