/* Portal17: warm graphite, precision typography, product-led composition. */
:root {
  --bg: #111313; --bg-alt: #171919; --panel: #1b1e1d; --panel-alt: #222625;
  --border: #3b403c; --border-soft: #2c302d; --text: #f4f3ec;
  --text-dim: #b5bab3; --text-faint: #939b92; --accent: #ff9b53;
  --accent-2: #ffb77e; --cyan: #9fcbbb; --glass: #1b1e1d;
  --glass-strong: #191c1b; --hairline: #323730;
  --grad-brand: linear-gradient(120deg, #ffa35f, #ffc18f);
  --radius-lg: 18px; --radius-md: 12px;
}
.container { max-width: 1240px; padding-inline: 32px; }
.bg-glow::before, .bg-glow::after, .grain { display: none; }
.site-nav, .site-nav.scrolled { background: #111313f5; border-bottom: 1px solid #ffffff0d; box-shadow: none; }
.nav-inner { padding-block: 18px; gap: 25px; }
.nav-links { gap: 27px; }
.brand { font-size: 18px; letter-spacing: -.6px; white-space: nowrap; }
.brand img { width: 34px; height: 34px; }
.brand:hover img { transform: none; }
.nav-cta .btn { min-height: 44px; min-width: 160px; }
.btn-store { padding: 9px 14px; border-color: #454940; border-radius: 7px; background: #222621; }
.btn-store .store-label strong { font-size: 13px; }
.btn-store .store-label small { font-size: 10px; }
.btn-store:hover .win-logo { transform: none; }
.btn { border-radius: 7px; box-shadow: none; }
.btn-primary { background: #ffa45f; color: #21160d; font-weight: 700; box-shadow: none; }
.btn-primary:hover { background: #ffb778; box-shadow: 0 8px 22px #0002; }
.btn-lg { padding: 15px 21px; font-size: 14px; }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .16em; color: var(--accent); background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: #a7cdb5; border-radius: 50%; flex-shrink: 0; }
.hero-refresh { padding: 86px 0 70px; min-height: auto; text-align: left; overflow: visible; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center; }
.hero-copy > .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.hero-refresh h1 { font-size: clamp(45px, 4.8vw, 69px); font-weight: 600; line-height: 1.07; letter-spacing: -.055em; margin: 0 0 26px; }
.hero.hero-refresh h1 .accent-text { color: var(--accent); background: none; -webkit-text-fill-color: var(--accent); animation: none; }
.hero-refresh h1, .hero-refresh .hero-sub, .hero-refresh .hero-ctas { animation: none; }
.hero-refresh .hero-sub { max-width: 455px; margin: 0 0 30px; font-size: 16px; line-height: 1.8; color: var(--text-dim); }
.hero-refresh .hero-ctas { justify-content: flex-start; gap: 24px; margin-bottom: 21px; }
.hero-demo-link { font-size: 13px; text-decoration: none; display: inline-flex; gap: 10px; align-items: center; }
.hero-demo-link > span { border: 1px solid #62685e; border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; font-size: 8px; }
.hero-demo-link:hover { color: var(--accent); }
.hero-note { color: var(--text-faint); font-size: 11px; margin: 0; }
.hero-note span { margin-inline: 9px; }
.workflow-preview { border: 1px solid #464a40; border-radius: 13px; overflow: hidden; background: #1a1d1a; box-shadow: 0 25px 80px #0004; transform: rotate(-1deg); }
.preview-titlebar { display: flex; align-items: center; justify-content: space-between; padding: 14px 17px; background: #262a24; border-bottom: 1px solid #3a4034; font-size: 11px; }
.preview-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.preview-brand img { width: 20px; height: 20px; }
.preview-local { display: flex; align-items: center; gap: 6px; color: #b8c3b1; font-size: 10px; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 15px 19px; gap: 12px; border-bottom: 1px solid #33382e; }
.preview-toolbar > span { display: flex; flex-direction: column; gap: 4px; }
.preview-file { font-size: 12px; font-weight: 600; }
.preview-toolbar small { font-size: 8px; letter-spacing: .12em; color: #909a87; }
.preview-run { background: #ffa45f; border: 0; border-radius: 5px; padding: 8px 12px; color: #24180e; font: 600 11px var(--font); cursor: pointer; white-space: nowrap; }
.preview-run:disabled { opacity: .7; cursor: progress; }
.preview-canvas { position: relative; padding: 20px 52px 33px; background-image: radial-gradient(#727b5240 1px, transparent 1px); background-size: 17px 17px; }
.canvas-label { display: block; color: #9ba18e; font-size: 10px; margin-bottom: 19px; text-align: center; }
.preview-flow { display: grid; gap: 18px; }
.preview-node { position: relative; display: flex; align-items: center; gap: 12px; background: #272c24; border: 1px solid #505a43; border-radius: 8px; padding: 12px 15px; box-shadow: 0 4px 10px #0002; transition: border-color .25s, background .25s; }
.preview-node:not(:last-child)::after { content: ''; position: absolute; height: 19px; width: 1px; background: #85956d; top: 100%; left: 50%; }
.preview-node:not(:last-child)::before { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #b7c6a3; bottom: -3px; left: calc(50% - 2px); z-index: 1; }
.preview-node b { display: block; font-size: 12px; font-weight: 600; }
.preview-node small { display: block; font-size: 9px; color: #adb6a2; margin-top: 3px; }
.node-symbol { width: 31px; height: 31px; border-radius: 7px; display: grid; place-items: center; font-size: 17px; flex: none; }
.node-symbol img { width: 18px; height: 18px; object-fit: contain; }
.node-symbol.green { background: #4a6540; color: #cde6b6; }
.node-symbol.blue { background: #3b5564; }
.node-symbol.purple { background: #66506d; }
.node-symbol.orange { background: #795939; }
.node-state { width: 6px; height: 6px; border: 1px solid #7f8d73; border-radius: 50%; margin-left: auto; }
.preview-node.running { border-color: #ffa45f; background: #3a3427; }
.preview-node.done .node-state { background: #aed18c; border-color: #aed18c; }
.canvas-zoom { position: absolute; bottom: 10px; right: 17px; font-size: 9px; color: #a9b19a; }
.preview-console { border-top: 1px solid #333d2b; padding: 12px 17px; font: 9px var(--font-mono); color: #b6c7a5; display: flex; align-items: center; gap: 7px; min-height: 38px; }
.console-dot { width: 4px; height: 4px; border-radius: 50%; background: #b6c7a5; }
.preview-scenarios { display: flex; padding: 8px; gap: 3px; background: #131611; border-top: 1px solid #30352b; }
.preview-scenarios button { flex: 1; font: 10px var(--font); padding: 8px 4px; background: none; color: #9ca592; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.preview-scenarios button[aria-pressed=true] { background: #2b3026; color: #f0f1e6; border-color: #49513e; }
.capability-strip { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 24px 38px; color: #aeb3a8; font-size: 12px; }
.capability-strip > span:first-child { font-size: 11px; padding-right: 35px; border-right: 1px solid #3a4034; line-height: 1.65; }
.capability-strip b { color: #f0f1e6; font-weight: 500; }
section { padding-block: 90px; }
section.tight { padding-block: 75px; }
.section-header { text-align: left; max-width: none; margin-bottom: 36px; }
.section-header h2, .studio-heading h2 { font-size: clamp(32px, 3.6vw, 48px); line-height: 1.12; font-weight: 550; letter-spacing: -.045em; margin: 16px 0; }
.section-header p { max-width: 640px; margin: 0; font-size: 15px; line-height: 1.8; }
.flow-step::before, .flow-step::after { display: none; }
.node-marquee { border-radius: 0; border-inline: none; background: transparent; padding-block: 13px; }
.node-chip { border-radius: 5px; background: #20241f; font-size: 11px; }
.node-chip img { width: 17px; height: 17px; }
.marquee-caption { font-size: 11px; padding-bottom: 22px; }
.solutions-section { background: #eeefe7; color: #222920; }
.solutions-section .eyebrow { color: #7b5738; }
.solutions-section .section-header p { color: #656b60; }
.solutions-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 26px; }
.solution-card { display: block; text-decoration: none; border-top: 1px solid #c4c9bb; padding-top: 20px; }
.solution-number { font-size: 10px; letter-spacing: .12em; color: #67705f; }
.solution-art { height: 190px; position: relative; margin-block: 22px; border-radius: 8px; overflow: hidden; background: #e0e4d8; display: flex; align-items: center; justify-content: center; }
.mini-window { background: #f8f9f3; border: 1px solid #c8cfbe; border-radius: 6px; box-shadow: 0 8px 18px #3b473713; padding: 10px 15px; font-size: 9px; width: 154px; position: absolute; top: 28px; left: 24px; }
.mini-window b { display: block; padding-top: 10px; margin-top: 8px; border-top: 1px solid #e0e3d8; font-size: 12px; font-weight: 500; }
.mini-offset { left: auto; right: 22px; top: 95px; }
.art-arrow { font-size: 26px; position: absolute; top: 75px; left: 54%; color: #7e8c70; }
.art-data { background: #e5e1d7; }
.mini-table { background: #fbfaf4; border-radius: 5px; padding: 16px; display: grid; grid-template-columns: 130px 56px; gap: 12px; font-size: 10px; box-shadow: 0 10px 20px #3b473713; transform: rotate(-4deg); }
.mini-table span:nth-child(-n+2) { font-size: 8px; color: #828372; }
.mini-table b { font-weight: 500; font-family: var(--font-mono); }
.export-badge { position: absolute; right: 25px; bottom: 25px; background: #385b41; color: #f1f6e9; padding: 8px 15px; border-radius: 5px; font-size: 12px; }
.art-schedule { flex-direction: column; gap: 12px; background: #dce3db; }
.schedule-clock { font-size: 48px; letter-spacing: -.05em; font-weight: 500; line-height: 1; }
.schedule-clock > span { color: #7a8b75; }
.schedule-pill { background: #f0f4e9; padding: 7px 12px; border: 1px solid #c3cfb9; border-radius: 20px; font-size: 10px; display: flex; gap: 6px; align-items: center; }
.schedule-pill .status-dot { background: #688559; }
.schedule-line { font-size: 8px; letter-spacing: .08em; color: #798773; }
.solution-card h3 { font-size: 25px; letter-spacing: -.035em; line-height: 1.2; margin: 0 0 14px; font-weight: 550; }
.solution-card p { color: #656e5e; font-size: 13px; line-height: 1.8; margin-bottom: 24px; }
.solution-link { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 600; padding-top: 14px; border-top: 1px solid #ccd1c2; }
.solution-card:hover .solution-link { color: #92502d; }
.solution-card:hover .solution-art { box-shadow: 0 10px 24px #3a472318; }
.studio-section { background: #181b18; }
.studio-heading { display: flex; align-items: flex-end; gap: 80px; justify-content: space-between; margin-bottom: 32px; }
.studio-heading p { max-width: 340px; font-size: 14px; color: var(--text-dim); line-height: 1.8; }
.studio-frame { margin: 0; border: 1px solid #454d3e; border-radius: 12px; overflow: hidden; background: #242824; }
.studio-frame-bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; font-size: 11px; }
.studio-frame-bar > span:first-child { display: flex; align-items: center; gap: 9px; }
.studio-frame-bar img { width: 19px; height: 19px; }
.studio-frame-bar > span:last-child { font-size: 8px; color: #a5b097; letter-spacing: .13em; }
.studio-frame > img { width: 100%; height: auto; }
.studio-frame figcaption { text-align: center; padding: 13px; color: #b6bdae; font-size: 11px; }
.studio-facts { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 32px; }
.studio-facts > div { border-left: 1px solid #3b4235; padding-left: 24px; }
.studio-facts > div:first-child { border: 0; padding: 0; }
.studio-facts b { font-size: 27px; font-weight: 500; letter-spacing: -.03em; display: block; }
.studio-facts span { color: #a3ad98; font-size: 11px; }
.rec-stage { background: #20251e; box-shadow: none; }
.rec-flow { background: #1b201a; box-shadow: none; }
.rec-point { background: transparent; border-radius: 0; border: 0; border-top: 1px solid #3a4232; padding: 18px 0; }
.feature-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.feature-filters button { border: 1px solid #3b4533; border-radius: 6px; background: transparent; color: #b2bca7; padding: 9px 15px; font: 12px var(--font); cursor: pointer; }
.feature-filters button[aria-pressed=true] { background: #eeeede; color: #252c21; border-color: #eeeede; }
.feature-grid { grid-template-columns: repeat(4,1fr); gap: 14px; }
.feature-card { padding: 23px 20px; background: #1b201a; border-radius: 9px; box-shadow: none; }
.feature-card::before, .feature-card::after { display: none; }
.feature-card h3 { font-size: 15px; letter-spacing: -.015em; }
.feature-card p { font-size: 12px; line-height: 1.8; }
.feature-icon { width: 34px; height: 34px; border-radius: 7px; margin-bottom: 20px; box-shadow: none; }
.feature-icon img { width: 21px; height: 21px; }
.feature-card[hidden] { display: none; }
.how-num { background: #282f23; color: #edb182; border: 1px solid #454d3a; box-shadow: none; }
.how-wire { background: #444d39; }
.how-step h3 { font-size: 18px; }
.how-step p { font-size: 13px; }
.playground { background: #191d17; }
.pg-panel { box-shadow: none; border-radius: 10px; }
.video-card { box-shadow: none; background: #1a2017; border-radius: 10px; }
.video-card-body h3 { font-size: 16px; }
.video-card-body p { font-size: 13px; }
.faq-list { max-width: none; }
.faq-item { border: 0; border-bottom: 1px solid #3a4233; background: transparent; border-radius: 0; }
.faq-q { padding: 21px 0; font-size: 15px; }
.faq-a-inner { padding-inline: 0; max-width: 800px; }
.download-panel { padding: 70px 30px; background: #e9ecdf; border-radius: 13px; color: #222b1e; box-shadow: none; }
.download-panel::before, .download-panel::after { display: none; }
.download-panel .eyebrow { color: #7d5635; }
.download-panel h2 { font-size: clamp(32px,4vw,51px); font-weight: 550; line-height: 1.12; letter-spacing: -.04em; margin: 18px 0; }
.download-panel p, .download-req { color: #626d59; }
.download-panel .btn-ghost { background: transparent; border-color: #a4af98; color: #293321; }
.site-footer { background: #0e120c; }
.footer-fine { text-align: left; }
.skip-link { position: fixed; top: -100px; left: 16px; background: #ffa45f; color: #222; padding: 10px 18px; z-index: 400; }
.skip-link:focus { top: 12px; }
.reveal { opacity: 1; filter: none; transform: none; }
.video-thumb.unavailable { cursor: default; }
.video-thumb.unavailable .play-btn { display: none; }
.video-thumb.unavailable::after { content: 'IN PRODUCTION'; display: grid; place-items: center; height: 100%; color: #bcc7ae; font-size: 11px; letter-spacing: .15em; }
@media (max-width: 1100px) {
  .hero-layout { gap: 35px; } .hero-refresh h1 { font-size: 55px; }
  .feature-grid { grid-template-columns: repeat(3,1fr); }
  .nav-links { gap: 18px; } .brand { font-size: 16px; }
}
@media (max-width: 880px) {
  .hero-layout { grid-template-columns: 1fr; gap: 42px; }
  .hero-refresh { padding: 55px 0 38px; }
  .hero-copy { max-width: 600px; } .hero-refresh h1 { font-size: clamp(45px,8vw,65px); }
  .workflow-preview { transform: none; width: 100%; max-width: 600px; justify-self: center; }
  .preview-canvas { padding-inline: 70px; }
  .capability-strip { flex-wrap: wrap; justify-content: flex-start; gap: 18px 27px; }
  .capability-strip > span:first-child { width: 100%; border: 0; }
  .solutions-grid { gap: 18px; } .solution-card h3 { font-size: 21px; }
  .mini-window { left: 10px; width: 135px; } .mini-offset { left: auto; right: 10px; }
  .mini-table { grid-template-columns: 85px 44px; padding: 13px; }
  .studio-heading { gap: 30px; } .studio-heading p { max-width: 260px; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .mobile-menu { background: #191e16; backdrop-filter: none; }
}
@media (max-width: 600px) {
  .container { padding-inline: 20px; } section, section.tight { padding-block: 56px; }
  .hero-refresh { padding-block: 44px; }
  .hero-refresh h1 { font-size: clamp(40px,10.5vw,60px); }
  .hero-refresh .hero-sub { font-size: 14px; } .hero-refresh .hero-ctas { gap: 17px; }
  .hero-demo-link { font-size: 11px; } .btn-lg { padding: 13px 16px; font-size: 12px; }
  .preview-canvas { padding-inline: 26px; } .preview-node { padding: 11px; }
  .capability-strip { font-size: 10px; gap: 14px 22px; padding-bottom: 26px; }
  .solutions-grid { grid-template-columns: 1fr; gap: 40px; }
  .solution-art { height: 195px; } .solution-card h3 { font-size: 27px; }
  .mini-window { left: 30px; width: 170px; } .mini-offset { left: auto; right: 28px; }
  .mini-table { grid-template-columns: 150px 55px; padding: 18px; }
  .studio-heading { display: block; } .studio-heading p { max-width: 100%; }
  .studio-frame-bar > span:last-child { display: none; }
  .studio-facts { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .studio-facts > div:nth-child(3) { border: 0; padding: 0; }
  .studio-facts b { font-size: 23px; } .studio-facts span { font-size: 10px; }
  .feature-grid { grid-template-columns: 1fr; } .feature-card { padding: 22px; }
  .feature-filters { gap: 6px; } .feature-filters button { font-size: 10px; padding: 8px 11px; }
  .download-panel { padding: 45px 18px; } .download-panel p { font-size: 14px; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 25px; }
  .footer-links { gap: 15px; }
}

/* Product-faithful nodes: side ports, category colors and routed cables. */
.rec-demo { grid-template-columns: 1.05fr 1fr; align-items: start; }
.rec-stage { min-height: 0; padding: 58px 22px 22px; align-content: start; }
.rec-app { margin-top: 0; }
.rec-flow { background: #282a2d; padding: 18px; }
.rec-graph { position: relative; min-height: 252px; }
.rec-list { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: 34px; gap: 48px 28px; padding: 23px 18px 30px; flex: none; }
.rec-node { display: flex; gap: 6px; align-items: center; padding: 0 8px; height: 34px; border-radius: 4px; border: 1px solid #ffffff20; box-shadow: 0 4px 4px #0003; background: linear-gradient(#a9654c,#853d2b); overflow: visible; }
.rec-node.app { background: linear-gradient(#57909a,#206a71); }
.rec-node:nth-child(4) { background: linear-gradient(#90669d,#663576); }
.rec-node b { color: #fff; font-size: 10px; font-weight: 500; white-space: nowrap; }
.rec-node img { width: 13px; height: 13px; padding: 0; border-radius: 0; flex: none; }
.rec-node.web img, .rec-node.app img { background: none; }
.rec-node small { position: absolute; top: 43px; left: 0; right: 0; text-align: center; font-size: 8px; color: #bfc2c6; }
.rec-demo.animating .rec-node, .rec-demo.animating .rec-node.in { transform: none; }
.rec-node.fresh { border-color: #ffe484; box-shadow: 0 0 0 1px #f4bc36,0 4px 4px #0003; }
.rec-node::before, .rec-node::after, .preview-node::before, .preview-node::after, .pg-node-chip::before, .pg-node-chip::after {
  content: ''; position: absolute; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #00ddd7; border: 1px solid #219699; box-shadow: 0 0 4px #02d9d887; z-index: 3;
}
.rec-node::before, .preview-node::before, .pg-node-chip::before { left: -5px; }
.rec-node::after, .preview-node::after, .pg-node-chip::after { right: -5px; }
.rec-legend { margin-top: 6px; }
.rec-legend .app::before { background: #3e8790; }
.rec-flow-head { color: #d0d1d3; }
.node-cables { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.node-cables path { fill: none; stroke: #e6a243; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.node-cables path.pending { opacity: 0; }
.node-cables path.executed { stroke: #9cddae; }
.preview-canvas { background-color: #282a2d; background-image: radial-gradient(#ffffff0c 1px,transparent 1px); min-height: 300px; padding: 24px 27px 40px; }
.preview-flow { position: relative; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 78px 42px; padding: 28px 18px 35px; }
.preview-node { height: 34px; border-radius: 4px; padding: 0 9px; gap: 6px; background: linear-gradient(#58953e,#256b20); border: 1px solid #ffffff20; box-shadow: 0 4px 4px #0003; }
.preview-node:nth-of-type(2) { background: linear-gradient(#5389ba,#235689); }
.preview-node:nth-of-type(3) { background: linear-gradient(#8d62a1,#633275); }
.preview-node:nth-of-type(4) { background: linear-gradient(#439699,#207274); }
.preview-node b { font-size: 11px; font-weight: 500; color: #fff; white-space: nowrap; }
.preview-node small { position: absolute; top: 44px; left: -12px; right: -12px; text-align: center; font-size: 9px; line-height: 1.5; color: #bec1c6; }
.node-symbol { width: 14px; height: 14px; border-radius: 0; font-size: 14px; }
.node-symbol img { width: 13px; height: 13px; }
.node-symbol.green, .node-symbol.blue, .node-symbol.purple, .node-symbol.orange { background: none; }
.node-state { display: none; }
.preview-node:not(:last-child)::before, .preview-node:not(:last-child)::after { width: 8px; height: 8px; background: #00ddd7; left: auto; bottom: auto; top: calc(50% - 4px); }
.preview-node:not(:last-child)::before { left: -5px; }
.preview-node:not(:last-child)::after { right: -5px; }
.preview-node.running { background: linear-gradient(#947945,#665029); border-color: #f8dc68; box-shadow: 0 0 0 1px #f4bc36; }
.preview-node.done { border-color: #88bf95; }
.pg-canvas { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 54px 30px; padding: 45px 25px; }
.pg-node { min-width: 0; z-index: 1; }
.pg-wire { display: none; }
.pg-node-chip { width: 100%; height: 34px; padding: 0 8px; gap: 6px; border-radius: 4px; background: linear-gradient(#ffffff20,#0002),var(--node-color); border: 1px solid #ffffff25; opacity: 1; filter: none; box-shadow: 0 4px 4px #0003; }
.pg-node-chip img { width: 13px; height: 13px; }
.pg-node-chip .pg-node-label { font-size: 10px; font-weight: 500; }
.pg-node.active .pg-node-chip { transform: none; box-shadow: 0 0 0 1px #f4bc36,0 4px 4px #0003; border-color: #ffe484; }
.pg-node-tip { z-index: 10; }
@media (max-width: 1100px) {
  .rec-demo { grid-template-columns: 1fr; }
  .rec-stage { grid-template-columns: 1fr 1fr; }
  .rec-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .rec-node b { font-size: 12px; }
  .rec-node small { font-size: 10px; }
}
@media (max-width: 600px) {
  .rec-stage { grid-template-columns: 1fr; padding: 65px 16px 18px; gap: 16px; }
  .rec-graph { min-height: 420px; }
  .rec-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 32px; padding-inline: 14px; }
  .rec-node b { font-size: 10px; }
  .rec-node small { font-size: 8px; }
  .preview-canvas { padding-inline: 14px; }
  .preview-flow { column-gap: 30px; padding-inline: 10px; }
  .preview-node { padding-inline: 7px; }
  .preview-node b { font-size: 10px; }
  .pg-canvas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 30px; overflow: visible; padding: 32px 20px; }
  .pg-node-chip { padding-inline: 8px; }
}

/* Complete product identity: icon orange + indigo, desktop graphite + cyan ports. */
:root {
  --bg: #17181b; --bg-alt: #1e1f24; --panel: #292a2e; --panel-alt: #34353b;
  --border: #464851; --border-soft: #34363f; --hairline: #3b3d47;
  --text: #f3f4f8; --text-dim: #b5b9c6; --text-faint: #969dac;
  --accent: #f5841b; --accent-2: #ffa345; --accent-soft: #f5841b17;
  --indigo: #2b3268; --indigo-lift: #4b56a0; --cyan: #00d9d7;
  --glass: #27282e; --glass-strong: #202126;
  --grad-brand: linear-gradient(135deg,#f5841b,#ffa345);
}
body { background: var(--bg); }
.container { max-width: 1260px; }
.site-nav, .site-nav.scrolled { background: #17181bf5; border-bottom-color: #393b4520; }
.mobile-menu { background: #202126; }
.brand, .footer-brand { font-weight: 650; }
.hero-refresh { padding-block: 80px 60px; background: radial-gradient(ellipse at 75% 40%,#2b326830,transparent 55%); }
.hero-refresh h1 { font-size: clamp(48px,5.8vw,78px); letter-spacing: -.055em; font-weight: 600; }
.hero-copy { max-width: 520px; }
.hero-refresh .hero-sub { font-size: 17px; max-width: 470px; line-height: 1.75; }
.status-dot { background: #00d9d7; }
.btn-primary, .preview-run { background: #f5841b; color: #19181d; }
.btn-primary:hover, .preview-run:hover { background: #ffa345; }
.btn-store { background: #2b3268; border-color: #525b96; }
.btn-store:hover { border-color: #f5841b; }
.btn-store .store-label small { color: #c2c5dc; }
.btn-ghost { background: #292b36; border-color: #494c60; color: #e9ebf5; }
.hero-note { color: #a2a9b9; }
.hero-demo-link:hover { color: #ffa345; }
.workflow-preview { transform: none; background: #292a2e; border-color: #4b4d59; box-shadow: 0 30px 60px #0004; border-radius: 10px; }
.preview-titlebar { background: #35363d; border-bottom-color: #454752; }
.preview-toolbar { background: #25262b; border-bottom-color: #43454e; }
.preview-local, .preview-toolbar small { color: #b4bbcd; }
.preview-console { background: #1b1c20; border-color: #42434a; color: #8ee1d3; }
.console-dot { background: #00d9d7; }
.preview-scenarios { background: #202126; border-color: #42434a; }
.preview-scenarios button { color: #bbc0d0; }
.preview-scenarios button[aria-pressed=true] { background: #2b3268; border-color: #5a67ab; color: #fff; }
.canvas-label { color: #a4abbd; font-size: 8px; letter-spacing: .12em; }
.canvas-zoom { color: #bbc0d0; }
.capability-strip { border-top: 1px solid #373943; border-bottom: 1px solid #373943; padding-block: 23px; margin-bottom: 0; color: #c1c5d1; }
.capability-strip > span { display: flex; gap: 9px; align-items: center; }
.capability-strip > span:first-child { display: block; border-color: #454856; color: #8992aa; }
.capability-strip b { color: #f3f4f8; }
.capability-strip img { width: 17px; height: 17px; }
.eyebrow { color: #ffa345; font-size: 10px; letter-spacing: .17em; }
section, section.tight { padding-block: 88px; }
.section-header h2, .studio-heading h2, .data-copy h2 { font-size: clamp(34px,3.9vw,50px); letter-spacing: -.045em; font-weight: 600; line-height: 1.14; }
.section-header { margin-bottom: 38px; }
.section-header p { max-width: 670px; }
.solutions-section { background: #1d1f27; color: #f3f4f8; border-bottom: 1px solid #353946; }
.solutions-section .eyebrow { color: #ffa345; }
.solutions-section .section-header p { color: #b5b9c6; }
.solutions-grid { gap: 20px; }
.solution-card { padding: 22px; border: 1px solid #3f4252; border-radius: 10px; background: #252832; transition: border-color .2s,transform .2s; }
.solution-card:hover { border-color: #797fb4; transform: translateY(-3px); }
.solution-number { color: #9ea8c4; font-size: 9px; }
.solution-card h3 { font-size: 25px; font-weight: 600; }
.solution-card p { color: #b5b9c6; }
.solution-link { color: #f9b16c; border-color: #424757; }
.solution-card:hover .solution-link { color: #ffd0a6; }
.solution-art { background: #2b326855; border: 1px solid #555f9f50; }
.art-data { background: #222633; }
.art-schedule { background: #2b326850; }
.mini-window { background: #e8eaf2; border-color: #a5abc5; color: #262a46; }
.mini-window b { border-color: #c6cada; }
.art-arrow { color: #00d9d7; }
.mini-table { background: #363b53; color: #e2e5f2; border: 1px solid #5b6589; }
.mini-table span:nth-child(-n+2) { color: #adb6d5; }
.export-badge { background: #2a787d; color: #e4ffff; }
.schedule-clock { color: #f2f3ff; }
.schedule-clock > span { color: #9ba9e2; }
.schedule-pill { background: #2c324e; border-color: #616e9a; color: #e0e5ff; }
.schedule-pill .status-dot { background: #00d9d7; }
.schedule-line { color: #adb8d8; }
.studio-section { background: #17181b; }
.studio-heading { align-items: center; }
.studio-heading p { max-width: 345px; }
.workspace-header { display: flex; gap: 16px; align-items: center; justify-content: space-between; background: #22232a; border: 1px solid #464852; border-bottom: 0; border-radius: 10px 10px 0 0; padding: 0 18px; }
.workspace-header > span { color: #e5e8f2; font-size: 12px; padding-block: 15px; }
.workspace-header a { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; font-size: 12px; color: #b5c5f0; text-decoration: none; }
.workspace-header a:hover { color: #fff; text-decoration: underline; }
.studio-frame { background: #292a2e; border-color: #464852; border-radius: 0 0 10px 10px; }
.studio-frame-bar { background: #303136; color: #dde0ea; }
.studio-frame-bar > span:last-child { color: #aeb8d2; }
.studio-frame figcaption { background: #202126; color: #b4bbcc; }
.workspace-map { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; margin-top: 30px; }
.workspace-map > div { position: relative; border-top: 1px solid #414551; padding-top: 20px; }
.workspace-map span { color: #f5841b; font: 11px var(--font-mono); }
.workspace-map h3 { margin: 12px 0 8px; font-size: 17px; font-weight: 600; }
.workspace-map p { color: #a8b0c3; font-size: 13px; line-height: 1.7; margin: 0; }
.studio-facts { border: 1px solid #404451; border-radius: 9px; padding: 25px; background: #242630; }
.studio-facts > div { border-color: #4e5369; }
.studio-facts span { color: #a8b2ca; }
.studio-facts b { color: #f1f3ff; }
.node-marquee { border-color: #383d50; }
.node-chip { background: #282b37; border-color: #42495d; }
.marquee-caption { color: #9da6bf; }
.recorder { background: #1e2027; border-block: 1px solid #343844; }
.demo-tag { background: #2b326860; color: #b4c5ff; border-color: #626ba04d; letter-spacing: .03em; }
.rec-stage { background: #303136; border-color: #50525c; }
.rec-toggle { background: #22242b; border-color: #5a5d6a; color: #bdc4d5; }
.rec-toggle.on { color: #a8dbdc; border-color: #389094; }
.rec-flow { border-color: #50525c; border-radius: 12px; }
.rec-stage { border-radius: 12px; }
.rec-point { border-top-color: #484d5d; }
.rec-point b { color: #e8ebf5; }
.rec-point span { color: #adb5c9; }
.rec-points { gap: 20px; }
.data-section { background: #17181b; }
.data-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 75px; align-items: center; }
.data-copy h2 { margin: 15px 0 22px; }
.data-copy > p { color: #b5b9c6; font-size: 15px; line-height: 1.8; }
.data-benefits { list-style: none; padding: 0; margin-top: 28px; display: grid; gap: 22px; }
.data-benefits li { display: flex; gap: 15px; align-items: flex-start; }
.data-benefits img { width: 32px; height: 32px; padding: 7px; background: #4e3864; border-radius: 6px; }
.data-benefits li:nth-child(2) img { background: #695034; }
.data-benefits li:nth-child(3) img { background: #275c66; }
.data-benefits span { color: #aab3c7; font-size: 12px; line-height: 1.7; }
.data-benefits b { display: block; color: #eef0f6; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.data-store-demo { border: 1px solid #50525c; border-radius: 10px; overflow: hidden; background: #292a2e; box-shadow: 0 20px 50px #0003; }
.editor-panel-title { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; background: #35363c; font-size: 13px; border-bottom: 1px solid #4a4b55; }
.editor-panel-title > span { font-size: 8px; letter-spacing: .1em; color: #a7b2cc; }
.data-tabs { display: flex; border-bottom: 1px solid #4c5061; background: #252730; padding: 0 8px; }
.data-tabs button { flex: 1; background: none; border: 0; color: #a6b1cc; padding: 14px 5px; font: 11px var(--font); cursor: pointer; border-bottom: 2px solid transparent; }
.data-tabs button[aria-pressed=true] { color: #fff; border-bottom-color: #6d93e6; background: #2b326850; }
.data-panel { padding: 24px; min-height: 340px; }
.data-panel[hidden] { display: none; }
.data-table { font-size: 12px; border: 1px solid #4c4f5b; }
.data-table > div { display: grid; grid-template-columns: 1fr 1fr; min-height: 41px; align-items: center; border-bottom: 1px solid #3e414c; }
.data-table > div:last-child { border-bottom: 0; }
.data-table > div > * { padding-inline: 13px; }
.data-table > div > * + * { border-left: 1px solid #434651; }
.data-table .table-labels { background: #343640; color: #9ba8c9; font-size: 9px; letter-spacing: .1em; min-height: 34px; }
.data-table code { color: #b6c8f4; font-size: 11px; }
.data-panel > p { font-size: 12px; line-height: 1.8; color: #b0b9ce; margin: 22px 0; }
.data-panel code { font-family: var(--font-mono); }
.expression-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 13px; background: #2b326850; border: 1px solid #53639880; border-radius: 5px; font-size: 10px; }
.expression-line code { color: #a9d8ff; font-size: 11px; }
.expression-output { color: #00d9d7; }
#features { background: #1e2028; border-block: 1px solid #353945; }
.feature-filters { background: #262934; border: 1px solid #454b62; border-radius: 7px; padding: 5px; width: fit-content; }
.feature-filters button { border-color: transparent; color: #aab5d0; }
.feature-filters button[aria-pressed=true] { background: #2b3268; color: #fff; border-color: #626ba0; }
.feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0 30px; }
.feature-card { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; padding: 24px 0; border: 0; border-bottom: 1px solid #3f4455; border-radius: 0; background: transparent; align-content: start; transition: none; transform: none; }
.feature-card:hover { transform: none; box-shadow: none; background: none; }
.feature-icon { grid-row: 1/3; margin: 0; width: 32px; height: 32px; background: #2b5980; border: 1px solid #72a3bc40; padding: 7px; }
.feature-icon img { width: 17px; height: 17px; }
.feature-card[data-category=data] .feature-icon { background: #64447e; border-color: #a585bb40; }
.feature-card[data-category=run] .feature-icon { background: #296f72; border-color: #77b6bc40; }
.feature-card h3 { font-size: 14px; margin: 0 0 9px; line-height: 1.3; }
.feature-card p { font-size: 13px; line-height: 1.75; margin: 0; color: #a9b3ca; }
#how { background: #17181b; }
.how-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: stretch; }
.how-wire { display: none; }
.how-step { text-align: left; background: #282a33; border: 1px solid #414858; border-radius: 9px; padding: 27px; }
.how-num { width: 36px; height: 36px; padding: 8px; background: #2b3268; border: 1px solid #6974ae; border-radius: 7px; margin: 0 0 25px; }
.how-num img { width: 20px; height: 20px; }
.mode-label { color: #9daed6; letter-spacing: .09em; font-size: 9px; }
.how-step h3 { font-size: 23px; font-weight: 600; margin: 12px 0 14px; letter-spacing: -.025em; }
.how-step p { font-size: 12px; line-height: 1.8; color: #aeb8ce; }
.shortcut-row, .error-route, .schedule-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 23px; color: #bcc7e2; font-size: 10px; }
.shortcut-row kbd { padding: 4px 6px; border: 1px solid #647094; border-bottom-width: 2px; border-radius: 4px; background: #313746; font-size: 10px; }
.error-route > span { padding: 6px 8px; border: 1px solid #68708f; border-radius: 4px; }
.error-route i { color: #df7477; font-style: normal; }
.playground { background: #1d2029; border-block: 1px solid #353b49; }
.pg-panel { background: #292a2e; border-color: #4a4d59; }
.pg-panel-header { display: flex; justify-content: space-between; align-items: center; background: #35363d; padding: 15px 20px; color: #d3d9e9; font-size: 12px; border-bottom-color: #515563; }
.pg-panel-header > span { display: flex; align-items: center; gap: 8px; }
.pg-panel-header img { width: 19px; height: 19px; }
.pg-panel-header small { color: #a9b4cd; font-size: 8px; letter-spacing: .1em; }
.pg-canvas { background: #292a2e; background-image: radial-gradient(#ffffff0a 1px,transparent 1px); background-size: 18px 18px; padding-block: 54px; }
.pg-steps-explainer { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; margin: 0; padding: 25px 35px 25px 45px; background: #23252e; border-top: 1px solid #484b5b; }
.pg-steps-explainer li { color: #9facc8; font-size: 10px; line-height: 1.75; }
.pg-steps-explainer strong { color: #d7dff2; }
.pg-controls { background: #292a2e; border: 0; padding: 8px 20px 22px; }
.pg-demo-row { margin-top: 20px; gap: 20px; grid-template-columns: 1fr 1fr; }
.pg-console { background: #191b22; border-color: #48506a; }
.pg-console-header { display: flex; align-items: center; gap: 8px; background: #2c3249; color: #ccd7f4; padding: 13px 17px; font-size: 11px; }
.pg-console-header small { margin-left: auto; font-size: 8px; color: #94a6d2; letter-spacing: .09em; }
.pg-console-body { padding: 17px; font-size: 11px; min-height: 320px; }
.pg-vars { border-color: #526394; color: #a9c8ef; }
.pg-var-chip { background: #2b326860; border-color: #6579b9; }
.fake-browser { border-color: #6d7292; border-radius: 9px; box-shadow: none; }
.fake-browser-bar { background: #353a55; }
.fake-url { background: #262b43; color: #c6cfe8; }
.fake-page { background: #e9edf8; color: #222841; }
.fake-page h3 { font-size: 22px; }
.fake-page label { color: #5d678c; }
.fake-page input, .fake-page select, .fake-page textarea { background: #f8faff; border-color: #b0bbd9; color: #262c42; }
.fake-submit { background: #2b3268; }
.pg-focus { box-shadow: 0 0 0 2px #f5841b70 !important; border-color: #f5841b !important; }
.pg-sandbox-cta { border: 1px solid #4a5579; border-radius: 8px; background: #2b326830; padding: 22px 25px; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.pg-sandbox-cta p { font-size: 12px; color: #b3bfd7; margin: 0; }
.resources-section { background: #17181b; }
.resources-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; }
.resource-card, .resource-video { border: 1px solid #484e63; background: #272b3a; border-radius: 10px; overflow: hidden; }
.resource-card { display: flex; flex-direction: column; padding: 25px; text-decoration: none; transition: border-color .2s; }
.resource-card:hover { border-color: #8291c8; }
.resource-type { color: #a0aed5; font-size: 8px; letter-spacing: .09em; }
.resource-symbol { height: 90px; font: 40px var(--font-mono); color: #f5841b; display: flex; align-items: center; }
.resource-symbol img { width: 30px; height: 30px; }
.resource-card h3 { font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; margin: 0 0 16px; }
.resource-card p { font-size: 12px; color: #acb8d3; line-height: 1.8; margin: 0 0 23px; }
.resource-action { display: flex; justify-content: space-between; color: #ffc18d; font-size: 11px; margin-top: auto; padding-top: 15px; border-top: 1px solid #454d66; }
.video-card-body { padding: 24px; }
.video-card-body h3 { font-size: 21px; font-weight: 600; margin-block: 12px; }
.video-card-body p { color: #acb8d3; font-size: 12px; line-height: 1.8; }
.video-thumb { border-bottom: 1px solid #4a5068; }
.video-badge { color: #e0e5fb; background: #2b3268; font-size: 8px; }
#faq { background: #1c1f27; border-block: 1px solid #393e4e; }
#faq > .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
#faq .section-header { position: sticky; top: 110px; }
#faq .section-header h2 { font-size: clamp(32px,3.5vw,45px); }
#faq .section-header p { color: #abb5cf; font-size: 13px; }
.faq-item { border-color: #454c61; }
.faq-q { font-size: 13px; padding-block: 19px; line-height: 1.5; }
.faq-a { font-size: 12px; line-height: 1.85; color: #b1bcd5; }
#download { background: #17181b; }
.download-panel { position: relative; padding: 65px 40px; background: radial-gradient(ellipse at 100% 50%,#46519640,transparent 70%),#2b3268; border: 1px solid #6471ae; border-radius: 12px; color: #fff; }
.download-icon { width: 50px; height: 50px; margin: 0 auto 23px; }
.download-panel .eyebrow { color: #f8b16c; }
.download-panel h2 { font-size: clamp(35px,4.5vw,58px); font-weight: 600; }
.download-panel p, .download-req { color: #c1c9e9; }
.download-panel .btn-store { background: #191d35; border-color: #727ba5; }
.download-panel .btn-ghost { color: #e9edff; border-color: #8792c5; background: #383f72; }
.site-footer { background: #141519; border-top: 1px solid #383d4e; padding: 55px 0 25px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 35px; }
.footer-brand { font-size: 17px; text-decoration: none; }
.footer-brand img { width: 34px; height: 34px; }
.footer-identity p { color: #a8b2c9; font-size: 12px; line-height: 1.8; margin: 20px 0 17px; }
.footer-tagline { font-size: 11px; color: #f9a55a; }
.footer-column { display: flex; flex-direction: column; gap: 12px; }
.footer-column h3 { font-size: 11px; color: #d0d8ef; margin: 5px 0 12px; font-weight: 600; }
.footer-column a, .footer-column > span { color: #939fb9; font-size: 11px; text-decoration: none; }
.footer-column a:hover { color: #ffa345; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; color: #818ba3; border-top: 1px solid #333847; padding-top: 24px; margin-top: 40px; font-size: 10px; }
.sandbox-hero { background: radial-gradient(ellipse at 50% 100%,#2b326830,transparent 65%); }
.sandbox-hero h1 { font-weight: 600; font-size: clamp(35px,4.5vw,56px); }
.sbx-index { background: #20232ef5; backdrop-filter: none; border-color: #474e65; }
.sbx-index-link { border-radius: 5px; background: #292e40; border-color: #48516a; color: #b9c5e1; }
.sbx-index-link i { background: #2b3268; border-color: #6975ac; }
.sbx-card { background: #282b36; border-color: #465069; border-radius: 10px; box-shadow: none; }
.sbx-card::before { display: none; }
.page-header h1 { font-weight: 600; }
.prose, .summary-card { color: #b4c0d9; }
.summary-card { background: #2b326840; border-color: #58669a; }
@media (max-width: 1100px) {
  .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .data-layout { gap: 35px; }
  .resources-grid { gap: 14px; grid-template-columns: 1.2fr 1fr; }
  .resource-card { padding: 20px; }
  #faq > .container { gap: 40px; }
  .hero-refresh h1 { font-size: 62px; }
}
@media (max-width: 880px) {
  .hero-refresh h1 { font-size: clamp(52px,8vw,72px); }
  .hero-refresh { padding-block: 55px; }
  .data-layout { grid-template-columns: 1fr; gap: 30px; }
  .data-copy { max-width: 650px; }
  .data-panel { min-height: 325px; }
  .how-steps { grid-template-columns: 1fr; }
  .how-step { padding: 25px; }
  .how-num { margin-bottom: 18px; }
  .resources-grid { grid-template-columns: 1fr; }
  .resource-video { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .resource-video .video-thumb { height: 100%; border-bottom: 0; }
  #faq > .container { grid-template-columns: 1fr; gap: 10px; }
  #faq .section-header { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 35px; }
  .pg-steps-explainer { grid-template-columns: repeat(2,1fr); gap: 14px; }
  .pg-sandbox-cta { flex-direction: column; align-items: flex-start; gap: 15px; }
}
@media (max-width: 600px) {
  section, section.tight { padding-block: 58px; }
  .hero-refresh { padding-block: 45px; }
  .hero-refresh h1 { font-size: 55px; }
  .hero-refresh .hero-sub { font-size: 15px; }
  .capability-strip { padding-block: 20px; }
  .capability-strip img { width: 14px; height: 14px; }
  .solution-card { padding: 20px; }
  .workspace-header { padding-inline: 12px; flex-wrap: wrap; gap: 0 16px; }
  .workspace-header > span { font-size: 11px; padding-block: 12px; }
  .workspace-header a { font-size: 11px; }
  .workspace-map { grid-template-columns: 1fr; gap: 23px; }
  .workspace-map h3 { display: inline; margin-left: 10px; font-size: 15px; }
  .workspace-map p { margin-top: 9px; font-size: 12px; }
  .studio-facts { padding: 20px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card h3 { font-size: 15px; }
  .feature-card p { font-size: 12px; }
  .feature-filters { width: 100%; }
  .feature-filters button { flex: 1 0 40%; padding: 9px 7px; font-size: 10px; }
  .data-tabs button { font-size: 10px; }
  .data-panel { padding: 18px; min-height: 340px; }
  .data-table > div > * { padding-inline: 9px; }
  .editor-panel-title { padding: 15px 18px; }
  .data-store-demo .expression-line { font-size: 9px; }
  .pg-panel-header { padding: 13px; }
  .pg-panel-header small { font-size: 7px; }
  .pg-demo-row { grid-template-columns: 1fr; }
  .pg-console-body { min-height: 230px; }
  .pg-steps-explainer { padding: 22px 20px 22px 33px; gap: 15px; }
  .resources-grid { grid-template-columns: 1fr; }
  .resource-video { display: block; }
  .resource-video .video-thumb { height: auto; aspect-ratio: 16/9; }
  .resource-card { padding: 23px; }
  .resource-symbol { height: 75px; }
  .download-panel { padding: 45px 20px; }
  .download-panel h2 { font-size: 35px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer-identity { grid-column: 1/-1; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

/* Fixed dimensions match the desktop app; the canvas never stretches a node. */
.rec-list { grid-template-columns: repeat(auto-fit,128px); max-width: 660px; width: 100%; margin-inline: auto; justify-content: center; gap: 48px 28px; }
.rec-node { width: 128px; height: 32px; padding: 0 8px; border-radius: 5px; }
.rec-node b { font-size: 10px; }
.rec-node small { font-size: 8px; }
.preview-flow { grid-template-columns: repeat(2,128px); justify-content: center; gap: 78px 42px; }
.preview-node { width: 128px; height: 32px; border-radius: 5px; }
.preview-node b { font-size: 10px; }
.preview-node[data-step="0"]::before { display: none; }
.preview-node:not(:last-child)::after { left: auto; right: -5px; }
.pg-canvas { grid-template-columns: repeat(auto-fit,128px); justify-content: center; gap: 54px 35px; }
.pg-node, .pg-node-chip { width: 128px; }
.pg-node-chip { height: 32px; border-radius: 5px; }
.pg-node[data-step="1"] .pg-node-chip::before { display: none; }
.fake-submit { color: #fff; }
@media (max-width:600px) {
  .preview-flow { grid-template-columns: repeat(2,120px); gap: 78px 30px; padding-inline: 0; }
  .preview-node { width: 120px; }
  .pg-canvas { grid-template-columns: repeat(2,120px); gap: 48px 30px; padding-inline: 12px; }
  .pg-node, .pg-node-chip { width: 120px; }
  .rec-list { grid-template-columns: repeat(2,120px); padding-inline: 10px; column-gap: 30px; }
  .rec-node { width: 120px; }
}
.pg-canvas { max-width: 720px; margin-inline: auto; }
html { scroll-behavior: auto; }
.rec-node, .preview-node, .pg-node-chip { height: 34px; }
.demo-tag { box-shadow: none; animation: none; border: 1px solid #54639c; border-radius: 4px; font-size: 9px; padding: 4px 7px; }
@media (max-width:600px) { .rec-node, .preview-node, .pg-node-chip { height: 32px; } }
.rec-demo { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.rec-stage, .rec-flow, .rec-graph { min-width: 0; }
.rec-win { min-width: 0; }
.rec-winbtns { white-space: nowrap; }
@media (max-width:1100px) { .rec-demo { grid-template-columns: minmax(0,1fr); } }
.how-step { max-width: none; min-width: 0; width: auto; }
.how-step .how-num, .how-step:hover .how-num { width: 36px; height: 36px; padding: 8px; border-radius: 7px; margin: 0 0 25px; background: #2b3268; border: 1px solid #6974ae; box-shadow: none; transform: none; }
.how-step .how-num::after { display: none; }
.faq-list { width: 100%; }