/* ============================================================
     SAFIVIO · "How it works" — field-instrument scrollytelling
     The .screen mockups below are faithful CSS reconstructions of the
     real app screens and are the swap-in points for real screenshots.
     ============================================================ */

  .siv-page {
    /* palette — dark (default): cool slate; brand blue + synced green.
       Token names kept (--amber = brand blue, --sync = synced green). */
    --ink: #0d1017;
    --bg: #0d1017;
    --bg-2: #12161f;
    --surface: #161c27;
    --surface-2: #1e2533;
    --line: rgba(226, 232, 240, 0.11);
    --line-2: rgba(226, 232, 240, 0.052);
    --text: #e8ecf3;
    --muted: #98a3b4;
    --faint: #626d80;
    --amber: #4f8cff;      /* BRAND — field / offline (blue-500) */
    --amber-ink: #ffffff;
    --amber-soft: rgba(79, 140, 255, 0.15);
    --sync: #46d07f;       /* SYNCED — cloud / online (green) */
    --sync-soft: rgba(70, 208, 127, 0.14);
    --good: #46d07f;
    --danger: #f2795a;

    /* Static site: the app's Geist font vars (--font-geist-*) don't exist
       here, and an undefined var() with no fallback would invalidate the
       whole font-family and drop the page to the browser's default serif.
       Use the same plain system stack as site.css so this page matches the
       home page. */
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;

    --wrap: 1180px;
    --r: 14px;
    --ease: cubic-bezier(0.4, 0, 0.15, 1);
  }

  @media (prefers-color-scheme: light) {
    .siv-page {
      --ink: #f6f8fb;
      --bg: #f6f8fb;
      --bg-2: #eef1f6;
      --surface: #ffffff;
      --surface-2: #f1f4f9;
      --line: rgba(15, 23, 42, 0.12);
      --line-2: rgba(15, 23, 42, 0.06);
      --text: #0f172a;
      --muted: #55617a;
      --faint: #8a93a6;
      --amber: #2563eb;      /* BRAND — blue-600 */
      --amber-ink: #ffffff;
      --amber-soft: rgba(37, 99, 235, 0.10);
      --sync: #16a34a;       /* SYNCED — green-600 */
      --sync-soft: rgba(22, 163, 74, 0.11);
      --good: #16a34a;
      --danger: #dc5b39;
    }
  }
  /* explicit theme toggles win over the media query in both directions */
  .siv-page[data-theme="dark"] {
    --ink:#0d1017;--bg:#0d1017;--bg-2:#12161f;--surface:#161c27;--surface-2:#1e2533;
    --line:rgba(226,232,240,.11);--line-2:rgba(226,232,240,.052);--text:#e8ecf3;
    --muted:#98a3b4;--faint:#626d80;--amber:#4f8cff;--amber-ink:#ffffff;
    --amber-soft:rgba(79,140,255,.15);--sync:#46d07f;--sync-soft:rgba(70,208,127,.14);
    --good:#46d07f;--danger:#f2795a;
  }
  .siv-page[data-theme="light"] {
    --ink:#f6f8fb;--bg:#f6f8fb;--bg-2:#eef1f6;--surface:#ffffff;--surface-2:#f1f4f9;
    --line:rgba(15,23,42,.12);--line-2:rgba(15,23,42,.06);--text:#0f172a;
    --muted:#55617a;--faint:#8a93a6;--amber:#2563eb;--amber-ink:#ffffff;
    --amber-soft:rgba(37,99,235,.10);--sync:#16a34a;--sync-soft:rgba(22,163,74,.11);
    --good:#16a34a;--danger:#dc5b39;
  }

  .siv-page, .siv-page * { box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  /* Kill the UA default body margin (8px) — the home page resets body in
     site.css, but here the reset is scoped to .siv-page, so without this the
     page shows a white border. min-height below lets the .siv-page background
     fill the viewport even when content is short. */
  body { margin: 0; }
  .siv-page {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    line-height: 1.6;
    font-size: 17px;
    letter-spacing: -0.005em;
    /* dot-grid instrument texture */
    background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
    background-size: 26px 26px;
    background-position: -13px -13px;
  }

  .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

  .mono {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.66rem;
    color: var(--faint);
    font-weight: 500;
  }

  a { color: inherit; }

  /* ---------- nav ---------- */
  .nav {
    position: sticky; top: 0; z-index: 60;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    border-bottom: 1px solid var(--line-2);
  }
  .nav-in { display: flex; align-items: center; justify-content: space-between; height: 62px; }
  .brand { display: flex; align-items: center; gap: 11px; font-weight: 650; letter-spacing: -0.02em; text-decoration: none; }
  .mark {
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--amber); color: var(--amber-ink);
    display: grid; place-items: center;
    font-family: var(--mono); font-weight: 700; font-size: 0.86rem;
    letter-spacing: -0.02em;
  }
  /* Safivio logo — shield (safety) · check (inspected) · pulse (health) */
  .logo { width: 30px; height: 32px; display: block; flex: none; }
  .logo .lg-shield { fill: var(--amber); }
  .logo .lg-check { fill: none; stroke: #fff; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
  .logo .lg-pulse { fill: none; stroke: var(--sync); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .logo.lg-lg { width: 58px; height: 62px; }
  .nav-links { display: flex; gap: 26px; font-size: 0.9rem; font-weight: 500; color: var(--muted); }
  .nav-links a { text-decoration: none; transition: color 0.2s; }
  .nav-links a:hover { color: var(--text); }
  @media (max-width: 760px) { .nav-links { display: none; } }
  .nav-actions { display: flex; align-items: center; gap: 8px; }
  .btn {
    font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
    border-radius: 9px; padding: 9px 16px; border: 1px solid var(--line);
    background: transparent; color: var(--text); cursor: pointer;
    transition: border-color 0.2s, background 0.2s, transform 0.1s;
    text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  }
  .btn:hover { border-color: var(--amber); }
  .btn:active { transform: translateY(1px); }
  .btn-primary { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); font-weight: 650; }
  .btn-primary:hover { filter: brightness(1.06); border-color: var(--amber); }
  .icon-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

  /* ---------- hero ---------- */
  .hero { position: relative; padding: 76px 0 40px; }
  .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 26px; }
  .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--amber); }
  .hero h1 {
    font-size: clamp(2.6rem, 6.4vw, 5.2rem);
    line-height: 0.98; letter-spacing: -0.04em; font-weight: 720;
    margin: 0 0 22px; text-wrap: balance; max-width: 15ch;
  }
  .hero h1 em { font-style: normal; color: var(--amber); }
  .hero .lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); color: var(--muted); max-width: 56ch; margin: 0 0 30px; }
  .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
  .hero-note { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

  /* offline/online sync ribbon under the hero */
  .ribbon {
    margin-top: 54px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
    padding: 18px 22px;
  }
  .ribbon-end { display: flex; align-items: center; gap: 12px; }
  .ribbon-end.online { justify-content: flex-end; text-align: right; }
  .node {
    width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; flex: none;
    border: 1px solid var(--line);
  }
  .node.onsite { background: var(--amber-soft); color: var(--amber); }
  .node.cloud { background: var(--sync-soft); color: var(--sync); }
  .ribbon-lbl { font-weight: 640; font-size: 0.95rem; }
  .ribbon-sub { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
  .wire { position: relative; height: 2px; background: var(--line); border-radius: 2px; min-width: 60px; overflow: hidden; }
  .wire::before, .wire::after {
    content: ""; position: absolute; top: 0; height: 100%; width: 34%;
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    animation: flow 2.6s linear infinite;
  }
  .wire::after { background: linear-gradient(90deg, transparent, var(--sync), transparent); animation: flowb 2.6s linear infinite; animation-delay: 1.3s; }
  @keyframes flow { from { left: -34%; } to { left: 100%; } }
  @keyframes flowb { from { left: 100%; } to { left: -34%; } }

  /* ---------- journey / scrollytelling ---------- */
  .journey { padding: 40px 0 20px; }
  .section-head { margin: 44px 0 30px; }
  .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -0.03em; margin: 10px 0 0; font-weight: 680; text-wrap: balance; }

  .jgrid { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 56px; align-items: start; }

  .stage { position: sticky; top: 92px; height: 78vh; z-index: 2; }
  .stage-inner { height: 100%; display: flex; flex-direction: column; gap: 14px; }

  /* device frame */
  .device {
    position: relative; flex: 1; min-height: 0;
    border-radius: 20px; border: 1px solid var(--line);
    background: var(--surface); overflow: hidden;
    box-shadow: 0 30px 70px -30px rgba(0,0,0,0.55), inset 0 0 0 1px var(--line-2);
  }
  .device-bar {
    height: 38px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
    border-bottom: 1px solid var(--line-2); background: var(--bg-2);
    font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--faint);
  }
  .dots { display: flex; gap: 6px; }
  .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
  .device-url { display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; }
  .device-url .lock { color: var(--good); }
  .screens { position: absolute; inset: 38px 0 0; }
  .screen {
    position: absolute; inset: 0; padding: 20px; opacity: 0; transform: translateY(14px) scale(0.99);
    transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
    pointer-events: none; display: flex; flex-direction: column; gap: 12px;
    overflow: hidden;
  }
  .screen.is-active { opacity: 1; transform: none; pointer-events: auto; }

  .stage-meta { display: flex; align-items: center; gap: 14px; padding: 0 4px; }
  .prog { flex: 1; height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; }
  .prog i { display: block; height: 100%; width: 8%; background: var(--amber); border-radius: 3px; transition: width 0.5s var(--ease); }
  .meta-act { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
  .meta-count { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--faint); font-variant-numeric: tabular-nums; }

  /* steps list */
  .steps { list-style: none; margin: 0; padding: 0; }
  .step { padding: 22vh 0; border-top: 1px solid var(--line-2); }
  .step:first-child { border-top: 0; padding-top: 4vh; }
  .step:last-child { padding-bottom: 30vh; }
  .step-inner { transition: opacity 0.4s var(--ease); }
  .step:not(.is-active) .step-inner { opacity: 0.34; }
  .step-tag { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .step-num {
    font-family: var(--mono); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.08em;
    color: var(--amber-ink); background: var(--amber); border-radius: 6px; padding: 4px 8px;
    font-variant-numeric: tabular-nums;
  }
  .step:not(.is-active) .step-num { background: var(--surface-2); color: var(--faint); }
  .step-act { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
  .step h3 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 12px; font-weight: 660; text-wrap: balance; }
  .step p { color: var(--muted); font-size: 1.05rem; margin: 0 0 14px; max-width: 40ch; }
  .step-facts { display: flex; flex-wrap: wrap; gap: 8px; }
  .fact {
    font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
  }
  .fact b { color: var(--amber); font-weight: 600; }
  .fact.sync b { color: var(--sync); }

  /* ---------- mock UI primitives (inside .screen) ---------- */
  .m-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .m-title { font-weight: 660; font-size: 1rem; letter-spacing: -0.01em; }
  .m-sub { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
  .m-card { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); padding: 14px; }
  .m-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--line-2); }
  .m-row:first-child { border-top: 0; }
  .m-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; flex: none; font-size: 0.9rem; }
  .m-tx { flex: 1; min-width: 0; }
  .m-tx b { display: block; font-size: 0.86rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-tx span { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }
  .m-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
  .m-bar i { display: block; height: 100%; background: var(--amber); border-radius: 4px; }
  .m-bar.s i { background: var(--sync); }
  .pill { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
  .pill.amber { background: var(--amber-soft); color: var(--amber); }
  .pill.sync { background: var(--sync-soft); color: var(--sync); }
  .pill.good { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
  .pill.danger { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
  .pill.ghost { border: 1px solid var(--line); color: var(--faint); }
  .m-field { border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: var(--surface); font-family: var(--mono); font-size: 0.72rem; color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .m-field .ph { color: var(--faint); }
  .m-btn { background: var(--amber); color: var(--amber-ink); border-radius: 9px; padding: 10px; text-align: center; font-weight: 650; font-size: 0.82rem; }
  .m-chip { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.24em; font-weight: 700; color: var(--amber); background: var(--amber-soft); border: 1px dashed color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 10px; padding: 12px; text-align: center; }
  .m-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .m-shell { display: grid; grid-template-columns: 62px 1fr; gap: 0; height: 100%; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg-2); }
  .m-side { background: var(--surface); border-right: 1px solid var(--line-2); padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .m-side .mk { width: 26px; height: 26px; border-radius: 7px; background: var(--amber); color: var(--amber-ink); display: grid; place-items: center; font-family: var(--mono); font-weight: 700; font-size: 0.72rem; }
  .m-navi { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 0.95rem; color: var(--faint); }
  .m-navi.on { background: var(--amber-soft); color: var(--amber); }
  .m-main { padding: 14px; overflow: hidden; display: flex; flex-direction: column; gap: 11px; }
  .hazard { display: flex; gap: 5px; }
  .hz { width: 15px; height: 15px; border-radius: 4px; border: 1px solid var(--line-2); }
  .hz.on1 { background: #7fa8d6; } .hz.on2 { background: #e6c84c; } .hz.on3 { background: #e39a4c; } .hz.on4 { background: #d76a54; }
  .sig { font-family: "Segoe Script", "Snell Roundhand", cursive; font-size: 1.5rem; color: var(--text); transform: rotate(-4deg); opacity: 0.85; }

  /* sync diagram screen */
  .syncwrap { flex: 1; display: grid; grid-template-rows: 1fr auto 1fr; place-items: center; gap: 6px; }
  .cloudbox { border: 1px solid var(--sync); background: var(--sync-soft); color: var(--sync); border-radius: 12px; padding: 12px 18px; font-weight: 640; display: flex; align-items: center; gap: 10px; }
  .tabrow { display: flex; gap: 14px; }
  .tabm { width: 72px; height: 92px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); display: flex; flex-direction: column; padding: 8px; gap: 5px; position: relative; }
  .tabm .scr { flex: 1; border-radius: 5px; background: var(--surface-2); }
  .tabm .lb { font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.08em; color: var(--faint); text-align: center; }
  .vwire { width: 2px; height: 40px; background: var(--line); position: relative; overflow: hidden; }
  .vwire::before { content: ""; position: absolute; left: 0; width: 100%; height: 40%; background: linear-gradient(180deg, transparent, var(--amber), transparent); animation: vflow 1.8s linear infinite; }
  .vwire.up::before { background: linear-gradient(180deg, transparent, var(--sync), transparent); animation: vflowu 1.8s linear infinite; }
  @keyframes vflow { from { top: -40%; } to { top: 100%; } }
  @keyframes vflowu { from { top: 100%; } to { top: -40%; } }
  .migrate { flex: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
  .arrowm { font-family: var(--mono); color: var(--amber); font-size: 1.4rem; text-align: center; }

  /* ---------- feature / audience / faq slabs ---------- */
  .slab { padding: 46px 0; border-top: 1px solid var(--line-2); }
  .slab .section-head { margin: 6px 0 30px; }
  .grid-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .fcard { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 22px; transition: border-color 0.2s, transform 0.2s; }
  .fcard:hover { border-color: color-mix(in srgb, var(--amber) 50%, var(--line)); transform: translateY(-2px); }
  .fico { width: 40px; height: 40px; border-radius: 10px; background: var(--amber-soft); display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 14px; }
  .fcard h4 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -0.01em; font-weight: 640; }
  .fcard p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.55; }
  .aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .acard { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 28px; }
  .acard h4 { margin: 0 0 8px; font-size: 1.28rem; letter-spacing: -0.02em; font-weight: 680; }
  .acard > p { color: var(--muted); margin: 0 0 16px; }
  .acard ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
  .acard li { display: flex; gap: 10px; font-size: 0.93rem; }
  .acard li::before { content: "✓"; color: var(--sync); font-weight: 700; flex: none; }
  .faq { max-width: 760px; margin: 0 auto; }
  .faq details { border-top: 1px solid var(--line); }
  .faq summary { cursor: pointer; list-style: none; padding: 17px 42px 17px 0; font-weight: 600; font-size: 1.01rem; position: relative; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--mono); color: var(--faint); font-size: 1.35rem; transition: transform 0.25s var(--ease); }
  .faq details[open] summary { color: var(--amber); }
  .faq details[open] summary::after { transform: rotate(45deg); color: var(--amber); }
  .faq details p { margin: -4px 0 18px; color: var(--muted); max-width: 66ch; line-height: 1.62; font-size: 0.96rem; }

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

  /* ---------- closing CTA ---------- */
  .cta { padding: 90px 0 40px; text-align: center; }
  .cta h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); letter-spacing: -0.035em; line-height: 1; margin: 0 auto 18px; max-width: 18ch; text-wrap: balance; font-weight: 700; }
  .cta p { color: var(--muted); max-width: 48ch; margin: 0 auto 30px; }
  .cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

  footer { border-top: 1px solid var(--line-2); padding: 30px 0 46px; margin-top: 40px; }
  .foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .foot .mono { color: var(--faint); }

  /* ---------- responsive: frame pins to top, steps fade underneath ---------- */
  @media (max-width: 900px) {
    .siv-page { font-size: 16px; }
    .jgrid { grid-template-columns: 1fr; gap: 0; }
    .stage {
      position: sticky; top: 62px; height: auto; z-index: 20;
      background: var(--bg); padding: 14px 0 20px; margin: 0 -24px;
    }
    .stage::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -26px; height: 26px;
      background: linear-gradient(var(--bg), transparent); pointer-events: none;
    }
    .stage-inner { padding: 0 24px; }
    .device { height: 46vh; flex: none; }
    .steps { position: relative; z-index: 5; }
    .step { padding: 8vh 0; }
    .step:first-child { padding-top: 6vh; }
    .step:last-child { padding-bottom: 24vh; }
    /* opacity is driven by scroll (fade underneath the pinned frame) */
    .step:not(.is-active) .step-inner { opacity: 1; }
  }
  @media (max-width: 560px) {
    .ribbon { grid-template-columns: 1fr; gap: 14px; text-align: left; }
    .ribbon-end.online { justify-content: flex-start; text-align: left; }
    .wire { display: none; }
    .device { height: 52vh; }
  }

  @media (prefers-reduced-motion: reduce) {
    .siv-page, .siv-page * { animation: none !important; scroll-behavior: auto !important; }
    .screen { transition: opacity 0.2s linear; }
    .step-inner { opacity: 1 !important; }
  }


.siv-page { min-height: 100vh; }