/* Nexley's landing page, 2026-10-26: the exercise book.
   One page of a school exercise book: cool white paper, blue rules, the red margin running down
   the left, ink type and a biro-blue accent. The margin holds what a student writes there, in
   handwriting. Screenshots are taped in. No gradients, no glows, no scroll animations. */
:root{
  --paper:#F6F7F9;--sheet:#FFFFFF;--ink:#15181F;--ink-2:#3A404C;--ink-3:#5F6675;
  --biro:#2350D8;--biro-d:#1B3FB0;--biro-soft:#E3EAFC;--ruled:#D3DDEC;--rule-soft:#E6ECF5;
  --margin:#E0473C;--hl:#FFE45C;--line:#DCE1E8;
  --mx:96px;--r:8px;
  --sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Patrick Hand","Segoe Print","Bradley Hand",cursive;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--biro)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--biro);outline-offset:2px;border-radius:4px}
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.08}

/* ---- the page: a margin line all the way down, content to its right ---- */
.book{position:relative;overflow:hidden}
.book::before{content:'';position:absolute;top:0;bottom:0;left:var(--mx);width:2px;background:var(--margin);opacity:.55;z-index:0}
.wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto 0 0;padding:0 40px 0 calc(var(--mx) + 40px)}
section{position:relative;padding:88px 0}
.rule-top{border-top:1px solid var(--ruled)}
/* what a student writes in the margin */
.mnote{position:absolute;left:calc(-1 * var(--mx) - 40px + 10px);width:calc(var(--mx) - 16px);font:22px/1.1 var(--hand);color:var(--biro);transform:rotate(-4deg);text-align:right}
.mnote.red{color:var(--margin)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r);
  font:600 15px/1 var(--sans);text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-ink{background:var(--biro);color:#fff}
.btn-ink:hover{background:var(--biro-d)}
.btn-line{background:var(--sheet);color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink-3)}
.btn-sm{min-height:36px;padding:0 14px;font-size:14px}
.btn-lg{min-height:50px;padding:0 24px;font-size:16px}

/* ---- header ---- */
.top{position:sticky;top:0;z-index:20;background:color-mix(in oklab,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand svg{width:28px;height:28px;flex:none}
.top nav{display:flex;gap:22px;margin-right:auto}
.top nav a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500}
.top nav a:hover{color:var(--ink)}
.top .acts{display:flex;gap:8px}

/* ---- hero: a ruled page with the live filing demo on it ---- */
.hero{padding:72px 0 88px;background:repeating-linear-gradient(to bottom,transparent 0 35px,var(--rule-soft) 35px 36px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:start}
.hero h1{font-size:clamp(42px,5.6vw,74px);font-weight:750;letter-spacing:-.05em;line-height:.98;max-width:12ch}
.hero .lede{font-size:18.5px;line-height:1.6;color:var(--ink-2);max-width:34em;margin:26px 0 30px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.hero .small{font-size:14px;color:var(--ink-3);margin:18px 0 0}
.hero .mnote{top:8px}

.demo{background:var(--sheet);border:1px solid var(--line);border-radius:6px;box-shadow:0 22px 44px -30px rgba(20,32,70,.35);position:relative;margin-top:6px}
.demo-tabs{display:flex;gap:2px;padding:0 14px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.demo-tabs button{font:600 13.5px var(--sans);color:var(--ink-3);background:none;border:0;border-bottom:2px solid transparent;padding:13px 10px 11px;cursor:pointer;white-space:nowrap}
.demo-tabs button.on{color:var(--ink);border-bottom-color:var(--biro)}
.demo-page{position:relative;padding:0 18px 0 58px}
.demo-page::before{content:'';position:absolute;left:42px;top:0;bottom:0;width:2px;background:var(--margin);opacity:.5}
.demo textarea{display:block;width:100%;height:196px;resize:vertical;border:0;outline:0;padding:7px 0 0;margin:0;color:var(--ink);background:transparent;
  font:15px/28px var(--sans);background-image:repeating-linear-gradient(to bottom,transparent 0 27px,var(--ruled) 27px 28px);background-attachment:local}
.demo textarea:focus-visible{outline:none}
.demo-out{border-top:1px solid var(--line);padding:16px 18px 18px;background:color-mix(in oklab,var(--paper) 60%,var(--sheet))}
.demo-out small{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:6px}
.do-where{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;font-weight:600}
.do-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:5px;border:1px solid color-mix(in oklab,var(--c,var(--biro)) 45%,var(--line));background:var(--sheet)}
.do-chip::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--c,var(--biro))}
.do-mod{color:var(--ink-3);font-weight:500}
.do-conf{margin-left:auto;font-size:12.5px;color:var(--ink-3);font-weight:500;font-variant-numeric:tabular-nums}
.do-pt{margin:10px 0 0;font-size:16px;line-height:1.5;font-weight:550}
.do-pt mark{color:inherit;background:linear-gradient(transparent 55%,var(--hl) 55% 92%,transparent 92%) no-repeat;background-size:100% 100%;padding:0 2px}
.do-pt mark.go{animation:swipe .5s ease-out both}
@keyframes swipe{from{background-size:0 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){.do-pt mark.go{animation:none}}
.do-alt{font-size:13px;color:var(--ink-3);margin-top:6px;min-height:1em}
.do-cards{display:flex;gap:8px;margin-top:14px;overflow-x:auto;padding-bottom:2px}
.mini{flex:0 0 150px;min-height:84px;padding:10px 11px;border-radius:4px;background:var(--sheet);border:1px solid var(--line);border-top:2px solid var(--margin);
  font-size:12.5px;line-height:1.35;cursor:pointer;text-align:left;color:var(--ink);font-family:var(--sans)}
.mini b{display:block;font-size:13px;margin-bottom:3px}
.mini span{color:var(--ink-3)}
.mini.flip b{display:none}
.mini:not(.flip) span{display:none}
.mini.flip span{color:var(--ink)}
.demo-note{font-size:12.5px;color:var(--ink-3);margin:12px 2px 0}
.demo .mnote{left:auto;right:calc(100% + 12px);top:64px;width:110px}

/* ---- section headings ---- */
.sh{position:relative;max-width:46em;margin-bottom:40px}
.sh h2{font-size:clamp(30px,3.6vw,44px);font-weight:720;letter-spacing:-.04em}
.sh p{font-size:17px;color:var(--ink-2);margin:14px 0 0}
.sh .mnote{top:6px}

/* ---- a school day: real steps, so they are numbered, in the margin like question numbers ---- */
.day{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{position:relative;padding:16px 0 18px;border-bottom:1px solid var(--ruled);counter-increment:s}
.steps li:first-child{border-top:1px solid var(--ruled)}
.steps li::before{content:counter(s) '.';position:absolute;left:calc(-1 * var(--mx) - 40px + 10px);width:calc(var(--mx) - 16px);text-align:right;font:26px/1 var(--hand);color:var(--biro);top:18px}
.steps h3{font-size:19px;font-weight:680;letter-spacing:-.02em}
.steps p{margin:6px 0 0;color:var(--ink-2)}

/* ---- screenshots, taped into the book ---- */
.taped{position:relative;background:var(--sheet);padding:8px;border:1px solid var(--line);box-shadow:0 18px 36px -28px rgba(20,32,70,.4)}
.taped::before,.taped::after{content:'';position:absolute;width:92px;height:26px;background:rgba(236,232,214,.82);border:1px solid rgba(0,0,0,.04);top:-12px;z-index:2}
.taped::before{left:18px;transform:rotate(-5deg)}
.taped::after{right:18px;transform:rotate(4deg)}
.taped img{width:100%;height:auto;border:1px solid var(--rule-soft)}
.day .taped{margin-top:12px;transform:rotate(.6deg)}
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 36px}
.shots figure{margin:0}
.shots figure:nth-child(odd) .taped{transform:rotate(-.5deg)}
.shots figure:nth-child(even) .taped{transform:rotate(.5deg)}
.shots figcaption{margin-top:14px;font-size:15px;color:var(--ink-2)}
.shots figcaption b{color:var(--ink);font-weight:650;margin-right:6px}

/* ---- everything else: three ruled lists, one per part of the app ---- */
.parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.part h3{font-size:21px;font-weight:700;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.part p.what{font-size:14.5px;color:var(--ink-3);margin:10px 0 6px}
.part ul{list-style:none;margin:0;padding:0}
.part li{position:relative;padding:9px 0 9px 26px;border-bottom:1px solid var(--ruled);font-size:15.5px;line-height:1.45}
.part li::before{content:'';position:absolute;left:3px;top:15px;width:11px;height:6px;border-left:2px solid var(--biro);border-bottom:2px solid var(--biro);transform:rotate(-45deg)}

/* ---- honest marks: the one red-pen moment ---- */
.honest{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.honest h2{font-size:clamp(30px,3.6vw,44px);font-weight:720;letter-spacing:-.04em}
.honest p{font-size:17px;color:var(--ink-2);margin:16px 0 0}
.redpen{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:26px 28px 26px 70px;position:relative;
  background-image:repeating-linear-gradient(to bottom,transparent 0 33px,var(--ruled) 33px 34px);background-position:0 18px}
.redpen::before{content:'';position:absolute;left:50px;top:0;bottom:0;width:2px;background:var(--margin);opacity:.5}
.redpen .ans{font:21px/34px var(--hand);color:var(--ink)}
.redpen .mk{font:21px/34px var(--hand);color:var(--margin);margin-top:8px}
.redpen .mk b{font-weight:400;border:2px solid var(--margin);border-radius:50%;padding:0 9px;margin-right:6px}

/* ---- free ---- */
.free{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:34px clamp(22px,4vw,44px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px 48px}
.free .price{font-size:72px;font-weight:750;letter-spacing:-.05em;line-height:1}
.free .price small{display:block;font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-3);margin-top:8px}
.free ul{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.free li{break-inside:avoid;position:relative;padding:6px 0 6px 24px;font-size:15.5px}
.free li::before{content:'';position:absolute;left:3px;top:12px;width:11px;height:6px;border-left:2px solid var(--biro);border-bottom:2px solid var(--biro);transform:rotate(-45deg)}
.free .fine{grid-column:2;color:var(--ink-3);font-size:14.5px;margin:0}
.free .btn{grid-column:2;justify-self:start}

/* ---- FAQ ---- */
.faq{max-width:52em}
.faq details{border-bottom:1px solid var(--ruled)}
.faq details:first-of-type{border-top:1px solid var(--ruled)}
.faq summary{list-style:none;cursor:pointer;padding:18px 40px 18px 0;font-size:17.5px;font-weight:620;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:6px;top:12px;font:28px/1 var(--hand);color:var(--biro)}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:0 0 20px;color:var(--ink-2);max-width:44em}
.faq details p a{color:inherit}
.status-note{max-width:46em;color:var(--ink-3);font-size:15px;margin:40px 0 0}
.status-note b{color:var(--ink)}

/* ---- last call and footer ---- */
.final h2{font-size:clamp(34px,4.4vw,56px);font-weight:750;letter-spacing:-.045em;max-width:16ch}
.final p{font-size:17px;color:var(--ink-2);margin:14px 0 26px;max-width:36em}
.foot{border-top:1px solid var(--line);padding:32px 0 40px;font-size:14px;color:var(--ink-3)}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.foot p{margin:0;margin-right:auto}
.foot nav{display:flex;gap:20px;flex-wrap:wrap}
.foot nav a{color:var(--ink-2);text-decoration:none;white-space:nowrap}
.foot nav a:hover{color:var(--ink)}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--sheet);border-top:1px solid var(--line)}
.sticky-cta[hidden]{display:none}
.sticky-cta span{font-size:13.5px;color:var(--ink-3)}
@media (min-width:700px){.sticky-cta{display:none!important}}

/* ---- tablets and phones: the margin narrows to a line, its notes move inline ---- */
@media (max-width:1020px){
  .hero .wrap,.day,.honest{grid-template-columns:minmax(0,1fr);gap:40px}
  .parts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .demo .mnote{display:none}
}
@media (max-width:760px){
  :root{--mx:20px}
  .wrap{padding:0 16px 0 calc(var(--mx) + 18px)}
  section{padding:60px 0}
  .hero{padding:44px 0 60px}
  .top nav{display:none}
  .top .wrap{gap:12px}
  .top .acts .btn-line{display:none}
  .mnote{position:static;display:block;width:auto;text-align:left;transform:rotate(-2deg);margin:0 0 6px;font-size:20px}
  .hero .mnote{display:none}
  .steps li{padding-left:34px}
  .steps li::before{left:0;width:auto;font-size:22px}
  .shots{grid-template-columns:minmax(0,1fr);gap:40px}
  .parts{grid-template-columns:minmax(0,1fr)}
  .free{grid-template-columns:minmax(0,1fr)}
  .free ul{columns:1}
  .free .fine,.free .btn{grid-column:1}
  .redpen{padding:22px 18px 22px 52px}
  .redpen::before{left:36px}
}
.top .acts{margin-left:auto}
@media (max-width:760px){.demo-page{padding-left:38px}.demo-page::before{left:24px}}