@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-variable.woff2) format("woff2")}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-variable.woff2) format("woff2")}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-variable.woff2) format("woff2")}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/inter-variable.woff2) format("woff2")}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-variable.woff2) format("woff2")}


  /* The page's own element rules, in a layer (BL-PROD-69).

     This page hosts two stylesheets: its own, and the app's, which draws the
     phone screens lifted into `index.html`. Tailwind v4 emits everything in
     cascade layers, and an UNLAYERED rule beats every layered one however
     specific — so left unlayered, `*{padding:0}` below wipes the padding off
     every lifted screen and `h2{font-size:clamp(…,40px)}` blows its headings
     up to 40px. Both did, and neither reported anything: it is a cascade
     outcome, not an error.

     `page` sits between the app's `components` and `utilities` (the order is
     declared at the top of `app-screens.css`, which loads first), so these
     still beat the app's base reset — the hero keeps its 52px `h1` — while a
     lifted screen keeps the type and spacing the catalogue gave it.

     Only ELEMENT rules belong here. The class rules below stay unlayered on
     purpose: `.phone-shot` and `.shot` are this page's frame around the app's
     markup and have to win. */
  @layer page{
    *{margin:0;padding:0;box-sizing:border-box}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:inherit}
    h1{font-size:clamp(34px,4.6vw,52px);line-height:1.07;font-weight:800;letter-spacing:-.028em;text-wrap:balance}
    h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12;font-weight:800;letter-spacing:-.022em;text-wrap:balance}
    h3{font-size:clamp(18px,2vw,22px);font-weight:800;letter-spacing:-.015em}
    main{overflow-x:clip}
    section{position:relative}
  }

  :root{
    --ink:#171a2e; --navy:#20233b; --slate:#5b6478; --slate-light:#8a93a6;
    --green:#17c98b; --green-deep:#0da173; --blue:#4353ff; --blue-deep:#3542d8;
    --blue-soft:#eef1ff; --mint:#e6f8f0; --bg:#fbfcfe; --bg-2:#f4f7fb;
    --card-border:#e9edf3; --line-strong:#dbe2ec;
    --amber:#c07617; --amber-bg:#fff4e5; --red:#c0392b; --red-bg:#fdecea;
    --grad:linear-gradient(95deg,#4667f5 0%,#2fa4c9 48%,#3ecf8e 100%);
    --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
    --shadow-soft:0 8px 30px rgba(23,26,46,.05);
    --shadow-md:0 14px 40px rgba(23,26,46,.08);
    --shadow-lift:0 30px 70px rgba(23,26,46,.13);
  }
  html{scroll-behavior:smooth}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
  body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px;-webkit-font-smoothing:antialiased}
  .wrap{max-width:1140px;margin:0 auto;padding:0 clamp(20px,5vw,32px)}
  .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

  .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .sub{color:var(--slate);font-size:clamp(16px,1.5vw,18.5px);line-height:1.65}
  .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-deep)}
  .kicker::before{content:"";width:22px;height:2px;background:var(--grad);border-radius:2px}
  .kicker.green{color:var(--green-deep)}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:inherit;font-size:15.5px;font-weight:650;line-height:1;padding:16px 26px;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s,color .18s}
  .btn .ic{width:17px;height:17px;stroke-width:2}
  .btn-primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(67,83,255,.28)}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(67,83,255,.38)}
  .btn-outline{background:#fff;color:var(--ink);border-color:var(--line-strong)}
  .btn-outline:hover{border-color:var(--blue);color:var(--blue-deep);transform:translateY(-2px)}
  .btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
  @media(prefers-reduced-motion:reduce){.btn:hover{transform:none}}

  /* logo */
  .logo{display:inline-flex;align-items:center;gap:9px}
  .logo-img{height:28px;width:auto;display:block}
  footer .logo-img{height:26px;filter:brightness(0) invert(1)}

  /* nav */
  nav.top{position:sticky;top:0;z-index:50;background:rgba(251,252,254,.86);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .3s}
  nav.top.stuck{border-bottom-color:var(--card-border)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px}
  .nav-links{display:none;gap:28px;font-size:14px;font-weight:600;color:var(--slate)}
  .nav-links a:hover{color:var(--ink)}
  @media(min-width:900px){.nav-links{display:flex}}
  .nav-cta{display:flex;align-items:center;gap:22px}
  .nav-cta .btn{white-space:nowrap}
  .nav-login{font-size:14px;font-weight:600;color:var(--slate);white-space:nowrap}
  .nav-login:hover{color:var(--ink)}
  @media(max-width:380px){.nav-cta{gap:14px}.nav-cta .btn{padding:10px 14px !important}}

  /* ---------- hero ---------- */
  .hero{padding:clamp(52px,7vw,90px) 0 clamp(56px,7vw,90px);position:relative;overflow:hidden;background:radial-gradient(820px 480px at 8% -6%,rgba(70,103,245,.08),transparent 60%),radial-gradient(700px 500px at 96% 30%,rgba(62,207,142,.10),transparent 62%),var(--bg)}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:clamp(44px,6vw,60px);align-items:center}
  @media(min-width:940px){.hero-grid{grid-template-columns:1.05fr 360px}}
  .hero h1{margin-top:20px}
  .hero .sub{margin-top:22px;max-width:50ch}
  .hero .sub.second{margin-top:12px;font-size:16px;max-width:54ch}
  .never-col{display:flex;flex-direction:column;gap:10px;margin-top:26px}
  .never-col span{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:700;color:var(--ink)}
  .never-col .ic{width:20px;height:20px;color:var(--green-deep);stroke-width:2.4}
  .hero-ctas{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
  .hero-note{margin-top:16px;font-size:13.5px;color:var(--slate-light)}

  /* ---------- device shells ---------- */
  /* The shells are drawn here; WHAT IS ON THE SCREEN IS A PHOTOGRAPH of the
     shipped app, generated by `tools/design/app-shots.mjs` into
     assets/screens/ (BL-PROD-69). Nothing below may draw app UI — that is the
     whole point of the item: the page used to hand-draw a P1–P4 priority
     ladder and an onboarding stepper the product has never had. If a section
     needs a new picture, add a frame to that script; do not style one here. */
  /* The phone screens are the mobile catalogue's OWN device frames (DS-31,
     `/kitchen-sink/mobile`), lifted as live markup — bezel, status bar, tab
     bar and float shadow all come with them, so nothing here draws a phone or
     casts a shadow for one.

     They are laid out at their real size and scaled down by one constant.
     `--l2c-frame-w/h` are written by the generator into `app-screens.css`
     from the frames it measured, so the page never restates 390×760: if the
     catalogue's phone changes size, the scale follows it. `--s` is the only
     number here, and it is the whole responsive story — the frames are one
     rigid block of markup and cannot reflow. */
  .phone-shot{--s:.795;position:relative;margin:0 auto;width:calc(var(--l2c-frame-w) * var(--s));height:calc(var(--l2c-frame-h) * var(--s))}
  @media(max-width:360px){.phone-shot{--s:.68}}
  /* Two of the lifted screens (approvals, the lead record) hold more than one
     phone-height of content, and their own pane is `overflow-y:auto`, so they
     scroll inside the phone like the app does. `contain` stops that gesture
     also dragging the marketing page underneath — without it a wheel over the
     phone moved both at once. Unlayered on purpose: the pane's `overflow-y`
     comes from a Tailwind utility, and only an unlayered rule outranks a
     layer. (This is also why the wrapper cannot be `inert`: inert swallows
     the wheel. `assets/orb.js` sets `tabindex="-1"` instead.) */
  [data-frame] .overflow-y-auto{overscroll-behavior:contain}

  .phone-cap{text-align:center;font-size:13px;color:var(--slate-light);font-weight:600;margin-top:18px}

  .desktop{background:#0e1120;border-radius:22px;padding:10px 10px 0;box-shadow:var(--shadow-lift);overflow:hidden;text-align:left}
  .desk-chrome{display:flex;align-items:center;gap:7px;padding:9px 13px 12px}
  .desk-chrome .dot{width:10px;height:10px;border-radius:50%}
  .desk-chrome .url{margin-left:12px;background:#1c2138;color:#8a93a6;font-size:11.5px;font-weight:600;padding:5px 16px;border-radius:7px;flex:1;max-width:380px;text-align:center}
  .desk-screen{position:relative;aspect-ratio:1280/900;border-radius:12px 12px 0 0;overflow:hidden;background:#f4f6fa}
  /* A 1280-wide screenshot inside a 350px column is 3px of type. Below the
     breakpoint the frame keeps the capture at a readable width and lets the
     reader pan it instead — the hand-drawn markup this replaced could reflow,
     and a photograph cannot. The leading frame goes `relative` so it sizes the
     scroll box; the ones cross-faded over it stay absolute on top. */
  /* Two classes deep on purpose: `demos.css` loads after this file and sets
     `.dc-screen{aspect-ratio:…}` at one class, so a single-class override here
     loses on source order and the frame stays letterboxed. */
  @media(max-width:880px){
    .desktop .desk-screen,.demo-chat .dc-screen{aspect-ratio:auto;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
    .desktop .desk-screen .shot,.demo-chat .dc-screen .shot{width:860px;height:auto;max-width:none}
    .desktop .desk-screen .shot.on,.demo-chat .dc-screen .shot.on{position:relative}
  }

  /* One screen per layer, stacked; the scene runner cross-fades them by moving
     the `on` class. Reduced motion never starts a scene, so the first layer is
     what a reader who asked for stillness sees. */
  .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transition:opacity .8s ease}
  /* The phone layers hold markup, not an image: each is laid out at the
     catalogue's real frame size and scaled as a block. `object-fit` above is
     for the desktop `<img>` layers and means nothing here. */
  .phone-shot .shot{inset:auto;top:0;left:0;width:var(--l2c-frame-w);height:var(--l2c-frame-h);transform:scale(var(--s));transform-origin:top left}
  /* `turn`: the frame that is leaving tilts away and the one arriving settles
     flat, so the phone reads as being turned over rather than dissolved. Kept
     to the one scene that asked for it (Sam, 2026-09-03 — meeting capture into
     the live transcript); the others cross-fade straight.

     The tilt goes on the wrapper INSIDE the layer, not the layer: the layer's
     own transform is the scale, about its top-left corner, and a rotation
     composed onto that would swing the phone around its corner instead of
     turning it over. `.shot-inner` boxes exactly the lifted phone.

     That wrapper exists for accessibility first: `inert` removes an element
     AND its subtree from the accessibility tree, so putting it on the labelled
     slot would have silenced the label along with the buttons. The slot keeps
     `role="img"` and its description; the wrapper inside takes `inert`, so a
     phone screen's worth of controls is out of the tab order and the screen
     still announces as one picture. */
  .phone-shot.turn .shot-inner{transform:rotate(2.2deg) scale(.97);transform-origin:50% 62%;transition:transform 1s cubic-bezier(.22,.7,.25,1)}
  .phone-shot.turn .shot.on .shot-inner{transform:none}
  .phone-shot.turn .shot{transition:opacity 1s ease}
  @media(prefers-reduced-motion:reduce){.phone-shot.turn .shot-inner{transform:none;transition:none}}
  .shot.on{opacity:1}
  @media(prefers-reduced-motion:reduce){.shot{transition:none}}

  /* ---------- trust bar ---------- */
  .trust{background:#fff;border-block:1px solid var(--card-border);padding:34px 0}
  .trust .t-label{text-align:center;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-light);margin-bottom:20px}
  .trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px}
  .trust-row span{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--slate)}
  .trust-row .ic{width:17px;height:17px;color:var(--green-deep);stroke-width:2.2}

  /* ---------- sections ---------- */
  /* Decorative overhangs (rotated task cards, their badges) must not be able to
     scroll the page sideways on narrow screens. `clip` rather than `hidden` so
     no scroll container is created. */
  .band{padding-block:clamp(72px,10vw,128px)}
  .band.tint{background:var(--bg-2)}
  .band.white{background:#fff;border-block:1px solid var(--card-border)}
  .sec-head{max-width:680px}
  .sec-head.center{margin-inline:auto;text-align:center}
  .sec-head h2{margin-top:18px}
  .sec-head .sub{margin-top:16px}
  .sec-head.center .sub{margin-inline:auto}

  /* ---------- problem: the pile-up ---------- */
  .problem-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,5vw,64px);align-items:center;margin-top:clamp(40px,5vw,60px)}
  @media(min-width:920px){.problem-grid{grid-template-columns:1.1fr .9fr}}
  .pile{display:grid;grid-template-columns:1fr;gap:14px;position:relative;min-width:0}
  @media(min-width:560px){.pile{grid-template-columns:repeat(2,1fr)}}
  .pile::before{content:"";position:absolute;inset:-8%;background:radial-gradient(60% 60% at 50% 50%,rgba(192,57,43,.05),transparent 70%);pointer-events:none;border-radius:50%}
  .task-card{background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:18px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:14px;position:relative}
  .task-card .tc-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none}
  .task-card .tc-ic .ic{width:24px;height:24px;stroke-width:1.9}
  .task-card h4{font-size:15.5px;font-weight:800;line-height:1.25}
  .task-card p{font-size:12.5px;color:var(--slate-light);font-weight:600;margin-top:2px}
  .task-card .bub{position:absolute;top:-9px;right:-7px;min-width:24px;height:24px;border-radius:999px;background:var(--red);color:#fff;font-size:11.5px;font-weight:800;display:grid;place-items:center;padding:0 7px;box-shadow:0 4px 12px rgba(192,57,43,.4)}
  .task-card .bub.am{background:#e08c1f;box-shadow:0 4px 12px rgba(224,140,31,.4)}
  .task-card .bub.bl{background:var(--blue);box-shadow:0 4px 12px rgba(67,83,255,.4)}
  .tc-blue{background:var(--blue-soft);color:var(--blue-deep)}
  .tc-red{background:var(--red-bg);color:var(--red)}
  .tc-amber{background:var(--amber-bg);color:var(--amber)}
  .tc-green{background:var(--mint);color:var(--green-deep)}
  .r-l{transform:rotate(-1.6deg)}
  .r-r{transform:rotate(1.4deg)}
  .r-l2{transform:rotate(-.8deg)}
  .r-r2{transform:rotate(2deg)}
  @media(prefers-reduced-motion:reduce){.r-l,.r-r,.r-l2,.r-r2{transform:none}}
  .problem-copy .p-lead{font-size:clamp(21px,2.5vw,27px);font-weight:800;letter-spacing:-.018em;color:var(--ink);line-height:1.28}
  .problem-copy p{color:var(--slate);margin-top:14px}
  .problem-copy .pull{margin-top:24px;padding:18px 22px;background:#fff;border-left:3px solid var(--green);border-radius:0 12px 12px 0;box-shadow:var(--shadow-soft);font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.55}
  .problem-copy .pull b{color:var(--green-deep)}

  /* outcomes */
  .out-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:clamp(38px,5vw,56px)}
  @media(min-width:680px){.out-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:960px){.out-grid{grid-template-columns:repeat(3,1fr)}}
  .out-card{background:#fff;border:1px solid var(--card-border);border-radius:18px;padding:30px 28px;box-shadow:var(--shadow-soft)}
  .out-card .oc-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--mint);color:var(--green-deep);margin-bottom:18px}
  .out-card:nth-child(even) .oc-ic{background:var(--blue-soft);color:var(--blue-deep)}
  .out-card .oc-ic .ic{width:22px;height:22px}
  .out-card h3{font-size:18px}
  .out-card p{margin-top:8px;color:var(--slate);font-size:14.5px;line-height:1.6}

  /* what it does — mobile rows */
  .does{display:flex;flex-direction:column;gap:clamp(60px,8vw,100px);margin-top:clamp(44px,6vw,72px)}
  .do-row{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,64px);align-items:center}
  @media(min-width:880px){.do-row{grid-template-columns:1fr 380px}.do-row.flip{grid-template-columns:380px 1fr}.do-row.flip .do-copy{order:2}
    /* `solo` is a row with no picture beside it. The app has no meetings
       screen to photograph, so rather than hand-draw one (BL-PROD-69) the
       copy takes the whole width. */
    .do-row.solo{grid-template-columns:minmax(0,760px)}}
  .do-copy .kicker{margin-bottom:14px}
  .do-copy h3{font-size:clamp(22px,2.6vw,28px)}
  .do-copy p{margin-top:14px;color:var(--slate)}
  .do-copy ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
  .do-copy li{display:flex;gap:10px;font-size:15px;color:var(--slate);font-weight:500}
  .do-copy li .ic{width:17px;height:17px;color:var(--green-deep);stroke-width:2.4;margin-top:3px}
  .do-copy .close{margin-top:18px;font-weight:700;color:var(--ink)}
  .do-copy .close b{color:var(--green-deep)}

  /* platform (desktop CRM) */
  .platform-note{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:26px}
  .platform-note span{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--slate)}
  .platform-note .ic{width:17px;height:17px;color:var(--green-deep);stroke-width:2.2}
  .platform-shot{margin-top:clamp(36px,5vw,52px)}

  /* experience */
  .exp-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,64px);align-items:center;margin-top:clamp(36px,5vw,52px)}
  @media(min-width:880px){.exp-grid{grid-template-columns:1.05fr .95fr}}
  .exp-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:520px){.exp-list{grid-template-columns:1fr}}
  .exp-item{background:#fff;border:1px solid var(--card-border);border-radius:14px;padding:18px;box-shadow:var(--shadow-soft);font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:11px}
  .exp-item .ic{width:18px;height:18px;color:var(--blue-deep)}
  .exp-copy p{margin-top:16px;color:var(--slate)}
  .exp-copy .pull{margin-top:22px;font-size:18px;font-weight:700;color:var(--ink);line-height:1.5}
  .exp-copy .pull b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .act-block{margin-top:clamp(48px,6vw,64px);background:#fff;border:1px solid var(--card-border);border-radius:24px;padding:clamp(26px,4vw,48px);box-shadow:var(--shadow-md);position:relative;overflow:hidden}
  .act-block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--grad)}
  .act-grid{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:center}
  @media(min-width:820px){.act-grid{grid-template-columns:1.05fr .95fr}}
  .act-left h3{font-size:clamp(22px,2.6vw,30px);line-height:1.18;margin-top:14px}
  .act-left h3 b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .act-left p{margin-top:14px;color:var(--slate);font-size:15.5px}
  .act-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
  .act-tags span{font-size:12px;font-weight:700;color:var(--blue-deep);background:var(--blue-soft);border-radius:999px;padding:6px 13px}
  .act-right{background:var(--bg-2);border:1px solid var(--card-border);border-radius:18px;padding:16px}
  .ar-head{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding:2px 6px 14px}
  .ar-head .ic{width:15px;height:15px;color:var(--green-deep)}
  .ar-list{list-style:none;display:flex;flex-direction:column;gap:8px}
  .ar-list li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:var(--ink);padding:11px 14px;border-radius:12px;background:#fff;border:1px solid var(--card-border);transition:transform .15s ease,box-shadow .15s ease}
  .ar-list li:hover{transform:translateX(4px);box-shadow:var(--shadow-soft)}
  @media(prefers-reduced-motion:reduce){.ar-list li:hover{transform:none}}
  .ar-ic{width:24px;height:24px;border-radius:50%;background:var(--mint);color:var(--green-deep);display:grid;place-items:center;flex:none}
  .ar-ic .ic{width:14px;height:14px;stroke-width:2.6}
  .path-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:22px}
  .path-list span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--slate)}
  .path-list .ic{width:15px;height:15px;color:var(--green-deep);stroke-width:2.4}

  /* day in the life */
  .day-video{margin:clamp(40px,5vw,56px) auto 0;max-width:880px;background:#0e1120;border-radius:22px;box-shadow:var(--shadow-lift);aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden}
  .day-video::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 10%,rgba(70,103,245,.25),transparent 65%),radial-gradient(60% 80% at 80% 90%,rgba(62,207,142,.18),transparent 65%)}
  .day-video .play{position:relative;width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.96);display:grid;place-items:center;box-shadow:0 12px 40px rgba(0,0,0,.4);cursor:pointer;transition:transform .2s}
  .day-video .play:hover{transform:scale(1.06)}
  .day-video .play .ic{width:30px;height:30px;color:var(--ink);fill:var(--ink);margin-left:4px}
  .day-video .cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#c6cde0;font-size:13.5px;font-weight:600}
  .timeline{max-width:760px;margin:clamp(44px,6vw,60px) auto 0;position:relative;padding-left:34px}
  .timeline::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,#4667f5,#2fa4c9,#3ecf8e);border-radius:2px;opacity:.35}
  .t-item{position:relative;padding-bottom:34px}
  .t-item:last-child{padding-bottom:0}
  .t-item::before{content:"";position:absolute;left:-31px;top:7px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--green);box-shadow:0 0 0 4px var(--mint)}
  .t-item .time{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--blue-deep)}
  .t-item h4{font-size:17px;font-weight:800;margin-top:4px}
  .t-item p{color:var(--slate);font-size:15px;margin-top:4px}
  .t-close{margin-top:clamp(36px,5vw,48px);text-align:center;font-size:clamp(18px,2.2vw,22px);font-weight:700;color:var(--ink);max-width:34ch;margin-inline:auto;line-height:1.5}
  .t-close b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ---------- integrations: hub ---------- */
  .hub{max-width:820px;margin:clamp(40px,5vw,56px) auto 0}
  .hub-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:680px){.hub-apps{grid-template-columns:repeat(2,1fr)}}
  .app-tile{background:#fff;border:1px solid var(--card-border);border-radius:18px;padding:20px 14px 16px;box-shadow:var(--shadow-soft);text-align:center;transition:transform .2s ease,box-shadow .2s ease}
  .app-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
  @media(prefers-reduced-motion:reduce){.app-tile:hover{transform:none}}
  .app-tile .app-ic{width:52px;height:52px;margin:0 auto 12px;border-radius:14px;display:grid;place-items:center;box-shadow:0 6px 18px rgba(23,26,46,.10)}
  .app-tile .app-ic svg{width:30px;height:30px;display:block}
  .app-tile h4{font-size:13.5px;font-weight:800}
  .app-tile p{font-size:11px;color:var(--slate-light);font-weight:600;margin-top:2px}
  .hub-join{display:flex;flex-direction:column;align-items:center;margin-top:0}
  .hub-lines{width:2px;height:44px;background:linear-gradient(180deg,transparent,#2fa4c9);margin-top:14px}
  .hub-core{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(155deg,#1b1f3d,#141834);border-radius:999px;padding:16px 30px;box-shadow:var(--shadow-md)}
  .hub-core .logo .word{color:#fff;font-size:19px}
  .hub-core .tagline{font-size:13px;color:#9aa3c0;font-weight:600;border-left:1px solid rgba(255,255,255,.18);padding-left:12px}
  .int-note{text-align:center;margin-top:24px;color:var(--slate);font-size:15.5px}
  .int-note b{color:var(--ink)}
  .orbit{max-width:900px;margin:clamp(36px,5vw,54px) auto 0}
  .orbit>svg{width:100%;height:auto;display:block;overflow:visible}
  .wire{stroke-dasharray:2 9;stroke-linecap:round;animation:flow 5.5s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-22}}
  @media(prefers-reduced-motion:reduce){.wire{animation:none;stroke-dasharray:none}}
  .node-label{font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;fill:var(--slate)}
  /* narrow screens: the scaled-down orbit SVG makes icons/labels unreadably small,
     so swap to a hub card + wrapped tile grid using the same glyph symbols */
  .orbit-m{display:none}
  @media(max-width:719px){
    .orbit>svg{display:none}
    .orbit-m{display:block}
    .orbit-m-hub{display:flex;justify-content:center}
    .orbit-m-wires{display:block;width:100%;max-width:400px;height:auto;margin:0 auto 12px;overflow:visible}
    .orbit-m-hub span{background:#fff;border-radius:18px;padding:16px 26px;box-shadow:var(--shadow-lift);display:inline-flex}
    .orbit-m-hub img{display:block;width:120px;height:auto}
    .orbit-m-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 6px;max-width:400px;margin:0 auto}
    .tile{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--slate)}
    .tile-ic{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(23,26,46,.13)}
  }

  /* security */
  .sec-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:clamp(36px,5vw,48px)}
  @media(min-width:680px){.sec-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:960px){.sec-grid{grid-template-columns:repeat(3,1fr)}}
  .sec-card{background:#fff;border:1px solid var(--card-border);border-radius:16px;padding:22px;box-shadow:var(--shadow-soft);display:flex;gap:13px;align-items:flex-start}
  .sec-card .ic{width:20px;height:20px;color:var(--green-deep);stroke-width:2;margin-top:2px}
  .sec-card h4{font-size:15px;font-weight:800}
  .sec-card p{font-size:13.5px;color:var(--slate);margin-top:4px;line-height:1.55}
  .sec-close{text-align:center;margin-top:30px;font-size:17px;font-weight:700}
  .sec-close b{color:var(--green-deep)}

  /* final cta */
  .final .cta-card{position:relative;overflow:hidden;background:linear-gradient(155deg,#1b1f3d,#141834);border-radius:28px;padding:clamp(48px,7vw,88px) clamp(24px,5vw,64px);text-align:center;color:#eaf0f8;box-shadow:var(--shadow-lift)}
  .final .cta-card::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 0%,rgba(46,164,201,.22),transparent 70%);pointer-events:none}
  .final .cta-card>*{position:relative}
  .final h2{color:#fff}
  .final p{margin:18px auto 0;max-width:52ch;color:#b9c2da}
  .final .ctas{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
  .final .btn-outline{background:transparent;color:#eaf0f8;border-color:rgba(255,255,255,.26)}
  .final .btn-outline:hover{border-color:#3ecf8e;color:#fff}

  footer.site{background:#171a2e;color:#9aa3c0;padding:44px 0}
  .foot{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
  .foot .fnav{display:flex;gap:22px;flex-wrap:wrap}
  .foot .fnav a{color:#9aa3c0;font-size:14px}
  .foot .fnav a:hover{color:#fff}
  .foot .muted{font-size:13px}

  .js .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
  .js .reveal.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}