@font-face{font-family:"Schibsted Grotesk";font-weight:400;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-400.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:700;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-700.woff2") format("woff2")}
@font-face{font-family:"Schibsted Grotesk";font-weight:800;font-display:swap;src:url("/assets/fonts/schibsted-grotesk-800.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-weight:700;font-display:swap;src:url("/assets/fonts/caveat-700.woff2") format("woff2")}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
img{max-width:100%}
/* Layout concept: a student's notebook page with sticker energy. Graph paper ground, thick ink outlines with hard shadows, yellow highlighter on the key words, pink for actions, red pen for handwritten notes. One committed light look. */
:root{
  color-scheme:light;
  --paper:#fdfdf8; --grid:#e3e9f3; --card:#ffffff; --ink:#1d2433; --soft:#4b5468; --faint:#8a92a3;
  --hi:#ffe14d; --pink:#ff90e8; --pen:#e0412f; --teal:#23a094; --rule:#c9d1de; --hl:#fff6c2;
  --good:#0f6b4c; --good-bg:#bdf0d6; --warn:#6b4a00; --warn-bg:#ffe9a3; --bad:#9c1c12; --bad-bg:#ffc9c2;
  --t1:#ff90e8; --t2:#9fe3d6; --t3:#ffe14d;
  --sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --type:"Schibsted Grotesk",system-ui,sans-serif;
  --hand:"Caveat","Comic Sans MS",cursive;
  --shadow:4px 4px 0 var(--ink);
}
*{box-sizing:border-box}
body{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;color:var(--ink);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--pen);outline-offset:2px}
[hidden]{display:none!important}
mark{background:linear-gradient(transparent 56%,var(--hi) 56%);color:inherit}
.in{max-width:1100px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.label{font:800 12px/1.2 var(--type);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.scr{font:700 25px/1.1 var(--hand);color:var(--pen);display:inline-block;transform:rotate(-2deg)}

.card{background:var(--card);border:2.5px solid var(--ink);border-radius:8px;box-shadow:var(--shadow);position:relative;min-width:0}
.tabbed{margin-top:20px}
.tabbed>.tab{position:absolute;top:-19px;left:16px;padding:2px 11px;border:2.5px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;font:800 12px/1.3 var(--type);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.t1 .tab{background:var(--t1)}.t2 .tab{background:var(--t2)}.t3 .tab{background:var(--t3)}

.bar{background:var(--paper);border-bottom:2.5px solid var(--ink);position:relative;z-index:20}
.bar .in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-block:10px}
.mark{color:var(--ink);text-decoration:none;font:700 32px/1 var(--hand);white-space:nowrap}
.mark u{text-decoration:none;background:linear-gradient(transparent 55%,var(--hi) 55%);padding:0 2px}
.menus{display:flex;gap:4px}
.menu{position:relative}
.menu>button{background:none;border:2px solid transparent;cursor:pointer;font-weight:700;font-size:15px;padding:6px 10px;border-radius:6px;display:flex;gap:6px;align-items:center}
.menu>button:hover,.menu>button[aria-expanded="true"]{border-color:var(--ink);background:var(--hi)}
.menu>button svg{width:10px;height:10px}
.drop{position:absolute;top:calc(100% + 10px);left:0;min-width:290px;padding:8px;z-index:30;display:grid;gap:2px}
.drop a,.results a{display:grid;gap:1px;padding:9px 10px;border-radius:5px;color:var(--ink);text-decoration:none}
.drop a b,.results a b{font-weight:700;font-size:15px}
.drop a span,.results a span{font-size:13px;color:var(--soft)}
.drop a:hover,.drop a:focus-visible,.results a:hover,.results a.on{background:var(--hl)}
.search{position:relative;flex:1;min-width:200px;max-width:330px;margin-left:auto}
.search input{width:100%;background:var(--card);border:2.5px solid var(--ink);border-radius:8px;padding:8px 12px 8px 36px;font-size:15px}
.search svg{position:absolute;left:12px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--ink);pointer-events:none}
.results{position:absolute;top:calc(100% + 8px);left:0;right:0;padding:6px;z-index:30;display:grid;gap:2px}
.results .none{padding:9px 10px;color:var(--soft);font-size:14px}

.hero{padding-block:50px 44px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.hero h1{font:800 clamp(2.4rem,5.6vw,3.9rem)/1.02 var(--sans);letter-spacing:-.035em}
.hero p{font-size:1.15rem;color:var(--soft);max-width:34ch;margin-top:14px}
.hero .scr{margin-top:14px}
.hero .search{margin:20px 0 0;max-width:460px}
.hero .search input{padding:13px 14px 13px 42px;font-size:16px;box-shadow:var(--shadow)}
.hero .search svg{left:15px;width:17px;height:17px}
.sample{padding:20px 22px 18px;transform:rotate(-1.2deg);box-shadow:6px 6px 0 var(--ink)}
.sample .row1{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding-bottom:8px;border-bottom:2.5px solid var(--ink)}
.sample .row1 strong{font:800 15px/1.2 var(--sans)}
.sample .row1 .label{background:var(--pink);padding:2px 7px;border-radius:4px;border:2px solid var(--ink)}
.sample .lines{display:grid}
.sample .lines div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1.5px dashed var(--rule);font-size:15px}
.sample .lines div span:last-child{font-weight:800}
.sample .ans{display:flex;align-items:baseline;gap:10px;padding-top:12px;flex-wrap:wrap}
.sample .ans b{font:800 46px/1 var(--sans);letter-spacing:-.04em;background:linear-gradient(transparent 60%,var(--hi) 60%)}
.sample .ans .scr{font-size:23px;margin:0}
.sample .note{font-size:12px;color:var(--faint);margin-top:6px}

.sec{padding-block:14px 56px;display:grid;gap:18px}
.sec h2{font:800 1.6rem/1.2 var(--sans);letter-spacing:-.02em}
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 22px}
.tool{display:grid;gap:8px;padding:20px 20px 18px;color:var(--ink);text-decoration:none;align-content:start;transition:transform .12s,box-shadow .12s}
.tool:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.tool h3{font:800 1.25rem/1.2 var(--sans);letter-spacing:-.015em}
.tool p{color:var(--soft);font-size:15px}
.tool .go{font-weight:800;font-size:15px;margin-top:6px}
.tool .go::after{content:" \2192"}
.qs{display:grid;max-width:700px;background:var(--card);border:2.5px solid var(--ink);border-radius:8px;box-shadow:var(--shadow)}
.qs a{display:flex;justify-content:space-between;gap:12px;padding:13px 16px;border-top:1.5px dashed var(--rule);color:var(--ink);text-decoration:none;font-weight:600}
.qs a:first-child{border-top:0}
.qs a:hover{background:var(--hl)}

.page{padding-block:24px 56px;display:grid;gap:24px}
.crumb{font-size:14px;color:var(--soft);font-weight:600}.crumb a{color:var(--soft)}
.page-h{display:grid;gap:8px;max-width:720px}
.page-h h1{font:800 clamp(2rem,4.8vw,2.9rem)/1.04 var(--sans);letter-spacing:-.035em}
.page-h p{color:var(--soft);font-size:1.08rem}
.leftcol{display:grid;gap:28px;min-width:0}
.grid2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:start}
.panel-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px 18px 10px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 10px}
.chip{border:2px solid var(--ink);background:var(--card);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700;cursor:pointer;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--hi)}
.field{width:100%;min-width:0;background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:7px 9px;font-size:15px}
input[type=number].field{text-align:right;font-weight:700;-moz-appearance:textfield}
.field::-webkit-outer-spin-button,.field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field::placeholder{color:var(--faint);font-weight:400}
.field:focus{background:var(--hl)}
.nameline{padding:0 18px 12px}
.nameline .field{font-weight:800}
.hd,.row{display:grid;grid-template-columns:minmax(0,1fr) 74px 84px 30px;gap:8px;align-items:center;padding:0 18px}
.hd{padding-block:7px;border-top:2.5px solid var(--ink)}
.hd span:nth-child(2),.hd span:nth-child(3){text-align:right}.hd span:nth-child(4){text-align:center}
.row{padding-block:7px;border-top:1.5px dashed var(--rule)}
.row.final{background:var(--hl)}
.solve{text-align:right;font:700 22px/1 var(--hand);color:var(--pen);padding-right:8px}
.radio{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--ink);background:var(--card);cursor:pointer;padding:0;justify-self:center;position:relative}
.radio[aria-checked="true"]::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink)}
.x{border:0;background:none;color:var(--soft);cursor:pointer;font-size:22px;line-height:1;padding:4px;border-radius:4px}
.x:hover{color:var(--pen)}
.foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:12px 18px;border-top:2.5px solid var(--ink)}
.btn{border:2.5px solid var(--ink);background:var(--card);border-radius:6px;padding:7px 13px;font-weight:800;font-size:14px;cursor:pointer;color:var(--ink);text-decoration:none;display:inline-block;box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn.solid{background:var(--pink)}
.btn:hover{background:var(--hi)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.sum{font:800 13px/1 var(--type);color:var(--soft)}.sum.off{color:var(--pen)}
.alert{margin:0 18px 10px;padding:8px 12px;border-radius:6px;background:var(--warn-bg);color:var(--warn);font-size:14px;font-weight:600;border:2px solid var(--ink)}
details{border-top:2.5px solid var(--ink)}
summary{padding:12px 18px;cursor:pointer;font-weight:800}
.pane{padding:0 18px 16px;display:grid;gap:10px}
textarea.field{min-height:150px;resize:vertical;font-size:14px;line-height:1.5}
.muted{color:var(--soft);font-size:14px}
.dz{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;border:2.5px dashed var(--ink);border-radius:8px;padding:14px;background:var(--paper)}
.dz.over{background:var(--hl);border-style:solid}
.about .page-h{max-width:780px}
.about .page-h h1{font-size:clamp(2.2rem,5.4vw,3.6rem)}
.about .tool p{margin:0}
.about-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:6px}
.promises{padding:20px 22px}
.promises h2,.fine h2{font:800 1.4rem/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 10px}
.promises ul{list-style:none;margin:0;padding:0;display:grid}
.promises li{padding:11px 0 11px 34px;border-top:1.5px dashed var(--rule);position:relative}
.promises li:first-child{border-top:0}
.promises li::before{content:"";position:absolute;left:2px;top:12px;width:20px;height:20px;border:2.5px solid var(--ink);border-radius:5px;background:var(--hi)}
.promises li::after{content:"";position:absolute;left:9px;top:15px;width:6px;height:11px;border:solid var(--ink);border-width:0 3px 3px 0;transform:rotate(45deg)}
.fine{padding-top:6px}
@media (max-width:860px){.about-2{grid-template-columns:minmax(0,1fr)}}
/* LEGAL-QUIET-START */
.legal{background:var(--card);border:1px solid var(--rule);border-radius:4px;max-width:720px;padding:34px clamp(18px,4vw,44px) 40px;gap:10px;font-size:15px;line-height:1.65;color:var(--soft)}
.legal .page-h{margin-bottom:10px;padding-bottom:16px;border-bottom:1px solid var(--rule);gap:6px}
.legal .page-h h1{font-size:clamp(1.6rem,3.6vw,2rem);letter-spacing:-.02em;color:var(--ink)}
.legal .page-h p{font-size:15px}
.legal .page-h .label{color:var(--faint);font-size:11px}
.prose.legal h2{font:700 1rem/1.3 var(--sans);letter-spacing:0;color:var(--ink);margin-top:16px}
.legal b{color:var(--ink)}
.legal ul{margin:0;padding-left:20px;display:grid;gap:8px}
.legal a{color:var(--ink)}
/* LEGAL-QUIET-END */
.cuts{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.cuts label{display:grid;gap:3px;font:800 13px/1 var(--type)}

.result{background:var(--card)}
.result .top{padding:18px 20px 16px;display:grid;gap:4px;border-bottom:2.5px solid var(--ink)}
.pick{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-weight:700}
.on{display:flex;flex-wrap:wrap;gap:7px;align-items:center;font-weight:700;margin-top:4px}
.on select{border:2px solid var(--ink);background:var(--hi);border-radius:6px;padding:3px 6px;font-weight:800;max-width:100%}
.pick select{border:2px solid var(--ink);background:var(--hi);border-radius:6px;padding:3px 6px;font-weight:800}
.big{font:800 clamp(3.5rem,9vw,5rem)/1 var(--sans);letter-spacing:-.05em;margin-top:6px;justify-self:start;background:linear-gradient(transparent 62%,var(--hi) 62%);padding:0 4px}
.say{font-weight:600}
.pill{white-space:nowrap;justify-self:start;font:800 12px/1 var(--type);letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:2px solid var(--ink);margin-top:6px}
.pill.ok{background:var(--good-bg);color:var(--good)}.pill.mid{background:var(--warn-bg);color:var(--warn)}.pill.no{background:var(--bad-bg);color:var(--bad)}
.span{padding:14px 20px;border-bottom:2.5px solid var(--ink);display:grid;gap:8px}
.track{position:relative;height:14px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.fill{position:absolute;top:0;bottom:0;background:var(--teal)}
.span .ends{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--soft);font-weight:600}
.span .ends span:last-child{text-align:right}
table{border-collapse:collapse;width:100%}
.lad td{padding:8px 20px;border-top:1.5px dashed var(--rule)}
.lad tr:first-child td{border-top:0}
.lad tr.me td{background:var(--hl)}
.lad .l{font:800 16px/1 var(--sans);width:56px}
.lad .p{text-align:right;font-weight:700}
.lad .s{text-align:right;width:130px}
.result .foot{border-top:2.5px solid var(--ink)}

.dates .drow{display:grid;grid-template-columns:minmax(0,1fr) 150px auto 30px;gap:8px;align-items:center;padding:7px 18px;border-top:1.5px dashed var(--rule)}
.dates .drow:first-child{border-top:0}
.dates .gcal{font-size:13px;font-weight:800;white-space:nowrap}
.empty{padding:12px 18px 16px;color:var(--soft);font-size:14px}

.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.stat{padding:18px 20px;display:grid;gap:2px}
.stat .big{font-size:clamp(3rem,7vw,4rem)}
.gr{display:grid;grid-template-columns:minmax(0,1fr) 76px 92px 30px;gap:8px;align-items:center;padding:7px 18px;border-top:1.5px dashed var(--rule)}
.gr.label{border-top:2.5px solid var(--ink)}
.prior{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 18px}
.prior label,.tsf label{display:grid;gap:4px;font-size:14px;font-weight:800}
.tsf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:18px}
.tbl{overflow-x:auto}

.prose{max-width:68ch;display:grid;gap:13px}
.prose h2{font:800 1.4rem/1.25 var(--sans);letter-spacing:-.02em;margin-top:14px}
.prose code{display:block;font:700 15px/1.5 var(--sans);background:var(--card);border:2.5px solid var(--ink);border-radius:8px;padding:12px 14px;overflow-x:auto;box-shadow:var(--shadow)}
.prose a:not(.btn){font-weight:700;text-decoration-thickness:2px;text-decoration-color:var(--pink)}
footer{border-top:2.5px solid var(--ink);background:var(--paper)}
footer .in{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;padding-block:22px;font-size:14px;color:var(--soft)}
footer nav{display:flex;flex-wrap:wrap;gap:6px 18px}footer a{color:var(--ink);font-weight:700}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:32px}
  .sample{max-width:440px}
  .grid2,.tools{grid-template-columns:minmax(0,1fr)}
  .leftcol{display:contents}.leftcol>.dates{order:3}
  .bar .search{order:3;flex-basis:100%;max-width:none;margin:0}
}
@media (max-width:540px){
  .hd,.row{grid-template-columns:minmax(0,1fr) 54px 62px 22px;gap:5px;padding-inline:12px}
  .row .field{padding:7px 6px}
  .gr{grid-template-columns:minmax(0,1fr) 52px 70px 22px;gap:5px;padding-inline:12px}
  .dates .drow{grid-template-columns:minmax(0,1fr) 22px;gap:6px;padding-inline:12px}
  .dates .drow input[type=date],.dates .drow .gcal{grid-column:1/2}
  .dates .drow .x{grid-row:1;grid-column:2}
  .lad td{padding-inline:14px}.lad .s{width:auto}
  .stats,.tsf{grid-template-columns:minmax(0,1fr)}
  .menus{position:static}.menu{position:static}.bar .in{position:relative}
  .drop{left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));min-width:0;top:calc(100% - 2px)}
  .sample{transform:rotate(-.6deg)}
}
@media (prefers-reduced-motion:reduce){.tool,.btn{transition:none}}
.contact{font-weight:800;user-select:all}
.nf{padding-block:70px 90px;display:grid;gap:16px;justify-items:start}
.nf h1{font:800 clamp(2.2rem,6vw,3.6rem)/1.05 var(--sans);letter-spacing:-.035em}
.prose table{border-collapse:collapse;width:100%;min-width:420px;background:var(--card);border:2.5px solid var(--ink);border-radius:8px;overflow:hidden;font-size:15px}
.prose th,.prose td{padding:9px 12px;text-align:left;border-top:1.5px dashed var(--rule)}
.prose thead th{background:var(--hi);border-top:0;font-weight:800}
.prose .tbl{overflow-x:auto;border-radius:8px}
.prose ul{margin:0;padding-left:22px;display:grid;gap:6px}
.related{list-style:none;padding:0!important}
.related a{font-weight:700}
.guide-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.guide-card{display:grid;gap:8px;padding:20px;color:var(--ink);text-decoration:none;align-content:start;transition:transform .12s,box-shadow .12s}
.guide-card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.guide-card h3{font:800 1.15rem/1.25 var(--sans)}
.guide-card p{color:var(--soft);font-size:15px;margin:0}
.guide-card .go{font-weight:800;font-size:14px}
.guide-card .go::after{content:" \2192"}