/* ==========================================================================
   SyllabitEdu marketing site — design system
   Palette honours the app: Blackberry #48182F + Moonstone #D4CBC4.
   No CDN fonts (a warm book-serif system stack grounds the exam-prep subject).
   ========================================================================== */

:root {
  /* The site is light-only by design. color-scheme keeps native UI — form
     controls, scrollbars, autofill — light even when the OS is in dark mode,
     which is the one thing CSS variables cannot reach. */
  color-scheme: light;

  --paper: #f5f1ec;        /* warm greige ground, biased to moonstone */
  --surface: #fbf9f6;      /* raised cards */
  --surface-2: #efe8e1;    /* insets / subtle fills */
  --ink: #2a0e1b;          /* near-black plum text */
  --ink-soft: #6a4a57;     /* muted secondary text */
  --wine: #48182f;         /* Blackberry — brand */
  --wine-deep: #35111f;
  --blush: #e7a9c0;        /* app dark-primary; light accent */
  --rose: #b0607f;         /* mid accent that works on paper */
  --line: #e4dbd3;         /* hairlines on paper */
  --moonstone: #d4cbc4;

  --btn-bg: var(--wine);
  --btn-text: #ffffff;
  --brand-on-surface: var(--wine);
  --ring: #b0607f;
  --shadow: 24px 40px 80px -48px rgba(42, 14, 27, 0.45);
  --shadow-sm: 0 2px 10px -4px rgba(42, 14, 27, 0.25);

  --maxw: 1120px;
  --radius: 16px;
  --radius-lg: 26px;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, Menlo, Consolas,
    monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.01em;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rose);
}

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--sans); font-size: 0.98rem; font-weight: 600;
  padding: 0.72em 1.25em; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.btn-primary { background: var(--btn-bg); color: var(--btn-text); box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(72, 24, 47, 0.6); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--rose); color: var(--brand-on-surface); }
.btn-lg { font-size: 1.05rem; padding: 0.85em 1.5em; }

/* ---- header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 20px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-weight: 700; }
/* The transparent wine mark, not the tile. `.brand` only ever sits on a light
   ground -- both site headers, and the app-side `.site-footer`, which is
   `--surface`. The coaching footer is the dark `--band-deep` band and uses
   `.brand-logo` with the reversed tile instead; wine artwork would vanish on it.
   Height-only sizing with `width: auto` because the mark is 552x512, not
   square -- forcing 40x40 would squash it. No radius or shadow: those existed
   to make the tile read as a tile. */
.brand img { width: auto; height: 40px; }
.brand .name { font-family: var(--serif); font-size: 1.22rem; letter-spacing: -0.01em; }
.brand .name b { color: var(--brand-on-surface); font-weight: 600; }
.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; }
.nav-links a:hover { color: var(--brand-on-surface); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
/* The header CTA must never wrap. `.nav` is a fixed 66px bar, so a label that
   breaks onto a second line makes the button 75px tall and it spills out below
   the header border. coaching.css relaxes `.btn` to `white-space: normal`
   under 768px — a real fix for long labels overflowing in the page body, but
   it also reaches this button. This wins on specificity (0,2,0 over 0,1,0)
   rather than on order, so it holds regardless of sheet sequence. `flex: none`
   stops the actions being squeezed instead: the brand may compress, the CTA
   and the menu toggle may not. */
.nav-actions { flex: none; }
.nav-actions .btn { white-space: nowrap; }
/* Sized and shaped to match the CTA it sits beside: 42px is that pill's height,
   and the full radius puts both in the same family — a 38px rounded square next
   to a 42px pill read as two unrelated controls. 42 is also a far better touch
   target than 38, since this is a mobile-only control.
   justify-content is set explicitly as well as place-items: place-items only
   supplies align-items once something flips this to display:flex, and when
   coaching.css did exactly that the icon lost its horizontal centring and sat
   1px from the left edge instead of 9px. */
.icon-btn {
  display: inline-grid; place-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer;
}
.icon-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.nav-toggle { display: none; }

/* ---- hero --------------------------------------------------------------- */
.hero { padding: clamp(40px, 7vw, 92px) 0 clamp(30px, 5vw, 64px); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
.hero .lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--ink-soft); margin: 22px 0 0; max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 26px; color: var(--ink-soft); font-size: 0.92rem; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.hero-art { display: flex; justify-content: center; position: relative; }

/* The soft wine glow that used to sit behind the hero phone was a radial
   gradient. Removed with the rest of them — the site uses flat colour only. */
.hero-art .phone { position: relative; z-index: 1; }

/* ---- sections ----------------------------------------------------------- */
section { position: relative; }
.section-pad { padding: clamp(48px, 8vw, 104px) 0; }
/* Every other band on /app/ is a shade deeper than the page ground. This was
   three inline `style="background:var(--surface-2)"` attributes, and that is
   why those three sections showed no pattern: an inline declaration outranks
   any stylesheet rule, and `background` is the SHORTHAND, so it reset
   background-image to none on exactly the bands it tinted.

   Note `background-color`, not `background`. The shorthand would re-break the
   tile the moment this rule won on order — the same trap, one level down. */
.section-pad.tint { background-color: var(--surface-2); }
.section-head { max-width: 46ch; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); margin-top: 10px; }
.section-head p { color: var(--ink-soft); margin: 14px 0 0; font-size: 1.08rem; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* feature grid */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; box-shadow: var(--shadow-sm);
}
.card .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--blush) 30%, var(--surface)); color: var(--brand-on-surface); margin-bottom: 16px; }
.card h3 { font-size: 1.25rem; }
.card p { color: var(--ink-soft); margin: 9px 0 0; font-size: 0.98rem; }

/* subjects */
.subjects { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.subject {
  border-radius: var(--radius-lg); padding: 30px; border: 1px solid var(--line);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 12px;
}
.subject .tag { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--rose); }
.subject h3 { font-size: 1.5rem; }
.subject p { color: var(--ink-soft); margin: 0; }
.subject ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); }
.subject li { margin: 4px 0; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.step { padding-top: 20px; border-top: 2px solid var(--wine); }
.step .n { font-family: var(--mono); font-size: 0.8rem; color: var(--rose); letter-spacing: 0.1em; }
.step h3 { font-size: 1.2rem; margin: 8px 0 6px; }
.step p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; }

/* gallery of phones */
.gallery {
  display: flex; gap: 22px; overflow-x: auto; padding: 8px 4px 20px; scroll-snap-type: x mandatory;
  justify-content: center;        /* centred when the row fits … */
  justify-content: safe center;   /* … without clipping the first phone when it doesn't */
}
.gallery .shot { scroll-snap-align: center; flex: 0 0 auto; text-align: center; margin: 0; }
.gallery .shot figcaption { margin-top: 14px; color: var(--ink-soft); font-size: 0.92rem; }

/* pricing */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.price {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; gap: 6px;
}
.price.featured { border-color: var(--rose); box-shadow: var(--shadow); position: relative; }
.price.featured .badge {
  position: absolute; top: -12px; right: 20px; background: var(--btn-bg); color: var(--btn-text);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
.price .plan { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); }
.price .amt { font-family: var(--serif); font-size: 2.4rem; font-variant-numeric: tabular-nums; }
.price .amt small { font-size: 0.9rem; color: var(--ink-soft); font-family: var(--sans); }
.price ul { list-style: none; margin: 14px 0 0; padding: 0; }
.price li { padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.95rem; }
.price .note { color: var(--ink-soft); font-size: 0.86rem; margin-top: auto; padding-top: 14px; }

/* faq */
.faq { display: grid; gap: 12px; max-width: 760px; margin-inline: auto; }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.qa summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600; font-size: 1.05rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-size: 1.4rem; color: var(--rose); line-height: 1; }
.qa[open] summary::after { content: "\2013"; }
.qa .a { padding: 0 22px 20px; color: var(--ink-soft); }
.qa .a p { margin: 0; }

/* CTA band */
.cta-band {
  background: var(--wine);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 60px);
  text-align: center; position: relative; overflow: hidden;
}
.cta-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: #fff; }
.cta-band p { color: rgba(255,255,255,0.82); max-width: 48ch; margin: 14px auto 0; }
.cta-band .btn-primary { background: #fff; color: var(--wine); margin-top: 26px; }
.cta-band .btn-primary:hover { background: #fff; }
.cta-band::after {
  content: ""; position: absolute; width: 340px; height: 340px; right: -80px; top: -120px;
  border-radius: 50%; background: transparent;
}

/* ---- footer ------------------------------------------------------------- */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 34px; margin-top: 20px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.foot-brand .brand { margin-bottom: 12px; }
/* Both margins are set explicitly rather than left to the UA's default `p`
   margin. The coaching pages also load coaching.css, whose `* { margin: 0 }`
   reset zeroes them, while /app/ does not load that sheet and kept the 1em
   default — so the same component rendered with a 15px tighter blurb on one
   half of the site than the other. Relying on a UA default in a component two
   sheets share is how that drift gets in. */
.foot-brand p { color: var(--ink-soft); font-size: 0.95rem; max-width: 34ch; margin: 15px 0 0; }
.foot-col h4 { font-family: var(--sans); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; }
.foot-col a { display: block; text-decoration: none; color: var(--ink); padding: 5px 0; font-size: 0.95rem; }
.foot-col a:hover { color: var(--brand-on-surface); }
/* An affordance, not a layout in use: nothing stacks two headings in one column
   today. Legal used to sit under Contact and now has its own track. Kept so a
   column that does grow a second heading spaces it instead of running it into
   the links above; :not(:first-child) keeps the opening heading flush with its
   peers across the row. */
.foot-col h4:not(:first-child) { margin-top: 24px; }
/* Not every line is a link: the centre address is plain text and still has to
   sit on the same rhythm as the anchors above and below it. */
.foot-col span { display: block; padding: 5px 0; font-size: 0.95rem; color: var(--ink-soft); }
/* Leading icons (phone, pin, WhatsApp) get a fixed box, or the labels rag. */
.foot-col i { display: inline-block; width: 16px; margin-right: 6px; color: var(--brand-on-surface); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 0.86rem; }

/* =====================================================================
   Phone mockups — on-brand recreations of app screens (CSS, no images)
   ===================================================================== */
.phone {
  width: 300px; border-radius: 42px; background: #0d0709; padding: 12px;
  box-shadow: var(--shadow); border: 1px solid rgba(0,0,0,0.4);
}
.phone .screen {
  position: relative; border-radius: 32px; overflow: hidden; background: var(--app-bg, #f4eef0);
  height: 610px; font-family: var(--sans); color: #2a0e1b;
}
.phone .notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 96px; height: 22px; background: #0d0709; border-radius: 0 0 14px 14px; z-index: 5; }

/* app chrome inside the phone (always light — mirrors the app's forced light theme) */
.app-bar { background: #48182f; color: #fff; padding: 26px 16px 12px; display: flex; align-items: center; gap: 12px; }
.app-bar .ham { font-size: 1.15rem; opacity: 0.95; }
.app-bar .title { font-weight: 600; font-size: 1.02rem; font-family: var(--serif); }
.app-body { padding: 14px; height: calc(610px - 68px); overflow: hidden; background: #f4eef0; }

/* generic app pieces */
.a-card { background: #fff; border-radius: 14px; padding: 13px 14px; box-shadow: 0 1px 4px rgba(42,14,27,0.08); margin-bottom: 11px; }
.a-row { display: flex; align-items: center; gap: 11px; }
.a-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #f2dae4; color: #48182f; }
.a-h { font-weight: 700; font-size: 0.92rem; color: #2a0e1b; }
.a-sub { font-size: 0.76rem; color: #7a5b67; }
.a-avatar { width: 34px; height: 34px; border-radius: 50%; background: #48182f; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; }
.a-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; background: #efe6ea; color: #48182f; padding: 4px 9px; border-radius: 999px; }
.a-progress { height: 7px; border-radius: 999px; background: #ead9e0; overflow: hidden; margin-top: 8px; }
.a-progress > i { display: block; height: 100%; background: #48182f; }
/* Progress dial in the phone mockup. Was a conic-gradient; drawn as a solid
   ring now so the sheet carries no gradient functions at all. */
.ring { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: #48182f;
  border: 4px solid #48182f; }
.ring > span { width: 40px; height: 40px; border-radius: 50%; background: #fff; display: grid; place-items: center; }

/* code block mockup */
.a-code { background: #241318; color: #f0d9e2; border-radius: 10px; padding: 11px 12px; font-family: var(--mono); font-size: 0.68rem; line-height: 1.55; }
.a-code .k { color: #e7a9c0; }
.a-code .c { color: #9c7f8a; }

/* callout mockup */
.a-callout { border-left: 3px solid #b0607f; background: #f7edf1; border-radius: 8px; padding: 9px 11px; font-size: 0.76rem; color: #5a3b47; }

/* quiz option */
.a-opt { border: 1px solid #e7d7de; border-radius: 11px; padding: 10px 12px; font-size: 0.82rem; margin-bottom: 9px; display: flex; align-items: center; gap: 10px; }
.a-opt .b { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #cbb3bd; flex: 0 0 auto; }
.a-opt.correct { border-color: #2e7d55; background: #e8f5ee; color: #1f5c3d; }
.a-opt.correct .b { border-color: #2e7d55; background: #2e7d55; position: relative; }
.a-opt.correct .b::after { content: "\2713"; color: #fff; font-size: 0.7rem; position: absolute; inset: 0; display: grid; place-items: center; }

.a-btn { background: #48182f; color: #fff; text-align: center; border-radius: 12px; padding: 12px; font-weight: 600; font-size: 0.86rem; }

.a-stat { text-align: center; flex: 1; }
.a-stat b { display: block; font-family: var(--serif); font-size: 1.35rem; color: #48182f; }
.a-stat span { font-size: 0.68rem; color: #7a5b67; }

/* section headings inside content reader */
.a-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: #2a0e1b; margin: 2px 0 8px; }
.a-p { font-size: 0.78rem; color: #4d3540; line-height: 1.5; margin: 0 0 10px; }

/* =====================================================================
   Legal / content pages
   ===================================================================== */
.page-hero { padding: clamp(48px, 7vw, 80px) 0 24px; border-bottom: 1px solid var(--line); }
.page-hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.page-hero p { color: var(--ink-soft); margin: 12px 0 0; }
.prose { max-width: 720px; margin: 0 auto; padding: 44px 24px 80px; }
.prose h2 { font-size: 1.4rem; margin: 34px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink); margin: 0 0 14px; }
.prose ul, .prose ol { color: var(--ink); padding-left: 22px; }
.prose li { margin: 6px 0; }
.prose a { color: var(--brand-on-surface); text-decoration: underline; text-underline-offset: 2px; }
.prose .updated { color: var(--ink-soft); font-size: 0.9rem; }
.callout-box { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--rose); border-radius: 12px; padding: 18px 20px; margin: 22px 0; }
.callout-box strong { color: var(--brand-on-surface); }
.steplist { counter-reset: s; list-style: none; padding: 0; }
.steplist li { counter-increment: s; position: relative; padding: 14px 0 14px 46px; border-top: 1px solid var(--line); }
.steplist li::before { content: counter(s); position: absolute; left: 0; top: 12px; width: 30px; height: 30px; border-radius: 50%; background: var(--wine); color: var(--btn-text); display: grid; place-items: center; font-weight: 700; font-size: 0.9rem; }

/* ---- responsive --------------------------------------------------------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .features, .steps, .pricing { grid-template-columns: 1fr; }
  .subjects { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column;
    align-items: flex-start; gap: 4px; background: var(--paper); border-bottom: 1px solid var(--line); padding: 14px 24px;
  }
  .nav-links.open a { padding: 8px 0; width: 100%; }
  .nav-toggle { display: inline-grid; }
  /* On desktop it is .nav-links that carries margin-left:auto and pushes the
     whole right-hand cluster over. Hiding it here took that with it, so the
     actions sat immediately after the brand with the slack left over on their
     right. Move the auto margin onto .nav-actions for as long as the links are
     hidden — it cannot live on .nav-actions unconditionally, because on
     desktop two auto margins would split the free space and strand the links
     mid-header. (It used to sit on .nav-toggle, where it did nothing:
     .nav-actions is flex:none, so there is no free space inside it to absorb.) */
  .nav-actions { margin-left: auto; }
  .nav-actions .desktop-cta { display: none; }
}
@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; }
  .phone { width: 268px; }
  .phone .screen { height: 560px; }
  .app-body { height: calc(560px - 68px); }

  /* Header, phone sizes. Measured at 390px: brand 157 + gap 20 + actions 166
     needs all 342px of available width, leaving nothing — it only appeared to
     fit because the CTA had wrapped to two lines. Trimming the mark, the
     wordmark, the gap and the CTA's own padding buys back ~47px. */
  .nav { gap: 12px; }
  .brand img { height: 34px; }
  .brand .name { font-size: 1.05rem; }
  .nav-actions .btn { font-size: 0.9rem; padding: 0.6em 0.95em; }
}
@media (max-width: 360px) {
  /* Below 360 the wordmark and the CTA cannot both fit, even trimmed — at
     320px they overflow by 29px. The mark alone still identifies the site and
     still links home, and the CTA is the conversion action, so the wordmark is
     what gives way. */
  .brand .name { display: none; }
}

/* ========== SECTION PATTERNS ========================================
   The flat-tile treatment that coaching.css gives the coaching pages, applied
   to /app/ from the sheet /app/ actually loads. Same motif family on purpose,
   so the two halves of the site read as one place.

   /app/ needs it MORE than the coaching side, not less: .section-pad and
   .page-hero declare no background at all, so every band there is the same
   --paper ground with nothing but whitespace between them. The tile is the only
   thing separating one room from the next.

   EVERYTHING here is scoped under `.app-page`, which is on the <body> of the
   six /app/ pages and nowhere else. That is not decoration — the coaching pages
   load this sheet too. When these rules were written `.hero` existed on both
   sides, and an unscoped `.hero` here would have reached straight into the
   coaching home page; that particular overlap is gone now (the coaching one was
   renamed `.hero-section`), but the hazard it came from has not. .section-pad,
   .page-hero and .cta-band are app-only today and every name here is generic
   enough to be claimed by coaching markup tomorrow. Scoping them all means
   nobody has to re-check that when they are.
   ==================================================================== */
.app-page .hero {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2722%27%20height%3D%2722%27%20viewBox%3D%270%200%2022%2022%27%3E%3Ccircle%20cx%3D%271.5%27%20cy%3D%271.5%27%20r%3D%271.5%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.07%27%2F%3E%3C%2Fsvg%3E");
  background-size: 22px 22px;
}
.app-page .page-hero {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M0%2020%20L20%200%20M-5%205%20L5%20-5%20M15%2025%20L25%2015%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.06%27%20stroke-width%3D%271%27%2F%3E%3Cpath%20d%3D%27M0%200%20L20%2020%20M15%20-5%20L25%205%20M-5%2015%20L5%2025%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.06%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
  background-size: 20px 20px;
}
.app-page #features {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Cpath%20d%3D%27M15%2010%20V20%20M10%2015%20H20%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.10%27%20stroke-width%3D%271.3%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  background-size: 30px 30px;
}
.app-page #subjects {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2732%27%20height%3D%2732%27%20viewBox%3D%270%200%2032%2032%27%3E%3Cpath%20d%3D%27M32%200%20H0%20V32%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.08%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
  background-size: 32px 32px;
}
.app-page #pricing {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2744%27%20height%3D%2744%27%20viewBox%3D%270%200%2044%2044%27%3E%3Ccircle%20cx%3D%2722%27%20cy%3D%2722%27%20r%3D%279%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.075%27%20stroke-width%3D%271.1%27%2F%3E%3C%2Fsvg%3E");
  background-size: 44px 44px;
}
.app-page #faq {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2748%27%20height%3D%2716%27%20viewBox%3D%270%200%2048%2016%27%3E%3Cpath%20d%3D%27M0%2012%20C%208%2012%2C%208%204%2C%2016%204%20S%2024%2012%2C%2032%2012%20S%2040%204%2C%2048%204%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.09%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E");
  background-size: 48px 16px;
}

/* Three .section-pad blocks carry no id — "From sign-up to your first quiz",
   "Clean screens", and the CTA wrapper. Positional selectors are the only
   handle they offer. nth-of-type counts <section> siblings of <body>, where
   .hero is 1 and the seven .section-pad blocks are 2-8, so these are the 3rd,
   4th and 7th pads. Reorder the page and these follow the position, not the
   content — give a section an id if it needs to keep its own tile. */
.app-page section:nth-of-type(4) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2734%27%20height%3D%2720%27%20viewBox%3D%270%200%2034%2020%27%3E%3Cpath%20d%3D%27M0%2014%20L8.5%206%20L17%2014%20L25.5%206%20L34%2014%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.085%27%20stroke-width%3D%271.2%27%2F%3E%3C%2Fsvg%3E");
  background-size: 34px 20px;
}
.app-page section:nth-of-type(5) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2728%27%20height%3D%2728%27%20viewBox%3D%270%200%2028%2028%27%3E%3Cpath%20d%3D%27M-4%204%20L4%20-4%20M0%2028%20L28%200%20M24%2032%20L32%2024%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.07%27%20stroke-width%3D%271.2%27%20fill%3D%27none%27%2F%3E%3C%2Fsvg%3E");
  background-size: 28px 28px;
}
.app-page section:nth-of-type(8) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Ccircle%20cx%3D%273%27%20cy%3D%273%27%20r%3D%271.3%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.06%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%271.3%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.06%27%2F%3E%3C%2Fsvg%3E");
  background-size: 30px 30px;
}

/* The dark CTA card, matching .cta-banner on the coaching side. White here,
   not wine — this is the one dark surface on /app/. */
.app-page .cta-band {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2736%27%20height%3D%2736%27%20viewBox%3D%270%200%2036%2036%27%3E%3Cpath%20d%3D%27M0%2018%20H12%20M24%2018%20H36%20M18%200%20V12%20M18%2024%20V36%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%27.13%27%20stroke-width%3D%271%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%272.4%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-opacity%3D%27.20%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
  background-size: 36px 36px;
}

/* The footer is the one component both halves share, so its tile lives here
   rather than in either half's sheet — that is what keeps the two copies from
   drifting, which is the whole reason .site-footer was unified in the first
   place. Quieter than any section tile: it is a landing, not another room, and
   --surface is lighter than --paper so the same opacity carries further. */
.site-footer {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2740%27%20height%3D%2740%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%207%20L28.7%2012%20L28.7%2022%20L20%2027%20L11.3%2022%20L11.3%2012%20Z%27%20fill%3D%27none%27%20stroke%3D%27%2348182f%27%20stroke-opacity%3D%27.055%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E");
  background-size: 40px 40px;
}

/* The five /app/ reading pages — faq, terms, privacy, refund, delete-account —
   are a .page-hero band and then a width-constrained <main>. There is no
   full-width section between them to carry a tile, so their pattern goes on the
   <body> and shows through the transparent main column.

   Not on <main> itself: .prose is capped at 720px and the faq's wrap at 760,
   so a tile there would paint a patterned stripe down the middle of the page
   with plain margins either side. The body is the only full-bleed surface these
   pages have.

   Quiet on purpose — this is the ground behind long legal text, and the FAQ and
   callout cards sit on it in --surface, so it reads behind them rather than
   through them. The sticky header is translucent (color-mix + backdrop-filter),
   so the tile carries under it blurred, which is what that header is for.

   background-IMAGE only, so `body { background: var(--paper) }` keeps
   supplying the ground colour. */
.app-page.app-doc {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2730%27%20height%3D%2730%27%20viewBox%3D%270%200%2030%2030%27%3E%3Ccircle%20cx%3D%273%27%20cy%3D%273%27%20r%3D%271.3%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.06%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2718%27%20r%3D%271.3%27%20fill%3D%27%2348182f%27%20fill-opacity%3D%27.06%27%2F%3E%3C%2Fsvg%3E");
  background-size: 30px 30px;
}