/* ============================================================
   Quill — design system v17 (v16 plus v15's agents and process sections)
   The systems list uses v15's smaller name size with v16's motion.
   Built on v16, which is v14 tuned to the logo
   v14's warm feel, with the purples rebuilt on the logo's lavender
   (#8A7FD6), the logo's blue (#7AA2E3) as a quiet second hue, and the
   wordmark's blue-black (#1E2330) for dark text. The sky
   (art/make-art-dawn.py) runs lavender to blue before the warm horizon.
   Built on v14:
   v9's warm dawn palette, the hero subhead set in three lines, and the
   product cards' collapsed names read horizontally.
   Built on v9, which was
   v7's cinematic structure with sturdier, easier type and a light hero.
   Headlines: Newsreader at 450 to 500 (Source Serif 4 at 300 read thin).
   Art: dawn over a sand plain, so the hero type is dark on light.
   Built on v7
   September 2026. Ink's palette and type (Figtree, Source Serif 4),
   staged like Sandstone, Harvey, and Felicity: an art-directed hero,
   light serif display type, warm neutrals, the product shown on art,
   and real people.

   The art (art/*.jpg) is generated, not stock: long-exposure horizons
   in Quill's lavender with one warm band of light. art/make-art.py
   rebuilds it.
   ============================================================ */

:root {
    --ink-50: #FAFAF9; --ink-100: #F3F3F0; --ink-200: #E1E0D9; --ink-300: #C3C2B7;
    --ink-400: #A3A298; --ink-500: #81807A; --ink-600: #64635F; --ink-700: #484845;
    --ink-800: #2C2B2A; --ink-900: #0F0F0F;
    --parchment: #FCFCFB; --sand: #F4F1EB; --white: #FFFFFF;
    --night: #0E0C16;

    --lavender-50: #F5F4FF; --lavender-100: #E9E6FF; --lavender-200: #D5CFFF; --lavender-300: #BCB2F4;
    --lavender-400: #A092E4; --lavender-500: #8776CF; --lavender-600: #6F5DB1; --lavender-700: #584892;
    --lavender-800: #423570; --lavender-900: #2E2450;
    --blue-500: #4B8AC9; --teal-200: #B9E0D2; --teal-500: #449880; --teal-700: #186552;
    --amber-50: #FAF5E7; --amber-600: #886800;
    --line: var(--ink-200);

    --font: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Newsreader', ui-serif, Georgia, serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --r-sm: 4px; --r-badge: 6px; --r: 8px; --r-card: 12px; --r-modal: 16px;
    --container: 1240px; --gutter: 40px;
}
@media (max-width: 640px) { :root { --gutter: 20px; } }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overscroll-behavior-y: none; } /* no rubber-band at the top, so the page background never peeks above the hero */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--parchment); color: var(--ink-700); font-family: var(--font); font-weight: 450; font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
::selection { background: var(--lavender-100); color: var(--ink-900); }
:focus-visible { outline: 2px solid var(--lavender-400); outline-offset: 2px; border-radius: 4px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* Type */
.display, h1, h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; color: var(--ink-900); text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 6rem); line-height: 1.0; letter-spacing: -0.03em; }
h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.025em; }
h1 em, h2 em { font-style: italic; }
h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
p { text-wrap: pretty; }
.lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-600); }
.label { font-size: 0.8125rem; font-weight: 500; color: var(--lavender-600); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: var(--r-sm); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.btn .arr { transition: transform 0.15s ease; }
.btn:hover .arr { transform: translateX(2px); }
.btn--primary { background: var(--lavender-700); color: #fff; }
.btn--primary:hover { background: var(--lavender-800); }
.btn--outline { border-color: var(--ink-300); color: var(--ink-900); }
.btn--outline:hover { border-color: var(--ink-900); }
.btn--light { background: #fff; color: var(--ink-900); }
.btn--light:hover { background: var(--lavender-50); }
.btn--glass { color: #fff; border-color: rgba(255,255,255,0.35); }
.btn--glass:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.link { display: inline-flex; gap: 6px; color: var(--lavender-700); font-weight: 500; border-bottom: 1px solid var(--lavender-200); padding-bottom: 2px; }
.link:hover { border-color: var(--lavender-700); }

/* ------------------------------------------------------------
   Header: transparent over the hero, parchment once scrolled
   ------------------------------------------------------------ */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 0.25s ease, border-color 0.25s ease; }
.site-header.is-stuck { background: rgba(252,252,251,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line); }
.nav { height: 72px; display: flex; align-items: center; gap: 40px; }
.nav-logo { position: relative; }
.nav-logo img { height: 22px; width: auto; transition: opacity 0.2s ease; }
.nav-logo .on-light { position: absolute; inset: 0; opacity: 0; }
.site-header.is-stuck .nav-logo .on-dark { opacity: 0; }
.site-header.is-stuck .nav-logo .on-light { opacity: 1; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links > a, .nav-drop > button { display: inline-flex; align-items: center; gap: 6px; height: 72px; font-size: 0.9rem; color: rgba(255,255,255,0.78); transition: color 0.15s ease; }
.nav-links > a:hover, .nav-drop > button:hover, .nav-drop.open > button { color: #fff; }
.site-header.is-stuck .nav-links > a, .site-header.is-stuck .nav-drop > button { color: var(--ink-600); }
.site-header.is-stuck .nav-links > a:hover, .site-header.is-stuck .nav-drop > button:hover { color: var(--ink-900); }
.nav-drop > button svg { width: 10px; height: 10px; }
.nav-drop { position: relative; }
.nav-panel { position: absolute; top: calc(100% - 10px); left: -16px; width: 360px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 20px 50px rgba(15,15,15,0.14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; }
.nav-drop:hover .nav-panel, .nav-drop:focus-within .nav-panel, .nav-drop.open .nav-panel { opacity: 1; visibility: visible; transform: none; }
.nav-panel a { display: block; padding: 10px 12px; border-radius: var(--r); }
.nav-panel a:hover { background: var(--ink-50); }
.nav-panel strong { display: block; font-size: 0.9rem; font-weight: 600; color: var(--ink-900); }
.nav-panel span { display: block; font-size: 0.8125rem; color: var(--ink-600); line-height: 1.45; margin-top: 2px; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.nav-actions > a:not(.btn) { font-size: 0.9rem; color: rgba(255,255,255,0.78); }
.nav-actions > a:not(.btn):hover { color: #fff; }
.site-header.is-stuck .nav-actions > a:not(.btn) { color: var(--ink-600); }
.nav-actions .btn { height: 36px; padding: 0 14px; font-size: 0.875rem; }
.site-header:not(.is-stuck) .nav-actions .btn--primary { background: #fff; color: var(--ink-900); }
.nav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; color: #fff; }
.site-header.is-stuck .nav-burger { color: var(--ink-900); }
.nav-burger svg { width: 20px; height: 20px; }
@media (max-width: 900px) {
    .nav-links, .nav-actions > a:not(.btn) { display: none; }
    .nav-burger { display: inline-flex; }
    .nav-actions { gap: 8px; }
}
.nav-sheet { position: fixed; inset: 0; z-index: 60; background: var(--parchment); padding: 16px var(--gutter) 32px; display: none; flex-direction: column; overflow-y: auto; }
html.nav-open .nav-sheet { display: flex; }
html.nav-open { overflow: hidden; }
.nav-sheet-top { display: flex; align-items: center; justify-content: space-between; height: 48px; }
.nav-sheet-top .nav-burger { display: inline-flex; color: var(--ink-900); }
.nav-sheet-group { padding: 20px 0; border-bottom: 1px solid var(--line); }
.nav-sheet-label { font-size: 0.8125rem; color: var(--ink-500); margin-bottom: 6px; }
.nav-sheet a.item { display: block; padding: 6px 0; font-family: var(--serif); font-weight: 300; font-size: 1.75rem; letter-spacing: -0.02em; color: var(--ink-900); }
.nav-sheet .btn { margin-top: 28px; }

/* ------------------------------------------------------------
   Hero: full-bleed art, type set low
   ------------------------------------------------------------ */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--night) url(art/dawn.jpg) center 62% / cover no-repeat; overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,12,22,0.55) 0%, rgba(14,12,22,0) 22%, rgba(14,12,22,0) 55%, rgba(14,12,22,0.55) 100%); pointer-events: none; }
.hero > * { position: relative; z-index: 1; }
.hero-inner { padding-top: 160px; padding-bottom: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: end; }
.hero h1 { color: #fff; max-width: 12ch; }
.hero-side .lede { color: rgba(255,255,255,0.78); }
.hero-side .btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-logos { border-top: 1px solid rgba(255,255,255,0.16); }
.hero-logos .container { display: flex; align-items: center; gap: 20px 48px; padding-top: 26px; padding-bottom: 30px; }
.hero-logos p { flex: none; white-space: nowrap; font-size: 0.8125rem; line-height: 1.35; color: rgba(255,255,255,0.6); }
.hero-logos .row { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; }
.hero-logos img { width: auto; filter: brightness(0) invert(1); opacity: 0.72; }
.logo--traba { height: 16px; } .logo--rho { height: 21px; } .logo--teleskope { height: 18px; }
.logo--casap { height: 18px; } .logo--runway { height: 14px; } .logo--forus { height: 16px; } .logo--comet { height: 22px; }
/* Optical centering: runway's box includes the "y" descender, so its letters
   ride high; Forus's lowercase sits at the bottom of its box, so it rides low */
.logo--runway { position: relative; top: 1.5px; } .logo--forus { position: relative; top: -1px; }
@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 28px; padding-top: 140px; }
    .hero-logos .container { flex-direction: column; align-items: flex-start; }
    .hero-logos p { width: auto; }
    .hero-logos .row { justify-content: flex-start; gap: 18px 28px; }
}

/* Quill cursor and ink: the hero is the drawing surface (desktop only).
   The script sets exactly one state on <html>; every element follows it. */
html.quill-on.cur-quill, html.quill-on.cur-quill * { cursor: none !important; }
html.quill-on.cur-hand, html.quill-on.cur-hand * { cursor: pointer !important; }
.hero { user-select: none; -webkit-user-select: none; }
#trail-canvas { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 0.35s ease; }
#feather-cursor { position: fixed; top: 0; left: 0; width: 40px; height: 40px; pointer-events: none; z-index: 100; transform: translate3d(-200px,-200px,0) rotate(-6deg); transform-origin: 3px 37px; will-change: transform; opacity: 0; transition: opacity 0.1s linear; filter: drop-shadow(0 0 2px rgba(232,224,255,0.6)) drop-shadow(0 0 7px rgba(169,155,235,0.35)); }
#feather-cursor .feather-art { transform-box: view-box; transform-origin: 3px 37px; transition: transform 0.3s cubic-bezier(0.22,1,0.36,1); }
#feather-cursor.over-link .feather-art { transform: rotate(-14deg) scale(0.92); }
html.quill-on #trail-canvas { opacity: 1; }
html.quill-on.past-hero #trail-canvas, html.quill-on.past-hero #feather-cursor { opacity: 0 !important; }

/* ------------------------------------------------------------
   Statement
   ------------------------------------------------------------ */
.statement { padding: 144px 0 120px; }
.statement p { font-family: var(--serif); font-weight: 300; font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.22; letter-spacing: -0.015em; color: var(--ink-900); max-width: 30ch; text-wrap: pretty; }
.statement p span { color: var(--ink-400); }

/* Product on art */
.showcase { padding-bottom: 144px; }
.art-plate { background: var(--sand) url(art/plate.jpg) center / cover no-repeat; border-radius: var(--r-modal); padding: 72px 72px 0; overflow: hidden; }
.art-plate .app { border-bottom: 0; border-radius: var(--r-card) var(--r-card) 0 0; box-shadow: 0 30px 80px rgba(46,36,80,0.16); }
.caption { display: flex; gap: 16px; margin-top: 14px; font-size: 0.8125rem; color: var(--ink-500); }
.caption b { font-weight: 600; color: var(--ink-900); }
@media (max-width: 640px) { .art-plate { padding: 24px 16px 0; border-radius: var(--r-card); } }

/* Console (Ink styling, illustrative) */
.app { display: grid; grid-template-columns: 208px 1fr; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-card); overflow: hidden; font-size: 13px; line-height: 1.45; color: var(--ink-800); text-align: left; min-height: 540px; }
.app-side { border-right: 1px solid var(--line); padding: 14px 10px; background: var(--parchment); }
.app-org { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; font-weight: 600; color: var(--ink-900); border-bottom: 1px solid var(--line); margin: 0 -10px; padding-left: 18px; }
.app-org i { width: 18px; height: 18px; border-radius: var(--r-sm); background: linear-gradient(135deg, var(--lavender-500), var(--blue-500)); }
.app-side-label { font-size: 11px; color: var(--ink-500); padding: 16px 8px 6px; }
.app-side a { display: flex; align-items: center; padding: 6px 8px; color: var(--ink-700); border-radius: var(--r); }
.app-side a.is-active { color: var(--ink-900); font-weight: 600; background: var(--ink-100); }
.app-side a.is-agent { color: var(--lavender-700); font-weight: 600; background: var(--lavender-50); }
.app-side a[data-agent] { cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.app-side a[data-agent]:not(.is-agent):hover { background: var(--ink-100); color: var(--ink-900); }
.app-side .count { margin-left: auto; font-size: 11px; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.app-main { padding: 20px 24px 24px; min-width: 0; }
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.app-crumbs { font-size: 12px; color: var(--ink-500); }
.app-crumbs b { color: var(--ink-700); font-weight: 500; }
.app-title { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--ink-900); margin-top: 2px; }
.app-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.app-stat { padding: 14px 0 14px 16px; border-left: 1px solid var(--line); }
.app-stat:first-child { border-left: 0; padding-left: 0; }
.app-stat span { display: block; font-size: 11.5px; color: var(--ink-500); }
.app-stat strong { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-900); margin-top: 2px; font-variant-numeric: tabular-nums; }
.finding { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; background: #fff; }
.finding-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.finding-top h4 { font-size: 14px; font-weight: 600; color: var(--ink-900); margin-right: 4px; }
.finding p { font-size: 13px; color: var(--ink-700); margin-top: 6px; }
.finding dl { display: grid; grid-template-columns: 96px 1fr; gap: 6px 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.finding dt { font-size: 12px; color: var(--ink-500); }
.finding dd code { font-family: var(--mono); font-size: 11px; color: var(--ink-500); margin-left: 4px; }
.finding-actions { display: flex; align-items: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.finding-actions .spacer { flex: 1; }
.mbtn { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--ink-200); background: #fff; font-size: 12px; font-weight: 500; color: var(--ink-900); }
.mbtn--primary { background: var(--lavender-700); border-color: var(--lavender-700); color: #fff; }
.mbtn--ghost { border-color: transparent; background: transparent; color: var(--ink-600); }
.st { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-badge); font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--ink-100); color: var(--ink-700); }
.st--lav { background: var(--lavender-100); color: var(--lavender-700); }
.st--teal { background: var(--teal-200); color: var(--teal-700); }
.st--amber { background: var(--amber-50); color: var(--amber-600); }
.st--plain { background: transparent; padding: 0; color: var(--ink-500); font-weight: 450; }
.app-status { background: transparent; padding: 0; color: var(--ink-600); font-weight: 450; gap: 6px; }
.app-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal-500); }
.app-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 12.5px; }
.app-table th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--ink-500); padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); }
.app-table td { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-700); }
.app-table td:first-child { color: var(--ink-900); font-weight: 600; }
.app-table tr:last-child td { border-bottom: 0; }
@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .app-side { display: none; }
    .app-stats { grid-template-columns: repeat(2, 1fr); }
    .app-stat:nth-child(3) { border-left: 0; padding-left: 0; }
    .app-table th:nth-child(3), .app-table td:nth-child(3) { display: none; }
}

/* ------------------------------------------------------------
   Features: text on the left, one product moment on the right
   ------------------------------------------------------------ */
.section { padding: 144px 0; }
.section--sand { background: var(--sand); }
.section-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 56px; align-items: end; margin-bottom: 80px; }
.section-head .lede { margin: 0; }
@media (max-width: 900px) { .section { padding: 96px 0; } .section-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; } }

.feature { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line); }
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature h3 { font-family: var(--serif); font-weight: 300; font-size: 2rem; line-height: 1.12; letter-spacing: -0.02em; margin-top: 12px; }
.feature p { margin-top: 14px; color: var(--ink-600); max-width: 42ch; }
.moment { background: var(--ink-100); border-radius: var(--r-modal); min-height: 380px; display: grid; place-items: center; padding: 40px; }
.section--sand .moment { background: #EAE6DE; }
@media (max-width: 900px) { .feature { grid-template-columns: 1fr; gap: 28px; } .moment { min-height: 0; padding: 24px 16px; } }

/* Small product cards used inside moments */
.card { width: 100%; max-width: 440px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 12px 32px rgba(15,15,15,0.06); padding: 18px 20px; font-size: 13px; color: var(--ink-700); }
.card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-top b { font-size: 14px; font-weight: 600; color: var(--ink-900); margin-right: 4px; }
.card .rec { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.card .rec span:nth-child(odd) { color: var(--ink-900); font-weight: 500; }
.card .rec span:nth-child(even) { color: var(--ink-500); text-align: right; font-size: 12px; }
.card .diff { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 12.5px; }
.card .diff th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--ink-500); padding: 0 8px 6px 0; border-bottom: 1px solid var(--line); }
.card .diff td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); }
.card .diff tr:last-child td { border-bottom: 0; }
.card .diff .old { color: var(--ink-400); text-decoration: line-through; }
.card .diff .new { color: var(--teal-700); font-weight: 500; }
.card .acts { display: flex; gap: 6px; margin-top: 14px; }
.card .note { margin-top: 10px; font-size: 13.5px; color: var(--ink-800); line-height: 1.5; }
.card .meta { margin-top: 12px; font-size: 12px; color: var(--ink-500); }
.stack { display: grid; gap: 10px; width: 100%; max-width: 440px; }
.stack .card:nth-child(2) { opacity: 0.7; transform: scale(0.97); }
.stack .card:nth-child(3) { opacity: 0.4; transform: scale(0.94); }

/* Products */
.index { border-top: 1px solid var(--ink-900); }
.index a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 40px; align-items: baseline; padding: 32px 0; border-bottom: 1px solid var(--line); }
.index h3 { font-family: var(--serif); font-weight: 300; font-size: 2rem; letter-spacing: -0.02em; transition: color 0.15s ease; }
.index p { color: var(--ink-600); max-width: 52ch; }
.index .go { font-size: 0.875rem; color: var(--lavender-700); font-weight: 500; white-space: nowrap; transition: transform 0.15s ease; }
.index a:hover h3 { color: var(--lavender-700); }
.index a:hover .go { transform: translateX(3px); }
.index-foot { margin-top: 20px; font-size: 0.875rem; color: var(--ink-600); }
@media (max-width: 760px) { .index a { grid-template-columns: 1fr; gap: 8px; } }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.steps > div { padding: 32px 32px 0 0; }
.steps > div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.steps .num { font-family: var(--serif); font-weight: 300; font-size: 3.5rem; line-height: 1; color: var(--lavender-500); letter-spacing: -0.02em; }
.steps h3 { margin-top: 28px; }
.steps p { margin-top: 8px; font-size: 0.9375rem; color: var(--ink-600); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .steps > div, .steps > div + div { padding: 28px 0; border-left: 0; border-bottom: 1px solid var(--line); } }

/* Team */
.team { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
.team .lede { margin-top: 24px; max-width: 44ch; }
.team .link { margin-top: 28px; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); filter: saturate(0.85) contrast(1.02); background: var(--ink-100); }
.person h3 { margin-top: 16px; font-family: var(--serif); font-weight: 400; font-size: 1.375rem; letter-spacing: -0.01em; }
.person .role { font-size: 0.875rem; color: var(--lavender-700); font-weight: 500; }
.person ul { margin-top: 12px; display: grid; gap: 8px; }
.person li { font-size: 0.875rem; color: var(--ink-600); line-height: 1.5; padding-top: 8px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .team { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 480px) { .people { grid-template-columns: 1fr; } }

/* Security: warm night */
.section--night { background: #13111A; color: rgba(255,255,255,0.7); }
.section--night h2, .section--night h3 { color: #fff; }
.section--night .lede { color: rgba(255,255,255,0.66); }
.section--night .label { color: var(--lavender-300); }
.certs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-card); background: rgba(255,255,255,0.03); }
.certs > div { padding: 24px 26px; border-left: 1px solid rgba(255,255,255,0.14); }
.certs > div:first-child { border-left: 0; }
.certs b { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.75rem; letter-spacing: -0.015em; color: #fff; }
.certs span { display: block; font-size: 0.8125rem; color: rgba(255,255,255,0.55); margin-top: 4px; }
.specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; margin-top: 64px; }
.specs div { padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.14); }
.specs p { margin-top: 8px; font-size: 0.9375rem; color: rgba(255,255,255,0.6); }
.section--night .row-actions { display: flex; gap: 24px; align-items: center; margin-top: 56px; flex-wrap: wrap; }
.section--night .link { color: #fff; border-color: rgba(255,255,255,0.35); }
@media (max-width: 760px) { .certs, .specs { grid-template-columns: 1fr; } .certs > div { border-left: 0; border-top: 1px solid rgba(255,255,255,0.14); } .certs > div:first-child { border-top: 0; } }

/* Closing: the dusk art with the form on it */
.closing { position: relative; background: var(--night) url(art/dusk.jpg) center 70% / cover no-repeat; color: #fff; padding: 144px 0; }
.closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 72px; align-items: start; }
.closing h2 { color: #fff; }
.closing .lede { color: rgba(255,255,255,0.75); margin-top: 24px; max-width: 40ch; }
.closing .row-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.closing .note { margin-top: 24px; font-size: 0.875rem; color: rgba(255,255,255,0.6); }
.closing .note a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.35); }
@media (max-width: 900px) { .closing { padding: 96px 0; } .closing-grid { grid-template-columns: 1fr; gap: 40px; } }
.form { background: #fff; color: var(--ink-700); border-radius: var(--r-modal); padding: 32px; box-shadow: 0 30px 80px rgba(0,0,0,0.3); }
.form h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.01em; margin-bottom: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid > * { min-width: 0; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.8125rem; font-weight: 500; color: var(--ink-700); }
.field input, .field textarea { font: inherit; font-size: 0.9375rem; color: var(--ink-900); width: 100%; min-width: 0; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r); padding: 9px 12px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.field input:hover, .field textarea:hover { border-color: var(--ink-300); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--lavender-400); box-shadow: 0 0 0 3px var(--lavender-100); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-400); }
.field textarea { min-height: 104px; resize: vertical; }
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.form-foot small { font-size: 0.8125rem; color: var(--ink-500); }
@media (max-width: 480px) { .form { padding: 22px; } .form-grid { grid-template-columns: 1fr; } }
.send-fallback { display: none; }
.send-fallback.show { display: block; }
.send-fallback p { margin-top: 8px; color: var(--ink-600); }
.send-fallback .row-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* Footer, ending on the mark at full width */
.site-footer { background: var(--parchment); padding: 80px 0 44px; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 160px)); gap: 40px; }
.footer-line { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; line-height: 1.3; color: var(--ink-900); max-width: 22ch; }
.footer-col h4 { font-size: 0.8125rem; font-weight: 500; color: var(--ink-500); margin-bottom: 12px; }
.footer-col a { display: block; font-size: 0.9rem; color: var(--ink-700); padding: 3px 0; }
.footer-col a:hover { color: var(--lavender-700); }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-500); }
.footer-brand img, .footer-brand svg { height: 26px; width: auto; display: block; }
.footer-brand .footer-line { margin-top: 22px; }
@media (max-width: 1180px) { .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-brand { grid-column: 1 / -1; } }

/* ============================================================
   v9 overrides and components
   ============================================================ */

/* Sturdier headlines, darker body text */
.display, h1, h2 { font-weight: 450; }
h1 { font-size: clamp(3rem, 6.4vw, 5.5rem); line-height: 1.02; letter-spacing: -0.028em; }
h2 { font-size: clamp(2.25rem, 3.8vw, 3.375rem); line-height: 1.08; letter-spacing: -0.022em; }
h1 em, h2 em { font-weight: 420; }
body { color: var(--ink-800); }
.lede { color: var(--ink-700); font-size: 1.25rem; }
.feature h3, .index h3, .steps .num, .certs b, .person h3, .footer-line, .nav-sheet a.item { font-weight: 450; }

/* Header over a light hero: dark text from the start */
.nav-logo .on-dark { opacity: 0; }
.nav-logo .on-light { opacity: 1; }
.site-header .nav-links > a, .site-header .nav-drop > button, .site-header .nav-actions > a:not(.btn) { color: var(--ink-700); }
.site-header .nav-links > a:hover, .site-header .nav-drop > button:hover, .site-header .nav-actions > a:not(.btn):hover { color: var(--ink-900); }
.site-header:not(.is-stuck) .nav-actions .btn--primary { background: var(--ink-900); color: #fff; }
.site-header:not(.is-stuck) .nav-actions .btn--primary:hover { background: var(--ink-800); }
.nav-burger { color: var(--ink-900); }

/* Hero: centered, dark type on the dawn sky */
.hero { color: var(--ink-900); background: #E9DDCF url(art/dawn.jpg) center 64% / cover no-repeat; justify-content: space-between; }
.hero::after { background: linear-gradient(180deg, rgba(252,252,251,0.35) 0%, rgba(252,252,251,0) 30%); }
.hero-inner { display: block; text-align: center; padding-top: 180px; padding-bottom: 0; }
.hero h1 { color: var(--ink-900); max-width: 16ch; margin: 0 auto; }
.hero .lede { color: var(--ink-700); max-width: 38ch; margin: 28px auto 0; }
.hero .btn-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.btn--dark { background: var(--ink-900); color: #fff; }
.btn--dark:hover { background: var(--ink-800); }
.btn--ghost-dark { border-color: rgba(15,15,15,0.25); color: var(--ink-900); background: rgba(255,255,255,0.35); }
.btn--ghost-dark:hover { border-color: var(--ink-900); background: rgba(255,255,255,0.6); }
.hero-logos { border-top-color: rgba(15,15,15,0.12); }
.hero-logos p { color: var(--ink-600); }
.hero-logos img { filter: brightness(0); opacity: 0.55; }
@media (max-width: 900px) { .hero-inner { padding-top: 140px; } }

/* Quill on a light sky: the brand feather, lavender ink */
#feather-cursor { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 6px rgba(138, 127, 214, 0.75)) drop-shadow(0 0 14px rgba(122, 162, 227, 0.45)); }

/* Product on the morning plate */
.art-plate { background-image: url(art/plate.jpg); }

/* Statement a touch larger and heavier */
.statement p { font-weight: 400; color: var(--ink-900); }
.statement p span { color: var(--ink-900); }

/* ---- The problems we fix: big type rows ---- */
.problems { border-top: 1px solid var(--ink-900); }
.problem { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 360px); gap: 24px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--line); }
.problem .n { font-size: 0.875rem; color: var(--ink-500); font-variant-numeric: tabular-nums; }
.problem h3 { font-family: var(--serif); font-weight: 450; font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--ink-900); transition: color 0.2s ease, transform 0.3s var(--ease, ease); }
.problem p { font-size: 0.9375rem; color: var(--ink-600); }
.problem:hover h3 { color: var(--lavender-700); transform: translateX(6px); }
.problem .eg { display: block; margin-top: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-500); }
@media (max-width: 760px) { .problem { grid-template-columns: 32px 1fr; } .problem p { grid-column: 2; } }

/* ---- Why teams choose Quill: sticky title, list on the right ---- */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.why-side { position: sticky; top: 120px; }
.why ol { list-style: none; border-top: 1px solid var(--line); }
.why li { padding: 32px 0 32px 64px; border-bottom: 1px solid var(--line); position: relative; }
.why li::before { content: counter(list-item, decimal-leading-zero); position: absolute; left: 0; top: 34px; font-size: 0.875rem; color: var(--lavender-600); font-weight: 500; font-variant-numeric: tabular-nums; }
.why li h3 { font-size: 1.25rem; font-weight: 600; }
.why li p { margin-top: 10px; color: var(--ink-700); }
@media (max-width: 900px) { .why { grid-template-columns: 1fr; gap: 32px; } .why h2 { position: static; } .why li { padding-left: 44px; } }

/* ---- Products: panels that open like Rogo's quote cards ---- */
/* Each product's own color, from its product page */
.panel.p-hy { --acc: #584892; }
.panel.p-dc { --acc: #7E4A5A; }
.panel.p-mg { --acc: #43538F; }
.panel.p-mc { --acc: #3F6E60; }
.panels { display: flex; gap: 12px; height: 440px; }
.panel { position: relative; flex: 1 1 0; min-width: 0; background: var(--sand); border: 1px solid var(--line); border-radius: var(--r-modal); overflow: hidden; cursor: pointer; transition: flex-grow 0.6s cubic-bezier(0.2,0.8,0.2,1), background-color 0.3s ease; }
.panel.is-open { flex-grow: 3.4; background: #fff; cursor: default; }
/* Closed cards show the name and who it's for */
.panel .tab { position: absolute; inset: 26px 24px 24px; display: flex; flex-direction: column; transition: opacity 0.25s ease; }
.panel .tab b { font-family: var(--serif); font-weight: 450; font-size: 1.5rem; line-height: 1.12; letter-spacing: -0.015em; color: var(--ink-900); text-wrap: balance; transition: color 0.2s ease; }
.panel .tab .kicker { margin-top: 8px; }
.panel:not(.is-open):hover .tab b { color: var(--acc); }
.panel.is-open .tab { opacity: 0; pointer-events: none; }
/* Open card: the text and the example card share a center line */
.panel .body { position: absolute; inset: 0; padding: 36px 40px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: 28px; align-items: center; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; width: 100%; }
.panel.is-open .body { opacity: 1; transition-delay: 0.25s; pointer-events: auto; }
.panel .body h3 { margin-top: 12px; font-family: var(--serif); font-weight: 450; font-size: 1.75rem; line-height: 1.05; letter-spacing: -0.02em; }
.panel .body p { margin-top: 14px; color: var(--ink-700); max-width: 44ch; }
.panel .kicker { font-size: 0.8125rem; font-weight: 500; color: var(--acc, var(--lavender-600)); }
.panel .go { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-weight: 500; color: var(--acc, var(--lavender-700)); }
.panel .go .arr { transition: transform 0.25s var(--ease-out); }
.panel .go:hover .arr { transform: translateX(3px); }
/* Four products need more width side by side: below 1100px they stack, as on phones */
@media (max-width: 1100px) {
    .panels { flex-direction: column; height: auto; }
    .panel, .panel.is-open { flex: none; background: #fff; cursor: default; }
    .panel .tab { display: none; }
    .panel .body { position: static; opacity: 1; pointer-events: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); padding: 32px 36px; }
}
@media (max-width: 900px) {
    .panel .body { grid-template-columns: 1fr; padding: 28px 24px; }
}

/* ---- Security grid with drawn glyphs ---- */
.sec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--r-card); overflow: hidden; margin-top: 56px; }
.sec-grid > div { padding: 32px 28px; border-right: 1px solid rgba(255,255,255,0.14); border-bottom: 1px solid rgba(255,255,255,0.14); }
.sec-grid > div:nth-child(3n) { border-right: 0; }
.sec-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
.sec-grid svg { width: 44px; height: 44px; stroke: var(--lavender-300); fill: none; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.sec-grid h3 { margin-top: 24px; color: #fff; }
.sec-grid p { margin-top: 8px; font-size: 0.9375rem; color: rgba(255,255,255,0.64); }
@media (max-width: 900px) { .sec-grid { grid-template-columns: 1fr; } .sec-grid > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.14) !important; } .sec-grid > div:last-child { border-bottom: 0 !important; } }
.section--night .certs { margin-top: 0; }

/* Console on phones: stack the header, and put labels above values */
@media (max-width: 640px) {
    .app-head { flex-direction: column; align-items: flex-start; gap: 6px; }
    .app-main { padding: 16px; }
    .finding dl { grid-template-columns: 1fr; gap: 2px; }
    .finding dt { margin-top: 8px; }
    .finding dd code { display: block; margin-left: 0; }
}

/* Simplified console (2026-09-23): fewer words, same motion */
.app { min-height: 0; }
.app-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.finding dl { grid-template-columns: 64px 1fr; }
.finding dd { color: var(--ink-900, #1E2330); }
@media (max-width: 860px) {
    .app-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .app-stat:nth-child(3) { border-left: 1px solid var(--line); padding-left: 12px; }
    .app-table th:nth-child(3), .app-table td:nth-child(3) { display: table-cell; }
}

/* ============================================================
   v14: v9's warm palette, with the hero subhead set in three lines
   ============================================================ */
.hero .lede { max-width: 780px; font-size: 1.1875rem; line-height: 1.55; text-wrap: balance; }

/* ============================================================
   v16: palette tuned to the logo. Sand, parchment, and the peach
   horizon stay as they were.
   ============================================================ */
:root {
    /* Purples on the logo's hue (248 degrees), from tint to shade */
    --lavender-50: #F5F4FD; --lavender-100: #EAE8FB; --lavender-200: #D6D2F6; --lavender-300: #BDB6EE;
    --lavender-400: #A399E3; --lavender-500: #8A7FD6; --lavender-600: #7266C9; --lavender-700: #5B4FB8;
    --lavender-800: #463D96; --lavender-900: #302A6B;
    /* The logo's blue, used lightly */
    --blue-50: #EEF3FC; --blue-200: #CFDDF5; --blue-500: #7AA2E3; --blue-700: #4F76B8;
    /* Dark text in the wordmark's blue-black */
    --ink-900: #1E2330; --ink-800: #2A2F3D; --ink-700: #424757;
    --ink: var(--ink-900);
}
/* The console's org mark and the brand gradient now match the feather exactly */
.app-org i { background: linear-gradient(135deg, #8A7FD6, #7AA2E3); }
.st--lav { background: var(--lavender-100); color: var(--lavender-700); }
.btn--primary { background: var(--lavender-700); }
.btn--primary:hover { background: var(--lavender-800); }
.site-header:not(.is-stuck) .nav-actions .btn--primary, .btn--dark { background: var(--ink-900); }
.btn--dark:hover, .site-header:not(.is-stuck) .nav-actions .btn--primary:hover { background: var(--lavender-800); }
.section--night { background: #161A26; }
.closing { background-color: #161A26; }


/* ============================================================
   v17: systems names at v15's smaller size (motion and hover stay v16's)
   ============================================================ */
.problem { padding: 22px 0; }
.problem h3 { font-size: clamp(1.625rem, 2.3vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.problem p { font-size: 0.9375rem; }
@media (max-width: 760px) { .problem h3 { font-size: 1.5rem; } }

/* ============================================================
   v17 layout fixes
   ============================================================ */
/* One two-column grid for section heads and the agent rows, so the
   right-hand column starts at the same place down the page. */
.section-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
.feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; }
.feature > div:first-child { max-width: 460px; }
.moment { padding: 40px 32px; }
.moment > .card, .moment > .stack { justify-self: center; }
@media (max-width: 900px) { .section-head, .feature { grid-template-columns: 1fr; gap: 24px; } .feature > div:first-child { max-width: none; } }

/* Systems: name, description, and example in three columns (as on v15) */
.problem { grid-template-columns: 40px minmax(0, 0.85fr) minmax(0, 1.4fr) minmax(0, 0.8fr); column-gap: 32px; align-items: baseline; }
.problem .eg { display: block; margin-top: 0; text-align: right; }
@media (max-width: 900px) {
    .problem { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
    .problem p, .problem .eg { grid-column: 2; }
    .problem .eg { text-align: left; }
}

/* Ink trail: the feather deepens to darker shades of the logo's two hues */
html[data-trail="ink"] #featherG stop:first-child { stop-color: #5B4FB8; }
html[data-trail="ink"] #featherG stop:last-child { stop-color: #4F76B8; }
html[data-trail="ink"] #feather-cursor { filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 5px rgba(138, 127, 214, 0.4)); }

/* Customer logos drift past in a continuous loop, fading at both edges.
   Four identical sets; the track moves by half its width, so the loop is
   seamless. Hover pauses it; reduced motion shows one still set. */
.hero-logos .row.marquee { display: block; flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
.hero-logos .track { display: flex; width: max-content; animation: logo-drift 48s linear infinite; }
.hero-logos .set { display: flex; align-items: center; flex: none; }
.hero-logos .set img { margin-right: 64px; flex: none; }
.hero-logos .row.marquee:hover .track { animation-play-state: paused; }
@keyframes logo-drift { to { transform: translate3d(-50%, 0, 0); } }
@media (max-width: 900px) { .hero-logos .row.marquee { width: 100%; } .hero-logos .set img { margin-right: 44px; } .hero-logos .track { animation-duration: 36s; } }
@media (prefers-reduced-motion: reduce) {
    .hero-logos .track { animation: none; }
    .hero-logos .set[aria-hidden] { display: none; }
    .hero-logos .row.marquee { -webkit-mask-image: none; mask-image: none; }
    .hero-logos .set { flex-wrap: wrap; row-gap: 18px; }
}

/* ------------------------------------------------------------
   Closing: v10's record wall over the dusk sky, in brand colors.
   Flagged values (horizon peach) get fixed one at a time (white, lavender
   check, a marker sweep) while the wall drifts upward.
   ------------------------------------------------------------ */
.datawall {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none;
    font-family: var(--mono); font-size: 12px; line-height: 30px; color: rgba(213, 207, 255, 0.42);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.datawall::before { content: ""; position: absolute; top: 0; bottom: 0; left: 64px; width: 1px; background: rgba(160, 146, 228, 0.5); z-index: 1; }
.datawall .r { display: grid; grid-template-columns: 64px 0.9fr 1.3fr 1.1fr 0.9fr 0.9fr 0.7fr 0.8fr; white-space: nowrap; background: linear-gradient(transparent 29px, rgba(188, 178, 244, 0.13) 29px); }
.datawall .r > span { overflow: hidden; padding-right: 18px; transition: color .6s ease; }
.datawall .r > span:first-child { text-align: right; padding-right: 14px; opacity: 0.6; }
.datawall .r > span:nth-child(2) { padding-left: 14px; } /* clear of the margin rule */
.datawall .src { color: rgba(122, 162, 227, 0.85); }
.datawall .bad { color: rgba(243, 196, 160, 0.7); }
.datawall .fixed { color: rgba(255, 255, 255, 0.9); }
.datawall .fixed::after { content: " \2713"; color: var(--lavender-300); }
.datawall .swap { display: inline-block; padding: 0 3px; margin: 0 -3px; border-radius: 3px; animation: wall-swap .5s var(--ease-out), wall-mark 1.8s ease-out; }
@keyframes wall-swap { from { opacity: 0; filter: blur(4px); transform: translateY(-4px); } to { opacity: 1; filter: none; transform: none; } }
@keyframes wall-mark { from { background: rgba(138, 127, 214, 0.55); } to { background: rgba(138, 127, 214, 0); } }
.datawall.run .datawall-track { animation: wall-drift 80s linear infinite; }
@keyframes wall-drift { to { transform: translate3d(0, calc(-1 * var(--set, 720px)), 0); } }
/* Keep the copy readable: a soft pool of the sky's own purple behind the left column */
.closing > .container { position: relative; z-index: 2; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: radial-gradient(ellipse 44% 62% at 24% 44%, rgba(20, 16, 40, 0.9) 0%, rgba(20, 16, 40, 0.75) 45%, rgba(20, 16, 40, 0) 100%); }
@media (max-width: 900px) {
    .closing::before { background: radial-gradient(ellipse 90% 40% at 30% 22%, rgba(20, 16, 40, 0.9) 0%, rgba(20, 16, 40, 0.7) 50%, rgba(20, 16, 40, 0) 100%); }
    .datawall .r { grid-template-columns: 36px 1fr 1.3fr 1.1fr; } .datawall .r > span:nth-child(n+5) { display: none; } .datawall::before { left: 36px; }
    .datawall { color: rgba(213, 207, 255, 0.3); }
}
@media (prefers-reduced-motion: reduce) { .datawall.run .datawall-track, .datawall .swap { animation: none; } }

/* ------------------------------------------------------------
   Closing variant "dawn" (class closing--dawn on the section):
   bookends the page with the hero's dawn sky, v10's light record
   wall, and a wall that fades out toward the edges so the motion
   sits in the middle. Remove the class (or add ?closing=dusk to the
   URL) to get the dusk version above back.
   ------------------------------------------------------------ */
.closing--dawn { color: var(--ink-900); background-color: #E9DDCF; }
.closing--dawn .closing-bg { background-image: url(art/dawn.jpg); background-position: center 64%; }
.closing--dawn h2 { color: var(--ink-900); }
.closing--dawn .lede { color: var(--ink-700); }
.closing--dawn .note { color: var(--ink-600); }
.closing--dawn .note a { color: var(--ink-900); border-bottom-color: rgba(30, 35, 48, 0.3); }
.closing--dawn .btn--light { background: var(--ink-900); color: #fff; }
.closing--dawn .btn--light:hover { background: var(--lavender-800); }
.closing--dawn .form { box-shadow: 0 30px 80px rgba(46, 36, 80, 0.14); }
.closing--dawn .datawall { color: rgba(66, 71, 87, 0.55); }
.closing--dawn .datawall::before { background: rgba(111, 93, 177, 0.35); }
.closing--dawn .datawall .r { background: linear-gradient(transparent 29px, rgba(91, 79, 184, 0.14) 29px); }
.closing--dawn .datawall .src { color: rgba(111, 93, 177, 0.85); }
.closing--dawn .datawall .bad { color: rgba(168, 98, 72, 0.9); }
.closing--dawn .datawall .fixed { color: var(--ink-900); }
.closing--dawn .datawall .fixed::after { color: var(--lavender-600); }
.closing--dawn .datawall .swap { animation: wall-swap .5s var(--ease-out), wall-mark-dawn 1.8s ease-out; }
@keyframes wall-mark-dawn { from { background: rgba(138, 127, 214, 0.4); } to { background: rgba(138, 127, 214, 0); } }
.closing--dawn::before { background: radial-gradient(ellipse 40% 55% at 22% 44%, rgba(244, 240, 250, 0.9) 0%, rgba(244, 240, 250, 0.7) 45%, rgba(244, 240, 250, 0) 100%); }
@media (max-width: 900px) {
    .closing--dawn::before { background: radial-gradient(ellipse 90% 40% at 30% 22%, rgba(244, 240, 250, 0.9) 0%, rgba(244, 240, 250, 0.7) 50%, rgba(244, 240, 250, 0) 100%); }
    .closing--dawn .datawall { color: rgba(66, 71, 87, 0.4); }
}
@media (prefers-reduced-motion: reduce) { .closing--dawn .datawall .swap { animation: none; } }

/* ------------------------------------------------------------
   Security variant "light" (class security--light on the section, in
   place of section--night): the page's own editorial language. Open
   columns and hairline rules on sand, ink type, lavender icons. To get
   the dark version back, change the section's classes to
   "section section--night".
   ------------------------------------------------------------ */
.security--light .certs { border: 0; border-radius: 0; background: none; overflow: visible; column-gap: 48px; }
.security--light .certs::after { display: none; }
.security--light .certs > div, .security--light .certs > div + div { padding: 28px 0 8px; border: 0; border-top: 1px solid var(--ink-900); }
.security--light .certs b { color: var(--ink-900); }
.security--light .certs span { color: var(--ink-600); font-size: 0.875rem; margin-top: 6px; }
.security--light .sec-grid { border: 0; border-radius: 0; overflow: visible; margin-top: 72px; column-gap: 48px; }
.security--light .sec-grid > div { padding: 28px 0 40px; border: 0 !important; border-top: 1px solid var(--line) !important; }
.security--light .sec-grid svg { width: 36px; height: 36px; stroke: var(--lavender-600); stroke-width: 1.4; }
.security--light .sec-grid h3 { color: var(--ink-900); margin-top: 20px; }
.security--light .sec-grid p { color: var(--ink-600); }
.security--light .row-actions { display: flex; gap: 24px; align-items: center; margin-top: 48px; flex-wrap: wrap; }
.security--light .btn--light { background: var(--ink-900); color: #fff; }
.security--light .btn--light:hover { background: var(--lavender-800); }
@media (max-width: 760px) {
    .security--light .certs { row-gap: 0; }
    .security--light .certs > div, .security--light .certs > div + div { padding: 22px 0; }
    .security--light .certs > div + div { border-top-color: var(--line); }
}

/* ------------------------------------------------------------
   Closing looks, picked with the "Closing" bar (bottom left) or
   ?closing=dawn|dusk|plum|violet. Every look fades the wall out toward
   the edges so the motion sits in the middle.
   - dawn: the hero's light sky (above)
   - dusk: the purple dusk sky art with the brand-colored wall
   - plum: a deep plum night, no art, warm horizon glow
   - violet: saturated brand violet, highest contrast
   ------------------------------------------------------------ */
.closing--dawn .datawall, .closing--dusk .datawall, .closing--plum .datawall, .closing--violet .datawall {
    -webkit-mask-image: radial-gradient(ellipse 58% 70% at 52% 50%, #000 0%, #000 30%, rgba(0,0,0,0.45) 62%, transparent 100%);
            mask-image: radial-gradient(ellipse 58% 70% at 52% 50%, #000 0%, #000 30%, rgba(0,0,0,0.45) 62%, transparent 100%);
}
.closing--dusk { background-color: #1C1638; }
.closing--dusk .closing-bg { background-image: url(art/dusk-clean.jpg); background-position: center 60%; }
.closing--dusk .datawall { color: rgba(213, 207, 255, 0.34); }

.closing--plum { background: #150F26; }
.closing--plum .closing-bg { background:
    radial-gradient(70% 45% at 50% 100%, rgba(243, 176, 140, 0.22), transparent 70%),
    radial-gradient(60% 60% at 15% 0%, rgba(138, 127, 214, 0.28), transparent 70%),
    linear-gradient(180deg, #1C1436 0%, #24194A 55%, #2E1F4F 100%); }
.closing--plum .datawall { color: rgba(213, 207, 255, 0.34); }
.closing--plum::before { background: radial-gradient(ellipse 44% 62% at 24% 44%, rgba(26, 18, 50, 0.92) 0%, rgba(26, 18, 50, 0.75) 45%, rgba(26, 18, 50, 0) 100%); }

.closing--violet { background: #3E3290; }
.closing--violet .closing-bg { background:
    radial-gradient(55% 55% at 90% 10%, rgba(122, 162, 227, 0.45), transparent 70%),
    radial-gradient(60% 50% at 10% 100%, rgba(243, 190, 160, 0.25), transparent 70%),
    linear-gradient(150deg, #5B4FB8 0%, #463A9E 50%, #33287A 100%); }
.closing--violet .datawall { color: rgba(255, 255, 255, 0.3); }
.closing--violet .datawall::before { background: rgba(255, 255, 255, 0.35); }
.closing--violet .datawall .r { background: linear-gradient(transparent 29px, rgba(255, 255, 255, 0.14) 29px); }
.closing--violet .datawall .src { color: rgba(205, 222, 250, 0.95); }
.closing--violet .datawall .bad { color: #FFCFAE; }
.closing--violet .datawall .fixed { color: #fff; }
.closing--violet .datawall .fixed::after { color: #fff; }
.closing--violet .datawall .swap { animation: wall-swap .5s var(--ease-out), wall-mark-violet 1.8s ease-out; }
@keyframes wall-mark-violet { from { background: rgba(255, 255, 255, 0.3); } to { background: rgba(255, 255, 255, 0); } }
.closing--violet::before { background: radial-gradient(ellipse 44% 62% at 24% 44%, rgba(62, 50, 144, 0.9) 0%, rgba(62, 50, 144, 0.72) 45%, rgba(62, 50, 144, 0) 100%); }
.closing--violet .lede { color: rgba(255, 255, 255, 0.85); }
.closing--violet .note { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 900px) {
    .closing--plum::before { background: radial-gradient(ellipse 90% 40% at 30% 22%, rgba(26, 18, 50, 0.92) 0%, rgba(26, 18, 50, 0.7) 50%, rgba(26, 18, 50, 0) 100%); }
    .closing--violet::before { background: radial-gradient(ellipse 90% 40% at 30% 22%, rgba(62, 50, 144, 0.9) 0%, rgba(62, 50, 144, 0.7) 50%, rgba(62, 50, 144, 0) 100%); }
}
@media (prefers-reduced-motion: reduce) { .closing--violet .datawall .swap { animation: none; } }
.closing-bar { top: auto; bottom: 16px; }

/* ------------------------------------------------------------
   Security v2 (after Harvey, Legora, Felicity): each standard gets a
   drawn seal and one plain sentence, no rules. Two layouts, picked with
   the "Security" bar or ?security=columns|list:
   - columns: three open columns, name above one sentence
   - list: one quiet panel, a row per standard with a Details link
   ------------------------------------------------------------ */
.seal { width: 64px; height: 64px; flex: none; overflow: visible; }
.seal-ring { fill: none; stroke: var(--lavender-500); stroke-width: 1.2; }
.seal-dots { fill: none; stroke: var(--lavender-400); stroke-width: 1.2; stroke-dasharray: 0.1 3.2; stroke-linecap: round; }
.seal-top { font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; fill: var(--ink-900); text-anchor: middle; }
.seal-sub { font-family: var(--font); font-size: 6.5px; font-weight: 600; letter-spacing: 0.14em; fill: var(--lavender-600); text-anchor: middle; }
.cert h3 { font-family: var(--serif); font-weight: 450; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--ink-900); }
.cert p { margin-top: 8px; font-size: 0.9375rem; line-height: 1.55; color: var(--ink-600); max-width: 34ch; }
.cert-more { font-size: 0.875rem; font-weight: 500; color: var(--ink-600); white-space: nowrap; transition: color .15s ease; }
.cert-more span { display: inline-block; transition: transform .15s ease; }
.cert-more:hover { color: var(--ink-900); }
.cert-more:hover span { transform: translateX(2px); }
.sec-actions { display: flex; gap: 28px; align-items: center; margin-top: 56px; flex-wrap: wrap; }
.quiet-link { display: inline-flex; gap: 6px; align-items: center; font-size: 0.9375rem; font-weight: 500; color: var(--ink-900); }
.quiet-link .arr { transition: transform .15s ease; }
.quiet-link:hover .arr { transform: translateX(3px); }

/* columns: three open columns */
.security--columns .cert-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.security--columns .cert { display: flex; flex-direction: column; align-items: flex-start; }
.security--columns .cert-body { margin-top: 0; }
.security--columns .cert-more { display: none; }

/* list: one panel, a row per standard */
.security--list .cert-list { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r); }
.security--list .cert { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.8fr) auto; gap: 32px; align-items: center; padding: 22px 28px; }
.security--list .cert + .cert { border-top: 1px solid var(--ink-100); }
.security--list .seal { width: 48px; height: 48px; }
.security--list .cert-body { display: contents; }
.security--list .cert h3 { font-size: 1.25rem; }
.security--list .cert p { margin-top: 0; max-width: none; }
.security--list .cert-more { justify-self: end; }

@media (max-width: 760px) {
    .security--columns .cert-list { grid-template-columns: 1fr; gap: 40px; }
    .security--list .cert { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 20px; }
    .security--list .cert-more { justify-self: start; }
}
.security-bar { top: auto; bottom: 60px; }

/* ------------------------------------------------------------
   Why Quill: a light record wall under the sticky heading, the
   closing section's idea in light mode. Fades out on every edge.
   ------------------------------------------------------------ */
.datawall--mini {
    position: relative; inset: auto; z-index: auto; height: 300px; margin-top: 48px;
    color: rgba(66, 71, 87, 0.5);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%), linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 72%, transparent 100%), linear-gradient(90deg, #000 0%, #000 62%, transparent 100%);
            mask-composite: intersect;
}
.datawall--mini::before { left: 44px; background: rgba(111, 93, 177, 0.35); }
.datawall--mini .r { grid-template-columns: 44px minmax(156px, 1fr) 1.25fr 1fr; background: linear-gradient(transparent 29px, rgba(91, 79, 184, 0.12) 29px); }
.datawall--mini .src { color: rgba(111, 93, 177, 0.8); }
.datawall--mini .bad { color: rgba(168, 98, 72, 0.9); }
.datawall--mini .fixed { color: var(--ink-900); }
.datawall--mini .fixed::after { color: var(--lavender-600); }
.datawall--mini .swap { animation: wall-swap .5s var(--ease-out), wall-mark-dawn 1.8s ease-out; }
@media (max-width: 900px) { .datawall--mini { display: none; } }
@media (prefers-reduced-motion: reduce) { .datawall--mini .swap { animation: none; } }

/* ------------------------------------------------------------
   Process: the step titles lead, the number is a small label, a thin
   lavender line draws across the top, and "for you" in the heading is
   the same solid lavender as the labels and the quill's ink.
   ------------------------------------------------------------ */
#process h2 em { color: var(--lavender-600); }
.steps { position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--lavender-500); transform-origin: left center; }
.steps .step-n { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--lavender-600); }
.steps h3 { margin-top: 14px; font-family: var(--serif); font-weight: 450; font-size: clamp(1.625rem, 2.3vw, 2rem); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink-900); text-wrap: balance; }
.steps p { margin-top: 14px; }
@media (max-width: 760px) { .steps::before { right: auto; width: 100%; } }

/* Preview bar (prototype only): every page is listed, so let it wrap */

/* ============================================================
   v18: v17 with a calmer type scale, closer to Rogo and Harvey.
   At 1440px: hero headline 88 -> 72px, section headings 54 -> 48px,
   the scroll-lit statement 44 -> 36px, card and step titles 32 -> 28px,
   intro paragraphs 20 -> 18px. Body text stays 16px. Sections sit a
   little tighter so the smaller type doesn't float.
   ============================================================ */
h1 { font-size: clamp(2.75rem, 5vw, 4.5rem); line-height: 1.04; letter-spacing: -0.026em; }
h2 { font-size: clamp(2rem, 3.35vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; }
.lede, .section-head .lede { font-size: 1.125rem; line-height: 1.6; }
.hero .lede { font-size: 1.125rem; line-height: 1.6; max-width: 720px; }
.statement p { font-size: clamp(1.625rem, 2.5vw, 2.25rem); line-height: 1.25; }
.problem h3, .steps h3 { font-size: clamp(1.5rem, 1.95vw, 1.75rem); }
.feature h3 { font-size: 1.75rem; }
.why li h3 { font-size: 1.125rem; }
.cert h3 { font-size: 1.375rem; }
.section { padding: 128px 0; }
.section-head { margin-bottom: 64px; }
.statement { padding: 128px 0 104px; }
@media (max-width: 900px) { .section { padding: 88px 0; } }
@media (max-width: 760px) { .problem h3 { font-size: 1.375rem; } }
/* The hero headline sits a touch larger than other h1s so the first screen
   keeps its presence in the full-height sky (76px at 1440) */
.hero h1 { font-size: clamp(2.75rem, 5.3vw, 4.75rem); }

/* Inner-page heroes sit below the homepage's 76px headline: 64px on the
   product, company and landing pages (Rogo's hero size), 56px on the
   reading pages. Blog posts keep their 48px title. */
.page .hero h1 { font-size: clamp(2.5rem, 4.45vw, 4rem); }
.page--security .hero h1, .page--updates .hero h1, .page--terms .hero h1,
.page--privacy .hero h1, .page--privacy-california .hero h1, .page--docs .hero h1, .page--blog .hero h1 { font-size: clamp(2.25rem, 3.9vw, 3.5rem); }
.page--blog-post .blog-hero--post h1 { font-size: clamp(2rem, 3.35vw, 3rem); }
/* Data Capture's tag, in its rosewood */
.st--rose { background: #F2E6EA; color: #7E4A5A; }

/* Inner-page heroes: more room between label, headline, paragraph and
   buttons, and a slightly more open headline and paragraph, so the first
   screen doesn't feel crammed */
.page .hero--page .label { margin-bottom: 26px; }
.page .hero h1 { line-height: 1.08; }
.page .hero .lede { margin-top: 34px; line-height: 1.68; max-width: 660px; }
.page .hero .btn-row { margin-top: 44px; }
/* Product page heroes: the intro paragraph stays within two lines */
.page--crm-hygiene .hero .lede, .page--crm-migration .hero .lede, .page--revops-mcp .hero .lede, .page--data-capture .hero .lede { max-width: 780px; }

/* v19: a booking prompt at the end of "We build and run the agents for you" */
.process-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 64px; padding: 28px 32px; background: #fff; border-radius: var(--r-card); box-shadow: 0 1px 2px rgba(30, 35, 48, 0.04); }
.process-cta p { max-width: 60ch; color: var(--ink-700); }
.process-cta .btn { flex: none; }
@media (max-width: 760px) { .process-cta { flex-direction: column; align-items: flex-start; } }

/* v19: the homepage security section uses the About page's layout. Heading
   on the left; intro, three certifications and actions on the right. */
.split-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.split-certs { display: grid; gap: 28px; margin-top: 44px; }
.split-certs h3 { font-family: var(--serif); font-weight: 450; font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-900); }
.split-certs p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--ink-600); }
.split-sec .sec-actions { margin-top: 44px; }
@media (max-width: 900px) { .split-sec { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

/* Product cards on a sand section: closed cards take a deeper sand so they
   don't melt into the page (the open card stays white) */
.section--sand .panel:not(.is-open) { background: #EAE6DE; border-color: rgba(30, 35, 48, 0.08); }
@media (max-width: 900px) { .section--sand .panel:not(.is-open) { background: #fff; } }

/* ============================================================
   v19 design pass (2026-09-24)
   ============================================================ */
/* 4) no hanging single words: headings balance, running text wraps "pretty" */
h3, h4, .problem h3, .feature h3, .steps h3 { text-wrap: balance; }
p, li, dd, .lede { text-wrap: pretty; }
/* 5) "Book a demo" stays dark in every state (over the hero, stuck, mobile menu) */
.site-header .nav-actions .btn--primary, .site-header.is-stuck .nav-actions .btn--primary, .nav-sheet .btn--primary { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.site-header .nav-actions .btn--primary:hover, .nav-sheet .btn--primary:hover { background: var(--ink-800); }
/* 6) the contact form: one look everywhere, solid dark submit */
.form .form-foot .btn--dark { flex: none; }
/* 17) inner pages' closing: the plain dusk sky, no moving data wall */
.closing--dusk .closing-bg { display: block; }
.nw { white-space: nowrap; }
/* 8) section heads: the intro's first line sits level with the heading's
   first line (below the small label when there is one) */
.section-head { align-items: start; }
.section-head > :first-child:has(> .label) + * { padding-top: 37px; }
/* 12) "What the agents do": the grey boxes hug their illustration, and the
   rows sit closer, so each idea fits comfortably on screen */
.moment { min-height: 0; padding: 36px 32px; }
.feature { padding: 40px 0; }
/* Logo strip: one set is wider than the strip, so no logo shows twice at once */
.hero-logos .set img { margin-right: 88px; }
@media (max-width: 900px) { .hero-logos .set img { margin-right: 56px; } }
/* Homepage hero: centered in the space between the header and the logo strip,
   a touch above true center, instead of a fixed distance from the top */
.hero--home .hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; padding-top: 120px; padding-bottom: 72px; }
.hero--home .hero-inner > * { width: 100%; }
@media (max-width: 900px) { .hero--home .hero-inner { padding-top: 120px; padding-bottom: 56px; } }
/* Security split: the intro sits under the heading on the left, the
   certifications and actions on the right */
.split-sec > div:first-child .lede { margin-top: 24px; max-width: 46ch; }
.split-sec .split-certs:first-child { margin-top: 8px; }
/* Homepage hero: fills the screen at every size, logos along its bottom
   edge, nothing of the next section showing (after Rogo) */
.hero.hero--home { min-height: 100vh; min-height: 100svh; }
/* The booking prompt under "We build and run the agents for you": sand on the
   white section so it reads as a box (white only if the section is sand) */
.process-cta { background: var(--sand); box-shadow: none; }
.section--sand .process-cta { background: #fff; }