/* ============================================================
   SYNTAXA — mobile / responsive layer
   Loaded AFTER syntaxa.css + syntaxa-sections.css so it overrides.
   Desktop layout (>1024px) is untouched.
   ============================================================ */

/* mobile-only controls — hidden on desktop */
.nav-burger{ display:none; background:transparent; border:0; padding:6px; cursor:pointer; line-height:0; }
.nav-burger img{ display:block; width:32px; height:auto; }
.mobile-menu{ display:none; }

/* mobile-only line break — suppressed on desktop, active ≤1024px */
br.brm{ display:none; }

/* hero eyebrow text: full on desktop, short on mobile */
.eyebrow-m{ display:none; }

/* setsumei tab logo: desktop default, mobile wordmark swapped in ≤1024px */
.prod-tab.setsumei .logo-m{ display:none; }

/* ============================================================
   ≤1024px — single-column mobile / tablet layout
   ============================================================ */
@media (max-width:1024px){
  :root{ --pad:18px; }   /* Figma mobile gutter: 375 frame − 339 content = 18px each side */
  html, body{ overflow-x:hidden; }
  body{ min-width:0; font-size:16px; }

  .section, .section--tight{ padding:56px 0; }
  /* section 01 → 02 gap is driven by the "That is why Syntaxa exists" mb (64) */
  .hero + .section{ padding-bottom:0; }
  #platform{ padding-top:0; }

  /* ---------------- NAV ---------------- */
  .nav .wrap{ height:64px; justify-content:space-between; }
  .nav-links{ display:none; }
  .nav-burger{ display:inline-flex; align-items:center; margin-left:auto; }
  .brand img{ height:26px; }

  .mobile-menu{
    display:block; position:fixed; inset:0; z-index:200;
    background:#0b0b0b; padding:0 24px;
    transform:translateX(100%); transition:transform .28s ease; will-change:transform;
    overflow-y:auto;
  }
  .mobile-menu.open{ transform:translateX(0); }
  body.menu-open{ overflow:hidden; }
  .mm-head{ display:flex; align-items:center; justify-content:space-between; height:64px; }
  .mm-head .brand img{ height:24px; }
  .mm-close{ background:transparent; border:0; padding:8px; cursor:pointer; line-height:0; }
  .mm-close img{ display:block; width:22px; height:22px; }
  .mm-links{ display:flex; flex-direction:column; gap:4px; padding:40px 0; }
  .mm-links a{
    font-family:var(--font-mono); font-weight:400; font-size:20px; line-height:2.4;
    letter-spacing:.5px; color:#F5F5F5; text-transform:uppercase;
  }
  .mm-links a:hover{ color:var(--orange-3); }
  .mm-links .mm-cta{ margin-top:28px; width:100%; justify-content:center; height:54px; border-color:#F5F5F5; }

  /* ---------------- TYPE SCALE (Figma mobile spec) ---------------- */
  /* hero title: Orbitron 700 36/48, ls 0, centered */
  h1.display{ font-size:36px; line-height:48px; letter-spacing:0; text-align:center; margin-bottom:24px; }
  /* section title: Orbitron 700 24/31, ls .5 */
  h2.display{ font-size:24px; line-height:31px; letter-spacing:.5px; }
  h3.display{ font-size:26px; }
  /* mono heading (e.g. THE ENVIRONMENT): 20/31, ls .5 */
  .mono-h{ font-size:20px; line-height:31px; letter-spacing:.5px; }
  .mono-h.sm{ font-size:21px; }
  /* lede / body copy: Roboto Mono 400 16/26, ls .5 */
  .lede{ font-size:16px; line-height:26px; letter-spacing:.5px; }
  h2.display + .lede{ margin-top:36px; }   /* title → subtitle */
  #audience .lede{ margin-bottom:24px; }   /* "Built for organizations operating at architectural scale." */
  /* cursor-bullet list items: 16/21, ls .5 (icon gap 16 via 30px pad) */
  .curlist li{ font-size:16px; line-height:21px; letter-spacing:.5px; }
  .kitem{ font-size:16px; line-height:21px; letter-spacing:.5px; }
  .cell{ font-size:16px; line-height:21px; letter-spacing:.5px; }

  /* utility margin retune for mobile */
  .mb-36{ margin-bottom:24px; }
  /* section 01: 36px gap after the Result list, before the dotted divider */
  .hr-dot.mt-64{ margin-top:36px; }
  /* "That is why Syntaxa exists." — uppercase, 64px gap to section 02 */
  .lede.orange{ text-transform:uppercase; margin-bottom:64px; }

  /* section markers: 14/21, ls .8, lowercase, #AAAAAA, mb 8 */
  .marker{ flex-wrap:wrap; gap:12px; margin-bottom:8px; }
  .marker .txt{ white-space:normal; letter-spacing:.8px; color:#AAAAAA; }
  .marker .txt b{ color:#AAAAAA; font-weight:400; }

  /* --- section 02 (platform) panels — Figma mobile spec --- */
  /* box: 0.5px dashed #F5F5F5 (3,3), padding 16, 24px gap between boxes, 36 below title */
  #platform .two-col{ gap:24px !important; margin-top:36px; }
  #platform .panel{ padding:16px; gap:0; }
  /* STRUCTURAL TRUTH: 20/31 ls .5 uppercase #AAAAAA mb 24 */
  #platform .panel-label{ font-size:20px; line-height:31px; letter-spacing:.5px; color:#AAAAAA; text-transform:uppercase; margin-bottom:24px; }
  /* "How the system is actually built." 20/31 ls .5 uppercase #F5F5F5 mb 16 */
  #platform .panel .mono-h.sm{ font-size:20px; line-height:31px; letter-spacing:.5px; color:#F5F5F5; margin-bottom:16px; }
  /* description: 16/26 ls .5 #F5F5F5 */
  #platform .panel .dim{ font-size:16px; line-height:26px; letter-spacing:.5px; color:#F5F5F5; }

  /* --- section 03 (why both matter) — same system as the platform/cards --- */
  #why .two-col{ gap:24px !important; margin-top:36px; }
  #why .two-col .panel-label{ font-size:20px; line-height:31px; letter-spacing:.5px; margin-bottom:24px; }
  #why .two-col .panel .mono-h.sm{ font-size:20px; line-height:31px; letter-spacing:.5px; margin-bottom:16px; }
  #why .two-col .panel .dim{ font-size:16px; line-height:26px; letter-spacing:.5px; margin-bottom:24px; }
  #why .two-col .panel .blue, #why .two-col .panel .green{ font-size:16px; line-height:26px; letter-spacing:.5px; }
  #why .ctrl-lines, #why .ctrl-together{ font-size:16px; line-height:26px; letter-spacing:.5px; }

  /* --- section 04 (why now) — same system --- */
  /* lede → asterisk panel: 24px (kill the desktop mt-64 so the lede's own mb governs) */
  #whynow .lede{ margin-bottom:24px; }
  #whynow .panel.mt-64{ margin-top:0; }
  /* inner heading+list of the asterisk panel: stack tight, not the desktop 80/64.
     margin-top 54 = 16 panel pad + 30 star box + 24 gap → 24px below the top corner stars */
  #whynow .panel .two-col{ gap:24px !important; margin-top:54px !important; }
  /* the two list headings (mb-48 on desktop) */
  #whynow .mono-h.mb-48{ margin-bottom:24px; }
  /* inline-styled body paragraphs in the asterisk panel (font-size:20 / mb:64) → 16/26, mb 24 */
  #whynow .panel > p[style]{ font-size:16px !important; line-height:26px !important; letter-spacing:.5px; margin-bottom:24px !important; }
  /* last paragraph: extra bottom space so the bottom corner stars sit 24px below it */
  #whynow .panel > p[style]:last-child{ margin-bottom:54px !important; }
  #whynow .hr-dot{ margin:24px 0; }
  /* "--> Syntaxa exists to solve those problems." (wrap-level p): 16/21 ls .5 uppercase #F5F5F5, 24px above */
  #whynow > .wrap > p[style]{ font-size:16px !important; line-height:21px !important; margin-top:24px; }
  /* corner asterisks: pull from the desktop 36px inset to 16px to match the smaller padding */
  .aster[style*="top:36px"]{ top:16px !important; }
  .aster[style*="bottom:36px"]{ bottom:16px !important; }
  .aster[style*="left:36px"]{ left:16px !important; }
  .aster[style*="right:36px"]{ right:16px !important; }

  /* ---------------- HERO ---------------- */
  .hero{ padding:28px 0 40px; }
  .hero .mesh{ height:480px; right:-130px; top:60px; opacity:.35; }
  /* eyebrow already 14/21 .8 lowercase #AAAAAA — just the mb */
  .hero-eyebrow{ margin-bottom:24px; }
  /* body copy: Roboto Mono 700 16/26, ls .5, centered, #F5F5F5 */
  .hero-body{
    max-width:none; gap:22px; text-align:center; color:#F5F5F5;
    font-weight:700; font-size:16px; line-height:26px; letter-spacing:.5px;
  }
  .hero-body .hl{ color:#F5F5F5; }
  .hero .btns{ flex-direction:column; align-items:center; gap:16px; margin-top:36px; }
  /* primary (btn-x) buttons everywhere on mobile use the large frame-only SVG, 62 tall, 8/16 pad.
     (the original l-mobile.svg has the label baked in as a path → it double-rendered behind the <a>) */
  .btn-x, .btn-x:hover{ background-image:url("../assets/primary-button-l-frame-mobile.svg"); }
  .btn-x{ height:62px; padding:8px 16px; font-weight:500; font-size:16px; line-height:26px; letter-spacing:.5px; }
  /* hero buttons: capped at 253, centered */
  .hero .btn-x, .hero .btn-o{ width:100%; max-width:253px; height:62px; padding:8px 16px; font-weight:500; font-size:16px; line-height:26px; letter-spacing:.5px; }
  .hero .btn-o{ border-width:1px; }
  .hero .btn-t{ text-align:center; padding-top:6px; }

  /* enable the mobile-only break + swap eyebrow text */
  br.brm{ display:inline; }
  /* desktop-only breaks (equal-height hacks) collapse on mobile */
  br.brd{ display:none; }
  .eyebrow-d{ display:none; }
  /* desktop-only blocks hidden on mobile */
  .d-only{ display:none !important; }
  .eyebrow-m{ display:inline; }

  /* terminal flows between headline and body (moved in DOM) */
  .term{
    position:static; width:auto; right:auto; top:auto;
    margin:0 0 32px; padding:22px 18px; font-size:13px; line-height:1.75;
    box-shadow:none;
  }
  .term .ln{ word-break:break-word; }

  /* ---------------- SECTION RHYTHM ----------------
     Normalise the gap from each section's content to the next section's marker to 64px.
     Most sections stack padding-bottom 56 + padding-top 56 (=112); pull the next section
     up by its measured excess. (02→#platform and #why→#whynow already net 64.) */
  #shift{ margin-top:-32px; }      /* hero → 01: 96 → 64 */
  #why{ margin-top:-48px; }        /* #platform → 03: 112 → 64 */
  #audience{ margin-top:-64px; }   /* #whynow → 05: 128 → 64 */
  #different{ margin-top:-48px; }  /* 05 → 06: 112 → 64 */
  #closing{ margin-top:-64px; }    /* 06 → closing (no marker): first content 64 below prev */
  #contact{ margin-top:-48px; }    /* closing → contact: 112 → 64 */

  /* ---------------- STACK GRIDS / PANELS ---------------- */
  .two-col{ grid-template-columns:1fr !important; gap:24px !important; }
  .panel{ padding:16px; }
  #why .two-col .panel{ padding:16px; }
  #why .ctrl{ padding:16px; gap:24px; }
  #platform .prodhead{ margin-top:36px; }   /* 36px gap below the Behavioral Confidence box, above the Setsumei tab */
  #why{ padding-bottom:56px; }

  /* numbered key grids → each pair stacks; 16px dash↔text + 16px between the pair;
     top dash with end-dots (orange by default; setsumei=blue / runqc=green override) */
  .kgrid{ grid-template-columns:1fr !important; gap:0 !important; position:relative; }
  .kgrid .row{ grid-template-columns:1fr !important; padding:8px 0; gap:16px; }  /* 8+8 across the divider = 16px item↔item, matching the 16px within-pair gap */
  .kgrid .row:first-child{
    padding-top:8px;
    background-image:
      repeating-linear-gradient(90deg, var(--orange) 0 3px, transparent 3px 6px),
      repeating-linear-gradient(90deg, var(--orange) 0 3px, transparent 3px 6px);
    background-size:100% 1px, 100% 1px;
    background-position:0 0, 0 100%;
    background-repeat:no-repeat;
  }
  .kgrid::before, .kgrid::after{
    content:""; position:absolute; top:0; width:7px; height:7px; border-radius:50%;
    background:var(--orange); pointer-events:none;
  }
  .kgrid::before{ left:0;  transform:translate(-50%,-50%); }
  .kgrid::after{  right:0; transform:translate(50%,-50%); }
  /* last row: no trailing divider/end-dots (a separator only sits between items) */
  .kgrid .row:last-child:not(:first-child){ background-image:none; }
  .kgrid .row:last-child::before, .kgrid .row:last-child::after{ display:none; }

  /* "not another" cells → 2-up grid (cell type set in the type-scale block above) */
  .cellgrid{ grid-template-columns:1fr 1fr; gap:16px; }
  /* min-width:0 so long words don't widen one column and squeeze the other → equal cells */
  .cellgrid .cell{ min-width:0; }
  /* section 06 paragraph rhythm: title→content 36, label→cells 24 */
  #different .mt-48{ margin-top:36px; }
  #different .mb-32{ margin-bottom:24px; }

  /* big inline mono statement paragraphs → 16/26 */
  .section > .wrap > p[style]{ font-size:16px !important; line-height:26px !important; letter-spacing:.5px; }

  /* ---------------- PRODUCT BLOCKS ---------------- */
  .prodhead{ display:block; }
  #runqc{ text-align:left; }
  /* tab: full width, 16px padding, logo aligned to the start (left) */
  .prod-tab{ display:flex; width:100%; justify-content:flex-start; padding:16px; font-size:24px; }
  .prod-tab img{ height:26px; }
  /* swap to the mobile setsumei wordmark */
  .prod-tab.setsumei .logo-d{ display:none; }
  .prod-tab.setsumei .logo-m{ display:block; height:32px; width:auto; }

  .prodblock .inner,
  .prodblock.setsumei .inner,
  .prodblock.runqc .inner{ grid-template-columns:1fr; gap:20px; }

  /* logo → heading gap = 16 (card top padding) */
  .prodblock.setsumei .inner > div:first-child{ min-height:auto; padding:16px 24px 24px; }
  /* accent dot → bottom-left on mobile */
  .prodblock.setsumei .inner > div:first-child::after{ left:0; right:auto; transform:translate(-50%,50%); }
  .prodblock.runqc .inner > div:last-child{ min-height:auto; padding:16px 24px 24px; }
  /* hide stats card + grid visuals on mobile */
  .prodblock.runqc .runqc-left{ display:none; }

  /* product headings: 20/31 ls .5 uppercase #F5F5F5 */
  .prodblock.setsumei .mono-h.sm, .prodblock.runqc .mono-h.sm{ font-size:20px; line-height:31px; letter-spacing:.5px; color:#F5F5F5; }
  /* product body copy: 16/26 ls .5 #F5F5F5 */
  .prodblock.setsumei .dim, .prodblock.runqc .dim{ font-size:16px; line-height:26px; letter-spacing:.5px; color:#F5F5F5; }
  /* product list items: 16/21 ls .5 uppercase #F5F5F5 */
  .prodblock.setsumei .kitem, .prodblock.runqc .kitem{ font-size:16px; line-height:21px; letter-spacing:.5px; color:#F5F5F5; }

  /* --- SETSUMEI card spacing (Figma): heading + every block mb 24 --- */
  .prodblock.setsumei .mono-h.sm{ margin-bottom:24px; }
  .prodblock.setsumei .dim,
  .prodblock.setsumei .dim:has(+ .kgrid),
  .prodblock.setsumei .dim:has(+ .btns){ margin-top:0; margin-bottom:24px; }
  .prodblock.setsumei .dim.mt-48{ margin-top:0; }
  .prodblock.setsumei .kgrid{ margin-bottom:24px; position:relative; }
  /* 16px gap dash↔text (padding) and 16px between the two items in a pair (gap) */
  .prodblock.setsumei .kgrid .row{ padding:16px 0; gap:16px; }
  /* first row gets a top dash too (in addition to its bottom one) */
  .prodblock.setsumei .kgrid .row:first-child{
    padding-top:16px;
    background-image:
      repeating-linear-gradient(90deg, #4B71C6 0 3px, transparent 3px 6px),
      repeating-linear-gradient(90deg, #4B71C6 0 3px, transparent 3px 6px);
    background-size:100% 1px, 100% 1px;
    background-position:0 0, 0 100%;
    background-repeat:no-repeat;
  }
  /* the two end-dots for that top dash — real circles (not clipped) like the rows below */
  .prodblock.setsumei .kgrid::before,
  .prodblock.setsumei .kgrid::after{
    content:""; position:absolute; top:0; width:7px; height:7px; border-radius:50%;
    background:#4B71C6; pointer-events:none;
  }
  .prodblock.setsumei .kgrid::before{ left:0;  transform:translate(-50%,-50%); }
  .prodblock.setsumei .kgrid::after{  right:0; transform:translate(50%,-50%); }
  /* keep the bottom divider + end-dots on the last row (Figma shows a dash after 08_Blast Radius) */
  .prodblock.setsumei .kgrid .row:last-child{
    background-image:repeating-linear-gradient(90deg,#4B71C6 0 3px,transparent 3px 6px);
    background-size:100% 1px; background-position:0 100%; background-repeat:no-repeat;
  }
  .prodblock.setsumei .kgrid .row:last-child::before,
  .prodblock.setsumei .kgrid .row:last-child::after{ display:block; }

  /* --- RUNQC card spacing (mirror of Setsumei; green dividers) --- */
  .prodblock.runqc .mono-h.sm{ margin-bottom:24px; }
  .prodblock.runqc .dim,
  .prodblock.runqc .dim:has(+ .kgrid),
  .prodblock.runqc .dim:has(+ .btns){ margin-top:0; margin-bottom:24px; }
  .prodblock.runqc .dim.mt-48{ margin-top:0; }
  .prodblock.runqc .kgrid{ margin-bottom:24px; position:relative; }
  .prodblock.runqc .kgrid .row{ padding:16px 0; gap:16px; }
  .prodblock.runqc .kgrid .row:first-child{
    padding-top:16px;
    background-image:
      repeating-linear-gradient(90deg, #1E6B24 0 3px, transparent 3px 6px),
      repeating-linear-gradient(90deg, #1E6B24 0 3px, transparent 3px 6px);
    background-size:100% 1px, 100% 1px;
    background-position:0 0, 0 100%;
    background-repeat:no-repeat;
  }
  .prodblock.runqc .kgrid::before,
  .prodblock.runqc .kgrid::after{
    content:""; position:absolute; top:0; width:7px; height:7px; border-radius:50%;
    background:#1E6B24; pointer-events:none;
  }
  .prodblock.runqc .kgrid::before{ left:0;  transform:translate(-50%,-50%); }
  .prodblock.runqc .kgrid::after{  right:0; transform:translate(50%,-50%); }

  /* drop empty list cells (e.g. RunQC's lone 07_ item) so they add no phantom gap */
  .kitem:empty{ display:none; }

  .prodblock .btn-x{ width:100%; }

  /* hide the Setsumei visuals column (source snippet + dependency graph) on mobile */
  .prodblock.setsumei .inner > div:last-child{ display:none; }

  /* ---------------- FLOW (UNDERSTAND→FIX→TEST→SHIP) — 2×2 cycle ---------------- */
  /* flow straddles the card's bottom border and hangs below it, like desktop/Figma */
  #why .ctrl{ padding-bottom:40px; margin-bottom:97px; }   /* 97 = flow hang (~145) − 56 #why pad-bottom + 8; with #whynow's 56 pad-top → 64px from the boxes to "04 · why now" */
  #why .ctrl .flow{
    position:absolute; left:23px; right:23px; bottom:0;   /* 23px inset → 142.4px boxes (Figma) */
    transform:translateY(calc(100% - 16px));   /* top row overlaps the card's bottom border by 16px */
    margin:0; z-index:2;
    display:grid; gap:0;
    grid-template-columns:1fr 23.2px 1fr;       /* 23.2px gutter = Figma box gap */
    grid-template-rows:auto 23.2px auto;
    grid-template-areas:
      "und  a1  fix"
      ".    .   a2"
      "ship a3  test";
    align-items:center;
  }
  #why .ctrl .flow > :nth-child(1){ grid-area:und;  }
  #why .ctrl .flow > :nth-child(2){ grid-area:a1;   }
  #why .ctrl .flow > :nth-child(3){ grid-area:fix;  }
  #why .ctrl .flow > :nth-child(4){ grid-area:a2;   }
  #why .ctrl .flow > :nth-child(5){ grid-area:test; }
  #why .ctrl .flow > :nth-child(6){ grid-area:a3;   }
  #why .ctrl .flow > :nth-child(7){ grid-area:ship; }
  .flow .step{ flex:none; width:auto; font-size:15px; }
  /* override desktop's padding:36px (high specificity) → Figma box: 142.4×69, padding 24, line-height 21; min-width:0 makes the two columns equal */
  #why .ctrl .flow .step{ padding:24px 8px; min-width:0; line-height:21px; }
  #why .ctrl .flow .arrow{ display:flex; flex:none; width:auto; margin:0; }
  /* A2 — vertical, pointing down (FIX → TEST) */
  #why .ctrl .flow > :nth-child(4){ flex-direction:column; justify-self:center; height:23.2px; }
  #why .ctrl .flow > :nth-child(4) .dash{
    width:1px; height:100%; flex:1;
    background:repeating-linear-gradient(to bottom,currentColor 0 4px,transparent 4px 8px);
  }
  #why .ctrl .flow > :nth-child(4) .ah{ margin:-2px 0 0; transform:rotate(135deg); }
  /* A3 — horizontal, pointing left (TEST → SHIP) */
  #why .ctrl .flow > :nth-child(6){ flex-direction:row-reverse; }
  #why .ctrl .flow > :nth-child(6) .ah{ margin:0 -2px 0 0; transform:rotate(225deg); }

  /* ---------------- BUYERS (section 05) ---------------- */
  .two-col.buyers{ margin-top:36px; }
  .buyers .bhead{ font-size:20px; line-height:31px; letter-spacing:.5px; padding:16px; }
  .buyers .bbody{ padding:16px; }

  /* ---------------- CTA / closing ---------------- */
  /* no dashed frame on mobile (per reference): kill the bg-gradient border + padding so
     content (and the full-width buttons) runs edge-to-edge of the wrap */
  .cta{ display:flex; flex-direction:column; gap:24px; padding:0; background-image:none; }
  .cta > div{ display:contents; }
  /* closing statement: 24/31 display, right-aligned (per reference) */
  .cta .big{ order:1; text-align:right; font-size:24px; line-height:31px; }
  /* quote box: Roboto Mono 400 16/21, ls .5, uppercase, right-aligned, #AAAAAA */
  .cta .quote{ order:2; max-width:none; font-size:16px; line-height:21px; letter-spacing:.5px; text-align:right; }
  .cta .stack{ order:3; width:100%; max-width:none !important; margin-top:0; align-self:stretch; }
  .cta .meshbox{ order:4; margin-top:0; }
  /* swap the desktop grid SVG for the mobile-specific PNG */
  .cta .meshbox{ content:url("../assets/grid-visual-mobile.png"); }
  .cta .btn-o.full{ width:100%; height:62px; font-size:16px; line-height:26px; letter-spacing:.5px; }

  /* ---------------- CONTACT ---------------- */
  .contact-top{ grid-template-columns:1fr; gap:36px; align-items:start; }
  .contact .cta-btns{ width:100%; margin-left:0; }
  .contact .btn-o.full{ height:62px; font-size:16px; line-height:26px; letter-spacing:.5px; }
  /* mobile-specific contact visuals: background grid + centered cylinder figure.
     anchor the grid's bottom above the squares/installer so they sit on plain bg
     (the squares + installer + section padding is a fixed ~140px band) */
  .contact .grid-floor{ content:url("../assets/grid-contact-mobile.png"); opacity:1; height:calc(100% - 240px); }
  .cylinder-wrap{ margin-top:32px; text-align:center; }
  /* cylinder figure sized per spec ~147×182, centered */
  .cylinder-wrap img{ content:url("../assets/grid-figure-mobile.png"); width:147px; height:182px; max-width:100%; margin-left:0; }
  .squares{ margin-top:40px; height:80px; align-items:center; gap:28px; }
  .installer{ margin-top:0; }

  /* ---------------- FOOTER ---------------- */
  .footer{ padding:56px 0 48px; }
  .footer .wrap{ display:flex; flex-direction:column; align-items:center; text-align:center; }
  .f-social{ position:static; order:3; margin:8px 0 32px; }
  .f-tag{ display:none; }
  .f-brand{ order:4; margin:0 0 20px; }
  .f-brand .f-logo-d{ display:none; }
  .f-brand .f-logo-m{ display:block; height:auto; width:200px; max-width:70vw; }
  .f-cols{ order:2; grid-template-columns:1fr; gap:0; margin-bottom:24px; }
  .f-col{ margin-bottom:0; }
  .f-col h4{ display:none; }
  /* footer links: Roboto Mono 400 16/26, ls .5, #F5F5F5 */
  .f-col a{ margin-bottom:18px; font-size:16px; line-height:26px; letter-spacing:.5px; color:#F5F5F5; }
  .f-cols .f-col:nth-of-type(2){ display:none; }   /* Reference links live in the hamburger menu on mobile */
  /* terminal block: Roboto Mono 400 16/26, ls .5, centered, #F5F5F5, mb 24 */
  .f-term{ order:1; margin-bottom:24px; font-size:16px; line-height:26px; letter-spacing:.5px; text-align:center; color:#F5F5F5; }
  /* copy stacks into 3 lines; the " | " separators drop away on mobile */
  /* keep the HTML casing on mobile: "© 2026 Syntaxa Inc." and "Made in terminal" */
  .f-copy{ order:5; display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:28px; font-size:16px; line-height:26px; letter-spacing:.5px; text-align:center; text-transform:none; }
  .f-copy .f-sep{ display:none; }
  .cookie{ order:6; text-align:center; }
  /* let the cookie notice wrap naturally on mobile (drop the desktop hard break) */
  .cookie br{ display:none; }
}

/* ============================================================
   ≤520px — small phones
   ============================================================ */
@media (max-width:520px){
  /* h1/h2/.mono-h/.cta .big now governed by the Figma mobile spec in the ≤1024 block */
  .term{ font-size:12px; padding:18px 14px; }
  .prod-tab{ font-size:21px; padding:18px; }
  /* flow grid + box padding governed by the Figma spec in the ≤1024 block */
  .flow .step{ font-size:13px; }
}