/* Informatik Werkstatt – Relaunch
   Color  : warm instrument-grey ground / near-black ink; brand amber + deep teal action colour
   Type   : Archivo (display), IBM Plex Sans (body), IBM Plex Mono (labels/data) – self-hosted
   Layout : sticky hairline nav, single-page homepage + document pages for legal content
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%}
[hidden]{display:none!important}

:root{
  --ground:#F4F2EE;
  --surface:#FFFFFF;
  --surface-2:#ECE8E1;
  --ink:#1A1D21;
  --ink-2:#565A61;
  --line:#D7D2C8;
  --amber:#C56A0E;
  --amber-bright:#D97A15;
  --teal:#123C3F;
  --accent-strong:#123C3F;
  --on-accent-strong:#F4F2EE;
  --good:#3F7D53;
  --warn:#B0770F;
  --logo-amber:#C4740B;
  --logo-werk:#54575D;
  --header-bg:rgba(244,242,238,.86);
  --r:3px;
  --pad-section:clamp(4.5rem,10vw,8rem);
  --maxw:1180px;
  --f-display:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#15171B;
    --surface:#1D2025;
    --surface-2:#24272E;
    --ink:#ECE8E1;
    --ink-2:#9DA0A7;
    --line:#343841;
    --amber:#E89446;
    --amber-bright:#F0A054;
    --teal:#7FC9C0;
    --accent-strong:#7FC9C0;
    --on-accent-strong:#15171B;
    --good:#6FB183;
    --warn:#E0A94A;
    --logo-amber:#E8A24A;
    --logo-werk:#C7CBD1;
    --header-bg:rgba(21,23,27,.86);
  }
}
:root[data-theme="dark"]{
  --ground:#15171B;
  --surface:#1D2025;
  --surface-2:#24272E;
  --ink:#ECE8E1;
  --ink-2:#9DA0A7;
  --line:#343841;
  --amber:#E89446;
  --amber-bright:#F0A054;
  --teal:#7FC9C0;
  --accent-strong:#7FC9C0;
  --on-accent-strong:#15171B;
  --good:#6FB183;
  --warn:#E0A94A;
  --logo-amber:#E8A24A;
  --logo-werk:#C7CBD1;
  --header-bg:rgba(21,23,27,.86);
}

html{scroll-behavior:smooth;scroll-padding-top:5.5rem;-webkit-text-size-adjust:100%}
body{
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.25rem,5vw,3rem)}
section{padding-block:var(--pad-section)}

h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.08;text-wrap:balance;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.6vw,2.55rem);margin-bottom:1.1rem}
h3{font-size:1.3rem;font-weight:600;letter-spacing:-.01em}
p{max-width:62ch}
a{color:inherit}

.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;color:var(--ink-2);
  display:inline-flex;align-items:center;gap:.6rem;margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:1.6rem;height:0;border-top:1.5px solid var(--amber-bright)}

.lead{font-size:clamp(1.1rem,1.8vw,1.3rem);color:var(--ink-2);line-height:1.6;max-width:56ch}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-display);font-weight:600;font-size:.95rem;letter-spacing:.005em;
  padding:.82rem 1.45rem;border-radius:var(--r);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease;
}
.btn--primary{background:var(--accent-strong);color:var(--on-accent-strong)}
.btn--primary:hover{transform:translateY(-1px);box-shadow:0 6px 20px -8px rgba(0,0,0,.4)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--amber-bright);color:var(--amber)}

.arrow-link{
  font-family:var(--f-mono);font-size:.85rem;text-decoration:none;color:var(--ink);
  border-bottom:1px solid var(--amber-bright);padding-bottom:2px;transition:color .18s ease;
  display:inline-block;
}
.arrow-link:hover{color:var(--amber)}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--amber-bright);outline-offset:2px;border-radius:1px;
}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent-strong);color:var(--on-accent-strong);padding:.7rem 1rem;z-index:200}
.skip:focus{left:.5rem;top:.5rem}

.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}

/* registered-mark glyph: small, raised, never bold */
.rm{font-size:.5em;font-weight:400;letter-spacing:normal;vertical-align:.5em;line-height:0}

.ticked{position:relative}
.ticked::before,.ticked::after{content:"";position:absolute;width:11px;height:11px;border:1.5px solid var(--amber-bright);pointer-events:none}
.ticked::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.ticked::after{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.75rem}
.brand{display:inline-flex;align-items:center;gap:.62rem;text-decoration:none}
.bmark{width:1.85rem;height:1.85rem;flex:0 0 auto;display:block}
.brand-name{font-family:var(--f-display);font-weight:400;font-size:1.12rem;letter-spacing:-.015em;color:var(--logo-werk);white-space:nowrap}
.brand-name b{font-weight:700;color:var(--logo-amber)}
.foot-brand .brand-name{font-size:1.05rem}
.foot-tag{margin:.5rem 0 0;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.brand .draft{
  font-family:var(--f-mono);font-size:.6rem;font-weight:500;letter-spacing:.14em;
  border:1px solid var(--line);color:var(--ink-2);padding:.15rem .4rem;border-radius:2px;text-transform:uppercase;
}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);width:2.6rem;height:2.6rem;cursor:pointer;color:var(--ink);font-size:1.1rem}
.nav{display:flex;align-items:center;gap:2rem}
.nav a:not(.btn){font-family:var(--f-display);font-weight:500;font-size:.95rem;text-decoration:none;color:var(--ink);transition:color .18s ease}
.nav a:not(.btn):hover{color:var(--amber)}
.nav .btn{padding:.6rem 1.05rem;font-size:.9rem}
.lang-switch{display:inline-flex;align-items:center;gap:.1rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.03em}
.lang-switch a{padding:.15rem .35rem;text-decoration:none;color:var(--ink-2);border-radius:2px;border:0}
.lang-switch a[aria-current]{color:var(--ink);font-weight:700}
.lang-switch a:hover{color:var(--amber)}

@media (max-width:980px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .nav{
    position:fixed;left:0;right:0;top:4.75rem;flex-direction:column;align-items:stretch;gap:0;
    background:var(--ground);border-bottom:1px solid var(--line);
    padding:.5rem clamp(1.25rem,5vw,3rem) 1.5rem;
    transform:translateY(-130%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  }
  .nav.is-open{transform:none}
  .nav a:not(.btn){padding:.95rem 0;border-bottom:1px solid var(--line)}
  .nav .btn{margin-top:1rem;justify-content:center}
  .lang-switch{padding:.9rem 0;gap:.5rem}
  .lang-switch a{padding:.25rem .5rem;border:1px solid var(--line);border-radius:var(--r)}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero h1{font-size:clamp(2.4rem,5.6vw,4.2rem);margin-bottom:1.5rem}
.hero h1 .amber{color:var(--amber)}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero-meta{margin-top:2.6rem;display:flex;flex-wrap:wrap;gap:1.4rem;font-family:var(--f-mono);font-size:.78rem;color:var(--ink-2);letter-spacing:.04em}
.hero-meta span{display:inline-flex;align-items:center;gap:.5rem}
.hero-meta span::before{content:"";width:4px;height:4px;background:currentColor;border-radius:50%;opacity:.7}

/* hero: compact ViewMondo "Aktuelle Daten" panel (product screenshot, fixed look) */
.vm{
  --vm-navy:#0e2c4d; --vm-cyan:#1ba3da; --vm-panel:#eef1f5; --vm-card:#ffffff;
  --vm-line:#d7dde5; --vm-ink:#2b333c; --vm-mut:#79838f;
  background:var(--vm-panel);border:1px solid rgba(10,25,45,.14);border-radius:6px;overflow:hidden;
  box-shadow:0 22px 46px -22px rgba(10,25,45,.5);font-family:var(--f-body);color:var(--vm-ink);
}
.vm__bar{background:var(--vm-navy);display:flex;align-items:center;justify-content:space-between;padding:.65rem .85rem}
.vm__logo{color:#c7d5e4;font-family:var(--f-display);font-weight:600;font-size:.92rem;letter-spacing:.01em}
.vm__logo sup{font-size:.5em;vertical-align:.5em;font-weight:400}
.vm__burger{width:22px;height:16px;border:1.4px solid #6f8399;border-radius:3px;flex:0 0 auto;position:relative}
.vm__burger::before{content:"";position:absolute;left:3px;right:3px;top:4px;height:6px;border-top:1.4px solid #6f8399;border-bottom:1.4px solid #6f8399}
.vm__tabs{display:flex;gap:1.1rem;background:#fff;padding:.55rem .85rem;font-size:.63rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:1px solid var(--vm-line)}
.vm__tabs b{color:var(--vm-cyan);font-weight:700}
.vm__tabs span{color:#9aa3ad}
.vm__title{text-align:center;color:var(--vm-cyan);font-weight:600;font-size:.88rem;padding:.7rem .5rem .55rem}
.vm__title span{display:block;color:var(--vm-mut);font-weight:400;font-size:.64rem;margin-top:.15rem}
.vm__grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--vm-line);border-top:1px solid var(--vm-line)}
.vm__card{background:var(--vm-card);padding:.7rem .5rem .55rem;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.vm__ct{font-size:.58rem;letter-spacing:.05em;text-transform:uppercase;color:var(--vm-mut)}
.vm__cv{font-size:.64rem;color:var(--vm-cyan);margin:.12rem 0 .3rem;font-variant-numeric:tabular-nums}
.vm__dial{width:78px;height:78px;display:block}
.vm__dial .face{fill:#f6f7f9;stroke:#cfd6de;stroke-width:1}
.vm__dial .ticks{fill:none;stroke:#aab2bc;stroke-width:5;stroke-dasharray:.8 7}
.vm__dial .needle{stroke:#20262e;stroke-width:2.4;stroke-linecap:round}
.vm__dial .hub{fill:#20262e}
.vm__dial .val{fill:#2b333c;font-family:var(--f-mono);font-weight:600;font-size:14px}
.vm__half{width:96px;height:56px;display:block}
.vm__half .track{fill:none;stroke:#e3e7ec;stroke-width:9;stroke-linecap:round}
.vm__half .fill{fill:none;stroke:#e39a2b;stroke-width:9;stroke-linecap:round}
.vm__half .num{fill:#2b333c;font-family:var(--f-mono);font-weight:600;font-size:15px}
.vm__card--cam{padding:0}
.vm__cam{width:100%;min-height:100%;position:relative;background:linear-gradient(175deg,#243642,#3c4c58 45%,#5a6068 78%,#71757a)}
.vm__cam::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.4))}
.vm__cam span{position:absolute;left:.55rem;bottom:.5rem;font-size:.58rem;letter-spacing:.04em;color:#e9e6df;text-shadow:0 1px 2px rgba(0,0,0,.6);z-index:1}
.vm__foot{background:var(--vm-navy);color:#8fa3b8;font-size:.58rem;letter-spacing:.02em;padding:.5rem .85rem}

/* ---------- pipeline ---------- */
.pipeline-sec{background:var(--surface-2);border-block:1px solid var(--line)}
.pipeline{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:2.5rem;
  border:1px solid var(--line);background:var(--surface);
}
.stage{padding:1.6rem 1.4rem;border-right:1px solid var(--line);position:relative}
.stage:last-child{border-right:0}
.stage__num{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);letter-spacing:.1em}
.stage__name{font-family:var(--f-display);font-weight:700;font-size:1.15rem;margin:.5rem 0 .35rem;letter-spacing:-.01em}
.stage__desc{font-size:.9rem;color:var(--ink-2);line-height:1.5}
.stage--ours{background:linear-gradient(180deg,color-mix(in srgb,var(--amber-bright) 9%,var(--surface)),var(--surface))}
.stage--ours::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--amber-bright)}
.stage--ours .stage__name{color:var(--amber)}
.stage__arrow{position:absolute;right:-9px;top:50%;transform:translateY(-50%);z-index:2;
  width:18px;height:18px;background:var(--surface);border:1px solid var(--line);border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:var(--amber)}
.stage:last-child .stage__arrow{display:none}

@media (max-width:820px){
  .pipeline{grid-template-columns:1fr}
  .stage{border-right:0;border-bottom:1px solid var(--line)}
  .stage:last-child{border-bottom:0}
  .stage--ours::before{width:3px;height:auto;bottom:0;right:auto}
  .stage__arrow{right:50%;top:auto;bottom:-9px;transform:translateX(50%) rotate(90deg)}
}

/* ---------- services ---------- */
.services{background:var(--surface-2);border-block:1px solid var(--line)}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:2.4rem}
.service{background:var(--ground);padding:1.5rem 1.4rem}
.service h3{font-size:1rem;font-weight:600;margin-bottom:.4rem;font-family:var(--f-display)}
.service p{font-size:.88rem;color:var(--ink-2);line-height:1.5}
.service .n{font-family:var(--f-mono);font-size:.7rem;color:var(--amber);letter-spacing:.1em}

/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.fact{background:var(--surface);padding:1.15rem 1.1rem}
.fact dt{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.3rem}
.fact dd{font-family:var(--f-display);font-weight:600;font-size:.98rem;letter-spacing:-.01em}
.partners{margin-top:1.4rem;font-family:var(--f-mono);font-size:.8rem;color:var(--ink-2);letter-spacing:.04em}
.partners b{color:var(--ink);font-weight:500}

/* ---------- contact ---------- */
.contact-sec{background:var(--surface-2);border-top:1px solid var(--line)}
.contact-body{max-width:44rem}
form{display:flex;flex-direction:column;gap:1.1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
input,textarea{
  font-family:var(--f-body);font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:.75rem .85rem;width:100%;
}
textarea{resize:vertical;min-height:7rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{flex-direction:row;align-items:flex-start;gap:.6rem}
.consent input{width:auto;margin-top:.15rem}
.consent label{text-transform:none;letter-spacing:0;font-family:var(--f-body);font-size:.85rem;color:var(--ink-2);line-height:1.45}
.consent a{color:var(--amber)}
.form-note{font-size:.78rem;color:var(--ink-2);font-family:var(--f-mono)}
.form-msg{
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;font-size:.95rem;line-height:1.5;
}
.form-msg--ok{border-color:var(--good);color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--surface))}
.form-msg--err{border-color:var(--warn);color:var(--warn);background:color-mix(in srgb,var(--warn) 8%,var(--surface))}
form.is-hidden{display:none}

/* self-hosted proof-of-work check */
.pow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-body);font-size:.9rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.65rem .85rem;cursor:pointer;transition:border-color .18s ease;
}
.pow:hover{border-color:var(--amber-bright)}
.pow__box{
  width:1.15rem;height:1.15rem;flex:0 0 auto;border:1.5px solid var(--ink-2);border-radius:3px;
  position:relative;transition:background .18s ease,border-color .18s ease;
}
.pow.is-verifying .pow__box{border-color:var(--amber-bright);border-right-color:transparent;border-radius:50%;animation:pow-spin .7s linear infinite}
@keyframes pow-spin{to{transform:rotate(360deg)}}
.pow.is-done{border-color:var(--good);cursor:default}
.pow.is-done .pow__box{background:var(--good);border-color:var(--good)}
.pow.is-done .pow__box::after{
  content:"";position:absolute;left:.34rem;top:.12rem;width:.3rem;height:.6rem;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.pow.is-done .pow__label{color:var(--good)}
.pow.is-error{border-color:var(--warn)}
.pow.is-error .pow__label{color:var(--warn)}
@media (prefers-reduced-motion:reduce){.pow.is-verifying .pow__box{animation:none}}

/* ---------- footer ---------- */
.site-footer{background:var(--ground);border-top:1px solid var(--line);padding-block:3.5rem 2.5rem}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem}
.foot-col h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.9rem;font-weight:500}
.foot-col a{display:block;text-decoration:none;font-size:.9rem;padding:.28rem 0;color:var(--ink)}
.foot-col a:hover{color:var(--amber)}
.foot-about{font-size:.88rem;color:var(--ink-2);max-width:34ch;line-height:1.6}
.foot-legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:.72rem;color:var(--ink-2);line-height:1.7;overflow-wrap:break-word}
.foot-legal .draft{color:var(--amber)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .vm{order:-1;max-width:24rem}
  .services-grid{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:520px){
  .facts{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
}

/* product groups */
.pgroup{border-top:1px solid var(--line);padding-top:clamp(2.4rem,5vw,3.4rem);margin-top:clamp(2.4rem,5vw,3.4rem)}
.pgroup:first-of-type{border-top:0;margin-top:2.4rem;padding-top:0}
.pgroup__head{max-width:60ch;margin-bottom:1.9rem}
.pgroup__head .product__tag{display:block;margin-bottom:.5rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pgroup__head h3{font-size:clamp(1.7rem,3vw,2.15rem);font-weight:700;letter-spacing:-.02em;margin-bottom:.7rem}
.pgroup__head p{color:var(--ink-2)}
.pfeatures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pfeature{background:var(--surface);padding:1.25rem 1.2rem}
.pfeature h4{font-family:var(--f-display);font-weight:600;font-size:.96rem;margin-bottom:.35rem;letter-spacing:-.005em}
.pfeature p{font-size:.85rem;color:var(--ink-2);line-height:1.5;max-width:none}
.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:1.4rem;padding:1.3rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)}
.specs dt{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-bottom:.4rem}
.specs dd{font-family:var(--f-mono);font-size:.8rem;line-height:1.75;color:var(--ink)}
.callout{margin-top:1.7rem;border-left:3px solid var(--amber-bright);background:var(--surface);padding:1rem 1.25rem;border-radius:0 var(--r) var(--r) 0}
.callout h4{font-family:var(--f-display);font-size:1rem;margin-bottom:.3rem}
.callout p{font-size:.9rem;color:var(--ink-2);max-width:64ch}
.pgroup__foot{margin-top:1.6rem;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
@media (max-width:820px){.pfeatures{grid-template-columns:1fr 1fr}.specs{grid-template-columns:1fr}}
@media (max-width:560px){.pfeatures{grid-template-columns:1fr}}

/* ---------- document pages (Impressum / Datenschutz / AGB / 404) ---------- */
.doc{padding-block:clamp(3rem,7vw,5rem) clamp(4rem,9vw,7rem)}
.doc .wrap{max-width:820px}
.doc h1{font-size:clamp(1.9rem,4.5vw,2.7rem);margin-bottom:.6rem}
.doc .updated{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2.6rem}
.doc h2{font-size:1.35rem;font-weight:700;margin:2.6rem 0 .8rem}
.doc h3{font-size:1.05rem;font-weight:600;margin:1.9rem 0 .5rem}
.doc h4{font-family:var(--f-display);font-size:.95rem;font-weight:600;margin:1.3rem 0 .4rem;letter-spacing:-.005em}
.doc p,.doc li{color:var(--ink);line-height:1.72;max-width:72ch}
.doc p{margin:0 0 1rem}
.doc ul,.doc ol{margin:0 0 1.1rem 1.35rem}
.doc li{margin:.35rem 0}
.doc address{font-style:normal;line-height:1.85;margin:.4rem 0 1.4rem}
.doc a{color:var(--amber);text-underline-offset:2px}
.doc .callout{margin:2rem 0}
.doc .backlink{display:inline-block;margin-top:2.5rem;font-family:var(--f-mono);font-size:.85rem;border-bottom:1px solid var(--amber-bright);text-decoration:none;padding-bottom:2px}
.doc .backlink:hover{color:var(--amber)}
.doc-note{font-family:var(--f-mono);font-size:.75rem;color:var(--ink-2);border:1px dashed var(--line);border-radius:var(--r);padding:.9rem 1.1rem;margin-bottom:2.4rem;line-height:1.6}

/* reveal */
.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}