.home5-page { min-height: 100vh; margin: 0; }

    :root { --canvas:#0b0e12; --shell:#11151a; --panel:#171c23; --raised:#202630; --line:#303944; --text:#f3f5f7; --muted:#a8b1bd; --dim:#6f7a87; --focus:#f4f6f8; --amber:#e6ad4d; --green:#59c77b; --red:#ee6b67; --violet:#aa8ceb; --blue:#83c5ef; --shadow:0 24px 80px rgba(0,0,0,.48); --radius:10px; }
    * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--text); background:var(--canvas); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
    body:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.16; background-image:radial-gradient(rgba(255,255,255,.14) .6px,transparent .6px); background-size:5px 5px; mask-image:linear-gradient(to bottom,black,transparent 70%); }
    a { color:inherit; text-decoration:none; } button { font:inherit; color:inherit; cursor:pointer; } .mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; }
    .wrap { width:min(1180px,calc(100% - 36px)); margin:auto; } .nav { position:sticky; top:16px; z-index:20; display:flex; align-items:center; gap:28px; width:min(820px,calc(100% - 28px)); margin:16px auto 0; padding:9px 12px 9px 18px; border:1px solid rgba(143,157,174,.28); border-radius:999px; background:rgba(20,26,33,.86); backdrop-filter:blur(18px); box-shadow:0 12px 40px rgba(0,0,0,.2); transition:.25s ease; }
    .nav.scrolled { width:min(650px,calc(100% - 28px)); background:rgba(25,31,39,.96); } .brand { display:flex; align-items:center; gap:9px; margin-right:auto; font-weight:700; white-space:nowrap; } .logo { color:#dfe5eb; font-size:26px; line-height:1; letter-spacing:-5px; width:27px; } .logo b { color:#8cc4e7; } .navlinks { display:flex; gap:23px; color:var(--muted); font-size:12px; } .navlinks a:hover { color:var(--text); }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:42px; padding:0 18px; border:1px solid var(--line); border-radius:9px; background:#151a20; font-size:13px; font-weight:700; transition:.2s ease; } .btn:hover { transform:translateY(-1px); border-color:#65707d; background:#202730; } .btn:active { transform:translateY(1px) scale(.98); } .btn:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--amber); outline-offset:3px; } .btn.primary { color:#101317; background:#f2f4f5; border-color:#f2f4f5; } .btn.primary:hover { background:#fff; }
    .icon-swap { width:17px; height:17px; display:grid; place-items:center; overflow:hidden; } .icon-swap span { grid-area:1/1; transition:.2s ease; } .icon-swap .arrow { transform:translateY(18px); } .btn:hover .icon-swap .apple { transform:translateY(-18px); } .btn:hover .icon-swap .arrow { transform:translateY(0); }
    .hero { padding:92px 0 0; text-align:center; } .eyebrow { color:#9ca9b7; font:11px/1.4 ui-monospace,monospace; letter-spacing:.18em; } h1 { max-width:850px; margin:16px auto 0; font-size:clamp(40px,6vw,74px); line-height:.98; letter-spacing:-.055em; text-wrap:balance; } h1 em { color:var(--amber); font-style:normal; } .lede { max-width:670px; margin:22px auto 0; color:var(--muted); font-size:17px; line-height:1.55; } .actions { display:flex; justify-content:center; gap:12px; margin-top:28px; }
    .demo-nav { position:sticky; top:86px; z-index:10; display:flex; justify-content:center; gap:4px; width:max-content; max-width:calc(100% - 28px); margin:30px auto 12px; padding:4px; border:1px solid var(--line); border-radius:999px; background:rgba(22,28,35,.92); backdrop-filter:blur(14px); transition:opacity .25s ease,transform .25s ease; } .demo-nav.is-past { opacity:0; transform:translateY(-10px); pointer-events:none; } .demo-nav button { border:0; border-radius:999px; background:transparent; padding:9px 14px; color:var(--muted); font-size:12px; } .demo-nav button:hover,.demo-nav button.active { color:var(--text); background:#2b313a; } .demo-nav button.active { box-shadow:inset 0 0 0 1px rgba(255,255,255,.15); }
    .app { position:relative; display:grid; grid-template-columns:178px minmax(0,1fr) 238px; min-height:585px; overflow:hidden; border:1px solid #46515d; border-radius:14px; background:var(--shell); box-shadow:var(--shadow); text-align:left; } .appbar { position:absolute; inset:0 0 auto; height:38px; display:flex; align-items:center; gap:13px; padding:0 13px; border-bottom:1px solid var(--line); background:#171d24; z-index:2; } .traffic { display:flex; gap:6px; } .traffic i { width:11px; height:11px; border-radius:50%; background:#f0645d; } .traffic i:nth-child(2){background:#e9b83d}.traffic i:nth-child(3){background:#5bcf6a}.app-tabs { display:flex; gap:4px; align-self:stretch; margin-left:12px; } .app-tab { display:flex; align-items:center; gap:8px; padding:0 15px; color:var(--muted); border-bottom:2px solid transparent; font-size:11px; } .app-tab.active { color:var(--text); border-color:var(--focus); background:rgba(255,255,255,.04); } .meter-chip { margin-left:auto; color:var(--red); font:12px monospace; }
    .rail { grid-column:1; padding:59px 11px 15px; border-right:1px solid var(--line); background:#141a20; } .rail-brand { display:flex; gap:8px; align-items:center; margin:0 7px 20px; font-size:13px; font-weight:700; } .rail h4 { margin:18px 7px 7px; color:var(--dim); font:10px monospace; text-transform:uppercase; letter-spacing:.12em; } .rail button { display:flex; align-items:center; gap:8px; width:100%; border:0; border-radius:6px; padding:8px 7px; background:transparent; color:var(--muted); text-align:left; font-size:11px; } .rail button:hover,.rail button.selected { background:#28303a; color:var(--text); } .dot { width:8px; height:8px; border-radius:50%; background:var(--amber); } .dot.green { background:var(--green); } .rail-bottom { margin-top:105px; }
    .workspace { grid-column:2; min-width:0; padding:58px 9px 9px; background:#0f1419; } .workspace-toolbar { display:flex; gap:7px; align-items:center; margin-bottom:8px; } .crumb { flex:1; padding:8px 10px; border:1px solid var(--line); border-radius:6px; color:var(--muted); font:11px monospace; } .tool { border:1px solid var(--line); border-radius:6px; padding:7px 9px; background:#1b222a; color:var(--muted); font-size:11px; } .tool:hover { color:var(--text); border-color:#73808e; }
    .pane-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:1fr 1fr 1fr; gap:7px; height:503px; } .pane { min-width:0; overflow:hidden; border:1px solid #303944; border-radius:7px; background:#12171c; } .pane.focused { border-color:var(--focus); box-shadow:0 0 0 1px color-mix(in srgb,var(--focus) 38%,transparent); } .pane-header { display:flex; gap:7px; align-items:center; height:27px; padding:0 8px; border-bottom:1px solid #29313a; color:var(--muted); font-size:10px; } .pane-header strong { color:var(--text); font-weight:600; } .pane-header span:last-child { margin-left:auto; letter-spacing:2px; } .pane-body { padding:13px; color:#b9c1ca; font:11px/1.8 ui-monospace,monospace; } .pane-body .ok { color:var(--green); } .pane-body .warn { color:var(--amber); } .pane-body .cmd { color:#e3e7eb; } .pane-body .prompt { color:#a8d77a; } .pane-body .caret { display:inline-block; width:6px; height:12px; background:#dbe2e8; vertical-align:-2px; }
    .side { grid-column:3; min-width:0; margin-top:38px; border-left:1px solid var(--line); background:#171c23; } .side-head { display:flex; align-items:center; gap:8px; height:39px; padding:0 13px; border-bottom:1px solid var(--line); font-size:12px; font-weight:700; } .side-head button { margin-left:auto; border:0; background:transparent; color:var(--muted); font-size:18px; } .side-content { padding:13px; } .provider { padding:10px 0 12px; border-bottom:1px solid #2c343d; } .provider:last-child { border-bottom:0; } .provider-top { display:flex; align-items:center; gap:7px; font-size:11px; } .provider-top strong { font-size:12px; } .provider-top small { margin-left:auto; color:var(--dim); } .barline { display:grid; grid-template-columns:22px 1fr 25px; gap:6px; align-items:center; margin-top:8px; color:var(--dim); font:10px monospace; } .track { height:5px; overflow:hidden; border-radius:9px; background:#2d343c; } .fill { height:100%; border-radius:9px; background:var(--green); } .fill.amber { background:var(--amber); } .fill.red { background:var(--red); } .side-list { display:grid; gap:12px; margin-top:8px; color:var(--muted); font-size:11px; } .side-list button { display:flex; align-items:center; gap:8px; border:0; background:transparent; color:inherit; text-align:left; } .side-list button:hover { color:var(--text); } .side-list b { color:var(--amber); font-size:13px; }
    .statusbar { display:flex; align-items:center; justify-content:space-between; grid-column:2/4; min-height:28px; padding:0 12px; border-top:1px solid var(--line); color:var(--dim); font:10px monospace; background:#151b21; } .statusbar b { color:var(--green); }
    .below { padding:70px 0 100px; } .feature-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .feature { min-height:120px; padding:26px 22px; border-right:1px solid var(--line); } .feature:last-child { border-right:0; } .feature strong { display:block; font-size:13px; } .feature p { margin:8px 0 0; color:var(--dim); font-size:12px; line-height:1.5; } .seo-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:70px; } .seo-block { padding:27px; border:1px solid var(--line); border-radius:var(--radius); background:rgba(23,28,35,.62); } .seo-block h2 { margin:0; font-size:22px; letter-spacing:-.03em; } .seo-block p { color:var(--muted); font-size:14px; line-height:1.65; } .pricing { margin-top:70px; padding:42px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center; } .pricing h2 { margin:0; font-size:32px; letter-spacing:-.04em; } .plans { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:700px; margin:28px auto 0; text-align:left; } .plan { padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:#141a20; } .plan.pro { border-color:var(--amber); } .plan h3 { margin:0; font-size:16px; } .price { margin:12px 0; font:28px monospace; } .plan p,.plan li { color:var(--muted); font-size:12px; line-height:1.55; } .plan ul { padding-left:18px; } footer { display:flex; justify-content:space-between; padding:24px 0 48px; color:var(--dim); font-size:12px; } footer nav { display:flex; gap:18px; } footer a:hover { color:var(--text); }
    .toast { position:fixed; right:20px; bottom:20px; z-index:30; padding:12px 15px; border:1px solid var(--line); border-radius:8px; background:#202730; box-shadow:var(--shadow); color:var(--text); font-size:12px; opacity:0; transform:translateY(10px); pointer-events:none; transition:.25s; } .toast.show { opacity:1; transform:translateY(0); }
    @media (max-width:850px) { .nav { gap:12px; } .navlinks { display:none; } .hero { padding-top:68px; } .app { grid-template-columns:145px minmax(0,1fr); } .side { position:absolute; right:0; top:38px; bottom:28px; width:min(238px,78%); transform:translateX(100%); transition:.25s; z-index:3; box-shadow:-18px 0 40px rgba(0,0,0,.3); } .app.side-open .side { transform:translateX(0); } .statusbar { grid-column:2; } .pane-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .pane:nth-child(3) { display:none; } .feature-strip { grid-template-columns:1fr 1fr; } .feature:nth-child(2) { border-right:0; } .feature:nth-child(-n+2) { border-bottom:1px solid var(--line); } .seo-grid,.plans { grid-template-columns:1fr; } }
    @media (max-width:560px) { .wrap { width:min(100% - 22px,1180px); } h1 { font-size:40px; } .lede { font-size:15px; } .actions { flex-direction:column; align-items:stretch; } .demo-nav { overflow:auto; justify-content:flex-start; width:calc(100% - 22px); } .demo-nav button { white-space:nowrap; } .app { min-height:530px; grid-template-columns:1fr; } .rail { display:none; } .workspace { grid-column:1; padding-top:58px; } .statusbar { grid-column:1; } .pane-grid { height:450px; } .pane-body { padding:9px; font-size:10px; } .pricing { padding:35px 10px; } footer { flex-direction:column; gap:18px; } }
    /* index2 product reveal: the browser scrolls the app out of a MacBook lid. */
    .macbook-stage { perspective:1800px; padding:28px 0 0; }
    .macbook-shell { transform:rotateX(16deg) scale(.88); transform-origin:50% 0; transition:transform .55s cubic-bezier(.2,.75,.2,1); will-change:transform; }
    .macbook-stage.revealed .macbook-shell { transform:rotateX(8deg) scale(.96); }
    .macbook-lid { position:relative; padding:10px; border:1px solid #56616d; border-radius:19px 19px 8px 8px; background:#20262d; box-shadow:0 30px 60px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06); }
    .macbook-lid:after { content:""; position:absolute; inset:auto 10% -13px; height:14px; border-radius:0 0 50% 50%; background:#303841; }
    .right-tabs { display:flex; height:36px; border-bottom:1px solid var(--line); background:#20262d; }
    .right-tabs button { flex:1; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); font-size:11px; }
    .right-tabs button.active { color:var(--text); border-bottom-color:var(--amber); background:#252c34; }
    .sftp-browser { display:none; }
    .app.sftp-mode .workspace { display:grid; grid-template-columns:250px minmax(0,1fr); gap:8px; }
    .app.sftp-mode .workspace-toolbar { grid-column:1/-1; }
    .app.sftp-mode .sftp-browser { display:block; grid-column:1; min-width:0; border:1px solid var(--line); border-radius:7px; background:#151b21; overflow:hidden; }
    .app.sftp-mode .pane-grid { grid-column:2; grid-template-columns:1fr; grid-template-rows:repeat(3,1fr); height:503px; }
    .sftp-title { padding:10px; border-bottom:1px solid var(--line); font-size:11px; font-weight:700; }
    .sftp-path { margin:9px; padding:7px 8px; border:1px solid var(--line); border-radius:5px; color:var(--muted); font:10px monospace; }
    .sftp-filters { display:flex; gap:3px; overflow:hidden; padding:0 9px 9px; }
    .sftp-filters button { flex:none; border:1px solid var(--line); border-radius:4px; background:transparent; padding:4px 6px; color:var(--muted); font-size:9px; }
    .sftp-filters button.active { background:#28313b; color:var(--text); }
    .sftp-columns,.sftp-row { display:grid; grid-template-columns:1.7fr .7fr; gap:5px; }
    .sftp-columns { padding:7px 9px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--dim); font:9px monospace; }
    .sftp-row { padding:8px 9px; color:var(--muted); font:10px monospace; }
    .sftp-row:hover { background:#202830; color:var(--text); }
    .sftp-row b { color:var(--amber); font-weight:500; }
    .room-tabs,.room-subtabs { display:flex; align-items:center; gap:5px; padding-bottom:10px; border-bottom:1px solid #2c343d; }
    .room-tabs button,.room-subtabs button { border:0; border-radius:5px; background:transparent; padding:5px 7px; color:var(--muted); font-size:10px; }
    .room-tabs button.active,.room-subtabs button.active { background:#2a313a; color:var(--text); }
    .room-subtabs { padding:10px 0; }.room-subtabs button.report { margin-left:auto; color:var(--blue); }
    .message { padding:10px 0; border-bottom:1px solid #252d35; font-size:10px; line-height:1.55; }.message strong { color:var(--amber); }.message p { margin:4px 0 0; color:var(--muted); }
    .composer { display:flex; gap:7px; align-items:center; margin-top:12px; padding:9px; border:1px solid #46515d; border-radius:6px; color:var(--dim); font-size:10px; }.composer button { margin-left:auto; border:0; background:transparent; color:var(--blue); }
    .icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }.ui-icon { width:16px; height:16px; display:block; }.icon-swap .ui-icon { grid-area:1/1; transition:.2s ease; }.icon-swap .arrow { transform:translateY(18px); }.btn:hover .icon-swap .ui-icon:first-child { transform:translateY(-18px); }.btn:hover .icon-swap .arrow { transform:translateY(0); }
    .agent-icon { width:16px; height:16px; object-fit:contain; vertical-align:-3px; }
    .right-tabs button { min-width:30px; }
    .right-tabs button:last-child { flex:0 0 34px; font-size:18px; }
    .room-tabs button:first-child { background:#10151a; color:var(--text); }
    .message .mono { color:var(--dim); margin-left:6px; }
    .composer span { white-space:nowrap; }
    .section-kicker { color:var(--amber); font:11px ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
    .plan { position:relative; }
    .offer { display:inline-block; margin:-38px 0 18px; padding:7px 12px; border-radius:999px; color:#171b20; background:var(--amber); font-size:10px; font-weight:800; letter-spacing:.08em; }
    .device-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin:14px 0; padding:4px; border-radius:7px; background:#202730; }
    .device-tabs button { border:0; border-radius:5px; padding:8px 4px; background:transparent; color:var(--muted); font-size:11px; }
    .device-tabs button.active { background:#f2f4f5; color:#101317; font-weight:800; }
    .device-tabs small { display:block; margin-top:3px; color:var(--dim); font-size:10px; }
    .device-tabs button.active small { color:#5f6872; }
    .price del { color:var(--dim); font-size:15px; }
    .price .saving { display:inline-block; margin-left:7px; padding:4px 7px; border-radius:999px; color:var(--green); background:rgba(89,199,123,.12); font:10px ui-sans-serif,sans-serif; }
    .app.hide-rail { grid-template-columns:minmax(0,1fr) 238px; }.app.hide-rail .rail { display:none; }
    .app.hide-side { grid-template-columns:178px minmax(0,1fr); }.app.hide-side .side { display:none; }.app.hide-rail.hide-side { grid-template-columns:minmax(0,1fr); }
    .app.terminal-focus { grid-template-columns:minmax(0,1fr); }.app.terminal-focus .rail,.app.terminal-focus .side { display:none; }.app.terminal-focus .workspace { grid-column:1; }.app.terminal-focus .statusbar { grid-column:1; }
    .app.terminal-focus .sftp-browser { display:none !important; }.app.terminal-focus .workspace { display:block; }
    .app.terminal-focus .pane-grid { grid-template-columns:repeat(3,minmax(0,1fr)); height:530px; }
    .pane-grid.split-horizontal { grid-template-columns:1fr; grid-template-rows:repeat(9, minmax(0,1fr)); height:530px; }
    .pane-grid.split-vertical { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); height:530px; }
    .app.sftp-mode .pane-grid.split-vertical { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); }
    .pane.maximized { display:block !important; grid-column:1/-1; grid-row:1/-1; }
    .pane-grid.has-maximized .pane:not(.maximized) { display:none; }
    .app-tab { cursor:pointer; }.pane-header span:last-child button { border:0; padding:1px 3px; background:transparent; color:var(--dim); font-size:11px; }.pane-header span:last-child button:hover { color:var(--text); }
    @media (max-width:850px) { .app.sftp-mode .workspace { display:block; } .app.sftp-mode .sftp-browser { display:none; } .app.sftp-mode .pane-grid { display:grid; grid-column:auto; } .macbook-shell { transform:rotateX(12deg) scale(.94); } .macbook-stage.revealed .macbook-shell { transform:rotateX(7deg) scale(.94); } }
    .guide-section { margin:0 auto; padding:78px 0; max-width:900px; }.guide-section.alt { max-width:none; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#10151a; }.guide-inner { width:min(900px,calc(100% - 36px)); margin:auto; }.guide-section h2 { max-width:720px; margin:10px 0 0; font-size:clamp(28px,4vw,48px); line-height:1.04; letter-spacing:-.045em; }.guide-section p { max-width:680px; color:var(--muted); line-height:1.7; }.guide-columns { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; }.guide-item { padding:20px; border-top:2px solid var(--line); }.guide-item strong { display:block; font-size:14px; }.guide-item p { margin:8px 0 0; font-size:12px; }.faq-list { margin-top:28px; border-top:1px solid var(--line); }.faq-list details { padding:17px 0; border-bottom:1px solid var(--line); }.faq-list summary { cursor:pointer; font-weight:700; }.faq-list p { margin:10px 0 0; font-size:13px; }
    /* Lower-page framing follows the app shell: compact amber rules, clear panels, and restrained motion. */
    .below { padding:88px 0 120px; }
    .feature-strip { gap:10px; border:0; }
    .feature { position:relative; min-height:145px; padding:24px; border:1px solid #3a424b; border-radius:18px; background:linear-gradient(180deg,rgba(29,35,42,.92),rgba(17,22,27,.9)); box-shadow:0 14px 36px rgba(0,0,0,.2); transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
    .feature:last-child { border-right:1px solid #3a424b; }
    .feature:before { content:""; display:block; width:24px; height:3px; margin-bottom:22px; border-radius:99px; background:var(--amber); }
    .feature:hover { transform:translateY(-4px); border-color:rgba(230,173,77,.78); box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 0 1px rgba(230,173,77,.12); }
    .seo-grid { gap:18px; margin-top:92px; }
    .seo-block { position:relative; min-height:220px; padding:30px; border:1px solid #3a424b; border-radius:20px; background:linear-gradient(145deg,rgba(27,34,41,.9),rgba(14,19,24,.9)); box-shadow:0 18px 50px rgba(0,0,0,.2); overflow:hidden; transition:transform .32s ease,border-color .32s ease,background .32s ease; }
    .seo-block:after { content:""; position:absolute; top:0; left:30px; right:30px; height:1px; background:linear-gradient(90deg,transparent,var(--amber),transparent); opacity:.75; }
    .seo-block:hover { transform:translateY(-5px); border-color:rgba(230,173,77,.72); background:linear-gradient(145deg,rgba(41,38,31,.94),rgba(17,21,25,.94)); }
    .seo-block h2 { margin-top:12px; max-width:14ch; font-size:clamp(24px,3vw,34px); line-height:1.04; }
    .seo-block p { margin-top:16px; }
    .section-kicker { display:inline-flex; align-items:center; gap:8px; color:var(--amber); font-size:10px; letter-spacing:.16em; }
    .section-kicker:before { content:""; width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(230,173,77,.1); }
    .pricing { position:relative; margin-top:92px; padding:58px 34px 64px; border:1px solid rgba(230,173,77,.65); border-radius:24px; background:linear-gradient(145deg,rgba(35,32,26,.88),rgba(17,21,25,.96)); box-shadow:0 24px 70px rgba(0,0,0,.32),0 0 0 1px rgba(230,173,77,.08); overflow:hidden; }
    .pricing:before { content:""; position:absolute; inset:10px; border:1px solid rgba(230,173,77,.12); border-radius:17px; pointer-events:none; }
    .pricing h2 { position:relative; }
    .plans { position:relative; max-width:900px; gap:18px; margin-top:34px; }
    .plan { min-height:400px; padding:28px; border-radius:18px; border-color:#3a424b; background:rgba(14,19,24,.78); transition:transform .28s ease,border-color .28s ease; }
    .plan:hover { transform:translateY(-4px); border-color:#63707b; }
    .plan.pro { border-color:var(--amber); box-shadow:0 0 0 1px rgba(230,173,77,.12),0 20px 42px rgba(0,0,0,.25); }
    .plan.pro:hover { border-color:#ffd27b; }
    .offer { position:relative; z-index:1; }
    .guide-section { max-width:900px; padding:96px 0; }
    .guide-section.alt { padding:96px 0; border:1px solid #343b43; border-radius:24px; background:linear-gradient(145deg,rgba(24,30,36,.85),rgba(12,17,21,.9)); box-shadow:0 18px 54px rgba(0,0,0,.16); }
    .guide-section + .guide-section { margin-top:18px; }
    .guide-inner { width:min(820px,calc(100% - 52px)); }
    .guide-section h2 { max-width:18ch; }
    .guide-item { border-top-color:rgba(230,173,77,.55); transition:transform .24s ease,border-color .24s ease; }
    .guide-item:hover { transform:translateY(-3px); border-top-color:var(--amber); }
    .faq-list { margin-top:34px; padding:0 20px; border:1px solid #3a424b; border-radius:16px; background:rgba(12,17,21,.45); }
    .faq-list details { padding:20px 4px; }
    .below > *, .guide-section { opacity:0; transform:translateY(20px); transition:opacity .55s ease,transform .55s ease; }
    .below > *.is-visible, .guide-section.is-visible { opacity:1; transform:none; }
    @media (prefers-reduced-motion:reduce) { .feature,.seo-block,.plan,.guide-item,.below > *, .guide-section { transition:none; opacity:1; transform:none; } }
    @media (max-width:850px) { .feature-strip,.guide-columns { grid-template-columns:1fr 1fr; } .pricing { padding:45px 18px 52px; } }
    @media (max-width:560px) { .feature-strip,.guide-columns { grid-template-columns:1fr; } .seo-block { min-height:0; } .pricing,.guide-section.alt { border-radius:18px; } .guide-inner { width:min(100% - 30px,820px); } }
    /* Index5 keeps index3's app shell and applies the index4 lower-page system. */
    :root { --gold:#f0b85c; --gold-soft:rgba(240,184,92,.16); --gold-line:rgba(240,184,92,.58); --ink:#0a0d10; }
    body { background-color:var(--ink); background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:72px 72px; }
    .nav { border-color:rgba(240,184,92,.28); box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06); }
    .nav.scrolled { border-color:var(--gold-line); }
    .hero { padding-top:84px; }
    h1 { max-width:980px; font-size:clamp(42px,6.4vw,82px); line-height:.94; }
    h1 em { color:var(--gold); text-shadow:0 0 34px rgba(240,184,92,.12); }
    .hero .lede { max-width:720px; color:#b8c1cc; }
    .actions .btn.primary { background:var(--gold); border-color:var(--gold); color:#17130b; box-shadow:0 10px 26px rgba(240,184,92,.14); }
    .actions .btn.primary:hover { background:#ffd37d; border-color:#ffd37d; }
    .macbook-lid { border-color:rgba(240,184,92,.48); box-shadow:0 30px 70px rgba(0,0,0,.52),inset 0 0 0 1px rgba(255,255,255,.07),0 0 80px rgba(240,184,92,.05); }
    .feature-strip { grid-template-columns:2fr 1fr 1fr 1fr; align-items:stretch; gap:10px; border:0; }
    .feature { position:relative; min-height:154px; display:flex; flex-direction:column; justify-content:flex-end; padding:24px; border:1px solid #39424d; border-radius:18px; background:linear-gradient(150deg,rgba(30,37,45,.96),rgba(13,18,23,.96)); box-shadow:0 14px 36px rgba(0,0,0,.2); transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease; }
    .feature:first-child { background:linear-gradient(150deg,rgba(55,45,29,.72),rgba(17,21,25,.96)); }
    .feature:before { content:""; display:block; width:34px; height:2px; margin-bottom:auto; border-radius:99px; background:var(--gold); box-shadow:18px 0 0 rgba(240,184,92,.32); }
    .feature:hover { transform:translateY(-4px); border-color:var(--gold-line); box-shadow:0 18px 42px rgba(0,0,0,.32); }
    .feature strong { font-size:15px; letter-spacing:0; }
    .feature p { max-width:24ch; }
    .seo-grid { grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; margin-top:104px; }
    .seo-block { min-height:248px; padding:32px; border:1px solid #39424d; border-radius:22px; background:linear-gradient(145deg,rgba(27,34,41,.9),rgba(14,19,24,.9)); box-shadow:0 18px 50px rgba(0,0,0,.2); transition:transform .32s ease,border-color .32s ease,background .32s ease; }
    .seo-block:nth-child(1) { grid-column:span 7; min-height:300px; }
    .seo-block:nth-child(2) { grid-column:span 5; }
    .seo-block:nth-child(3) { grid-column:span 5; }
    .seo-block:nth-child(4) { grid-column:span 7; min-height:300px; }
    .seo-block:nth-child(1),.seo-block:nth-child(4) { background:linear-gradient(145deg,rgba(39,36,29,.84),rgba(14,19,24,.96)); }
    .seo-block:hover { transform:translateY(-5px); border-color:var(--gold-line); }
    .seo-block h2 { font-size:clamp(25px,3.1vw,39px); }
    .section-kicker { color:var(--gold); }
    .section-kicker:before { background:var(--gold); box-shadow:0 0 0 4px var(--gold-soft); }
    .pricing { margin-top:104px; border-color:var(--gold-line); border-radius:24px; background:linear-gradient(145deg,rgba(43,37,26,.88),rgba(13,18,22,.97)); box-shadow:0 24px 70px rgba(0,0,0,.32),0 0 0 1px var(--gold-soft); }
    .plan { border-radius:18px; transition:transform .28s ease,border-color .28s ease; }
    .plan:hover { transform:translateY(-4px); }
    .plan.pro { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold-soft),0 26px 54px rgba(0,0,0,.28); }
    .offer { color:#17130b; background:var(--gold); }
    .guide-section { max-width:900px; padding:110px 0; }
    .guide-section .section-kicker { display:none; }
    .guide-section h2 { font-size:clamp(30px,4.5vw,56px); max-width:15ch; }
    .guide-section.alt { padding:110px 0; border:1px solid #39424d; border-radius:26px; background:linear-gradient(145deg,rgba(26,32,38,.9),rgba(11,16,20,.96)); box-shadow:0 18px 54px rgba(0,0,0,.16); }
    .guide-columns { gap:20px; margin-top:42px; }
    .guide-item { min-height:108px; padding:22px 0 8px; border-top-color:var(--gold-line); transition:transform .24s ease,border-color .24s ease; }
    .guide-item:hover { transform:translateY(-3px); border-top-color:var(--gold); }
    .faq-list { border-color:#39424d; border-radius:18px; }
    @media (max-width:850px) { .feature-strip { grid-template-columns:1fr 1fr; } .seo-grid { grid-template-columns:1fr 1fr; } .seo-block:nth-child(n) { grid-column:auto; min-height:220px; } .app.sftp-mode .workspace { grid-template-columns:minmax(310px,38%) minmax(520px,1fr); overflow-x:auto; } }
    @media (max-width:560px) { .wrap { width:calc(100% - 22px); } .hero { padding-top:68px; } h1 { font-size:clamp(38px,11vw,52px); line-height:.98; } .lede { font-size:15px; } .actions { flex-direction:column; align-items:stretch; } .demo-nav { top:72px; width:calc(100% - 22px); justify-content:flex-start; overflow-x:auto; scrollbar-width:none; } .demo-nav::-webkit-scrollbar { display:none; } .demo-nav button { min-height:42px; white-space:nowrap; } .macbook-stage { margin-inline:-11px; overflow:visible; } .macbook-shell { min-width:760px; transform:rotateX(10deg) scale(.48); transform-origin:top center; margin-bottom:-280px; } .macbook-stage.revealed .macbook-shell { transform:rotateX(7deg) scale(.48); } .app.sftp-mode .workspace { grid-template-columns:310px 520px; } .sftp-browser { max-height:420px; } .feature-strip,.seo-grid,.guide-columns,.plans { grid-template-columns:1fr; } .feature { min-height:136px; } .seo-block:nth-child(n) { min-height:0; padding:24px; } .pricing { margin-top:76px; padding:35px 14px; border-radius:18px; } .guide-section,.guide-section.alt { padding:78px 0; border-radius:18px; } .guide-inner { width:calc(100% - 30px); } .guide-section h2 { font-size:clamp(30px,9vw,44px); } footer { flex-direction:column; gap:18px; } }
    @media (prefers-reduced-motion:reduce) { .feature,.seo-block,.plan,.guide-item { transition:none; transform:none; } }
    /* Purchase surface follows the live home pricing hierarchy while keeping the
       terminal palette: Free is the calm entry point, Pro carries the offer. */
    .pricing { padding:58px 34px 68px; }
    .pricing > .lede { max-width:620px; margin:13px auto 0; }
    .plans { max-width:1000px; grid-template-columns:minmax(0,.82fr) minmax(0,1.08fr); gap:18px; margin-top:38px; }
    .plan { min-height:520px; padding:28px; border-radius:24px; background:rgba(15,20,25,.88); }
    .plan h3 { font-size:17px; }
    .plan .price { margin:18px 0 12px; font-size:44px; line-height:1; }
    .plan .price small { font:16px ui-sans-serif,sans-serif; color:var(--muted); }
    .plan > p { min-height:42px; margin:0 0 20px; font-size:13.5px; }
    .plan ul { display:grid; gap:13px; margin:0; padding:0; list-style:none; }
    .plan li { display:flex; align-items:flex-start; gap:10px; font-size:14px; }
    .plan li:before { content:"✓"; display:grid; flex:none; place-items:center; width:19px; height:19px; border-radius:50%; color:var(--green); background:rgba(89,199,123,.13); font-size:12px; font-weight:800; }
    .plan .btn { width:100%; margin-top:auto; }
    .plan:not(.pro) .btn { color:var(--text); background:#171e26; }
    .purchase-trust { display:inline-flex; align-items:center; gap:7px; margin-top:13px; padding:7px 14px; border:1px solid rgba(89,199,123,.4); border-radius:999px; color:var(--green); background:rgba(89,199,123,.1); font-size:12px; font-weight:700; }
    .purchase-trust .ui-icon { display:none; }
    .purchase-trust:before { content:"✓"; font-size:13px; font-weight:800; }
    .purchase-note { margin:10px 0 0; color:var(--dim); font-size:11.5px; text-align:center; }
    .plan > .purchase-note { min-height:0; margin:10px 0 0; font-size:11.5px; }
    .plan.pro .offer { margin-top:-42px; margin-bottom:22px; padding:9px 16px; font-size:11px; }
    .plan.pro .device-tabs { margin:0 0 24px; padding:5px; border-radius:14px; }
    .plan.pro .device-tabs button { min-height:68px; border-radius:11px; font-size:13px; }
    .plan.pro .device-tabs small { font-size:11px; }
    .plan.pro .price { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
    .plan.pro .price .saving { width:max-content; margin:2px 0 0; }
    .plan.pro .btn.primary { min-height:54px; color:#11151a; background:var(--amber); border-color:var(--amber); box-shadow:0 12px 28px rgba(230,173,77,.16); }
    .plan.pro .btn.primary:hover { background:#f3c46b; }
    .max-purchase { display:flex; justify-content:center; margin:18px auto 0; color:var(--amber); font-size:12px; font-weight:700; text-decoration:none; }
    .max-purchase:hover { color:#ffd27b; text-decoration:underline; }
    @media (max-width:850px) { .plans { grid-template-columns:1fr; } .plan { min-height:0; } }
    @media (max-width:560px) { .pricing { padding:42px 14px 48px; } .plans { gap:24px; margin-top:32px; } .plan { padding:23px 20px; border-radius:20px; } .plan .price { font-size:40px; } .plan.pro .offer { margin-top:-38px; } .plan.pro .device-tabs button { min-height:62px; } }
    .app.sftp-mode .workspace { grid-template-columns:minmax(350px,430px) minmax(0,1fr); }
    .app.sftp-mode .sftp-browser { border-radius:9px; border-color:#46515d; }
    .sftp-status { color:var(--green); font-size:9px; }
    .sftp-actions,.sftp-more { display:flex; gap:5px; padding:8px 9px; border-bottom:1px solid var(--line); }
    .sftp-actions button,.sftp-more button { border:1px solid var(--line); border-radius:5px; background:#1c242d; padding:5px 7px; color:var(--muted); font:10px ui-monospace,monospace; }
    .sftp-actions button:hover,.sftp-more button:hover { color:var(--text); border-color:var(--amber); }
    .sftp-search { display:flex; align-items:center; gap:6px; margin:8px 9px; padding:6px 8px; border:1px solid var(--line); border-radius:5px; color:var(--dim); }
    .sftp-search input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font:10px ui-monospace,monospace; }
    .sftp-search input::placeholder { color:var(--dim); }
    .sftp-filters small { color:var(--dim); }
    .sftp-columns,.sftp-row { grid-template-columns:2fr .65fr 1.05fr 1fr 1.15fr 1fr; min-width:680px; }
    .sftp-browser { overflow:auto; }
    .sftp-list { overflow:hidden; }
    .sftp-row { width:100%; border:0; border-left:2px solid transparent; background:transparent; text-align:left; }
    .sftp-row:hover,.sftp-row.selected { background:#202d39; border-left-color:var(--blue); color:var(--text); }
    .sftp-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sftp-row span:first-child b { color:var(--amber); }
    .sftp-footer { display:flex; justify-content:space-between; gap:12px; min-width:680px; padding:8px 10px; border-top:1px solid var(--line); color:var(--dim); font:9px ui-monospace,monospace; }
    .sftp-footer b { color:var(--green); font-weight:500; }
    .sftp-more { border-top:1px solid var(--line); border-bottom:0; }
    .editor-modal { position:absolute; inset:45px 10px 32px 10px; z-index:8; display:none; flex-direction:column; overflow:hidden; border:1px solid #4b5662; border-radius:12px; background:#171c20; box-shadow:0 28px 80px rgba(0,0,0,.62); }
    .editor-modal.open { display:flex; animation:editor-in .2s ease both; }
    @keyframes editor-in { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:none; } }
    .editor-top { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line); background:#20262d; }
    .editor-file,.editor-controls { display:flex; align-items:center; gap:8px; min-width:0; }
    .editor-file strong { font-size:12px; white-space:nowrap; }.editor-path { max-width:190px; overflow:hidden; color:var(--dim); font:9px ui-monospace,monospace; text-overflow:ellipsis; white-space:nowrap; }
    .editor-badge { padding:3px 6px; border:1px solid rgba(131,197,239,.35); border-radius:4px; color:var(--blue); font:9px ui-monospace,monospace; }
    .editor-controls button { border:1px solid var(--line); border-radius:5px; background:#1a2027; padding:6px 8px; color:var(--muted); font-size:10px; white-space:nowrap; }.editor-controls button:hover { color:var(--text); border-color:#7b8794; }.editor-controls .save-button { color:#0d1711; border-color:var(--green); background:var(--green); }
    .editor-body { display:grid; grid-template-columns:38px minmax(0,1fr); flex:1; min-height:0; overflow:auto; padding:15px 0; background:#171c20; }
    .editor-gutter { padding-right:12px; color:#66717c; text-align:right; font:11px/1.8 ui-monospace,monospace; user-select:none; }.editor-body pre { margin:0; padding:0 18px; color:#d8dee9; font:11px/1.8 ui-monospace,monospace; white-space:pre; }.tok-comment { color:#8b967b; }.tok-keyword { color:#ef789b; }.tok-string { color:#e8d875; }.tok-variable { color:#79c8de; }
    .editor-status { display:flex; justify-content:space-between; padding:7px 12px; border-top:1px solid var(--line); color:var(--dim); font:9px ui-monospace,monospace; }
    @media (max-width:850px) { .app.sftp-mode .workspace { grid-template-columns:1fr; } .app.sftp-mode .sftp-browser { display:block; max-height:260px; } .editor-modal { inset:45px 6px 32px; } .editor-path { display:none; } .editor-controls button:not(.save-button):not(:last-child) { display:none; } }
    @media (max-width:850px) { .app.sftp-mode .workspace { grid-template-columns:minmax(310px,38%) minmax(520px,1fr); overflow-x:auto; } .app.sftp-mode .sftp-browser { display:block; max-height:420px; } }
    @media (max-width:560px) { .app.sftp-mode .workspace { grid-template-columns:310px 520px; } }
    /* Preserve index3's selected header/hero treatment; index4 styling starts below the app. */
    body { background-color:var(--canvas); background-image:none; }
    .nav { border-color:rgba(143,157,174,.28); box-shadow:0 12px 40px rgba(0,0,0,.2); }
    .nav.scrolled { border-color:rgba(143,157,174,.28); }
    .hero { padding:92px 0 0; }
    h1 { max-width:850px; font-size:clamp(40px,6vw,74px); line-height:.98; letter-spacing:-.055em; }
    h1 em { color:var(--amber); text-shadow:none; }
    .hero .lede { max-width:670px; color:var(--muted); }
    .actions .btn.primary { background:#f2f4f5; border-color:#f2f4f5; color:#101317; box-shadow:none; }
    .actions .btn.primary:hover { background:#fff; border-color:#fff; }
    .macbook-lid { border-color:#46515d; box-shadow:var(--shadow); }
    @media (max-width:850px) { .hero { padding-top:68px; } }
    @media (max-width:560px) { h1 { font-size:40px; } .hero .lede { font-size:15px; } }
    /* Prevent the compact header from wrapping individual navigation labels. */
    @media (max-width:1100px) { .nav { width:calc(100% - 28px); gap:16px; } .navlinks { gap:14px; } }
    @media (max-width:850px) { .nav { width:calc(100% - 22px); top:10px; gap:10px; padding:8px 9px 8px 13px; } .navlinks { display:none; } .brand { font-size:15px; } .nav > .btn { flex:0 0 auto; min-height:38px; padding:0 13px; white-space:nowrap; font-size:12px; } }
    @media (max-width:560px) { .nav { top:8px; margin-top:8px; } .logo { font-size:23px; } .nav > .btn { min-height:36px; padding:0 11px; font-size:11px; } .nav > .btn .icon-swap { width:18px; height:18px; flex:none; } .nav > .btn .icon-swap .ui-icon { width:18px; height:18px; flex:none; } }
    .nav > .btn .icon-swap { width:18px; height:18px; flex:none; }
    .nav > .btn .icon-swap .ui-icon { width:18px; height:18px; flex:none; }
    .nav-toggle { display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border:1px solid var(--line); border-radius:10px; background:#171e26; color:var(--text); cursor:pointer; font-size:20px; line-height:1; }
    .mobile-menu { display:none; }
    @media (max-width:1360px) { .navlinks { display:none; } .nav-toggle { display:inline-flex; } .mobile-menu { position:fixed; z-index:20; top:74px; left:11px; right:11px; display:flex; flex-direction:column; gap:4px; padding:10px; border:1px solid rgba(240,184,92,.42); border-radius:16px; background:rgba(18,24,30,.97); box-shadow:0 24px 60px rgba(0,0,0,.5); opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .22s ease,transform .22s ease; } .mobile-menu.open { opacity:1; pointer-events:auto; transform:none; } .mobile-menu a { padding:13px 14px; border-radius:10px; color:var(--muted); font-size:14px; text-decoration:none; } .mobile-menu a:hover,.mobile-menu a:focus-visible { color:var(--text); background:#202730; outline:none; } }
    .nav-toggle { display:none; align-items:center; justify-content:center; width:38px; height:38px; flex:none; border:1px solid var(--line); border-radius:10px; background:#171e26; color:var(--text); cursor:pointer; }
    .mobile-menu { display:none; }
    .nav-toggle .ui-icon { width:18px; height:18px; }
    @media (prefers-reduced-motion:reduce) { .mobile-menu,.macbook-shell { transition:none; } }
    body { overflow-x:hidden; }
    main [id] { scroll-margin-top:104px; }
    .site-footer { display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(120px,1fr)); gap:36px 24px; margin-top:32px; padding:48px 0 24px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
    .footer-brand { display:flex; flex-direction:column; gap:12px; max-width:27ch; }
    .footer-brand p { margin:0; color:var(--dim); line-height:1.65; }
    .footer-heading { margin:0 0 13px; color:var(--text); font:10px ui-monospace,monospace; letter-spacing:.14em; text-transform:uppercase; }
    .footer-group { display:flex; flex-direction:column; gap:9px; }
    .footer-group a { color:var(--muted); transition:color .2s ease,transform .2s ease; }
    .footer-group a:hover { color:var(--gold); transform:translateX(2px); }
    .footer-bottom { grid-column:1/-1; display:flex; justify-content:space-between; gap:16px; padding-top:20px; border-top:1px solid var(--line); color:var(--dim); }
    .footer-bottom nav { display:flex; flex-wrap:wrap; gap:16px; }
    @media (max-width:850px) { .site-footer { grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 22px; } .footer-brand,.footer-bottom { grid-column:1/-1; } }
    @media (max-width:560px) { .site-footer { grid-template-columns:1fr 1fr; margin-top:18px; padding-top:36px; } .footer-brand { max-width:34ch; } .footer-bottom { flex-direction:column; } .footer-bottom nav { gap:10px 14px; } }
  

      /* home5-only responsive layer: keep the approved prototype source unchanged. */
      .home5-page {
        --canvas:#050a0f;
        --surface:#111922;
        --line:#354353;
        --text:#f7f9fb;
        --muted:#b9c3d1;
        --dim:#8895a5;
        background:
          radial-gradient(circle at 50% 0%, rgba(240,181,77,.095), transparent 36rem),
          radial-gradient(circle at 20% 16%, rgba(93,170,218,.08), transparent 24rem),
          #050a0f;
      }
      .home5-page { overflow-x:clip; }
      .home5-page input:focus-visible { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.3); }
      .home5-page .demo-token-icon { width:17px; height:17px; vertical-align:-3px; margin-right:4px; }
      .home5-page .plan .purchase-trust { align-self:center; }
      .home5-page .plan .purchase-note { text-align:center; }
      .home5-page .eyebrow { color:#aebdcc; }
      .home5-page h1 { color:#fbfcfe; text-shadow:0 16px 54px rgba(0,0,0,.42); }
      .home5-page h1 em { color:#f4b94f; }
      .home5-page .lede,
      .home5-page .hero .lede {
        color:#b9c3d1;
      }
      .home5-page .macbook-shell {
        transform:rotateX(17deg) scale(.88);
        transform-style:preserve-3d;
        will-change:transform, filter;
        transition:transform .72s cubic-bezier(.18,.78,.16,1), filter .72s cubic-bezier(.18,.78,.16,1);
      }
      .home5-page .macbook-stage.revealed:not(.home5-product-flat) .macbook-shell {
        transform:rotateX(17deg) scale(.88);
      }
      .home5-page .macbook-stage.home5-product-flat .macbook-shell {
        transform:rotateX(0deg) scale(.98) !important;
        filter:drop-shadow(0 34px 62px rgba(0,0,0,.38));
      }
      .home5-page .macbook-stage.home5-product-flat .app { box-shadow:0 18px 64px rgba(0,0,0,.42); }
      .home5-page .side-content,
      .home5-page .pane-grid {
        transition:opacity .24s ease, transform .24s cubic-bezier(.18,.78,.16,1);
      }
      .home5-page .is-pane-switching {
        opacity:.45;
        transform:translateY(6px);
      }
      .home5-page .home5-inline-ask {
        width:min(1180px,calc(100% - 32px));
        margin:0 auto;
        padding:26px 0 42px;
        color:#17191d;
      }
      .home5-page .home5-inline-ask-card {
        max-width:900px;
        margin:0 auto;
        padding:52px 28px;
        border:1px solid rgba(143,157,174,.3);
        border-radius:28px;
        background:linear-gradient(145deg,rgba(27,35,45,.96),rgba(9,14,19,.94));
        text-align:center;
        box-shadow:0 24px 58px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
      }
      .home5-page .home5-inline-ask h2 { margin:0; color:#f7f9fb; font-size:clamp(1.55rem,2.8vw,2rem); line-height:1.15; }
      .home5-page .home5-inline-ask p { max-width:52ch; margin:14px auto 0; color:#aeb9c8; font-size:16px; line-height:1.6; }
      .home5-page .home5-inline-ask p.home5-inline-ask-question { max-width:60ch; margin:20px auto 0; color:#e6edf5; font-size:16px; font-weight:500; }
      .home5-page .home5-inline-ask-question small { display:block; margin-bottom:4px; color:#b3bdca; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
      .home5-page .home5-inline-ask-question q { display:block; quotes:none; }
      .home5-page .home5-inline-ask-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
      .home5-page .home5-inline-ask-actions a { display:inline-flex; min-height:48px; align-items:center; justify-content:center; gap:9px; padding:0 22px; border:1px solid rgba(143,157,174,.28); border-radius:999px; background:#151e28; color:#f7f9fb; font-weight:700; text-decoration:none; box-shadow:0 10px 24px rgba(0,0,0,.2); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
      .home5-page .home5-inline-ask-actions a:hover { transform:translateY(-2px); border-color:rgba(240,181,77,.6); box-shadow:0 14px 30px rgba(0,0,0,.3); }
      .home5-page .home5-inline-ask-actions svg,
      .home5-page .home5-inline-ask-actions img { width:20px; height:20px; flex:0 0 20px; object-fit:contain; }
      .home5-page .home5-inline-ask-actions svg { fill:currentColor; }
      .home5-page .below { padding-top:86px; }
      .home5-page .home5-feature-showcase {
        width:min(1180px,calc(100% - 32px));
        margin:clamp(86px,10vw,148px) auto 0;
        padding:clamp(30px,5vw,64px) 0 88px;
        border-top:1px solid rgba(143,157,174,.22);
      }
      .home5-page .home5-feature-heading { max-width:700px; }
      .home5-page .home5-feature-kicker,
      .home5-page .home5-feature-index { margin:0; color:#f0b54d; font:700 11px/1.2 ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; }
      .home5-page .home5-feature-heading h2 { max-width:15ch; margin:14px 0 0; color:#f7f9fb; font-size:clamp(34px,5vw,64px); line-height:.98; letter-spacing:-.055em; }
      .home5-page .home5-feature-heading > p:last-child { max-width:62ch; margin:20px 0 0; color:#aeb9c8; font-size:16px; line-height:1.65; }
      .home5-page .home5-feature-layout { display:grid; grid-template-columns:245px minmax(0,1fr); gap:28px; margin-top:52px; align-items:start; }
      .home5-page .home5-feature-tabs { display:grid; gap:8px; position:sticky; top:92px; }
      .home5-page .home5-feature-tabs button { display:grid; grid-template-columns:34px 1fr; gap:2px 10px; padding:15px 14px; border:1px solid rgba(143,157,174,.2); border-radius:15px; background:rgba(17,24,32,.62); color:#9daabd; text-align:left; cursor:pointer; transition:transform .22s ease,border-color .22s ease,background .22s ease,color .22s ease; }
      .home5-page .home5-feature-tabs button:hover { transform:translateX(3px); border-color:rgba(240,181,77,.5); }
      .home5-page .home5-feature-tabs button.is-active { border-color:rgba(240,181,77,.62); background:linear-gradient(135deg,rgba(240,181,77,.18),rgba(17,24,32,.9)); color:#f7f9fb; box-shadow:0 12px 30px rgba(0,0,0,.2); }
      .home5-page .home5-feature-tabs button > span { grid-row:1 / span 2; color:#f0b54d; font:700 11px/1.2 ui-monospace,monospace; }
      .home5-page .home5-feature-tabs b { font-size:14px; line-height:1.2; }
      .home5-page .home5-feature-tabs small { color:#7f8da0; font-size:11px; line-height:1.35; }
      .home5-page .home5-feature-panels { min-width:0; }
      .home5-page .home5-feature-panel { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr); gap:28px; align-items:center; padding:24px; border:1px solid rgba(143,157,174,.27); border-radius:26px; background:linear-gradient(145deg,rgba(27,35,45,.92),rgba(9,14,19,.9)); box-shadow:0 28px 70px rgba(0,0,0,.24); animation:home5FeatureIn .38s ease both; }
      .home5-page .home5-feature-copy h3 { margin:14px 0 0; color:#f7f9fb; font-size:clamp(24px,3vw,40px); line-height:1.02; letter-spacing:-.045em; }
      .home5-page .home5-feature-copy > p:not(.home5-feature-index) { margin:18px 0 0; color:#aeb9c8; font-size:15px; line-height:1.7; }
      .home5-page .home5-feature-copy a { display:inline-flex; align-items:center; gap:8px; margin-top:24px; color:#f0b54d; font-size:13px; font-weight:750; text-decoration:none; }
      .home5-page .home5-feature-copy a:hover { color:#ffd27b; }
      .home5-page .home5-feature-shot { min-width:0; overflow:hidden; border:1px solid rgba(240,181,77,.42); border-radius:18px; background:#0a1016; box-shadow:0 22px 44px rgba(0,0,0,.3); }
      .home5-page .home5-shot-bar { display:flex; justify-content:space-between; gap:12px; padding:11px 14px; border-bottom:1px solid rgba(143,157,174,.2); color:#8493a4; font:11px/1.2 ui-monospace,monospace; }
      .home5-page .home5-shot-canvas { display:grid; min-height:310px; place-items:center; padding:18px; background:radial-gradient(circle at 50% 0%,rgba(240,181,77,.11),transparent 60%),linear-gradient(135deg,#111b25,#080d12); }
      .home5-page .home5-shot-placeholder { display:grid; gap:8px; width:100%; min-height:250px; place-items:center; align-content:center; border:1px dashed rgba(240,181,77,.45); border-radius:12px; color:#f0b54d; text-align:center; }
      .home5-page .home5-mock-figure { display:grid; gap:8px; width:100%; margin:0; }
      .home5-page .home5-mock-figure img { display:block; width:100%; height:auto; border-radius:10px; border:1px solid rgba(143,157,174,.22); }
      .home5-page .home5-mock-figure figcaption, .home5-page .home5-mock-note { margin:0; color:#8493a4; font-size:12px; text-align:center; }
      .home5-page .home5-mock { display:grid; gap:8px; width:100%; align-content:center; font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; color:#c9d2de; }
      .home5-page .home5-mock-bar { display:flex; justify-content:space-between; gap:12px; padding:9px 12px; border:1px solid rgba(143,157,174,.22); border-radius:10px; background:rgba(255,255,255,.035); }
      .home5-page .home5-mock-bar b { color:#f7f9fb; }
      .home5-page .home5-mock-row { display:flex; justify-content:space-between; gap:12px; padding:8px 12px; border-radius:8px; }
      .home5-page .home5-mock-row:nth-of-type(odd) { background:rgba(255,255,255,.03); }
      .home5-page .home5-mock-row.head { color:#8493a4; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
      .home5-page .home5-mock-gauge { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:10px 12px; border:1px solid rgba(143,157,174,.18); border-radius:10px; }
      .home5-page .home5-mock-gauge b { color:#f0b54d; }
      .home5-page .home5-mock-gauge i { grid-column:1 / -1; height:8px; border-radius:99px; background:#1b2531; overflow:hidden; }
      .home5-page .home5-mock-gauge u { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#f0b54d,#ffd27b); }
      .home5-page .home5-mock-input { padding:10px 12px; border:1px solid rgba(240,181,77,.5); border-radius:10px; color:#f7f9fb; background:rgba(0,0,0,.25); }
      .home5-page .home5-mock-code { margin:0; padding:12px; overflow-x:auto; border-radius:10px; background:#05090d; color:#9ad1a0; white-space:pre-wrap; word-break:break-word; }
      .home5-page .home5-mock-actions span { display:inline-block; padding:8px 12px; border:1px solid rgba(240,181,77,.5); border-radius:10px; color:#f0b54d; }
      .home5-page .home5-shot-placeholder strong { font-size:14px; }
      .home5-page .home5-shot-placeholder span { color:#8493a4; font-size:12px; }
      @keyframes home5FeatureIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
      .home5-page .feature-strip {
        gap:14px;
        border:0;
        grid-template-columns:1.16fr .92fr .92fr 1fr;
      }
      .home5-page .feature {
        position:relative;
        overflow:hidden;
        min-height:156px;
        border:1px solid rgba(143,157,174,.25);
        border-radius:22px;
        background:
          radial-gradient(circle at 18% 0%, rgba(240,181,77,.16), transparent 58%),
          linear-gradient(145deg, rgba(31,38,48,.84), rgba(10,15,20,.86));
        box-shadow:0 24px 54px rgba(0,0,0,.22);
        transition:opacity .44s cubic-bezier(.18,.78,.16,1), transform .44s cubic-bezier(.18,.78,.16,1), border-color .24s ease, box-shadow .24s ease;
      }
      .home5-page .feature:before {
        content:"";
        display:block;
        width:58px;
        height:3px;
        margin-bottom:22px;
        border-radius:999px;
        background:linear-gradient(90deg,#f0b54d,rgba(240,181,77,.12));
      }
      .home5-page .feature:hover {
        transform:translateY(-3px);
        border-color:rgba(240,181,77,.5);
        box-shadow:0 34px 68px rgba(0,0,0,.28),0 0 0 1px rgba(240,181,77,.12);
      }
      .home5-page .feature strong { font-size:15px; letter-spacing:-.015em; }
      .home5-page .feature p { font-size:13px; line-height:1.62; }
      .home5-page .seo-grid { grid-template-columns:1.08fr .92fr; gap:18px; }
      .home5-page .seo-block {
        min-height:250px;
        border-color:rgba(143,157,174,.24);
        background:
          radial-gradient(circle at 12% 0%, rgba(240,181,77,.13), transparent 42%),
          rgba(17,23,30,.72);
      }
      .home5-page .seo-block:nth-child(1) { min-height:320px; }
      .home5-page .seo-block:nth-child(4) { margin-top:-70px; }
      .home5-page .section-kicker { letter-spacing:.16em; color:#f0b54d; }
      @media (max-width: 850px) {
        .home5-page .macbook-shell { transform:rotateX(14deg) scale(.92); }
        .home5-page .macbook-stage.revealed:not(.home5-product-flat) .macbook-shell { transform:rotateX(14deg) scale(.92); }
        .home5-page .macbook-stage.home5-product-flat .macbook-shell { transform:rotateX(0deg) scale(.98) !important; }
        .home5-page .side-content p { display:none; }
        .home5-page .side-content { gap:8px; }
        .home5-page .feature-strip,
        .home5-page .seo-grid { grid-template-columns:1fr 1fr; }
        .home5-page .seo-block:nth-child(4) { margin-top:0; }
        .home5-page .home5-feature-layout { grid-template-columns:1fr; gap:22px; }
        .home5-page .home5-feature-tabs { position:static; display:flex; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }
        .home5-page .home5-feature-tabs::-webkit-scrollbar { display:none; }
        .home5-page .home5-feature-tabs button { flex:0 0 172px; }
        .home5-page .home5-feature-panel { grid-template-columns:1fr; }
      }
      @media (max-width: 560px) {
        .home5-page { overflow-x:clip; }
        .home5-page .hero { padding-top:72px; }
        .home5-page h1 { max-width:12.5ch; font-size:clamp(38px,10.8vw,50px); line-height:1.02; letter-spacing:-.052em; }
        .home5-page .lede { max-width:34ch; }
        .home5-page .demo-nav {
          width:calc(100% - 20px);
          max-width:calc(100% - 20px);
          gap:0;
          justify-content:flex-start;
          overflow-x:auto;
          overscroll-behavior-inline:contain;
          padding-inline:8px;
          scrollbar-width:none;
        }
        .home5-page .demo-nav::-webkit-scrollbar { display:none; }
        .home5-page .demo-nav button {
          min-height:40px;
          padding:8px 9px;
          font-size:11px;
          white-space:nowrap;
        }
        .home5-page .demo-nav button:nth-child(4) { margin-right:0; }
        .home5-page .macbook-stage { width:100%; max-width:100%; margin-inline:0; padding-top:18px; overflow:hidden; }
        .home5-page .macbook-shell { width:680px; min-width:680px; max-width:none; margin-left:50%; transform:translateX(-50%) rotateX(10deg) scale(.54); transform-origin:50% 0; }
        .home5-page .macbook-stage.revealed:not(.home5-product-flat) .macbook-shell { transform:translateX(-50%) rotateX(10deg) scale(.54); }
        .home5-page .macbook-stage.home5-product-flat .macbook-shell { transform:translateX(-50%) rotateX(0deg) scale(.60) !important; }
        .home5-page .side-content p { display:none; }
        .home5-page .below { width:calc(100% - 22px); padding-top:58px; }
        .home5-page .below { width:calc(100% - 32px); }
        .home5-page .feature-strip,
        .home5-page .seo-grid { width:100%; grid-template-columns:1fr; gap:14px; }
        .home5-page .feature { min-height:168px; padding:24px 22px; }
        .home5-page .feature p { max-width:30ch; font-size:14px; line-height:1.7; }
        .home5-page .seo-block { padding:28px 24px; }
        .home5-page .seo-block p { font-size:15px; line-height:1.7; }
        .home5-page .pricing { margin-inline:5px; padding-inline:18px; }
      .home5-page .seo-block { min-height:0; }
        .home5-page .home5-inline-ask { width:calc(100% - 22px); padding-top:18px; }
        .home5-page .home5-inline-ask-card { padding:38px 18px; border-radius:22px; }
        .home5-page .home5-inline-ask-actions { flex-direction:column; align-items:stretch; }
        .home5-page .home5-feature-showcase { width:calc(100% - 22px); margin-top:74px; padding-bottom:62px; }
        .home5-page .home5-feature-heading h2 { font-size:38px; }
        .home5-page .home5-feature-layout { margin-top:34px; }
        .home5-page .home5-feature-panel { padding:16px; border-radius:21px; }
        .home5-page .home5-feature-copy h3 { font-size:28px; }
        .home5-page .home5-shot-canvas { min-height:240px; }
        .home5-page .home5-shot-placeholder { min-height:190px; }
      }
      @media (max-width: 390px) {
        .home5-page .demo-nav { justify-content:flex-start; scroll-snap-type:x proximity; }
        .home5-page .demo-nav button { scroll-snap-align:center; padding-inline:7px; font-size:10.5px; }
        .home5-page .demo-nav button:nth-child(4) { margin-right:0; }
        .home5-page .macbook-shell { width:650px; min-width:650px; transform:translateX(-50%) rotateX(10deg) scale(.52); }
        .home5-page .macbook-stage.revealed:not(.home5-product-flat) .macbook-shell { transform:translateX(-50%) rotateX(10deg) scale(.52); }
        .home5-page .macbook-stage.home5-product-flat .macbook-shell { transform:translateX(-50%) rotateX(0deg) scale(.58) !important; }
        .home5-page .macbook-stage { min-height:330px; }
        .home5-page .demo-nav { justify-content:flex-start; }
        .home5-page .demo-nav button { flex:0 0 auto; }
      }
      .home5-page .feature { opacity:0; transform:translateY(16px); }
      .home5-page .feature-strip.is-visible .feature { opacity:1; transform:none; }
      .home5-page .feature-strip.is-visible .feature:nth-child(2) { transition-delay:.06s; }
      .home5-page .feature-strip.is-visible .feature:nth-child(3) { transition-delay:.12s; }
      .home5-page .feature-strip.is-visible .feature:nth-child(4) { transition-delay:.18s; }
      @media (prefers-reduced-motion:reduce) {
        .home5-page .feature { opacity:1; transform:none; transition:none; }
        .home5-page .macbook-shell { transition:none !important; transform:none !important; }
      }


/* home5 marketing layer: type scale and rhythm after linear.app / onorca.dev (measured: h1 64px/510/-0.022em, h2 48px, body 15px/24px). */
.home5-page {
  --canvas:#08090b; --surface:#111214; --line:rgba(255,255,255,.09);
  --text:#f4f5f7; --muted:#a3abb7; --dim:#7f8895;
  font-family: var(--font-geist-sans), -apple-system, "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(240,181,77,.07), transparent 34rem),
    #08090b;
}
.home5-page h1 { font-size:clamp(40px,5vw,66px); font-weight:560; letter-spacing:-.028em; line-height:1.04; }
.home5-page h2 { font-size:clamp(30px,3.3vw,46px); font-weight:560; letter-spacing:-.026em; line-height:1.08; }
.home5-page h3 { font-weight:560; letter-spacing:-.018em; }
.home5-page .home5-feature-copy h3 { font-size:clamp(26px,2.4vw,32px); line-height:1.12; }
.home5-page .lede, .home5-page .hero .lede { font-size:18px; line-height:1.55; color:#a9b2bf; max-width:60ch; }
.home5-page .guide-section p, .home5-page .feature p, .home5-page .home5-feature-copy > p { font-size:15px; line-height:1.6; color:#a9b2bf; }
.home5-page .feature p { font-size:14.5px; }
.home5-page .guide-section { padding-block:56px; }
.home5-page .home5-feature-tabs small { font-size:12.5px; color:#98a2b0; }
.home5-page .hero { max-width:1040px; margin-inline:auto; }
.home5-page .hero h1 { max-width:none; margin-inline:auto; text-wrap:balance; }
@media (min-width:851px) {
  .home5-page .macbook-shell,
  .home5-page .macbook-stage.revealed:not(.home5-product-flat) .macbook-shell { transform:rotateX(9deg) scale(.95); }
  .home5-page .macbook-stage.home5-product-flat .macbook-shell { transform:rotateX(0deg) scale(1) !important; }
}
/* The demo tabs sat over the window title bar while scrolling; they now stay above the window. */
.home5-page .demo-nav { position:relative; top:auto; }
/* The four feature cards: the prototype gives them 12-column spans (7/5/5/7) but the route made the grid 2 columns wide, so every card stretched to one full-width row. */
.home5-page.home5-page .seo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:64px; }
.home5-page.home5-page .seo-block:nth-child(n) { grid-column:auto; margin-top:0; min-height:0; padding:34px 36px; }
.home5-page.home5-page .seo-block h2 { max-width:none; font-size:clamp(24px,2.3vw,32px); }
@media (max-width:850px){ .home5-page.home5-page .seo-grid { grid-template-columns:1fr; } }
/* "Works with": the agents that have a logo in the app, then one pill to /agents for the rest of the catalogue. */
.home5-page .home5-works-with { max-width:1144px; margin:0 auto; padding:88px 0 24px; text-align:center; }
.home5-page .home5-works-with h2 { margin:14px auto 0; max-width:22ch; }
.home5-page .home5-works-sub { margin:16px auto 0; max-width:58ch; font-size:16px; line-height:1.6; color:#a9b2bf; }
.home5-page .home5-works-list { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:36px auto 0; padding:0; list-style:none; max-width:920px; }
.home5-page .home5-works-list li { display:inline-flex; align-items:center; gap:10px; padding:10px 16px; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(255,255,255,.03); color:#e6eaf0; font-size:14.5px; font-weight:520; }
.home5-page .home5-works-list img { display:block; width:20px; height:20px; object-fit:contain; border-radius:4px; }
.home5-page .home5-works-list .home5-works-any { color:#a9b2bf; font-weight:450; border-style:dashed; }
.home5-page .home5-works-list .home5-works-any a { color:inherit; text-decoration:none; }


.home5-page.home5-page .app {
  background: #15191f;                 
  border-color: #383e47;               
}
.home5-page.home5-page .app { grid-template-columns: 178px minmax(0, 1fr) 275px; }
.home5-page.home5-page .app.hide-rail { grid-template-columns: minmax(0, 1fr) 275px; }
.home5-page.home5-page .app.hide-side { grid-template-columns: 178px minmax(0, 1fr); }
.home5-page.home5-page .app.hide-rail.hide-side,
.home5-page.home5-page .app.terminal-focus { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 851px) {
  .home5-page.home5-page .app.hide-rail .workspace { grid-column: 1; }
  .home5-page.home5-page .app.hide-rail .side { grid-column: 2; }
}
@media (max-width: 850px) {
  .home5-page.home5-page .app,
  .home5-page.home5-page .app.hide-side { grid-template-columns: 145px minmax(0, 1fr); }
  .home5-page.home5-page .app.hide-rail,
  .home5-page.home5-page .app.hide-rail.hide-side,
  .home5-page.home5-page .app.terminal-focus { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .home5-page.home5-page .app,
  .home5-page.home5-page .app.hide-rail,
  .home5-page.home5-page .app.hide-side,
  .home5-page.home5-page .app.hide-rail.hide-side,
  .home5-page.home5-page .app.terminal-focus { grid-template-columns: minmax(0, 1fr); }
}
.home5-page.home5-page .appbar {
  height: 36px;
  padding: 0 6px 0 10px;
  gap: 8px;
  background: #15191f;                 
  border-bottom-color: #252a31;        
}
.home5-page.home5-page .traffic { gap: 8px; margin-right: 4px; }
.home5-page.home5-page .traffic i { width: 12px; height: 12px; }
.home5-page.home5-page .app-tabs { gap: 4px; align-items: center; margin-left: 8px; }
.home5-page.home5-page .app-tab {
  align-self: center;
  height: 27px;
  min-width: 150px;
  max-width: 220px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #9e9e9e;
  background: transparent;
}
.home5-page.home5-page .app-tab.active {
  background: #2e2e2e;                 
  border-color: rgba(249, 250, 251, .35);
  color: #dbdbdb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.home5-page.home5-page .app-tab:not(.active):hover { background: rgba(46, 46, 46, .4); color: #dbdbdb; }
.home5-page.home5-page .app-tab .ui-icon { width: 13px; height: 13px; }
.home5-page.home5-page .app-tab span {
  font-size: 10px;
  color: rgba(158, 158, 158, .6);      
  font-variant-numeric: tabular-nums;
}
.home5-page.home5-page .tool {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9e9e9e;
}
.home5-page.home5-page .tool:hover { background: #2e2e2e; color: #dbdbdb; border-color: transparent; }
.home5-page.home5-page .tool .ui-icon { width: 16px; height: 16px; }
.home5-page.home5-page .meter-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 6px;
  border-radius: 6px;
  font: 500 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #f14b4b;                      
}
.home5-page.home5-page .meter-chip:hover { background: #2e2e2e; }
.home5-page.home5-page .rail {
  padding: 46px 0 0;
  background: #15191f;                 
  border-right-color: #252a31;
}
.home5-page.home5-page .rail-brand {
  margin: 0 10px 10px;
  padding: 2px 0;
  font-size: 13px;
  line-height: 1.5;                    
}
.home5-page.home5-page .rail h4 {
  margin: 0;
  padding: 7px 12px;
  background: #16181c;                 
  border-top: 1px solid #252a31;
  border-bottom: 1px solid #252a31;
  font: 600 11px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #b4b6b9;                      
}
.home5-page.home5-page .rail button {
  width: calc(100% - 16px);
  margin-inline: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #9e9e9e;
}
.home5-page.home5-page .rail > button:first-of-type { margin-top: 8px; }
.home5-page.home5-page .rail h4 + button { margin-top: 8px; }
.home5-page.home5-page .rail button:hover { background: rgba(46, 46, 46, .5); color: #dbdbdb; }
.home5-page.home5-page .rail button.selected { background: #2e2e2e; color: #cccccc; }
.home5-page.home5-page .rail button .mono {
  margin-left: auto;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #9e9e9e;
}
.home5-page.home5-page .dot { width: 8px; height: 8px; background: #f6ae31; }
.home5-page.home5-page .dot.green { background: #23d18b; }
.home5-page.home5-page .rail-bottom {
  margin-top: 24px;
  padding: 8px 0;
  border-top: 1px solid #252a31;
}
.home5-page.home5-page .workspace {
  padding: 44px 8px 8px;
  background: #0e1115;                 
}
.home5-page.home5-page .workspace-toolbar { gap: 6px; margin-bottom: 8px; }
.home5-page.home5-page .crumb {
  padding: 5px 10px;
  border-color: #2b3040;
  border-radius: 6px;
  background: #10121a;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94a3b8;
}
.home5-page.home5-page .pane-grid { gap: 3.5px; }
.home5-page.home5-page .pane {
  position: relative;
  border-radius: 6px;
  border-color: rgba(255, 255, 255, .2);
  background: #15191f;
}
.home5-page.home5-page .pane.focused {
  border-color: #f9fafb;               
  box-shadow: none;
}
.home5-page.home5-page .pane:not(.focused)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 6px;
  background: rgba(128, 128, 128, .4);
  pointer-events: none;
}
.home5-page.home5-page .pane-header {
  height: 24px;
  padding: 0 4px;
  gap: 2px;
  line-height: 1;
  border-bottom-color: #252a31;
  color: #9e9e9e;
  background: #15191f;
}
.home5-page.home5-page .pane.focused .pane-header {
  background: #1b1d24;                 
  border-bottom-color: rgba(249, 250, 251, .6);
  color: #fcfdfe;
}
.home5-page.home5-page .pane-header strong {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font: 400 12px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #dbdbdb;                      
}
.home5-page.home5-page .pane.focused .pane-header strong { font-weight: 500; }
.home5-page.home5-page .pane-header span:last-child { display: flex; align-items: center; gap: 2px; letter-spacing: 0; }
.home5-page.home5-page .pane-header span:last-child button {
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 6px;
  font-size: 11px;
  line-height: 1;
  color: #9e9e9e;
}
.home5-page.home5-page .pane-header span:last-child button:hover { background: #2e2e2e; color: #dbdbdb; }
.home5-page.home5-page .agent-icon { width: 14px; height: 14px; border-radius: 3px; }
.home5-page.home5-page .pane-body {
  padding: 6px 8px;
  font: 12px/1.15 Monaco, Menlo, ui-monospace, SFMono-Regular, monospace;
  color: #dcdcdc;
}
.home5-page.home5-page .pane-body .cmd { color: #dcdcdc; }
.home5-page.home5-page .pane-body .ok { color: #58e790; }     
.home5-page.home5-page .pane-body .warn { color: #ece100; }   
.home5-page.home5-page .pane-body .prompt { color: #dcdcdc; }
.home5-page.home5-page .pane-body br { display: none; }       
.home5-page.home5-page .pane-body .caret { width: 7px; height: 13px; background: #ffffff; vertical-align: -2px; }
.home5-page.home5-page .app.sftp-mode .pane-grid > .pane:nth-child(n + 4) { display: none; }
.home5-page.home5-page .side {
  background: #15191f;                 
  border-left-color: #252a31;
}
.home5-page.home5-page .right-tabs {
  height: 35px;
  background: #16181d;
  border-bottom-color: #252a31;
}
.home5-page.home5-page .right-tabs button {
  color: #9e9e9e;
  font-size: 12px;
  background: transparent;
  border-bottom-width: 2px;
  border-bottom-color: transparent;
}
.home5-page.home5-page .right-tabs button:hover { color: #dbdbdb; }
.home5-page.home5-page .right-tabs button.active { background: #15191f; color: #dbdbdb; }
.home5-page.home5-page .right-tabs button[data-right-mode="warroom"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  padding: 0 10px;
  font-size: 0;      
}
.home5-page.home5-page .right-tabs button[data-right-mode]:not([data-right-mode="warroom"]) { flex: 0 0 38px; }
.home5-page.home5-page .right-tabs button[data-right-mode="warroom"]::after {
  content: "Control Room";
  font-size: 12px;
  white-space: nowrap;
}
.home5-page.home5-page .right-tabs button[data-right-mode="warroom"].active  { border-bottom-color: #f97316; }
.home5-page.home5-page .right-tabs button[data-right-mode="explorer"].active { border-bottom-color: #4ec994; }
.home5-page.home5-page .right-tabs button[data-right-mode="history"].active  { border-bottom-color: #a78bfa; }
.home5-page.home5-page .right-tabs button[data-right-mode="git"].active      { border-bottom-color: #4ec994; }
.home5-page.home5-page .right-tabs button[data-right-mode="browser"].active  { border-bottom-color: #0ea5e9; }
.home5-page.home5-page .right-tabs #close-side { flex: 0 0 28px; font-size: 14px; color: #9e9e9e; }
.home5-page.home5-page .right-tabs::after { content: ""; flex: 1 1 auto; }
.home5-page.home5-page .side-head {
  height: 28px;
  padding: 0 8px;
  font: 500 11px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #dbdbdb;
  border-bottom-color: #252a31;
}
.home5-page.home5-page .side-content { padding: 8px; font-size: 12px; }
.home5-page.home5-page .provider { padding: 6px 4px 8px; border-bottom-color: #252a31; }
.home5-page.home5-page .provider-top { gap: 8px; font-size: 11px; }
.home5-page.home5-page .provider-top strong { font-size: 11px; font-weight: 500; color: #dbdbdb; }
.home5-page.home5-page .provider-top small { font-size: 11px; color: #9e9e9e; white-space: nowrap; font-variant-numeric: tabular-nums; }
.home5-page.home5-page .side-list button { padding: 5px 6px; border-radius: 6px; font-size: 12px; color: #9e9e9e; }
.home5-page.home5-page .side-list button:hover { background: #2e2e2e; color: #dbdbdb; }
.home5-page.home5-page .barline {
  grid-template-columns: 26px 1fr 30px;
  font: 10px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  color: #9e9e9e;
}
.home5-page.home5-page .track { height: 4px; border-radius: 999px; background: rgba(23, 23, 23, .5); }
.home5-page.home5-page .fill { background: rgba(249, 250, 251, .7); }
.home5-page.home5-page .fill.amber { background: #f6ae31; }
.home5-page.home5-page .fill.red { background: #f14b4b; }
.home5-page.home5-page .room-tabs,
.home5-page.home5-page .room-subtabs { gap: 4px; flex-wrap: nowrap; overflow: hidden; border-bottom-color: #252a31; }
.home5-page.home5-page .room-tabs button,
.home5-page.home5-page .room-subtabs button {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;                 
  color: #9e9e9e;
  background: transparent;
}
.home5-page.home5-page .room-subtabs button { font-size: 12px; }
.home5-page.home5-page .room-tabs button.active,
.home5-page.home5-page .room-subtabs button.active,
.home5-page.home5-page .room-tabs button:first-child { background: #171717; color: #dbdbdb; }
.home5-page.home5-page .room-subtabs button.report { font-size: 10px; font-weight: 500; color: #9e9e9e; }
.home5-page.home5-page .room-subtabs button.report:hover { background: #171717; color: #dbdbdb; }
.home5-page.home5-page .message { padding: 4px 4px 6px; border-bottom: 0; font-size: 12px; line-height: 1.5; }
.home5-page.home5-page .message:hover { background: rgba(23, 23, 23, .3); border-radius: 4px; }
.home5-page.home5-page .message strong { font-size: 12px; font-weight: 600; }
.home5-page.home5-page .message:nth-child(1) strong { color: #5865f2; }
.home5-page.home5-page .message:nth-child(2) strong { color: #57f287; }
.home5-page.home5-page .message .mono {
  margin-left: 6px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 10px;
  color: #9e9e9e;
}
.home5-page.home5-page .message p { margin-left: 32px; color: #dbdbdb; }
.home5-page.home5-page .composer {
  margin-top: 8px;
  padding: 6px 4px;
  border-color: #252a31;
  border-radius: 6px;
  background: #15191f;
  font-size: 11px;
  color: #9e9e9e;
}
.home5-page.home5-page .composer span:nth-child(2) { color: #00b0f4; }   
.home5-page.home5-page .composer span:nth-child(3) { color: #f97316; }   
.home5-page.home5-page .composer button { color: #00b0f4; }
.home5-page.home5-page .sftp-browser { background: #141721; border-color: #2b3040; border-radius: 8px; }
.home5-page.home5-page .sftp-title {
  padding: 7px 12px;
  background: #191d2b;
  border-bottom-color: #2b3040;
  font: 700 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #ffffff;
}
.home5-page.home5-page .sftp-title .ui-icon { color: #38bdf8; }
.home5-page.home5-page .sftp-status {   
  padding: 1px 6px;
  border: 1px solid rgba(16, 185, 129, .3);
  border-radius: 4px;
  background: rgba(16, 185, 129, .2);
  font: 9px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6ee7b7;
}
.home5-page.home5-page .sftp-actions,
.home5-page.home5-page .sftp-more { padding: 6px 8px; background: #171a26; border-color: #2b3040; }
.home5-page.home5-page .sftp-actions button,
.home5-page.home5-page .sftp-more button {
  padding: 4px 8px;
  border-color: #2b3040;
  border-radius: 6px;
  background: #222736;
  font: 11px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #94a3b8;
}
.home5-page.home5-page .sftp-actions button:hover,
.home5-page.home5-page .sftp-more button:hover { background: #2e354a; border-color: #2b3040; color: #e2e8f0; }
.home5-page.home5-page .sftp-actions button:nth-child(3) { background: #0369a1; border-color: #0369a1; color: #ffffff; }
.home5-page.home5-page .sftp-actions button:nth-child(3):hover { background: #0ea5e9; border-color: #0ea5e9; }
.home5-page.home5-page .sftp-path {
  margin: 8px;
  padding: 4px 8px;
  border-color: #2b3040;
  border-radius: 6px;
  background: #10121a;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94a3b8;
}
.home5-page.home5-page .sftp-search {
  margin: 0 8px 8px;
  padding: 4px 8px;
  border-color: #2b3040;
  border-radius: 6px;
  background: #10121a;
  color: #64748b;
}
.home5-page.home5-page .sftp-search input {
  font: 12px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #ffffff;
}
.home5-page.home5-page .sftp-filters { gap: 4px; padding: 0 8px 8px; }
.home5-page.home5-page .sftp-filters button {
  padding: 2px 10px;
  border-color: #2b3040;
  border-radius: 999px;
  background: #10121a;
  font: 500 11px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #94a3b8;
}
.home5-page.home5-page .sftp-filters button.active { background: #0369a1; border-color: #0369a1; color: #ffffff; font-weight: 600; }
.home5-page.home5-page .sftp-columns {
  padding: 5px 10px;
  background: #10121a;
  border-color: #2b3040;
  font: 600 10px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: #cbd5e1;
}
.home5-page.home5-page .sftp-list { padding: 6px; }
.home5-page.home5-page .sftp-row {
  padding: 5px 10px;
  border-radius: 8px;
  font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #e2e8f0;
}
.home5-page.home5-page .sftp-row:hover { background: #222736; color: #ffffff; }
.home5-page.home5-page .sftp-row.selected { background: rgba(14, 165, 233, .15); border-left-color: #38bdf8; color: #ffffff; }
.home5-page.home5-page .sftp-row span:first-child { font-size: 12.5px; }
.home5-page.home5-page .sftp-row span:first-child b { color: #fbbf24; }   
.home5-page.home5-page .sftp-row span:nth-child(2),
.home5-page.home5-page .sftp-row span:nth-child(3) { font-size: 10.5px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.home5-page.home5-page .sftp-row span:nth-child(4) { font-size: 11px; color: #cbd5e1; }
.home5-page.home5-page .sftp-row span:nth-child(5) {  
  padding: 0 4px;
  border: 1px solid #2b3040;
  border-radius: 4px;
  background: #1e2333;
  font: 10px/16px ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94a3b8;
}
.home5-page.home5-page .sftp-row span:nth-child(6) { 
  font: 10.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fbbf24;
}
.home5-page.home5-page .sftp-footer {
  padding: 5px 12px;
  background: #10121a;
  border-color: #2b3040;
  font: 11px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #94a3b8;
}
.home5-page.home5-page .sftp-footer b { font-weight: 500; color: #94a3b8; }
.home5-page.home5-page .sftp-footer span:last-child {
  font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #64748b;
}
.home5-page.home5-page .editor-top { background: #191d2b; border-bottom-color: #2b3040; }
.home5-page.home5-page .editor-modal { border-color: #2b3040; background: #141721; }
.home5-page.home5-page .editor-body { background: #10121a; }
.home5-page.home5-page .editor-controls button { border-color: #2b3040; background: #222736; border-radius: 6px; color: #94a3b8; }
.home5-page.home5-page .editor-controls .save-button { background: #0369a1; border-color: #0369a1; color: #ffffff; }
.home5-page.home5-page .editor-badge { border-color: rgba(56, 189, 248, .35); color: #38bdf8; }
@media (max-width: 850px) {
  .home5-page.home5-page .room-subtabs { overflow-x: auto; scrollbar-width: none; }
  .home5-page.home5-page .room-subtabs::-webkit-scrollbar { display: none; }
  .home5-page.home5-page .room-subtabs button { padding: 2px 6px; }
  .home5-page.home5-page .room-subtabs button.report { padding: 2px 4px; }
}
@media (max-width: 560px) {
  .home5-page.home5-page .pane-body { padding: 6px; font-size: 12px; }
  .home5-page.home5-page .pane-header { height: 24px; }
}


.home5-page.home5-page .lc { display:inline-block; flex:none; width:1em; height:1em; vertical-align:-.125em; overflow:visible; }
.home5-page.home5-page .lc-3  { width:12px; height:12px; }
.home5-page.home5-page .lc-35 { width:14px; height:14px; }
.home5-page.home5-page .lc-4  { width:16px; height:16px; }
.home5-page.home5-page .lc-5  { width:20px; height:20px; }
.home5-page.home5-page .lc-amber { color:#fbbf24; }
.home5-page.home5-page .lc-sky   { color:#38bdf8; }
.home5-page.home5-page .lc-green { color:#4ec994; }
.home5-page.home5-page .lc-blue  { color:#00b0f4; }
.home5-page.home5-page .lc-muted { color:#9e9e9e; }
.home5-page.home5-page .lc-op    { opacity:.6; }
.home5-page.home5-page .lc-fill  { color:#fbbf24; fill:rgba(251,191,36,.2); }
.home5-page.home5-page .lc-brand {
  background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;
  mask:var(--m) center/contain no-repeat;
}
.home5-page.home5-page .tool,
.home5-page.home5-page .pane-header span:last-child button,
.home5-page.home5-page .right-tabs button[data-right-mode],
.home5-page.home5-page #close-side,
.home5-page.home5-page #close-editor { display:inline-flex; align-items:center; justify-content:center; }
.home5-page.home5-page .pane-header span:last-child button .lc { vertical-align:0; }
.home5-page.home5-page .demo-nav button,
.home5-page.home5-page .room-subtabs button.report,
.home5-page.home5-page .sftp-actions button,
.home5-page.home5-page .sftp-more button,
.home5-page.home5-page .editor-controls button,
.home5-page.home5-page .composer > span { display:inline-flex; align-items:center; gap:5px; }
.home5-page.home5-page .composer > span { gap:4px; }
.home5-page.home5-page .demo-nav button { gap:6px; }
.home5-page.home5-page .room-subtabs > .lc { margin-right:4px; align-self:center; }
.home5-page.home5-page .meter-chip { gap:4px; }
.home5-page.home5-page .crumb { display:flex; align-items:center; }
.home5-page.home5-page .sftp-search { display:flex; align-items:center; }
.home5-page.home5-page .sftp-search > span { display:inline-flex; align-items:center; margin-right:6px; }
.home5-page.home5-page .sftp-title .lc { margin-right:2px; }
.home5-page.home5-page .side-list button .lc,
.home5-page.home5-page .side-list button .agent-icon { flex:none; }
.home5-page.home5-page .provider-top > .lc { flex:none; }
.home5-page.home5-page .provider-top > .lc-brand { width:14px; height:14px; }
.home5-page.home5-page .right-tabs button[data-right-mode="warroom"] { padding:0 8px; gap:5px; }
.home5-page.home5-page .right-tabs button[data-right-mode]:not([data-right-mode="warroom"]) { flex:0 0 34px; }
.home5-page.home5-page .right-tabs #close-side { flex:0 0 26px; }
.home5-page.home5-page .room-subtabs { gap:3px; }
.home5-page.home5-page .room-subtabs button { padding:2px 4px; }
.home5-page.home5-page .room-subtabs button.report { padding:2px 4px; gap:4px; }
.home5-page.home5-page .room-subtabs > .lc { margin-right:0; }
.home5-page.home5-page .editor-controls button .lc { width:12px; height:12px; }
.home5-page.home5-page .editor-controls #close-editor .lc { width:16px; height:16px; }
@media (max-width:850px) {
  .home5-page.home5-page .right-tabs button[data-right-mode]:not([data-right-mode="warroom"]) { flex:0 0 28px; }
  .home5-page.home5-page .right-tabs #close-side { flex:0 0 24px; }
  .home5-page.home5-page .room-subtabs > .lc { display:none; }
  .home5-page.home5-page .room-subtabs button { font-size:11px; }
}
@media (max-width:560px) {
  .home5-page.home5-page .demo-nav button { gap:4px; }
  .home5-page.home5-page .demo-nav .lc { width:12px; height:12px; }
}


.home5-page.home5-page .nav { display:flex; align-items:center; gap:18px; width:min(1080px,calc(100% - 28px)); margin:16px auto 0; padding:8px 8px 8px 20px; border:1px solid rgba(132,151,172,.34); border-radius:999px; background:rgba(18,25,34,.9); box-shadow:0 18px 54px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06); }
.home5-page.home5-page .nav.scrolled { width:min(1080px,calc(100% - 28px)); background:rgba(18,25,34,.97); border-color:rgba(143,157,174,.4); }
.home5-page.home5-page .nav .brand { flex:none; margin:0; font-size:16px; gap:10px; }
.home5-page.home5-page .h5-mark { display:block; flex:none; }
.home5-page.home5-page .nav .navlinks { display:flex; flex:1 1 auto; justify-content:center; gap:clamp(16px,2.2vw,30px); color:#b7c1cf; font-size:14px; font-weight:500; }
.home5-page.home5-page .nav .navlinks a { white-space:nowrap; }
.home5-page.home5-page .nav .nav-toggle { display:none; }
.home5-page.home5-page .nav > .btn { flex:none; min-width:0; min-height:42px; padding:0 18px; gap:9px; font-size:14px; white-space:nowrap; line-height:1; }
.home5-page.home5-page .nav > .btn .icon-swap,
.home5-page.home5-page .actions .btn.primary .icon-swap,
.home5-page.home5-page .plan .btn .icon-swap,
.home5-page.home5-page .mm-download .ui-icon { width:18px; height:18px; flex:none; }
.home5-page.home5-page .nav > .btn .icon-swap .ui-icon,
.home5-page.home5-page .actions .btn.primary .icon-swap .ui-icon,
.home5-page.home5-page .plan .btn .icon-swap .ui-icon { width:18px; height:18px; flex:none; }
.home5-page.home5-page .mobile-menu { display:none; }
.home5-page.home5-page .mobile-menu a.mm-download { display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; margin-bottom:6px; border-radius:12px !important; background:#f4f5f6; color:#11161c !important; font-weight:700; }
.home5-page.home5-page .mobile-menu a.mm-download:hover, .home5-page.home5-page .mobile-menu a.mm-download:focus-visible { background:#fff !important; }
@media (max-width:940px) {
  .home5-page.home5-page .nav, .home5-page.home5-page .nav.scrolled { width:calc(100% - 22px); margin-top:10px; gap:10px; padding:7px 8px 7px 7px; }
  .home5-page.home5-page .nav .nav-toggle { display:inline-flex; order:0; width:42px; height:42px; border-radius:999px; border:1px solid rgba(143,157,174,.3); background:rgba(255,255,255,.035); }
  .home5-page.home5-page .nav .nav-toggle .ui-icon { width:20px; height:20px; }
  .home5-page.home5-page .nav .brand { order:1; margin-right:auto; font-size:16px; }
  .home5-page.home5-page .nav .navlinks { display:none; }
  .home5-page.home5-page .nav .h5-lang { order:2; }
  .home5-page.home5-page .nav > .btn { display:none; }
  .home5-page.home5-page .mobile-menu { position:fixed; z-index:50; top:70px; left:11px; right:11px; display:flex; flex-direction:column; gap:4px; max-width:420px; padding:10px; border:1px solid rgba(240,184,92,.42); border-radius:20px; background:rgba(15,21,28,.98); box-shadow:0 24px 60px rgba(0,0,0,.55); opacity:0; pointer-events:none; visibility:hidden; transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease,visibility 0s .2s; }
  .home5-page.home5-page .mobile-menu.open { opacity:1; pointer-events:auto; visibility:visible; transform:none; transition:opacity .2s ease,transform .2s ease; }
  .home5-page.home5-page .mobile-menu a { display:block; padding:13px 14px; border-radius:10px; color:#b7c1cf; font-size:15px; text-decoration:none; }
  .home5-page.home5-page .mobile-menu a:hover, .home5-page.home5-page .mobile-menu a:focus-visible { color:#fff; background:#202730; outline:none; }
}
@media (max-width:360px) { .home5-page.home5-page .nav .brand { font-size:15px; gap:7px; } }

/* Footer: the prototype's h2 headings inherit the page's 48px h2 size. */
.home5-page.home5-page .site-footer { font-size:14px; }
.home5-page.home5-page .site-footer .footer-heading { max-width:none; margin:0 0 14px; color:#dfe5ec; font:600 12px/1.2 var(--font-geist-mono, ui-monospace, monospace); letter-spacing:.14em; text-transform:uppercase; }
.home5-page.home5-page .footer-group { gap:11px; }
.home5-page.home5-page .footer-bottom { font-size:13px; }
/* Demo tabs: an icon and its label sit on one line in every tab. */
.home5-page.home5-page .demo-nav button { display:inline-flex; align-items:center; justify-content:center; gap:7px; white-space:nowrap; }
.home5-page.home5-page .demo-nav button svg { display:block; width:15px; height:15px; flex:none; margin:0; vertical-align:baseline; }


.home5-page.home5-page .app .statusbar { grid-column: 2 / -1; }
.home5-page.home5-page .app.hide-rail .statusbar,
.home5-page.home5-page .app.hide-rail.hide-side .statusbar,
.home5-page.home5-page .app.terminal-focus .statusbar { grid-column: 1 / -1; }
@media (max-width: 560px) {
  
  .home5-page.home5-page .app .statusbar { grid-column: 1 / -1; }
}

.home5-page.home5-page .app .statusbar { gap: 14px; }
.home5-page.home5-page .app .statusbar > span { white-space: nowrap; }

@media (max-width: 850px) {
  .home5-page.home5-page .app .side { grid-column: 1 / -1; }
}

@media (max-width: 850px) {
  .home5-page.home5-page .app:not(.hide-side) .side { transform: translateX(0); }
}

.home5-page.home5-page .demo-token-icon { display: inline-block; }

@media (min-width: 851px) {
  .home5-page.home5-page .app.sftp-mode .workspace {
    grid-template-columns: minmax(0, min(430px, 100% - 210px)) minmax(0, 1fr);
  }
}

.home5-page.home5-page .pane-header { min-width: 0; }
.home5-page.home5-page .pane-header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 850px) {
  .home5-page.home5-page .sftp-columns,
  .home5-page.home5-page .sftp-row {
    grid-template-columns: 2fr .7fr 1.1fr 1fr;
    min-width: 0;
  }
  .home5-page.home5-page .sftp-columns > span:nth-child(n + 5),
  .home5-page.home5-page .sftp-row > span:nth-child(n + 5) { display: none; }
  
  .home5-page.home5-page .sftp-footer { min-width: 0; flex-wrap: wrap; }
}

@media (max-width: 850px) {
  .home5-page.home5-page .right-tabs { min-width: 0; }
  .home5-page.home5-page .right-tabs button[data-right-mode]:not([data-right-mode="warroom"]) { flex: 0 0 32px; }
  .home5-page.home5-page .right-tabs #close-side { flex: 0 0 24px; }
  .home5-page.home5-page .right-tabs button[data-right-mode="warroom"] {
    flex: 0 1 auto; min-width: 0; padding: 0 6px; overflow: hidden;
  }
}


@media (max-width:640px) {
  .home5-page.home5-page .guide-section:not(:has(> .guide-inner)) { padding-inline:16px; }
  .home5-page.home5-page .guide-section > h2 { margin-bottom:14px; }
  .home5-page.home5-page .home5-works-with { padding-inline:16px; }
  .home5-page.home5-page .home5-feature-heading { padding-inline:5px; }
  .home5-page.home5-page header#product h1 { font-size:clamp(30px,10vw,40px); line-height:1.08; text-wrap:balance; }
  .home5-page.home5-page .site-footer .footer-group a,
  .home5-page.home5-page .footer-bottom nav a { display:flex; align-items:center; min-height:40px; font-size:14px; }
  .home5-page.home5-page .site-footer .footer-group { gap:0; }
  .home5-page.home5-page .site-footer .footer-heading { margin-bottom:6px; }
  .home5-page.home5-page section.pricing { padding-inline:10px; }
  .home5-page.home5-page .plan ul { margin-bottom:20px; }
  .home5-page.home5-page .plan > .btn { width:100%; justify-content:center; min-height:48px; }
  .home5-page.home5-page .plan .max-purchase { display:flex; align-items:center; justify-content:center; min-height:44px; font-size:14px; margin-top:8px; }
  .home5-page.home5-page .plan .purchase-note { font-size:13px; }
}
/* The app window on a phone: real-size text, panels stacked under the terminal panes,
   instead of a 650px window shrunk to 5px text. */
@media (max-width:560px) {
  .home5-page.home5-page .macbook-stage.macbook-stage { min-height:0; padding:12px 11px 0; overflow:hidden; }
  .home5-page.home5-page .macbook-stage.macbook-stage.macbook-stage .macbook-shell { width:100%; min-width:0; max-width:100%; margin:0; transform:none !important; filter:none; }
  .home5-page.home5-page .macbook-lid { padding:6px; border-radius:14px; }
  .home5-page.home5-page .macbook-lid::after { display:none; }
  .home5-page.home5-page .app { min-height:0; border-radius:10px; grid-template-columns:minmax(0,1fr); }
  .home5-page.home5-page .app .side { position:static; display:block; grid-column:1; width:auto; transform:none; box-shadow:none; border-top:1px solid #2a323c; }
  .home5-page.home5-page .app.sftp-mode .workspace { display:block; overflow:visible; }
  .home5-page.home5-page .app.sftp-mode .sftp-browser { display:block; margin-bottom:8px; }
  .home5-page.home5-page .app.sftp-mode .pane-grid { height:auto; grid-template-rows:none; gap:8px; }
  .home5-page.home5-page .app.sftp-mode .pane-grid .pane { min-height:150px; }
  .home5-page.home5-page .app.sftp-mode .pane-grid .pane:nth-child(n+2) { display:none; }
}


.h5-lang { position:relative; flex:none; }
.h5-lang-btn { display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 10px 0 9px; border:1px solid rgba(143,157,174,.3); border-radius:999px; background:rgba(255,255,255,.035); color:#dfe5ec; font:600 13px/1 var(--font-geist-sans, system-ui, sans-serif); letter-spacing:.02em; cursor:pointer; transition:background .18s ease,border-color .18s ease; }
.h5-lang-btn:hover, .h5-lang-btn[aria-expanded="true"] { background:rgba(255,255,255,.075); border-color:rgba(143,157,174,.5); }
.h5-lang-btn:focus-visible, .h5-lang-item:focus-visible { outline:2px solid #e37855; outline-offset:2px; }
.h5-ic { display:block; width:17px; height:17px; flex:none; }
.h5-caret { width:14px; height:14px; opacity:.7; transition:transform .18s ease; }
.h5-lang-btn[aria-expanded="true"] .h5-caret { transform:rotate(180deg); }
.h5-lang-menu { position:absolute; z-index:60; top:calc(100% + 10px); right:0; min-width:178px; padding:6px; border:1px solid rgba(143,157,174,.32); border-radius:16px; background:rgba(16,21,28,.98); box-shadow:0 22px 60px rgba(0,0,0,.55); }
.h5-lang-menu[hidden] { display:none; }
.h5-lang-item { display:flex; align-items:center; gap:12px; min-height:42px; padding:0 12px; border-radius:11px; color:#c9d2de; font:500 14px/1 var(--font-geist-sans, system-ui, sans-serif); text-decoration:none; }
.h5-lang-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.h5-lang-item[aria-current] { color:#fff; }
.h5-lang-code { width:22px; color:#8b98aa; font:600 12px/1 var(--font-geist-mono, ui-monospace, monospace); letter-spacing:.04em; }
.h5-lang-name { flex:1; }
.h5-check { width:16px; height:16px; color:#e37855; }
@media (max-width:940px) { .h5-lang-btn { height:42px; } .h5-lang-cur { min-width:1.6em; } }