.sg-page {
  --ink-950:#080b10; --ink-900:#0c1017; --ink-850:#11161f; --ink-800:#161c27; --ink-750:#1c2330;
  --ink-700:#262e3d; --ink-500:#5b6678; --ink-400:#8792a3; --ink-300:#aab4c2; --ink-200:#cbd3de; --ink-50:#f5f7fa;
  --cyan:#e37855; --cyan-hover:#f08e6e; --cyan-ink:#1a0d07; /* the accent is now the orange #e37855 (owner, 2026-10-05); the names stay so every rule keeps working */
  --bg-page:var(--ink-900); --bg-sunken:var(--ink-950); --bg-raised:var(--ink-850); --bg-overlay:var(--ink-800); --bg-inset:var(--ink-750);
  --text-strong:var(--ink-50); --text-body:var(--ink-200); --text-soft:var(--ink-300); --text-meta:var(--ink-400);
  --line-soft:rgba(166,180,200,.14); --line-strong:rgba(166,180,200,.26);
  --accent:var(--cyan); --accent-hover:var(--cyan-hover); --accent-soft:rgba(227,120,85,.14); --accent-line:rgba(227,120,85,.45);
  --state-working:#34d399; --state-waiting:#ffbe4d; --state-room:#c084fc;
  --font-display:var(--font-bricolage), var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-body:var(--font-geist-sans), -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono-sg:var(--font-geist-mono), "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --step--1:.875rem; --step-0:1.0625rem;
  --step-1:clamp(1.1875rem,1.1rem + .35vw,1.3125rem);
  --step-2:clamp(1.375rem,1.25rem + .5vw,1.625rem);
  --step-3:clamp(1.875rem,1.5rem + 1.6vw,2.75rem);
  --step-4:clamp(2.5rem,1.8rem + 3.2vw,4.5rem);
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px;
  --container:1200px; --gutter:clamp(20px,4vw,40px); --section-y:clamp(56px,7vw,104px);
  --ease:cubic-bezier(.2,.7,.2,1);
  background:var(--bg-page);
}

/* ── 1. The page ground and type ───────────────────────────────────────────── */
.sg-page .home5-page {
  --canvas:var(--bg-page); --text:var(--text-strong); --muted:var(--text-soft); --dim:var(--text-meta);
  background:radial-gradient(70% 42rem at 50% 0%, rgba(255,255,255,0.06), transparent 70%), var(--bg-page);
  font-family:var(--font-body);
}
.sg-page .home5-page :focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sg-page .home5-page :is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus-visible { outline:none; border-color:#3b82f6 !important; box-shadow:0 0 0 3px rgba(59,130,246,.3) !important; }

/* ── 2. Header, hero, demo tabs, window frame ─────────────────────────────── */
.sg-page .home5-page .nav,
.sg-page .home5-page .nav.scrolled { border-color:var(--line-strong); background:rgba(17,22,31,.88); }
.sg-page .home5-page .navlinks a { color:var(--text-soft); }
.sg-page .home5-page .navlinks a:hover { color:var(--text-strong); }
.sg-page .home5-page .nav > .btn.primary,
.sg-page .home5-page .actions .btn.primary {
  background:#f5f7fa; border-color:#f5f7fa; color:#10141a; box-shadow:0 10px 30px -10px rgba(255,255,255,0.25);
}
.sg-page .home5-page .nav > .btn.primary:hover,
.sg-page .home5-page .actions .btn.primary:hover { background:#fff; border-color:#fff; }
.sg-page .home5-page .actions .btn:not(.primary) { background:transparent; border-color:var(--line-strong); color:var(--text-strong); }
.sg-page .home5-page .actions .btn:not(.primary):hover { background:var(--bg-overlay); }
.sg-page .home5-page .mobile-menu { border-color:var(--line-strong); background:rgba(17,22,31,.97); }
.sg-page .home5-page .mobile-menu .mm-download { background:#fff; color:#0b0d12; }

.sg-page .home5-page .eyebrow {
  display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid var(--line-strong); border-radius:999px;
  background:var(--bg-raised); color:var(--text-soft); font:500 .75rem/1 var(--font-mono-sg); letter-spacing:.14em;
}
.sg-page .home5-page .eyebrow::before {
  content:""; width:8px; height:8px; border-radius:50%; background:var(--text-strong);
  box-shadow:0 0 0 3px rgba(255,255,255,.18); animation:sg-pulse 1.8s var(--ease) infinite;
}
@keyframes sg-pulse { 50% { box-shadow:0 0 0 7px rgba(255,255,255,0); } }
.sg-page .home5-page .hero h1 {
  font-family:var(--font-display); font-weight:700; font-size:var(--step-4); letter-spacing:-.032em; line-height:1.04;
  color:var(--text-strong); text-shadow:none;
}
.sg-page .home5-page .hero h1 em { font-style:normal; color:var(--accent); text-shadow:none; }
.sg-page .home5-page .hero .lede { color:var(--text-body); font-size:var(--step-1); line-height:1.55; max-width:58ch; }
.sg-page .sg-hero-note { margin:18px auto 0; font-size:var(--step--1); color:var(--text-meta); text-wrap:balance; }
.sg-page .sg-hero-note b { color:var(--text-soft); font-weight:500; }
.sg-page .sg-hero-phones { margin:12px auto 0; text-align:center; }
.sg-page .sg-hero-phones a { display:inline-flex; align-items:center; gap:8px; padding:7px 15px; border:1px solid rgba(255,255,255,.82); border-radius:999px; font-size:var(--step--1); color:var(--text-soft); text-decoration:none; transition:border-color .15s, color .15s, background .15s; }
.sg-page .sg-hero-phones a:hover { border-color:#fff; color:var(--text, #f3f5f7); background:rgba(255,255,255,0.04); }

.sg-page .home5-page .demo-nav { border-color:var(--line-strong); background:rgba(17,22,31,.92); }
.sg-page .home5-page .demo-nav button { color:var(--text-soft); }
.sg-page .home5-page .demo-nav button:hover { color:var(--text-strong); background:var(--bg-overlay); }
.sg-page .home5-page .demo-nav button.active { color:var(--text-strong); background:var(--bg-inset); box-shadow:inset 0 0 0 1px var(--line-strong); }
.sg-page .home5-page .macbook-lid {
  border-color:rgba(166,180,200,.3);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 90px rgba(255,255,255,0.03);
}

/* ── 3. The lower page ────────────────────────────────────────────────────── */
.sg { color:var(--text-body); font:400 var(--step-0)/1.62 var(--font-body); }
.sg *, .sg *::before, .sg *::after { box-sizing:border-box; }
.sg a { color:inherit; }
.sg h2, .sg h3 { margin:0; color:var(--text-strong); text-wrap:balance; }
.sg h2 { font:700 var(--step-3)/1.06 var(--font-display); letter-spacing:-.03em; }
.sg h3 { font:600 var(--step-2)/1.2 var(--font-body); letter-spacing:-.012em; }
.sg .sg-h3 { font:600 var(--step-1)/1.3 var(--font-body); letter-spacing:-.01em; }
.sg p { margin:0; text-wrap:pretty; }
.sg-wrap { max-width:var(--container); margin:0 auto; padding:0 var(--gutter); }
.sg-label { display:flex; align-items:center; gap:10px; margin:0; font:500 .75rem/1 var(--font-mono-sg); letter-spacing:.14em; text-transform:uppercase; color:var(--text-meta); }
.sg-label--accent { color:var(--text-meta); }
.sg .sg-price-note { width:fit-content; max-width:100%; margin:-6px auto 14px; padding:5px 12px; border-radius:999px; background:#e37855; color:#1a0d07; font-size:.8125rem; font-weight:600; line-height:1.4; text-align:center; }
/* real app screenshots: CSS-only tabs (radio + label), only the checked image is shown */
.sg-shots { margin:40px 0 56px; }
.sg-shot-r { position:absolute; opacity:0; pointer-events:none; }
.sg-shot-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 24px; }
.sg-shot-tabs label { padding:10px 18px; border:1px solid var(--line-strong); border-radius:999px; color:var(--text-body); font:600 .9rem/1 var(--font-body); cursor:pointer; user-select:none; transition:border-color .14s var(--ease), color .14s var(--ease), background .14s var(--ease); }
.sg-shot-tabs label:hover { border-color:rgba(255,255,255,.5); color:var(--text-strong); }
#sg-shot-split:checked ~ .sg-shot-tabs label[for="sg-shot-split"], #sg-shot-chat:checked ~ .sg-shot-tabs label[for="sg-shot-chat"], #sg-shot-room:checked ~ .sg-shot-tabs label[for="sg-shot-room"], #sg-shot-sftp:checked ~ .sg-shot-tabs label[for="sg-shot-sftp"], #sg-shot-meter:checked ~ .sg-shot-tabs label[for="sg-shot-meter"] { background:#fff; border-color:#fff; color:#0b0d12; }
#sg-shot-split:focus-visible ~ .sg-shot-tabs label[for="sg-shot-split"], #sg-shot-chat:focus-visible ~ .sg-shot-tabs label[for="sg-shot-chat"], #sg-shot-room:focus-visible ~ .sg-shot-tabs label[for="sg-shot-room"], #sg-shot-sftp:focus-visible ~ .sg-shot-tabs label[for="sg-shot-sftp"], #sg-shot-meter:focus-visible ~ .sg-shot-tabs label[for="sg-shot-meter"] { outline:2px solid var(--accent); outline-offset:3px; }
.sg-shot { display:none; margin:0; }
#sg-shot-split:checked ~ .sg-shot-stage .sg-shot-split, #sg-shot-chat:checked ~ .sg-shot-stage .sg-shot-chat, #sg-shot-room:checked ~ .sg-shot-stage .sg-shot-room, #sg-shot-sftp:checked ~ .sg-shot-stage .sg-shot-sftp, #sg-shot-meter:checked ~ .sg-shot-stage .sg-shot-meter { display:block; }
.sg-shot img { display:block; width:100%; height:auto; }
.sg-shot-note { margin:-8px 0 0; text-align:center; }

.sg-soft { color:var(--text-soft); }
.sg-meta { font-size:var(--step--1); color:var(--text-meta); }
.sg-dot { width:8px; height:8px; border-radius:50%; flex:none; }
.sg-dot--room { background:var(--state-room); box-shadow:0 0 0 3px rgba(192,132,252,.22); }
.sg-dot--accent { background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

.sg-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 22px; border-radius:var(--r-md); border:1px solid transparent; font:600 1rem/1 var(--font-body); text-decoration:none; transition:background .14s var(--ease), border-color .14s var(--ease); }
.sg .sg-btn--primary { background:#fff; color:#0b0d12; font-weight:700; box-shadow:0 12px 32px -14px rgba(0,0,0,.7); }
.sg .sg-btn--primary:hover { background:#e6e9ee; }
.sg-page .home5-page .nav-signin { display:inline-flex; align-items:center; padding:9px 14px; border-radius:999px; font:600 .9rem/1 var(--font-body); color:var(--text-body); text-decoration:none; white-space:nowrap; }
.sg-page .home5-page .nav-signin:hover { color:var(--text-strong); background:var(--bg-overlay); }
/* phones: Sign in lives in the menu; in the bar it pushed the logo and the language button off screen */
.sg-page .home5-page .nav-signin > span { display:inline-flex; align-items:center; gap:8px; }
.sg-page .home5-page .nav-signin > span[hidden] { display:none; }
.sg-page .home5-page .nav-signin .ns-ico { display:none; width:20px; height:20px; }
/* phones: an icon instead of the words, so the logo and the language button keep their room (the words stay for screen readers) */
@media (max-width:760px) {
  .sg-page .home5-page .nav-signin { padding:10px; order:2; }
  .sg-page .home5-page .nav-signin .ns-ico { display:block; }
  .sg-page .home5-page .nav-signin .ns-txt, .sg-page .home5-page .nav-signin i { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}
.sg-page .home5-page .nav-signin i, .sg-page .home5-page .mm-signin i { font-style:normal; margin-left:6px; padding:2px 8px; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-body); font-size:.75rem; }
.sg-page .home5-page .mobile-menu .mm-signin { display:block; padding:12px 6px; color:var(--text-body); font-weight:600; text-decoration:none; }
[hidden] { display:none !important; }
.sg .sg-btn--light { background:#f5f7fa; border-color:#f5f7fa; color:#10141a; font-weight:700; box-shadow:0 10px 30px -12px rgba(255,255,255,0.23); }
.sg .sg-btn--light:hover { background:#fff; border-color:#fff; }
.sg .sg-btn--light .ui-icon { width:18px; height:18px; }
.sg .sg-btn--ghost { border-color:var(--line-strong); color:var(--text-strong); background:transparent; }
.sg .sg-btn--ghost:hover { background:var(--bg-overlay); }

.sg-section { padding:var(--section-y) 0; }
.sg-section--line { border-top:1px solid var(--line-soft); }
.sg-section--band { border-block:1px solid var(--line-soft); background:linear-gradient(180deg,var(--bg-sunken),#0a0e14); }
.sg-section--band + .sg-section--line { border-top:0; }
.sg-head { max-width:760px; }
.sg-head h2 { margin-top:16px; }
.sg-head > p:not(.sg-label) { margin-top:16px; color:var(--text-soft); font-size:var(--step-1); line-height:1.55; }
.sg-head--center { margin:0 auto; text-align:center; }
.sg-head--center .sg-label { justify-content:center; }
.sg-head--center > p:not(.sg-label) { margin-inline:auto; max-width:58ch; }

/* works with */
.sg-agents { max-width:calc(var(--container) - 2 * var(--gutter)); margin:clamp(40px,6vw,72px) auto 0; padding:40px 0; border:1px solid var(--line-soft); border-radius:var(--r-xl); background:var(--bg-sunken); }
@media (max-width:1240px) { .sg-agents { margin-inline:var(--gutter); } }
.sg-agents-row { display:grid; grid-template-columns:minmax(0,340px) minmax(0,1fr); gap:40px; align-items:center; }
.sg-agents-row h2 { margin-top:12px; }
.sg-agents-row .sg-soft { margin-top:8px; font-size:.9375rem; }
.sg-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.sg-chips li { display:inline-flex; align-items:center; gap:9px; min-height:38px; padding:7px 14px; line-height:1.35; border-radius:999px; border:1px solid var(--line-strong); background:var(--bg-raised); color:var(--text-body); font-size:.9375rem; font-weight:500; }
.sg-chips img { width:18px; height:18px; object-fit:contain; border-radius:4px; }
.sg-chips .sg-chip-quiet { border-style:dashed; color:var(--text-soft); background:transparent; }
.sg-chips .sg-chip-quiet a { color:inherit; text-decoration:none; }
.sg-chips .sg-chip-quiet a:hover { color:var(--text-body); }

/* bento */
.sg-bento { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px; margin-top:56px; }
.sg-card { grid-column:span 2; display:flex; flex-direction:column; gap:14px; min-width:0; padding:28px; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--bg-raised); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -24px rgba(0,0,0,.7); scroll-margin-top:96px; }
.sg-card--wide { grid-column:span 3; }
.sg-card > p:not(.sg-label):not(.sg-meta) { color:var(--text-soft); font-size:1rem; max-width:48ch; }
.sg-more { margin-top:auto; display:inline-flex; align-items:center; gap:6px; padding-top:6px; color:var(--text-strong) !important; text-decoration:none; font-weight:600; font-size:.9375rem; }
.sg-more:hover { color:#fff !important; text-decoration:underline; text-underline-offset:4px; }
.sg-mini { padding:14px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--bg-sunken); font:.8125rem/1.6 var(--font-mono-sg); color:var(--text-body); }
.sg-mini-row { display:flex; align-items:center; gap:10px; padding:4px 0; min-width:0; }
.sg-mini-row > span, .sg-mini-row > b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sg-mini-row b { color:var(--text-strong); font-weight:500; }
.sg-mini-row img { width:16px; height:16px; flex:none; }
.sg-mini-row .sg-t { margin-left:auto; flex:none; color:var(--text-meta); }
.sg-mini-msg { padding:0 0 8px 26px; color:var(--text-soft); }
.sg-files .sg-mini-row { border-bottom:1px solid var(--line-soft); }
.sg-files .sg-mini-row:last-child { border-bottom:0; }
.sg-bar { height:6px; margin:2px 0 8px; border-radius:99px; background:var(--bg-inset); overflow:hidden; }
.sg-bar i.warn { background:linear-gradient(90deg,#f5a83d,#ffbe4d); }
.sg-bar i { display:block; width:100%; height:100%; border-radius:99px; background:linear-gradient(90deg,#cbd3de,#fff); transform:scaleX(var(--w,1)); transform-origin:left; }
.sg-split { display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:repeat(3,26px); gap:6px; }
.sg-split i { display:flex; flex-direction:column; gap:4px; padding:7px 8px; border-radius:8px; border:1px solid var(--line-strong); background:var(--bg-sunken); overflow:hidden; }
.sg-split b { display:block; height:3px; width:88%; border-radius:2px; background:rgba(203,211,222,.22); }
.sg-split b.s { width:52%; background:rgba(52,211,153,.45); }
.sg-split i.on b { background:rgba(255,255,255,0.2); }
.sg-split i.on b.s { background:rgba(52,211,153,.6); }
.sg-split i:first-child { grid-row:span 3; }
.sg-split i.on { border-color:rgba(255,255,255,.5); background:linear-gradient(180deg,rgba(255,255,255,.1),var(--bg-sunken)); }

/* pricing: the homepage's two cards, larger, centred actions */
.sg-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; max-width:1160px; margin:64px auto 0; align-items:stretch; }
.sg-plan { display:flex; flex-direction:column; gap:22px; min-width:0; padding:clamp(28px,3.4vw,48px); border:1px solid var(--line-strong); border-radius:28px; background:var(--bg-raised); }
.sg .sg-plan h3 { font:600 1.5rem/1.2 var(--font-body); letter-spacing:-.012em; }
#free-plan { scroll-margin-top:96px; }
#free-plan:focus { outline:none; }
.sg-plan--pro { border-color:rgba(255,255,255,.6); background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 38%), var(--bg-raised); }
.sg .sg-plan--pro h3 { text-align:center; }
/* the buy button is blue (trust); the card itself keeps the site colours */
.sg-plan .sg-btn--primary { background:#2563eb; color:#fff; box-shadow:0 14px 34px -12px rgba(37,99,235,.85), inset 0 1px 0 rgba(255,255,255,.28); }
.sg-plan .sg-btn--primary:hover { background:#3b82f6; }
.sg-badge { position:absolute; top:0; left:50%; z-index:2; width:max-content; max-width:calc(100% - 16px); padding:9px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:#14171d; color:#f6cdb8; font:700 .8125rem/1.25 var(--font-mono-sg); letter-spacing:.12em; text-align:center; text-transform:uppercase; transform:translate(-50%,-50%); box-shadow:0 8px 24px -10px rgba(0,0,0,.7); }
/* the words take the same cream-to-orange gradient as the hero accent words; the colour above shows where background-clip:text is missing; the second layer keeps the dark pill, only the first is clipped to the text */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  .sg-badge { background-image:linear-gradient(100deg,#fff3ea 0%,#f6cdb8 30%,#e37855 62%,#ee8c69 100%),linear-gradient(#14171d,#14171d); -webkit-background-clip:text,border-box; background-clip:text,border-box; color:transparent; }
}
/* the two numbers set apart: 100 in light cream, the seats left larger, bolder and vivid orange */
.sg-badge b { font-weight:800; }
.sg-badge .sg-n-total { font-size:1.2em; color:#fff3ea; -webkit-text-fill-color:#fff3ea; }
.sg-badge .sg-n-left { font-size:1.6em; font-weight:900; color:#ff7a45; -webkit-text-fill-color:#ff7a45; }
@media (max-width:420px) { .sg-badge { padding:8px 12px; font-size:.6875rem; letter-spacing:.06em; } }
.sg-meter { display:flex; align-items:center; gap:14px; }
.sg-meter-bar { flex:1; height:10px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.1); }
.sg-meter-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#cbd3de,#fff); }
.sg-meter p { margin:0; font:700 .9375rem/1 var(--font-mono-sg); color:var(--text-soft); font-variant-numeric:tabular-nums; }
.sg-meter p b { font-size:1.25rem; font-weight:800; color:#fff; }
.sg-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 14px; }
.sg-price b { font:700 4rem/1 var(--font-display); letter-spacing:-.035em; color:var(--text-strong); }
.sg-price s { font-size:1.25rem; font-weight:500; color:var(--text-meta); text-decoration-thickness:1.5px; }
/* Pro: price, old price and the saving pill on one line; the terms on the line below */
.sg-plan--pro .sg-price { align-items:center; justify-content:center; }
.sg-plan--pro .sg-price .sg-save { order:2; }
.sg-plan--pro .sg-price span { order:3; flex-basis:100%; font-size:1rem; text-align:center; }
.sg-price span { font-size:1.125rem; color:var(--text-soft); }
.sg-save { align-self:center; padding:5px 11px; border-radius:999px; border:1px solid #fff; background:#fff; color:#0b0d12; font:600 .875rem/1 var(--font-body); font-style:normal; }
.sg-plan-desc { font-size:1.0625rem; color:var(--text-soft); }
.sg-list { display:grid; gap:16px; margin:4px 0 0; padding:0; list-style:none; }
.sg-list li { display:flex; gap:14px; font-size:1.0625rem; line-height:1.5; color:var(--text-body); }
.sg-list li::before { content:""; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; background:rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.sg-plan-act { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.sg .sg-btn--lg { width:100%; height:58px; border-radius:14px; font-size:1.0625rem; }
.sg .sg-btn--lg .ui-icon { width:18px; height:18px; }
.sg-trust { display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px; border:1px solid rgba(245,247,250,.24); background:rgba(245,247,250,.06); color:var(--text-strong); font-weight:600; font-size:.9375rem; }
.sg-trust svg { width:16px; height:16px; color:var(--text-body); }
.sg-fine { font-size:.9375rem; color:var(--text-meta); text-align:center; }
.sg-seg { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:6px; border:1px solid var(--line-soft); border-radius:16px; background:var(--bg-inset); }
.sg-seg button { white-space:nowrap; padding:14px 8px; border:0; border-radius:11px; background:transparent; color:var(--text-soft); font:500 .9375rem/1.35 var(--font-body); cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease); }
.sg-seg button b { display:block; margin-bottom:2px; color:var(--text-strong); font-size:1.0625rem; font-weight:600; }
.sg-seg button:hover { background:var(--bg-overlay); }
.sg-seg button[aria-pressed="true"] { background:var(--ink-50); color:#334155; box-shadow:0 6px 18px -8px rgba(0,0,0,.6); }
.sg-seg button[aria-pressed="true"] b { color:#0b0f15; }
.sg-max { color:var(--text-strong) !important; font-weight:600; font-size:1rem; text-decoration:none; }
.sg-max:hover { color:#fff !important; text-decoration:underline; text-underline-offset:4px; }

/* get started: three steps and the system requirements */
.sg-start { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:24px; margin-top:56px; align-items:start; }
.sg-steps { display:grid; gap:14px; margin:0; padding:0; list-style:none; counter-reset:none; }
.sg-steps li { display:flex; gap:18px; padding:22px 24px; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--bg-raised); }
.sg-step-n { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:12px; border:1px solid #fff; background:#fff; color:#0b0d12; font:700 1.125rem/1 var(--font-display); }
.sg .sg-steps h3 { font:600 1.1875rem/1.3 var(--font-body); }
.sg-steps p { margin-top:6px; color:var(--text-soft); font-size:1rem; }
.sg-req { display:flex; flex-direction:column; gap:18px; padding:26px; border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--bg-sunken); }
.sg .sg-req h3 { font:500 .75rem/1 var(--font-mono-sg); letter-spacing:.14em; text-transform:uppercase; color:var(--text-meta); }
.sg-req dl { display:grid; gap:18px; margin:0; }
.sg-req dt { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-weight:600; color:var(--text-strong); }
.sg-req dt .ui-icon { width:16px; height:16px; }
.sg-req dd { margin:0 0 0 24px; color:var(--text-soft); font-size:.9375rem; line-height:1.6; }
.sg-req .sg-more { padding-top:0; }

/* comparison table */
.sg-cmp { margin-top:48px; overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--bg-raised); }
.sg-cmp:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.sg-cmp table { width:100%; min-width:860px; border-collapse:collapse; font-size:.9375rem; }
.sg-cmp th, .sg-cmp td { padding:16px 18px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top; line-height:1.5; }
.sg-cmp thead th { font:600 1rem/1.3 var(--font-body); color:var(--text-strong); background:var(--bg-overlay); }
.sg-cmp tbody th { width:19%; font-weight:600; color:var(--text-strong); }
.sg-cmp td { min-width:170px; color:var(--text-soft); }
.sg-cmp .sg-cmp-us { background:rgba(255,255,255,0.03); color:var(--text-body); }
.sg-cmp thead .sg-cmp-us { color:var(--text-strong); background:rgba(255,255,255,.07); }
.sg-cmp tr:last-child > * { border-bottom:0; }
.sg-cmp-links .sg-more { padding-top:0; font-size:.875rem; white-space:nowrap; }
.sg-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width:980px) { .sg-start { grid-template-columns:1fr; } }
@media (max-width:640px) { .sg-seg button { padding:12px 4px; font-size:.875rem; } .sg-seg button b { font-size:.9375rem; } }
@media (max-width:640px) {
  .sg-steps li { padding:18px; gap:14px; }
  .sg-cmp tbody th { position:sticky; left:0; z-index:1; min-width:112px; background:var(--bg-raised); box-shadow:1px 0 0 var(--line-soft); }
  .sg-cmp th, .sg-cmp td { padding:14px; }
}

/* remote control */
.sg-remote { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,72px); align-items:center; }
.sg-remote h2 { margin-top:12px; }
.sg-remote .sg-soft { margin-top:14px; max-width:52ch; }
.sg-remote .sg-list { margin-top:24px; }
.sg-remote .sg-more { margin-top:24px; padding-top:0; }
.sg-rmt { min-width:0; }
.sg-rmt-host { padding:20px; border:1px solid var(--line-strong); border-radius:var(--r-lg); background:var(--bg-raised); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 24px 60px -32px rgba(0,0,0,.7); }
.sg-rmt-cap { margin:0 0 10px; font:500 .75rem/1 var(--font-mono-sg); letter-spacing:.14em; text-transform:uppercase; color:var(--text-meta); }
.sg-rmt-host .sg-mini-row { padding:9px 0; border-bottom:1px solid var(--line-soft); font:.8125rem/1.4 var(--font-mono-sg); }
.sg-rmt-ico { display:inline-flex; flex:none; color:#fff; }
.sg-rmt-off { opacity:.7; }
.sg-rmt-off .sg-rmt-ico { color:var(--text-meta); }
.sg-rmt-st { flex:none; margin-left:auto; padding:3px 9px; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-soft); font-size:.75rem; }
.sg-rmt-st--on { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.1); color:#fff; }
.sg-rmt-st--off { border-style:dashed; color:var(--text-meta); }
.sg-rmt-code { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:12px 14px; border-radius:var(--r-md); background:var(--bg-sunken); border:1px solid var(--line-soft); font:.8125rem/1 var(--font-mono-sg); color:var(--text-meta); }
.sg-rmt-code b { padding:6px 12px; border-radius:8px; border:1px solid var(--line-strong); background:var(--bg-inset); color:var(--text-strong); font-weight:600; letter-spacing:.3em; }
.sg-rmt-wire { position:relative; width:2px; height:40px; margin:0 auto; background:repeating-linear-gradient(to bottom,rgba(255,255,255,.4) 0 6px,transparent 6px 12px); }
.sg-rmt-wire i { position:absolute; left:50%; top:0; width:8px; height:8px; margin-left:-4px; border-radius:50%; background:#fff; box-shadow:0 0 12px rgba(255,255,255,.6); opacity:0; }
.sg-rmt-devs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.sg-rmt-dev { display:flex; flex-direction:column; gap:4px; padding:16px; border:1px solid var(--line-soft); border-radius:var(--r-md); background:var(--bg-sunken); }
.sg-rmt-dev b { color:var(--text-strong); font-weight:600; font-size:.9375rem; }
.sg-rmt-dev span { color:var(--text-soft); font-size:.875rem; line-height:1.45; }
.sg-rmt > .sg-meta { margin-top:10px; text-align:center; }
@media (prefers-reduced-motion:no-preference) {
  .sg-js .sg-rmt.is-live .sg-rmt-wire i { animation:sg-rmt-pulse 2.4s var(--ease) infinite; }
}
@keyframes sg-rmt-pulse { 0% { opacity:0; transform:translateY(0); } 15% { opacity:1; } 85% { opacity:1; } 100% { opacity:0; transform:translateY(32px); } }

/* phones */
.sg-phones { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:48px; }
.sg-phone { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; padding:26px; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--bg-raised); color:inherit; text-decoration:none; transition:border-color .2s var(--ease), transform .2s var(--ease); }
a.sg-phone:hover { border-color:#fff; transform:translateY(-2px); }
.sg .sg-phone h3 { font:600 1.25rem/1.25 var(--font-body); letter-spacing:-.01em; }
.sg-phone p { margin:0; color:var(--text-soft); font-size:.9375rem; line-height:1.55; }
.sg-phone-ico { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; border:1px solid rgba(255,255,255,.85); background:transparent; color:#fff; }
.sg-phone-ico svg { width:24px; height:24px; }
.sg-phone-chip { padding:5px 11px; border-radius:999px; font:600 .75rem/1 var(--font-mono-sg); letter-spacing:.06em; }
.sg-phone-chip--live { border:1px solid #fff; background:#fff; color:#0b0d12; }
.sg-phone-chip--soon { border:1px dashed var(--line-strong); color:var(--text-meta); }
.sg-phone--soon { border-style:dashed; background:transparent; }
.sg-phone--soon .sg-phone-ico { border-color:var(--line-strong); background:transparent; color:var(--text-meta); }
.sg .sg-phones-more { margin:36px 0 0; text-align:center; }
.sg-phones-more .sg-more { padding-top:0; }
@media (max-width:980px) { .sg-remote { grid-template-columns:1fr; } .sg-phones { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .sg-phones { gap:12px; } .sg-phone { padding:18px; gap:10px; } .sg .sg-phone h3 { font-size:1.0625rem; } .sg-phone p { font-size:.875rem; } .sg-rmt-devs { grid-template-columns:1fr; } .sg-rmt-host .sg-mini-row { flex-wrap:wrap; } }

/* why */
.sg-trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:56px; }
.sg-trio > div { padding-top:22px; border-top:2px solid var(--line-strong); }
.sg-trio > div:nth-child(1) { border-color:var(--state-working); }
.sg-trio > div:nth-child(2) { border-color:rgba(255,255,255,.7); }
.sg-trio > div:nth-child(3) { border-color:var(--state-room); }
.sg-trio h3 { font-size:1.25rem; }
.sg-trio p { margin-top:10px; color:var(--text-soft); }

/* faq */
.sg-faq { max-width:820px; margin:48px auto 0; border-top:1px solid var(--line-soft); }
.sg-faq details { border-bottom:1px solid var(--line-soft); }
.sg-faq summary { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:22px 4px; list-style:none; cursor:pointer; font:600 1.125rem/1.4 var(--font-body); color:var(--text-strong); }
.sg-faq summary::-webkit-details-marker { display:none; }
.sg-faq summary::after { content:"+"; font:400 1.5rem/1 var(--font-mono-sg); color:var(--text-meta); transition:transform .24s var(--ease); }
.sg-faq details[open] summary::after { transform:rotate(45deg); color:#fff; }
.sg-faq details p { padding:0 4px 24px; max-width:66ch; color:var(--text-soft); }

/* Ask AI (the homepage block, re-skinned) */
.sg .home5-inline-ask { padding:0 var(--gutter) var(--section-y); border-top:0; }
.sg .home5-inline-ask-card { max-width:820px; margin:0 auto; padding:32px; border:1px solid var(--line-soft); border-radius:var(--r-lg); background:var(--bg-raised); }
.sg .home5-inline-ask-card h2 { font:600 var(--step-2)/1.2 var(--font-body); }
.sg .home5-inline-ask-card h2 strong { color:var(--accent); }
.sg .home5-inline-ask-card p { color:var(--text-soft); }
.sg .home5-inline-ask-actions a { border-color:var(--line-strong); background:var(--bg-inset); color:var(--text-strong); }
.sg .home5-inline-ask-actions a:hover { border-color:rgba(255,255,255,.5); }

/* final call to action */
.sg-final { padding:0 0 var(--section-y); }
.sg-final-box { padding:clamp(40px,6vw,80px) var(--gutter); border:1px solid var(--line-strong); border-radius:var(--r-xl); text-align:center; background:radial-gradient(80% 120% at 50% 0%, rgba(255,255,255,0.07), transparent 60%), var(--bg-raised); }
.sg-final-box p { max-width:52ch; margin:16px auto 0; color:var(--text-soft); font-size:var(--step-1); }
.sg-ctas { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* footer */
.sg-foot { padding:64px 0 48px; border-top:1px solid var(--line-soft); background:var(--bg-sunken); color:var(--text-soft); font:400 .9375rem/1.6 var(--font-body); }
.sg-foot-grid { display:grid; grid-template-columns:1.4fr repeat(4,minmax(0,1fr)); gap:32px; }
.sg-foot-grid > * { min-width:0; }
.sg-brand { display:inline-flex; align-items:center; gap:10px; color:var(--text-strong); font-weight:700; text-decoration:none; }
.sg-foot-brand p { max-width:30ch; margin:12px 0 0; }
.sg-social { display:flex; gap:10px; margin-top:18px; }
.sg-social a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line-soft); border-radius:50%; color:var(--text-soft); text-decoration:none; transition:color .15s, border-color .15s; }
.sg-social a:hover { color:var(--text-strong); border-color:var(--text-meta); }
.sg-foot h2 { margin:0 0 14px; font:500 .75rem/1 var(--font-mono-sg); letter-spacing:.14em; text-transform:uppercase; color:var(--text-meta); }
.sg-foot-col a { display:block; padding:5px 0; color:var(--text-soft); text-decoration:none; }
.sg-foot a:hover { color:var(--text-strong); }
.sg-foot-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-top:48px; padding-top:24px; border-top:1px solid var(--line-soft); font-size:var(--step--1); color:var(--text-meta); }
.sg-foot-bottom span:last-child { display:flex; flex-wrap:wrap; gap:20px; }
.sg-foot-bottom a { color:var(--text-soft); text-decoration:none; }

@media (max-width:980px) {
  .sg-agents-row { grid-template-columns:1fr; gap:20px; }
  .sg-bento { grid-template-columns:1fr; }
  .sg-card, .sg-card--wide { grid-column:auto; }
  .sg-plans, .sg-trio { grid-template-columns:1fr; }
  .sg-foot-grid { grid-template-columns:1fr 1fr; }
  .sg-foot-brand { grid-column:1 / -1; }
}
@media (max-width:640px) {
  .sg-ctas .sg-btn { width:100%; }
  .sg-card { padding:22px; }
  .sg .home5-inline-ask-card { padding:24px; }
}
/* ── 4. Motion ──────────────────────────────────────────────────────────────
   Transform and opacity only, so it stays on the compositor. Everything is at
   rest and readable without it; reduced motion turns all of it off. */
@keyframes sg-rise { from { opacity:0; transform:translateY(14px); } }
@keyframes sg-fade { from { opacity:0; } }

/* hero: a faint grid behind the headline, a slow sheen on the accent words, a short entrance */
.sg-page .home5-page .hero { position:relative; isolation:isolate; }
.sg-page .home5-page .hero::before {
  content:""; position:absolute; z-index:-1; inset:-140px -30vw -40px; pointer-events:none;
  background-image:linear-gradient(rgba(166,180,200,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(166,180,200,.07) 1px,transparent 1px);
  background-size:56px 56px; background-position:center top;
  -webkit-mask-image:radial-gradient(55% 65% at 50% 32%,#000,transparent 78%); mask-image:radial-gradient(55% 65% at 50% 32%,#000,transparent 78%);
}
.sg-page .home5-page .hero h1 em {
  background:linear-gradient(100deg,#fff3ea 0%,#f6cdb8 30%,var(--cyan) 62%,#ee8c69 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes sg-sheen { 0%,55% { background-position:100% 0; } 100% { background-position:-60% 0; } }
.sg-page .home5-page .hero > * { animation:sg-rise .7s var(--ease) backwards; }
.sg-page .home5-page .hero > :nth-child(2) { animation-delay:.06s; }
.sg-page .home5-page .hero > :nth-child(3) { animation-delay:.12s; }
.sg-page .home5-page .hero > :nth-child(4) { animation-delay:.18s; }
.sg-page .home5-page .hero > :nth-child(5) { animation-delay:.24s; }
.sg-page .home5-page .demo-nav { animation:sg-rise .7s var(--ease) .3s backwards; }
.sg-page .home5-page .macbook-stage { animation:sg-fade 1s var(--ease) .35s backwards; }

/* primary buttons: a light sweep on hover */
.sg .sg-btn--primary, .sg-page .home5-page .actions .btn.primary, .sg-page .home5-page .nav > .btn.primary { position:relative; overflow:hidden; }
.sg .sg-btn--primary::after, .sg-page .home5-page .actions .btn.primary::after, .sg-page .home5-page .nav > .btn.primary::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%); transition:transform .7s var(--ease);
}
.sg .sg-btn--primary:hover::after, .sg-page .home5-page .actions .btn.primary:hover::after, .sg-page .home5-page .nav > .btn.primary:hover::after { transform:translateX(120%); }

/* sections rise in as they scroll into view (browsers with scroll-driven animations; the rest show them still) */
@keyframes sg-reveal { from { opacity:0; transform:translateY(32px) scale(.985); } }
@supports (animation-timeline: view()) {
  .sg-head, .sg-card, .sg-plan, .sg-trio > div, .sg-faq, .sg-agents, .sg-final-box, .sg .home5-inline-ask-card, .sg-steps li, .sg-req, .sg-cmp {
    animation:sg-reveal linear both; animation-timeline:view(); animation-range:entry 0% entry 70%;
  }
}

/* cursor light: a soft glow inside the card and a brighter one along its edge */
.sg-card, .sg-plan { position:relative; isolation:isolate; }
.sg-card::before, .sg-plan::before {
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,0.04),transparent 45%);
}
.sg-card::after, .sg-plan::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none; opacity:0; transition:opacity .35s var(--ease);
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,0.35),transparent 55%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
}
.sg-card:hover::before, .sg-card:hover::after, .sg-plan:hover::before, .sg-plan:not(.sg-plan--pro):hover::after { opacity:1; }

/* Pro plan: a light that travels round its border */
@property --sg-angle { syntax:"<angle>"; inherits:false; initial-value:0deg; }
.sg .sg-plan--pro { overflow:visible; }
.sg .sg-plan--pro::after {
  opacity:1; background:conic-gradient(from var(--sg-angle),transparent 0 66%,rgba(255,255,255,0.47) 80%,rgba(192,132,252,.85) 90%,transparent 100%);
  animation:sg-spin 7s linear infinite;
}
@keyframes sg-spin { to { --sg-angle:360deg; } }
.sg-bump { display:inline-block; animation:sg-bump .45s var(--ease); }
@keyframes sg-bump { from { opacity:.2; transform:translateY(10px); } }

/* agent chips */
.sg-chips li { transition:border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease); }
.sg-chips li:not(.sg-chip-quiet):hover { border-color:rgba(255,255,255,.5); background:var(--bg-overlay); transform:translateY(-2px); }

/* card illustrations: play while the card is on screen */
.sg-js [data-sg-live]:not(.is-live) .sg-seq { opacity:0; }
.sg-js .is-live .sg-seq { animation:sg-rise .5s var(--ease) calc(var(--i) * .4s + .15s) backwards; }
.sg-typing { display:flex; gap:5px; padding:4px 0 0 26px; }
.sg-typing i { width:6px; height:6px; border-radius:50%; background:var(--text-meta); }
.sg-js .is-live .sg-typing i { animation:sg-dot 1.2s ease-in-out infinite; }
.sg-js .is-live .sg-typing i:nth-child(2) { animation-delay:.15s; }
.sg-js .is-live .sg-typing i:nth-child(3) { animation-delay:.3s; }
@keyframes sg-dot { 0%,60%,100% { opacity:.35; transform:none; } 30% { opacity:1; transform:translateY(-3px); } }

.sg-transfer { margin-top:6px; }
.sg-transfer .sg-mini-row { color:var(--text-soft); }
.sg-js .is-live .sg-transfer .sg-bar i { animation:sg-xfer 3.4s var(--ease) 1.4s infinite backwards; }
@keyframes sg-xfer { 0% { transform:scaleX(0); } 70%,100% { transform:scaleX(1); } }

@property --sg-n { syntax:"<integer>"; inherits:false; initial-value:0; }
.sg-count { --sg-n:var(--to); counter-reset:sg-n var(--sg-n); }
.sg-count::after { content:counter(sg-n) "%"; }
.sg-js .is-live .sg-count { animation:sg-count 1.5s var(--ease) .2s backwards; }
@keyframes sg-count { from { --sg-n:0; } }
.sg-js .is-live #token-meter .sg-bar i, .sg-js #token-meter.is-live .sg-bar i { animation:sg-grow 1.5s var(--ease) .2s backwards; }
@keyframes sg-grow { from { transform:scaleX(0); } }

.sg-split i { transition:border-color .3s var(--ease); }
.sg-js .is-live .sg-split i { animation:sg-focus 6.4s var(--ease) calc(var(--i) * 1.6s) infinite; }
.sg-js .is-live .sg-split i.on { border-color:var(--line-strong); background:var(--bg-sunken); }
@keyframes sg-focus {
  0%, 25% { border-color:rgba(255,255,255,.5); background:linear-gradient(180deg,rgba(255,255,255,.1),var(--bg-sunken)); box-shadow:0 0 0 1px rgba(255,255,255,.3); }
  30%, 100% { border-color:var(--line-strong); background:var(--bg-sunken); box-shadow:none; }
}

.sg-recipe .sg-prompt { color:var(--text-soft); }
.sg-type { padding:6px 0 8px; color:var(--text-soft); }
.sg-type span { display:inline-block; max-width:100%; width:27ch; overflow:hidden; white-space:nowrap; vertical-align:bottom; border-right:2px solid #fff; }
.sg-js .is-live .sg-type span { animation:sg-type 1.5s steps(26) .35s backwards, sg-caret .9s steps(1) infinite; }
@keyframes sg-type { from { width:0; } }
@keyframes sg-caret { 50% { border-color:transparent; } }
.sg-insert { display:inline-block; padding:5px 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--bg-inset); color:var(--text-strong); font-size:.75rem; }
.sg-js .is-live .sg-insert { animation-delay:2s; }

/* FAQ opens smoothly where the browser can animate to auto height */
.sg-faq details { interpolate-size:allow-keywords; }
.sg-faq details::details-content { block-size:0; overflow:hidden; transition:block-size .3s var(--ease), content-visibility .3s allow-discrete; }
.sg-faq details[open]::details-content { block-size:auto; }
.sg-faq summary { transition:color .2s var(--ease); }
.sg-faq summary:hover { color:#fff; }

/* last call to action: two slow lights drifting behind it */
.sg-final-box { position:relative; overflow:hidden; isolation:isolate; }
.sg-final-box::before, .sg-final-box::after {
  content:""; position:absolute; z-index:-1; width:520px; height:520px; border-radius:50%; filter:blur(80px); pointer-events:none;
}
.sg-final-box::before { top:-320px; left:8%; background:rgba(255,255,255,0.14); animation:sg-drift 14s ease-in-out infinite alternate; }
.sg-final-box::after { top:-300px; right:4%; background:rgba(192,132,252,.2); animation:sg-drift 17s ease-in-out infinite alternate-reverse; }
@keyframes sg-drift { to { transform:translate(140px,70px); } }

#buy, #compare, #faq, #features { scroll-margin-top:72px; }

@media (prefers-reduced-motion:reduce) {
  .sg-page .home5-page .eyebrow::before,
  .sg-page .home5-page .hero > *, .sg-page .home5-page .hero h1 em,
  .sg-page .home5-page .demo-nav, .sg-page .home5-page .macbook-stage,
  .sg *, .sg *::before, .sg *::after { animation:none !important; transition:none !important; }
  .sg-js [data-sg-live]:not(.is-live) .sg-seq { opacity:1; }
}

.sgd {
  --a-canvas:#121212; --a-bg:#1f1f1f; --a-pop:#2b2b2b; --a-line:#2b2b2b; --a-pane-line:#404040; --a-hover:#2a2a2a; --a-accent:#2e2e2e;
  --a-fg:#cccccc; --a-strong:#f2f2f2; --a-muted:#a3a3a3; --a-dim:#858585;
  --a-activity:#f5a83d; --a-blocked:#f14c4c; --a-done:#23d18b; --a-sky:#38bdf8; --a-orange:#f97316; --a-focus:rgba(249,250,251,.6);
  --a-mono:var(--font-geist-mono), "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color:var(--a-fg); font:12px/1.4 var(--font-geist-sans), -apple-system, "Segoe UI", system-ui, sans-serif; text-align:left;
}
.sgd *, .sgd *::before, .sgd *::after { box-sizing:border-box; }
.sgd button { font:inherit; color:inherit; background:none; border:0; margin:0; cursor:pointer; }
.sgd .sgd-i { width:14px; height:14px; flex:none; }
.sgd .sgd-brand { width:14px; height:14px; flex:none; display:block; }
.sgd-orange { color:var(--a-orange); } .sgd-green { color:#4ec994; } .sgd-purple { color:#a78bfa; } .sgd-blue { color:#0ea5e9; } .sgd-sky { color:var(--a-sky); } .sgd-amber { color:#fbbf24; }

.sgd-win { position:relative; display:grid; grid-template-rows:38px minmax(0,1fr); height:620px; overflow:hidden; border-radius:10px; background:var(--a-canvas); }
.sgd-ib { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; color:var(--a-muted); transition:background .15s, color .15s; }
.sgd-ib:hover { background:var(--a-accent); color:var(--a-strong); }

/* title bar */
.sgd-bar { position:relative; z-index:5; display:flex; align-items:center; gap:4px; padding:0 8px; background:var(--a-bg); border-bottom:1px solid var(--a-line); }
.sgd-logo { display:grid; place-items:center; width:28px; height:28px; margin:0 2px 0 2px; border-radius:6px; }
.sgd-logo:hover { background:var(--a-accent); }
.sgd-lights { display:flex; gap:7px; margin:0 12px 0 4px; }
.sgd-lights i { width:11px; height:11px; border-radius:50%; background:#ff5f57; }
.sgd-lights i:nth-child(2) { background:#febc2e; } .sgd-lights i:nth-child(3) { background:#28c840; }
.sgd-tabs { display:flex; align-items:center; gap:4px; min-width:0; margin-left:6px; }
.sgd-tab { display:flex; align-items:center; gap:7px; height:27px; min-width:0; padding:0 10px; border-radius:7px; border:1px solid transparent; color:var(--a-muted); font-size:12px; white-space:nowrap; transition:background .15s, color .15s, border-color .15s; }
.sgd-tab span { overflow:hidden; text-overflow:ellipsis; }
.sgd-tab kbd { font:10px var(--a-mono); color:var(--a-dim); }
.sgd-tab .sgd-dot { width:6px; height:6px; }
.sgd-tab:hover { background:var(--a-hover); }
.sgd-tab.on { background:var(--a-pop); border-color:#3a3a3a; color:var(--a-strong); }
.sgd-bar-r { display:flex; align-items:center; gap:2px; margin-left:auto; }
.sgd-pill { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px; margin-right:4px; border-radius:7px; background:#262626; border:1px solid #333; color:var(--a-activity); font:600 11.5px/1 var(--a-mono); font-variant-numeric:tabular-nums; transition:background .15s, border-color .15s; }
.sgd-pill:hover, .sgd-pill[aria-expanded="true"] { background:var(--a-accent); border-color:#474747; }

/* Token Meter popup */
.sgd-pop { position:absolute; top:40px; right:74px; z-index:30; width:368px; padding:6px; border:1px solid #3a3a3a; border-radius:10px; background:var(--a-pop); box-shadow:0 24px 60px -12px rgba(0,0,0,.75); opacity:0; transform:translateY(-4px) scale(.97); transform-origin:top right; transition:opacity .16s ease-out, transform .16s ease-out; }
.sgd-pop.open { opacity:1; transform:none; }
.sgd-pop-head { display:flex; align-items:center; justify-content:space-between; padding:4px 4px 6px 8px; font-size:12px; color:var(--a-strong); }
.sgd-prov { padding:8px; border-radius:7px; transition:background .15s; }
.sgd-prov:hover { background:#333; }
.sgd-prov-top { display:flex; align-items:center; gap:8px; }
.sgd-prov-top b { width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; font-size:12px; color:var(--a-strong); }
.sgd-prov-top span { flex:1; color:var(--a-dim); font-size:11px; }
.sgd-prov-top .sgd-i { width:13px; height:13px; color:var(--a-dim); }
.sgd-bars { display:grid; grid-template-columns:auto minmax(0,1fr) 36px auto minmax(0,1fr) 36px; align-items:center; gap:4px 8px; margin:7px 0 0 22px; font:10.5px var(--a-mono); color:var(--a-dim); font-variant-numeric:tabular-nums; }
.sgd-bars i { position:relative; height:4px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.sgd-bars i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:rgba(249,250,251,.7); transform:scaleX(var(--w)); transform-origin:left; }
.sgd-bars i.warn::after { background:var(--a-activity); }
.sgd-bars em { font-style:normal; color:var(--a-fg); text-align:right; }
.sgd-bars em.warn { color:var(--a-activity); }
.sgd-pop.open .sgd-bars i::after { animation:sgd-grow .7s cubic-bezier(.2,.7,.2,1) backwards; }
@keyframes sgd-grow { from { transform:scaleX(0); } }
.sgd-more { display:flex; align-items:center; gap:6px; width:100%; margin-top:4px; padding:8px; border-top:1px solid #3a3a3a; color:var(--a-muted); font-size:11.5px; }
.sgd-more .sgd-i { width:13px; height:13px; }
.sgd-pop-note { margin:0; padding:0 8px 4px; font-size:10.5px; color:var(--a-dim); }

/* body: sidebars the same width, as the app opens them */
.sgd-body { display:grid; grid-template-columns:224px minmax(0,1fr) 224px; min-height:0; transition:grid-template-columns .28s cubic-bezier(.2,.7,.2,1); }
.sgd-win.no-left .sgd-body { grid-template-columns:0 minmax(0,1fr) 224px; }
.sgd-win.no-right .sgd-body { grid-template-columns:224px minmax(0,1fr) 0; }
.sgd-win.no-left.no-right .sgd-body { grid-template-columns:0 minmax(0,1fr) 0; }
.sgd-left, .sgd-right { min-width:0; overflow:hidden; background:var(--a-bg); }

.sgd-left { display:flex; flex-direction:column; padding:6px; border-right:1px solid var(--a-line); }
.sgd-h { display:flex; align-items:center; gap:6px; margin:0; padding:10px 8px 4px; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--a-dim); white-space:nowrap; }
.sgd-h .sgd-i { width:12px; height:12px; }
.sgd-row { display:flex; align-items:center; gap:8px; width:100%; min-width:0; padding:5px 8px; border-radius:6px; color:#c4c4c4; font-size:12px; white-space:nowrap; transition:background .15s, color .15s; }
.sgd-row > span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; text-align:left; }
.sgd-row em { font-style:normal; font-size:11px; color:var(--a-dim); }
.sgd-row:hover { background:var(--a-hover); }
.sgd-row.on { background:var(--a-accent); color:#fff; }
.sgd-quiet { color:var(--a-dim); }
/* MXterm Hosts (Navbar/RemoteMxtermHostsPanel.tsx): emerald ok, rose unreachable */
.sgd-hosts { margin-top:6px; padding-top:2px; border-top:1px solid var(--a-line); }
.sgd-hosts .sgd-h { padding-right:0; }
.sgd-h-act { display:flex; gap:2px; margin-left:auto; }
.sgd-h-act .sgd-ib { width:20px; height:20px; }
.sgd-h-act .sgd-i { width:12px; height:12px; }
.sgd-host { display:block; width:100%; padding:4px 8px; border-radius:6px; text-align:left; transition:background .15s; }
.sgd-host:hover { background:var(--a-hover); }
.sgd-host-top { display:flex; align-items:center; gap:7px; }
.sgd-host-top b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; font-size:12px; color:var(--a-strong); }
.sgd-host-act { display:flex; gap:6px; color:var(--a-dim); opacity:0; transition:opacity .15s; }
.sgd-host:hover .sgd-host-act { opacity:1; }
.sgd-host-act .sgd-i { width:11px; height:11px; }
.sgd-hdot { width:7px; height:7px; flex:none; border-radius:50%; background:#34d399; }
.sgd-hdot[data-status="unreachable"] { background:#fb7185; }
.sgd-host-sub { display:flex; gap:8px; margin:1px 0 0 14px; font:9.5px var(--a-mono); white-space:nowrap; overflow:hidden; }
.sgd-host-sub span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; color:#7d7d7d; }
.sgd-host-sub em { flex:none; font-style:normal; font-family:var(--font-geist-sans), system-ui, sans-serif; font-size:10px; color:#34d399; }
.sgd-host-sub em[data-status="unreachable"] { color:#fbbf24; }
.sgd-left-foot { margin-top:auto; padding-top:6px; border-top:1px solid var(--a-line); }
.sgd-win:not([data-mode="ssh"]) [data-for="ssh"], .sgd-win[data-mode="ssh"] [data-for="local"] { display:none; }

/* state dots: amber working, red blocked, green done (src/components/StateDot.tsx) */
.sgd-dot { width:7px; height:7px; flex:none; border-radius:50%; background:var(--a-activity); transition:background .3s; }
.sgd-dot[data-state="working"] { animation:sgd-breathe 1.6s ease-in-out infinite; }
.sgd-dot[data-state="blocked"] { background:var(--a-blocked); box-shadow:0 0 0 3px rgba(241,76,76,.22); animation:sgd-ping 1.2s ease-out infinite; }
.sgd-dot[data-state="done"] { background:var(--a-done); }
.sgd-ph .sgd-dot[data-state="working"] { display:none; }
@keyframes sgd-breathe { 50% { opacity:.45; } }
@keyframes sgd-ping { 70% { box-shadow:0 0 0 6px rgba(241,76,76,0); } }

/* workspace */
.sgd-main { position:relative; min-width:0; min-height:0; padding:4px; background:var(--a-canvas); }
.sgd-ws-view { height:100%; }
.sgd-win:not([data-mode="ssh"]) [data-view="ssh"], .sgd-win[data-mode="ssh"] [data-view="local"] { display:none; }
.sgd-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:4px; height:100%; }
.sgd-win[data-mode="room"] .sgd-grid { grid-template-rows:minmax(0,1fr); }
.sgd-win[data-mode="room"] .sgd-pane:not([data-agent]) { display:none; }
.sgd-grid.has-max { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.sgd-grid.has-max .sgd-pane:not(.max), .sgd-pane.gone { display:none; }

.sgd-pane { container-type:inline-size; position:relative; display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border:1px solid var(--a-pane-line); border-radius:6px; background:#171717; transition:border-color .2s, box-shadow .2s; animation:sgd-pane-in .35s cubic-bezier(.2,.7,.2,1) backwards; }
.sgd-pane:nth-child(2) { animation-delay:.04s; } .sgd-pane:nth-child(3) { animation-delay:.08s; } .sgd-pane:nth-child(4) { animation-delay:.12s; } .sgd-pane:nth-child(5) { animation-delay:.16s; } .sgd-pane:nth-child(6) { animation-delay:.2s; }
@keyframes sgd-pane-in { from { opacity:0; transform:scale(.98); } }
.sgd-pane.focus { border-color:var(--a-focus); box-shadow:0 0 0 1px rgba(249,250,251,.1), 0 0 22px -4px rgba(110,122,138,.45); }
.sgd-ph { display:flex; align-items:center; gap:6px; height:25px; flex:none; padding:0 3px 0 8px; background:rgba(31,31,31,.92); border-bottom:1px solid var(--a-line); color:var(--a-muted); font-size:11.5px; }
.sgd-pane.focus .sgd-ph { background:#1b1d24; color:#fcfcfd; }
.sgd-ph > b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:500; }
.sgd-ph .sgd-i, .sgd-ph .sgd-brand { width:13px; height:13px; }
.sgd-wt { display:inline-flex; align-items:center; gap:3px; min-width:0; max-width:112px; padding:1px 5px; border-radius:4px; background:var(--a-accent); color:#bdbdbd; font:10px var(--a-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sgd-wt .sgd-i { width:10px; height:10px; }
@container (max-width:300px) { .sgd-wt { font-size:0; gap:0; padding:2px 4px; } .sgd-ph-act .sgd-ib:not([data-pane-act="max"]):not([data-pane-act="close"]) { display:none; } }
.sgd-ph-act { display:flex; margin-left:auto; flex:none; }
.sgd-ph-act .sgd-ib { width:20px; height:20px; opacity:.55; }
.sgd-ph-act .sgd-ib .sgd-i { width:12px; height:12px; }
.sgd-pane:hover .sgd-ph-act .sgd-ib, .sgd-pane.focus .sgd-ph-act .sgd-ib { opacity:.9; }
.sgd-out { flex:1; display:flex; flex-direction:column; justify-content:flex-start; min-height:0; overflow:hidden; padding:6px 9px 8px; font:10.5px/1.55 var(--a-mono); color:#d0d0d0; }
.sgd-l { flex:none; white-space:pre; overflow:hidden; text-overflow:ellipsis; animation:sgd-line .2s ease-out; }
@keyframes sgd-line { from { opacity:0; transform:translateY(3px); } }
.sgd-l.k-you, .sgd-l.k-cmd, .sgd-l.k-prompt { color:#ececec; }
.sgd-l.k-tool { color:#d7d7d7; }
.sgd-l.k-dim { color:var(--a-dim); }
.sgd-l.k-ok { color:var(--a-done); }
.sgd-l.k-add { color:#4ec994; background:rgba(35,209,139,.07); }
.sgd-l.k-del { color:#f47171; background:rgba(241,76,76,.07); }
.sgd-l.k-warn { color:var(--a-activity); }
.sgd-l.k-err { color:var(--a-blocked); }
.sgd-l.k-spin { color:#e08a68; }
/* each agent CLI's input line at the foot of its pane */
.sgd-cli { flex:none; padding:0 9px 7px; font:10.5px/1.5 var(--a-mono); color:#d0d0d0; }
.sgd-rule { display:flex; align-items:center; gap:6px; height:9px; color:#8a8a8a; }
.sgd-rule::before { content:""; flex:1; border-top:1px solid #5a5a5a; }
.sgd-rule span { flex:none; font-size:9.5px; }
.sgd-rule span::after { content:" —"; }
.sgd-in { display:flex; align-items:center; gap:7px; min-height:19px; white-space:pre; overflow:hidden; }
.sgd-in b { font-weight:400; color:#ececec; }
.sgd-typed { color:#f2f2f2; overflow:hidden; text-overflow:ellipsis; }
.sgd-typed:empty::before { content:attr(data-ph); color:#6f6f6f; }
.sgd-in .sgd-typed { order:2; }
.sgd-in .sgd-caret { order:3; margin-left:-6px; }
.sgd-in .sgd-typed:empty + .sgd-caret { order:1; margin-left:0; }
.sgd-hint { display:flex; gap:6px; margin-top:2px; font-size:9.5px; color:#8a8a8a; white-space:nowrap; overflow:hidden; }
.sgd-hint .r { margin-left:auto; }
.k-claude .sgd-hint .k-auto { color:#e5b93c; }
.k-codex .sgd-in { padding-top:5px; border-top:1px solid #2e2e2e; }
.k-codex .sgd-in b { color:#9ad0ff; }
.sgd-in--box { margin-top:4px; padding:3px 8px; border:1px solid #5b5b5b; border-radius:6px; }
.k-gemini .sgd-in b { color:#a78bfa; }
.sgd-caret { display:inline-block; width:6px; height:12px; margin-left:1px; vertical-align:-2px; background:#e5e5e5; animation:sgd-blink 1.05s steps(1) infinite; }
@keyframes sgd-blink { 50% { opacity:0; } }
.sgd-pane[data-state="blocked"] { border-color:rgba(245,158,11,.55); }
.sgd-pane[data-state="blocked"] .sgd-ph { background:rgba(69,26,3,.45); color:#fde68a; }

.sgd-held { position:absolute; right:10px; bottom:10px; z-index:2; display:inline-flex; align-items:center; gap:3px; padding:5px 12px; border:1px solid rgba(249,115,22,.75); border-radius:99px; background:#2e2e2e; color:#f5f5f5; font:500 11.5px/1.2 var(--font-geist-sans), -apple-system, system-ui, sans-serif; letter-spacing:.005em; box-shadow:0 0 0 3px rgba(249,115,22,.12), 0 10px 24px -8px rgba(0,0,0,.85); animation:sgd-pop-in .3s cubic-bezier(.2,.7,.2,1); }
.sgd-pane:has(.sgd-cli) .sgd-held { bottom:64px; }
.sgd-held b { color:#fb923c; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.sgd-held:hover { background:#353535; }
@keyframes sgd-pop-in { from { opacity:0; transform:translateY(6px) scale(.95); } }

/* SSH workspace: SFTP file manager beside one terminal */
.sgd-ws-view[data-view="ssh"] { display:grid; grid-template-columns:minmax(0,48%) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:4px; }

/* server stats at the foot of the SSH tab (src/components/ssh/ServerStatsHud.tsx) */
.sgd-stats { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; padding:4px 6px 4px 10px; border:1px solid #232738; border-radius:6px; background:#13151f; font:11px var(--a-mono); color:var(--a-muted); }
.sgd-st-host { display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; overflow:hidden; }
.sgd-st-host b { color:#fff; font-weight:600; }
.sgd-st-host .sgd-i { width:13px; height:13px; }
.sgd-st-up { display:inline-flex; align-items:center; gap:4px; }
.sgd-st-up .sgd-i { width:11px; height:11px; }
.sgd-st-m { display:flex; align-items:center; gap:6px; flex:none; }
.sgd-chip { display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border:1px solid rgba(16,185,129,.2); border-radius:4px; background:rgba(16,185,129,.1); color:#34d399; transition:color .3s, background .3s, border-color .3s; }
.sgd-chip[data-level="warn"] { color:#fbbf24; background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.2); }
.sgd-chip[data-level="crit"] { color:#f87171; background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.2); }
.sgd-chip b { font-weight:700; font-variant-numeric:tabular-nums; }
.sgd-chip em { font-style:normal; font-size:10px; font-weight:600; color:var(--a-muted); }
.sgd-chip .sgd-i { width:11px; height:11px; }
.sgd-st-m .sgd-ib { width:22px; height:22px; }
.sgd-st-m .sgd-ib .sgd-i { width:11px; height:11px; }
.sgd-st-m .sgd-ib.spin .sgd-i { animation:sgd-spin .6s linear; }
@keyframes sgd-spin { to { transform:rotate(360deg); } }

/* MacBook Pro, silver: aluminium lid, black glass bezel, the notch, hinge and base.
   MXterm runs full screen: macOS hides the menu bar and the notch sits in a black band. */
/* sized off the machine's own width (cqw): a 14-inch MacBook Pro display is 3024 x 1964, 1.54:1 */
.sg-page .home5-page .macbook-stage { max-width:1380px; }
.sg-page .home5-page .mbp { position:relative; container-type:inline-size; width:min(1300px,100%); margin:0 auto; }
.mbp-lid { position:relative; z-index:1; padding:max(3px,.25cqw); border-radius:2.4cqw 2.4cqw 1.3cqw 1.3cqw;
  background:linear-gradient(180deg,#f3f4f6 0%,#dcdee1 14%,#c9cbcf 55%,#b9bbbf 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.2), 0 0 0 1px rgba(20,24,30,.35), 0 50px 110px -34px rgba(0,0,0,.8); }
.mbp-screen { position:relative; display:flex; flex-direction:column; padding:1cqw 1cqw 1.25cqw; border-radius:2.2cqw 2.2cqw 1.1cqw 1.1cqw; background:#08080a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.mbp-notch { position:absolute; top:1cqw; left:50%; z-index:3; display:grid; place-items:center; width:12cqw; height:2.35cqw; border-radius:0 0 .9cqw .9cqw; background:#08080a; transform:translateX(-50%); }
.mbp-notch i { width:6px; height:6px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#3a4a66,#0d1118 60%); box-shadow:0 0 0 1.5px #16181d; }
.mbp-fsbar { height:2.35cqw; border-radius:1.2cqw 1.2cqw 0 0; background:#000; }
.mbp-desk { height:calc((100cqw - 2 * max(3px,.25cqw) - 2cqw) / 1.54 - 2.35cqw); overflow:hidden; border-radius:0 0 5px 5px; }
.mbp-desk > .sgd, .mbp-desk .sgd-win { height:100%; }
.mbp-desk .sgd-win { border-radius:0 0 5px 5px; }
.mbp-lid::after { content:""; position:absolute; left:9%; right:9%; bottom:-5px; height:6px; border-radius:0 0 6px 6px; background:linear-gradient(180deg,#2a2b2e,#57595e); }
.mbp-base { position:relative; height:max(14px,1.55cqw); margin:0 -4.5%; border-radius:4px 4px 22px 22px / 4px 4px 16px 16px;
  background:linear-gradient(180deg,#f7f8f9 0,#e0e2e5 16%,#c8cacd 52%,#a7a9ad 100%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -3px 4px rgba(0,0,0,.18), 0 0 0 1px rgba(20,24,30,.3), 0 38px 60px -20px rgba(0,0,0,.85); }
.mbp-base i { position:absolute; top:0; left:50%; width:12%; height:8px; border-radius:0 0 12px 12px; background:linear-gradient(180deg,#9c9ea2,#d3d5d8); box-shadow:inset 0 2px 3px rgba(0,0,0,.22); transform:translateX(-50%); }
.mbp-base::after { content:""; position:absolute; left:4%; right:4%; bottom:-4px; height:4px; border-radius:0 0 50% 50%; background:rgba(0,0,0,.55); filter:blur(1px); }
/* the machine is a layer only while it tilts; flat, the text renders as crisp as the page */
@media (min-width:821px) {
  .sg-page .home5-page .macbook-stage.home5-product-flat .macbook-shell { transform:none !important; filter:none !important; will-change:auto; }
}
.sgd-sftp { display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden; border:1px solid var(--a-line); border-radius:6px; background:var(--a-bg); font-size:11.5px; animation:sgd-pane-in .35s cubic-bezier(.2,.7,.2,1) backwards; }
.sgd-sf-head { display:flex; align-items:center; gap:6px; padding:5px 6px 5px 9px; border-bottom:1px solid var(--a-line); white-space:nowrap; }
.sgd-sf-head b { min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:600; color:var(--a-strong); }
.sgd-sf-head .sgd-ib:first-of-type { margin-left:auto; }
.sgd-tag { padding:1px 5px; border-radius:4px; background:rgba(56,189,248,.14); color:var(--a-sky); font:600 9.5px var(--a-mono); }
.sgd-sf-act { display:flex; align-items:center; gap:2px; padding:4px 6px; }
.sgd-sf-act .sgd-ib { width:24px; height:24px; }
.sgd-up { display:inline-flex; align-items:center; gap:5px; margin-left:4px; padding:4px 9px; border-radius:6px; background:#0284c7 !important; color:#fff !important; font-size:11px; }
.sgd-up .sgd-i { width:12px; height:12px; }
.sgd-crumb { margin:0 8px; padding:4px 8px; border:1px solid var(--a-line); border-radius:5px; background:var(--a-canvas); font:10.5px var(--a-mono); color:#d4d4d4; }
.sgd-fsearch { display:flex; align-items:center; gap:6px; margin:6px 8px; padding:0 8px; border:1px solid var(--a-line); border-radius:5px; background:var(--a-canvas); color:var(--a-dim); }
.sgd-fsearch input { flex:1; min-width:0; height:24px; border:0; background:none; color:var(--a-fg); font:11px inherit; outline:none; }
.sgd-fsearch input::placeholder { color:#8f8f8f; }
.sgd-fsearch:focus-within { border-color:#0284c7; }
.sgd-chips { display:flex; gap:4px; padding:0 8px 6px; }
.sgd-chips button { padding:2px 9px; border:1px solid #333; border-radius:99px; color:var(--a-muted); font-size:10.5px; transition:background .15s, border-color .15s; }
.sgd-chips button.on { background:#0284c7; border-color:#0284c7; color:#fff; }
.sgd-fcols, .sgd-frow { display:grid; grid-template-columns:14px minmax(0,1fr) 42px 74px; align-items:center; gap:6px; padding:4px 9px; }
.sgd-fcols { grid-template-columns:minmax(0,1fr) 42px 74px; padding-left:29px; border-bottom:1px solid var(--a-line); font-size:10px; color:var(--a-dim); }
.sgd-flist { flex:1; min-height:0; overflow:hidden; }
.sgd-frow { width:100%; text-align:left; font-size:11.5px; color:#d4d4d4; transition:background .12s; }
.sgd-frow span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sgd-frow span:nth-of-type(n+2) { font:10px var(--a-mono); color:var(--a-dim); }
.sgd-frow .sgd-i { width:13px; height:13px; }
.sgd-frow:hover { background:var(--a-hover); }
.sgd-frow.sel { background:rgba(2,132,199,.22); }
.sgd-xfer { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:8px; padding:7px 9px; border-top:1px solid var(--a-line); font-size:10.5px; color:var(--a-muted); }
.sgd-xfer span { display:flex; align-items:center; gap:5px; }
.sgd-xfer .sgd-i { width:12px; height:12px; color:var(--a-sky); }
.sgd-xfer i { position:relative; height:4px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.sgd-xfer i::after { content:""; position:absolute; inset:0; border-radius:inherit; background:var(--a-sky); transform-origin:left; animation:sgd-xfer 3.4s cubic-bezier(.4,.1,.3,1) infinite; }
.sgd-xfer em { font-style:normal; }
@keyframes sgd-xfer { 0% { transform:scaleX(0); } 75%, 100% { transform:scaleX(1); } }

/* right panel */
.sgd-right { display:flex; flex-direction:column; border-left:1px solid var(--a-line); }
.sgd-rtabs { display:flex; align-items:center; height:36px; flex:none; padding:0 4px; border-bottom:1px solid var(--a-line); }
.sgd-rt { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 7px; border-bottom:2px solid transparent; color:var(--a-muted); font-size:11.5px; white-space:nowrap; transition:color .15s, border-color .15s; }
.sgd-rt.on { color:var(--a-strong); border-bottom-color:var(--a-orange); }
.sgd-rtabs > .sgd-ib { margin-left:auto; width:24px; height:24px; }
.sgd-rview { display:flex; flex-direction:column; flex:1; min-height:0; }
.sgd-rview[hidden] { display:none; }
.sgd-room-head { display:flex; align-items:center; justify-content:space-between; padding:9px 10px 6px; }
.sgd-room-head b { font-size:12px; color:var(--a-strong); }
.sgd-room-head span { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--a-dim); }
.sgd-room-head .sgd-i { width:12px; height:12px; }
.sgd-room-feed { flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-start; gap:6px; padding:0 8px; }
.sgd-msg { padding:7px 8px; border:1px solid #333; border-radius:8px; background:#262626; animation:sgd-msg .35s cubic-bezier(.2,.7,.2,1); }
@keyframes sgd-msg { from { opacity:0; transform:translateY(8px); } }
.sgd-msg-top { display:flex; align-items:center; gap:6px; }
.sgd-msg-top img { width:13px; height:13px; }
.sgd-msg-top b { font-size:11px; color:var(--a-strong); font-weight:600; }
.sgd-msg-top span { margin-left:auto; font:10px var(--a-mono); color:var(--a-dim); }
.sgd-msg p { margin:4px 0 0; font-size:11px; line-height:1.45; color:#cfcfcf; }
.sgd-msg-to { display:flex; align-items:center; gap:5px; margin-top:3px; }
.sgd-msg-to em { font-style:normal; font-size:10px; color:var(--a-dim); }
.sgd-kind { padding:0 5px; border-radius:4px; font:600 9px/15px var(--a-mono); font-style:normal; letter-spacing:.02em; }
.sgd-kind.k-probe { color:var(--a-sky); background:rgba(56,189,248,.12); }
.sgd-kind.k-execute { color:#fbbf24; background:rgba(251,191,36,.12); }
.sgd-msg.me { margin-left:18px; border-color:rgba(34,211,238,.35); background:#1d2a30; }
.sgd-me { width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg,#22d3ee,#c084fc); }
.sgd-typing-row { display:flex; align-items:center; gap:4px; padding:2px 4px; font-size:10.5px; color:var(--a-dim); animation:sgd-msg .25s ease-out; }
.sgd-typing-row span { margin-right:3px; }
.sgd-typing-row i { width:4px; height:4px; border-radius:50%; background:var(--a-dim); animation:sgd-dot3 1.1s ease-in-out infinite; }
.sgd-typing-row i:nth-of-type(2) { animation-delay:.15s; } .sgd-typing-row i:nth-of-type(3) { animation-delay:.3s; }
@keyframes sgd-dot3 { 0%, 60%, 100% { opacity:.35; transform:none; } 30% { opacity:1; transform:translateY(-2px); } }
.sgd-composer { display:flex; flex-wrap:wrap; gap:4px 8px; margin:8px; padding:7px 8px; border:1px solid #333; border-radius:8px; background:#181818; font-size:10.5px; color:var(--a-muted); }
.sgd-composer span { display:inline-flex; align-items:center; gap:4px; }
.sgd-composer .sgd-i { width:11px; height:11px; }
.sgd-composer .sgd-probe { color:var(--a-sky); }
.sgd-composer p { width:100%; margin:3px 0 0; font-size:11px; color:#7a7a7a; }
.sgd-rsub { display:flex; align-items:center; gap:6px; margin:0; padding:10px 10px 6px; font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--a-dim); }
.sgd-rsub .sgd-i { width:12px; height:12px; }
.sgd-right .sgd-row { padding:4px 10px; }
.sgd-in { padding-left:24px !important; } .sgd-in2 { padding-left:38px !important; }
.sgd-mod { color:#fbbf24 !important; font:600 10px var(--a-mono) !important; }
.sgd-hist { display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:11px; color:#cfcfcf; }
.sgd-hist span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sgd-hist em { font-style:normal; font:10px var(--a-mono); color:var(--a-dim); }
.sgd-hist img { width:13px; height:13px; }
.sgd-prev { margin:0 10px; padding:10px; border:1px solid #333; border-radius:8px; background:#181818; }
.sgd-prev span { display:block; margin-bottom:10px; font:10.5px var(--a-mono); color:var(--a-sky); }
.sgd-prev i { display:block; height:8px; margin-top:7px; border-radius:4px; background:#2e2e2e; }
.sgd-prev i.short { width:60%; }

/* Command Recipes palette (⌘J) */
.sgd-palette { position:absolute; inset:0; z-index:20; display:grid; justify-items:center; align-content:start; padding-top:56px; background:rgba(8,8,8,.55); opacity:0; transition:opacity .18s ease-out; }
.sgd-palette.open { opacity:1; }
.sgd-pal-box { width:min(470px,92%); padding:8px; border:1px solid #3a3a3a; border-radius:12px; background:var(--a-pop); box-shadow:0 30px 80px -20px rgba(0,0,0,.85); transform:translateY(-8px) scale(.98); transition:transform .2s cubic-bezier(.2,.7,.2,1); }
.sgd-palette.open .sgd-pal-box { transform:none; }
.sgd-pal-in { display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid #3a3a3a; border-radius:8px; background:var(--a-bg); color:var(--a-dim); }
.sgd-pal-in input { flex:1; min-width:0; border:0; background:none; outline:none; color:var(--a-strong); font:13px inherit; }
.sgd-pal-in kbd { font:10px var(--a-mono); color:var(--a-dim); }
.sgd-pal-note { margin:0; padding:9px 8px 4px; font-size:10.5px; color:var(--a-dim); }
.sgd-recipe { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 12px; width:100%; padding:8px 10px; border-radius:8px; text-align:left; transition:background .12s; }
.sgd-recipe:hover, .sgd-recipe:first-of-type { background:#333; }
.sgd-recipe b { font-size:12px; font-weight:600; color:var(--a-strong); }
.sgd-recipe code { grid-row:2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:10.5px var(--a-mono); color:#4ec994; }
.sgd-recipe span { grid-column:2; grid-row:1 / span 2; align-self:center; padding:3px 8px; border:1px solid rgba(56,189,248,.4); border-radius:6px; color:var(--a-sky); font-size:10.5px; }
.sgd-palette.open .sgd-recipe { animation:sgd-line .3s ease-out backwards; }
.sgd-palette.open .sgd-recipe:nth-of-type(2) { animation-delay:.05s; } .sgd-palette.open .sgd-recipe:nth-of-type(3) { animation-delay:.1s; }

.sgd-toast { position:absolute; left:50%; bottom:14px; z-index:40; padding:6px 14px; border:1px solid #3a3a3a; border-radius:99px; background:var(--a-pop); color:#eee; font-size:11.5px; white-space:nowrap; opacity:0; transform:translate(-50%,6px); pointer-events:none; transition:opacity .2s, transform .2s; }
.sgd-toast.show { opacity:1; transform:translate(-50%,0); }

.sg-page .sgd-caption { margin:18px 0 0; text-align:center; font-size:12.5px; color:var(--text-meta); }
.sg-page .home5-page .demo-nav button { display:inline-flex; align-items:center; gap:7px; }
.sg-page .home5-page .demo-nav .sgd-i { width:14px; height:14px; }

@media (max-width:820px) {
  .sg-page .home5-page .macbook-stage { min-height:0; padding:14px 12px 0; overflow:visible; }
  .sg-page .home5-page .macbook-shell,
  .sg-page .home5-page .macbook-stage.revealed:not(.home5-product-flat) .macbook-shell,
  .sg-page .home5-page .macbook-stage.home5-product-flat .macbook-shell { width:auto !important; min-width:0 !important; margin:0 !important; transform:none !important; }
  .mbp-notch, .mbp-fsbar, .mbp-base, .mbp-lid::after { display:none; }
  .mbp-lid { border-radius:18px; }
  .mbp-screen { padding:5px; border-radius:16px; }
  .mbp-desk, .mbp-desk > .sgd, .mbp-desk .sgd-win { height:auto; border-radius:11px; }
  .sgd-st-up, .sgd-st-host > span:not(.sgd-st-up) { display:none; }
  .sgd-win { height:auto; grid-template-rows:38px auto; }
  .sgd-body, .sgd-win.no-left .sgd-body, .sgd-win.no-right .sgd-body { grid-template-columns:minmax(0,1fr); }
  .sgd-left, .sgd-right, .sgd-lights, .sgd-bar > .sgd-ib, .sgd-bar-r > .sgd-ib, .sgd-tab kbd, .sgd-tabs > .sgd-ib { display:none; }
  .sgd-tabs { margin-left:0; }
  .sgd-tab span { max-width:96px; }
  .sgd-grid { grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-auto-rows:168px; height:auto; }
  .sgd-win:not([data-mode="room"]) .sgd-pane:nth-child(n+4) { display:none; }
  .sgd-win[data-mode="room"] .sgd-grid { grid-template-rows:none; }
  .sgd-ws-view[data-view="ssh"] { grid-template-columns:minmax(0,1fr); grid-template-rows:330px 200px auto; }
  .sgd-pop { left:8px; right:8px; width:auto; }
  .sgd-bars { margin-left:0; }
  .sgd-palette { padding-top:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .sgd *, .sgd *::before, .sgd *::after { animation:none !important; transition:none !important; }
}