/* Home and guide pages. */
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 36rem; letter-spacing: -.008em; }
.sub { color: var(--muted); max-width: 40rem; margin-top: var(--s-3); }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-6); }
.cta-note { color: var(--muted); font-size: var(--fs-small); max-width: 26rem; }

/* hero: the headline beside a real letter, the one soft wash on the site */
.hero { position: relative; overflow: hidden; padding: var(--s-8) 0 var(--s-9);
  background: radial-gradient(60rem 30rem at 85% -10%, #EEF2FF 0%, rgba(238,242,255,.55) 35%, rgba(255,255,255,0) 70%), #fff; }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--border); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.032em; max-width: 13ch; }
.hero .lead { margin-top: var(--s-5); }
.hero-sheet { position: relative; height: 560px; }
.hero-sheet .sample { position: absolute; inset: 0 0 auto 0; margin: 0; }
.hero-sheet .sheet { box-shadow: var(--shadow-3); max-height: 520px; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent); }
.hero-sheet .sample.tilt .sheet { transform: rotate(1.2deg); transform-origin: 30% 10%; }
.hero-sheet figcaption { margin-top: var(--s-4); }
.sample { margin: 0; }
.sample figcaption { color: var(--muted); font-size: var(--fs-small); margin-top: var(--s-3); }
@media (max-width: 959px) {
  .hero { padding: var(--s-7) 0 var(--s-7); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero-sheet { height: auto; }
  .hero-sheet .sample { position: static; }
  .hero-sheet .sheet { max-height: 400px; }
}
@media (max-width: 519px) { .hero-sheet .sheet { max-height: 340px; } .hero-sheet .sample.tilt .sheet { transform: none; } }

/* sections */
.band { padding: var(--s-8) 0; }
.hearings { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hearings a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: var(--r-pill); background: #fff;
  box-shadow: var(--shadow-1); color: var(--ink); text-decoration: none; font-weight: 500; transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.hearings a:hover { color: var(--accent); box-shadow: 0 0 0 1px var(--accent-line), 0 4px 12px rgba(43,75,206,.10); transform: translateY(-1px); }

.parts-sec { padding: var(--s-9) 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.parts-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.parts { list-style: none; counter-reset: p; margin: var(--s-6) 0 0; padding: 0; }
.parts li { counter-increment: p; position: relative; padding: 14px 0 14px 48px; border-top: 1px solid var(--border); color: var(--ink-2); }
.parts li:last-child { border-bottom: 1px solid var(--border); }
.parts li::before { content: counter(p); position: absolute; left: 0; top: 13px; width: 28px; height: 28px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-1); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }
.parts b { color: var(--ink); font-weight: 600; }
.check-demo { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s-6); }
.demo-title { font-weight: 600; letter-spacing: -.01em; margin-bottom: var(--s-4); }
.demo-line { font-family: var(--font-letter); font-size: 1.3rem; }
.demo-line mark { background: var(--mark); text-decoration: underline wavy var(--mark-line) 1px; text-underline-offset: .22em; padding: 0 .1em; border-radius: 2px; }
.demo-why { margin-top: var(--s-2); color: var(--ink-2); }
.demo-foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--fs-small); }
@media (max-width: 899px) { .parts-sec { padding: var(--s-8) 0; } .parts-grid { grid-template-columns: 1fr; gap: var(--s-7); } .check-demo { padding: var(--s-5); } }

.why { padding: var(--s-9) 0; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); margin-top: var(--s-7); }
.three > div { padding-top: var(--s-5); border-top: 1px solid var(--ink); }
.three .num { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); margin-bottom: var(--s-3); font-variant-numeric: tabular-nums; }
.three h3 { margin-bottom: var(--s-2); }
.three p { color: var(--ink-2); }
@media (max-width: 799px) { .why { padding: var(--s-8) 0; } .three { grid-template-columns: 1fr; gap: var(--s-5); margin-top: var(--s-6); } }

.cost { padding: var(--s-8) 0 var(--s-9); }
.cost-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s-8); align-items: start; }
.prices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.price { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s-6) var(--s-5) var(--s-5); }
.price h3 { font-size: 1.0625rem; }
.price .amount { font-size: 2.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; margin: var(--s-4) 0 var(--s-5); }
.price .amount span { font-size: var(--fs-small); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price ul { list-style: none; margin: 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--border); display: grid; gap: var(--s-3); color: var(--ink-2); font-size: var(--fs-small); }
.price li { position: relative; padding-left: 20px; }
.price li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 899px) { .cost-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
@media (max-width: 599px) { .prices { grid-template-columns: 1fr; } }

.faq-sec { padding: var(--s-8) 0; border-top: 1px solid var(--border); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: var(--s-8); }
.faq details { border-bottom: 1px solid var(--border); }
.faq details:first-child { border-top: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  min-height: 60px; padding: 14px 0; font-weight: 500; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform var(--dur) var(--ease); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding: 0 var(--s-6) var(--s-5) 0; color: var(--ink-2); }
@media (max-width: 899px) { .faq-grid { grid-template-columns: 1fr; gap: var(--s-4); } }

.final { padding: var(--s-7) 0 0; }
.final-in { background: var(--ink); color: #fff; border-radius: var(--r-xl); padding: var(--s-8) var(--s-7); display: grid; justify-items: start; gap: var(--s-4);
  background-image: radial-gradient(40rem 20rem at 100% 0%, rgba(43,75,206,.45), rgba(15,23,41,0) 70%); }
.final h2 { color: #fff; max-width: 20ch; }
.final p { color: #C9CFDB; max-width: 32rem; }
.final .btn { margin-top: var(--s-3); background: #fff; color: var(--ink); }
.final .btn:hover { background: var(--accent-soft); color: var(--ink); }
.final .btn:focus-visible { box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
@media (max-width: 599px) { .final-in { padding: var(--s-7) var(--s-5); border-radius: var(--r-lg); } }

/* ---------- round 2: a richer hero (tinted desk, a second sheet behind, the real question screen floating) ---------- */
.hero { background: radial-gradient(56rem 30rem at 92% 0%, #E6ECFF 0%, rgba(236,240,255,.6) 40%, rgba(255,255,255,0) 72%),
  radial-gradient(30rem 20rem at 0% 100%, #F4F1FF 0%, rgba(255,255,255,0) 70%), #fff; }
.hero-sheet { height: 600px; }
.hero-desk { position: absolute; inset: 24px -72px -56px 44px; border-radius: 32px;
  background: linear-gradient(150deg, #DDE4FF 0%, #E9E6FD 55%, #F3F1FE 100%); box-shadow: inset 0 0 0 1px rgba(43,75,206,.08); }
.hero-stack { position: absolute; top: 46px; left: 76px; right: 6px; height: 470px; background: #fff; border-radius: 4px;
  transform: rotate(-3.2deg); box-shadow: 0 0 0 1px rgba(15,23,41,.08), 0 10px 30px rgba(15,23,41,.08); opacity: .9; }
.hero-sheet .sample { position: absolute; inset: 20px 0 auto 56px; }
.hero-sheet .desk { background: none; padding: 0; box-shadow: none; border-radius: 0; }
.hero-sheet .sheet { box-shadow: var(--paper-shadow); max-height: 500px; }
.hero-sheet figcaption { margin-top: var(--s-3); color: #3A4560; font-weight: 500; }
.hero-card { position: absolute; left: -8px; bottom: 54px; width: 300px; background: #fff; border-radius: 16px; padding: 16px 18px 18px;
  box-shadow: 0 0 0 1px rgba(15,23,41,.07), 0 12px 28px rgba(15,23,41,.12), 0 30px 60px rgba(43,75,206,.10); }
.hc-step { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.hc-step span { margin: 0 4px; color: var(--border-input); }
.hc-bar { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.hc-bar li { height: 3px; border-radius: 3px; background: var(--surface-2); }
.hc-bar li.d { background: var(--accent); opacity: .45; }
.hc-bar li.n { background: var(--accent); }
.hc-q { font-weight: 600; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.015em; color: var(--ink); }
@media (max-width: 959px) {
  .hero-sheet { height: auto; padding: 28px 0 8px; }
  .hero-desk { inset: 0 calc(-1 * var(--gutter)) -24px calc(-1 * var(--gutter)); border-radius: 24px; }
  .hero-stack { top: 44px; left: 22px; right: 22px; height: 360px; }
  .hero-sheet .sample { position: relative; inset: auto; margin: 0 6px; }
  .hero-sheet .sheet { max-height: 400px; }
  .hero-card { left: auto; right: 4px; bottom: 56px; width: min(280px, 78%); }
}
@media (max-width: 519px) { .hero-card { display: none; } .hero-sheet .sheet { max-height: 340px; } .hero-stack { height: 300px; } }

/* small colour touches */
.three .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: var(--fs-small); }
.three > div { border-top-color: var(--border); }
.parts-sec { background: linear-gradient(180deg, #F5F7FC, #EEF2FA); }
.price { box-shadow: var(--paper-shadow); }
.prose .sample .sheet { max-width: none; }
/* round 2 tune: the card sits over the letter, not the caption; the second sheet peeks out */
@media (min-width: 960px) {
  .hero-card { bottom: 124px; }
  .hero-stack { top: 64px; left: 30px; right: 40px; height: 440px; transform: rotate(-4.5deg); }
  .hero-sheet figcaption { padding-left: 4px; }
}
@media (min-width: 960px) { .hero-sheet .sample { inset: 52px 28px auto 64px; } .hero-stack { top: 92px; } .hero-card { bottom: 96px; } }
/* round 2, look review: panel lined up with the content column; the letter fades inside its own paper edge */
@media (min-width: 960px) { .hero-desk { right: 0; } .hero-sheet .sample { right: 40px; } .hero-card { bottom: 56px; } .hero-stack { left: 44px; right: 60px; } }
.hero-desk { background: linear-gradient(150deg, #E2E8FB 0%, #E6E9FB 55%, #EEF1FC 100%); }
.hero-sheet .sheet { position: relative; -webkit-mask-image: none; mask-image: none; }
.hero-sheet .sheet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; background: linear-gradient(rgba(255,255,255,0), #fff 80%); pointer-events: none; }