/* EXPERIMENT: white page below the hero. The nav, the hero and the footer stay dark.
   To drop it, delete the <link> to this file in index.html; nothing else depends on it.

   How it works: every content section is `main .s`. This file re-points the colour tokens from styles.css for those
   sections only, so everything built from tokens (text, borders, chips, form fields, links) flips by itself. The rules
   after the tokens replace the places that hard-code white-at-low-alpha for a dark page (card glass, illustration
   strokes, hairlines, hatching) with the same thing in near-black.

   The footer stays dark on purpose: its logo and watermark are the supplied white logo, which cannot be recoloured, so it
   would vanish on white. The nav and hero are dark by design.

   Text contrast on white (#FFFFFF) and on the darkest card tint (about #F3F3F4), measured:
     --t-head #0A0A0A  19.8:1 / 17.9:1     --t-body #1F1F23  16.4:1 / 14.8:1     --t-2 #3F3F46  10.4:1 / 9.4:1
     --t-3 #52525B  7.7:1 / 7.0:1          --t-4 #62626B  6.0:1 / 5.4:1 (floor: nothing lighter than this)
     --link #1558C9  6.4:1 / 5.8:1         the accent #1E76FA stays for dots, pulses and focus rings only (4.2:1).
   Logged in content/draft.md as a departure from the dark spec. */

main .s {
  --bg: #FFFFFF;
  --recessed: #F5F5F6;          /* form fields, and the ring round the connector dots */
  --border: rgba(10, 10, 10, 0.10);
  --t-head: #0A0A0A;
  --t-body: #1F1F23;
  --t-2: #3F3F46;
  --t-3: #52525B;
  --t-4: #62626B;
  --link: #1558C9;
  background: var(--bg);
  color: var(--t-body);
}

/* Section hairline and honeycomb (neutral near-black hairlines) */
main .s::before { background: linear-gradient(90deg, transparent, rgba(10, 10, 10, 0.14) 20%, rgba(10, 10, 10, 0.14) 80%, transparent); }
main .s--dots::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.78' height='36' viewBox='0 0 20.78 36' fill='none' stroke='%230A0A0A' stroke-opacity='.07' stroke-width='1'%3E%3Cpath d='M0 6L10.39 0L20.78 6M0 6V18M20.78 6V18M0 18L10.39 24L20.78 18M10.39 24V36'/%3E%3C/svg%3E");
}

/* Cards and the two "How Matrix works" frames: light frosted glass (near-black at low alpha, a white top highlight, no drop shadow) */
main .s .card,
main .s .how__col--in, main .s .how__col--out {
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.045), rgba(10, 10, 10, 0.02));
  border-color: rgba(10, 10, 10, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
main .s .card:hover { border-color: rgba(10, 10, 10, 0.2); }

/* Chips, tags, buttons */
main .s .chip { border-color: rgba(10, 10, 10, 0.28); }
main .s .btn--primary { background: #0A0A0A; color: #FFFFFF; }
main .s .btn--primary:hover { background: #26262B; }

/* Illustrations: strokes and fills drawn for a dark card */
main .s .a-line { stroke: rgba(10, 10, 10, 0.55); }
main .s .a-dim { stroke: rgba(10, 10, 10, 0.3); }
main .s .a-acc { stroke: var(--accent); }
main .s [fill="#050505"] { fill: #F6F6F7; }                            /* engine block and port rings: the card colour */
main .s [fill="rgba(255,255,255,0.55)"] { fill: rgba(10, 10, 10, 0.55); }   /* player dots */
main .s [stroke="rgba(255,255,255,0.07)"] { stroke: rgba(10, 10, 10, 0.06); }   /* confidence band */
main .s .glyph { stroke: var(--t-3); }
main .s .glyph--filled { fill: var(--accent); stroke: var(--accent); }

/* What Ponta is, the problem, how it works, Plaiq, transitions, FAQ */
main .s .wpi__chain i { border-top-color: rgba(10, 10, 10, 0.35); }
main .s .prb__icon { background: rgba(10, 10, 10, 0.03); }
main .s .prb__chips li { border-color: rgba(10, 10, 10, 0.3); }
main .s .how__steps::before { background: linear-gradient(90deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.16) 70%, transparent); }
main .s .how__label { background: rgba(10, 10, 10, 0.04); }
main .s .how__node { background: linear-gradient(180deg, rgba(10, 10, 10, 0.04), rgba(10, 10, 10, 0.015)); }
main .s .how__rail { stroke: rgba(10, 10, 10, 0.28); }
main .s .how__hub { background: linear-gradient(180deg, rgba(10, 10, 10, 0.05), rgba(10, 10, 10, 0.015)), #FFFFFF; }
main .s .how__mid::before, main .s .how__mid::after { background: rgba(10, 10, 10, 0.28); }
main .s .trn__trace { background: rgba(10, 10, 10, 0.025); }
main .s .trn__line { stroke: rgba(10, 10, 10, 0.55); }
main .s .trn__break { stroke: rgba(10, 10, 10, 0.35); }
main .s .prf__facts li { border-color: rgba(10, 10, 10, 0.3); }
main .s .prf__scroll { background: rgba(10, 10, 10, 0.025); }
main .s .faq__item[open] { border-color: rgba(10, 10, 10, 0.25); }

@media (max-width: 959.98px) {
  main .s .how__steps::before { background: linear-gradient(180deg, rgba(10, 10, 10, 0.5), rgba(10, 10, 10, 0.12)); }
}