/* Grithm waitlist.
   Colours follow grithm-colour-palette.md (15 Oct 2026). Change them here only,
   using the semantic roles below, never raw hex further down this file. */
:root {
  /* Light theme */
  --background: #fbfafe;
  --surface: #ffffff;
  --surface-raised: #f6f4fd;
  --border: #d9d4ec;            /* dividers only */
  --control-outline: #8b84a8;   /* inputs */
  --text: #1a1530;
  --text-muted: #5e5a73;
  --primary: #4222b0;           /* button fill */
  --primary-hover: #36198f;
  --on-primary: #ffffff;
  --link: #4222b0;
  --accent: #ffb84d;            /* amber: fills and rules only on light */
  --on-accent: #150d3d;
  --accent-text: #7a4a00;       /* amber as text on light */
  --ai-zone: #e9e5fb;
  --danger: #b23a30;
  --clip: #2b1a7a;              /* demo video thumbnail */
  --clip-ink: #f4f2ff;

  /* "Your notes stay yours" band: always the dark ink-violet world */
  --band: #150d3d;
  --band-text: #f4f2ff;
  --band-muted: #b4aed0;
  --band-ai-zone: #2b1a7a;
  --band-mine: #1f1257;
  --band-border: #3a2e7a;

  --shadow: 0 1px 2px rgb(26 21 48 / .06), 0 14px 34px -14px rgb(26 21 48 / .24);

  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(1rem, 4vw, 3rem);
  --demo-loop: 11s;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-sheet: cubic-bezier(.32, .72, 0, 1);   /* iOS sheet curve */
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #150d3d;
    --surface: #1f1257;
    --surface-raised: #2b1a7a;
    --border: #3a2e7a;
    --control-outline: #7f72c2;
    --text: #f4f2ff;
    --text-muted: #b4aed0;
    --primary: #5b3fd6;
    --primary-hover: #6b51e0;
    --on-primary: #ffffff;
    --link: #a99bf0;
    --accent: #ffb84d;
    --on-accent: #150d3d;
    --accent-text: #ffb84d;
    --ai-zone: #2b1a7a;
    --danger: #f08a80;
    --clip: #2b1a7a;
    --clip-ink: #f4f2ff;

    --band: #1f1257;
    --band-ai-zone: #2b1a7a;
    --band-mine: #150d3d;

    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 18px 40px -16px rgb(0 0 0 / .65);
  }
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/playfair-display-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/playfair-display-italic-latin.woff2) format("woff2");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 400 1.0625rem/1.55 var(--sans);
  caret-color: var(--link);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--primary); color: var(--on-primary); }

h1, h2, h3 { font-family: var(--serif); font-weight: 700; color: var(--text); text-wrap: balance; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }

.visually-hidden, .hp {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 10;
  background: var(--primary); color: var(--on-primary); padding: .75rem 1rem; border-radius: 6px;
}
.skip:focus { top: .75rem; }

/* The icon's three amber rules, reused as the "your notes" marker. */
.rules { display: inline-block; width: 14px; height: 11px; flex: none; color: var(--accent); }
.rules rect { fill: currentColor; }

/* ---------- Masthead ---------- */
.masthead {
  max-width: 72rem; margin: 0 auto;
  padding: 1rem var(--gutter) 0;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 44px;
  color: var(--text); text-decoration: none;
  font: 700 1.3rem/1 var(--serif);
}

/* ---------- Hero ---------- */
.hero {
  max-width: 72rem; margin: 0 auto;
  padding: 1.25rem var(--gutter) 3rem;
  display: grid; gap: 3rem;
}
h1 {
  font-size: clamp(2.05rem, 5.4vw + .6rem, 4.1rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 15ch;
}
.lede {
  margin-top: 1rem;
  font-size: clamp(1.0625rem, .5vw + .95rem, 1.25rem);
  color: var(--text-muted);
  max-width: 34rem;
}

/* ---------- Form ---------- */
.join { margin-top: 1.5rem; max-width: 34rem; }
.join-label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .4rem; }
.join-row { display: flex; flex-direction: column; gap: .6rem; }
.join input[type="email"] {
  min-height: 52px; width: 100%;
  padding: .75rem 1rem;
  font: inherit; font-size: 1.0625rem; color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--control-outline); border-radius: 12px;
}
.join input[type="email"]::placeholder { color: var(--text-muted); opacity: 1; }
.join input[type="email"]:focus-visible { outline-offset: 1px; border-color: var(--link); }
.join input[aria-invalid="true"] { border-color: var(--danger); }
.join button {
  min-height: 52px; padding: .75rem 1.4rem;
  font: 600 1.0625rem/1.2 var(--sans);
  color: var(--on-primary); background: var(--primary);
  border: 0; border-radius: 12px; cursor: pointer;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.join button:hover { background: var(--primary-hover); }
/* Feedback on press, not release. */
.join button:active { transform: scale(.97); transition-duration: .1s; }
.join button:disabled { cursor: progress; opacity: .75; transform: none; }
.join-note { margin-top: .75rem; font-size: .95rem; color: var(--text-muted); }
.join-status:empty { display: none; }
.join-status { margin-top: .75rem; font-weight: 600; }
.join-status:focus { outline: none; }
.join-status[data-state="error"] { color: var(--danger); }
.join-status[data-state="success"] {
  display: flex; gap: .7rem; align-items: flex-start;
  color: var(--text);
  font: 600 1.25rem/1.35 var(--serif);
  animation: arrive .5s var(--ease-out) both;
}
/* Saved = amber check (palette rule 8). */
.join-status[data-state="success"]::before {
  content: ""; flex: none; width: 1.6rem; height: 1.6rem; margin-top: .05rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FFB84D'/%3E%3Cpath d='M7 12.4l3.2 3.1L17 8.8' fill='none' stroke='%23150D3D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes arrive { from { opacity: 0; transform: translateY(4px); } }
.join.is-done .join-label, .join.is-done .join-row, .join.is-done .join-note { display: none; }

@media (min-width: 30rem) {
  .join-row { flex-direction: row; }
  .join button { flex: none; }
}

/* ---------- Demo animation ---------- */
.demo { margin: 0; justify-self: center; width: 100%; max-width: 22rem; }
/* The note sits in normal flow and sets the stage height; the video card and
   share sheet are laid over it during the animation. */
.stage { position: relative; }
.demo figcaption { margin-top: .9rem; font-size: .9rem; color: var(--text-muted); text-align: center; }

.clip, .sheet { position: absolute; left: 0; right: 0; z-index: 1; }

.clip {
  top: 0; padding: .75rem; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow);
}
.clip-thumb {
  position: relative; height: 9rem; border-radius: 12px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgb(255 255 255 / .05) 14px 28px),
    var(--clip);
  display: grid; place-items: center;
}
.clip-play circle { fill: rgb(255 255 255 / .16); }
.clip-play path { fill: var(--clip-ink); }
.clip-time {
  position: absolute; right: .5rem; bottom: .5rem;
  font: 600 .75rem/1 var(--sans); color: var(--clip-ink);
  background: rgb(0 0 0 / .35); padding: .25rem .4rem; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.clip-by { margin-top: .6rem; font-size: .85rem; color: var(--text-muted); }
.clip-title { font: 700 1.1rem/1.25 var(--serif); }

.sheet {
  bottom: 0; padding: 1rem 1rem 1.1rem; border-radius: 18px;
  background: var(--surface-raised); box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.sheet-title { font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.sheet-row { display: flex; gap: 1rem; margin-top: .7rem; }
.sheet-app { width: 44px; height: 44px; border-radius: 11px; background: var(--border); flex: none; }
.sheet-grithm { background: none; }
.sheet-grithm img { border-radius: 11px; }
.sheet-label { margin-top: .35rem; margin-left: 60px; font-size: .75rem; color: var(--text-muted); }

.note {
  position: relative; padding: .6rem; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
/* AI summary sits on the AI zone; your note sits on plain surface with the amber rule. */
.note-ai { background: var(--ai-zone); border-radius: 12px; padding: 1rem 1rem .9rem; }
.note-ai-label, .note-mine-label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .75rem; font-weight: 600; color: var(--text-muted);
}
.note-title { margin-top: .35rem; font: 700 1.25rem/1.25 var(--serif); }
.note-points { margin-top: .6rem; display: grid; gap: .4rem; }
.note-points li { position: relative; padding-left: 1rem; font-size: .95rem; line-height: 1.4; }
.note-points li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .35rem; height: .35rem; border-radius: 50%; background: var(--text-muted);
}
.note-source {
  margin-top: .8rem; display: flex; align-items: center; gap: .35rem;
  font-size: .85rem; color: var(--text-muted);
}
.note-source span { color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.note-source svg { fill: none; stroke: var(--link); stroke-width: 1.6; stroke-linecap: round; }
.note-mine { margin: .5rem .4rem .3rem; padding: .55rem 0 .2rem 1rem; border-left: 1px solid var(--accent); }
.note-mine-text { margin-top: .15rem; font: italic 500 1.1rem/1.35 var(--serif); color: var(--text); }

/* Static by default (this is the reduced-motion view): only the finished note shows. */
.clip, .sheet { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .clip, .sheet { display: block; }
  .clip  { animation: clip  var(--demo-loop) var(--ease-out) infinite both; }
  .sheet { animation: sheet var(--demo-loop) var(--ease-sheet) infinite both; }
  .sheet-grithm { animation: tap var(--demo-loop) ease infinite both; }
  .note  { animation: note  var(--demo-loop) var(--ease-out) infinite both; }
  .note-points li:nth-child(1) { animation: line  var(--demo-loop) ease-out infinite both; }
  .note-points li:nth-child(2) { animation: line2 var(--demo-loop) ease-out infinite both; }
  .note-points li:nth-child(3) { animation: line3 var(--demo-loop) ease-out infinite both; }
  .note-source { animation: source var(--demo-loop) ease-out infinite both; }
  .note-mine   { animation: mine   var(--demo-loop) ease-out infinite both; }
  .note-mine-text { animation: write var(--demo-loop) steps(36, end) infinite both; }
}

@keyframes clip {
  0%   { opacity: 0; transform: translateY(12px); clip-path: inset(0 0 0 0 round 18px); }
  5%, 30% { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 18px); }
  38%  { opacity: 0; transform: translateY(-6px) scale(.96); clip-path: inset(0 0 55% 0 round 18px); }
  100% { opacity: 0; transform: translateY(-6px) scale(.96); clip-path: inset(0 0 55% 0 round 18px); }
}
/* The sheet rises from the bottom and leaves the same way. */
@keyframes sheet {
  0%, 9%  { transform: translateY(115%); opacity: 0; }
  15%, 27% { transform: none; opacity: 1; }
  33%, 100% { transform: translateY(115%); opacity: 0; }
}
@keyframes tap {
  0%, 19% { transform: none; box-shadow: 0 0 0 0 transparent; }
  21%     { transform: scale(.9); box-shadow: 0 0 0 4px var(--link); }
  25%, 100% { transform: none; box-shadow: 0 0 0 0 transparent; }
}
@keyframes note {
  0%, 33% { opacity: 0; clip-path: inset(0 0 100% 0 round 18px); transform: translateY(8px); }
  41%     { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: none; }
  92%     { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: none; filter: blur(0); }
  100%    { opacity: 0; clip-path: inset(0 0 0 0 round 18px); transform: none; filter: blur(4px); }
}
@keyframes line  { 0%, 40% { opacity: 0; transform: translateX(-6px); } 45%, 100% { opacity: 1; transform: none; } }
@keyframes line2 { 0%, 44% { opacity: 0; transform: translateX(-6px); } 49%, 100% { opacity: 1; transform: none; } }
@keyframes line3 { 0%, 48% { opacity: 0; transform: translateX(-6px); } 53%, 100% { opacity: 1; transform: none; } }
@keyframes source { 0%, 54% { opacity: 0; } 59%, 100% { opacity: 1; } }
@keyframes mine   { 0%, 62% { opacity: 0; } 65%, 100% { opacity: 1; } }
@keyframes write {
  0%, 65% { clip-path: inset(0 100% 0 0); }
  80%, 100% { clip-path: inset(0 0 0 0); }
}

/* ---------- Three points ---------- */
.points { border-top: 1px solid var(--border); }
.points-body {
  max-width: 72rem; margin: 0 auto;
  padding: 3rem var(--gutter) 3.5rem;
  display: grid; gap: 2rem;
}
.point-list li { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.point-list li:first-child { padding-top: 0; }
.point-list h3 { font-size: clamp(1.45rem, 2vw + 1rem, 2rem); line-height: 1.15; letter-spacing: -.01em; }
.point-list p { margin-top: .4rem; color: var(--text-muted); max-width: 38rem; }

.margin-note p {
  font: italic 500 1.2rem/1.4 var(--serif);
  color: var(--link);
  max-width: 22rem;
}
.margin-note em { font-style: normal; }

/* ---------- Your notes stay yours ---------- */
.yours { background: var(--band); color: var(--band-text); }
.yours-inner {
  max-width: 72rem; margin: 0 auto;
  padding: 4rem var(--gutter);
  display: grid; gap: 2.5rem;
}
.yours h2 { color: var(--band-text); font-size: clamp(2rem, 3.5vw + 1rem, 3.1rem); line-height: 1.08; letter-spacing: -.015em; }
.yours-text p { margin-top: 1rem; color: var(--band-muted); font-size: 1.125rem; max-width: 34rem; }
.voices { display: grid; gap: .6rem; max-width: 30rem; }
.voice { border-radius: 14px; padding: 1rem 1.15rem; }
.voice-ai { background: var(--band-ai-zone); }
.voice-mine { background: var(--band-mine); border: 1px solid var(--band-border); border-left: 1px solid var(--accent); }
.voice-label { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--band-muted); }
.voice-ai p:last-child { margin-top: .3rem; color: var(--band-text); }
.voice-mine p:last-child { margin-top: .2rem; font: italic 500 1.25rem/1.35 var(--serif); color: var(--band-text); }

/* ---------- Close ---------- */
.close {
  max-width: 72rem; margin: 0 auto;
  padding: 4rem var(--gutter);
  text-align: center;
}
.close h2 { font-size: clamp(1.8rem, 3vw + 1rem, 2.6rem); letter-spacing: -.015em; }
.close-link {
  display: inline-flex; align-items: center; min-height: 52px;
  margin-top: 1.25rem; padding: .75rem 1.5rem;
  border-radius: 12px; background: var(--primary); color: var(--on-primary);
  font-weight: 600; text-decoration: none;
  transition: background-color .2s ease, transform .16s var(--ease-out);
}
.close-link:hover { background: var(--primary-hover); }
.close-link:active { transform: scale(.97); transition-duration: .1s; }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--border); }
.foot-inner {
  max-width: 72rem; margin: 0 auto;
  padding: 2rem var(--gutter) 2.5rem;
  display: grid; gap: 1rem;
  font-size: .95rem; color: var(--text-muted);
}
.foot-social, .foot-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.foot a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }

/* ---------- Simple pages (privacy, thanks) ---------- */
.page {
  max-width: 40rem; margin: 0 auto;
  padding: 2rem var(--gutter) 4rem;
}
.page h1 { font-size: clamp(2rem, 4vw + 1rem, 3rem); max-width: none; }
.page h2 { font-size: 1.35rem; margin-top: 2rem; }
.page p, .page li { margin-top: .75rem; }
.page ul { list-style: disc; padding-left: 1.25rem; }
.page .meta { color: var(--text-muted); font-size: .95rem; margin-top: .5rem; }

/* ---------- Accessibility preferences ---------- */
@media (prefers-contrast: more) {
  :root { --border: var(--control-outline); }
  .note, .clip, .sheet { box-shadow: none; }
}

/* ---------- Wider screens ---------- */
@media (min-width: 60rem) {
  .hero {
    grid-template-columns: minmax(0, 1fr) 22rem;
    align-items: center; gap: 4rem;
    padding-top: 3rem; padding-bottom: 5rem;
    min-height: min(46rem, calc(100vh - 4rem));
  }
  .points-body { grid-template-columns: minmax(0, 1fr) 17rem; gap: 4rem; padding-block: 4.5rem; }
  .margin-note { border-left: 1px solid var(--border); padding-left: 1.75rem; align-self: start; }
  .yours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; gap: 4rem; padding-block: 5.5rem; }
  .foot-inner { grid-template-columns: 1fr auto auto; align-items: center; gap: 2rem; }
}

/* ---------- Optional question after signup ---------- */
/* A card that arrives under the success message, big enough not to miss. */
.ask {
  margin-top: 1.25rem; max-width: 34rem;
  padding: 1.25rem 1.25rem 1.1rem;
  background: var(--surface); border: 1.5px solid var(--link); border-radius: 18px;
  box-shadow: var(--shadow);
  animation: ask-in .6s var(--ease-out) .2s both;
}
@keyframes ask-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.ask fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ask legend { padding: 0; font: 700 1.35rem/1.25 var(--serif); color: var(--text); }
.ask-hint { margin-top: .3rem; font-size: .95rem; color: var(--text-muted); }
.ask-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.ask-options button {
  min-height: 52px; padding: .6rem .8rem; border-radius: 12px; cursor: pointer;
  font: 600 1rem/1.2 var(--sans); color: var(--text);
  background: var(--surface-raised); border: 1.5px solid var(--control-outline);
  transition: background-color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.ask-options button:hover { border-color: var(--link); }
.ask-options button:active { transform: scale(.97); }
.ask-options button[aria-pressed="true"] { background: var(--ai-zone); border-color: var(--link); color: var(--link); }
.ask-options button:disabled { cursor: progress; }
.ask-skip {
  margin-top: .6rem; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 500 .95rem var(--sans); color: var(--text-muted); text-decoration: underline; text-underline-offset: .2em;
}
.ask-status { font: 600 1.1rem/1.35 var(--serif); color: var(--text); }
.ask-status:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .ask { animation: none; } }