/* ============================================================ Force Majeure, shared design system. One codebase, two skins. Skin is set on (cinematic dark) or (sober white enterprise). Geometry is sharp on purpose: tiny radii, corner brackets, hairline rules, monospace labels. No soft bento cards. ============================================================ */ :root{ --bg:#05070c; --bg-2:#0a0f1a; --panel:#0d1422; --panel-2:#101a2c; --ink:#eef2f7; --ink-mid:#c2ccd9; --ink-soft:#8b97a8; --ink-faint:#76829a; --amber:#f2b541; --amber-deep:#c2700a; --line:#23304a; --rule:#c99a4e; --red:#ef4444; --green:#34d399; --blue:#5a8fd6; --maxw:1180px; --fs-serif:'Playfair Display',Georgia,serif; --fs-sans:'Inter',system-ui,sans-serif; --fs-mono:'JetBrains Mono',ui-monospace,monospace; } /* ---- the white enterprise skin ---- */ body[data-skin="brief"]{ --bg:#f6f5f0; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#faf9f4; --ink:#141d29; --ink-mid:#414c5e; --ink-soft:#686f7e; --ink-faint:#686f7e; --amber:#985809; --amber-deep:#8a4f08; --line:#dcd7c9; --rule:#1f2a3a; --red:#b4231f; --green:#1f7a52; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--fs-sans);line-height:1.6; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} .mono{font-family:var(--fs-mono)} .serif{font-family:var(--fs-serif)} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .amber{color:var(--amber)} /* ---- sharp geometry: corner brackets ---- */ .framed{position:relative;border:1px solid var(--line);border-radius:2px;background:var(--panel)} .framed::before,.framed::after{content:"";position:absolute;width:14px;height:14px} .framed::before{top:-1px;left:-1px;border-top:2px solid var(--amber);border-left:2px solid var(--amber)} .framed::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--amber);border-right:2px solid var(--amber)} /* ---- type ---- */ .kicker{font-family:var(--fs-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:14px} body[data-skin="room"] .kicker{color:var(--amber)} h1,h2,h3{font-family:var(--fs-serif);font-weight:700;color:var(--ink);line-height:1.1} .h-xl{font-size:clamp(34px,5vw,52px)} .h-lg{font-size:clamp(26px,3.4vw,36px)} .h-md{font-size:clamp(20px,2.4vw,26px)} p.lead{font-size:clamp(15px,1.6vw,17px);color:var(--ink-mid);max-width:60ch} .muted{color:var(--ink-soft)} .section{padding:64px 0} .section-tight{padding:42px 0} .rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--fs-sans);font-size:14px;font-weight:600; padding:11px 18px;border-radius:2px;border:1px solid transparent;cursor:pointer;transition:.16s;letter-spacing:.01em} .btn-amber{background:var(--amber);color:#1a1305;border-color:var(--amber)} .btn-amber:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn-ghost{border-color:var(--line);color:var(--ink-mid);background:transparent} .btn-ghost:hover{border-color:var(--amber);color:var(--ink)} .btn-wire{border-color:var(--amber-deep);color:var(--amber);background:transparent} .btn-wire:hover{background:rgba(242,181,65,.08)} body[data-skin="brief"] .btn-solid{background:var(--rule);color:#fff;border-color:var(--rule)} body[data-skin="brief"] .btn-solid:hover{filter:brightness(1.12)} .btn-row{display:flex;gap:12px;flex-wrap:wrap} /* ---- top nav ---- */ .nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(9px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px} .brand{font-family:var(--fs-serif);font-weight:900;font-size:19px;letter-spacing:.02em;color:var(--ink)} .brand .am{color:var(--amber)} .brand .tag{font-family:var(--fs-mono);font-size:9px;letter-spacing:.16em;color:var(--ink-faint);margin-left:8px;text-transform:uppercase} .nav-links{display:flex;align-items:center;gap:24px} .nav-links a{font-family:var(--fs-mono);font-size:12px;letter-spacing:.05em;color:var(--ink-soft);text-transform:uppercase} .nav-links a:hover,.nav-links a.active{color:var(--ink)} .nav-cta{display:flex;align-items:center;gap:14px} .nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:2px;color:var(--ink); width:38px;height:34px;font-size:18px;cursor:pointer} /* ---- gateway hero (room) ---- */ .hero{position:relative;min-height:clamp(560px,82vh,760px);overflow:hidden; background:radial-gradient(ellipse at 26% 28%,rgba(194,112,10,.13),transparent 46%), radial-gradient(ellipse at 80% 72%,rgba(90,143,214,.08),transparent 52%), linear-gradient(180deg,#05070c,#0a0f1a 60%,#070b14)} .hero-map{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.66;pointer-events:none} .hero-scrim{position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(4,6,12,.93) 0%,rgba(4,6,12,.5) 38%,rgba(4,6,12,0) 70%), linear-gradient(180deg,rgba(4,6,12,.55) 0%,transparent 22%,transparent 74%,rgba(4,6,12,.8) 100%)} .hero-inner{position:relative;z-index:3;max-width:760px;padding:48px 0 40px} .hero h1{color:#fff;margin-bottom:16px} .hero h1 .am{color:var(--amber)} /* credential ribbon */ .creds{position:relative;z-index:3;display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .creds span{font-family:var(--fs-mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-soft); padding:9px 16px;border-right:1px solid var(--line)} .creds b{color:var(--amber);font-weight:500} /* first-of-its-kind badge */ .firstkind{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--amber-deep);border-radius:2px; padding:8px 13px;margin:4px 0 22px;max-width:600px} .firstkind .pill{font-family:var(--fs-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase; background:var(--amber);color:#1a1305;padding:3px 7px;border-radius:2px;white-space:nowrap} .firstkind .txt{font-size:12.5px;color:var(--ink-mid)} /* the two doors */ .doors{position:relative;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:940px;margin-top:16px} .door{padding:32px 30px 28px;cursor:pointer;transition:.18s;background:linear-gradient(180deg,rgba(13,20,34,.9),rgba(7,11,20,.94))} .door:hover{transform:translateY(-2px)} .door:hover .go{color:#ffcf5e} .door .dn{font-family:var(--fs-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:14px} .door h3{font-size:clamp(24px,3vw,30px);color:#fff;margin-bottom:10px;line-height:1.06} .door p{font-size:15.5px;color:var(--ink-mid);margin-bottom:20px;line-height:1.55} .door .go{font-family:var(--fs-mono);font-size:13px;color:var(--amber);letter-spacing:.04em;transition:.16s} /* wire ticker */ .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;white-space:nowrap;background:var(--panel)} .ticker .track{display:inline-block;padding:9px 0;animation:scroll 40s linear infinite; font-family:var(--fs-mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.04em} .ticker .track span{margin:0 26px}.ticker .track b{color:var(--amber);font-weight:500} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .ticker:hover .track{animation-play-state:paused} /* annotated stills */ .stills{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .still{overflow:hidden} .still .shot{height:140px;position:relative;border-bottom:1px solid var(--line); background:radial-gradient(ellipse at 40% 38%,rgba(194,112,10,.18),transparent 60%),linear-gradient(180deg,#0a1322,#070b16)} .still .shot .lbl{position:absolute;left:10px;top:9px;font-family:var(--fs-mono);font-size:9px;letter-spacing:.12em;color:var(--ink-faint)} .still .cap{padding:12px 14px} .still .cap b{display:block;color:var(--ink);font-size:13px;margin-bottom:3px} .still .cap span{font-size:12px;color:var(--ink-soft)} .blip{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px 2px rgba(242,181,65,.55)} /* map legend (game-state key) */ .map-legend{position:absolute;right:24px;top:82px;z-index:3;display:flex;flex-direction:column;gap:7px; background:rgba(5,8,17,.6);border:1px solid var(--line);border-radius:2px;padding:11px 13px;backdrop-filter:blur(3px)} .map-legend .lg{display:flex;align-items:center;gap:9px;font-family:var(--fs-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-mid);text-transform:uppercase} .map-legend .dot{width:9px;height:9px;border-radius:2px;flex:none} @media(max-width:880px){.map-legend{display:none}} /* enriched after-action report */ .aar .meta{font-family:var(--fs-mono);font-size:9px;color:var(--ink-faint);letter-spacing:.07em;margin:-7px 0 13px} .aar .verdict-row{display:flex;justify-content:space-between;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:2px;padding:9px 11px;margin-bottom:13px} .aar .verdict-row .vl{font-family:var(--fs-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} .aar .verdict-row .vv{font-family:var(--fs-serif);font-size:16px;font-weight:700;color:var(--green)} .aar .fin{display:flex;border:1px solid var(--line);border-radius:2px;margin-bottom:14px} .aar .fin div{flex:1;padding:9px 8px;border-right:1px solid var(--line);text-align:center} .aar .fin div:last-child{border-right:0} .aar .fin .fn{font-family:var(--fs-serif);font-size:15px;font-weight:700;color:var(--ink)} .aar .fin .fl{font-size:8.5px;color:var(--ink-soft);margin-top:2px;text-transform:uppercase;letter-spacing:.04em} .aar .subh{font-family:var(--fs-mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);margin:4px 0 6px} .aar .sig{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-mid);padding:5px 0;border-top:1px solid var(--line)} .aar .sig:first-of-type{border-top:0} .aar .sig b{color:var(--ink);font-family:var(--fs-mono);font-size:10.5px;font-weight:500} .aar .sig .up{color:var(--green)}.aar .sig .down{color:var(--red)} /* generic grid + cards */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .card{padding:20px;background:var(--panel);border:1px solid var(--line);border-radius:2px} .card .ic{font-family:var(--fs-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:9px} body[data-skin="room"] .card .ic{color:var(--amber)} .card h3{font-size:18px;margin-bottom:7px} .card p{font-size:13.5px;color:var(--ink-soft)} .accent-l{border-left:2px solid var(--amber)} /* stat row */ .stats{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:2px;overflow:hidden} .stats .stat{flex:1;min-width:150px;padding:18px 20px;border-right:1px solid var(--line)} .stats .stat:last-child{border-right:0} .stats .n{font-family:var(--fs-serif);font-size:30px;font-weight:700;color:var(--amber)} .stats .l{font-size:12px;color:var(--ink-soft);margin-top:3px} /* finding callout */ .finding{border:1px solid var(--amber-deep);border-left:3px solid var(--amber);border-radius:2px; background:color-mix(in srgb,var(--amber) 9%,transparent);padding:22px 24px} .finding .fh{font-family:var(--fs-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:9px} body[data-skin="room"] .finding .fh{color:var(--amber)} .finding p{font-size:15px;color:var(--ink-mid)} .finding b{color:var(--ink)} /* comparison table */ table.cmp{width:100%;border-collapse:collapse;font-size:13px} table.cmp th,table.cmp td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top} table.cmp th{background:var(--panel-2);font-family:var(--fs-mono);font-size:10px;letter-spacing:.07em; text-transform:uppercase;font-weight:500;color:var(--ink)} table.cmp td:first-child{color:var(--ink-mid);font-weight:600} table.cmp .fm{color:var(--green);font-weight:600} table.cmp .them{color:var(--ink-faint)} /* pricing tiers */ .tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tier{padding:22px 20px;background:var(--panel);border:1px solid var(--line);border-radius:2px;position:relative} .tier.feature{border-color:var(--amber)} .tier .tn{font-family:var(--fs-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);margin-bottom:10px} body[data-skin="room"] .tier .tn{color:var(--amber)} .tier .price{font-family:var(--fs-serif);font-size:26px;font-weight:700;color:var(--ink)} .tier .price small{font-size:13px;color:var(--ink-soft);font-family:var(--fs-sans);font-weight:400} .tier ul{list-style:none;margin:14px 0 16px} .tier li{font-size:13px;color:var(--ink-mid);padding:6px 0 6px 18px;position:relative;border-top:1px solid var(--line)} .tier li:first-child{border-top:0} .tier li::before{content:"+";position:absolute;left:0;color:var(--amber-deep);font-weight:700} /* bios */ .bio{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:2px} .bio .nm{font-family:var(--fs-serif);font-size:21px;color:var(--ink);margin-bottom:3px} .bio .ttl{font-family:var(--fs-mono);font-size:11px;color:var(--amber-deep);letter-spacing:.03em;margin-bottom:14px} body[data-skin="room"] .bio .ttl{color:var(--amber)} .bio ul{list-style:none} .bio li{font-size:13px;color:var(--ink-mid);padding:7px 0 7px 16px;position:relative;border-top:1px solid var(--line)} .bio li:first-child{border-top:0} .bio li::before{content:"\25B8";position:absolute;left:0;color:var(--amber-deep)} /* enterprise hero (brief) */ .ehero{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-bottom:1px solid var(--line)} .ehero .left{padding:54px 40px 48px;border-right:1px solid var(--line)} .ehero .right{padding:40px 34px;display:flex;align-items:center;justify-content:center;background:var(--panel-2)} .regs{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 22px} .reg{font-family:var(--fs-mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-mid);border:1px solid var(--line);border-radius:2px;padding:7px 11px} .reg b{color:var(--amber)} /* sample after-action report */ .aar{width:100%;max-width:340px;background:var(--bg-2);border:1px solid var(--line);border-radius:2px;padding:20px} body[data-skin="brief"] .aar{box-shadow:0 24px 60px -34px rgba(20,29,41,.4)} .aar .ah{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--rule);padding-bottom:9px;margin-bottom:13px} .aar .ah .t{font-family:var(--fs-serif);font-weight:700;font-size:15px;color:var(--ink)} .aar .ah .v{font-family:var(--fs-mono);font-size:9px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em} .aar .meter{margin-bottom:10px} .aar .ml{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-mid);margin-bottom:4px;font-weight:600} .aar .bar{height:7px;background:color-mix(in srgb,var(--ink) 12%,transparent);border-radius:1px;overflow:hidden} .aar .bar i{display:block;height:100%;background:var(--amber)} .aar .note{font-size:11px;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:10px;margin-top:6px} .aar .note b{color:var(--ink)} /* footer */ .foot{border-top:1px solid var(--line);background:var(--bg-2);padding:42px 0 54px;margin-top:20px} .foot .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:24px} .foot .brand{margin-bottom:10px} .foot p{font-size:12.5px;color:var(--ink-soft);max-width:42ch} .foot .fl{display:flex;flex-direction:column;gap:8px} .foot .fl a{font-family:var(--fs-mono);font-size:12px;color:var(--ink-soft);letter-spacing:.04em} .foot .fl a:hover{color:var(--amber)} .foot .fcol-h{font-family:var(--fs-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:2px} .foot .legal{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:11px;color:var(--ink-faint)} /* request modal */ .modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center; background:rgba(4,6,12,.74);backdrop-filter:blur(3px);padding:24px} .modal.open{display:flex} .modal .box{width:100%;max-width:460px;background:var(--bg-2);border:1px solid var(--line);border-radius:2px;padding:26px} .modal h3{font-size:22px;margin-bottom:6px} .modal p{font-size:13px;color:var(--ink-soft);margin-bottom:16px} .modal label{display:block;font-family:var(--fs-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:12px 0 5px} .modal input,.modal select,.modal textarea{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:2px; color:var(--ink);font-family:var(--fs-sans);font-size:14px;padding:10px 12px} .modal textarea{min-height:74px;resize:vertical} .modal .x{float:right;background:none;border:0;color:var(--ink-soft);font-size:22px;cursor:pointer;line-height:1} .modal .done{display:none;text-align:center;padding:14px 0} .modal .done .chk{font-size:34px;color:var(--green)} /* faq accordion (used on enterprise, educators, faq, keyword pages) */ .faqs{display:flex;flex-direction:column;gap:10px;max-width:840px} .faq{border:1px solid var(--line);border-radius:2px;background:var(--panel)} .faq summary{cursor:pointer;list-style:none;padding:14px 16px;font-family:var(--fs-sans); font-weight:600;font-size:15px;color:var(--ink);display:flex;justify-content:space-between;gap:14px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--amber);font-family:var(--fs-mono);font-size:18px;line-height:1} .faq[open] summary::after{content:"\2212"} .faq p{padding:0 16px 15px;font-size:14px;color:var(--ink-mid);max-width:74ch;margin:0} .faq p + p{padding-top:10px} /* responsive */ @media(max-width:880px){ .nav-links{display:none} .nav-links.open{display:flex;position:absolute;top:62px;left:0;right:0;flex-direction:column;gap:0; background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 0} .nav-links.open a{padding:12px 26px;border-top:1px solid var(--line)} .nav-toggle{display:inline-block} .doors,.grid-2,.grid-3,.stills,.tiers,.ehero{grid-template-columns:1fr} .ehero .left{border-right:0;border-bottom:1px solid var(--line)} .creds span{font-size:9.5px;padding:7px 11px} } @media(max-width:520px){ .hero-scrim{background:linear-gradient(180deg,rgba(4,6,12,.45),rgba(4,6,12,.82))} .stats .stat{min-width:50%} } @media(prefers-reduced-motion:reduce){ .ticker .track{animation:none} *{scroll-behavior:auto} } /* real game screenshots in the see-it section */ .still .shotimg{display:block;width:100%;height:210px;object-fit:cover;object-position:center;border-bottom:1px solid var(--line);background:#0a1322} .filmstill{margin:0;overflow:hidden} .filmstill img{display:block;width:100%;height:auto} .filmstill figcaption{padding:11px 14px;font-size:13px;color:var(--ink-soft)} .filmstill figcaption b{color:var(--ink)}