/* ============================================================
   DIRECTION B — "Raster"  (structured grid, industrial, green-led)
   Cool-tinted neutrals, visible modular borders, mono spec labels,
   sharper corners. Same content & structure as A.
   ============================================================ */
/* Direction B keeps its own SHAPE language; colors are controlled globally
   (defaults in base.css :root, overridable via the Tweaks palette panel). */
[data-direction="b"]{
  --radius: 4px;
  --radius-sm: 3px;
}

/* ---- tighter, more technical type ---- */
[data-direction="b"] body{ letter-spacing:-0.01em; }
[data-direction="b"] h1,[data-direction="b"] h2{ letter-spacing:-0.025em; }
[data-direction="b"] .btn{ border-radius:3px; }

/* ---- header reads like a control bar ---- */
[data-direction="b"] .site-header{ background: color-mix(in oklab, var(--bg) 92%, transparent); }
[data-direction="b"] .brand-mark{ border-radius:3px; }

/* ---- USP strip: full modular grid with strong rules ---- */
[data-direction="b"] .usp{ background: var(--card); }
[data-direction="b"] .usp-item{ padding:30px 22px; }
[data-direction="b"] .usp-grid .usp-item:first-child{ padding-left:22px; }
[data-direction="b"] .usp-grid .usp-item:last-child{ padding-right:22px; }
[data-direction="b"] .usp-grid{ border-left:1px solid var(--line); }
[data-direction="b"] .usp-grid .usp-item:last-child{ border-right:1px solid var(--line); }
[data-direction="b"] .usp-key{ color: var(--ink); background: var(--bg-alt); padding:3px 7px; border-radius:2px; display:inline-block; }

/* ---- section numbers become big spec markers ---- */
[data-direction="b"] .sec-head{ gap:0; align-items:stretch; border-top:2px solid var(--ink); padding-top:14px; margin-bottom:30px; }
[data-direction="b"] .sec-num{ font-size:14px; color: var(--ink); font-weight:500; border-right:none; padding-right:18px; }
[data-direction="b"] .sec-head-inv{ border-top-color: var(--bg); }
[data-direction="b"] .eyebrow{ color: var(--accent); }

/* ---- hero: spec-sheet block, framed ---- */
[data-direction="b"] .hero{ padding-top: clamp(40px,5vw,72px); }
[data-direction="b"] .hero-inner{ border:1px solid var(--line); background: var(--card); padding: clamp(28px,4vw,56px); gap: clamp(28px,4vw,56px); }
[data-direction="b"] .hero-text h1{ font-weight:600; }
[data-direction="b"] .ph{ border-radius:3px; background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 13px), var(--bg-alt); }
[data-direction="b"] .hero-media{ border-radius:3px; }
[data-direction="b"] .hero-badge{ border-radius:3px; border:2px solid var(--card); }

/* ---- about: framed point grid ---- */
[data-direction="b"] .about-points{ border:1px solid var(--line); background: var(--card); }
[data-direction="b"] .about-points li{ padding:20px; }
[data-direction="b"] .about-points li:first-child{ padding-top:20px; }

/* ---- finder & cards squared ---- */
[data-direction="b"] .finder{ border-radius:4px; }
[data-direction="b"] .fcard{ border-radius:2px; }
[data-direction="b"] .fcard-code{ color: var(--accent); }

/* ---- quality cards as bordered modules, no float ---- */
[data-direction="b"] .qual-grid{ gap:0; border:1px solid var(--line); }
[data-direction="b"] .qual-card{ border:none; border-right:1px solid var(--line); border-radius:0; }
[data-direction="b"] .qual-grid .qual-card:last-child{ border-right:none; }
[data-direction="b"] .qual-tag{ border-radius:2px; background: var(--accent); color: var(--accent-ink); }
@media(max-width:860px){
  [data-direction="b"] .qual-card{ border-right:none; border-bottom:1px solid var(--line); }
  [data-direction="b"] .qual-grid .qual-card:last-child{ border-bottom:none; }
}

/* ---- order channels squared, flat ---- */
[data-direction="b"] .channel{ border-radius:2px; }
[data-direction="b"] .channel-ic{ border-radius:2px; background: var(--bg-alt); color: var(--accent); }
[data-direction="b"] .order-needs li::before{ border-radius:2px; color: var(--ink); }

/* ---- franchise stays dark but green rules ---- */
[data-direction="b"] .franchise{ background: var(--ink); }
[data-direction="b"] .franchise .eyebrow{ color: var(--accent-2); }
[data-direction="b"] .franchise-list li::before{ color: var(--accent-2); }

/* ---- pricing table: rules everywhere, no hover float ---- */
[data-direction="b"] .price-table-wrap{ border-radius:3px; }
[data-direction="b"] .price-table th{ background: var(--bg-alt); }
[data-direction="b"] .price-table .pt-ask{ color: var(--accent); }

/* ---- calc squared, green ---- */
[data-direction="b"] .calc{ border-radius:3px; }
[data-direction="b"] .calc-result-big .calc-result-val{ color: var(--accent); }

/* ---- contact form squared ---- */
[data-direction="b"] .contact-form,
[data-direction="b"] .field input,
[data-direction="b"] .field textarea{ border-radius:3px; }
[data-direction="b"] .contact .eyebrow{ color: var(--accent-2); }