/* Shared design system for the Uni public marketing site (/, /about, /faq, /policies).
   Tokens and animation keyframes measured directly from the approved Builder.io visual
   reference (https://5581f7cd76094bfe9a478c106f673391-main.builderio.dev/) — colors are
   the exact HSL custom properties the reference computes, not approximations. The one
   remaining deliberate deviation is --focus-ring: the reference's default shadcn
   --ring is not reused for :focus-visible; the existing WCAG-AA-verified #1D4ED8 blue
   ring from the R6 accessibility work is kept instead.
   Accent is the Builder reference orange (#FF8000 / hsl(30 100% 50%)), restored as the
   visual source of truth for this marketing experience. */

:root {
    --background: 0 0% 100%;
    --foreground: 225 25% 20%;
    --primary: 225 45% 25%;
    --primary-foreground: 0 0% 100%;
    --secondary: 200 50% 95%;
    --accent: 30 100% 50%;   /* Builder.io orange #FF8000 */
    --accent-foreground: 0 0% 100%;
    --muted: 0 0% 88%;
    --muted-foreground: 0 0% 40%;
    --border: 0 0% 92%;
    --radius: 0.5rem;

    --focus-ring-color: #1D4ED8;

    /* Exact Builder.io accent used for hero "INFINITE", CTA/scroll arrows, eyebrow
       hover, and policy-tab active states. Contrast on white is ~2.5:1 (below WCAG AA);
       kept knowingly so the marketing site matches the approved visual reference. */
    --accent-text: #FF8000;
}

* { border-color: hsl(var(--border)); }

body {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    body { scroll-behavior: auto; }
}

.text-muted { color: hsl(var(--muted-foreground)); }
.text-accent { color: var(--accent-text); }
.bg-secondary-tint { background: hsl(var(--secondary)); }

/* === Focus (R6 — preserved, not restyled to the reference's violet ring) === */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
}
.on-dark :focus-visible {
    outline-color: #FFFFFF;
    box-shadow: 0 0 0 2px hsl(var(--primary)), 0 0 0 4px #FFFFFF;
}

/* === Scroll progress bar === */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;
    width: 0%;
    background: hsl(var(--accent));
    z-index: 50;
    transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    #scroll-progress { transition: none; }
}

/* === Header ===
   NOTE: the reference has NO persistent header/nav bar on /, /about, /faq — the
   logo is simply the first centered element inside the page's own flow (see
   .site-logo below). .site-header is used only by policies.html, which is the
   one page that genuinely has a top bar (Back to Home + tabs) in the reference. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid hsl(var(--border));
}

/* Logo — matching the outer <img> box to the reference's box (prior pass) was not
   sufficient: the reference's own asset has ~2x more transparent padding baked in
   (visible "uni" ink occupies only 65%x40% of its own canvas — measured via
   per-pixel alpha bounding box, natural 800x548, ink bbox x:[142,663] y:[165,383])
   than our repo's file (ink occupies 90%x74% of its canvas — natural 1545x765, ink
   bbox x:[61,1459] y:[117,684]). Matching the outer box therefore rendered our
   VISIBLE glyph ~38% wider and ~86% taller than the reference's visible glyph, even
   though the <img> elements' getBoundingClientRect() matched almost exactly.
   Fix: a fixed-size, non-visible ".logo-frame" reproduces the reference's outer
   footprint (58.39x40 desktop, 46.72x32 mobile — same as before), and the <img>
   inside it is uniformly scaled (aspect ratio preserved, no stretch) and
   absolutely positioned so its OWN measured ink bbox renders at the reference's
   exact ink size (38.10x15.99 desktop, 30.48x12.79 mobile) at the reference's exact
   ink top-offset (12.04px desktop, 9.64px mobile) and horizontally centered. All
   values computed from the two files' real alpha-channel bounding boxes, not
   estimated — see remediation/LOG.md for the full calculation. */
.logo-frame {
    position: relative;
    display: block;
    width: 46.72px;
    height: 32px;
    overflow: hidden;
}
.logo-frame .site-logo {
    position: absolute;
    width: 34.22px;
    height: 16.95px;
    left: 6.52px;
    top: 7.04px;
}
@media (min-width: 640px) {
    .logo-frame { width: 58.39px; height: 40px; }
    .logo-frame .site-logo { width: 42.78px; height: 21.18px; left: 8.15px; top: 8.80px; }
}

/* === Buttons ===
   Exact measured reference classes: "px-8 sm:px-10 py-4 sm:py-5 bg-primary
   text-primary-foreground font-semibold text-base sm:text-lg tracking-wide
   rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-primary/20
   active:scale-95". Computed: padding 20px 40px, font 18px/600, radius 8px. */
.btn-primary {
    display: inline-block;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.025em;
    padding: 16px 32px;
    border-radius: var(--radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
    transition: box-shadow 0.3s ease, transform 0.1s ease;
}
@media (min-width: 640px) {
    .btn-primary { padding: 20px 40px; font-size: 18px; }
}
.btn-primary:hover { box-shadow: 0 10px 15px -3px hsl(var(--primary) / 0.2), 0 4px 6px -4px hsl(var(--primary) / 0.2); }
.btn-primary:active { transform: scale(0.95); }
.text-accent-icon { color: hsl(var(--accent)); display: inline-block; }

/* The instructor's way in, beneath the studio CTA.
   DELIBERATELY NOT A SECOND BUTTON. Gabe's hero has one navy button and one
   orange accent; a second button of equal weight would turn a single obvious
   action into a choice the visitor has to resolve before doing anything. So
   this is body-weight text at the subcopy's own muted colour, and it borrows
   the page's existing hover convention (footer links, scroll cue) rather than
   inventing one: orange on hover only, which is a state, not a second accent
   at rest.
   min-height 44px keeps the tap target legal on the 390px layout, where it is
   the only other thing to press. */
.hero-secondary {
    margin-top: 20px;
    font-family: 'Figtree', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.4;
}
.hero-secondary a {
    color: hsl(var(--muted-foreground));
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    transition: color 0.3s ease;
}
.hero-secondary a:hover { color: var(--accent-text); }
.animate-arrow-bounce { animation: arrow-bounce 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .animate-arrow-bounce { animation: none; }
}

/* === Eyebrow tag ===
   Exact measured reference classes: "border border-muted px-4 py-2 rounded-lg
   text-xs font-medium text-muted-foreground tracking-wide group-hover:border-accent
   group-hover:text-accent transition-colors". */
.eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: hsl(var(--muted-foreground));
    border: 1px solid hsl(var(--muted));
    border-radius: var(--radius);
    padding: 8px 16px;
    margin-bottom: 16px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.group:hover .eyebrow { border-color: hsl(var(--accent)); color: var(--accent-text); }

/* === Animations (measured from the reference's compiled CSS) === */
@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes slide-up { 0% { transform: translateY(20px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes arrow-bounce { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

.animate-fade-in { animation: fade-in 0.5s ease-out both; }
.reveal-on-scroll { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
.reveal-on-scroll.revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in { animation: none; opacity: 1; }
    .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* === Hero ===
   H1 measured live: font-weight 900, letter-spacing -3.6px at 72px (-0.05em),
   line-height equal to font-size (1.0) — matches Tailwind's font-black
   leading-tight tracking-tighter as actually computed, not the nominal 1.25
   "leading-tight" value. Font-size itself comes from Tailwind's own
   text-5xl/sm:text-6xl/lg:text-7xl classes on the element (not hardcoded here)
   so it tracks the reference's exact responsive steps. */
.hero-headline {
    font-family: 'Figtree', sans-serif;
    font-weight: 900;
    letter-spacing: -0.05em;
    line-height: 1;
    color: hsl(var(--foreground));
}
/* Subcopy measured live: "text-lg sm:text-xl text-muted-foreground
   leading-relaxed font-light" -> 20px/28px at sm+, weight 300, no max-width
   constraint of its own (relies on the max-w-3xl parent). */
.hero-subcopy {
    font-family: 'Figtree', sans-serif;
    font-weight: 300;
    line-height: 1.4;
    color: hsl(var(--muted-foreground));
}

/* === Hero photographic canvas (preview: full-bleed studio photo) ===
   Background only: cover + intelligent crop. Flat scrim for legibility of
   existing white/orange/navy hero UI — no redesign of structure or copy. */
.hero-photo {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100dvh;
    color: #ffffff;
}
.hero-photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-color: #1a1a1a;
    /* TWO DECLARATIONS, AND THE ORDER IS THE POINT. The plain `url()` is the
       fallback: a browser that cannot parse `image-set()` drops the second
       declaration and keeps this one, so the hero photo never simply fails to
       appear. A browser that can read it takes the WebP, which is 93 KB
       against the JPEG's 147 KB — and this is the LCP element of the page, on
       a phone, over whatever connection the member happens to be on.
       `type()` lets the browser choose without a media query, so there is one
       source of truth for the crop below and no chance of the two drifting. */
    background-image: url("../img/hero-pilates-studio.jpg");
    background-image: image-set(
        url("../img/hero-pilates-studio.webp") type("image/webp"),
        url("../img/hero-pilates-studio.jpg") type("image/jpeg")
    );
    background-size: cover;
    background-repeat: no-repeat;
    /* Prefer reformer + Uni bottle + mid-ground athlete over empty skyline crop */
    background-position: 38% 42%;
}
.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Minimum flat darken — no gradient / vignette */
    background: rgba(12, 16, 28, 0.36);
    pointer-events: none;
}
.hero-photo .hero-headline { color: #ffffff; }
.hero-photo .text-accent { color: var(--accent-text); }
.hero-photo .hero-subcopy { color: rgba(255, 255, 255, 0.88); }
.hero-photo .hero-secondary a { color: rgba(255, 255, 255, 0.78); }
.hero-photo .hero-secondary a:hover { color: var(--accent-text); }
.hero-photo .scroll-cue-btn { color: rgba(255, 255, 255, 0.78); }
.hero-photo .scroll-cue-btn:hover { color: var(--accent-text); }
/* Keep navy CTA + orange arrow; only ensure logo reads on the photo */
.hero-photo .site-logo {
    filter: brightness(0) invert(1);
}
@media (max-width: 1024px) {
    .hero-photo::before { background-position: 42% 40%; }
}
@media (max-width: 768px) {
    .hero-photo::before { background-position: 45% 38%; }
}
@media (max-width: 390px) {
    .hero-photo::before { background-position: 48% 36%; }
}

.scroll-cue-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    color: hsl(var(--muted-foreground));
    margin: 0 auto;
    transition: color 0.15s ease;
}
.scroll-cue-btn:hover { color: var(--accent-text); }
/* Builder: "text-xs sm:text-sm font-medium ... tracking-widest uppercase" */
.scroll-cue-label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.25;
}
@media (min-width: 640px) {
    .scroll-cue-label { font-size: 14px; line-height: 20px; }
}
/* Builder chevron uses text-accent (orange) at rest, not muted */
.scroll-cue-arrow {
    color: var(--accent-text);
    animation: bounce 1.5s infinite;
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue-arrow { animation: none; }
}
@keyframes bounce {
    0%, 100% { transform: translateY(-15%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
}

/* === Features ===
   The reference has NO card container at all — no border, no shadow, no
   background, no padding box. Each item is just a centered flex column
   ("space-y-4 group flex flex-col items-center text-center"). Measured:
   h3 24px/700, p 16px/400/muted, line-height 26px. */
.features-section { border-color: hsl(var(--border)); }
.feature-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.feature-block > * + * { margin-top: 16px; }
.feature-title {
    font-family: 'Figtree', sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px; /* measured from Builder reference */
    color: hsl(var(--foreground));
}
.feature-desc {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: hsl(var(--muted-foreground));
}

/* === Page hero / content sections (About, FAQ) — left-aligned per reference ===
   Container measured live on /about: "max-w-4xl mx-auto py-20 space-y-12" = 896px. */
.page-shell { max-width: 896px; margin: 0 auto; padding: 0 24px; }
.page-heading {
    font-family: 'Figtree', sans-serif;
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: hsl(var(--foreground));
}
.callout-box {
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
}
.principle-card {
    background: #FAFAF9;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 20px 22px;
}

/* === FAQ === */
.faq-item {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    margin-bottom: 16px;
    overflow: hidden;
}
.faq-question {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 22px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    color: hsl(var(--foreground));
    min-height: 44px;
}
.faq-chevron { transition: transform 0.2s ease; flex-shrink: 0; color: hsl(var(--muted-foreground)); }
.faq-question[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }
.faq-answer { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; }
.faq-answer.open { max-height: 480px; }
.faq-answer-inner { padding: 0 24px 22px; color: hsl(var(--muted-foreground)); line-height: 1.6; }

/* === Final CTA === */
.final-cta-box {
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
}

/* === Footer ===
   Builder: "py-12 px-6 sm:px-8 border-t" + "text-xs font-medium ... tracking-wide"
   with link hover:text-accent. */
.site-footer {
    padding: 48px 24px;
    border-top: 1px solid hsl(var(--border));
}
@media (min-width: 640px) {
    .site-footer { padding: 48px 32px; }
}
.site-footer-inner {
    max-width: 72rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: hsl(var(--muted-foreground));
}
@media (min-width: 640px) {
    .site-footer-inner { flex-direction: row; }
}
.site-footer-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}
footer a {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.025em;
    transition: color 0.15s ease;
}
footer a:hover { color: var(--accent-text); }

/* === Policies tab bar === */
.policy-tab {
    padding: 12px 4px;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    border-bottom: 2px solid transparent;
    text-decoration: none;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    min-height: 44px;
}
.policy-tab.active { color: var(--accent-text); border-bottom-color: hsl(var(--accent)); }

@media (max-width: 768px) {
    /* .hero-headline's font-size now comes entirely from the reference's own
       Tailwind classes (text-5xl sm:text-6xl lg:text-7xl) applied in the HTML,
       not from a hardcoded override here. */
    .page-heading { font-size: 2rem !important; }
}