/* ===========================================================================
   Factory OS subpages (solutions / use cases / quiz) — framed-grid system.
   Loaded last (after styles.css, the page's inline <style>, redesign.css).
   Maps the shared subpage components onto the AI Platform vocabulary.
   =========================================================================== */

.fx-sub main#top, .fx-sub main {
  max-width: var(--fx-frame); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  position: relative; z-index: 1; background: var(--paper);
}
.fx-sub main > section { border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 88px) 0; }
.fx-sub main > section:first-child { border-top: 0; }
.fx-sub .divider { border-top: 1px solid var(--line); }
.fx-sub .wrap { max-width: none; padding: 0 var(--fx-pad); }
.fx-sub .section-no { display: none; }

/* type */
.fx-sub h1 { font-size: clamp(2.1rem, 3.7vw, 3.5rem); line-height: 1.02; letter-spacing: -0.025em; max-width: 20ch !important; }
.fx-sub h2 { font-size: clamp(1.8rem, 3.4vw, 2.9rem); line-height: 1.05; }
.fx-sub .eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--muted); }
.fx-sub .eyebrow::before { content: "■"; width: auto; height: auto; background: none; color: var(--teal); font-size: .6rem; }
.fx-sub .lead { color: var(--ink-soft) !important; }
.fx-sub .section-head { max-width: 64ch; }

/* buttons: square */
.fx-sub .btn { border-radius: 2px; }
.fx-sub .btn-primary { background: var(--ink); color: var(--white); }
.fx-sub .btn-primary:hover { background: var(--teal-deep); transform: none; box-shadow: none; }
.fx-sub .btn-ghost { border-color: var(--ink); }
.fx-sub .btn-ghost:hover { background: var(--ink); color: var(--white); transform: none; }

/* everything inside the page: square, no soft shadows (dots stay round) */
.fx-sub main *:not(.status-dot):not(.live-dot):not(.dotc):not(svg):not(svg *) { border-radius: 2px !important; }
.fx-sub main .card, .fx-sub main .tile, .fx-sub main .obligation, .fx-sub main .howstep, .fx-sub main .proof-tile,
.fx-sub main .faq-card, .fx-sub main .artifact-doc, .fx-sub main .problem, .fx-sub main .contrast-col { box-shadow: none !important; }
.fx-sub main .illus-flag::before, .fx-sub main .status-dot { border-radius: 50% !important; }

/* hero: diagram framed like the product console */
.fx-sub .sol-hero, .fx-sub .uc-hero { padding-top: clamp(40px, 5vw, 72px) !important; }
.fx-sub .sol-arch, .fx-sub .uc-arch { border: 1px solid var(--ink) !important; background: var(--white) !important;
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent) !important; }

/* stat strip -> facts cells */
.fx-sub .stat-strip { gap: 0 !important; border: 1px solid var(--line); }
.fx-sub .stat-strip .tile { border: 0 !important; border-right: 1px solid var(--line) !important; background: transparent !important; padding: 1.4rem 1.3rem !important; }
.fx-sub .stat-strip .tile:last-child { border-right: 0 !important; }
.fx-sub .stat-strip .tile .tag, .fx-sub .howstep em, .fx-sub .req-chip, .fx-sub .illus-flag, .fx-sub .tag {
  font-family: var(--font-mono) !important; letter-spacing: .03em !important; text-transform: none !important; }

/* obligations / problems / proof tiles / faq -> cell grids */
.fx-sub .obligations, .fx-sub .problems, .fx-sub .proof-tiles, .fx-sub .faq-grid, .fx-sub .artifact-grid { gap: 0 !important; border: 1px solid var(--line); }
.fx-sub .obligation, .fx-sub .problem, .fx-sub .proof-tile, .fx-sub .faq-card {
  border: 0 !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  background: transparent !important; }
.fx-sub .obligation .ico { border-radius: 2px !important; border-color: var(--ink-soft) !important; color: var(--ink) !important; }
.fx-sub .obligation:hover, .fx-sub .problem:hover, .fx-sub .proof-tile:hover, .fx-sub .faq-card:hover { background: var(--white) !important; transform: none !important; }

/* how-it-works flow: numbered cells */
.fx-sub .howflow { gap: 0 !important; border: 1px solid var(--ink); counter-reset: how; }
.fx-sub .howstep { border: 0 !important; border-right: 1px solid var(--line) !important; background: var(--white) !important; }
.fx-sub .howstep:last-child { border-right: 0 !important; }

/* artefact / evidence document: ink frame */
.fx-sub .artifact-doc { border: 1px solid var(--ink) !important; background: var(--white) !important;
  box-shadow: 10px 10px 0 color-mix(in srgb, var(--ink) 7%, transparent) !important; }

/* illustration cards keep the amber "illustratif" flag, squared */
.fx-sub .illus { border-radius: 2px !important; }
.fx-sub .illus-visual { border-radius: 2px !important; border-color: var(--ink-soft) !important; }

/* sovereignty band -> dark panel inside the frame */
.fx-sub .sov-band { background: var(--ink) !important; color: var(--paper); }
.fx-sub .sov-band h2, .fx-sub .sov-band h3 { color: var(--white); }
.fx-sub .sov-band p { color: #D8D3C7; }
.fx-sub .sov-band .eyebrow { color: #9d998e; }
.fx-sub .sov-band .chip, .fx-sub .sov-band .req-chip { border-color: #5a5850 !important; color: var(--paper) !important; background: transparent !important; font-family: var(--font-mono); font-size: .74rem; }
.fx-sub .sov-band .teal { color: #3CC2B1; }

/* CTA band -> teal band */
.fx-sub .cta-band { background: var(--teal); color: var(--white); text-align: left !important; }
.fx-sub .cta-band h2 { color: var(--white); margin-left: 0 !important; max-width: 20ch; }
.fx-sub .cta-band p { color: color-mix(in srgb, var(--white) 86%, transparent) !important; margin-left: 0 !important; }
.fx-sub .cta-band .eyebrow { color: color-mix(in srgb, var(--white) 80%, transparent); justify-content: flex-start !important; }
.fx-sub .cta-band .eyebrow::before { color: var(--white); }
.fx-sub .cta-band .hero-cta, .fx-sub .cta-band .sol-hero-cta, .fx-sub .cta-band .uc-hero-cta { justify-content: flex-start !important; }
.fx-sub .cta-band .btn-primary { background: var(--ink); color: var(--white); }
.fx-sub .cta-band .btn-primary:hover { background: var(--white); color: var(--ink); }
.fx-sub .cta-band .btn-ghost { border-color: var(--white); color: var(--white); }
.fx-sub .cta-band .btn-ghost:hover { background: var(--white); color: var(--ink); }
.fx-sub .cta-band a:not(.btn) { color: var(--white); }

/* footnotes / notes */
.fx-sub .footnotes, .fx-sub .note-band { font-family: var(--font-mono); font-size: .74rem; }

/* footer framed like the product pages */
.fx-sub footer { padding: 0; border-top: 1px solid var(--line); }
.fx-sub footer .wrap { max-width: var(--fx-frame); margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 2.2rem var(--fx-pad) 2.4rem; }
.fx-sub .foot-col h4 { font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .08em; color: var(--muted); }

@media (max-width: 760px) {
  .fx-sub .stat-strip .tile { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .fx-sub .howstep { border-right: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .fx-sub .obligation, .fx-sub .problem, .fx-sub .proof-tile, .fx-sub .faq-card { border-right: 0 !important; }
}

/* left-aligned bands, chips as square mono tags */
.fx-sub .sov-band .wrap, .fx-sub .cta-band .wrap { text-align: left !important; }
.fx-sub .sov-band h2, .fx-sub .sov-band p { margin-left: 0 !important; margin-right: auto !important; }
.fx-sub .sov-band [class*="row"], .fx-sub .cta-band [class*="row"], .fx-sub .sov-band .chips, .fx-sub .cta-band .chips { justify-content: flex-start !important; }
.fx-sub .sov-band span, .fx-sub .cta-band [class*="row"] span { font-family: var(--font-mono); }
.fx-sub .cta-band .footnotes, .fx-sub .cta-band .footnotes * { color: color-mix(in srgb, var(--white) 78%, transparent) !important; }
.fx-sub .cta-band .footnotes { border-color: color-mix(in srgb, var(--white) 35%, transparent) !important; }
.fx-sub .sov-row, .fx-sub .cred-strip { justify-content: flex-start !important; }
.fx-sub .cred-strip span { background: transparent !important; border: 1px solid color-mix(in srgb, var(--white) 55%, transparent) !important; color: var(--white) !important; font-family: var(--font-mono); font-size: .72rem; }
.fx-sub .sov-row span { background: transparent !important; }
.fx-sub .sov-band em, .fx-sub .sov-band i { color: #b8b3a6 !important; }