:root {

  --c-fin-s: #1E7A4E; --c-fin-w: #DCF0E5; --c-zeit-s: #9A6408; --c-zeit-w: #F9EDD0;
  --c-doku-s: #2B5FA3; --c-doku-w: #DFE9F7; --c-med-s: #7A3E9D; --c-med-w: #F0E4F8;
  --c-dat-s: #0E7490; --c-dat-w: #D9EEF4; --c-rech-s: #BC4B08; --c-rech-w: #FBE5D1;
  --c-sich-s: #5B50B8; --c-sich-w: #E7E4F8;

  --petrol-tint: #EBF2F6;
  --petrol-soft: #A8D4E8;
  --petrol-bright: #3A8DB5;
  --petrol-mid: #266A8C;
  --petrol: #1B4965;
  --petrol-dark: #16405A;
  --petrol-deep: #0D2233;
  --petrol-night: #081824;

  --ink: #0D1B24;
  --ink-soft: #3C5262;
  --body: #46555F;
  --muted: #59696F;

  --white: #FFFFFF;
  --paper: #FFFFFF;
  --off: #F6F8FA;
  --wash: #F2F6F8;
  --line: #E3E9ED;
  --line-strong: #CFDBE3;

  --green: #2E9E6B;
  --ok: #1F7A4D;
  --warn: #B4432F;
  --accent: #2C7A9B;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;


  --fs-0: .8125rem;
  --fs-1: .9375rem;
  --fs-2: 1.0625rem;
  --fs-3: clamp(1.18rem, .5vw + 1.05rem, 1.4rem);
  --fs-4: clamp(1.5rem, 1.4vw + 1.1rem, 1.9rem);
  --fs-5: clamp(1.9rem, 3.4vw, 2.7rem);
  --size-hero: clamp(2.15rem, 3.3vw + 0.75rem, 3.3rem);
  --size-h2: clamp(1.7rem, 2.6vw + 0.6rem, 2.5rem);
  --size-h3: clamp(1.12rem, 1vw + 0.9rem, 1.3rem);
  --size-lead: clamp(1.05rem, 0.5vw + 0.95rem, 1.2rem);


  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 72px;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(13,27,36,.05), 0 8px 24px rgba(13,27,36,.06);
  --shadow-lift: 0 12px 32px rgba(27,73,101,.16);
  --shadow-frame: 0 24px 64px rgba(13,34,51,.22);


  --motion-instant: 100ms;
  --motion-fast: 140ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --ease-standard: cubic-bezier(.2, .6, .2, 1);
  --ease-enter: cubic-bezier(0, .55, .45, 1);
  --ease-exit: cubic-bezier(.55, 0, 1, .45);
  --motion-distance-sm: 4px;
  --motion-distance-md: 12px;

  --motion: var(--motion-base);
  --ease: var(--ease-standard);

  --pad-section: clamp(56px, 9vw, 108px);
  --container: 1180px;
  --measure: 68ch;


  --header-h: 69px;
  --sticky-h: 69px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: .01ms; --motion-fast: .01ms;
    --motion-base: .01ms; --motion-slow: .01ms;
    --motion-distance-sm: 0px; --motion-distance-md: 0px;
  }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}


::view-transition-old(root) {
  animation: kuk-vt-out var(--motion-fast) var(--ease-exit) both;
}
::view-transition-new(root) {
  animation: kuk-vt-in var(--motion-base) var(--ease-enter) both;
}
@keyframes kuk-vt-out { to { opacity: 0; } }
@keyframes kuk-vt-in { from { opacity: 0; transform: translateY(var(--motion-distance-md)); } }


.site-header { view-transition-name: kuk-header; }
.site-header .brand { view-transition-name: kuk-brand; }


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--white);
  text-rendering: optimizeLegibility;

  overflow-wrap: anywhere;
}

table { overflow-wrap: normal; }
img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 640px) { h1, h2, h3, h4 { hyphens: auto; } }
h1 { font-size: var(--size-hero); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--size-h2); font-weight: 750; letter-spacing: -0.015em; }
h3 { font-size: var(--size-h3); font-weight: 650; }
p { margin: 0 0 1em; }
a { color: var(--petrol); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }


p a, li a, td a, dd a, figcaption a, .faq-body a { text-decoration: underline; text-underline-offset: 3px; }
.site-nav a,
.page-nav a,
.toc a,
.footer-col a,
.breadcrumb a,
.know-list a,
.art-list > li > a,
.art-sum-jump a,
.footer-legal a,
.wt-sublist a{ text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--petrol); color: #fff; }


.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 4.5vw, 40px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--petrol); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 400; }
.skip-link:focus { left: 0; }


:focus-visible {
  outline: 3px solid var(--petrol-bright); outline-offset: 2px; border-radius: 3px;
  box-shadow: 0 0 0 5px var(--white) !important;
}


.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 10px; border: 1.5px solid transparent;
  font-weight: 600; line-height: 1.2; text-decoration: none;

  text-align: center; max-width: 100%;
  padding: 13px 22px; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--petrol); color: #fff; box-shadow: 0 6px 18px rgba(27,73,101,.28); }
.btn-primary:hover { background: #16405A; box-shadow: 0 10px 24px rgba(27,73,101,.34); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn-ghost:hover { border-color: var(--petrol); }
.btn-sm { padding: 9px 16px; font-size: .92rem; }


.site-header {
  position: sticky; top: 0; z-index: 300;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled {
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(13,27,36,.04), 0 6px 22px rgba(13,27,36,.06);
}

.header-row {
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: clamp(16px, 2.4vw, 40px); row-gap: 8px;
  min-height: 68px;
}


.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 1 auto; min-width: 0; }
.brand:hover { text-decoration: none; }

.brand-mark { width: 36px; height: 36px; border-radius: 9px; background: var(--petrol); padding: 4px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 800; letter-spacing: .04em; color: var(--ink); font-size: .98rem; }
.brand-sub { font-size: .68rem; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }

.site-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  column-gap: clamp(6px, 1.5vw, 26px); row-gap: 6px;
  margin-left: auto; min-width: 0;
}

.site-nav > a:not(.btn) {
  position: relative; color: var(--body); font-weight: 550; font-size: .95rem;
  padding: 10px 2px; white-space: nowrap; border-radius: 4px;
}
.site-nav > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px;
  background: var(--petrol); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.site-nav > a:not(.btn):hover { color: var(--petrol); text-decoration: none; }
.site-nav > a:not(.btn):hover::after { transform: scaleX(1); }

.site-nav > a:not(.btn)[aria-current="page"] { color: var(--petrol); font-weight: 650; }
.site-nav > a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }

.site-nav .nav-cta { margin-left: clamp(4px, 1vw, 14px); }

.nav-toggle {
  display: none; align-items: center; gap: 8px; margin-left: auto; flex: none;
  background: none; border: 1px solid var(--line); border-radius: 10px;
  min-height: 44px; padding: 0 12px; color: var(--ink); font: inherit; font-weight: 600;
}
.nav-toggle:hover { border-color: var(--petrol); color: var(--petrol); }
.nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-toggle-bars span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


.section-nav {
  position: sticky; top: var(--header-h, 69px); z-index: 200;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.section-nav a {
  display: flex; align-items: center; white-space: nowrap; scroll-snap-align: start;
  min-height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: .89rem; font-weight: 550; color: var(--body);
  border: 1px solid transparent; transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
.section-nav a:hover { color: var(--petrol); background: var(--off); text-decoration: none; }
.section-nav a.is-current {
  color: var(--petrol); background: var(--petrol-tint);
  border-color: var(--petrol-soft); font-weight: 650;
}
@media (max-width: 900px) {

  .section-nav a { min-height: 38px; padding: 0 12px; font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .section-nav a { transition: none; } }



.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); }

.hero h1 { text-wrap: balance; }

.arch-diagram { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.arch-col { display: grid; gap: var(--s2); }
.arch-clients { gap: var(--s1); }
.arch-node { border: 1px solid var(--ink-soft); border-radius: var(--radius-sm); background: var(--wash); padding: 10px 14px; font-size: var(--fs-1); color: var(--body); text-align: center; }
.arch-node-main { border-color: var(--petrol); background: var(--petrol-tint); color: var(--ink); font-weight: 650; padding: var(--s3) var(--s4); border-radius: var(--radius); }
.arch-node-main span { display: block; font-weight: 400; color: var(--body); font-size: var(--fs-0); margin-top: 4px; }
.arch-node-optional { border-style: dashed; color: var(--muted); }
.arch-arrow { color: var(--muted); font-size: var(--fs-2); }
.arch-external { text-align: center; }
.arch-arrow-down { display: block; font-size: var(--fs-0); margin-bottom: 6px; }
@media (max-width: 720px) { .arch-diagram { flex-direction: column; align-items: stretch; } .arch-arrow { transform: rotate(90deg); text-align: center; } .arch-arrow-down { transform: none; } }



.schema { margin: var(--s5) 0 0; }
.schema figcaption { margin-top: var(--s3); max-width: 62ch; color: var(--muted); font-size: var(--fs-0); }


.schema-kette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.schema-glied { position: relative; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); padding: var(--s3) var(--s4) var(--s4); }

.schema-glied:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: calc(-1 * var(--s5) / 2); color: var(--petrol-mid); font-size: var(--fs-2); line-height: 1; transform: translate(50%, -50%); }
.schema-glied--ziel { border-color: var(--petrol); background: var(--petrol-tint); }

.schema .schema-rolle { margin: 0 0 var(--s2); max-width: none; font-size: var(--fs-0); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--petrol-mid); }
.schema .schema-zeile { margin: 0; max-width: none; color: var(--ink); font-weight: 600; }
.schema .schema-quelle { margin: 4px 0 0; max-width: none; color: var(--muted); font-size: var(--fs-1); }

.schema-buendel { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--paper); padding: var(--s4); }
.schema .schema-kopf { max-width: none; border-bottom: 1px solid var(--line); padding-bottom: var(--s3); margin: 0 0 var(--s3); }
.schema-kopf b { display: block; color: var(--ink); font-size: var(--fs-3); }
.schema-teile { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); margin: 0; padding: 0; list-style: none; }
.schema-teile li { min-width: 0; border-left: 2px solid var(--petrol-soft); padding-left: var(--s3); }



@media (max-width: 980px) {
  .schema-teile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
}
@media (max-width: 760px) {
  .schema-kette, .schema-teile { grid-template-columns: 1fr; gap: var(--s3); }

  .schema-glied:not(:last-child)::after { content: "↓"; top: auto; right: auto; bottom: calc(-1 * var(--s3) / 2 - 2px); left: 50%; transform: translate(-50%, 50%); }
  .schema-kette { gap: var(--s4); }
}


@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .schema-glied { animation: kuk-lift var(--motion-slow) var(--ease-enter) both; animation-timeline: view(); animation-range: entry 20% entry 85%; }
    .schema-glied:nth-child(2) { animation-range: entry 26% entry 90%; }
    .schema-glied:nth-child(3) { animation-range: entry 32% entry 95%; }
    .schema-glied:nth-child(4) { animation-range: entry 38% entry 100%; }
    .schema-glied:nth-child(5) { animation-range: entry 44% entry 100%; }
  }
}




.section { padding-block: var(--pad-section); }
.kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--petrol-mid); margin-bottom: 12px;
}
.section-lead { font-size: var(--size-lead); }


.mod-group + .mod-group { margin-top: clamp(28px, 4vw, 44px); }



.page-nav { margin: 24px 0 0; }
.page-nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.page-nav a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 15px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: #fff; font-size: .9rem; font-weight: 550; color: var(--ink-soft);
}
.page-nav a:hover { color: var(--petrol); border-color: var(--petrol-soft); text-decoration: none; }

.section[id], [id].article-hero { scroll-margin-top: calc(var(--sticky-h) + 16px); }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; margin-bottom: 12px; box-shadow: var(--shadow-card); }
.faq-item summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 22px; font-weight: 650; color: var(--ink); cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 22px; height: 22px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M6 9l5 5 5-5" stroke="%231B4965" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-body { padding: 0 22px 20px; font-size: .97rem; }
.faq-body p { margin-bottom: .6em; }
.faq-body p:last-child { margin-bottom: 0; }


.site-footer {
  background: var(--petrol-night); color: #93A9B8;
  padding: clamp(48px, 6vw, 80px) 0 26px; font-size: .92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) repeat(4, minmax(140px, 1fr));
  gap: clamp(24px, 3.2vw, 44px);
  padding-bottom: clamp(32px, 4vw, 48px);
}
.footer-brand .brand-static { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand .brand-name { color: #fff; }
.footer-brand .brand-sub { color: #6E8595; }
.footer-brand p { margin: 16px 0 0; max-width: 34em; line-height: 1.6; }
.footer-head {
  font-weight: 700; color: #fff; font-size: .82rem;
  letter-spacing: .09em; text-transform: uppercase; margin: 0 0 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 5px 0; }
.site-footer a { color: #93A9B8; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:focus-visible, .footer-legal-btn:focus-visible {
  outline: 2px solid var(--petrol-soft); outline-offset: 3px; border-radius: 3px;
}
.footer-base {
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; font-size: .85rem;
}
.footer-copy { margin: 0; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: center; }
.footer-legal li { padding: 0; }
.footer-legal-btn { background: none; border: 0; color: #93A9B8; padding: 0; font: inherit; }
.footer-legal-btn:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1060px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
}


.cookie-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 350;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -12px 40px rgba(13,27,36,.14);
  transform: translateY(105%); opacity: 0;

  transition: transform var(--motion-slow) var(--ease-standard),
              opacity var(--motion-slow) var(--ease-standard);
}
.cookie-banner.is-open { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: none; }
}
.cookie-inner { max-width: var(--container); margin-inline: auto; padding: 18px clamp(18px, 4.5vw, 40px); display: grid; gap: 10px; }
.cookie-text { font-size: .9rem; margin: 0; }
.cookie-categories { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .86rem; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.cookie-btn-accept,
.cookie-btn-decline { background: #fff; color: var(--petrol); border: 1.5px solid var(--petrol); border-radius: 9px; padding: 10px 18px; font-weight: 600; min-width: min(11rem, 100%); text-align: center; }
.cookie-btn-selection { background: var(--petrol); color: #fff; border: 0; border-radius: 9px; padding: 10px 18px; font-weight: 600; }
.cookie-details { margin: 0; }
.cookie-details:not([hidden]) { display: grid; gap: 10px; padding-top: 4px; }
.cookie-details-toggle { background: none; border: 0; color: var(--petrol); font-weight: 600; padding: 10px 6px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cookie-details-toggle::after { content: " \25be"; text-decoration: none; display: inline-block; transition: transform .2s ease; }
.cookie-details-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.cookie-link { font-size: .84rem; }



@keyframes kuk-rise {
  from { opacity: 0; transform: translateY(var(--motion-distance-md)); }
}



body[data-motion="product"] .hero h1,
body[data-motion="product"] .article-hero h1,
body[data-motion="product"] .hero .lead,
body[data-motion="product"] .article-hero .section-lead,
body[data-motion="product"] .hero-ctas {
  animation: kuk-rise var(--motion-slow) var(--ease-enter) backwards;
}
body[data-motion="product"] .hero .lead,
body[data-motion="product"] .article-hero .section-lead { animation-delay: 60ms; }
body[data-motion="product"] .hero-ctas { animation-delay: 120ms; }


@supports (animation-timeline: view()) {
  body[data-motion="product"] .cta-final .btn-primary {
    animation: kuk-lift var(--motion-slow) var(--ease-enter) both;
    animation-timeline: view();
    animation-range: entry 20% entry 80%;
  }
}
@keyframes kuk-lift { from { transform: translateY(var(--motion-distance-md)); } }


.toc a { transition: color var(--motion-fast) var(--ease-standard); }
.toc a.is-current { color: var(--petrol); font-weight: 650; }
.toc a.is-current::after {
  content: ""; flex: none; align-self: stretch; width: 3px; margin-left: auto;
  background: var(--petrol); border-radius: 2px;
}


.copy-anchor {
  background: none; border: 0; padding: 2px 6px; margin-left: 8px;
  color: var(--muted); font-size: .7em; font-weight: 600; line-height: 1;
  opacity: 0; transition: opacity var(--motion-fast) var(--ease-standard),
                          color var(--motion-fast) var(--ease-standard);
}
.prose h2:hover .copy-anchor, .copy-anchor:focus-visible { opacity: 1; }
.copy-anchor:hover { color: var(--petrol); }
.copy-anchor[data-state="ok"] { opacity: 1; color: var(--ok); }



body[data-motion="tool"] .wt-app[hidden] { display: none; }
.wt-chip { transition: background-color var(--motion-fast) var(--ease-standard),
                       border-color var(--motion-fast) var(--ease-standard),
                       color var(--motion-fast) var(--ease-standard); }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body[data-motion="product"] .hero h1,
body[data-motion="product"] .article-hero h1,
body[data-motion="product"] .hero .lead,
body[data-motion="product"] .article-hero .section-lead,
body[data-motion="product"] .hero-ctas,
body[data-motion="product"] .cta-final .btn-primary {
    animation: none;
  }
  .btn, .section-nav a, .copy-anchor { transition: none; }
  .btn:hover { transform: none; }}


.article-hero { padding: clamp(36px, 5vw, 64px) 0 clamp(24px, 3vw, 40px); background: linear-gradient(180deg, var(--petrol-tint), #fff 70%); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--petrol); }
.article-hero h1 { max-width: 22em; text-wrap: balance; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .88rem; color: var(--muted); margin-top: 14px; }
.article-meta strong { color: var(--ink); font-weight: 600; }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: clamp(28px, 4vw, 64px); align-items: start; padding-block: clamp(28px, 4vw, 48px); }
.toc { position: sticky; top: 96px; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: #fff; box-shadow: var(--shadow-card); }
.toc-title { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--petrol-mid); margin: 0 0 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { padding: 5px 0; font-size: .9rem; }
.toc a { color: var(--body); display: flex; gap: 8px; }
.toc a::before { counter-increment: toc; content: counter(toc, decimal-leading-zero); color: var(--petrol-soft); font-weight: 700; font-size: .8rem; margin-top: 1px; flex-shrink: 0; white-space: nowrap; }
.toc a:hover { color: var(--petrol); text-decoration: none; }

.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.6em; scroll-margin-top: calc(var(--sticky-h) + 28px); }
.prose h2 .prose h3 { margin-top: 1.3em; }

.prose ul:not([class]) { list-style: none; margin: 0 0 1.2em; }
.prose ul:not([class]) li { position: relative; padding: 4px 0 4px 26px; }
.prose ul:not([class]) li::before { content: ""; position: absolute; left: 2px; top: 12px; width: 14px; height: 8px; border-left: 2px solid var(--petrol-bright); border-bottom: 2px solid var(--petrol-bright); transform: rotate(-45deg) scale(.8); border-radius: 1px; }
.prose ol:not([class]) { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose ol:not([class]) li { padding: 4px 0; }

.info-box { display: flex; gap: 14px; border-radius: var(--radius); padding: 16px 18px; margin: 1.4em 0; font-size: .96rem; border: 1px solid var(--line); background: var(--off); }
.info-box > svg { flex: none; margin-top: 2px; stroke: var(--petrol); }
.info-box strong { color: var(--ink); }
.info-box-tip { background: var(--petrol-tint); border-color: rgba(27,73,101,.25); }
.info-box-warn { background: #FDF6E9; border-color: #E8D3A8; }
.info-box-warn > svg { stroke: #A87718; }
.info-box p { margin: 0; }
@media (max-width: 900px) {
  .figure-scroll svg { min-width: 700px; }
}

.prose-table-wrap { overflow-x: auto; margin: 1.4em 0; }
.prose table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .94rem; box-shadow: var(--shadow-card); }
.prose th, .prose td { padding: 11px 14px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.prose thead th { border-top: 0; background: var(--off); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }

.article-cta { border-radius: var(--radius-lg); background: var(--petrol-deep); color: #C6D6E0; padding: clamp(24px, 3.5vw, 40px); margin: 2.2em 0; }
.article-cta h2, .article-cta h3 { color: #fff; margin-top: 0; }
.article-cta p { color: #B9CBD8; }
.article-cta .art-next-note { margin: 18px 0; padding: 14px 16px; border-left: 3px solid var(--orange); border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, .07); color: #DCE8EF; }
.article-cta .art-next-note strong { color: #fff; }
.article-cta .btn { margin-top: 6px; }

.related { margin-top: clamp(32px, 5vw, 56px); }
.related h2 { font-size: 1.3rem; }

@media (max-width: 900px) {

  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; order: -1; }
}


@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 290;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch;
    column-gap: 0; row-gap: 0; justify-content: flex-start;
    margin-left: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(13,27,36,.16);
    padding: 6px clamp(18px, 4.5vw, 40px) 20px;
    transform: translateY(-14px); opacity: 0; visibility: hidden;
    transition: transform var(--motion) var(--ease), opacity var(--motion) var(--ease), visibility var(--motion);
    max-height: 80dvh; overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .site-nav > a:not(.btn) {
    padding: 15px 2px; border-bottom: 1px solid var(--off);
    font-size: 1.05rem; min-height: 48px; display: flex; align-items: center;
  }
  .site-nav > a:not(.btn)::after { bottom: 6px; }
  .site-nav .nav-cta {
    margin: 18px 0 0; justify-content: center; min-height: 50px; border-bottom: 0;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .site-nav { transition: none; }
}




.art-sum { margin: 0 0 clamp(26px, 3.4vw, 40px);
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(44, 122, 155, .045), rgba(44, 122, 155, 0) 70%), #fff; }
.art-sum > h2 { font-size: var(--fs-2); margin: 0 0 .6em; }
.art-sum ul { margin: 0 0 .9em; padding-left: 1.1em; }
.art-sum li { margin-bottom: .35em; font-size: .97rem; }
.art-sum-meta { display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin: 0 0 .9em; padding-bottom: .8em;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-0); color: var(--muted); }
.art-sum-meta b { color: var(--ink-soft); font-weight: 600; }
.art-sum-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.art-sum-jump li { margin: 0; }
.art-sum-jump a { display: inline-block; padding: 5px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-0); color: var(--ink-soft); text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard); }
.art-sum-jump a:hover, .art-sum-jump a:focus-visible { border-color: var(--accent); color: var(--accent); }
.art-inset { margin: clamp(22px, 2.8vw, 32px) 0;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.2vw, 24px);
  border-radius: var(--radius);
  background: #F7FAFB; border: 1px solid var(--line);
  border-left: 3px solid var(--ink-soft); }
.art-inset > :last-child { margin-bottom: 0; }
.art-inset-label { display: block; margin: 0 0 .45em;
  font-size: var(--fs-0); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); }
.art-inset p { font-size: 1.02rem; }
.art-inset[data-variant="achtung"] { border-left-color: #B4551F; background: #FDF7F2; }
.art-inset[data-variant="achtung"] .art-inset-label { color: #8F441A; }
.art-inset[data-variant="definition"] { border-left-color: var(--accent); background: #F5FAFC; }
.art-inset[data-variant="definition"] .art-inset-label { color: var(--accent); }
.art-facts { margin: clamp(22px, 2.8vw, 32px) 0; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.art-facts > div { display: grid; grid-template-columns: 1fr;
  gap: 2px 18px; padding: 12px clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--line); }
.art-facts > div:first-child { border-top: 0; }
.art-facts > div:nth-child(odd) { background: #FAFCFD; }
.art-facts dt { font-weight: 700; font-size: var(--fs-1); color: var(--ink-soft); margin: 0; }
.art-facts dd { margin: 0; font-size: .98rem; }
@media(min-width: 620px) {
  .art-facts > div { grid-template-columns: minmax(9rem, 15rem) 1fr; align-items: baseline; }
}
.art-steps { counter-reset: schritt; margin: clamp(22px, 2.8vw, 32px) 0; padding: 0; list-style: none; }
.art-steps > li { counter-increment: schritt; position: relative;
  padding: 0 0 clamp(18px, 2.2vw, 24px) clamp(44px, 5vw, 56px); }
.art-steps > li::before { content: counter(schritt); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent); color: #fff;
  font-size: var(--fs-0); font-weight: 700; font-variant-numeric: tabular-nums; }
.art-steps > li::after { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 4px;
  width: 1px; background: var(--line-strong); }
.art-steps > li:last-child { padding-bottom: 0; }
.art-steps > li:last-child::after { display: none; }
.art-steps h3, .art-steps > li > b:first-child { display: block; font-size: var(--fs-2); margin: 4px 0 .35em; color: var(--ink); }
.art-steps p { margin: 0 0 .5em; }
.art-steps .schritt-ergebnis { display: block; margin-top: .4em; font-size: var(--fs-1); color: var(--muted); }
.art-steps .schritt-ergebnis b { color: var(--ink-soft); font-weight: 600; }
.art-cmp { margin: clamp(22px, 2.8vw, 32px) 0; }
.art-cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
  -webkit-overflow-scrolling: touch; }
.art-cmp-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.art-cmp table { width: 100%; border-collapse: collapse; min-width: 30rem; font-size: .96rem; }
.art-cmp th, .art-cmp td { padding: 11px clamp(12px, 1.6vw, 18px); text-align: left; vertical-align: top;
  border-top: 1px solid var(--line); }
.art-cmp thead th { border-top: 0; background: #F4F8FA; font-size: var(--fs-1);
  color: var(--ink); position: sticky; top: 0; }
.art-cmp tbody th { font-weight: 600; color: var(--ink-soft); width: 34%; }
.art-cmp caption { caption-side: top; text-align: left; margin-bottom: .6em;
  font-size: var(--fs-1); color: var(--muted); }
.fn-ref { font-size: .72em; vertical-align: super; line-height: 0;
  padding: 0 .12em; font-weight: 700; text-decoration: none;
  color: var(--accent); }
.fn-ref:hover, .fn-ref:focus-visible { text-decoration: underline; }
.art-fn { margin: clamp(26px, 3vw, 38px) 0 0; padding-top: clamp(16px, 2vw, 22px); border-top: 1px solid var(--line); }
.art-fn > h2 { font-size: var(--fs-2); }
.art-fn ol { margin: 0; padding-left: 1.3em; font-size: var(--fs-1); color: var(--muted); }
.art-fn li { margin-bottom: .5em; }
.art-fn li:target { background: #FFF6D8; scroll-margin-top: 90px; }
.art-fn a { color: var(--accent); }
.art-next { margin: clamp(26px, 3.2vw, 38px) 0 0; padding: clamp(18px, 2.4vw, 26px);
  border-radius: var(--radius); border: 1px solid var(--line);
  background: linear-gradient(135deg, #F4F9FB, #FFF); }
.art-next > h3 { font-size: var(--fs-3); margin: 0 0 .4em; color: var(--ink); }
.art-next p { margin: 0 0 .9em; color: var(--ink-soft); }

.art-next.article-cta h2,
.art-next.article-cta h3 { color: var(--ink); }
.art-next.article-cta p { color: var(--ink-soft); }

.art-next.article-cta .art-next-note {
  background: var(--petrol-tint); color: var(--ink-soft);
}
.art-next.article-cta .art-next-note strong { color: var(--ink); }
.art-next-actions { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.art-next-link { color: var(--petrol); font-weight: 700; }
@media print {.art-sum,
.art-inset,
.art-facts,
.art-next{ background: none !important; box-shadow: none;
    break-inside: avoid; page-break-inside: avoid; }
  .art-sum-jump { display: none; }
  .art-cmp-scroll { overflow: visible; }
  .art-cmp table { min-width: 0; }
  .art-steps > li { break-inside: avoid; }
  .art-fn { break-before: auto; }
}
.art-rechtsgrundlagen { margin: clamp(18px, 2.2vw, 26px) 0; font-size: var(--fs-1); }
.art-rechtsgrundlagen > summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); padding: 8px 0; }
.art-rechtsgrundlagen > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.art-rechtsgrundlagen ul { margin: .4em 0 0; padding-left: 1.2em; color: var(--muted); }
.art-rechtsgrundlagen li { margin-bottom: .4em; }
.art-rechtsgrundlagen a { color: var(--accent); }
@media print {
  .art-rechtsgrundlagen { display: block; }
  .art-rechtsgrundlagen > ul { display: block; }
}

.know-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.know-list li::before { content: "\2192"; color: var(--muted); margin-right: 8px; }

.art-hinweis { margin: clamp(18px, 2.4vw, 26px) 0; padding-left: 14px;
  border-left: 2px solid var(--line-strong); color: var(--body); font-size: .95rem; }


.home-page { background:#fff; color:var(--ink); }
.anchor-alias { display:block; height:0; overflow:hidden; }
.story-shell { width:min(1500px, calc(100% - clamp(40px, 6vw, 112px))); margin-inline:auto; }
.story-kicker,.story-index { margin:0 0 22px; color:var(--petrol-mid); font-size:.75rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.product-stage .story-kicker,.local-story .story-kicker,.story-closing .story-kicker { color:#a8d4e8; }
.story-lead { max-width:61ch; color:var(--body); font-size:clamp(1.08rem,1.35vw,1.28rem); line-height:1.65; }
.story-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:34px; }
.story-text-link { display:inline-flex; align-items:center; gap:8px; color:var(--petrol); font-weight:750; text-decoration:none; }
.story-text-link span { transition:transform .2s ease; }.story-text-link:hover span { transform:translateX(4px); }
.story-text-link--light { color:#a8d4e8; }
.story-note { margin:12px 0 0; color:var(--muted); font-size:.82rem; }

.story-hero { min-height:calc(100svh - var(--header-h)); display:flex; align-items:center; padding:clamp(64px,7vw,116px) 0 clamp(78px,8vw,132px); overflow:hidden; background:radial-gradient(circle at 83% 18%,#edf5f8 0,transparent 34%),#fff; }
.story-hero-grid { display:grid; grid-template-columns:minmax(0,.82fr) minmax(600px,1.18fr); align-items:center; gap:clamp(56px,7vw,128px); }
.story-hero-copy h1 { max-width:10.5ch; margin:0 0 30px; color:var(--petrol-deep); font-size:clamp(4rem,6.25vw,7.6rem); line-height:.93; letter-spacing:-.065em; }
.hero-workspace { position:relative; min-height:650px; perspective:1400px; }
.hero-window { position:absolute; inset:9% 0 8% 2%; overflow:hidden; border:1px solid #cddce4; border-radius:24px; background:#fff; box-shadow:0 42px 90px rgba(13,34,51,.18); transform:rotateY(-5deg) rotateX(1.5deg); }
.hero-window-bar { height:58px; display:flex; align-items:center; gap:7px; padding:0 20px; border-bottom:1px solid #dce6eb; background:#f8fafb; }
.hero-window-bar span { width:8px; height:8px; border-radius:50%; background:#cad8df; }.hero-window-bar strong { margin-left:13px; color:var(--petrol); font-size:.78rem; letter-spacing:.09em; }
.hero-window-body { display:grid; grid-template-columns:170px 1fr; min-height:500px; }
.hero-window-body nav { display:flex; flex-direction:column; gap:8px; padding:30px 18px; background:var(--petrol-deep); }
.hero-window-body nav i { padding:11px 14px; border-radius:8px; color:#96afbd; font-size:.8rem; font-style:normal; }.hero-window-body nav i.is-active { color:#fff; background:rgba(168,212,232,.14); }
.hero-today { padding:58px clamp(30px,4vw,72px); }.hero-today small { color:var(--muted); }.hero-today-title { display:block; margin:6px 0 32px; font-size:clamp(2.2rem,3vw,3.8rem); line-height:1.1; letter-spacing:-.04em; }
.hero-status { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:42px; }.hero-status span { min-height:100px; padding:18px; border:1px solid var(--line); border-radius:12px; color:var(--muted); font-size:.72rem; }.hero-status b { display:block; margin-bottom:10px; color:var(--petrol); font-size:1.8rem; }
.hero-line { width:78%; height:12px; margin:18px 0; border-radius:2px; background:#e8eef1; }.hero-line.is-long { width:100%; }.hero-line.is-short { width:48%; }
.hero-object { position:absolute; z-index:2; padding:13px 17px; border:1px solid #d4e1e7; border-radius:10px; background:#fff; color:var(--petrol-deep); box-shadow:0 16px 40px rgba(13,34,51,.14); font-size:.78rem; font-weight:720; }
.hero-object b { display:inline-grid; place-items:center; width:20px; height:20px; margin-left:8px; border-radius:50%; background:var(--petrol); color:#fff; font-size:.65rem; }.hero-object--mail { top:5%; right:4%; }.hero-object--doc { right:-2%; bottom:16%; }.hero-object--task { left:-2%; bottom:3%; }

.story-principle { padding:clamp(76px,7vw,118px) 0; overflow:hidden; background:#f4f7f8; }
.principle-heading { display:grid; grid-template-columns:.3fr 1.05fr .7fr; gap:clamp(30px,4.5vw,74px); align-items:start; }.principle-heading h2 { max-width:20ch; margin:0; font-size:clamp(2.3rem,3.2vw,3.25rem); line-height:1.06; letter-spacing:-.04em; }.principle-heading>p:last-child { margin:4px 0 0; color:var(--body); font-size:1.02rem; line-height:1.68; }
.request-flow { display:grid; grid-template-columns:minmax(240px,1fr) 76px minmax(250px,.9fr) 76px minmax(240px,1fr); align-items:center; gap:18px; margin-top:64px; }
.request-inbox,.request-done { position:relative; min-height:330px; }.request-chip,.request-done>span { position:absolute; display:grid; grid-template-columns:38px 1fr auto; align-items:center; gap:10px; width:min(330px,92%); padding:14px 15px; border:1px solid #cbdbe3; border-radius:10px; background:#fff; box-shadow:0 12px 26px rgba(13,34,51,.08); }.request-chip i { display:grid; place-items:center; width:36px; height:36px; border-radius:7px; background:#e7f0f4; color:var(--petrol); font-size:.7rem; font-style:normal; font-weight:850; }.request-chip b,.request-done b { overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.request-chip small,.request-done small { color:var(--muted); font-size:.63rem; }.request-chip--mail { top:4%; left:3%; transform:rotate(-3deg); }.request-chip--doc { top:31%; right:0; transform:rotate(2.5deg); }.request-chip--task { left:0; bottom:23%; transform:rotate(-1.5deg); }.request-chip--late { top:auto; right:5%; bottom:0; left:auto; transform:rotate(3.5deg); }
.request-inbox>p { position:absolute; top:-34px; left:4px; margin:0; color:var(--petrol-mid); font-size:.66rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.request-center { position:relative; z-index:2; display:flex; min-height:280px; flex-direction:column; align-items:center; justify-content:center; padding:30px; border:1px solid #c6dae4; border-radius:24px; background:var(--petrol-deep); box-shadow:0 24px 55px rgba(13,34,51,.18); color:#dce8ed; text-align:center; }.request-k { display:grid; place-items:center; width:46px; height:46px; margin-bottom:15px; border-radius:11px; background:#fff; color:var(--petrol); font-size:1.15rem; font-weight:900; }.request-center>small { color:#9fc4d4; font-size:.65rem; font-weight:850; letter-spacing:.1em; }.request-center>strong { margin:9px 0 18px; color:#fff; font-size:1.2rem; }.request-center>div { display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }.request-center>div span { padding:5px 8px; border:1px solid rgba(168,212,232,.2); border-radius:5px; color:#bed5df; font-size:.62rem; }.request-center>em { margin-top:18px; color:#8facba; font-size:.62rem; font-style:normal; }
.request-arrow { position:relative; height:1px; background:var(--line-strong); }.request-arrow:after { content:""; position:absolute; right:-1px; top:-4px; width:8px; height:8px; border-top:1px solid var(--petrol-mid); border-right:1px solid var(--petrol-mid); transform:rotate(45deg); }.request-arrow span { position:absolute; left:50%; bottom:11px; color:var(--muted); font-size:.62rem; transform:translateX(-50%); }
.request-arrow span { white-space:nowrap; }
.request-done>p { margin:0 0 10px; color:#49705f; font-size:.66rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.request-done>span { position:relative; grid-template-columns:38px 1fr; width:100%; margin-bottom:12px; box-shadow:none; }.request-done i { display:grid; grid-row:1/3; place-items:center; width:34px; height:34px; border-radius:50%; background:#dff1eb; color:#17624f; font-size:.9rem; font-style:normal; font-weight:900; }.request-done small { grid-column:2; }

.product-stage { padding:clamp(92px,8vw,132px) 0; background:var(--petrol-deep); color:#dfeaf0; }
.stage-heading { display:grid; grid-template-columns:1fr .48fr; gap:72px; align-items:end; margin-bottom:48px; }.stage-heading h2 { max-width:21ch; margin:0; color:#fff; font-size:clamp(2.35rem,3.35vw,3.35rem); line-height:1.06; letter-spacing:-.042em; }.stage-heading>p { max-width:46ch; color:#b5c8d2; line-height:1.68; }
.demo-frame { position:relative; overflow:hidden; min-height:784px; border:1px solid rgba(168,212,232,.24); border-radius:22px; background:#f7f9fa; color:var(--ink); box-shadow:0 40px 90px rgba(0,0,0,.27); }
.demo-topbar { height:64px; display:flex; align-items:center; gap:12px; padding:0 22px; border-bottom:1px solid #dce6eb; background:#fff; }.demo-brand { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:var(--petrol); color:#fff; font-weight:850; }.demo-topbar strong { font-size:.78rem; letter-spacing:.08em; }.demo-location { margin-left:16px; padding-left:20px; border-left:1px solid var(--line); color:var(--muted); font-size:.68rem; }.demo-control { margin-left:auto; width:42px; height:42px; border:1px solid var(--line-strong); border-radius:8px; background:#fff; color:var(--petrol); cursor:pointer; }
.demo-layout { display:grid; grid-template-columns:220px 1fr; min-height:720px; }.demo-sidebar { display:flex; flex-direction:column; gap:5px; padding:28px 17px; background:#102d40; }.demo-sidebar button { display:grid; grid-template-columns:24px 1fr auto; align-items:center; gap:8px; min-height:48px; padding:0 13px; border:0; border-radius:8px; background:transparent; color:#a9bfca; text-align:left; cursor:pointer; }.demo-sidebar button>span { display:grid; place-items:center; width:22px; height:22px; color:#79a3b6; }.demo-sidebar button>small { display:grid; min-width:20px; height:20px; place-items:center; border-radius:10px; background:rgba(255,255,255,.08); color:#b9ced8; font-size:.58rem; }.demo-sidebar button.is-active { background:rgba(168,212,232,.14); color:#fff; }
.demo-sidebar button.is-active>span { color:#fff; }
.demo-screen { position:relative; min-height:720px; overflow:hidden; padding:clamp(30px,3.7vw,54px); background:linear-gradient(135deg,#fff 0,#f1f5f7 100%); }.demo-view { display:none; }.demo-view.is-active { display:block; }.demo-eyebrow { margin:0 0 5px; color:var(--petrol-mid); font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.demo-view-head { display:flex; align-items:start; justify-content:space-between; gap:24px; margin-bottom:24px; }.demo-view-head>small,.demo-view-head>.demo-status { margin-top:5px; color:var(--muted); font-size:.68rem; }.demo-status { padding:6px 9px; border-radius:6px; background:#e5f0f4; color:var(--petrol)!important; }.demo-view h3 { margin:0; font-size:clamp(2rem,2.8vw,3rem); letter-spacing:-.045em; }
.demo-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:14px; }.demo-summary button { min-width:0; padding:14px; border:1px solid var(--line); border-radius:9px; background:#fff; text-align:left; cursor:pointer; }.demo-summary button:hover { border-color:#8db4c7; }.demo-summary small,.demo-summary span { display:block; overflow:hidden; color:var(--muted); font-size:.6rem; text-overflow:ellipsis; white-space:nowrap; }.demo-summary b { display:block; margin:7px 0 5px; color:var(--petrol); font-size:1.55rem; }
.demo-dashboard { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.demo-dashboard article { overflow:hidden; border:1px solid var(--line); border-radius:10px; background:#fff; }.demo-panel-head { display:flex; justify-content:space-between; gap:16px; padding:12px 14px; border-bottom:1px solid var(--line); background:#f8fafb; }.demo-panel-head strong { font-size:.72rem; }.demo-panel-head small { color:var(--muted); font-size:.6rem; }.demo-dashboard ul,.demo-dashboard ol { margin:0; padding:0; list-style:none; }.demo-dashboard li { display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--line); }.demo-dashboard li:first-child { border-top:0; }.demo-dashboard li>div { min-width:0; flex:1; }.demo-dashboard li b { display:block; overflow:hidden; font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }.demo-dashboard li small { color:var(--muted); font-size:.58rem; }.demo-dashboard li em { padding:3px 6px; border-radius:4px; background:#edf3f6; color:var(--petrol-mid); font-size:.55rem; font-style:normal; }.demo-dashboard .demo-wide { grid-column:1/-1; }.demo-dashboard time { width:44px; color:var(--petrol); font-size:.68rem; font-weight:800; }.demo-dot,.demo-check { flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:#3f91b5; }.demo-check { width:15px; height:15px; border:1px solid #7ba7ba; border-radius:4px; background:transparent; }
.demo-files,.demo-tasks { display:grid; gap:10px; max-width:900px; }.demo-file { display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:16px; width:100%; padding:15px 17px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; text-align:left; cursor:pointer; }.demo-file:hover,.demo-task:hover { border-color:#7aa8bc; box-shadow:0 8px 18px rgba(13,34,51,.07); }.demo-file>span { display:grid; place-items:center; width:48px; height:52px; border-radius:7px; background:#e8f0f4; color:var(--petrol); font-size:.67rem; font-weight:850; }.demo-file strong,.demo-file small { display:block; }.demo-file small { margin-top:3px; color:var(--muted); }.demo-file em,.demo-task em { padding:5px 8px; border-radius:5px; background:#edf3f6; color:var(--petrol-mid); font-size:.6rem; font-style:normal; }
.demo-review { display:grid; grid-template-columns:minmax(210px,.68fr) minmax(310px,1.15fr); gap:30px; }.demo-paper { min-height:390px; padding:34px; border:1px solid #d8e0e4; background:#fff; box-shadow:0 12px 30px rgba(13,34,51,.08); }.demo-paper>span { font-weight:850; }.demo-paper>small { float:right; color:var(--muted); }.demo-paper i { display:block; width:78%; height:7px; margin:21px 0; background:#e5ebee; }.demo-paper i.is-strong { width:42%; height:11px; margin-top:46px; background:#cad8df; }.demo-paper i:nth-of-type(3) { width:58%; }.demo-paper>div { display:flex; justify-content:space-between; margin-top:50px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:.7rem; }.demo-paper>div strong { color:var(--petrol); }.demo-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }.demo-meta label { display:block; padding:12px 14px; border:1px solid var(--line); border-radius:8px; color:var(--muted); font-size:.65rem; background:#fff; }.demo-meta label:first-child,.demo-meta label:last-of-type { grid-column:1/-1; }.demo-meta label strong { display:block; margin-top:4px; color:var(--ink); font-size:.82rem; }.demo-meta label em { float:right; padding:3px 5px; border-radius:4px; background:#e8f1f5; color:var(--petrol-mid); font-size:.54rem; font-style:normal; }.demo-confirm,.demo-next button { min-height:46px; padding:0 17px; border:0; border-radius:8px; background:var(--petrol); color:#fff; font-weight:750; cursor:pointer; }.demo-confirm { grid-column:1/-1; justify-self:start; }.demo-next { position:absolute; right:4%; bottom:4%; display:flex; align-items:center; gap:20px; padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:0 18px 44px rgba(13,34,51,.15); }.demo-next strong small { display:block; margin-top:3px; color:var(--muted); font-size:.62rem; font-weight:500; }.demo-next[hidden] { display:none; }
.demo-task { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:14px; width:100%; padding:16px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; text-align:left; cursor:pointer; }.demo-task>span { width:19px; height:19px; border:2px solid var(--petrol-mid); border-radius:5px; }.demo-task strong,.demo-task small { display:block; }.demo-task small { margin-top:4px; color:var(--muted); }
.demo-cursor { position:absolute; z-index:8; left:0; top:0; width:26px; height:34px; opacity:0; pointer-events:none; transform:translate(300px,210px); transition:transform 1s cubic-bezier(.22,.75,.24,1),opacity .25s; }.demo-cursor:before { content:""; position:absolute; width:0; height:0; border-top:22px solid #071822; border-right:14px solid transparent; filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); transform:rotate(-8deg); }.demo-cursor span { position:absolute; left:-7px; top:-7px; width:32px; height:32px; border:1px solid rgba(27,73,101,.25); border-radius:50%; opacity:0; }.demo-cursor.is-click span { animation:demo-click .5s ease-out; }.demo-caption { margin:18px 0 0; color:#9db4c0; font-size:.78rem; }

.story-outcomes { padding:clamp(88px,8vw,126px) 0; }.outcomes-layout { display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(48px,6vw,96px); align-items:stretch; }.human-moment { position:relative; min-width:0; margin:0; overflow:hidden; border-radius:18px; background:#e8eef1; }.human-moment picture,.human-moment img { display:block; width:100%; height:100%; }.human-moment img { object-fit:cover; }.human-moment figcaption { position:absolute; right:13px; bottom:12px; padding:6px 9px; border-radius:5px; background:rgba(13,34,51,.82); color:#dbe8ee; font-size:.62rem; }.human-moment--focus { min-height:720px; }.outcomes-copy { display:flex; flex-direction:column; justify-content:center; }.outcomes-head { margin-bottom:28px; }.outcomes-head h2 { max-width:12ch; margin:0 0 18px; font-size:clamp(2.3rem,3.2vw,3.1rem); line-height:1.05; letter-spacing:-.042em; }.outcomes-head>p:last-child { max-width:48ch; margin:0; color:var(--body); line-height:1.65; }.outcomes-grid { border-top:1px solid var(--line-strong); }.outcomes-grid article { display:grid; grid-template-columns:34px 1fr; gap:18px; padding:22px 0; border-bottom:1px solid var(--line-strong); }.outcomes-grid>article>span { padding-top:4px; color:var(--petrol-mid); font-size:.68rem; font-weight:800; }.outcomes-grid h3 { margin:0 0 7px; font-size:clamp(1.28rem,1.8vw,1.65rem); line-height:1.15; }.outcomes-grid p { max-width:42ch; margin:0 0 10px; color:var(--body); font-size:.92rem; }.outcomes-grid article small { display:block; color:var(--petrol-mid); font-size:.7rem; font-weight:700; letter-spacing:.02em; }
.document-story { padding:clamp(86px,7.5vw,122px) 0; background:#f1f5f7; }.document-grid { display:grid; grid-template-columns:.64fr 1.36fr; gap:clamp(46px,6vw,90px); align-items:center; }.document-grid h2 { max-width:14ch; margin:0 0 22px; font-size:clamp(2.3rem,3.2vw,3.15rem); line-height:1.06; letter-spacing:-.042em; }.document-copy>p:not(.story-kicker) { max-width:48ch; color:var(--body); line-height:1.68; }.document-workbench { display:grid; grid-template-columns:minmax(210px,.72fr) minmax(320px,1.28fr); gap:24px; padding:24px; border:1px solid #cbdbe3; border-radius:18px; background:#fff; box-shadow:0 24px 55px rgba(27,73,101,.1); }.flow-paper { min-height:430px; padding:27px; border:1px solid #d9e2e6; background:#fcfdfd; box-shadow:0 10px 24px rgba(13,34,51,.07); }.flow-paper>div:first-child { display:flex; justify-content:space-between; align-items:center; }.flow-paper>div:first-child span { padding:5px 7px; border-radius:4px; background:#e6eff3; color:var(--petrol); font-size:.62rem; font-weight:850; }.flow-paper small { color:var(--muted); font-size:.62rem; }.flow-paper>strong { display:block; margin:36px 0 30px; font-size:.86rem; }.flow-paper>i { display:block; width:78%; height:7px; margin:16px 0; background:#e4eaed; }.flow-paper>i.is-long { width:100%; }.flow-paper>i.is-short { width:55%; }.flow-paper dl { margin:52px 0 0; border-top:1px solid var(--line); }.flow-paper dl div { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }.flow-paper dt,.flow-paper dd { margin:0; font-size:.65rem; }.flow-paper dt { color:var(--muted); }.flow-paper dd { color:var(--petrol); font-weight:750; }.document-path { position:relative; margin:0; padding:0; list-style:none; }.document-path:before { content:""; position:absolute; left:18px; top:24px; bottom:24px; width:1px; background:#c5d7df; }.document-path li { position:relative; display:grid; grid-template-columns:38px 1fr auto; gap:13px; align-items:center; min-height:76px; padding:10px 0; border-bottom:1px solid var(--line); }.document-path li:last-child { border-bottom:0; }.document-path li>span { z-index:1; display:grid; place-items:center; width:36px; height:36px; border:1px solid #b9cfd9; border-radius:50%; background:#fff; color:var(--petrol-mid); font-size:.62rem; font-weight:850; }.document-path li.is-current>span { border-color:var(--petrol); background:var(--petrol); color:#fff; }.document-path strong,.document-path small { display:block; }.document-path strong { margin-bottom:3px; font-size:.82rem; }.document-path small { color:var(--muted); font-size:.66rem; }.document-path em { padding:4px 6px; border-radius:4px; background:#edf3f6; color:var(--petrol-mid); font-size:.56rem; font-style:normal; }

.local-story { padding:clamp(92px,8vw,132px) 0; overflow:hidden; background:#0b2435; color:#dce8ed; }.local-story-grid { display:grid; grid-template-columns:.68fr 1.32fr; gap:clamp(58px,7vw,112px); align-items:center; }.local-story h2 { max-width:12ch; margin:0 0 24px; color:#fff; font-size:clamp(2.5rem,3.6vw,3.55rem); line-height:1.02; letter-spacing:-.045em; }.local-story p:not(.story-kicker) { max-width:50ch; color:#bed0d9; line-height:1.68; }.local-online-note { padding-left:17px; border-left:2px solid #3a8db5; font-size:.84rem; }.local-visual { position:relative; display:grid; grid-template-rows:auto 1fr auto auto; min-height:570px; padding:30px; border:1px solid rgba(168,212,232,.2); border-radius:22px; background:linear-gradient(145deg,#102e42,#0e293b); box-shadow:0 26px 65px rgba(0,0,0,.2); }.local-network-label { display:flex; align-items:center; gap:9px; color:#91b4c4; font-size:.65rem; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }.local-network-label span { width:8px; height:8px; border-radius:50%; background:#63a9c7; box-shadow:0 0 0 4px rgba(99,169,199,.12); }.local-devices { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:end; margin:34px 0 18px; }.local-device { min-width:0; text-align:center; }.local-device strong,.local-device small { display:block; }.local-device strong { margin-top:13px; color:#d8e6ec; font-size:.72rem; }.local-device small { margin-top:2px; color:#789aaa; font-size:.6rem; }.device-art { position:relative; display:block; width:92px; height:61px; margin:auto; border:3px solid #9bb8c5; border-radius:7px; background:#173e55; box-shadow:inset 0 0 0 5px #123246,0 12px 24px rgba(0,0,0,.14); }.device-art:after { content:""; position:absolute; left:50%; bottom:-12px; width:31px; height:3px; border-radius:2px; background:#809eaa; transform:translateX(-50%); }.device-art i { position:absolute; left:50%; bottom:-10px; width:3px; height:9px; background:#809eaa; transform:translateX(-50%); }.device-art--laptop { width:96px; height:58px; }.device-art--laptop:after { left:-7px; bottom:-10px; width:110px; height:7px; border-radius:2px 2px 7px 7px; transform:none; }.device-art--laptop i { display:none; }.local-bus { position:relative; display:grid; grid-template-columns:repeat(3,1fr); height:34px; margin-inline:10%; border-bottom:1px solid #44778e; }.local-bus:after { content:""; position:absolute; left:50%; bottom:-34px; width:1px; height:34px; background:#44778e; }.local-bus i { justify-self:center; width:1px; height:34px; background:#44778e; }.local-hardware { display:flex; align-items:center; justify-self:center; gap:18px; min-width:300px; margin-top:34px; padding:17px 24px; border:1px solid #37647a; border-radius:13px; background:#12364c; box-shadow:0 15px 34px rgba(0,0,0,.18); }.hardware-art { position:relative; display:grid; width:58px; height:58px; place-items:end center; padding-bottom:10px; border:2px solid #9bb8c5; border-radius:10px; background:#0d293b; }.hardware-art i { display:block; width:30px; height:2px; margin-top:4px; background:#5e8698; }.hardware-art i:first-child { width:7px; height:7px; margin:0 0 4px auto; border-radius:50%; background:#65b394; }.local-hardware small,.local-hardware strong,.local-hardware em { display:block; }.local-hardware small { color:#80bbd2; font-size:.6rem; font-weight:850; letter-spacing:.08em; }.local-hardware strong { margin:4px 0 2px; color:#fff; }.local-hardware em { color:#8fabba; font-size:.65rem; font-style:normal; }.local-internet { position:absolute; right:24px; bottom:24px; display:flex; align-items:center; gap:9px; padding:9px 12px; border:1px dashed #3c7289; border-radius:8px; color:#9fcde1; }.local-internet>span { font-size:.9rem; }.local-internet strong,.local-internet small { display:block; }.local-internet strong { font-size:.65rem; }.local-internet small { color:#769bac; font-size:.55rem; }
.local-internet small { color:#86adbe; }

.areas-story { padding:clamp(88px,8vw,126px) 0; }.areas-layout { display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(46px,6vw,94px); align-items:stretch; }.areas-intro { display:grid; grid-template-columns:.28fr 1fr; gap:30px 40px; margin-bottom:40px; }.areas-intro h2 { max-width:14ch; margin:0; font-size:clamp(2.35rem,3.35vw,3.3rem); line-height:1.05; letter-spacing:-.043em; }.areas-intro>p:last-child { grid-column:2; max-width:52ch; margin:0; color:var(--body); line-height:1.65; }.areas-list { border-top:1px solid var(--line-strong); }.areas-list a { display:grid; grid-template-columns:.62fr 1fr 34px; align-items:center; min-height:82px; border-bottom:1px solid var(--line-strong); color:var(--ink); text-decoration:none; transition:padding .25s,background .25s; }.areas-list a:hover { padding-inline:14px; background:#f4f7f8; }.areas-list span { font-size:clamp(1.25rem,1.75vw,1.65rem); font-weight:720; letter-spacing:-.025em; }.areas-list small { color:var(--body); font-size:.84rem; }.areas-list b { color:var(--petrol-mid); font-size:.68rem; }.areas-more { margin:28px 0 0; }.human-moment--collab { min-height:760px; }.human-moment--collab img { object-position:52% center; }.photo-note { position:absolute; left:22px; right:22px; bottom:52px; padding:18px 20px; border-radius:10px; background:rgba(13,34,51,.9); color:#fff; }.photo-note span,.photo-note strong,.photo-note small { display:block; }.photo-note span { margin-bottom:7px; color:#a9d2e3; font-size:.6rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }.photo-note strong { margin-bottom:4px; font-size:1rem; }.photo-note small { color:#c4d6de; font-size:.68rem; }

.tools-story { padding:clamp(88px,8vw,126px) 0; background:#eaf2f6; }.tools-grid { display:grid; grid-template-columns:.62fr 1.38fr; gap:clamp(52px,7vw,112px); align-items:center; }.tools-copy h2 { max-width:13ch; margin:0 0 22px; font-size:clamp(2.35rem,3.35vw,3.3rem); line-height:1.04; letter-spacing:-.043em; }.tools-copy>p:not(.story-kicker) { max-width:48ch; color:var(--body); line-height:1.68; }.tool-facts { display:flex; gap:24px; margin-top:24px; padding-top:18px; border-top:1px solid #c7d9e2; }.tool-facts b,.tool-facts small { display:block; }.tool-facts b { font-size:.75rem; }.tool-facts small { margin-top:2px; color:var(--muted); font-size:.64rem; }.tools-copy .btn { margin-top:26px; }.tool-finder { padding:clamp(27px,3vw,42px); border:1px solid #cadbe3; border-radius:18px; background:#fff; box-shadow:0 25px 60px rgba(27,73,101,.11); }.tool-finder>label { display:block; margin-bottom:12px; color:var(--muted); font-size:.75rem; }.tool-search { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px; min-height:66px; padding:0 18px; border:2px solid var(--petrol); border-radius:9px; }.tool-search>span { font-size:1.45rem; }.tool-search strong { font-size:clamp(1.05rem,1.5vw,1.35rem); }.tool-search small { color:var(--muted); font-size:.65rem; }.tool-tabs { display:flex; flex-wrap:wrap; gap:7px; margin:22px 0 16px; }.tool-tabs button { min-height:38px; padding:0 13px; border:1px solid var(--line-strong); border-radius:7px; background:#fff; color:var(--body); cursor:pointer; }.tool-tabs button[aria-selected="true"] { border-color:var(--petrol); background:var(--petrol); color:#fff; }.tool-suggestions { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }.tool-suggestions a { position:relative; display:grid; grid-template-columns:42px 1fr 20px; grid-template-rows:auto auto; align-items:center; gap:3px 11px; min-height:94px; padding:14px; border:1px solid var(--line); border-radius:9px; color:var(--ink); text-decoration:none; transition:border-color .2s,transform .2s; }.tool-suggestions a:hover { border-color:var(--petrol-mid); transform:translateY(-2px); }.tool-icon { display:grid; grid-row:1/3; place-items:center; width:39px; height:44px; border-radius:6px; background:#e8f1f5; color:var(--petrol)!important; font-size:.6rem; font-weight:850; }.tool-suggestions strong { overflow:hidden; font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }.tool-suggestions small { color:var(--muted); font-size:.62rem; }.tool-suggestions a>b { grid-column:3; grid-row:1/3; color:var(--petrol-mid); }

.fit-story { padding:clamp(82px,7vw,112px) 0; }.fit-story-top { display:grid; grid-template-columns:1fr .8fr; gap:68px; align-items:end; }.fit-story h2 { max-width:15ch; margin:0; font-size:clamp(2.25rem,3vw,3rem); line-height:1.06; letter-spacing:-.04em; }.fit-story-top>p { max-width:52ch; color:var(--body); line-height:1.68; }.start-path { display:grid; grid-template-columns:repeat(4,1fr); margin-top:50px; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); }.start-path span { position:relative; padding:23px 20px; }.start-path span+span { border-left:1px solid var(--line-strong); }.start-path span:not(:last-child):after { content:"→"; position:absolute; right:-8px; color:var(--petrol-mid); }.fit-links { display:flex; gap:30px; margin-top:28px; }
.story-closing { padding:clamp(88px,7.5vw,122px) 0; background:var(--petrol-deep); color:#c4d5dd; }.story-closing-grid { display:grid; grid-template-columns:1.15fr .65fr; gap:clamp(60px,8vw,124px); align-items:end; }.story-closing h2 { max-width:16ch; margin:0; color:#fff; font-size:clamp(2.6rem,3.65vw,3.6rem); line-height:1.03; letter-spacing:-.045em; }.story-closing p { line-height:1.68; }.story-closing small { display:block; margin-top:14px; color:#91aab6; }

.areas-content { min-width:0; }
.demo-dot--mail { background:#3f91b5; }
.device-art--desktop { aspect-ratio:92/61; }
@keyframes demo-click { 0%{opacity:.7;transform:scale(.3)} 100%{opacity:0;transform:scale(1.25)} }
@keyframes hero-settle { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:translateY(0)} }
@keyframes request-arrive { from{translate:-18px 0} to{translate:0 0} }
@keyframes request-sort { from{translate:0 8px} to{translate:0 0} }
@keyframes request-finish { from{translate:16px 0} to{translate:0 0} }
@media (prefers-reduced-motion:no-preference) {
  .hero-object--mail{animation:hero-settle .7s .15s ease-out both}.hero-object--doc{animation:hero-settle .8s .3s ease-out both}.hero-object--task{animation:hero-settle .9s .45s ease-out both}
  .request-flow.is-flowing .request-chip { animation:request-arrive .65s cubic-bezier(.22,.75,.24,1) both; }
  .request-flow.is-flowing .request-chip--doc { animation-delay:.14s; }.request-flow.is-flowing .request-chip--task { animation-delay:.28s; }.request-flow.is-flowing .request-chip--late { animation-delay:.42s; }
  .request-flow.is-flowing .request-center { animation:request-sort .7s .62s cubic-bezier(.22,.75,.24,1) both; }
  .request-flow.is-flowing .request-done>span { animation:request-finish .62s .95s cubic-bezier(.22,.75,.24,1) both; }
  .request-flow.is-flowing .request-done>span:nth-child(2) { animation-delay:1.12s; }.request-flow.is-flowing .request-done>span:nth-child(3) { animation-delay:1.29s; }
}

@media (max-width:1100px) {
  .story-hero { min-height:auto; }.story-hero-grid,.stage-heading,.document-grid,.local-story-grid,.areas-layout,.tools-grid,.story-closing-grid { grid-template-columns:1fr; }.story-hero-grid { gap:30px; }.story-hero-copy h1 { max-width:12ch; }.hero-workspace { min-height:590px; }.stage-heading { gap:24px; }.stage-heading>p { max-width:58ch; }.outcomes-layout { grid-template-columns:1fr 1fr; gap:44px; }.human-moment--focus { min-height:650px; }.local-story-grid,.tools-grid { gap:58px; }.local-visual { max-width:820px; width:100%; margin-inline:auto; }.areas-layout { gap:54px; }.human-moment--collab { min-height:560px; }.tools-copy { display:grid; grid-template-columns:1fr 1fr; gap:16px 42px; align-items:end; }.tools-copy .story-kicker,.tools-copy h2,.tools-copy .tool-facts { grid-column:1/-1; }.tools-copy .btn { justify-self:start; }
}
@media (max-width:900px) {
  .story-shell { width:min(100% - 36px,1500px); }.story-hero { padding:54px 0 72px; }.story-hero-copy h1 { font-size:clamp(3rem,13vw,4.6rem); }.story-lead { font-size:1rem; }.hero-workspace { min-height:420px; }.hero-window { inset:7% 0 3%; transform:none; border-radius:17px; }.hero-window-bar { height:44px; }.hero-window-body { grid-template-columns:70px 1fr; min-height:340px; }.hero-window-body nav { padding:18px 8px; }.hero-window-body nav i { padding:9px 5px; font-size:.58rem; overflow:hidden; }.hero-today { padding:30px 20px; }.hero-today h2 { margin-bottom:20px; }.hero-status { grid-template-columns:1fr; gap:6px; }.hero-status span { min-height:auto; padding:10px; }.hero-status b { display:inline; margin-right:8px; font-size:1.1rem; }.hero-object--mail { top:0; right:3%; }.hero-object--doc { right:-1%; bottom:5%; }.hero-object--task { display:none; }
  .principle-heading { grid-template-columns:1fr; gap:16px; }.principle-heading h2,.stage-heading h2,.outcomes-head h2,.document-grid h2,.local-story h2,.areas-intro h2,.tools-copy h2,.fit-story h2,.story-closing h2 { font-size:clamp(2.15rem,8vw,2.8rem); }.principle-heading>p:last-child { max-width:58ch; }.story-principle,.product-stage,.story-outcomes,.document-story,.local-story,.areas-story,.tools-story,.fit-story,.story-closing { padding-block:68px; }
  .request-flow { grid-template-columns:1fr; gap:22px; margin-top:42px; }.request-inbox { width:min(520px,100%); min-height:300px; margin-inline:auto; }.request-arrow { width:1px; height:34px; margin:auto; background:var(--line-strong); }.request-arrow:after { right:-4px; top:auto; bottom:0; transform:rotate(135deg); }.request-arrow span { left:14px; bottom:8px; transform:none; }.request-center { width:min(460px,100%); min-height:240px; margin:auto; }.request-done { width:min(520px,100%); min-height:auto; margin:auto; }
  .demo-frame { min-height:704px; border-radius:15px; }.demo-layout { grid-template-columns:1fr; min-height:640px; }.demo-sidebar { display:grid; grid-template-columns:repeat(4,1fr); overflow:visible; padding:9px; }.demo-sidebar button { min-width:0; min-height:42px; padding-inline:9px; }.demo-screen { min-height:640px; padding:28px 20px; }.demo-view h3 { font-size:2rem; }.demo-summary { grid-template-columns:repeat(4,1fr); }.demo-dashboard { grid-template-columns:1fr 1fr; }.demo-review { grid-template-columns:.65fr 1fr; gap:16px; }.demo-paper { min-height:330px; padding:22px; }.demo-next { left:20px; right:20px; bottom:20px; flex-direction:column; align-items:stretch; }.demo-cursor { display:none; }
  .outcomes-layout { grid-template-columns:1fr; }.human-moment--focus { min-height:0; aspect-ratio:3/2; }.outcomes-grid article { grid-template-columns:32px 1fr; }.document-grid { gap:40px; }.document-workbench { max-width:820px; }.local-visual { min-height:520px; }.areas-intro { grid-template-columns:1fr; gap:14px; }.areas-intro>p:last-child { grid-column:1; }.areas-list a { grid-template-columns:.55fr 1fr 30px; }.tools-copy { display:block; }.tool-facts { max-width:420px; }.fit-story-top { grid-template-columns:1fr; gap:22px; }.start-path { grid-template-columns:1fr 1fr; }.start-path span:nth-child(3) { border-left:0; border-top:1px solid var(--line-strong); }.start-path span:nth-child(4) { border-top:1px solid var(--line-strong); }.start-path span:nth-child(2):after { display:none; }.fit-links { flex-direction:column; gap:14px; }.story-closing-grid { gap:38px; }
}
@media (max-width:430px) {
  .story-shell { width:calc(100% - 32px); }.story-hero-copy h1 { font-size:clamp(2.75rem,13.8vw,3.55rem); }.story-actions { align-items:stretch; }.story-actions .btn,.story-actions .story-text-link { width:100%; justify-content:center; }.hero-workspace { min-height:355px; }.hero-window-body { grid-template-columns:54px 1fr; }.hero-window-body nav i { font-size:0; }.hero-window-body nav i:before { content:"•"; font-size:1rem; }.hero-status span:nth-child(n+3) { display:none; }.hero-object { padding:10px 12px; font-size:.68rem; }.demo-frame { min-height:600px; }.demo-topbar { padding-inline:14px; }.demo-screen { padding:24px 14px; }.demo-dashboard { grid-template-columns:1fr; }.demo-dashboard article:nth-child(2) { display:none; }.demo-file { grid-template-columns:48px 1fr; }.demo-file small { grid-column:2; }.demo-review { grid-template-columns:1fr; }.demo-paper { display:none; }.local-visual { min-height:350px; }.start-path { grid-template-columns:1fr; }.start-path span+span { border-left:0; border-top:1px solid var(--line-strong); }.start-path span:after { display:none; }
  .principle-heading h2,.stage-heading h2,.outcomes-head h2,.document-grid h2,.local-story h2,.areas-intro h2,.tools-copy h2,.fit-story h2,.story-closing h2 { font-size:clamp(2rem,9.5vw,2.4rem); }.request-chip { width:96%; }.request-center { min-height:220px; }.demo-location { display:none; }.demo-screen { min-height:620px; padding:22px 13px; }.demo-view-head { gap:12px; margin-bottom:18px; }.demo-view-head>small,.demo-view-head>.demo-status { display:none; }.demo-summary { grid-template-columns:1fr 1fr; gap:7px; }.demo-summary button { padding:11px; }.demo-summary b { font-size:1.3rem; }.demo-dashboard { grid-template-columns:1fr; }.demo-dashboard article:nth-child(2),.demo-dashboard .demo-wide { display:none; }.demo-files { gap:7px; }.demo-file { grid-template-columns:42px 1fr auto; gap:10px; padding:11px; }.demo-file>span { width:40px; height:44px; }.demo-file em { display:none; }.demo-review { grid-template-columns:1fr; }.demo-paper { display:none; }.demo-meta { grid-template-columns:1fr; }.demo-meta label { grid-column:1!important; }.demo-next { padding:13px; }.human-moment figcaption { right:8px; bottom:8px; font-size:.56rem; }.human-moment--collab { min-height:0; overflow:visible; background:#fff; }.human-moment--collab picture,.human-moment--collab img { height:auto; aspect-ratio:3/2; object-fit:cover; }.photo-note { position:static; margin:10px 0 36px; }.areas-list a { grid-template-columns:1fr 28px; min-height:74px; padding:16px 0; }.areas-list small { grid-column:1; margin-top:4px; }.areas-list b { grid-column:2; grid-row:1/3; }.tool-search { grid-template-columns:24px 1fr; }.tool-search>small { display:none; }.tool-tabs { display:grid; grid-template-columns:1fr 1fr; }.tool-suggestions { grid-template-columns:1fr 1fr; }.tool-suggestions a { grid-template-columns:34px 1fr; min-height:84px; padding:10px; }.tool-icon { width:32px; height:38px; }.tool-suggestions a>b { display:none; }.tool-facts { gap:16px; }.local-visual { min-height:470px; padding:20px 14px; }.local-devices { gap:4px; }.device-art { width:64px; height:45px; }.device-art--laptop { width:68px; height:43px; }.device-art--laptop:after { width:78px; }.local-device strong { font-size:.6rem; }.local-hardware { min-width:0; width:100%; padding:14px; }.local-internet { right:12px; bottom:12px; }.start-path { grid-template-columns:1fr; }.start-path span+span { border-left:0; border-top:1px solid var(--line-strong); }.start-path span:after { display:none; }
}
@media (max-width:600px) {
  .demo-sidebar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; }
  .demo-sidebar button { min-width:0; width:100%; }
  .document-workbench { grid-template-columns:1fr; min-width:0; padding:13px; }
  .flow-paper { display:none; }
}
@media (prefers-reduced-motion:reduce) { .hero-object,.request-chip,.request-center,.request-done>span { animation:none!important; }.demo-cursor { display:none!important; }.story-text-link span,.areas-list a,.tool-suggestions a { transition:none!important; } }


.demo-screen { min-height:720px; overflow:hidden; }
@media (max-width:900px) {
  .demo-screen { min-height:640px; }
  .story-hero h1,.story-principle h2,.product-stage h2,.story-outcomes h2,.document-story h2,.local-story h2,.areas-story h2,.tools-story h2,.fit-story h2,.story-closing h2 { hyphens:none; overflow-wrap:normal; }
}
@media (hover:none), (pointer:coarse) { .demo-cursor { display:none!important; } }
@media (max-width:900px) { .hero-today-title { margin-bottom:20px; } }


.fit-section { background: var(--off); }

.fit-layout {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  gap: clamp(42px, 6vw, 80px);
  align-items: start;
}
.fit-columns { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); margin: 0; }
.fit-column {
  position: relative;
  min-width: 0;
  padding: 28px;
  border: 1px solid var(--petrol-soft);
  border-radius: var(--radius);
  background: var(--petrol-tint);
}

.fit-columns .fit-column {
  padding: var(--s3) 0 0;
  border: 0;
  border-top: 2px solid var(--petrol);
  border-radius: 0;
  background: none;
}
.fit-columns .fit-column.is-check { border-top-color: var(--muted); }
.fit-columns .fit-column.is-check .simple-list li::before {
  top: .92em;
  width: 11px; height: 2px;
  border: 0;
  border-radius: 0;
  background: var(--muted);
}
.fit-symbol { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 18px; border-radius: 50%; background: #fff; color: var(--petrol); font-weight: 850; }
.fit-column h3 { margin: 0; font-size: var(--fs-3); }
.simple-list { display: grid; gap: 11px; margin: 20px 0 0; }
.simple-list li { position: relative; padding-left: 20px; color: var(--ink-soft); }
.simple-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border: 2px solid var(--petrol-mid); border-radius: 50%; }
.fit-link { margin-top: 24px; }
.faq-list { border-top: 2px solid var(--petrol); }
.faq-item { border-bottom: 1px solid var(--line-strong); }
.faq-item summary { display: flex; align-items: center; min-height: 64px; padding: 12px 42px 12px 0; color: var(--ink); font-size: var(--fs-2); font-weight: 750; cursor: pointer; }
.faq-body { padding: 0 0 18px; color: var(--body); }


.product-section,
.day-section { background: var(--off); }
.module-section { background: #fff; }


.local-section { background: var(--petrol-night); color: #dce8ee; }
.local-section h2,
.local-section h3 { color: #fff; }
.local-section .kicker { color: #9fcde1; }
.local-section .home-link { color: #a8d4e8; }

@media (max-width: 920px) {
  .fit-layout { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
  .fit-columns { grid-template-columns: minmax(0, 1fr); }
  .fit-columns { gap: var(--s5); }
}