/* Solace marketing site — the design canvas's shared sheet plus the real-page and responsive layers at the bottom. */

    :root{
      --bg: oklch(10% 0.004 285);
      --surface: oklch(14.5% 0.007 285);
      --surface-2: oklch(19.5% 0.009 285);
      --border: oklch(26% 0.011 285);
      --text: oklch(97% 0.004 285);
      --text-dim: oklch(67% 0.013 285);
      --text-faint: oklch(49% 0.013 285);
      --accent: oklch(67% 0.22 296);
      --accent-text: oklch(99% 0.006 296);
      --accent-dim: oklch(67% 0.22 296 / 0.14);
      --accent-2: oklch(76% 0.13 199);
      --accent-gradient: linear-gradient(135deg, oklch(67% 0.22 296), oklch(76% 0.13 199));
      --success: oklch(76% 0.17 158);
      --success-dim: oklch(76% 0.17 158 / 0.14);
      --warn: oklch(80% 0.16 80);
      --warn-dim: oklch(80% 0.16 80 / 0.14);
      --danger: oklch(67% 0.21 25);
      --danger-dim: oklch(67% 0.21 25 / 0.14);
      --shadow: 0 30px 70px oklch(0% 0 0 / 0.45);
      --shadow-sm: 0 16px 40px oklch(0% 0 0 / 0.35);
      --glow: 0.26;
    }
    .page[data-theme="light"]{
      --bg: oklch(98% 0.004 285);
      --surface: oklch(99.2% 0.002 285);
      --surface-2: oklch(95% 0.006 285);
      --border: oklch(89% 0.008 285);
      --text: oklch(19% 0.008 285);
      --text-dim: oklch(42% 0.012 285);
      --text-faint: oklch(58% 0.012 285);
      --accent: oklch(56% 0.21 296);
      --accent-text: oklch(99% 0.006 296);
      --accent-dim: oklch(56% 0.21 296 / 0.12);
      --accent-2: oklch(60% 0.13 199);
      --accent-gradient: linear-gradient(135deg, oklch(56% 0.21 296), oklch(60% 0.13 199));
      --success: oklch(50% 0.15 158);
      --success-dim: oklch(50% 0.15 158 / 0.12);
      --warn: oklch(62% 0.15 80);
      --warn-dim: oklch(62% 0.15 80 / 0.12);
      --danger: oklch(55% 0.2 25);
      --danger-dim: oklch(55% 0.2 25 / 0.12);
      --shadow: 0 30px 70px oklch(30% 0.03 285 / 0.18);
      --shadow-sm: 0 16px 40px oklch(30% 0.03 285 / 0.14);
      --glow: 0.18;
    }
    * { box-sizing: border-box; }
    body { margin:0; background:var(--bg); color:var(--text); font-family:'Geist', system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
    h1,h2,h3,h4 { font-weight:600; margin:0; letter-spacing:-0.02em; }
    p { margin:0; }
    a { color:inherit; text-decoration:none; }
    .mono { font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
    .page { width:100%; background:var(--bg); color:var(--text); position:relative; overflow:hidden; min-height:100vh; }
    .wrap { max-width:1440px; margin:0 auto; padding-left:80px; padding-right:80px; }
    .logo-mark { background:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .btn-primary { background:var(--accent-gradient); color:var(--accent-text); font-weight:600; border:none; border-radius:10px; padding:13px 22px; font-size:14.5px; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
    .btn-ghost { background:transparent; color:var(--text); font-weight:500; border:1px solid var(--border); border-radius:10px; padding:12px 20px; font-size:14.5px; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
    .btn-ghost.on-accent { border-color:oklch(100% 0 0 / 0.35); color:white; }
    .btn-lg { padding:15px 26px; font-size:15px; border-radius:12px; }
    .pill { display:inline-flex; align-items:center; gap:7px; padding:6px 13px 6px 8px; border-radius:999px; font-size:12.5px; font-weight:500; background:var(--accent-dim); color:var(--accent); }
    .nav-link { font-size:14px; font-weight:500; color:var(--text-dim); }
    .nav-link.active { color:var(--text); }
    .card { background:var(--surface); border:1px solid var(--border); border-radius:16px; }
    .eyebrow { font-size:12.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
    .sec-h2 { font-size:40px; line-height:1.12; letter-spacing:-0.025em; }
    .sec-p { font-size:16.5px; color:var(--text-dim); line-height:1.6; }
    .grad-text { background:var(--accent-gradient); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .feature-icon { width:44px; height:44px; border-radius:12px; background:var(--accent-dim); display:flex; align-items:center; justify-content:center; color:var(--accent); }
    .check-row { display:flex; align-items:center; gap:12px; }
    .check-badge { width:26px; height:26px; border-radius:50%; background:var(--success-dim); color:var(--success); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .coin-icon { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:12px; flex-shrink:0; }
    .link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--accent); }
    .trust { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-faint); }

    /* trust strip */
    .strip { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
    .strip > div { padding:30px 24px; border-left:1px solid var(--border); }
    .strip > div:first-child { border-left:none; }
    .strip .v { font-size:30px; font-weight:600; letter-spacing:-0.02em; }
    .strip .k { font-size:13px; color:var(--text-faint); margin-top:4px; }

    /* feature cards */
    .feat { padding:26px 26px 0; display:flex; flex-direction:column; gap:0; overflow:hidden; position:relative; }
    .feat h3 { font-size:18px; margin:16px 0 8px; min-height:44px; display:flex; align-items:flex-end; }
    .feat p { font-size:14px; color:var(--text-dim); line-height:1.6; }
    .feat .link { margin-top:14px; margin-bottom:22px; }
    .feat .art { margin:auto -26px 0; padding-top:0; }
    .feat .art { margin-top:auto; margin-left:-26px; margin-right:-26px; margin-bottom:0; padding:0 22px; height:150px; position:relative; background:linear-gradient(180deg, transparent, var(--accent-dim)); border-top:1px solid var(--border); }
    .mini { background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-sm); position:absolute; left:22px; right:22px; top:22px; padding:12px 14px; }
    .mini .row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .mini .k { font-size:11px; color:var(--text-faint); }
    .mini .v { font-size:13px; font-weight:600; }
    .bar { height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
    .bar i { display:block; height:100%; }
    .hz { display:flex; height:6px; border-radius:4px; overflow:hidden; gap:2px; }
    .hz i { display:block; height:6px; }
    .hz .z1 { background:var(--danger); opacity:0.55; } .hz .z2 { background:var(--warn); opacity:0.55; } .hz .z3 { background:var(--success); opacity:0.55; }

    /* steps */
    .step { position:relative; padding:0 28px 0 0; display:flex; flex-direction:column; }
    .step .num { width:40px; height:40px; border-radius:50%; background:var(--accent-gradient); color:var(--accent-text); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--bg); position:relative; z-index:1; }
    .step h3 { font-size:19px; margin:18px 0 8px; }
    .step p { font-size:14.5px; color:var(--text-dim); line-height:1.6; }
    .step-line { position:absolute; top:19px; left:40px; right:0; height:2px; background:var(--border); }
    .step-card { margin-top:auto; padding-top:16px; }
    .step p { margin-bottom:22px; }
    .step-card { padding:16px; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; gap:12px; }
    .step-card .ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .step-card .t { font-size:13.5px; font-weight:600; }
    .step-card .d { font-size:11.5px; color:var(--text-faint); margin-top:2px; }

    /* phone mockup (mirrors Main.dc.html) */
    .phone { width:390px; height:760px; border-radius:46px; background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); padding:10px; position:relative; }
    .phone .inner { width:100%; height:100%; border-radius:38px; background:var(--bg); overflow:hidden; position:relative; }
    .phone .island { position:absolute; top:12px; left:50%; transform:translateX(-50%); width:110px; height:32px; border-radius:20px; background:oklch(8% 0.004 285); }
    .phone .sc { padding:56px 18px 0; }
    .greet { font-size:12px; color:var(--text-faint); }
    .iconbtn2 { width:36px; height:36px; border-radius:10px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
    .hero-card { position:relative; overflow:hidden; padding:16px; margin-top:16px; }
    .hero-glow { position:absolute; top:-70px; right:-50px; width:220px; height:220px; border-radius:50%; background:var(--accent-gradient); opacity:0.22; filter:blur(50px); }
    .hero-split { display:flex; margin-top:14px; padding-top:12px; border-top:1px solid var(--border); position:relative; }
    .hero-stat { flex:1; display:flex; align-items:center; gap:6px; }
    .hero-stat .k { font-size:10.5px; color:var(--text-faint); }
    .hero-stat .v { font-size:14px; font-weight:600; margin-top:2px; }
    .hero-stat .n { font-size:10.5px; color:var(--text-faint); margin-top:2px; }
    .sec-head { display:flex; align-items:center; justify-content:space-between; margin:16px 0 8px; }
    .sec-head h3 { font-size:13.5px; }
    .qa { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
    .qa-item { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:10px; color:var(--text-dim); font-weight:500; }
    .qa-box { width:46px; height:46px; border-radius:12px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; }
    .hz-wrap { position:relative; margin:11px 0 8px; }
    .hz-mark { position:absolute; top:-4px; width:3px; height:14px; border-radius:2px; background:var(--text); box-shadow:0 0 0 2px var(--surface); }
    .hz-scale { display:flex; justify-content:space-between; font-size:9.5px; color:var(--text-faint); }
    .mv-row { display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid var(--border); }
    .mv-row:last-child { border-bottom:none; }
    .mv-name { font-size:12px; font-weight:500; width:58px; flex-shrink:0; }
    .mv-pct { font-size:10.5px; width:42px; text-align:right; flex-shrink:0; }
    .mv-track { flex:1; display:flex; align-items:center; height:8px; min-width:0; }
    .mv-half { flex:1; display:flex; height:6px; }
    .mv-half.l { justify-content:flex-end; }
    .mv-half i { display:block; height:6px; border-radius:2px; min-width:4px; }
    .mv-axis { width:1px; height:12px; background:var(--border); flex-shrink:0; }
    .mv-amt { font-size:11.5px; font-weight:600; width:72px; text-align:right; flex-shrink:0; }
    .up { color:var(--success); } .dn { color:var(--danger); }
    .navbar { position:absolute; left:0; right:0; bottom:0; height:64px; background:var(--surface); border-top:1px solid var(--border); display:flex; padding:8px 6px 0; }
    .navitem { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:9.5px; color:var(--text-faint); font-weight:500; }
    .navitem.active { color:var(--accent); }
    .float { position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-sm); padding:12px 16px 12px 14px; display:flex; align-items:center; gap:11px; white-space:nowrap; }
    .float .ic { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .float .t { font-size:13px; font-weight:600; }
    .float .d { font-size:11.5px; color:var(--text-faint); margin-top:2px; }

    /* security */
    .vault { position:relative; padding:28px; }
    .ring { width:150px; height:150px; border-radius:50%; background:conic-gradient(var(--accent) 0 98%, var(--surface-2) 98% 100%); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .ring > div { width:118px; height:118px; border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; }
    .shard { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); font-size:12.5px; }
    .shard .k { width:28px; height:28px; border-radius:8px; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .sec-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-top:1px solid var(--border); font-size:13.5px; }
    .sec-row .ok { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--success); }

    /* closing */
    .cta { border-radius:24px; background:var(--accent-gradient); color:white; padding:72px 80px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:60px; }
    .cta::before { content:""; position:absolute; width:520px; height:520px; border-radius:50%; right:-140px; top:-220px; background:oklch(100% 0 0 / 0.14); filter:blur(30px); }
    .cta::after { content:""; position:absolute; width:380px; height:380px; border-radius:50%; left:-120px; bottom:-220px; background:oklch(0% 0 0 / 0.14); filter:blur(30px); }
    .cta .btn-primary { background:white; color:oklch(45% 0.2 296); }

    /* footer */
    .foot { border-top:1px solid var(--border); padding-top:56px; padding-bottom:40px; }
    .foot h4 { font-size:12.5px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); margin-bottom:16px; }
    .foot a { display:block; font-size:14px; color:var(--text-dim); margin-bottom:11px; }
    .foot .legal { display:flex; align-items:center; justify-content:space-between; margin-top:48px; padding-top:22px; border-top:1px solid var(--border); font-size:12.5px; color:var(--text-faint); }

    /* sub pages */
    .page-hero { padding-top:84px; padding-bottom:84px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; position:relative; }
    .page-hero h1 { font-size:56px; line-height:1.05; letter-spacing:-0.03em; margin-top:20px; margin-bottom:22px; }
    .page-hero .lead { font-size:18px; color:var(--text-dim); line-height:1.6; max-width:520px; margin-bottom:32px; }
    .crumb { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-faint); }
    .crumb .mono { color:var(--text-faint); }
    .section { padding-bottom:112px; }
    .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .grid2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
    .grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
    .fcard { padding:26px; }
    .fcard h3 { font-size:17px; margin:16px 0 8px; }
    .fcard p { font-size:14px; color:var(--text-dim); line-height:1.6; }
    .fcard .link { margin-top:14px; }
    .pillar { padding:30px; }
    .pillar h3 { font-size:19px; margin:16px 0 14px; }
    .pillar .check-row { align-items:flex-start; padding:9px 0; font-size:14.5px; line-height:1.5; color:var(--text-dim); }
    .pillar .check-badge { width:22px; height:22px; margin-top:1px; }
    .steps4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
    .stat { padding:24px 26px; }
    .stat .v { font-size:30px; font-weight:600; letter-spacing:-0.02em; }
    .stat .k { font-size:13px; color:var(--text-faint); margin-top:4px; }
    table.fees { width:100%; border-collapse:collapse; font-size:14.5px; }
    table.fees th { text-align:left; font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); padding:14px 22px; border-bottom:1px solid var(--border); }
    table.fees td { padding:18px 22px; border-bottom:1px solid var(--border); }
    table.fees tr:last-child td { border-bottom:none; }
    table.fees td.num { font-family:'Geist Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; font-weight:600; }
    .tier { display:inline-flex; align-items:center; gap:8px; font-weight:600; }
    .tier i { width:8px; height:8px; border-radius:50%; display:inline-block; }
    .note { display:flex; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:12px; background:var(--warn-dim); color:var(--text-dim); font-size:13px; line-height:1.55; }
    .note svg { flex-shrink:0; margin-top:1px; }
    .faq { padding:24px 0; border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 1.4fr; gap:40px; }
    .faq:last-child { border-bottom:1px solid var(--border); }
    .faq .q { font-size:17px; font-weight:600; }
    .faq .a { font-size:15px; color:var(--text-dim); line-height:1.6; }
    .rowline { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-top:1px solid var(--border); font-size:15px; }
    .rowline:last-child { border-bottom:1px solid var(--border); }
    .rowline .v { font-weight:600; }
    .rowline .v.free { color:var(--success); }
    .role { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-top:1px solid var(--border); }
    .role:first-child { border-top:none; }
    .role .t { font-size:16px; font-weight:600; }
    .role .m { font-size:13px; color:var(--text-faint); margin-top:3px; }
    .tag { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--surface-2); color:var(--text-dim); }
    .tag.acc { background:var(--accent-dim); color:var(--accent); }
    .post { padding:22px; display:flex; flex-direction:column; gap:12px; }
    .post .cover { height:150px; border-radius:12px; background:var(--surface-2); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
    .post h3 { font-size:17px; line-height:1.35; }
    .post .meta { font-size:12.5px; color:var(--text-faint); }
    .quote { border-left:3px solid var(--accent); padding-left:20px; font-size:20px; line-height:1.5; color:var(--text); letter-spacing:-0.01em; }
    .fn { font-size:12.5px; color:var(--text-faint); line-height:1.55; }
    .ticket { padding:20px; }
    .ticket .seg { display:flex; background:var(--surface-2); border-radius:10px; padding:3px; }
    .ticket .seg span { flex:1; text-align:center; font-size:13px; font-weight:600; padding:8px 0; border-radius:8px; color:var(--text-dim); }
    .ticket .seg span.on { background:var(--surface); color:var(--text); box-shadow:0 1px 3px oklch(0% 0 0 / 0.2); }
    .ticket .field { margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--surface-2); display:flex; align-items:center; justify-content:space-between; }
    .ticket .field .k { font-size:11.5px; color:var(--text-faint); }
    .ticket .field .v { font-size:18px; font-weight:600; margin-top:2px; }
    .mkt { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); }
    .mkt:last-child { border-bottom:none; }
    .mkt .n { flex:1; font-size:14px; font-weight:500; }
    .mkt .n span { display:block; font-size:11.5px; color:var(--text-faint); font-weight:400; margin-top:1px; }
    .mkt .p { font-size:14px; font-weight:600; text-align:right; }
    .mkt .p span { display:block; font-size:11.5px; font-weight:500; margin-top:1px; }
    .spark { width:74px; height:26px; }
    .slider { position:relative; height:6px; border-radius:3px; background:var(--surface-2); margin:14px 0 8px; }
    .slider .fill { position:absolute; left:0; top:0; height:100%; border-radius:3px; background:var(--accent-gradient); }
    .slider .knob { position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:var(--text); transform:translate(-50%,-50%); box-shadow:0 0 0 3px var(--surface); }
    .kv { display:flex; justify-content:space-between; font-size:13px; padding:8px 0; border-top:1px solid var(--border); }
    .kv .k { color:var(--text-faint); }
    .kv .v { font-weight:600; }

    /* ---- Real-page additions (not in the artboards) ------------------- */
    html { scroll-behavior:smooth; }
    a[href] { cursor:pointer; }
    .btn-primary:hover { filter:brightness(1.08); }
    .btn-ghost:hover { background:var(--surface); }
    .link:hover { text-decoration:underline; text-underline-offset:3px; }
    .nav-link:hover { color:var(--text); }
    .crumb a:hover { color:var(--text); }
    .foot a:hover { color:var(--text); }

    /* Privacy policy */
    .col { max-width:720px; margin:0 auto; }
    .section-title { font-size:19px; margin-bottom:12px; padding-top:6px; scroll-margin-top:24px; }
    .section-body { font-size:14.5px; color:var(--text-dim); line-height:1.75; }
    .section-body + .section-body { margin-top:12px; }
    .section-body a { color:var(--accent); }
    .li-row { display:flex; gap:10px; align-items:flex-start; }
    .li-dot { width:5px; height:5px; border-radius:50%; background:var(--text-faint); margin-top:8px; flex-shrink:0; }
    .toc-link { font-size:13.5px; color:var(--text-dim); display:block; padding:5px 0; }
    .toc-link:hover { color:var(--text); }

    /* Nav */
    .nav { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:20px; padding-bottom:20px; border-bottom:1px solid var(--border); position:relative; z-index:50; }
    .brand { display:flex; align-items:center; gap:10px; }
    .brand-name { font-size:18px; font-weight:700; letter-spacing:-0.02em; }
    /* The brand's own artwork (branding/wordmark.png, branding/mark.png),
       trimmed from assets/branding at 96px tall so it stays sharp at 3x. */
    .brand-logo { display:block; width:auto; }
    .mark-img { display:block; flex-shrink:0; }
    .nav-links { display:flex; align-items:center; gap:34px; }
    .nav-cta { display:flex; align-items:center; gap:12px; }
    .nav-toggle { display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--border); background:transparent; color:var(--text); align-items:center; justify-content:center; cursor:pointer; }
    .nav-toggle .i-close { display:none; }
    .nav.open .nav-toggle .i-open { display:none; }
    .nav.open .nav-toggle .i-close { display:block; }

    /* Footer */
    .foot-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
    .foot .soon { display:block; font-size:14px; color:var(--text-faint); margin-bottom:11px; cursor:default; }
    .foot .legal a { display:inline; margin:0; font-size:12.5px; color:var(--text-faint); }

    /* App install badges: the iPhone beta on TestFlight and the Android APK */
    .store-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .store-row .lbl { font-size:14px; color:var(--text-faint); margin-right:4px; }
    .store-badge { display:inline-flex; align-items:center; gap:9px; height:46px; padding:0 14px 0 11px; border-radius:11px; background:#000; color:#fff; border:1px solid oklch(100% 0 0 / 0.22); box-shadow:0 1px 2px oklch(0% 0 0 / 0.3), 0 8px 24px oklch(0% 0 0 / 0.18); text-decoration:none; white-space:nowrap; transition:transform .18s cubic-bezier(.23,1,.32,1), border-color .18s; }
    .store-badge:hover { border-color:oklch(100% 0 0 / 0.42); transform:translateY(-1px); }
    .store-badge:active { transform:scale(.97); }
    .store-badge svg { width:22px; height:22px; flex-shrink:0; }
    .store-badge .tx { display:flex; flex-direction:column; line-height:1.05; }
    .store-badge .tx small { font-size:9.5px; font-weight:500; letter-spacing:0.02em; opacity:0.78; }
    .store-badge .tx b { font-size:16px; font-weight:600; letter-spacing:-0.01em; margin-top:2px; }
    .page[data-theme="light"] .store-badge { border-color:oklch(0% 0 0 / 0.6); box-shadow:0 1px 2px oklch(0% 0 0 / 0.18), 0 8px 24px oklch(30% 0.03 285 / 0.14); }
    .foot a.store-badge { display:inline-flex; margin:0; font-size:inherit; color:#fff; }

    /* Careers: a role is a mailto */
    a.role { color:inherit; }
    a.role:hover { background:var(--surface-2); }

    /* Blog: the subscribe field is a real input */
    .subscribe input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font:inherit; font-size:14.5px; }
    .subscribe input::placeholder { color:var(--text-faint); }

    /* Two-figure rows, once the unverifiable figures came out */
    .strip.strip-2 { grid-template-columns:repeat(2, 1fr); }
    .stat-row.stat-row-2 { grid-template-columns:repeat(2, 1fr); }

    /* Pricing table on narrow screens */
    .table-card { overflow-x:auto; }

    /* 404 */
    .nf { min-height:60vh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding-top:80px; padding-bottom:80px; }

    /* Business (SiteBusiness, /business) and the nav's Business link */
    .nav-link.nav-biz { padding-left:16px; border-left:1px solid var(--border); }
    .biz-tag { font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent); background:var(--accent-dim); border-radius:6px; padding:3px 7px; margin-left:4px; white-space:nowrap; }
    .mock { background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; width:620px; max-width:100%; }
    .mock .mt { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); font-size:11.5px; color:var(--text-faint); }
    .mock .mt i { width:9px; height:9px; border-radius:50%; background:var(--surface-2); display:inline-block; }
    .mock .mb { display:grid; grid-template-columns:150px 1fr; }
    .mock .ms { border-right:1px solid var(--border); padding:12px 10px; font-size:11.5px; }
    .mock .ms div { padding:6px 8px; border-radius:7px; color:var(--text-faint); }
    .mock .ms div.on { background:var(--surface-2); color:var(--text); font-weight:500; }
    .mock .mc { padding:14px 16px; min-width:0; }
    .mock .tiles { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
    .mock .tiles > div { border:1px solid var(--border); border-radius:9px; padding:8px 10px; }
    .mock .tiles .k { font-size:10px; color:var(--text-faint); }
    .mock .tiles .v { font-size:15px; font-weight:600; margin-top:2px; }
    .mock .row { display:grid; grid-template-columns:1.2fr 1fr 0.8fr 1fr; gap:8px; font-size:11px; padding:7px 0; border-top:1px solid var(--border); align-items:center; }
    .mock .row.h { border-top:none; color:var(--text-faint); font-size:10px; }
    .mock .st { display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:500; padding:2px 7px; border-radius:999px; }
    .mock .st i { width:5px; height:5px; border-radius:50%; background:currentColor; }
    .mock .st.ok { color:var(--success); background:var(--success-dim); }
    .mock .st.wait { color:var(--warn); background:var(--warn-dim); }
    .code { background:oklch(18% 0.015 262); color:oklch(92% 0.01 255); border-radius:14px; font-family:'Geist Mono', ui-monospace, monospace; font-size:12.5px; line-height:1.6; box-shadow:var(--shadow-sm); overflow:hidden; }
    .code .ch { display:flex; gap:2px; padding:8px 10px; border-bottom:1px solid oklch(100% 0 0 / 0.08); }
    .code .ch button { font-family:'Geist', sans-serif; font-size:12px; font-weight:500; color:oklch(62% 0.02 258); padding:4px 10px; border-radius:6px; border:none; background:transparent; cursor:pointer; }
    .code .ch button:hover { color:oklch(92% 0.01 255); }
    .code .ch button.on { background:oklch(100% 0 0 / 0.1); color:oklch(92% 0.01 255); }
    .code pre { margin:0; padding:14px 16px; white-space:pre; overflow-x:auto; font:inherit; }
    .code pre[hidden] { display:none; }
    .code .c { color:oklch(62% 0.02 258); }
    .code .s { color:oklch(80% 0.11 150); }
    .code .k { color:oklch(80% 0.1 258); }
    .two { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
    .two > * { min-width:0; }
    .use { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
    .use .card { padding:26px; }
    .use h3 { font-size:17px; margin:14px 0 8px; }
    .use p { font-size:14px; color:var(--text-dim); line-height:1.6; }
    .use .who { font-size:12px; color:var(--accent); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; }
    .ladder { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--border); border-radius:18px; overflow:hidden; }
    .ladder > div { padding:24px 22px; border-right:1px solid var(--border); }
    .ladder > div:last-child { border-right:none; }
    .ladder .n { font-size:12px; color:var(--text-faint); font-weight:600; letter-spacing:0.04em; text-transform:uppercase; margin-bottom:10px; }
    .ladder h3 { font-size:17px; margin-bottom:8px; }
    .ladder p { font-size:13.5px; color:var(--text-dim); line-height:1.55; }
    .plan { padding:28px; }
    .plan .nm { font-size:18px; font-weight:600; }
    .plan .pr { font-size:34px; font-weight:700; letter-spacing:-0.03em; margin:8px 0 2px; }
    .plan .pr small { font-size:13px; color:var(--text-faint); font-weight:400; letter-spacing:0; }
    .plan ul { list-style:none; padding:0; margin:16px 0 20px; display:flex; flex-direction:column; gap:9px; }
    .plan li { display:flex; gap:9px; font-size:14px; color:var(--text-dim); line-height:1.5; }
    .plan li svg { flex-shrink:0; margin-top:3px; }
    .plan.hi { box-shadow:0 0 0 1.5px oklch(67% 0.22 296 / 0.6), var(--shadow); }

    /* ---- Responsive layer -------------------------------------------- */
    /* The artboards are 1440px compositions with grid templates set inline.
       An !important rule in a stylesheet outranks an inline declaration, so
       the layouts collapse here without touching the markup. */
    @media (max-width:1100px) {
      .wrap { padding-left:40px; padding-right:40px; }
      .hero { grid-template-columns:minmax(0, 1fr) !important; }
      .phone-wrap { justify-content:center !important; padding-left:0 !important; height:auto !important; padding-top:24px; }
      .float { display:none; }
      [style*="grid-template-columns:repeat(4"], .grid4, .steps4, .stat-row { grid-template-columns:repeat(2, 1fr) !important; }
      [style*="grid-template-columns:repeat(5"] { grid-template-columns:repeat(3, 1fr) !important; }
      [style*="grid-template-columns:repeat(3"], .grid3 { grid-template-columns:repeat(2, 1fr) !important; }
      .step-line { display:none; }
      .foot-grid { grid-template-columns:1fr 1fr 1fr 1fr; gap:24px; }
      h1 { font-size:52px !important; }
      .sec-h2 { font-size:34px !important; }
      .nav-links { gap:22px; }
    }
    @media (max-width:1000px) {
      .nav-links, .nav-cta { display:none; }
      .nav-toggle { display:inline-flex; }
      /* Open: the links and the two buttons join the header (it grows and
         pushes the page down) rather than floating over the hero, where a
         transparent "Log in" let the text show through. */
      .nav.open { flex-wrap:wrap; row-gap:0; }
      .nav.open .brand { order:1; }
      .nav.open .nav-toggle { order:2; }
      .nav.open .nav-links { order:3; flex-basis:100%; display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 0 6px; }
      .nav.open .nav-links .nav-link { display:block; width:100%; padding:12px 0; font-size:16px; border-top:1px solid var(--border); }
      .nav.open .nav-links .nav-link:first-child { border-top:none; }
      .nav.open .nav-cta { order:4; flex-basis:100%; display:flex; gap:10px; padding:6px 0 4px; }
      .nav.open .nav-cta a { flex:1; }
    }
    @media (max-width:760px) {
      .wrap { padding-left:20px; padding-right:20px; }
      [style*="grid-template-columns"], .grid2, .grid3, .grid4, .steps4, .stat-row, .faq, .page-hero, .foot-grid { grid-template-columns:minmax(0, 1fr) !important; }
      .strip { grid-template-columns:1fr 1fr !important; }
      .strip > div { padding:20px 12px; }
      .strip > div:nth-child(odd) { border-left:none; }
      .strip .v { font-size:24px; }
      h1, .page-hero h1 { font-size:38px !important; line-height:1.08 !important; }
      .sec-h2 { font-size:28px !important; }
      .page-hero { padding-top:48px; padding-bottom:48px; gap:36px; }
      .hero { padding-top:48px !important; padding-bottom:48px !important; }
      .cta { flex-direction:column; align-items:flex-start; padding:40px 26px !important; border-radius:18px; }
      .cta h2 { font-size:30px !important; }
      .cta > div { max-width:none !important; }
      .card[style*="width:"] { width:100% !important; }
      .wallet-art { width:100% !important; height:auto !important; }
      .wallet-art .card { position:static !important; width:100% !important; margin-bottom:14px; }
      .phone { transform:scale(0.84); transform-origin:top center; margin-bottom:-120px; }
      .foot .legal { flex-direction:column; gap:12px; align-items:flex-start; }
      table.fees { min-width:520px; }
      .faq { gap:12px; }
      [style*="padding:64px"] { padding:36px 24px !important; }
      [style*="padding:44px 48px"], [style*="padding:40px 48px"] { padding:28px 22px !important; }
      [style*="grid-template-columns:auto 1fr auto"] { grid-template-columns:minmax(0, 1fr) !important; }
      .subscribe { width:100% !important; }
      [style*="flex-shrink:0"] { flex-wrap:wrap; }
    }
    @media (max-width:480px) {
      .strip { grid-template-columns:1fr !important; }
      .strip > div { border-left:none; }
      .foot-grid { grid-template-columns:1fr !important; }
      .phone { transform:scale(0.78); margin-bottom:-170px; }
    }

    /* ---- Motion ------------------------------------------------------- */
    /* Progressive: nothing is hidden unless <html> carries .motion (set in
       each <head> only when the visitor hasn't asked for reduced motion),
       and scroll reveals only apply to what site.js tags .reveal. Moves
       use the individual `translate`/`scale` properties so they compose
       with the layout's own transforms (the phone is scaled on narrow
       screens). */
    @property --ring { syntax:'<percentage>'; inherits:false; initial-value:98%; }
    @keyframes m-rise { from { opacity:0; translate:0 26px; } to { opacity:1; translate:0 0; } }
    @keyframes m-drop { from { opacity:0; translate:0 -14px; } to { opacity:1; translate:0 0; } }
    @keyframes m-pop { from { opacity:0; scale:0.94; translate:0 18px; } to { opacity:1; scale:1; translate:0 0; } }
    @keyframes m-bob { 0%, 100% { translate:0 0; } 50% { translate:0 -9px; } }
    @keyframes m-drift { 0%, 100% { translate:0 0; scale:1; } 50% { translate:-40px 30px; scale:1.1; } }
    @keyframes m-drift-b { 0%, 100% { translate:0 0; } 50% { translate:60px -40px; } }
    @keyframes m-breathe { 0%, 100% { opacity:0.55; scale:1; } 50% { opacity:0.9; scale:1.12; } }
    @keyframes m-shift { from { background-position:0% 50%; } to { background-position:100% 50%; } }
    @keyframes m-draw { to { stroke-dashoffset:0; } }
    @keyframes m-grow-x { from { scale:0 1; } to { scale:1 1; } }
    @keyframes m-sheen { from { translate:-160% 0; } to { translate:260% 0; } }
    @keyframes m-ping { 0% { box-shadow:0 0 0 0 oklch(67% 0.22 296 / 0.45); } 70%, 100% { box-shadow:0 0 0 12px oklch(67% 0.22 296 / 0); } }

    /* Header and top section: on load, pure CSS so nothing flashes before
       site.js runs. Every page opens with the same block — a blurred glow,
       the text column, then (on most pages) the art column. */
    html.motion .nav { animation:m-drop .6s cubic-bezier(.2,.7,.2,1) backwards; }
    html.motion .page > div:first-of-type > div:nth-of-type(2) > *,
    html.motion .page > div.nf:first-of-type > *,
    html.motion .page > div:first-of-type > .col > :nth-child(-n+3) { animation:m-rise .8s cubic-bezier(.2,.7,.2,1) backwards; }
    html.motion .page > div:first-of-type > div:nth-of-type(2) > :nth-child(2), html.motion .page > div.nf:first-of-type > :nth-child(2), html.motion .page > div:first-of-type > .col > :nth-child(2) { animation-delay:.12s; }
    html.motion .page > div:first-of-type > div:nth-of-type(2) > :nth-child(3), html.motion .page > div.nf:first-of-type > :nth-child(3), html.motion .page > div:first-of-type > .col > :nth-child(3) { animation-delay:.24s; }
    html.motion .page > div:first-of-type > div:nth-of-type(2) > :nth-child(4), html.motion .page > div.nf:first-of-type > :nth-child(4) { animation-delay:.36s; }
    html.motion .page > div:first-of-type > div:nth-of-type(2) > :nth-child(n+5) { animation-delay:.48s; }
    html.motion .page > div:first-of-type > div:nth-of-type(3) { animation:m-pop 1.1s .3s cubic-bezier(.2,.7,.2,1) backwards; }
    html.motion .page > div:first-of-type > div[style*="blur"] { animation:m-drift 16s ease-in-out infinite; }
    /* The home headline arrives a line at a time. */
    html.motion .hero h1 { animation:none !important; }
    html.motion .hero h1 .hl { display:inline-block; animation:m-rise .9s cubic-bezier(.2,.7,.2,1) backwards; }
    html.motion .hero h1 .hl:nth-of-type(1) { animation-delay:.12s; }
    html.motion .hero h1 .hl:nth-of-type(2) { animation-delay:.24s; }
    html.motion .hero h1 .hl:nth-of-type(3) { animation-delay:.36s; }
    /* The phone's own parts, once it has landed. */
    html.motion .float { animation:m-pop .7s cubic-bezier(.2,.7,.2,1) backwards, m-bob 6s ease-in-out infinite; }
    html.motion .float:nth-of-type(1) { animation-delay:1.05s, 1.75s; }
    html.motion .float:nth-of-type(2) { animation-delay:.8s, 1.5s; animation-duration:.7s, 7s; }
    html.motion .hero-glow { animation:m-breathe 7s ease-in-out infinite; }
    html.motion .qa-item { animation:m-pop .6s cubic-bezier(.2,.7,.2,1) backwards; }
    html.motion .qa-item:nth-child(1) { animation-delay:.9s; } html.motion .qa-item:nth-child(2) { animation-delay:.98s; }
    html.motion .qa-item:nth-child(3) { animation-delay:1.06s; } html.motion .qa-item:nth-child(4) { animation-delay:1.14s; }
    html.motion .phone .hz i, html.motion .phone .mv-half i { transform-origin:left center; animation:m-grow-x 1s 1.1s cubic-bezier(.2,.7,.2,1) backwards; }
    html.motion .phone .mv-half.l i { transform-origin:right center; }
    html.motion .phone .hz-mark { animation:m-rise .6s 1.6s backwards; }
    html.motion .draw { animation:m-draw 1.8s var(--draw-delay, .9s) cubic-bezier(.3,.6,.2,1) forwards; }
    html.motion .grad-text { background-size:200% 200%; animation:m-shift 5s ease-in-out infinite alternate; }

    /* Scroll reveals: site.js tags .reveal and adds .in on entry, with a
       per-sibling --d stagger. */
    html.motion .reveal { opacity:0; translate:0 28px; transition:opacity .75s cubic-bezier(.2,.7,.2,1) var(--d, 0s), translate .75s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
    html.motion .reveal.in { opacity:1; translate:none; }
    .reveal[data-d="1"] { --d:.08s; } .reveal[data-d="2"] { --d:.16s; } .reveal[data-d="3"] { --d:.24s; }
    .reveal[data-d="4"] { --d:.32s; } .reveal[data-d="5"] { --d:.4s; }
    html.motion .reveal .bar i, html.motion .reveal .slider .fill, html.motion .reveal .hz i { transform-origin:left center; scale:0 1; transition:scale 1.3s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + .35s); }
    html.motion .reveal.in .bar i, html.motion .reveal.in .slider .fill, html.motion .reveal.in .hz i { scale:1 1; }
    html.motion .reveal .slider .knob { opacity:0; transition:opacity .4s calc(var(--d, 0s) + 1.2s); }
    html.motion .reveal.in .slider .knob { opacity:1; }
    html.motion .reveal .mini { opacity:0; translate:0 18px; transition:opacity .7s calc(var(--d, 0s) + .3s), translate .7s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + .3s); }
    html.motion .reveal.in .mini { opacity:1; translate:0 0; }
    html.motion .reveal .step-line { transform-origin:left center; scale:0 1; transition:scale 1s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + .4s); }
    html.motion .reveal.in .step-line { scale:1 1; }
    html.motion .reveal .step-card { opacity:0; translate:0 14px; transition:opacity .6s calc(var(--d, 0s) + .5s), translate .6s cubic-bezier(.2,.7,.2,1) calc(var(--d, 0s) + .5s); }
    html.motion .reveal.in .step-card { opacity:1; translate:0 0; }
    html.motion .reveal.in .num { animation:m-ping 1.4s calc(var(--d, 0s) + .3s) 2; }
    html.motion .ring { background:conic-gradient(var(--accent) 0 var(--ring), var(--surface-2) var(--ring) 100%); transition:--ring 1.8s cubic-bezier(.3,.6,.2,1) .2s; }
    html.motion .ring.ring-anim { --ring:0%; }
    html.motion .ring.ring-anim.in { --ring:98%; }
    html.motion .reveal .shard, html.motion .reveal .sec-row, html.motion .reveal .check-row { opacity:0; translate:-14px 0; transition:opacity .5s, translate .5s cubic-bezier(.2,.7,.2,1); }
    html.motion .reveal.in .shard, html.motion .reveal.in .sec-row, html.motion .reveal.in .check-row { opacity:1; translate:0 0; }
    html.motion .reveal.in :is(.shard, .sec-row, .check-row):nth-child(1) { transition-delay:.35s; }
    html.motion .reveal.in :is(.shard, .sec-row, .check-row):nth-child(2) { transition-delay:.45s; }
    html.motion .reveal.in :is(.shard, .sec-row, .check-row):nth-child(3) { transition-delay:.55s; }
    html.motion .reveal.in :is(.shard, .sec-row, .check-row):nth-child(4) { transition-delay:.65s; }
    html.motion .reveal.in :is(.shard, .sec-row, .check-row):nth-child(n+5) { transition-delay:.75s; }
    html.motion .cta { background-size:180% 180%; animation:m-shift 10s ease-in-out infinite alternate; }
    html.motion .cta::before { animation:m-drift 14s ease-in-out infinite; }
    html.motion .cta::after { animation:m-drift-b 18s ease-in-out infinite; }

    /* Components: hover and press. */
    .btn-primary, .btn-ghost { transition:filter .2s, background-color .2s, border-color .2s, scale .15s; }
    .btn-primary { position:relative; overflow:hidden; isolation:isolate; }
    .btn-primary::after { content:""; position:absolute; inset:0; width:40%; background:linear-gradient(100deg, transparent, oklch(100% 0 0 / 0.35), transparent); translate:-160% 0; pointer-events:none; }
    .btn-primary:hover::after { animation:m-sheen .8s ease; }
    .btn-primary:active, .btn-ghost:active { scale:.97; }
    .card, .feat, .fcard, .pillar, .stat, .post, .step-card, .shard, .mkt, .role, .ticket .field { transition-property:border-color, box-shadow, transform, background-color; transition-duration:.35s; transition-timing-function:cubic-bezier(.2,.7,.2,1); }
    :is(.feat, .fcard, .pillar, .stat, .post):hover { transform:translateY(-5px); border-color:color-mix(in oklch, var(--accent) 45%, var(--border)); box-shadow:0 18px 44px oklch(0% 0 0 / 0.35), 0 0 0 1px color-mix(in oklch, var(--accent) 18%, transparent); }
    .step-card:hover, .shard:hover { transform:translateY(-3px); border-color:color-mix(in oklch, var(--accent) 40%, var(--border)); }
    .feature-icon { transition:scale .35s cubic-bezier(.2,.7,.2,1), rotate .35s cubic-bezier(.2,.7,.2,1), background-color .35s; }
    :is(.feat, .fcard, .pillar, .card):hover .feature-icon { scale:1.1; rotate:-6deg; background:color-mix(in oklch, var(--accent) 26%, transparent); }
    .link svg { transition:translate .25s cubic-bezier(.2,.7,.2,1); }
    .link:hover svg, .btn-primary:hover svg, .btn-ghost:hover svg { translate:4px 0; }
    .btn-primary svg, .btn-ghost svg { transition:translate .25s cubic-bezier(.2,.7,.2,1); }
    .nav-link { position:relative; transition:color .2s; }
    .nav-link::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px; background:var(--accent-gradient); scale:0 1; transform-origin:left center; transition:scale .3s cubic-bezier(.2,.7,.2,1); }
    .nav-link:hover::after, .nav-link.active::after { scale:1 1; }
    .mkt:hover { background:var(--surface-2); }
    .qa-box { transition:scale .25s cubic-bezier(.2,.7,.2,1); }
    .qa-item:hover .qa-box { scale:1.08; }
    .foot a { transition:color .2s, translate .2s; }
    .foot-grid a:hover { translate:3px 0; }

    /* Reading progress along the top edge (site.js). */
    .scroll-progress { position:fixed; left:0; top:0; height:3px; width:100%; background:var(--accent-gradient); transform-origin:left center; scale:0 1; z-index:60; pointer-events:none; }

    @media (max-width:1000px) {
      .nav-link::after { display:none; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
      .scroll-progress { display:none; }
    }

    /* Phone fixes for panels that sit side by side on desktop. */
    @media (max-width:760px) {
      .hero > *, .page-hero > * { min-width:0; }
      div:has(> .ring) { flex-direction:column; align-items:stretch !important; gap:20px !important; }
      div:has(> .ring) > .ring { margin:0 auto; }
      .vault { padding:20px; }
      .card[style*="display:flex"][style*="justify-content:space-between"] { flex-direction:column; align-items:stretch !important; gap:24px !important; }
      .card[style*="display:flex"][style*="justify-content:space-between"] > [style*="flex-shrink:0"] { flex-shrink:1; }
    }

    /* Business page, narrower screens. The hero's 620px console mock moves
       under the text; the ladder and the console cards fold to two, then one. */
    @media (max-width:1100px) {
      .biz-hero { grid-template-columns:minmax(0, 1fr) !important; }
      .biz-hero > div:nth-of-type(3) { justify-content:flex-start !important; }
      .use { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .ladder { grid-template-columns:repeat(2, minmax(0, 1fr)); }
      .ladder > div { border-bottom:1px solid var(--border); }
      .ladder > div:nth-child(2n) { border-right:none; }
      .ladder > div:nth-last-child(-n+2) { border-bottom:none; }
    }
    @media (max-width:900px) {
      .two { grid-template-columns:minmax(0, 1fr); gap:36px; }
    }
    /* Seven links since Business joined the nav: a little less air between
       them, the toggle from 1000px, and the "for Business" tag only where
       the row has room for it (or the links are behind the toggle). */
    @media (max-width:1280px) { .nav-links { gap:26px; } }
    @media (max-width:1100px) { .nav-links { gap:22px; } }
    @media (min-width:1001px) and (max-width:1300px) { .nav .biz-tag { display:none; } }
    @media (max-width:1000px) {
      .nav.open .nav-links .nav-link.nav-biz { padding-left:0; border-left:none; }
    }
    @media (max-width:760px) {
      .use, .ladder { grid-template-columns:minmax(0, 1fr); }
      .ladder > div, .ladder > div:nth-last-child(-n+2) { border-right:none; border-bottom:1px solid var(--border); }
      .ladder > div:last-child { border-bottom:none; }
      .mock .mb { grid-template-columns:minmax(0, 1fr); }
      .mock .ms { display:none; }
      .mock .mt span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .mock .tiles .v { font-size:13px; }
      .mock .row { grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr) auto; }
      .mock .row > :nth-child(2) { display:none; }
      .mock .row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .code { font-size:12px; }
    }