/* Shared stylesheet for the content pages (palvelut, hinnoittelu, b2b, legal …).
   Tokens and geometry are home.css's (2026-09 handoff): paper sections, ink
   bands, mint accent, hard 0-radius edges. home.css, booking.css and
   poistopalvelu.css stay separate; these pages share tokens by value. */
/* Layout: full-bleed paper / ink bands, content on a 1400px measure, hard edges, mono labels */
:root{
  --paper:#ffffff; --paper-dim:#f4f4f1; --ink:#0a0a0a; --ink-soft:#161616;
  --mint:oklch(0.80 0.17 162); --mint-deep:oklch(0.50 0.15 162);
  --blue:oklch(0.58 0.15 250);
  --text-dim:rgba(255,255,255,.62); --text-dim-ink:rgba(10,10,10,.62);
  --line:rgba(10,10,10,.12); --line-light:rgba(255,255,255,.16);
  --dark-grad:linear-gradient(155deg,#040404 0%,#151515 45%,#050505 100%);
  --font-display:'Bricolage Grotesque',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Public Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --page-x:5rem;
  color-scheme:light;
}
@media(max-width:1200px){:root{--page-x:2.5rem}}
@media(max-width:700px){:root{--page-x:1.25rem}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-weight:300;font-size:16px;line-height:1.6;text-wrap:pretty;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--ink)}
a{color:var(--mint-deep);text-decoration:none}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
em{font-style:normal;color:var(--mint-deep)}
.on-ink em,.hero em{color:var(--mint)}
strong{font-weight:600}
.pad{padding-left:max(var(--page-x),env(safe-area-inset-left,0px));padding-right:max(var(--page-x),env(safe-area-inset-right,0px))}
.measure{max-width:1400px;margin:0 auto}

.label{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;display:flex;align-items:center;gap:.9rem;color:var(--mint-deep)}
.label::after{content:'';flex:1;height:1px;background:var(--line)}
.on-ink .label{color:var(--mint)}
.on-ink .label::after{background:var(--line-light)}
.mono{font-family:var(--font-mono)}

/* nav */
#nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.1rem;background:var(--ink);border-bottom:2px solid var(--paper)}
.nav-logo{font-family:var(--font-display);font-weight:800;font-size:1.15rem;color:var(--paper);display:flex;align-items:center;gap:.6rem}
.nav-logo:hover{color:var(--paper)}
.nav-logo img{width:34px;height:34px}
.nav-logo .n365{font-family:var(--font-mono);font-size:.6rem;color:var(--mint-deep);font-weight:400;letter-spacing:.05em}
.nav-logo .tag{font-family:var(--font-mono);font-weight:400;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);border:1px solid var(--line-light);padding:.22rem .45rem;margin-left:.2rem}
.nav-links{display:flex;align-items:center;gap:1.8rem;list-style:none}
.nav-links a{font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.05em;color:var(--mint);white-space:nowrap;padding:.5rem .1rem;display:inline-flex;border-bottom:2px solid transparent;transition:border-color .25s var(--ease),color .25s var(--ease)}
.nav-links a:hover,.nav-links a.active{border-bottom-color:var(--mint);color:var(--mint)}
.nav-links a.nav-cta{font-weight:700;border-bottom-color:var(--mint)}
.nav-links a.nav-cta:hover{color:var(--paper);border-bottom-color:var(--paper)}
.nav-hamburger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:.5rem}
.nav-hamburger span{width:22px;height:2px;background:var(--paper)}
.nav-close{display:none}
@media(max-width:960px){
  .nav-hamburger{display:flex}
  .nav-links{position:fixed;inset:0 0 0 auto;z-index:60;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.6rem;width:min(78vw,360px);background:var(--paper);padding:2rem max(2rem,env(safe-area-inset-right,0px)) 2rem 2rem;transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s;border-left:2px solid var(--ink)}
  .nav-links.open{transform:none;visibility:visible;transition:transform .4s var(--ease)}
  .nav-links a,.nav-links a.nav-cta,.nav-links a:hover,.nav-links a.active{color:var(--ink);font-size:.9rem}
  .nav-links a.nav-cta,.nav-links a.active{border-bottom-color:var(--ink)}
  .nav-close{display:block;position:absolute;top:calc(1.1rem + env(safe-area-inset-top,0px));right:max(1.25rem,env(safe-area-inset-right,0px));background:none;border:none;cursor:pointer;font-family:var(--font-mono);font-size:1.4rem;line-height:1;color:var(--ink);padding:.5rem}
}

/* sub-nav for the B2B section */
.subnav{background:var(--ink-soft);border-bottom:1px solid var(--line-light)}
.subnav ul{list-style:none;display:flex;gap:0;overflow-x:auto;scrollbar-width:none}
.subnav li{flex:0 0 auto}
.subnav a{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);padding:.85rem 1.1rem;border-bottom:2px solid transparent}
.subnav li:first-child a{padding-left:0}
.subnav a:hover{color:var(--paper)}
.subnav a.active{color:var(--mint);border-bottom-color:var(--mint)}

/* hero (sub-page: sized to content, not to the viewport) */
.hero{position:relative;background:var(--dark-grad);color:var(--paper);overflow:hidden}
.hero-inner{position:relative;z-index:1;padding-block:5.5rem 4rem;display:grid;grid-template-columns:1.3fr 1fr}
.hero-main{border-right:1px solid var(--line-light);padding-right:3.5rem;min-width:0}
.crumbs{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.65rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);border-top:2px solid var(--mint);border-bottom:2px solid var(--mint);padding:.6rem 0;margin-bottom:2.4rem}
.crumbs a{color:var(--paper)}
.crumbs a:hover{color:var(--mint)}
.crumbs .sep{color:var(--text-dim)}
.hero h1{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,5.2vw,4.4rem);line-height:.98;letter-spacing:-.02em;text-wrap:balance}
.hero-side{padding-left:3.5rem;display:flex;flex-direction:column;justify-content:flex-end;gap:2rem;min-width:0}
.hero-lead{color:rgba(255,255,255,.8);font-size:1.05rem;line-height:1.65;max-width:48ch}
.hero-lead strong{color:var(--paper)}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}
@media(max-width:900px){.hero-inner{grid-template-columns:1fr;padding-block:4rem 3rem}.hero-main{border-right:none;padding-right:0;border-bottom:1px solid var(--line-light);padding-bottom:2.5rem;margin-bottom:2.5rem}.hero-side{padding-left:0}}

.hero-facts{position:relative;z-index:1;border-top:1px solid var(--line-light)}
.hero-facts-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1px;background:var(--line-light)}
.hero-facts-grid>div{background:#0a0a0a;padding:1.4rem 1.6rem}
.hero-facts-grid .k{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.hero-facts-grid .v{font-family:var(--font-display);font-weight:600;font-size:1.05rem;margin-top:.45rem;color:var(--paper)}
@media(max-width:800px){.hero-facts-grid{grid-template-columns:1fr}}

/* buttons */
.btn-primary,.btn-secondary{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:1rem 1.75rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;border:2px solid currentColor;background:none;transition:transform .3s var(--ease),background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.btn-primary{background:var(--mint);color:var(--ink);border-color:var(--mint)}
.btn-primary:hover{color:var(--ink);transform:translateY(-2px)}
.btn-secondary{color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--mint-deep);color:var(--mint-deep)}
.on-ink .btn-secondary,.hero .btn-secondary{color:var(--paper);border-color:var(--line-light)}
.on-ink .btn-secondary:hover,.hero .btn-secondary:hover{border-color:var(--mint);color:var(--mint)}
.btn-primary:active,.btn-secondary:active{transform:scale(.97)}

/* CTA stripe: the whole band is the link */
.cta-stripe{display:block;background:var(--mint);color:var(--ink);border-top:1px solid rgba(10,10,10,.2);border-bottom:1px solid rgba(10,10,10,.2)}
.cta-stripe:hover{color:var(--ink)}
.cta-stripe:focus-visible{outline:3px solid var(--ink);outline-offset:-6px}
.cta-stripe-inner{padding-block:1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1.2rem 2.5rem;flex-wrap:wrap}
.cs-text{font-family:var(--font-mono);font-weight:500;font-size:clamp(1rem,2vw,1.35rem);letter-spacing:.02em;text-transform:uppercase}
.cs-text::before{content:'> ';color:rgba(10,10,10,.45)}
.cs-sub{display:block;font-family:var(--font-body);font-size:.88rem;text-transform:none;letter-spacing:0;font-weight:400;color:rgba(10,10,10,.7);margin-top:.25rem}
.btn-cs{background:var(--ink);color:var(--mint);font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;padding:1.15rem 2.2rem;display:inline-flex;align-items:center;gap:.6rem;transition:transform .3s var(--ease)}
.cta-stripe:hover .btn-cs{transform:translateY(-2px)}
@media(max-width:700px){.cta-stripe-inner{flex-direction:column;align-items:stretch}.btn-cs{justify-content:center}}

/* sections */
.section{padding-block:5.5rem}
.section.tight{padding-block:4rem}
.section.dim{background:var(--paper-dim)}
.section.on-ink{background:var(--dark-grad);color:var(--paper)}
.heading{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.05;letter-spacing:-.01em;max-width:24ch;margin-top:1.3rem;text-wrap:balance}
.lead{color:var(--text-dim-ink);font-size:1.02rem;max-width:56ch;margin-top:1.2rem}
.on-ink .lead{color:var(--text-dim)}
.prose p{max-width:62ch;color:var(--text-dim-ink)}
.prose p+p{margin-top:1rem}
.on-ink .prose p{color:var(--text-dim)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:4rem;margin-top:2.5rem;align-items:start}
.split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.split,.split.even{grid-template-columns:1fr;gap:2.5rem}}

.lock{border-left:3px solid var(--mint);padding-left:1.4rem}
.lock h3{font-family:var(--font-display);font-weight:700;font-size:1.25rem;margin-bottom:.6rem}
.lock p{color:var(--text-dim-ink);font-size:.95rem;max-width:52ch}
.on-ink .lock p{color:var(--text-dim)}

/* ledger: rows of label / body / meta, separated by hairlines */
.ledger{margin-top:3rem;border-top:2px solid var(--ink)}
.on-ink .ledger{border-top-color:var(--mint)}
.ledger-row{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) minmax(0,14rem);gap:1rem 3rem;padding:1.8rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.on-ink .ledger-row{border-bottom-color:var(--line-light)}
.ledger-row h3{font-family:var(--font-display);font-weight:700;font-size:1.35rem;line-height:1.15;letter-spacing:-.01em}
.ledger-row p{color:var(--text-dim-ink);font-size:.95rem;max-width:60ch}
.on-ink .ledger-row p{color:var(--text-dim)}
.ledger-row .meta{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.ledger-row .meta a{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em}
.ledger-row .k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint-deep)}
@media(max-width:900px){.ledger-row{grid-template-columns:1fr;gap:.6rem}}

.chip{display:inline-block;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:var(--ink);color:var(--mint);padding:.45rem .8rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;white-space:nowrap}
.chip.light{background:var(--paper-dim);color:var(--ink)}
.chip.mint{background:var(--mint);color:var(--ink)}
.chip.outline{background:transparent;color:var(--mint-deep);clip-path:none;border:1px dashed var(--mint-deep)}
.on-ink .chip.outline{color:var(--mint);border-color:var(--mint)}
.chip-row{display:flex;flex-wrap:wrap;gap:.6rem}

/* grid of cells with hairline gaps */
.cells{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:3rem}
.cells>*{background:var(--paper);padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.5rem;min-width:0}
.section.dim .cells>*{background:var(--paper)}
.on-ink .cells{background:var(--line-light);border-color:var(--line-light)}
.on-ink .cells>*{background:#0b0b0b}
.cells .k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint-deep)}
.on-ink .cells .k{color:var(--mint)}
.cells h3,.cells h4{font-family:var(--font-display);font-weight:700;font-size:1.12rem;line-height:1.2}
.cells p{color:var(--text-dim-ink);font-size:.9rem}
.on-ink .cells p{color:var(--text-dim)}
@media(max-width:1000px){.cells{grid-template-columns:repeat(min(var(--cols,3),2),minmax(0,1fr))}}
@media(max-width:620px){.cells{grid-template-columns:1fr}}

/* price card (home.css) */
.price-grid{margin-top:3rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.price-grid.one{grid-template-columns:minmax(0,560px)}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}}
.price-card{background:var(--ink);color:var(--paper);padding:2rem 2rem 1.6rem}
.pc-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);display:flex;align-items:center;gap:.8rem}
.pc-tag::after{content:'';flex:1;height:1px;background:var(--line-light)}
.price-card h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;margin-top:1.1rem;line-height:1.2}
.pc-meta{font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim);margin-top:.6rem;line-height:1.7}
.pc-rows{margin-top:1.8rem;display:flex;flex-direction:column}
.pc-row{display:flex;justify-content:space-between;gap:1rem;font-family:var(--font-mono);font-size:.8rem;padding:.62rem 0;border-bottom:1px solid rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.pc-row span:first-child{color:var(--text-dim)}
.pc-row.discount span{color:var(--mint)}
.pc-row.sub{border-bottom:none;border-top:1px solid var(--line-light);margin-top:.5rem;padding-top:.9rem}
.pc-row.vat{border-bottom:none}
.pc-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:2px solid var(--mint);margin-top:.6rem;padding-top:1rem}
.pc-total .k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.pc-total .v{font-family:var(--font-display);font-weight:800;font-size:2rem;color:var(--mint);white-space:nowrap;font-variant-numeric:tabular-nums}
.gen-note{margin-top:1.4rem;font-family:var(--font-mono);font-size:.68rem;color:var(--text-dim-ink);letter-spacing:.03em;max-width:70ch}

/* timeline: a real sequence, deadlines on the left */
.timeline{margin-top:3rem;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));border-top:2px solid var(--ink)}
.on-ink .timeline{border-top-color:var(--mint)}
.tl-step{position:relative;padding:1.8rem 2rem 0 0;min-width:0}
.tl-step::before{content:'';position:absolute;top:-7px;left:0;width:12px;height:12px;background:var(--ink);border:2px solid var(--paper)}
.on-ink .tl-step::before{background:var(--mint);border-color:#0a0a0a}
.tl-when{font-family:var(--font-display);font-weight:800;font-size:clamp(1.8rem,3vw,2.4rem);line-height:1;letter-spacing:-.02em}
.tl-when small{font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;display:block;color:var(--mint-deep);margin-bottom:.6rem}
.on-ink .tl-when small{color:var(--mint)}
.tl-step h3{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-top:1rem}
.tl-step p{color:var(--text-dim-ink);font-size:.9rem;margin-top:.4rem;max-width:36ch}
.on-ink .tl-step p{color:var(--text-dim)}
@media(max-width:800px){.timeline{grid-template-columns:1fr;border-top:none;border-left:2px solid var(--ink);margin-left:6px}.on-ink .timeline{border-left-color:var(--mint)}.tl-step{padding:0 0 2rem 1.6rem}.tl-step::before{top:4px;left:-7px}}

/* fact table */
.facts{width:100%;border-collapse:collapse;margin-top:2rem}
.facts th,.facts td{text-align:left;padding:.95rem 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.facts th{font-family:var(--font-mono);font-weight:400;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint-deep);width:38%;padding-right:1.5rem}
.facts td{font-size:1rem}
.facts td .sel{user-select:all;font-family:var(--font-mono);font-size:.9rem}
.copy{margin-left:.6rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid var(--line);color:var(--mint-deep);padding:.2rem .5rem;cursor:pointer;vertical-align:middle}
.copy:hover{border-color:var(--mint-deep)}

/* checklist */
.ticks{list-style:none;display:flex;flex-direction:column;gap:0;margin-top:1.5rem;border-top:1px solid var(--line)}
.ticks li{position:relative;padding:1rem 0 1rem 2rem;border-bottom:1px solid var(--line);color:var(--text-dim-ink);font-size:.95rem}
.ticks li strong{color:var(--ink);font-weight:600}
.ticks li::before{content:'';position:absolute;left:0;top:1.45rem;width:10px;height:10px;background:var(--mint)}
.on-ink .ticks{border-top-color:var(--line-light)}
.on-ink .ticks li{border-bottom-color:var(--line-light);color:var(--text-dim)}
.on-ink .ticks li strong{color:var(--paper)}

/* faq */
.faq-list{margin-top:2.5rem;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:1.4rem;padding:1.5rem 0;font-family:var(--font-display);font-weight:600;font-size:1.12rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .q{font-family:var(--font-mono);font-size:.66rem;color:var(--mint-deep);flex-shrink:0;font-weight:400}
.faq-item summary .plus{margin-left:auto;font-family:var(--font-mono);color:var(--mint-deep);flex-shrink:0;transition:transform .3s var(--ease)}
.faq-item[open] summary .plus{transform:rotate(45deg)}
.faq-item p{color:var(--text-dim-ink);font-size:.95rem;max-width:64ch;padding:0 0 1.6rem 3rem}
@media(max-width:600px){.faq-item p{padding-left:0}}

.deco-divider{position:relative;height:34px;background:var(--ink);overflow:hidden}
.deco-strip{position:absolute;inset:0;background:repeating-linear-gradient(45deg,var(--mint) 0 3px,transparent 3px 21px)}

.seealso{padding-block:2rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;align-items:baseline;font-family:var(--font-mono);font-size:.72rem}
.seealso span{color:var(--text-dim-ink);letter-spacing:.18em;text-transform:uppercase;font-size:.62rem}

/* footer */
footer{background:var(--dark-grad);color:var(--paper)}
.footer-inner{padding-block:4.5rem 2.5rem;display:grid;grid-template-columns:1.3fr repeat(4,minmax(0,1fr));gap:2.5rem}
@media(max-width:1000px){.footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-inner>div:first-child{grid-column:1/-1}}
@media(max-width:520px){.footer-inner{grid-template-columns:1fr}}
.footer-brand{font-family:var(--font-display);font-weight:800;font-size:1.4rem}
.footer-brand .f365{font-family:var(--font-mono);font-size:.65rem;color:var(--mint);font-weight:400}
.footer-tagline{color:var(--text-dim);font-size:.88rem;margin-top:1rem;max-width:30ch}
.footer-col h2{font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:1.1rem}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.footer-col a,.footer-col span{color:var(--text-dim);font-size:.88rem}
.footer-col a:hover{color:var(--mint)}
.footer-bottom{border-top:1px solid var(--line-light);padding-block:1.5rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-bottom p,.footer-bottom a,.footer-bottom span{font-family:var(--font-mono);font-size:.62rem;color:var(--text-dim);letter-spacing:.05em}
.footer-bottom div{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.footer-bottom a:hover{color:var(--mint)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.skip-link{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--mint);color:var(--ink);font-family:var(--font-mono);font-size:.75rem;padding:.7rem 1rem}
.skip-link:focus{top:1rem}
img{max-width:100%}

/* scripts/render-pricing-examples.mjs table regions (muuton-hinta, opiskelijamuutto) */
.example-grid{margin-top:3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:2rem}
.example-card{background:var(--ink);color:var(--paper);padding:2rem 2rem 1.6rem}
.example-card h3{font-family:var(--font-mono);font-weight:400;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mint);display:flex;align-items:center;gap:.8rem}
.example-card h3::after{content:'';flex:1;height:1px;background:var(--line-light)}
.example-card .example-sub{font-family:var(--font-display);font-weight:700;font-size:1.15rem;line-height:1.3;margin-top:1rem;color:var(--paper)}
.example-card table{width:100%;border-collapse:collapse;margin-top:1.4rem;font-family:var(--font-mono);font-size:.8rem;font-variant-numeric:tabular-nums}
.example-card td{padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.08);color:var(--text-dim)}
.example-card td.num{text-align:right;color:var(--paper);white-space:nowrap}
.example-card tr.total td{border-bottom:none;border-top:2px solid var(--mint);padding-top:1rem;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.example-card tr.total td.num{font-family:var(--font-display);font-weight:800;font-size:1.8rem;letter-spacing:0;text-transform:none;color:var(--mint)}
.example-card .table-wrap{overflow-x:auto}
/* FAQ in the plain <summary>/<p class="faq-answer"> shape the structured-data contract parses */
.faq-plain .faq-item summary::after{content:'+';margin-left:auto;font-family:var(--font-mono);color:var(--mint-deep);flex-shrink:0;transition:transform .3s var(--ease)}
.faq-plain .faq-item[open] summary::after{transform:rotate(45deg)}
.faq-plain .faq-item p.faq-answer{padding-left:0}

/* utilities shared by the content pages */
.cells>.ink-cell,.section.dim .cells>.ink-cell{background:var(--ink)}
.cells>.span2{grid-column:span 2}
@media(max-width:620px){.cells>.span2{grid-column:auto}}
.cells>.ink-cell .k{color:var(--mint)}
.cells>.ink-cell h3,.cells>.ink-cell h4{color:var(--paper)}
.cells>.ink-cell p{color:var(--text-dim)}
.on-ink-strong{color:var(--paper)}
.hero a.on-ink-link,.hero-lead a{color:var(--mint)}
.on-ink .gen-note,.gen-note.on-ink-dim{color:var(--text-dim)}
.tbl-scroll{overflow-x:auto;min-width:0}
.facts .cap{display:block;font-family:var(--font-mono);font-size:.64rem;color:var(--text-dim-ink);margin-top:.35rem}
.cap-inline{font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim-ink)}
.area{display:flex;flex-direction:column;gap:.8rem;padding:1.4rem 0;border-bottom:1px solid var(--line-light)}
.area:first-child{padding-top:0}
.area .k{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mint)}
.on-ink-facts th{color:var(--mint)}
.on-ink-facts th,.on-ink-facts td{border-bottom-color:var(--line-light)}
.on-ink-facts .copy{border-color:var(--line-light);color:var(--mint)}
.facts td a{color:inherit}
.on-ink .facts td a{color:var(--paper)}