:root{--bg:#0b160b;--bg2:#112111;--deep:#050c05;--paper:#d0f2d0;--ink:#0b160b;--y:#34f454;--brass:#005c0f;--cream:#cfefd0;--mut:#96bd98;--mutp:#385538;--line:rgba(207,239,208,.28);--g:clamp(16px,4vw,56px);--mh:clamp(60px,11.6vw,186px);--bs:clamp(2.3rem,6.6vw,6.2rem);--off:clamp(0px,11vw,180px);--disp:"Fraunces",Georgia,"Times New Roman",serif;--body:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Consolas,monospace}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--bg);color:var(--cream);font:400 1.0625rem/1.62 var(--body);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--y);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}
.paper :focus-visible,.yel :focus-visible{outline-color:var(--ink)}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--disp);font-optical-sizing:auto;margin:0;overflow-wrap:break-word}
h1 em,h2 em{font-style:italic;font-weight:400}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--y);color:var(--ink);padding:12px 18px;font-weight:700}
.skip:focus{left:8px;top:8px}

/* ---------- header: giant wordmark that slides away under a slim bar ---------- */
.hdr{position:sticky;top:calc(-1*var(--mh));z-index:50;background:var(--bg)}
.mast{height:var(--mh);padding:0 var(--g);overflow:hidden;display:flex;align-items:flex-end}
.mast span{display:block;font:italic 900 10.35vw/.74 var(--disp);font-variation-settings:"opsz" 144;letter-spacing:-.05em;color:var(--y);white-space:nowrap;padding-bottom:.06em}
.bar{display:flex;align-items:center;gap:20px;min-height:66px;padding:0 var(--g);border-top:2px solid var(--y);border-bottom:1px solid var(--line);position:relative}
.logo{display:inline-flex;align-items:center;gap:11px;min-height:44px;color:var(--cream);text-decoration:none;font:italic 900 1.22rem/1 var(--disp);letter-spacing:-.02em}
.logo b{font-weight:900}
.mark{flex:none;display:block}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:var(--cream);text-decoration:none;font-weight:500;font-size:.95rem;border-bottom:2px solid transparent}
.nav a:hover{color:var(--y)}
.nav a[aria-current]{color:var(--y);border-bottom-color:var(--y);font-family:var(--disp);font-style:italic;font-size:1.08rem}
.burger{display:none;width:46px;height:46px;flex:none;background:none;border:2px solid var(--cream);padding:0 10px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px}
.burger i{display:block;height:2px;background:var(--cream)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;background:var(--y);color:var(--ink);border:2px solid var(--y);border-radius:0;font:700 .98rem/1.15 var(--body);letter-spacing:.01em;text-decoration:none;text-align:center;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn.key{min-height:46px;white-space:nowrap}
.btn.xl{min-height:60px;padding:0 30px;font-size:1.1rem}
.btn.ghost{background:transparent;color:var(--cream);border-color:var(--cream)}
.btn.ghost:hover{background:var(--cream);color:var(--ink)}
.btn.sm{min-height:44px;padding:0 15px;font-size:.88rem}
.paper .btn{background:var(--ink);border-color:var(--ink);color:var(--y)}
.paper .btn:hover{background:var(--brass);border-color:var(--brass);color:#ffffff}
.paper .btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.paper .btn.ghost:hover{background:var(--ink);color:var(--paper)}
.yel .btn{background:var(--ink);border-color:var(--ink);color:var(--y)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:0}

/* ---------- page top ---------- */
main{display:block;padding-bottom:40px}
.hero,.top,.keytop,.nf{padding:clamp(34px,5.4vw,84px) var(--g) 0}
h1{font-weight:900;font-size:clamp(2.55rem,8.3vw,8.6rem);line-height:.9;letter-spacing:-.026em;font-variation-settings:"opsz" 144;color:var(--cream);max-width:15ch}
h1 em{color:var(--y);letter-spacing:-.03em}
.hero h1{max-width:none}
.hero h1 em{display:block}
.eyebrow{font:500 .82rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--y);margin:0 0 22px;display:flex;align-items:center;gap:14px}
.eyebrow::before{content:"";width:46px;height:2px;background:var(--y);flex:none}
.lead{font-size:clamp(1.12rem,1.5vw,1.36rem);line-height:1.5;color:var(--cream);max-width:40em}
.hero-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(30px,4.6vw,68px)}
.hero-row>*{min-width:0}
.ticks{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.ticks li{padding:13px 0 13px 34px;border-bottom:1px solid var(--line);position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:1.32em;width:18px;height:9px;border-left:3px solid var(--y);border-bottom:3px solid var(--y);transform:translateY(-70%) rotate(-45deg)}
.try{font:500 .8rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin:0 0 12px}
.top{padding-bottom:clamp(26px,3.6vw,52px)}
.top h1{font-size:clamp(2.55rem,7.4vw,7.4rem);margin-bottom:.28em}
.top.art h1{font-size:clamp(2.2rem,5.4vw,5.2rem);line-height:.95;max-width:20ch}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font:500 .8rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin:0 0 22px;color:var(--mut)}
.crumbs a{color:var(--mut);display:inline-flex;align-items:center;min-height:44px}
.crumbs a:hover{color:var(--y)}
.crumbs i{font-style:normal;color:var(--y)}
.crumbs span{color:var(--cream)}
.stamp{padding:0 var(--g);margin:0 0 26px;font:500 .82rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.stamp time{color:var(--y)}

/* ---------- facts: five-cell programme line ---------- */
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:clamp(40px,6vw,88px) 0 0;border-top:2px solid var(--y);border-bottom:1px solid var(--line)}
.p-pricing .facts{margin:0 var(--g)}
.facts>div{padding:22px 18px 20px 0;min-width:0}
.facts>div+div{padding-left:18px;border-left:1px solid var(--line)}
.facts dd{margin:0;font:italic 900 clamp(1.7rem,3.3vw,3.3rem)/1 var(--disp);letter-spacing:-.03em;color:var(--y);overflow-wrap:anywhere}
.facts dt{margin-top:10px;font-size:.84rem;line-height:1.35;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}

/* ---------- sections: big headline straddles the offset panel and inverts at its edge ---------- */
.sec{padding:0 var(--g);margin-top:clamp(64px,10vw,150px)}
.big{font-weight:900;font-size:var(--bs);line-height:.92;letter-spacing:-.024em;font-variation-settings:"opsz" 144;position:relative;z-index:2;color:#ffffff;mix-blend-mode:difference;margin:0 0 -.44em;padding:0 clamp(12px,3vw,46px);pointer-events:none}
.panel{min-width:0;padding:clamp(22px,3.4vw,52px)}
.sec>.panel{padding-top:calc(var(--bs)*.66 + clamp(18px,2.4vw,36px))}
.sec.nohead>.panel,.sec.in>.panel{padding-top:clamp(26px,3.6vw,56px)}
.sec.l>.panel{margin-right:var(--off)}
.sec.r>.panel{margin-left:var(--off)}
.sec.r>.big{margin-left:var(--off)}
.paper{background:var(--paper);color:var(--ink)}
.paper a{color:var(--brass)}
.bare{border:1px solid var(--line);border-top:2px solid var(--cream)}
.yel{background:var(--y);color:var(--ink)}
.yel a{color:var(--ink)}
.sec.in .big{position:static;mix-blend-mode:normal;color:var(--ink);margin:0 0 .5em;padding:0}
.sec.k-bare>.big{mix-blend-mode:normal;color:var(--cream);width:fit-content;max-width:calc(100% - 2*clamp(12px,3vw,46px));background:var(--bg);padding:0 .14em;margin-left:calc(clamp(12px,3vw,46px) - .14em)}
.sec.r.k-bare>.big{margin-left:calc(var(--off) + clamp(12px,3vw,46px) - .14em)}
.sec.narrow>.panel{max-width:920px}
.top+.sec.nohead{margin-top:0}
.grid{display:grid;gap:0}
.grid>*{min-width:0}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cell{padding:24px 26px 14px 0;border-top:2px solid currentColor}
.g3 .cell:not(:nth-child(3n+1)),.g2 .cell:nth-child(even){padding-left:26px;border-left:1px solid rgba(11,22,11,.25)}
.bare .cell:not(:nth-child(3n+1)),.bare .g2 .cell:nth-child(even){border-left-color:var(--line)}
.bare .g2 .cell:nth-child(odd){border-left:0;padding-left:0}
.cell h3{font-weight:900;font-size:clamp(1.3rem,1.9vw,1.72rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 10px}
.cell p{margin:0 0 14px;font-size:1rem}
.bare .cell{border-top-color:var(--line)}
.bare .cell h3{color:var(--y)}
.bare .cell p{color:var(--cream)}
.steps{counter-reset:st}
.steps .cell{counter-increment:st}
.steps .cell::before{content:counter(st);display:block;font:italic 400 clamp(3.4rem,6vw,5.6rem)/.8 var(--disp);letter-spacing:-.04em;margin:0 0 18px}
.bare .steps .cell::before{color:var(--y)}
.side-p{font-size:1.1rem;max-width:44em;margin:0 0 26px}

/* ---------- prose ---------- */
.prose{max-width:46em;overflow-wrap:break-word}
.prose>*{min-width:0}
.prose h2{font-weight:900;font-size:clamp(1.65rem,2.9vw,2.5rem);line-height:1.04;letter-spacing:-.025em;margin:1.7em 0 .55em;padding-top:.5em;border-top:2px solid currentColor}
.prose>h2:first-child{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-weight:600;font-size:1.3rem;line-height:1.2;margin:1.5em 0 .45em}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 1.15em}
.prose li{margin:.4em 0}
.prose li::marker{color:var(--brass);font-weight:700}
.prose strong{font-weight:700}
.prose :not(pre)>code,.keyout code{font:400 .88em var(--mono);background:rgba(11,22,11,.1);padding:.12em .36em;overflow-wrap:anywhere}
.prose table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1.4em 0;font-size:.95rem;-webkit-overflow-scrolling:touch}
.prose th,.prose td{padding:11px 16px 11px 0;text-align:left;vertical-align:top;border-bottom:1px solid rgba(11,22,11,.28);min-width:8.5em}
.prose th{font:500 .76rem/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;border-bottom:2px solid var(--ink)}
.prose blockquote{margin:1.4em 0;padding-left:20px;border-left:4px solid var(--y);font:italic 400 1.25rem/1.4 var(--disp)}

/* ---------- code ---------- */
pre.code{position:relative;margin:1.3em 0;padding:54px 20px 20px;background:var(--deep);color:#cbeccc;border-left:4px solid var(--y);font:400 .86rem/1.62 var(--mono);overflow-x:auto;max-width:100%;tab-size:2;-webkit-overflow-scrolling:touch}
pre.code code{font:inherit;background:none;padding:0;white-space:pre}
pre.code .k{color:var(--y);font-weight:700}
pre.code .s{color:#a9f28a}
pre.code .c{color:#80a082;font-style:italic}
.copy{position:absolute;top:5px;right:5px;min-width:64px;min-height:44px;padding:0 14px;background:transparent;color:var(--y);border:1px solid rgba(52,244,84,.5);font:700 .74rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.copy:hover{background:var(--y);color:var(--ink)}
.codebox{border:1px solid var(--line);border-top:2px solid var(--y);background:var(--deep);min-width:0}
.codetabs{display:flex;border-bottom:1px solid var(--line)}
.codetabs button{flex:0 1 auto;min-height:48px;padding:0 20px;background:none;border:0;border-right:1px solid var(--line);color:var(--mut);font:500 .86rem/1 var(--mono);cursor:pointer}
.codetabs button:hover{color:var(--cream)}
.codetabs button[aria-selected="true"]{background:var(--y);color:var(--ink);font-weight:700}
.codebox pre.code{margin:0;border-left:0}

/* ---------- key page ---------- */
.keytop{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(26px,4.5vw,72px);align-items:start}
.keytop>*{min-width:0}
.keytop h1{font-size:clamp(2.55rem,6.5vw,6.5rem);margin-bottom:.3em;max-width:9ch}
.formp{border-top:8px solid var(--y);padding:clamp(20px,2.6vw,36px)}
.form{margin:0}
.tabs2{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);margin:0 0 18px}
.tabs2 button{min-height:48px;padding:6px 10px;background:transparent;border:0;color:var(--ink);font:700 .95rem/1.15 var(--body);cursor:pointer}
.tabs2 button[aria-selected="true"]{background:var(--ink);color:var(--y)}
.msg{font-weight:500;font-size:.95rem}
.msg:not(:empty){padding:12px 14px;margin:0 0 16px;border:2px solid var(--ink);background:#e8ffea}
.msg.err:not(:empty){background:#648a12;border-color:#648a12;color:#ffffff}
.row{margin:0 0 16px}
.row label,.calc label{display:block;margin:0 0 7px;font:500 .76rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.row input,.row select,.row textarea,.calc input{display:block;width:100%;min-height:50px;padding:10px 14px;background:#f2fff3;color:var(--ink);border:2px solid var(--ink);border-radius:0;font:400 1rem/1.4 var(--body)}
.row textarea{min-height:170px;resize:vertical}
.row input:focus,.row select:focus,.row textarea:focus,.calc input:focus{outline:3px solid var(--brass);outline-offset:2px}
.note{font-size:.86rem;line-height:1.45;color:var(--mutp);margin:8px 0 0}
.form form>.btn,form[data-support]>.btn{width:100%;min-height:56px;margin-top:4px;font-size:1.04rem}
.form form>.note{text-align:center;margin-top:12px}
.keyout{display:none}
.keyout.on{display:block}
.keyout h3{font-weight:900;font-size:1.6rem;margin:0 0 12px}
.keybox{display:flex;align-items:center;gap:12px;background:var(--ink);color:var(--y);padding:12px 12px 12px 16px;font:400 .9rem/1.4 var(--mono);margin:0 0 10px}
.keybox span{flex:1;min-width:0;overflow-wrap:anywhere}
.keybox .btn{background:var(--y);border-color:var(--y);color:var(--ink);flex:none}
.keyout p{margin:12px 0}
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
form[data-support] [role="status"]{font-weight:700}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr);gap:clamp(16px,2.6vw,36px);align-items:end}
.calc>div{min-width:0}
.calc output{display:block;font:italic 900 clamp(2.5rem,5.4vw,4.8rem)/1 var(--disp);letter-spacing:-.03em;color:var(--ink);border-bottom:4px solid var(--ink);padding-bottom:6px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}

/* ---------- docs / article split ---------- */
.split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(22px,3.4vw,54px);padding:0 var(--g);align-items:start}
.split.rev{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
.split>*{min-width:0}
.rail{position:sticky;top:92px;max-height:calc(100vh - 110px);overflow:auto;border-top:2px solid var(--y);padding-top:18px}
.rail .btn{width:100%;margin-top:20px}
.toc-h{font:500 .78rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;color:var(--y)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:tc}
.toc li{counter-increment:tc;border-bottom:1px solid var(--line)}
.toc a{display:flex;gap:12px;align-items:baseline;min-height:44px;padding:10px 0;color:var(--cream);text-decoration:none;font-size:.96rem;line-height:1.3}
.toc a::before{content:counter(tc);font:italic 400 1.2rem/1 var(--disp);color:var(--y);min-width:1.1em}
.toc a:hover{color:var(--y)}
.long .prose{font-size:1.1rem;line-height:1.7}
.takes{background:var(--y);color:var(--ink);padding:24px 26px 12px;margin:0 0 34px;max-width:46em}
.takes .toc-h{color:var(--ink)}
.takes ul{list-style:none;margin:0;padding:0}
.takes li{padding:12px 0;border-top:1px solid rgba(11,22,11,.4);font:600 1.14rem/1.32 var(--disp)}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;min-height:56px;padding:14px 0;font:600 clamp(1.16rem,1.7vw,1.5rem)/1.2 var(--disp);letter-spacing:-.01em;color:var(--cream)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;border-right:3px solid var(--y);border-bottom:3px solid var(--y);transform:rotate(45deg);transition:transform .2s;margin:0 6px 6px 0}
.faq details[open] summary::after{transform:rotate(-135deg);margin-bottom:-6px}
.faq details[open] summary{color:var(--y);font-style:italic}
.faq .ans{padding:0 0 18px;max-width:46em;color:var(--cream)}
.faq .ans p{margin:0}

/* ---------- closing / 404 / footer ---------- */
.closing{padding:0 var(--g);margin-top:clamp(70px,11vw,170px)}
.huge{font-weight:900;font-size:clamp(2.6rem,9vw,9.2rem);line-height:.88;letter-spacing:-.04em;font-variation-settings:"opsz" 144;color:var(--cream);margin:0 0 .3em;max-width:13ch}
.huge em{color:var(--y)}
.closing>p{font-size:clamp(1.1rem,1.5vw,1.34rem);max-width:38em;margin:0 0 28px}
.nf{min-height:56vh;padding-bottom:60px}
.nf h1{margin-bottom:.3em}
.nf .lead{margin-bottom:30px}
.foot{margin-top:clamp(70px,10vw,150px);padding:clamp(34px,5vw,70px) var(--g) 36px;background:var(--paper);color:var(--ink)}
.foot-tag{font:900 clamp(1.7rem,4.4vw,4.2rem)/.96 var(--disp);letter-spacing:-.03em;margin:0 0 clamp(26px,4vw,54px);max-width:18ch}
.foot-tag em{font-style:italic;font-weight:400}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 30px;border-top:2px solid var(--ink);padding-top:18px}
.foot .logo{color:var(--ink)}
.foot-nav{display:flex;flex-wrap:wrap;gap:0 22px}
.foot-nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:500}
.legal{margin:18px 0 0;font-size:.86rem;color:var(--mutp)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
.hero-row{grid-template-columns:minmax(0,1fr)}
.split,.split.rev{grid-template-columns:minmax(0,1fr)}
.split.rev .rail{order:-1}
.rail{position:static;max-height:none}
}
@media (max-width:900px){
.burger{display:flex}
.btn.key{margin-left:auto}
.nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--bg2);border-bottom:2px solid var(--y);padding:6px var(--g) 14px;margin:0}
.nav.open{display:flex}
.nav a{min-height:50px;font-size:1.05rem;border-bottom:1px solid var(--line);padding:0}
.keytop{grid-template-columns:minmax(0,1fr)}
.keytop h1{max-width:none;margin-bottom:.22em}
.keytop{gap:18px;padding-top:22px}
.keytop .lead{font-size:1.02rem;margin-bottom:0}
.keytop .crumbs{margin-bottom:8px}
.g3{grid-template-columns:minmax(0,1fr)}
.g3 .cell:not(:nth-child(3n+1)){padding-left:0;border-left:0}
.steps .cell{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px}
.steps .cell::before{grid-row:1/3;margin:0}
.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
.facts>div:first-child{grid-column:1/-1}
.facts>div{border-top:1px solid var(--line)}
.facts>div:first-child{border-top:0}
.facts>div+div{padding-left:0;border-left:0}
.facts>div:nth-child(odd):not(:first-child){padding-left:18px;border-left:1px solid var(--line)}
.calc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:620px){
:root{--off:0px}
body{font-size:1rem}
.logo b{display:none}
.bar{gap:10px;min-height:62px}
.btn.key{padding:0 14px;font-size:.92rem}
.g2{grid-template-columns:minmax(0,1fr)}
.g2 .cell:nth-child(even){padding-left:0;border-left:0}
.cell{padding-right:0}
.panel{padding-left:18px;padding-right:18px}
.big{padding:0 10px}
.sec.k-bare>.big{margin-left:6px;max-width:calc(100% - 12px)}
.btn.xl{width:100%}
.cta-row .btn.ghost{width:100%}
.codetabs button{flex:1;padding:0 8px}
pre.code{font-size:.8rem;padding-left:14px;padding-right:14px}
.foot .logo b{display:inline}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition:none!important;animation:none!important}
}