/* ============================================================
   RIVET — Liquid-Glass Diagram System (light)
   Recreated, RIVET-native diagrams. Frosted glass nodes on a
   tinted stage, with hover/interactive reveals.
   ============================================================ */

/* ---- The stage every diagram sits on ---- */
.gstage {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  padding: clamp(20px, 2.6vw, 36px);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(76,243,254,0.20), transparent 55%),
    radial-gradient(130% 130% at 100% 100%, rgba(255,0,212,0.13), transparent 55%),
    radial-gradient(120% 120% at 100% 0%, rgba(185,166,230,0.22), transparent 60%),
    #fbfaff;
  border: 1px solid var(--line);
  box-shadow: var(--card-shadow);
}
.gstage::after { /* engineering grid, faded */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45; z-index:0;
  background: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(130% 110% at 50% 0, #000, transparent 82%);
  mask-image: radial-gradient(130% 110% at 50% 0, #000, transparent 82%);
}
.gstage > * { position: relative; z-index: 1; }
.gstage__cap { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: clamp(16px,2vw,24px); flex-wrap:wrap; }
.gstage__cap .label { color: var(--fg-soft); }
.gstage__tag { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em; color:var(--violet); padding:4px 10px; border:1px solid color-mix(in oklab,var(--violet) 28%,transparent); border-radius:var(--r-pill); background:rgba(255,255,255,0.6); backdrop-filter:blur(8px); }

/* ---- Core liquid-glass node ---- */
.gnode {
  --gc: var(--violet);
  position: relative; border-radius: 15px; padding: 15px 16px;
  background: linear-gradient(162deg, rgba(255,255,255,0.86), rgba(255,255,255,0.52));
  backdrop-filter: blur(13px) saturate(165%); -webkit-backdrop-filter: blur(13px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 10px 24px - 14px rgba(15,0,37,0.45), inset 0 1px 0 rgba(255,255,255,0.95), inset 0 0 0 1px rgba(15,0,37,0.05);
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}
.gnode::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(160deg, rgba(255,255,255,0.75), transparent 44%); opacity:.7; }
.gnode::after { content:""; position:absolute; left:14px; right:14px; top:0; height:2px; border-radius:2px;
  background: var(--gc); opacity:.9; box-shadow: 0 0 12px color-mix(in oklab, var(--gc) 70%, transparent); }
.gnode:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 20px 38px - 16px color-mix(in oklab, var(--gc) 40%, rgba(15,0,37,0.45)), inset 0 1px 0 rgba(255,255,255,1); }

/* accent colour helpers */
.gc-cyan{ --gc: var(--cyan); } .gc-magenta{ --gc: var(--magenta); } .gc-violet{ --gc: var(--violet); }
.gc-lilac{ --gc: var(--lilac); } .gc-amber{ --gc: var(--amber); } .gc-green{ --gc: var(--green); } .gc-ink{ --gc: var(--ink); }

/* =========================================================
   1 — THE INFINITE FUNNEL  (CR1–CR8, three phases, loop)
   ========================================================= */
.funnel { display:flex; flex-direction:column; gap:14px; }
.funnel__phases { display:grid; grid-template-columns: 3fr 2fr 3fr; gap:10px; }
.fphase { text-align:center; padding:9px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600;
  background: rgba(255,255,255,0.55); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.8); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); }
.fphase--acq{ color: var(--cyan); } .fphase--win{ color: var(--magenta); } .fphase--exp{ color: var(--violet); }
.funnel__track { display:grid; grid-template-columns: repeat(8, 1fr); gap:8px; align-items:stretch; }
.cr { --gc: var(--cyan); cursor:default; display:flex; flex-direction:column; gap:3px; min-height:84px; justify-content:center; text-align:center; }
.cr b { font-family:var(--font-mono); color: var(--gc); font-size:0.92rem; font-weight:600; }
.cr span { font-size:0.8rem; color: var(--ink); font-weight:500; }
.cr small { font-size:0.68rem; color: var(--fg-mute); max-height:0; overflow:hidden; opacity:0; transition: max-height .3s ease, opacity .3s ease, margin .3s ease; line-height:1.3; }
.cr:hover small, .cr:focus-within small { max-height:60px; opacity:1; margin-top:3px; }
.funnel__loop { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:4px; font-family:var(--font-mono); font-size:0.76rem; color:var(--magenta); }
.funnel__loop .ln { height:1px; flex:1; max-width:120px; background:linear-gradient(90deg,transparent,var(--magenta)); }
.funnel__loop .ln.r { background:linear-gradient(90deg,var(--magenta),transparent); }
/* ===== "Feel Clever" reveal layers (CLAUDE.md design rule) ===== */
/* INFINITE Funnel: the loop is literal — hover CR8 to draw the arc back to CR1 */
.funnel__track { position:relative; margin-bottom:22px; }
.funnel__arc { position:absolute; left:0; right:0; bottom:-20px; width:100%; height:24px; overflow:visible; pointer-events:none; }
.funnel__arc-path { fill:none; stroke:var(--magenta); stroke-width:1.4; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:1; opacity:.26; transition:stroke-dashoffset 1.15s cubic-bezier(.65,0,.35,1), opacity .4s ease; }
.funnel__track:has(.funnel__last:hover) .funnel__arc-path,
.funnel__track:has(.funnel__last:focus-within) .funnel__arc-path { stroke-dashoffset:0; opacity:1; }
.funnel__last { position:relative; }
.funnel__hint { display:block; font-family:var(--font-mono); font-size:0.6rem; letter-spacing:.03em; color:var(--magenta); max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease, opacity .3s ease, margin .3s ease; }
.funnel__last:hover .funnel__hint, .funnel__last:focus-within .funnel__hint { max-height:24px; opacity:1; margin-top:3px; }
.funnel__loop-txt b { color:var(--ink); font-weight:600; }
.gstage:not(.camelx-stage) .funnel__loop-txt b { color:#fff; }

/* AI-SCORE: AI isn't a sixth letter — it reads all five at once */
.score__ai { position:relative; }
.score__ai-conns { position:absolute; left:0; right:0; top:-13px; height:13px; display:grid; grid-template-columns:repeat(5,1fr); pointer-events:none; }
.score__ai-conns i { width:1.5px; height:13px; margin:0 auto; background:linear-gradient(var(--magenta),transparent); opacity:.22; transition:opacity .35s ease, background .35s ease; }
.score__ai:hover .score__ai-conns i, .score__ai:focus .score__ai-conns i { opacity:.9; background:linear-gradient(var(--cyan-bright,#4CF3FE),transparent); }
.score:has(.score__ai:hover) .sc__l, .score:has(.score__ai:focus) .sc__l { color:var(--cyan-bright,#4CF3FE); }
.score__ai-key { font-style:normal; font-weight:600; color:var(--magenta); }
.gstage:not(.camelx-stage) .score__ai-key { color:var(--cyan-bright,#4CF3FE); }

/* GTM Maturity: the leap that matters is Level 1 → 3 */
.mlvl { position:relative; }
.mlvl__pin { position:absolute; top:-3px; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:var(--font-mono); font-size:0.54rem; letter-spacing:.04em; text-transform:uppercase; padding:2px 6px; border-radius:999px; border:1px solid var(--line); background:#fff; line-height:1; }
.mlvl__pin--you { color:var(--fg-soft); }
.mlvl__pin--os { color:var(--magenta); border-color:color-mix(in oklab,var(--magenta) 42%,var(--line)); }
.matur__note { grid-column:1 / -1; margin-top:10px; font-size:0.82rem; color:var(--fg-mute); text-align:center; text-wrap:pretty; }
.matur__note b { color:var(--violet); }
.matur:has(.mlvl--3:hover) .mlvl--1, .matur:has(.mlvl--3:hover) .mlvl--2, .matur:has(.mlvl--3:hover) .mlvl--3 { outline:1.5px solid color-mix(in oklab,var(--violet) 55%,transparent); outline-offset:2px; border-radius:6px; }
.gstage:not(.camelx-stage) .matur__note { color:rgba(201,184,240,0.82); }
.gstage:not(.camelx-stage) .matur__note b { color:var(--cyan-bright,#4CF3FE); }

/* OS grid: 8 models × 8 stages = 64 cells, zero gaps (hover the core for the proof) */
.oscore { position:relative; }
.oscore__proof { display:block; margin-top:0; font-size:0.8rem; color:var(--cyan-bright,#4CF3FE); max-height:0; overflow:hidden; opacity:0; transition:max-height .4s ease, opacity .4s ease, margin .4s ease; text-wrap:pretty; }
.oscore:hover .oscore__proof, .oscore:focus .oscore__proof { max-height:60px; opacity:1; margin-top:8px; }
@media (prefers-reduced-motion: reduce){ .funnel__arc-path{ transition:opacity .3s ease; } }
@media (max-width:780px){ .funnel__track{ grid-template-columns:repeat(4,1fr); } .funnel__phases{ display:none; } }
@media (max-width:460px){ .funnel__track{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   2 — AI-SCORE  (S C O R E glass cards + AI layer)
   ========================================================= */
.score { display:flex; flex-direction:column; gap:12px; }
.score__row { display:grid; grid-template-columns: repeat(5,1fr); gap:10px; }
.sc { --gc: var(--cyan); cursor:default; text-align:center; padding:16px 12px; display:flex; flex-direction:column; gap:6px; align-items:center; }
.sc__l { font-family:var(--font-mono); font-weight:600; font-size:1.7rem; line-height:1; color: var(--magenta); }
.sc__t { font-weight:600; font-size:0.9rem; color:var(--ink); }
.sc__d { font-size:0.78rem; color:var(--fg-mute); line-height:1.35; max-height:0; overflow:hidden; opacity:0; transition:max-height .3s ease,opacity .3s ease; }
.sc:hover .sc__d, .sc:focus-within .sc__d { max-height:80px; opacity:1; }
.score__ai { display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:14px;
  background: linear-gradient(120deg, rgba(76,243,254,0.18), rgba(255,255,255,0.5)); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.85); box-shadow: inset 0 1px 0 rgba(255,255,255,0.9); }
.score__ai b { font-family:var(--font-mono); letter-spacing:0.12em; color:var(--ink); font-size:0.82rem; white-space:nowrap; }
.score__ai span { color:var(--fg-soft); font-size:0.86rem; }
@media (max-width:680px){ .score__row{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   3 — INFINITE GTM OS  (core engine + modules A–F)
   ========================================================= */
.osg { display:grid; grid-template-columns: 1fr 1.4fr 1fr; gap:14px; align-items:center; }
.osg__col { display:flex; flex-direction:column; gap:12px; }
.osmod { --gc: var(--cyan); cursor:default; display:flex; flex-direction:column; gap:2px; }
.osmod b { font-size:0.92rem; color:var(--ink); }
.osmod small { font-family:var(--font-mono); font-size:0.7rem; color:var(--fg-mute); }
.oscore { --gc: var(--magenta); text-align:center; padding:22px 18px; border-radius:18px;
  background: linear-gradient(165deg, rgba(31,8,66,0.96), rgba(15,0,37,0.96));
  border:1px solid rgba(255,255,255,0.16);
  box-shadow: 0 20px 44px - 18px rgba(15,0,37,0.7), inset 0 1px 0 rgba(255,255,255,0.22); color:#fff; }
.oscore::after{ display:none; }
.oscore .eyebrow{ color:var(--cyan-bright); justify-content:center; margin-bottom:10px; }
.oscore ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.oscore li{ font-size:0.92rem; color:rgba(255,255,255,0.9); }
.oscore li b{ color:#fff; }
@media (max-width:760px){ .osg{ grid-template-columns:1fr; } .oscore{ order:-1; } }

/* =========================================================
   4 — GROWTH IS A CROSSING (chart in a glass frame)
   ========================================================= */
.crossing svg{ width:100%; height:auto; display:block; overflow:visible; }
.crossing .grid{ stroke:var(--grid-line); stroke-width:1; }
.crossing .axis{ stroke:var(--line-strong); stroke-width:1; }
.crossing .scurve{ fill:none; stroke:var(--fg-mute); stroke-width:2; stroke-dasharray:5 5; }
.crossing .xc{ fill:none; stroke:var(--magenta); stroke-width:3; stroke-linecap:round; filter:drop-shadow(0 4px 8px rgba(255,0,212,0.35)); }
.crossing .node{ fill:var(--cyan-bright); stroke:#fff; stroke-width:2; }
.crossing .lbl{ font-family:var(--font-mono); font-size:11px; fill:var(--ink); }
.crossing .lbl--mute{ fill:var(--fg-mute); }
.cross-chips{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.cross-chip{ font-family:var(--font-mono); font-size:0.74rem; padding:6px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,0.6); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.85); color:var(--fg-soft); display:flex; align-items:center; gap:8px; }
.cross-chip i{ width:14px; height:3px; border-radius:2px; display:inline-block; }

/* =========================================================
   5 — THE DESERT CAMEL (two dimensions, recreated)
   ========================================================= */
.camelx{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.cdim{ --gc:var(--cyan); display:flex; flex-direction:column; gap:6px; padding:20px; }
.cdim .n{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--gc); }
.cdim h4{ font-size:1.05rem; }
.cdim p{ margin:0; color:var(--fg-soft); font-size:0.9rem; }
.cbase{ grid-column:1 / -1; text-align:center; padding:16px; --gc:var(--ink); }
.cbase .n{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--violet); }
.cbase b{ display:block; font-size:1.05rem; color:var(--ink); margin-top:3px; }
.cbase span{ color:var(--fg-soft); font-size:0.88rem; }
@media (max-width:560px){ .camelx{ grid-template-columns:1fr; } }

/* =========================================================
   6 — GTM MATURITY MODEL (5 ascending glass levels)
   ========================================================= */
.matur{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; align-items:end; }
.mlvl{ cursor:default; display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:14px 12px; text-align:center; }
.mlvl--1{ --gc:var(--cyan); min-height:120px; } .mlvl--2{ --gc:var(--cyan); min-height:150px; }
.mlvl--3{ --gc:var(--lilac); min-height:185px; } .mlvl--4{ --gc:var(--violet); min-height:220px; }
.mlvl--5{ --gc:var(--magenta); min-height:258px;
  background:linear-gradient(165deg, rgba(255,0,212,0.14), rgba(255,255,255,0.55)); }
.mlvl .num{ font-family:var(--font-mono); font-size:1.5rem; font-weight:600; color:var(--gc); }
.mlvl b{ font-size:0.92rem; color:var(--ink); }
.mlvl small{ font-size:0.76rem; color:var(--fg-mute); line-height:1.35; }
@media (max-width:680px){ .matur{ grid-template-columns:1fr 1fr; align-items:stretch; } .mlvl{ min-height:0 !important; } }

/* ============ DARK PLATE — diagrams match the 3D figure direction ============ */
.gstage:not(.camelx-stage) {
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(59,6,212,0.5), transparent 60%),
    radial-gradient(60% 55% at 8% 100%, rgba(255,0,212,0.16), transparent 60%),
    linear-gradient(135deg, #160233, #0F0025 60%, #1c0540);
  border:1px solid rgba(59,6,212,0.4);
  box-shadow:0 24px 60px -28px rgba(15,0,37,0.55); }
.gstage:not(.camelx-stage)::after {
  background:linear-gradient(rgba(201,184,240,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(201,184,240,0.09) 1px, transparent 1px);
  background-size:30px 30px; opacity:1; }
.gstage:not(.camelx-stage) .gstage__cap .label { color:rgba(255,255,255,0.85); }
.gstage:not(.camelx-stage) .gstage__tag { color:var(--cyan-bright,#4CF3FE); border-color:rgba(76,243,254,0.35); background:rgba(76,243,254,0.08) !important; }
/* dark glass nodes */
.gstage:not(.camelx-stage) .gnode {
  background:linear-gradient(162deg, rgba(255,255,255,0.13), rgba(255,255,255,0.05));
  backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 18px 36px -18px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.25); }
.gstage:not(.camelx-stage) .gnode::before { opacity:.18; }
.gstage:not(.camelx-stage) .gnode b { color:#fff; }
.gstage:not(.camelx-stage) .gnode span { color:rgba(255,255,255,0.85); }
.gstage:not(.camelx-stage) .gnode small { color:rgba(201,184,240,0.78); }
.gstage:not(.camelx-stage) .gnode:hover { box-shadow:0 24px 44px -18px color-mix(in oklab, var(--gc) 45%, rgba(0,0,0,0.7)), inset 0 1px 0 rgba(255,255,255,0.3); }
/* funnel chrome */
.gstage:not(.camelx-stage) .fphase { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.16); box-shadow:inset 0 1px 0 rgba(255,255,255,0.18); }
.gstage:not(.camelx-stage) .fphase--acq { color:var(--cyan-bright,#4CF3FE); }
.gstage:not(.camelx-stage) .fphase--exp { color:#b9a5f5; }
/* AI-SCORE strip */
.gstage:not(.camelx-stage) .score__ai { background:linear-gradient(120deg, rgba(76,243,254,0.14), rgba(255,255,255,0.06)); border:1px solid rgba(255,255,255,0.18); box-shadow:inset 0 1px 0 rgba(255,255,255,0.2); }
.gstage:not(.camelx-stage) .score__ai b { color:var(--cyan-bright,#4CF3FE); }
.gstage:not(.camelx-stage) .score__ai span, .gstage:not(.camelx-stage) .score__ai small { color:rgba(255,255,255,0.8); }
/* OS core already dark — lift its border */
.gstage:not(.camelx-stage) .oscore { border-color:rgba(255,0,212,0.4); box-shadow:0 20px 44px -18px rgba(255,0,212,0.3), inset 0 1px 0 rgba(255,255,255,0.22); }
.gstage:not(.camelx-stage) .osmod small { color:rgba(201,184,240,0.75); }
/* maturity levels */
.gstage:not(.camelx-stage) .mlvl b { color:#fff; }
.gstage:not(.camelx-stage) .mlvl small { color:rgba(201,184,240,0.75); }
.gstage:not(.camelx-stage) .mlvl--5 { background:linear-gradient(165deg, rgba(255,0,212,0.2), rgba(255,255,255,0.06)); }
/* chips */
.gstage:not(.camelx-stage) .cross-chip { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.85); }
/* generic text inside dark stages */
.gstage:not(.camelx-stage) p, .gstage:not(.camelx-stage) figcaption { color:rgba(255,255,255,0.7); }

/* ============ OS MODEL EXPLORER (interactive tabs) ============ */
.osx { position:relative; border-radius:var(--r-lg); overflow:hidden; padding:clamp(20px,2.6vw,32px);
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(59,6,212,0.5), transparent 60%),
    radial-gradient(60% 55% at 8% 100%, rgba(255,0,212,0.16), transparent 60%),
    linear-gradient(135deg, #160233, #0F0025 60%, #1c0540);
  border:1px solid rgba(59,6,212,0.4); box-shadow:0 24px 60px -28px rgba(15,0,37,0.55); color:#fff; }
.osx__head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap; }
.osx__head .label { color:rgba(255,255,255,0.85); }
.osx__tabs { display:grid; grid-template-columns:repeat(8,1fr); gap:8px; }
.osx__tab { display:flex; flex-direction:column; align-items:center; gap:3px; padding:13px 6px; cursor:pointer; border-radius:13px;
  background:linear-gradient(162deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.16); color:#fff; font-family:inherit; transition:transform .18s ease, background .2s ease, border-color .2s ease;
  border-top:2px solid rgba(255,0,212,0.6); }
.osx__tab.is-kernel { border-top-color:rgba(76,243,254,0.75); }
.osx__tab b { font-family:var(--font-mono); font-size:0.95rem; letter-spacing:0.02em; }
.osx__tab span { font-size:0.66rem; color:rgba(255,255,255,0.62); letter-spacing:0.02em; }
.osx__tab:hover { transform:translateY(-2px); background:linear-gradient(162deg, rgba(255,255,255,0.16), rgba(255,255,255,0.07)); }
.osx__tab[aria-selected="true"] { background:linear-gradient(162deg, rgba(255,0,212,0.28), rgba(59,6,212,0.22)); border-color:rgba(255,255,255,0.4); box-shadow:0 10px 26px -10px rgba(255,0,212,0.5); }
.osx__tab.is-kernel[aria-selected="true"] { background:linear-gradient(162deg, rgba(76,243,254,0.26), rgba(59,6,212,0.22)); box-shadow:0 10px 26px -10px rgba(76,243,254,0.45); }
.osx__tab[aria-selected="true"] span { color:rgba(255,255,255,0.9); }
/* panel */
.osx__panel { display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(18px,2.4vw,32px); margin-top:16px; padding:clamp(20px,2.4vw,28px);
  border-radius:14px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12);
  overflow:hidden; transition:max-height .4s ease, opacity .3s ease, margin .3s ease, padding .3s ease; }
.osx__panel.is-closed { max-height:0; opacity:0; margin-top:0; padding-top:0; padding-bottom:0; border-width:0; }
.osx__q { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--cyan-bright,#4CF3FE); margin:0 0 8px; }
.osx__title { font-size:var(--step-2); color:#fff; margin:0 0 10px; }
.osx__desc { color:rgba(255,255,255,0.74); font-size:0.95rem; line-height:1.6; margin:0 0 14px; }
.osx__insight { display:flex; gap:10px; padding:13px 15px; border-radius:12px; background:rgba(255,0,212,0.1); border:1px solid rgba(255,0,212,0.28); }
.osx__insight::before { content:"\2192"; color:var(--magenta); font-weight:700; }
.osx__insight span { color:rgba(255,255,255,0.86); font-size:0.86rem; line-height:1.5; }
.osx__choices { display:flex; flex-direction:column; gap:10px; align-self:start; }
.osx__choice { display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:11px; background:linear-gradient(162deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04)); border:1px solid rgba(255,255,255,0.14); color:#fff; font-size:0.88rem; }
.osx__choice b { font-family:var(--font-mono); color:var(--cyan-bright,#4CF3FE); font-size:0.8rem; flex:none; }
.osx__foot { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.osx__kernelnote { display:flex; align-items:center; gap:8px; font-size:0.78rem; color:rgba(255,255,255,0.55); }
.osx__kernelnote i { width:14px; height:3px; border-radius:2px; background:var(--cyan-bright,#4CF3FE); flex:none; }
.osx__more { color:var(--cyan-bright,#4CF3FE); font-weight:600; font-size:0.9rem; text-decoration:none; white-space:nowrap; }
@media (max-width:780px){ .osx__tabs{ grid-template-columns:repeat(4,1fr); } .osx__panel{ grid-template-columns:1fr; } }
@media (max-width:460px){ .osx__tab span{ display:none; } }