/* The public pages: the homepage, /privacy and /terms (the homepage brief, 24 October 2026). Warm off-white, near-black
   text, Clive's violet as the one accent: the app's own #8A05FF for fills and large type, #7400D6 for small violet text
   on the light background. The phone's own font, as the app uses; nothing loads from anywhere else. Light only, as designed.
   Below 900 px the picture turns to its tall drawing, the buttons go full width and the four boxes stack. */

:root {
  --bg: #F7F4EE;
  --card: #FFFFFF;
  --text: #15111B;
  --muted: #5B5463;
  --line: #E3DED4;
  --violet: #8A05FF;
  --violet-text: #7400D6;
  --on-violet: #FFFFFF;
  --band: #15111B;
  --on-band: #F7F4EE;
  --band-violet: #C9A2FF;
  --band-muted: #B9B2C2;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, 1.15vw + 11px, 24px);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
a { color: var(--violet-text); }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -0.02em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 0 28px; border-radius: 999px;
  font: inherit; font-weight: 600; text-decoration: none; white-space: nowrap;
  border: 2px solid transparent;
}
.btn-fill { background: var(--violet); color: var(--on-violet); }
.btn-fill:hover { filter: brightness(1.08); }
.btn-line { color: var(--text); border-color: var(--text); background: transparent; }
.btn-line:hover { background: rgba(21, 17, 27, 0.05); }
.btn-light { color: var(--on-band); border-color: var(--on-band); background: transparent; }
.btn-light:hover { background: rgba(247, 244, 238, 0.08); }
.btn-small { min-height: 44px; padding: 0 20px; font-size: 0.82em; }

/* 1. Header */
.top { padding: 22px 0; }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: block; line-height: 0; }
.lockup { display: block; height: clamp(40px, 3.6vw, 56px); width: auto; aspect-ratio: 1231.37 / 276; color: var(--text); }
.lockup .lk-mark { color: var(--violet); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); font-size: 0.86em; }
.nav a:not(.btn) { color: var(--text); text-decoration: none; font-weight: 500; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }

/* 2. Hero */
.hero { padding: clamp(40px, 7vw, 110px) 0 clamp(32px, 5vw, 72px); }
.hero-title { color: var(--violet); font-size: clamp(64px, 10vw, 152px); font-weight: 800; letter-spacing: -0.035em; line-height: 0.95; }
.hero-line { margin: 0.3em 0 0; font-size: clamp(30px, 4vw, 60px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; max-width: 18ch; }
.hero-text { margin: 1.1em 0 0; max-width: 34ch; font-size: clamp(20px, 1.4vw + 10px, 28px); color: var(--text); }
.buttons { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; }
.hl-lead, .hl-last { display: inline; }

/* 2a. The drum (the tiles brief of 27 October 2026), on a desktop only. The hero becomes a grid: the title and the
   subtitle's lead run full width; the subtitle's last word, the paragraph and the buttons take the left column; the drum
   takes the right one from that last word's line down to the buttons' bottom, its height set by those rows alone (its
   tiles are positioned inside it, so they never push the rows apart). Three rows show; site/home.js rolls them. */
.drum { display: none; }
@media (min-width: 900px) {
  .hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 46%); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
  .hero-title { grid-column: 1 / -1; grid-row: 1; }
  .hero-line { display: contents; }
  .hl-lead { display: block; grid-column: 1 / -1; grid-row: 2; margin-top: 0.3em; }
  .hl-last { display: block; grid-column: 1; grid-row: 3; }
  .hero-text { grid-column: 1; grid-row: 4; }
  .buttons { grid-column: 1; grid-row: 5; }
  .drum { display: block; grid-column: 2; grid-row: 3 / 6; align-self: stretch; position: relative; min-height: 0; user-select: none; -webkit-user-select: none; }
}
/* The window the tiles show through: its top half a tile below the subtitle's last line, its bottom level with the
   buttons (Dan's change of 27 October 2026, 17:28). With three rows of height t and two 10 px gaps filling the window,
   and the window's top t / 2 below the drum's: t = 2(H - 20) / 7, so the drop is (H - 20) / 7 of the drum's height H. */
.drum-win { position: absolute; left: 0; right: 0; top: calc((100% - 20px) / 7); bottom: 0; overflow: hidden; }
.drum .track { position: absolute; left: 0; right: 0; top: 0; height: 100%; display: flex; flex-direction: column; gap: 10px; }
.drum .track.lift { transform: translateY(calc((100% + 10px) / -3)); }
.drum .track.rolling { transition: transform 1s cubic-bezier(0.45, 0, 0.25, 1); }
.t-row { flex: 0 0 calc((100% - 20px) / 3); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.tile {
  box-sizing: border-box; min-height: 0; overflow: hidden; padding: clamp(4px, 0.42vw, 6px) clamp(5px, 0.55vw, 8px); border-radius: 14px; background: #FFFFFF;
  border: 2.5px solid #B98AFF; display: flex; flex-direction: column; justify-content: space-between; gap: 3px;
  /* 12.5 px from 1200 px wide, down to about 10.6 px just above the phone width, so the longest words fit */
  font-size: clamp(10.5px, 0.65vw + 4.6px, 12.5px); line-height: 1.15; color: var(--text);
}
.t-ask { padding: clamp(3px, 0.32vw, 5px) clamp(5px, 0.55vw, 7px); border-radius: 9px; background: #EEECF1; }
.t-ans { display: flex; align-items: center; gap: 6px; padding-left: 2px; min-height: 0; }
.t-mark { flex: 0 0 auto; width: 14px; height: auto; color: var(--violet); }
.t-text { font-weight: 600; }
.t-mon { display: flex; align-items: center; gap: 6px; }
.t-one { display: inline-grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--violet); color: #FFFFFF; font-size: 12px; font-weight: 700; line-height: 1; }
.t-label { padding: 0 6px; line-height: 1.25; border-radius: 6px; border: 1.5px solid var(--violet); background: #EFEAFF; font-size: 1.04em; font-weight: 600; }
.t-alert { padding-left: 2px; }

/* 3. How Clive works: one picture, drawn twice in lib/hero.js — wide for a desktop, tall for a phone. Below 900 px the
   tall one shows, at most 440 px wide. Drawn, not interactive: nothing here takes a tap or the keyboard. */
.flow { padding: clamp(32px, 5vw, 80px) 0; scroll-margin-top: 16px; }
.pic-block { width: 100%; }
.hero-pic { width: 100%; }
/* The line above the picture: a lead-in, larger than body text, smaller than the section headings. Its indent is the
   speech bubble's left edge as a share of the drawing's width (lib/hero.js: 40 of 1328 wide, 24 of 390 tall), so the
   two line up at every width. */
.pic-lead { margin: 0 0 0.45em; padding-left: 3.012%; padding-right: 3.012%; font-size: clamp(22px, 1.6vw + 12px, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; max-width: 34ch; box-sizing: content-box; }
.pic { display: block; width: 100%; height: auto; overflow: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
.pic-tall { display: none; }
.pic text { font-family: inherit; fill: var(--text); }
/* The owner's side (the brief of 28 October 2026): what the owner tells Clive in charcoal, with white words, matching
   the speech bubble's outline and the books' line art; what's connected on white with a thin border and an icon; the
   grey lines a step darker so they still read beside the charcoal. Violet stays Clive's. */
.pic .grey path { fill: none; stroke: #6E6880; stroke-width: 1.5; stroke-linecap: round; }
.pic .grey-dot { fill: #6E6880; }
.pic .say { fill: var(--card); stroke: var(--text); stroke-width: 3; }
.pic .say-tail { fill: var(--card); stroke: var(--text); stroke-width: 3; stroke-linejoin: round; }
.pic .say-gap { fill: var(--card); }
.pic .wave { fill: var(--violet); }
.pic .field { fill: #1C1A24; }
.pic .field-t { fill: #FFFFFF; font-weight: 500; }
.pic .source { fill: var(--card); stroke: #D8D2E4; stroke-width: 1.2; }
.pic .source-t { font-weight: 500; }
.pic .env { fill: var(--card); stroke: #5B5463; stroke-width: 1.8; stroke-linejoin: round; }
.pic .env-flap { fill: none; stroke: #5B5463; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.pic .cell { fill: var(--card); stroke: #D8D2E4; stroke-width: 1; }
.pic .cell-h { fill: #E9E6EF; }
.pic .glow { fill: var(--band-violet); opacity: 0.32; transform-box: fill-box; transform-origin: center; animation: hp-glow 4.2s ease-in-out infinite; }
@keyframes hp-glow { 0%, 100% { opacity: 0.18; transform: scale(0.92); } 50% { opacity: 0.5; transform: scale(1); } }
.pic .ph-shadow { fill: var(--text); opacity: 0.22; }
.pic .ph-frame { fill: var(--card); stroke: var(--text); }
.pic .ph-mark { color: var(--violet); }
.pic .ph-word { color: var(--text); }
.pic .ph-rule { stroke: #ECE8F5; stroke-width: 1; }
.pic .ph-ask { fill: #E9E6EF; }
.pic .ph-reply { fill: #F1E6FF; }
.pic .ph-dictate { fill: var(--violet); }
.pic .ph-dictate-t { fill: var(--on-violet); font-weight: 600; }
.pic .ph-send { fill: var(--card); stroke: #CFC8BA; stroke-width: 1; }
.pic .ph-send-t { font-weight: 500; }
.pic .violet polyline { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pic .v-dot { fill: var(--violet); }
/* The shelf as F2 (round 6, 28 October 2026): the speech bubble's and the phone's 3 px charcoal outline with round joins,
   flat fills: white spines, pale violet tops, lilac covers and shelf, charcoal bookends. */
.pic .sh-top, .pic .sh-end, .pic .bk-cover { fill: #E9E6EF; stroke: #15111B; stroke-width: 3; stroke-linejoin: round; }
.pic .sh-front, .pic .bk-spine { fill: #FFFFFF; stroke: #15111B; stroke-width: 3; stroke-linejoin: round; }
.pic .bk-top { fill: #F1E6FF; stroke: #15111B; stroke-width: 3; stroke-linejoin: round; }
.pic .bookend { fill: #1C1A24; stroke: #15111B; stroke-width: 3; stroke-linejoin: round; }
.pic .b-name {
  fill: #15111B; font-weight: 800; letter-spacing: 1.2px;
  text-anchor: middle; dominant-baseline: central;
  transition: opacity 1.2s ease;
}
.pic .b-name.fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pic .glow { animation: none; opacity: 0.32; transform: none; }
  .pic .b-name { transition: none; }
  .pic .b-name.fading { opacity: 1; }
}

/* 4. The line under the flow */
.strap { padding: clamp(24px, 4vw, 64px) 0 clamp(48px, 7vw, 110px); text-align: center; }
.strap-text { margin: 0 auto; max-width: 20ch; font-size: clamp(40px, 6vw, 92px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
.violet { color: var(--violet); }

/* 5. Put him to work */
.work { padding: 0 0 clamp(56px, 8vw, 120px); }
.work-heading { font-size: clamp(36px, 4.6vw, 68px); font-weight: 800; }
/* The four jobs (round 4, 28 October 2026). On a desktop, four cards of equal height: a tinted top with the icon and
   name in the deep shade, a white body with the description and the examples as a list, the whole bordered in the deep
   shade. On a phone (below 900 px), a short list of the four and six examples instead; the cards are not drawn.
   Colours by the card's name. Every text colour at 4.5:1 or better on its ground. */
.job-answers { --tint: #DCEAF7; --deep: #1F4E79; }
.job-reports { --tint: #DDEBDD; --deep: #2F5D3A; }
.job-assets  { --tint: #FBE7D2; --deep: #8A4B14; }
.job-monitor { --tint: #F7DDE6; --deep: #8A2E4F; }
.job-other   { --tint: #EEECF1; --deep: #3A3646; }
.job-icon { width: 28px; height: 28px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--deep); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); margin-top: clamp(28px, 3vw, 44px); align-items: stretch; }
.card { display: flex; flex-direction: column; background: var(--card); border: 2px solid var(--deep); border-radius: 16px; overflow: hidden; }
.card-top { display: flex; align-items: center; gap: 12px; background: var(--tint); padding: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 28px); }
.card-top h3 { color: var(--deep); font-size: clamp(24px, 2vw, 32px); font-weight: 800; }
.card-body { flex: 1 1 auto; padding: clamp(16px, 1.6vw, 24px) clamp(18px, 1.8vw, 28px) clamp(18px, 1.8vw, 28px); color: #3A3646; font-size: 0.82em; line-height: 1.45; }
/* The description: the card's subheading, in its deep shade, semibold and a touch larger than the examples, then a thin
   line in the card's tint before the first example (round 5, 28 October 2026). */
.card-desc { margin: 0; color: var(--deep); font-weight: 600; font-size: 1.04em; }
.card-ex { list-style: none; margin: 18px 0 0; padding: 0; border-top: 2px solid var(--tint); }
.card-ex li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.jobs-phone { display: none; }
.job-tile { display: inline-grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 10px; background: var(--tint); }
.job-tile .job-icon { width: 26px; height: 26px; }
.job-list, .ex-list { list-style: none; margin: 0; padding: 0; }
/* The four on a phone: small cards, each a desktop card without its examples. */
.job-list { display: grid; gap: 14px; }
.card-mini .card-top { padding: 12px 16px; gap: 10px; }
.card-mini .job-name { font-size: 1.05em; }
.card-mini .card-body { padding: 12px 16px 14px; font-size: 0.9em; }
.ex-heading { margin: 28px 0 8px; font-size: 0.95em; font-weight: 700; letter-spacing: 0; }
.ex-list li { display: flex; align-items: center; gap: 14px; padding: 8px 0; color: var(--text); font-size: 0.9em; }
.ex-list .job-tile { width: 32px; height: 32px; border-radius: 8px; }
.ex-list .job-icon { width: 19px; height: 19px; }
/* The key: what an asterisk means, once, in body text size. */
.key { margin: clamp(24px, 2.4vw, 36px) 0 0; color: var(--text); }
/* The closing line for the jobs (round 6): the page's headline style, between the section heading's size and that
   of "Say it once. Clive keeps it straight." */
.close-line { margin: clamp(48px, 6vw, 96px) auto 0; max-width: 20ch; text-align: center; font-size: clamp(38px, 5.2vw, 80px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
/* An asterisk straight after the words: shown, and read by screen readers as "on the way". */
.ast { font-weight: inherit; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 6. The dark band */
.data { background: var(--band); color: var(--on-band); padding: clamp(56px, 8vw, 120px) 0; }
.data-heading { font-size: clamp(38px, 5vw, 76px); font-weight: 800; max-width: 16ch; }
.points { list-style: none; margin: clamp(24px, 3vw, 40px) 0 clamp(32px, 4vw, 48px); padding: 0; display: grid; gap: 18px; max-width: 46ch; }
.points li { position: relative; padding-left: 34px; }
.points li::before { content: ""; position: absolute; left: 4px; top: 0.55em; width: 12px; height: 12px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 0 3px rgba(201, 162, 255, 0.25); }

/* 7. Footer */
.foot { padding: 40px 0 56px; font-size: 0.8em; color: var(--muted); }
.foot-made { margin: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 14px; }
.foot-links a { color: var(--text); }

/* /privacy and /terms */
.doc { padding: clamp(24px, 4vw, 64px) 0 clamp(48px, 6vw, 96px); }
.doc-in { max-width: 1240px; }
.doc h1 { font-size: clamp(40px, 5vw, 72px); font-weight: 800; }
.doc .updated { margin: 14px 0 32px; color: var(--muted); font-size: 0.86em; }
.doc h2 { font-size: clamp(26px, 2.4vw, 36px); font-weight: 800; margin: 1.6em 0 0.5em; }
.doc h3 { font-size: clamp(22px, 1.8vw, 28px); font-weight: 700; margin: 1.3em 0 0.4em; }
.doc p, .doc li { max-width: 62ch; }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin: 0.35em 0; }

/* Phones and narrow windows: the picture's tall drawing, the buttons and boxes full width. */
@media (max-width: 899px) {
  .pic-wide { display: none; }
  .pic-block { max-width: 440px; margin: 0 auto; }
  .pic-tall { display: block; }
  .pic-lead { padding-left: 6.154%; padding-right: 6.154%; }
  .cards { display: none; }
  .jobs-phone { display: block; margin-top: 20px; }
  .buttons { flex-direction: column; }
  .buttons .btn, .data .btn { width: 100%; }
}
@media (max-width: 599px) {
  .nav-how { display: none; }
  .top { padding: 14px 0; }
  .lockup { height: 34px; }
  .nav { gap: 14px; }
}
/* Small fixes 17, part 7: at 320 px the Sign in button sat 18 px past the screen's edge. Up to 360 px the mark, the gaps and
   the button's sides give way so the header fits. */
@media (max-width: 360px) {
  .lockup { height: 28px; }
  .top-in { gap: 10px; }
  .nav { gap: 10px; }
  .nav .btn-small { padding: 0 14px; }
}