/* Option B: Apple-inspired refinement of the same site.
   Same brand (purple, lavender, contour slabs, Hanken Grotesk), applied with:
   clarity (calmer labels, bigger type contrast), deference (fewer lines, more space),
   depth (rounded surfaces, soft layered shadows, glass).
   Only active when <html data-design="b">. Delete this file to drop Option B entirely. */

[data-design="b"] {
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;
  --lift: 0 1px 2px rgba(22, 19, 42, .04), 0 10px 30px -12px rgba(22, 19, 42, .14);
  --lift-hover: 0 2px 4px rgba(22, 19, 42, .05), 0 22px 44px -16px rgba(22, 19, 42, .24);
}
@media (prefers-color-scheme: dark) {
  :root[data-design="b"]:not([data-theme="light"]) { --lift: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -12px rgba(0,0,0,.6); --lift-hover: 0 1px 0 rgba(255,255,255,.06) inset, 0 22px 44px -16px rgba(0,0,0,.75); }
}
:root[data-design="b"][data-theme="dark"] { --lift: 0 1px 0 rgba(255,255,255,.04) inset, 0 12px 30px -12px rgba(0,0,0,.6); --lift-hover: 0 1px 0 rgba(255,255,255,.06) inset, 0 22px 44px -16px rgba(0,0,0,.75); }

[data-design="b"] body { font-size: 17px; letter-spacing: -.005em; }

/* Calmer labels: sentence-case sans instead of uppercase mono (mono stays for code) */
[data-design="b"] .tag,
[data-design="b"] .eyebrow,
[data-design="b"] .section-head .num,
[data-design="b"] .g-label,
[data-design="b"] .res-meta,
[data-design="b"] .card-meta .tag,
[data-design="b"] .status,
[data-design="b"] .chip-time,
[data-design="b"] .g-facts .k,
[data-design="b"] .tools h3,
[data-design="b"] .edu h3.label,
[data-design="b"] .crumbs {
  font-family: var(--display); text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600;
}
[data-design="b"] .section-head .num { color: var(--accent); font-size: 14px; }
[data-design="b"] .chip { font-family: var(--display); font-size: 13px; font-weight: 500; border: 0; background: var(--accent-soft); color: var(--ink); padding: 5px 12px; }
[data-design="b"] .tools .chip { background: var(--paper); box-shadow: var(--lift); }
[data-design="b"] .tools h3, [data-design="b"] .edu h3.label { border-bottom: 0; padding-bottom: 0; color: var(--ink); font-size: 15px; }

/* Bigger contrast in the type scale, more air between sections */
[data-design="b"] .section { padding-block: clamp(72px, 10vw, 140px); }
[data-design="b"] .section-head { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 16px; margin-bottom: clamp(36px, 5vw, 60px); }
[data-design="b"] .section-head h2 { font-size: clamp(42px, 6vw, 80px); letter-spacing: -.045em; }
[data-design="b"] .section-head p { font-size: 18px; max-width: 46ch; }
[data-design="b"] .hero h1 { letter-spacing: -.055em; }

/* Surfaces: rounded, borderless, softly lifted */
[data-design="b"] .card,
[data-design="b"] .life-card,
[data-design="b"] .step,
[data-design="b"] .g-start,
[data-design="b"] .res-card,
[data-design="b"] .stats,
[data-design="b"] .contact-card,
[data-design="b"] .hero-card,
[data-design="b"] .guide-next,
[data-design="b"] .g-facts,
[data-design="b"] .g-overview,
[data-design="b"] .caps,
[data-design="b"] .systems,
[data-design="b"] .loop {
  border: 0; border-radius: var(--r-lg); box-shadow: var(--lift); overflow: hidden;
}
[data-design="b"] .card, [data-design="b"] .life-card, [data-design="b"] .res-card { transition: transform .25s ease, box-shadow .25s ease; }
[data-design="b"] .card:hover, [data-design="b"] .life-card:hover, [data-design="b"] .res-card:hover { transform: translateY(-3px); box-shadow: var(--lift-hover); border-color: transparent; }
[data-design="b"] .card.feature .viz, [data-design="b"] .viz { border-radius: 0; }
[data-design="b"] .run { border: 0; }

/* Stats strip becomes a floating panel */
[data-design="b"] .stats { max-width: var(--max); margin-inline: auto; background: var(--paper); }
[data-design="b"] .stats-grid, [data-design="b"] .stats-note { border: 0; }
[data-design="b"] .stat + .stat { border-left-color: var(--paper-2); }
@media (max-width: 1240px) { [data-design="b"] .stats { margin-inline: var(--gutter); } }

/* Grids of tiles: gaps instead of hairlines */
[data-design="b"] .caps { background: transparent; box-shadow: none; gap: 16px; overflow: visible; border-radius: 0; }
[data-design="b"] .cap { border-radius: var(--r-md); box-shadow: var(--lift); }
[data-design="b"] .g-overview { background: transparent; box-shadow: none; gap: 12px; overflow: visible; border-radius: 0; }
[data-design="b"] .g-overview a { border-radius: var(--r-md); box-shadow: var(--lift); }
[data-design="b"] .systems { gap: 12px; background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
[data-design="b"] .sys { border-radius: var(--r-md); background: color-mix(in srgb, var(--slab-2) 55%, transparent); }
[data-design="b"] .loop { background: color-mix(in srgb, var(--slab-2) 45%, transparent); }
[data-design="b"] .loop li.hl { border-radius: 0; }

/* Inner pieces */
[data-design="b"] .now { border-radius: var(--r-md); overflow: hidden; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-design="b"] .count, [data-design="b"] .topic-out, [data-design="b"] .tip, [data-design="b"] .code, [data-design="b"] .mini-wrap, [data-design="b"] .video { border-radius: var(--r-sm); }
[data-design="b"] .code { overflow: hidden; border: 0; }
[data-design="b"] .ic-badge { border: 0; background: var(--accent-soft); }
[data-design="b"] .chain li, [data-design="b"] .phases, [data-design="b"] .stages.new i { border-radius: 8px; }
[data-design="b"] .psr div { border-bottom-color: var(--paper-2); }
[data-design="b"] .psr { border-top-color: var(--paper-2); }

/* Buttons: filled secondary instead of outlined */
[data-design="b"] .btn { border-color: transparent; background: var(--accent-soft); color: var(--accent); }
[data-design="b"] .btn:hover { background: var(--ink); color: var(--paper); transform: none; }
[data-design="b"] .btn-primary { background: var(--accent); color: var(--accent-ink); }
[data-design="b"] .btn-primary:hover { background: var(--ink); color: var(--paper); }
[data-design="b"] .slab .btn, [data-design="b"] .ai .btn, [data-design="b"] .run .btn, [data-design="b"] .guide-next .btn { background: rgba(255,255,255,.12); color: var(--slab-fg); border-color: transparent; }
[data-design="b"] .slab .btn:hover, [data-design="b"] .ai .btn:hover, [data-design="b"] .run .btn:hover, [data-design="b"] .guide-next .btn:hover { background: var(--slab-fg); color: var(--slab); }
[data-design="b"] .ai .btn-primary, [data-design="b"] .guide-next .btn-primary { background: var(--slab-fg); color: var(--slab); }
[data-design="b"] .shuffle, [data-design="b"] .topic { border-color: transparent; background: var(--paper-2); }
[data-design="b"] .topic[aria-pressed="true"] { background: var(--accent); }

/* Header: lighter glass, hairline only once scrolled */
[data-design="b"] .site-head { background: color-mix(in srgb, var(--paper-2) 72%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
[data-design="b"] .nav .nav-cta { background: var(--accent); color: var(--accent-ink); }

/* Experience: hairlines softened */
[data-design="b"] .xp { border-top-color: var(--rule); }
[data-design="b"] .xp ul li::before { border: 0; background: var(--accent); width: 6px; height: 6px; top: .7em; }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .card:hover, [data-design="b"] .life-card:hover, [data-design="b"] .res-card:hover { transform: none; }
}

/* Remaining small labels in sentence case */
[data-design="b"] .psr dt,
[data-design="b"] .stats-note,
[data-design="b"] .funnel small,
[data-design="b"] .run .facts span:first-child,
[data-design="b"] .facts-foot .n,
[data-design="b"] .xp .when,
[data-design="b"] .loop .k,
[data-design="b"] .sys .where,
[data-design="b"] .cap .n,
[data-design="b"] .mini th,
[data-design="b"] .g-toc a span,
[data-design="b"] .g-overview .n,
[data-design="b"] .code-head,
[data-design="b"] details.code > summary,
[data-design="b"] .copy {
  font-family: var(--display); text-transform: none; letter-spacing: 0; font-weight: 600;
}
[data-design="b"] .psr dt { font-size: 13px; }
[data-design="b"] .stats-note { font-size: 13px; text-align: center; }
[data-design="b"] .mini th { font-size: 13px; }
[data-design="b"] .xp .promo, [data-design="b"] .edu li time { font-family: var(--display); text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 13px; }
[data-design="b"] .xp .promo { border-radius: 999px; padding: 4px 12px; }