/* struct.css — Bolder "grids & lines" shared system.
   Linked by all content pages (NOT the homepage index.dev.html or placeholder index.html).
   Self-sufficient via var() fallbacks. */
:root { --hair-structural: rgba(255,255,255,0.20); }

.h-rule-structural { width:100%; height:2px; background:var(--hair-structural); border:none; margin:0; }

.b-spec-rows { list-style:none; margin:0; padding:0; border:1px solid var(--hair-bright,rgba(255,255,255,0.12)); border-radius:var(--r-card,4px); overflow:hidden; }
.b-spec-rows li { font-family:'Poppins',sans-serif; font-size:14px; letter-spacing:0; color:rgba(255,255,255,0.82); line-height:1.5; padding:14px 20px; border-top:1px solid var(--hair,rgba(255,255,255,0.07)); display:flex; align-items:baseline; gap:12px; }
.b-spec-rows li:first-child { border-top:none; }
.b-spec-rows li::before { content:''; flex:0 0 auto; width:8px; height:1px; background:rgba(255,255,255,0.55); transform:translateY(-3px); }
@media (hover:hover){ .b-spec-rows li{ transition:background .2s ease,color .2s ease; } .b-spec-rows li:hover{ background:rgba(255,255,255,0.03); color:rgba(255,255,255,0.85);} }
.b-spec-rows.cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--hair,rgba(255,255,255,0.07)); }
.b-spec-rows.cols-2 li { border-top:none; background:#0c1024; }
@media (max-width:900px){ .b-spec-rows.cols-2 { grid-template-columns:1fr; } }
@media (max-width:390px){ .b-spec-rows li { padding:12px 16px; font-size:13px; } }

.b-last-section { position:relative; }
.b-last-section .b-container { position:relative; }
.b-last-cta { display:inline-flex; margin-top:48px; }
@media (min-width:769px){ .b-last-section .b-container { padding-bottom:96px; } .b-last-section .b-container > .b-last-cta { position:absolute; right:40px; bottom:0; margin-top:0; } }
@media (max-width:768px){ .b-last-section .b-container { padding-bottom:0; } .b-last-cta { position:static; display:flex; width:100%; justify-content:center; margin-top:40px; } }

html { background:#0b0f24; }
body { background:transparent; }

/* ── Readability: brighten content greys site-wide ────────────── */
.lead { color: rgba(255,255,255,0.74) !important; }
.body-sm { color: rgba(255,255,255,0.72) !important; }
.sec-index { color: rgba(255,255,255,0.46) !important; } /* raised from 0.42 — WCAG 4.5:1 */
.mono-chip { color: rgba(255,255,255,0.58) !important; }

.struct-lines { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.struct-lines > * { position:absolute; background:var(--hair,rgba(255,255,255,0.07)); }
.struct-lines .v { top:0; bottom:0; width:1px; }
.struct-lines .v-50 { left:50%; }
.struct-lines .v-33 { left:33.333%; }
.struct-lines .v-66 { left:66.667%; }
.bg-surf .struct-lines > .v { background:var(--hair-bright,rgba(255,255,255,0.12)); }
.struct-lines .h-seg { left:40px; right:40px; height:1px; background:var(--hair-bright,rgba(255,255,255,0.12)); }
.struct-lines .h-seg.top { top:0; }
.struct-lines .h-seg.bot { bottom:0; }
.struct-lines .tick { background:var(--hair-structural); }
.struct-lines .tick.h { width:28px; height:1px; }
.struct-lines .tick.v { width:1px; height:28px; }
.struct-lines .tick.tl-h { top:0; left:40px; }
.struct-lines .tick.tl-v { top:0; left:40px; }
@media (max-width:768px){ .struct-lines { display:none; } }

/* ── Retire the old container-bound col-grid (full-bleed body grid replaces it) ── */
.col-grid { display: none !important; }
.struct-lines { display: none !important; }

/* Section-divider hairlines retired site-wide (user: ugly) — gutter grids separate sections now */
hr.h-rule, hr.h-rule-bright, .h-rule, .h-rule-bright { display: none !important; }

/* ── Per-section grid system (gutter lines following each section's structure) ── */
.sec-grid{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.gl-v{ position:absolute; top:0; bottom:0; width:1px; display:none; }
.gl-h{ position:absolute; left:0; right:0; height:1px; display:none !important; }
.gl-w1{ background:rgba(255,255,255,0.10); }
.gl-w2{ background:rgba(255,255,255,0.09); }
.gl-w3{ background:rgba(255,255,255,0.05); }
.gl-fade{ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
.has-sec-grid{ position:relative; }
.has-sec-grid > *:not(.sec-grid){ position:relative; z-index:1; }
@media (max-width:900px){
  .sec-grid .gl-v{ display:none; }
  .sec-grid .gl-h{ background:rgba(255,255,255,0.06); }
}
@media (max-width:768px){ .only-wide{ display:none; } }

/* ── Blueprint background grid (card-derived; fills side margins only, never behind content) ── */
.bp-host{ position:relative; }
.bp-host > .b-container, .bp-host > .container{ position:relative; z-index:1; }
.bp{ display:none; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
  background-size:var(--min) var(--min),var(--min) var(--min),var(--maj) var(--maj),var(--maj) var(--maj); }
.bp-wide{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 8%,transparent 19%,transparent 81%,#000 92%,#000 100%); mask-image:linear-gradient(90deg,#000 0,#000 8%,transparent 19%,transparent 81%,#000 92%,#000 100%); }
.bp-narrow{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 17%,transparent 31%,transparent 69%,#000 83%,#000 100%); mask-image:linear-gradient(90deg,#000 0,#000 17%,transparent 31%,transparent 69%,#000 83%,#000 100%); }
@media (max-width:768px){ .bp{ display:none; } }
/* sec-grid hairlines re-enabled — they layer ABOVE the .bp blueprint grid for variety */
/* (previously retired; now used alongside .bp for per-section detail lines) */

/* ── Scroll-snap removed in favour of dynamic full-viewport sections ─── */

/* Each top-level section (except tall pinned .s-cinema blocks) fills the
   small viewport height and centres its content vertically.
   min-height (not height) so sections taller than the screen can still grow.
   Scoped to home + about only — product/blog/contact pages are untouched.
   Hero is a .hero-viewport div (not a direct main > section), so no
   explicit exclusion is needed.                                            */
.page-home main > section:not(.s-cinema),
.page-about main > section:not(.s-cinema) {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

/* Fix: auto-margins on .b-container collapse width in flex-column containers.
   Explicit width:100% lets max-width:1200px cap it correctly.              */
.page-home main > section:not(.s-cinema) > .b-container,
.page-about main > section:not(.s-cinema) > .b-container {
  width: 100%;
}