/* armadai — Features page (/features/). Sits on top of styles.css for the shared
   nav, footer, tokens and motifs: section registers, corner frames, product
   windows, the ruled tool grid and the plans. Dark only. features.js refines
   the two offsets below; the page lays out the same without it. */

:root { --fx-nav-h:86px; --fx-jump-h:46px; }
html:has(body.features-page) { scroll-padding-top:calc(var(--fx-nav-h) + var(--fx-jump-h) + 16px); }

.features {
  --fx-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --fx-warm:#efb083;
  font-family:var(--fx-sans);
}
.features h2 { letter-spacing:-.045em; }
.features strong { font-weight:500; color:#d5e0e5; }
.features code,.features kbd { font-family:var(--mono); font-size:.88em; color:#d5e0e5; }
.features kbd { padding:1px 5px; border:1px solid #3b4b57; border-radius:4px; background:#141b1f; white-space:nowrap; }
.fx-sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- hero ---------- */
.fx-hero { padding:0 3% 20px; }
.fx-hero>.section-register { border-bottom:1px solid var(--line); }
.fx-hero-frame { position:relative; max-width:1180px; margin:44px auto 0; padding:38px 30px 50px; text-align:center; }
.fx-hero h1 { font-size:clamp(48px,7.2vw,112px); letter-spacing:-.055em; }
.fx-lead { max-width:640px; margin:30px auto 0; color:#b4c0c3; font-size:19px; line-height:1.55; }
.fx-chips { list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:32px 0 0; padding:0; }
.fx-chip { display:inline-flex; align-items:center; gap:11px; min-height:44px; padding:0 15px; border:1px solid #3b4b57; background:#101518; color:#d5dfe2; font-size:15px; transition:border-color .2s,color .2s; }
.fx-chip>.mono { font-size:12px; color:#7f9197; }
.fx-chip .ui-icon { color:var(--accent); }
.fx-chip:hover { border-color:#71dac899; color:var(--accent); }
.fx-hero-actions { margin-top:34px; }
.fx-hero-stage { max-width:1460px; margin:30px auto 0; }

/* ---------- jump bar ---------- */
.fx-jump { position:sticky; top:var(--fx-nav-h); z-index:90; background:#080a0cf2; border-block:1px solid var(--line); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.fx-jump-track { position:relative; display:flex; justify-content:center; gap:2px; max-width:1460px; margin:0 auto; padding:0 3%; overflow-x:auto; scrollbar-width:none; overscroll-behavior-x:contain; }
.fx-jump-track::-webkit-scrollbar { display:none; }
.fx-jump a { flex:none; padding:14px 12px 12px; border-bottom:2px solid transparent; color:#91a2a8; font-family:var(--mono); font-size:12px; letter-spacing:.035em; text-transform:uppercase; white-space:nowrap; transition:color .2s,border-color .2s; }
.fx-jump a:hover { color:var(--text); }
.fx-jump a[aria-current="true"] { color:var(--accent); border-bottom-color:var(--accent); }
.fx-jump a:focus-visible { outline-offset:-4px; }

/* ---------- product band and section headings ---------- */
.fx-part { display:flex; justify-content:space-between; gap:16px; margin:0; padding:13px 7%; background:#102127; border-bottom:1px solid #32454b; color:#a5c7ca; font-size:12px; letter-spacing:.035em; }
.fx-part span:first-child { color:var(--accent); }
.fx-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:end; gap:26px clamp(30px,5vw,80px); margin-bottom:48px; }
.fx-heading h2 { font-size:clamp(38px,4.6vw,68px); line-height:1.02; }
.fx-heading>p { max-width:470px; color:#b2c0c7; font-size:17px; line-height:1.65; }
.fx-stage { margin-bottom:56px; }
.fx-stage-narrow .product-window { max-width:640px; margin-inline:auto; }
.fx-note { max-width:820px; margin-top:30px; padding-left:14px; border-left:1px solid #71dac866; color:#a1b2b8; font-size:15px; line-height:1.65; }
.fx-note a { color:var(--text); border-bottom:1px solid #71dac888; }
.fx-note a:hover { color:var(--accent); }

/* Real captures keep their own shape, so nothing shifts while they load. */
.fx-r-1400-880 img { aspect-ratio:1400/880; }
.fx-r-2000-1126 img { aspect-ratio:2000/1126; }
.fx-r-1520-1480 img { aspect-ratio:1520/1480; }
.fx-r-1600-952 img { aspect-ratio:1600/952; }
.fx-r-712-1194 img { aspect-ratio:712/1194; }

/* ---------- feature cards (the shared ruled grid, a little denser) ---------- */
.fx-cards .tool-detail { padding:28px 24px; }
.fx-cards .tool-detail h3 { font-size:20px; letter-spacing:-.025em; }
.fx-cards .tool-detail>p { font-size:15px; line-height:1.62; }
.fx-cards .tool-detail-heading { margin-bottom:14px; }

/* ---------- four agents ---------- */
.fx-agents { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.fx-agent { display:flex; flex-direction:column; }
.fx-agent>p { flex:1; color:#a9bdbc; font-size:15px; line-height:1.6; }
.fx-agent .agent-glyph .ui-icon { width:30px; height:30px; stroke-width:1.5; }
.fx-agent-claude .agent-glyph { color:#d99a7f; }
.fx-agent-codex .agent-glyph { color:#91cfc3; }
.fx-agent-grok .agent-glyph { color:#9fbcf2; }
.fx-agent-cursor .agent-glyph { color:#c9d2d6; }
.fx-agent .module-line { justify-content:flex-start; flex-wrap:wrap; }

/* ---------- illustrations ---------- */
.fx-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px clamp(30px,5vw,80px); margin-bottom:56px; }
.fx-split .fx-heading { display:block; margin:0; }
.fx-split .fx-heading>p { margin-top:26px; }
.fx-mock { max-width:540px; width:100%; justify-self:end; padding:30px 28px 20px; background:#0c1215; }
.fx-mock-card { padding:20px 22px; border:1px solid #34444b; border-radius:10px; background:#10171d; }
.fx-mock-card+.fx-mock-card { margin-top:14px; }
.fx-mock-top { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 12px; color:#92aab7; font-size:12px; }
.fx-mock-pill { padding:1px 8px; border:1px solid #3d5a56; border-radius:5px; color:var(--accent); }
.fx-mock-title { margin-top:14px; color:#e0e8ed; font-size:20px; line-height:1.3; letter-spacing:-.03em; }
.fx-mock-fields { display:grid; gap:9px; margin:16px 0 0; padding-top:14px; border-top:1px solid #2e3c46; }
.fx-mock-fields>div { display:grid; grid-template-columns:104px minmax(0,1fr); gap:12px; font-size:14px; line-height:1.5; }
.fx-mock-fields dt { color:#8fa6b5; }
.fx-mock-fields dd { margin:0; color:#ccd9e0; overflow-wrap:anywhere; }
.fx-mock-actions { list-style:none; display:grid; gap:8px; margin:16px 0 0; padding:0; }
.fx-mock-actions li { padding:9px 12px; border:1px solid #34444b; border-radius:7px; color:#c3d1d9; font-size:14px; }
.fx-mock-actions li:first-child { border-color:#71dac866; background:#71dac80f; color:#d3f3e9; }
.fx-mock-limit { border-color:#5a4636; }
.fx-mock-limit .fx-mock-top span:first-child,.fx-mock-count { color:var(--fx-warm); }
.fx-mock-count { margin-top:12px; font-size:12px; }
.fx-mock-label { margin-top:18px; color:#8fa6b5; font-size:12px; }
.fx-mock-agents { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; }
.fx-mock-agents li { padding:4px 9px; border:1px solid #34444b; border-radius:5px; color:#7f9197; font-size:13px; }
.fx-mock-agents li.is-on { border-color:#71dac866; color:#d3f3e9; }
.fx-mock-body { margin-top:14px; color:#a9bbc5; font-size:14px; line-height:1.55; }
.fx-mock figcaption { margin-top:14px; color:#7f9197; font-size:12px; text-align:right; }

/* ---------- iPhone and Chrome ---------- */
.fx-beta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-bottom:26px; }
.fx-badge { display:inline-flex; align-items:center; gap:9px; padding:6px 11px; border:1px solid #71dac855; background:#71dac80b; color:#d3f3e9; font-size:12px; line-height:1.4; }
.fx-badge::before { content:""; flex:none; width:6px; height:6px; background:var(--accent); box-shadow:0 0 7px #71dac864; }
.fx-badge-blue { border-color:#719fea66; background:#719fea0f; color:#d6e3fa; }
.fx-badge-blue::before { background:var(--blue); box-shadow:0 0 7px #719fea66; }
.fx-phones { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; max-width:1100px; margin:0 auto; }
.fx-phone { min-width:0; }
.fx-phone-frame { padding:7px; border:1px solid #3a4448; border-radius:38px; background:#050607; box-shadow:5px 5px 0 #081719,0 25px 60px #0007; }
.fx-phone-frame img { display:block; width:100%; height:auto; aspect-ratio:590/1280; border-radius:31px; background:#0b0f11; object-fit:cover; }
.fx-phone figcaption { margin-top:16px; color:#a9b7bc; font-size:14px; line-height:1.5; text-align:center; }
.fx-phone figcaption .mono { display:block; margin-bottom:4px; color:var(--accent); font-size:12px; letter-spacing:.035em; }
.fx-widget { display:flex; flex-direction:column; justify-content:center; gap:12px; margin:0; }
.fx-widget img { display:block; width:100%; height:auto; aspect-ratio:800/420; border:1px solid var(--line); border-radius:14px; background:#000; }
.fx-widget figcaption { color:#7f9197; font-size:12px; }
.fx-chrome-shots { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start; gap:28px; }
.fx-chrome-shots .product-window { min-width:0; }
.fx-tools { margin-top:46px; }
.fx-tools>.eyebrow { margin-bottom:17px; color:#799396; }
.fx-tool-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 32px; margin:0; border-top:1px solid var(--line); font-size:13px; }
.fx-tool-list>div { display:grid; gap:5px; padding:15px 0; border-bottom:1px solid var(--line); }
.fx-tool-list dt { color:var(--accent); }
.fx-tool-list dd { margin:0; color:#a9b7bc; line-height:1.5; }

/* ---------- plans and finale ---------- */
.features .pricing h2 { letter-spacing:-.05em; }
.features .pricing-heading>p { max-width:420px; }
.fx-trial { margin:30px 0 0; }
.features .plans { margin-top:34px; }
.features .finale { margin-top:90px; padding-bottom:60px; }

/* ---------- responsive ---------- */
@media(max-width:1000px) {
  :root { --fx-nav-h:77px; }
  .fx-hero { padding-inline:4%; }
  .fx-jump-track { justify-content:flex-start; padding:0 4%; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .fx-part { padding-inline:5%; }
  .fx-agents { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx-split { grid-template-columns:1fr; }
  .fx-mock { justify-self:start; }
  .fx-phones { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:560px; }
  .fx-tool-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fx-cards .tool-detail { padding:26px 22px; }
}
@media(max-width:760px) {
  .fx-heading { grid-template-columns:1fr; margin-bottom:36px; }
  .fx-heading>p { max-width:none; }
  .fx-chrome-shots { grid-template-columns:1fr; }
  .fx-chrome-shots .fx-r-712-1194 { width:100%; max-width:380px; justify-self:center; }
}
@media(max-width:700px) {
  :root { --fx-nav-h:62px; }
  .fx-hero { padding-inline:5%; }
  .fx-hero-frame { margin-top:30px; padding:26px 10px 36px; }
  .fx-hero h1 { font-size:clamp(38px,10.5vw,58px); letter-spacing:-.06em; line-height:.98; }
  .fx-lead { font-size:17px; margin-top:22px; }
  .fx-chips { gap:8px; }
  .fx-chip { padding:0 12px; font-size:14px; }
  .fx-jump-track { padding:0 5%; }
  .fx-jump a { padding:13px 10px 11px; }
  .fx-part { flex-wrap:wrap; }
  .fx-heading h2 { font-size:clamp(34px,9vw,52px); }
  .fx-heading>p { font-size:16px; }
  .fx-stage,.fx-split { margin-bottom:36px; }
  .fx-cards .tool-detail { padding:24px 0; }
  .fx-cards .tool-detail h3 { font-size:21px; }
  .fx-mock { padding:24px 14px 16px; }
  .fx-mock-fields>div { grid-template-columns:88px minmax(0,1fr); }
  .fx-phones { gap:16px; }
  .fx-phone-frame { padding:5px; border-radius:26px; box-shadow:3px 3px 0 #081719; }
  .fx-phone-frame img { border-radius:21px; }
  .fx-phone figcaption { font-size:13px; }
  .fx-tool-list { grid-template-columns:1fr; }
  .features .finale { margin-top:60px; padding-bottom:40px; }
}
@media(max-width:560px) {
  .fx-agents { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) {
  .fx-chip,.fx-jump a { transition:none; }
}