ro/* ==========================================================================
   VeeDee shared stylesheet  ·  site.css
   --------------------------------------------------------------------------
   Link it from every page:   <link rel="stylesheet" href="/site.css">
   Keep this file in the site root, next to the /fonts folder (the @font-face
   paths below are relative to this file).

   Sections
     1. Fonts
     2. Design tokens (brand + light/dark theme)
     3. Base + accessibility
     4. Background grid + pulses
     5. Nav
     6. Page layout (hero, content)
     7. Footer
     8. Responsive (shell)
     9. Components: FAQ / legal accordion, CTA, buttons
    10. Components: testimonials
    11. Components: How It Works steps + CTA panel
    12. Components: Production Guide
    13. Reduced motion
   ========================================================================== */


/* ── 1. FONTS ─────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Air America';      src: url('fonts/AirAmerica-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Agustina';         src: url('fonts/agustina.otf')           format('opentype'); font-display: swap; }
@font-face { font-family: 'ST Simple Square'; src: url('fonts/ST-SimpleSquare.ttf')   format('truetype'); font-display: swap; }
/* Montserrat comes from Google Fonts: load weights 400;500;700;900 in each page <head>. */


/* ── 2. DESIGN TOKENS ─────────────────────────────────────────────────────── */
:root {
    /* Brand palette (theme-independent) */
    --crimson: #d74352;
    --purple:  #6d1559;
    --gold:    #E3B23C;
    --teal:    #02a3a8;
    --blush:   #EDD2E0;
    --cream:   #EDEBD7;
    --dark:    #1a0826;

    /* Theme tokens: dark is the default */
    --bg:         #1a0826;
    --txt:        rgba(237,235,215,.85);
    --txt-strong: #EDEBD7;
    --muted:      rgba(237,210,224,.75);
    --head:       #EDD2E0;
    --accent:     #E3B23C;
    --line:       rgba(237,210,224,.25);
    --card:       rgba(109,21,89,.18);
    --stat:       #02a3a8;
}

html[data-theme="light"] {
    --bg:         #faf6ef;
    --txt:        rgba(43,22,52,.88);
    --txt-strong: #2b1634;
    --muted:      rgba(43,22,52,.75);
    --head:       #6d1559;
    --accent:     #8a5f00;
    --line:       rgba(109,21,89,.25);
    --card:       rgba(109,21,89,.06);
    --stat:       #017a7e;
}


/* ── 3. BASE + ACCESSIBILITY ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--bg); }

body {
    background: transparent;   /* lets the fixed grid (z-index:-1) show through */
    color: var(--txt-strong);
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;
}

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
main :focus-visible { outline-color: var(--accent); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
    position: absolute; top: -100px; left: 16px; z-index: 1000;
    background: var(--gold); color: var(--dark);
    padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 16px; }


/* ── 4. BACKGROUND GRID + PIPELINE PULSES ─────────────────────────────────── */
.page-pipeline-bg {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
    background-image:
        linear-gradient(rgba(109,21,89,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(109,21,89,0.07) 1px, transparent 1px);
    background-size: 60px 60px;
}

.pipeline-pulse {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(109,21,89,0.35) 50%, rgba(237,210,224,0.25) 100%);
    border-radius: 2px; opacity: 0; pointer-events: none; animation-fill-mode: forwards;
}
.pulse-x { height: 1px; width: 140px; animation: streamX var(--duration) linear infinite; animation-delay: var(--delay); }
.pulse-y {
    width: 1px; height: 120px;
    background: linear-gradient(180deg, transparent, rgba(109,21,89,0.35) 50%, rgba(237,210,224,0.25) 100%);
    animation: streamY var(--duration) linear infinite; animation-delay: var(--delay);
}
@keyframes streamX { 0% { left: -150px; opacity: 0; } 10%, 70% { opacity: 0.6; } 100% { left: 100%; opacity: 0; } }
@keyframes streamY { 0% { top: -50px;  opacity: 0; } 10%, 70% { opacity: 0.6; } 100% { top: 100%;  opacity: 0; } }

/* The pause-motion toggle (site.js) freezes every CSS animation */
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation-play-state: paused !important; }


/* ── 5. NAV (stays dark in both themes) ───────────────────────────────────── */
body > nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    row-gap: 12px; padding: 15px 48px; background: #1a0826f2;
}

.logo-img-wrap { display: flex; align-items: center; height: 44px; text-decoration: none; }
.logo-img-wrap img { height: 100%; width: auto; object-fit: contain; display: block; }
.logo-text-fallback { display: none; font-size: 28px; font-weight: 700; color: var(--crimson); }
.logo-img-wrap:hover .logo-text-fallback { color: var(--purple); }

.nav-right { display: flex; align-items: center; gap: 24px; }

.motion-icon {
    background: none; border: 0; color: rgba(237,210,224,0.6);
    font-size: 0.8rem; width: 32px; height: 32px; cursor: pointer; transition: color 0.2s;
}
.motion-icon:hover, .motion-icon:focus-visible { color: var(--gold); }
.motion-icon svg { display: block; margin: 0 auto; }

.motion-toggle {
    background: none; border: 1px solid rgba(237,210,224,0.5); color: var(--blush);
    font: inherit; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 8px 12px; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.motion-toggle:hover { border-color: var(--gold); color: var(--gold); }

.nav-links { display: flex; gap: 36px; list-style: none; }
.nav-links a {
    color: var(--blush); text-decoration: none; white-space: nowrap;
    font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
    transition: color 0.2s;
}
.nav-links a:hover { color: var(--gold); }
.nav-links .nav-cta {
    background-color: var(--crimson); color: var(--cream) !important;
    padding: 10px 22px; transition: background-color 0.2s, color 0.2s;
}
.nav-links .nav-cta:hover { background-color: var(--gold); color: var(--dark) !important; }


/* ── 6. PAGE LAYOUT ───────────────────────────────────────────────────────── */
.page-hero { padding: 170px 48px 40px; max-width: 960px; margin: 0 auto; }

    .page-hero h1 {
        font-family: 'ST Simple Square', sans-serif;
        font-size: 3em;
        color: var(--cream);
    }
        .page-hero h1 em {
            font-family: 'ST Simple Square', sans-serif;
            font-style: normal;
            font-size: 1em;
            display: inline-block;
            padding-bottom: 0.2em;
            line-height: 1.0;
            color: var(--gold);
            margin-bottom: 24px;
        }
.page-intro { color: var(--muted); font-size: 1rem; line-height: 1.7; max-width: 640px; }
.page-intro-follow { margin-top: 16px; }   /* second intro paragraph */

/* Legal pages: "Last updated" line under the intro */
.updated { color: var(--muted); font-size: 0.85rem; margin-top: 16px; }

.page-content { padding: 40px 48px 120px; max-width: 960px; margin: 0 auto; }

.page-content h2 {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.25rem;
    color: var(--head); margin: 48px 0 16px;
}
.page-content p, .page-content li { color: var(--txt); font-size: 0.95rem; line-height: 1.8; max-width: 70ch; }
.page-content p  { margin-bottom: 16px; }
.page-content ul { padding-left: 1.2em; margin-bottom: 16px; }
.page-content a  { color: var(--accent); text-underline-offset: 3px; }
.page-content a:hover { color: var(--txt-strong); }


/* ── 7. FOOTER (stays dark in both themes) ────────────────────────────────── */
footer {
    background: #0a0112; padding: 60px 48px 36px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--crimson), var(--teal), transparent) 1;
    display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 32px;
}

.footer-logo-wrap { height: 56px; min-width: 120px; display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.footer-logo-wrap img { height: 100%; width: auto; object-fit: contain; }
.footer-logo-fallback { display: none; font-size: 28px; font-weight: bold; color: var(--crimson); }

.footer-links { display: flex; gap: 48px; flex-wrap: wrap; }
.footer-col h2 {
    font-weight: 700; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--blush); margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: rgba(237,210,224,0.7); text-decoration: none; font-size: 0.82rem; transition: color 0.2s; }
.footer-col a:hover, .footer-col a[aria-current="page"] { color: var(--blush); }

.footer-bottom {
    width: 100%; padding-top: 36px;
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--crimson), var(--teal), transparent) 1;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 0.75rem; color: rgba(237,210,224,0.65); letter-spacing: 0.08em; }
.footer-copy a { color: rgba(237,210,224,0.85); text-decoration: none; }
.footer-copy a:hover { color: var(--gold); }


/* ── 8. RESPONSIVE (shell) ────────────────────────────────────────────────── */
@media (max-width: 900px) {
    body > nav { padding: 16px 24px; }
    .nav-links li:not(:last-child) { display: none; }   /* keep only the CTA on small screens */
    .page-hero { padding: 130px 24px 24px; }
    .page-content { padding: 24px 24px 80px; }
    footer { padding: 48px 24px 28px; }
}
@media (max-width: 600px) {
    html { scroll-padding-top: 150px; }
    .nav-right { width: 100%; justify-content: flex-start; gap: 12px; }
    .page-hero { padding-top: 170px; }
}


/* ── 9. COMPONENTS: FAQ / LEGAL ACCORDION, CTA, BUTTONS ───────────────────── */
/* Category jump links (also use for a "Related pages" row) */
.cat-nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cat-nav a {
    color: var(--head); text-decoration: none; font-size: 0.75rem; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 500; padding: 10px 18px; border: 1px solid var(--line);
    transition: color 0.2s, border-color 0.2s;
}
.cat-nav a:hover { color: var(--accent); border-color: var(--accent); }

.page-content .cat-title {
    display: flex; align-items: center; gap: 16px;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.35rem; line-height: 1.2;
    color: var(--txt-strong); margin: 72px 0 8px; scroll-margin-top: 130px;
}
.page-content .cat-title:first-child { margin-top: 24px; }
.page-content .cat-title.lg { font-size: clamp(1.5rem, 3.5vw, 2rem); }
.cat-num { font-size: 2.6rem; font-weight: 900; line-height: 1; color: var(--accent); }
.hl { color: var(--accent); }

/* Accordion: used by the FAQ and by the Terms / Privacy pages (<details class="faq-item">) */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
    padding: 22px 0; font-weight: 700; font-size: 1.02rem; color: var(--head); transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent); font-size: 1.6rem; font-weight: 400; line-height: 1; flex: none; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--accent); }
.faq-item .answer { padding: 0 0 12px; }
.faq-item .answer p { margin-bottom: 14px; }
.faq-item .answer .punch { color: var(--accent); font-weight: 500; }
/* Longer legal copy inside an accordion: add class="legal" to .page-content on Terms / Privacy */
.legal .faq-item .answer h3 { font-size: 1rem; line-height: 1.3; color: var(--head); margin: 22px 0 6px; }
.legal .faq-item .answer ul { margin-bottom: 14px; }
.legal .faq-item .answer li { margin-bottom: 4px; }

/* "Expand all / Collapse all" buttons above a legal accordion */
.legal-tools { display: flex; gap: 20px; margin: 32px 0 16px; }
.legal-tools button {
    background: none; border: 0; padding: 4px 0; cursor: pointer;
    font: inherit; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.08em;
    color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
}
.legal-tools button:hover { color: var(--txt-strong); }

/* Address / contact block inside legal text */
.contact-details { margin: 8px 0 20px; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); }
.contact-details p { margin-bottom: 6px; }

/* Closing CTA box */
.faq-cta { margin-top: 80px; padding: 40px; border: 1px solid var(--line); background: var(--card); }
.faq-cta h2 { margin-top: 0; }
.faq-cta .cta-note { margin-top: 12px; font-size: 0.9em; }

.btn {
    display: inline-block; background: var(--crimson); color: #EDEBD7 !important; padding: 14px 28px; text-decoration: none !important;
    font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; transition: background-color 0.2s, color 0.2s;
}
.btn:hover { background: var(--gold); color: var(--dark) !important; }

.punch, .page-intro .punch { color: var(--accent); font-weight: 500; }

@media (max-width: 600px) {
    .faq-cta { padding: 28px 20px; }
    .page-content .cat-title { scroll-margin-top: 190px; }
}


/* ── 10. COMPONENTS: TESTIMONIALS ─────────────────────────────────────────── */
.t-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 24px; }
.t-card { border: 1px solid var(--line); background: var(--card); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.t-card blockquote { font-size: 1rem; line-height: 1.7; color: var(--txt-strong); }
.t-card blockquote::before { content: '\201C'; display: block; font-size: 3rem; line-height: 0.6; color: var(--accent); margin-bottom: 8px; }
.t-card .who { margin-top: auto; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.t-card .who strong { display: block; color: var(--head); font-size: 0.9rem; }
.t-logo { height: 36px; display: flex; align-items: center; }
.t-logo:empty { display: none; }
.t-logo img { max-height: 36px; max-width: 160px; width: auto; object-fit: contain; }
.t-stat { font-family: 'Air America', sans-serif; font-size: 2rem; color: var(--stat); line-height: 1; }
.t-stat small { display: block; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }


/* ── 11. COMPONENTS: HOW IT WORKS STEPS + CTA PANEL ───────────────────────── */
.hiw-tagline { font-family: 'ST Simple Square', 'Montserrat', sans-serif; font-style: italic; color: var(--accent); font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: 1.3; margin-bottom: 24px; }
.hiw-steps { list-style: none; margin-top: 24px; }
.hiw-step { display: grid; grid-template-columns: 96px 1fr; column-gap: 24px; position: relative; padding-bottom: 56px; }
.hiw-step:last-child { padding-bottom: 0; }
.hiw-step::before {
    content: ''; position: absolute; left: 31px; top: 76px; bottom: 12px; width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--line)); opacity: 0.7;
}
.hiw-step:last-child::before { display: none; }
.hiw-num {
    width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--accent); background: var(--bg); color: var(--accent);
    font-size: 1.5rem; font-weight: 900; line-height: 1; position: relative; z-index: 1;
}
.hiw-body { padding-top: 4px; }
.page-content .hiw-body h2 { margin: 0 0 16px; font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.2; color: var(--txt-strong); }
.hiw-body .punch { display: block; }

.hiw-panel { margin-top: 96px; padding: 40px; border: 1px solid var(--line); background: var(--card); }
.hiw-panel h2 { margin-top: 0 !important; font-size: clamp(1.4rem, 3.2vw, 1.9rem) !important; line-height: 1.2; color: var(--txt-strong) !important; }

.hiw-cta {
    margin-top: 56px; padding: 56px 40px; text-align: center; border: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(109,21,89,.35), rgba(2,163,168,.12));
}
html[data-theme="light"] .hiw-cta { background: linear-gradient(135deg, rgba(109,21,89,.10), rgba(2,163,168,.08)); }
.hiw-cta h2 {
    margin: 0 0 16px !important; font-family: 'Air America', 'Montserrat', sans-serif !important; font-weight: 400 !important;
    font-size: clamp(1.8rem, 4.5vw, 3rem) !important; line-height: 1.05; color: var(--txt-strong) !important;
}
.hiw-cta p { margin-left: auto; margin-right: auto; }
.hiw-cta .btn { margin-top: 16px; }
.hiw-cta.hiw-cta-spaced { margin-top: 96px; }   /* replaces the inline style="margin-top:96px" */

@media (max-width: 600px) {
    .hiw-step { grid-template-columns: 48px 1fr; column-gap: 16px; padding-bottom: 44px; }
    .hiw-num { width: 48px; height: 48px; font-size: 1.15rem; }
    .hiw-step::before { left: 23px; top: 60px; }
    .hiw-panel { padding: 28px 20px; margin-top: 64px; }
    .hiw-cta { padding: 40px 20px; }
}


/* ── 12. COMPONENTS: PRODUCTION GUIDE ─────────────────────────────────────── */
.page-content h3 { font-weight: 700; font-size: 1.15rem; line-height: 1.3; color: var(--head); margin: 40px 0 14px; }
.page-content .sub {
    font-family: 'ST Simple Square', 'Montserrat', sans-serif; font-style: italic; font-weight: 400; color: var(--accent);
    font-size: clamp(1.1rem, 2.4vw, 1.4rem); margin: 8px 0 20px;
}
.pg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin: 24px 0; }
.pg-card { border: 1px solid var(--line); background: var(--card); padding: 24px 24px 20px; }
.pg-card h4 { font-size: 0.98rem; line-height: 1.3; color: var(--head); margin-bottom: 10px; }
.pg-card p { font-size: 0.9rem; line-height: 1.7; margin-bottom: 10px; }
.pg-card p:last-child { margin-bottom: 0; }
.pg-card .how { color: var(--txt-strong); }
.pg-card .how em { color: var(--accent); font-style: normal; font-weight: 700; }
.pg-card ul { margin-top: 10px; }
.pg-tag {
    display: inline-block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
    color: var(--accent); border: 1px solid var(--accent); padding: 4px 10px; margin-bottom: 14px;
}
.pg-dd { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 16px 0 24px; }
.pg-dd > div { border: 1px solid var(--line); background: var(--card); padding: 24px; border-top-width: 3px; }
.pg-dd .do   { border-top-color: var(--stat); }
.pg-dd .dont { border-top-color: var(--crimson); }
.pg-dd h4 { font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 12px; color: var(--txt-strong); }
.pg-dd ul { list-style: none; padding: 0; margin: 0; }
.pg-dd li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 0.9rem; }
.pg-dd .do li::before   { content: '\2713'; position: absolute; left: 0; color: var(--stat);    font-weight: 900; }
.pg-dd .dont li::before { content: '\2715'; position: absolute; left: 0; color: var(--crimson); font-weight: 900; }
.pg-callout { margin: 24px 0; padding: 20px 24px; border-left: 4px solid var(--accent); background: var(--card); }
.pg-callout p { margin: 0; }
.pg-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 24px 0 8px; }
.pg-stats .t-stat { border: 1px solid var(--line); background: var(--card); padding: 20px; }
.pg-journey .hiw-body h3 { margin: 0 0 8px; font-size: 1.1rem; color: var(--txt-strong); }
.pg-journey .hiw-step { padding-bottom: 36px; }
.pg-journey .hiw-num { font-size: 1.25rem; }
.page-content .pg-closing { margin-top: 56px; }

@media (max-width: 600px) { .pg-journey .hiw-step { padding-bottom: 32px; } }


/* ── 13. REDUCED MOTION ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .pipeline-pulse { display: none; }
}