@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, textarea { font: inherit; }
  button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
  [hidden] { display: none !important; }
}

@layer base {
  /* Fonts and core tokens match the product interfaces (DM Sans text, Manrope headings, #1467ed accent). See BRAND.md. */
  @font-face { font-family:'DM Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/DMSans.woff2') format('woff2'); }
  @font-face { font-family:'Manrope'; font-style:normal; font-weight:100 900; font-display:swap; src:url('fonts/Manrope.woff2') format('woff2'); }
  :root {
    --ink:#15213a; --muted:#56637b; --paper:#f5f7fb; --white:#fff; --line:#dce2eb; --line-strong:#b9c3d3;
    --cobalt:#1467ed; --cobalt-dark:#0f4fc0; --navy:#101b3d; --navy-2:#182a5a; --tint:#eaf0ff;
    --mint:#39e6a7; --cyan:#23cfff; --coral:#ff9960; --accent:var(--cobalt);
    --r-s:6px; --r-m:12px; --r-l:18px; --max:1180px; --gutter:48px;
    --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  }
  html { scroll-behavior:smooth; scroll-padding-top:96px; }
  body { background:var(--paper); color:var(--ink); font-family:"DM Sans","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif; font-size:1.0625rem; line-height:1.6; -webkit-font-smoothing:antialiased; }
  ::selection { background:#cfe0ff; color:var(--ink); }
  a { color:inherit; text-underline-offset:4px; }
  button { cursor:pointer; }
  a, button { touch-action:manipulation; }
  :focus-visible { outline:3px solid var(--cobalt); outline-offset:3px; border-radius:2px; }
  h1, h2, h3 { font-family:Manrope,"DM Sans",system-ui,sans-serif; font-weight:700; text-wrap:balance; }
  h1 { font-size:clamp(2.4rem,4.6vw,4rem); line-height:1.06; letter-spacing:-.035em; }
  h2 { font-size:clamp(1.75rem,2.8vw,2.5rem); line-height:1.12; letter-spacing:-.03em; }
  h3 { font-size:1.3rem; line-height:1.25; letter-spacing:-.015em; }
  p { text-wrap:pretty; }
  p + p { margin-top:16px; }
  .mint { --accent:var(--mint); }
  .coral { --accent:var(--coral); }
  .cyan { --accent:var(--cyan); }
  .eyebrow { font-size:.9rem; font-weight:600; color:var(--muted); margin-bottom:14px; }
  .large-copy { font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.5; letter-spacing:-.015em; }
  .skip-link { position:fixed; top:10px; left:10px; z-index:50; padding:10px 20px; background:var(--ink); color:white; transform:translateY(-180%); border-radius:var(--r-s); }
  .skip-link:focus { transform:none; }
  .text-link { display:inline-flex; align-items:center; font-weight:600; font-size:.95rem; color:var(--cobalt-dark); text-decoration:underline; text-decoration-thickness:1.5px; padding:10px 0; }
  .text-link:hover { color:var(--ink); }
  .button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border-radius:var(--r-s); font-weight:600; font-size:.95rem; text-decoration:none; border:1.5px solid var(--ink); transition:background .15s, color .15s, border-color .15s; }
  .button-primary { background:var(--cobalt); color:var(--white); border-color:var(--cobalt); }
  .button-primary:hover { background:var(--cobalt-dark); border-color:var(--cobalt-dark); }
  .button-outline { background:transparent; color:var(--ink); }
  .button-outline:hover { background:var(--white); }
  button:disabled { opacity:.5; cursor:not-allowed; }
  code { font-family:var(--mono); font-size:.88em; background:#e6ebf5; padding:1px 5px; border-radius:4px; overflow-wrap:anywhere; }
}

@layer layout {
  .site-header { border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:20; }
  .header-inner { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; min-height:76px; padding:12px var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:24px; }
  .brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; flex-shrink:0; }
  .brand img { width:42px; height:42px; flex-shrink:0; border-radius:18.23%; }
  .brand-name { font-family:Manrope,"DM Sans",sans-serif; font-size:1.35rem; line-height:1.2; font-weight:700; letter-spacing:-.04em; }
  .site-nav { display:flex; align-items:center; gap:28px; }
  .site-nav > a { text-decoration:none; font-size:.95rem; font-weight:550; padding:8px 0; border-bottom:2px solid transparent; }
  .site-nav > a:hover { border-bottom-color:var(--line-strong); }
  .site-nav > a[aria-current] { border-bottom-color:var(--cobalt); }
  .site-nav .nav-contact { background:var(--cobalt); color:white; padding:9px 18px; border-radius:var(--r-s); border-bottom:0; }
  .site-nav .nav-contact:hover { background:var(--cobalt-dark); }
  .menu-toggle { display:none; background:none; border:1.5px solid var(--ink); padding:8px 14px; border-radius:var(--r-s); font-weight:600; }
  .preview-label { font-size:.75rem; font-weight:600; color:var(--muted); border:1px solid var(--line-strong); padding:2px 8px; border-radius:99px; }
  main { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; padding:56px var(--gutter) 0; }
  .section { padding:72px 0; }
  .section-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:36px; }
  .section-heading > p { color:var(--muted); max-width:400px; font-size:1rem; }
  .section-heading > .text-link { flex-shrink:0; }
  .actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:28px; }
  .page-intro { padding:8px 0 56px; max-width:900px; }
  .hero-lead { font-size:clamp(1.15rem,1.7vw,1.35rem); line-height:1.5; letter-spacing:-.012em; max-width:640px; margin-top:22px; }
  .site-footer { background:var(--navy); color:var(--paper); margin-top:24px; }
  .footer-inner { max-width:calc(var(--max) + 2 * var(--gutter)); margin:auto; padding:56px var(--gutter) 24px; }
  .footer-main { display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:36px; padding-bottom:40px; }
  .footer-main > div > p { font-size:.95rem; max-width:290px; margin-top:16px; color:#c5d0e6; }
  .footer-links { display:flex; flex-direction:column; align-items:start; gap:10px; }
  .footer-links h2 { font-family:"DM Sans",sans-serif; font-size:.85rem; letter-spacing:0; font-weight:600; color:#aebbd6; margin-bottom:8px; }
  .footer-links a { text-decoration:none; font-size:.95rem; overflow-wrap:anywhere; }
  .footer-links a:hover { text-decoration:underline; }
  .footer-bottom { border-top:1px solid #33456f; padding-top:20px; display:flex; gap:20px; justify-content:space-between; font-size:.82rem; color:#c5d0e6; }
  .footer-company { display:inline-flex; align-items:center; gap:10px; }
  .footer-marks { font-size:.78rem; color:#aebbd6; margin-top:16px; max-width:72ch; }
}

@layer components {
  /* Home hero: the call ladder is the one loud element on the page. */
  .hero { display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; padding:8px 0 72px; }
  .hero-title { color:var(--ink); }
  .hero-visual { background:var(--navy); color:white; border-radius:var(--r-l); padding:22px 22px 20px; box-shadow:0 24px 50px -18px #101b3d73; }
  .hero-visual figcaption { border-top:1px solid #ffffff26; margin-top:6px; padding-top:16px; font-size:.95rem; line-height:1.5; color:#d3def7; }
  .hero-visual figcaption strong { color:white; }
  .ladder { width:100%; height:auto; font-family:"DM Sans",system-ui,sans-serif; }
  .ladder-lane text { fill:#c5d3f3; font-size:13px; font-weight:600; text-anchor:middle; }
  .ladder-lane line { stroke:#ffffff38; stroke-width:1.5; stroke-dasharray:4 5; }
  .ladder-msg line { stroke:#e4ecff; stroke-width:1.75; }
  .ladder-msg polygon { fill:#e4ecff; }
  .ladder-msg text { fill:white; font-size:12.5px; text-anchor:middle; font-family:var(--mono); }
  .ladder-msg.is-fail line { stroke:#ff9c9c; stroke-width:2.25; }
  .ladder-msg.is-fail polygon { fill:#ff9c9c; }
  .ladder-msg.is-fail text { fill:#ffc2c2; font-weight:700; }

  /* Cards */
  .card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .card { background:var(--white); border:1px solid var(--line); border-radius:var(--r-m); padding:26px; display:flex; flex-direction:column; gap:12px; min-width:0; }
  .card-link { text-decoration:none; border-top:5px solid var(--accent); transition:border-color .15s, box-shadow .15s, transform .15s; }
  .card-link:hover { box-shadow:0 14px 30px -16px #15213a4d; transform:translateY(-2px); }
  .card p { color:var(--muted); font-size:1rem; }
  .card p + p { margin-top:0; }
  .card .card-kicker { font-size:.9rem; font-weight:600; color:var(--muted); }
  .card .card-question { color:var(--ink); font-weight:650; font-size:1.08rem; line-height:1.4; }
  .card-more { margin-top:auto; padding-top:10px; font-weight:600; font-size:.95rem; color:var(--cobalt-dark); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px; }
  .product-lockup { display:flex; align-items:center; gap:14px; }
  .product-lockup h3 { font-size:1.5rem; }
  .product-lockup-large { margin-bottom:26px; }
  .lockup-name { font-family:Manrope,sans-serif; font-weight:700; font-size:1.15rem; letter-spacing:-.02em; }
  .product-lockup .card-kicker { font-size:.9rem; font-weight:600; color:var(--muted); margin-top:0; }
  .product-icon { width:52px; height:52px; display:inline-grid; place-items:center; flex-shrink:0; border-radius:14px; color:var(--ink); background:var(--accent); }
  .product-icon svg { width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .icon-studio { --accent:var(--cyan); }
  .icon-workbench { --accent:var(--mint); }
  .icon-vector { --accent:var(--coral); }

  /* Product pages */
  .product-hero { display:grid; grid-template-columns:1.1fr 1fr; align-items:center; gap:56px; padding:8px 0 64px; }
  .product-hero h1 { font-size:clamp(2.4rem,4.4vw,3.8rem); }
  .delivery-note { color:var(--muted); font-size:1rem; max-width:560px; margin-top:16px; }
  .product-visual { min-width:0; border-radius:var(--r-l); background:var(--navy); padding:22px; color:white; border-top:6px solid var(--accent); box-shadow:0 24px 50px -18px #101b3d73; }
  .visual-top { display:flex; align-items:center; gap:14px; font-weight:600; font-size:1rem; color:#e4ecff; margin-bottom:18px; }
  .visual-top .product-icon { width:40px; height:40px; border-radius:11px; }
  .visual-top .product-icon svg { width:24px; height:24px; }
  .product-visual figcaption, .board figcaption { font-size:.82rem; color:#b9c7e6; margin-top:16px; }
  .mini-compare { width:100%; border-collapse:collapse; font-size:.92rem; }
  .mini-compare th, .mini-compare td { text-align:left; padding:11px 10px; border-bottom:1px solid #ffffff1f; vertical-align:top; }
  .mini-compare thead th { font-size:.82rem; font-weight:600; color:#b9c7e6; border-bottom-color:#ffffff40; }
  .mini-compare tbody th { font-weight:600; color:#e4ecff; }
  .mini-compare td { font-family:var(--mono); font-size:.85rem; color:white; }
  .mini-compare tr.is-diff td, .mini-compare tr.is-diff th { background:#ffffff12; }
  .diff-tag { display:inline-block; font-family:"DM Sans",sans-serif; font-size:.74rem; font-weight:700; background:var(--mint); color:var(--ink); padding:1px 8px; border-radius:99px; margin-left:4px; }
  .state { display:inline-block; font-family:"DM Sans",sans-serif; font-size:.82rem; font-weight:700; padding:2px 10px; border-radius:99px; color:var(--ink); white-space:nowrap; }
  .state-ok { background:var(--mint); }
  .state-warn { background:var(--coral); }
  .state-run { background:var(--cyan); }
  .state-plan { background:#d5ddec; }
  .flow-illustration { width:100%; height:auto; font-family:"DM Sans",system-ui,sans-serif; }
  .flow-connectors path { fill:none; stroke:var(--accent); stroke-width:2; }
  .flow-node rect, .flow-node path { fill:var(--navy-2); stroke:var(--accent); stroke-width:1.75; }
  .flow-node text { fill:white; font-size:14px; font-weight:600; text-anchor:middle; }
  .flow-decision text { font-size:12.5px; }
  .flow-branch text { fill:#b9c7e6; font-size:12px; font-weight:600; text-anchor:middle; }
  .capability-section { border-top:1px solid var(--line); }
  .capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; }
  .capabilities article { padding:22px 0; border-top:3px solid var(--accent); margin-bottom:18px; }
  .capabilities article p { margin-top:10px; color:var(--muted); font-size:1rem; }
  .product-detail { display:grid; grid-template-columns:1fr 1.1fr; gap:60px; border-top:1px solid var(--line); }
  .product-detail .large-copy { margin-top:20px; color:var(--muted); }
  .product-io dt { font-size:.9rem; color:var(--muted); font-weight:600; }
  .product-io dd { margin:6px 0 22px; }
  .task-list { padding-left:20px; }
  .task-list li { padding:6px 0; }
  .task-list li::marker { color:var(--cobalt); }
  .screenshot-section, .path-section, .related-guides { border-top:1px solid var(--line); }
  .product-screenshot { padding:22px; border:1px solid var(--line); border-radius:var(--r-l); background:var(--tint); }
  .product-screenshot > a { display:block; max-width:980px; margin:auto; border-radius:var(--r-m); overflow:hidden; border:1px solid var(--line-strong); background:white; box-shadow:0 18px 40px -20px #15213a59; }
  .product-screenshot img { display:block; width:100%; height:auto; }
  .product-screenshot figcaption { max-width:980px; margin:16px auto 0; color:var(--muted); font-size:.9rem; }
  .product-screenshot figcaption a { display:inline-block; padding:8px 0; font-weight:600; color:var(--cobalt-dark); }
  .board { background:var(--navy); color:white; border-radius:var(--r-l); padding:24px; border-top:6px solid var(--coral); }
  .board-stages { list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
  .board-stages li { font-size:.88rem; font-weight:600; padding:6px 14px; border-radius:99px; border:1.5px solid #ffffff40; color:#c5d3f3; }
  .board-stages li.is-done { background:#ffffff1f; border-color:transparent; color:white; }
  .board-stages li.is-current { background:var(--coral); border-color:var(--coral); color:var(--ink); }
  .board-body { display:grid; grid-template-columns:1.4fr 1fr; gap:22px; margin-top:22px; }
  .board-panel { background:var(--navy-2); border-radius:var(--r-m); padding:20px; min-width:0; }
  .board-panel h3 { font-size:1.05rem; margin-bottom:8px; }
  .board-table td { font-family:"DM Sans",sans-serif; font-size:.92rem; }
  .board-decisions > div { padding:12px 0; border-bottom:1px solid #ffffff1f; }
  .board-decisions > div:last-child { border-bottom:0; }
  .board-decisions dt { font-weight:700; }
  .board-decisions dd { color:#c5d3f3; font-size:.92rem; margin-top:2px; }
  .product-example { background:var(--white); border:1px solid var(--line); border-left:6px solid var(--accent); border-radius:var(--r-m); padding:40px; display:grid; grid-template-columns:1.2fr 1fr; gap:56px; margin:8px 0 24px; }
  .product-example h2 { font-size:clamp(1.5rem,2.2vw,2rem); margin-bottom:16px; }
  .product-example > div > p:not(.eyebrow) { color:var(--muted); }
  .review-note { border-left:4px solid var(--line-strong); background:#e8edf5; color:#3d4a63; padding:14px 20px; font-size:.95rem; margin:20px 0; border-radius:0 var(--r-s) var(--r-s) 0; }
  .purchase-section { display:grid; grid-template-columns:1.5fr 1fr; align-items:center; gap:40px; background:var(--cobalt); color:white; border-radius:var(--r-l); padding:44px; margin:24px 0 72px; }
  .purchase-section h2 { font-size:clamp(1.6rem,2.6vw,2.3rem); }
  .purchase-section p { margin-top:14px; color:#e6eeff; }
  .purchase-section .purchase-detail { font-size:.92rem; color:#cfdcff; }

  /* Tool inventory and platform tables */
  .tool-inventory, .compat-section { border-top:1px solid var(--line); }
  .tool-group + .tool-group { margin-top:40px; }
  .tool-group h3 { font-size:1.1rem; padding-bottom:10px; border-bottom:2px solid var(--ink); }
  .tool-group dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 44px; }
  .tool-group dl > div { padding:14px 0; border-bottom:1px solid var(--line); min-width:0; }
  .tool-group dt { font-weight:700; }
  .tool-group dd { margin-top:3px; color:var(--muted); font-size:.98rem; }
  .table-scroll { overflow-x:auto; }
  .table-scroll + .table-scroll { margin-top:32px; }
  .compat { width:100%; border-collapse:collapse; font-size:.98rem; }
  .compat:has(thead th:nth-child(3)) { min-width:520px; }
  .compat caption { text-align:left; font-weight:700; font-size:1.05rem; padding-bottom:10px; }
  .compat th, .compat td { text-align:left; padding:12px 16px 12px 0; border-bottom:1px solid var(--line); vertical-align:top; }
  .compat thead th { font-size:.88rem; color:var(--muted); border-bottom:2px solid var(--ink); }
  .compat tbody th { font-weight:600; }
  .cell-yes { font-weight:700; color:#0d6b43; }
  .cell-dev { color:#8a5200; font-weight:600; }
  .cell-no { color:var(--muted); }

  /* Workflow explorer */
  .workflow-section { border-top:1px solid var(--line); }
  .workflow-tabs { display:flex; gap:8px; flex-wrap:wrap; }
  .workflow-tab { background:var(--white); border:1.5px solid var(--line-strong); border-radius:99px; padding:9px 18px; color:var(--ink); font-size:.95rem; font-weight:600; }
  .workflow-tab[aria-selected="true"] { background:var(--ink); border-color:var(--ink); color:white; }
  .workflow-panel { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:64px; margin-top:22px; padding:36px; border:1px solid var(--line); border-left:6px solid var(--accent); border-radius:var(--r-m); background:var(--white); }
  .workflow-copy h3 { font-size:1.6rem; margin-bottom:14px; }
  .workflow-copy > p:not(.eyebrow) { color:var(--muted); }
  .workflow-copy > .text-link { margin-top:12px; }
  .workflow-steps { list-style:none; padding:0; display:flex; flex-direction:column; }
  .workflow-steps li { display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line); }
  .workflow-steps li:last-child { border-bottom:0; }
  .step-number { display:grid; place-items:center; background:var(--accent); color:var(--ink); width:32px; height:32px; border-radius:50%; flex-shrink:0; font-weight:700; font-size:.9rem; }

  /* Evidence band */
  .evidence-section { display:grid; grid-template-columns:1fr 1fr; gap:72px; background:var(--navy); color:var(--paper); margin:0 calc(-1 * var(--gutter)); padding:72px var(--gutter); }
  .evidence-copy > p:not(.large-copy) { color:#c5d0e6; }
  .evidence-copy .text-link { color:white; margin-top:8px; }
  .evidence-copy .text-link:hover { color:var(--mint); }
  .evidence-rules { margin:24px 0 12px; padding:0; list-style:none; counter-reset:rule; border-top:1px solid #33456f; }
  .evidence-rules li { counter-increment:rule; display:flex; gap:16px; padding:13px 0; border-bottom:1px solid #33456f; }
  .evidence-rules li::before { content:counter(rule); font-weight:700; color:var(--mint); width:1.2em; }

  /* Guides */
  .resource-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .resource-row { display:block; background:var(--white); border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--r-m); padding:22px 24px; text-decoration:none; transition:box-shadow .15s, transform .15s; }
  .resource-row:hover { box-shadow:0 14px 30px -16px #15213a4d; transform:translateY(-2px); }
  .resource-row h3 { font-size:1.2rem; }
  .resource-type { font-size:.88rem; font-weight:600; color:var(--muted); margin-bottom:8px; }
  .resource-row p:not(.resource-type) { margin-top:8px; color:var(--muted); font-size:.98rem; }
  .guide-group { border-top:1px solid var(--line); padding:56px 0; }
  .guide-group:last-of-type { padding-bottom:72px; }
  .crumbs { display:flex; flex-wrap:wrap; gap:8px; font-size:.92rem; font-weight:600; color:var(--muted); margin-bottom:22px; }
  .crumbs a { color:var(--cobalt-dark); }
  .article { max-width:760px; margin:0 auto 80px; }
  .article h1 { font-size:clamp(2.1rem,3.8vw,3.1rem); }
  .article .article-byline { color:var(--muted); font-size:.92rem; margin:18px 0 36px; padding-bottom:22px; border-bottom:1px solid var(--line); }
  .article-lead { font-size:1.25rem; line-height:1.55; margin-top:22px; }
  .article h2 { font-size:1.5rem; margin:40px 0 14px; }
  .article ol, .article ul { padding-left:24px; margin:16px 0; }
  .article li { margin:10px 0; }
  .article li::marker { color:var(--cobalt); font-weight:700; }
  .article pre { background:var(--navy); color:#e4ecff; padding:18px 20px; border-radius:var(--r-m); overflow-x:auto; margin:18px 0; font-size:.9rem; line-height:1.6; }
  .article pre code { background:none; padding:0; color:inherit; font-size:inherit; overflow-wrap:normal; }
  .article .table-scroll { margin:20px 0; }
  .ref-table { font-size:.95rem; }
  .ref-table caption { font-size:.92rem; color:var(--muted); font-weight:600; }
  .definitions { margin:22px 0; }
  .definitions dt { font-weight:700; padding-top:18px; border-top:1px solid var(--line); }
  .definitions dd { margin:6px 0 20px; }
  blockquote { font-family:Manrope,"DM Sans",sans-serif; font-weight:600; font-size:1.3rem; line-height:1.4; letter-spacing:-.015em; padding:6px 0 6px 22px; border-left:4px solid var(--cobalt); margin:34px 0; }
  .article-product { display:flex; gap:20px; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-top:5px solid var(--accent); border-radius:var(--r-m); padding:26px; margin-top:52px; }
  .article .article-product h2 { margin:0 0 8px; font-size:1.35rem; }
  .article-product p { color:var(--muted); }
  .article-product .actions { margin-top:16px; }
  .article-more { margin-top:44px; border-top:1px solid var(--line); }
  .article .article-more h2 { font-size:1.15rem; margin:24px 0 6px; }
  .link-list { list-style:none; padding:0; margin:0; }
  .article .link-list { padding:0; }
  .link-list li { margin:0; border-bottom:1px solid var(--line); }
  .link-list a { display:block; padding:13px 0; font-weight:600; color:var(--cobalt-dark); }
  .security-block { margin-top:40px; }
  .article .security-block ul { list-style:none; padding:0; margin:14px 0 0; border-top:1px solid var(--line); }
  .security-block li { padding:14px 0; margin:0; border-bottom:1px solid var(--line); }

  /* Vector path pages */
  .split-section { display:grid; grid-template-columns:1fr 1.5fr; gap:56px; border-top:1px solid var(--line); padding:56px 0; }
  .section-note { color:var(--muted); margin-top:14px; max-width:340px; }
  .fact-list > div { padding:16px 0; border-bottom:1px solid var(--line); }
  .fact-list > div:first-child { padding-top:0; }
  .fact-list dt { font-weight:700; }
  .fact-list dd { color:var(--muted); margin-top:3px; }
  .other-paths { border-top:1px solid var(--line); padding:56px 0 72px; }
  .other-paths h2 { font-size:1.35rem; margin-bottom:10px; }

  /* FAQ and closing */
  .purchase-faq { border-top:1px solid var(--line); }
  .purchase-faq h2 { margin-bottom:24px; }
  .faq-list { border-top:1px solid var(--line); margin-bottom:20px; }
  .faq-list details { border-bottom:1px solid var(--line); padding:8px 0; }
  .faq-list summary { cursor:pointer; font-size:1.08rem; font-weight:650; min-height:44px; padding:10px 0; }
  .faq-list summary::marker { color:var(--cobalt); }
  .faq-list details p { margin:4px 0 14px; max-width:800px; color:var(--muted); }
  .closing { margin:24px 0 72px; padding:48px; background:var(--cobalt); color:white; border-radius:var(--r-l); display:flex; align-items:center; justify-content:space-between; gap:44px; }
  .closing p { max-width:560px; margin-top:16px; color:#e6eeff; }
  .closing-actions { display:flex; flex-direction:column; align-items:flex-start; gap:6px; flex-shrink:0; }
  .closing .button-primary, .purchase-section .button-primary { background:white; color:var(--cobalt-dark); border-color:white; }
  .closing .button-primary:hover, .purchase-section .button-primary:hover { background:var(--tint); border-color:var(--tint); }
  .closing .text-link, .purchase-section .text-link { color:white; }

  /* About, pilot, contact */
  .about-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:72px; border-top:1px solid var(--line); }
  .about-grid > div:last-child > p { margin-top:20px; }
  .about-grid .text-link { margin-top:16px; }
  .company-visual { padding:26px; border-radius:var(--r-l); background:var(--navy); color:white; }
  .company-visual > p { text-align:center; color:#c5d3f3; margin-top:18px; }
  .family-visual { display:grid; gap:14px; }
  .family-product { display:flex; align-items:center; gap:16px; border:1px solid #ffffff33; background:var(--navy-2); padding:16px; border-radius:var(--r-m); color:white; text-decoration:none; border-left:5px solid var(--accent); }
  .family-product:hover { border-color:white; border-left-color:var(--accent); }
  .family-product strong { display:block; font-family:Manrope,sans-serif; font-size:1.25rem; line-height:1.2; }
  .family-product small { display:block; margin-top:4px; color:#c5d3f3; font-size:.9rem; }
  .family-workbench { --accent:var(--mint); }
  .family-vector { --accent:var(--coral); }
  .family-studio { --accent:var(--cyan); }
  .pilot-layout { display:grid; grid-template-columns:1fr 1.6fr; gap:72px; padding-bottom:80px; }
  .pilot-layout aside h2 { font-size:1.6rem; margin-bottom:16px; }
  .plain-steps { padding-left:22px; margin:20px 0; }
  .plain-steps li { margin-bottom:10px; }
  .privacy-note { font-size:.9rem; color:var(--muted); border-top:1px solid var(--line); padding-top:18px; }
  fieldset { padding:0; margin:0 0 20px; border:0; min-width:0; }
  legend, form > label, .brief-result label { display:block; font-size:.95rem; font-weight:650; margin-bottom:8px; }
  form label span { font-weight:400; color:var(--muted); }
  textarea, input[type="text"], input[type="email"] { width:100%; border:1.5px solid var(--line-strong); background:white; color:var(--ink); padding:12px 14px; border-radius:var(--r-s); line-height:1.55; resize:vertical; margin-bottom:22px; }
  textarea:focus-visible, input:focus-visible { border-color:var(--cobalt); outline-offset:1px; }
  textarea::placeholder, input::placeholder { color:#6a768c; }
  .product-choices { display:flex; flex-wrap:wrap; gap:10px; }
  .product-choices label { display:flex; align-items:center; gap:10px; border:1.5px solid var(--line-strong); border-radius:var(--r-s); padding:11px 16px; background:var(--white); cursor:pointer; }
  .product-choices label:has(:checked) { background:var(--tint); border-color:var(--cobalt); }
  input[type="checkbox"] { width:17px; height:17px; accent-color:var(--cobalt); }
  form[name="contact"] fieldset { margin-bottom:22px; }
  .form-trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .field-error { color:#a11d1d; font-size:.92rem; margin:10px 0; }
  [data-brief-status] { font-size:.95rem; margin:18px 0; }
  .brief-result { border-top:1px solid var(--line); padding-top:28px; }
  .brief-result h2 { font-size:1.6rem; margin-bottom:20px; }
  .brief-result textarea { font:.85rem/1.6 var(--mono); }
  .not-found { padding-bottom:96px; }
  .not-found .button { margin-top:28px; }
}

@layer responsive {
  @media (max-width:1000px) {
    :root { --gutter:28px; }
    .hero, .product-hero { gap:32px; }
    .capabilities { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .card-grid { grid-template-columns:1fr; }
    .workflow-panel, .product-example { gap:32px; padding:28px; }
    .evidence-section, .about-grid, .pilot-layout, .split-section { gap:40px; }
  }
  @media (max-width:900px) {
    :root { --gutter:20px; }
    html { scroll-padding-top:130px; }
    .header-inner { flex-wrap:wrap; min-height:68px; gap:10px; }
    .brand-name { font-size:1.2rem; }
    .brand img { width:38px; height:38px; }
    .menu-toggle { display:block; }
    .site-nav { display:flex; width:100%; flex-wrap:wrap; gap:6px 20px; padding:8px 0 4px; }
    .js-ready .site-nav { display:none; }
    .js-ready .site-nav.is-open { display:flex; }
    .preview-label { display:none; }
    main { padding-top:36px; }
    .section { padding:52px 0; }
    .section-heading { display:block; margin-bottom:26px; }
    .section-heading > p, .section-heading > .text-link { margin-top:14px; }
    .hero, .product-hero, .product-detail, .evidence-section, .about-grid, .pilot-layout, .product-example, .purchase-section, .split-section, .workflow-panel, .board-body { grid-template-columns:1fr; }
    .hero { padding-bottom:48px; }
    .hero-visual, .product-visual { max-width:560px; width:100%; }
    .evidence-section { padding:52px var(--gutter); }
    .resource-list { grid-template-columns:1fr; }
    .product-screenshot { padding:12px; border-radius:var(--r-m); }
    .board { padding:16px; }
    .closing { display:block; padding:32px 24px; margin-bottom:52px; }
    .closing-actions { margin-top:22px; }
    .purchase-section { padding:32px 24px; gap:22px; margin-bottom:52px; }
    .product-example { padding:26px 22px; }
    .split-section, .guide-group, .other-paths { padding:44px 0; }
    .footer-main { grid-template-columns:1fr 1fr; gap:28px; }
    .footer-main > div:first-child { grid-column:1 / -1; }
    .footer-bottom { flex-wrap:wrap; }
    .article { margin-bottom:52px; }
    .article-product { flex-direction:column; }
    .pilot-layout { padding-bottom:48px; }
  }
  @media (max-width:640px) {
    .capabilities, .tool-group dl { grid-template-columns:1fr; }
    .mini-compare th, .mini-compare td { padding:9px 6px; }
    .board-table thead th:nth-child(2), .board-table td:nth-child(2) { display:none; }
  }
  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { transition:none !important; animation:none !important; }
    .card-link:hover, .resource-row:hover { transform:none; }
  }
  @media print {
    .site-header, .site-footer, .closing, .purchase-section, .actions, .workflow-tabs, .article-product, .article-more { display:none; }
    main { padding:0; max-width:none; }
    body { background:white; color:black; }
    .workflow-panel[hidden] { display:block !important; }
    h1 { font-size:28pt; } h2 { font-size:18pt; }
    .section { padding:18px 0; }
    .card, .resource-row { break-inside:avoid; }
  }
}