/* ============ PLATFORM ============ */
.p-hero{position:relative;overflow:hidden}
.p-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 520px at 50% -12%,rgba(166,64,59,.08),transparent 60%);pointer-events:none}
.p-hero .top{position:relative;text-align:center;max-width:860px;margin:0 auto;padding-top:92px}
.p-badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink-2);background:#fff;border:1px solid var(--line);padding:7px 14px;border-radius:100px;margin-bottom:26px;box-shadow:var(--sh-sm)}
.p-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(47,158,98,.16)}
.p-hero h1{font-size:clamp(42px,5.4vw,72px);font-weight:800;letter-spacing:-0.04em;line-height:1.02;margin-bottom:22px}
.p-hero h1 .g{color:var(--red)}
.p-hero .lede{font-size:20px;color:var(--ink-2);max-width:52ch;margin:0 auto 34px;line-height:1.55}
.p-hero .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* browser frame / product shot */
.browser{margin-top:64px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-lg);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--bg-grey)}
.browser-bar .d{width:11px;height:11px;border-radius:50%;background:#E0E3E8}
.browser-url{margin-left:12px;flex:1;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}
.os{display:grid;grid-template-columns:230px 1fr;min-height:520px}
.os-side{background:var(--bg-grey);border-right:1px solid var(--line);padding:18px 14px}
.os-side .sb-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;padding:6px 10px 16px}
.os-side .sb{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink-2);margin-bottom:2px}
.os-side .sb.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:var(--sh-sm)}
.os-side .sb svg{color:var(--ink-3)} .os-side .sb.on svg{color:var(--red)}
.os-main{padding:22px 26px}
.os-search{display:flex;align-items:center;gap:10px;background:var(--bg-grey);border:1px solid var(--line);border-radius:11px;padding:11px 15px;font-size:14px;color:var(--ink-3);margin-bottom:20px}
.os-search .cur{margin-left:auto;font-size:11px;color:var(--ink-4);font-family:var(--mono)}
/* Six columns since 13 Sep 2026, matching the real dashboard table: the mockup
   gained Doneness and Price when it started reading the products table. */
/* The last column is one actions cell holding Alert and View side by side,
   not two grid columns, because that is how the dashboard row is built. It
   widened from 50px to 112px on 13 Sep when Alert arrived; the name column
   gave up the difference so the table still fits the frame. */
.os-th{display:grid;grid-template-columns:22px 2.45fr .6fr .7fr .95fr .7fr .6fr 112px;gap:9px;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-4);padding:0 12px 9px;border-bottom:1px solid var(--line)}
.os-tr{display:grid;grid-template-columns:22px 2.45fr .6fr .7fr .95fr .7fr .6fr 112px;gap:9px;align-items:center;padding:11px 12px;border-bottom:1px solid var(--line);font-size:12.5px}
/* Sidebar group headings, so the mockup carries the same Personal / Work /
   Business account structure the dashboard uses. */
.os-side .sb-grp{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-4);padding:13px 11px 5px}
.os-side .sb{position:relative}
.os-side .sb .soon{margin-left:auto;font-size:9px;padding:1px 6px}
/* The controls row: type select, Search, and the ownership toggle. Drawn as
   spans rather than real inputs - it is a picture of the screen, and a form
   inside a marketing page would be a control that does nothing. */
.os-ctl{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.os-sel{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-size:12.5px;color:var(--ink-2)}
.os-sel svg{color:var(--ink-4)}
.os-btn{background:var(--red);color:#fff;font-weight:600;font-size:12.5px;border-radius:9px;padding:8px 16px}
.os-tog{margin-left:auto;display:inline-flex;border:1px solid var(--line);border-radius:9px;overflow:hidden;font-size:12px;background:#fff}
.os-tog b{padding:7px 13px;background:#fff;color:var(--ink);font-weight:600}
.os-tog i{padding:7px 13px;font-style:normal;color:var(--ink-3);background:var(--bg-grey)}
.os-cnt{font-size:12px;color:var(--ink-3);margin-bottom:10px}
/* A row carries the star, the title with its Owned pill, and a second line of
   description - all three are on the real screen and all three were missing. */
/* Literal bronze, NOT var(--brz): that variable is declared inside app.php's
   own stylesheet, which the public site does not load, so it fell back to the
   inherited colour and the filled stars rendered black. */
.os-tr .st{color:#D9DCE1;display:grid;place-items:center}
.os-tr .st.on{color:#CB9C52}
.os-tr .nm{display:block;min-width:0}
.os-tr .nm b{display:block;font-weight:650;color:var(--ink);font-size:13px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-tr .nm em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.os-tr .nm .own{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.04em;color:#1F7A49;background:var(--green-soft);padding:2px 7px;border-radius:6px;vertical-align:middle}
.os-tr .mut{color:var(--ink-3)}
.os-tr .qs{font-size:11px;font-weight:600;color:#1F7A49;background:var(--green-soft);padding:3px 8px;border-radius:7px;justify-self:start}
.os-tr .dn{font-size:11px;font-weight:600;color:#9a6b1e;background:rgba(203,156,82,.16);padding:3px 8px;border-radius:7px;justify-self:start}
.os-tr .pr{font-weight:700;color:var(--ink)}
.os-tr .act{display:flex;gap:6px;justify-content:flex-end}
.os-tr .vw{font-size:11.5px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);border-radius:7px;padding:5px 9px;text-align:center;background:#fff;white-space:nowrap}
/* Sidebar group headings, so the mockup carries the same Personal / Work /
   Business account structure the dashboard uses. */

/* generic capability card grid */
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.cap:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.cap .ci{width:36px;height:36px;border-radius:10px;background:var(--bg-grey);color:var(--red);display:grid;place-items:center;margin-bottom:14px}
.cap h4{font-size:15px;font-weight:650;letter-spacing:-0.015em;margin-bottom:5px}
.cap p{font-size:13px;color:var(--ink-3);line-height:1.5}

/* two-col feature layout */
.split{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.split.rev{grid-template-columns:1.1fr 1fr}
.split .copy h3{font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-0.03em;line-height:1.1;margin:12px 0 14px}
.split .copy p{font-size:17px;color:var(--ink-2);line-height:1.6;margin-bottom:22px}
.chiprow{display:flex;flex-wrap:wrap;gap:8px}
.chip2{font-size:13px;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line-2);padding:8px 14px;border-radius:100px;box-shadow:var(--sh-sm)}
.chip2.on-dark{background:rgba(255,255,255,.05);color:var(--dark-ink);border-color:var(--dark-line)}

/* mock panels (light) */
.mpanel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.mpanel .mh{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line)}
.mpanel .mh .mt{font-size:13.5px;font-weight:650}
.mpanel .mh .mtag{font-size:11px;font-weight:600;color:var(--red);background:var(--red-soft);padding:4px 9px;border-radius:7px}
.mbody{padding:20px}

/* search demo result chips */
.searchbox{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:14px 18px;box-shadow:var(--sh-sm);font-size:16px;margin-bottom:18px}
.searchbox svg{color:var(--ink-4);flex:none}
.searchbox .q{color:var(--ink);font-weight:500}
.searchbox .car{width:2px;height:20px;background:var(--red);margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.res-groups{display:flex;flex-wrap:wrap;gap:10px}
.rg{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:11px 15px;box-shadow:var(--sh-sm);font-size:14px;font-weight:600}
.rg .cnt{font-size:12px;font-weight:600;color:var(--red);background:var(--red-soft);padding:2px 8px;border-radius:6px}
.rg svg{color:var(--ink-3)}

/* endpoints */
.eplist{display:grid;gap:10px}
.ep{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:var(--sh-sm);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.ep:hover{transform:translateX(3px);box-shadow:var(--sh)}
.ep .verb{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--green);background:var(--green-soft);padding:4px 9px;border-radius:7px}
.ep .path{font-family:var(--mono);font-size:14px;color:var(--ink);font-weight:500}
.ep .desc{margin-left:auto;font-size:13px;color:var(--ink-3)}

/* code block */
.code{background:#15171D;border:1px solid var(--dark-line);border-radius:14px;overflow:hidden}
.code-head{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--dark-line)}
.code-tab{font-size:12.5px;font-weight:600;color:var(--dark-ink-2);padding:7px 13px;border-radius:8px;cursor:pointer;transition:all .15s var(--ease);font-family:inherit;background:none;border:none}
.code-tab:hover{color:#fff} .code-tab.on{background:rgba(255,255,255,.08);color:#fff}
.code-body{padding:20px 22px;font-family:var(--mono);font-size:13px;line-height:1.7;color:#C8CCD4;overflow-x:auto;white-space:pre}
.code-body .k{color:var(--red-d)} .code-body .s{color:var(--green-d)} .code-body .n{color:var(--bronze-d)} .code-body .c{color:#6C727E}

/* workspace mock (dark) */
.ws{display:grid;grid-template-columns:210px 1fr;background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.ws-side{background:#141519;border-right:1px solid var(--dark-line);padding:18px 12px}
.ws-side .wlogo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;color:#fff;padding:4px 8px 14px}
/* Group headings, so the mockup carries the same Personal / Work / Business
   Account / Support structure the dashboard uses. */
.ws-side .wg{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--dark-ink-3);padding:13px 10px 5px}
/* Tighter than it was. Fifteen rows is what an Owner actually sees, and at the
   old 10px padding the sidebar ran far taller than the panel beside it. */
.ws-side .wl{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:12.5px;font-weight:500;color:var(--dark-ink-2);margin-bottom:1px}
.ws-side .wl.on{background:rgba(166,64,59,.16);color:#fff;font-weight:600}
.ws-side .wl svg{opacity:.8;flex:none}
.ws-side .wl .soon{margin-left:auto;font-size:8.5px;padding:1px 5px;letter-spacing:.03em}
.ws-main{padding:26px 30px}
.ws-main h4{color:#fff;font-size:18px;font-weight:700;letter-spacing:-0.02em;margin-bottom:4px}
.ws-main .sub{color:var(--dark-ink-3);font-size:13.5px;margin-bottom:22px}
.ws-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.wsc{background:var(--dark-panel);border:1px solid var(--dark-line);border-radius:14px;padding:18px}
.wsc .wk{font-size:12px;color:var(--dark-ink-2);font-weight:600;display:flex;align-items:center;gap:8px}
.wsc .wk svg{color:var(--red-d)}
.wsc .wv{font-size:24px;color:#fff;font-weight:700;letter-spacing:-0.02em;margin-top:8px}
.wsc .wv small{font-size:15px;color:var(--dark-ink-3);font-weight:600}
.wsc .wd{font-size:12px;color:var(--dark-ink-3);margin-top:3px}
.wsc .wd .soon{font-size:8.5px;padding:1px 5px;letter-spacing:.03em;vertical-align:1px}
/* Says out loud that the figures are an example. Without it the panel reads as
   a report on a real account, which is the thing this rebuild removed. */
.ws-note{margin-top:16px;font-size:11.5px;color:var(--dark-ink-3)}
.wsc.keyrow{grid-column:span 3;display:flex;align-items:center;justify-content:space-between}
.wsc .mono{font-family:var(--mono);font-size:12.5px;color:var(--dark-ink)}

/* explorer mock */
.xp-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.xpc{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--bg-grey);border:1px solid var(--line);padding:8px 13px;border-radius:9px;display:flex;align-items:center;gap:7px}
.xpc svg{color:var(--red)}
.xtable{width:100%;border-collapse:collapse;font-size:12.5px}
.xtable th{text-align:left;font-weight:600;color:var(--ink-3);padding:10px 16px;background:var(--bg-grey);border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.02em;text-transform:uppercase}
.xtable td{padding:10px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.xtable td.mono{font-family:var(--mono);color:var(--ink)}
.xtable tr:last-child td{border-bottom:none}
.xp-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:12px;color:var(--ink-3);background:var(--bg-grey);border-top:1px solid var(--line)}

/* AI assistant */
.ai-wrap{max-width:900px;margin:0 auto}
.ai-prompt{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 22px;box-shadow:var(--sh);margin-bottom:18px}
.ai-prompt .av{width:34px;height:34px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.ai-prompt .qt{font-size:17px;color:var(--ink);font-weight:500;line-height:1.45}
.ai-resp{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:var(--sh)}
.ai-resp .rh{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--red);margin-bottom:16px}
.ai-out{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.aio{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--bg-grey)}
.aio .ai-ic{width:32px;height:32px;border-radius:9px;background:#fff;color:var(--red);display:grid;place-items:center;margin-bottom:10px;box-shadow:var(--sh-sm)}
.aio .at{font-size:13.5px;font-weight:650}
.aio .ad{font-size:12px;color:var(--ink-3);margin-top:3px}

/* integrations */
.int-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.intc{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--sh-sm);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.intc:hover{transform:translateY(-3px);box-shadow:var(--sh)}
.intc .il{width:38px;height:38px;border-radius:10px;background:var(--bg-grey);display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--red);flex:none}
.intc .inm{font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
.intc .il{font-size:13px}
.int-note{margin-top:22px;text-align:center;font-size:15px;color:var(--ink-3)}
.sec-head p code,.split .copy p code{font-family:var(--mono);font-size:.88em;background:var(--bg-grey);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--ink)}
.code-tab .soon{margin-left:6px;font-size:9px;padding:1px 6px;vertical-align:1px}

/* automation flows */
.flows{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.flow{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-sm)}
.flow .ft{font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:18px;display:flex;align-items:center;gap:8px}
.fstep{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:12px;background:var(--bg-grey);border:1px solid var(--line);font-size:14px;font-weight:600}
.fstep .fi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;background:#fff;color:var(--red);box-shadow:var(--sh-sm)}
.fstep.trigger .fi{color:var(--bronze)}
.fstep.action .fi{color:var(--red)}
.fconn{width:2px;height:20px;background:var(--line-2);margin:4px 0 4px 31px;border-radius:2px}

/* security grid */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.seccard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-sm)}
.seccard .si{width:38px;height:38px;border-radius:10px;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin-bottom:14px}
.seccard h4{font-size:15px;font-weight:650;letter-spacing:-0.015em;display:flex;align-items:center;gap:8px}
.seccard .soon{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--bronze);background:var(--bronze-soft);padding:2px 7px;border-radius:5px}
.seccard p{font-size:13px;color:var(--ink-3);margin-top:5px;line-height:1.5}

/* performance stats */
.perf-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--dark-line);border:1px solid var(--dark-line);border-radius:var(--r-lg);overflow:hidden}
.perfc{background:var(--dark);padding:34px 22px;text-align:center}
.perfc .v{font-size:34px;font-weight:800;color:#fff;letter-spacing:-0.035em;font-variant-numeric:tabular-nums}
.perfc .v .u{font-size:18px;color:var(--red-d);margin-left:1px}
.perfc .l{font-size:12.5px;color:var(--dark-ink-2);margin-top:8px;font-weight:500}
@media(max-width:1080px){.perf-grid{grid-template-columns:repeat(2,1fr)}}

/* architecture */
.arch{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.astep{flex:1;min-width:120px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.astep .an{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm);color:var(--red)}
.astep.hl .an{background:var(--red);color:#fff;border-color:var(--red)}
.astep .al{font-size:13.5px;font-weight:600;letter-spacing:-0.01em}
.aconn{flex:0 0 30px;height:2px;background:var(--line-2);margin-top:27px;border-radius:2px}
@media(max-width:900px){.aconn{display:none}.arch{gap:16px}.astep{flex-direction:row;justify-content:flex-start;width:100%;flex:none}}

/* cta */
.cta-band{text-align:center;background:linear-gradient(180deg,#15161B,#111114);border:1px solid var(--dark-line);border-radius:var(--r-xl);padding:72px 40px;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 260px at 50% 0%,rgba(166,64,59,.22),transparent 62%);pointer-events:none}
.cta-band h2{position:relative;font-size:clamp(30px,3.8vw,46px);font-weight:800;letter-spacing:-0.04em;color:#fff;margin-bottom:16px}
.cta-band p{position:relative;font-size:19px;color:var(--dark-ink-2);max-width:46ch;margin:0 auto 32px}
.cta-band .acts{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:1080px){
  /* The app mockup is a picture of a desktop screen, so it is shown at its real
     proportions and dragged sideways rather than compressed. .os is the scroll
     container; .browser above it keeps overflow:hidden for its rounded corners,
     which is what used to clip this instead of scrolling it.
     Both tracks are explicit, so .os-main needs min-width:0 to sit at exactly
     620 rather than inflating to its table's min-content. overflow-y is pinned
     to hidden because a lone overflow-x:auto computes the other axis to auto
     too, and that would add a dead vertical scrollbar.
     The sidebar used to be display:none here. It was the only part of the image
     that says operating system, which is what the section headline claims, so
     hiding it left the phone showing a plain search screen. It stays, narrowed
     to 186 and with its rows tightened to keep every label on one line. */
  .os{grid-template-columns:186px 620px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .os-side{padding:16px 9px}
  .os-side .sb{font-size:12.5px;padding:8px 9px;gap:9px}
  .os-side .sb-logo{font-size:13px;padding:5px 9px 14px}
  .os-main{min-width:0;padding:20px 18px}
  .cap-grid,.sec-grid{grid-template-columns:repeat(2,1fr)}
  .int-grid{grid-template-columns:repeat(3,1fr)}
  .split,.split.rev{grid-template-columns:1fr;gap:36px}
  /* Measured on the live page at a 375px viewport: the document was 592px wide,
     which is 20px of padding plus a 572px grid track. A single-column 1fr track
     still inflates to its widest item's min-content, because grid items default
     to min-width:auto, and .code-head is a nowrap flex row of language tabs that
     cannot compress. The endpoint rows did the same thing at 420px. The headings
     and paragraphs that looked oversized were just filling those tracks, so they
     were the symptom. min-width:0 is what actually lets the track collapse; the
     two rules under it then give the trapped content somewhere to go. */
  .split>*{min-width:0}
  .code-head{flex-wrap:wrap}
  .ep{flex-wrap:wrap}
  .ep .path{min-width:0;overflow-wrap:anywhere}
  .ep .desc{margin-left:0;flex-basis:100%}
  /* The Data Explorer table needs 429px and .mpanel carries overflow:hidden for
     its rounded corners, so the right-hand columns were being cut off with no
     way to reach them. The scroll goes on .mbody, one level in, so the panel
     keeps its corners and the table gets dragged sideways like .os does. */
  .mbody{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .xtable{min-width:420px}
  .flows{grid-template-columns:1fr}
  .ai-out{grid-template-columns:1fr 1fr}
  /* Same treatment as .os, for the same reason. This used to hide .ws-side and
     drop the cards to one or two columns, which turned a picture of a control
     room into a vertical stack of large boxes with no navigation in sight. It
     now keeps the real shape - sidebar, three cards across, two rows, then the
     key row - and is dragged sideways. .ws carries overflow:hidden at full size
     for its rounded corners, so both axes are restated here rather than just
     overflow-x. The sidebar and card type are stepped down so all fifteen nav
     rows stay on one line each and the panel height still matches the sidebar. */
  .ws{grid-template-columns:176px 620px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .ws-side{padding:16px 8px}
  .ws-side .wl{font-size:11.5px;padding:6px 8px}
  .ws-side .wg{padding:11px 8px 4px}
  .ws-main{min-width:0;padding:20px 18px}
  .ws-main h4{font-size:16px}
  .ws-cards{grid-template-columns:repeat(3,1fr);gap:11px}
  .wsc{padding:14px}
  .wsc .wv{font-size:21px}
  .wsc.keyrow{grid-column:span 3}
  .pad-y{padding-top:80px;padding-bottom:80px}
}
@media(max-width:600px){
  :root{--pad:20px}
  /* .ws-cards and .wsc.keyrow are deliberately absent here. The workspace mock
     keeps its three-across grid at every width and scrolls, so stacking it at
     600 would undo that. */
  .cap-grid,.sec-grid,.int-grid,.ai-out{grid-template-columns:1fr}
  .nav-cta .signin{display:none}
}