:root{ --brand:#7F3AFF; --brand2:#6D28D9; }
  html{ scroll-behavior:smooth; }
  body{ background:#FFFFFF; color:#12102A; font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  .display{ font-family:"Space Grotesk",system-ui,sans-serif; font-weight:400; line-height:1.16; letter-spacing:-.008em; text-wrap:balance; }
  .display-xl{ font-size:clamp(2.5rem,4.6vw,4rem); }
  .display-lg{ font-size:clamp(2rem,3.9vw,3.375rem); }
  .display-md{ font-size:clamp(1.5rem,2.4vw,2rem); }
  .eyebrow{ font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--brand2); }
  @media (min-width:640px){ .eyebrow{ font-size:.6875rem; letter-spacing:.22em; } }
  /* <picture> is only a wrapper for the WebP source; it must not take
     part in layout or the <img>'s own sizing rules stop applying. */
  picture{ display:contents; }
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease-out, transform .5s ease-out; }
  .reveal.is-in{ opacity:1; transform:none; }
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
    outline:3px solid var(--brand); outline-offset:3px; border-radius:4px; }
  .field input,.field select{ width:100%; padding:.8125rem .875rem; background:#FFFFFF;
    border:1px solid #DDD9E8; border-radius:6px; color:#12102A; font-family:Inter,sans-serif;
    font-size:1rem; transition:border-color .18s; min-height:48px; }
  .field input::placeholder{ color:#767488; }
  .field input:focus,.field select:focus{ border-color:rgba(127,58,255,.75); }
  .field label{ display:block; font-size:.6875rem; font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:#6B6878; margin-bottom:.375rem; }
  .field select option{ background:#FFFFFF; color:#12102A; }
  .hairline{ border-top:1px solid rgba(18,16,42,.10); }
  /* A utility class like inline-flex beats the UA stylesheet's [hidden] rule,
     so anything hidden in JS stays visible. Force it. */
  [hidden]{ display:none !important; }
  .card-hover{ transition:border-color .22s, transform .22s, box-shadow .22s; box-shadow:0 1px 2px rgba(18,16,42,.04), 0 3px 12px rgba(18,16,42,.035); }
  .card-hover:hover{ border-color:rgba(127,58,255,.40); transform:translateY(-3px); box-shadow:0 6px 24px rgba(18,16,42,.09); }
  details>summary{ list-style:none; cursor:pointer; }
  details>summary::-webkit-details-marker{ display:none; }
  details[open] .faq-icon{ transform:rotate(45deg); }
  .faq-icon{ transition:transform .22s; }
    .imgslot{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
    text-align:center; padding:1.5rem;
    background:linear-gradient(135deg,rgba(127,58,255,.06),rgba(124,58,237,.02)),
      repeating-linear-gradient(45deg,rgba(18,16,42,.030) 0 12px,transparent 12px 24px);
    border:1px dashed rgba(127,58,255,.32); border-radius:.75rem; color:#6B6878; }
  .imgslot__label{ font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#7C3AED; }
  .imgslot__hint{ font-size:.75rem; line-height:1.5; max-width:22rem; }
  /* Transparent, so the image area is indistinguishable from the card behind
     it -- any tint at all reads as a panel edge around the product. Definition
     comes from a drop shadow on the artwork instead, which also means a white
     device (the Reader) still reads on a white card. */
  .devicewrap{ background:transparent; padding:1rem; }
  .devicewrap img{ filter:drop-shadow(0 6px 16px rgba(18,16,42,.13)); }
  /* Companion word to the Square wordmark. Matched on cap height and colour
     so the two read as one lockup rather than a logo plus a label. */
  .wordmark{ font-family:Inter,system-ui,sans-serif; font-size:1.0625rem; font-weight:500;
    letter-spacing:-.012em; color:#12102A; line-height:1; white-space:nowrap;
    padding-top:1px; }
  .wordmark--sm{ font-size:.9375rem; }
  /* Vertical rule between the Square wordmark and "Partner" -- cap-height
     tall, so the two read as one lockup rather than two stacked marks. */
  .lockrule{ display:block; width:1px; height:20px; background:rgba(18,16,42,.20); }
  .lockrule--sm{ height:17px; }
  @media (max-width:639px){ .lockrule{ height:17px; } }
  @media (max-width:639px){ .wordmark{ font-size:.9375rem; } }
  .bleed{ width:100vw; margin-left:calc(50% - 50vw); }


  .tile{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; padding:2.5rem; }
  .tile .devicewrap{ background:transparent; padding:0; aspect-ratio:auto; height:100%; }
  .tile img{ mix-blend-mode:multiply; }
  /* The nav is a floating bar: 64px tall plus its 20px top inset. The tab bar
     must stick BELOW that, not at the old 68px, or it slides underneath and
     visually cuts the header in half. Hidden entirely on phones -- the filter
     is a desktop affordance and it interrupted the flow on a small screen. */
  .tabbar{ position:sticky; top:88px; z-index:30; background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
  @media (max-width:1023px){ .tabbar{ display:none; } }
  .noscrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
  /* Clear the sticky mobile CTA bar so nothing hides behind it. */
  @media (max-width:1023px){ body{ padding-bottom:64px; } }
  .filterpanel[hidden]{ display:none; }
  /* ── scroll-synced dark section ──────────────────────────────────
     The visual is pinned on EVERY width, not just desktop. Most of the
     traffic is on a phone, and the old mobile fallback repeated the same
     art under each step, which read as a plain list with no interaction.
     Pinning it means the device on screen changes as you scroll the copy,
     which is the whole point of the section. */
  .stepgrid{ display:block; }
  .stepstagewrap{ position:sticky; top:61px; z-index:2; }
  /* Solid base, or the steps scroll visibly under the pinned art. */
  .stepstage{ background:#0B0918; padding:.5rem 0 1rem; }
  .stepstage__art{ position:relative; height:27vh; min-height:176px; max-height:250px;
    border:1px solid rgba(255,255,255,.10); border-radius:20px;
    background:radial-gradient(ellipse 70% 70% at 50% 45%, rgba(127,58,255,.22) 0%, rgba(11,9,24,0) 70%); }
  .stepvis{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    opacity:0; transform:translateY(14px) scale(.97); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
  .stepvis.is-active{ opacity:1; transform:none; }
  .stepvis .devicewrap{ background:transparent; padding:1rem; height:100%; aspect-ratio:auto; }

  /* Progress rail: segment per step, the live one fills with scroll. */
  .steprail{ display:flex; align-items:center; gap:.75rem; margin-top:.875rem; }
  .steprail__count,.steprail__total{ font-family:'Space Grotesk',system-ui,sans-serif;
    font-size:.8125rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; }
  .steprail__count{ color:#C4B5FD; }
  .steprail__total{ color:#56536A; }
  .steprail__bars{ flex:1; display:flex; gap:.375rem; }
  .steprail__seg{ flex:1; height:2px; border-radius:2px; overflow:hidden;
    background:rgba(255,255,255,.14); }
  .steprail__seg i{ display:block; height:100%; width:0; border-radius:2px;
    background:#7F3AFF; transition:width .1s linear; }

  /* Spacing is tuned so the next heading reaches the reading line about when
     the previous step's body has been read. Looser than this and you get a
     dead stretch where the live step has scrolled behind the pinned stage
     and the next one has not arrived yet. */
  .stepitem{ opacity:.45; transition:opacity .45s ease, transform .45s ease;
    padding:3vh 0 4vh; transform:translateY(6px); }
  .stepitem.is-active{ transform:none; }
  .stepitem:first-child{ padding-top:1vh; }
  .stepitem.is-active{ opacity:1; }
  .stepitem .steprule{ transform:scaleX(0); transform-origin:left; transition:transform .5s ease; }
  .stepitem.is-active .steprule{ transform:scaleX(1); }
  /* On a phone the rail counter already says which step this is, and the
     number would sit behind the pinned stage anyway. Desktop keeps it. */
  .stepnum{ display:none; font-family:'Space Grotesk',system-ui,sans-serif;
    font-size:.9375rem; color:#A78BFA; margin-bottom:1rem; }

  @media (min-width:1024px){
    .stepgrid{ display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
    .steplist{ order:1; }
    .stepstagewrap{ order:2; top:140px; }
    .stepstage{ padding:0; }
    .stepstage__art{ height:auto; min-height:0; max-height:none;
      aspect-ratio:1; border-radius:24px; }
    .stepnum{ display:block; }
    .stepitem{ opacity:.32; padding:18vh 0; transform:none; }
    .stepitem:first-child{ padding-top:0; }
    .stepitem:last-child{ padding-bottom:10vh; }
  }
  @media (prefers-reduced-motion: reduce){
    .stepitem{ opacity:1; transform:none; transition:none; }
    .stepitem .steprule{ transform:scaleX(1); }
    .stepvis{ transition:none; transform:none; }
    .steprail__seg i{ transition:none; }
  }
  .noscrollbar::-webkit-scrollbar{ display:none; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }