/* werchota.css — werchota.ai keynote-companion design system, v1 (21 Oct 2026)
   Shipped with every client site: keep client names out of these comments (provenance lives in tokens.json).
   Changes against the earlier sites are marked FIX. Font path is relative to this file: keep fonts/ next to it. */

@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url(fonts/nunito-latin.woff2) format("woff2")}

:root{
  /* brand */
  --navy:#072136;--navy-2:#0d2f4a;--navy-deep:#051829;
  --accent:#D2640A;          /* werchota orange: fills, rules, large type (3.77:1 on white = large text only) */
  --accent-strong:#BC5A09;   /* FIX: buttons + small orange text on white (4.56:1, AA) */
  --accent-deep:#A84E05;     /* links, hover, orange text on tints (5.1:1 on --accent-tint) */
  --accent-tint:#fdf3ea;--accent-wash:#fdf6ee;--accent-line:#f0c9a6;--accent-on-navy:#ffb374;
  /* neutrals */
  --ink:#14212b;--muted:#566674;--line:#e2e8ed;--soft:#f5f7f9;--soft-2:#e2e8ed;--cream:#FAF5EB;--bg:#fff;
  --on-navy:#e9f1f7;--on-navy-muted:#c9d8e4;
  /* states */
  --green:#1E7B52;--green-bg:#e8f4ee;--blue:#1d5f9e;--slate:#2b4257;--error:#b3261e;--error-bg:#fdecea;
  /* client slot: the client's own colour, used only for the small brand square */
  --client:var(--navy);
  /* shape */
  --r:16px;--r-md:14px;--r-sm:12px;--r-xs:8px;--pill:999px;
  --shadow:0 6px 24px rgba(7,33,54,.08);--shadow-hover:0 12px 30px rgba(7,33,54,.14);--shadow-sm:0 1px 3px rgba(7,33,54,.06);
  --head-h:56px;
  --font:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- foundation ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:116px;color-scheme:light}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font);overflow-x:hidden}
img,video,svg{max-width:100%;height:auto}
a{color:var(--accent-deep);text-underline-offset:2px}a:hover{color:var(--navy)}
h1,h2,h3,h4{color:var(--navy);line-height:1.12;letter-spacing:-.02em;margin:0;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(34px,7.5vw,64px);font-weight:900}
h2{font-size:clamp(25px,4.6vw,36px);font-weight:800;margin-bottom:12px}
h3{font-size:19px;font-weight:800;margin-bottom:6px;line-height:1.2}
p{margin:0 0 14px}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}.narrow{max-width:780px}
.kick{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--accent-strong)}
.lead{font-size:clamp(18px,2.4vw,21px);color:var(--muted)}
.muted{color:var(--muted)}.small{font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
section.s{padding:36px 0}.s.alt{background:var(--soft)}
.sec{padding:22px 0;border-top:1px solid var(--line)}.sec:first-of-type{border-top:0}
.sec h2{font-size:clamp(22px,4.6vw,28px)}
code{font-family:var(--mono);font-size:.88em;background:var(--soft);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}

/* ---------- topbar + header ---------- */
.topbar{background:var(--navy);text-align:center;padding:7px 12px}
.topbar a{color:#fff;font-weight:800;font-size:14px;text-decoration:none}.topbar a:hover{text-decoration:underline}
.hd{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;gap:12px;height:var(--head-h)}
.brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:18px;color:var(--navy);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.brand b{color:var(--accent)}
.brand i{display:inline-block;width:11px;height:11px;border-radius:2px;background:var(--client)}
.brand small{font-weight:600;color:var(--muted);font-size:14px;letter-spacing:0}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav::-webkit-scrollbar{display:none}
.nav a{padding:8px 11px;border-radius:var(--pill);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{background:var(--soft)}
.nav a.key{background:var(--accent-strong);color:#fff}.nav a.key:hover{background:var(--accent-deep)}
/* FIX: hiding links clipped the CTA at 375 px; the nav now wraps under the brand and scrolls sideways */
@media(max-width:640px){
  .hd{position:relative}.hd .wrap{height:auto;flex-wrap:wrap;padding-top:8px;padding-bottom:6px;gap:4px}
  .brand small{display:none}
  .nav{margin:0 -16px;padding:0 16px;width:calc(100% + 32px);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  html{scroll-padding-top:70px}
}

/* ---------- hero + page head ---------- */
.hero{padding:44px 0 28px}
.hero h1{max-width:15em;margin:8px 0 12px}.hero h1 em{font-style:normal;color:var(--accent)}
.hero .line{font-weight:700;font-size:clamp(21px,4.4vw,30px);line-height:1.25;color:var(--navy);margin:0 0 8px}
.hero .line b{color:var(--accent-strong)}
.hero .lead{max-width:36em;margin:14px 0 20px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:28px;align-items:center}
.hero-grid .pic{margin:0;aspect-ratio:4/3}
@media(max-width:820px){.hero-grid{grid-template-columns:1fr;gap:6px}.hero-grid .pic{aspect-ratio:16/10;margin-top:12px}}
.ph{padding:26px 0 8px}.ph h1{font-size:clamp(30px,6vw,52px);margin:6px 0 12px}
.crumb{font-size:14px;margin:18px 0 0}.crumb a{text-decoration:none;font-weight:700;color:var(--muted)}.crumb a:hover{color:var(--navy)}

/* ---------- buttons, pills, badges ---------- */
.btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 6px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--pill);font:800 16px/1.2 var(--font);text-decoration:none;cursor:pointer;
  background:var(--accent-strong);border:2px solid var(--accent-strong);color:#fff}
.btn:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn.ghost{background:#fff;border-color:var(--navy);color:var(--navy)}.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.light{background:#fff;border-color:#fff;color:var(--navy)}.btn.light:hover{background:var(--accent-on-navy);border-color:var(--accent-on-navy)}
.btn.sm{min-height:38px;padding:8px 15px;font-size:14px}.btn.big{min-height:58px;padding:16px 30px;font-size:19px}
@media(max-width:480px){.btns .btn{width:100%}}
.more,.go{font-weight:800;color:var(--accent-deep);text-decoration:none}
.pill{display:inline-block;padding:3px 10px;border-radius:var(--pill);background:var(--soft);font-size:13px;font-weight:800;color:var(--navy);margin:0 6px 6px 0}
.pill.g{background:var(--green-bg);color:var(--green)}.pill.o{background:var(--accent-tint);color:var(--accent-deep)}.pill.n{color:var(--muted)}
/* solution type (what it is built with) */
.badge{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-weight:800;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:var(--pill);background:var(--soft-2);color:var(--navy);white-space:nowrap}
.badge:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.b-copilot{background:var(--soft-2);color:var(--navy)}
.b-skill{background:#eef0f4;color:#313340}
.b-flow{background:var(--slate);color:#fff}
.b-agent{background:var(--accent-tint);color:var(--accent-deep)}
.b-brain{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--navy)}
.b-jev{background:var(--accent-strong);color:#fff}
.b-video{background:var(--cream);color:var(--navy);box-shadow:inset 0 0 0 1px #d8d4c4}
.b-app{background:#fff;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.legend{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
/* proof / honesty badge (how real a result is) — one vocabulary for both sites */
.proof{display:inline-block;background:rgba(255,255,255,.95);color:var(--navy);font:800 11.5px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:var(--pill);box-shadow:0 1px 4px rgba(0,0,0,.12);border:1px solid var(--line)}
.gi .proof{position:absolute;left:8px;top:8px;border:0}
.p-real{color:var(--green)}.p-public{color:var(--blue)}.p-fictional{color:var(--accent-deep)}
.p-recorded{color:var(--navy)}.p-prepared,.p-slide,.p-illustration,.p-industry{color:var(--muted)}

/* ---------- images + asset placeholders ---------- */
.pic{margin:18px 0 0;border-radius:var(--r);overflow:hidden;background:var(--soft)}
.pic img{display:block;width:100%;height:100%;object-fit:cover}
.pic.wide{aspect-ratio:2/1}.pic.banner{aspect-ratio:5/2}.pic.std{aspect-ratio:16/9}.pic.strip{aspect-ratio:24/7}
@media(max-width:640px){.pic.wide,.pic.banner{aspect-ratio:16/10}}
.hero-img{margin:18px 0 0;display:flex;justify-content:center}.hero-img img{display:block;max-width:100%;max-height:300px;width:auto;border-radius:var(--r)}
/* NEW: rendered by the template when an image file is missing, so gaps are visible, never silent */
.ph-asset{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;width:100%;height:100%;min-height:140px;padding:14px;text-align:center;
  background:repeating-linear-gradient(135deg,var(--soft),var(--soft) 10px,#eef2f5 10px,#eef2f5 20px);border:2px dashed #c3ced8;border-radius:inherit;color:var(--muted);font-size:13px;font-weight:700}
.ph-asset b{color:var(--navy);font-size:14px;overflow-wrap:anywhere}
.th .ph-asset,.thumb .ph-asset,.pic .ph-asset,.art .ph-asset,.gi .ph-asset,.sl .ph-asset{min-height:0;border-radius:0}

/* ---------- cards, grids, tiles ---------- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.card{display:flex;flex-direction:column;gap:6px;position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);color:inherit}
a.card{text-decoration:none;transition:transform .15s,box-shadow .15s,border-color .15s}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:var(--accent-line)}
.card .th{margin:-20px -20px 10px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r) var(--r) 0 0;background:var(--soft)}
.card .th img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
a.card:hover .th img{transform:scale(1.03)}
.card .n{font-weight:900;color:var(--accent-strong);font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.card h3{margin:2px 0 0}.card p{color:var(--muted);margin:0;font-size:16px}
.card .for{font-size:14px;color:var(--muted);margin-top:auto;padding-top:6px}
.card .big{font-size:44px;line-height:1;font-weight:900;color:var(--accent)}
/* dense hub grid */
.g-hub{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.g-hub .card{padding:14px}.g-hub .card .th{margin:-14px -14px 8px;aspect-ratio:2/1}
.g-hub .card h3{font-size:16px;margin:0}.g-hub .card p{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:640px){.g-hub{grid-template-columns:repeat(2,1fr);gap:10px}.g-hub .card .more{display:none}}
.card.hide{display:none}
/* act tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;margin-top:14px}
.tile{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.tile:hover{border-color:var(--accent)}
.tile .thumb{aspect-ratio:16/9;background:var(--soft)}.tile .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.tile .tx{padding:10px 14px 14px}
.tile small{display:block;font-weight:800;color:var(--accent-strong);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.tile b{display:block;font-size:18px;line-height:1.15;margin-top:4px;color:var(--navy)}
.tile span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
/* journey stages */
.stages{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.stage{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.stage .art{aspect-ratio:16/8;background:var(--navy);overflow:hidden}.stage .art img{display:block;width:100%;height:100%;object-fit:cover}
.stage .bd{padding:14px 16px 16px}.stage .bd p{font-size:15px;color:var(--muted);margin:4px 0 8px}
.stage .links a{display:block;font-weight:800;text-decoration:none;padding:5px 0;border-top:1px solid var(--line)}
/* measured numbers */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:12px 0 0}
.kpis div{background:var(--soft);border-radius:var(--r-sm);padding:12px 14px 10px}
.kpis b{display:block;font-size:clamp(24px,6vw,32px);line-height:1.05;color:var(--navy);font-weight:900;letter-spacing:-.02em}
.kpis span{display:block;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.3}
.kpi-note{font-size:15px;color:var(--muted);margin:10px 0 0}

/* ---------- keynote: act bar, acts, beats, slides ---------- */
.acts{position:sticky;top:var(--head-h);z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.acts .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-top:8px;padding-bottom:8px}
.acts .wrap::-webkit-scrollbar{display:none}
.acts a{flex:0 0 auto;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px;padding:7px 12px;border-radius:var(--pill);border:1px solid var(--line);white-space:nowrap}
.acts a b{color:var(--accent-strong);margin-right:4px}
.acts a.on{background:var(--navy);color:#fff;border-color:var(--navy)}.acts a.on b{color:#fff}
@media(max-width:640px){.acts{top:0}}
.act{padding:26px 0 8px;border-bottom:1px solid var(--line)}
.act-h{margin-bottom:14px}.act-h .no{font-weight:800;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-strong)}
.act-h h2{margin:4px 0}.act-h p{color:var(--muted);margin:0}
.beats{list-style:none;margin:0;padding:0}
.beat{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:14px 0;border-top:1px solid var(--line)}
.beat:first-child{border-top:0}
.beat .bn{font-weight:800;color:var(--muted);font-size:15px;padding-top:2px;font-variant-numeric:tabular-nums} /* FIX: was #a3a5ad (2.46:1) */
.beat h3{font-size:clamp(19px,4.6vw,22px)}.beat p{margin:4px 0 0}
.bbody{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}
.bbody.nosl{grid-template-columns:1fr}
@media(max-width:760px){.bbody{grid-template-columns:1fr;gap:10px}}
.links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:8px;font-weight:700}
.try{margin-top:12px;background:var(--soft);border-radius:var(--r-sm);padding:12px 12px 10px}
.try .lbl{font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-strong);margin-bottom:6px}
.sl{display:block;position:relative;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 2px 14px rgba(7,33,54,.14);background:var(--soft);cursor:zoom-in;border:0;padding:0;width:100%}
.sl img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.sl .sn{position:absolute;right:8px;bottom:8px;background:rgba(7,33,54,.78);color:#fff;font:800 12px/1 var(--font);padding:5px 8px;border-radius:var(--pill)}
.allsl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(150px,46%),1fr));gap:8px;margin-top:12px}
.allsl .sl{border-radius:var(--r-xs)}

/* ---------- prompts ---------- */
.pw{margin:12px 0 18px}
.pw .lb{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;font-weight:800;color:var(--navy);font-size:15px}
.pw .lb small{display:block;font-weight:600;color:var(--muted)}
.pw pre{margin:0;background:var(--navy);color:var(--on-navy);border-radius:var(--r-md);padding:16px 18px;white-space:pre-wrap;overflow-wrap:break-word;font:14.5px/1.6 var(--mono);max-height:420px;overflow:auto}
.pw.light pre{background:#fff;color:var(--ink);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;font:15.5px/1.55 var(--font)} /* light variant: prose prompts */
.copy{flex:none;min-height:38px;background:var(--accent-strong);color:#fff;border:0;border-radius:var(--pill);padding:8px 16px;font:800 14px var(--font);cursor:pointer}
.copy:hover{background:var(--accent-deep)}.copy.ok{background:var(--green)}
.draft{display:inline-block;font-size:12px;font-weight:800;color:var(--accent-deep);background:var(--accent-tint);border-radius:var(--pill);padding:2px 8px;margin-left:6px;vertical-align:middle}
.prompt{padding:22px 0;border-top:1px solid var(--line)}
.prompt .where{display:inline-block;font-size:14px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:var(--r-xs);padding:3px 9px;margin:6px 0 8px}
.tip{font-size:15px;color:var(--muted);margin:8px 0 0}.tip b{color:var(--navy)}

/* ---------- tool tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;border-bottom:2px solid var(--line)}
.tabs button{border:0;background:none;padding:10px 16px;font:800 15px var(--font);color:var(--muted);cursor:pointer;border-radius:10px 10px 0 0;margin-bottom:-2px;border-bottom:3px solid transparent}
.tabs button[aria-selected=true]{color:var(--navy);border-bottom-color:var(--accent)}
.tp{padding:14px 0}.js .tp{display:none}.js .tp.on{display:block}.tp ol{padding-left:22px;margin:0}.tp li{margin:7px 0}

/* ---------- results: gallery, frames, video ---------- */
.rb{margin:0 0 30px}.rb h3{font-size:20px;margin-bottom:2px}.rsub{color:var(--muted);margin:4px 0 12px;font-size:16px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;margin:12px 0 0}
.gal.one{grid-template-columns:1fr}.gal figure{margin:0}
.gi{position:relative;display:block;border-radius:var(--r-sm);overflow:hidden;box-shadow:0 2px 12px rgba(7,33,54,.12);cursor:zoom-in;border:0;padding:0;width:100%;background:var(--soft)}
.gi img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.gal figcaption,.fig figcaption,.vcap{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.35}
.fig{margin:12px 0 0}.fig img{display:block;width:100%;border-radius:var(--r-sm);background:var(--soft)}
video{display:block;width:100%;border-radius:var(--r-md);background:#000}
.video-slot{margin:22px 0 0}.video-slot video{aspect-ratio:16/9;background:var(--soft)}
.frame{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.frame iframe{display:block;width:100%;height:78vh;min-height:520px;border:0}
.demo-hint{font-size:14px;color:var(--muted)}

/* ---------- callouts ---------- */
.box{border-left:4px solid var(--accent);background:var(--accent-wash);padding:12px 16px;border-radius:0 var(--r-sm) var(--r-sm) 0;margin:12px 0;font-size:16px}
.box.g{border-color:var(--green);background:var(--green-bg)}.box.n{border-color:var(--navy);background:var(--soft)}
.note{position:relative;background:var(--soft);border-radius:var(--r-sm);padding:12px 14px 12px 36px;font-size:16px;margin:14px 0 0}
.note:before{content:"";position:absolute;left:14px;top:18px;width:12px;height:12px;border-radius:3px;background:var(--accent)}
.quote{margin:10px 0 0;padding:12px 16px;border-left:4px solid var(--accent);background:var(--cream);border-radius:0 10px 10px 0;font-size:18px}
.quote cite{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:4px}
.redline{background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:var(--r-sm);padding:14px 16px;margin:14px 0 0}.redline b{color:var(--accent-deep)}
.more-box{display:block;background:var(--soft);border-radius:var(--r);padding:16px 18px;margin:0 0 8px}
.more-box ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px}
.more-box li{border-left:4px solid var(--accent);padding:2px 0 2px 12px;font-weight:700;color:var(--navy);font-size:16px}
.says{display:flex;gap:14px;align-items:center;background:var(--soft);border-radius:var(--r);padding:14px 18px;margin:26px 0 0}
.says img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--accent)}
.says p{margin:2px 0 0;font-size:18px;font-weight:800;color:var(--navy);line-height:1.3}

/* ---------- lists, steps, tables, downloads ---------- */
ul.chk,ul.ok,ul.no{list-style:none;padding:0;margin:8px 0}
ul.chk li,ul.ok li,ul.no li{position:relative;padding:6px 0 6px 32px}
ul.chk li:before,ul.ok li:before,ul.no li:before{position:absolute;left:0;top:7px;width:22px;height:22px;border-radius:50%;font:800 13px/22px system-ui,sans-serif;text-align:center;color:#fff}
ul.chk li:before,ul.ok li:before{content:"✓";background:var(--green)}
ul.no li:before{content:"✕";background:var(--accent-strong)}
ol.steps{margin:6px 0 0;padding:0;list-style:none;counter-reset:s}
ol.steps li{counter-increment:s;position:relative;padding:8px 0 8px 44px;border-top:1px dashed var(--line)}
ol.steps li:first-child{border-top:0}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:7px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font:800 15px/30px var(--font);text-align:center}
ol.steps.accent li:before{background:var(--accent-strong)} /* navy = how to build it, orange = what it does */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th,table.t td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.t th{background:var(--soft);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
ul.dls{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.dl{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-weight:700}
a.dl:hover{border-color:var(--accent)}
.dl .ext{flex:none;font-weight:900;font-size:12px;text-transform:uppercase;background:var(--navy);color:#fff;border-radius:6px;padding:4px 6px}
.dl .dlt span{display:block;font-weight:400;color:var(--muted);font-size:15px;margin-top:2px}
.dl small{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.dl.off{color:var(--muted);font-weight:400;border-style:dashed}.dl.off .ext{background:#b9bac1}

/* ---------- chips, filter, prev/next ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;text-decoration:none;border:2px solid var(--line);background:#fff;border-radius:var(--pill);padding:6px 13px;font:800 14px var(--font);color:var(--navy);cursor:pointer}
a.chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.filters{position:sticky;top:var(--head-h);z-index:30;background:rgba(255,255,255,.96);padding:10px 0;border-bottom:1px solid var(--line)}
.filters .chips{flex-wrap:nowrap;overflow-x:auto;padding:4px 0;margin:0;scrollbar-width:none}.filters .chips::-webkit-scrollbar{display:none}
.filters .chip{flex:none}
@media(max-width:640px){.filters{top:0}}
.fl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:6px 0 0}
.srch input{width:100%;max-width:420px;padding:11px 16px;border:2px solid var(--line);border-radius:var(--pill);font:16px var(--font);color:var(--ink)}
.srch input:focus{outline:0;border-color:var(--accent)}
.cnt{font-weight:800;color:var(--navy);margin:14px 0}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:30px 0 10px}
.pn a{display:block;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;text-decoration:none;color:var(--navy);font-weight:800;line-height:1.25}
.pn a small{display:block;color:var(--muted);font-weight:700;font-size:13px;margin-bottom:2px}
.pn a:hover{border-color:var(--accent)}.pn .nx{text-align:right;grid-column:2}

/* ---------- departments: ideas from interviews (Department Scan) ---------- */
.ucs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.uc{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}.uc.has{border-color:var(--accent-line)}
.uc h3{font-size:18px;margin:8px 0 0}
.uc blockquote{margin:8px 0 0;color:var(--muted);font-size:16px;font-style:italic}
.uc .more{display:inline-block;margin-top:8px;font-size:15px}
details.na{margin:16px 0 0;border:1px dashed var(--line);border-radius:var(--r-sm);padding:10px 14px}
details.na summary{cursor:pointer;font-weight:800}details.na ul{margin:8px 0 0;padding-left:20px;color:var(--muted)}

/* ---------- next-step band (upsell / academy / workshop) ---------- */
.band{margin:46px 0 0;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.band:before{content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(210,100,10,.35),transparent 70%)}
.band .wrap{position:relative;padding-top:44px;padding-bottom:44px;display:grid;gap:28px;grid-template-columns:1.3fr 1fr;align-items:center}
@media(max-width:820px){.band .wrap{grid-template-columns:1fr}}
.band .kick{color:var(--accent-on-navy)}.band h2{color:#fff;font-size:clamp(28px,5.4vw,46px);font-weight:900;margin:8px 0 10px}
.band .sub{font-size:clamp(16px,2.4vw,19px);color:var(--on-navy-muted);margin-bottom:12px}.band .sub b{color:#fff}
.band ul{list-style:none;padding:0;margin:14px 0}.band li{padding:5px 0 5px 28px;position:relative;color:var(--on-navy)}
.band li:before{content:"→";position:absolute;left:0;color:var(--accent-on-navy);font-weight:900}
.band .panel{background:#fff;border-radius:20px;padding:18px;text-align:center;color:var(--navy)}
.band .panel img{width:176px;height:176px;image-rendering:pixelated;display:block;margin:0 auto 10px}
.band .panel small{display:block;color:var(--muted);margin-top:8px;font-size:13px}.band .panel .btn{width:100%}
.cd{display:flex;gap:8px;margin:14px 0 4px}.cd div{background:rgba(255,255,255,.1);border-radius:10px;padding:6px 10px;text-align:center;min-width:56px}
.cd b{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}.cd span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#9fb4c7}

/* ---------- contact + footer ---------- */
.contact{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;background:var(--soft);border-radius:var(--r);padding:18px}
.contact img,.contact .ph-asset{width:96px;height:96px;min-height:0;border-radius:50%;object-fit:cover;padding:4px;font-size:10px}
.contact h2{margin:0 0 4px}.contact p{margin:0 0 4px}.contact>div{min-width:0}.contact .btns{margin:10px 0 0}
@media(max-width:480px){.contact{grid-template-columns:64px 1fr;padding:14px}.contact img,.contact .ph-asset{width:64px;height:64px}}
.ft{margin-top:36px;padding:26px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.ft p{margin:0 0 6px}.ft a{color:var(--muted)}
.ft .ask{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:8px}.ft .ask a{color:var(--accent-deep)}

/* ---------- forms + FAQ ---------- */
form.f label{display:block;font-weight:800;font-size:14px;color:var(--navy);margin:12px 0 4px}
form.f input,form.f textarea{width:100%;padding:13px 14px;border:2px solid var(--line);border-radius:var(--r-sm);font:16px var(--font);background:#fff;color:var(--ink)}
form.f input:focus,form.f textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} /* FIX: focus was colour-only */
form.f .two{display:grid;gap:12px;grid-template-columns:1fr 1fr}@media(max-width:520px){form.f .two{grid-template-columns:1fr}}
form.f .consent{display:flex;gap:10px;align-items:flex-start;margin:14px 0;font-size:14px;color:var(--muted);font-weight:600}
form.f .consent input{margin-top:4px;width:20px;height:20px;flex:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.err{color:var(--error);font-weight:700;margin:8px 0}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}.faq summary{font-weight:800;cursor:pointer;color:var(--navy)}.faq p{margin:8px 0 0;color:var(--muted)}

/* ---------- step-by-step build guide ("Bauanleitung") ---------- */
/* focused page: own top bar instead of the site header, so the guide can be followed (and printed) step by step */
.gtop{position:sticky;top:0;z-index:50;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,calc((100vw - 1080px)/2))}
.gtop .brand{color:#fff;font-size:15px;font-weight:800;letter-spacing:.02em;min-width:0}
.gtop .brand i{width:14px;height:14px;border-radius:3px;background:var(--accent);flex:none}
.gtop .brand span{overflow:hidden;text-overflow:ellipsis}
.gtop>a:not(.brand){color:#fff;text-decoration:none;font-size:14px;font-weight:700;border:1px solid #3b5368;border-radius:var(--r-xs);padding:6px 12px;white-space:nowrap}
.gtop>a:not(.brand):hover{border-color:var(--accent);color:#fff}
.ghero{padding:36px 0 6px}
.gkick{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-strong)}
.gkick .pill{background:var(--navy);color:#fff;margin:0;letter-spacing:.06em}
.ghero h1{font-size:clamp(28px,4.4vw,44px);margin:10px 0 12px}
.ghero .sub{font-size:19px;max-width:820px;margin:0;color:#2c3a47}
.kpis.ruled{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:24px 0}
.kpis.ruled div{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:10px;padding:14px 16px}
.kpis.ruled b{font-size:28px}
.chain{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px;counter-reset:c}
.chain li{counter-increment:c;flex:1 1 150px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14.5px;line-height:1.4}
.chain li b{display:block;color:var(--navy);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.chain li b:before{content:counter(c) " · ";color:var(--accent-strong)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 22px}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}
.gbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px;min-width:0}
.gbox.goal{border-left:5px solid var(--accent)}
.gbox h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px;color:var(--muted);font-weight:800}
.gbox ul{margin:0;padding-left:20px}.gbox li{margin:4px 0}
.gbox ul.dls{padding:0;margin:0}.gbox .dl{padding:9px 12px;font-size:14.5px}
.fast{background:var(--green-bg);border:1px solid #b9dccb;border-radius:10px;padding:14px 18px;margin:0 0 24px}.fast b{color:var(--green)}
.toc{margin:0 0 28px}.toc h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.toc-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.toc a{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--ink);font-size:14.5px;line-height:1.35;padding:6px 8px;border-radius:var(--r-xs)}
.toc a:hover{background:var(--soft)}
.toc a b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px}
.gsteps{list-style:none;margin:0;padding:0}
.part h2{margin:26px 0 0;padding-bottom:8px;border-bottom:4px solid var(--accent);font-size:24px}
.step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:24px 0;border-bottom:1px solid var(--line)}
.step-no{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900}
.step h3{margin:6px 0;font-size:23px;line-height:1.25;font-weight:900}
.step-main{min-width:0}.step-text p{margin:0 0 8px}.step-text ul,.step-text ol{margin:0 0 8px;padding-left:22px}
.ui{font-weight:800;font-size:.93em;background:#fff;border:1px solid #b8c2cb;border-bottom-width:2px;border-radius:5px;padding:0 6px;color:var(--navy);white-space:nowrap}
/* marker number in text and captions: {1} in the content file */
.n{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--accent-strong);color:#fff;font-weight:900;font-size:13px;line-height:1;padding:0 5px;vertical-align:2px;margin:0 2px}
.shot{margin:12px 0 4px}.shot.narrow{max-width:560px}
.shot figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.shot-frame{display:block;position:relative;width:100%;padding:0;margin:0;border:1px solid #c7d0d8;border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;box-shadow:0 6px 22px rgba(7,33,54,.10);font:inherit;text-align:left;color:inherit}
.shot-frame img{display:block;width:100%;height:auto}
.shot-ph{display:block}.shot-ph .ph-asset{min-height:0;border-radius:0}
/* markers: boxes in % of the screenshot (survive any width); the first one dims the rest of the image */
.mk{position:absolute;border:3px solid var(--accent);border-radius:6px;box-shadow:0 0 0 3px rgba(210,100,10,.25),0 0 0 9999px rgba(7,33,54,.10);pointer-events:none}
.mk+.mk{box-shadow:0 0 0 3px rgba(210,100,10,.25)}
.mk-lab{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--accent-strong);color:#fff;font:900 14px/26px var(--font);text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.mk-lab.tl{left:-13px;top:-13px}.mk-lab.tr{right:-13px;top:-13px}.mk-lab.bl{left:-13px;bottom:-13px}.mk-lab.br{right:-13px;bottom:-13px}
.mk-lab.l-out{right:calc(100% + 6px);top:50%;transform:translateY(-50%)}.mk-lab.r-out{left:calc(100% + 6px);top:50%;transform:translateY(-50%)}
.mk-lab.tl-out{left:0;bottom:calc(100% + 6px)}.mk-lab.tr-out{right:0;bottom:calc(100% + 6px)}.mk-lab.bl-out{left:0;top:calc(100% + 6px)}.mk-lab.br-out{right:0;top:calc(100% + 6px)}
.pw.boxed{border:1px solid var(--navy-2);border-radius:var(--r-xs);overflow:hidden;background:#fff}
.pw.boxed .lb{background:var(--navy);color:#fff;padding:7px 12px;margin:0;font-size:14px}
.pw.boxed pre{background:#fff;color:var(--ink);border-radius:0;padding:12px 14px;font-size:14px;line-height:1.5;max-height:360px}
.pw.boxed .copy.ok{background:#fff;color:var(--green)}
.box-check,.box-warn,.box-tip{margin:12px 0 0;padding:10px 14px;border-radius:var(--r-xs);font-size:16px}
.box-check{background:var(--green-bg);border-left:5px solid var(--green)}.box-check>b:first-child{color:var(--green)}
.box-warn{background:var(--accent-tint);border-left:5px solid var(--accent)}.box-warn>b:first-child{color:var(--accent-deep)}
.box-tip{background:var(--soft);border-left:5px solid var(--navy-2)}.box-tip>b:first-child{color:var(--navy)}
.box-check>b:first-child,.box-warn>b:first-child,.box-tip>b:first-child{margin-right:6px}
.result{background:var(--navy);color:#fff;border-radius:var(--r-sm);padding:24px 26px;margin:30px 0 18px}
.result h2,.result h3{color:#fff}.result h2{margin:0 0 6px;font-size:26px}.result p{margin:0 0 10px}
.result .kpis.ruled{margin:14px 0 6px}
.result .kpis.ruled div{background:#0e2e47;border-color:#26445c;border-top-color:var(--accent)}
.result .kpis.ruled b{color:#fff}.result .kpis.ruled span{color:#c4d0da}
.result .tw{background:#fff;color:var(--ink);border-radius:var(--r-xs)}
.adapt{border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:10px;padding:18px 22px;margin:0 0 18px}
.adapt h2{margin:0 0 8px;font-size:22px}.adapt ul{margin:0;padding-left:22px}.adapt li{margin:5px 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;background:var(--green-bg);border:1px solid #b9dccb;border-radius:10px;padding:16px 20px;margin:0 0 22px}
.cta p{margin:0;flex:1 1 300px}
.gft{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* screenshot viewer: clones the frame WITH its markers; pan at 200 % on phones */
.lbs{position:fixed;inset:0;background:rgba(7,20,32,.94);display:none;z-index:210;padding:56px 10px 20px;overflow:auto;-webkit-overflow-scrolling:touch}
.lbs.on{display:block}
.lbs .shot-frame{max-width:1600px;margin:0 auto;cursor:zoom-out;box-shadow:none}
.lbs-x{position:fixed;top:10px;right:12px;z-index:211;background:var(--accent-strong);color:#fff;border:0;border-radius:var(--pill);font:900 16px var(--font);padding:8px 16px;cursor:pointer}
.lbs-hint{position:fixed;top:12px;left:14px;max-width:calc(100% - 170px);color:#c4d0da;font-size:13px;line-height:1.3}
@media(min-width:700px){.lbs .shot-frame{width:max(100%,1100px);max-width:none}}
@media(max-width:760px){
  .step{grid-template-columns:34px minmax(0,1fr);gap:10px;padding:20px 0}.step-no{width:32px;height:32px;font-size:16px}.step h3{font-size:20px;margin-top:2px}
  .mk{border-width:2px}.mk-lab{width:22px;height:22px;font-size:12px;line-height:22px}.mk-lab.tl{left:-9px;top:-9px}
  .result{padding:20px 18px}.lbs .shot-frame{width:200%;max-width:none}
}
@media print{.gtop,.lbs,.lbs-x,.toc,.pn{display:none!important}.step{break-inside:avoid}.mk,.mk-lab,.n,.step-no,.result,.kpis.ruled div{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ---------- lightbox ---------- */
.lbx{position:fixed;inset:0;z-index:200;background:rgba(5,24,41,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:16px}
.lbx.on{display:flex}
.lbx img{max-width:min(1600px,100%);max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:10px;background:#fff}
.lbx p{color:#fff;margin:10px 0 0;font-size:16px;text-align:center;max-width:900px}
.lbx button{position:absolute;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:var(--pill);width:48px;height:48px;font:800 22px/48px var(--font);cursor:pointer}
.lbx button:hover{background:rgba(255,255,255,.28)}
.lbx .x{top:12px;right:12px}.lbx .pv{left:12px;top:50%}.lbx .nx{right:12px;top:50%}
@media(max-width:640px){.lbx .pv,.lbx .nx{top:auto;bottom:14px}.lbx .pv{left:calc(50% - 60px)}.lbx .nx{right:calc(50% - 60px)}}

/* ---------- 404 + utilities ---------- */
.e404{padding:70px 0 40px}.e404 .kick{font-size:15px}
.nb{white-space:nowrap}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
@media print{.hd,.acts,.filters,.band,.copy,.ft .ask{display:none}body{font-size:12pt}a{color:inherit}}