/*
 * The landing page. FE-W-01.
 *
 * ==> THIS PALETTE IS NOT THE APP PALETTE, AND THAT IS DELIBERATE <==
 *
 * The token block below is cool white (#FFFFFF / #F2F5FB). The app's tokens in
 * static/css/tokens.css are warm paper (#FAF8F5), and docs/nneola-design-guide.html
 * explains why: the app is read for fifteen minutes a day on a tablet, often in
 * daylight, by a nine-year-old, and warm paper is easier on the eyes for that.
 *
 * A marketing page read once for ninety seconds on a laptop has no such
 * constraint. Do not unify these two files. Do not "fix" this one to match the
 * app. They are answering different questions and the difference is the answer.
 *
 * No JavaScript is loaded on this page, and none should be. It is static HTML
 * and CSS: no analytics, no tag manager, no cookie banner, no third-party
 * anything. The page tells parents there is no analytics on any screen their
 * child sees, and adding one would make the page a lie.
 *
 * The dark mode block is kept as written and works.
 */

:root{
  --page:#FFFFFF; --page-alt:#F2F5FB; --card:#FFFFFF;
  --border:#E1E5F0; --border-str:#C9D0E2;
  --ink:#16171C; --ink-muted:#585E70;
  --indigo:#2B3A67; --indigo-deep:#1E2A4E; --indigo-600:#47548A; --indigo-200:#B8C0D4; --indigo-050:#EAEEF8;
  --gold:#C88A2E; --gold-bright:#E5A63F; --gold-deep:#5C3F0C; --gold-mid:#8A6118; --gold-tint:#FCF1DC; --gold-line:#EBD3A6;
  --teal:#0E7C6B; --teal-tint:#E0F3EF; --teal-deep:#04342C;
  --amber:#B4690E; --amber-tint:#FCEEDA; --amber-deep:#412402;
  --radius:12px; --radius-lg:18px;
}
@media (prefers-color-scheme: dark){
  :root{
    --page:#131519; --page-alt:#191C24; --card:#1D2029;
    --border:#2C3140; --border-str:#3E4457;
    --ink:#EEF0F5; --ink-muted:#9BA2B4;
    --indigo:#8E9BC4; --indigo-deep:#1A2440; --indigo-600:#6E7BA6; --indigo-200:#3B4462; --indigo-050:#222839;
    --gold:#D9A253; --gold-bright:#E5B36A; --gold-deep:#F3E0BE; --gold-mid:#C89A5A; --gold-tint:#332810; --gold-line:#57451D;
    --teal:#4FBFA7; --teal-tint:#0F332C; --teal-deep:#C3E8DE;
    --amber:#D89544; --amber-tint:#33230C; --amber-deep:#F3DBBB;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);
  font:400 17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--indigo)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
.narrow{max-width:700px;margin:0 auto}

nav{background:var(--indigo-deep);position:sticky;top:0;z-index:20}
.nav-in{max-width:1040px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:500;font-size:17px;text-decoration:none;color:#fff}
.brand svg{width:26px;height:26px;flex:none}
.nav-links{display:flex;align-items:center;gap:22px;font-size:15px}
.nav-links a{text-decoration:none;color:#C3CADF}
.nav-links a:hover{color:#fff}
.nav-links .btn-sm{background:var(--gold-bright);color:#3D2907;padding:9px 17px;border-radius:var(--radius);font-weight:500}
.nav-links .btn-sm:hover{background:#F0B85A;color:#3D2907}
/* On a phone, hide only the IN-PAGE anchors.
 *
 * This used to hide every link except the gold button, which left a visitor on
 * a phone with no way to log in and — once a learner link was added — no way to
 * reach her sign-in at all. She types nneola.com; that was a dead end for her.
 *
 * "How it works" and "Questions" jump to sections further down a page she is
 * already scrolling, so losing them costs a scroll. "Log in" and "Learner" go
 * somewhere else entirely and have no other route from here — the footer
 * carries Log in, at the bottom of a long page, and carries nothing for her.
 *
 * `[href*="#"]` rather than a class: the distinction IS "does this leave the
 * page", and the href is where that is written down. A new in-page anchor gets
 * this behaviour without anybody remembering.
 *
 * Wrapping rather than a disclosure. This page loads no JavaScript at all and
 * that is not negotiable; a CSS-only toggle would put a hidden checkbox in the
 * markup of a page whose whole argument is that it is plain. Two short links
 * fit beside the button, and wrap under it if they do not. */
@media(max-width:600px){
  .nav-links{flex-wrap:wrap;gap:14px;justify-content:flex-end}
  .nav-links a[href*="#"]{display:none}
  .nav-links{font-size:14px}
}

.hero{background:var(--indigo-deep);color:#fff;padding:76px 0 88px;text-align:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:50%;bottom:-90px;width:180px;height:180px;
  background:var(--gold);transform:translateX(-50%) rotate(45deg);opacity:.14;border-radius:28px}
.hero .inner{position:relative;z-index:1}
.eyebrow{display:inline-block;font-size:13px;font-weight:500;letter-spacing:.05em;color:#3D2907;
  background:var(--gold-bright);padding:6px 14px;border-radius:99px;margin:0 0 22px}
h1{font-size:clamp(34px,5.8vw,56px);line-height:1.06;font-weight:500;letter-spacing:-.03em;
  margin:0 auto 22px;max-width:18ch;color:#fff}
h1 em{font-style:normal;color:var(--gold-bright)}
.hero .sub{font-size:19px;color:#C3CADF;margin:0 auto 34px;max-width:56ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:16px}
.btn{display:inline-block;background:var(--gold-bright);color:#3D2907;text-decoration:none;font-size:16px;
  font-weight:500;padding:16px 28px;border-radius:var(--radius);min-height:52px;line-height:1.3}
.btn:hover{background:#F0B85A}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.34)}
.btn-ghost:hover{background:rgba(255,255,255,.09)}
.friction{font-size:14px;color:#9AA4C0;margin:0}

.hero-art{max-width:620px;margin:48px auto -140px;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:0 24px 60px rgba(12,18,38,.34)}
.spacer{height:150px}

.shot{max-width:440px;margin:0 auto;background:var(--card);border:0.5px solid var(--border);
  border-radius:var(--radius-lg);padding:26px 24px 22px;text-align:left}
.shot-top{height:5px;background:var(--indigo-050);border-radius:3px;margin-bottom:26px;overflow:hidden}
.shot-top i{display:block;height:100%;width:62%;background:var(--indigo)}
.shot-prob{font-size:54px;font-weight:500;text-align:center;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-bottom:24px;color:var(--ink)}
.shot-row{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:var(--radius);margin-bottom:10px}
.shot-row:last-child{margin-bottom:0}
.shot-row b{font-variant-numeric:tabular-nums;font-weight:500;font-size:15px;width:44px;flex:none}
.shot-row span{font-size:14.5px}
.r-ok{background:var(--teal-tint);color:var(--teal-deep)}
.r-slow{background:var(--amber-tint);color:var(--amber-deep)}

section{padding:84px 0}
.alt{background:var(--page-alt)}
h2{font-size:clamp(26px,3.6vw,34px);font-weight:500;letter-spacing:-.024em;margin:0 0 12px;max-width:24ch}
.center h2,.center .lede{margin-left:auto;margin-right:auto;text-align:center}
h3{font-size:19px;font-weight:500;margin:0 0 8px}
p{margin:0 0 16px}
.lede{font-size:18px;color:var(--ink-muted);margin-bottom:52px;max-width:58ch}

.cols{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:780px){.cols{grid-template-columns:repeat(3,1fr);gap:32px}}
.col{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius-lg);
  padding:0 0 26px;overflow:hidden}
.col img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--indigo-050)}
.col .body{padding:22px 24px 0}
.col .n{display:inline-block;font:500 12px/1 -apple-system,sans-serif;letter-spacing:.05em;
  color:var(--gold-mid);background:var(--gold-tint);padding:6px 10px;border-radius:99px;margin-bottom:14px}
.col p{color:var(--ink-muted);font-size:16px;margin:0}

.steps{display:grid;grid-template-columns:1fr;gap:0;max-width:700px;margin:0 auto}
.step{display:flex;gap:22px;padding:26px 0;border-top:0.5px solid var(--border)}
.step:first-child{border-top:none;padding-top:0}
.step .num{width:34px;height:34px;flex:none;border-radius:99px;background:var(--indigo);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500}
.step p{margin:0;color:var(--ink-muted);font-size:16px}

.honest{list-style:none;padding:0;margin:0;max-width:700px}
.honest li{padding:18px 0;border-top:0.5px solid var(--border);display:flex;gap:18px;flex-wrap:wrap}
.honest li:first-child{border-top:none;padding-top:0}
.honest b{font-weight:500;flex:none;width:165px}
.honest span{color:var(--ink-muted);flex:1;min-width:250px}

.fit{display:grid;grid-template-columns:1fr;gap:18px;max-width:820px;margin:0 auto}
@media(min-width:620px){.fit{grid-template-columns:1fr 1fr;gap:22px}}
.fit-col{background:var(--card);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:26px}
.fit-col ul{list-style:none;padding:0;margin:0}
.fit-col li{padding:9px 0 9px 24px;position:relative;color:var(--ink-muted);font-size:16px;line-height:1.5}
.fit-col li::before{position:absolute;left:0;top:9px;font-weight:500}
.yes li::before{content:"+";color:var(--teal)}
.no li::before{content:"\2013";color:var(--amber)}

.faq{max-width:700px}
.faq dt{font-weight:500;margin:0 0 6px}
.faq dd{margin:0 0 24px;color:var(--ink-muted)}
.faq dd:last-child{margin-bottom:0}

.close{background:var(--indigo-deep);color:#fff;text-align:center}
.close h2{color:#fff;margin-left:auto;margin-right:auto}
.close .lede{color:#C3CADF;margin-left:auto;margin-right:auto}

footer{padding:38px 0 60px;font-size:14px;color:var(--ink-muted)}
.foot-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ink-muted);text-decoration:none;margin-left:22px}
footer a:first-of-type{margin-left:0}
footer a:hover{color:var(--ink)}

/* ---- The features section, restructured -----------------------------------
   The source page expected three per-card images. Only one illustration was
   supplied, and it depicts the first feature (photographing a page) rather than
   all three, so the section carries one full-width image above three text
   columns instead. Cropping one square scene into three panels would have
   produced three meaningless crops.

   `.col img` above is left in place: it is the original author's rule and it is
   what per-card art would use if the other two illustrations are drawn later.

   The aspect-ratio and the width/height attributes on the <img> exist for the
   same reason — the space is reserved before the image loads, so the copy below
   does not jump down the page as it arrives. */
.feature-art{
  max-width:820px;
  margin:0 auto 44px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:0.5px solid var(--border);
}
.feature-art img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--indigo-050)}
@media(min-width:780px){
  .feature-art{max-width:520px}
}
.col-text{padding:26px 24px}