html { scroll-behavior: smooth; }
  body { margin: 0; text-wrap: pretty; }
  a { color: var(--color-accent-700); text-underline-offset: 3px; }
  a:hover { color: var(--color-accent-800); }

  #lsd-root section[id] { scroll-margin-top: 84px; }

  .lsd-skip {
    position: absolute; left: 12px; top: -48px; z-index: 200;
    background: var(--color-neutral-900); color: var(--color-neutral-100);
    padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 14px;
    transition: top 0.2s ease;
  }
  .lsd-skip:focus { top: 12px; color: var(--color-neutral-100); }

  @keyframes lsd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.7); }
  }
  @keyframes lsd-ring {
    0% { opacity: 0.85; transform: scale(0.85); }
    70%, 100% { opacity: 0; transform: scale(1.35); }
  }
  @keyframes lsd-drift {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-28px, 26px, 0) scale(1.06); }
  }
  @keyframes lsd-drift-2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(22px, -18px, 0) scale(1.08); }
  }
  @keyframes lsd-arrow-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; color: var(--color-neutral-400); }
    50% { transform: translateY(9px); opacity: 1; color: var(--color-accent-600); }
  }
  @keyframes lsd-flow-move {
    0%, 100% { transform: translateX(0); opacity: 0.5; color: var(--color-neutral-400); }
    50% { transform: translateX(8px); opacity: 1; color: var(--color-accent-600); }
  }
  @keyframes lsd-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent-2-500) 45%, transparent); }
    50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-accent-2-500) 0%, transparent); }
  }
  @keyframes lsd-sweep {
    0% { transform: translateX(-130%) skewX(-12deg); }
    35%, 100% { transform: translateX(220%) skewX(-12deg); }
  }
  @keyframes lsd-scrollbar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  .lsd-photo-hover { display: block; }
  .lsd-photo-hover img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .lsd-photo-hover:hover img { transform: scale(1.045); }

  /* icon micro-nudge on card hover — reuses the existing .lsd-h-step lift */
  .lsd-h-step svg, .lsd-h-feat svg { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .lsd-h-step:hover svg, .lsd-h-feat:hover svg { transform: scale(1.12) rotate(-4deg); }

  /* nav scroll-spy */
  .lsd-nav-links a.is-active { color: var(--color-accent-700); position: relative; }
  .lsd-nav-links a.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
    background: var(--color-accent-700); border-radius: 999px;
  }

  /* wrapping chip group — for a radio/checkbox set with more options than fit one row.
     .seg/.seg-opt (design-system segmented control) is a single-row-only component:
     overflow:hidden + shared pill border-radius + divider borders between siblings all
     assume one line, so forcing it to wrap (flex-wrap on 6 options) clipped corners and
     left stray divider lines at the start of wrapped rows. This is its own independently
     bordered/rounded pill per option instead, styled like the rest of the page's pills. */
  .lsd-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
  .lsd-chip {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    padding: 8px 14px; font-size: 13px; color: var(--color-text);
    background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 999px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .lsd-chip input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
  .lsd-chip:has(input:checked) { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
  .lsd-chip:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
  .lsd-chip:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  .lsd-persona { appearance: none; -webkit-appearance: none; transition: background-color 0.2s ease, color 0.2s ease; }
  .lsd-persona.is-active { background: var(--color-accent-700) !important; color: var(--color-neutral-100) !important; }
  #lsd-persona-detail { transition: opacity 0.2s ease; }

  .lsd-arrow-down { animation: lsd-arrow-bounce 1.5s ease-in-out infinite; }
  .lsd-flow-arrow { animation: lsd-flow-move 1.3s ease-in-out infinite; }
  .lsd-pulse-glow { animation: lsd-glow 2.4s ease-in-out infinite; }

  /* scroll progress bar */
  #lsd-scrollbar { position: sticky; top: 0; z-index: 55; height: 3px; background: transparent; }
  #lsd-scrollbar-fill {
    height: 100%; width: 0%; transform-origin: left;
    background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-2-600));
    transition: width 0.1s linear;
  }

  .lsd-motion [data-reveal] { opacity: 0; transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
  .lsd-motion [data-reveal="up"] { transform: translateY(26px); }
  .lsd-motion [data-reveal="right"] { transform: translateX(34px) scale(0.97); }
  .lsd-motion [data-reveal="zoom"] { transform: scale(1.06); }
  /* promote to the compositor only while still waiting to reveal — the selector
     stops matching once .is-in lands, so the layer is freed right after instead
     of sitting promoted for the rest of the page's life */
  .lsd-motion [data-reveal]:not(.is-in) { will-change: opacity, transform; }
  .lsd-motion [data-reveal].is-in { opacity: 1; transform: none; }

  /* hover treatments (ported from the design's style-hover bindings).
     Only `transform`/`opacity`/`background-color` are transitioned — those run on
     the compositor. box-shadow was dropped from every transition below: animating
     it forces a main-thread repaint on every frame, which is what made hovers feel
     janky. The shadow now appears via a separate ::after layer whose opacity
     fades in instead, so the "lift" still reads as smooth. */
  .lsd-h-cta, .lsd-h-badge, .lsd-h-step, .lsd-h-feat, .lsd-h-wa {
    position: relative; will-change: transform;
  }
  .lsd-h-cta::after, .lsd-h-badge::after, .lsd-h-step::after, .lsd-h-feat::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: var(--shadow-md); opacity: 0; transition: opacity 0.25s ease; pointer-events: none;
  }
  .lsd-h-feat::after { box-shadow: var(--shadow-sm); }
  .lsd-h-cta:hover::after, .lsd-h-badge:hover::after, .lsd-h-step:hover::after, .lsd-h-feat:hover::after { opacity: 1; }

  .lsd-h-cta { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden; }
  .lsd-h-cta:hover { transform: translateY(-3px); }
  .lsd-h-cta::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, white 45%, transparent), transparent);
    animation: lsd-sweep 4.5s ease-in-out infinite; pointer-events: none;
  }
  .lsd-h-badge { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
  .lsd-h-badge:hover { transform: translateY(-10px) scale(1.04); }
  .lsd-h-step { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
  .lsd-h-step:hover { transform: translateY(-6px) scale(1.015); }
  .lsd-h-feat { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease; }
  .lsd-h-feat:hover { transform: translateX(6px); background-color: var(--color-accent-100); }
  .lsd-h-faq { transition: background-color 0.25s ease; }
  .lsd-h-faq:hover { background-color: var(--color-accent-100); }
  .lsd-h-wa { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease; }

  .lsd-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .lsd-flow-node {
    display: inline-flex; align-items: center; white-space: nowrap;
    font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px;
    background: var(--color-bg); color: var(--color-neutral-800);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
  }
  .lsd-flow-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .lsd-flow-pay { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
  .lsd-flow-arrow { color: var(--color-neutral-400); font-size: 15px; flex: none; }
  .lsd-h-wa:hover { transform: translateY(-3px) scale(1.03); background-color: var(--color-accent-2-700); }

  .lsd-faq-answer { margin: 0; padding: 0 clamp(20px, 2.4vw, 30px) 18px; font-size: 16px; line-height: 1.6; color: var(--color-neutral-800); max-width: 60ch; }

  /* sticky nav — a near-opaque background instead of backdrop-filter: blur().
     Blur behind a `position: sticky` element has to be recomputed on every
     scroll frame (the content sliding underneath keeps changing), which is a
     bigger source of scroll jank than any hover transition. A flat tint costs
     nothing per frame and looks close enough over this warm, low-contrast page. */
  #lsd-nav {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in srgb, var(--color-bg) 96%, transparent);
    transition: box-shadow 0.25s ease;
  }
  #lsd-nav.is-stuck { box-shadow: var(--shadow-sm); }
  #lsd-nav-toggle { display: none; }
  .lsd-nav-links { display: contents; }

  @media (max-width: 860px) {
    #lsd-nav .nav { flex-wrap: wrap; }
    #lsd-nav-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--color-divider);
      background: var(--color-bg); cursor: pointer; margin-left: auto;
    }
    .lsd-nav-links {
      display: none; flex-basis: 100%; flex-direction: column; gap: 4px;
      padding: 8px 0 4px;
    }
    #lsd-nav.is-open .lsd-nav-links { display: flex; }
    .lsd-nav-links a:not(.btn) { padding: 10px 4px; border-bottom: 1px solid var(--color-divider); }
    .lsd-nav-links .btn { align-self: flex-start; margin-top: 6px; }
  }

  @media (max-width: 900px) {
    .lsd-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  }

  /* sticky mobile action bar */
  #lsd-mbar { display: none; }
  @media (max-width: 720px) {
    #lsd-mbar {
      display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
      padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
      background: color-mix(in srgb, var(--color-bg) 97%, transparent);
      border-top: 1px solid var(--color-divider);
    }
    #lsd-mbar a { flex: 1; justify-content: center; }
    #lsd-mbar.is-hidden { transform: translateY(130%); }
    #lsd-mbar { transition: transform 0.3s ease; will-change: transform; }
    #lsd-wa-float { display: none !important; }
    #lsd-root { padding-bottom: 104px; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .lsd-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
    [style*="lsd-drift"], [style*="lsd-pulse"], [style*="lsd-ring"] { animation: none !important; }
    .lsd-arrow-down, .lsd-flow-arrow, .lsd-pulse-glow, .lsd-h-cta::before { animation: none !important; }
  }