/* ==========================================================================
   Human + AI Daily — About & Pricing: editorial + motion layer
   Loaded after each page's own <style>. Visual only; pairs with pages.js.
   ========================================================================== */

:root {
    --ink: #0B1733;
    --paper: #F6F4EF;
    --surface: #FFFFFF;
    --line: #E4E1D8;
    --muted: #5B6478;
    --accent: #E8890C;
    --brand: #2348E8;
    --brand-soft: #EEF2FF;
    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
}

[data-theme="dark"] {
    --ink: #EEF2FB;
    --paper: #0A0F1D;
    --surface: #111827;
    --line: #232C42;
    --muted: #8E99B3;
    --accent: #F5A524;
    --brand: #7C9BFF;
    --brand-soft: rgba(124, 155, 255, 0.12);
}

body { background: var(--paper); color: var(--ink); }

/* ---------- Floating glass navigation ---------------------------------- */

.top-nav {
    position: sticky;
    top: 12px;
    z-index: 50;
    max-width: 1100px;
    margin: 12px auto 0;
    padding: 12px 14px 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background 0.35s, border-color 0.35s, box-shadow 0.35s, padding 0.35s;
}

.top-nav.scrolled {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-color: var(--line);
    box-shadow: 0 14px 40px -18px rgba(11, 23, 51, 0.35);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.top-nav .logo { font-family: var(--display) !important; font-weight: 600 !important; letter-spacing: -0.01em; color: var(--ink) !important; }
.top-nav .logo span[style*="D97706"] { display: inline-block; transition: transform 0.6s cubic-bezier(.3,1.6,.5,1); color: var(--accent) !important; }
.top-nav .logo:hover span[style*="D97706"] { transform: rotate(180deg) scale(1.3); }

.top-nav .nav-links { position: relative; gap: 4px !important; }

.top-nav .nav-links a {
    position: relative;
    z-index: 1;
    padding: 7px 14px;
    border-radius: 999px;
    color: var(--muted) !important;
    transition: color 0.25s;
}

.top-nav .nav-links a.active { color: var(--surface) !important; }
.top-nav .nav-links a:hover:not(.active) { color: var(--ink) !important; }

.nav-pill {
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    border-radius: 999px;
    background: var(--ink);
    z-index: 0;
    transition: transform 0.45s cubic-bezier(.3,1.4,.4,1), width 0.45s cubic-bezier(.3,1.4,.4,1);
    pointer-events: none;
}

.theme-toggle { border-color: var(--line) !important; color: var(--muted) !important; margin-left: 6px; }
.theme-toggle svg { transition: transform 0.6s cubic-bezier(.3,1.4,.5,1); }
.theme-toggle:hover svg { transform: rotate(-35deg) scale(1.1); }

/* ---------- Hero with living network ----------------------------------- */

.hero,
.page-header {
    position: relative;
    isolation: isolate;
    border-bottom: none !important;
}

.site-hero-canvas {
    position: absolute;
    inset: -40px -10vw 0;
    width: calc(100% + 20vw);
    height: calc(100% + 40px);
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
    mask-image: linear-gradient(to right, transparent 0%, #000 45%);
}

.hero h1,
.page-header h1 { color: var(--ink) !important; text-wrap: balance; }

.hero h1 em,
.page-header h1 em {
    font-style: italic;
    color: var(--accent);
}

.hero p,
.page-header p { color: var(--muted) !important; }

.word {
    display: inline-block;
    animation: wordRise 0.8s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--i, 0) * 60ms + 100ms);
}

@keyframes wordRise {
    from { opacity: 0; transform: translateY(0.5em) rotate(2deg); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.hero-kicker,
.page-kicker,
.hero p,
.page-header p { animation: rise 0.8s cubic-bezier(.2,.8,.2,1) both; }

.hero p, .page-header p { animation-delay: 0.45s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Sections reveal as you scroll ------------------------------ */

.section { border-color: var(--line) !important; }
.section h2, .faq h2 { color: var(--ink) !important; }
.section > p { color: var(--muted) !important; }

@supports (animation-timeline: view()) {
    .section h2,
    .section > p,
    .value-card,
    .topic-pill,
    .step,
    .cta,
    .pricing-card,
    .faq-item {
        animation: reveal linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 75%;
    }
}

/* Movement only: content is always fully visible, even before it scrolls in */
@keyframes reveal {
    from { transform: translateY(28px); }
    to   { transform: none; }
}

/* ---------- About: value cards ----------------------------------------- */

.value-grid { gap: 18px !important; }

.value-card {
    position: relative;
    padding: 26px 24px 28px !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(11, 23, 51, 0.04), 0 6px 20px rgba(11, 23, 51, 0.05);
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transition: box-shadow 0.35s, border-color 0.25s;
    overflow: hidden;
}

.value-card:hover { --lift: -6px; box-shadow: 0 30px 50px -24px rgba(11, 23, 51, 0.35); border-color: color-mix(in srgb, var(--brand) 30%, var(--line)) !important; }

.value-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 12%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.value-card:hover::after { opacity: 1; }

.value-card .card-icon {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    transition: transform 0.45s cubic-bezier(.3,1.6,.5,1);
}

.value-card:hover .card-icon { transform: rotate(-10deg) scale(1.12); }
.value-card h3 { color: var(--ink) !important; font-size: 20px !important; }
.value-card p { color: var(--muted) !important; }

/* ---------- About: topics ---------------------------------------------- */

.topic-pill {
    --t: var(--brand);
    position: relative;
    overflow: hidden;
    border-radius: 999px !important;
    border-color: var(--line) !important;
    background: var(--surface) !important;
    color: var(--ink) !important;
    padding: 14px 20px !important;
    transition: transform 0.35s cubic-bezier(.3,1.6,.5,1), color 0.25s, border-color 0.25s;
    cursor: default;
}

.topic-pill svg { color: var(--t) !important; transition: color 0.25s, transform 0.4s cubic-bezier(.3,1.6,.5,1); position: relative; z-index: 1; }

.topic-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--t);
    transform: translateY(101%);
    transition: transform 0.4s cubic-bezier(.3,1.1,.4,1);
    z-index: -1;
}

.topic-pill:hover { transform: translateY(-3px); color: #fff !important; border-color: var(--t) !important; }
.topic-pill:hover::before { transform: none; }
.topic-pill:hover svg { color: #fff !important; transform: rotate(-12deg) scale(1.15); }
.topic-pill { isolation: isolate; }
.topic-pill > * { position: relative; z-index: 1; }

.topic-grid .topic-pill:nth-child(1) { --t: #4A5F95; }
.topic-grid .topic-pill:nth-child(2) { --t: #0E7FA8; }
.topic-grid .topic-pill:nth-child(3) { --t: #2348E8; }
.topic-grid .topic-pill:nth-child(4) { --t: #7C4DDB; }
.topic-grid .topic-pill:nth-child(5) { --t: #0E8C99; }
.topic-grid .topic-pill:nth-child(6) { --t: #D23A65; }
.topic-grid .topic-pill:nth-child(7) { --t: #138A60; }
.topic-grid .topic-pill:nth-child(8) { --t: #B5700F; }
.topic-grid .topic-pill:nth-child(9) { --t: #4F5BD5; }

/* ---------- About: how it works ---------------------------------------- */

.steps { position: relative; }

.step { border-top: none !important; padding-top: 0 !important; position: relative; }

.step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--display) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, #16357D, var(--brand));
    box-shadow: 0 0 0 6px var(--paper), 0 0 0 7px var(--line);
    position: relative;
    z-index: 1;
}

.step:nth-child(2) .step-num { background: linear-gradient(135deg, #7A4A14, var(--accent)); }
.step:nth-child(3) .step-num { background: linear-gradient(135deg, #136049, #34D399); }

/* Line that draws itself between the three steps as you scroll */
.steps::before {
    content: '';
    position: absolute;
    top: 26px;
    left: 26px;
    right: calc((100% - 56px) / 3 - 26px);
    height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent), #34D399);
    transform-origin: left;
    z-index: 0;
}

@supports (animation-timeline: view()) {
    .steps::before {
        animation: draw linear both;
        animation-timeline: view();
        animation-range: entry 20% cover 45%;
    }
}

@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.step h3 { color: var(--ink) !important; font-size: 20px !important; }
.step p { color: var(--muted) !important; font-size: 14.5px !important; }

/* ---------- Call to action: living aurora ------------------------------ */

.cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(600px 300px at 100% 0%, rgba(79, 116, 255, 0.85), transparent 60%),
        radial-gradient(500px 260px at 0% 120%, rgba(245, 165, 36, 0.45), transparent 60%),
        linear-gradient(135deg, #08122B, #16357D) !important;
    background-size: 160% 160%, 160% 160%, 100% 100% !important;
}

.cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
    mask-image: linear-gradient(to left, #000, transparent 70%);
    z-index: -1;
}

@keyframes aurora {
    from { background-position: 0% 0%, 100% 100%, 0 0; }
    to   { background-position: 100% 60%, 0% 40%, 0 0; }
}

.cta h2 { font-size: clamp(30px, 4vw, 44px) !important; }

.cta .btn,
.magnetic {
    transform: translate(var(--gx, 0px), var(--gy, 0px));
    transition: transform 0.35s cubic-bezier(.3,1.5,.5,1), background 0.2s, box-shadow 0.3s;
}

.cta .btn-primary { box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5); }

/* ---------- Pricing ---------------------------------------------------- */

.pricing-container { gap: 22px !important; perspective: 1200px; }

.pricing-card {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    transition: box-shadow 0.35s, border-color 0.25s;
}

.pricing-card:hover { --lift: -8px; box-shadow: 0 40px 70px -30px rgba(11, 23, 51, 0.45) !important; }

.pricing-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--brand) 10%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.pricing-card:hover::after { opacity: 1; }

/* Premium: animated gradient border that circles the card */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.pricing-card.featured {
    border: 2px solid transparent !important;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        conic-gradient(from var(--spin), var(--accent), var(--brand), #34D399, var(--accent)) border-box !important;
    animation: spin 6s linear infinite;
}

.pricing-card.featured::before { display: none; }

@keyframes spin { to { --spin: 360deg; } }

.plan-name, .price { color: var(--ink) !important; }
.plan-desc, .price-note, .compare-heading { color: var(--muted) !important; }
.price { font-size: 52px !important; font-variant-numeric: tabular-nums; }
.price span { color: var(--muted) !important; font-family: 'DM Sans', sans-serif; }

.features li { color: var(--ink) !important; }
.features li.disabled { color: var(--muted) !important; opacity: 0.7; }

.features li svg { transition: transform 0.4s cubic-bezier(.3,1.6,.5,1); }
.pricing-card:hover .features li:not(.disabled) svg { transform: scale(1.25); }
.pricing-card:hover .features li:nth-child(2) svg { transition-delay: 0.04s; }
.pricing-card:hover .features li:nth-child(3) svg { transition-delay: 0.08s; }
.pricing-card:hover .features li:nth-child(4) svg { transition-delay: 0.12s; }
.pricing-card:hover .features li:nth-child(5) svg { transition-delay: 0.16s; }
.pricing-card:hover .features li:nth-child(6) svg { transition-delay: 0.2s; }

.pricing-card .btn {
    position: relative;
    overflow: hidden;
    border-radius: 999px !important;
    min-height: 48px;
    transition: transform 0.3s cubic-bezier(.3,1.6,.5,1), background 0.2s, box-shadow 0.3s;
}

.pricing-card .btn-primary { background: var(--ink) !important; color: var(--paper) !important; }
.pricing-card.featured .btn-primary { background: linear-gradient(135deg, #2348E8, #16357D) !important; color: #fff !important; box-shadow: 0 14px 30px -12px rgba(35, 72, 232, 0.7); }
[data-theme="dark"] .pricing-card .btn-primary { background: var(--brand) !important; color: #0A0F1D !important; }
.pricing-card .btn:hover:not(:disabled) { transform: translateY(-2px); }

.pricing-card .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}

.pricing-card .btn:hover::after { transform: translateX(120%); }

/* FAQ opens smoothly */
.faq { border-color: var(--line) !important; }
.faq-item { border-color: var(--line) !important; }
.faq-item summary { color: var(--ink) !important; font-size: 16px !important; padding: 4px 0; transition: color 0.2s; }
.faq-item summary:hover { color: var(--brand) !important; }
.faq-item summary::after {
    content: '+' !important;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--ink) !important;
    transition: transform 0.4s cubic-bezier(.3,1.6,.5,1), background 0.25s, color 0.25s;
}
.faq-item[open] summary::after { transform: rotate(135deg); background: var(--ink); color: var(--paper) !important; }
.faq-item[open] .answer { animation: rise 0.45s cubic-bezier(.2,.8,.2,1); }
.faq-item .answer { color: var(--muted) !important; }

.footer { border-color: var(--line) !important; color: var(--muted) !important; }

/* ---------- Cursor light ------------------------------------------------ */

.site-cursor-light {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(520px circle at var(--cx, -999px) var(--cy, -999px), color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%);
}

/* ---------- Theme switch reveal ---------------------------------------- */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: pageOut 0.32s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: pageIn 0.5s cubic-bezier(.2,.8,.2,1) both; }

@keyframes pageOut { to { opacity: 0; transform: translateY(-14px) scale(0.985); filter: blur(3px); } }
@keyframes pageIn  { from { opacity: 0; transform: translateY(18px) scale(1.01); } }

html.theme-switch::view-transition-old(root) { animation: none; }
html.theme-switch::view-transition-new(root) { animation: themeReveal 0.7s cubic-bezier(.6,0,.2,1); }

@keyframes themeReveal {
    from { clip-path: circle(0 at var(--vtx, 100%) var(--vty, 0%)); }
    to   { clip-path: circle(var(--vtr, 150vmax) at var(--vtx, 100%) var(--vty, 0%)); }
}

/* ---------- Small screens ---------------------------------------------- */

@media (max-width: 840px) {
    .top-nav { top: 8px; margin: 8px 12px 0; padding: 8px 8px 8px 16px; }
    .top-nav .nav-links a { padding: 6px 9px; }
    .value-grid, .steps, .topic-grid { grid-template-columns: 1fr !important; }
    .steps::before { top: 26px; bottom: 26px; left: 25px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--brand), var(--accent), #34D399); transform-origin: top; }
    @keyframes draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .step { padding-left: 72px !important; min-height: 60px; }
    .step-num { position: absolute; left: 0; top: 0; }
    .cta { margin: 40px 16px !important; padding: 32px 24px !important; }
    .pricing-card { transform: none; }
}

@media (max-width: 400px) {
    .top-nav .logo span[style*="opacity"] { display: none; }
}

/* ---------- Reduced motion & print -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
    *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
    .value-card, .pricing-card { transform: none !important; }
    .site-cursor-light { display: none; }
}

@media print {
    .site-hero-canvas, .site-cursor-light { display: none !important; }
}