/* ===========================================================
   Aksum Math — shared stylesheet
   Aesthetic: "heirloom math workbook"
   cream paper · faint graph grid · espresso ink · indigo · gold ✓
   =========================================================== */

:root{
  --paper:        #F7F2E7;
  --paper-2:      #FCF9F1;
  --paper-deep:   #EFE7D4;
  --ink:          #211D16;
  --ink-soft:     #4A4337;
  --ink-faint:    #8A8169;
  --indigo:       #2E2B63;
  --indigo-lt:    #4541A0;
  --gold:         #C98A1E;
  --gold-lt:      #E0A93D;
  --gold-soft:    #F0D69A;
  --pine:         #3F6147;
  --line:         #DACFB6;
  --line-soft:    #E6DCC6;
  --rule:         rgba(33,29,22,.14);

  --maxw: 1140px;
  --gut: clamp(20px, 5vw, 64px);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --shadow-sm: 0 1px 2px rgba(33,29,22,.06), 0 4px 14px rgba(33,29,22,.06);
  --shadow-md: 0 4px 10px rgba(33,29,22,.07), 0 18px 40px rgba(33,29,22,.10);
  --shadow-lg: 0 10px 30px rgba(33,29,22,.10), 0 40px 80px rgba(46,43,99,.14);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background-color:var(--paper);
  /* faint graph-paper grid + warm paper grain */
  background-image:
    linear-gradient(rgba(46,43,99,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,43,99,.035) 1px, transparent 1px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  background-size: 26px 26px, 26px 26px, 160px 160px;
  line-height:1.6;
  font-size:18px;
  font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ---------- layout helpers ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block: clamp(56px, 9vw, 120px); position:relative; }
.divider{ height:1px; background:var(--rule); border:0; max-width:var(--maxw); margin-inline:auto; }

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--indigo-lt);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow .num{ color:var(--gold); }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); display:inline-block; }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.04; letter-spacing:-.015em; color:var(--ink); }
h1{ font-size:clamp(2.6rem, 6.4vw, 5rem); font-weight:600; font-optical-sizing:auto; }
h2{ font-size:clamp(2rem, 4.6vw, 3.4rem); }
h3{ font-size:clamp(1.35rem, 2.4vw, 1.85rem); }
.lead{ font-size:clamp(1.1rem,1.5vw,1.32rem); color:var(--ink-soft); line-height:1.5; }

.serif-i{ font-family:var(--serif); font-style:italic; font-weight:500; }
.gold{ color:var(--gold); }
.indigo{ color:var(--indigo); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--sans); font-weight:600; font-size:1rem;
  padding:.85em 1.5em; border-radius:2px; cursor:pointer;
  border:1.5px solid transparent; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--indigo); color:var(--paper-2); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); background:var(--indigo-lt); }
.btn-gold{ background:var(--gold); color:#2a1e06; box-shadow:0 2px 0 #9c6a12, var(--shadow-sm); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 2px 0 #9c6a12, var(--shadow-md); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-lg{ font-size:1.08rem; padding:1em 1.8em; }

.guarantee{ font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; color:var(--ink-faint); display:inline-flex; align-items:center; gap:.5em; }
.guarantee::before{ content:"↺"; color:var(--pine); font-size:1.1em; }

/* ---------- header / nav ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-weight:600; font-size:1.3rem; letter-spacing:-.01em; }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand small{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-top:-2px; }
.nav-links{ display:flex; align-items:center; gap:1.6rem; list-style:none; }
.nav-links a{ font-size:.95rem; font-weight:500; color:var(--ink-soft); position:relative; padding-block:4px; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--ink); }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--gold); transition:width .2s ease; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:.8rem; }
.menu-btn{ display:none; background:none; border:1px solid var(--rule); border-radius:2px; padding:.5em .7em; font-family:var(--mono); font-size:.8rem; cursor:pointer; color:var(--ink); }

/* offline/private chips */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.04em;
  padding:.4em .8em; border:1px solid var(--line); border-radius:100px;
  background:var(--paper-2); display:inline-flex; align-items:center; gap:.5em; color:var(--ink-soft);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--pine); display:inline-block; }
.chip.gold .dot{ background:var(--gold); }
.chip.indigo .dot{ background:var(--indigo-lt); }

/* ---------- hero ---------- */
.hero{ padding-top:clamp(40px,7vw,90px); padding-bottom:clamp(40px,7vw,80px); }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.hero h1{ margin:.35em 0 .5em; }
.hero h1 .answer{ position:relative; white-space:nowrap; color:var(--indigo); }
.hero h1 .answer::after{ content:""; position:absolute; left:-.05em; right:-.05em; bottom:.06em; height:.42em; background:var(--gold-soft); z-index:-1; transform:skewX(-12deg); }
.hero-cta{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:1.8rem 0 1.1rem; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:.4rem 1.3rem; font-family:var(--mono); font-size:.78rem; color:var(--ink-faint); letter-spacing:.03em; }
.hero-meta span{ display:inline-flex; align-items:center; gap:.5em; }
.hero-meta span::before{ content:"✓"; color:var(--pine); font-weight:700; }

/* app preview mock (placeholder for real screenshots) */
.device{
  background:#1B1937; border-radius:14px; padding:14px; box-shadow:var(--shadow-lg);
  border:1px solid #3a376a; position:relative; transform:rotate(1.2deg);
}
.device::before{ display:none; }
.device .bar{ display:flex; gap:6px; padding:2px 4px 12px; }
.device .bar i{ width:10px; height:10px; border-radius:50%; background:#4a4780; display:block; }
.screen{ background:linear-gradient(160deg,#232051,#1a1838); border-radius:8px; padding:26px 24px; color:#EDEBFF; font-family:var(--sans); min-height:330px; display:flex; flex-direction:column; }
.screen .topic{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#9D97E6; }
.screen .q{ font-family:var(--serif); font-size:1.9rem; margin:.5em 0 .1em; line-height:1.2; }
.screen .opts{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; }
.screen .opt{ border:1.5px solid #46427e; border-radius:6px; padding:.7em .9em; font-size:1.05rem; background:#211e47; }
.screen .opt.correct{ border-color:var(--gold-lt); background:rgba(224,169,61,.16); color:#FFE6AE; font-weight:600; position:relative; }
.screen .opt.correct::after{ content:"✓ Correct!"; position:absolute; right:.7em; top:50%; transform:translateY(-50%); font-family:var(--mono); font-size:.66rem; color:var(--gold-lt); letter-spacing:.06em; }
.screen .axi-row{ display:flex; align-items:center; gap:10px; margin-top:18px; color:#C9C4FF; font-size:.92rem; }

/* ---------- generic cards / grids ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.card{
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:4px;
  padding:clamp(22px,3vw,32px); box-shadow:var(--shadow-sm); position:relative;
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.card .ic{ width:46px; height:46px; margin-bottom:1rem; }
.card h3{ font-size:1.3rem; margin-bottom:.45em; }
.card p{ color:var(--ink-soft); font-size:1.02rem; }
.card .tag{ position:absolute; top:18px; right:18px; font-family:var(--mono); font-size:.66rem; color:var(--ink-faint); }

.section-head{ max-width:720px; margin-bottom:clamp(32px,5vw,56px); }
.section-head h2{ margin:.3em 0 .35em; }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head.center .eyebrow::before{ display:none; }

/* feature list rows */
.feat-row{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; padding:1.3rem 0; border-bottom:1px solid var(--rule); }
.feat-row:last-child{ border-bottom:0; }
.feat-row .n{ font-family:var(--mono); font-size:.8rem; color:var(--gold); padding-top:.3em; }
.feat-row h3{ font-size:1.25rem; margin-bottom:.2em; }
.feat-row p{ color:var(--ink-soft); }

/* story strip */
.story{ background:#1B1838; color:var(--paper-2); border-radius:6px; padding:clamp(30px,5vw,60px); position:relative; overflow:hidden; }
.story::before{ content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:26px 26px; }
.story *{ position:relative; }
.story .eyebrow{ color:var(--gold-soft); }
.story .eyebrow::before{ background:var(--gold-soft); }
.story h2{ color:var(--paper-2); max-width:780px; }
.story p{ color:#E6E3F5; max-width:680px; margin-top:1rem; }
.story .who{ font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--gold-soft); margin-top:1.6rem; }

/* pricing card */
.price-card{ background:var(--paper-2); border:1.5px solid var(--ink); border-radius:6px; padding:clamp(28px,4vw,44px); box-shadow:var(--shadow-md); max-width:460px; position:relative; }
.price-card .ribbon{ position:absolute; top:-13px; left:28px; background:var(--gold); color:#2a1e06; font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; padding:.3em .8em; border-radius:2px; font-weight:500; }
.price-amt{ font-family:var(--serif); font-size:clamp(3rem,7vw,4.5rem); font-weight:600; line-height:1; }
.price-amt .cur{ font-size:.45em; vertical-align:super; color:var(--ink-faint); }
.price-amt .once{ font-family:var(--mono); font-size:.9rem; color:var(--pine); letter-spacing:.04em; display:block; margin-top:.4em; font-weight:500; }
.price-list{ list-style:none; margin:1.4rem 0; }
.price-list li{ padding:.5em 0 .5em 1.8em; position:relative; border-bottom:1px dashed var(--line-soft); color:var(--ink-soft); }
.price-list li::before{ content:"✓"; position:absolute; left:0; color:var(--pine); font-weight:700; }

/* faq */
.faq-item{ border-bottom:1px solid var(--rule); }
.faq-item summary{ cursor:pointer; list-style:none; padding:1.25rem 2.5rem 1.25rem 0; font-family:var(--serif); font-size:1.2rem; font-weight:600; position:relative; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; right:0; top:1.1rem; font-family:var(--mono); font-size:1.5rem; color:var(--gold); transition:transform .2s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--ink-soft); padding-bottom:1.3rem; max-width:760px; }

/* callout / steps for install */
.steps{ counter-reset:step; display:grid; gap:1rem; }
.step{ background:var(--paper-2); border:1px solid var(--line-soft); border-left:3px solid var(--indigo); border-radius:4px; padding:1.3rem 1.5rem 1.3rem 3.6rem; position:relative; box-shadow:var(--shadow-sm); }
.step::before{ counter-increment:step; content:counter(step); position:absolute; left:1.1rem; top:1.2rem; font-family:var(--mono); font-weight:500; color:var(--paper-2); background:var(--indigo); width:1.7em; height:1.7em; border-radius:50%; display:grid; place-items:center; font-size:.85rem; }
.step h4{ font-size:1.12rem; margin-bottom:.2em; }
.step p{ color:var(--ink-soft); font-size:1rem; }
.warnbox{ background:#FBF1D8; border:1px solid var(--gold-soft); border-left:3px solid var(--gold); border-radius:4px; padding:1.1rem 1.3rem; font-size:.98rem; color:var(--ink-soft); }
.warnbox strong{ color:var(--ink); }

/* os tabs */
.os-switch{ display:inline-flex; border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-bottom:2rem; }
.os-switch button{ font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; padding:.7em 1.4em; background:var(--paper-2); border:0; cursor:pointer; color:var(--ink-soft); }
.os-switch button[aria-selected="true"]{ background:var(--indigo); color:var(--paper-2); }

/* prose pages (privacy/about) */
.prose{ max-width:760px; }
.prose p{ margin-bottom:1.15rem; color:var(--ink-soft); }
.prose h2{ font-size:1.7rem; margin:2.2rem 0 .8rem; }
.prose h3{ font-size:1.25rem; margin:1.6rem 0 .5rem; }
.prose ul{ margin:0 0 1.2rem 1.2rem; color:var(--ink-soft); }
.prose li{ margin-bottom:.5rem; }
.prose strong{ color:var(--ink); }
.lastupd{ font-family:var(--mono); font-size:.76rem; color:var(--ink-faint); letter-spacing:.04em; }

/* placeholder note (editor reminders) */
.note{ font-family:var(--mono); font-size:.74rem; color:#9c6a12; background:#FBF1D8; border:1px dashed var(--gold); border-radius:3px; padding:.5em .8em; display:inline-block; margin:.4rem 0; }

/* testimonials (placeholders) */
.quote{ background:var(--paper-2); border:1px solid var(--line-soft); border-radius:4px; padding:1.8rem; box-shadow:var(--shadow-sm); }
.quote p{ font-family:var(--serif); font-style:italic; font-size:1.15rem; color:var(--ink); line-height:1.45; }
.quote .by{ font-family:var(--mono); font-size:.74rem; color:var(--ink-faint); margin-top:1rem; letter-spacing:.04em; }
.quote .stars{ color:var(--gold); letter-spacing:.15em; margin-bottom:.7rem; }

/* big CTA band */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:780px; margin:0 auto .6em; }
.cta-band .lead{ max-width:560px; margin:0 auto 2rem; }

/* footer */
.site-foot{ background:var(--ink); color:#D4CCC0; padding-block:clamp(48px,7vw,80px) 2rem; }
.site-foot a{ color:#D4CCC0; }
.site-foot a:hover{ color:var(--gold-lt); }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; margin-bottom:3rem; }
.foot-grid h4{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:1rem; font-weight:500; }
.foot-grid ul{ list-style:none; display:grid; gap:.6rem; }
.foot-grid li a{ font-size:.95rem; color:#C4BCAD; }
.foot-brand .brand{ color:var(--paper-2); }
.foot-brand p{ font-size:.92rem; color:#A79B8F; max-width:300px; margin-top:1rem; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); padding-top:1.6rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-family:var(--mono); font-size:.74rem; color:#9A8E82; letter-spacing:.03em; }

/* reveal-on-load */
.reveal{ opacity:0; transform:translateY(16px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.d1{ animation-delay:.05s } .d2{ animation-delay:.15s } .d3{ animation-delay:.25s } .d4{ animation-delay:.35s } .d5{ animation-delay:.45s }
@keyframes rise{ to{ opacity:1; transform:none; } }

:focus-visible{ outline:2.5px solid var(--indigo-lt); outline-offset:3px; border-radius:2px; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .hero-grid{ grid-template-columns:1fr; }
  .device{ transform:none; max-width:520px; margin-inline:auto; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
  .nav-links{
    position:fixed; inset:62px 0 auto 0; flex-direction:column; align-items:flex-start;
    gap:0; background:var(--paper-2); border-bottom:1px solid var(--rule); padding:1rem var(--gut);
    box-shadow:var(--shadow-md); display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; padding:.8rem 0; border-bottom:1px solid var(--rule); }
  .menu-btn{ display:inline-block; }
}
@media (max-width: 560px){
  body{ font-size:17px; }
  .grid-3{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ justify-content:center; }
  .screen .opts{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ---------- pillar strip + no-subscription badge (Rev. 2) ---------- */
.pillars{ display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; margin-top:1.3rem; padding-top:1.1rem;
  border-top:1px solid var(--rule); font-family:var(--mono); font-size:.73rem; letter-spacing:.02em; color:var(--ink-soft); }
.pillars span{ display:inline-flex; align-items:center; gap:.45em; }
.pillars span::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block; }
.nosub{ display:inline-flex; align-items:center; gap:.5em; font-family:var(--mono); font-size:.74rem;
  letter-spacing:.03em; color:var(--pine); margin:.5rem 0 0; }
.nosub::before{ content:"\2713"; font-weight:700; color:var(--pine); }