/* Landing page. Shares tokens and components with the course (app.css). */

.landing main > section { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.landing h2 { font: 900 clamp(1.75rem, 5vw, 2.8rem)/1.05 var(--f-display); font-stretch: 118%; letter-spacing: -.02em; max-width: 22ch; }
.landing h2 em { font-style: normal; color: var(--biro); }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: .88rem; }
.btn.wide { width: 100%; }

/* ——— nav */
.lnav {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px;
  padding: 10px var(--gutter); background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule);
}
.lnav nav { display: none; gap: 20px; margin-left: auto; }
.lnav nav a { color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: .92rem; }
.lnav nav a:hover { color: var(--biro); }
.lnav .btn { margin-left: auto; }
@media (min-width: 760px) { .lnav nav { display: flex; } .lnav .btn { margin-left: 0; } }

/* ——— hero */
.hero { display: grid; gap: 34px; padding-top: 36px !important; padding-bottom: 28px !important; align-items: center; }
@media (min-width: 960px) { .hero { grid-template-columns: 1.05fr 1fr; padding-top: 72px !important; gap: 48px; } }
.hero h1 { font: 900 clamp(2.4rem, 8.6vw, 4.4rem)/.98 var(--f-display); font-stretch: 118%; letter-spacing: -.03em; margin-bottom: 20px; }
@media (min-width: 960px) { .hero h1 { font-size: clamp(3rem, 4.6vw, 4.4rem); } }
.hl {
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--hi) 85%, transparent) 58%, color-mix(in srgb, var(--hi) 85%, transparent) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em;
}
:root[data-theme="dark"] .hl { background: none; color: var(--hi); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl { background: none; color: var(--hi); } }
.lede { font-size: clamp(1.05rem, 2.6vw, 1.22rem); color: var(--ink-2); max-width: 40ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 10px; }
.hero-note { font-size: .88rem; color: var(--ink-3); }

.hero-demo { margin: 0; position: relative; }
.demo-paper {
  border-radius: 18px; border: 1px solid var(--rule); padding: 16px 14px 14px; box-shadow: var(--shadow-lift);
  background-color: var(--card);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 20px 20px; background-position: -1px -1px;
}
.demo-q { font-weight: 700; font-size: .98rem; margin-bottom: 6px; background: var(--card); display: inline-block; padding: 2px 4px; border-radius: 6px; }
.demo-q span { font: 700 .7rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--biro); padding: 3px 6px; border-radius: 5px; margin-right: 6px; vertical-align: 2px; }
:root[data-theme="dark"] .demo-q span { color: #0C1220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .demo-q span { color: #0C1220; } }
.demo-read { font: 400 .95rem var(--f-mono); text-align: center; background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; margin-top: 4px; }
.demo-read b { color: var(--biro); font-weight: 600; }
.demo-read b.red { color: var(--marker); }
.demo-read .got { display: block; margin-top: 6px; font: 700 1.2rem/1.2 var(--f-hand); color: var(--ok); }
.demo-pen { position: absolute; right: 6px; top: -30px; font-size: 1.35rem; transform: rotate(-3deg); opacity: 0; transition: opacity .4s, transform .4s; pointer-events: none; }
.demo-pen.show { opacity: 1; transform: rotate(-3deg) translateY(-4px); }
@media (max-width: 959px) { .demo-pen { top: auto; bottom: -34px; right: 8px; } .hero-demo { margin-bottom: 26px; } }

/* ——— semester strip */
.when { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 18px !important; }
@media (min-width: 720px) { .when { grid-template-columns: repeat(3, 1fr); } }
.when-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--rule); }
.when-item b { flex: none; font: 900 2rem/1 var(--f-display); font-stretch: 112%; color: var(--marker); min-width: 2.4ch; white-space: nowrap; }
.lnav .btn { white-space: nowrap; }
.when-item span { font-size: .92rem; color: var(--ink-2); line-height: 1.35; }

/* ——— problem */
.problem { padding-top: 88px !important; }
.pains { display: grid; gap: 12px; margin-top: 28px; }
@media (min-width: 760px) { .pains { grid-template-columns: repeat(3, 1fr); } }
.pains article { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px; }
.pain-n { font-size: 1.5rem; color: var(--ink-2); margin-bottom: 14px; min-height: 2.2rem; }
.pain-n.mono { font-family: var(--f-mono); font-size: 1.3rem; }
.pain-n.pen { font-size: 1.8rem; }
.pains h3, .how-card h3 { font: 800 1.2rem var(--f-display); font-stretch: 112%; margin-bottom: 6px; }
.pains p:last-child, .how-card p { color: var(--ink-2); margin: 0; font-size: .98rem; }

/* ——— how */
.how { padding-top: 88px !important; }
.how-grid { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 760px) { .how-grid { grid-template-columns: 1fr 1fr; } }
.how-card { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 18px; }
.how-card.feature { border: 2px solid var(--marker); }
.how-vis {
  position: relative; height: 172px; border-radius: 12px; margin-bottom: 16px; overflow: hidden; display: grid; place-items: center; padding: 10px;
  background-color: var(--paper);
  background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 16px 16px;
}
.how-vis .curve { max-height: 152px; }
.how-vis .scene3d { margin: 0; width: 100%; border: 0; background: transparent; }
.demo-paper .scene3d { margin-top: 8px; }
.demo-paper .range.big { margin-top: 10px; }
.vis-table table { border-collapse: collapse; font: 400 .9rem var(--f-mono); background: var(--card); border-radius: 8px; }
.vis-table th, .vis-table td { padding: 7px 9px; text-align: center; }
.vis-table th { color: var(--ink-2); }
.vis-table tr:first-child th, .vis-table tr:first-child td { border-bottom: 1.5px solid var(--ink-2); font-weight: 700; color: var(--ink-2); }
.vis-table .c, .vis-table .r td, .vis-table .r th { background: var(--biro-soft); }
.vis-table td.x { background: var(--biro); color: #fff; font-weight: 600; border-radius: 6px; }
:root[data-theme="dark"] .vis-table td.x { color: #0C1220; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vis-table td.x { color: #0C1220; } }
.vis-calc { align-content: center; gap: 8px; justify-items: start; padding: 14px 18px; }
.vc-line { font-family: var(--f-math); font-size: 1.25rem; background: var(--card); padding: 6px 10px; border-radius: 8px; }
.vc-line b { font: 600 1.1rem var(--f-mono); color: var(--biro); text-decoration: line-through; text-decoration-color: var(--marker); text-decoration-thickness: 2px; }
.vis-calc .pen { font-size: 1.3rem; }
.vis-mark .drill-score { width: 54px; height: 54px; top: 8px; right: 10px; }
.vis-mark .drill-score span { font-size: 1.6rem; }

/* ——— inside */
.inside { padding-top: 88px !important; }
.parts { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 860px) { .parts { grid-template-columns: 1fr 1fr; } }
.lpart { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 18px 18px 8px; }
.lpart h3 { font: 800 1.15rem var(--f-display); font-stretch: 112%; margin-bottom: 10px; display: flex; flex-direction: column; gap: 2px; }
.lpart h3 span { font: 700 .72rem var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--marker); }
.lpart ol { list-style: none; margin: 0; padding: 0; }
.lpart li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px dashed var(--rule); }
.ls-n { font: 700 .82rem var(--f-mono); color: var(--marker); }
.ls-t { font-weight: 700; }
.ls-t em { font: 600 .68rem var(--f-mono); font-style: normal; text-transform: uppercase; letter-spacing: .05em; color: var(--marker); background: var(--marker-soft); padding: 2px 6px; border-radius: 5px; margin-left: 8px; white-space: nowrap; vertical-align: 2px; }
.ls-free { font: 700 .78rem var(--f-mono); color: var(--ok); white-space: nowrap; }
.extras { display: grid; gap: 10px; margin-top: 14px; }
@media (min-width: 760px) { .extras { grid-template-columns: repeat(4, 1fr); } }
.extras div { padding: 16px; border-radius: var(--r); border: 1.5px dashed var(--rule-2); display: flex; flex-direction: column; gap: 4px; }
.extras b { font-family: var(--f-display); font-stretch: 112%; }
.extras span { font-size: .9rem; color: var(--ink-2); }

/* ——— who */
.who { padding-top: 88px !important; }
.who blockquote { margin: 0; position: relative; padding: 6px 0 6px 28px; max-width: 760px; }
.who blockquote::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--marker); }
.who p { font: 700 clamp(1.25rem, 3.6vw, 1.7rem)/1.35 var(--f-body); }
.who footer { display: flex; flex-direction: column; font-size: .92rem; color: var(--ink-2); }
.who footer b { color: var(--ink); }

/* ——— price */
.price { padding-top: 88px !important; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.price-card { width: 100%; max-width: 480px; min-width: 0; background: var(--card); border: 2px solid var(--ink); border-radius: 20px; padding: 26px 22px; box-shadow: 8px 8px 0 var(--biro); }
.price-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; margin: 6px 0 18px; }
.amount { font: 900 clamp(3.4rem, 15vw, 4.4rem)/.9 var(--f-display); font-stretch: 112%; margin: 0; }
.amount small { font-size: 1.3rem; vertical-align: top; margin-right: 2px; }
.was { font-size: .88rem; color: var(--ink-2); margin: 0 0 6px; }
.ticks { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: "✓"; position: absolute; left: 2px; top: -3px; font: 700 1.35rem var(--f-hand); color: var(--marker); }
.price-note { margin: 12px 0 0; font-size: .9rem; color: var(--ink-2); text-align: center; }
.price-note.flash { color: var(--ink); background: var(--hi); border-radius: 8px; padding: 8px 10px; color: #1d1a05; }

/* ——— faq */
.faq { padding-top: 88px !important; padding-bottom: 40px !important; max-width: 820px !important; }
.faq h2 { margin-bottom: 18px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 700; font-size: 1.05rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; font: 400 1.6rem var(--f-mono); color: var(--biro); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-2); padding-bottom: 16px; margin: 0; max-width: 64ch; }

.lfoot { border-top: 1px solid var(--rule); padding: 22px var(--gutter) 34px; text-align: center; font-size: .85rem; color: var(--ink-3); }
.lfoot p { margin: 0; }