/* irsali.de v3 (W18, 03.10.2026): stylesheet for the three main pages (start, services & prices, how we work),
   taken over from the approved W17 mockups (00. Strategie/Mockups_2026-10-03_W17/assets/w17.css).
   Values copied 1:1 from 03. Brand & Identity/Design-System/tokens.css (palette A, scheme "Auftritt")
   and the website light override from 11. Website/assets/site-v2.css (html[data-theme="light"]).
   No ad-hoc colours: every colour below is a token or a color-mix of a token. */

@font-face{font-family:"Sora";src:url("fonts/sora-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Sora";src:url("fonts/sora-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Sora";src:url("fonts/sora-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Sora";src:url("fonts/sora-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("fonts/instrument-serif-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/jetbrains-mono-600.woff2") format("woff2");font-weight:600;font-display:swap}

/* ---------- Tokens: scheme "Auftritt" (dark, default) ---------- */
:root{
  --font-sans:"Sora",system-ui,-apple-system,sans-serif;
  --font-serif:"Instrument Serif",Georgia,serif;
  --font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;--sp-24:96px;--sp-32:128px;
  --pattern-s:6%;--pattern-m:12%;--pattern-l:20%;
  --dur-fast:120ms;--dur-base:200ms;--ease:cubic-bezier(.2,.7,.2,1);

  --accent-dark:#59e8c8;--accent-light:#0a7c65;--accent-bright-light:#0d9c7f;
  --accent-strong-dark:#08090b;--accent-strong-light:#086b57;
  --support-dark:#0f2f2b;--support-light:#e6f6f1;

  --bg:#08090b;--bg-tint:#0d0f12;--bg-inset:#0d0f12;
  --surface:rgba(255,255,255,.035);--surface-strong:rgba(255,255,255,.065);
  --border:rgba(255,255,255,.09);--border-strong:rgba(255,255,255,.16);
  --text:#f5f7f6;--text-muted:#c9d2ce;--text-faint:#7c8783;
  --accent:var(--accent-dark);--accent-bright:var(--accent-dark);--accent-strong:var(--accent-strong-dark);
  --accent-soft:color-mix(in srgb,var(--accent) 10%,transparent);
  --support:var(--support-dark);
  --on-accent:#08090b;
  --ok:#43d17a;--warn:#e8c159;--bad:#ff6b5e;
  --ok-soft:rgba(67,209,122,.12);--warn-soft:rgba(232,193,89,.12);--bad-soft:rgba(255,107,94,.12);

  --fs-display:clamp(40px,5vw,56px);--lh-display:1.06;--ls-display:-0.018em;
  --fs-h2:clamp(30px,3.6vw,40px);--lh-h2:1.12;--ls-h2:-0.012em;
  --fs-h3:24px;--lh-h3:1.25;
  --fs-lead:18px;--fs-body:16px;--lh-body:1.5;--fs-small:14px;--fs-meta:12px;--fs-kpi:36px;

  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-pill:999px;
  --shadow-card:none;
  --shadow-pop:0 0 0 1px rgba(255,255,255,.12),0 16px 32px -12px rgba(0,0,0,.6);
  --focus:0 0 0 2px var(--bg),0 0 0 4px var(--accent);
  --btn-h:40px;--input-h:44px;--container:1120px;--gutter:24px;--nav-h:64px;
  --pattern-alpha:var(--pattern-s);--pattern-hero-boost:2;

  /* Arbeitsraum frame (product screenshots inside the dark page are always light, CI v2 §8) */
  --ar-bg:#ffffff;--ar-inset:#fafafa;--ar-tint:#f5f5f5;--ar-border:rgba(0,0,0,.08);--ar-border-strong:#e5e5e5;
  --ar-text:#171717;--ar-muted:#525252;--ar-faint:#737373;--ar-accent:#0a7c65;--ar-accent-bright:#0d9c7f;
  --ar-support:#e6f6f1;--ar-ok:#1a7345;--ar-ok-soft:rgba(26,115,69,.10);--ar-warn:#8a5f07;--ar-warn-soft:rgba(154,106,8,.08);
  --ar-btn:#171717;--ar-btn-fg:#ffffff;
  color-scheme:dark;
}
/* ---------- Light toggle (website light = Arbeitsraum values, as live site-v2.css) ---------- */
html[data-theme="light"]{
  --bg:#ffffff;--bg-inset:#fafafa;--bg-tint:#f5f5f5;--surface:#ffffff;--surface-strong:#f5f5f5;
  --border:rgba(0,0,0,.08);--border-strong:#e5e5e5;
  --text:#171717;--text-muted:#525252;--text-faint:#737373;
  --accent:var(--accent-light);--accent-bright:var(--accent-bright-light);--accent-strong:var(--accent-strong-light);
  --support:var(--support-light);--on-accent:#ffffff;
  --ok:#1a7345;--warn:#8a5f07;--bad:#b8392c;--ok-soft:rgba(26,115,69,.10);--warn-soft:rgba(154,106,8,.08);--bad-soft:rgba(184,57,44,.10);
  --shadow-card:0 1px 2px rgba(0,0,0,.05);
  --shadow-pop:0 0 0 1px rgba(0,0,0,.08),0 1px 1px rgba(0,0,0,.02),0 4px 8px -4px rgba(0,0,0,.04),0 16px 24px -8px rgba(0,0,0,.06);
  --focus:0 0 0 2px #fff,0 0 0 4px var(--accent);
  --pattern-s:10%;--pattern-m:18%;--pattern-l:28%;--pattern-alpha:var(--pattern-s);--pattern-hero-boost:1;
  color-scheme:light;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-sm)}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
h1{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:700}
h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:700}
h3{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:600}
.serif{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.04em;letter-spacing:0;color:var(--accent)}
.lead{font-size:var(--fs-lead);color:var(--text-muted);max-width:62ch}
.muted{color:var(--text-muted)}
.small{font-size:var(--fs-small);line-height:1.45}
.mono{font-family:var(--font-mono)}
.nb{white-space:nowrap}
.hy{hyphens:auto;-webkit-hyphens:auto}
.wrap{max-width:calc(var(--container) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
@media (min-width:1024px){.wrap{--gutter:48px}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ic{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic.s{width:18px;height:18px}

.eyebrow{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:8px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px var(--ok-soft)}

/* Sample-data label: used on every invented example */
.sample{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:500;letter-spacing:.04em;color:var(--text-faint);display:inline-flex;align-items:center;gap:6px}
.sample .ic{width:14px;height:14px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--btn-h);padding:0 18px;border-radius:var(--r-md);font:500 15px/1 var(--font-sans);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn:hover{text-decoration:none}
.btn.lg{height:48px;padding:0 22px;font-size:16px}
.btn.primary{background:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,var(--text))}
html[data-theme="light"] .btn.primary:hover{background:var(--accent-strong)}
.btn.ghost{border-color:var(--border-strong);color:var(--text);background:transparent}
.btn.ghost:hover{border-color:var(--text-faint)}
.btn .ic{width:18px;height:18px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Pattern A (from Design-System/pattern/patterns.css) ---------- */
.pattern{position:relative;isolation:isolate}
.pattern::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background-color:color-mix(in srgb,var(--accent) var(--pattern-alpha),transparent);
  -webkit-mask-repeat:repeat;mask-repeat:repeat;-webkit-mask-image:var(--pattern-mask);mask-image:var(--pattern-mask);
  -webkit-mask-size:var(--pattern-size);mask-size:var(--pattern-size)}
.pattern-a{--pattern-size:96px 96px;--pattern-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'><g fill='%23000'><circle cx='12' cy='12' r='1.4'/><circle cx='36' cy='12' r='1.4'/><circle cx='60' cy='12' r='1.4'/><circle cx='84' cy='12' r='1.4'/><circle cx='12' cy='36' r='1.4'/><circle cx='36' cy='36' r='1.4'/><circle cx='60' cy='36' r='1.4'/><circle cx='84' cy='36' r='1.4'/><circle cx='12' cy='60' r='1.4'/><circle cx='36' cy='60' r='1.4'/><circle cx='84' cy='60' r='1.4'/><circle cx='12' cy='84' r='1.4'/><circle cx='36' cy='84' r='1.4'/><circle cx='60' cy='84' r='1.4'/><circle cx='84' cy='84' r='1.4'/></g><circle cx='60' cy='60' r='4.5' fill='none' stroke='%23000' stroke-width='1.4'/><circle cx='60' cy='60' r='1.6' fill='%23000'/></svg>")}
.pattern.fade::before{
  -webkit-mask-image:var(--pattern-mask),radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 80%);
  mask-image:var(--pattern-mask),radial-gradient(ellipse 70% 60% at 50% 0%,#000 30%,transparent 80%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-size:var(--pattern-size),100% 100%;mask-size:var(--pattern-size),100% 100%}
.pattern.fade-x::before{
  -webkit-mask-image:var(--pattern-mask),linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  mask-image:var(--pattern-mask),linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  -webkit-mask-size:var(--pattern-size),100% 100%;mask-size:var(--pattern-size),100% 100%}
.density-s{--pattern-alpha:var(--pattern-s)}
.density-m{--pattern-alpha:calc(var(--pattern-m) * var(--pattern-hero-boost))}
.pattern-a.lines::before{background-image:
  linear-gradient(color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px),
  linear-gradient(90deg,color-mix(in srgb,var(--accent) 14%,transparent) 1px,transparent 1px);background-size:48px 48px}
/* animated light sweep (background-position) removed 04.10.2026: F5 allows transform/opacity only */

/* ---------- Announcement bar ---------- */
.ann{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px var(--gutter);border-bottom:1px solid var(--border);background:var(--bg-tint);font-size:var(--fs-small);color:var(--text-muted);text-align:center}
.ann .tag{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:var(--r-pill);padding:2px 8px;flex:none}
.ann a{font-weight:500;white-space:nowrap}
.ann .short{display:none}
@media (max-width:640px){.ann .long{display:none}.ann .short{display:inline}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;gap:16px;height:var(--nav-h)}
.logo{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:700;letter-spacing:.14em;font-size:15px;margin-right:auto}
.logo:hover{text-decoration:none}
.logo img{height:20px;width:auto}
.logo .lg-b{display:none}
html[data-theme="light"] .logo .lg-w{display:none}
html[data-theme="light"] .logo .lg-b{display:block}
.nav-links{display:flex;gap:4px}
.nav-links a{color:var(--text-muted);font-size:15px;font-weight:500;padding:8px 12px;border-radius:var(--r-md)}
.nav-links a:hover{color:var(--text);text-decoration:none;background:var(--surface)}
.nav-links a[aria-current="page"]{color:var(--text);background:var(--surface-strong)}
.theme-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);border:1px solid transparent;background:none;color:var(--text-muted);cursor:pointer;padding:0;flex:none}
.theme-btn:hover{color:var(--text);border-color:var(--border)}
.theme-btn .ic{width:20px;height:20px}
.theme-btn .sun{display:none}
html[data-theme="light"] .theme-btn .sun{display:block}
html[data-theme="light"] .theme-btn .moon{display:none}
.mnav{display:none;position:relative}
.mnav summary{list-style:none;width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-md);border:1px solid var(--border);cursor:pointer;color:var(--text)}
.mnav summary::-webkit-details-marker{display:none}
.mnav .x{display:none}
.mnav[open] .x{display:block}
.mnav[open] .bars{display:none}
.mnav .menu{position:absolute;right:0;top:48px;width:min(300px,calc(100vw - 32px));background:var(--bg-tint);border:1px solid var(--border-strong);border-radius:var(--r-lg);padding:8px;display:grid;gap:2px;box-shadow:var(--shadow-pop)}
.mnav .menu a{color:var(--text);padding:12px 14px;border-radius:var(--r-md);font-weight:500}
.mnav .menu a[aria-current="page"]{background:var(--surface-strong)}
.mnav .menu .btn{margin-top:6px;color:var(--on-accent)}
@media (max-width:960px){.nav-links{display:none}.mnav{display:block}.site-header .cta{display:none}}
@media (min-width:561px) and (max-width:960px){.site-header .cta{display:inline-flex}}

/* ---------- Sections ---------- */
.sec{padding-block:var(--sp-24)}
.sec.tight{padding-block:var(--sp-16)}
.sec.tint{background:var(--bg-tint);border-block:1px solid var(--border)}
.sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:var(--sp-12)}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
@media (max-width:767px){.sec{padding-block:var(--sp-16)}.sec.tight{padding-block:var(--sp-12)}.sec-head{margin-bottom:var(--sp-8)}}

.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--shadow-card);min-width:0}
.grid{display:grid;gap:var(--sp-4)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:767px){.g2,.g4{grid-template-columns:minmax(0,1fr)}}

.icon-tile{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 22%,transparent)}
.icon-tile .ic{width:22px;height:22px}

/* ---------- Hero ---------- */
.hero{padding-block:var(--sp-24) var(--sp-24);border-bottom:1px solid var(--border)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-12);align-items:center}
.hero .copy{display:grid;gap:24px;align-content:start}
.hero .facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none;font-size:var(--fs-small);color:var(--text-muted)}
.hero .facts li{display:inline-flex;align-items:center;gap:8px}
.hero .facts .ic{width:16px;height:16px;color:var(--accent)}
.page-hero{padding-block:var(--sp-16) var(--sp-16)}
.page-hero .wrap{display:grid;gap:var(--sp-12);grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:end}
.glance{display:grid;gap:0;padding:8px 20px}
.glance .gl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border)}
.glance .gl:last-child{border-bottom:0}
.glance .gl span{color:var(--text-muted);font-size:15px}
.glance .gl b{font-family:var(--font-mono);font-weight:600;font-size:17px;white-space:nowrap;font-variant-numeric:tabular-nums}
.glance .ttl{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);padding:12px 0 4px}
.rules{display:grid;gap:14px;padding:20px}
.rules .r{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px}
.rules .r .ic{color:var(--accent);width:20px;height:20px;margin-top:2px}
.rules .r b{display:block;font-weight:600}
.rules .r span{color:var(--text-muted);font-size:14px}
@media (max-width:1023px){.page-hero .wrap{grid-template-columns:minmax(0,1fr)}}
.page-hero .copy{display:grid;gap:20px;max-width:820px}
.crumb{font-size:var(--fs-small);color:var(--text-faint)}
.crumb a{color:var(--text-muted)}
@media (max-width:1023px){.hero .wrap{grid-template-columns:minmax(0,1fr)}.hero{padding-block:var(--sp-16) var(--sp-16)}}

/* ---------- Product frame (Arbeitsraum, always light) ---------- */
.frame{background:var(--ar-bg);color:var(--ar-text);border-radius:var(--r-lg);box-shadow:var(--shadow-pop);overflow:hidden;font-size:14px;line-height:20px;min-width:0}
.frame .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--ar-border);background:var(--ar-inset)}
.frame .mono-firm{width:28px;height:28px;border-radius:6px;background:var(--ar-text);color:var(--ar-bg);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.frame .firm{display:grid;line-height:16px;min-width:0}
.frame .firm b{font-size:13px;font-weight:600}
.frame .firm span{font-size:12px;color:var(--ar-faint)}
.frame .when{margin-left:auto;font-size:12px;color:var(--ar-faint);white-space:nowrap}
.frame .body{padding:16px;display:grid;gap:12px}
.frame .hello{font-size:16px;font-weight:600;line-height:22px}
.frame .sub{font-size:13px;color:var(--ar-muted);margin-top:-8px}
.frame .foot{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--ar-border);background:var(--ar-inset);font-size:12px;color:var(--ar-muted)}
.frame .foot .ic{width:16px;height:16px;color:var(--ar-ok)}
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--ar-border);border-radius:8px;background:var(--ar-bg)}
.task .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;color:var(--ar-accent);background:var(--ar-support)}
.task b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task small{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ar-muted)}
.task small i{width:6px;height:6px;border-radius:50%;background:var(--ar-ok);flex:none}
.task small i.w{background:var(--ar-warn)}
.task .go{height:28px;padding:0 12px;border-radius:6px;background:var(--ar-btn);color:var(--ar-btn-fg);font:500 12px/28px var(--font-sans);border:0;white-space:nowrap}
.task.done{opacity:.62}
.task.done .go{background:transparent;color:var(--ar-ok);padding:0 4px;display:inline-flex;align-items:center;gap:4px}
.task.done .go .ic{width:14px;height:14px}
.pupil{display:inline-block;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--ar-accent-bright);position:relative;flex:none;vertical-align:-1px}
.pupil::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ar-accent-bright)}

/* draft card (CI v2 §8 building block 2) */
.draft{border:1px solid var(--ar-border-strong);border-radius:12px;padding:14px;background:var(--ar-bg);display:grid;gap:8px}
.draft.pending{border-style:dashed;border-color:color-mix(in srgb,var(--ar-accent) 55%,transparent)}
.draft .kick{font-size:12px;color:var(--ar-faint);display:flex;align-items:center;gap:6px}
.draft .ti{font-size:15px;font-weight:600;line-height:20px}
.draft .why{font-size:13px;color:var(--ar-muted)}
.draft .txt{font-size:13px;line-height:19px;background:var(--ar-inset);border:1px solid var(--ar-border);border-radius:8px;padding:10px 12px;color:var(--ar-text)}
.draft .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.draft .acts span{height:28px;padding:0 12px;border-radius:6px;font:500 12px/28px var(--font-sans);border:1px solid var(--ar-border-strong);color:var(--ar-text);background:var(--ar-bg)}
.draft .acts .p{background:var(--ar-btn);color:var(--ar-btn-fg);border-color:var(--ar-btn)}
.draft .acts .g{border-color:transparent;color:var(--ar-muted)}

/* hero product animation: one orchestrated moment, readable at rest */
.hero-stage{display:grid;gap:12px;min-width:0}
.hero-stage .frame .task:nth-child(1){animation:rowIn .5s var(--ease) both .2s}
.hero-stage .frame .task:nth-child(2){animation:rowIn .5s var(--ease) both .35s}
.hero-stage .frame .task:nth-child(3){animation:rowIn .5s var(--ease) both .5s}
@keyframes rowIn{from{transform:translateY(6px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.hero-stage .frame .task{animation:none!important}}
.stage-note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

/* ---------- Problem cards ---------- */
.pain{display:grid;gap:14px}
.pain p{color:var(--text-muted)}
.pain .q{font-size:19px;font-weight:600;line-height:1.35;color:var(--text)}

/* ---------- Steps / flow ---------- */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);counter-reset:st;position:relative}
.flow li{list-style:none;position:relative}
.flow .card{display:grid;gap:12px;height:100%}
.flow .k{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.07em;color:var(--accent);text-transform:uppercase}
.flow p{color:var(--text-muted)}
@media (max-width:1023px){.flow{grid-template-columns:minmax(0,1fr)}}
ol.flow{padding:0;margin:0}

/* day timeline */
.day{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-12);align-items:start}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0;position:relative}
.tl li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:0 0 22px;position:relative}
.tl li::before{content:"";position:absolute;left:87px;top:10px;bottom:-4px;width:1px;background:var(--border-strong)}
.tl li:last-child::before{display:none}
.tl .t{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-faint);padding-top:1px;font-variant-numeric:tabular-nums}
.tl .c{padding-left:16px;position:relative;display:grid;gap:4px}
.tl .c::before{content:"";position:absolute;left:-5px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:2px solid var(--accent)}
.tl .c b{font-weight:600}
.tl .c span{color:var(--text-muted);font-size:15px}
.tl li.you .c::before{background:var(--accent)}
.tl .who{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.tl li.you .who{color:var(--accent)}
@media (max-width:1023px){.day{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.tl li{grid-template-columns:52px minmax(0,1fr);gap:12px}.tl li::before{left:63px}}

/* ---------- Offer cards ---------- */
.offer{display:flex;flex-direction:column;gap:14px}
.offer .price{margin-top:auto;padding-top:6px}
.offer .tag{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint)}
.offer h3{font-size:22px}
.offer p{color:var(--text-muted)}
.offer .price{font-family:var(--font-mono);font-size:var(--fs-kpi);font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.offer .price small{font-family:var(--font-sans);font-size:14px;font-weight:400;letter-spacing:0;color:var(--text-muted)}
.offer .more{font-weight:500;display:inline-flex;align-items:center;gap:6px}
.offer .more .ic{width:16px;height:16px}
.offer.feat{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:linear-gradient(180deg,var(--accent-soft),transparent 60%),var(--surface)}
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:var(--r-pill);padding:4px 10px;width:max-content}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;color:var(--text-muted);font-size:15px}
.checks li .ic{width:18px;height:18px;color:var(--accent);margin-top:2px}
.checks.no li .ic{color:var(--text-faint)}

/* ---------- Promise list ---------- */
.promise{display:grid;gap:12px;align-content:start}
.promise h3{font-size:19px;line-height:1.3}
.promise p{color:var(--text-muted);font-size:15px}


/* ---------- Price teaser ---------- */
.ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.step{display:grid;gap:10px;align-content:start}
.step .lbl{font-size:15px;font-weight:600}
.step .val{font-family:var(--font-mono);font-size:var(--fs-kpi);font-weight:600;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums}
.step p{color:var(--text-muted);font-size:15px}
@media (max-width:1023px){.ladder{grid-template-columns:minmax(0,1fr)}}
.terms{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:var(--sp-6);font-size:var(--fs-small);color:var(--text-muted)}
.terms span{display:inline-flex;align-items:center;gap:8px}
.terms .ic{width:16px;height:16px;color:var(--accent)}

/* ---------- Finder (which package fits) ---------- */
.finder{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:var(--sp-6);align-items:start}
.finder .opts{display:grid;gap:8px}
.finder .opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text);font:500 15px/1.35 var(--font-sans);cursor:pointer}
.finder .opt:hover{border-color:var(--border-strong)}
.finder .opt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.finder .opt .ic{color:var(--accent);width:20px;height:20px}
.finder .ans{display:grid;gap:16px}
.finder .ans .card{display:grid;gap:12px}
.finder .ans h3{font-size:22px}
.finder .ans .rec{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.js .finder .ans .card{display:none}
.js .finder .ans .card.on{display:grid}
@media (max-width:1023px){.finder{grid-template-columns:minmax(0,1fr)}}

/* ---------- Package detail ---------- */
.pkg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--sp-8);padding:var(--sp-8)}
.pkg + .pkg{margin-top:var(--sp-4)}
.pkg .head{display:grid;gap:14px;align-content:start}
.pkg .head .price{font-family:var(--font-mono);font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.pkg .head .price small{font-family:var(--font-sans);font-size:15px;font-weight:400;letter-spacing:0;color:var(--text-muted)}
.pkg .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:15px}
.pkg .kv dt{color:var(--text-faint);font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.pkg .kv dd{margin:0;color:var(--text-muted)}
.pkg .body{display:grid;gap:18px;align-content:start}
.pkg .body h4{margin:0;font-size:15px;font-weight:600}
.pkg.feat{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
@media (max-width:1023px){.pkg{grid-template-columns:minmax(0,1fr);padding:var(--sp-6)}}

.minis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.mini{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:baseline}
.mini b{font-size:17px;font-weight:600}
.mini .v{font-family:var(--font-mono);font-size:20px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.mini p{grid-column:1/-1;color:var(--text-muted);font-size:15px}
@media (max-width:767px){.minis{grid-template-columns:minmax(0,1fr)}}

/* ---------- Table ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
table.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:15px}
table.cmp th,table.cmp td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--border);vertical-align:top}
table.cmp thead th{font-size:14px;font-weight:600;color:var(--text);background:var(--surface-strong)}
table.cmp thead th small{display:block;font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--accent);margin-top:2px}
table.cmp tbody th{font-weight:500;color:var(--text-faint);font-size:14px;width:190px}
table.cmp td{color:var(--text-muted)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
table.cmp .hl{background:var(--accent-soft)}
table.sw{min-width:640px}
table.sw tbody th{width:auto;color:var(--text);font-size:15px;font-weight:600}
table.sw tbody th small{display:block;font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--accent);margin-top:2px}

/* ---------- Process (numbered: real sequence) ---------- */
.proc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4);counter-reset:p}
.proc li{counter-increment:p;display:grid;gap:10px;align-content:start;padding-top:18px;border-top:2px solid var(--border-strong);position:relative}
.proc li::before{content:counter(p);position:absolute;top:-13px;left:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--accent);color:var(--accent);font:600 12px/1 var(--font-mono)}
.sec.tint .proc li::before{background:var(--bg-tint)}
.proc b{font-size:16px;font-weight:600}
.proc p{color:var(--text-muted);font-size:15px}
.proc .pay{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.03em}
@media (max-width:1023px){.proc{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}.proc li{padding-top:0;padding-left:40px;border-top:0}.proc li::before{top:0}}

/* ---------- Walkthrough (live example) ---------- */
.walk{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--sp-8);align-items:start}
.walk .steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.walk .steps button{all:unset;box-sizing:border-box;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;width:100%;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);cursor:pointer}
.walk .steps button:focus-visible{box-shadow:var(--focus)}
.walk .steps button:hover{border-color:var(--border-strong)}
.walk .steps button[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
.walk .steps .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--font-mono);color:var(--accent);border:1.5px solid color-mix(in srgb,var(--accent) 60%,transparent)}
.walk .steps b{display:block;font-weight:600;color:var(--text)}
.walk .steps small{display:block;font-size:14px;color:var(--text-muted);line-height:1.4;margin-top:2px}
.walk .stage{display:grid;gap:12px;min-width:0}
.walk .panel{display:grid;gap:12px}
.js .walk .panel{display:none}
.js .walk .panel.on{display:grid}
.walk .explain{font-size:15px;color:var(--text-muted);display:flex;gap:10px;align-items:flex-start}
.walk .explain .ic{color:var(--accent);width:18px;height:18px;margin-top:2px}
.walk .nav{display:flex;gap:8px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.no-js-label{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;color:var(--accent);letter-spacing:.07em;text-transform:uppercase}
.js .no-js-label{display:none}
.mail{display:grid;gap:6px}
.mail .hdr{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:12px;color:var(--ar-muted)}
.mail .hdr b{color:var(--ar-text);font-weight:500}
.mail .msg{font-size:13px;line-height:19px;padding:10px 12px;border:1px solid var(--ar-border);border-radius:8px;background:var(--ar-bg)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:500;background:var(--ar-tint);color:var(--ar-text)}
.chip.ok{background:var(--ar-ok-soft);color:var(--ar-ok)}
.chip.w{background:var(--ar-warn-soft);color:var(--ar-warn)}
.chip .pupil{width:10px;height:10px}
.chip .pupil::after{inset:2.5px}
.ctab{width:100%;border-collapse:collapse;font-size:13px}
.ctab td{padding:7px 10px;border-bottom:1px solid var(--ar-border)}
.ctab td:first-child{color:var(--ar-muted);width:42%}
.ctab tr:last-child td{border-bottom:0}
@media (max-width:1023px){.walk{grid-template-columns:minmax(0,1fr)}.walk .steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.walk .steps{grid-template-columns:minmax(0,1fr)}}

/* weeks */
.weeks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.weeks .card{display:grid;gap:12px;align-content:start}
.weeks .when{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
@media (max-width:1023px){.weeks{grid-template-columns:minmax(0,1fr)}}

/* data box */
.datapanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-12);align-items:center}
.where{display:grid;gap:10px}
.where .row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.where .row.you{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.where .row .ic{color:var(--accent)}
.where .row b{display:block;font-weight:600}
.where .row span{font-size:14px;color:var(--text-muted)}
.where .arrow{justify-self:center;color:var(--text-faint)}
@media (max-width:1023px){.datapanel{grid-template-columns:minmax(0,1fr)}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.faq details{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-card)}
.faq summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;display:flex;justify-content:space-between;gap:16px;align-items:flex-start;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{width:18px;height:18px;color:var(--text-faint);transition:transform var(--dur-base) var(--ease);margin-top:2px}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq .a{padding:0 18px 18px;color:var(--text-muted);font-size:15px;display:grid;gap:10px}
@media (max-width:767px){.faq{grid-template-columns:minmax(0,1fr)}}

/* ---------- Scan ---------- */
.scanbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-8);align-items:center;padding:var(--sp-8)}
.scanbox form{display:grid;gap:10px}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:500}
.field label small{font-weight:400;color:var(--text-faint)}
.input,.textarea{width:100%;height:var(--input-h);border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--bg);color:var(--text);font:400 16px/1.4 var(--font-sans);padding:0 14px}
.textarea{height:auto;min-height:104px;padding:12px 14px;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--text-faint)}
.input:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.row-in{display:flex;gap:8px}
.row-in .input{flex:1;min-width:0}
@media (max-width:1023px){.scanbox{grid-template-columns:minmax(0,1fr);padding:var(--sp-6)}}
@media (max-width:420px){.row-in{flex-direction:column}.row-in .input{flex:none}}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--sp-8);align-items:start}
.contact form{display:grid;gap:16px}
.contact .two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.check{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:13px;line-height:1.5;color:var(--text-muted)}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent)}
.sendrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.sendrow .mono{font-size:12px;color:var(--text-faint);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.phonecard{display:grid;gap:14px}
.phonecard .num{font-family:var(--font-mono);font-size:28px;font-weight:600;letter-spacing:-.01em;color:var(--text);display:inline-flex;align-items:center;gap:10px}
.phonecard .num .ic{color:var(--accent)}
.phonecard hr{border:0;border-top:1px solid var(--border);margin:4px 0}
.phonecard .line{display:flex;align-items:center;gap:10px;color:var(--text-muted);font-size:15px}
.phonecard .line .ic{width:18px;height:18px;color:var(--accent)}
.b2b{font-size:13px;color:var(--text-faint)}
@media (max-width:1023px){.contact{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.contact .two{grid-template-columns:minmax(0,1fr)}}

/* CTA band */
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-6);align-items:center;padding:var(--sp-12);border-radius:var(--r-lg);border:1px solid var(--border);background:var(--bg-tint);overflow:hidden}
.band h2{font-size:clamp(26px,3vw,34px)}
.band p{color:var(--text-muted);margin-top:10px;max-width:56ch}
@media (max-width:860px){.band{grid-template-columns:minmax(0,1fr);padding:var(--sp-8) var(--sp-6)}}

/* fit list */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.fit .card{display:grid;gap:14px;align-content:start}
.fit h3{font-size:19px;display:flex;align-items:center;gap:10px}
.fit h3 .ic{color:var(--accent)}
.fit .no h3 .ic{color:var(--text-faint)}
@media (max-width:767px){.fit{grid-template-columns:minmax(0,1fr)}}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);padding-block:var(--sp-16) var(--sp-8);background:var(--bg)}
.site-footer .top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:var(--sp-8)}
.site-footer .about{display:grid;gap:14px;align-content:start}
.site-footer .about p{color:var(--text-muted);font-size:14px;max-width:38ch}
.site-footer .col{display:grid;gap:10px;align-content:start;font-size:14px}
.site-footer .col b{font-size:14px;margin-bottom:4px}
.site-footer .col a{color:var(--text-muted)}
.site-footer .col a:hover{color:var(--text)}
.site-footer .legal{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:var(--sp-12);padding-top:var(--sp-6);border-top:1px solid var(--border);font-size:13px;color:var(--text-faint)}
.site-footer .legal span:first-child{max-width:80ch}
@media (max-width:860px){.site-footer .top{grid-template-columns:repeat(2,minmax(0,1fr))}.site-footer .about{grid-column:1/-1}}


/* Reveal: only below the first screen, visible without JS and with reduced motion */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}
.glance a.gl{color:var(--text)}
.glance a.gl:hover{text-decoration:none}
.glance a.gl:hover span{color:var(--text)}
@media (max-width:640px){
  table.sw{min-width:0}
  table.sw thead{display:none}
  table.sw tr{display:grid;gap:6px;padding:16px 18px;border-bottom:1px solid var(--border)}
  table.sw tr:last-child{border-bottom:0}
  table.sw th,table.sw td{border:0;padding:0}
  table.sw td{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px}
  table.sw td::before{content:attr(data-l);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);padding-top:2px}
}
/* Contrast fixes (measured): faint #737373 on light tint #f5f5f5 = 4.35, accent #0a7c65 on light accent-soft = 4.49 */
.sec.tint .sample,.sec.tint .tl .t,.sec.tint .tl .who{color:var(--text-muted)}
.sec.tint .tl li.you .who{color:var(--accent)}
html[data-theme="light"] .badge{color:var(--accent-strong)}
/* Reviewer W17: comparison table stacks per feature on phones; no caps on send info */
@media (max-width:767px){
  table.cmp:not(.sw){min-width:0}
  table.cmp:not(.sw) thead{display:none}
  table.cmp:not(.sw) tr{display:grid;gap:8px;padding:16px 18px;border-bottom:1px solid var(--border)}
  table.cmp:not(.sw) tr:last-child{border-bottom:0}
  table.cmp:not(.sw) th,table.cmp:not(.sw) td{border:0;padding:0;width:auto}
  table.cmp:not(.sw) tbody th{color:var(--text);font-weight:600;font-size:15px}
  table.cmp:not(.sw) td{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:10px;background:none}
  table.cmp:not(.sw) td::before{content:attr(data-l);font-size:13px;font-weight:500;color:var(--text-faint)}
  table.cmp:not(.sw) td.hl::before{color:var(--accent)}
}
.sendrow .mono{text-transform:none;letter-spacing:0;font-family:var(--font-sans);font-size:13px;font-weight:500}

/* ---------- Live domain scan (site.js, POST /tools/domain-scan): result rendering, values as in site-v2.css ---------- */
.scanbox [data-scan]{display:grid;gap:10px;min-width:0}
.scanbox .row-in .btn[disabled]{opacity:.7;cursor:progress}
.scan-msg{font-size:14px;color:var(--text-muted);line-height:1.45}
.scan-msg:empty{display:none}
.scan-msg.err{color:var(--bad)}
.scan-res[hidden]{display:none}
.scan-res{min-width:0}
.scan-res .ex{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;color:var(--text-faint);margin-top:18px;letter-spacing:.07em;text-transform:uppercase}
.scan-res .ex::after{content:"";flex:1;height:1px;background:var(--border)}
.scan-res .ex:first-child{margin-top:4px}
.scan-res .who{font-size:14px;color:var(--text-muted);margin:10px 0 0;overflow-wrap:anywhere}
.scan-res .who b{color:var(--text);font-weight:600}
.scan-res .kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.scan-res .kpi{border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;background:var(--bg);min-width:0}
.scan-res .kpi b{font-family:var(--font-mono);font-size:28px;font-weight:600;display:block;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.scan-res .kpi b .u{font-family:var(--font-sans);font-size:18px;font-weight:500;color:var(--text-muted);margin-left:4px;letter-spacing:0}
.scan-res .kpi small{font-size:12px;color:var(--text-faint);display:block;margin-top:4px;line-height:1.4}
@media (max-width:479px){.scan-res .kpis{grid-template-columns:1fr}}
.sig{list-style:none;margin:10px 0 0;padding:0;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}
.sig li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:14px}
.sig li:last-child{border-bottom:0}
.sig .lbl{color:var(--text-muted)}
.sig .val{font-weight:500;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sig .val::before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:currentColor}
.sig .val.good{color:var(--ok)}
.sig .val.gap{color:var(--warn)}
.gaps{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.gaps li{position:relative;padding-left:16px;font-size:14px;line-height:1.45;color:var(--text-muted)}
.gaps li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:var(--r-pill);background:var(--warn)}
.bots{display:grid;gap:8px;margin-top:12px}
.bot{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg)}
.bot .av{width:28px;height:28px;border-radius:var(--r-pill);background:var(--support);color:var(--accent);display:grid;place-items:center;flex:none}
.bot .av svg{width:18px;height:18px}
.bot b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.bot span{display:block;font-size:14px;color:var(--text-muted);line-height:1.45;margin-top:2px}
.scan-cta{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:14px}
.scan-cta .btn{white-space:normal;height:auto;min-height:var(--btn-h);padding:8px 16px;text-align:center;line-height:1.3;max-width:100%}
.scan-cta small{font-size:12px;color:var(--text-faint)}

/* ---------- Contact form (site.js, POST /leads/inbound) ---------- */
.contact .contact-form{display:grid;gap:16px}
.contact .contact-form button[disabled]{opacity:.7;cursor:progress}
.form-msg{font-size:14px;line-height:1.45}
.form-msg:empty{display:none}
.form-msg.ok{color:var(--ok)}
.form-msg.err{color:var(--bad)}
.after{font-size:14px;color:var(--text-muted);line-height:1.5}
.after:empty{display:none}
.after b{color:var(--text);font-weight:600}
.after .tag{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-sm);font-size:12px;font-weight:500;margin:6px 6px 0 0}
.after .tag.good{background:var(--ok-soft);color:var(--ok)}
.after .tag.gap{background:var(--warn-soft);color:var(--warn)}
.hp-field{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Reviewer W18: with a result the right column grows long; the intro stays in view on desktop */
.scanbox:has(.scan-res:not([hidden])){align-items:start}
@media (min-width:1024px){.scanbox:has(.scan-res:not([hidden]))>div:first-child{position:sticky;top:calc(var(--nav-h) + var(--sp-4))}}

/* =====================================================================
   W19 (04.10.2026): one orchestrated motif "Pupillen-Orbit" (Imad: the pattern recurs, feels alive on scroll,
   rotating/pulsing together with logo and pattern). Built only from pattern A geometry (1.4px dots, pupil ring)
   and the original logo PNG; colours only via color-mix of --accent. Motion uses transform/opacity only;
   site.js sets --p (0..1, scroll progress of the element) for elements in view (IntersectionObserver + rAF).
   Without JS or with prefers-reduced-motion everything is static and fully visible.
   ===================================================================== */
:root{--orbit-a:calc(var(--pattern-m) * var(--pattern-hero-boost));--orbit-a-s:calc(var(--pattern-s) * 2)}
.orbit{position:absolute;pointer-events:none;aspect-ratio:1/1;--p:0;z-index:0}
.orbit svg{display:block;width:100%;height:100%;overflow:visible}
.orbit .o,.orbit .spin{transform-box:view-box;transform-origin:50% 50%}
.orbit .dots{fill:none;stroke:color-mix(in srgb,var(--accent) var(--orbit-a),transparent);stroke-width:2.8;stroke-linecap:round}
.orbit .hair{fill:none;stroke:color-mix(in srgb,var(--accent) var(--orbit-a),transparent);stroke-width:1}
.orbit .sweep{fill:none;stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:1.6;stroke-linecap:round}
.orbit .pr{fill:var(--bg);stroke:color-mix(in srgb,var(--accent) 80%,transparent);stroke-width:1.6}
.orbit .pd{fill:var(--accent)}
.sec.tint .orbit .pr{fill:var(--bg-tint)}
.orbit.soft .dots,.orbit.soft .hair{stroke:color-mix(in srgb,var(--accent) var(--orbit-a-s),transparent)}
.orbit.soft .sweep{stroke:color-mix(in srgb,var(--accent) 30%,transparent)}
/* scroll-linked rotation, each ring its own direction and speed */
.orbit .o1{transform:rotate(calc(var(--p) * 150deg))}
.orbit .o2{transform:rotate(calc(var(--p) * -110deg))}
.orbit .o3{transform:rotate(calc(var(--p) * 70deg))}
/* idle rotation (very slow), independent of scroll */
.orbit .s1{animation:orbitSpin 90s linear infinite}
.orbit .s2{animation:orbitSpin 140s linear infinite reverse}
.orbit .s3{animation:orbitSpin 200s linear infinite}
@keyframes orbitSpin{to{transform:rotate(360deg)}}
/* core: original logo mark with a pulsing pupil ring */
.orbit .core{position:absolute;inset:0;display:grid;place-items:center}
.orbit .core img{width:26%;height:auto}
.orbit .core .lg-b{display:none}
html[data-theme="light"] .orbit .core .lg-w{display:none}
html[data-theme="light"] .orbit .core .lg-b{display:block}
.orbit .pulse{position:absolute;left:35%;top:35%;width:30%;aspect-ratio:1/1;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent) 60%,transparent);opacity:0;animation:orbitPulse 4.8s var(--ease) infinite}
.orbit .pulse.d2{animation-delay:2.4s}
@keyframes orbitPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .orbit .spin,.orbit .pulse{animation:none}
  .orbit .pulse{opacity:.35;transform:scale(1.15)}
  .orbit .pulse.d2{display:none}
}

/* hero: the product frame sits in the "pupil" of the orbit; rings only show outside the opaque frame */
.hero{overflow:clip}
.hero-stage{position:relative;isolation:isolate}
.hero-stage>.frame,.hero-stage>.stage-note{position:relative;z-index:1}
.hero-stage .orbit{width:135%;left:-17.5%;top:50%;margin-top:-67.5%}
@media (max-width:1023px){.hero-stage .orbit{width:130%;left:-15%;margin-top:-65%}}

/* hero trust strip: four provable statements directly under the CTA */
.trust{list-style:none;margin:8px 0 0;padding:20px 0 0;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;max-width:620px}
.trust li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.trust .ic{width:20px;height:20px;color:var(--accent);margin-top:1px}
.trust b{display:block;font-size:15px;font-weight:600;line-height:1.35;color:var(--text)}
.trust span{display:block;font-size:13px;line-height:1.45;color:var(--text-muted)}
@media (max-width:480px){.trust{grid-template-columns:minmax(0,1fr);gap:12px}}
.cta-note{font-size:var(--fs-small);color:var(--text-muted)}
.hero .copy>.ctas{align-items:center;gap:12px 20px}
.textlink{font-weight:500;display:inline-flex;align-items:center;gap:6px}
.textlink .ic{width:16px;height:16px}

/* eyebrow pupil marker: static (F5 04.10.2026: max. 4 motion places per page, the heading pulse was one per section) */
.pm-mark{width:12px;height:12px;border-radius:50%;border:1.5px solid currentColor;position:relative;flex:none}
.pm-mark::after{content:"";position:absolute;inset:2px;border-radius:50%;background:currentColor}

/* pattern parallax on section backgrounds (S density): the dot layer drifts against the content */
.pattern.par{overflow:clip;--p:.5}
.pattern.par::before{inset:-64px 0;transform:translate3d(0,calc((var(--p) - .5) * -96px),0)}
@media (prefers-reduced-motion:reduce){.pattern.par::before{transform:none}}

/* three steps with a scroll-driven track (desktop) */
.steps3{position:relative;--p:0;--f:clamp(0,calc(var(--p) * 2.4 - .55),1)}
.steps3 .track{position:relative;height:28px;margin:0 0 var(--sp-6);display:none}
.steps3 .track::before{content:"";position:absolute;left:14px;right:14px;top:13px;height:2px;background:var(--border-strong);border-radius:2px}
.steps3 .fill{position:absolute;left:14px;right:14px;top:13px;height:2px;background:var(--accent);border-radius:2px;transform-origin:0 50%;transform:scaleX(var(--f))}
.steps3 .run{position:absolute;left:0;right:28px;top:0;height:28px;transform:translateX(calc(var(--f) * 100%))}
.steps3 .run i{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--bg-tint);border:2px solid var(--accent);display:block}
.steps3 .run i::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--accent)}
.js .steps3 .track{display:block}
@media (max-width:1023px){.js .steps3 .track{display:none}}
@media (prefers-reduced-motion:reduce){.steps3{--f:1}}
.steps3 ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.steps3 li{display:grid;gap:12px;align-content:start}
.steps3 .n{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px}
.steps3 h3{font-size:20px;line-height:1.3}
.steps3 p{color:var(--text-muted);font-size:15px}
.steps3 li.you{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:linear-gradient(180deg,var(--accent-soft),transparent 70%),var(--surface)}
@media (max-width:1023px){.steps3 ol{grid-template-columns:minmax(0,1fr)}}

/* objections ("assure"): emblem with logo core + five answers */
.assure{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--sp-12);align-items:center}
.emblem{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin-inline:auto}
.emblem .orbit{inset:0;width:100%;height:100%}
.objs{list-style:none;margin:0;padding:0;display:grid}
.objs li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--border)}
.objs li:first-child{padding-top:0}
.objs li:last-child{border-bottom:0;padding-bottom:0}
.objs .k{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:4px}
.objs b{display:block;font-size:17px;font-weight:600;line-height:1.35}
.objs p{color:var(--text-muted);font-size:15px;margin-top:4px}
@media (max-width:1023px){.assure{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}.emblem{max-width:240px}}

/* "start free" strip under the offer cards */
.zero{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:var(--sp-4);padding:16px 20px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:var(--r-lg)}
.zero b{font-weight:600}
.zero span{color:var(--text-muted);font-size:15px}

/* orbit placements outside the hero */
.sec.has-orbit{position:relative;overflow:clip;isolation:isolate}
.sec.has-orbit>.wrap{position:relative;z-index:1}
.sec .orbit.corner{width:380px;right:-40px;top:-30px}
@media (max-width:1023px){.sec .orbit.corner{display:none}}
.band .orbit{width:400px;right:-170px;bottom:-200px}
.band>div:not(.orbit){position:relative;z-index:1}

/* weeks with "you / we" lines (So arbeiten wir) */
.weeks .who{display:grid;gap:8px;margin:0;padding:12px 0 0;border-top:1px solid var(--border)}
.weeks .who div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px;font-size:15px;color:var(--text-muted)}
.weeks .who dt{font-family:var(--font-mono);font-size:var(--fs-meta);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);padding-top:3px}
.weeks .who dd{margin:0}
.datanote{font-size:14px;color:var(--text-muted)}
/* cards over an orbit get an opaque base so rings never run behind text */
.has-orbit .card,.has-orbit .where .row{background:linear-gradient(var(--surface),var(--surface)),var(--bg)}
/* start hero: trust strip lands in the first screen at 1280x800; rings fade out before the sample note */
@media (min-width:1024px){.hero:not(.page-hero){padding-block:56px 80px}.hero:not(.page-hero) .copy{gap:20px}}
.hero-stage .orbit{-webkit-mask-image:linear-gradient(#000 58%,transparent 76%);mask-image:linear-gradient(#000 58%,transparent 76%)}
/* data flow (So arbeiten wir): "Ihre Systeme" sits in the pupil of the orbit */
.where{position:relative;isolation:isolate}
.where>:not(.orbit){position:relative;z-index:1}
.where .orbit.ring-around{width:100%;left:0;top:50%;margin-top:-50%;-webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent);mask-image:radial-gradient(closest-side,#000 70%,transparent)}

.band .orbit{width:460px;right:-190px;bottom:-230px}
/* Reviewer W19: contrast on the highlighted step card (light 4.49 -> accent-strong), band orbit off on phones,
   hero orbit kept out of the text column at 1024-1199, idle animations paused off-screen (site.js sets .idle) */
html[data-theme="light"] .steps3 li.you .n{color:var(--accent-strong)}
@media (max-width:860px){.band .orbit{display:none}}
@media (min-width:1024px) and (max-width:1199px){.hero-stage .orbit{width:118%;left:-9%;margin-top:-59%}}
.orbit.idle .spin,.orbit.idle .pulse{animation-play-state:paused}

/* =====================================================================
   W22 (04.10.2026): entry offer card (Leistungen) and "KI und Kundendaten" comparison (So arbeiten wir).
   Static, no motion; tokens only. Entry background = same soft accent gradient as the existing .offer.feat card.
   ===================================================================== */
.entry{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--sp-8);padding:var(--sp-8);margin-bottom:var(--sp-4);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:linear-gradient(180deg,var(--accent-soft),transparent 60%),linear-gradient(var(--surface),var(--surface)),var(--bg)}
.entry .e-copy,.entry .e-buy{display:grid;gap:14px;align-content:start}
.entry h3{font-size:clamp(24px,2.6vw,30px);line-height:1.12}
.entry .e-buy{padding-left:var(--sp-8);border-left:1px solid var(--border)}
.entry .price{font-family:var(--font-mono);font-size:44px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.entry .price small{font-family:var(--font-sans);font-size:15px;font-weight:400;letter-spacing:0;color:var(--text-muted)}
.entry .e-buy .btn{width:100%}
.entry .textlink{font-size:15px}
@media (max-width:1023px){.entry{grid-template-columns:minmax(0,1fr);padding:var(--sp-6)}.entry .e-buy{padding-left:0;border-left:0;padding-top:var(--sp-6);border-top:1px solid var(--border)}}
.ki-cmp{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--sp-4);align-items:start}
.ki-cmp .card{display:grid;gap:16px;align-content:start}
.ki-cmp h3{font-size:19px;display:flex;align-items:center;gap:10px}
.ki-cmp h3 .ic{color:var(--accent)}
.ki-cmp .no h3 .ic{color:var(--text-faint)}
.ki-cmp .checks b{color:var(--text);font-weight:600}
.ki-cmp .yes{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ki-cmp .ki-risk,.ki-cmp .ki-proof{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;padding-top:14px;border-top:1px solid var(--border);font-size:14px;color:var(--text-muted)}
.ki-cmp .ki-risk .ic,.ki-cmp .ki-proof .ic{width:18px;height:18px;margin-top:2px}
.ki-cmp .ki-risk .ic{color:var(--text-faint)}
.ki-cmp .ki-proof .ic{color:var(--accent)}
@media (max-width:860px){.ki-cmp{grid-template-columns:minmax(0,1fr)}}