/* ============================================================
   PAGES-SHARED — primitives for /platform and /developers
   Namespaced .pg- to avoid collisions with styles.css.
   Token values follow the Atticus Design System (Claude Design
   handoff, 2026-06): ink #161617, hairline #e6e6e6, solid #0d0d0d
   buttons, blue->violet ramp, mesh gradient + frosted glass.

.pg-page {
    /* DS overrides, scoped so the homepage keeps its own values */
    --c-n900: #161617;
    --c-n700: #3a3d42;
    --c-n600: #5b5b60;
    --c-n500: #5b5b60;
    --c-n300: #8a8a90;
    --c-accent: #4f6ef7;
    --c-brand-100: #e8edff;
    --c-brand-200: #b0d2fc;
    --c-brand-300: #8ca8e7;
    --c-brand-400: #7492fd;
    --c-brand-500: #5a78f0;
    --c-brand-600: #4f6ef7;
    --c-brand-700: #3a52d6;

    --pg-solid: #0d0d0d;
    --pg-hairline: #e6e6e6;
    --pg-hairline-soft: #eeeeef;
    --pg-ok: #1f9d57;
    --pg-ok-bg: #e7f6ec;
    --pg-ok-ink: #157a42;
    --pg-glass-fill: rgba(255,255,255,0.55);
    --pg-glass-fill-strong: rgba(255,255,255,0.72);
    --pg-glass-stroke: rgba(255,255,255,0.65);
    --pg-grad-vivid: linear-gradient(140deg, #6f8efb 0%, #4f6ef7 48%, #3f57e8 100%);
    --pg-e1: 0 1px 2px rgba(22,22,23,.05), 0 1px 3px rgba(22,22,23,.04);
    --pg-e2: 0 2px 6px rgba(22,22,23,.06), 0 8px 24px rgba(22,22,23,.06);
    --pg-e3: 0 8px 24px rgba(22,22,23,.08), 0 24px 60px rgba(22,22,23,.10);
    --pg-e-glass: 0 12px 40px rgba(60,82,160,.18), inset 0 1px 0 rgba(255,255,255,.5);
}

/* ------------------------------------------------------------
   Pulse dot + live pill
------------------------------------------------------------ */
@keyframes pgPulse {
    0%   { box-shadow: 0 0 0 0 rgba(31,157,87,0.45); }
    70%  { box-shadow: 0 0 0 6px rgba(31,157,87,0); }
    100% { box-shadow: 0 0 0 0 rgba(31,157,87,0); }
}

.pg-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pg-ok);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(31,157,87,0.5);
    animation: pgPulse 2.2s var(--ease) infinite;
}


.pg-live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 12px 0 10px;
    border-radius: var(--r-full);
    background: var(--pg-ok-bg);
    border: 1px solid rgba(31,157,87,0.22);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--pg-ok-ink);
    white-space: nowrap;
}

.pg-live-pill .pg-pulse-dot { width: 6px; height: 6px; }

.pg-live-pill--mini { height: 20px; padding: 0 9px 0 8px; font-size: 9px; }

/* ------------------------------------------------------------
   Sub-page hero — white, not the homepage's blue mesh.
   Scoped via .pg-page so the homepage hero is untouched.
------------------------------------------------------------ */
.pg-page .section-hero { background-color: #FFFFFF; }

.pg-page .section-hero::before {
    background-color: #FFFFFF;
    background-image:
        radial-gradient(60% 70% at 85% 8%, rgba(116,146,253,0.10) 0%, rgba(116,146,253,0) 60%),
        radial-gradient(50% 60% at 8% 90%, rgba(140,168,231,0.08) 0%, rgba(140,168,231,0) 60%);
    animation: none;
}

.pg-page .section-hero::after { opacity: 0.025; }

/* Hero visual — the generated image card, ChatGPT-Business scale */
.pg-page .hero-visual--shot {
    aspect-ratio: auto;
    display: flex;
    justify-content: center;
}

.pg-hero-shot {
    width: 100%;
    max-width: 430px;
    border-radius: var(--r-2xl);
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(25,28,31,0.13), 0 8px 22px rgba(25,28,31,0.06);
}

.pg-hero-shot img {
    display: block;
    width: 100%;
    height: auto;
}

.pg-page .hero-inner {
    min-height: 0;
    padding: 152px 32px 84px;
}

/* ------------------------------------------------------------
   Icon tiles — Codex style: white squircle, black Phosphor icon,
   soft drop shadow. Applied to every card icon on these pages.
------------------------------------------------------------ */
.pg-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: var(--pg-solid);
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(22,22,23,0.08), 0 8px 20px rgba(22,22,23,0.08);
}

.pg-chip .ph {
    font-size: 16px;
    color: var(--pg-solid);
}

/* ------------------------------------------------------------
   Buttons — own copies (don't depend on volatile .hero-cta-btn)
------------------------------------------------------------ */
.pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 28px;
    border-radius: var(--r-full);
    background: var(--pg-solid);
    border: 1px solid transparent;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--pg-e1);
    transition: transform 120ms ease, box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}

.pg-btn:hover {
    background: #000000;
    box-shadow: var(--pg-e2);
}

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

.pg-btn--ghost {
    background: #FFFFFF;
    border-color: var(--pg-hairline);
    color: var(--c-n900);
}

.pg-btn--ghost:hover {
    background: #FFFFFF;
    border-color: #d6d6d8;
    box-shadow: var(--pg-e2);
}

.pg-btn--accent {
    background: var(--pg-grad-vivid);
    box-shadow: 0 6px 18px rgba(79,110,247,0.35);
}

.pg-btn--accent:hover {
    background: var(--pg-grad-vivid);
    box-shadow: 0 10px 26px rgba(79,110,247,0.45);
}

.pg-btn--sm { height: 40px; padding: 0 20px; font-size: 14px; }

/* ------------------------------------------------------------
   Cards
------------------------------------------------------------ */
.pg-card {
    background: #FFFFFF;
    border: 1px solid var(--pg-hairline);
    border-radius: var(--r-xl);
    box-shadow: var(--pg-e2);
}

.pg-card--hover {
    transition: transform 650ms var(--ease), box-shadow 650ms var(--ease);
}

.pg-card--hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* ------------------------------------------------------------
   Stat cards (count-up values)
------------------------------------------------------------ */
.pg-stat-card {
    background: #FFFFFF;
    border-radius: var(--r-xl);
    border: 1px solid var(--pg-hairline);
    box-shadow: var(--shadow-sm);
    padding: 32px 34px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pg-stat-label {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-n700);
}

.pg-stat-label .ph { flex-shrink: 0; }

.pg-stat-value {
    font-size: 46px;
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--c-n900);
    font-variant-numeric: tabular-nums;
}

.pg-stat-desc {
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-n500);
}

/* ------------------------------------------------------------
   Chip strip (accreditation / compliance badges)
------------------------------------------------------------ */
.pg-chip-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.pg-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 44px;
    padding: 0 20px;
    border-radius: var(--r-full);
    background: #FFFFFF;
    border: 1px solid var(--pg-hairline);
    box-shadow: var(--shadow-xs);
    font-size: 14px;
    font-weight: 500;
    color: var(--c-n700);
    white-space: nowrap;
}

.pg-chip .ph { flex-shrink: 0; }

/* ------------------------------------------------------------
   Check list rows
------------------------------------------------------------ */
.pg-check-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pg-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--c-n600);
}

.pg-check-list li strong { color: var(--c-n900); font-weight: 600; }

.pg-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(18,183,106,0.10);
    color: var(--pg-ok-ink);
    flex-shrink: 0;
    margin-top: 2px;
}

.pg-check svg { width: 11px; height: 11px; }

/* ------------------------------------------------------------
   Mono utility (hash ids, timing chips, code lines)
------------------------------------------------------------ */
.pg-mono {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* ------------------------------------------------------------
   Final CTA band on mesh
------------------------------------------------------------ */
.pg-cta-band {
    padding: 24px 0;
}

.pg-cta-band .pg-cta-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}

.pg-cta-title {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--c-n900);
}

.pg-cta-desc {
    font-size: 17px;
    line-height: 1.6;
    color: var(--c-n500);
    max-width: 520px;
}

.pg-cta-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

/* ------------------------------------------------------------
   Section rhythm for new pages
------------------------------------------------------------ */
.pg-section { padding: 112px 0; position: relative; overflow: hidden; }
.pg-section--xtight { padding: 56px 0; }

/* Handoff facts bar — the three claims nobody else can make */
.pg-handoff {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 26px;
}

.pg-handoff--center { justify-content: center; }

.pg-handoff-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-n700);
}

.pg-handoff-item .ph {
    font-size: 18px;
    color: var(--pg-ok);
}

/* Anchor jumps land below the fixed header */
.pg-page section[id] { scroll-margin-top: 104px; }

/* Accreditation chips lift on hover */
.pg-chip { transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.pg-chip:hover { transform: translateY(-2px); box-shadow: var(--pg-e2); }

/* Mono kicker — the ChatGPT-style section eyebrow */
.pg-kicker {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--c-accent-ink, #3a52d6);
    margin-bottom: 14px;
}

.pg-kicker--center { text-align: center; }
.pg-section--tight { padding: 64px 0; }

.pg-section-title {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--c-n900);
    text-align: center;
    margin-bottom: 16px;
}

.pg-section-sub {
    font-size: 17px;
    line-height: 1.6;
    color: var(--c-n500);
    text-align: center;
    max-width: 600px;
    margin: 0 auto 56px;
}

/* ------------------------------------------------------------
   Generic in-view animation primitives (flipped by pages.js)
   Bars: scaleX from --w custom property. Draw-in strokes.
------------------------------------------------------------ */
[data-animate] .pg-bar-fill {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms var(--ease);
}

[data-animate].in-view .pg-bar-fill { transform: scaleX(var(--w, 1)); }

[data-animate] .pg-draw {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1400ms var(--ease);
}

[data-animate].in-view .pg-draw { stroke-dashoffset: 0; }

[data-animate] .pg-fill-fade {
    opacity: 0;
    transition: opacity 900ms var(--ease) 500ms;
}

[data-animate].in-view .pg-fill-fade { opacity: 1; }

/* ------------------------------------------------------------
   Motion layer — entrances, hover zooms, living gradients
------------------------------------------------------------ */
@keyframes pgRiseIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

.pg-hero-enter   { animation: pgRiseIn 650ms var(--ease) both; }
.pg-hero-enter-2 { animation: pgRiseIn 750ms var(--ease) 140ms both; }

/* Floating live chips layered over imagery (patients-page pattern) */
.pg-float-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 12px 18px;
    border-radius: var(--r-full);
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(22,22,23,0.10), 0 14px 36px rgba(22,22,23,0.14);
    font-size: 13px;
    font-weight: 500;
    color: var(--c-n600);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition: opacity 600ms var(--ease) 450ms, transform 600ms var(--ease) 450ms;
}

.pg-float-chip b {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-n900);
    font-variant-numeric: tabular-nums;
}

[data-reveal].revealed .pg-float-chip,
[data-animate].in-view .pg-float-chip {
    opacity: 1;
    transform: none;
}

.pg-float-chip--br { right: 22px; bottom: 22px; }
.pg-float-chip--bl { left: 22px; bottom: 22px; }
.pg-float-chip--tr { right: 22px; top: 22px; }

/* Slow zoom on product imagery hover — OpenAI-style quiet depth */
.pg-zoom img { transition: transform 1100ms var(--ease); }
.pg-zoom:hover img { transform: scale(1.025); }

/* Living aurora — gentle drift on gradient art surfaces */
@keyframes pgAuroraDrift {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.pg-aurora-live {
    background-size: 160% 160%;
    animation: pgAuroraDrift 14s ease-in-out infinite alternate;
}

/* Closing wallpaper band — full-bleed aurora with a slow drift */
.pg-wallpaper {
    overflow: hidden;
    height: clamp(240px, 30vw, 420px);
    margin-top: 24px;
}

@keyframes pgWallpaperDrift {
    from { transform: scale(1.04) translateX(-1.2%); }
    to   { transform: scale(1.04) translateX(1.2%); }
}

.pg-wallpaper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: pgWallpaperDrift 26s ease-in-out infinite alternate;
}

/* ------------------------------------------------------------
   Reduced motion — new pages land at final state, loops off
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .pg-pulse-dot { animation: none; }

    .pg-btn, .pg-card--hover, .pg-chip { transition: none; }

    [data-animate] .pg-bar-fill {
        transition: none;
        transform: scaleX(var(--w, 1));
    }

    [data-animate] .pg-draw {
        transition: none;
        stroke-dashoffset: 0;
    }

    [data-animate] .pg-fill-fade {
        transition: none;
        opacity: 1;
    }

    /* Scoped guard for the styles.css reveal system on these pages */
    .pg-page [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------
   Responsive mirrors
------------------------------------------------------------ */
@media (max-width: 960px) {
    .pg-section { padding: 72px 0; }
    .pg-cta-title { font-size: 36px; }
    .pg-section-title { font-size: 32px; }
    .pg-stat-value { font-size: 38px; }
}

@media (max-width: 768px) {
    .pg-cta-band { padding: 88px 0; }
    .pg-cta-actions { flex-direction: column; width: 100%; }
    .pg-cta-actions .pg-btn { width: 100%; }
}

@media (max-width: 480px) {
    .pg-section { padding: 56px 0; }
    .pg-cta-title { font-size: 30px; }
    .pg-section-title { font-size: 28px; }
}

/* ------------------------------------------------------------
   Accreditation strip label — shared baseline so pages that
   don't load platform.css / whats-included.css (e.g. /programs)
   still render it centered instead of as bare unstyled text.
   Page-local .pp-strip-label rules override via load order.
------------------------------------------------------------ */
.pp-strip-label {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--c-n500, #5b5b60);
    margin-bottom: 20px;
}