/*
  Equation Pad website styles (index, pricing and the legal pages).
  Idea: the site looks like the product. Pages sit on squared calculation paper; the hero is a
  calculation sheet with a title block; the app's red cross cursor marks where to start.
  Fonts are self-hosted (assets/fonts/fonts.css). Brand colours come from the logo.
*/
@import url("../fonts/fonts.css");

:root{
  --blue:#1778B4;        /* logo E */
  --blue-deep:#0F5A88;   /* text links and pressed states on white */
  --green:#2EA961;       /* logo pi */
  --green-deep:#1D8148;  /* green text on white (AA contrast) */
  --ink:#13212C;
  --muted:#4E6272;
  --paper:#FFFFFF;
  --grid:#DCE9F2;        /* squared-paper lines */
  --rule:#9FB4C4;        /* title-block lines */
  --cross:#D0312D;       /* the app's cursor */
  --wash:#F3F8FB;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-deep);text-underline-offset:3px}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
:not(pre)>code{font:500 .86em/1 var(--f-mono);background:#eef5fa;border:1px solid var(--grid);border-radius:4px;padding:2px 6px;white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;z-index:50}
.skip:focus{left:8px}

/* squared paper, used behind the hero and the closing call to action */
.paper{background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:24px 24px;background-position:-1px -1px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:20;background:var(--blue);color:#fff;border-bottom:4px solid var(--green)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font:600 22px/1 var(--f-display);letter-spacing:.02em}
.brand svg{width:48px;height:24px}
.brand:hover{color:#fff}
.nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav a{color:#fff;text-decoration:none;font-weight:500;font-size:16px;padding:8px 12px;border-radius:6px}
.nav a:hover{background:rgba(255,255,255,.14);color:#fff}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 #fff;border-radius:0}
.nav .btn-app{background:#fff;color:var(--blue-deep);font-weight:600;margin-left:6px}
.nav .btn-app:hover{background:#e9f3fa;color:var(--blue-deep)}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:6px;padding:6px 10px;font:inherit;font-size:15px}
@media (max-width:760px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--blue);flex-direction:column;align-items:stretch;padding:8px 16px 16px;gap:2px;border-bottom:4px solid var(--green)}
  .nav.open{display:flex}
  .nav .btn-app{margin:8px 0 0;text-align:center}
}

/* ---------- buttons and forms ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:8px;padding:13px 22px;font:600 17px/1 var(--f-body);cursor:pointer;text-decoration:none}
.btn-primary{background:var(--green);color:#fff}
.btn-ghost{background:#fff;color:var(--blue-deep);border:1.5px solid var(--rule);padding:9px 16px;font-size:15px}.btn-ghost:hover{border-color:var(--blue)}
.btn-primary:hover{background:var(--green-deep);color:#fff}
.btn-quiet{background:transparent;color:var(--blue-deep);box-shadow:inset 0 0 0 2px var(--blue)}
.btn-quiet:hover{background:#eaf3fa}
.field{display:block;width:100%;padding:13px 14px;border:1.5px solid var(--rule);border-radius:6px;background:#fff;font:inherit;font-size:17px;color:var(--ink)}
.field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(23,120,180,.22)}
.form-note{font-size:14px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.form-msg{margin:12px 0 0;font-weight:500;font-size:16px}
.form-msg:empty{display:none}
.form-msg.ok{color:var(--green-deep)}
.form-msg.err{color:var(--cross)}
.hp{position:absolute;left:-5000px}

/* ---------- hero: a calculation sheet ---------- */
.hero{padding:56px 0 0;border-bottom:1px solid var(--grid)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
.hero h1{font:600 clamp(40px,5.6vw,68px)/1.04 var(--f-display);letter-spacing:-.005em;margin:0 0 18px;position:relative}
.hero h1 .cross{position:absolute;left:-34px;top:.28em;width:20px;height:20px}
.typed{display:inline-block;font:500 .78em/1.25 var(--f-mono);color:var(--ink);background:#fffbea;border:2px solid var(--blue);border-radius:6px;padding:0 .22em;vertical-align:.06em;white-space:nowrap}
.uses{margin:.2em 0 1em;padding-left:1.1em;line-height:1.5}
.uses li{margin:.25em 0}
.uses b{color:var(--ink)}
.typed .caret{display:inline-block;width:2px;height:.9em;background:var(--blue);vertical-align:-.08em;margin-left:2px;animation:caret 1.1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hero .tagline{font:italic 500 22px/1.4 var(--f-body);color:var(--blue-deep);margin:0 0 22px}
.hero .lede{max-width:34em;margin:0 0 14px}
.hero .offer{max-width:34em;margin:0;font-weight:500}
.hero .offer b{color:var(--green-deep)}
.hero-shot{margin:48px auto -1px;width:100%;max-width:1100px;border:1px solid var(--rule);border-bottom:0;border-radius:10px 10px 0 0;overflow:hidden;box-shadow:0 -1px 0 var(--grid),0 30px 60px -30px rgba(15,90,136,.45)}

/* the waitlist card is drawn as a title block */
.tblock{background:#fff;border:2px solid var(--ink);display:grid;grid-template-columns:1fr 1fr}
.tblock>div{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:8px 12px}
.tblock>div:nth-child(2n){border-right:0}
.tblock .full{grid-column:1/-1;border-right:0}
.tblock .cap{display:block;font:500 13px/1.2 var(--f-display);letter-spacing:.06em;color:var(--muted)}
.tblock .val{display:block;font:500 17px/1.35 var(--f-body)}
.tblock .form-cell{padding:16px 14px 18px;border-bottom:0}
.tblock .form-cell .field{margin-bottom:10px}
.tblock .form-cell .btn{width:100%}
.countdown{display:flex;gap:6px;font:600 30px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--blue-deep);flex-wrap:wrap}
.countdown span{display:inline-flex;align-items:baseline;gap:3px}
.countdown small{font:500 15px/1 var(--f-body);color:var(--muted)}

/* ---------- reasons ---------- */
.reasons{padding:24px 0 40px}
.reason{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center;padding:64px 0;border-bottom:1px solid var(--grid)}
.reason:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.reason:nth-child(even) .reason-text{order:2}
.reason h2{font:600 clamp(30px,3.4vw,42px)/1.08 var(--f-display);margin:0 0 16px}
.reason p{margin:0 0 14px;max-width:32em}
.reason .why{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding-top:16px;border-top:2px solid var(--green);font-weight:500;max-width:32em}
.reason .why svg{flex:none;width:20px;height:20px;margin-top:4px}
.shot{border:1px solid var(--rule);border-radius:8px;background:#fff;box-shadow:0 18px 40px -24px rgba(19,33,44,.45);overflow:hidden}
.shot.pad{padding:18px}
.shots{display:grid;gap:18px}
.shots.two{grid-template-columns:1fr 1fr;align-items:start}
.shot.sheet{max-width:440px;justify-self:center;transform:rotate(-1.2deg)}
.privacy-panel{background:var(--ink);color:#fff;border-radius:10px;padding:34px 32px;font:500 21px/1.45 var(--f-body)}
.privacy-panel strong{display:block;font:600 34px/1.1 var(--f-display);margin-bottom:12px;color:#fff}
.privacy-panel ul{margin:18px 0 0;padding:0;list-style:none;font-size:17px;font-weight:400}
.privacy-panel li{padding:8px 0 8px 30px;position:relative;border-top:1px solid rgba(255,255,255,.14)}
.privacy-panel li::before{content:"";position:absolute;left:4px;top:15px;width:12px;height:7px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
.price-hint{font:600 64px/1 var(--f-display);color:var(--blue-deep)}
.price-hint small{font:500 20px/1 var(--f-body);color:var(--muted)}

/* ---------- recap list ---------- */
.recap{padding:72px 0;background:var(--wash);border-top:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.recap h2{font:600 clamp(32px,3.6vw,46px)/1.08 var(--f-display);margin:0 0 28px;max-width:20em}
.recap ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.recap li{padding:16px 0 16px 38px;border-top:1px solid var(--rule);position:relative;font-size:18px}
.recap li b{display:block;font-weight:600}
.recap li::before{content:"";position:absolute;left:2px;top:22px;width:16px;height:9px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}

/* ---------- closing call to action ---------- */
.closing{padding:80px 0;border-top:1px solid var(--grid)}
.closing-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:center}
.closing h2{font:600 clamp(34px,4vw,52px)/1.05 var(--f-display);margin:0 0 14px}
.closing p{margin:0;max-width:30em}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#c9d6e0;font-size:15px;padding:40px 0}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start;justify-content:space-between}
.site-foot a{color:#fff}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.site-foot .brand{font-size:19px}
.site-foot p{margin:8px 0 0;max-width:34em}

/* ---------- pricing ---------- */
.page-head{padding:56px 0 36px}
.page-head h1{font:600 clamp(40px,5vw,60px)/1.05 var(--f-display);margin:0 0 12px}
.page-head p{margin:0;max-width:40em;font-size:19px}
.billing{display:inline-flex;margin:26px 0 0;border:2px solid var(--blue);border-radius:8px;overflow:hidden}
.billing button{border:0;background:#fff;color:var(--blue-deep);font:600 16px/1 var(--f-body);padding:11px 18px;cursor:pointer}
.billing button[aria-pressed="true"]{background:var(--blue);color:#fff}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:2px solid var(--ink);background:#fff;margin:8px 0 18px}
.plan{padding:26px 22px 28px;border-right:1px solid var(--ink);display:flex;flex-direction:column}
.plan:last-child{border-right:0}
.plan.pro{background:var(--wash);box-shadow:inset 0 6px 0 var(--green)}
.plan h2{font:600 30px/1 var(--f-display);margin:0 0 6px}
.plan .for{color:var(--muted);font-size:16px;margin:0 0 18px;min-height:3em;line-height:1.45}
.plan .amount{font:600 52px/1 var(--f-display);font-variant-numeric:tabular-nums}
.plan .per{color:var(--muted);font-size:15px;margin:6px 0 4px;min-height:2.8em;line-height:1.4}
.plan ul{list-style:none;padding:0;margin:18px 0 22px;font-size:16px;flex:1}
.plan li{padding:7px 0 7px 26px;position:relative;border-top:1px solid var(--grid)}
.plan li::before{content:"";position:absolute;left:3px;top:13px;width:11px;height:6px;border-left:2.5px solid var(--green);border-bottom:2.5px solid var(--green);transform:rotate(-45deg)}
.plan li.no{color:var(--muted)}
.plan li.no::before{border:0;width:10px;height:2px;background:var(--rule);transform:none;top:19px}
.plan .btn{width:100%}
.badge{display:inline-block;background:var(--green);color:#fff;font:600 13px/1 var(--f-body);padding:5px 9px;border-radius:4px;margin-left:8px;vertical-align:4px}
.early{display:flex;gap:14px;align-items:center;padding:16px 20px;border:2px dashed var(--green);border-radius:8px;margin:0 0 40px;font-weight:500}
.compare{width:100%;border-collapse:collapse;font-size:16px;margin:0 0 24px}
.compare caption{text-align:left;font:600 30px/1.1 var(--f-display);padding:0 0 14px}
.compare th,.compare td{padding:11px 12px;border-bottom:1px solid var(--grid);text-align:center}
.compare th:first-child,.compare td:first-child{text-align:left}
.compare thead th{border-bottom:2px solid var(--ink);font:600 19px/1.1 var(--f-display)}
.compare .y{color:var(--green-deep);font-weight:600}
.compare .n{color:var(--muted)}
.fine{color:var(--muted);font-size:15px;max-width:52em}
.faq{padding:24px 0 72px}
.faq h2{font:600 34px/1.1 var(--f-display);margin:0 0 12px}
.faq details{border-top:1px solid var(--rule);padding:14px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:18px}
.faq details p{margin:10px 0 0;max-width:46em}

/* ---------- legal pages ---------- */
.legal{padding:48px 0 80px}
.legal article{max-width:46em}
.legal h1{font:600 clamp(38px,4.6vw,54px)/1.05 var(--f-display);margin:0 0 8px}
.legal .updated{color:var(--muted);margin:0 0 28px}
.legal h2{font:600 28px/1.15 var(--f-display);margin:38px 0 10px}
.legal h3{font-size:19px;margin:24px 0 6px}
.legal p,.legal li{max-width:44em}
.legal .callout{border-left:5px solid var(--green);background:var(--wash);padding:16px 20px;margin:22px 0;font-weight:500}
.legal .warn{border-left-color:var(--cross)}

/* ---------- small screens ---------- */
@media (max-width:960px){
  .hero-grid,.reason,.reason:nth-child(even),.closing-grid{grid-template-columns:1fr;gap:32px}
  .reason:nth-child(even) .reason-text{order:0}
  .hero h1 .cross{display:none}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan:nth-child(2){border-right:0}
  .plan:nth-child(-n+2){border-bottom:1px solid var(--ink)}
}
@media (max-width:620px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .recap ul,.shots.two{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .plan{border-right:0;border-bottom:1px solid var(--ink)}
  .plan:last-child{border-bottom:0}
  .compare{font-size:14px}
  .compare th,.compare td{padding:9px 6px}
  .tblock{grid-template-columns:1fr}
  .tblock>div{border-right:0}
  .reason{padding:44px 0}
}

/* topic pages (structural calculations, calculation sheets, matrix calculator, equation solver) */
.topic .lead{font-size:20px;line-height:1.55;max-width:42em;margin:0 0 20px}
.topic .cta{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 26px}
.topic figure{margin:8px 0 10px;max-width:46em}
.topic figure img{display:block;width:100%;height:auto;border-radius:8px;box-shadow:0 2px 16px rgba(10,40,70,.16);background:#fff}
.topic code{font-family:var(--f-mono,monospace);font-size:.92em;background:var(--wash);padding:1px 5px;border-radius:4px}
.site-foot nav[aria-label="Uses"] a{font-weight:500}

/* worked examples and lists on topic pages */
.topic pre.calc{background:var(--wash);border-left:4px solid var(--blue);border-radius:6px;padding:12px 16px;overflow-x:auto;font:400 15px/1.65 var(--f-mono);margin:10px 0 18px;max-width:46em}
.topic pre.calc code{background:none;padding:0;font-size:inherit}
.topic ul.also{columns:2 16em;padding-left:1.1em}
.topic ol{max-width:44em}
.site-foot nav[aria-label="Uses"]{max-width:28em}
/* hero: rotating words */
.hero h1 .who{display:inline-block;white-space:nowrap;color:var(--blue-deep);position:relative}
.hero h1 .who.out{animation:whoOut .42s ease-in forwards}
.hero h1 .who.in{animation:whoIn .5s cubic-bezier(.2,.8,.2,1)}
.hero h1 .who.final{background:linear-gradient(90deg,var(--blue),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 .who.final::after{content:"";position:absolute;left:0;right:.35em;bottom:.02em;height:.09em;border-radius:1em;background:var(--green);transform-origin:left;animation:swoosh .6s .1s ease-out both}
@keyframes whoOut{to{opacity:0;transform:translateY(-.45em) rotateX(70deg);filter:blur(4px)}}
@keyframes whoIn{from{opacity:0;transform:translateY(.45em) rotateX(-70deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes swoosh{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* visitor counter */
.visits .val{font-variant-numeric:tabular-nums}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tblock [hidden]{display:none!important}
.hero h1 .h1-l1,.hero h1 .h1-l2{display:block}
.hero h1 .typed{font-size:.64em;vertical-align:.12em}
.hero .hero-cta{margin:-6px 0 22px}