/* ───────────────────────────────────────────────────────────────────────────── DD room skin — applies the Problem & Solution page's visual system to every content page: Archivo type, dark ground, violet accent, zero radius, strong flat rules, no glows, grayscale footage. Load this LAST in . Source of truth for the tokens: market-opportunity-content.html. ───────────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap'); :root{ /* Modernist tokens */ --color-bg:#050507;--color-surface:#12121a;--color-text:#fafafa; --color-accent:#8b5cf6;--color-divider:#2a2a38;--color-strong:rgba(139,92,246,.55); --color-neutral-100:#12121a;--color-neutral-200:#1a1a24;--color-neutral-300:#252532;--color-neutral-400:#3a3a4a;--color-neutral-500:#6b6b7b;--color-neutral-600:#8b8b99;--color-neutral-700:#a1a1aa;--color-neutral-800:#c5c5d0;--color-neutral-900:#09090e; --color-accent-100:rgba(139,92,246,.12);--color-accent-200:#ede9fe;--color-accent-300:#ddd6fe;--color-accent-400:#d8b4fe;--color-accent-500:#a855f7;--color-accent-600:#a78bfa;--color-accent-700:#c4b5fd;--color-accent-800:#7c3aed;--color-accent-900:#4c1d95; --gradient-accent:linear-gradient(110deg,#7c3aed,#8b5cf6 60%,#a855f7); --font-heading:"Archivo",system-ui,sans-serif;--font-heading-weight:800;--font-body:"Archivo",system-ui,sans-serif; --font-sans:"Archivo",system-ui,sans-serif;--font-serif:"Archivo",system-ui,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,Menlo,monospace; /* radius tokens some pages define */ --radius-sm:0;--radius-md:0;--radius-lg:0;--radius-xl:0;--radius-pill:0; /* Legacy variable names used across the older pages, mapped onto the tokens */ --bg:#050507;--bg-primary:#050507;--bg-secondary:#0a0a0f;--bg-card:#12121a;--bg-hover:#1a1a24; --panel:#12121a;--panel2:#1a1a24;--raised:#1a1a24;--surface:#12121a;--surface-2:#1a1a24;--surface-3:#252532;--color-surface-elevated:#1a1a24; --line:#2a2a38;--border:#2a2a38;--border-color:#2a2a38;--border-strong:rgba(139,92,246,.55);--color-border:#2a2a38; --text:#fafafa;--txt:#fafafa;--text-1:#fafafa;--text-primary:#fafafa;--color-text-primary:#fafafa;--white:#fafafa;--ink:#fafafa;--paper:#050507; --text-2:#c5c5d0;--text-secondary:#c5c5d0;--color-text-secondary:#c5c5d0; --muted:#a1a1aa;--mute:#a1a1aa;--text-3:#a1a1aa;--text-muted:#a1a1aa;--color-text-muted:#a1a1aa;--text-faint:#8b8b99; --accent:#8b5cf6;--purple:#8b5cf6;--violet:#a78bfa;--accent-purple:#8b5cf6;--color-purple:#8b5cf6;--soft:#d8b4fe;--accent-purple-light:#c4b5fd;--color-purple-light:#c4b5fd;--accent-indigo:#a78bfa; --pink:#c4b5fd;--accent-pink:#c4b5fd;--color-pink:#c4b5fd;--magenta:#c4b5fd;--blue:#a78bfa;--color-blue:#a78bfa;--accent-cyan:#a78bfa;--color-cyan:#a78bfa; --red:#a855f7;--color-red:#a855f7;--orange:#d8b4fe;--color-orange:#d8b4fe;--accent-orange:#d8b4fe;--accent-amber:#d8b4fe;--color-amber:#d8b4fe;--gold:#d8b4fe; --green:#c4b5fd;--color-green:#c4b5fd;--color-green-dark:#a78bfa;--accent-green:#c4b5fd;--teal:#a78bfa;--color-teal:#a78bfa; --stat-color:#d8b4fe;--toc-color:#c4b5fd;--axis-color:#2a2a38; } /* ── Type ────────────────────────────────────────────────────────────────── */ html,body{background:var(--color-bg)!important;color:var(--color-text)} body,h1,h2,h3,h4,h5,h6,p,a,li,dt,dd,span,div,button,input,select,textarea,small,strong,em,b,i,td,th,label,figcaption,blockquote,summary,legend{font-family:"Archivo",system-ui,sans-serif!important} code,pre,kbd,samp,tt,.mono,.code,[class*="mono"],[class*="code"]{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace!important} h1,h2,h3,h4{font-weight:800!important;letter-spacing:-.015em;line-height:1.12} h1{letter-spacing:-.03em}h2{letter-spacing:-.02em} i,em,h1,h2,h3,h4,h1 *,h2 *,h3 *,[class*="hero"] h1 span,[class*="title"] span{font-style:normal!important} /* ── Shape: zero radius, flat, no glows ──────────────────────────────────── */ *,*::before,*::after{border-radius:0!important} *{box-shadow:none!important;text-shadow:none!important} img,video,canvas{border-radius:0!important} /* Gradient backgrounds used for hero glows and card tints → flat ground / surfaces */ body,main,section,header,footer,article,.hero,.card,.panel,[class*="glow"],[class*="gradient"],[class*="hero"]{background-image:none!important} [class*="glow"]::before,[class*="glow"]::after,.hero::before,.hero::after{display:none!important} /* ── Rules: strong flat dividers ─────────────────────────────────────────── */ hr{height:2px;border:0;background:var(--color-divider)} section+section,.section+.section{border-top:2px solid var(--color-divider)} /* ── Accent: violet everywhere the old pages used pink/cyan/amber gradients ── */ ::selection{background:rgba(139,92,246,.35)} a{color:var(--color-accent-700)} a:hover{color:var(--color-accent-600)} :focus-visible{outline:2px solid var(--color-accent)!important;outline-offset:2px} *{-webkit-background-clip:initial} h1[style*="background-clip"],h2[style*="background-clip"],.gradient-text,[class*="gradient-text"]{background:none!important;-webkit-background-clip:initial!important;-webkit-text-fill-color:var(--color-text)!important;color:var(--color-text)!important} /* ── Footage prints in colour (grayscale removed Sept 2026); logos and icons untouched ── */ video,figure img,.media img,picture img,img[class*="photo"],img[class*="avatar"],img[class*="portrait"],img[class*="team"],img[class*="member"],img[class*="hero"],img[class*="case"]{filter:none} img[src*="logo"],img[class*="logo"],img[src*="icon"],svg{filter:none} /* ── Key-message poster band (same as the Problem & Solution page) ───────── */ .dd-poster{margin:64px auto!important;max-width:1152px;background:linear-gradient(110deg,#7c3aed,#8b5cf6 60%,#a855f7)!important;background-image:linear-gradient(110deg,#7c3aed,#8b5cf6 60%,#a855f7)!important;color:#fff!important;padding:clamp(32px,5vw,64px);border:0!important;border-radius:0!important;text-align:left} .dd-poster-kicker{display:block;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#ede9fe!important;margin:0 0 16px} .dd-poster-title{margin:0;font-family:"Archivo",system-ui,sans-serif!important;font-weight:800!important;font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.15;letter-spacing:-.02em;max-width:1000px;color:#fff!important} .dd-poster-copy{margin:24px 0 0;font-size:1.25rem;line-height:1.6;max-width:820px;color:#ede9fe!important} @media(max-width:700px){.dd-poster{margin:44px auto!important}} /* ── Sub-navigation tab strip (e.g. the four Adaptive Learning pages) ───── */ .dd-subnav{display:flex;flex-wrap:wrap;align-items:stretch;max-width:1200px;margin:0 auto;border:1px solid #2a2a38;background:#0a0a0f;order:0} .dd-subnav-label{display:flex;align-items:center;padding:12px 18px;font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd;border-right:1px solid #2a2a38} .dd-subnav a{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:12px 18px;text-decoration:none;color:#fafafa;border-right:1px solid #2a2a38;transition:background .15s} .dd-subnav a:last-child{border-right:0} .dd-subnav a small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#8b8b99;font-weight:600} .dd-subnav a b{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:.95rem;line-height:1.2} .dd-subnav a:hover{background:rgba(139,92,246,.12);color:#fafafa} .dd-subnav a.active{background:rgba(139,92,246,.18);box-shadow:inset 0 -3px 0 #8b5cf6!important} .dd-subnav a.active small{color:#c4b5fd} .dd-subnav-wrap{padding:16px 24px 0} @media(max-width:800px){.dd-subnav{flex-direction:column}.dd-subnav a,.dd-subnav-label{border-right:0;border-bottom:1px solid #2a2a38}.dd-subnav a:last-child{border-bottom:0}} /* ── Buttons and tags: flush, flat ───────────────────────────────────────── */ button,.btn,[class*="btn"],[class*="button"],[class*="tag"],[class*="pill"],[class*="badge"],[class*="chip"]{border-radius:0!important;font-family:"Archivo",system-ui,sans-serif!important;font-weight:600}