/* Hookmoi.
   One stylesheet. No framework, no build step, and no dark mode toggle: the
   interface follows whatever the machine is set to, because somebody planning
   content at six in the morning and again at eleven at night should not have
   to think about it. */

:root {
  color-scheme: light dark;
  --ink: #16150f;
  --ink-soft: #5d5a4e;
  --paper: #faf8f2;
  --card: #ffffff;
  --line: #e3ded1;
  --accent: #1d4f45;
  --accent-soft: #e6efe9;
  --warn: #8a4b22;
  --warn-soft: #f7ece2;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(20, 18, 10, 0.06), 0 8px 24px rgba(20, 18, 10, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece8dc;
    --ink-soft: #a09b8c;
    --paper: #14140f;
    --card: #1c1c16;
    --line: #302f26;
    --accent: #7fbfa8;
    --accent-soft: #1e2a25;
    --warn: #d8a27a;
    --warn-soft: #2b211a;
    --shadow: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }

header.bar {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 5;
}
header.bar .mark { font-weight: 650; letter-spacing: -0.01em; margin-right: 6px; }
header.bar nav { display: flex; gap: 18px; flex-wrap: wrap; }
header.bar nav a { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
header.bar nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
header.bar .spacer { margin-left: auto; }

main { max-width: 980px; margin: 0 auto; padding: 28px 24px 80px; }
main.wide { max-width: 1200px; }

h1 { font-size: 26px; letter-spacing: -0.02em; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 32px 0 12px; letter-spacing: -0.01em; }
h3 { font-size: 15px; margin: 0 0 6px; }
p.lede { color: var(--ink-soft); margin: 0 0 24px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
}
.grid { display: grid; gap: 14px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.figure { font-size: 30px; font-weight: 640; letter-spacing: -0.02em; }
.figure small { display: block; font-size: 13px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
/* Used when a figure is the reason something needs doing today, so that a
   calendar about to run out does not sit at the same weight as a count of
   scripts waiting to be read. */
.figure.warn { border-color: var(--warn); color: var(--warn); }
.figure.warn small { color: var(--warn); opacity: 0.85; }

/* The one thing to do next, given the weight of a decision rather than of a
   statistic. It is the first thing on the page and the only accented block on
   it, because a second accented block would make it a list again. */
.card.next {
  border-color: var(--accent);
  background: var(--accent-soft);
  margin: 4px 0 22px;
}
.card.next .next-heading { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.01em; color: var(--ink); }
.card.next p { margin: 0; }
.card.next .row { margin-top: 14px; }

label { display: block; font-size: 14px; font-weight: 600; margin: 18px 0 6px; }
label .hint { display: block; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }

input, textarea, select {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
textarea { min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
}
button.quiet { background: transparent; color: var(--ink); border-color: var(--line); }
button.small { padding: 5px 10px; font-size: 14px; font-weight: 500; }
button[disabled] { opacity: 0.55; cursor: progress; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }

.tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.tag.plain { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); font-weight: 500; }
.tag.warn { background: var(--warn-soft); color: var(--warn); }

ul.slots { list-style: none; margin: 0; padding: 0; }
ul.slots li {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
ul.slots li:last-child { border-bottom: 0; }
ul.slots .when { width: 92px; flex: none; color: var(--ink-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
ul.slots .what { flex: 1; min-width: 0; }
ul.slots .what a { text-decoration: none; color: inherit; font-weight: 560; }
ul.slots .what .idea { color: var(--ink-soft); font-size: 14px; }

.script { white-space: pre-wrap; font-size: 17px; line-height: 1.6; }
.device {
  border-left: 3px solid var(--accent);
  padding: 8px 0 8px 12px;
  margin: 12px 0;
}
.device .name { font-weight: 620; font-size: 14px; }
.device .line { color: var(--ink-soft); font-size: 14px; font-style: italic; }

.notice { padding: 12px 14px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 15px; margin: 16px 0; }
.notice.warn { background: var(--warn-soft); color: var(--warn); }
.notice:empty { display: none; }

.muted { color: var(--ink-soft); }
.scores { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 0; }
.scores div { font-size: 14px; }
.scores strong { display: block; font-size: 20px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
th { font-size: 13px; color: var(--ink-soft); font-weight: 600; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* A checkbox is not a text field and should not be stretched to the width of
   the form. The rule above sets every input to full width, which is right for
   the twenty text fields in this interface and wrong for the four boxes. */
label input[type="checkbox"],
label input[type="radio"] {
  width: auto;
  margin: 0;
}
.device label,
.row label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
}
.row label input[type="number"],
.row label input[type="date"] {
  width: auto;
}

/* The conversation.
   The director's answers stay plain prose rather than sitting in bubbles,
   because they are often several paragraphs of reasoning and a bubble makes a
   long explanation harder to follow. What the person says does get a bubble:
   their turns are short, and the alternation is what makes a thread readable at
   a glance. That is the same split most chat interfaces settle on, arrived at
   for the same reason rather than by copying.

   The page fills the window and only the middle scrolls, so the composer never
   moves and the last answer is never hidden behind it. */

main.chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 57px);
  max-width: none;
  padding: 0;
  margin: 0;
}

.thread-scroll { flex: 1; overflow-y: auto; scroll-behavior: smooth; }
.thread-inner { max-width: 760px; margin: 0 auto; padding: 28px 24px 40px; }

.chat-empty { padding: 48px 0 24px; }
.chat-empty h1 { font-size: 30px; margin-bottom: 10px; }
.chat-empty p { color: var(--ink-soft); max-width: 60ch; margin: 0 0 24px; }
.openers { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.opener {
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}
.opener:hover { border-color: var(--accent); }

.said { margin: 0 0 26px; }
.said .words { white-space: pre-wrap; line-height: 1.6; }

/* Theirs: a bubble, right, short. */
.said.person { display: flex; justify-content: flex-end; }
.said.person .words {
  background: var(--accent-soft);
  color: var(--ink);
  padding: 11px 15px;
  border-radius: 16px 16px 4px 16px;
  max-width: 78%;
}

/* The director's: prose, full width, no container. */
.said.director .words { font-size: 16px; }
.said .looked {
  font-size: 13px;
  color: var(--ink-faint, var(--ink-soft));
  margin-top: 8px;
  padding-left: 11px;
  border-left: 2px solid var(--line);
}
.said.event {
  color: var(--ink-soft);
  font-size: 14px;
  font-style: italic;
  text-align: center;
  margin: 18px 0;
}

.thinking { color: var(--ink-soft); font-size: 15px; }
.thinking::after {
  content: "";
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .thinking::after { content: "..."; animation: none; } }

.composer { border-top: 1px solid var(--line); background: var(--card); padding: 14px 24px 12px; }
.composer-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.composer-inner textarea {
  flex: 1;
  resize: none;
  max-height: 200px;
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0;
}
.composer-inner button { flex: 0 0 auto; }
.composer-note {
  max-width: 760px;
  margin: 8px auto 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.linky {
  background: none;
  border: 0;
  padding: 0 0 0 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

dialog#memory-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  max-width: 560px;
  width: 92%;
  padding: 22px;
}
dialog#memory-panel::backdrop { background: rgba(0, 0, 0, 0.35); }
.proposal { border-left: 3px solid var(--warn); padding: 10px 0 10px 12px; margin: 10px 0; }
.proposal .level { font-size: 12px; font-weight: 600; color: var(--warn); text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------------------------------------------------------------------------
   The interview.

   Its own screen rather than a page in the app. Somebody answering seven
   questions out loud should have one thing in front of them, so there is no
   navigation, the question is the largest thing on the page, and everything
   else is quiet until it is needed. The rest of the interface is a dashboard
   and looks like one; this is closer to being asked something. */

body.interview {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--accent-soft) 0%, transparent 60%),
    var(--paper);
}

/* Seven segments across the top. Where somebody is, without a number they have
   to read, and it fills rather than counts down. */
.rail { display: flex; gap: 3px; padding: 0; height: 3px; }
.rail span { flex: 1; background: var(--line); transition: background 400ms ease; }
.rail span.done { background: var(--accent); }
.rail span.here { background: var(--accent); opacity: 0.45; }

main.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 46rem;
  margin: 0 auto;
  padding: 6vh 24px 4vh;
  width: 100%;
}

.stage-foot { text-align: center; padding: 0 24px 28px; }
.stage-foot a { color: var(--ink-soft); font-size: 14px; text-decoration: none; }
.stage-foot a:hover { color: var(--ink); }

.count {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

/* The question. Large, with a short measure, because a line somebody has to
   track across the whole screen is harder to read aloud from. */
.question {
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 0 0 16px;
  max-width: 18em;
  text-wrap: balance;
}
.nudge { color: var(--ink-soft); font-size: 17px; line-height: 1.5; max-width: 30em; margin: 0 0 40px; }

/* The control. One circle, which is the only thing to press. */
.mic {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: var(--paper);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 160ms ease, border-radius 220ms ease;
}
.mic:hover { transform: scale(1.03); }
.mic:active { transform: scale(0.98); }
.mic[disabled] { opacity: 0.6; cursor: progress; }
.mic.live { border-radius: 28px; background: var(--warn); }
.mic svg { width: 34px; height: 34px; fill: currentColor; }

/* The ring reacts to what the microphone is actually hearing, rather than
   animating on a timer. A meter that moves when the room is silent is a lie,
   and the thing somebody needs to know here is whether they are being picked
   up at all. */
.mic-ring {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.mic.live .mic-ring { opacity: 0.5; }

.mic-wrap { display: grid; place-items: center; margin-bottom: 18px; }
.timer { font-variant-numeric: tabular-nums; color: var(--ink-soft); font-size: 15px; min-height: 22px; }
.timer strong { color: var(--ink); font-weight: 600; }

.under { display: flex; gap: 18px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.under button {
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 2px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.under button:hover { color: var(--ink); border-bottom-color: var(--line); }

/* What they just said, read back. */
.heard {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 8px;
  max-width: 36em;
  box-shadow: var(--shadow);
  text-align: left;
}
/* The question, above the answer. Set in sentence case rather than the small
   uppercase used for one-word labels: three lines of uppercase is hard to read
   and heavy on a screen that is trying to be calm. */
.heard .label {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.heard .words { font-size: 17px; line-height: 1.55; white-space: pre-wrap; }

.stage-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
/* A note following the buttons needs room, or it reads as part of them. */
.stage-actions + .nudge { margin-top: 26px; margin-bottom: 0; font-size: 15px; }
.stage textarea { min-height: 150px; font-size: 17px; line-height: 1.55; }
.stage label { text-align: left; width: 100%; max-width: 36em; }

/* Arriving. Each question replaces the last rather than the page jumping. */
.enter { animation: rise 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
  .mic, .mic-ring, .rail span { transition: none; }
}

/* ---------------------------------------------------------------------------
   Hookmoi studio skin.

   The product is a content studio rather than an administration screen. The
   shared skin keeps the calm writing surfaces, but gives decisions, calendar
   cards and progress a warmer, more memorable visual language.
 */

:root {
  color-scheme: light;
  --ink: #251b1a;
  --ink-soft: #79625a;
  --paper: #fff7f0;
  --card: #ffffff;
  --line: #f0d8c9;
  --accent: #ff6b2c;
  --accent-strong: #e34d18;
  --accent-soft: #fff0e4;
  --purple: #7542b7;
  --purple-soft: #f3ebff;
  --warn: #c45720;
  --warn-soft: #fff0df;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(68, 34, 20, 0.05), 0 14px 36px rgba(107, 54, 31, 0.08);
}

body {
  background:
    radial-gradient(circle at 88% -12%, color-mix(in srgb, var(--accent-soft) 78%, transparent), transparent 30rem),
    var(--paper);
}

header.bar {
  padding: 12px clamp(16px, 4vw, 48px);
  gap: 18px;
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(16px);
}

header.bar .mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

header.bar .mark::before {
  content: "";
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center, var(--paper) 0 2px, var(--accent) 2px 4px, var(--purple) 4px 6px);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

header.bar nav { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
header.bar nav::-webkit-scrollbar { display: none; }
header.bar nav a { padding: 7px 10px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
header.bar nav a:hover { background: var(--accent-soft); color: var(--accent-strong); }
header.bar nav a[aria-current="page"] { color: var(--accent-strong); background: var(--accent-soft); }

main { max-width: 1080px; padding: clamp(24px, 4vw, 44px) 24px 88px; }
main.wide { max-width: 1320px; }
h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.055em; line-height: 1.05; }
h2 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft); }
p.lede { max-width: 680px; font-size: 17px; line-height: 1.6; }

.card { border-radius: var(--radius); border-color: var(--line); box-shadow: var(--shadow); }
.card.next {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  padding: 28px;
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background:
    radial-gradient(circle at 92% 20%, rgba(238, 91, 37, 0.24) 0 1px, transparent 2px 10px),
    radial-gradient(circle at 92% 20%, transparent 0 48px, rgba(238, 91, 37, 0.13) 49px 51px, transparent 52px 72px, rgba(93, 59, 104, 0.13) 73px 75px, transparent 76px),
    var(--accent-soft);
}
.card.next::after {
  content: "";
  position: absolute;
  right: -54px;
  top: -78px;
  width: 210px;
  height: 210px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 0 24px color-mix(in srgb, var(--purple) 8%, transparent);
  pointer-events: none;
}
.card.next .next-heading { position: relative; z-index: 1; max-width: 650px; font-size: clamp(22px, 3vw, 30px); }
.card.next p, .card.next .row { position: relative; z-index: 1; max-width: 650px; }
.dashboard-section-heading, .calendar-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-top: 34px; }
.dashboard-section-heading h2, .calendar-title { margin: 5px 0 12px; color: var(--ink); text-transform: none; letter-spacing: -0.02em; font-size: 24px; }
.eyebrow { display: block; color: var(--accent-strong); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; }
.text-link { color: var(--accent-strong); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; }
.calendar-toolbar { align-items: center; }
.calendar-toolbar h2 { margin-bottom: 0; }

button { border-radius: 999px; background: var(--accent); border-color: var(--accent); padding: 11px 18px; }
button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button.quiet { background: transparent; border-color: var(--line); }
button.quiet:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.tag { background: var(--accent-soft); color: var(--accent-strong); }
.tag.plain { background: transparent; }
.tag.warn { background: var(--warn-soft); color: var(--warn); }

/* The calendar is a visual board. The existing list markup is preserved for
   the application checks, while the client groups it into week rows. */
.calendar-board { display: grid; gap: 14px; }
.calendar-week { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); gap: 8px; min-width: 980px; }
.calendar-scroll { overflow-x: auto; padding-bottom: 6px; }
.calendar-day { min-height: 190px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--card) 88%, var(--accent-soft)); }
.calendar-day.today { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.calendar-day-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.calendar-day-name { font-size: 12px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; }
.calendar-day-number { font-size: 22px; font-weight: 700; letter-spacing: -0.05em; }
.calendar-day.today .calendar-day-number { color: var(--accent); }
.calendar-day-body { display: grid; gap: 8px; }
.calendar-empty { min-height: 100px; display: grid; place-items: center; color: var(--ink-soft); font-size: 13px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }
.calendar-card { display: block; padding: 11px; border-radius: 11px; background: var(--accent-soft); color: var(--ink); text-decoration: none; border-left: 4px solid var(--accent); box-shadow: 0 4px 12px rgba(107, 54, 31, 0.06); }
.calendar-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(107, 54, 31, 0.12); }
.calendar-card.stage-trust { background: var(--purple-soft); border-left-color: var(--purple); }
.calendar-card.stage-convert { background: var(--warn-soft); border-left-color: var(--warn); }
.calendar-card-title { font-weight: 700; font-size: 14px; line-height: 1.3; }
.calendar-card-job { margin-top: 6px; font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.calendar-card-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
.calendar-card-meta .tag { font-size: 10px; padding: 2px 6px; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.legend-item { display: inline-flex; gap: 7px; align-items: center; color: var(--ink-soft); font-size: 13px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.legend-dot.trust { background: var(--purple); }
.legend-dot.convert { background: var(--warn); }

/* A content card should feel like a studio workspace, not a database record. */
main.slot-page { max-width: 1120px; }
main.slot-page > #why { border-left: 5px solid var(--accent); background: var(--accent-soft); }
main.slot-page > #script { padding: clamp(22px, 4vw, 42px); }
main.slot-page > #script h3:first-child { font-size: clamp(22px, 3vw, 32px); color: var(--accent-strong); }
main.slot-page > #script .script { max-width: 700px; font-size: clamp(18px, 2vw, 22px); line-height: 1.7; }
main.slot-page > #review { border-left: 5px solid var(--purple); background: var(--purple-soft); }

/* Long setup screens are still serious work, but they should not feel like a
   sequence of identical admin forms. */
main[data-page="brain"], body[data-page="brain"] main { max-width: 1120px; }
body[data-page="sign-in"], body[data-page="sign-up"] { min-height: 100vh; display: grid; place-items: center; }
body[data-page="sign-in"] main, body[data-page="sign-up"] main { width: min(100% - 32px, 560px); padding: 38px 0; margin: auto; }
.auth-brand { display: inline-flex; align-items: center; gap: 11px; margin-bottom: 28px; font-size: 20px; letter-spacing: -0.04em; }
.auth-mark { width: 42px; height: 42px; display: inline-block; border-radius: 50%; background: repeating-radial-gradient(circle, var(--paper) 0 3px, var(--accent) 3px 6px, var(--purple) 6px 9px); box-shadow: 0 0 0 7px var(--accent-soft); }

@media (max-width: 760px) {
  header.bar { align-items: flex-start; flex-wrap: wrap; }
  header.bar nav:first-of-type { order: 3; flex-basis: 100%; }
  header.bar .spacer { display: none; }
  header.bar nav:last-child { margin-left: auto; }
  main { padding-left: 16px; padding-right: 16px; }
  .calendar-scroll { margin-right: -16px; padding-right: 16px; }
  .calendar-week { min-width: 920px; }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
   Local visual preview. This is intentionally richer than the production
   screens because it is a design surface for the future dashboard direction.
 */
.preview-page { min-height: 100vh; }
.preview-bar { position: sticky; }
.preview-badge { padding: 5px 10px; border-radius: 999px; background: var(--purple-soft); color: var(--purple); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.preview-account { display: inline-flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 14px; white-space: nowrap; }
.preview-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: white; font-weight: 800; }
.preview-shell { max-width: 1440px; }
.preview-welcome { display: flex; justify-content: space-between; align-items: center; gap: 40px; min-height: 220px; padding: 28px 0 12px; }
.preview-welcome h1 { max-width: 700px; margin: 10px 0 14px; }
.preview-orbit { width: 230px; height: 230px; flex: none; display: grid; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle, var(--paper) 0 7px, var(--accent) 7px 12px, var(--purple) 12px 17px); box-shadow: 0 0 0 14px var(--accent-soft), 0 0 0 29px color-mix(in srgb, var(--purple) 10%, transparent); transform: rotate(-12deg); }
.preview-orbit span { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); border: 9px solid var(--accent); box-shadow: 0 0 0 8px var(--purple); }
.preview-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 0.8fr); gap: 18px; align-items: start; }
.preview-main, .preview-side { display: grid; gap: 18px; }
.preview-next-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px; background: linear-gradient(135deg, var(--accent-soft), var(--card)); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.preview-next-card h2, .preview-detail h2, .preview-audit h2, .preview-side-note h2 { margin: 8px 0 9px; color: var(--ink); text-transform: none; letter-spacing: -0.035em; font-size: 24px; line-height: 1.1; }
.preview-next-card p { max-width: 580px; margin: 0; color: var(--ink-soft); }
.preview-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.preview-stat { display: grid; gap: 2px; padding: 16px; }
.preview-stat strong { font-size: 30px; letter-spacing: -0.06em; color: var(--accent-strong); }
.preview-stat span { color: var(--ink-soft); font-size: 12px; line-height: 1.3; }
.preview-stat-audit { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, var(--line)); }
.preview-calendar { padding: 20px; }
.preview-section-head { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 18px; }
.preview-section-head h2 { margin: 6px 0 0; color: var(--ink); text-transform: none; letter-spacing: -0.035em; font-size: 24px; }
.preview-calendar-scroll { overflow-x: auto; padding-bottom: 5px; }
.preview-board { display: grid; grid-template-columns: repeat(7, minmax(145px, 1fr)); gap: 9px; min-width: 1040px; }
.preview-slot { min-height: 178px; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 13px; border: 1px solid var(--line); border-top: 5px solid var(--accent); border-radius: 13px; background: var(--accent-soft); color: var(--ink); text-align: left; cursor: pointer; }
.preview-slot:hover, .preview-slot:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 18px rgba(107, 54, 31, 0.13); outline: none; }
.preview-slot.stage-trust { border-top-color: var(--purple); background: var(--purple-soft); }
.preview-slot.stage-convert { border-top-color: var(--warn); background: var(--warn-soft); }
.preview-slot-date { color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.preview-slot strong { font-size: 16px; line-height: 1.24; letter-spacing: -0.025em; }
.preview-slot-route { margin-top: auto; color: var(--accent-strong); font-size: 12px; font-weight: 700; }
.preview-slot-status { color: var(--ink-soft); font-size: 11px; }
.preview-detail { min-height: 480px; padding: 24px; background: var(--card); }
.preview-detail h3, .preview-audit h3, .preview-side-note h3 { margin-top: 22px; }
.preview-detail-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 22px; }
.preview-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.preview-detail-grid > div { padding: 12px; border-radius: 11px; background: var(--accent-soft); }
.detail-label { display: block; margin-bottom: 5px; color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.preview-detail-grid strong { display: block; font-size: 13px; line-height: 1.35; }
.preview-cta { padding: 12px 14px; border-left: 4px solid var(--accent); background: var(--accent-soft); color: var(--ink); }
.preview-detail-button { width: 100%; margin-top: 12px; }
.preview-audit { background: var(--purple-soft); border-color: color-mix(in srgb, var(--purple) 25%, var(--line)); }
.preview-audit p, .preview-side-note p { color: var(--ink-soft); }
.preview-side-note { background: var(--ink); color: var(--paper); border: 0; }
.preview-side-note h2 { color: var(--paper); }
.preview-side-note .eyebrow, .preview-side-note .text-link { color: #ffaf8e; }

@media (max-width: 900px) {
  .preview-layout { grid-template-columns: 1fr; }
  .preview-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-detail { grid-row: span 2; }
}

@media (max-width: 680px) {
  .preview-welcome { min-height: 0; padding-top: 28px; }
  .preview-orbit { width: 120px; height: 120px; }
  .preview-orbit span { width: 22px; height: 22px; border-width: 6px; box-shadow: 0 0 0 5px var(--purple); }
  .preview-next-card, .preview-section-head { align-items: flex-start; flex-direction: column; }
  .preview-stat-row { grid-template-columns: repeat(2, 1fr); }
  .preview-side { grid-template-columns: 1fr; }
  .preview-detail { grid-row: auto; }
}

/* ---------------------------------------------------------------------------
   The sales page.

   The one screen here written for somebody who has never signed in, and the
   reason it lives in this stylesheet rather than carrying its own is that the
   promise a sales page makes is partly visual. Somebody who signs up after
   reading it should recognise the thing they land in. Sharing the skin is what
   makes that true without anybody having to remember to keep two palettes in
   step.

   Nothing below invents a colour, a radius or a shadow. Every value is either
   one of the studio skin's custom properties or a size chosen for a page that
   is read once at arm's length rather than worked in daily. The type runs
   larger here for the same reason: a dashboard is scanned by somebody who
   already knows what they are looking at, and this is read by somebody
   deciding whether to bother.
 */

body.landing { padding-bottom: 0; }

.landing section { padding: clamp(52px, 7vw, 104px) 0; }
.landing section + section { border-top: 1px solid var(--line); }
.landing .wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.landing .wrap.narrow { max-width: 760px; }

/* Links that behave as buttons. The skin styles the `button` element and there
   is no anchor equivalent, because until now nothing in the product needed a
   link to look like the primary action. */
.landing .button {
  display: inline-block;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--paper);
  text-decoration: none;
  font-size: 16px;
}
.landing .button:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.landing .button.quiet { background: transparent; border-color: var(--line); color: var(--ink); }
.landing .button.quiet:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.landing .button.small { padding: 9px 16px; font-size: 14px; }

.landing header.bar .button { margin-left: 4px; }
/* The application's bar scrolls its navigation sideways, which suits nine
   working screens and not a page where a link running off the edge reads as a
   layout fault. */
.landing header.bar nav { flex-wrap: wrap; overflow: visible; }

/* On a phone the same navigation wraps onto three rows of a sticky bar, which
   costs a quarter of the screen for links to sections the reader is going to
   scroll past anyway. The mark and the one action are enough there. */
@media (max-width: 700px) {
  .landing header.bar nav { display: none; }
  .landing header.bar .spacer { display: block; margin-left: auto; }
}

/* The eyebrow and heading pairing the dashboard already uses for a section
   title, at the size a page like this needs. */
.landing .section-head { max-width: 680px; margin-bottom: clamp(28px, 4vw, 44px); }
.landing .section-head h2 {
  margin: 8px 0 0;
  color: var(--ink);
  text-transform: none;
  letter-spacing: -0.04em;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.08;
}
.landing .section-head p { margin: 14px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.6; }

.landing .card h3 { font-size: 20px; letter-spacing: -0.03em; margin: 0 0 9px; line-height: 1.25; }
.landing .card p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.landing .card { padding: clamp(20px, 2.4vw, 26px); }
.landing .grid { gap: 16px; }
.landing .grid.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

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

.landing-hero { padding-top: clamp(44px, 6vw, 84px); position: relative; overflow: hidden; }

/* The moving background, behind everything and reachable by nothing. It is
   decoration with no meaning, so it is hidden from assistive technology and
   cannot take a click. Sized by the script rather than by the stylesheet,
   because a canvas stretched by CSS draws blurred. */
.landing-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.landing-hero-inner { position: relative; z-index: 1; }
.landing-hero-inner { display: flex; align-items: center; gap: clamp(28px, 5vw, 72px); }
.landing-hero h1 {
  font-size: clamp(38px, 5.6vw, 66px);
  margin: 12px 0 0;
  max-width: 15ch;
  text-wrap: balance;
}
.landing-hero .lede { margin: 22px 0 0; max-width: 52ch; font-size: clamp(17px, 1.4vw, 20px); }
.landing-hero .row { margin-top: 30px; gap: 12px; }
.landing-note { margin: 18px 0 0; color: var(--ink-soft); font-size: 14.5px; max-width: 46ch; }

/* The mark at the size it can actually be looked at. The rings are the same
   figure as the one in the header and on the sign-in screen, drawn by the same
   repeating gradient rather than as a picture, so it stays sharp and follows
   the accent if the accent ever changes. */
.landing-orbit {
  flex: none;
  width: clamp(150px, 20vw, 250px);
  height: clamp(150px, 20vw, 250px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, var(--paper) 0 7px, var(--accent) 7px 12px, var(--purple) 12px 17px);
  box-shadow: 0 0 0 14px var(--accent-soft), 0 0 0 29px color-mix(in srgb, var(--purple) 10%, transparent);
  transform: rotate(-12deg);
}
.landing-orbit span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper);
  border: 9px solid var(--accent);
  box-shadow: 0 0 0 8px var(--purple);
}

/* ------------------------------------------------------------------ chain */

.landing-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.landing-chain li {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 16px;
  align-items: baseline;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--shadow);
}
.landing-chain .step {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.landing-chain strong { display: block; font-size: 16.5px; letter-spacing: -0.02em; }
.landing-chain span.what { display: block; margin-top: 4px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
/* The last step is the loop closing rather than another instruction, so it is
   drawn as a return rather than as a step of the same weight. */
.landing-chain li.closes { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: none; }

.landing .calendar-legend { margin-top: 20px; }

/* ------------------------------------------------------------------ rules */

/* Alternating accent and purple, the same two colours the slot page uses to
   tell a note about the piece from a note about the review. They are counted
   inside their own container so that adding a heading above them cannot flip
   which colour the list starts on. */
.landing-rule { padding: 16px 20px 16px 18px; margin: 0 0 14px; border-left: 5px solid var(--accent); background: var(--accent-soft); border-radius: 0 12px 12px 0; }
.landing-rules .landing-rule:nth-child(even) { border-left-color: var(--purple); background: var(--purple-soft); }
.landing-rule h3 { margin: 0 0 6px; font-size: 19px; letter-spacing: -0.03em; }
.landing-rule p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* -------------------------------------------------------------------- fit */

.landing-fit { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.landing-fit ul { margin: 14px 0 0; padding-left: 18px; display: grid; gap: 9px; color: var(--ink-soft); line-height: 1.55; }
.landing-fit .card.yes { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }

/* ------------------------------------------------------------------ price */

.landing-price { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: clamp(24px, 4vw, 48px); align-items: start; padding: clamp(26px, 4vw, 44px); }
.landing-price .amount { font-size: clamp(52px, 7vw, 76px); font-weight: 800; letter-spacing: -0.06em; line-height: 1; color: var(--accent-strong); }
.landing-price .amount span { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-soft); margin-left: 8px; }
.landing-price .included { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.landing-price .included li { padding-left: 24px; position: relative; color: var(--ink-soft); line-height: 1.5; }
.landing-price .included li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 12px; height: 2px; border-radius: 2px; background: var(--accent); }

/* -------------------------------------------------------------- questions */

.landing-qa { border-top: 1px solid var(--line); }
.landing-qa > div { display: grid; grid-template-columns: minmax(210px, 1fr) 2fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.landing-qa h3 { margin: 0; font-size: 17px; letter-spacing: -0.02em; }
.landing-qa p { margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* ------------------------------------------------------------------ close */

.landing-close { background: var(--ink); color: var(--paper); border: 0; padding: clamp(32px, 5vw, 60px); border-radius: var(--radius); }
.landing-close h2 { margin: 10px 0 0; color: var(--paper); text-transform: none; letter-spacing: -0.045em; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.08; max-width: 18ch; }
.landing-close .eyebrow { color: #ffaf8e; }
.landing-close p { margin: 18px 0 0; color: color-mix(in srgb, var(--paper) 86%, transparent); max-width: 52ch; line-height: 1.6; }
.landing-close .button.quiet { border-color: color-mix(in srgb, var(--paper) 30%, transparent); color: var(--paper); }
.landing-close .button.quiet:hover { background: color-mix(in srgb, var(--paper) 12%, transparent); border-color: var(--paper); color: var(--paper); }

.landing-foot { padding: 30px 0 48px; color: var(--ink-soft); font-size: 14px; }
.landing-foot .wrap { display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap; }
.landing-foot a { color: var(--ink-soft); text-decoration: none; }
.landing-foot a:hover { color: var(--accent-strong); }
.landing-foot .spacer { margin-left: auto; }

@media (max-width: 860px) {
  .landing-hero-inner { flex-direction: column-reverse; align-items: flex-start; }
  .landing-orbit { align-self: flex-end; margin-bottom: 4px; }
}
@media (max-width: 640px) {
  .landing-qa > div { grid-template-columns: 1fr; gap: 8px; }
  .landing-chain li { grid-template-columns: 1fr; gap: 4px; }
}

/* The sales page's exhibits.

   The screenshots are not screenshots. Every block below is drawn with the
   same classes the running product uses, so what somebody looks at before
   signing up is the real interface rather than a picture of an older version
   of it. A calendar card here is `.calendar-card` with a real stage class on
   it; a device is the `.device` block from the script workspace. Change the
   skin and these change with it, which is the failure mode that makes most
   marketing screenshots quietly wrong within a month.

   The content inside them is written for the page and says so on each exhibit.
   Given that the product's own argument is that it invents nothing, an example
   that could be mistaken for somebody's real account would be a poor way to
   open the relationship. */

.landing-exhibit { margin: 0 0 20px; }
.landing-exhibit:last-child { margin-bottom: 0; }
.landing-exhibit-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.landing-exhibit-head h3 { margin: 0; font-size: 17px; letter-spacing: -0.02em; }
.landing-exhibit-head span { color: var(--ink-soft); font-size: 13.5px; }

/* The frame. A soft inset so the interface reads as a thing being shown rather
   than as more page. */
.landing-frame {
  background: color-mix(in srgb, var(--card) 70%, var(--accent-soft));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(14px, 2.2vw, 22px);
}

/* A short week rather than the full seven days. The product's own calendar
   scrolls sideways at 980px, which is right for planning and wrong for a page
   somebody is reading on a phone, so the days wrap here instead. */
.landing-week { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 9px; }
.landing-week .calendar-day { min-height: 0; }

.landing-frame .grid.four { gap: 10px; }
.landing-frame .card.figure { padding: 15px; }

/* The slot and the script, side by side where there is room, because the point
   being made is that the job on the left produced the lines on the right. */
.landing-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
@media (max-width: 820px) { .landing-pair { grid-template-columns: 1fr; } }
.landing-pair .card { height: 100%; }
.landing-pair .job { border-left: 5px solid var(--accent); background: var(--accent-soft); }
.landing-pair .job .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.landing-pair .script { font-size: 15.5px; line-height: 1.65; white-space: normal; }
.landing-pair .device { margin: 14px 0 0; }

/* ------------------------------------------------------------------- proof */

.landing-proof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 0.7fr); gap: clamp(22px, 4vw, 44px); align-items: start; }
@media (max-width: 820px) { .landing-proof { grid-template-columns: 1fr; } }
.landing-proof p { color: var(--ink-soft); line-height: 1.65; }
.landing-proof p + p { margin-top: 14px; }
.landing-proof .facts { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.landing-proof .facts li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
/* The third fact is words rather than a figure, so the size has to give way
   rather than run out of the card. */
.landing-proof .facts strong { display: block; font-size: clamp(22px, 2.3vw, 30px); font-weight: 800; letter-spacing: -0.045em; color: var(--accent-strong); line-height: 1.08; overflow-wrap: break-word; }
.landing-proof .facts span { display: block; margin-top: 5px; color: var(--ink-soft); font-size: 14px; line-height: 1.45; }

/* ---------------------------------------------------------------------------
   The sales page, given some depth.

   The first version of this page was flat: one cream ground from the header to
   the footer, white cards on it, and a hairline rule between sections. Read as
   a document rather than as a page somebody designed, and on a page whose job
   is to hold a stranger for two thousand words that costs more than it saves.

   What is below gives the page a rhythm of grounds instead: pale, white,
   tinted, then a dark block, and back. A reader scrolling fast still feels the
   sections change even when they are not reading the headings, and the two
   dark blocks are where the page says the things it most wants remembered, the
   rules it works under and the invitation to start.

   Every colour here is mixed from the skin's own four: accent, accent-strong,
   purple and ink. Nothing new was introduced, because a gradient built from
   colours the product does not otherwise use is how a marketing page starts
   looking like it belongs to a different company.
 */

:root {
  --deep: #241310;
  --deep-2: #33152b;
  --spectrum: linear-gradient(103deg, var(--accent-strong) 0%, var(--accent) 46%, var(--purple) 100%);
  --wash: linear-gradient(180deg, #fffaf6 0%, #ffeee2 100%);
  --glow-warm: radial-gradient(60% 70% at 72% 34%, rgba(255, 107, 44, 0.20) 0%, transparent 70%);
  --glow-cool: radial-gradient(52% 62% at 18% 78%, rgba(117, 66, 183, 0.14) 0%, transparent 72%);
}

/* The grounds. The blanket hairline between sections goes, because a change of
   ground already separates them and a rule on top of it reads as indecision. */
.landing section + section { border-top: 0; }

.landing .ground-pale { background: var(--wash); }
.landing .ground-white { background: #ffffff; }
.landing .ground-tint {
  background:
    var(--glow-cool),
    var(--glow-warm),
    linear-gradient(180deg, #fff3ea 0%, #ffe9db 100%);
}

/* The dark blocks. Warm at the top left, drifting purple at the bottom right,
   so the two brand colours are both present without either being a flat fill.
   The grain is a pair of very low-opacity radial sweeps rather than an image,
   which keeps it to a few bytes and lets it follow the colours if they move. */
.landing .ground-dark {
  position: relative;
  color: #f7ece4;
  background:
    radial-gradient(70% 90% at 12% 8%, rgba(255, 107, 44, 0.22) 0%, transparent 62%),
    radial-gradient(64% 80% at 88% 96%, rgba(117, 66, 183, 0.32) 0%, transparent 66%),
    linear-gradient(152deg, var(--deep) 0%, var(--deep-2) 100%);
}
.landing .ground-dark .section-head h2,
.landing .ground-dark h3 { color: #fdf6f1; }
.landing .ground-dark .section-head p,
.landing .ground-dark p { color: rgba(247, 236, 228, 0.76); }
.landing .ground-dark .eyebrow { color: #ffae86; }

/* A hairline of the brand gradient where a dark block meets what is above it,
   so the join is a deliberate edge rather than a colour simply stopping. */
.landing .ground-dark::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--spectrum);
}

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

.landing-hero {
  background:
    var(--glow-cool),
    radial-gradient(52% 58% at 78% 30%, rgba(255, 107, 44, 0.17) 0%, transparent 68%),
    linear-gradient(176deg, #fffcf9 0%, #ffeade 62%, #ffe3d4 100%);
}

/* The mark sits in its own light. Behind the canvas rings and behind the
   orbit, wide and soft enough that it reads as the page being lit from that
   corner rather than as a circle with a halo drawn on it. */
.landing-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -6%;
  top: 2%;
  width: min(620px, 52vw);
  height: min(620px, 52vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 74, 0.22) 0%, rgba(117, 66, 183, 0.09) 46%, transparent 70%);
  filter: blur(18px);
  pointer-events: none;
}
.landing-field { z-index: 1; }
.landing-hero-inner { z-index: 2; }

/* The first line of the headline carries the gradient, and the rest stays ink.
   All of it in gradient would be harder to read at this size and would take
   the emphasis off the clause that is actually doing the selling. */
.landing-hero h1 .lit {
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Painted in ink first, so a browser that cannot clip a background to text
     shows a readable headline rather than nothing at all. */
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .landing-hero h1 .lit { color: var(--accent-strong); -webkit-text-fill-color: currentColor; }
}

/* -------------------------------------------------------------- the cards */

/* Lifted further off the ground than the working screens, which sit flat
   because a dashboard of floating cards is exhausting to work in. A page read
   once can afford the depth. */
.landing .card {
  box-shadow: 0 1px 2px rgba(68, 34, 20, 0.05), 0 18px 44px rgba(107, 54, 31, 0.10);
  background: linear-gradient(168deg, #ffffff 0%, #fffaf6 100%);
}
.landing .ground-white .card { background: linear-gradient(168deg, #fffaf6 0%, #fff3eb 100%); }

/* A gradient edge along the top, drawn on a pseudo-element so it follows the
   card's own corner radius. */
.landing .grid .card,
.landing-fit > .card {
  position: relative;
  overflow: hidden;
}
.landing .grid .card::before,
.landing-fit > .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--spectrum);
  opacity: 0.85;
}

/* --------------------------------------------------------------- the chain */

/* A spine running down the numbers, so eight rows read as one sequence rather
   than as eight cards that happen to be stacked. */
.landing-chain { position: relative; }
.landing-chain::before {
  content: "";
  position: absolute;
  left: 30px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--purple) 78%, transparent 100%);
  opacity: 0.45;
}
.landing-chain li { position: relative; background: linear-gradient(168deg, #ffffff 0%, #fffaf6 100%); }
.landing-chain li.closes {
  background: linear-gradient(135deg, var(--accent-soft) 0%, #ffe2d1 100%);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
}

/* --------------------------------------------------------------- the rules */

/* On the dark ground the soft tints of the light version would disappear, so
   each rule becomes a translucent panel with its own coloured edge. */
.landing .ground-dark .landing-rule {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: var(--accent);
  border-radius: 0 14px 14px 0;
  padding: 18px 22px 18px 20px;
  backdrop-filter: blur(2px);
}
.landing .ground-dark .landing-rules .landing-rule:nth-child(even) {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: #b98ae8;
}

/* ---------------------------------------------------------------- the price */

.landing .card.landing-price {
  background:
    radial-gradient(80% 120% at 100% 0%, rgba(117, 66, 183, 0.10) 0%, transparent 60%),
    linear-gradient(150deg, #ffffff 0%, #fff4ec 58%, #ffe8da 100%);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
  box-shadow: 0 2px 6px rgba(139, 60, 20, 0.08), 0 28px 64px rgba(107, 54, 31, 0.14);
}
.landing-price .amount {
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@supports not (background-clip: text) {
  .landing-price .amount { color: var(--accent-strong); -webkit-text-fill-color: currentColor; }
}
/* The suffix is not part of the figure and should not be part of its gradient. */
.landing-price .amount span { -webkit-text-fill-color: var(--ink-soft); color: var(--ink-soft); }

/* ---------------------------------------------------------------- the proof */

.landing-proof .facts li {
  background: linear-gradient(150deg, #ffffff 0%, #fff4ec 100%);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 1px 2px rgba(68, 34, 20, 0.05), 0 16px 36px rgba(107, 54, 31, 0.10);
}
.landing-proof .facts strong {
  background: var(--spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not (background-clip: text) {
  .landing-proof .facts strong { -webkit-text-fill-color: currentColor; }
}

/* ---------------------------------------------------------------- the close */

.landing .card.landing-close {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 90% at 88% 10%, rgba(255, 107, 44, 0.30) 0%, transparent 60%),
    radial-gradient(60% 90% at 6% 100%, rgba(117, 66, 183, 0.36) 0%, transparent 62%),
    linear-gradient(140deg, var(--deep) 0%, var(--deep-2) 100%);
}
/* The mark again, drawn large and mostly off the edge, so the page finishes on
   the same figure it opened with. */
.landing-close::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -160px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 11px, rgba(255, 174, 134, 0.16) 11px 13px);
  pointer-events: none;
}
.landing-close > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- the frame */

.landing-frame {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 240, 228, 0.9) 100%);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 18px 44px rgba(107, 54, 31, 0.08);
}

.landing-foot { background: var(--wash); }

/* ---------------------------------------------------------------------------
   The spiral, and what feeds it.
 */

/* --------------------------------------------------------------- the feeds */

/* Where the Brand Brain comes from, said as a picture rather than a sentence.
   Two sources, an arrow, and the mark they arrive at. */
.landing-feeds {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.feed {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: linear-gradient(150deg, #ffffff 0%, #fff2e8 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  box-shadow: 0 1px 2px rgba(68, 34, 20, 0.05), 0 8px 18px rgba(107, 54, 31, 0.08);
}
.feed svg { width: 21px; height: 21px; fill: none; stroke: var(--accent-strong); stroke-width: 1.7; }
.feed svg .solid { fill: var(--accent-strong); stroke: none; }

.feed-arrow { flex: none; display: grid; place-items: center; }
.feed-arrow svg { width: 46px; height: 18px; fill: none; stroke: var(--purple); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }

/* The mark at the end of the arrow, drawn with the same repeating gradient as
   the header and the sign-in screen so the thing being pointed at is
   recognisably the same figure as the one turning above it. */
.feed-mark {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, var(--paper) 0 3px, var(--accent) 3px 6px, var(--purple) 6px 9px);
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.feed-note {
  flex: 1 1 260px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
  min-width: 220px;
}

@media (max-width: 560px) {
  .landing-feeds { gap: 10px; }
  .feed-note { flex-basis: 100%; margin-top: 4px; }
}

/* The mark on the signed-out screens is a link home now, and should not pick
   up the underline and the accent colour every other anchor gets. */
a.auth-brand { color: var(--ink); text-decoration: none; }
a.auth-brand:hover strong { color: var(--accent-strong); }
.landing a.mark { color: var(--ink); text-decoration: none; }
.landing a.mark:hover { color: var(--accent-strong); }