/* Layout: sticky hiilenharmaa header with dropdown menus, white content bands, ruled grids instead of cards.
   Colour: charcoal + white + one teal accent. Type: Schibsted Grotesk for headings, Source Sans 3 for text. */
:root{
  --bg:#FFFFFF; --surface:#F3F5F5; --surface-2:#E8ECEC; --fg:#1B2022; --muted:#586266; --line:#D9DFE0;
  --char:#14181A; --char-2:#1E2427; --char-fg:#F5F7F7; --char-muted:#A9B3B6; --char-line:#2F393D;
  --top:#FFFFFF; --top-fg:#1B2022; --top-line:#D9DFE0;
  --accent:#1B7A6E; --accent-ink:#FFFFFF; --accent-on-char:#6CCDBB;
  --seg-a:#6B787D; --seg-b:#97A3A7; --seg-c:#C5CDCF;
  --shadow:0 14px 34px rgba(15,20,22,.16);
  --f-display:'Schibsted Grotesk','Source Sans 3',system-ui,sans-serif;
  --f-body:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hdr-h:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131719; --surface:#1B2124; --surface-2:#242B2F; --fg:#EDF1F1; --muted:#9BA7AA; --line:#2E373B;
    --char:#0E1214; --char-2:#182024; --char-line:#2C373B;
    --top:#0E1214; --top-fg:#F5F7F7; --top-line:#2C373B;
    --accent:#5CC9B6; --accent-ink:#0B1D1A;
    --seg-a:#7E8B90; --seg-b:#566267; --seg-c:#3A4549;
    --shadow:0 14px 34px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#131719; --surface:#1B2124; --surface-2:#242B2F; --fg:#EDF1F1; --muted:#9BA7AA; --line:#2E373B;
  --char:#0E1214; --char-2:#182024; --char-line:#2C373B;
  --top:#0E1214; --top-fg:#F5F7F7; --top-line:#2C373B;
  --accent:#5CC9B6; --accent-ink:#0B1D1A;
  --seg-a:#7E8B90; --seg-b:#566267; --seg-c:#3A4549;
  --shadow:0 14px 34px rgba(0,0,0,.55);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--top);z-index:60}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:650;letter-spacing:-.012em;line-height:1.15;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1160px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.num{font-variant-numeric:tabular-nums}

/* draft note */

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--top);color:var(--top-fg);border-bottom:1px solid var(--top-line)}
.hdr-in{display:flex;align-items:center;gap:28px;min-height:var(--hdr-h)}
.logo{display:flex;align-items:center;gap:10px;color:var(--top-fg);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.28rem;letter-spacing:-.02em;white-space:nowrap}
.logo svg{flex:none}
.logo .mark{display:block;flex:none;height:var(--logo-h,28px);width:auto;max-width:280px;object-fit:contain}
.no-name .logo>span{display:none}
.no-name .logo .mark{height:var(--logo-h,44px);max-width:320px}
@media (max-width:560px){.logo .mark{max-height:40px;max-width:200px}}
.nav-toggle{display:none;margin-left:auto;align-items:center;gap:8px;background:none;border:1px solid var(--top-line);color:var(--top-fg);font:600 15px var(--f-body);padding:9px 14px;border-radius:6px;cursor:pointer}
.nav-wrap{flex:1 1 auto}
.nav{display:flex;justify-content:space-between;gap:4px;max-width:980px;margin-left:clamp(8px,2vw,32px)!important;list-style:none;margin:0;padding:0}
.nav-item{position:relative}
.nav-btn{position:relative;display:flex;align-items:center;gap:6px;height:var(--hdr-h);padding:0 10px;white-space:nowrap;background:none;border:0;color:var(--top-fg);font:600 15px var(--f-body);cursor:pointer}
.nav-btn::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;background:var(--accent);transform:scaleX(0);transition:transform .16s ease}
.nav-btn[aria-expanded="true"]::after,.nav-btn.current::after{transform:scaleX(1)}
.chev{width:10px;height:10px;transition:transform .16s ease}
.nav-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.dd{position:absolute;top:100%;left:0;width:min(410px,92vw);background:var(--bg);color:var(--fg);border:1px solid var(--line);border-top:0;box-shadow:var(--shadow);border-radius:0 0 10px 10px;padding:8px}
.dd.right{left:auto;right:0}
.dd a.row{display:block;padding:10px 12px;border-radius:6px;color:inherit;text-decoration:none}
.dd a.row:hover{background:var(--surface)}
.dd .t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.98rem}
.dd .d{display:block;color:var(--muted);font-size:.86rem;line-height:1.35;margin-top:1px}
.tag{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 5px;line-height:1.5}
.dd-foot{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.dd-foot .all{display:block;padding:8px 12px;font-weight:600;font-size:.9rem;text-decoration:none;border-radius:6px}
.dd-foot .all:hover{background:var(--surface)}
.dd-guide{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;background:var(--surface);border-radius:6px;color:inherit;text-decoration:none}
.dd-guide:hover{background:var(--surface-2)}
.dd-guide b{display:block;font-size:.92rem;line-height:1.3}
.dd-guide span.k{display:block;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.price{font-family:var(--f-display);font-weight:700;white-space:nowrap}

@media (min-width:1081px) and (max-width:1340px){.nav{gap:0}.nav-btn{padding:0 7px;font-size:14px;gap:4px}.nav-btn::after{left:7px;right:7px}}
@media (max-width:1080px){
  .hdr-in{justify-content:space-between;gap:12px}
  .nav-toggle{display:inline-flex}
  .nav-wrap{display:none;position:absolute;left:0;right:0;top:100%;background:var(--top);border-bottom:1px solid var(--top-line);max-height:calc(100vh - var(--hdr-h) - env(safe-area-inset-top,0px));overflow-y:auto}
  .nav-wrap.open{display:block}
  .nav{flex-direction:column;gap:0;padding-bottom:10px}
  .nav-btn{width:100%;height:54px;justify-content:space-between;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));border-top:1px solid var(--top-line)}
  .nav-btn::after{display:none}
  .nav-btn.current{color:var(--accent)}
  .dd,.dd.right{position:static;width:auto;background:var(--surface);color:var(--fg);border:0;box-shadow:none;border-radius:0;padding:6px max(10px,env(safe-area-inset-right,0px)) 12px max(10px,env(safe-area-inset-left,0px))}
  .dd a.row:hover{background:var(--surface-2)}
  .dd-foot .all:hover{background:var(--surface-2)}
  .dd-guide{background:var(--bg)}
  .dd-guide:hover{background:var(--surface-2)}
  .nav-item{position:static}
}

/* buttons, inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:7px;border:0;background:var(--accent);color:var(--accent-ink);font:650 1rem var(--f-body);text-decoration:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--surface);filter:none}
.btn.on-char{background:var(--accent-on-char);color:#0B1D1A}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:600;font-size:.95rem}
.inp{position:relative;display:flex;align-items:stretch}
.inp input,.inp select{width:100%;min-width:0;font:500 1.05rem var(--f-body);color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:11px 14px;font-variant-numeric:tabular-nums}
.inp input:hover,.inp select:hover{border-color:var(--muted)}
.inp input[aria-invalid="true"]{border-color:#B3261E}
.inp .unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.95rem;pointer-events:none}
.inp input.has-unit{padding-right:58px}
.hint{color:var(--muted);font-size:.84rem;line-height:1.4}
.err{color:#B3261E;font-size:.86rem;font-weight:600}
:root[data-theme="dark"] .err,:root[data-theme="dark"] .inp input[aria-invalid="true"]{color:#FF8A80}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .err{color:#FF8A80}:root:not([data-theme="light"]) .inp input[aria-invalid="true"]{border-color:#FF8A80}}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.check input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}

/* hero */
.hero{background:var(--surface);color:var(--fg);border-bottom:1px solid var(--line)}
.hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;padding-block:64px 72px;align-items:start}
.hero .eyebrow{color:var(--accent)}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem);margin-top:14px;max-width:16ch}
.hero .lead{margin-top:18px;font-size:1.14rem;color:var(--muted);max-width:52ch}
.search{position:relative;margin-top:30px;max-width:540px}
.search input{width:100%;font:500 1.05rem var(--f-body);color:var(--fg);background:var(--bg);border:2px solid var(--line);border-radius:8px;padding:15px 18px}
.search input::placeholder{color:var(--muted)}
.search input:focus-visible{outline:none;border-color:var(--accent)}
.sr{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:20;list-style:none;margin:0;padding:6px;background:var(--bg);color:var(--fg);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}
.sr a{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:6px;color:inherit;text-decoration:none}
.sr a:hover,.sr a:focus-visible{background:var(--surface)}
.sr small{color:var(--muted)}
.hero-q h2{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-family:var(--f-body);font-weight:700}
.hero-q ul{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.hero-q a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none;font-family:var(--f-display);font-weight:600;font-size:1.12rem;line-height:1.25}
.hero-q a:hover{color:var(--accent)}
.hero-q .go{color:var(--accent);transition:transform .15s}
.hero-q a:hover .go{transform:translateX(4px)}
.hero-q .tag{margin-left:8px;vertical-align:2px}
@media (max-width:900px){.hero-in{grid-template-columns:1fr;gap:40px;padding-block:44px 52px}}

/* sections */
.sec{padding-block:64px}
.sec.alt{background:var(--surface)}
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:26px}
.sec-h h2{font-size:clamp(1.5rem,3vw,2rem)}
.sec-h p{color:var(--muted)}
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.cat{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--bg);color:var(--fg);text-decoration:none;min-width:0}
.cat:hover{background:var(--surface)}
.cat-n{font-size:.78rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.cat h3{font-size:1.3rem}
.cat p{color:var(--muted);font-size:.96rem}
@media (max-width:900px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cats{grid-template-columns:1fr}}
.ruled{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ruled a{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) auto;gap:8px 28px;align-items:center;padding:20px 4px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
.ruled a:hover{background:var(--surface)}
.ruled .n{font-family:var(--f-display);font-weight:650;font-size:1.18rem}
.ruled .c{display:block;font-size:.76rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.ruled .d{color:var(--muted)}
.ruled .go{color:var(--accent);font-weight:700}
@media (max-width:700px){.ruled a{grid-template-columns:1fr auto}.ruled .d{grid-column:1;grid-row:2}.ruled .go{grid-row:1/3;grid-column:2}}

/* guides */
.band{background:var(--bg);color:var(--fg);padding-block:68px;border-top:1px solid var(--line)}
.band .eyebrow{color:var(--accent)}
.band h2{font-size:clamp(1.6rem,3.2vw,2.2rem);margin-top:10px;max-width:22ch}
.band .sub{color:var(--muted);margin-top:12px;max-width:58ch}
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:34px}
.guide{display:flex;flex-direction:column;gap:12px;padding:26px;background:var(--char);border:1px solid var(--char-line);border-radius:10px;color:var(--char-fg);text-decoration:none;min-width:0}
.guide:hover{border-color:var(--accent-on-char)}
.guide .k{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-on-char)}
.guide h3{font-size:1.28rem}
.guide p{color:var(--char-muted);font-size:.96rem;flex:1}
.guide .foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:6px}
.guide .price{font-size:1.5rem}
.guide .more{color:var(--accent-on-char);font-weight:650;font-size:.95rem}
@media (max-width:900px){.guides{grid-template-columns:1fr}}

.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.trust h3{font-size:1.15rem;margin-bottom:8px}
.trust p{color:var(--muted)}
@media (max-width:900px){.trust{grid-template-columns:1fr;gap:26px}}

/* footer */
.ftr{background:var(--surface);color:var(--muted);border-top:1px solid var(--line);padding-block:44px 52px;font-size:.93rem}
.ftr-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px 36px;padding-bottom:28px;margin-bottom:28px;border-bottom:1px solid var(--line)}
.ftr-top p{max-width:46ch}
.ftr-legal{flex-direction:row!important;flex-wrap:wrap;gap:8px 22px!important}
.ftr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.ftr-col{display:flex;flex-direction:column;gap:26px}
.ftr h4 a{color:inherit}
.ftr h4 a:hover{text-decoration:underline}
.ftr h4{font-family:var(--f-body);font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--fg);margin-bottom:12px}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ftr a{color:var(--muted);text-decoration:none}
.ftr a:hover{color:var(--fg);text-decoration:underline}
.ftr .logo{margin-bottom:12px;color:var(--fg)}
.ftr-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px 40px;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)}
.ftr .fine{margin:0;font-size:.84rem;max-width:80ch;flex:1 1 360px}
.ftr-bottom .ftr-legal{font-size:.84rem;flex:0 1 auto;justify-content:flex-end}
.ftr-contact{max-width:34ch}
.ftr-contact h4{margin-bottom:8px}
.ftr-contact p{margin:0}
@media (max-width:1000px){.ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.ftr-cols{grid-template-columns:1fr}.ftr-top{align-items:flex-start}}

/* inner pages */
.page-head{background:var(--surface);border-bottom:1px solid var(--line);padding-block:30px 34px}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:.88rem;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.page-head h1{font-size:clamp(1.8rem,4vw,2.6rem)}
.page-head .lead{margin-top:10px;color:var(--muted);max-width:62ch;font-size:1.06rem}
.calc{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:36px;padding-block:36px 24px;align-items:start}
.panel{background:var(--surface);border-radius:10px;padding:24px}
.form{display:flex;flex-direction:column;gap:20px}
.form h2{font-size:1.1rem}
.out{display:flex;flex-direction:column;gap:20px;position:sticky;top:calc(var(--hdr-h) + env(safe-area-inset-top,0px) + 16px);min-width:0}
@media (max-width:900px){.calc{grid-template-columns:1fr;gap:24px}.out{position:static}}
.result{background:var(--char);color:var(--char-fg);border-radius:10px;padding:26px}
.result .eyebrow{color:var(--accent-on-char)}
.result .big{font-family:var(--f-display);font-weight:700;font-size:clamp(2.3rem,6vw,3.3rem);line-height:1.05;letter-spacing:-.02em;margin-top:8px}
.result .sub{color:var(--char-muted);margin-top:8px;font-size:.96rem}
.rows{margin:20px 0 0;padding:0;border-top:1px solid var(--char-line)}
.rows div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--char-line)}
.rows dt{color:var(--char-muted)}
.rows dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums;text-align:right}
.rows .strong dt{color:var(--char-fg);font-weight:650}
.bar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin-top:22px;background:var(--char-2)}
.bar span{display:block;min-width:2px}
.seg-net{background:var(--accent-on-char)}.seg-a{background:#8C999E}.seg-b{background:#667479}.seg-c{background:#4B585D}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:12px 0 0;padding:0;font-size:.88rem;color:var(--char-muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px}
.scen{margin-top:20px}
.scen h3{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--char-muted);font-family:var(--f-body);font-weight:700}
.scen table{width:100%;border-collapse:collapse;margin-top:6px;color:inherit;font-family:inherit;font-size:inherit;line-height:inherit;font-variant-numeric:tabular-nums}
.scen th,.scen td{padding:10px 0;border-bottom:1px solid var(--char-line);text-align:right;font-weight:500}
.scen th:first-child,.scen td:first-child{text-align:left}
.scen thead th{color:var(--char-muted);font-size:.84rem;font-weight:600}
.scen .up{color:#FFB4A8}.scen .down{color:var(--accent-on-char)}
.chartbox{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:18px 18px 12px}
.chartbox h3{font-size:1.02rem}
.readout{min-height:1.5em;color:var(--muted);font-size:.92rem;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.readout b{color:var(--fg)}
.chart{position:relative;touch-action:pan-y}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .tick{fill:var(--muted);font:12px var(--f-body)}
.chart .axis{stroke:var(--muted);stroke-width:1}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.chart .area{fill:var(--accent);opacity:.12}
.chart .guide{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.chart .dot{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.chart .b-own{fill:var(--seg-a)}
.chart .b-ret{fill:var(--accent)}
.chart .b-hi{opacity:.55}
.keyline{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.88rem;color:var(--muted);margin-top:6px}
.keyline i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:7px}
details.tbl{margin-top:4px}
details.tbl summary{cursor:pointer;font-weight:600;color:var(--accent);padding:6px 0}
.tscroll{overflow-x:auto;margin-top:6px}
.tscroll table{width:100%;border-collapse:collapse;color:var(--fg);font-family:inherit;line-height:inherit;font-variant-numeric:tabular-nums;font-size:.92rem}
.tscroll th,.tscroll td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.tscroll th:first-child,.tscroll td:first-child{text-align:left}
.tscroll thead th{color:var(--muted);font-weight:600}
.hols{list-style:none;margin:6px 0 0;padding:0;font-size:.94rem}
.hols li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid var(--char-line);font-variant-numeric:tabular-nums}
.hols li span:first-child{color:var(--char-muted)}
.below{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;padding-block:28px 72px}
.below h2{font-size:1.4rem;margin-bottom:12px}
.prose p,.prose ul{margin-top:12px}
.prose ul{padding-left:1.2em}
.prose li{margin-top:6px}
.prose{max-width:68ch}
.note{margin-top:18px;padding:14px 16px;border-left:3px solid var(--accent);background:var(--surface);font-size:.94rem;color:var(--muted)}
.side{display:flex;flex-direction:column;gap:28px}
.side h3{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-family:var(--f-body);font-weight:700;margin-bottom:8px}
.side ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.side li a{display:flex;justify-content:space-between;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none;font-weight:600}
.side li a:hover{color:var(--accent)}
.side .tag{align-self:center}
@media (max-width:900px){.below{grid-template-columns:1fr;gap:34px}}
.promo{display:flex;flex-direction:column;gap:10px;padding:22px;background:var(--char);color:var(--char-fg);border-radius:10px;text-decoration:none}
.promo .k{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-on-char)}
.promo h3{font-family:var(--f-display);font-size:1.18rem;letter-spacing:-.01em;text-transform:none;color:var(--char-fg);margin:0}
.promo p{color:var(--char-muted);font-size:.94rem}
.promo .foot{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.promo .price{font-size:1.3rem}
.promo .more{color:var(--accent-on-char);font-weight:650;font-size:.92rem}
.promo:hover{outline:1px solid var(--accent-on-char)}

/* guide page */
.gp{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:48px;padding-block:40px 72px;align-items:start}
.gp ol{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line);counter-reset:ch}
.gp ol li{counter-increment:ch;display:grid;grid-template-columns:2.2rem 1fr;gap:6px;padding:14px 2px;border-bottom:1px solid var(--line)}
.gp ol li::before{content:counter(ch);font-family:var(--f-display);font-weight:700;color:var(--accent)}
.buy{position:sticky;top:calc(var(--hdr-h) + env(safe-area-inset-top,0px) + 16px);background:var(--char);color:var(--char-fg);border-radius:10px;padding:26px;display:flex;flex-direction:column;gap:14px}
.buy .price{font-size:2.4rem}
.buy .eyebrow{color:var(--accent-on-char)}
.buy ul{margin:0;padding-left:1.1em;color:var(--char-muted);font-size:.95rem}
.buy .msg{background:var(--char-2);border-radius:6px;padding:12px 14px;font-size:.9rem;color:var(--char-fg)}
@media (max-width:900px){.gp{grid-template-columns:1fr;gap:30px}.buy{position:static}}
.soon{padding-block:40px 80px}
.soon .panel{max-width:720px}
.soon h2{font-size:1.5rem;margin-top:8px}
.soon p{margin-top:12px;color:var(--muted)}
.soon .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pad-b{padding-block:36px 72px}
.fill{background:var(--surface-2);border:1px dashed var(--muted);border-radius:4px;padding:0 6px;font-weight:600;overflow-wrap:anywhere;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.legal{padding-block:30px 80px}
.legal>*{max-width:104ch}
.legal h2{font-size:1.3rem;margin-top:34px}
.legal h2:first-of-type{margin-top:0}
.legal p,.legal ul{margin-top:10px}
.legal ul{padding-left:1.2em}
.legal li{margin-top:6px}
.legal .meta{color:var(--muted);font-size:.94rem;margin-top:0}
.legal .cat{border-top:1px solid var(--line);padding:14px 0}
.legal .cat:last-of-type{border-bottom:1px solid var(--line)}
.legal .cat h3{font-size:1.05rem}
.legal .cat dl{display:grid;grid-template-columns:minmax(92px,.3fr) minmax(0,1fr);gap:4px 16px;margin:8px 0 0}
.legal .cat dt{color:var(--muted);font-size:.9rem}
.legal .cat dd{margin:0}
@media (max-width:560px){.legal .cat dl{grid-template-columns:1fr;gap:0}.legal .cat dd{margin-bottom:8px}}
.legal .banner{margin-bottom:26px}
.list-page{display:grid;gap:0;padding-block:36px 72px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ---- ostolomake ja oma opas ---- */
.buy form{display:flex;flex-direction:column;gap:14px}
.buy .field label{color:var(--char-fg)}
.buy .inp input{background:#fff;color:#1B2022;border-color:transparent}
.buy .err{color:#FF8A80}
.buy .chk{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.45;color:var(--char-muted);cursor:pointer}
.buy .chk input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--accent-on-char)}
.buy .chk a,.buy .hint a{color:var(--accent-on-char)}
.buy .btn[disabled]{opacity:.65;cursor:progress}
.reader{max-width:720px;padding-bottom:40px}
.reader .toc{margin:0 0 36px;padding:18px 20px;background:var(--surface);border-radius:8px}
.reader .toc h2{font-size:1.05rem;margin:0 0 8px}
.reader .toc ol{margin:0;padding-left:1.2em}
.reader .toc button{background:none;border:0;padding:4px 0;font:inherit;color:var(--accent);text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.reader .chap{margin-top:38px;scroll-margin-top:calc(var(--hdr-h) + 16px)}
.reader .chap h2{font-size:1.5rem;margin:0 0 12px}
.reader .chap p,.reader .chap li{font-size:1.06rem;line-height:1.65}
.reader .chap p{margin:0 0 1em}
.reader .chap h3{font-size:1.18rem;margin:1.6em 0 .5em}
.reader .pdf-row{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.reader .chap ul{padding-left:1.2em;margin:0 0 1em}
.reader .chap li+li{margin-top:.4em}

.form [data-mode]:not([hidden]){display:contents}

.faq-h{margin-top:34px;font-size:1.3rem}
.faq h3{font-size:1.02rem;margin:18px 0 4px}
.faq p{margin:0}