@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Fragment Mono";src:url(/fonts/fragment-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{--paper:#F4F7FB;--ink:#0A1830;--mute:#51607A;--line:#DCE4F0;--blue:#1D4ED8;--blue-d:#1741B5;--soft:#E3ECFB;--sand:#E9EFF8;--navy:#071632;--sky:#8CC8FF;--amber:#FFB547;--amber-d:#F2A02B;--serif:"Instrument Serif",Georgia,serif;--sans:"Schibsted Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Fragment Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,canvas,svg{max-width:100%}a{color:var(--blue);text-underline-offset:3px}a:hover{color:var(--blue-d)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:12px;top:-64px;z-index:30;background:var(--ink);color:#fff;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:600}.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;letter-spacing:-.015em}
h1{font-size:clamp(46px,7.4vw,92px);line-height:.98}h2{font-size:clamp(34px,4.6vw,56px);line-height:1.04}h3{font-size:28px;line-height:1.15}
h1 em,h2 em{font-style:italic;color:var(--blue)}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.eyebrow{font:400 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 20px}
.lead{font-size:20px;color:#33425C;max-width:34em}
/* header */
.top{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font:italic 400 30px/1 var(--serif);min-height:44px}
.logo:hover{color:var(--ink)}.logo small{font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);border:1px solid var(--blue);border-radius:99px;padding:5px 9px;margin-left:2px}
.top nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.top nav a:not(.btn){color:var(--ink);text-decoration:none;font-weight:500;font-size:16px;padding:10px 14px;border-radius:8px;min-height:44px;display:inline-flex;align-items:center}
.top nav a:not(.btn):hover{background:var(--sand)}.top nav a[aria-current]{background:var(--sand)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 26px;border-radius:10px;background:var(--ink);color:#fff;font:600 16px/1.2 var(--sans);text-decoration:none;border:1.5px solid var(--ink);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.go{background:var(--amber);border-color:var(--amber);color:var(--ink)}.btn.go:hover{background:var(--amber-d);border-color:var(--amber-d);color:var(--ink)}
.btn.alt{background:transparent;color:var(--ink)}.btn.alt:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.sm{min-height:44px;padding:10px 18px;font-size:15px}
.btn.inv{background:#fff;color:var(--ink);border-color:#fff}.btn.inv:hover{background:var(--soft);border-color:var(--soft);color:var(--ink)}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.note{margin-top:22px;font-size:15px;color:var(--mute)}
/* hero */
.hero{background:var(--navy);color:#fff;background-image:radial-gradient(800px 380px at 100% 0,rgba(47,155,255,.34),transparent 70%);padding:88px 0 0;overflow:hidden}
.hero .eyebrow{color:var(--sky)}.hero h1{color:#fff;max-width:11em}.hero h1 em{color:var(--sky)}.hero .lead{color:#C9D8F2;margin-top:24px}
.hero .btn.alt{color:#fff;border-color:rgba(255,255,255,.5)}.hero .btn.alt:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero .note{color:#9FB4D8}
.hstage{position:relative;margin-top:64px;display:flex;justify-content:center;align-items:flex-end;gap:26px}
.bro{background:#fff;border-radius:14px 14px 0 0;overflow:hidden;width:min(760px,100%);border:1px solid rgba(255,255,255,.25);border-bottom:0}
.bro .bar2{height:30px;background:#E6ECF6;display:flex;align-items:center;gap:6px;padding:0 12px}.bro .bar2 i{width:9px;height:9px;border-radius:50%;background:#B8C4D8}
.bro img{display:block;width:100%;height:auto}
.hpost{display:none;width:300px;flex:none;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.25);margin-bottom:0;align-self:flex-end;transform:translateY(-26px)}.hpost img{display:block;width:100%;height:auto}
@media(min-width:980px){.hpost{display:block}}
/* sections */
.sec{padding:96px 0}.tint{background:var(--sand)}.sh{max-width:46em;margin-bottom:48px}.sh p:not(.eyebrow){margin-top:18px;color:#33425C}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.steps li{background:var(--sand);border-radius:20px;padding:30px 28px 32px}.tint .steps li{background:var(--paper)}
.steps .n{display:block;font:400 13px/1 var(--mono);letter-spacing:.08em;color:var(--blue);margin-bottom:44px}.steps h3{font-size:30px}.steps p{margin:12px 0 0;color:#33425C;font-size:17px}
.styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sty{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.sty img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.sty div{padding:20px 24px 24px}.sty h3{font-size:30px}.sty p{margin:8px 0 0;font-size:16px;color:var(--mute)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.posts img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.plan{background:var(--navy);color:#fff;border-radius:28px;padding:44px 40px;background-image:radial-gradient(500px 240px at 100% 0,rgba(47,155,255,.3),transparent 70%)}
.plan .k{font:400 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sky)}
.plan .pr{font:400 clamp(60px,8vw,88px)/1 var(--serif);margin:22px 0 4px}.plan .pr small{font:400 18px/1 var(--sans);color:#C9D8F2;margin-left:8px}
.plan ul{list-style:none;margin:26px 0 30px;padding:24px 0 0;border-top:1px solid rgba(255,255,255,.2);display:grid;gap:10px}
.plan li{padding-left:24px;position:relative;color:#E6EEFB;font-size:17px}.plan li:before{content:"";position:absolute;left:0;top:.7em;width:11px;height:2px;background:var(--sky)}
.plan .fine{font-size:14px;color:#9FB4D8;margin:18px 0 0}
.faq{border-top:1px solid var(--ink)}.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;font-weight:600;font-size:18px;min-height:44px}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font:400 28px/1 var(--serif);color:var(--blue);flex:none;width:24px;text-align:center}
.faq details[open] summary:after{content:"\2212"}.faq details p{margin:0;padding:0 48px 24px 0;color:#33425C}
.cta{padding:0 0 96px}.ctab{background:#0A2A6B;background-image:radial-gradient(700px 300px at 100% 0,rgba(47,155,255,.4),transparent 70%);color:#fff;border-radius:28px;padding:60px 52px;display:flex;flex-wrap:wrap;gap:28px 48px;align-items:center;justify-content:space-between}
.ctab h2{color:#fff;max-width:13em}.ctab p{margin:14px 0 0;color:#C3D2EC;max-width:30em}.ctab .acts{margin:0}
.foot{background:var(--navy);color:#C9D8F2;padding:56px 0 30px;font-size:16px}.foot a{color:#C9D8F2}.foot a:hover{color:#fff}
.fc{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}.foot h2{font:400 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--sky);margin-bottom:16px}.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.legal{margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);font-size:14px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.prose{max-width:44em;padding:72px 0 96px}.prose h1{font-size:clamp(40px,6vw,64px);margin-bottom:24px}.prose h2{font-size:30px;margin:36px 0 10px}.prose p{color:#33425C}
/* demo */
.demo{padding:36px 0 80px}.dh{margin-bottom:26px}.dh .eyebrow{margin-bottom:26px}.dh h1{font-size:clamp(38px,5vw,60px)}.dh p{margin:10px 0 0;color:#33425C;max-width:40em}
.dgrid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:28px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px}
.panel h2{font:400 13px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin:0 0 16px}
.f{display:grid;gap:5px;margin-bottom:16px}.f label,.f .l{font-weight:600;font-size:15px}.f small{color:var(--mute);font-size:13px;margin-top:-2px}
.f input,.f select,.f textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;min-height:46px}
.f textarea{min-height:92px;resize:vertical}.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(29,78,216,.18)}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label{display:block;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;background:var(--paper);font-weight:600;font-size:15px}
.pick label span{display:flex;gap:4px;margin-bottom:8px}.pick label span i{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.12)}
.pick input:checked+label{border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.18);background:#fff}
.pick input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.s-lookbook i:nth-child(1){background:#F7F3EC}.s-lookbook i:nth-child(2){background:#1A1A1A}.s-lookbook i:nth-child(3){background:#B3145A}
.s-pubsign i:nth-child(1){background:#F3EBD8}.s-pubsign i:nth-child(2){background:#1F4D3A}.s-pubsign i:nth-child(3){background:#C9A24B}
.s-clean i:nth-child(1){background:#F4F7FB}.s-clean i:nth-child(2){background:#071632}.s-clean i:nth-child(3){background:#1D4ED8}
.s-fresh i:nth-child(1){background:#FBFAF5}.s-fresh i:nth-child(2){background:#0F4C4A}.s-fresh i:nth-child(3){background:#F4B942}
.snote{font-size:14px;color:var(--mute);margin:10px 0 0}
.pbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.out{min-width:0}.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.tl{display:flex;gap:8px;flex-wrap:wrap}.tab{min-height:46px;padding:10px 20px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font:600 16px/1 var(--sans);color:var(--ink);cursor:pointer}
.tab[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.tools{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.frame{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;justify-content:center;background:var(--sand)}
.frame iframe{border:0;width:100%;height:760px;background:#fff;display:block;max-width:100%}.frame.phone iframe{width:390px}
.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.pc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px}.pc canvas{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.pc h3{font:600 15px/1.3 var(--sans);margin:12px 0 6px;letter-spacing:0}.pc pre{margin:0 0 12px;white-space:pre-wrap;font:400 14px/1.5 var(--sans);color:#33425C;}
.pc .pb{display:flex;gap:8px;flex-wrap:wrap}
.hint{font-size:14px;color:var(--mute);margin:14px 0 0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:99px;font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}.toast.on{opacity:1}
@media(max-width:1020px){.dgrid{grid-template-columns:minmax(0,1fr)}.split{grid-template-columns:minmax(0,1fr);gap:40px}.styles{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:minmax(0,1fr)}.fc{grid-template-columns:minmax(0,1fr);gap:28px}}
@media(max-width:760px){.sec{padding:64px 0}.hero{padding-top:56px}.hstage{margin-top:44px}.posts{grid-template-columns:repeat(2,minmax(0,1fr))}.ctab{padding:40px 26px;border-radius:22px}.acts .btn{flex:1 1 100%}.top nav a:not(.btn):not(.keep){display:none}.plan{padding:32px 24px}.faq details p{padding-right:0}.frame iframe{height:620px}.tools{margin-left:0}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}