/* Spoken Of — editorial system. Fonts self-hosted (SIL OFL, see /fonts). No external requests. */
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-opsz.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}

:root{
  --paper:#fafaf8; --sheet:#ffffff; --tint:#f0f0ec;
  --ink:#121316; --ink-2:#34373d; --muted:#5d6168; --rule:#d9dad4; --rule-strong:#121316;
  --accent:#2b2bd9; --accent-deep:#1c1ca6; --accent-soft:#e6e6fb;
  --dark:#121316; --on-dark:#f2f2ef; --on-dark-2:#b9bbc1; --accent-on-dark:#a3a3ff;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Schibsted Grotesk",ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
  --gutter:clamp(1.25rem,4vw,3rem); --col-gap:clamp(1rem,2.2vw,2rem);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:#9a9da3 var(--paper);scroll-padding-top:1.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink-2);font:400 1.0625rem/1.65 var(--serif);font-optical-sizing:auto;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{color:var(--ink);font-family:var(--serif);font-weight:600;text-wrap:balance;margin:0}
p,li{text-wrap:pretty}
a{color:var(--accent);text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-thickness .2s var(--ease),color .2s var(--ease)}
a:hover{text-decoration-thickness:2px;color:var(--accent-deep)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
strong,b{color:var(--ink);font-weight:650}
sup{font-family:var(--sans);font-size:.62em;font-weight:600;color:var(--muted);line-height:0;margin-left:.08em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.wrap{width:100%;max-width:84rem;margin-inline:auto;padding-inline:var(--gutter)}
.meta{font-family:var(--sans);font-size:.875rem;line-height:1.55;color:var(--muted)}
.meta a{color:inherit}.meta a:hover{color:var(--ink)}

/* skip link */
.skip{position:absolute;left:1rem;top:-4rem;z-index:10;background:var(--ink);color:#fff;font:600 .9rem var(--sans);padding:.6rem .9rem;text-decoration:none}
.skip:focus{top:1rem}

/* header */
.top{max-width:84rem;margin-inline:auto;padding:1.4rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;font:650 1.3rem/1 var(--serif);letter-spacing:-.015em}
.brand:hover{color:var(--ink)}
.mark{width:1.05em;height:1.05em;color:var(--accent);flex:none;transform:translateY(-.06em)}
.top nav{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2rem);font:500 .9375rem/1 var(--sans)}
.top nav a{color:var(--ink-2);text-decoration:none;padding:.5rem 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--ease),color .2s}
.top nav a:hover{color:var(--ink);background-size:100% 1px}
.top nav .lang{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.8rem 1.35rem;font:600 1rem/1.2 var(--sans);text-decoration:none;border:1.5px solid transparent;border-radius:2px;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn::after{content:"";width:.9em;height:.9em;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s var(--ease)}
.btn:hover::after{transform:translateX(3px)}
.btn,.btn:hover{text-decoration:none}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-deep);color:#fff}
.btn-line{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-line:hover{background:var(--ink);color:#fff}
.btn:active{transform:translateY(1px)}

/* ---------- home: hero ---------- */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding-top:clamp(2.5rem,7vw,6.5rem);padding-bottom:clamp(4rem,8vw,7rem)}
.hero h1{grid-column:1/7;grid-row:1;align-self:end;font-size:clamp(3rem,7.6vw,6rem);line-height:.98;letter-spacing:-.034em;font-weight:600;max-width:13ch;margin-bottom:clamp(2rem,4.5vw,3.75rem)}
.hero-rail{grid-column:1/6;grid-row:2;align-self:start}
.lead{font-size:clamp(1.1875rem,1.5vw,1.375rem);line-height:1.5;color:var(--ink-2);margin:0 0 2rem;max-width:34ch}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.25rem;margin:0 0 2.25rem}
.from{font:500 .9375rem/1.3 var(--sans);color:var(--muted)}
.hero-def{font:500 .9375rem/1.45 var(--sans);color:var(--ink);margin:0;padding-top:1rem;border-top:1px solid var(--rule);max-width:30ch}
.proof{grid-column:6/-1;grid-row:1/3;margin:0;align-self:center;padding-top:1rem}

/* the proof sheet */
.sheet{background:var(--sheet);border:1px solid var(--rule);box-shadow:0 1px 1px rgba(18,19,22,.04),0 30px 60px -30px rgba(18,19,22,.22)}
.sheet-bar{display:flex;justify-content:space-between;gap:1rem;margin:0;padding:.85rem 1.5rem;border-bottom:1px solid var(--rule);font:500 .8125rem/1.3 var(--sans);color:var(--muted)}
.sheet-bar span:first-child{color:var(--ink);font-weight:600}
.sheet-body{display:grid;grid-template-columns:minmax(0,1fr) 9.5rem;column-gap:1.5rem;padding:1.6rem 1.5rem 1.4rem}
.sheet-q{grid-column:1/-1;margin:0 0 1.25rem;padding-bottom:1.25rem;border-bottom:1px dashed var(--rule);font:600 1.0625rem/1.4 var(--sans);color:var(--ink)}
.sheet-who{display:block;font-weight:500;font-size:.8125rem;color:var(--muted);margin-bottom:.35rem}
.sheet-a{grid-column:1;margin:0;font-size:clamp(1.125rem,1.45vw,1.3125rem);line-height:1.62;color:var(--ink-2)}
.sheet-a b{font-weight:650;color:var(--ink)}
.caret{position:relative;display:inline-block;width:.7em;height:1em;vertical-align:baseline}
.caret svg{position:absolute;left:50%;bottom:-.5em;width:1.15em;height:.95em;transform:translateX(-50%);overflow:visible}
.caret path,.sheet-margin path,.mark path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:square;stroke-linejoin:miter}
.mark path{stroke:currentColor;stroke-width:2.6}
.sheet-margin{grid-column:2;align-self:start;margin:0;padding-left:1.1rem;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:.15rem;font:500 1rem/1.35 var(--sans);color:var(--accent)}
.sheet-margin svg{width:1.1rem;height:.9rem;margin-bottom:.35rem;overflow:visible}
.sheet-margin strong{color:var(--accent);font-weight:700}
.sheet-margin-sub{margin-top:.6rem;color:var(--ink);font-weight:600}
.sheet-src{grid-column:1/-1;margin:1.4rem 0 0;padding:1rem 0 0;border-top:1px solid var(--rule);list-style:none;counter-reset:src;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;font:400 .8125rem/1.4 var(--sans);color:var(--muted)}
.sheet-src li{counter-increment:src}
.sheet-src li::before{content:counter(src);font-weight:600;color:var(--ink);margin-right:.4em;font-size:.75rem;vertical-align:.15em}
.proof figcaption{margin-top:1rem;font:400 .8125rem/1.5 var(--sans);color:var(--muted);max-width:52ch}

@media (prefers-reduced-motion:no-preference){
  .caret path{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .7s var(--ease) .5s forwards}
  .sheet-margin{animation:arrive .8s var(--ease) .95s both}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes arrive{from{opacity:.15;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* ---------- home: sections ---------- */
.sec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding-block:clamp(3.5rem,8vw,7rem);position:relative}
.sec::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--rule-strong)}
.sec>h2{grid-column:1/5;font-size:clamp(1.875rem,3.2vw,2.75rem);line-height:1.08;letter-spacing:-.022em;margin:0 0 1.5rem;align-self:start}
.sec-body{grid-column:5/-1;max-width:46rem}
.sec-body>p:first-child{margin-top:0}
.statement{font-size:clamp(1.3125rem,2vw,1.625rem);line-height:1.45;color:var(--ink);letter-spacing:-.006em;margin:0 0 2.25rem}
.example{font:400 1rem/1.6 var(--sans);color:var(--ink-2);margin:0;padding:1.25rem 1.4rem;background:var(--tint)}
.example strong{font-weight:700}
.ledger{list-style:none;margin:0 0 2rem;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--col-gap)}
.ledger li{padding:1.3rem 0 1.6rem;border-top:1px solid var(--rule);font-size:1.125rem;line-height:1.6}
.ledger strong{font-weight:650}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--col-gap)}
.steps li{counter-increment:s;padding:1.25rem 0 1.75rem;border-top:1px solid var(--rule);line-height:1.6}
.steps li::before{content:counter(s);display:block;font:600 2.5rem/1 var(--serif);font-variant-numeric:lining-nums;color:var(--accent);letter-spacing:-.02em;margin-bottom:.75rem}
.steps strong{font-weight:650}

/* pricing */
.sec-pricing{display:block}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head h2{grid-column:1/5;font-size:clamp(1.875rem,3.2vw,2.75rem);line-height:1.08;letter-spacing:-.022em}
.sec-head .meta{grid-column:5/-1;max-width:46rem;margin:.35rem 0 0}
.tiers{display:grid;grid-template-columns:minmax(8rem,.62fr) repeat(3,minmax(0,1fr));grid-template-rows:repeat(7,auto);column-gap:0}
.tier-labels,.tier{display:grid;grid-row:1/span 7;grid-template-rows:subgrid}
.tier-labels span{font:600 .8125rem/1.3 var(--sans);color:var(--muted);padding:1.1rem 1rem 1.1rem 0;border-top:1px solid var(--rule)}
.tier-labels span:first-child,.tier-labels span:last-child{border-top:0}
.tier{padding:0 clamp(1rem,1.8vw,1.75rem);border-left:1px solid var(--rule)}
.tier h3{font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.02em;padding:1.75rem 0 1.25rem;align-self:end}
.row{padding:1.1rem 0;border-top:1px solid var(--rule);font:400 .9375rem/1.5 var(--sans);color:var(--ink-2)}
.row p{margin:0}.row p+p{margin-top:.5rem}
.row ul{margin:0;padding:0;list-style:none}
.row li{position:relative;padding-left:1.1rem;margin:.1rem 0 .45rem}
.row li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:1px;background:currentColor}
.row .none{color:var(--muted)}
.lbl{display:none}
.price .amt{font:600 clamp(2.25rem,3.6vw,3.25rem)/1 var(--serif);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums tabular-nums;margin-right:.3rem}
.price .terms{font-weight:500;color:var(--ink)}
.price .then{margin-top:.6rem;color:var(--muted)}
.row.cta{border-top:0;padding:1.5rem 0 2rem}
.row.cta .btn{width:100%}
.tier-plus{background:var(--dark);color:var(--on-dark-2);border-left-color:var(--dark)}
.tier-plus h3,.tier-plus .price .amt,.tier-plus .price .terms,.tier-plus strong{color:var(--on-dark)}
.tier-plus .row{color:var(--on-dark-2);border-top-color:#2c2e33}
.tier-plus+.tier{border-left-color:var(--dark)}
.tier-plus .btn-accent{background:#fff;color:var(--ink)}
.tier-plus .btn-accent:hover{background:var(--accent-soft);color:var(--ink)}
.tier-plus :focus-visible{outline-color:var(--accent-on-dark)}
.pay-note{margin:1.5rem 0 0;max-width:60rem}

/* faq */
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;padding:1.2rem 0;font:600 1.1875rem/1.35 var(--serif);color:var(--ink);transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:.8rem;height:.8rem;background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;transition:transform .35s var(--ease);transform:translateY(-.1em)}
.faq details[open] summary::after{transform:translateY(-.1em) rotate(45deg)}
.faq summary:hover{color:var(--accent)}
.faq details p{margin:0 0 1.5rem;max-width:62ch}

/* contact */
.contact-line{font-size:clamp(1.5rem,3vw,2.375rem);line-height:1.2;letter-spacing:-.018em;color:var(--ink);margin:0 0 .75rem}
.contact-line a{text-decoration-thickness:2px;text-underline-offset:.15em}

/* footer */
.foot{background:var(--dark);color:var(--on-dark-2);margin-top:clamp(3rem,6vw,5rem)}
.foot-in{max-width:84rem;margin-inline:auto;padding:clamp(3rem,6vw,4.5rem) var(--gutter) 3rem;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:1.5rem;font:400 .9375rem/1.6 var(--sans)}
.foot-in p{margin:0}
.foot-brand{grid-column:1/5;display:flex;align-items:center;gap:.5rem;font:650 1.5rem/1 var(--serif);color:var(--on-dark)}
.foot-brand .mark{color:var(--accent-on-dark)}
.foot-tag{grid-column:1/5;grid-row:2;font:400 1.125rem/1.4 var(--serif);color:var(--on-dark-2)}
.foot-addr{grid-column:5/9;grid-row:1/3}
.foot-nav{grid-column:9/-1;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.foot a{color:var(--on-dark);text-decoration-color:#55585f}
.foot a:hover{color:#fff;text-decoration-color:currentColor}
.foot :focus-visible{outline-color:var(--accent-on-dark)}

/* ---------- reading pages (legal, thanks, 404) ---------- */
body:not(.home) main{width:100%;max-width:calc(44rem + 2*var(--gutter));margin-inline:auto;padding:clamp(2.5rem,6vw,5rem) var(--gutter) clamp(3rem,6vw,5rem)}
body:not(.home) main h1{font-size:clamp(2.375rem,5.4vw,3.75rem);line-height:1.04;letter-spacing:-.03em;margin:0 0 1.1rem}
body:not(.home) main>h1+.meta,body:not(.home) main>.meta:first-child{margin-top:0}
body:not(.home) main h2{font-size:clamp(1.375rem,2.4vw,1.625rem);line-height:1.25;letter-spacing:-.012em;margin:3rem 0 .9rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
body:not(.home) main h3{font-size:1.1875rem;margin:2rem 0 .6rem}
body:not(.home) main p,body:not(.home) main li{max-width:68ch}
body:not(.home) main ol,body:not(.home) main ul{padding-left:1.35rem}
body:not(.home) main li{margin:.35rem 0}
body:not(.home) main li::marker{font-family:var(--sans);font-size:.9em;color:var(--muted)}
main table{width:100%;border-collapse:collapse;font:400 .875rem/1.5 var(--sans);margin:1.5rem 0 2rem;font-variant-numeric:tabular-nums}
main th{font-weight:600;color:var(--ink);text-align:left;padding:.7rem .9rem .7rem 0;border-bottom:1.5px solid var(--ink);vertical-align:bottom}
main td{padding:.85rem .9rem .85rem 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink-2)}
.note{font:400 .9375rem/1.6 var(--sans);background:var(--tint);padding:1rem 1.2rem;margin:1.25rem 0;color:var(--ink-2)}
.box{background:var(--sheet);border:1px solid var(--rule);box-shadow:0 1px 1px rgba(18,19,22,.04),0 24px 48px -28px rgba(18,19,22,.2);padding:clamp(1.25rem,3vw,2rem);margin:2rem 0}
body:not(.home) main .box h2{margin-top:0;padding-top:0;border-top:0}
.box .btn{margin:.25rem 0}
.box a.btn{background:var(--accent);color:#fff}.box a.btn:hover{background:var(--accent-deep)}
.lang-break{margin:4rem 0 2.5rem;border:0;border-top:1.5px solid var(--ink)}
main hr:not(.lang-break){border:0;border-top:1px solid var(--rule);margin:2.5rem 0}

/* ---------- responsive ---------- */
@media (max-width:68rem){
  .hero h1{grid-column:1/-1}.hero-rail{grid-column:1/7;grid-row:2}.proof{grid-column:7/-1;grid-row:2;align-self:start;padding-top:0}
  .sheet-body{grid-template-columns:1fr}
  .sheet-margin{grid-column:1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;margin-top:1.1rem;padding:.8rem 0 0;border-left:0;border-top:1px dashed var(--rule)}
  .sheet-margin svg{margin:0;align-self:center}
  .sheet-margin-sub{margin-top:0}
}
@media (max-width:56rem){
  .hero h1{max-width:12ch}
  .hero-rail,.proof{grid-column:1/-1}.proof{grid-row:3}
  .proof{margin-top:3rem}
  .lead{max-width:40ch}
  .sec>h2,.sec-head h2{grid-column:1/-1}
  .sec-body,.sec-head .meta{grid-column:1/-1}
  .tiers{grid-template-columns:1fr;grid-template-rows:none;row-gap:1.5rem}
  .tier-labels{display:none}
  .tier{grid-row:auto;grid-template-rows:none;display:block;border:1px solid var(--rule);background:var(--sheet)}
  .tier-plus{background:var(--dark);border-color:var(--dark)}
  .tier h3{padding:1.4rem 0 1rem}
  .row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);column-gap:1rem}
  .row>:not(.lbl){grid-column:2}
  .lbl{display:block;grid-row:1/span 3;font:600 .8125rem/1.5 var(--sans);color:var(--muted)}
  .tier-plus .lbl{color:var(--on-dark-2)}
  .row.price{display:block}.row.price .lbl{display:none}
  .row.cta{display:block;padding:.5rem 0 1.5rem}
  .foot-brand,.foot-tag,.foot-addr,.foot-nav{grid-column:1/-1;grid-row:auto}
}
@media (max-width:40rem){
  body{font-size:1.0625rem}
  .hide-s{display:none}
  .top{padding-block:1.1rem}
  .top nav{gap:1.1rem}
  .ledger,.steps{grid-template-columns:1fr}
  .sheet-bar,.sheet-body{padding-inline:1.1rem}
  .sheet-a{font-size:1.125rem}
  .row{grid-template-columns:1fr}
  .row>:not(.lbl){grid-column:1}
  .lbl{grid-row:auto;margin-bottom:.2rem}
  main table,main thead,main tbody,main tr,main td{display:block}
  main tr:first-child{display:none}
  main tr{border-bottom:1px solid var(--rule);padding:.6rem 0}
  main td{border:0;padding:.3rem 0}
  main td::before{display:block;font-weight:600;color:var(--ink);font-size:.8125rem}
  html[lang=en] main td:nth-child(1)::before{content:"Purpose"}
  html[lang=en] main td:nth-child(2)::before{content:"Data"}
  html[lang=en] main td:nth-child(3)::before{content:"Legal basis"}
  html[lang=en] main td:nth-child(4)::before{content:"Retention"}
  html[lang=de] main td:nth-child(1)::before{content:"Zweck"}
  html[lang=de] main td:nth-child(2)::before{content:"Daten"}
  html[lang=de] main td:nth-child(3)::before{content:"Rechtsgrundlage"}
  html[lang=de] main td:nth-child(4)::before{content:"Speicherdauer"}
}
@media print{.top nav,.skip,.btn::after{display:none}.foot{background:none;color:#000}}