/* offsheetclasses.com: the Offsheet Classes design system (design/DESIGN.md), as a marketing page.
   Fonts are served from this site; nothing loads from anywhere else. */
@font-face{font-family:"Schibsted Grotesk"; font-weight:400 900; font-display:swap; src:url(/fonts/schibsted-grotesk.woff2) format("woff2");}
@font-face{font-family:"Inter"; font-weight:100 900; font-display:swap; src:url(/fonts/inter.woff2) format("woff2");}
@font-face{font-family:"IBM Plex Mono"; font-weight:500; font-display:swap; src:url(/fonts/plex-mono-500.woff2) format("woff2");}

:root{
  --ink:#131b28; --ink-soft:#4c566b; --ink-faint:#616d83;
  --ground:#f4f7fb; --rule:rgba(45,91,216,.065); --sheet:#ffffff; --soft:#ffffff; --hair:#e3e9f2; --select-soft:#e6ecfd;
  --select:#2d5bd8; --select-dark:#2349b3;
  --slab:#151b26; --slab-2:#1d2533; --slab-line:rgba(255,255,255,.10); --on-slab-soft:#a7b1c4; --on-slab-blue:#8aa6ff;
  --paid:#1f7a4d; --paid-soft:#e2f0e8; --warn:#8c5f12; --warn-soft:#f7efdd;
  --display:"Schibsted Grotesk","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0; background-color:var(--ground); color:var(--ink);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:41px 41px; font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:var(--select);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--select); outline-offset:3px;}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
.narrow{max-width:560px;}
section{padding:96px 0;}
section.wrap{padding:96px 24px;}
h1,h2,h3{font-family:var(--display); color:var(--ink); margin:0; text-wrap:balance;}
h1{font-size:clamp(44px,8vw,84px); font-weight:800; letter-spacing:-.045em; line-height:.98; max-width:12ch; margin:0 auto;}
h2{font-size:clamp(32px,5vw,48px); font-weight:800; letter-spacing:-.035em; line-height:1.05; text-align:center; max-width:18ch; margin:0 auto;}
h3{font-size:19px; font-weight:700; letter-spacing:-.015em;}
.mono{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.06em;}
.eyebrow{font-family:var(--mono); font-weight:500; font-size:14px; letter-spacing:.06em; color:var(--ink-faint); text-align:center; margin:0 0 20px;}
.eyebrow.blue{color:var(--select);}
.lede{font-size:19px; color:var(--ink-soft); text-align:center; max-width:36em; margin:20px auto 0;}
.fine{font-size:14px; color:var(--ink-faint); text-align:center; margin:14px 0 0;}
.fine.light{color:var(--on-slab-soft);}

/* buttons: 48px tall, so they're easy to tap */
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 30px; border-radius:999px;
  font-family:var(--display); font-weight:700; font-size:17px; text-decoration:none; border:none; cursor:pointer; letter-spacing:-.01em;}
.btn-ink{background:var(--ink); color:#fff;} .btn-ink:hover{background:#000;}
.btn-blue{background:var(--select); color:#fff;} .btn-blue:hover{background:var(--select-dark);}
.btn-white{background:#fff; color:var(--ink);} .btn-white:hover{background:#e9edf5;}
.btn-block{width:100%;}
.btn[disabled]{opacity:.6; cursor:wait;}

/* nav */
.nav{position:sticky; top:0; z-index:10; background:rgba(244,247,251,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--hair);}
.nav-row{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px;}
.nav nav{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.nav nav a{color:var(--ink-soft); text-decoration:none; font-size:15px; min-height:44px; display:inline-flex; align-items:center;}
.nav nav a:hover{color:var(--ink);}
.nav nav a.nav-cta{color:var(--select); font-weight:600;}
.cellmark{position:relative; display:inline-block; white-space:nowrap; font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.03em;
  color:var(--ink); text-decoration:none; padding:3px 10px 4px; border:2px solid var(--select);}
.cellmark i{font-style:normal; font-weight:600; color:var(--select);}
.cellmark::after{content:""; position:absolute; right:-4px; bottom:-4px; width:7px; height:7px; background:var(--select); border:1.6px solid #fff;}
@media (max-width:640px){ section{padding:72px 0;} section.wrap{padding:72px 20px;} section.hero{padding-top:72px; padding-bottom:72px;} .wrap{padding:0 20px;} .hide-sm{display:none !important;} .nav nav{gap:16px;} .cellmark{font-size:17px;} }

/* hero */
section.hero{text-align:center; padding-top:110px; padding-bottom:110px;}
.hero .lede{margin-bottom:36px;}
.notfound{margin-top:40px;}

/* dark sections */
.dark{background:var(--slab); color:#fff;}
.dark h2{color:#fff;}
.signs{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:56px;}
.sign{background:var(--slab-2); border:1px solid var(--slab-line); border-radius:16px; padding:24px; display:flex; flex-direction:column; min-height:270px;}
.num-tag{font-family:var(--mono); font-size:13px; color:var(--on-slab-blue);}
.sign-art{flex:1; display:flex; align-items:center; padding:20px 0;}
.sign p{margin:0; font-size:18px; line-height:1.45; color:#fff;}
.tabs-art{display:flex; gap:4px; border-bottom:2px solid #333d4d; width:100%;}
.tabs-art span{font-family:var(--mono); font-size:12px; padding:7px 9px; background:#283142; color:var(--on-slab-soft); border-radius:6px 6px 0 0;}
.tabs-art span.on{background:var(--select); color:#fff;}
.grid-art{display:grid; grid-template-columns:1fr 1fr; gap:5px; width:100%;}
.grid-art i{height:24px; background:#283142; border-radius:5px; font-style:normal; text-align:center; font-family:var(--mono); font-size:12px; color:#8b95a8; line-height:24px;}
.grid-art i.warn{background:#4a3a1c; color:#f0b44c;}
.bars-art{display:flex; align-items:flex-end; gap:6px; height:90px; width:100%;}
.bars-art i{flex:1; background:#2c3546; border-radius:3px 3px 0 0;}
.bars-art i.on{background:var(--select);}
.bars-art i:nth-child(1){height:18%} .bars-art i:nth-child(2){height:28%} .bars-art i:nth-child(3){height:40%}
.bars-art i:nth-child(4){height:58%} .bars-art i:nth-child(5){height:78%} .bars-art i:nth-child(6){height:100%}
.dark-note{color:var(--on-slab-soft); text-align:center; max-width:40em; margin:56px auto 0; font-size:17px;}
.dark-lede{color:var(--on-slab-soft); text-align:center; font-size:18px; margin:18px 0 32px;}
.yours{text-align:center;}
.yours h2{margin-top:18px;}
.yours-lock{width:64px; height:64px; fill:none; stroke:var(--on-slab-blue); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.yours-lock rect{fill:rgba(138,166,255,.14);}
.yours-list{list-style:none; padding:0; margin:8px auto 0; max-width:880px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; text-align:left;}
.yours-list li{background:var(--slab-2); border:1px solid var(--slab-line); border-radius:14px; padding:20px 22px 20px 56px; position:relative;}
.yours-list li::before{content:""; position:absolute; left:22px; top:25px; width:12px; height:6px; border-left:2.5px solid #6ee7a0; border-bottom:2.5px solid #6ee7a0; transform:rotate(-45deg);}
.yours-list b{display:block; color:#fff; font-size:17px;}
.yours-list span{display:block; color:var(--on-slab-soft); font-size:15.5px; margin-top:4px;}
@media (max-width:720px){ .yours-list{grid-template-columns:1fr;} }
@media (max-width:820px){ .signs{grid-template-columns:1fr;} .sign{min-height:0;} }

/* demo */
.demo-sec{text-align:center;}
.device{background:var(--slab); border-radius:22px; padding:0 14px 14px; margin:52px auto 0; max-width:880px; text-align:left;
  box-shadow:0 30px 60px rgba(19,27,40,.18);}
.device-bar{display:flex; justify-content:space-between; gap:12px; padding:14px 6px; font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--on-slab-soft); flex-wrap:wrap;}
.live{color:#fff; display:inline-flex; align-items:center; gap:8px;}
.live i{width:8px; height:8px; border-radius:50%; background:#3ecf7a;}
.screen{background:#fff; border-radius:12px; overflow:hidden;}
.browser{display:flex; align-items:center; gap:12px; padding:10px 14px; background:var(--soft); border-bottom:1px solid var(--hair);}
.dots{display:flex; gap:6px;} .dots i{width:11px; height:11px; border-radius:50%; background:#f25f58;} .dots i:nth-child(2){background:#f8bc2f;} .dots i:nth-child(3){background:#30c748;}
.url{flex:1; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); background:#fff; border:1px solid var(--hair); border-radius:999px; padding:5px 14px;}
.demo-head{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--hair); flex-wrap:wrap;}
.demo-head b{font-family:var(--display); font-size:19px; letter-spacing:-.02em;}
.demo-head b span{font-weight:500; color:var(--ink-faint);}
.demo-head .mono{color:var(--ink-faint);}
.demo-tabs{display:flex; gap:8px; padding:16px 22px 4px; flex-wrap:wrap;}
.demo-tabs button{min-height:44px; padding:0 18px; border-radius:999px; border:none; background:var(--soft); color:var(--ink-soft); font:inherit; font-size:15px; cursor:pointer;}
.demo-tabs button[aria-selected="true"]{background:var(--ink); color:#fff;}
.demo-panel{padding:4px 22px 0; overflow-x:auto;}
.demo-table{width:100%; border-collapse:collapse; font-size:15px; min-width:460px;}
.demo-table th{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); text-align:left; padding:12px 8px 8px 0; border-bottom:1px solid var(--hair);}
.demo-table td{padding:13px 8px 13px 0; border-bottom:1px solid var(--hair); vertical-align:middle;}
.demo-table .r{text-align:right; padding-right:0;}
.demo-table small{display:block; color:var(--ink-faint); font-size:13px;}
.demo-table .warn{color:var(--warn);}
.pill{min-height:44px; padding:0 14px; border-radius:999px; font:inherit; font-size:14px; cursor:pointer; border:1.5px solid;}
.pill.paid{background:var(--paid-soft); color:var(--paid); border-color:#bfe0cd;}
.pill.due{background:#fff; color:var(--warn); border-color:#e6cf9e;}
.pill.due:hover{background:var(--warn-soft);}
.statement{padding:6px 0 0;}
.st-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:8px 0 10px;}
.st-head b{display:block; font-family:var(--display); font-size:18px;}
.st-head span{color:var(--ink-faint); font-size:14px;}
.st-due{font-family:var(--display); font-weight:700; font-size:17px; text-align:right; margin:12px 0 0;}
.demo-totals{display:grid; grid-template-columns:repeat(3,1fr); margin:18px 22px 22px; border:1px solid var(--hair); border-radius:12px;}
.demo-totals div{padding:14px 18px;}
.demo-totals div + div{border-left:1px solid var(--hair);}
.demo-totals .mono{display:block; color:var(--ink-faint); text-transform:uppercase;}
.demo-totals b{display:inline-block; font-family:var(--body); font-weight:700; font-size:26px; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.paid{color:var(--paid);} .owed{color:var(--warn);}
@media (max-width:640px){
  .demo-totals{grid-template-columns:1fr;} .demo-totals div + div{border-left:none; border-top:1px solid var(--hair);}
  .device{padding:0 8px 8px; border-radius:18px;} .demo-head,.demo-tabs,.demo-panel{padding-left:14px; padding-right:14px;} .demo-totals{margin:14px;}
}

/* steps & principles */
.soft{background:var(--sheet); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);}
.steps{list-style:none; padding:0; margin:56px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.step-n{position:relative; display:inline-grid; place-items:center; width:56px; height:56px; font-family:var(--body); font-weight:700; font-size:24px;
  color:var(--select); background:var(--sheet); border:1.6px solid var(--select); line-height:1; margin-bottom:18px;}
.step-n::after{content:""; position:absolute; right:-5px; bottom:-5px; width:8px; height:8px; background:var(--select); border:1.6px solid var(--sheet);}
.steps p,.principles p{color:var(--ink-soft); margin:10px 0 0;}
.principles{display:grid; grid-template-columns:1fr 1fr; gap:40px 48px; margin-top:56px;}
@media (max-width:820px){ .steps,.principles{grid-template-columns:1fr; gap:28px;} }

/* pricing */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px;}
.plan{background:#fff; border:1px solid var(--hair); border-radius:18px; padding:32px; display:flex; flex-direction:column;}
.plan-tag{color:var(--ink-faint); text-transform:uppercase;}
.plan-tag.blue{color:var(--on-slab-blue);}
.plan-price{font-family:var(--display); font-weight:800; font-size:40px; letter-spacing:-.035em; margin:10px 0 0; line-height:1.1;}
.plan-sub{color:var(--ink-faint); margin:6px 0 18px;}
.plan ul{list-style:none; padding:0; margin:0 0 26px; flex:1;}
.plan li{padding:6px 0; color:var(--ink-soft);}
.plan li::before{content:"✓"; color:var(--select); font-weight:700; margin-right:10px;}
.plan-foot{font-size:14px; color:var(--ink-faint); margin:14px 0 0; text-align:center;}
.plan-dark{background:var(--slab); border-color:var(--slab); color:#fff;}
.plan-dark .plan-price{color:#fff;} .plan-dark .plan-sub,.plan-dark li{color:var(--on-slab-soft);}
.plan-dark li::before{color:var(--on-slab-blue);}
@media (max-width:820px){ .plans{grid-template-columns:1fr;} }

/* faq */
.faq{margin:48px 0 0;}
.faq > div{display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:24px 0; border-top:1px solid var(--hair);}
.faq > div:last-child{border-bottom:1px solid var(--hair);}
.faq dt{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.015em;}
.faq dd{margin:0; color:var(--ink-soft);}
@media (max-width:720px){ .faq > div{grid-template-columns:1fr; gap:8px;} }

/* quote form */
.quote{display:flex; flex-direction:column;}
.quote label{font-size:14px; font-weight:600; color:#dfe5ef; margin:14px 0 6px;}
.quote .opt{font-weight:400; color:var(--on-slab-soft);}
.quote input,.quote select,.quote textarea{width:100%; min-height:52px; padding:12px 18px; border-radius:16px; border:1.5px solid #364056;
  background:var(--slab-2); color:#fff; font:inherit; font-size:16px;}
.quote textarea{resize:vertical; min-height:96px;}
.quote input::placeholder{color:#8590a5;}
.quote .btn{margin-top:22px;}
.form-msg{min-height:24px; margin:12px 0 0; text-align:center; color:#ffb4ab;}
.form-msg.ok{color:#8fe3b0;}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.alt{text-align:center; color:var(--on-slab-soft); margin:32px 0 0;}
.alt a{color:#fff; font-weight:600;}

/* footer */
.foot{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding-top:40px; padding-bottom:48px; flex-wrap:wrap;}
.foot-brand{display:block; font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:-.02em;}
.foot-sub{color:var(--ink-faint);}
.foot nav{display:flex; gap:20px; flex-wrap:wrap;}
.foot nav a{color:var(--ink-soft); text-decoration:none; min-height:44px; display:inline-flex; align-items:center;}
.foot nav a:hover{color:var(--ink);}

/* phones: keep the header on one line, and fit the demo tables without sideways scrolling */
@media (max-width:480px){
  .nav nav a:not(.nav-cta){display:none;}
  .demo-table{min-width:0;}
  #demo-payments th:nth-child(2), #demo-payments td:nth-child(2){display:none;}
  #demo-schedule th:nth-child(4), #demo-schedule td:nth-child(4){display:none;}
  .demo-head{flex-direction:column; align-items:flex-start; gap:4px;}
}

/* "?count=off" confirmation */
.count-note{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:20; margin:0; padding:12px 20px;
  border-radius:999px; background:var(--ink); color:#fff; font-size:15px; box-shadow:0 8px 24px rgba(19,27,40,.25);}

/* privacy page */
main.prose{max-width:720px; padding-top:56px; padding-bottom:40px;}
.prose-title{font-size:clamp(32px,5vw,44px); max-width:none; margin:0;}
.prose h2{text-align:left; font-size:22px; max-width:none; margin:36px 0 10px;}
.prose p{color:var(--ink-soft);}
.fine.left{text-align:left;}

/* "Another question? Email us" (shown when config.js has a contact) */
.ask{text-align:center; margin:40px 0 0; color:var(--ink-soft); display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap;}
.ask[hidden],.ask a[hidden],.foot a[hidden]{display:none;}

/* "A tutor invited you" (an invite link, ?invite=) */
.invited[hidden]{display:none;}
.invited{display:inline-block; margin:0 auto 20px; padding:8px 14px; border-radius:999px; background:var(--paid-soft); color:var(--paid); font-weight:600; font-size:15px;}

/* What tutors say (filled from config.js) */
.voices[hidden],.voices [hidden]{display:none;}
.quotes{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:24px; margin-top:48px;}
.tquote{margin:0; background:var(--ground); border:1px solid var(--hair); border-radius:14px; padding:28px;}
.tquote blockquote{margin:0; font-size:18px; line-height:1.5; color:var(--ink);}
.tquote figcaption{margin-top:16px; font-size:14px; color:var(--ink-faint);}
.tquote figcaption b{color:var(--ink); font-weight:600;}

/* ---- motion: the page "pops" (design/DESIGN.md §10a) -----------------------------------------
   Everything is visible without it; app.js adds .reveal to <html> only when motion is allowed,
   and nothing here plays with prefers-reduced-motion. */

/* hero: "spreadsheet." sits in a selected cell, like the mark */
.hero{position:relative;}
.sel{position:relative; display:inline-block; padding:0 .12em; white-space:nowrap;}
.sel::before{content:""; position:absolute; inset:.06em -.02em -.02em; border:3px solid var(--select); background:rgba(45,91,216,.06); z-index:-1;}
.sel::after{content:""; position:absolute; right:-.07em; bottom:-.07em; width:.16em; height:.16em; background:var(--select); border:2px solid var(--ground);}
h1{position:relative; z-index:1;}

/* little dashboard cards drifting beside the headline */
.floats{position:absolute; inset:0; pointer-events:none;}
.float{position:absolute; display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--sheet); border:1px solid var(--hair);
  border-radius:10px; padding:12px 16px; box-shadow:0 14px 34px rgba(19,27,40,.10); min-width:170px;}
.float .mono{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);}
.float b{font-family:var(--display); font-size:17px; letter-spacing:-.015em;}
.float b.fig{font-family:var(--body); font-size:22px; color:var(--paid); font-variant-numeric:tabular-nums;}
.float small{color:var(--ink-faint); font-size:13px;}
.chip-paid{align-self:flex-start; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--paid); background:var(--paid-soft); border-radius:4px; padding:3px 8px;}
.f1{left:0; top:120px; transform:rotate(-4deg);}
.f2{right:0; top:96px; transform:rotate(3deg);}
.f3{right:24px; bottom:70px; transform:rotate(-2deg);}
@media (max-width:1180px){ .floats{display:none;} }

/* cells of the graph paper that light up (made by app.js) */
.sparks{position:absolute; left:0; top:0; width:100%; pointer-events:none; overflow:hidden; z-index:0;}
.spark{position:absolute; width:40px; height:40px; background:var(--select); opacity:0;}
main,.foot{position:relative; z-index:1;}

/* the price card is a pass: selection-cell border, a stamp, a light that sweeps across once */
.plan-pass{position:relative; overflow:hidden; border:2px solid var(--select); box-shadow:0 24px 50px rgba(45,91,216,.14);}
.plan-pass::after{content:""; position:absolute; right:-1px; bottom:-1px; width:12px; height:12px; background:var(--select);}
.plan-stamp{position:absolute; right:22px; top:26px; transform:rotate(-10deg); font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--paid); border:1.6px solid var(--paid); border-radius:6px; padding:6px 10px;}
.plan-shine{position:absolute; top:-30%; bottom:-30%; left:-50%; width:40%; pointer-events:none; transform:translateX(-140%) skewX(-12deg);
  background:linear-gradient(100deg,transparent,rgba(45,91,216,.10),transparent);}
.plan-pass .plan-price{color:var(--ink);}

@media (prefers-reduced-motion:no-preference){
  /* hero arrives */
  .hero > .eyebrow,.hero > .invited,.hero > h1,.hero > .lede,.hero > .btn,.hero > .fine{animation:rise .7s cubic-bezier(.2,.7,.2,1) both;}
  .hero > h1{animation-delay:.08s;} .hero > .lede{animation-delay:.2s;} .hero > .btn{animation-delay:.32s;} .hero > .fine{animation-delay:.4s;}
  .sel::before{animation:select-cell .55s .75s cubic-bezier(.2,.8,.2,1) both;}
  .sel::after{animation:pop .3s 1.2s cubic-bezier(.3,1.6,.5,1) both;}
  .f1{animation:float-in .8s .9s both, drift1 7s 1.7s ease-in-out infinite;}
  .f2{animation:float-in .8s 1.05s both, drift2 8s 1.85s ease-in-out infinite;}
  .f3{animation:float-in .8s 1.2s both, drift3 9s 2s ease-in-out infinite;}
  .spark{animation:spark 1.8s ease-out both;}
  .btn{transition:transform .15s ease, background .15s ease, box-shadow .15s ease;}
  .btn:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(19,27,40,.16);}

  /* sections rise in as they come into view */
  .reveal .rv{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
  .reveal .rv.in{opacity:1; transform:none;}
  .reveal .yours .shackle{transform:translateY(-8px); transition:transform .5s .3s cubic-bezier(.3,1.6,.5,1);}
  .reveal .yours.in .shackle{transform:none;}
  .reveal .yours.in .yours-lock{animation:bump .4s .75s ease-out both;}
  .reveal .yours-list li{opacity:0; transform:translateY(14px); transition:opacity .5s, transform .5s cubic-bezier(.2,.7,.2,1);}
  .reveal .yours.in .yours-list li{opacity:1; transform:none;}
  .reveal .yours.in .yours-list li:nth-child(1){transition-delay:.85s} .reveal .yours.in .yours-list li:nth-child(2){transition-delay:1s}
  .reveal .yours.in .yours-list li:nth-child(3){transition-delay:1.15s} .reveal .yours.in .yours-list li:nth-child(4){transition-delay:1.3s}
  /* the three signs act out */
  .reveal .bars-art i{transform:scaleY(0); transform-origin:bottom; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
  .reveal .sign.in .bars-art i{transform:none;}
  .reveal .sign.in .bars-art i:nth-child(2){transition-delay:.08s} .reveal .sign.in .bars-art i:nth-child(3){transition-delay:.16s}
  .reveal .sign.in .bars-art i:nth-child(4){transition-delay:.24s} .reveal .sign.in .bars-art i:nth-child(5){transition-delay:.32s} .reveal .sign.in .bars-art i:nth-child(6){transition-delay:.4s}
  .sign.in .tabs-art span.on{animation:blink 1.6s .6s ease-in-out 2;}
  .sign.in .grid-art i.warn{animation:blink 1.4s .5s ease-in-out 2;}
  /* the price card */
  .plan-pass.in .plan-shine{animation:shine 1.4s .5s ease-in-out both;}
  .plan-pass.in .plan-stamp{animation:stamp .45s .9s cubic-bezier(.3,1.6,.5,1) both;}
  /* the demo's totals when a payment is marked */
  .bump{animation:bump .5s ease-out;}
  .row-flash td{animation:row-flash .9s ease-out;}
}
@keyframes rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@keyframes select-cell{from{opacity:0; transform:scale(1.25);} to{opacity:1; transform:none;}}
@keyframes pop{from{opacity:0; transform:scale(0);} to{opacity:1; transform:none;}}
@keyframes float-in{from{opacity:0; translate:0 24px;} to{opacity:1; translate:0 0;}}
@keyframes drift1{0%,100%{translate:0 0;} 50%{translate:0 -10px;}}
@keyframes drift2{0%,100%{translate:0 0;} 50%{translate:0 8px;}}
@keyframes drift3{0%,100%{translate:0 0;} 50%{translate:0 -7px;}}
@keyframes spark{0%{opacity:0;} 25%{opacity:.14;} 100%{opacity:0;}}
@keyframes blink{0%,100%{filter:none;} 50%{filter:brightness(1.5);}}
@keyframes shine{from{transform:translateX(-140%) skewX(-12deg); opacity:1;} 85%{opacity:1;} to{transform:translateX(560%) skewX(-12deg); opacity:0;}}
@keyframes stamp{from{opacity:0; transform:rotate(-10deg) scale(1.8);} to{opacity:1; transform:rotate(-10deg) scale(1);}}
@keyframes bump{0%{transform:scale(1);} 35%{transform:scale(1.08);} 100%{transform:scale(1);}}
@keyframes row-flash{from{background:var(--paid-soft);} to{background:transparent;}}

/* Guides for tutors (home page): hairline rows like the FAQ, a selection-cell number, blue on hover */
.guide-list{list-style:none; padding:0; margin:48px auto 0; max-width:880px;}
.guide-list li{border-top:1px solid var(--hair);}
.guide-list li:last-child{border-bottom:1px solid var(--hair);}
.guide-list a{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:24px; padding:24px 8px; min-height:44px;
  color:var(--ink); text-decoration:none;}
.guide-n{position:relative; display:inline-grid; place-items:center; width:40px; height:40px; font-size:13px; color:var(--select);
  border:2px solid var(--select); background:var(--select-soft);}
.guide-n::after{content:""; position:absolute; right:-4px; bottom:-4px; width:6px; height:6px; background:var(--select); border:1.4px solid var(--sheet);}
.guide-text{display:flex; flex-direction:column; gap:4px;}
.guide-text b{font-family:var(--display); font-weight:700; font-size:20px; letter-spacing:-.015em;}
.guide-text span{color:var(--ink-soft); font-size:15px;}
.guide-meta{color:var(--ink-faint); white-space:nowrap;}
.guide-go{font-size:22px; color:var(--select);}
.guide-list a:hover .guide-text b{color:var(--select);}
@media (prefers-reduced-motion:no-preference){ .guide-go{transition:transform .15s ease;} .guide-list a:hover .guide-go{transform:translateX(4px);} }
@media (max-width:640px){ .guide-list a{grid-template-columns:auto 1fr auto; gap:16px; padding:20px 0;} .guide-meta{display:none;} }

/* guide pages (site/public/guides/): the privacy page's reading layout, plus lists, tables, a call to action */
.prose h3{margin:24px 0 6px;}
.prose ul,.prose ol{color:var(--ink-soft); padding-left:22px;}
.prose li{margin:6px 0;}
.prose .lede{text-align:left; margin:16px 0 0; font-size:19px;}
.prose .crumb{margin:0 0 12px;}
.prose .crumb a{color:var(--ink-faint); text-decoration:none; font-size:14px;}
.prose .crumb a:hover{color:var(--ink);}
.table-scroll{overflow-x:auto; margin:16px 0;}
.prose table{border-collapse:collapse; width:100%; font-size:15px; background:var(--sheet);}
.prose th,.prose td{text-align:left; padding:10px 12px; border:1px solid var(--hair); vertical-align:top;}
.prose th{font-family:var(--display); font-weight:700;}
.guide-cta{margin:40px 0 8px; padding:28px; border:2px solid var(--select); border-radius:14px; background:var(--sheet);}
.guide-cta h2{margin-top:0;}
.guide-cta p{margin:0 0 18px;}
.guide-more{margin-top:32px;}

/* The cookie question (consent.js; only when config.js has a Meta Pixel ID) */
.consent[hidden]{display:none;}
.consent{position:fixed; left:16px; right:16px; bottom:16px; z-index:30; max-width:560px; margin:0 auto; padding:18px 20px;
  background:var(--ink); color:#fff; border-radius:14px; box-shadow:0 12px 32px rgba(19,27,40,.3); font-size:15px; line-height:1.5;}
.consent p{margin:0 0 12px;}
.consent a{color:var(--on-slab-blue);}
.consent-row{display:flex; gap:10px; flex-wrap:wrap;}
.consent-btn{min-height:44px; padding:0 22px; font-size:16px; background:#fff; color:var(--ink); flex:1 1 140px;}
.consent-btn:hover{background:#e9edf5;}