/* Colours match App/Views/Theme.swift. The motif is the app's torn fax receipt. */
@font-face{font-family:"Schibsted Grotesk";src:url(/assets/schibsted-grotesk.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{--ink:#0F1F3A;--soft:#56637A;--page:#F0F5F9;--card:#FFFFFF;--line:#DDE3EA;--orange:#FF6713;--orange-ink:#B84A0B;--ok:#1B7F4B;--on-orange:#14100C;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--ink:#F1F5FB;--soft:#A8B3C7;--page:#0A111F;--card:#152036;--line:#2B3853;--orange:#FF6F20;--orange-ink:#FF9250;--ok:#6FD7A0}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font:400 18px/1.6 "Schibsted Grotesk",system-ui,-apple-system,sans-serif}
a{color:var(--orange-ink);text-underline-offset:3px}
a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
h1,h2,h3{line-height:1.12;letter-spacing:-.018em;font-weight:750;text-wrap:balance;margin:0}
h1{font-size:clamp(2.35rem,5.6vw,4.1rem)}
h2{font-size:clamp(1.55rem,3vw,2.15rem)}
h3{font-size:1.15rem;letter-spacing:-.01em}
p{margin:0}
ul,ol{padding-left:1.25em;margin:0}
li{margin:.35rem 0}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1120px;margin:auto;padding:16px max(16px,env(safe-area-inset-right)) 16px max(16px,env(safe-area-inset-left))}
.brand{display:flex;align-items:center;gap:9px;font-weight:750;color:var(--ink);text-decoration:none}
.brand img{border-radius:7px}
.top nav{display:flex;gap:16px;font-size:.95rem}
.top nav a{color:var(--soft);text-decoration:none;padding:6px 0}
.top nav a:hover{color:var(--ink)}
.wide,.read{padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right))}
.wide{max-width:1120px;margin:auto}
.read{max-width:42rem;margin:auto;padding-block:20px 56px}

/* Home */
.hero{display:grid;gap:36px;padding-block:28px 56px;align-items:center}
.hero-text{display:grid;gap:20px;justify-items:start}
.lede{font-size:1.2rem;color:var(--soft);max-width:30em}
.store{display:inline-block;padding:15px 24px;border-radius:16px;background:var(--orange);color:var(--on-orange);font-weight:700;text-decoration:none}
.store.soon{background:transparent;color:var(--ink);border:2px solid var(--ink);padding:13px 22px}
.quiet{color:var(--soft);font-size:.95rem}
.slot{position:relative;padding-top:12px;max-width:380px;width:100%;justify-self:center}
.slot::before{content:"";position:absolute;inset:0 -14px auto;height:16px;background:var(--ink);border-radius:8px;z-index:2}
.feed{overflow:hidden;padding:0 8px 14px;margin-top:-4px}
.receipt{background:var(--card);padding:30px 24px 34px;display:grid;gap:14px;filter:drop-shadow(0 8px 18px rgba(15,31,58,.16));
 --tear:conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 50% 100%/14px 7px repeat-x;
 -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat,var(--tear);mask:linear-gradient(#000 0 0) top/100% calc(100% - 7px) no-repeat,var(--tear);
 animation:feed 1.5s cubic-bezier(.2,.75,.25,1) both}
@keyframes feed{from{transform:translateY(-100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.receipt{animation:none}html{scroll-behavior:auto}}
.tick{width:58px;height:58px;color:var(--ok)}
.receipt h2{font-size:2.2rem}
.receipt dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:7px 16px;border-block:2px dashed var(--line);padding-block:14px;font-size:1rem}
.receipt dt{color:var(--soft)}
.receipt dd{margin:0;text-align:right;font-weight:600}
.receipt small{color:var(--soft);font-size:.82rem}
.block{padding-block:48px;border-top:1px solid var(--line);display:grid;gap:26px}
.steps{list-style:none;padding:0;display:grid;gap:22px;counter-reset:s}
.steps li{margin:0;counter-increment:s;display:grid;gap:6px;grid-template-columns:44px 1fr;align-items:start}
.steps li::before{content:counter(s);font-size:2rem;font-weight:800;line-height:1;color:var(--orange-ink);grid-row:span 2}
.steps p{color:var(--soft)}
.price-table{width:100%;border-collapse:collapse;max-width:40rem}
.price-table th{font-size:.9rem;color:var(--soft);font-weight:500;text-align:left;padding:8px 10px 8px 0}
.price-table td{padding:14px 10px 14px 0;border-top:1px solid var(--line)}
.price-table td:first-child{font-weight:700}
.price-table td:nth-child(2){font-size:1.45rem;font-weight:750}
.promise{display:grid;gap:24px}
.promise div{display:grid;gap:6px}
.promise p{color:var(--soft)}
.limits{display:grid;gap:4px;max-width:42rem}
.guide-list{list-style:none;padding:0;display:grid;gap:2px;max-width:42rem}
.guide-list a{display:block;padding:10px 0;font-weight:600}
details{border-top:1px solid var(--line);padding-block:14px;max-width:42rem}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:650}
details p{margin-top:8px;color:var(--soft)}
.faq{display:grid}

/* Guides and legal pages */
.crumb,.updated{font-size:.9rem;color:var(--soft)}
.crumb a{color:inherit}
.read h1{font-size:clamp(2.05rem,5vw,3rem);margin-block:8px}
.read h2{font-size:1.45rem;margin:2.1rem 0 .7rem}
.read p,.read ul,.read ol{margin-block:.8rem}
.read .small,.sources{color:var(--soft);font-size:.92rem}
.answer{font-size:1.2rem;padding-block:14px;margin-top:1.2rem!important;border-block:2px dashed var(--line)}
.compare{width:100%;border-collapse:collapse;font-size:1rem;margin-block:1rem}
.compare th{text-align:left;font-weight:600;color:var(--soft);padding:8px 10px 8px 0}
.compare td{border-top:1px solid var(--line);padding:10px 10px 10px 0;vertical-align:top}
.band{margin-top:2.6rem;background:var(--card);padding:26px 24px;display:grid;gap:12px;justify-items:start;border-radius:6px}
.band h2{margin:0;font-size:1.35rem}
.band p{margin:0;color:var(--soft)}

.foot{border-top:1px solid var(--line);margin-top:24px;padding-block:36px;padding-inline:max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-right));font-size:.95rem}

.foot-in{max-width:1088px;margin:auto;display:grid;gap:28px}
.foot h2{font-size:1rem;margin-bottom:8px}
.foot ul{list-style:none;padding:0}
.foot li{margin:0}
.foot a{display:inline-block;padding:5px 0}
.fine{color:var(--soft);font-size:.85rem;max-width:62ch}
@media (min-width:860px){
 .hero{grid-template-columns:1.25fr .85fr;padding-block:44px 76px;gap:56px}
 .steps,.promise{grid-template-columns:repeat(2,1fr);column-gap:48px}
 .guide-list{grid-template-columns:repeat(2,1fr);column-gap:48px;max-width:none}
 .foot-in{grid-template-columns:1.6fr 1fr}
 .fine{grid-column:1/-1}
}
li::marker{font-variant-numeric:normal}