/* Landing page design system, V2 (plan: docs/plans/landing-v2.md). The same calm teal
   language as the account UI (T2) and the site's glass header, but a full-width marketing
   layout. Scoped under .ysl-page with all tokens bound there so nothing leaks; system
   fonts only (no webfonts). V2 is IMAGE-FREE: every visual (hero app window, step minis,
   PDF sheet) is built from these styles, so no request can enter the LCP path. Served
   headless (theme CSS stripped), so this file also styles the reused T2 component output
   (.yac-logo / .yac-footer / .yac-trust). Markup: includes/access/ui/landing.php. */

/* Headless page = no theme stylesheet, so the browser's default 8 px body margin
   survived and drew a white frame around every full-bleed band (conversion pass
   2026-07-29). Reset here because no other loaded file owns the bare body. */
html, body { margin: 0; padding: 0; }

.ysl-page {
  --ysl-accent: #0f6f78;
  --ysl-accent-dark: #0b565d;
  --ysl-accent-soft: #e6f2f3;
  --ysl-ink: #17212b;
  --ysl-muted: #5c6875;
  --ysl-line: #d8dee6;
  --ysl-paper: #ffffff;
  --ysl-bg: #f2f6f7;
  --ysl-ring: rgba(6, 182, 212, 0.35);
  --ysl-radius: 16px;
  --ysl-container: 1080px;
  /* Amber = the design-rule warning family (mirrors the app's warning surfaces);
     green = the passing counterpart. Used by the chips, the PDF sheet and the banner. */
  --ysl-amber-bg: #fef6e4;
  --ysl-amber-line: #f0d9a8;
  --ysl-amber-ink: #8a5a12;
  --ysl-green-bg: #e9f7ee;
  --ysl-green-line: #bfe3cc;
  --ysl-green-ink: #1e6b3a;
  --ysl-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ysl-ink);
  background: var(--ysl-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ysl-page, .ysl-page *, .ysl-page *::before, .ysl-page *::after { box-sizing: border-box; }

/* Anchor nav jumps scroll smoothly; the sticky bar height keeps targets visible. */
html { scroll-behavior: smooth; }
.ysl-page [id] { scroll-margin-top: 80px; }
/* Below 900 px the anchor nav wraps onto a second sticky-header row (see the top-bar
   section), so jump targets need more headroom to clear the taller bar. */
@media (max-width: 899px) { .ysl-page [id] { scroll-margin-top: 128px; } }

/* Shared section rhythm + centered container. */
.ysl-section {
  max-width: var(--ysl-container);
  margin: 0 auto;
  padding: clamp(44px, 7vw, 88px) 20px;
}
.ysl-h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; letter-spacing: -0.5px; font-weight: 800; margin: 0; }
.ysl-h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.2; letter-spacing: -0.3px; font-weight: 700; margin: 0 0 8px; }
/* DE compounds ("Gurtauslegung", "Gründungskunden") fit a 320-px line only barely at
   the clamp minimum — hyphenation is the safety net for future copy, DE only. */
.ysl-h1:lang(de), .ysl-h2:lang(de) { hyphens: auto; }
.ysl-eyebrow { text-transform: uppercase; letter-spacing: 1.2px; font-size: 0.8rem; font-weight: 700; color: var(--ysl-accent); margin: 0 0 14px; }

/* --- Top bar --------------------------------------------------------- */
/* The landing is headless (theme CSS stripped), so this bar is the page's brand
   carrier: it quotes the site's glass header — animated signature line on the top
   edge, glass surface, gradient wordmark. V2 adds the anchor nav + log-in and makes
   the bar sticky so the nav stays reachable. */
.ysl-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(6, 182, 212, 0.16);
  box-shadow: 0 8px 30px -18px rgba(8, 145, 178, 0.35);
}
/* Signature line: identical gradient + flow rhythm as the glass header / CTA band. */
.ysl-nav::before {
  content: ""; display: block; height: 3px;
  background: linear-gradient(90deg, #06B6D4, #0891B2 30%, #FF6B6B 55%, #22D3EE 80%, #06B6D4);
  background-size: 220% 100%;
  animation: ysl-flow 9s linear infinite;
}
.ysl-nav__inner {
  max-width: var(--ysl-container); margin: 0 auto; padding: 12px 20px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px;
}
/* Gradient wordmark, shimmering in the same rhythm as the theme header's logo. */
.ysl-nav .yac-logo {
  margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.6px; line-height: 1;
  text-decoration: none;
  background: linear-gradient(90deg, #0891B2, #06B6D4 35%, #22D3EE 55%, #0891B2 80%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ysl-flow 7s linear infinite;
}
/* Anchor nav: quiet section links. Below 900 px they used to vanish entirely — on a
   ~15,000 px mobile page that cut the only shortcut to pricing/FAQ (conversion pass
   2026-07-29). Now they wrap onto a second, horizontally scrollable header row; the
   hidden scrollbar is fine because a cut-off label already signals more content. */
.ysl-nav__links {
  display: flex; gap: 20px; order: 4; flex-basis: 100%;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.ysl-nav__links::-webkit-scrollbar { display: none; }
.ysl-nav__links a { color: var(--ysl-muted); text-decoration: none; font-size: 0.95rem; font-weight: 600; white-space: nowrap; }
.ysl-nav__links a:hover { color: var(--ysl-accent); }
.ysl-nav__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.ysl-nav__login { color: var(--ysl-muted); text-decoration: none; font-size: 0.95rem; font-weight: 600; }
.ysl-nav__login:hover { color: var(--ysl-accent); }
@media (min-width: 900px) { .ysl-nav__links { order: 0; flex-basis: auto; overflow-x: visible; } }
/* The nav CTA is the QUIET action (outlined pill, quoting the header's account pill);
   the hero button below stays the one loud action in the first viewport. Text color is
   the dark accent, not cyan: #0891B2 on white is ~3.7:1 — below the 4.5:1 AA floor for
   text this size (border stays cyan; 3:1 suffices for non-text). */
.ysl-nav .ysl-btn--primary {
  background: transparent; color: var(--ysl-accent);
  border: 1.5px solid #06B6D4; border-radius: 999px;
  padding: 8px 18px; font-size: 0.95rem; box-shadow: none;
}
.ysl-nav .ysl-btn--primary:hover {
  background: linear-gradient(135deg, #06B6D4, #0891B2); color: #fff;
  box-shadow: 0 6px 18px -6px rgba(6, 182, 212, 0.6);
}
/* Language switch: quiet like the login link; hreflang target of the current page. */
.ysl-nav__lang { color: var(--ysl-muted); text-decoration: none; font-size: 0.95rem; font-weight: 600; }
.ysl-nav__lang:hover { color: var(--ysl-accent); }
/* The 31-char CTA label cannot fit a 360-px bar: swap to the short span below 560 px.
   Below 480 px only the language link yields (it lives on in the footer) — "Log in"
   stays, because returning users lost their main entry on phones (conversion pass
   2026-07-29). */
.ysl-btn__label--short { display: none; }
@media (max-width: 559px) {
  .ysl-nav .ysl-btn__label--full { display: none; }
  .ysl-nav .ysl-btn__label--short { display: inline; }
}
@media (max-width: 479px) {
  .ysl-nav__lang { display: none; }
  .ysl-nav__right { gap: 12px; }
}

/* --- Buttons --------------------------------------------------------- */
.ysl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 14px 28px; border: 0; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.ysl-btn--primary {
  background: var(--ysl-accent); color: #fff;
  box-shadow: 0 12px 28px -14px rgba(11, 86, 93, 0.7);
}
.ysl-btn--primary:hover { background: var(--ysl-accent-dark); transform: translateY(-1px); }
/* The hero pill carries the system arrow that nudges on hover (same as the CTA band). */
.ysl-hero .ysl-btn--primary::after {
  content: "\2192"; margin-left: 10px; transition: transform 0.2s ease;
}
.ysl-hero .ysl-btn--primary:hover::after { transform: translateX(4px); }
.ysl-btn--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ysl-ring); }
.ysl-btn--ghost { background: #fff; color: var(--ysl-accent-dark); }
.ysl-btn--ghost:hover { background: var(--ysl-accent-soft); }
.ysl-btn--ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6); }
/* Soft: the monthly plan's quiet in-card CTA — present but not competing with the
   featured card's primary pill. */
.ysl-btn--soft { background: var(--ysl-accent-soft); color: var(--ysl-accent-dark); }
.ysl-btn--soft:hover { background: #d2e9eb; }
.ysl-btn--soft:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ysl-ring); }
.ysl-link { color: var(--ysl-accent); font-weight: 600; text-decoration: none; }
.ysl-link:hover { text-decoration: underline; }

/* --- Hero ------------------------------------------------------------ */
/* Light ground with the system's quiet texture: an engineering grid (~4% ink under a
   radial mask) plus one soft cyan and one soft coral glow. Pure CSS layers on the
   section itself — nothing enters the LCP path. */
.ysl-hero {
  position: relative; max-width: none;
  padding-top: clamp(40px, 6vw, 72px);
  background:
    radial-gradient(52% 72% at 10% 6%, rgba(6, 182, 212, 0.10), transparent 60%),
    radial-gradient(44% 64% at 94% 85%, rgba(255, 107, 107, 0.07), transparent 60%),
    linear-gradient(180deg, #ffffff, #f7fafb);
}
.ysl-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(23, 33, 43, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 33, 43, 0.04) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(90% 95% at 50% 30%, #000 25%, transparent 100%);
  mask-image: radial-gradient(90% 95% at 50% 30%, #000 25%, transparent 100%);
}
.ysl-hero__grid {
  position: relative; max-width: var(--ysl-container); margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: clamp(28px, 5vw, 56px); align-items: center;
}
.ysl-lede { font-size: clamp(1.05rem, 2.1vw, 1.25rem); color: var(--ysl-muted); margin: 18px 0 0; max-width: 46ch; }
.ysl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin: 28px 0 18px; }
/* Quiet third hero path: the ungated sample-PDF link (conversion pass 2026-07-29). */
.ysl-hero__sample { margin: 0 0 18px; font-size: 0.92rem; }
.ysl-hero__sample a { color: var(--ysl-accent); font-weight: 600; }
/* The hero trust strip sits left, not centered like the component default. */
.ysl-hero .yac-trust { justify-content: flex-start; margin-top: 6px; }
@media (min-width: 900px) {
  .ysl-hero__grid { grid-template-columns: 1.02fr 0.98fr; }
}

/* --- Recreated app window (hero) ------------------------------------- */
/* Browser chrome + result cards: the product IS the hero visual. Frosted white card
   with the same depth stack as the old preview card. */
.ysl-appwin {
  margin: 0;
  background: #fff;
  border: 1px solid rgba(6, 182, 212, 0.22);
  border-radius: var(--ysl-radius);
  box-shadow: 0 36px 70px -22px rgba(11, 86, 93, 0.4);
  overflow: hidden;
}
.ysl-appwin__bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--ysl-bg); border-bottom: 1px solid var(--ysl-line);
}
.ysl-appwin__dot { width: 10px; height: 10px; border-radius: 50%; background: #d3dfe1; }
.ysl-appwin__dot:first-child { background: #FF6B6B; }
.ysl-appwin__url {
  margin-left: 10px; font-size: 0.72rem; color: var(--ysl-muted); background: #fff;
  border: 1px solid var(--ysl-line); border-radius: 999px; padding: 3px 12px;
  font-family: var(--ysl-mono);
}
.ysl-appwin__body { padding: 16px; display: grid; gap: 12px; }
.ysl-appwin__cap { font-size: 0.8rem; color: var(--ysl-muted); text-align: center; padding: 0 16px 14px; margin: 0; }

/* Result cards: shared between the hero window (small) and the output section (big). */
.ysl-rcard { border: 1px solid var(--ysl-line); border-radius: 10px; padding: 14px 16px 8px; background: #fff; }
.ysl-rcard h4 {
  font-size: 0.85rem; font-weight: 800; margin: 0 0 2px; padding-bottom: 8px;
  border-bottom: 2px solid #06B6D4;
}
.ysl-rcard dl { margin: 0; }
.ysl-rrow {
  display: flex; justify-content: space-between; gap: 16px; padding: 7px 0;
  border-bottom: 1px solid var(--ysl-bg); font-size: 0.82rem;
}
.ysl-rrow:last-child { border-bottom: none; }
.ysl-rrow dt { color: var(--ysl-muted); }
.ysl-rrow dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ysl-rrow sub { font-size: 0.6em; }
.ysl-rcard--big { padding: 18px 20px 12px; box-shadow: 0 18px 40px -18px rgba(11, 86, 93, 0.25); }
.ysl-rcard--big h4 { font-size: 0.95rem; }
.ysl-rcard--big .ysl-rrow { font-size: 0.9rem; padding: 9px 0; }
/* The app's four result cards in its own two-column arrangement (0.3.17 redesign).
   align-items:start so a short card (Basisgurt) does not stretch to its neighbour. */
.ysl-rgrid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1120px) { .ysl-rgrid { grid-template-columns: 1fr 1fr; } }

/* Pocket cross-section, mirroring .sketch/.cardsketch in assets/app.css so the landing
   drawing and the in-tool drawing cannot drift apart. Labels are 18 viewBox units
   (≈14px at the 440px render width), matching the card's value rows. */
.ysl-sketch { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ysl-line); text-align: center; }
.ysl-sketch svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.ysl-sketch figcaption { font-size: 0.72rem; color: var(--ysl-muted); line-height: 1.5; margin-top: 8px; }
.ysl-sk-txt { font-size: 18px; font-weight: 600; fill: var(--ysl-muted); }
.ysl-sk-line { stroke: var(--ysl-muted); stroke-width: 1; fill: none; }
.ysl-sk-dim { stroke: var(--ysl-muted); stroke-width: 1; }
.ysl-sk-fill { fill: rgba(6, 182, 212, 0.10); stroke: #06b6d4; stroke-width: 1.2; }
.ysl-sk-cleat { fill: rgba(6, 182, 212, 0.24); stroke: #0891b2; stroke-width: 1.2; }
/* Inside the paper sheet the drawing must read as print, not as UI. */
.ysl-pdf .ysl-sketch { margin-top: 10px; }
.ysl-pdf .ysl-sketch svg { max-width: 100%; }
.ysl-pdf .ysl-sketch figcaption { font-size: 0.62rem; }

/* --- Industries strip ------------------------------------------------- */
/* Honest logo-wall replacement: one quiet "built for" line on a hairline band. */
.ysl-industries { border-top: 1px solid var(--ysl-line); border-bottom: 1px solid var(--ysl-line); background: #fff; }
.ysl-industries__line {
  max-width: var(--ysl-container); margin: 0 auto; padding: 18px 20px;
  text-align: center; font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ysl-muted);
}

/* --- Problem --------------------------------------------------------- */
.ysl-problem { background: var(--ysl-bg); max-width: none; }
.ysl-problem > * { max-width: var(--ysl-container); margin-left: auto; margin-right: auto; }
/* Short static signature underline — the signature line shrunk to heading scale.
   Consistency rule (P2): every LEFT-ALIGNED section H2 carries it; the centered
   showcase headings (output, pricing) stay clean. */
.ysl-problem .ysl-h2::after,
.ysl-how .ysl-h2::after,
.ysl-pillars .ysl-h2::after,
.ysl-trust .ysl-h2::after,
.ysl-faq .ysl-h2::after {
  content: ""; display: block; width: 64px; height: 3px; border-radius: 2px;
  margin-top: 12px;
  background: linear-gradient(90deg, #06B6D4, #0891B2 45%, #FF6B6B);
}
.ysl-problem__list { list-style: none; padding: 0; margin: 22px auto 0; display: grid; gap: 14px; }
.ysl-problem__item {
  position: relative; overflow: hidden; padding: 16px 18px 16px 46px;
  background: var(--ysl-paper); border: 1px solid var(--ysl-line); border-radius: 12px;
  font-size: 1.02rem;
}
.ysl-problem__item::before {
  content: "–"; position: absolute; left: 18px; top: 15px;
  color: var(--ysl-accent); font-weight: 800;
}
.ysl-problem__item::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #FF6B6B, rgba(255, 107, 107, 0.25));
}
@media (min-width: 720px) { .ysl-problem__list { grid-template-columns: 1fr 1fr; } }

/* --- How it works ---------------------------------------------------- */
.ysl-how__grid { position: relative; list-style: none; padding: 0; margin: 48px 0 0; display: grid; gap: 40px 22px; grid-template-columns: 1fr; }
.ysl-step {
  position: relative; background: var(--ysl-paper);
  border: 1px solid var(--ysl-line); border-radius: var(--ysl-radius);
  padding: 30px 24px 26px;
}
/* Gradient number badge, riding just above the card's top edge. */
.ysl-step__num {
  position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: #fff; font-weight: 700; font-size: 1rem;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px -10px rgba(6, 182, 212, 0.75);
  display: flex; align-items: center; justify-content: center;
}
/* The mini-visual: a tinted stage holding real UI fragments (fields / chips / result). */
.ysl-step__visual {
  background: var(--ysl-bg); border: 1px solid var(--ysl-line); border-radius: 10px;
  padding: 12px; margin: 6px 0 14px; min-height: 128px;
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
.ysl-minifield span { display: block; font-size: 0.66rem; font-weight: 700; color: var(--ysl-muted); margin-bottom: 2px; }
.ysl-minifield div {
  background: #fff; border: 1px solid var(--ysl-line); border-radius: 6px;
  padding: 4px 8px; font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.ysl-chip { border-radius: 9px; padding: 7px 10px; font-size: 0.74rem; text-align: center; font-variant-numeric: tabular-nums; }
.ysl-chip b { display: block; font-size: 0.8rem; }
.ysl-chip sub { font-size: 0.6em; }
.ysl-chip--warn { background: var(--ysl-amber-bg); border: 1.5px solid var(--ysl-amber-line); color: var(--ysl-amber-ink); }
.ysl-chip--ok { background: var(--ysl-green-bg); border: 1.5px solid var(--ysl-green-line); color: var(--ysl-green-ink); }
.ysl-miniresult { background: #fff; border: 1px solid var(--ysl-line); border-radius: 8px; padding: 8px 10px; }
.ysl-miniresult .ysl-rrow { font-size: 0.72rem; padding: 4px 0; }
.ysl-step__title { font-size: 1.2rem; font-weight: 700; margin: 6px 0 8px; }
.ysl-step__body { color: var(--ysl-muted); margin: 0; }
@media (min-width: 760px) {
  .ysl-how__grid { grid-template-columns: repeat(3, 1fr); }
  /* Connecting line through the three badge centers. */
  .ysl-how__grid::before {
    content: ""; position: absolute; top: -8px; left: 6%; right: 6%; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0), #06B6D4 18%, #0891B2 50%, #FF6B6B 82%, rgba(255, 107, 107, 0));
  }
}

/* --- Product proof (output) ------------------------------------------ */
/* The old preview's glass/glow emphasis, carried by a two-pane layout: in-tool cards
   left, the recreated PDF sheet right. */
.ysl-output {
  background:
    radial-gradient(56% 44% at 50% 62%, rgba(6, 182, 212, 0.13), transparent 70%),
    radial-gradient(36% 30% at 66% 88%, rgba(255, 107, 107, 0.08), transparent 70%);
}
.ysl-output__intro { text-align: center; max-width: 62ch; margin: 0 auto; }
.ysl-output__sub { color: var(--ysl-muted); font-size: 1.05rem; margin: 0; }
.ysl-output__grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 40px; align-items: start; }
.ysl-pane-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ysl-muted); margin: 0 0 12px;
}
/* The left pane now carries four cards in two columns, so it needs the wider share;
   below 1120px the cards stack and the old balance is right again. */
@media (min-width: 920px) { .ysl-output__grid { grid-template-columns: 1.1fr 0.9fr; } }
@media (min-width: 1120px) { .ysl-output__grid { grid-template-columns: 1.5fr 0.85fr; } }

/* The one-page PDF datasheet, recreated: paper-white sheet, hard head rule, tight rows. */
.ysl-pdf {
  background: #fff; border: 1px solid var(--ysl-line); border-radius: 6px;
  box-shadow: 0 36px 70px -22px rgba(11, 86, 93, 0.4);
  padding: 22px 24px; font-size: 0.72rem;
}
.ysl-pdf__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-bottom: 2.5px solid var(--ysl-ink); padding-bottom: 8px; margin-bottom: 10px;
}
.ysl-pdf__logo { color: #0891B2; font-weight: 800; letter-spacing: 0.18em; font-size: 0.8rem; }
.ysl-pdf__title { font-weight: 800; font-size: 0.85rem; text-align: right; }
.ysl-pdf__title small { display: block; font-weight: 400; color: var(--ysl-muted); font-size: 0.66rem; }
.ysl-pdf__warn {
  background: var(--ysl-amber-bg); border: 1px solid var(--ysl-amber-line); color: var(--ysl-amber-ink);
  border-radius: 5px; padding: 7px 10px; font-size: 0.68rem; margin: 0 0 12px;
}
.ysl-pdf__cols { display: grid; grid-template-columns: 1fr; gap: 0 22px; }
@media (min-width: 560px) { .ysl-pdf__cols { grid-template-columns: 1fr 1fr; } }

/* Download action under the sheet mock: centred, quiet (soft variant). */
.ysl-pdf__download { text-align: center; margin: 16px 0 0; }

/* Mobile readability floor for the technical mockups (conversion pass 2026-07-29):
   the miniature type (0.62–0.78 rem) rendered below 13 px on phones — too small for
   the page's central product evidence. The one-column phone layouts leave the room. */
@media (max-width: 639px) {
  .ysl-rrow { font-size: 0.85rem; }
  .ysl-miniresult .ysl-rrow { font-size: 0.82rem; }
  .ysl-minifield span { font-size: 0.75rem; }
  .ysl-minifield div { font-size: 0.85rem; }
  .ysl-chip { font-size: 0.82rem; }
  .ysl-chip b { font-size: 0.86rem; }
  .ysl-appwin__cap, .ysl-sketch figcaption { font-size: 0.85rem; }
  .ysl-pdf { font-size: 0.8rem; }
  .ysl-pdf__warn { font-size: 0.78rem; }
  .ysl-pdf__title small { font-size: 0.74rem; }
  .ysl-pdf .ysl-sketch figcaption { font-size: 0.74rem; }
}
.ysl-pdf h5 {
  font-size: 0.7rem; font-weight: 800; border-bottom: 1.5px solid var(--ysl-ink);
  padding-bottom: 3px; margin: 8px 0 4px;
}
.ysl-prow { display: flex; justify-content: space-between; gap: 10px; padding: 2.5px 0; border-bottom: 0.5px solid var(--ysl-bg); }
.ysl-prow dt { color: var(--ysl-muted); }
.ysl-prow dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Capability row under the two panes: pocket designer + expert tuning, side by side. */
.ysl-extras { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 44px; align-items: start; }
@media (min-width: 860px) { .ysl-extras { grid-template-columns: 1fr 1fr; } }
.ysl-extra__body { color: var(--ysl-muted); font-size: 0.95rem; line-height: 1.65; margin: 0 0 16px; }

/* Suggestion cards, mirroring the app's ranked pocket proposals. */
.ysl-sugg { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 540px) { .ysl-sugg { grid-template-columns: 1fr 1fr; } }
.ysl-sugg__card {
  background: #fff; border: 1px solid var(--ysl-line); border-radius: 10px;
  padding: 14px 16px 10px; border-top: 3px solid var(--ysl-green-line);
}
/* The best match carries the app's amber rank marker, not the green "passes" colour. */
.ysl-sugg__card--best { border-top-color: #e0a800; box-shadow: 0 14px 32px -18px rgba(11, 86, 93, 0.3); }
.ysl-sugg__badges { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ysl-sugg__badge {
  background: var(--ysl-accent); color: #fff; border-radius: 999px; padding: 3px 10px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.ysl-sugg__chosen { color: var(--ysl-accent); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.ysl-sugg__name { font-size: 1rem; font-weight: 800; margin: 0; }
.ysl-sugg__sub { color: var(--ysl-muted); font-size: 0.8rem; margin: 2px 0 8px; }
.ysl-sugg__warn {
  background: var(--ysl-amber-bg); border: 1px solid var(--ysl-amber-line); color: var(--ysl-amber-ink);
  border-radius: 6px; padding: 8px 10px; font-size: 0.72rem; line-height: 1.5; margin: 10px 0 4px;
}

/* Tuning panel: static picture of the four live sliders at the example's values. */
.ysl-tune { background: #fff; border: 1px solid var(--ysl-line); border-radius: 10px; padding: 16px 18px 12px; }
.ysl-tune__row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--ysl-bg); }
.ysl-tune__row:last-of-type { border-bottom: none; }
.ysl-tune__label { font-size: 0.82rem; color: var(--ysl-muted); }
.ysl-tune__value { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ysl-tune__track { position: relative; height: 6px; border-radius: 999px; background: #2b3946; margin: 6px 0; }
.ysl-tune__fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #06b6d4; }
.ysl-tune__thumb {
  position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%;
  background: #06b6d4; transform: translate(-50%, -50%);
}
@media (min-width: 480px) {
  .ysl-tune__row { grid-template-columns: 9.5rem 1fr 5rem; align-items: center; gap: 12px; }
  .ysl-tune__value { text-align: right; }
}
.ysl-tune__reset {
  margin: 12px 0 4px; text-align: right; font-size: 0.76rem; font-weight: 700;
  color: var(--ysl-accent);
}

/* --- Design-rules moment ---------------------------------------------- */
.ysl-rules { max-width: none; background: var(--ysl-bg); padding: clamp(44px, 7vw, 88px) 20px; }
.ysl-rules__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.ysl-rules .ysl-h2 { margin-bottom: 10px; }
.ysl-rules__sub { color: var(--ysl-muted); font-size: 1.05rem; margin: 0 auto; max-width: 60ch; }
.ysl-rules__banner {
  background: var(--ysl-amber-bg); border: 1.5px solid var(--ysl-amber-line);
  color: var(--ysl-amber-ink); border-radius: 10px; padding: 18px 22px;
  font-size: 1.05rem; font-weight: 600; text-align: left;
  box-shadow: 0 18px 44px -18px rgba(16, 40, 46, 0.28);
  margin: 28px 0 0;
}
.ysl-rules__note { color: var(--ysl-muted); font-size: 0.95rem; margin: 18px auto 0; max-width: 62ch; }
/* Hard block: the app's nicht-realisierbar panel (assets/app.css .nicht-realisierbar),
   restated in landing tokens. Left-aligned inside the centred section — it is a quoted
   piece of product UI, and centred body text would read as marketing copy again. */
.ysl-rules__lead { margin: 34px auto 14px; font-size: 0.95rem; font-weight: 700; color: var(--ysl-ink); max-width: 62ch; }
.ysl-nr {
  position: relative; overflow: hidden; text-align: left; background: #fff;
  border: 1px solid #f0c6c1; border-top: 4px solid #b42318; border-radius: 14px;
  padding: 22px 24px; box-shadow: 0 18px 40px -20px rgba(11, 86, 93, 0.3);
}
.ysl-nr__title { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; font-weight: 800; color: #7a1f1f; margin: 0; }
.ysl-nr__ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fdeaea; color: #b42318;
  font-size: 0.9rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.ysl-nr__reason { margin: 12px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--ysl-ink); }
.ysl-nr__lede { margin: 12px 0 0; font-size: 0.84rem; line-height: 1.6; color: var(--ysl-muted); }
.ysl-nr__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
/* Looks like the product's action buttons, but is inert markup (no href, no handler). */
.ysl-nr__btn {
  background: var(--ysl-accent); color: #fff; border-radius: 10px; padding: 10px 20px;
  font-size: 0.84rem; font-weight: 700;
}
@media (max-width: 640px) { .ysl-nr__actions { flex-direction: column; } .ysl-nr__btn { text-align: center; } }

/* --- Value pillars --------------------------------------------------- */
.ysl-pillars { max-width: none; background: var(--ysl-paper); }
.ysl-pillars > .ysl-h2 { max-width: var(--ysl-container); margin-left: auto; margin-right: auto; }
.ysl-pillars__grid { max-width: var(--ysl-container); margin: 26px auto 0; display: grid; gap: 22px; grid-template-columns: 1fr; }
.ysl-pillar {
  background: var(--ysl-paper); border: 1px solid var(--ysl-line);
  border-radius: var(--ysl-radius); padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ysl-pillar:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(11, 86, 93, 0.35); }
/* Brand-spectrum dots: cyan → teal, with the COMMERCIAL pillar in coral. */
.ysl-pillar::before {
  content: ""; display: block; width: 14px; height: 14px; border-radius: 50%;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #22D3EE, #06B6D4 60%, #0891B2);
  box-shadow: 0 6px 14px -4px rgba(6, 182, 212, 0.7);
}
.ysl-pillar:nth-child(2)::before { background: linear-gradient(135deg, #06B6D4, #0891B2); }
.ysl-pillar:nth-child(3)::before {
  background: linear-gradient(135deg, #0891B2, #0f6f78);
  box-shadow: 0 6px 14px -4px rgba(15, 111, 120, 0.7);
}
.ysl-pillar:nth-child(4)::before {
  background: linear-gradient(135deg, #ff8787, #FF6B6B);
  box-shadow: 0 6px 14px -4px rgba(255, 107, 107, 0.6);
}
.ysl-pillar__title { font-size: 1.15rem; font-weight: 700; margin: 0 0 8px; color: var(--ysl-accent-dark); }
.ysl-pillar__body { color: var(--ysl-muted); margin: 0; }
@media (min-width: 640px) { .ysl-pillars__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) {
  .ysl-pillars__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .ysl-pillar { padding: 22px 20px; }
  .ysl-pillar__title { font-size: 1.05rem; }
}

/* --- Founder ---------------------------------------------------------- */
/* Reference-free trust anchor: one calm card, avatar left, copy right. The avatar is
   the PHOTO SLOT — swap the initials circle for a real <img>-free CSS photo once
   Markus' picture arrives (background-image on this element, data-URI or asset). */
.ysl-founder { padding-top: 0; }
.ysl-founder__card {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
  background: linear-gradient(180deg, #ffffff 30%, #f4f9fa);
  border: 1px solid var(--ysl-line); border-radius: var(--ysl-radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 18px 40px -18px rgba(11, 86, 93, 0.25);
}
.ysl-founder__avatar {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; display: block;
  border: 4px solid #fff;
  box-shadow: 0 10px 24px -10px rgba(6, 182, 212, 0.75);
}
.ysl-founder__copy .ysl-h2 { margin-bottom: 10px; }
.ysl-founder__body { color: var(--ysl-muted); margin: 0 0 14px; max-width: 60ch; }
.ysl-founder__sig { font-weight: 600; color: var(--ysl-accent-dark); margin: 0; }
/* The contact link under the signature — the channel behind the "I answer every
   inquiry personally" promise. */
.ysl-founder__contact { margin: 8px 0 0; }
@media (min-width: 720px) { .ysl-founder__card { grid-template-columns: auto 1fr; gap: 32px; } }

/* --- Pilot / founding-customer offer ---------------------------------- */
/* A soft-teal stage — clearly distinct, but the deep-dark finale stays reserved for
   the CTA band. */
.ysl-pilot { max-width: none; background: var(--ysl-accent-soft); padding: clamp(44px, 7vw, 80px) 20px; }
.ysl-pilot__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.ysl-pilot__body { color: var(--ysl-muted); font-size: 1.05rem; margin: 0 auto; max-width: 62ch; }
.ysl-pilot__actions { margin-top: 26px; }
/* Mechanics line under the founding CTA: quiet small print, not a second message. */
.ysl-pilot__mechanics { margin: 12px auto 0; font-size: 0.9rem; color: var(--ysl-muted); max-width: 62ch; }

/* --- Trust block ------------------------------------------------------ */
.ysl-trust__sub { color: var(--ysl-muted); font-size: 1.05rem; margin: 0; max-width: 60ch; }
.ysl-trust__grid { display: grid; gap: 18px; grid-template-columns: 1fr; margin-top: 32px; }
.ysl-tcard { border: 1px solid var(--ysl-line); background: var(--ysl-paper); border-radius: var(--ysl-radius); padding: 22px; }
.ysl-tcard h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }
.ysl-tcard h3::before { content: "\2713"; color: #06B6D4; margin-right: 8px; font-weight: 800; }
.ysl-tcard p { font-size: 0.9rem; color: var(--ysl-muted); margin: 0; }
@media (min-width: 640px) { .ysl-trust__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .ysl-trust__grid { grid-template-columns: repeat(4, 1fr); } }

/* --- Pricing --------------------------------------------------------- */
/* The buy moment sits on a branded stage: the same quiet glow pair as hero/output
   (cyan top-left, coral bottom-right) instead of flat gray. */
.ysl-pricing {
  text-align: center; max-width: none;
  background:
    radial-gradient(46% 40% at 12% 10%, rgba(6, 182, 212, 0.10), transparent 70%),
    radial-gradient(40% 34% at 88% 92%, rgba(255, 107, 107, 0.06), transparent 70%),
    var(--ysl-bg);
}
.ysl-pricing > * { max-width: var(--ysl-container); margin-left: auto; margin-right: auto; }
/* "auto" keeps the auto-centering from the > * rule alive — a bare "margin: 0" here
   (and on the vat/founding notes below) overrode it, so these blocks sat left of the
   centered card grid on wide viewports. */
.ysl-pricing__sub { color: var(--ysl-muted); font-size: 1.05rem; margin: 0 auto; }
.ysl-pricing__grid { display: grid; gap: 22px; grid-template-columns: 1fr; margin: 36px auto 0; max-width: 780px; }
.ysl-plan {
  position: relative; text-align: left; cursor: default;
  background: var(--ysl-paper); border: 1px solid var(--ysl-line);
  border-radius: var(--ysl-radius); padding: 28px;
  display: flex; flex-direction: column;
}
.ysl-plan--featured {
  border-color: rgba(15, 111, 120, 0.55);
  /* Signature line on the top edge (quoting nav/CTA band) marks THE recommended card.
     A background layer, not a pseudo-element: the border-radius clips it cleanly and
     the overflowing badge stays untouched. */
  background:
    linear-gradient(90deg, #06B6D4, #0891B2 30%, #FF6B6B 55%, #22D3EE 80%, #06B6D4) top / 100% 3px no-repeat,
    linear-gradient(180deg, #ffffff 30%, #eef7f8);
  box-shadow: 0 26px 56px -20px rgba(15, 111, 120, 0.4);
}
.ysl-plan--featured .ysl-plan__name { color: var(--ysl-accent-dark); }
.ysl-plan__badge {
  position: absolute; top: -15px; right: 20px;
  background: linear-gradient(135deg, #06B6D4, #0891B2);
  color: #fff; font-size: 0.78rem; font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
  border: 2px solid #fff;
  box-shadow: 0 10px 24px -10px rgba(6, 182, 212, 0.75);
}
.ysl-plan__name { font-size: 1.05rem; font-weight: 700; color: var(--ysl-muted); }
.ysl-plan__price { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 800; margin-top: 6px; font-variant-numeric: tabular-nums; }
.ysl-plan__per { font-size: 1rem; font-weight: 600; color: var(--ysl-muted); }
.ysl-plan__note { margin: 6px 0 18px; color: var(--ysl-muted); font-size: 0.92rem; }
/* Feature bullets: check list, ink-colored lead words stay in the copy itself. */
.ysl-plan__feats { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 9px; }
.ysl-plan__feats li { font-size: 0.95rem; color: var(--ysl-muted); padding-left: 24px; position: relative; }
.ysl-plan__feats li::before { content: "\2713"; position: absolute; left: 0; color: #06B6D4; font-weight: 800; }
/* Per-card CTA pinned to the card bottom so both cards align. */
.ysl-plan .ysl-btn { margin-top: auto; justify-content: center; }
.ysl-pricing .ysl-plan--featured .ysl-btn--primary::after {
  content: "\2192"; margin-left: 10px; transition: transform 0.2s ease;
}
.ysl-pricing .ysl-plan--featured .ysl-btn--primary:hover::after { transform: translateX(4px); }
/* Payback line (2026-08-05): the license cost argument shown as the calculation it is —
   effort by hand on the left, break-even on the right. Ranked above the trial terms and
   the tax note, which are separated from it by hairlines instead of by whitespace alone. */
.ysl-payback {
  margin: 30px auto 0; max-width: 700px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 18px;
}
.ysl-payback__cell { padding: 14px 12px; }
.ysl-payback__cell b { display: block; font-size: 1.42rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ysl-ink); }
.ysl-payback__cell span { display: block; margin-top: 2px; font-size: 0.84rem; color: var(--ysl-muted); }
.ysl-payback__cell--win b { color: var(--ysl-accent); }
.ysl-payback__arrow { color: #aab3bc; font-size: 1.3rem; line-height: 1; }
/* Short signature rule: the same gradient as the glass header band (.ysl-nav::before), one
   pixel thinner and short instead of full width — it marks where one kind of statement ends
   and the next begins without cutting the section in three. The mask fades both ends, which
   is what the short connector line in "how it works" does; a hard-cut color bar would read
   as a broken header band. Static on purpose: the header flows because it frames the page,
   two animated dividers in the buy moment would pull the eye off the price. */
.ysl-hairline {
  width: min(41%, 264px); height: 2px; border: 0; border-radius: 999px; margin: 26px auto;
  background: linear-gradient(90deg, #06B6D4, #0891B2 30%, #FF6B6B 55%, #22D3EE 80%, #06B6D4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.ysl-pricing__trial {
  list-style: none; padding: 0; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font-size: 0.9rem; font-weight: 600; color: var(--ysl-accent-dark);
}
.ysl-pricing__trial li { padding-left: 22px; position: relative; }
.ysl-pricing__trial li::before { content: "\2713"; position: absolute; left: 0; color: #06B6D4; font-weight: 800; }
.ysl-pricing__vat { margin: 0 auto; max-width: 64ch; font-size: 0.84rem; line-height: 1.55; color: #7a838d; }
@media (max-width: 619px) {
  /* Stacked on phones the arrow must point down, and the check row reads as a list. */
  .ysl-payback { grid-template-columns: 1fr; gap: 4px; }
  .ysl-payback__arrow { transform: rotate(90deg); }
  .ysl-pricing__trial { flex-direction: column; align-items: center; gap: 6px; }
}
@media (min-width: 620px) {
  .ysl-pricing__grid { grid-template-columns: 1fr 1fr; }
  .ysl-plan--featured { transform: translateY(-8px); }
}

/* --- FAQ ------------------------------------------------------------- */
.ysl-faq { max-width: none; background: var(--ysl-paper); }
.ysl-faq > * { max-width: 760px; margin-left: auto; margin-right: auto; }
.ysl-faq__list { margin-top: 22px; }
.ysl-faq__item {
  border: 1px solid var(--ysl-line); border-radius: 12px; padding: 4px 18px;
  margin-bottom: 12px; background: var(--ysl-paper);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ysl-faq__item:hover { border-color: rgba(6, 182, 212, 0.45); }
.ysl-faq__item[open] {
  border-color: rgba(6, 182, 212, 0.45);
  box-shadow: 0 14px 34px -20px rgba(11, 86, 93, 0.35);
}
.ysl-faq__q { cursor: pointer; font-weight: 700; padding: 14px 0; list-style: none; position: relative; padding-right: 32px; }
.ysl-faq__q::-webkit-details-marker { display: none; }
.ysl-faq__q:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ysl-ring); border-radius: 8px; }
.ysl-faq__q::after {
  content: "+"; position: absolute; right: 2px; top: 12px;
  color: var(--ysl-accent); font-size: 1.3rem; font-weight: 700;
  transition: transform 0.2s ease;
}
.ysl-faq__item[open] .ysl-faq__q::after { transform: rotate(45deg); }
.ysl-faq__a { color: var(--ysl-muted); padding: 0 0 16px; margin: 0; }

/* --- Lead-magnet band ------------------------------------------------- */
/* A dashed-cyan "coupon" card: visually an aside, not a competing CTA stage. */
.ysl-magnet-band { max-width: var(--ysl-container); margin: 0 auto; padding: 0 20px clamp(24px, 4vw, 44px); }
.ysl-magnet {
  border: 1.5px dashed #06B6D4; border-radius: var(--ysl-radius);
  background: var(--ysl-accent-soft);
  padding: clamp(24px, 4vw, 36px);
  display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center;
}
.ysl-magnet__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 6px; }
.ysl-magnet__body { font-size: 0.95rem; color: var(--ysl-muted); margin: 0; max-width: 52ch; }
.ysl-magnet__form { display: flex; flex-wrap: wrap; gap: 10px; }
/* Honeypot: moved out of view, not display:none — some bots skip hidden fields. */
.ysl-magnet__hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ysl-magnet__email {
  flex: 1 1 220px; border: 1px solid var(--ysl-line); border-radius: 999px;
  padding: 12px 18px; font: inherit; font-size: 0.95rem; background: #fff; min-width: 0;
}
.ysl-magnet__email:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ysl-ring); }
.ysl-magnet__submit { padding: 12px 22px; font-size: 0.95rem; white-space: nowrap; }
.ysl-magnet__privacy { margin: 10px 0 0; font-size: 0.78rem; color: var(--ysl-muted); }
.ysl-magnet__notice { margin: 0 0 12px; font-weight: 600; font-size: 0.95rem; border-radius: 10px; padding: 12px 16px; }
.ysl-magnet__notice--ok { background: var(--ysl-green-bg); border: 1px solid var(--ysl-green-line); color: var(--ysl-green-ink); }
.ysl-magnet__notice--err { background: var(--ysl-amber-bg); border: 1px solid var(--ysl-amber-line); color: var(--ysl-amber-ink); }
@media (min-width: 860px) { .ysl-magnet { grid-template-columns: 1.1fr 0.9fr; } }

/* --- Final CTA band -------------------------------------------------- */
.ysl-cta-band { max-width: none; padding: 0 20px; }
.ysl-cta-band__inner {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: var(--ysl-container);
  margin: clamp(24px, 4vw, 48px) auto;
  padding: clamp(52px, 8vw, 96px) 24px;
  text-align: center; color: #fff;
  border-radius: calc(var(--ysl-radius) + 4px);
  background:
    radial-gradient(90% 130% at 12% 0%, rgba(6, 182, 212, 0.35), transparent 55%),
    radial-gradient(80% 120% at 88% 100%, rgba(255, 107, 107, 0.22), transparent 55%),
    linear-gradient(150deg, #0d3d45, #0a2e34 55%, #0b565d);
  box-shadow: 0 32px 80px -32px rgba(11, 86, 93, 0.6);
}
.ysl-cta-band__inner::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #06B6D4, #0891B2 30%, #FF6B6B 55%, #22D3EE 80%, #06B6D4);
  background-size: 220% 100%;
  animation: ysl-flow 9s linear infinite;
}
.ysl-cta-band__inner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(75% 95% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(75% 95% at 50% 45%, #000 30%, transparent 100%);
}
.ysl-cta-band__eyebrow {
  text-transform: uppercase; letter-spacing: 1.4px; font-size: 0.8rem; font-weight: 700;
  color: #7de3f0; margin: 0 0 14px;
}
.ysl-cta-band__title {
  font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800;
  letter-spacing: -0.6px; line-height: 1.12;
  margin: 0 auto 14px; max-width: 22ch; text-wrap: balance;
}
.ysl-cta-band__sub {
  margin: 0 auto; max-width: 52ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 2vw, 1.15rem);
}
.ysl-cta-band__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 28px; margin: 32px 0 6px;
}
.ysl-cta-band .ysl-btn--ghost {
  padding: 16px 32px; border-radius: 999px; font-size: 1.05rem;
  box-shadow: 0 14px 38px -14px rgba(2, 20, 24, 0.7);
  transition: background 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.ysl-cta-band .ysl-btn--ghost::after {
  content: "\2192"; margin-left: 10px; transition: transform 0.2s ease;
}
.ysl-cta-band .ysl-btn--ghost:hover {
  background: #fff; transform: translateY(-2px);
  box-shadow: 0 20px 48px -16px rgba(6, 182, 212, 0.55);
}
.ysl-cta-band .ysl-btn--ghost:hover::after { transform: translateX(4px); }
/* Quiet "talk first" line under the loud pill: readable on the dark band, link in the
   band's light cyan so it reads as action without competing with the primary CTA. */
.ysl-cta-band__alt { margin: 18px 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.72); }
.ysl-cta-band__alt a { color: #7de3f0; font-weight: 600; text-decoration: none; }
.ysl-cta-band__alt a:hover { text-decoration: underline; }
/* Trust strip on dark ground (3-class selectors beat the generic block below). */
.ysl-page .ysl-cta-band .yac-trust { justify-content: center; margin-top: 22px; color: rgba(255, 255, 255, 0.85); }
.ysl-page .ysl-cta-band .yac-trust__check { color: #22d3ee; }

@keyframes ysl-flow {
  from { background-position: 0% 0; }
  to   { background-position: 200% 0; }
}

/* --- Footer + reused T2 components (logo / trust) --------------------- */
.ysl-page .yac-trust { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.9rem; color: var(--ysl-muted); }
.ysl-page .yac-trust__item { display: inline-flex; align-items: center; gap: 6px; }
.ysl-page .yac-trust__check { color: var(--ysl-accent); font-weight: 700; }
/* Identity line above the legal links (V2 task 10). */
.ysl-footer-id {
  max-width: var(--ysl-container); margin: 0 auto; padding: 28px 20px 0;
  text-align: center; font-size: 0.9rem; color: var(--ysl-muted);
}
/* Language switch above the legal links — the mobile-reachable twin of the nav link. */
.ysl-footer-lang { margin: 6px auto 0; text-align: center; font-size: 0.9rem; }
.ysl-footer-lang__link { color: var(--ysl-muted); text-decoration: none; font-weight: 600; }
.ysl-footer-lang__link:hover { color: var(--ysl-accent); text-decoration: underline; }
.ysl-page .yac-footer {
  max-width: var(--ysl-container); margin: 0 auto; padding: 12px 20px 40px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  font-size: 0.85rem; color: var(--ysl-muted);
}
.ysl-page .yac-footer a { color: var(--ysl-muted); text-decoration: none; padding: 2px 8px; }
.ysl-page .yac-footer a:hover { color: var(--ysl-accent); text-decoration: underline; }
.ysl-page .yac-footer__sep { color: var(--ysl-line); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ysl-btn { transition: none; }
  .ysl-nav::before,
  .ysl-nav .yac-logo { animation: none; }
  .ysl-btn--primary:hover { transform: none; }
  .ysl-hero .ysl-btn--primary::after,
  .ysl-hero .ysl-btn--primary:hover::after { transition: none; transform: none; }
  .ysl-pillar { transition: none; }
  .ysl-pillar:hover { transform: none; box-shadow: none; }
  .ysl-pricing .ysl-plan--featured .ysl-btn--primary::after,
  .ysl-pricing .ysl-plan--featured .ysl-btn--primary:hover::after { transition: none; transform: none; }
  .ysl-faq__item { transition: none; }
  .ysl-faq__q::after { transition: none; }
  .ysl-pricing__founding a { transition: none; }
  .ysl-cta-band__inner::before { animation: none; }
  .ysl-cta-band .ysl-btn--ghost:hover { transform: none; }
  .ysl-cta-band .ysl-btn--ghost::after,
  .ysl-cta-band .ysl-btn--ghost:hover::after { transition: none; transform: none; }
}

/* Founding program (2026-07-18): live slot counter in the pilot section and the
   founding jump link under the pricing grid. Counter = quiet emphasis, no badge —
   honest scarcity needs no shouting. */
.ysl-pilot__slots { margin: 10px auto 0; font-weight: 600; color: var(--ysl-accent); }
/* Auto-centering fix (see vat note above). The deal link is a dashed-cyan coupon chip
   quoting the lead-magnet band — the founding offer IS a voucher, and a default-
   underlined eleven-word sentence carried no CI at the buy moment. */
.ysl-pricing__founding { margin: 26px auto 0; text-align: center; font-weight: 600; }
.ysl-pricing__founding a {
  display: inline-block; padding: 10px 18px;
  border: 1.5px dashed #06B6D4; border-radius: 12px;
  background: var(--ysl-accent-soft); color: var(--ysl-accent-dark);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ysl-pricing__founding a:hover { background: #d2e9eb; border-color: #0891B2; }
.ysl-pricing__founding a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ysl-ring); }