/* ==========================================================================
   Self-hosted typefaces
   ==========================================================================
   Inter and Source Serif 4, both SIL Open Font License 1.1 - see
   assets/fonts/LICENSE.md, which ships the full licence text as the OFL
   requires. Served from this origin so no visitor's browser contacts Google.
   That closes the site's last third-party request and lets the CSP drop both
   Google origins.

   Each family ships as ONE variable file per subset: the same file covers
   weights 400-700, so four files cover everything the site uses.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-serif-4-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   Clarowe — site stylesheet
   Ported from the Claude Design canvas (Clarowe *.dc.html, v2 series).
   Top bar, header and footer are shared chrome across every page; only the
   active nav item changes, via [aria-current="page"].
   ========================================================================== */

:root {
  --bg:            #FFFFFF;
  --ink:           #172B3A;
  --green:         #102A43;
  --green-dark:    #071D30;
  --teal:          #176879;
  --teal-light:    #B7D8E1;

  /* Teal for TEXT on the light ground. The decorative --teal is 4.23:1 on
     --bg, which clears the 3:1 needed for icons and borders but misses the
     4.5:1 that normal-size text needs — and the eyebrows are 13px semibold,
     which is not "large text". This darker step measures 4.98:1. Use --teal
     for marks and rules, --teal-text for anything readable. */
  --teal-text:     #176879;

  --text-muted:    #465D6D;
  --text-soft:     #526575;
  --text-body:     #334B5D;
  --text-nav:      #334B5D;

  --rule:          rgba(34, 34, 31, 0.12);
  --rule-strong:   rgba(34, 34, 31, 0.25);

  /* The boundary of a control, which is a different job from a decorative
     separator. WCAG 1.4.11 asks for 3:1 on the visual information needed to
     identify a component; --rule-strong measures about 1.9:1 on --bg, which is
     fine for a hairline between paragraphs and too faint for the only edge a
     transparent button has. #7C7C74 is 3.86:1 on --bg. It is used only on the
     five buttons that carry no fill, so the rules keep their lighter weight. */
  --control-border: #7C7C74;
  --card-bg:       #FFFFFF;
  --card-border:   #D7E0E7;

  --on-green:        #F7F5F0;
  --on-green-muted:  rgba(247, 245, 240, 0.75);
  --on-green-dim:    rgba(247, 245, 240, 0.6);
  --on-green-rule:   rgba(247, 245, 240, 0.15);

  --font-body:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Source Serif 4', Georgia, serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --shell:   1240px;
  --measure:  980px;
  --gutter:    24px;
}

/* --- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* WCAG 2.2 SC 2.4.11 (Focus Not Obscured). The header is sticky and opaque at
     68px, so a browser that satisfies Tab or Shift+Tab by aligning the target to
     the top of the scrollport puts a ~20px link entirely behind it — which is a
     failure, not a near miss. scroll-padding reserves the band on the scroller,
     which covers sequential focus as well as fragment jumps.

     There used to be a `[id]:target { scroll-margin-top: 120px }` rule doing the
     fragment half of this job. It is gone deliberately: scroll-padding on the
     scroller and scroll-margin on the target ADD, so keeping both would push
     every anchor 230px down the page and open a dead band under the header. */
  scroll-padding-top: 110px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--green); }
a:hover { color: var(--teal-text); }

::selection { background: rgba(74, 124, 140, 0.25); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 3px;
}

img, svg { max-width: 100%; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Skip link — keyboard users land here first. */
/* Present for assistive technology, absent visually. Used for the readiness
   live region, which announces a short verdict while the visible card shows the
   same verdict plus the detail a reader can take at their own pace. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--green);
  color: var(--on-green);
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
  color: #FFFFFF;
}
/* It lands on the dark green top bar, where the default teal ring measures
   2.67:1. A negative offset draws the ring inside the link's own green box, so
   all four edges are visible instead of two being clipped off-screen at the
   corner, and teal-light on green is 6.98:1. */
.skip-link:focus-visible {
  outline-color: var(--teal-light);
  outline-offset: -3px;
}

/* --- top bar ------------------------------------------------------------- */

.topbar { background: var(--green); }

.topbar__inner {
  padding-top: 9px;
  padding-bottom: 9px;
  display: flex;
  justify-content: flex-end;
  gap: 26px;
  flex-wrap: wrap;
}

.topbar__link {
  color: rgba(247, 245, 240, 0.85);
  text-decoration: none;
  font-size: 13.5px;
}
.topbar__link:hover { color: #FFFFFF; }

/* --- header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 245, 240, 0.93);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(34, 34, 31, 0.1);
}

/* min-height, not height: under the WCAG 1.4.12 text-spacing metrics the nav
   grew wider than the shell between 881px and about 1024px and ran off the
   right edge, taking the primary call to action with it. Wrapping onto a second
   row costs nothing at ordinary spacing, where it never triggers. */
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--green);
}
.brand__name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav-cluster {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 36px;
}

/* 20px, not 26px. The shell gives the header 1112px of content width; brand +
   gap + nav + gap + call to action came to 1116px once "YouTube Protection" and
   "Authorisation" joined the navigation, so at 1280px — the commonest desktop
   width there is — the header wrapped onto two rows on every page. Four pixels.
   Shortening a label would have cost more than this does: the navigation is the
   only place the reader is told, before scrolling, that this site is about
   YouTube and about authority. */
.nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.nav__link {
  text-decoration: none;
  color: var(--text-nav);
  font-size: 15px;
}
.nav__link:hover { color: var(--green); }
.nav__link[aria-current="page"] {
  color: var(--green);
  font-weight: 600;
}

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--green);
  color: var(--on-green);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 8px;
  white-space: nowrap;
}
.btn:hover {
  background: var(--green-dark);
  color: #FFFFFF;
}

.btn--block {
  display: block;
  text-align: center;
  font-size: 15px;
  padding: 13px 18px;
  margin-top: 12px;
  white-space: normal;
}

/* --- mobile menu --------------------------------------------------------- */

/* Hidden in the markup and revealed by the script. Without JavaScript the button
   does nothing, while announcing itself to assistive technology as a collapsed,
   expandable disclosure - a control that lies about what it will do. The footer
   carries four labelled groups covering every destination, so a reader without
   JavaScript still has a route; a dead button is not one.

   The [hidden] rule has to be here: the max-width media query below sets
   `display: block` and would otherwise beat the user-agent [hidden] rule. */
.nav-toggle[hidden] { display: none; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.nav-mobile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px var(--gutter) 20px;
  border-top: 1px solid rgba(34, 34, 31, 0.08);
  /* The panel lives inside a sticky header, so an open menu taller than the
     viewport pushes its own last items off-screen with nothing to scroll — a
     landscape phone at 390px of height against nine rows and a button reaches
     that easily. Bound the panel rather than the header: dropping `position:
     sticky` mid-interaction would move the page under the reader's finger.
     dvh second, as the progressive upgrade for browsers that have it. */
  max-height: calc(100vh - 68px);
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-mobile[hidden] { display: none; }

.nav-mobile__link {
  text-decoration: none;
  color: var(--ink);
  font-size: 16px;
  padding: 10px 0;
}
.nav-mobile__link[aria-current="page"] {
  color: var(--green);
  font-weight: 600;
}

/* The canvas swapped nav modes with matchMedia at 880px. CSS does it here so
   the right nav paints on the first frame — no JS dependency, no flash. */
@media (max-width: 880px) {
  .nav-cluster { display: none; }
  .nav-toggle  { display: block; }
}

/* Above the breakpoint the mobile panel must never show, even if a resize
   happened while it was open. */
@media (min-width: 881px) {
  .nav-mobile { display: none; }
}

/* --- page header --------------------------------------------------------- */

.page-header {
  padding-top: 84px;
  padding-bottom: 64px;
}

.eyebrow {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
}

/* The clamp minimum is in rem, so it grows with the reader's default font size.
   At 320px with a raised default, a long word in a display serif overflows the
   viewport and nothing else catches it. */
.page-title {
  overflow-wrap: break-word;
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--green);
  text-wrap: balance;
}
.page-title--tight { margin-bottom: 0; }

.lead {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 56ch;
  text-wrap: pretty;
}

/* --- cards --------------------------------------------------------------- */

.cards { padding-bottom: 72px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 20px;
  max-width: var(--measure);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 32px 30px;
}

.card__icon {
  display: block;
  margin-bottom: 18px;
}

.card__title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--green);
}

.card__note {
  margin: 16px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}

.card__address {
  font-style: normal;
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
}

.card__line {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-body);
}

/* Support hours and response target — supporting detail, not a headline. */
.card__note-inline {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
  text-wrap: pretty;
}

.link-underline {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-underline:hover { color: var(--teal-text); }

.link-lead {
  font-size: 17px;
  font-weight: 600;
}

/* --- illustration -------------------------------------------------------- */

.illustration { padding-bottom: 108px; }

.illustration__frame {
  max-width: var(--measure);
  border-top: 1px solid var(--rule);
  padding-top: 56px;
}

.illustration__art {
  display: block;
  width: 100%;
  height: auto;
}

/* --- footer -------------------------------------------------------------- */

.site-footer {
  background: var(--green);
  border-top: 1px solid var(--on-green-rule);
}

.site-footer__top {
  padding-top: 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 48px;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-brand__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--on-green);
}
.footer-tagline {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--on-green-dim);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 4px;
}
.footer-nav__link {
  text-decoration: none;
  color: var(--on-green-muted);
  font-size: 14px;
}
.footer-nav__link:hover { color: #FFFFFF; }

.site-footer__bottom {
  padding-top: 28px;
  padding-bottom: 36px;
}

.footer-legal {
  border-top: 1px solid var(--on-green-rule);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  align-items: center;
}

.footer-legal__address {
  margin: 0;
  font-size: 13.5px;
  color: var(--on-green-dim);
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}
.legal-nav__link {
  text-decoration: none;
  color: var(--on-green-dim);
  font-size: 13.5px;
}
.legal-nav__link:hover { color: #FFFFFF; }

/* Both bands sit on dark green — keep their focus ring visible there. */
.site-footer :focus-visible,
.topbar :focus-visible {
  outline-color: var(--teal-light);
}

/* ==========================================================================
   Shared page components
   Used by the Homepage, Services, About, How It Works, FAQ and Pricing ports.
   ========================================================================== */

/* --- dark band ----------------------------------------------------------- */

.band-dark {
  position: relative;
  background: var(--green);
  overflow: hidden;
  color: var(--on-green);
}

/* Decorative topo line art bled into the band's edge. */
.band-dark__topo {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  pointer-events: none;
}
.band-dark__topo--top {
  top: -2px;
  height: 160px;
  transform: scale(1, -1);
}
.band-dark__topo--bottom {
  bottom: -2px;
  height: 180px;
}

.band-dark__inner {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 104px var(--gutter) 96px;
}

.band-dark a { color: var(--on-green); }
.band-dark :focus-visible { outline-color: var(--teal-light); }

/* --- section headings ---------------------------------------------------- */

.eyebrow--light {
  margin: 0 0 14px;
  color: var(--teal-light);
}

/* The clamp minimum is in rem, so it grows with the reader's default font size.
   At 320px with a raised default, a long word in a display serif overflows the
   viewport and nothing else catches it. */
.section-title {
  overflow-wrap: break-word;
  margin: 0 0 48px;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--green);
  text-wrap: balance;
}
.band-dark .section-title {
  color: var(--on-green);
  max-width: 24ch;
}

/* --- story (text + art, side by side) ------------------------------------ */

.story {
  border-top: 1px solid var(--rule);
  padding: 72px 0 96px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 48px 80px;
  align-items: center;
}

.story__copy { max-width: 66ch; }

.prose {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.75;
  color: var(--text-body);
  text-wrap: pretty;
}
.prose + .prose { margin-top: 22px; }

/* Grid children default to min-width:auto, which lets a wide SVG push the
   column past its track. */
.story__art { min-width: 0; }

.story__art svg {
  width: 100%;
  max-width: 440px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Per-illustration widths. These are classes rather than style="" attributes so
   the site can ship a CSP without style-src 'unsafe-inline'. */
.story__art--460 svg { max-width: 460px; }
.story__art--480 svg { max-width: 480px; }

/* --- value / feature grid ------------------------------------------------ */

.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 32px 40px;
}

.value__icon {
  display: block;
  margin-bottom: 16px;
}

.value__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--green);
}
.band-dark .value__title { color: var(--on-green); }

.value__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
}
.band-dark .value__text { color: rgba(247, 245, 240, 0.68); }

/* --- closing CTA --------------------------------------------------------- */

.cta__inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding: 110px var(--gutter);
  text-align: center;
}

/* Only when the CTA follows another dark band, so the seam stays readable. */
.cta--seam { border-top: 1px solid var(--on-green-rule); }

.cta__title {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--on-green);
  text-wrap: balance;
}

.cta__text {
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(247, 245, 240, 0.72);
  text-wrap: pretty;
}

/* Compounded with .btn so it outranks `.band-dark a`, which would otherwise
   paint the label cream on a cream button and make it invisible. */
.btn.btn--light {
  background: var(--on-green);
  color: var(--green);
  font-size: 16px;
  padding: 15px 28px;
  white-space: normal;
}
.btn.btn--light:hover {
  background: #FFFFFF;
  color: var(--green-dark);
}

/* --- FAQ accordion ------------------------------------------------------- */

.faq {
  max-width: 780px;
  border-top: 1px solid var(--rule);
}

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
}
/* Safari still paints its own triangle without this. */
.faq__q::-webkit-details-marker { display: none; }

/* Shared teal diamond bullet — FAQ questions and the honesty callout. */
.diamond {
  width: 7px;
  height: 7px;
  background: var(--teal);
  transform: rotate(45deg);
  flex: none;
}

.faq__q .diamond { transition: transform 150ms ease; }
.faq__item[open] .diamond { transform: rotate(135deg); }

@media (prefers-reduced-motion: reduce) {
  .faq__q .diamond { transition: none; }
}

/* Aligns the answer with the question text: 7px marker + 16px gap. */
.faq__a {
  margin: 0 0 26px;
  padding-left: 23px;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-body);
  text-wrap: pretty;
}

.questions { padding-bottom: 116px; }

/* --- FAQ groups and on-page contents ------------------------------------- */

.faq-group { padding-bottom: 56px; }

/* Fragment-jump clearance under the sticky header now comes from
   `html { scroll-padding-top }` near the top of this file, which also covers
   Tab and Shift+Tab. The `[id]:target` rule that used to live here would have
   added to it, so it was removed rather than reduced. */

.toc {
  max-width: 780px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 20px 0 22px;
  margin-bottom: 56px;
}

.toc__label {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}

.toc__link {
  color: var(--ink);
  text-decoration: none;
  font-size: 15.5px;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}
.toc__link:hover {
  color: var(--teal-text);
  border-bottom-color: var(--teal);
}

.card-lead--loose {
  max-width: 68ch;
  margin-bottom: 28px;
}

/* --- numbered steps ------------------------------------------------------ */

.steps { padding-bottom: 32px; }

.steps__frame {
  border-top: 1px solid var(--rule);
  padding-top: 72px;
  max-width: 820px;
}

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.step {
  display: flex;
  gap: 28px;
}

.step__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
}

.step__num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--green);
  flex: none;
}

.step__line {
  width: 1px;
  flex: 1;
  background: rgba(74, 124, 140, 0.4);
  margin: 8px 0;
}

/* min-width:0 - a flex item defaults to min-width:auto, so the email address in
   the step text refuses to shrink below its own width and pushes the page
   sideways once the text-spacing metrics are applied at 320px. */
.step__body { padding: 6px 0 60px; min-width: 0; }
.step:last-child .step__body { padding-bottom: 0; }

.step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.step__icon { flex: none; }

.step__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--green);
}

.step__text {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
  text-wrap: pretty;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: var(--ink);
  text-decoration: none;
  font-size: 15.5px;
  font-weight: 500;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}
.arrow-link:hover {
  color: var(--teal-text);
  border-bottom-color: var(--teal);
}

/* --- callout ------------------------------------------------------------- */

/* .shell already supplies the horizontal gutter. */
.callout-section {
  padding-top: 32px;
  padding-bottom: 116px;
}

.callout {
  max-width: 820px;
  border: 1px solid rgba(31, 58, 46, 0.25);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.callout .diamond { margin-top: 10px; }

.callout__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-body);
  text-wrap: pretty;
}

/* --- headings and measure modifiers -------------------------------------- */

.page-title--measure { max-width: 22ch; }
.lead--wide { max-width: 60ch; }

.section-title--sm {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  margin-bottom: 36px;
  max-width: 24ch;
}

.section-title--wide { max-width: none; }

/* Sits above body copy rather than a grid, so it needs less air below. */
.story .section-title,
.split .section-title { margin-bottom: 20px; }

/* For a paragraph followed by a card rather than another paragraph. */
.prose--spaced { margin-bottom: 32px; }

/* A light section opened by a hairline rule. */
.rule-section {
  border-top: 1px solid var(--rule);
  padding-top: 72px;
}

.section-pad { padding-bottom: 116px; }

/* --- "what's included" checklist ----------------------------------------- */

.included {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 28px 30px;
}

.included__title {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-text);
}

.check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
}

/* Nudged to sit on the first line's baseline. */
.check-list svg {
  flex: none;
  margin-top: 3px;
}

/* --- tiles --------------------------------------------------------------- */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
}

.tile {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 32px 28px;
  transition: border-color 150ms ease;
}
.tile:hover { border-color: rgba(31, 58, 46, 0.4); }

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
}

.tile__icon {
  display: block;
  margin-bottom: 18px;
}

.tile__title {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.tile__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
}

/* --- outlined note box --------------------------------------------------- */

.note-box {
  max-width: 780px;
  border: 1px solid rgba(31, 58, 46, 0.25);
  border-radius: 12px;
  padding: 34px 34px 36px;
}

/* Small serif heading used inside boxes and above sub-sections. */
.subhead {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--green);
}
.subhead--gap-24 { margin-bottom: 24px; }
.subhead--gap-28 { margin-bottom: 28px; }

.note-box__text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-body);
  text-wrap: pretty;
}

/* --- pricing ------------------------------------------------------------- */

.lead--62 { max-width: 62ch; }

.hint {
  max-width: 780px;
  border-top: 1px solid var(--rule);
  padding-top: 32px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hint .diamond { margin-top: 10px; }

.hint__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-body);
  text-wrap: pretty;
}

/* Secondary line under the CTA button. */
.cta__alt {
  margin: 26px 0 0;
  font-size: 15px;
  color: var(--on-green-dim);
}
.cta__alt a {
  color: var(--teal-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta__alt a:hover { color: var(--on-green); }

/* ==========================================================================
   Homepage
   ========================================================================== */

/* --- hero ---------------------------------------------------------------- */

.hero {
  padding-top: 88px;
  padding-bottom: 64px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The clamp minimum is in rem, so it grows with the reader's default font size.
   At 320px with a raised default, a long word in a display serif overflows the
   viewport and nothing else catches it. */
.hero__title {
  overflow-wrap: break-word;
  margin: 0 0 24px;
  font-family: var(--font-display);
  /* 4.1rem and 18ch, not 4.4rem and 16ch. "Urheberrechtsschutz" is a single
     602px word at the old maximum, inside a 540px measure — so the heading
     broke mid-word, "Urheberrechtsschu / tz", which reads as a rendering fault
     rather than a line break. Both numbers moved a little instead of one of
     them a lot: the measure is still a measure, and the display size is still
     the largest type on the site. */
  font-size: clamp(2.7rem, 5.4vw, 4.1rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--green);
  text-wrap: balance;
  max-width: 18ch;
}

.hero__lead {
  margin: 0 0 36px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 60ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
}

.btn--lg {
  font-size: 16px;
  padding: 14px 26px;
}

.arrow-link--lg {
  margin-top: 0;
  font-size: 16px;
}

.hero__assurance {
  margin: 30px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-soft);
}

/* --- illustration band --------------------------------------------------- */

.band-art {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.band-art svg {
  display: block;
  width: 100%;
  height: clamp(240px, 30vw, 380px);
}

.band-art__badge {
  position: absolute;
  left: clamp(24px, 5vw, 64px);
  bottom: clamp(20px, 4vw, 44px);
  background: var(--bg);
  border: 1px solid rgba(31, 58, 46, 0.2);
  border-radius: 10px;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(34, 34, 31, 0.08);
}
.band-art__badge svg {
  flex: none;
  width: 20px;
  height: 20px;
}
.band-art__badge span {
  font-size: 15px;
  font-weight: 600;
  color: var(--green);
}

/* --- trust strip --------------------------------------------------------- */

.trust-strip {
  list-style: none;
  margin: 0;
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 48px;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.trust-strip li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-soft);
}

/* --- "what we do" split -------------------------------------------------- */

.split {
  padding-top: 104px;
  padding-bottom: 108px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 48px 80px;
  align-items: center;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.feature {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.feature > svg {
  flex: none;
  margin-top: 2px;
}

.feature__title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.feature__text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
}

/* --- commitment checklist (on the dark band) ----------------------------- */

.diamond--light { background: var(--teal-light); }

.pledge-list {
  list-style: none;
  margin: 56px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid rgba(247, 245, 240, 0.18);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px 40px;
}

.pledge-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(247, 245, 240, 0.8);
}

/* --- compact process cards ----------------------------------------------- */

/* Long-hand so .shell keeps its horizontal gutter. */
.process {
  padding-top: 104px;
  padding-bottom: 116px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 20px;
}

.process-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 28px 26px;
}

.process-card__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  margin-bottom: 18px;
}

.process-card__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}

.process-card__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-soft);
}

/* --- homepage FAQ (centred, tighter than the FAQ page) ------------------- */

.faq-block {
  max-width: 780px;
  margin: 0 auto;
}

.text-center { text-align: center; }

.section-title--center {
  margin-bottom: 28px;
  text-align: center;
  max-width: none;
}

.faq--compact { max-width: none; }
.faq--compact .faq__q {
  padding: 22px 0;
  font-size: 17px;
}
.faq--compact .faq__a {
  margin-bottom: 24px;
  font-size: 16px;
}

.faq-more {
  margin: 24px 0 0;
  text-align: center;
  font-size: 15px;
  color: var(--text-soft);
}

/* ==========================================================================
   Report an infringement
   ========================================================================== */

.page-header--tight { padding-bottom: 56px; }

.checklist-card {
  max-width: 780px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 36px 34px 38px;
}

/* Roomier than .check-list — this is the page's main content, not an aside. */
/* Items the service does NOT yet cover. Quieter than an active list, but the
   text stays at full contrast — this is information, not disabled UI. */
.check-list--muted li { color: var(--text-soft); }

.check-list--lg { gap: 16px; }
.check-list--lg li {
  font-size: 16.5px;
  line-height: 1.6;
}
.check-list--lg svg { margin-top: 4px; }

.cta-block {
  padding-top: 40px;
  padding-bottom: 72px;
}

.cta-block__inner { max-width: 780px; }

.cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn--xl {
  font-size: 16.5px;
  padding: 16px 30px;
  /* This button's label contains an email address. .btn sets nowrap, which
     pushed it 4px past the viewport at 320px — let it wrap instead. */
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.btn-copy {
  background: none;
  border: 1px solid rgba(31, 58, 46, 0.35);
  border-radius: 8px;
  padding: 15px 20px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--green);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-copy:hover {
  border-color: var(--green);
  background: rgba(31, 58, 46, 0.05);
}

.cta-note {
  margin-top: 32px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.cta-note .diamond { margin-top: 9px; }

.cta-note__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  text-wrap: pretty;
}

.next-steps {
  border-top: 1px solid var(--rule);
  padding-top: 48px;
}

.mini-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 16px 40px;
}

.mini-step {
  display: flex;
  align-items: center;
  gap: 16px;
}

.mini-step__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--green);
  flex: none;
}

.mini-step span {
  font-size: 15.5px;
  color: var(--text-body);
}

/* --- stacked content cards ----------------------------------------------- */

.card-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 780px;
}

/* Cards in a stack own their own width; the standalone card sets its own. */
.card-stack .checklist-card,
.card-stack .note-box { max-width: none; }

/* Sits under a card heading, above the list it introduces. */
.card-lead {
  margin: 0 0 20px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-body);
  text-wrap: pretty;
}

/* Qualifying note after a list — quieter than the list it follows. */
.card-note {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
  text-wrap: pretty;
}
.card-note--wide { max-width: 76ch; }

.note-box__text--spaced { margin-top: 16px; }

.nowrap { white-space: nowrap; }

/* An email address in running text. NOT .nowrap: `copyright@clarowe.com` is
   twenty-one characters and overflows a 272px column once the WCAG 1.4.12
   text-spacing overrides are applied, which is how the browser suite found it.
   `anywhere` rather than `break-word` because only `anywhere` lowers
   min-content width, and min-content is what a flex or grid parent sizes
   itself from — with `break-word` the address stays whole, the parent stays
   too wide, and the row overflows exactly as before. It still breaks only when
   the line would otherwise overflow, so at every width where the address fits
   it stays on one piece. */
.mailaddr { overflow-wrap: anywhere; }

.card-note--flush {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
  font-size: 16.5px;
  color: var(--text-body);
}

/* --- numbered principles ------------------------------------------------- */

.principle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.principle {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.principle__num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--teal-text);
  flex: none;
  width: 44px;
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Flex children default to min-width:auto, which lets long words push the
   column wider than its track. */
.principle__body { min-width: 0; }

.principle__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--green);
}

.principle__text {
  margin: 0;
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-body);
  text-wrap: pretty;
}

@media (max-width: 560px) {
  .principle { gap: 16px; }
  .principle__num { width: 34px; font-size: 17px; }
}

/* --- process framework stages -------------------------------------------- */

.stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stage {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 4px 20px;
  padding: 24px 0;
  border-top: 1px solid var(--rule);
}
.stage:last-child { border-bottom: 1px solid var(--rule); }

.stage__num {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--teal-text);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
  padding-top: 2px;
}

.stage__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stage__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}

.stage__text {
  margin: 6px 0 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* Status badge. "Planned" must be unmistakable — presenting a roadmap stage
   as a live capability is the exact failure this labelling prevents. */
.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.badge--now {
  background: rgba(31, 58, 46, 0.1);
  color: var(--green);
}
.badge--planned {
  background: transparent;
  color: var(--text-soft);
  border: 1px dashed var(--rule-strong);
}

@media (max-width: 560px) {
  .stage { grid-template-columns: 34px 1fr; gap: 4px 14px; }
}

/* --- misc modifiers ------------------------------------------------------ */

.imprint--flush { border-top: 0; }
.imprint--flush .imprint__row:first-child { padding-top: 0; }

.mini-steps--stacked {
  grid-template-columns: 1fr;
  gap: 14px;
}

/* ==========================================================================
   Imprint
   ========================================================================== */

.imprint-title { margin-bottom: 40px; }

.imprint {
  max-width: 640px;
  border-top: 1px solid var(--rule);
}

.imprint dl { margin: 0; }

.imprint__row {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: 8px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}

.imprint__key {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.imprint__val {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink);
}

/* Mono for machine-readable identifiers in the imprint — an address block
   and a telephone number read as data rather than prose. */
.imprint__val--mono {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-soft);
}

/* The two-column key/value layout is too tight for a narrow phone. */
@media (max-width: 560px) {
  .imprint__row { grid-template-columns: 1fr; }
}

.tile__more {
  margin: 14px 0 0;
}
.tile__more .arrow-link { margin-top: 0; }

/* The list item is a flex container, so any bare inline element in its text
   (<strong>, <a>, .nowrap) would become its own flex item and lay out in a row
   instead of wrapping. Keeping the text in one span keeps it inline. */
.check-list__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Breadcrumbs
   The site emitted BreadcrumbList structured data on every page with no
   visible counterpart. Structured data is meant to describe what the reader
   can actually see, so the trail is now rendered — and check-site.py fails
   if the visible trail and the markup ever disagree.
   ========================================================================== */

.breadcrumb {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 28px 0 0;
}
.breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-soft);
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Decorative separator: generated content, so it is never read out and never
   lands in a copied selection. */
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--rule-strong);
}
.breadcrumb__link {
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb__link:hover { color: var(--teal-text); }
.breadcrumb__current { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Comparison table
   The four YouTube rights tools differ along five axes, and the existing
   two-column .imprint list cannot express that. This is the site's only real
   table: a genuine table element in a scroll container, because five columns
   cannot reflow to a 320px viewport and stay readable.
   ========================================================================== */

/* tabindex="0" in the markup makes this scroller keyboard-operable; the global
   :focus-visible ring is 3px-rounded, which would cut this card's 12px corners. */
.table-scroll:focus-visible { border-radius: 12px; }

.table-scroll {
  max-width: var(--measure);
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
}
.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  font-size: 15.5px;
  line-height: 1.6;
}
.compare caption {
  caption-side: top;
  text-align: left;
  padding: 22px 24px 0;
  font-size: 15px;
  color: var(--text-soft);
}
.compare th,
.compare td {
  padding: 16px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
.compare thead th {
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--green);
  border-bottom: 1px solid var(--rule-strong);
}
.compare tbody th {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td { color: var(--text-body); }

/* ==========================================================================
   Case readiness check
   Progressive enhancement, and deliberately inert. The answer buttons carry
   the hidden attribute in the markup and site.js removes it on load, so a
   reader without JavaScript sees the questions and the explanation of why
   each one matters — a complete checklist — rather than buttons that do
   nothing. Nothing is stored, submitted or written to the URL.
   ========================================================================== */

.readiness {
  max-width: 780px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.readiness__q {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px 20px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
}
.readiness__q:last-child { border-bottom: 1px solid var(--rule); }
.readiness__num {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  color: var(--teal-text);
}
.readiness__title {
  margin: 0 0 8px;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
}
.readiness__why {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
}
.readiness__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.readiness__options[hidden] { display: none; }
.readiness__option {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-nav);
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}
.readiness__option:hover { border-color: var(--teal); }
/* Selected state carries weight and fill, not colour alone. */
.readiness__option[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);
}

.readiness__result {
  max-width: 780px;
  margin: 40px auto 0;
  padding: 30px 32px;
  border: 1px solid var(--control-border);
  border-radius: 12px;
}
.readiness__result[hidden] { display: none; }
.readiness__verdict {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  color: var(--green);
}
.readiness__detail {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--text-body);
}
.readiness__gaps {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.readiness__gap {
  padding-left: 23px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-body);
}
.readiness__gap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--teal);
  transform: rotate(45deg);
}
.readiness__reset {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-nav);
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 8px 16px;
  margin-top: 22px;
  cursor: pointer;
}
.readiness__reset:hover { border-color: var(--teal); }

@media (max-width: 560px) {
  .readiness__q { grid-template-columns: 32px 1fr; gap: 6px 14px; }
  .readiness__result { padding: 24px 22px; }
}

/* ==========================================================================
   Route chooser
   Four situations, four destinations. A visitor should not have to guess
   which page is theirs.
   ========================================================================== */

.router {
  max-width: 780px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  gap: 14px;
}
.router__item {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}
.router__q {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
}
.router__a {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
}

/* ==========================================================================
   Preparation pack
   A checklist built to be printed and filled in on paper, or copied into
   wherever the reader already keeps their case notes. Deliberately not a
   form: the site has no server, and a field that looks fillable but goes
   nowhere is worse than a printed line.
   ========================================================================== */

.prep {
  max-width: 780px;
  margin: 0 auto;
}
.prep__group {
  margin: 0 0 36px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--rule);
}
.prep__group:last-child { border-bottom: 0; }
.prep__title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--green);
}
.prep__note {
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-soft);
}
.prep__rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prep__row {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: 6px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.prep__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.prep__hint {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-soft);
}
/* The line you write on. Empty and decorative, so it carries aria-hidden in
   the markup: a screen-reader user gets the label and the hint, which is the
   entire content. */
.prep__line {
  grid-column: 1 / -1;
  height: 22px;
  border-bottom: 1px solid var(--rule-strong);
  margin-top: 6px;
}
.print-actions {
  max-width: 780px;
  margin: 0 auto 40px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.print-btn {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-nav);
  background: transparent;
  border: 1px solid var(--control-border);
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
}
.print-btn:hover { border-color: var(--teal); }
.print-btn[hidden] { display: none; }

@media (max-width: 560px) {
  .prep__row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Print
   The preparation pack is meant to leave the screen. Chrome, decoration and
   calls to action come off; the checklist and where it came from stay.
   ========================================================================== */

@media print {
  .topbar,
  .site-header,
  .nav-mobile,
  .site-footer,
  .skip-link,
  .band-dark,
  .band-art,
  .illustration,
  .print-actions,
  .breadcrumb,
  .no-print { display: none !important; }

  html, body { background: #fff; color: #000; }

  .prep__group,
  .prep__row { break-inside: avoid; page-break-inside: avoid; }
  .prep__line { border-bottom: 1px solid #999; height: 26px; }
  .prep__title { color: #000; }
  .page-title { font-size: 24pt; }

  /* A printed sheet has lost its address bar, so put the source back. */
  .print-source { display: block !important; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; }
}

/* Visible only on paper: what this sheet is and where it came from. */
.print-source {
  display: none;
  margin: 0 0 24px;
  font-size: 11pt;
  color: #444;
}

/* ==========================================================================
   Grouped footer
   The footer used to repeat the seven header links verbatim, which meant the
   two strongest pages on the site — notice integrity and the YouTube guide —
   were reachable only from one below-the-fold homepage tile. Four labelled
   groups give every page a route without adding a mega-menu to the header.
   ========================================================================== */

.footer-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px 40px;
  padding-top: 4px;
  flex: 1 1 520px;
}
.footer-group {
  min-width: 0;
}
.footer-group__title {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-green-dim);
}
.footer-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

/* German compound nouns and narrow screens ---------------------------------
 *
 * "Urheberrechtsangelegenheiten" is twenty-eight characters and does not fit a
 * 320px viewport at any size worth reading. English never forced this: the
 * longest heading word on the English site was "infringement".
 *
 * Hyphenation rather than smaller type. The document declares lang="de-CH", so
 * a browser hyphenates German correctly and breaks at Ur-he-ber-rechts-schutz
 * instead of overflowing — which keeps the type at the size it was designed
 * at. overflow-wrap is the fallback for the two places hyphenation cannot help:
 * a definition-list cell too narrow for even a hyphenated fragment, and a URL.
 */
.hero__title,
.page-title,
.section-title,
.subhead,
.step__title,
.stage__title,
.tile__title,
.feature__title,
.principle__title,
.card__title,
.value__title,
.faq__q,
.included__title,
.prep__title,
.readiness__q {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

.prose,
.lead,
.card-lead,
.card-note,
.callout__text,
.check-list__text,
.faq__a,
.step__text,
.stage__text,
.principle__text,
.tile__text,
.feature__text,
.value__text,
.note-box__text,
.hint__text,
.readiness__why,
.readiness__detail {
  -webkit-hyphens: auto;
  hyphens: auto;
  /* `anywhere`, not `break-word`. Both break a too-long word, but only
     `anywhere` reduces the element's min-content width — and min-content is
     what a flex or grid parent sizes from. Under the WCAG 1.4.12 text-spacing
     overrides a reader may apply, German prose needed 287px inside a 202px
     card, and the card had been sized from a min-content the browser refused
     to shrink. It never fires in ordinary reading: a word only breaks when it
     genuinely cannot fit. */
  overflow-wrap: anywhere;
}

/* Definition rows are the tightest column on the site, and the imprint carries
   the longest label there is. */
.imprint__key,
.imprint__val {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Narrow screens, German headings ------------------------------------------
 *
 * The display sizes were set against English, whose longest heading word was
 * "infringement". "Urheberrechtsschutz" renders 391px at the hero's 2.7rem
 * floor, inside a 272px column at 320px — and overflow-wrap: break-word does
 * not help, because it does not reduce an element's min-content width, so the
 * heading box itself overflowed rather than the text wrapping inside it.
 *
 * Below 460px the display scale steps down. Above it, nothing changes: the
 * design keeps the sizes it was drawn at, and only the widths where German
 * genuinely cannot fit are adjusted. Type stays large enough to lead a page —
 * 1.85rem is still a heading, not a compromise.
 */
@media (max-width: 460px) {
  .hero__title { font-size: clamp(1.85rem, 8vw, 2.7rem); }
  .page-title  { font-size: clamp(1.7rem, 7.4vw, 2.3rem); }
  .section-title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
}

/* The tightest columns on the site, and the ones holding the longest labels.
   `anywhere` rather than `break-word`: only `anywhere` shrinks min-content, and
   min-content is what was overflowing. */
.imprint__key,
.imprint__val,
.link-underline,
.callout__text,
.step__title {
  overflow-wrap: anywhere;
}

/* Two structural fixes German exposed ---------------------------------------
 *
 * .btn carries white-space: nowrap so a call to action never breaks into a
 * ragged two-line label. "Report an infringement" always fitted;
 * "Urheberrechtsverletzung melden" does not, and under a reader's letter-
 * spacing override it cannot. Below 460px the label is allowed to wrap — a
 * two-line button is legible, a clipped one is not.
 *
 * .mini-step is a flex row: a fixed number beside a text column. A flex item's
 * default min-width is auto, so the text column refused to shrink below its
 * longest word and pushed the row past the viewport. min-width: 0 is the fix,
 * and it was invisible while the longest word was English.
 */
@media (max-width: 460px) {
  .btn,
  .btn--lg,
  .btn--xl {
    white-space: normal;
    max-width: 100%;
  }
}

.mini-step > * {
  /* min-width alone was not enough: the text child is a bare <span>, so none
     of the class-based wrapping rules above reached it, and its min-content
     stayed the width of the longest German word. */
  min-width: 0;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Motion layer
   ==========================================================================
   Split by what each part needs to know.

   CSS owns what can start at first paint and needs no idea where the reader
   is: the page header's entrance and the homepage ridge drawing itself. Both
   run with no JavaScript, cannot be delayed behind a script, and cannot be
   taken back by one that arrives late. Neither holds anything back for more
   than about three seconds, and both finish on their own.

   assets/js/motion.js owns what depends on scroll position, under one rule:
   it may hide only what the reader cannot see yet.

   Every start state sits inside `screen and (prefers-reduced-motion:
   no-preference)`, so print and reduced motion get the finished page.
   ========================================================================== */

@keyframes cl-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cl-rise-title {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cl-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes cl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media screen and (prefers-reduced-motion: no-preference) {

  /* The entrance. One orchestrated moment per page: the header's lines settle
     in sequence, and the title, which is the page's thesis, travels furthest
     and takes longest. `both` so each line waits at its start state through
     its own short delay instead of flashing in first. The title is the second
     child and starts at 70 ms, so the largest paint on the page is not held
     behind anything. */
  .hero > *,
  .page-header > * {
    animation: cl-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .hero > .hero__title,
  .page-header > .page-title {
    animation-name: cl-rise-title;
    animation-duration: 1.15s;
  }
  .hero > :nth-child(2),
  .page-header > :nth-child(2) { animation-delay: 0.07s; }
  .hero > :nth-child(3),
  .page-header > :nth-child(3) { animation-delay: 0.16s; }
  .hero > :nth-child(4),
  .page-header > :nth-child(4) { animation-delay: 0.24s; }
  .hero > :nth-child(5),
  .page-header > :nth-child(5) { animation-delay: 0.32s; }
  .hero > :nth-child(n+6),
  .page-header > :nth-child(n+6) { animation-delay: 0.42s; }

  /* The ridge under the homepage hero: the brand mark, a survey line over a
     ridge, enacted. The three ridge paths carry pathLength="1", so one dash of
     length 1 covers each path exactly whatever its real length, and sliding
     the offset from 1 to 0 draws it from its start. Only <path> is drawn:
     pathLength on <line> and <circle> is not honoured everywhere, and a shape
     that ignored it would sit there as a dotted line rather than draw. So the
     horizon, the survey ticks and, last, the sun fade in after the ridges. */
  .band-art svg path[pathLength] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: cl-draw 1.9s cubic-bezier(0.65, 0, 0.35, 1) 0.45s forwards;
  }
  .band-art svg path[pathLength]:nth-of-type(2) { animation-delay: 0.62s; }
  .band-art svg path[pathLength]:nth-of-type(3) { animation-delay: 0.79s; }
  .band-art svg line,
  .band-art svg circle {
    opacity: 0;
    animation: cl-fade 0.9s ease 1.5s forwards;
  }
  .band-art svg line:first-of-type { animation-delay: 1.2s; }
  .band-art svg circle {
    animation-duration: 1.2s;
    animation-delay: 2.1s;
  }

  /* motion.js adds `is-deferred` only while the ridge is still below the fold,
     and removes it as the ridge comes into view, at which point the drawing
     above starts again from the beginning, in front of the reader. */
  .band-art.is-deferred svg path[pathLength],
  .band-art.is-deferred svg line,
  .band-art.is-deferred svg circle {
    animation: none;
  }
}

/* The process rail. motion.js marks a list `is-railed` and drives --rail from
   0 to 1 with the reader's scrolling. It is a pseudo-element, so the list's
   children stay exactly the <li> elements the markup has. It sits in the
   gutter, 12px left of the list, because the number column starts at the
   list's edge; the shell gutter is 24px at every width. */
.stage-list { position: relative; }
.stage-list.is-railed::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--teal);
  transform: scaleY(var(--rail, 0));
  transform-origin: top center;
  pointer-events: none;
}

/* Numbers wait in the soft grey and turn teal as the rail reaches them.
   motion.js compares each number's position with the rail's length, so the
   colour never runs ahead of the line. #5C5C54 is about 6.2:1 on the page
   ground, so a waiting number is fully legible. */
.stage-list.is-railed .stage__num { transition: color 0.4s ease; }
.stage-list.is-railed .stage:not(.is-reached) .stage__num { color: var(--text-soft); }

/* --- micro-interactions ---------------------------------------------------
   CSS, so they work when the library does not. Colour, an underline easing a
   little further from its text, and a 3px nudge of an arrow inside its own
   link. Nothing lifts, glows or casts a shadow: a floating card reads as
   clickable whether it is or not, and a glowing button reads as a sales page.
   The arrow nudge is the only horizontal movement anywhere on the site. */
.btn {
  transition: background-color 180ms ease, color 180ms ease;
}
.arrow-link {
  transition: color 160ms ease, border-color 160ms ease;
}
.arrow-link > span {
  display: inline-block;
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.arrow-link:hover > span { transform: translateX(3px); }
.link-underline {
  transition: color 160ms ease, text-underline-offset 180ms ease;
}
.link-underline:hover { text-underline-offset: 5px; }
.nav__link { transition: color 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  .btn,
  .arrow-link,
  .arrow-link > span,
  .link-underline,
  .nav__link,
  .stage-list.is-railed .stage__num {
    transition: none;
  }
  .arrow-link:hover > span { transform: none; }
}

/* Print is always the finished page. `!important` because motion.js writes
   its start states inline, and print has to win over them even when someone
   prints before scrolling — which is exactly when the case-preparation pack
   gets printed. */
@media print {
  .checklist-card,
  .card,
  .tile,
  .stage,
  .step,
  .value-grid > div,
  .faq__item,
  .note-box,
  .hint,
  .included,
  .mini-step,
  .hero > *,
  .page-header > *,
  .nav-mobile > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .faq__a {
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }
  .band-art svg * {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
  }
  .stage-list.is-railed::before { display: none; }
  .stage-list.is-railed .stage__num { color: var(--teal-text) !important; }
}

/* October 2026: company dossier presentation. Legacy tokens remain shared by
   the legal guides; new layouts use the same palette and interaction rules. */
@media screen {
  :root { --surface: #F3F6F8; --rule: #D7E0E7; }
  body { font-size: 17px; }
  .topbar { background: var(--surface); border-bottom: 1px solid var(--rule); }
  .topbar__inner { align-items: center; padding-block: 8px; gap: 24px; }
  .topbar__location { margin-right: auto; color: var(--text-soft); font-size: 12px; }
  .topbar__link { display: inline-flex; align-items: center; min-height: 26px; color: var(--green); font-size: 12px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
  .topbar__link:hover { color: var(--teal-text); }
  .topbar :focus-visible { outline-color: var(--green); }
  .site-header { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--rule); }
  .site-header__inner { min-height: 88px; gap: 20px; }
  .brand { gap: 12px; }
  .brand svg { width: 32px; height: 32px; }
  .brand__name { font-size: 26px; font-weight: 650; letter-spacing: -.04em; }
  svg [stroke="#1F3A2E"] { stroke: var(--green); }
  svg [stroke="#4A7C8C"] { stroke: var(--teal); }
  .nav-cluster { gap: 28px; }
  .nav { gap: 22px; }
  .nav__link { font-size: 14px; padding-block: 12px; }
  .nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .btn { border-radius: 6px; padding: 13px 20px; line-height: 1.5; transition: background-color .16s ease; white-space: normal; text-align: center; }
  .btn--lg { padding: 15px 24px; font-size: 15px; }
  .btn--light { background: #FFFFFF; color: var(--green); }
  .btn--light:hover { background: #E8F0F4; color: var(--green); }
  .text-link { color: var(--green); font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: #AABBC7; text-underline-offset: 5px; text-decoration-thickness: 1px; line-height: 1.65; }
  .text-link:hover { text-decoration-color: currentColor; }
  .eyebrow { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; margin-bottom: 20px; }
  .page-title, .section-title, .cta__title { font-family: var(--font-body); font-weight: 600; letter-spacing: -.035em; line-height: 1.14; }
  .page-title { font-size: clamp(2rem, 4vw, 3.2rem); max-width: 27ch; }
  .page-title--measure { max-width: 27ch; }
  .page-header { padding-top: 50px; padding-bottom: 40px; }
  .lead { font-size: 18px; line-height: 1.7; max-width: 65ch; }
  .prose { font-size: 17px; line-height: 1.7; max-width: 70ch; }
  .section-pad { padding-bottom: 72px; }
  .section-title { font-size: clamp(1.8rem, 3.2vw, 2.55rem); margin-bottom: 28px; }
  .card-stack, .cta-block__inner { max-width: 920px; }
  .card-stack { gap: 24px; }
  .checklist-card { max-width: 920px; padding: 30px 32px; border-radius: 8px; }
  .card-lead, .card-note, .stage__text { line-height: 1.7; }
  .card, .tile, .note-box { border-radius: 8px; }
  .subhead, .card__title, .tile__title, .stage__title { font-family: var(--font-body); font-weight: 600; letter-spacing: -.02em; }
  .imprint { max-width: 920px; }
  .imprint__row { grid-template-columns: minmax(160px, 230px) minmax(0,1fr); gap: 16px 28px; }
  .imprint__key { text-transform: none; letter-spacing: 0; line-height: 1.6; font-weight: 500; }
  .imprint__val { overflow-wrap: anywhere; }
  .imprint__row > * { min-width: 0; }
  .imprint__val--mono { font-family: var(--font-body); font-size: 16px; }
  .toc { background: var(--surface); border-radius: 8px; }
  .breadcrumb { max-width: none; margin: 24px 0 0; }
  .site-footer { background: var(--green-dark); }
  .footer-brand__name { font-size: 25px; }
  .footer-group__title { text-transform: none; letter-spacing: 0; font-size: 14px; }
  .footer-nav__link { line-height: 1.55; }
  .home-intro { background: #FFFFFF; }
  .hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; padding-top: 64px; padding-bottom: 64px; text-align: left; align-items: center; }
  .hero__copy { min-width: 0; }
  .hero__title { font-family: var(--font-body); font-size: clamp(3.1rem, 5.8vw, 5rem); line-height: 1.02; letter-spacing: -.065em; font-weight: 600; max-width: none; margin-bottom: 26px; }
  .hero__subtitle { color: var(--green); font-size: 23px; line-height: 1.4; letter-spacing: -.025em; margin: 0 0 20px; }
  .hero__lead { font-size: 17px; line-height: 1.75; margin: 0 0 28px; max-width: 49ch; }
  .hero__actions { justify-content: flex-start; gap: 16px 24px; }
  .hero__assurance { margin: 14px 0 0; font-size: 13px; line-height: 1.6; display: block; max-width: none; }
  .company-dossier { position: relative; isolation: isolate; min-width: 0; color: #FFFFFF; background: var(--green); border-radius: 12px; padding: 30px 32px 74px; overflow: hidden; }
  .company-dossier__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
  .company-dossier__head p { font-size: 12px; line-height: 1.5; margin: 0; color: #CDDFE8; text-align: right; }
  .dossier-mark { font-family: var(--font-display); font-size: 54px; line-height: 1; font-weight: 500; }
  .company-dossier h2 { font-size: 27px; letter-spacing: -.035em; font-weight: 550; margin: 0 0 10px; }
  .company-dossier__intro { font-size: 14px; line-height: 1.65; color: #CDDFE8; margin: 0 0 20px; max-width: 35ch; }
  .dossier-facts { margin: 0; }
  .dossier-facts > div { padding: 13px 0; border-top: 1px solid #385267; }
  .dossier-facts dt { font-size: 12px; color: #CDDFE8; margin-bottom: 5px; }
  .dossier-facts dd { margin: 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
  .dossier-facts dd span { display: block; font-size: 13px; color: #CDDFE8; }
  .company-dossier a { color: #FFFFFF; text-underline-offset: 4px; }
  .company-dossier :focus-visible { outline-color: #B7D8E1; }
  .dossier-link { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.65; margin-top: 14px; }
  .company-dossier .band-art { position: absolute; z-index: -1; inset: auto 0 0; height: 70px; margin: 0; background: transparent; color: #6D9AAE; }
  .company-dossier .band-art svg { width: 100%; height: 70px; }
  .audience-routes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); padding-block: 0; }
  .audience-routes > a { position: relative; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 25px 44px 25px 0; text-decoration: none; }
  .audience-routes > a + a { padding-left: 28px; border-left: 1px solid var(--rule); }
  .audience-routes > a:hover { background: var(--surface); }
  .audience-routes span:not(.route-arrow) { display: block; font-size: 12px; color: var(--text-soft); margin-bottom: 8px; }
  .audience-routes strong { display: block; font-size: 16px; line-height: 1.5; font-weight: 550; }
  .route-arrow { position: absolute; right: 20px; top: 43px; font-size: 22px; color: var(--teal); }
  .home-section { padding-top: 88px; padding-bottom: 88px; }
  .home-section h2 { font-size: clamp(1.9rem,3.2vw,2.65rem); color: var(--green); line-height: 1.16; letter-spacing: -.045em; font-weight: 550; margin: 0 0 24px; }
  .home-section h3 { font-size: 18px; color: var(--green); line-height: 1.45; letter-spacing: -.025em; font-weight: 600; }
  .home-section p { color: var(--text-body); font-size: 16px; line-height: 1.75; }
  .home-section .eyebrow { font-size: 14px; margin: 0 0 16px; color: var(--teal-text); }
  .section-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 72px; align-items: end; margin-bottom: 38px; }
  .section-heading h2 { margin-bottom: 0; }
  .section-heading > p { max-width: 44ch; margin: 0; }
  .section-heading > a { justify-self: end; margin-bottom: 6px; }
  .service-ledger { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
  .service-ledger article { border-top: 1px solid var(--rule); padding-top: 30px; }
  .service-ledger svg { color: var(--teal); }
  .service-ledger h3 { margin: 22px 0 12px; }
  .service-ledger p { margin: 0 0 18px; }
  .process-section { background: var(--surface); }
  .process-overview { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 40px 0 32px; gap: 30px; }
  .process-overview li { border-top: 1px solid #A9BAC7; padding-top: 20px; }
  .process-overview li > span { font-size: 13px; color: var(--teal-text); }
  .process-overview h3 { margin: 20px 0 12px; }
  .process-overview p { font-size: 15px; margin: 0; }
  .home-section .process-note { border-top: 1px solid var(--rule); padding-top: 24px; font-size: 13px; max-width: none; margin: 0; }
  .independence-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 72px; align-items: start; }
  .independence-layout p { max-width: 60ch; }
  .responsibility-panel { padding: 28px 32px; background: var(--surface); border-radius: 8px; }
  .responsibility-panel h3 { margin: 0 0 20px; }
  .responsibility-panel ul { padding: 0 0 0 20px; margin: 0; }
  .responsibility-panel li { padding: 8px 0 8px 4px; line-height: 1.5; font-size: 15px; }
  .responsibility-panel li::marker { color: var(--teal); }
  .responsibility-panel p { border-top: 1px solid var(--rule); margin-top: 20px; padding-top: 20px; font-size: 14px; }
  .home-faq { border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 72px; }
  .home-faq .faq-list { margin: 0; }
  .home-faq .faq__q { position: relative; padding-left: 0; padding-right: 32px; font-size: 16px; }
  .home-faq .faq__q::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: 400; color: var(--teal-text); }
  .home-faq details[open] > .faq__q::after { content: "−"; }
  .home-faq .faq__a { margin: 0; padding-left: 0; font-size: 15px; }
  .closing-panel { background: var(--green); color: #FFFFFF; }
  .closing-panel__inner { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); align-items: center; gap: 60px; padding-block: 52px; }
  .closing-panel h2 { font-weight: 550; font-size: 32px; letter-spacing: -.03em; margin: 0 0 14px; }
  .closing-panel p { color: #CDDFE8; font-size: 15px; line-height: 1.7; max-width: 55ch; margin: 0; }
  .closing-panel__inner > div + div { text-align: right; }
  .closing-panel__inner > div + div p { margin-top: 14px; font-size: 12px; }
  .closing-panel p a { color: #FFFFFF; text-underline-offset: 4px; }
  .closing-panel :focus-visible { outline-color: var(--teal-light); }
  .trust-overview { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 40px; padding-bottom: 48px; }
  .trust-overview .imprint { width: 100%; border-top: 0; }
  .verification-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 28px; align-self: start; }
  .verification-panel h2 { font-size: 22px; margin: 0 0 16px; letter-spacing: -.02em; }
  .verification-panel p { font-size: 15px; line-height: 1.7; margin: 0 0 16px; }
  .verification-panel .btn { margin-bottom: 16px; }
  .section-links { display: flex; flex-wrap: wrap; gap: 8px 26px; border-block: 1px solid var(--rule); padding-block: 18px; margin-bottom: 40px; }
  .section-links a { font-size: 14px; line-height: 1.6; text-underline-offset: 4px; }
  .document-section { max-width: 920px; padding-bottom: 44px; }
  .document-section h2 { font-size: 26px; line-height: 1.3; letter-spacing: -.025em; margin: 0 0 20px; }
  .document-section p { line-height: 1.75; font-size: 16px; max-width: 74ch; }
  .email-register { list-style: none; margin: 0; padding: 0; }
  .email-register li { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 12px 32px; padding: 17px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.65; }
  .email-register li > span { color: var(--text-body); }
  .quick-start { margin-bottom: 36px; max-width: 920px; }
  .quick-start ol { padding-left: 22px; line-height: 1.8; }
  .quick-start .btn { margin-top: 8px; }
}
@media screen and (max-width: 1100px) {
  .nav-cluster { gap: 18px; }
  .nav { gap: 14px; }
  .nav__link { font-size: 13px; }
  .brand__name { font-size: 24px; }
  .hero, .section-heading, .independence-layout, .home-faq { gap: 40px; }
}
@media screen and (max-width: 880px) {
  .topbar__location { display: none; }
  .topbar__inner { justify-content: space-between; gap: 16px; }
  .site-header__inner { min-height: 72px; }
  .hero { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; gap: 36px; }
  .hero__title { font-size: clamp(3.25rem, 9vw, 4.5rem); }
  .hero__lead { max-width: 54ch; }
  .company-dossier { max-width: none; }
  .section-heading, .independence-layout, .home-faq, .trust-overview { grid-template-columns: 1fr; gap: 28px; }
  .section-heading > a { justify-self: start; }
  .service-ledger { gap: 22px; }
  .process-overview { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
  .audience-routes strong { font-size: 14px; }
  .audience-routes > a, .audience-routes > a + a { padding: 20px 32px 20px 14px; }
  .route-arrow { right: 10px; }
  .home-section { padding-block: 56px; }
  .closing-panel__inner { grid-template-columns: 1fr; gap: 24px; }
  .closing-panel__inner > div + div { text-align: left; }
  .nav-mobile { padding-bottom: 20px; max-height: calc(100dvh - 72px); overflow-y: auto; }
}
@media screen and (max-width: 560px) {
  :root { --gutter: 20px; }
  .hero__title { font-size: 54px; margin-bottom: 20px; }
  .hero__subtitle { font-size: 20px; margin-bottom: 16px; }
  .hero__lead { font-size: 16px; line-height: 1.65; margin-bottom: 24px; }
  .hero__actions { align-items: flex-start; gap: 14px 20px; }
  .hero .eyebrow { font-size: 13px; margin-bottom: 20px; }
  .hero__assurance { font-size: 12px; }
  .company-dossier { padding: 25px 24px 72px; }
  .company-dossier__head { margin-bottom: 24px; }
  .audience-routes { grid-template-columns: 1fr; }
  .audience-routes > a, .audience-routes > a + a { padding: 20px 40px 20px 0; border-left: 0; border-bottom: 0; }
  .audience-routes > a:last-child { border-bottom: 1px solid var(--rule); }
  .audience-routes strong { font-size: 16px; }
  .route-arrow { top: 32px; }
  .home-section h2 { font-size: 30px; }
  .service-ledger { grid-template-columns: 1fr; gap: 30px; }
  .service-ledger h3 { margin-top: 16px; }
  .service-ledger article { padding-top: 24px; }
  .process-overview { grid-template-columns: 1fr; gap: 24px; }
  .process-overview li { position: relative; padding-left: 42px; }
  .process-overview li > span { position: absolute; top: 23px; left: 0; }
  .process-overview h3 { margin: 0 0 8px; }
  .responsibility-panel { padding: 24px; }
  .closing-panel h2 { font-size: 28px; }
  .page-header { padding-top: 32px; padding-bottom: 28px; }
  .page-title { font-size: 32px; line-height: 1.18; letter-spacing: -.035em; }
  .lead { font-size: 17px; }
  .cta-block { padding-top: 20px; padding-bottom: 48px; }
  .checklist-card, .card, .note-box { padding: 24px 22px; }
  .imprint__row { grid-template-columns: minmax(0,1fr); gap: 5px; padding-block: 16px; }
  .imprint__key { font-size: 13px; }
  .imprint__val { font-size: 16px; }
  .verification-panel { padding: 24px 22px; }
  .email-register li { grid-template-columns: 1fr; gap: 6px; }
  .section-links { gap: 12px 22px; }
  .document-section h2 { font-size: 24px; }
  .quick-start ol { padding-left: 18px; }
}
@media print {
  .hero, .service-ledger, .process-overview, .independence-layout, .home-faq, .trust-overview { display: block; }
  .company-dossier, .verification-panel, .responsibility-panel { break-inside: avoid; border: 1px solid #777; padding: 12pt; }
  .company-dossier .band-art, .topbar, .audience-routes { display: none; }
  .dossier-facts dd { margin-left: 0; }
}