/* cc-pocket — marketing site · Calm Terminal Companion
   Tokens drive both themes via [data-theme]. */

/* ─────────────────────────── tokens ─────────────────────────── */
:root,
[data-theme="dark"] {
  --base:#0E0F11; --surface:#16181B; --raised:#1E2125; --hair:#2A2E33;
  --text:#ECEDEE; --sec:#9BA1A6; --muted:#6B7177;
  --accent:#D97757; --accent-pressed:#C4633F; --accent-bg:#2A1E18;
  --success:#4FB477; --warning:#E0A93B; --danger:#E5604D; --info:#5B9BD5;
  --nav-bg:rgba(14,15,17,0.72);
  --glow:rgba(217,119,87,0.13);
  --code-bg:#0B0C0D;
  --shadow:none;
  --thumb1:#3a2d24; --thumb2:#241d18;
}
[data-theme="light"] {
  --base:#FAF9F7; --surface:#FFFFFF; --raised:#F4F2EE; --hair:#E7E4DF;
  --text:#1A1A19; --sec:#5C5A55; --muted:#8A8780;
  --accent:#C75A38; --accent-pressed:#A8482B; --accent-bg:#F6E9E2;
  --success:#3F9A63; --warning:#C28A2A; --danger:#C94A38; --info:#3E7CB8;
  --nav-bg:rgba(250,249,247,0.78);
  --glow:rgba(199,90,56,0.10);
  --code-bg:#1C1E22;            /* code blocks stay dark even in light theme */
  --shadow:0 1px 2px rgba(20,18,15,0.04), 0 8px 24px -12px rgba(20,18,15,0.10);
  --thumb1:#caa68f; --thumb2:#e6d8cd;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
body{
  margin:0; background:var(--base); color:var(--text);
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  font-size:17px; line-height:1.6; letter-spacing:-0.01em;
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;}
a{color:inherit;text-decoration:none;}
:lang(zh){ letter-spacing:0; }

/* lang visibility */
[data-lang="en"] .i18n-zh{display:none;}
[data-lang="zh"] .i18n-en{display:none;}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.eyebrow{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 16px;
}
.section{padding:104px 0;}
.section-head{max-width:680px;margin:0 0 56px;}
.section-head h2{
  font-size:clamp(28px,4vw,38px); font-weight:600; letter-spacing:-0.02em;
  line-height:1.12; margin:0 0 14px;
}
.section-head p{font-size:17px;color:var(--sec);margin:0;}

/* ─────────────────────────── buttons ─────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  height:48px;padding:0 20px;border-radius:12px;
  font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:background .18s,border-color .18s,transform .08s,color .18s;
  white-space:nowrap;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--accent);color:#0E0F11;}
.btn-primary:hover{background:var(--accent-pressed);}
[data-theme="light"] .btn-primary{color:#fff;}
.btn-ghost{background:transparent;border-color:var(--hair);color:var(--text);}
.btn-ghost:hover{border-color:var(--muted);background:var(--surface);}
.btn .star-pill{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  padding:2px 7px;border-radius:999px;background:rgba(0,0,0,0.18);
}
[data-theme="light"] .btn-primary .star-pill{background:rgba(255,255,255,0.22);}
.btn-ghost .star-pill{background:var(--raised);}

/* ─────────────────────────── nav ─────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s,backdrop-filter .3s,height .3s;
  height:72px;display:flex;align-items:center;
}
.nav.scrolled{
  background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);height:60px;
}
.nav .wrap{display:flex;align-items:center;gap:24px;width:100%;}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.brand-mark{width:22px;height:22px;flex-shrink:0;border-radius:6px;
  background:url('favicon.svg') center/contain no-repeat;}
.brand .wordmark{font-size:16px;font-weight:600;letter-spacing:-0.02em;white-space:nowrap;}
.nav-links{display:flex;gap:28px;margin-left:8px;flex:1;}
.nav-links a{
  font-size:14px;color:var(--sec);position:relative;padding:4px 0;
  transition:color .18s;
}
.nav-links a:hover{color:var(--text);}
.nav-links a.active{color:var(--accent);}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--accent);border-radius:2px;
}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;}

/* toggles */
.seg{
  display:inline-flex;border:1px solid var(--hair);border-radius:999px;
  padding:3px;background:var(--surface);
}
.seg button{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:500;
  padding:4px 10px;border-radius:999px;transition:color .18s,background .18s;
  line-height:1;
}
.seg button.on{background:var(--accent-bg);color:var(--accent);}
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--hair);
  background:var(--surface);color:var(--sec);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:color .18s,border-color .18s;
}
.icon-btn:hover{color:var(--text);border-color:var(--muted);}
.hamburger{display:none;}

/* mobile menu */
.mobile-menu{
  display:none;position:fixed;top:60px;left:0;right:0;z-index:99;
  background:var(--nav-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);padding:8px 24px 20px;
}
.mobile-menu.open{display:block;}
.mobile-menu a{display:block;padding:13px 0;font-size:16px;color:var(--text);border-bottom:1px solid var(--hair);}
.mobile-menu a:last-child{border-bottom:0;}

/* ─────────────────────────── hero ─────────────────────────── */
.hero{position:relative;padding:150px 0 90px;overflow:hidden;}
.hero::before{
  content:"";position:absolute;left:50%;top:8%;width:1100px;height:1100px;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle, var(--glow) 0%, transparent 60%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
.hero h1{
  font-size:clamp(40px,6.2vw,68px);font-weight:600;line-height:1.04;
  letter-spacing:-0.035em;margin:0 0 24px;text-wrap:balance;
}
.hero .sub{font-size:clamp(17px,2vw,20px);color:var(--sec);margin:0 0 32px;max-width:540px;}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;}
.trustline{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);letter-spacing:0.02em;}
.trustline .dot{color:var(--hair);margin:0 6px;}

/* ─────────────────────────── phone frame ─────────────────────────── */
.phone{
  --pw:300px;
  width:var(--pw);flex-shrink:0;
  border-radius:38px;border:1px solid var(--hair);
  background:#0E0F11;padding:9px;position:relative;
  box-shadow:0 40px 90px -40px rgba(0,0,0,0.6);
}
[data-theme="light"] .phone{box-shadow:0 40px 90px -44px rgba(20,18,15,0.34);}
.phone .screen{
  border-radius:30px;overflow:hidden;background:#0E0F11;position:relative;
  height:calc(var(--pw) * 2.06);display:flex;flex-direction:column;
  border:1px solid #2A2E33;
}
.phone .notch{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34%;height:22px;background:#0E0F11;border-radius:0 0 12px 12px;z-index:5;
}
/* app screens always use the APP's dark tokens regardless of site theme */
.app{
  --abase:#0E0F11;--asurface:#16181B;--araised:#1E2125;--ahair:#2A2E33;
  --atext:#ECEDEE;--asec:#9BA1A6;--amuted:#6B7177;--aacc:#D97757;
  --asuccess:#4FB477;--awarn:#E0A93B;--adanger:#E5604D;
  background:var(--abase);color:var(--atext);flex:1;display:flex;flex-direction:column;
  font-size:12px;line-height:1.45;min-height:0;
}
.app .mono{font-family:'JetBrains Mono',monospace;}
.hero-visual{position:relative;display:flex;justify-content:center;}
/* floating permission card in hero */
.float-perm{
  position:absolute;bottom:34px;right:-26px;width:230px;z-index:10;
  background:#1E2125;border:1px solid #2A2E33;border-radius:16px;padding:14px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,0.7);
}
[data-theme="light"] .float-perm{box-shadow:0 24px 60px -28px rgba(20,18,15,0.4);}

/* ─────────────────────────── app screen pieces ─────────────────────────── */
.app-hd{padding:10px 12px 9px;border-bottom:1px solid var(--ahair);flex-shrink:0;}
.app-hd .row{display:flex;align-items:center;gap:7px;}
.app-hd .title{font-weight:600;color:var(--atext);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.app-hd .title + span[style]{flex-shrink:0;}
.app-hd .ctx{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--asec);margin-top:3px;}
.dot{width:6px;height:6px;border-radius:999px;flex-shrink:0;}
.app-body{flex:1;overflow:hidden;padding:11px;display:flex;flex-direction:column;gap:11px;}
.atext{color:var(--atext);font-size:12px;line-height:1.5;}
.amuted{color:var(--asec);}
.code-chip{font-family:'JetBrains Mono',monospace;font-size:11px;background:#16181B;border:1px solid #2A2E33;border-radius:4px;padding:0 4px;}
.tool-row{background:var(--asurface);border:1px solid var(--ahair);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:7px;}
.tool-row .nm{font-size:11px;font-weight:600;}
.tool-row .tg{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--asec);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tool-row .meta{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--amuted);}
.codeblock{background:#0B0C0D;border:1px solid var(--ahair);border-radius:10px;overflow:hidden;}
.codeblock .cb-hd{display:flex;align-items:center;justify-content:space-between;padding:6px 9px;border-bottom:1px solid var(--ahair);}
.codeblock .cb-lang{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--amuted);}
.codeblock pre{margin:0;padding:8px 10px;font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.6;color:var(--asec);overflow:hidden;}
.caret{display:inline-block;width:6px;height:12px;background:var(--aacc);border-radius:1px;vertical-align:text-bottom;animation:cbBlink 1.05s steps(1) infinite;}
@keyframes cbBlink{0%,49%{opacity:1}50%,100%{opacity:0}}
.spin{width:11px;height:11px;border:1.6px solid rgba(255,255,255,0.16);border-top-color:var(--aacc);border-radius:999px;animation:cbSpin .8s linear infinite;}
@keyframes cbSpin{to{transform:rotate(360deg)}}
.ring{transform:rotate(-90deg);}    /* countdown ring */
.user-rail{position:relative;background:rgba(217,119,87,0.06);border-radius:4px 10px 10px 4px;padding:8px 11px;}
.user-rail::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px;background:var(--aacc);opacity:.6;}

/* permission sheet bits */
.perm .shield{width:34px;height:34px;border-radius:10px;background:#2A1E18;border:1px solid rgba(217,119,87,0.3);display:flex;align-items:center;justify-content:center;}
.perm .cmd{background:#0B0C0D;border:1px solid #2A2E33;border-radius:8px;padding:8px 9px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--atext);}
.perm-btns{display:flex;gap:8px;}
.perm-btns button{flex:1;height:34px;border-radius:9px;font-size:11.5px;font-weight:600;border:1px solid transparent;cursor:default;}
.perm-deny{background:transparent;border-color:rgba(229,96,77,0.5)!important;color:#E5604D;}
.perm-allow{background:#D97757;color:#0E0F11;}

/* session rows */
.sess-new{display:flex;align-items:center;gap:10px;border:1px solid rgba(217,119,87,0.4);background:rgba(217,119,87,0.08);border-radius:12px;padding:10px 11px;}
.sess-new .pl{width:26px;height:26px;border-radius:8px;background:var(--aacc);color:#0E0F11;display:flex;align-items:center;justify-content:center;font-size:17px;}
.sess-card{background:var(--asurface);border:1px solid var(--ahair);border-radius:10px;padding:9px 11px;}
.sess-card .st{font-weight:600;font-size:12px;}
.sess-card .pv{color:var(--asec);font-size:11px;margin:2px 0 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sess-card .mt{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--amuted);}

/* directory rows */
.dir-bc{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--asec);}
.dir-row{display:flex;align-items:center;gap:9px;padding:8px 4px;border-bottom:1px solid var(--ahair);}
.dir-row .nm{font-family:'JetBrains Mono',monospace;font-size:11px;flex:1;}
.dir-pill{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--aacc);border:1px solid rgba(217,119,87,0.4);border-radius:999px;padding:2px 7px;}

/* composer */
.app-cmp{flex-shrink:0;border-top:1px solid var(--ahair);padding:9px 11px;display:flex;align-items:center;gap:8px;}
.app-cmp .field{flex:1;background:var(--asurface);border:1px solid var(--ahair);border-radius:10px;padding:8px 11px;font-size:11px;color:var(--amuted);}
.app-cmp .send{width:32px;height:32px;border-radius:999px;background:var(--aacc);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* ─────────────────────────── the moment ─────────────────────────── */
.moment{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:var(--surface);}
.moment .wrap{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;padding:64px 24px;}
.moment .lead{font-size:clamp(22px,3vw,30px);font-weight:500;line-height:1.3;letter-spacing:-0.02em;margin:0;}
.moment .lead .q{color:var(--sec);}
.moment .lead .a{color:var(--text);}
.moment .lead .a b{color:var(--accent);font-weight:600;}
.moment .mini{width:248px;background:var(--raised);border:1px solid var(--hair);border-radius:16px;padding:14px;flex-shrink:0;}

/* ─────────────────────────── features ─────────────────────────── */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:104px;}
.feature:last-child{margin-bottom:0;}
.feature.flip .feat-visual{order:2;}
.feature .feat-text .ft-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);margin-bottom:14px;}
.feature .feat-text h3{font-size:clamp(22px,2.6vw,27px);font-weight:600;letter-spacing:-0.02em;margin:0 0 12px;}
.feature .feat-text p{font-size:16px;color:var(--sec);margin:0 0 18px;max-width:420px;}
.feat-visual{display:flex;justify-content:center;}
.detail-chip{
  display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;
  font-size:12.5px;color:var(--sec);background:var(--surface);border:1px solid var(--hair);
  border-radius:8px;padding:7px 11px;
}
.detail-chip .dot{width:5px;height:5px;}

/* ─────────────────────────── architecture ─────────────────────────── */
.arch{background:var(--surface);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.arch-flow{display:flex;align-items:stretch;gap:0;margin-top:8px;}
.node{
  flex:1;background:var(--base);border:1px solid var(--hair);border-radius:14px;
  padding:20px 18px;text-align:center;min-width:0;
}
.node .ico{width:34px;height:34px;margin:0 auto 12px;color:var(--accent);}
.node .nlabel{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text);font-weight:500;}
.node .nsub{font-size:12.5px;color:var(--muted);margin-top:5px;}
.connector{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 6px;flex-shrink:0;min-width:96px;
}
.connector .line{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);position:relative;}
.connector .clabel{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--sec);margin-bottom:8px;white-space:nowrap;}
.connector .csub{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--muted);margin-top:8px;}
.arch-cap{margin-top:36px;font-size:15px;color:var(--sec);max-width:620px;}
.arch-cap .mono{color:var(--text);font-size:13.5px;}

/* ─────────────────────────── security ─────────────────────────── */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.sec-card{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:22px 20px;}
.sec-card .ico{width:26px;height:26px;color:var(--accent);margin-bottom:16px;}
.sec-card h4{font-size:16px;font-weight:600;margin:0 0 8px;letter-spacing:-0.01em;}
.sec-card p{font-size:13.5px;color:var(--sec);margin:0;line-height:1.5;}
.resource-card{display:block;transition:border-color .18s,transform .18s,background .18s;}
.resource-card:hover{border-color:color-mix(in srgb,var(--accent) 52%,var(--hair));background:var(--raised);transform:translateY(-2px);}
.resource-card .more{display:inline-block;margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--accent);}
.pullquote{
  margin-top:56px;padding-top:48px;border-top:1px solid var(--hair);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;
}
.pullquote blockquote{
  font-size:clamp(24px,3.4vw,34px);font-weight:500;letter-spacing:-0.02em;margin:0;line-height:1.25;
}
.pullquote .tm-link{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent);}
.pullquote .tm-link:hover{text-decoration:underline;}

/* ─────────────────────────── download ─────────────────────────── */
.dl-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:760px;}
.dl-card{
  background:var(--base);border:1px solid var(--hair);border-radius:18px;
  padding:28px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:border-color .18s,transform .18s;
}
.dl-card:hover{border-color:var(--accent);}
.dl-card-hd{display:flex;align-items:center;gap:12px;align-self:stretch;text-align:left;margin-bottom:20px;}
.dl-ico{
  width:46px;height:46px;flex-shrink:0;border-radius:12px;
  background:var(--accent-bg);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.dl-name{font-size:16px;font-weight:600;letter-spacing:-0.01em;}
.dl-sub{font-size:13px;color:var(--sec);margin-top:2px;}
.dl-qr{padding:12px;background:#fff;border-radius:14px;line-height:0;box-shadow:0 6px 24px -16px rgba(0,0,0,0.5);}
.dl-qr-box{width:148px;height:148px;}
.dl-qr-box img,.dl-qr-box canvas{display:block;width:148px;height:148px;}
.dl-qr-hint{font-size:12px;color:var(--muted);margin:12px 0 0;letter-spacing:0.04em;}
.dl-btn{margin-top:20px;width:100%;justify-content:center;}
.dl-beta{font-size:13px;color:var(--sec);margin:14px 0 0;}
.dl-beta a{color:var(--accent);}
.dl-beta a:hover{text-decoration:underline;}
/* device gating: computers show the QR, phones show the install button */
[data-device="mobile"] .dl-qr,
[data-device="mobile"] .dl-qr-hint{display:none;}
[data-device="desktop"] .dl-btn{display:none;}
/* before JS resolves the device, hide nothing jarring: default to QR view */
:root:not([data-device]) .dl-btn{display:none;}

/* ─────────────────────────── get started ─────────────────────────── */
.start-connect{margin-top:52px;max-width:760px;}
.start-connect .start-sub{
  display:flex;align-items:center;gap:16px;margin:0 0 26px;
  font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.start-connect .start-sub::after{content:"";flex:1 1 auto;height:1px;background:var(--hair);}
.steps{display:flex;flex-direction:column;gap:20px;max-width:760px;}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;}
.step .n{
  width:34px;height:34px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;
  font-size:14px;flex-shrink:0;margin-top:2px;
}
.step .s-body{min-width:0;}
.step h4{font-size:17px;font-weight:600;margin:0 0 10px;}
.step h4 .mono{font-size:14px;color:var(--sec);font-weight:400;}
.cmd{
  background:var(--code-bg);border:1px solid var(--hair);border-radius:12px;
  display:flex;align-items:center;gap:12px;padding:12px 14px;overflow-x:auto;
}
[data-theme="light"] .cmd{border-color:#2A2E33;}
.cmd code{font-family:'JetBrains Mono',monospace;font-size:14px;color:#ECEDEE;white-space:nowrap;}
.cmd .prompt{color:var(--accent);user-select:none;}
.cmd .copy{
  margin-left:auto;flex-shrink:0;width:32px;height:32px;border-radius:8px;
  border:1px solid #2A2E33;background:transparent;color:#9BA1A6;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:color .18s,border-color .18s;
}
.cmd .copy:hover{color:#ECEDEE;border-color:#6B7177;}
.cmd .copy.done{color:var(--success);border-color:var(--success);}
/* OS install tabs */
.os-tabs{display:flex;gap:6px;margin:0 0 12px;flex-wrap:wrap;}
.os-tab{
  font-family:'JetBrains Mono',monospace;font-size:13px;padding:6px 14px;border-radius:8px;
  border:1px solid var(--hair);background:transparent;color:var(--sec);cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;
}
.os-tab:hover{color:var(--text);border-color:var(--muted);}
.os-tab.on{background:var(--accent-bg);color:var(--accent);border-color:transparent;}
.os-panel{display:none;}
.os-panel.on{display:block;}
/* Install/Update toggle — lighter, segmented; sits between the OS tabs and the command */
.mode-tabs{display:inline-flex;gap:2px;margin:0 0 10px;padding:2px;border-radius:8px;background:var(--hair);}
.mode-tab{
  font-family:'JetBrains Mono',monospace;font-size:12px;padding:4px 12px;border-radius:6px;
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  transition:color .18s,background .18s;
}
.mode-tab:hover{color:var(--text);}
.mode-tab.on{background:var(--surface);color:var(--text);}
.mode-block{display:none;}
.mode-block.on{display:block;}
.os-note{font-size:13.5px;color:var(--muted);margin:9px 0 0;}
.os-note .mono{color:var(--sec);}
.os-note a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;}
.os-note a:hover{border-bottom-color:var(--accent);}
.step-foot{margin-top:30px;font-size:14px;color:var(--muted);}
.step-foot .mono{color:var(--sec);font-size:13px;}
.get-cta{margin-top:30px;}

/* ─────────────────────────── open-source band ─────────────────────────── */
.osband{border-top:1px solid var(--hair);}
.osband .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:72px 24px;}
.osband p{font-size:clamp(19px,2.4vw,24px);font-weight:500;letter-spacing:-0.02em;line-height:1.4;margin:0;max-width:680px;}
.osband .accent{color:var(--accent);}

/* ─────────────────────────── footer ─────────────────────────── */
.footer{border-top:1px solid var(--hair);background:var(--base);padding:64px 0 40px;}
.footer .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px;}
.footer .tagline{font-size:14px;color:var(--sec);margin:14px 0 0;max-width:240px;}
.footer .col h5{font-size:12px;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin:0 0 16px;font-weight:600;}
.footer .col a{display:block;font-size:14px;color:var(--sec);padding:6px 0;transition:color .18s;}
.footer .col a:hover{color:var(--text);}
.footer .bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:28px;border-top:1px solid var(--hair);}
.footer .copy-line{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);}

/* ─────────────────────────── reveal ─────────────────────────── */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1;transform:none;transition:none;} }

/* ─────────────────────────── responsive ─────────────────────────── */
@media (max-width:1023px){
  .hero .wrap{grid-template-columns:1fr;gap:48px;text-align:center;}
  .hero-btns,.hero .sub{margin-left:auto;margin-right:auto;}
  .hero .sub{max-width:560px;}
  .hero-visual{margin-top:8px;}
  /* Site 1.5 mobile pattern (mfeat): text first, phone below */
  .feature{grid-template-columns:1fr;gap:26px;}
  .feature .feat-visual{order:2!important;}
  .feature .feat-text{text-align:center;}
  .feature .feat-text p{margin-left:auto;margin-right:auto;}
  .sec-grid{grid-template-columns:1fr 1fr;}
  .footer .top{grid-template-columns:1fr 1fr;}
}
@media (max-width:767px){
  body{font-size:16px;}
  .section{padding:72px 0;}
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .nav-right .seg{display:none;}
  .nav-right .desktop-github{display:none;}
  .moment .wrap{grid-template-columns:1fr;text-align:center;gap:32px;}
  .moment .mini{margin:0 auto;}
  .arch-flow{flex-direction:column;}
  .connector{flex-direction:row;min-width:0;padding:14px 0;gap:10px;width:100%;}
  .connector .line{width:1px;height:32px;background:linear-gradient(180deg,transparent,var(--accent),transparent);}
  .connector .clabel,.connector .csub{margin:0;}
  .sec-grid{grid-template-columns:1fr;}
  .dl-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto;}
  .start-connect{margin-top:40px;}
  .start-connect .start-sub{font-size:11px;letter-spacing:0.04em;gap:12px;}
  .footer .top{grid-template-columns:1fr 1fr;gap:28px;}
  .osband .wrap{flex-direction:column;text-align:center;align-items:center;}
}
@media (max-width:420px){
  .footer .top{grid-template-columns:1fr;}
}

/* ═══════════════ v1.3 — Desktop + Fleet section & feature vignettes ═══════════════
   From the claude.design handoff (docs/design/claude-design-handoff/site-1.3-desktop-fleet).
   House rule unchanged: page chrome themes via site tokens; DEVICE/APP chrome (window
   mockup, fleet card, code panels) stays dark always — same precedent as .phone/.float-perm. */

.appdark{
  --abase:#0E0F11;--asurface:#16181B;--araised:#1E2125;--ahair:#2A2E33;
  --atext:#ECEDEE;--asec:#9BA1A6;--amuted:#6B7177;--aacc:#D97757;
  --asuccess:#4FB477;--awarn:#E0A93B;--adanger:#E5604D;--acode:#0B0C0D;
}
/* 4-class syntax highlight — legible on dark code surfaces in either theme */
.hl-k{color:#D97757;}
.hl-s{color:#4FB477;}
.hl-n{color:#E0A93B;}
.hl-c{color:#6B7177;font-style:normal;}

/* ── window-chrome (desktop app window) ── */
.win{
  width:100%;max-width:960px;border:1px solid var(--ahair);border-radius:14px;
  background:var(--abase);color:var(--atext);overflow:hidden;
  font-size:13px;line-height:1.5;
  box-shadow:0 40px 90px -44px rgba(0,0,0,0.62);
}
[data-theme="light"] .win{box-shadow:0 40px 90px -46px rgba(20,18,15,0.34);}
.win-bar{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:11px 16px;border-bottom:1px solid var(--ahair);background:var(--asurface);
}
.win-lights{position:absolute;left:16px;top:50%;transform:translateY(-50%);display:flex;gap:8px;}
.win-lights i{width:11px;height:11px;border-radius:999px;background:var(--amuted);opacity:.45;display:block;}
.win-titlewrap{text-align:center;line-height:1.25;min-width:0;}
.win-title{font-size:12.5px;font-weight:600;color:var(--atext);}
.win-meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--asec);}
.win-body{display:grid;grid-template-columns:240px 1fr;min-height:470px;}

.ds-side{
  background:var(--asurface);border-right:1px solid var(--ahair);
  padding:15px 12px;display:flex;flex-direction:column;gap:20px;overflow:hidden;
}
.ds-zlabel{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--amuted);margin:0 7px 8px;
}
.ds-group{display:flex;flex-direction:column;gap:2px;}
.ds-phead{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--asec);
  padding:0 9px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ds-row{
  display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:8px;
  position:relative;cursor:default;transition:background .15s;
}
.ds-row:hover{background:var(--araised);}
.ds-row .nm{font-size:12px;color:var(--atext);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ds-row .rmeta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--amuted);flex-shrink:0;}
.ds-row.sel{background:var(--araised);}
.ds-row.sel::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--aacc);}
.kbd{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--asec);
  border:1px solid var(--ahair);border-radius:5px;padding:1px 5px;background:var(--abase);flex-shrink:0;
}
.mtag{
  font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--asec);
  background:var(--abase);border:1px solid var(--ahair);border-radius:5px;padding:1px 5px;flex-shrink:0;
}
.pulse{position:relative;width:7px;height:7px;border-radius:999px;background:var(--aacc);flex-shrink:0;}
.pulse::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:1px solid var(--aacc);animation:pdot 1.9s ease-out infinite;}
@keyframes pdot{0%{transform:scale(.55);opacity:.65}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion: reduce){.pulse::after{animation:none;opacity:.4;}}

.ds-chat{display:flex;flex-direction:column;min-width:0;background:var(--abase);}
.ds-chat-hd{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--ahair);}
.ds-chat-hd .t{font-size:13px;font-weight:600;color:var(--atext);}
.ds-mode{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--asec);border:1px solid var(--ahair);border-radius:999px;padding:2px 9px;}
.ds-kebab{margin-left:auto;color:var(--amuted);display:flex;}
.ds-chat-body{padding:16px;display:flex;flex-direction:column;gap:14px;flex:1;min-width:0;}
.ds-chat-body .atext{font-size:13.5px;line-height:1.58;color:var(--atext);}
.ds-chat-body .atext.amuted{color:var(--asec);}
.ds-chat-body .tool-row{background:var(--asurface);border-color:var(--ahair);}
.ds-chat-body .codeblock pre{font-size:12px;line-height:1.7;padding:11px 13px;}
.ds-chat-body .codeblock .cb-lang{font-size:10.5px;}
.ds-cmp{border-top:1px solid var(--ahair);padding:12px 16px;display:flex;align-items:center;gap:11px;}
.ds-cmp .field{flex:1;background:var(--asurface);border:1px solid var(--ahair);border-radius:10px;padding:9px 12px;font-size:12.5px;color:var(--amuted);}
.ds-cmp .esc{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--amuted);display:inline-flex;align-items:center;gap:6px;flex-shrink:0;}
.ds-cmp .esc .k{border:1px solid var(--ahair);border-radius:5px;padding:1px 5px;color:var(--asec);}

/* ── fleet overview card ── */
.fleet{
  width:300px;background:var(--araised);border:1px solid var(--ahair);border-radius:14px;
  padding:13px;color:var(--atext);box-shadow:0 24px 60px -26px rgba(0,0,0,0.7);
}
[data-theme="light"] .fleet{box-shadow:0 24px 60px -30px rgba(20,18,15,0.4);}
.fleet-hd{display:flex;align-items:baseline;justify-content:space-between;padding:2px 4px 12px;}
.fleet-hd .ttl{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--atext);font-weight:500;}
.fleet-hd .sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--aacc);}
.mrow{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:9px;}
.mrow .os{width:17px;height:17px;color:var(--asec);flex-shrink:0;}
.mrow .nm{font-size:12px;color:var(--atext);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mrow .sdot{width:7px;height:7px;border-radius:999px;flex-shrink:0;}
.sdot.on{background:var(--asuccess);}
.sdot.off{background:var(--amuted);opacity:.7;}
.mrow.approve{border:1px solid rgba(224,169,59,0.38);background:rgba(224,169,59,0.05);}
.mrow.offline .nm{color:var(--asec);}
.mrow .off-tag{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--amuted);}
.badge{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:500;
  padding:3px 8px;border-radius:999px;
}
.badge svg{width:10px;height:10px;display:block;}
.badge.acc{background:rgba(217,119,87,0.13);border:1px solid rgba(217,119,87,0.4);color:var(--aacc);}
.badge.warn{background:rgba(224,169,59,0.13);border:1px solid rgba(224,169,59,0.4);color:var(--awarn);}

/* ── Screen-1 composition (Comp A: window left / fleet floats right) ── */
.s1-mock{position:relative;display:flex;align-items:flex-start;}
.s1-mock .win{flex:1;min-width:0;max-width:none;}
.s1-mock .fleet{flex-shrink:0;margin-left:-44px;margin-top:54px;position:relative;z-index:5;}
@media (max-width:900px){
  .s1-mock{display:block;}
  .s1-mock .fleet{position:static;margin:-30px auto 0;}
}

/* ── mini 3-up feature row + downloads (page-themed) ── */
.mini3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px;}
.mini3 .mi{display:flex;gap:12px;align-items:flex-start;}
.mini3 .mci{width:22px;height:22px;color:var(--accent);flex-shrink:0;margin-top:2px;}
.mini3 .mt{font-size:14.5px;font-weight:600;color:var(--text);letter-spacing:-0.01em;}
.mini3 .mt .mono{font-size:12.5px;color:var(--accent);}
.mini3 .md{font-size:13px;color:var(--sec);margin-top:3px;line-height:1.45;}
.dl-pair{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;}
.dl-pair .btn svg{width:16px;height:16px;}

/* ── features fgroup vignettes (v1.3) ── */
.fgroup .fg-intro{font-size:17px;color:var(--sec);max-width:640px;margin:0 0 60px;}
.fg-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:72px;}
.fg-block:last-child{margin-bottom:0;}
.fg-block.flip .fg-visual{order:2;}
.fg-block .ft-num{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent);margin-bottom:13px;}
.fg-block h3{font-size:clamp(21px,2.5vw,26px);font-weight:600;letter-spacing:-0.02em;margin:0 0 11px;}
.fg-block .fg-copy p{font-size:15.5px;color:var(--sec);margin:0;max-width:430px;line-height:1.55;}
.fg-block .fg-copy p .mono{color:var(--text);font-size:13.5px;background:var(--surface);border:1px solid var(--hair);border-radius:5px;padding:1px 5px;}
.fg-visual{display:flex;justify-content:center;}
.fg-frame{
  width:100%;max-width:440px;background:var(--surface);border:1px solid var(--hair);
  border-radius:16px;padding:16px;box-shadow:var(--shadow);
}
/* device-chrome frames stay dark in light theme too — same rule as .phone/.win/.fleet */
.fg-frame.appdark{background:var(--araised);border-color:var(--ahair);}
.cfile{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ahair);border-radius:10px 10px 0 0;background:var(--asurface);}
.cfile .fn{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--atext);flex:1;min-width:0;}
.cfile .chev{color:var(--amuted);display:flex;}
.diff-stat{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.01em;display:inline-flex;gap:7px;}
.diff-stat .add{color:var(--asuccess);}
.diff-stat .del{color:var(--adanger);}
.code-panel{border:1px solid var(--ahair);border-top:0;border-radius:0 0 10px 10px;overflow:hidden;background:var(--acode);}
.code-panel .cp-hd{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-bottom:1px solid var(--ahair);}
.code-panel .cp-lang{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--amuted);}
.code-panel pre{margin:0;padding:12px 14px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.75;color:var(--asec);overflow:hidden;}
.picker{width:100%;}
.picker .ph{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--amuted);padding:2px 6px 10px;}
.prow{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;font-size:13.5px;color:var(--atext);}
.prow:hover{background:var(--araised);}
.prow.on{background:rgba(217,119,87,0.10);}
.prow .pn{flex:1;font-weight:500;}
.prow .psub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--amuted);}
.prow .chk{color:var(--aacc);display:flex;}
.prow .rdot{width:15px;height:15px;border-radius:999px;border:1.5px solid var(--ahair);flex-shrink:0;}
.pcustom{display:flex;align-items:center;gap:9px;margin-top:8px;padding-top:12px;border-top:1px solid var(--ahair);}
.pcustom .clab{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--amuted);flex-shrink:0;}
.pcustom .field{flex:1;font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--atext);background:var(--acode);border:1px solid rgba(217,119,87,0.4);border-radius:9px;padding:9px 11px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcustom .go{width:34px;height:34px;border-radius:9px;background:var(--aacc);color:#0E0F11;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.forkdiag{display:flex;flex-direction:column;gap:0;width:100%;}
.forklane{display:flex;align-items:center;gap:11px;padding:16px 2px;}
.forklane + .forklane{border-top:1px solid var(--hair);}
.flabel{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);width:46px;flex-shrink:0;line-height:1.3;}
.dnode{border:1px solid var(--hair);border-radius:9px;padding:7px 10px;font-size:12px;color:var(--text);background:var(--base);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.dnode .mono{font-size:10px;color:var(--sec);}
.dnode.ghost{opacity:.4;border-style:dashed;}
.dnode.acc{border-color:rgba(217,119,87,0.55);}
.dnode .glyph{color:var(--accent);display:flex;}
.dstack{display:flex;flex-direction:column;gap:7px;}
.darr{color:var(--muted);flex-shrink:0;display:flex;}
.darr.acc{color:var(--accent);}
.forkcap{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--sec);margin-top:14px;line-height:1.5;}
.forkcap .accent{color:var(--accent);}
@media (max-width:900px){
  .fg-block{grid-template-columns:1fr;gap:28px;}
  .fg-block .fg-visual{order:2;}
  .fg-block .fg-copy{text-align:center;}
  .fg-block .fg-copy p{margin-left:auto;margin-right:auto;}
  .mini3{grid-template-columns:1fr;gap:18px;}
}

/* ═══════════════ redesign additions ═══════════════ */

/* ── vignette 03 · "Files changed" phone (Site 1.4 IA Refresh board) ──
   file-row grammar reused from the Changed Files v2 board */
.fr{display:flex;align-items:center;gap:11px;background:var(--asurface);border:1px solid var(--ahair);border-radius:12px;padding:11px 12px;}
.fr .mid{flex:1;min-width:0;}
.fr .fn{font-size:14px;font-weight:500;color:var(--atext);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;}
.fr .dir{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--amuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.fr .rt{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;}
.fr .stat{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:0.01em;white-space:nowrap;}
.st{width:20px;height:20px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px;flex-shrink:0;line-height:1;}
.st.A{background:rgba(79,180,119,0.15);color:var(--asuccess);}
.st.M{background:rgba(91,155,213,0.15);color:#5B9BD5;}
.stat .plus{color:var(--asuccess);}
.stat .minus{color:#E5604D;}
.filesscreen .fr{padding:10px 11px;}
.filesscreen .fr.exp{border-color:rgba(217,119,87,0.32);}
.filesscreen .fr .st{width:18px;height:18px;font-size:10px;}
/* compact in-line diff — full-width tints, no horizontal scroller, wraps */
.mdiff{border:1px solid var(--ahair);border-radius:10px;overflow:hidden;background:#0B0C0D;}
.mdiff .mdh{display:flex;align-items:center;gap:8px;padding:7px 11px;border-bottom:1px solid var(--ahair);
  font-family:'JetBrains Mono',monospace;font-size:9.5px;color:var(--amuted);}
.mdiff .mdh .lang{color:var(--asec);}
.mdiff .mdh .at{margin-left:auto;color:var(--amuted);}
.mdiff .ml{display:flex;font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.72;}
.mdiff .ml .g{width:22px;text-align:right;padding-right:8px;color:var(--amuted);flex-shrink:0;user-select:none;font-size:9px;}
.mdiff .ml .s{width:13px;text-align:center;flex-shrink:0;color:transparent;user-select:none;}
.mdiff .ml .c{flex:1;padding-right:10px;white-space:pre-wrap;word-break:break-word;color:var(--asec);}
.mdiff .ml.add{background:rgba(79,180,119,0.12);}
.mdiff .ml.add .s{color:var(--asuccess);}
.mdiff .ml.add .c{color:var(--atext);}
.mdiff .ml.del{background:rgba(229,96,77,0.12);}
.mdiff .ml.del .s{color:#E5604D;}

/* injected inline SVGs: kill the baseline descender gap so icons center in flex rows */
.gh-glyph,.star-ico{display:inline-flex;align-items:center;}
.gh-glyph svg,.star-ico svg{display:block;}
.sec-card .ico svg,.node .ico svg{display:block;}

/* Codex identity — the ONLY extra accent allowed beside terracotta */
.tag-codex{
  font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;
  color:#3FB5AC;border:1px solid rgba(63,181,172,0.45);border-radius:999px;
  padding:1px 6px;margin-left:6px;vertical-align:middle;
}

/* ── vignette 04 · push banner + backfill divider (Site 1.4 board) ── */
.pushb{
  position:absolute;top:10px;left:9px;right:9px;z-index:40;
  display:flex;flex-direction:row;align-items:center;gap:10px;padding:9px 11px;
  background:rgba(30,33,37,0.92);border:1px solid var(--ahair);border-radius:15px;
  box-shadow:0 16px 40px -18px rgba(0,0,0,0.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.pushb .ic{width:30px;height:30px;border-radius:8px;flex-shrink:0;background:var(--aacc);
  display:flex;align-items:center;justify-content:center;}
.pushb .tw{flex:1;min-width:0;}
.pushb .tw .app-name{font-size:11px;font-weight:600;color:var(--atext);letter-spacing:0.01em;}
.pushb .tw .msg{font-size:11.5px;color:var(--asec);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pushb .ago{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--amuted);flex-shrink:0;align-self:flex-start;}
.sdiv{display:flex;align-items:center;gap:11px;padding:2px 0;}
.sdiv .rule{flex:1;height:1px;background:var(--ahair);}
.sdiv .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--amuted);white-space:nowrap;letter-spacing:0.02em;}

/* ── features · usage strip (page-themed) ── */
.usagestrip{
  display:flex;gap:26px;align-items:stretch;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:22px 24px;margin-top:22px;
}
.usagestrip .block{display:flex;flex-direction:column;gap:11px;}
.usagestrip .block.hours{flex:1;min-width:280px;}
.usagestrip .blab{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.ubars{display:flex;align-items:flex-end;gap:3px;height:76px;}
.ubars i{flex:1;background:rgba(217,119,87,0.32);border-radius:2px 2px 0 0;min-height:4px;}
.ubars i.peak{background:var(--accent);}
.uheat{display:grid;grid-template-columns:repeat(6,16px);grid-auto-rows:16px;gap:3px;}
.uheat span{border-radius:3px;border:1px solid var(--hair);}
.ustats{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--sec);margin-top:auto;padding-top:6px;}
.ustats b{color:var(--text);font-weight:600;}

/* ── features · share-folder boundary card (page-themed, neutral) ── */
.boundary{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--surface);margin-top:22px;}
.boundary .bcol{padding:20px 22px;}
.boundary .bcol + .bcol{border-left:1px solid var(--hair);}
.boundary h5{font-size:13px;font-weight:600;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:8px;letter-spacing:-0.01em;}
.boundary h5 .tag{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;letter-spacing:0.04em;}
.boundary ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
.boundary li{display:flex;gap:10px;font-size:13.5px;color:var(--sec);line-height:1.4;align-items:flex-start;}
.boundary li .mk{flex-shrink:0;margin-top:1px;display:flex;}
.boundary li b{color:var(--text);font-weight:600;}
.boundary .yes .mk{color:var(--success);}
.boundary .no .mk{color:var(--muted);}
.boundary .honest{grid-column:1 / -1;border-top:1px solid var(--hair);padding:15px 22px;font-size:13px;color:var(--sec);line-height:1.5;display:flex;gap:10px;align-items:flex-start;background:var(--raised);}
.boundary .honest svg{color:var(--muted);flex-shrink:0;margin-top:2px;}
.boundary .honest b{color:var(--text);font-weight:600;}
@media (max-width:820px){
  .boundary{grid-template-columns:1fr;}
  .boundary .bcol + .bcol{border-left:0;border-top:1px solid var(--hair);}
}

/* ── features · workflow run phone (app-scoped) ── */
.wfcard{background:var(--asurface);border:1px solid var(--ahair);border-radius:14px;padding:12px 13px 13px;}
.wfcard .wf-hd{display:flex;align-items:center;gap:11px;}
.wfcard .wf-tile{width:28px;height:28px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:rgba(217,119,87,0.13);border:1px solid rgba(217,119,87,0.4);color:var(--aacc);}
.wfcard .wf-nm{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--atext);letter-spacing:-0.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wfcard .wf-elapsed{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.wfcard .wf-elapsed .t{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--asec);}
.wfbar{display:flex;gap:4px;margin-top:12px;}
.wfbar span{flex:1;height:3px;border-radius:999px;}
.wfbar .done{background:var(--aacc);}
.wfbar .active{background:var(--aacc);opacity:0.5;}
.wfbar .pending{height:1px;border:1px solid var(--ahair);background:transparent;align-self:center;}
.wfmeta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--asec);margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.wfmeta .mut{color:var(--amuted);}
.wflanes{margin-top:14px;display:flex;flex-direction:column;gap:9px;}
.wlane{display:flex;align-items:center;gap:9px;}
.wlane .pl{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--amuted);width:56px;flex-shrink:0;text-align:right;}
.wlane .track{flex:1;display:flex;gap:2px;}
.wlane .track i{flex:1;height:6px;border-radius:1px;background:var(--ahair);}
.wlane .track i.d{background:var(--aacc);}
.wlane .track i.a{background:var(--aacc);opacity:0.45;}
.wfcap{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--sec);margin-top:16px;text-align:center;line-height:1.5;}
.wfcap b{color:var(--text);font-weight:600;}
.app .wfcap{color:var(--asec);}
.app .wfcap b{color:var(--atext);}
.wf-breathe{animation:wfBreathe 2s ease-in-out infinite;}
@keyframes wfBreathe{0%,100%{opacity:0.32}50%{opacity:0.6}}
@media (prefers-reduced-motion:reduce){.wf-breathe{animation:none;}}

/* 3-up variant of the capability grid (follows .sec-grid's breakpoints) */
.sec-grid.cols3{grid-template-columns:repeat(3,1fr);}
@media (max-width:1023px){ .sec-grid.cols3{grid-template-columns:1fr 1fr;} }
@media (max-width:767px){ .sec-grid.cols3{grid-template-columns:1fr;} }

/* ═══════════════ Site 1.5 — Mobile (from the Site 1.5 - Mobile board) ═══════════════
   Molecules first (viewport-independent), then the ≤767px layer.
   House rule holds: device/app chrome stays dark. */

/* breakpoint-gated markup variants (vignette 02 swaps its phone screen) */
.m-only{display:none!important;}

/* vignette 02 · "take over" phone (app-scoped) */
.takeover{display:flex;flex-direction:column;gap:9px;}
.to-live{display:flex;align-items:center;gap:10px;border:1px solid var(--ahair);background:var(--asurface);border-radius:11px;padding:10px 11px;}
.to-live .pulse{flex-shrink:0;}
.to-live .nm{font-size:12px;font-weight:600;color:var(--atext);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.to-live .src{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--asec);border:1px solid var(--ahair);border-radius:999px;padding:2px 7px;flex-shrink:0;}
.to-arrow{display:flex;justify-content:center;color:var(--amuted);padding:1px 0;}
.to-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border-radius:11px;background:var(--aacc);color:#0E0F11;font-size:12.5px;font-weight:600;}
.to-note{display:flex;align-items:center;gap:7px;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--asec);margin-top:2px;}
.to-note .x{color:var(--asuccess);display:flex;}

/* desktop download text-link line (was inline styles) */
.dl-desktop-line{text-align:center;margin:34px auto 0;max-width:660px;font-size:14.5px;color:var(--sec);}

@media (max-width:767px){
  /* markup variants */
  .m-only{display:flex!important;}
  .d-only{display:none!important;}

  /* rhythm: 44px sections, 20px gutters (board spacing notes) */
  .wrap{padding:0 20px;}
  .section{padding:44px 0;}
  .section-head{margin-bottom:26px;}
  .section-head h2{font-size:25px;line-height:1.16;}
  .section-head p{font-size:15px;}
  .eyebrow{margin-bottom:12px;}

  /* M1 · nav (56px bar; menu docks right under it) */
  .nav{height:56px;}
  .nav.scrolled{height:56px;}
  .mobile-menu{top:56px;padding:6px 18px 16px;}

  /* M1 · hero — stacked buttons, docked permission card */
  .hero{padding:98px 0 34px;}
  .hero h1{font-size:38px;}
  .hero .sub{font-size:16px;max-width:330px;}
  .hero-btns{flex-direction:column;gap:10px;margin-bottom:22px;}
  .hero-btns .btn{width:100%;}
  .trustline{font-size:11.5px;line-height:1.9;max-width:250px;margin:0 auto;}
  .hero-visual{flex-direction:column;align-items:center;margin-top:34px;}
  .hero-visual .phone{--pw:238px;}
  .float-perm{position:relative;right:auto;bottom:auto;width:100%;margin-top:-26px;z-index:6;border-radius:16px;padding:15px;}

  /* M1 · the moment */
  .moment .wrap{padding:46px 20px;gap:28px;}
  .moment .lead{font-size:23px;line-height:1.32;}
  .moment .mini{width:100%;max-width:300px;}

  /* M2 · vignettes (mfeat sizes; order handled at ≤1023) */
  .feature{margin-bottom:56px;}
  .feature .feat-text h3{font-size:23px;}
  .feature .feat-text p{font-size:15px;}

  /* M3 · desktop window (chat-only) + fleet */
  .win .ds-side{display:none;}
  .win-body{grid-template-columns:1fr;min-height:0;}
  .ds-chat-body{gap:12px;padding:14px;}
  .ds-chat-body .codeblock pre{font-size:11px;line-height:1.65;padding:10px 12px;}
  .s1-mock .fleet{width:100%;margin:16px 0 0;}
  .mini3{gap:16px;margin-top:30px;}
  .dl-desktop-line{font-size:14px;line-height:1.7;margin-top:26px;text-align:left;}

  /* M4 · architecture + security */
  .node{padding:18px 16px;}
  .connector{gap:12px;justify-content:center;}
  .arch-cap{font-size:14px;margin-top:26px;}
  .sec-grid{gap:14px;}
  .sec-card{padding:20px;}
  .pullquote{margin-top:36px;padding-top:32px;gap:16px;}
  .pullquote blockquote{font-size:26px;}

  /* M5 · store cards */
  .dl-grid{gap:14px;}
  .dl-card{padding:20px;}
  .dl-ico{background:var(--raised);border:1px solid var(--hair);color:var(--text);}
  .dl-sub{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);}
  .dl-beta{font-size:12.5px;}

  /* M5 · connect flow — pill OS tabs, scrolling command with fade + pinned copy */
  .step{gap:14px;}
  .step h4{font-size:15.5px;}
  .os-tab{font-family:'JetBrains Mono',monospace;font-size:11px;border-radius:999px;padding:5px 11px;}
  .cmd{position:relative;overflow:hidden;padding:0 8px 0 14px;gap:10px;}
  .cmd code{display:block;flex:1;min-width:0;overflow-x:auto;padding:12px 0;scrollbar-width:thin;}
  .cmd code::-webkit-scrollbar{height:5px;}
  .cmd code::-webkit-scrollbar-thumb{background:#2A2E33;border-radius:999px;}
  .cmd::after{content:"";position:absolute;top:1px;bottom:1px;right:48px;width:38px;background:linear-gradient(90deg,transparent,var(--code-bg));pointer-events:none;}
  .cmd .copy{margin-left:0;}
  .step-foot{margin-top:24px;font-size:13.5px;}

  /* M5 · footer — brand full row, links 2-col, bottom stacked */
  .footer{padding:38px 0 28px;}
  .footer .top{grid-template-columns:1fr 1fr;gap:22px 20px;margin-bottom:28px;}
  .footer .brand-col{grid-column:1 / -1;}
  .footer .bottom{flex-direction:column;align-items:flex-start;gap:16px;padding-top:24px;}

  /* M6 · features page */
  .feat-hero h1{font-size:33px;}
  .feat-hero .sub{font-size:15px;max-width:320px;}
  .feat-hero .hero-btns{flex-direction:column;align-items:stretch;}
  .fgroup{padding:40px 0;}
  .fgroup .section-head{margin-bottom:26px;}
  .usagestrip{flex-direction:column;gap:20px;padding:18px 18px 20px;}
  .usagestrip .block.hours{min-width:0;width:100%;}
  .ubars{height:64px;}
  .uheat{grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr;aspect-ratio:6/5;width:100%;}
  .fg-block{gap:24px;}
  /* fork diagram goes vertical at phone width (its horizontal chain is ~406px) */
  .forklane{flex-wrap:wrap;justify-content:center;gap:9px;padding:14px 0;}
  .flabel{width:100%;text-align:center;}
  .darr{transform:rotate(90deg);}
  .dstack{flex-direction:row;flex-wrap:wrap;justify-content:center;}
  .forkcap{text-align:center;}
  .feat-foot-cta h2{font-size:24px;}
  .feat-foot-cta .hero-btns{flex-direction:column;align-items:center;}
  .feat-foot-cta .hero-btns .btn{width:100%;max-width:280px;}
}