/**
 * OS Landing — Life Blueprint 360™
 * Premium cinematic dark editorial stylesheet.
 *
 * Design system tokens
 * ─────────────────────────────────────────────────────────────────────────
 * Color
 *   --os-void:         #06060f   Absolute background
 *   --os-bg:           #090914   Page background
 *   --os-surface:      #0d0d1c   Cards, raised surfaces
 *   --os-surface-mid:  #10101f   Mid-tone surfaces
 *   --os-surface-hi:   #141428   High surfaces, hover targets
 *   --os-gold:         #C9A84C   Primary accent
 *   --os-gold-bright:  #d4b45a   Hover gold
 *   --os-gold-dim:     rgba(201,168,76,.22)
 *   --os-gold-faint:   rgba(201,168,76,.08)
 *   --os-cream:        #ECE7DC   Warm white
 *   --os-text:         #F0EFF8   Headlines
 *   --os-body:         #9490a8   Body copy
 *   --os-muted:        #6b6880   Secondary text
 *   --os-ghost:        #3d3d55   Very subtle text
 *   --os-border:       #1a1a2e   Subtle dividers
 *   --os-border-mid:   #242438   Visible separators
 *
 * Typography
 *   --os-serif: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif
 *   --os-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif
 *
 * Spacing scale (rem @ 16px)
 *   xs:8  sm:16  md:32  lg:64  xl:96  2xl:128  3xl:160
 */

/* ── CSS Custom Properties ─────────────────────────────────────────────────── */

:root {
    --os-void:        #06060f;
    --os-bg:          #090914;
    --os-surface:     #0d0d1c;
    --os-surface-mid: #10101f;
    --os-surface-hi:  #141428;
    --os-gold:        #C9A84C;
    --os-gold-bright: #d4b45a;
    --os-gold-dim:    rgba(201,168,76,.22);
    --os-gold-faint:  rgba(201,168,76,.08);
    --os-cream:       #ECE7DC;
    --os-text:        #F0EFF8;
    --os-body-clr:    #9490a8;
    --os-muted:       #6b6880;
    --os-ghost:       #3d3d55;
    --os-border:      #1a1a2e;
    --os-border-mid:  #242438;
    --os-serif:       'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
    --os-sans:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --os-transition:  0.3s cubic-bezier(.4,0,.2,1);
}

/* ── Reset + Base ─────────────────────────────────────────────────────────── */

.os-landing *,
.os-landing *::before,
.os-landing *::after {
    box-sizing: border-box;
}

html.os-landing-page,
body.os-landing-page {
    margin: 0;
    padding: 0;
    background: var(--os-bg);
    color: var(--os-body-clr);
    font-family: var(--os-sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Scroll Progress Bar ──────────────────────────────────────────────────── */

.os-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0;
    background: linear-gradient(to right, var(--os-gold), var(--os-gold-bright));
    z-index: 9999;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ── Starfield Canvas ─────────────────────────────────────────────────────── */

#os-stars-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

/* ── Atmospheric Orbs ────────────────────────────────────────────────────── */

.os-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.os-orb--1 {
    width: 700px;
    height: 700px;
    top: -15%;
    right: -10%;
    background: radial-gradient(ellipse, rgba(201,168,76,.055) 0%, rgba(90,50,180,.03) 40%, transparent 70%);
}

.os-orb--2 {
    width: 500px;
    height: 600px;
    top: 20%;
    left: -12%;
    background: radial-gradient(ellipse, rgba(80,50,160,.05) 0%, transparent 65%);
}

.os-orb--3 {
    width: 400px;
    height: 400px;
    bottom: 0;
    right: 5%;
    background: radial-gradient(ellipse, rgba(201,168,76,.04) 0%, transparent 65%);
}

/* ── Fade-in Animations ──────────────────────────────────────────────────── */

.os-fade-in {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.os-fade-in.os-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes os-fallback-show {
    to { opacity: 1; transform: translateY(0); }
}
.os-fade-in {
    animation: os-fallback-show 0.01s 1.8s forwards;
}

.os-fade-in.os-delay-1 { transition-delay: 0.12s; }
.os-fade-in.os-delay-2 { transition-delay: 0.24s; }
.os-fade-in.os-delay-3 { transition-delay: 0.36s; }
.os-fade-in.os-delay-4 { transition-delay: 0.48s; }
.os-fade-in.os-delay-5 { transition-delay: 0.60s; }

/* ── Layout Primitives ───────────────────────────────────────────────────── */

.os-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 52px;
    position: relative;
    z-index: 1;
}

.os-container--narrow { max-width: 740px; }
.os-container--wide   { max-width: 1320px; }

.os-section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.os-section--sm { padding: 68px 0; }
.os-section--lg { padding: 140px 0; }

/* ── Typography System ───────────────────────────────────────────────────── */

.os-eyebrow {
    font-family: var(--os-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--os-gold);
    display: block;
    margin-bottom: 22px;
}

.os-headline {
    font-family: var(--os-serif);
    font-weight: 400;
    color: var(--os-text);
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 28px;
}

.os-headline--xl  { font-size: clamp(38px, 5.5vw, 68px); }
.os-headline--lg  { font-size: clamp(30px, 3.8vw, 50px); }
.os-headline--md  { font-size: clamp(24px, 2.8vw, 36px); }
.os-headline--sm  { font-size: clamp(20px, 2.2vw, 28px); }

.os-body {
    font-size: 16px;
    line-height: 1.9;
    color: var(--os-body-clr);
}

.os-body--lg  { font-size: 18px; line-height: 1.85; }
.os-body--sm  { font-size: 14px; line-height: 1.8; }

.os-text-cream  { color: var(--os-cream); }
.os-text-gold   { color: var(--os-gold); }
.os-text-muted  { color: var(--os-muted); }
.os-text-center { text-align: center; }

/* ── Celestial Separators ────────────────────────────────────────────────── */

.os-separator {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 auto 52px;
    max-width: 260px;
}

.os-separator__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--os-gold-dim));
}

.os-separator__line:last-child {
    background: linear-gradient(to left, transparent, var(--os-gold-dim));
}

.os-separator__glyph {
    color: var(--os-gold);
    font-size: 13px;
    opacity: 0.45;
    flex-shrink: 0;
}

/* ── Section Glow Atmosphere ─────────────────────────────────────────────── */

.os-section-glow {
    pointer-events: none;
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.os-section-glow--gold {
    background: radial-gradient(ellipse, rgba(201,168,76,.08) 0%, transparent 70%);
}

.os-section-glow--indigo {
    background: radial-gradient(ellipse, rgba(80,50,180,.06) 0%, transparent 70%);
}

/* ── CTA Buttons ─────────────────────────────────────────────────────────── */

@keyframes os-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.35), 0 8px 32px rgba(201,168,76,.18); }
    60%  { box-shadow: 0 0 0 12px rgba(201,168,76,0), 0 8px 32px rgba(201,168,76,.22); }
    100% { box-shadow: 0 0 0 0 rgba(201,168,76,0), 0 8px 32px rgba(201,168,76,.18); }
}

@keyframes os-ripple {
    to { transform: scale(4); opacity: 0; }
}

.os-btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: var(--os-serif);
    transition: all var(--os-transition);
    position: relative;
    overflow: hidden;
}

.os-btn--primary {
    background: var(--os-gold) !important;
    color: var(--os-bg) !important;
    padding: 20px 56px;
    border-radius: 3px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1.5px;
    box-shadow: 0 8px 32px rgba(201,168,76,.18);
}

.os-btn--primary:hover {
    background: var(--os-gold-bright) !important;
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(201,168,76,.3) !important;
    color: var(--os-bg) !important;
    text-decoration: none;
}

.os-btn--primary:active {
    transform: translateY(-1px);
}

.os-btn--cta {
    animation: os-cta-pulse 3.5s ease-in-out infinite;
}

.os-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.25);
    transform: scale(0);
    animation: os-ripple 0.7s linear;
    pointer-events: none;
}

.os-btn--ghost {
    background: transparent !important;
    color: var(--os-gold) !important;
    border: 1px solid var(--os-gold-dim) !important;
    padding: 18px 44px;
    border-radius: 3px;
    font-size: 15px;
    letter-spacing: 1px;
}

.os-btn--ghost:hover {
    border-color: var(--os-gold) !important;
    background: var(--os-gold-faint) !important;
    color: var(--os-gold) !important;
    text-decoration: none;
    transform: translateY(-2px);
}

/* ── Trust Badge Bar ─────────────────────────────────────────────────────── */

.os-trust-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.os-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--os-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--os-muted);
}

.os-trust-icon {
    color: var(--os-gold);
    font-size: 12px;
    opacity: 0.75;
}

/* ── Star Ratings ────────────────────────────────────────────────────────── */

.os-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
}

.os-star {
    color: var(--os-gold);
    font-size: 13px;
    line-height: 1;
}

/* ── Site Header / Nav ───────────────────────────────────────────────────── */

.os-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(9,9,20,.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(201,168,76,.07);
    padding: 20px 0;
    transition: padding var(--os-transition), box-shadow var(--os-transition),
                background var(--os-transition);
}

.os-header--scrolled {
    background: rgba(6,6,15,.95);
    box-shadow: 0 4px 48px rgba(0,0,0,.6);
    padding: 14px 0;
    border-bottom-color: rgba(201,168,76,.12);
}

.os-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.os-header__brand {
    font-family: var(--os-serif);
    font-size: 12px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--os-gold);
    text-decoration: none;
    font-weight: 400;
    transition: opacity var(--os-transition);
}

.os-header__brand:hover { opacity: 0.75; text-decoration: none; }

.os-header__nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.os-header__account {
    font-family: var(--os-sans);
    font-size: 10px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    color: rgba(255,255,255,.45);
    text-decoration: none;
    transition: color var(--os-transition);
}

.os-header__account:hover { color: var(--os-gold); text-decoration: none; }

.os-header__cta {
    background: var(--os-gold);
    color: var(--os-bg);
    padding: 10px 24px;
    border-radius: 3px;
    font-family: var(--os-serif);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    transition: background var(--os-transition), transform var(--os-transition);
}

.os-header__cta:hover {
    background: var(--os-gold-bright);
    transform: translateY(-1px);
    text-decoration: none;
    color: var(--os-bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 01 — Hero
   ══════════════════════════════════════════════════════════════════════════ */

#hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 0;
    overflow: visible;
    /* Cinematic background */
    background:
        radial-gradient(ellipse 900px 700px at 72% -5%,  rgba(201,168,76,.065) 0%, transparent 70%),
        radial-gradient(ellipse 600px 800px at -5% 60%,  rgba(80,50,180,.055)  0%, transparent 65%),
        radial-gradient(ellipse 500px 500px at 105% 90%, rgba(201,168,76,.04)  0%, transparent 65%),
        radial-gradient(ellipse 300px 300px at 50%  110%,rgba(70,40,160,.04)  0%, transparent 60%),
        var(--os-bg);
}

.os-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 72px;
    padding-top: 100px;
    padding-bottom: 80px;
    width: 100%;
}

.os-hero__content { position: relative; z-index: 2; }

.os-hero__pre {
    font-family: var(--os-sans);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--os-gold);
    margin-bottom: 28px;
    display: block;
    opacity: 0.9;
}

.os-hero__headline {
    font-family: var(--os-serif);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    line-height: 1.08;
    color: var(--os-text);
    margin: 0 0 32px;
    letter-spacing: -0.02em;
}

.os-hero__headline em {
    color: #E8D5A3;
    font-style: italic;
}

.os-hero__sub {
    font-size: 17px;
    line-height: 1.85;
    color: var(--os-body-clr);
    margin: 0 0 48px;
    max-width: 480px;
}

.os-hero__actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.os-hero__price-note {
    font-family: var(--os-sans);
    font-size: 12px;
    color: var(--os-ghost);
    letter-spacing: 0.5px;
}

/* ── Document Mockup (Hero Visual) ───────────────────────────────────────── */

.os-hero__visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Glow emanating from behind the stack */
.os-hero__visual::before {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 120px;
    background: radial-gradient(ellipse, rgba(201,168,76,.18) 0%, transparent 70%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}

.os-doc-stack {
    position: relative;
    width: 290px;
    height: 400px;
    filter: drop-shadow(0 48px 80px rgba(0,0,0,.7));
    z-index: 1;
}

/* Back pages — depth layers */
.os-doc {
    position: absolute;
    width: 270px;
    height: 380px;
    border-radius: 5px;
    overflow: hidden;
}

.os-doc--back-3 {
    top: 16px;
    left: 28px;
    transform: rotate(5deg);
    background: #080815;
    border: 1px solid #151525;
    z-index: 1;
}

.os-doc--back-2 {
    top: 8px;
    left: 14px;
    transform: rotate(2.5deg);
    background: var(--os-surface);
    border: 1px solid #1c1c30;
    z-index: 2;
}

/* Front cover */
.os-doc--front {
    top: 0;
    left: 0;
    z-index: 3;
    background: linear-gradient(160deg, #13132a 0%, #0b0b1a 100%);
    border: 1px solid rgba(201,168,76,.28);
    display: flex;
    flex-direction: column;
    padding: 28px 24px 22px;
    animation: os-doc-float 7s ease-in-out infinite;
}

@keyframes os-doc-float {
    0%, 100% { transform: translateY(0) rotate(0.2deg); }
    50%       { transform: translateY(-10px) rotate(-0.2deg); }
}

/* Top bar */
.os-doc__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(201,168,76,.12);
}

.os-doc__brand-line {
    font-family: var(--os-sans);
    font-size: 7px;
    letter-spacing: 4.5px;
    text-transform: uppercase;
    color: var(--os-gold);
    opacity: 0.85;
}

.os-doc__header-glyph {
    color: var(--os-gold);
    font-size: 10px;
    opacity: 0.5;
}

/* Natal chart visualization */
.os-doc__chart {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 4px auto 16px;
}

.os-doc__chart-circle {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.os-doc__chart-circle--outer {
    width: 110px;
    height: 110px;
    border: 1px solid rgba(201,168,76,.18);
}

.os-doc__chart-circle--mid {
    width: 76px;
    height: 76px;
    border: 1px solid rgba(201,168,76,.25);
}

.os-doc__chart-circle--inner {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(201,168,76,.32);
    background: rgba(201,168,76,.03);
}

/* Planetary position dots via box-shadow */
.os-doc__chart-dots {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--os-gold);
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow:
        42px  28px 0 0 rgba(201,168,76,.80),
        -38px 18px 0 0 rgba(201,168,76,.60),
        18px -40px 0 0 rgba(201,168,76,.50),
        -26px-34px 0 0 rgba(201,168,76,.70),
        48px -16px 0 0 rgba(201,168,76,.45),
        -8px  46px 0 0 rgba(201,168,76,.55);
}

/* Aspect lines */
.os-doc__chart-line {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(to right, rgba(201,168,76,.25), transparent);
}

.os-doc__chart-line--1 { width: 44px; transform: rotate(35deg); }
.os-doc__chart-line--2 { width: 38px; transform: rotate(135deg); }
.os-doc__chart-line--3 { width: 50px; transform: rotate(220deg); }
.os-doc__chart-line--4 { width: 35px; transform: rotate(295deg); }

.os-doc__chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--os-gold);
    font-size: 11px;
    opacity: 0.45;
}

/* Identity block */
.os-doc__identity {
    text-align: center;
    margin-bottom: 14px;
}

.os-doc__archetype-label {
    font-family: var(--os-sans);
    font-size: 7px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--os-muted);
    margin-bottom: 5px;
}

.os-doc__archetype-name {
    font-family: var(--os-serif);
    font-size: 18px;
    color: #E8D5A3;
    font-style: italic;
    font-weight: 300;
    line-height: 1.2;
}

/* Score bars */
.os-doc__scores {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.os-doc__score-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.os-doc__score-label {
    font-family: var(--os-sans);
    font-size: 6px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--os-ghost);
    width: 52px;
    flex-shrink: 0;
}

.os-doc__score-track {
    flex: 1;
    height: 3px;
    background: rgba(255,255,255,.05);
    border-radius: 2px;
    overflow: hidden;
}

.os-doc__score-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to right, rgba(201,168,76,.7), rgba(201,168,76,.3));
}

/* Bottom footer */
.os-doc__bottom {
    display: flex;
    justify-content: space-between;
    font-family: var(--os-sans);
    font-size: 7px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--os-ghost);
    border-top: 1px solid rgba(201,168,76,.08);
    padding-top: 12px;
    margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 02 — Recognition Stats
   ══════════════════════════════════════════════════════════════════════════ */

.os-recognition {
    background: var(--os-surface);
    border-top: 1px solid var(--os-border);
    border-bottom: 1px solid var(--os-border);
    position: relative;
    overflow: hidden;
}

.os-recognition::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(201,168,76,.04) 0%, transparent 70%);
    pointer-events: none;
}

.os-recognition__grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr 1px 1fr;
    align-items: center;
}

.os-recognition__divider {
    background: var(--os-border-mid);
    height: 80px;
    align-self: center;
}

.os-recognition__item {
    padding: 44px 48px;
    text-align: center;
}

.os-recognition__item-label {
    font-family: var(--os-sans);
    font-size: 9px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--os-muted);
    margin-bottom: 14px;
    display: block;
}

.os-recognition__item-value {
    font-family: var(--os-serif);
    font-size: clamp(36px, 3.5vw, 52px);
    color: var(--os-cream);
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 03 — What It Is
   ══════════════════════════════════════════════════════════════════════════ */

.os-what { text-align: center; }

.os-what__lead {
    font-family: var(--os-serif);
    font-size: clamp(24px, 3.2vw, 38px);
    font-weight: 300;
    color: var(--os-text);
    line-height: 1.35;
    max-width: 700px;
    margin: 0 auto 72px;
}

.os-what__lead em { color: #E8D5A3; font-style: italic; }

.os-what__pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.os-pillar {
    text-align: center;
    padding: 48px 36px;
    background: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: 6px;
    position: relative;
    transition: border-color var(--os-transition), transform var(--os-transition),
                box-shadow var(--os-transition);
    overflow: hidden;
}

.os-pillar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 2px;
    background: var(--os-gold);
    opacity: 0;
    transition: opacity var(--os-transition);
}

.os-pillar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 200px 200px at 50% -20%, rgba(201,168,76,.04) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--os-transition);
}

.os-pillar:hover {
    border-color: var(--os-gold-dim);
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(0,0,0,.4);
}

.os-pillar:hover::before,
.os-pillar:hover::after {
    opacity: 1;
}

.os-pillar__roman {
    font-family: var(--os-serif);
    font-size: 11px;
    letter-spacing: 4px;
    color: var(--os-gold);
    display: block;
    margin-bottom: 24px;
    opacity: 0.65;
}

.os-pillar__title {
    font-family: var(--os-serif);
    font-size: 24px;
    color: var(--os-text);
    font-weight: 400;
    margin-bottom: 16px;
}

.os-pillar__body {
    font-size: 14px;
    line-height: 1.85;
    color: var(--os-body-clr);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 04 — Artifact Reveal (PDF Mockup)
   ══════════════════════════════════════════════════════════════════════════ */

.os-artifact { text-align: center; }

.os-artifact__pages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 72px auto;
    max-width: 960px;
    align-items: center;
}

.os-artifact__page {
    background: var(--os-surface-mid);
    border: 1px solid var(--os-border-mid);
    border-radius: 4px;
    aspect-ratio: 3/4;
    position: relative;
    overflow: hidden;
    transition: transform var(--os-transition), box-shadow var(--os-transition),
                border-color var(--os-transition);
}

.os-artifact__page:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 72px rgba(0,0,0,.55);
    border-color: var(--os-gold-dim);
}

.os-artifact__page--featured {
    transform: scale(1.07);
    border-color: rgba(201,168,76,.35);
    box-shadow: 0 24px 64px rgba(0,0,0,.45),
                0 0 0 1px rgba(201,168,76,.12);
    z-index: 1;
    background: linear-gradient(160deg, var(--os-surface-hi) 0%, var(--os-surface-mid) 100%);
}

.os-artifact__page--featured:hover {
    transform: scale(1.07) translateY(-8px);
}

.os-artifact__page-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 28px 22px;
    background: linear-gradient(180deg, rgba(201,168,76,.05) 0%, transparent 35%);
}

.os-artifact__page-tag {
    font-family: var(--os-sans);
    font-size: 7px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--os-gold);
    margin-bottom: 14px;
}

.os-artifact__page-title {
    font-family: var(--os-serif);
    font-size: 17px;
    color: var(--os-text);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0;
}

.os-artifact__page-lines {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.os-artifact__page-line {
    height: 5px;
    background: var(--os-border-mid);
    border-radius: 3px;
}

.os-artifact__page-line:last-child { width: 58%; }

/* Decorative mini chart in featured page */
.os-artifact__page-chart {
    position: absolute;
    bottom: 60px;
    right: 18px;
    width: 52px;
    height: 52px;
}

.os-artifact__page-chart-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid rgba(201,168,76,.2);
}

.os-artifact__page-chart-ring:nth-child(1) { width: 52px; height: 52px; }
.os-artifact__page-chart-ring:nth-child(2) { width: 36px; height: 36px; border-color: rgba(201,168,76,.3); }
.os-artifact__page-chart-ring:nth-child(3) { width: 20px; height: 20px; border-color: rgba(201,168,76,.4); }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 05 — Inside Your Blueprint
   ══════════════════════════════════════════════════════════════════════════ */

.os-inside__header {
    text-align: center;
    margin-bottom: 64px;
}

.os-inside__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    background: var(--os-border);
}

.os-feature {
    background: var(--os-bg);
    padding: 40px 44px;
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 22px;
    align-items: start;
    transition: background var(--os-transition);
    position: relative;
}

.os-feature::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--os-gold);
    opacity: 0;
    transition: opacity var(--os-transition);
}

.os-feature:hover {
    background: var(--os-surface);
}

.os-feature:hover::after {
    opacity: 1;
}

.os-feature__number {
    font-family: var(--os-serif);
    font-size: 13px;
    color: var(--os-gold);
    opacity: 0.45;
    padding-top: 4px;
    letter-spacing: 1px;
}

.os-feature__title {
    font-family: var(--os-serif);
    font-size: 19px;
    color: var(--os-text);
    font-weight: 400;
    margin-bottom: 8px;
    line-height: 1.3;
}

.os-feature__body {
    font-size: 14px;
    line-height: 1.8;
    color: var(--os-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 06 — Archetype Layer
   ══════════════════════════════════════════════════════════════════════════ */

.os-archetype {
    text-align: center;
    background: var(--os-surface);
    border-top: 1px solid var(--os-border);
    border-bottom: 1px solid var(--os-border);
    position: relative;
    overflow: hidden;
}

.os-archetype::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(ellipse, rgba(80,50,180,.04) 0%, transparent 65%);
    pointer-events: none;
}

.os-archetype__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    background: var(--os-border);
    margin: 52px 0;
    border: 1px solid var(--os-border);
}

.os-archetype__item {
    background: var(--os-surface);
    padding: 32px 20px;
    text-align: center;
    transition: background var(--os-transition);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.os-archetype__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 120px 120px at 50% 50%, rgba(201,168,76,.06) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--os-transition);
}

.os-archetype__item:hover { background: var(--os-surface-hi); }
.os-archetype__item:hover::after { opacity: 1; }

.os-archetype__roman {
    font-family: var(--os-sans);
    font-size: 8px;
    letter-spacing: 3px;
    color: var(--os-ghost);
    display: block;
    margin-bottom: 10px;
}

.os-archetype__name {
    font-family: var(--os-serif);
    font-size: 16px;
    color: var(--os-body-clr);
    font-weight: 400;
    transition: color var(--os-transition);
}

.os-archetype__item:hover .os-archetype__name {
    color: var(--os-cream);
}

.os-archetype__cta-line {
    font-size: 15px;
    color: var(--os-muted);
    margin-top: 40px;
    line-height: 1.75;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 07 — Social Proof
   ══════════════════════════════════════════════════════════════════════════ */

.os-proof__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.os-testimonial {
    background: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: 6px;
    padding: 40px 36px;
    position: relative;
    transition: border-color var(--os-transition), transform var(--os-transition),
                box-shadow var(--os-transition);
    overflow: hidden;
}

.os-testimonial::before {
    content: '\201C';
    position: absolute;
    top: 16px;
    left: 28px;
    font-family: var(--os-serif);
    font-size: 64px;
    color: rgba(201,168,76,.15);
    line-height: 1;
    pointer-events: none;
}

.os-testimonial::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--os-gold-dim), transparent);
    opacity: 0;
    transition: opacity var(--os-transition);
}

.os-testimonial:hover {
    border-color: rgba(201,168,76,.22);
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(0,0,0,.4);
}

.os-testimonial:hover::after { opacity: 1; }

.os-testimonial__quote {
    font-family: var(--os-serif);
    font-size: 16px;
    line-height: 1.8;
    color: var(--os-body-clr);
    font-style: italic;
    margin: 0 0 24px;
    padding-top: 20px;
    font-weight: 300;
}

.os-testimonial__author {
    font-family: var(--os-sans);
    font-size: 12px;
    color: var(--os-muted);
    letter-spacing: 0.5px;
    font-weight: 500;
}

.os-testimonial__archetype {
    display: block;
    font-size: 9px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--os-gold);
    margin-top: 5px;
    opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 08 — The Making
   ══════════════════════════════════════════════════════════════════════════ */

.os-making { text-align: center; }

.os-making__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 72px;
    position: relative;
}

.os-making__steps::before {
    content: '';
    position: absolute;
    top: 36px;
    left: calc(16.66% + 28px);
    right: calc(16.66% + 28px);
    height: 1px;
    background: linear-gradient(to right,
        rgba(201,168,76,.18),
        rgba(201,168,76,.28),
        rgba(201,168,76,.18));
}

.os-step { text-align: center; }

.os-step__number {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--os-surface);
    border: 1px solid var(--os-gold-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
    font-family: var(--os-serif);
    font-size: 22px;
    color: var(--os-gold);
    position: relative;
    z-index: 1;
    transition: background var(--os-transition), box-shadow var(--os-transition);
}

.os-step:hover .os-step__number {
    background: var(--os-surface-hi);
    box-shadow: 0 0 0 8px var(--os-gold-faint);
}

.os-step__title {
    font-family: var(--os-serif);
    font-size: 20px;
    color: var(--os-text);
    font-weight: 400;
    margin-bottom: 14px;
}

.os-step__body {
    font-size: 14px;
    line-height: 1.85;
    color: var(--os-muted);
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 09 — Pricing
   ══════════════════════════════════════════════════════════════════════════ */

.os-pricing { text-align: center; }

.os-pricing__card {
    background: var(--os-surface);
    border: 1px solid var(--os-border-mid);
    border-radius: 8px;
    padding: 72px 88px;
    max-width: 660px;
    margin: 56px auto 0;
    position: relative;
    overflow: hidden;
}

/* Gold top accent */
.os-pricing__card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--os-gold), transparent);
}

/* Atmospheric glow inside card */
.os-pricing__card::after {
    content: '';
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 200px;
    background: radial-gradient(ellipse, rgba(201,168,76,.06) 0%, transparent 70%);
    pointer-events: none;
}

.os-pricing__anchor {
    font-family: var(--os-serif);
    font-size: 22px;
    color: var(--os-ghost);
    text-decoration: line-through;
    margin-bottom: 8px;
    display: block;
}

.os-pricing__price {
    font-family: var(--os-serif);
    font-size: 72px;
    color: var(--os-text);
    line-height: 1;
    margin-bottom: 8px;
    font-weight: 300;
    letter-spacing: -0.02em;
}

.os-pricing__price sup {
    font-size: 32px;
    vertical-align: super;
}

.os-pricing__note {
    font-family: var(--os-sans);
    font-size: 11px;
    color: var(--os-muted);
    letter-spacing: 1.5px;
    margin-bottom: 44px;
    display: block;
    text-transform: uppercase;
}

.os-pricing__divider {
    height: 1px;
    background: var(--os-border);
    margin: 40px 0;
}

.os-value-stack {
    text-align: left;
    margin-bottom: 40px;
}

.os-value-stack__title {
    font-family: var(--os-sans);
    font-size: 9px;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--os-muted);
    margin-bottom: 20px;
    display: block;
}

.os-value-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--os-border);
}

.os-value-item:last-child { border-bottom: none; }

.os-value-item__label {
    font-size: 14px;
    color: var(--os-body-clr);
    display: flex;
    align-items: center;
    gap: 10px;
}

.os-value-item__label::before {
    content: '✦';
    color: var(--os-gold);
    font-size: 9px;
    opacity: 0.6;
    flex-shrink: 0;
}

.os-value-item__price {
    font-family: var(--os-serif);
    font-size: 15px;
    color: var(--os-ghost);
    text-decoration: line-through;
    flex-shrink: 0;
}

.os-pricing__guarantee {
    font-family: var(--os-sans);
    font-size: 12px;
    color: var(--os-muted);
    margin-top: 28px;
    line-height: 1.75;
    padding: 18px 20px;
    border: 1px solid var(--os-border);
    border-radius: 4px;
    background: var(--os-surface-mid);
    text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 10 — FAQ
   ══════════════════════════════════════════════════════════════════════════ */

.os-faq {
    max-width: 760px;
    margin: 0 auto;
}

.os-faq__header {
    text-align: center;
    margin-bottom: 60px;
}

.os-faq__item {
    border-bottom: 1px solid var(--os-border);
}

body.os-landing-page .os-faq__question {
    width: 100%;
    background: none !important;
    border: none !important;
    padding: 28px 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-family: var(--os-serif);
    font-size: 19px;
    color: var(--os-text) !important;
    font-weight: 400;
    line-height: 1.35;
    transition: color var(--os-transition);
    box-shadow: none !important;
    outline: none;
}

body.os-landing-page .os-faq__question:hover {
    color: var(--os-cream) !important;
    background: none !important;
}

.os-faq__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--os-gold-dim);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--os-gold);
    font-size: 18px;
    font-style: normal;
    transition: transform var(--os-transition), background var(--os-transition);
}

.os-faq__item.os-open .os-faq__icon {
    transform: rotate(45deg);
    background: var(--os-gold-faint);
}

.os-faq__answer {
    display: none;
    padding-bottom: 28px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--os-body-clr);
}

.os-faq__item.os-open .os-faq__answer { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 11 — Final CTA
   ══════════════════════════════════════════════════════════════════════════ */

.os-final-cta {
    text-align: center;
    background: var(--os-surface);
    border-top: 1px solid var(--os-border);
    position: relative;
    overflow: hidden;
}

.os-final-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 700px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(201,168,76,.055) 0%, transparent 65%);
    pointer-events: none;
}

.os-final-cta__headline {
    font-family: var(--os-serif);
    font-size: clamp(32px, 4.5vw, 56px);
    font-weight: 300;
    color: var(--os-text);
    line-height: 1.15;
    margin: 0 0 28px;
    letter-spacing: -0.02em;
}

.os-final-cta__sub {
    font-size: 17px;
    line-height: 1.85;
    color: var(--os-body-clr);
    max-width: 540px;
    margin: 0 auto 52px;
}

.os-final-cta__note {
    font-family: var(--os-sans);
    font-size: 11px;
    color: var(--os-ghost);
    margin-top: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 12 — Footer
   ══════════════════════════════════════════════════════════════════════════ */

.os-footer {
    background: var(--os-void);
    border-top: 1px solid var(--os-border);
    padding: 52px 0;
}

.os-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.os-footer__brand {
    font-family: var(--os-serif);
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--os-gold);
}

.os-footer__links { display: flex; gap: 32px; }

.os-footer__links a {
    font-family: var(--os-sans);
    font-size: 11px;
    color: var(--os-ghost);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color var(--os-transition);
}

.os-footer__links a:hover { color: var(--os-muted); }

.os-footer__copy {
    font-family: var(--os-sans);
    font-size: 11px;
    color: rgba(61,61,85,.7);
    letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 960px) + Mobile (≤ 640px)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {

    .os-container { padding: 0 28px; }

    .os-section     { padding: 80px 0; }
    .os-section--sm { padding: 60px 0; }
    .os-section--lg { padding: 96px 0; }

    /* Hero */
    .os-hero {
        grid-template-columns: 1fr;
        gap: 52px;
        padding-top: 120px;
        padding-bottom: 80px;
        text-align: center;
    }

    .os-hero__sub    { max-width: 100%; margin-left: auto; margin-right: auto; }
    .os-hero__actions { justify-content: center; flex-direction: column; align-items: center; }

    .os-hero__visual { order: 1; }
    .os-hero__content { order: 2; }

    .os-doc-stack { width: 240px; height: 340px; }
    .os-doc       { width: 224px; height: 320px; }
    .os-doc--back-3 { top: 14px; left: 20px; }
    .os-doc--back-2 { top: 7px; left: 10px; }

    /* Stats */
    .os-recognition__grid {
        grid-template-columns: 1fr;
    }
    .os-recognition__divider {
        height: 1px;
        width: 60%;
        margin: 0 auto;
    }
    .os-recognition__item { padding: 36px 24px; }

    /* Pillars */
    .os-what__pillars { grid-template-columns: 1fr; gap: 20px; }

    /* Artifact */
    .os-artifact__pages {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin: 48px auto;
    }
    .os-artifact__page--featured { transform: none; }
    .os-artifact__page--featured:hover { transform: translateY(-6px); }

    /* Inside grid */
    .os-inside__grid { grid-template-columns: 1fr; }
    .os-feature { padding: 32px 28px; }

    /* Archetypes */
    .os-archetype__grid { grid-template-columns: repeat(2, 1fr); }

    /* Testimonials */
    .os-proof__grid { grid-template-columns: 1fr; gap: 20px; }

    /* Steps */
    .os-making__steps { grid-template-columns: 1fr; gap: 48px; }
    .os-making__steps::before { display: none; }

    /* Pricing */
    .os-pricing__card { padding: 52px 36px; }
    .os-pricing__price { font-size: 56px; }

    /* CTA */
    .os-btn--primary { padding: 18px 40px; }

    /* Footer */
    .os-footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
    .os-footer__links { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 640px) {

    .os-container { padding: 0 20px; }

    .os-section     { padding: 64px 0; }
    .os-section--sm { padding: 48px 0; }
    .os-section--lg { padding: 80px 0; }

    /* Header */
    .os-header { padding: 16px 0; }
    .os-header__brand { font-size: 10px; letter-spacing: 4px; }
    .os-header__nav { gap: 14px; }
    .os-header__account { font-size: 9px; letter-spacing: 1.5px; }
    .os-header__cta { padding: 9px 18px; font-size: 12px; }

    /* Hero */
    .os-hero { padding-top: 100px; padding-bottom: 64px; }
    .os-hero__headline { font-size: clamp(34px, 8.5vw, 46px); }
    .os-hero__sub { font-size: 15px; }

    .os-doc-stack { width: 210px; height: 295px; }
    .os-doc       { width: 196px; height: 278px; }
    .os-doc__chart { width: 84px; height: 84px; }
    .os-doc__chart-circle--outer { width: 84px;  height: 84px;  }
    .os-doc__chart-circle--mid   { width: 58px;  height: 58px;  }
    .os-doc__chart-circle--inner { width: 33px;  height: 33px;  }

    /* Full-width CTAs */
    .os-btn--primary,
    .os-btn--ghost {
        width: 100%;
        text-align: center;
        padding: 18px 28px;
        font-size: 16px;
        display: block;
    }

    /* Trust bar */
    .os-trust-bar { gap: 16px; flex-direction: column; align-items: center; }

    /* Features */
    .os-feature { grid-template-columns: 40px 1fr; gap: 16px; padding: 28px 22px; }

    /* Archetypes */
    .os-archetype__grid { grid-template-columns: repeat(2, 1fr); }
    .os-archetype__item { padding: 24px 14px; }
    .os-archetype__name { font-size: 14px; }

    /* Pricing */
    .os-pricing__card { padding: 44px 24px; }
    .os-pricing__price { font-size: 48px; }
    .os-pricing__price sup { font-size: 24px; }

    /* FAQ */
    body.os-landing-page .os-faq__question { font-size: 17px; padding: 22px 0; }

    /* Headlines */
    .os-headline--xl { font-size: clamp(30px, 7.5vw, 42px); }
    .os-headline--lg { font-size: clamp(24px, 6.5vw, 34px); }

    /* Recognition values bigger on mobile */
    .os-recognition__item-value { font-size: 44px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FINAL CONVERSION PASS — Phase 1–6 additions
   Appended after Round 1 base styles.
══════════════════════════════════════════════════════════════════════════════ */

/* ── Phase 1: Hero social proof bar ─────────────────────────────────────── */

.os-hero__proof {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.os-hero__proof-stars {
    color: var(--os-gold);
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 1;
}

.os-hero__proof-text {
    font-family: var(--os-sans);
    font-size: 11px;
    color: var(--os-muted);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* ── Phase 1: Hero atmospheric breathing glow ────────────────────────────── */

@keyframes os-hero-breathe {
    0%,  100% { transform: scale(1)    translate(0,  0);       opacity: 0.70; }
    40%        { transform: scale(1.18) translate(-2%, 3%);     opacity: 1.00; }
    70%        { transform: scale(0.88) translate(3%,  -2%);    opacity: 0.55; }
}

#hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 60% 55% at 50% 40%,
        rgba(201,168,76,.035) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
    animation: os-hero-breathe 12s ease-in-out infinite;
}

/* ── Phase 2: Testimonial avatar + verified badge ────────────────────────── */

.os-testimonial__header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.os-testimonial__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(201,168,76,.18) 0%, rgba(201,168,76,.06) 100%);
    border: 1px solid rgba(201,168,76,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--os-serif);
    font-size: 18px;
    font-weight: 300;
    color: var(--os-gold);
    flex-shrink: 0;
    letter-spacing: 0;
}

.os-testimonial__header > div {
    flex: 1;
    min-width: 0;
}

.os-testimonial__header .os-testimonial__author {
    font-size: 13px;
    color: var(--os-cream);
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.os-testimonial__header .os-testimonial__archetype {
    font-size: 10px;
    letter-spacing: 1.2px;
    color: var(--os-muted);
    text-transform: uppercase;
}

.os-verified {
    font-family: var(--os-sans);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--os-gold);
    background: rgba(201,168,76,.08);
    border: 1px solid rgba(201,168,76,.18);
    border-radius: 3px;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
}

/* ── Phase 3: Sticky mobile CTA bar ─────────────────────────────────────── */

.os-mobile-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(
        to top,
        rgba(8,7,20,.98) 0%,
        rgba(8,7,20,.92) 100%
    );
    border-top: 1px solid rgba(201,168,76,.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* hidden by default — JS adds --visible */
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    /* only show on mobile */
    display: none;
}

.os-mobile-cta--visible {
    transform: translateY(0);
}

.os-mobile-cta__btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--os-gold);
    color: var(--os-bg);
    font-family: var(--os-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 18px 24px;
    border-radius: 4px;
    min-height: 56px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--os-transition), transform 0.15s ease;
}

.os-mobile-cta__btn:hover {
    background: var(--os-gold-bright);
    text-decoration: none;
}

.os-mobile-cta__btn:active {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .os-mobile-cta { display: block; }
    body.os-landing-page { padding-bottom: 88px; }
}

/* ── Phase 4: Gradient text on recognition stat values ───────────────────── */

.os-recognition__item-value {
    background: linear-gradient(135deg, #F0EFF8 0%, #C9A84C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Fallback for browsers that don't support background-clip: text */
@supports not (-webkit-background-clip: text) {
    .os-recognition__item-value { color: var(--os-cream); }
}

/* ── Phase 4: CTA min-height + inline-flex for better tap target ─────────── */

.os-btn--primary {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Phase 6: prefers-reduced-motion — disable all motion ────────────────── */

@media (prefers-reduced-motion: reduce) {

    /* Kill starfield canvas */
    #os-stars-canvas { display: none !important; }

    /* Kill document float animation */
    .os-doc--front,
    .os-doc-stack { animation: none !important; }

    /* Kill CTA pulse ring */
    .os-btn--cta::after { animation: none !important; }

    /* Kill orbs */
    .os-orb { animation: none !important; }

    /* Kill hero breathing glow */
    #hero::after { animation: none !important; }

    /* Kill scroll progress */
    .os-scroll-progress { display: none !important; }

    /* Instant fade-ins */
    .os-fade-in {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Instant hover transitions */
    .os-testimonial,
    .os-feature,
    .os-archetype__item,
    .os-btn--primary,
    .os-btn--ghost {
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   FINAL VISUAL IMMERSION PASS — New visual components
   Hero badge · Presence · Portrait · Pages Reveal · Feature Anchor ·
   Pull Quote · Cosmic Band
══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero: Fourth depth layer + floating page-count badge ─────────────────── */

.os-doc--back-4 {
    top: 22px;
    left: 40px;
    transform: rotate(7.5deg);
    background: #060610;
    border: 1px solid rgba(255,255,255,.03);
    z-index: 0;
    opacity: 0.55;
}

.os-hero__visual { position: relative; }

.os-doc-badge {
    position: absolute;
    top: -10px;
    right: -22px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(201,168,76,.16) 0%, rgba(70,45,160,.10) 100%);
    border: 1px solid rgba(201,168,76,.32);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(201,168,76,.12);
    animation: os-badge-float 7s ease-in-out infinite;
}

@keyframes os-badge-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-6px) rotate(1deg); }
}

.os-doc-badge__num {
    font-family: var(--os-serif);
    font-size: 22px;
    color: #E8D5A3;
    line-height: 1;
    font-weight: 300;
    letter-spacing: -0.5px;
}

.os-doc-badge__num sup {
    font-size: 11px;
    vertical-align: super;
    letter-spacing: 0;
}

.os-doc-badge__label {
    font-family: var(--os-sans);
    font-size: 6.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--os-gold);
    opacity: 0.72;
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERSTITIAL A — Editorial Presence
   ══════════════════════════════════════════════════════════════════════════ */

.os-presence {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 800px 600px at 5% 50%,  rgba(80,50,180,.045)  0%, transparent 65%),
        radial-gradient(ellipse 600px 700px at 95% 25%, rgba(201,168,76,.040)  0%, transparent 65%),
        var(--os-bg);
}

.os-presence__layout {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 80px;
}

.os-presence__text {
    max-width: 560px;
}

.os-presence__blockquote {
    margin: 0 0 44px;
    padding: 0;
    border: none;
}

.os-presence__quote-text {
    font-family: var(--os-serif);
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 300;
    line-height: 1.45;
    color: var(--os-text);
    font-style: italic;
    margin: 0 0 32px;
    letter-spacing: -0.01em;
    position: relative;
    padding-left: 28px;
}

.os-presence__quote-text::before {
    content: '\201C';
    position: absolute;
    top: -0.05em;
    left: 0;
    color: rgba(201,168,76,.45);
    font-size: 2em;
    line-height: 1;
    font-style: normal;
}

.os-presence__attr {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding-left: 20px;
    border-left: 2px solid rgba(201,168,76,.28);
}

.os-presence__attr-name {
    font-family: var(--os-sans);
    font-size: 12px;
    color: var(--os-cream);
    letter-spacing: 0.5px;
    font-weight: 500;
}

.os-presence__attr-archetype {
    font-family: var(--os-sans);
    font-size: 9px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--os-gold);
    opacity: 0.72;
}

/* ── Abstract Editorial Portrait ─────────────────────────────────────────── */

.os-presence__portrait {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.os-portrait {
    position: relative;
    width: 300px;
    height: 420px;
    background: #05050e;
    border: 1px solid rgba(201,168,76,.18);
    border-radius: 3px;
    overflow: hidden;
    box-shadow:
        0 48px 110px rgba(0,0,0,.68),
        0 0 0 1px rgba(201,168,76,.05) inset;
    flex-shrink: 0;
}

/* Top-right corner accent */
.os-portrait::before {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
    border-top: 1px solid rgba(201,168,76,.42);
    border-right: 1px solid rgba(201,168,76,.42);
    z-index: 20;
    pointer-events: none;
}

/* Bottom-left corner accent */
.os-portrait::after {
    content: '';
    position: absolute;
    bottom: 14px;
    left: 14px;
    width: 22px;
    height: 22px;
    border-bottom: 1px solid rgba(201,168,76,.42);
    border-left: 1px solid rgba(201,168,76,.42);
    z-index: 20;
    pointer-events: none;
}

/* Primary light — warm gold from upper-right, like a window behind her */
.os-portrait__light {
    position: absolute;
    top: -55px;
    right: -48px;
    width: 290px;
    height: 290px;
    background: radial-gradient(ellipse at 65% 30%,
        rgba(201,168,76,.24) 0%,
        rgba(150,95,210,.09) 42%,
        transparent 72%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Ambient fill — cool indigo from lower-left */
.os-portrait__ambient {
    position: absolute;
    bottom: -40px;
    left: -55px;
    width: 260px;
    height: 260px;
    background: radial-gradient(ellipse,
        rgba(55,35,155,.13) 0%,
        transparent 68%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Figure wrapper */
.os-portrait__figure {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Head — backlit luminous ellipse */
.os-portrait__head {
    position: absolute;
    top: 55px;
    left: 50%;
    transform: translateX(-46%);
    width: 100px;
    height: 122px;
    background: radial-gradient(ellipse at 60% 36%,
        rgba(236,231,220,.12) 0%,
        rgba(201,168,76,.07) 38%,
        transparent 70%
    );
    border-radius: 50% 50% 48% 48% / 42% 42% 58% 58%;
}

/* Shoulders and upper body */
.os-portrait__body {
    position: absolute;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    height: 250px;
    background: radial-gradient(ellipse at 50% 82%,
        rgba(201,168,76,.09) 0%,
        rgba(201,168,76,.04) 48%,
        transparent 70%
    );
    clip-path: ellipse(53% 62% at 50% 100%);
}

/* Edge vignette — frames the composition */
.os-portrait__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 76% 82% at 50% 50%, transparent 42%, rgba(0,0,0,.74) 100%);
    z-index: 3;
    pointer-events: none;
}

/* Gold dust particles scattered through the frame */
@keyframes os-dust {
    0%, 100% { opacity: 0.32; }
    50%       { opacity: 0.78; }
}

.os-portrait__dust {
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: transparent;
    z-index: 4;
    pointer-events: none;
    box-shadow:
        55px  68px 0 0 rgba(201,168,76,.68),
        105px 108px 0 0 rgba(201,168,76,.48),
        188px  48px 0 0 rgba(201,168,76,.58),
        258px 150px 0 0 rgba(201,168,76,.42),
        32px  218px 0 0 rgba(201,168,76,.52),
        140px 272px 0 0 rgba(201,168,76,.38),
        232px 322px 0 0 rgba(201,168,76,.46),
        65px  355px 0 0 rgba(201,168,76,.32),
        205px 382px 0 0 rgba(201,168,76,.28),
        276px  75px 0 0 rgba(201,168,76,.40),
        172px 175px 0 0 rgba(255,255,255,.18),
        85px  295px 0 0 rgba(255,255,255,.14),
        246px 245px 0 0 rgba(255,255,255,.16);
    animation: os-dust 9s ease-in-out infinite;
}

/* Bottom archetype badge — name overlaid on darkened base */
.os-portrait__badge {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 22px 26px;
    background: linear-gradient(to top, rgba(5,5,14,.96) 55%, transparent);
    text-align: center;
    z-index: 5;
}

.os-portrait__badge-glyph {
    display: block;
    color: var(--os-gold);
    font-size: 10px;
    opacity: 0.48;
    margin-bottom: 7px;
}

.os-portrait__badge-label {
    display: block;
    font-family: var(--os-serif);
    font-size: 20px;
    color: #E8D5A3;
    font-style: italic;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 5px;
}

.os-portrait__badge-sub {
    display: block;
    font-family: var(--os-sans);
    font-size: 7.5px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--os-gold);
    opacity: 0.58;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 4B — Sample Pages Reveal
   ══════════════════════════════════════════════════════════════════════════ */

.os-pages-reveal {
    background: var(--os-surface);
    border-top: 1px solid var(--os-border);
    border-bottom: 1px solid var(--os-border);
    position: relative;
    overflow: hidden;
}

.os-pages-reveal::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 900px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(201,168,76,.04) 0%, transparent 65%);
    pointer-events: none;
}

.os-pages-reveal__sub {
    font-family: var(--os-serif);
    font-size: clamp(16px, 1.8vw, 21px);
    color: var(--os-muted);
    font-style: italic;
    margin: 10px 0 0;
    font-weight: 300;
}

.os-pages-reveal__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin: 52px 0 36px;
    align-items: start;
}

/* Base sample page */
.os-sample-page {
    position: relative;
    cursor: default;
    transition: transform var(--os-transition), z-index 0s;
}

.os-sample-page:hover {
    transform: translateY(-10px);
    z-index: 2;
}

.os-sp-inner {
    aspect-ratio: 3/4;
    background: linear-gradient(165deg, var(--os-surface-hi) 0%, var(--os-surface-mid) 100%);
    border: 1px solid var(--os-border-mid);
    border-radius: 4px;
    padding: 18px 16px 14px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 52px rgba(0,0,0,.48);
    transition: box-shadow var(--os-transition), border-color var(--os-transition);
}

.os-sample-page:hover .os-sp-inner {
    box-shadow: 0 36px 88px rgba(0,0,0,.64);
    border-color: rgba(201,168,76,.28);
}

/* Featured page (scores) */
.os-sample-page--featured .os-sp-inner {
    border-color: rgba(201,168,76,.35);
    box-shadow: 0 22px 64px rgba(0,0,0,.52),
                0 0 0 1px rgba(201,168,76,.12);
    background: linear-gradient(165deg, #141432 0%, #0c0c20 100%);
}

.os-sample-page--featured .os-sp-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--os-gold), transparent);
}

/* Header row shared by all pages */
.os-sp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201,168,76,.1);
    flex-shrink: 0;
}

.os-sp-tag {
    font-family: var(--os-sans);
    font-size: 5.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--os-gold);
    opacity: 0.82;
}

.os-sp-section-num {
    font-family: var(--os-serif);
    font-size: 8px;
    color: var(--os-ghost);
    font-style: italic;
}

/* Page A: Title/Hero page */
.os-sample-page--a .os-sp-glyph {
    color: var(--os-gold);
    font-size: 16px;
    opacity: 0.48;
    text-align: center;
    margin: 14px 0 8px;
    flex-shrink: 0;
}

.os-sample-page--a .os-sp-prepared {
    font-family: var(--os-sans);
    font-size: 5.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--os-ghost);
    text-align: center;
    margin-bottom: 7px;
    flex-shrink: 0;
}

.os-sample-page--a .os-sp-name-bar {
    height: 9px;
    background: rgba(236,231,220,.14);
    border-radius: 2px;
    margin: 0 20px 18px;
    flex-shrink: 0;
}

.os-sp-archetype-reveal {
    margin-top: auto;
    text-align: center;
    padding-bottom: 8px;
}

.os-sp-arch-label {
    font-family: var(--os-sans);
    font-size: 5.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--os-ghost);
    margin-bottom: 5px;
}

.os-sp-arch-name {
    font-family: var(--os-serif);
    font-size: clamp(13px, 1.3vw, 17px);
    color: #E8D5A3;
    font-style: italic;
    font-weight: 300;
}

.os-sp-foot-rule {
    height: 1px;
    background: rgba(201,168,76,.12);
    margin: 8px 0 6px;
    flex-shrink: 0;
}

.os-sp-foot-text {
    font-family: var(--os-sans);
    font-size: 5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--os-ghost);
    text-align: center;
    flex-shrink: 0;
}

/* Page B: Scores */
.os-sp-chapter {
    font-family: var(--os-serif);
    font-size: clamp(10px, 1.1vw, 13px);
    color: var(--os-text);
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 1.3;
    flex-shrink: 0;
}

.os-sp-scores {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    justify-content: center;
}

.os-sp-score {
    display: flex;
    align-items: center;
    gap: 5px;
}

.os-sp-score > span:first-child {
    font-family: var(--os-sans);
    font-size: 5.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--os-ghost);
    width: 48px;
    flex-shrink: 0;
}

.os-sp-score-bar {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,.06);
    border-radius: 2px;
    overflow: hidden;
}

.os-sp-score-bar > div {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(to right, rgba(201,168,76,.82), rgba(201,168,76,.38));
}

.os-sp-score > span:last-child {
    font-family: var(--os-serif);
    font-size: 9px;
    color: var(--os-gold);
    opacity: 0.78;
    width: 18px;
    text-align: right;
    flex-shrink: 0;
}

/* Page C: Natal chart */
.os-sp-chart {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 10px auto 12px;
    flex-shrink: 0;
}

.os-sp-chart-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
}

.os-sp-chart-ring--1 { width: 90px; height: 90px; border: 1px solid rgba(201,168,76,.18); }
.os-sp-chart-ring--2 { width: 62px; height: 62px; border: 1px solid rgba(201,168,76,.26); }
.os-sp-chart-ring--3 { width: 36px; height: 36px; border: 1px solid rgba(201,168,76,.34); background: rgba(201,168,76,.02); }

.os-sp-chart-dots {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--os-gold);
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow:
        36px 22px 0 0 rgba(201,168,76,.82),
        -30px 16px 0 0 rgba(201,168,76,.66),
        14px -32px 0 0 rgba(201,168,76,.56),
        -20px -28px 0 0 rgba(201,168,76,.72),
        40px -12px 0 0 rgba(201,168,76,.52);
}

.os-sp-chart-line {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 1px;
    width: 38px;
    transform-origin: left center;
    background: linear-gradient(to right, rgba(201,168,76,.32), transparent);
    transform: rotate(var(--rot));
}

.os-sp-chart-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--os-gold);
    font-size: 9px;
    opacity: 0.45;
}

.os-sp-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}

.os-sp-lines > div {
    height: 4px;
    background: var(--os-border-mid);
    border-radius: 2px;
    width: 100%;
}

/* Page D: Signature card */
.os-sp-sig-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 10px;
    border: 1px solid rgba(201,168,76,.18);
    border-radius: 3px;
    background: rgba(201,168,76,.03);
    margin-top: 8px;
    text-align: center;
}

.os-sp-sig-card__glyph {
    color: var(--os-gold);
    font-size: 10px;
    opacity: 0.5;
}

.os-sp-sig-card__text {
    font-family: var(--os-serif);
    font-size: clamp(11px, 1.1vw, 14px);
    color: var(--os-text);
    font-style: italic;
    line-height: 1.55;
    font-weight: 300;
}

.os-sp-sig-card__text em { color: #E8D5A3; }

.os-sp-sig-card__rule {
    width: 28px;
    height: 1px;
    background: rgba(201,168,76,.3);
}

.os-sp-sig-card__attr {
    font-family: var(--os-sans);
    font-size: 6px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--os-gold);
    opacity: 0.62;
}

/* Captions below each page */
.os-sp-caption {
    font-family: var(--os-sans);
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--os-muted);
    text-align: center;
    margin-top: 14px;
}

.os-pages-reveal__note {
    font-family: var(--os-serif);
    font-size: 15px;
    color: var(--os-muted);
    font-style: italic;
    font-weight: 300;
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   SECTION 05 — Inside Blueprint Visual Anchor
   Full-width break between features 6 and 7.
   ══════════════════════════════════════════════════════════════════════════ */

.os-inside__anchor {
    grid-column: 1 / -1;
    background: linear-gradient(to right,
        var(--os-bg) 0%,
        rgba(11,11,24,.85) 25%,
        rgba(11,11,24,.85) 75%,
        var(--os-bg) 100%
    );
    padding: 52px 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.os-inside__anchor::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 700px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(201,168,76,.05) 0%, transparent 70%);
    pointer-events: none;
}

.os-inside__anchor-inner {
    display: flex;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
}

.os-inside__anchor-stack {
    position: relative;
    width: 100px;
    height: 128px;
    flex-shrink: 0;
}

.os-inside__anchor-doc {
    position: absolute;
    width: 88px;
    height: 118px;
    border-radius: 3px;
}

.os-inside__anchor-doc--b {
    top: 8px;
    left: 10px;
    background: var(--os-surface);
    border: 1px solid rgba(201,168,76,.12);
    transform: rotate(4deg);
}

.os-inside__anchor-doc--f {
    top: 0;
    left: 0;
    background: linear-gradient(160deg, #13132a 0%, #0b0b1a 100%);
    border: 1px solid rgba(201,168,76,.28);
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.os-inside__anchor-doc-brand {
    font-family: var(--os-sans);
    font-size: 5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--os-gold);
    opacity: 0.8;
}

.os-inside__anchor-doc-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}

.os-inside__anchor-doc-lines > div {
    height: 3px;
    background: var(--os-border-mid);
    border-radius: 2px;
    width: 100%;
}

.os-inside__anchor-text {
    font-family: var(--os-serif);
    font-size: clamp(18px, 2vw, 26px);
    color: var(--os-text);
    font-style: italic;
    font-weight: 300;
    line-height: 1.55;
    max-width: 540px;
    letter-spacing: -0.01em;
}

.os-inside__anchor-text em { color: #E8D5A3; }

/* ══════════════════════════════════════════════════════════════════════════
   INTERSTITIAL B — Featured Pull Quote
   ══════════════════════════════════════════════════════════════════════════ */

.os-pullquote-section {
    text-align: center;
    position: relative;
    overflow: hidden;
    background: var(--os-bg);
}

.os-pullquote-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 600px;
    height: 250px;
    background: radial-gradient(ellipse, rgba(201,168,76,.05) 0%, transparent 65%);
    pointer-events: none;
}

.os-pullquote {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.os-pullquote__rule {
    width: 100px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(201,168,76,.38), transparent);
}

.os-pullquote__quote {
    font-family: var(--os-serif);
    font-size: clamp(30px, 4.8vw, 56px);
    font-weight: 300;
    color: var(--os-text);
    font-style: italic;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0;
    padding: 0;
    quotes: none;
    position: relative;
}

.os-pullquote__quote::before {
    content: '\201C';
    position: absolute;
    top: -0.1em;
    left: -0.32em;
    color: rgba(201,168,76,.28);
    font-size: 1.6em;
    font-style: normal;
    line-height: 1;
    pointer-events: none;
}

.os-pullquote__attr {
    font-family: var(--os-sans);
    font-size: 11px;
    color: var(--os-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   INTERSTITIAL C — Cosmic Band
   ══════════════════════════════════════════════════════════════════════════ */

.os-cosmic-band {
    background: var(--os-surface);
    border-top: 1px solid var(--os-border);
    border-bottom: 1px solid var(--os-border);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.os-cosmic-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 900px 200px at 50% 50%, rgba(201,168,76,.048) 0%, transparent 70%);
    pointer-events: none;
}

.os-cosmic-band__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
}

.os-cosmic-band__stars {
    width: 100%;
    max-width: 580px;
}

.os-cosmic-band__svg {
    width: 100%;
    height: auto;
    display: block;
}

.os-cosmic-band__statement {
    font-family: var(--os-serif);
    font-size: clamp(20px, 2.4vw, 30px);
    font-weight: 300;
    color: var(--os-text);
    line-height: 1.55;
    max-width: 580px;
    letter-spacing: -0.01em;
    margin: 0;
}

.os-cosmic-band__statement em {
    color: #E8D5A3;
    font-style: italic;
}

/* ── Disable new animations for reduced-motion ───────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .os-doc-badge,
    .os-portrait__dust { animation: none !important; }
    @keyframes os-badge-float { to { transform: none; } }
    @keyframes os-dust { to { opacity: 0.5; } }
}