/* WarmStart AI: draft sales page. Original design. No external fonts, no trackers. */

:root {
  --bg: #f7f5f1;
  --bg-alt: #f1ede6;
  --surface: #fffdfa;
  --ink: #17150f;
  --ink-soft: #3a362d;
  --muted: #6f6a5e;
  --line: #e2dcd1;
  --line-strong: #cfc7b8;
  --accent: #c2410c;
  --accent-ink: #8a2c07;
  --accent-soft: #fbeee5;
  --green: #1c7c54;
  --green-soft: #e3f3eb;
  --amber: #8a6100;
  --amber-soft: #f7efdd;
  --radius: 10px;
  --maxw: 960px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* scroll-behavior: smooth animates every anchor jump and every focus() move.

   scroll-padding-top is the sticky .topbar's height. Without it an in-page
   anchor lands the target at the very top of the viewport, underneath the
   bar: at 390px the "Packs" h2 landed 4px behind it. This is a scrollport
   padding, so it applies to anchor jumps and to block:"start" alignment, and
   it leaves block:"center" alone, which is what the Jump to pack buttons use
   and which already centres correctly. */
html { scroll-behavior: smooth; scroll-padding-top: 59px; }

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

img, svg { max-width: 100%; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 14px; z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

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

.muted { color: var(--muted); }
.tiny { font-size: 0.82rem; color: var(--muted); }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 245, 241, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.brand-name { font-weight: 700; letter-spacing: -0.01em; }
.nav { display: flex; gap: 18px; font-size: 0.88rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover { color: var(--ink); }

.pill {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--muted);
  white-space: nowrap;
}
.pill-draft { background: var(--amber-soft); border-color: #e6d3a8; color: var(--amber); }
.pill-live { background: var(--green-soft); border-color: #bfe3d0; color: var(--green); }

/* Sections */
.section { padding: 72px 0; border-top: 1px solid var(--line); }
.section-alt { background: var(--bg-alt); }
.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.section-no {
  font-family: var(--mono); font-size: 0.78rem; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 2px 9px; flex: none;
}
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-size: 1.18rem; }
.subhead { font-size: 1.3rem; margin: 44px 0 10px; }
.section-lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 70ch; margin: 10px 0 26px; }

/* Hero */
.hero { padding: 76px 0 68px; border-top: none; }
.eyebrow {
  font-family: var(--mono); font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--accent); margin: 0 0 18px;
}
h1 { font-size: clamp(2.2rem, 5.6vw, 3.8rem); font-weight: 800; max-width: 20ch; }
.lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-soft); max-width: 58ch; margin: 20px 0 0; }

.statgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin: 38px 0 0;
}
.stat { background: var(--surface); padding: 18px 18px 16px; }
.stat p { margin: 8px 0 0; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }
.stat-num {
  font-family: var(--mono); font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 700; letter-spacing: -0.02em; display: block;
}
.stat-vs { font-size: 0.62em; color: var(--muted); padding: 0 6px; }

.src { font-size: 0.62em; font-family: var(--mono); }
.src a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.src a:hover { color: var(--accent); }

.hero-cta { margin-top: 34px; }
.price-line { font-size: 1.15rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.price-line strong { font-family: var(--mono); font-size: 1.35rem; }
.price-line .sep { color: var(--line-strong); }
.price-line .muted { font-size: 0.9rem; flex-basis: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }

.btn {
  font: inherit; font-weight: 600; font-size: 0.95rem;
  padding: 11px 18px; border-radius: 8px; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.btn:hover { background: #000; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.btn-small { padding: 7px 13px; font-size: 0.86rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; background: var(--ink); }
.btn:disabled:hover { background: var(--ink); }
.promise { margin-top: 22px; font-size: 0.95rem; color: var(--ink-soft); max-width: 62ch; border-left: 3px solid var(--accent); padding-left: 14px; }

/* Self segmentation */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tab {
  font: inherit; font-size: 0.9rem; padding: 9px 14px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
/* The doors are a toggle group now, not a tab panel, so the pressed state
   is what paints. */
.tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.door-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: flex; gap: 24px; justify-content: space-between; align-items: center; }

/* An author `display` outranks the UA rule for [hidden]. All three doors are
   listed and visible now, so nothing sets hidden, but the guard stays so a
   future conditional cannot silently render every panel at once again. */
.door-panel[hidden] { display: none; }
.door-copy p { margin: 8px 0 0; color: var(--ink-soft); max-width: 60ch; }
.door-pick { text-align: right; flex: none; display: grid; gap: 8px; justify-items: end; }
.door-pick .btn-small { min-width: 148px; }

/* All three doors are listed, so the container is a list of rows and the gap
   has to carry the grouping on its own. */
.door-panels { display: grid; gap: 10px; }

.door-hint { margin: 12px 0 14px; }

.door-panel { transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; }

/* Marked, not navigated. The ring and the tint are the whole message, and both
   survive the paper texture and colour blindness, which an opacity change
   alone would not. */
.door-panel.is-picked {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.door-panel.is-picked .pick-name { color: var(--accent-ink); }
.pick-name { font-weight: 700; }
.pick-price { font-family: var(--mono); color: var(--accent-ink); }
.pack.flash { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Choosing a door points at a pack. This makes that link visible instead of
   leaving the reader to infer it. A ring plus a lift, not colour alone, so it
   still reads without colour perception and against the paper texture. */
.pack.is-spotlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 16px 38px rgba(23, 21, 15, 0.10);
  transform: translateY(-3px);
}

/* 0.55 washed the dimmed cards into unreadable mush, the dark buy buttons in
   particular went muddy grey. The ring on the lit card does the pointing on
   its own, so the others only need to step back a little. */
.pack.is-dimmed { opacity: 0.82; }

/* Problem */
.problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.problem-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.problem-card p { margin: 10px 0 0; color: var(--ink-soft); font-size: 0.95rem; }
.problem-num { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; display: block; }
.problem-wide { grid-column: 1 / -1; }
.plain { margin-top: 24px; font-size: 1.02rem; color: var(--ink-soft); max-width: 72ch; }

/* Reasons */
.reasons { list-style: none; counter-reset: r; padding: 0; margin: 0; display: grid; gap: 16px; }
.reasons li { counter-increment: r; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 18px 64px; position: relative; }
.reasons li::before {
  content: counter(r); position: absolute; left: 18px; top: 16px;
  font-family: var(--mono); font-weight: 700; color: var(--accent);
  width: 28px; height: 28px; border: 1px solid var(--accent);
  border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem;
}
.reasons p { margin: 8px 0 0; color: var(--ink-soft); font-size: 0.95rem; }

/* Charts */
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; margin: 30px 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 16px; }
.chart-title { font-size: 1.12rem; }
.chart-note { font-size: 0.8rem; color: var(--muted); max-width: 44ch; }
.bars { display: flex; flex-direction: column; gap: 13px; margin: 16px 0 6px; }
.bar-row { display: grid; grid-template-columns: 168px 1fr 92px; align-items: center; gap: 12px; font-size: 0.9rem; }
.bar-label { color: var(--ink-soft); }
.bar-track { background: var(--bg-alt); border-radius: 6px; height: 30px; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 6px; background: var(--ink); transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bar-fill.accent { background: var(--accent); }
.bar-fill.green { background: var(--green); }
.bar-fill.grey { background: #a89f8f; }
.bar-value { font-family: var(--mono); font-size: 0.82rem; text-align: right; color: var(--ink); }
.chart-controls { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; border-top: 1px dashed var(--line-strong); margin-top: 18px; padding-top: 18px; }
.control { flex: 1 1 320px; display: grid; gap: 6px; }
.control-label { font-size: 0.9rem; }
.control-hint { font-size: 0.78rem; color: var(--muted); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.ratio { text-align: right; }
.ratio-num { display: block; font-family: var(--mono); font-size: 1.9rem; font-weight: 700; color: var(--accent-ink); letter-spacing: -0.02em; }
.ratio-label { font-size: 0.78rem; color: var(--muted); }
.chart-read { margin: 16px 0 0; font-size: 0.95rem; color: var(--ink-soft); max-width: 72ch; }
.bars-hour { margin-top: 26px; }

/* Deadline */
.deadline { margin: 30px 0 0; background: var(--amber-soft); border: 1px solid #e6d3a8; border-radius: var(--radius); padding: 18px 20px; font-size: 0.98rem; color: #4d3a08; }

/* Packs */
.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pack { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; transition: box-shadow 0.3s, border-color 0.3s; }
.pack-wide { grid-column: 1 / -1; }
.pack-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pack-tag { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 6px 0 0; }
.pack-price { font-family: var(--mono); font-size: 1.9rem; font-weight: 700; margin: 10px 0 4px; letter-spacing: -0.02em; }
.pack ul { margin: 12px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.pack li { font-size: 0.93rem; color: var(--ink-soft); }
.pack-line { font-size: 0.9rem; color: var(--ink-soft); margin: 12px 0 0; }
.badge { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.badge-live { background: var(--green-soft); color: var(--green); border: 1px solid #bfe3d0; }
.badge-soon { background: var(--bg-alt); color: var(--muted); border: 1px solid var(--line-strong); }
.badge-pre { background: var(--accent-soft); color: var(--accent-ink); border: 1px solid #f0cdb8; }

/* Shipping table */
.shipping { margin-top: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.shipping-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.table { width: 100%; border-collapse: collapse; margin: 16px 0 10px; font-size: 0.92rem; }
.table th, .table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
.table th { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* Ads */
.ad-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 24px; }
.ad-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ad-card header { display: flex; flex-direction: column; gap: 4px; }
.ad-card h4 { font-size: 1rem; }
.ad-meta { font-family: var(--mono); font-size: 0.76rem; color: var(--muted); }
.ad-card blockquote { margin: 0; font-size: 0.9rem; color: var(--ink-soft); border-left: 3px solid var(--accent); padding-left: 12px; }
.ad-asks, .ad-covered { font-size: 0.86rem; color: var(--ink-soft); margin: 0; }
.ad-link { margin-top: auto; font-size: 0.86rem; }

/* Deal list */
.deal-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.deal-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; font-size: 0.96rem; color: var(--ink-soft); }
.deal-list strong { color: var(--ink); }

/* Timeline */
.timeline { display: grid; gap: 0; margin-top: 18px; border-left: 2px solid var(--accent); }
.tl-row { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 16px; padding: 16px 0 16px 20px; border-bottom: 1px solid var(--line); }
.tl-row:last-child { border-bottom: none; }
.tl-when { font-family: var(--mono); font-weight: 700; color: var(--accent-ink); font-size: 0.9rem; }
.tl-data { font-size: 0.92rem; color: var(--ink-soft); }
.tl-meaning { font-size: 0.92rem; color: var(--ink); }

.callout { margin: 30px 0; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 20px 22px; }
.callout p { margin: 10px 0 0; color: var(--ink-soft); max-width: 72ch; }

/* FAQ */
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; padding: 0; }
.qa summary { cursor: pointer; padding: 15px 18px; font-weight: 600; list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 18px; top: 13px; font-family: var(--mono); color: var(--muted); }
.qa[open] summary::after { content: "−"; }
.qa p { margin: 0; padding: 0 18px 16px; color: var(--ink-soft); font-size: 0.95rem; max-width: 72ch; }

/* Not for */
.notfor { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.notfor li { padding-left: 26px; position: relative; color: var(--ink-soft); font-size: 0.96rem; }
.notfor li::before { content: "×"; position: absolute; left: 4px; top: 0; color: var(--accent); font-family: var(--mono); font-weight: 700; }

/* Sources */
.source-list { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 12px; font-size: 0.9rem; color: var(--ink-soft); }
.source-list li { border-left: 2px solid var(--line-strong); padding-left: 14px; }

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 40px 0 60px; background: var(--bg); }
.footer p { max-width: 72ch; font-size: 0.92rem; color: var(--ink-soft); }

/* Responsive */
@media (max-width: 860px) {
  .statgrid { grid-template-columns: 1fr 1fr; }
  .ad-grid { grid-template-columns: 1fr; }
  .pack-grid { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .section { padding: 54px 0; }
  .nav { display: none; }
  .statgrid { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr; gap: 6px; }
  .bar-value { text-align: left; }
  .door-panel { flex-direction: column; align-items: flex-start; gap: 14px; }
  .door-pick { text-align: left; justify-items: start; }
  .chart-controls { flex-direction: column; align-items: stretch; }
  .ratio { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar-fill { transition: none; }
}

/* Policy pages */
.policy { padding: 56px 0 80px; }
.policy h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.policy h2 { font-size: 1.25rem; margin: 34px 0 8px; }
.policy p, .policy li { color: var(--ink-soft); max-width: 72ch; }
.policy ul { padding-left: 20px; display: grid; gap: 6px; }
.policy .back { display: inline-block; margin-bottom: 24px; font-size: 0.9rem; }
.policy .draft-note { background: var(--amber-soft); border: 1px solid #e6d3a8; border-radius: var(--radius); padding: 12px 16px; font-size: 0.88rem; color: #4d3a08; margin: 20px 0 8px; max-width: 72ch; }

/* ---------- language switcher (added 2026-09-29) ---------- */

.topbar-right { display: flex; align-items: center; gap: 18px; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-alt);
  flex: none;
}

.lang-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1;
  padding: 7px 12px;
  cursor: pointer;
  min-width: 40px;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-btn:hover { color: var(--ink); }

.lang-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
}

/* Telugu needs a touch more line height and slightly looser tracking than
   the English setting, which is tuned for Latin metrics. */
html[lang="te"] body { line-height: 1.78; letter-spacing: 0; }
html[lang="te"] h1,
html[lang="te"] h2,
html[lang="te"] h3,
html[lang="te"] .stat-num,
html[lang="te"] .pack-price,
html[lang="te"] .price-line { line-height: 1.5; }

/* ---------- buy buttons + checkout (added 2026-09-29) ---------- */

.btn-buy {
  display: inline-block;
  margin-top: 16px;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.checkout-card {
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 72ch;
}

.checkout-card p { color: var(--ink-soft); }
.checkout-card .checkout-lead { color: var(--ink); font-size: 1.05rem; }
.checkout-card .tiny { margin-bottom: 0; }

@media (max-width: 720px) {
  .topbar-right { gap: 10px; }
  .nav { display: none; }
  .lang-btn { padding: 7px 10px; min-width: 36px; }
}

/* ---------- checkout page (added 2026-09-29) ---------- */

.checkout-body { background: var(--bg); }
.checkout-main { padding: 48px 0 80px; max-width: 1040px; }
.checkout-main h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 6px; }
.checkout-sub { color: var(--muted); margin-bottom: 28px; }

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.order-form,
.order-summary {
  background: var(--bg-alt);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 26px;
}

.order-form h2,
.order-summary h2 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 14px;
}
.order-form h2:not(:first-of-type) { margin-top: 30px; }

.pack-picker { display: grid; gap: 10px; }

.pack-choice { display: block; cursor: pointer; }
.pack-choice input { position: absolute; opacity: 0; pointer-events: none; }

.pack-choice-body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name price" "desc price";
  gap: 2px 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pack-choice input:checked + .pack-choice-body {
  border-color: var(--ink);
  background: var(--bg);
}
.pack-choice input:focus-visible + .pack-choice-body { outline: 2px solid var(--accent); outline-offset: 2px; }
.pack-choice:hover .pack-choice-body { border-color: var(--muted); }

.pack-choice-name { grid-area: name; font-weight: 650; }
.pack-choice-price { grid-area: price; font-weight: 650; white-space: nowrap; }
.pack-choice-desc { grid-area: desc; color: var(--muted); font-size: 0.88rem; }

.field { display: block; margin-bottom: 16px; }
.field-label { display: block; font-size: 0.88rem; font-weight: 600; margin-bottom: 6px; }
.field input {
  width: 100%;
  padding: 11px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field-hint { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 6px; }

.pay-note,
.mode-banner {
  background: var(--amber-soft);
  border: 1px solid #e6d3a8;
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 0.9rem;
  color: #4d3a08;
}
.mode-banner { margin-bottom: 22px; }
.mode-banner-live { background: var(--green-soft); border-color: #bfe3d0; color: #14532d; }

.btn-wide { width: 100%; justify-content: center; margin-top: 4px; }
.btn-wide:disabled { opacity: 0.6; cursor: progress; }

.summary-line,
.summary-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}
.summary-total { border-top: 1px solid var(--line-strong); font-weight: 700; margin-top: 4px; }
.summary-list { margin: 18px 0 0; padding-left: 18px; color: var(--muted); font-size: 0.9rem; }
.summary-list li { margin-bottom: 6px; }
.order-summary .tiny { margin-top: 18px; }

.result {
  margin-top: 30px;
  padding: 24px;
  border: 1px solid #bfe3d0;
  background: var(--green-soft);
  border-radius: var(--radius);
}
.result h2 { margin: 0 0 8px; }
.result .btn { display: inline-block; margin-top: 14px; text-decoration: none; }

@media (max-width: 820px) {
  .checkout-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Paper texture and doodles.

   Why this fits the product rather than fighting it. The page sells
   "materials, not a course", notebooks you run yourself, notes you keep. A
   sheet of paper says the same thing in one glance, and it is the visual
   opposite of the glossy course landing page this product is priced against.

   Two rules keep it from turning into decoration:
     1. The sheet sits behind everything at low opacity. Text contrast is
        unchanged from the flat version and every colour token is untouched.
     2. Doodles live in the gutters beside the text column, never behind a
        paragraph of body copy, and never carry meaning. They are aria-hidden.
   ========================================================================== */

/* --- The sheet -------------------------------------------------------------
   tools/make_paper.py writes img/paper.svg: a jittered point grid split into
   facets, each shaded by how much it faces a light from the upper left, with
   three long horizontal folds. Fixed to the viewport and stretched to cover,
   so there is no repeat and therefore no seam, and the tone shifts as you
   scroll the way paper does under a moving window. */

.paper-grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image: url("img/paper.svg");
  background-size: cover;
  background-position: center;
  opacity: 0.62;
}

/* --- Doodles ---------------------------------------------------------------
   Drawn as CSS masks so the ink colour comes from the page and the same asset
   works on a light or dark surface. The echo strokes live inside each SVG,
   which is what makes them read as pen rather than as vector art. */

.doodle {
  position: absolute;
  display: block;
  width: 58px;
  height: 58px;
  color: var(--ink);
  opacity: 0.24;
  pointer-events: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.doodle--tilt-a { transform: rotate(-7deg); }

/* One rule per doodle. The colour is currentColor from .doodle, so the same
   asset works on any surface. */
.d-bulb        { -webkit-mask-image: url("img/d-bulb.svg"); mask-image: url("img/d-bulb.svg"); }
.d-spark       { -webkit-mask-image: url("img/d-spark.svg"); mask-image: url("img/d-spark.svg"); }
.d-arrow       { -webkit-mask-image: url("img/d-arrow.svg"); mask-image: url("img/d-arrow.svg"); }
.d-clock       { -webkit-mask-image: url("img/d-clock.svg"); mask-image: url("img/d-clock.svg"); }
.d-paperclip   { -webkit-mask-image: url("img/d-paperclip.svg"); mask-image: url("img/d-paperclip.svg"); }
.d-check       { -webkit-mask-image: url("img/d-check.svg"); mask-image: url("img/d-check.svg"); }
.d-cup         { -webkit-mask-image: url("img/d-cup.svg"); mask-image: url("img/d-cup.svg"); }
.d-brackets    { -webkit-mask-image: url("img/d-brackets.svg"); mask-image: url("img/d-brackets.svg"); }
.d-book        { -webkit-mask-image: url("img/d-book.svg"); mask-image: url("img/d-book.svg"); }
.d-pencil      { -webkit-mask-image: url("img/d-pencil.svg"); mask-image: url("img/d-pencil.svg"); }
.d-download    { -webkit-mask-image: url("img/d-download.svg"); mask-image: url("img/d-download.svg"); }
.d-loop        { -webkit-mask-image: url("img/d-loop.svg"); mask-image: url("img/d-loop.svg"); }
.d-pen         { -webkit-mask-image: url("img/d-pen.svg"); mask-image: url("img/d-pen.svg"); }

.doodle--tilt-b { transform: rotate(6deg); }
.doodle--tilt-c { transform: rotate(-4deg) scale(1.08); }
.doodle--tilt-d { transform: rotate(9deg) scale(0.92); }
.doodle--sm { width: 40px; height: 40px; opacity: 0.20; }
.doodle--lg { width: 88px; height: 88px; opacity: 0.19; }

/* --- Placement -------------------------------------------------------------
   Doodles hang off the gutters of the text column, not the edge of the
   section. The column is 960px centred, so at 1280px there is about 160px of
   gutter each side and a -78px offset sits comfortably inside the window. The
   earlier version anchored to the section instead, which pushed half of them
   off screen on a 1280px viewport. */

.wrap { position: relative; }

.doodle--head-r { top: 4px;   right: -78px; }
.doodle--head-l { top: 26px;  left: -78px; }
.doodle--tail-r { bottom: 4px; right: -78px; }
.doodle--tail-l { bottom: 10px; left: -78px; }
.doodle--mid-r  { top: 42%;  right: -78px; }
.doodle--mid-l  { top: 46%;  left: -78px; }

.doodle--hero   { top: 6px;    right: -96px; }
.doodle--hero-l { bottom: 40px; left: -96px; }

@media (max-width: 1180px) {
  /* Gutter is narrower than the doodle. Pull them back inside the column
     rather than letting them hang off the window. */
  .doodle--head-r, .doodle--head-l,
  .doodle--tail-r, .doodle--tail-l,
  .doodle--mid-r,  .doodle--mid-l,
  .doodle--hero,   .doodle--hero-l { right: -18px; left: auto; }
  .doodle--head-l, .doodle--tail-l, .doodle--mid-l { left: -18px; right: auto; }
  .doodle--hero-l { left: -18px; }
}

@media (max-width: 820px) {
  /* No gutter at all. Keep the two that sit in open space at the top and
     bottom of a section, drop the ones that would land beside body copy. */
  .doodle--mid-l, .doodle--mid-r,
  .doodle--head-l, .doodle--tail-l,
  .doodle--hero-l { display: none; }
  .doodle { opacity: 0.18; }
  .doodle--head-r, .doodle--tail-r, .doodle--hero { right: -6px; }
}

@media print {
  .paper-grain, .doodle { display: none; }
}