/* Notice public pages: the homepage and About. Rebuilt 11 October 2026 at Connor's request ("The landing page needs
   to reflect actual things notice has"), in the app's own colours and type ("needs dark blackish like the app colour
   not brown same with font"), at the live page's text sizes and with its reveals ("hold ourselves to the same standard
   as linear but adapted to notice"). References: Linear for the standard, sizes, weight and motion; Attio for the
   centred opening and the framed product window; one small Plain touch, the dashed rule after each label. Every
   picture is the app itself (scripts/notice-landing-screens.cjs). Original Notice layout and drawing; no third-party
   code, copy or assets. */

@font-face {
  font-family: NoticeInter;
  src: url("/fonts/notice-interv.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* the app's own face: Inter, as public/css/app-shell.css sets it */
  --font: NoticeInter, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* the app's own dark theme (public/css/dark.css, app-shell.css, app-work-focus.css): the page, its sheets and raised
     surfaces, its lines and its text */
  --bg: #0e0e0f;
  --bg-2: #151515;
  --bg-3: #1d1d1d;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: #f0f0f2;
  --text-2: #aaaab4;
  --text-3: #8e8e98;
  /* the app's blue on dark (public/css/app-design-language.css, --ndl-info) */
  --accent: #86a9f3;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal: cubic-bezier(0.25, 0.1, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 80px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.6; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, h4, h5, p, dl, dd, ul, ol, figure { margin: 0; }
h1, h2, h3 { font-weight: 510; letter-spacing: -0.022em; text-wrap: balance; }
p, dd { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; background: none; border: 0; padding: 0; }
img { display: block; max-width: 100%; }
:where(h4, h5, strong, b, small) { font-size: inherit; font-weight: inherit; }
::selection { background: rgba(42, 111, 225, 0.45); color: #fff; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.symbol-library { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 20px; top: -80px; z-index: 100; background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-size: 14px; }
.skip-link:focus { top: 10px; }
.wrap { max-width: 1232px; margin: 0 auto; padding-inline: 32px; }

/* ── Buttons: pills, as in the app ────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 510; letter-spacing: -0.006em; white-space: nowrap; transition: background-color 0.15s, box-shadow 0.15s, color 0.15s; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: #fff; }
.btn-quiet { background: rgba(255, 255, 255, 0.05); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.09); }
.btn-small { height: 32px; padding: 0 12px; font-size: 13px; }

/* ── Header ───────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50; height: 64px; border-bottom: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s; }
.site-header.is-scrolled { background: rgba(14, 14, 15, 0.82); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.brand img { width: 102px; height: 20px; flex: none; }
#navigation { display: flex; align-items: center; gap: 28px; }
#navigation a, .login { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; color: var(--text-2); white-space: nowrap; transition: color 0.15s; }
#navigation a:hover, .login:hover { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.menu-toggle { display: none; }

/* ── Small labels, each with a dashed rule (the Plain touch) ──────────────── */
.label, .sec-head .label { display: flex; align-items: center; gap: 14px; max-width: none; padding-top: 0; font-size: 13px; font-weight: 510; line-height: 1.4; letter-spacing: -0.003em; color: var(--text-2); }
.label::after { content: ""; flex: 1; min-width: 24px; border-top: 1px dashed var(--line-2); }

/* ── Hero: centred, then the app ──────────────────────────────────────────── */
/* On a computer the promise is a step smaller than the live page first set it, and smaller again in a short window, so
   more of the app shows under it (Connor, 12 October 2026: "the computer version and sizing is too big and looks ugly
   compared to the mobile"); a phone keeps its size. */
.hero { padding-top: clamp(32px, 5vh, 72px); overflow-x: clip; }
.hero-head { display: grid; justify-items: center; text-align: center; }
.hero-title { font-size: clamp(34px, min(3.6vw, 7.4vh), 52px); line-height: 1.06; }
.ht-line { display: block; }
.hero-sub { max-width: 40em; margin-top: 18px; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.hero-cta { display: flex; justify-content: center; gap: 10px; margin-top: 28px; flex: none; }
.stage { position: relative; isolation: isolate; margin-top: clamp(28px, 4vh, 48px); }
.stage-foot { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 32px; margin-top: 14px; color: var(--text-3); font-size: 13px; }
.replay { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px; border-radius: 999px; color: var(--text-2); font-size: 13px; transition: color 0.15s, background-color 0.15s; }
.replay:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.replay .icon { width: 13px; height: 13px; }
.no-js .replay, .replay[hidden] { display: none; }

/* ── Plates: the real app on the app's own dark, in a quiet frame ───────── */
/* `clip` rather than only `hidden`, so nothing (focus, find in page, a script) can scroll a picture inside its plate */
.plate { position: relative; overflow: hidden; overflow: clip; padding: clamp(14px, 2.8vw, 40px); border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, var(--bg-2), #111112); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); }
/* the hero's window, inset from the page's edges, sits in a thin rim on the page's own plain dark, with nothing drawn
   behind it (Connor, 12 October 2026: "There's this lined background thing behind it can we get rid of that please") */
.plate-hero { max-width: 1080px; margin-inline: auto; padding: clamp(8px, 1.2vw, 14px); border-radius: 22px; background: rgba(255, 255, 255, 0.025); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
/* on a computer the window, its rim and the caption under it are never taller than the screen under the header (the
   frame at most 154 pixels shorter than the screen); shrunk below 1440 pixels, the layout is narrowed before it is
   scaled (--s, notice-next.js); a phone's camera keeps the window at its own size */
@media (min-width: 792px) {
  .plate-hero { max-width: min(1080px, calc((100svh - 154px) * 1440 / 760 + 28px)); }
  .is-shrunk .plate-hero { max-width: min(1080px, calc((100svh - 154px) / var(--s, 1) * 1440 / 760 + 28px)); }
}
.sec-body.plate, .tools .plate, .feature .plate { --pad: clamp(12px, 1.6vw, 22px); padding: var(--pad); }
.pic { width: 100%; height: auto; border-radius: 8px; background: var(--bg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 64px rgba(0, 0, 0, 0.5); }
/* each section picture's size as the app drew it (its width and height attributes, scripts/notice-landing-screens.cjs) */
.pic[src$="/overview.webp"] { --w: 845; --h: 745; }
.pic[src$="/ai-access-tool.webp"] { --w: 685; --h: 780; }
.pic[src$="/home.webp"] { --w: 762; --h: 334; }
.pic[src$="/review.webp"] { --w: 729; --h: 579; }
.pic[src$="/schedule.webp"] { --w: 686; --h: 684; }
/* On a computer a picture is shown at four fifths of the size the app drew it at most, and never taller than the screen
   under the header, with its plate fitted round it (Connor, 12 October 2026, chose "pictures at 80% size that always fit
   the screen"); a phone shows it wider than the screen, fading off its edge. */
@media (min-width: 641px) {
  .sec-body.plate, .tools .plate, .feature .plate { width: fit-content; max-width: 100%; }
  .plate > .pic { width: min(calc(var(--w) * 0.8px), calc((100svh - 120px - 2 * var(--pad)) * var(--w) / var(--h))); max-width: 100%; }
}

/* The hero's window: the real app at each step of the story, with what happens between the pictures drawn over them and
   the AI tools' own windows beside it (notice-next.js plays it). On a screen narrower than 1440 pixels the window and
   the tools are shrunk together, as one picture (Connor, 11 October 2026: "stay the desktop shaped but shrinked
   down"); on a phone they are shown larger, with a camera. Without the script, or without motion, it shows the moment the
   story is about: Claude Code's part reported done, with Verify waiting for you. */
.frame { position: relative; overflow: hidden; overflow: clip; aspect-ratio: 1440 / 760; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 80px rgba(0, 0, 0, 0.55); }
.window, .scene { position: absolute; inset: 0; }
.shot, .wire { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s var(--ease); }
.shot.is-on { opacity: 1; }
.is-playing .shot, .is-playing .wire { transition: none; }
.cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 20px; height: 24px; opacity: 0; pointer-events: none; will-change: translate, opacity; transition: opacity 0.3s, scale 0.15s; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55)); }
.cursor svg { margin: -2px 0 0 -2px; }
.cursor path { fill: #fff; stroke: #0a0a0b; stroke-width: 1.2; stroke-linejoin: round; }
.cursor.is-tap { transform-origin: 2px 2px; scale: 0.82; }
.cursor svg { transform: scale(var(--grow, 1)); transform-origin: 2px 2px; }
.is-playing .cursor { transition: scale 0.15s; }

/* What happens between the pictures, drawn in the window's own pixels (the app's 1440 × 760)
   and scaled with the window. Nothing here shows until the demo plays. */
.over { position: absolute; left: 0; top: 0; width: 1440px; height: 760px; transform-origin: 0 0; pointer-events: none; }
.over > * { position: absolute; left: 0; top: 0; opacity: 0; }
/* the line that draws the window in: a crisp hairline of light, the window's own width, with only a faint blue edge
   that follows it, never a haze (Connor, 12 October 2026: "keep the line but it needs to feel crisper and less in your
   face") */
.ov-band { width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0.78) 50%, rgba(255, 255, 255, 0.5) 85%, transparent);
  filter: drop-shadow(0 0 4px rgba(134, 169, 243, 0.45)); }
.ov-sprite { overflow: hidden; }
.ov-sprite img { position: absolute; max-width: none; }
.ov-lifted { border-radius: 10px; }
.ov-ground { background: var(--bg); }
.ov-glow { border-radius: 14px; background: rgba(134, 169, 243, 0.07); box-shadow: 0 0 0 1.5px rgba(134, 169, 243, 0.6), 0 0 36px 6px rgba(134, 169, 243, 0.28), inset 0 0 26px rgba(134, 169, 243, 0.12); }
.ov-white { background: rgba(255, 255, 255, 0.04); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5), 0 0 34px 6px rgba(255, 255, 255, 0.14); }
.ov-green { background: rgba(108, 194, 138, 0.06); box-shadow: 0 0 0 1.5px rgba(108, 194, 138, 0.6), 0 0 36px 6px rgba(108, 194, 138, 0.24), inset 0 0 26px rgba(108, 194, 138, 0.1); }
.ov-ring, .ov-ripple, .ov-tap { border-radius: 50%; translate: -50% -50%; }
.ov-ring { border: 2px solid rgba(134, 169, 243, 0.9); }
.ov-ripple { border: 2.5px solid rgba(255, 255, 255, 0.8); }
.ov-tap { background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.55); }
.ov-patch, .ov-wipe { background: var(--bg-3); }
.ov-wipe { background: linear-gradient(90deg, rgba(29, 29, 29, 0), var(--bg-3) 40px); }
.ov-typed { white-space: normal; letter-spacing: normal; }
.ov-typed i { display: inline-block; width: 1.5px; height: 1.25em; margin: 0 -1.5px 0 0.5px; vertical-align: -0.28em; background: var(--text); }
/* the app's own working line: a soft band crossing its words once every 1.9 s (public/css/home-chat.css, .nc__progressline) */
.ov-sweep { white-space: nowrap; color: transparent; background-image: linear-gradient(90deg, #4a4a4e 0%, #b4b4b8 25%, #4a4a4e 50%, #b4b4b8 75%, #4a4a4e 100%);
  background-size: 200% 100%; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; }
.ov-sheen { width: 100%; height: 100%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.06) 47%, rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0.06) 53%, transparent 60%); }
.ov-dip { width: 100%; height: 100%; background: var(--bg); }

/* The AI tools beside the window: drawings of Claude Code's terminal and Claude's chat, in the app's own type, with the
   reader's own fixed-width face for the terminal and the tools' calls (nothing is downloaded for it). */
.tool { position: absolute; left: 0; top: 0; z-index: 7; opacity: 0; pointer-events: none; transform-origin: 0 0; border-radius: 14px; background: rgba(13, 13, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 40px 90px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.4); }
.tool-term { width: 456px; }
.tool-chat { width: 384px; overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); color: #7d808a; font-size: 11.5px; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c2d31; }
.term-bar span { margin-left: 8px; }
.tool-term .tool-full { font: 500 12.5px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: 0; color: #c9ccd4; }
.term-body { min-height: 160px; padding: 12px 16px 14px; }
.term-body p { opacity: 0; white-space: pre; }
.term-body .term-ask { color: var(--text); }
.term-ask b { color: var(--text-3); font-weight: inherit; }
.term-dot { display: inline-block; width: 7px; height: 7px; margin: 0 9px 1px 1px; border-radius: 50%; background: #6cc28a; }
.term-call { position: relative; color: var(--accent); }
.term-call .term-dot { background: var(--accent); }
.term-call span { color: var(--text-3); }
.term-call::before { content: ""; position: absolute; inset: -2px -8px; border-radius: 6px; background: rgba(134, 169, 243, 0.1); box-shadow: 0 0 0 1px rgba(134, 169, 243, 0.35); opacity: var(--lit, 0); }
.term-out { padding-left: 4px; color: var(--text-3); }
.term-out b { color: #6cc28a; font-weight: inherit; }
.term-hook { display: inline-block; width: 8px; height: 9px; margin: 0 9px 4px 0; border-left: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.tool-chat .tool-full { padding: 16px 18px; font-size: 13.5px; line-height: 1.5; letter-spacing: -0.1px; }
.chat-who { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 560; color: var(--text); }
.chat-who .icon { width: 16px; height: 16px; color: #d97757; }
.chat-who small { margin-left: auto; font-size: 12px; font-weight: 450; color: var(--text-3); }
.chat-me { margin: 12px 0 0 46px; padding: 9px 12px; border-radius: 12px; background: var(--bg-3); color: #e6e6ea; opacity: 0; }
.chat-says { min-height: 40px; margin-top: 12px; color: #d9d9df; }
.chat-call { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(134, 169, 243, 0.35);
  background: rgba(134, 169, 243, 0.08); color: #b8c9f5; font: 500 11.5px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; letter-spacing: 0; opacity: 0; }
.chat-call b { color: var(--accent); font-weight: inherit; }
.chat-ask { margin-top: 8px; color: var(--text); opacity: 0; }
.traces { position: absolute; left: 0; top: 0; z-index: 6; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Shrunk: the window and the tools are laid out as on a 1440-pixel screen, then scaled to this one (--s, notice-next.js) */
.is-shrunk .stage-art { position: relative; }
.is-shrunk .stage-design { position: absolute; top: 0; left: 50%; width: 1440px; margin-left: -720px; padding: 0 136px; transform: scale(var(--s, 1)); transform-origin: 50% 0; }
.is-shrunk .plate-hero { padding: 14px; }
/* A phone: the same layout at the size the old phone page showed the app, its window 720 pixels wide (Connor, 12 October
   2026: "look at the old version of the mobile landing page and how it was sized and how the camera slid along"), wider
   than the screen and fading out at its sides; notice-next.js moves it as a camera that follows the story. The
   stylesheet lays it out, as tall as the window's rim (584 pixels) at the camera's scale (720 / 1050), with the camera
   where the script first puts it, on the open part (view.plan: the middle of the plan's view, 716.35 of the layout's
   pixels, 491.21 at that scale, at the middle of the screen), so a phone shows it so from the first moment, before the
   script and without it (Connor, 15 October 2026: "the animation at the top breaks on mobile for a little bit") */
@media (max-width: 791px) {
  .stage-art { position: relative; width: 100vw; height: calc(584px * 0.685714); margin-left: calc(50% - 50vw); overflow: hidden; overflow: clip;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
  .stage-design { position: absolute; top: 0; left: 0; width: 1440px; padding: 0 136px; transform-origin: 0 0;
    transform: translateX(calc(50vw - 491.21px)) scale(0.685714); transform: translateX(round(50vw - 491.21px, 1px)) scale(0.685714); }
  .plate-hero { padding: 14px; }
}

/* ── Sections: a label, the heading, one line, then the app ──────────────── */
/* On a computer the sections sit closer, a little closer again in a short window, and their headings are a step
   smaller (Connor, 12 October 2026); a phone keeps its spacing (Responsive, below). */
.section { padding-top: clamp(80px, min(9vw, 15vh), 128px); }
/* The homepage's sections stand about 240 pixels apart again on a computer, as Attio's and Linear's do, a little less
   in a smaller or shorter window, and its closing as far from the questions (Connor, 14 October 2026: "some of the
   sections were too close to one another"; he chose "About 240px"). A phone keeps its spacing. */
@media (min-width: 641px) {
  .home .section, .home .closing { padding-top: clamp(112px, min(17vw, 27vh), 240px); }
  .home .feature:last-child { padding-bottom: 0; }
}
.sec-head { display: grid; gap: 16px; }
.sec-head h2, .qa h2 { max-width: 16em; font-size: clamp(28px, 2.4vw, 34px); line-height: 1.1; }
.sec-head p { max-width: 36em; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.sec-head p a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.sec-head p a:hover { text-decoration-color: currentColor; }
.sec-body { margin-top: clamp(28px, 4vh, 48px); }

/* the other notice.do pages (About): a text-only opening */
.page-hero { padding-top: clamp(72px, 14vh, 152px); }
.page-hero .hero-title { margin-top: 0; }
.page-hero .hero-sub { margin-top: 22px; max-width: 34em; font-size: 18px; }
.about-contact { margin-top: clamp(72px, 8vw, 112px); }

/* ── Legal pages: Terms, Privacy and Subprocessors (13 October 2026) ─────────
   Structured as Attio and Linear set theirs: a row of the legal documents, the title with when it last changed, a
   plain-English short version, a numbered contents list that jumps to each section, then numbered sections. Read at a
   comfortable measure; on a computer the contents stay beside the text. */
.legal { padding: clamp(40px, 7vh, 88px) 0 clamp(96px, 10vw, 144px); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-tabs a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 510; color: var(--text-2);
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line); transition: color 0.15s, background-color 0.15s; }
.legal-tabs a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.legal-tabs a[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 0 0 1px var(--line-2); }
.legal-head { margin-top: clamp(28px, 4vh, 40px); max-width: 46rem; }
.legal-head h1 { font-size: clamp(32px, 3vw, 44px); line-height: 1.08; }
.legal-meta { margin-top: 12px; font-size: 13px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.legal-lead { margin-top: 18px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.legal-layout { display: grid; gap: 32px; margin-top: clamp(32px, 5vh, 56px); }
.legal-toc { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); font-size: 13px; }
.legal-toc p { font-weight: 510; color: var(--text-2); }
.legal-toc ol { margin-top: 8px; }
.legal-toc a { display: block; padding: 5px 0 5px 12px; border-left: 1px solid var(--line); color: var(--text-3); line-height: 1.4; transition: color 0.15s, border-color 0.15s; }
.legal-toc a:hover { color: var(--text-2); }
.legal-toc a[aria-current="true"] { color: var(--text); border-left-color: var(--accent); }
.legal-text { min-width: 0; max-width: 44rem; line-height: 1.7; color: #d4d4da; }
.legal-text section + section { margin-top: 44px; }
.legal-text h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.012em; color: var(--text); }
.legal-text h2 .n { margin-right: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.legal-text h3 { margin-top: 24px; font-size: 16px; line-height: 1.4; letter-spacing: -0.01em; color: var(--text); }
.legal-text h2 + p, .legal-text h2 + ul, .legal-text h3 + p, .legal-text h3 + ul { margin-top: 12px; }
.legal-text p + p, .legal-text ul + p, .legal-text p + ul, .legal-text ul + ul { margin-top: 12px; }
.legal-text ul { padding-left: 18px; list-style: disc; }
.legal-text li + li { margin-top: 8px; }
.legal-text li::marker { color: var(--text-3); }
.legal-text strong { font-weight: 560; color: var(--text); }
.legal-text a, .legal-lead a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.legal-text a:hover, .legal-lead a:hover { text-decoration-color: currentColor; }
.legal-short { padding: 20px 24px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.legal-short h2 { font-size: 16px; }
.legal-contact { font-style: normal; }
.legal-table-wrap { margin-top: 16px; overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.legal-table th { padding: 0 16px 10px 0; font-size: 12px; font-weight: 510; text-align: left; color: var(--text-3); border-bottom: 1px solid var(--line-2); }
.legal-table td { padding: 14px 16px 14px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.legal-table td:first-child { font-weight: 510; color: var(--text); }
/* cookie names in the page's own face: the homepage keeps a fixed-width face for its terminal drawings alone */
.legal-text code { font: inherit; font-weight: 560; color: var(--text); overflow-wrap: anywhere; }
@media print {
  html:has(.legal), html:has(.legal) body { background: #fff; color: #000; }
  html:has(.legal) :is(.site-header, .site-footer, .skip-link), .legal-tabs, .legal-toc { display: none; }
  .legal { padding: 0; }
  .legal-layout { display: block; margin-top: 16px; }
  .legal, .legal :is(.legal-meta, .legal-lead, .legal-text, h1, h2, h3, strong, a, th, td) { color: #000; }
  .legal-short { background: none; border-color: #999; }
}

/* the Work page drawn in line, its four views lifted apart */
.stack-stage { position: relative; width: min(940px, 100%); margin: 24px auto 0; aspect-ratio: 1200 / 816; }
/* on a computer, never taller than the screen under the header */
@media (min-width: 901px) {
  .stack-stage { width: min(940px, 100%, calc((100svh - 130px) * 1200 / 816)); }
}
.art-stack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.art-stack path, .art-stack line { fill: none; stroke: #fff; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.art-stack .s { fill: var(--bg); fill-opacity: 0.9; stroke: none; }
.art-stack .e1 { stroke-opacity: 0.85; stroke-width: 1.2px; }
.art-stack .e2 { stroke-opacity: 0.42; stroke-width: 1px; }
.art-stack .e3 { stroke-opacity: 0.5; stroke-width: 1px; }
.art-stack .h { stroke-opacity: 0.12; stroke-width: 1px; }
.art-stack .a { stroke: #fff; stroke-opacity: 0.85; stroke-width: 1.4px; }
.art-stack .ld { stroke-opacity: 0.3; stroke-width: 1px; stroke-dasharray: 3 4; }
.art-stack .rules, .art-stack .guides, .art-stack .n { display: none; }
.stack-labels { position: absolute; inset: 0; pointer-events: none; }
.sl { position: absolute; width: min(230px, 22%); transform: translateY(-50%); }
.sl b { display: block; font-size: 15px; font-weight: 510; letter-spacing: -0.012em; color: var(--text); }
.sl span { display: block; margin-top: 2px; color: var(--text-2); font-size: 14px; line-height: 1.45; }
.sl-results { top: 68.1%; left: calc(77.12% + 14px); }
.sl-decisions { top: 50.93%; right: calc(77.12% + 14px); text-align: right; }
.sl-context { top: 41.25%; left: calc(77.12% + 14px); }
.sl-direction { top: 24.07%; right: calc(77.12% + 14px); text-align: right; }
/* The layers rest folded on the base until the drawing is in view, then lift apart, top layer first; each
   leader and label follows its layer. On a computer, pointing at a layer or its label lifts it a little and
   brightens its lines (notice-next.js matches the pointer to where each layer rests). */
.stack-stage [data-layer="Direction"] { --delay: 0s; }
.stack-stage [data-layer="Context"] { --delay: 0.08s; }
.stack-stage [data-layer="Decisions"] { --delay: 0.16s; }
.stack-stage [data-layer="Results"] { --delay: 0.24s; }
.js .stack-stage:not(.is-open) .layer { transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px)); }
.stack-stage.is-open .layer { transition: transform 1.2s cubic-bezier(0.32, 0.72, 0, 1) var(--delay, 0s), translate 0.5s cubic-bezier(0.32, 0.72, 0, 1); }
.stack-stage.is-open .ld { transition: opacity 0.7s var(--reveal) calc(var(--delay, 0s) + 0.55s), stroke-opacity 0.3s; }
.stack-stage.is-open .sl { transition: opacity 0.7s var(--reveal) calc(var(--delay, 0s) + 0.55s), translate 0.7s var(--reveal) calc(var(--delay, 0s) + 0.55s); }
.js .stack-stage:not(.is-open) .ld, .js .stack-stage:not(.is-open) .sl { opacity: 0; }
.js .stack-stage:not(.is-open) .sl { translate: 0 6px; }
.art-stack .layer path { transition: stroke-opacity 0.3s; }
.sl b, .sl span { transition: color 0.3s; }
.stack-stage.is-open .layer.is-lifted { translate: 0 -14px; }
.layer.is-lifted .e1 { stroke-opacity: 1; }
.layer.is-lifted .e2 { stroke-opacity: 0.72; }
.layer.is-lifted .e3 { stroke-opacity: 0.78; }
.layer.is-lifted .h { stroke-opacity: 0.2; }
.art-stack .ld.is-lifted { stroke-opacity: 0.6; }
.sl.is-lifted span { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .stack-labels .sl { pointer-events: auto; }
}

/* AI tools: a tool's own settings beside what they mean */
.tools { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.notes { display: grid; gap: 0; }
.notes li { padding: 18px 0; border-top: 1px solid var(--line); }
.notes li:last-child { border-bottom: 1px solid var(--line); }
.notes h3 { font-size: 16px; line-height: 1.35; letter-spacing: -0.012em; }
.notes p { margin-top: 4px; color: var(--text-2); font-size: 15px; }

/* Home, Review and Schedule */
.features { display: grid; gap: 0; }
.feature { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: 48px 0; border-top: 1px solid var(--line); }
.feature:first-child { border-top: 0; padding-top: 0; }
.feature-label { color: var(--text-2); font-size: 13px; font-weight: 510; }
.feature h3 { margin-top: 8px; font-size: 22px; line-height: 1.25; }
.feature-copy p:last-child { margin-top: 8px; max-width: 26em; color: var(--text-2); }

/* clear about what's done */
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: clamp(28px, 4vh, 48px); }
.points li { padding-top: 20px; border-top: 1px solid var(--line-2); }
.points h3 { font-size: 16px; line-height: 1.35; letter-spacing: -0.012em; }
.points p { margin-top: 6px; max-width: 24em; color: var(--text-2); }

/* questions */
.qa { display: grid; gap: clamp(32px, 4vw, 48px); }
.questions { max-width: 50rem; }
.questions details { border-bottom: 1px solid var(--line); }
.questions details:first-child { border-top: 1px solid var(--line); }
.questions summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 56px; padding: 14px 0; font-size: 15px; line-height: 1.5; color: #e4e4e8; list-style: none; cursor: pointer; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary:hover { color: #fff; }
.questions summary .icon { width: 14px; height: 14px; color: var(--text-2); transition: transform 0.18s; }
.questions details[open] summary .icon { transform: rotate(45deg); }
.questions details p { padding-bottom: 18px; max-width: 38em; color: var(--text-2); }

/* closing */
.closing { padding: clamp(96px, 10vw, 152px) 0 clamp(88px, 9vw, 128px); text-align: center; }
.closing h2 { font-size: clamp(30px, 3vw, 42px); line-height: 1.08; }
.closing p { margin: 14px auto 0; max-width: 32em; color: var(--text-2); font-size: 16px; }
.closing-cta { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }

/* ── Footer, motion toggle ────────────────────────────────────────────────── */
.site-footer { max-width: 1232px; margin: 0 auto; padding: 28px 32px 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 30px; }
.site-footer > div { display: flex; gap: 28px; align-items: center; }
.site-footer > div > a { display: inline-flex; align-items: center; min-height: 44px; flex: none; }
.site-footer > div > span { font-size: 13px; color: var(--text-3); }
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 13px; color: var(--text-2); }
.site-footer nav a, #privacy-settings { min-height: 44px; display: inline-flex; align-items: center; font: inherit; color: inherit; }
.site-footer nav a:hover, #privacy-settings:hover { color: var(--text); }
.site-footer nav > span { color: var(--text-3); }
.motion-toggle { min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--text-2); font-size: 13px; white-space: nowrap; flex: none; box-shadow: inset 0 0 0 1px var(--line); }
.motion-toggle:hover { color: var(--text); }
.motion-toggle[hidden] { display: none; }

/* ── Motion ───────────────────────────────────────────────────────────────── */
/* As on the live page: headings, and the lines under them, arrive the way Linear's do: one second, a standard ease,
   from 20% low and out of focus (blur 10px) to rest. Blocks rise into place. */
@keyframes text-in { from { opacity: 0; filter: blur(10px); transform: translateY(20%); } to { opacity: 1; filter: none; transform: none; } }
@keyframes stage-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.hero-title { animation: text-in 1s var(--reveal) 0.4s both; }
.hero-sub { animation: text-in 1s var(--reveal) 0.6s both; }
.hero-cta { animation: text-in 1s var(--reveal) 0.85s both; }
.stage, .stage-foot { animation: stage-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both; }
[data-d="1"] { --d: 0.12s; }
[data-d="2"] { --d: 0.24s; }
.js [data-text] { opacity: 0; filter: blur(10px); transform: translateY(20%); }
.js [data-text].is-in { opacity: 1; filter: none; transform: none;
  transition: opacity 1s var(--reveal) var(--d, 0s), filter 1s var(--reveal) var(--d, 0s), transform 1s var(--reveal) var(--d, 0s); }
.js [data-reveal] { opacity: 0; transform: translateY(16px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.9s var(--reveal) var(--d, 0s), transform 1s cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0s); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title, .hero-sub, .hero-cta, .stage, .stage-foot { animation: none; }
  .js [data-text], .js [data-reveal] { opacity: 1; filter: none; transform: none; transition: none; }
  .shot, .wire, .cursor { transition: none; }
  .stack-stage.is-open .layer, .stack-stage.is-open .ld, .stack-stage.is-open .sl { transition: none; }
  .stack-stage.is-open .layer.is-lifted { translate: none; }
}
html.motion-paused .hero-title, html.motion-paused .hero-sub, html.motion-paused .hero-cta, html.motion-paused .stage, html.motion-paused .stage-foot { animation: none; }
html.motion-paused [data-text], html.motion-paused [data-reveal] { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
html.motion-paused .shot, html.motion-paused .wire, html.motion-paused .cursor { transition: none; }
html.motion-paused .stack-stage.is-open .layer, html.motion-paused .stack-stage.is-open .ld, html.motion-paused .stack-stage.is-open .sl { transition: none; }
html.motion-paused .stack-stage.is-open .layer.is-lifted { translate: none; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
/* A computer: a section opens with its heading on the left and what it means on the right, as Linear sets one; Overview
   and AI tools set their words beside the app, as Home, Review and Schedule do, so each fits one screen (Connor,
   12 October 2026, chose "Text beside each picture"). The pictures take turns, right then left, down the page (Connor,
   14 October 2026: the sections "didn't vary from left to right and right to left"): a row marked pic-left has its
   picture on the left and its words on the right. */
@media (min-width: 1001px) {
  .sec-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); column-gap: clamp(40px, 5vw, 80px); }
  .sec-head .label { grid-column: 1 / -1; }
  .sec-head p { max-width: 30em; padding-top: 4px; }
  .split { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(40px, 6vh, 64px) clamp(32px, 5vw, 80px); align-items: center; }
  .split .sec-head { grid-template-columns: minmax(0, 1fr); }
  .split .sec-head p { padding-top: 0; }
  .split .sec-body { margin-top: 0; }
  .split, .feature { --words: 1; --pic: 2; }
  .split.pic-left, .feature.pic-left { --words: 2; --pic: 1; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .split > .sec-head, .feature > .feature-copy, .split .notes { grid-column: var(--words); }
  .split .plate, .feature .plate { grid-column: var(--pic); grid-row: 1; justify-self: end; }
  .pic-left .plate { justify-self: start; }
  /* AI tools: the tool's settings on one side; on the other, the heading over the three notes on what they mean */
  .split .tools { display: contents; }
  .split:has(> .tools) > .sec-head { align-self: end; }
  .split .tools .plate { grid-row: 1 / span 2; }
  .split .notes { grid-row: 2; align-self: start; }
  .feature { padding-block: clamp(48px, 5vw, 72px); }
  /* the legal pages: the contents beside the text, in view as it scrolls */
  .legal-layout { grid-template-columns: 232px minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .legal-toc { position: sticky; top: 88px; max-height: calc(100svh - 112px); overflow-y: auto; padding: 0; border: 0; background: none; }
}
@media (max-width: 1120px) {
  .site-footer { flex-direction: column; gap: 22px; }
}
@media (max-width: 1000px) {
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .tools { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 44px; height: 44px; }
  .menu-toggle span { display: block; width: 18px; height: 1.5px; background: var(--text); transition: transform 0.2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  #navigation { position: absolute; top: 64px; left: 0; right: 0; display: none; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 24px 18px; background: #131314; border-bottom: 1px solid var(--line); }
  #navigation.open { display: flex; }
  #navigation a { width: 100%; min-height: 48px; font-size: 16px; }
  .login { display: none; }
  .header-actions { gap: 8px; }
  .stack-labels { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; margin-top: 24px; }
  .stack-stage { aspect-ratio: auto; overflow: hidden; }
  /* the drawing sits in the middle of a wide canvas: show the drawing, not the margins */
  .art-stack { position: relative; width: 170%; max-width: none; height: auto; margin-left: -35%; aspect-ratio: 1200 / 816; }
  .art-stack .leaders { display: none; }
  .sl, .sl-results, .sl-decisions, .sl-context, .sl-direction { position: static; width: auto; transform: none; text-align: left; }
  .points { grid-template-columns: 1fr; gap: 0; }
  .points li { padding: 22px 0; }
  .site-footer { padding: 28px 20px 36px; }
  .site-footer > div { flex-wrap: wrap; gap: 12px 24px; }
}
@media (max-width: 640px) {
  .wrap { padding-inline: 20px; }
  .hero { padding-top: 36px; }
  .hero-title { font-size: 34px; }
  .stage { margin-top: 28px; }
  .stage-foot { flex-direction: column; gap: 6px; }
  /* Replay comes in under the caption once the demo plays; its row is kept from the start, so nothing below it moves
     (on a wider screen the row is already Replay's height) */
  .js .stage-foot { display: grid; grid-template-rows: auto 32px; justify-items: center; }
  .stack-labels { grid-template-columns: 1fr; }
  /* a phone keeps the spacing it had before the computer's was tightened (12 October 2026) */
  .section { padding-top: 112px; }
  .sec-body, .points { margin-top: 40px; }
  .closing { padding: 144px 0 120px; }
  /* phones: the computer's pictures, wider than the screen and fading off its right edge (as approved for
     round 4), so the app's words stay readable */
  .sec-body.plate, .tools .plate, .feature .plate { width: auto; margin-inline: -20px; padding: 16px 0 16px 20px; border-inline: 0; border-radius: 0; }
  .sec-body.plate .pic, .tools .plate .pic, .feature .plate .pic { width: 135%; max-width: none; border-radius: 8px 0 0 8px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100vw - 110px), transparent calc(100vw - 24px));
    mask-image: linear-gradient(to right, #000 calc(100vw - 110px), transparent calc(100vw - 24px)); }
  /* the legal pages: the providers' table reads as one card per provider */
  .legal-short { padding: 18px 18px 20px; }
  .legal-table thead { display: none; }
  .legal-table tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .legal-table td { display: block; padding: 2px 0; border: 0; }
  .legal-table td[data-label] { margin-top: 8px; }
  .legal-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 510; color: var(--text-3); }
}
/* Approved lockup sizes (rebrand/logo/final/README.md): 20px ink height, or 90px wide where the row is tight. */
@media (max-width: 680px) {
  .site-footer img { width: 90px; height: auto; }
}
@media (max-width: 360px) {
  .header-inner { padding-inline: 18px; gap: 12px; }
  .btn-small { padding-inline: 12px; }
  .brand img { width: 90px; height: auto; }
}