/* Landing page design system (T4). The same calm teal language as the account UI (T2),
   but a full-width marketing layout instead of a centered card. Scoped under .ysl-page
   with all tokens bound there so nothing leaks; system fonts only (no webfonts) to keep
   the LCP budget intact. This page is served headless (theme CSS stripped), so this file
   also styles the reused T2 component output (.yac-logo / .yac-footer / .yac-trust).
   Enqueued only on the landing page; markup comes from includes/access/ui/landing.php. */

.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;

  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; }
.ysl-page img { max-width: 100%; height: auto; }

/* 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; }
.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 — without its sticky/menu behavior. */
.ysl-nav {
  background: rgba(255, 255, 255, 0.78);
  -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: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* 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;
}
/* 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. */
.ysl-nav .ysl-btn--primary {
  background: transparent; color: #0891B2;
  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);
}

/* --- Buttons + quiet link -------------------------------------------- */
.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); }
.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. Full-bleed so the texture runs edge
   to edge; the grid inside re-applies the container width. */
.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; }
.ysl-hero__media {
  border-radius: var(--ysl-radius); overflow: hidden;
  border: 1px solid rgba(6, 182, 212, 0.18);
  box-shadow: 0 24px 60px rgba(11, 86, 93, 0.16);
}
.ysl-hero__media img { display: block; width: 100%; }
/* 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.05fr 1fr; }
}

/* --- 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 (problem, how,
   pillars, FAQ); the centered showcase headings (preview, pricing) stay clean —
   those sections get their emphasis from glass/depth instead. */
.ysl-problem .ysl-h2::after,
.ysl-how .ysl-h2::after,
.ysl-pillars .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;
}
/* Coral-tinted left edge: pain points carry the accent color, sparingly. */
.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 ---------------------------------------------------- */
/* Row gap 40px: the badges overhang their card by 26px, so stacked cards (mobile)
   need the extra air between rows; on desktop the single row only uses the 22px columns. */
.ysl-how__grid { position: relative; list-style: none; padding: 0; margin: 48px 0 0; display: grid; gap: 40px 22px; grid-template-columns: 1fr; counter-reset: none; }
.ysl-step {
  position: relative; background: var(--ysl-paper);
  border: 1px solid var(--ysl-line); border-radius: var(--ysl-radius);
  padding: 30px 24px 26px; text-align: center;
}
.ysl-step__icon { width: 128px; height: 128px; margin: 0 auto 8px; }
.ysl-step__icon img { width: 128px; height: 128px; }
/* Gradient number badge, riding just above the card's top edge. The white ring makes
   it punch cleanly out of the connecting line on desktop. */
.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;
}
.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 (they sit 7px above the card
     tops, so the line floats in the free band and fades out toward both ends).
     The badges paint above it — tree order, no z-index needed. */
  .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));
  }
}

/* --- Value pillars --------------------------------------------------- */
.ysl-pillars { background: var(--ysl-bg); max-width: none; }
.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: the four cards trace cyan → teal, with the COMMERCIAL pillar
   in coral (the conversion accent) — the gradient distributed across the section
   instead of repeated as a line (P2 guardrail: the line budget is spent). */
.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; } }
/* True 4-up on wide desktop (plan spec); slightly tighter cards so the long German
   pillar titles still fit on one line each. */
@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; }
}

/* --- Product preview ------------------------------------------------- */
/* The emphasis here is GLASS, not the line (P2 guardrail): the result card becomes
   a frosted surface with a cyan hairline, floating over a soft cyan/coral ambient
   glow painted on the section. A white "second sheet" peeks out below the card
   (box-shadow stack) — the one-page PDF datasheet the note underneath promises.
   Pure CSS layers; no images, no requests. */
.ysl-preview {
  background:
    radial-gradient(56% 44% at 50% 62%, rgba(6, 182, 212, 0.16), transparent 70%),
    radial-gradient(36% 30% at 66% 88%, rgba(255, 107, 107, 0.10), transparent 70%);
}
.ysl-preview__intro { text-align: center; max-width: 60ch; margin: 0 auto; }
.ysl-preview__sub { color: var(--ysl-muted); font-size: 1.05rem; margin: 0; }
/* Shadow stack, bottom-up: soft depth shadow, then a 1px cyan hairline around the
   "second sheet", then the white sheet itself peeking ~9px below the glass card. */
.ysl-preview__card {
  margin: 34px auto 0; max-width: 480px;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border: 1px solid rgba(6, 182, 212, 0.22);
  border-radius: var(--ysl-radius); padding: 24px 26px;
  box-shadow:
    0 16px 0 -7px rgba(255, 255, 255, 0.9),
    0 16px 0 -6px rgba(6, 182, 212, 0.22),
    0 36px 70px -22px rgba(11, 86, 93, 0.4);
}
.ysl-preview__caption { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; color: var(--ysl-accent); margin: 0 0 12px; }
.ysl-result { margin: 0; }
.ysl-result__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(23, 33, 43, 0.08); }
.ysl-result__row:last-child { border-bottom: 0; }
.ysl-result dt { color: var(--ysl-muted); }
.ysl-result dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.ysl-preview__note { margin: 16px 0 0; font-size: 0.9rem; color: var(--ysl-muted); }

/* --- Pricing --------------------------------------------------------- */
.ysl-pricing { text-align: center; }
.ysl-pricing__grid { display: grid; gap: 22px; grid-template-columns: 1fr; margin: 28px auto 0; max-width: 720px; }
/* Info panels, not controls: these are read-only price cards — the only action in this
   section is the trial CTA button below. cursor:default + no ring keeps them from reading
   as clickable/selectable buttons (they were never links). */
.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;
}
/* Featured = the yearly plan, elevated by DEPTH (teal-tinted surface, colored
   shadow, raised on desktop) — deliberately NOT another dark stage; the CTA band
   stays the page's only one. */
.ysl-plan--featured {
  border-color: rgba(15, 111, 120, 0.55);
  background: 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); }
/* Same gradient-badge ingredient as the how-it-works step numbers (P1): cyan
   gradient, white ring, soft glow — the badge family ties top and bottom together. */
.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; }
.ysl-plan__per { font-size: 1rem; font-weight: 600; color: var(--ysl-muted); }
.ysl-plan__hint { margin-top: 6px; color: var(--ysl-accent-dark); font-weight: 600; font-size: 0.92rem; }
.ysl-pricing__trial { margin: 30px 0 0; font-weight: 600; }
.ysl-pricing__cta { margin: 16px 0 10px; }
/* Same arrow gesture as the hero and band CTAs — one system-wide button language. */
.ysl-pricing .ysl-btn--primary::after {
  content: "\2192"; margin-left: 10px; transition: transform 0.2s ease;
}
.ysl-pricing .ysl-btn--primary:hover::after { transform: translateX(4px); }
.ysl-pricing__risk { color: var(--ysl-muted); margin: 0; font-size: 0.92rem; }
@media (min-width: 620px) {
  .ysl-pricing__grid { grid-template-columns: 1fr 1fr; }
  /* Static raise (not motion): the featured plan literally stands above the other. */
  .ysl-plan--featured { transform: translateY(-8px); }
}

/* --- FAQ ------------------------------------------------------------- */
/* Reading zone on a full-bleed gray band (restores the page's gray/white section
   rhythm after pillars). White cards pop on the gray; cyan appears only on
   interaction — hover, open, keyboard focus. */
.ysl-faq { max-width: none; background: var(--ysl-bg); }
.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; }
/* One marker, two states: the + rotates 45° into an × when the item opens. */
.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; }

/* --- Final CTA band -------------------------------------------------- */
/* The page's finale: a deep-teal stage carrying the site's signature element — the
   slowly flowing cyan→coral gradient line from the glass site header — plus soft
   brand-color glows and a faint engineering grid. Pure CSS (no images, no JS), so
   the LCP budget stays untouched. */
.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);
}
/* Signature line: identical gradient + flow rhythm as the glass header's top edge. */
.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;
}
/* Engineering grid, fading toward the edges. z-index -1 inside the isolated band
   paints it above the gradient background but below all content. */
.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;
}
/* The loudest button on the page: white pill with an arrow that nudges on hover. */
.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); }
.ysl-cta-band__demo { color: rgba(255, 255, 255, 0.85); font-weight: 600; text-decoration: none; }
.ysl-cta-band__demo:hover { color: #fff; text-decoration: underline; }
/* Trust strip on dark ground. The 3-class selectors are deliberate: the generic
   `.ysl-page .yac-trust` block below would otherwise win the cascade and paint the
   items in muted gray — invisible on the teal stage. */
.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; }
}

/* --- Reused T2 components (footer / 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; }
.ysl-page .yac-footer {
  max-width: var(--ysl-container); margin: 0 auto; padding: 28px 20px 40px;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  font-size: 0.85rem; color: var(--ysl-muted); border-top: 1px solid var(--ysl-line);
}
.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) {
  .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-btn--primary::after,
  .ysl-pricing .ysl-btn--primary:hover::after { transition: none; transform: none; }
  .ysl-faq__item { transition: none; }
  .ysl-faq__q::after { 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; }
}