/* ==========================================================================
   Teascan.com
   Tokens are lifted from the AIPlayDesigner app stylesheet so the company site
   and the product read as one family. Keep them in sync by hand — there is no
   build step here, and two pages don't justify one.
   ========================================================================== */

:root {
    /* Field greens */
    --c-field-900: #07371f;      /* Midnight field — dark surfaces, footer */
    --c-field-700: #0b6b3a;      /* Primary brand green — buttons, mark */
    --c-field-500: #2d8a4e;      /* Mid green — hover */
    --c-field-300: #3fb56b;      /* Highlight green */
    --c-field-50:  #ecf6f0;      /* Faint tint */

    /* End zone */
    --c-endzone:      #f5c116;
    --c-endzone-deep: #d99f08;

    /* Neutrals */
    --c-chalk:   #fafaf7;
    --c-paper:   #ffffff;
    --c-ink-900: #0f1d17;
    --c-ink-600: #4b5853;
    --c-ink-400: #7b8782;
    --c-line:    #e3e9e5;

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-display: "Bebas Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --t-hero:    clamp(2.25rem, 4.4vw + 1rem, 4.25rem);
    --t-section: clamp(1.5rem, 2.2vw + 1rem, 2.25rem);
    --t-lede:    clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
    --t-eyebrow: 0.8rem;

    --r-pill: 999px;

    --wrap: 68rem;   /* Shared max content width, header through footer */
    --gutter: clamp(1.25rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--c-ink-900);
    background: var(--c-chalk);
    -webkit-font-smoothing: antialiased;
}

h1, h2, p { margin: 0; }

img, video { display: block; max-width: 100%; }

a { color: var(--c-field-700); }
a:hover { color: var(--c-field-500); }

/* One consistent focus ring everywhere. End-zone yellow reads against both the
   dark hero and the light bands, so it never needs a per-context override. */
:focus-visible {
    outline: 3px solid var(--c-endzone);
    outline-offset: 3px;
    border-radius: 3px;
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Visually hidden but reachable by keyboard and screen readers. */
.skip-link {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -120%);
    z-index: 20;
    padding: 0.7rem 1.25rem;
    background: var(--c-paper);
    color: var(--c-ink-900);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 8px 8px;
    transition: transform 140ms ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Header — transparent so the hero video runs edge to edge behind it
   -------------------------------------------------------------------------- */

.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 10;
    padding-block: clamp(1.1rem, 2.5vw, 1.75rem);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--c-paper);
}

.brand__mark { flex: none; }

.brand__word {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0.11em;
    line-height: 1;
    padding-top: 0.12em;   /* Bebas sits high in its box; nudge onto the mark's centre */
}

.site-nav a {
    color: var(--c-paper);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    padding: 0.4rem 0.15rem;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover {
    color: var(--c-paper);
    border-bottom-color: var(--c-endzone);
}

/* Dark-on-light variant, for pages whose header sits over a light hero. */
.site-header--light .brand,
.site-header--light .site-nav a { color: var(--c-ink-900); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    /* svh, not vh: mobile browser chrome would otherwise crop the headline. */
    min-height: 100svh;
    padding-block: clamp(7rem, 16vh, 11rem) clamp(3rem, 8vh, 5.5rem);
    overflow: hidden;
    /* Field green underneath, so there is never a white flash before the
       poster decodes — and a fallback if media fails entirely. */
    background: var(--c-field-900);
}

.hero--short {
    min-height: min(70svh, 34rem);
    align-items: center;
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A portrait viewport crops a 16:9 hero to a narrow vertical slice — on a
       phone only about a quarter of the width survives. The ball sits at roughly
       51% across, so centring keeps it in frame on phones. On viewports wider
       than 16:9, cover crops vertically only, so this only matters on narrow
       screens. Re-check this if the hero photo changes. */
    object-position: center;
}

/* Scrim: heavy through the band where the copy sits, lighter at the very top so
   the photo still reads. The stop values are not eyeballed — they were solved by
   compositing this gradient over the poster in a canvas and sampling the actual
   glyph rects. Over the bright turf the previous, lighter scrim gave the eyebrow
   only 2.49:1, well under the 4.5:1 that 12.8px text needs. These values measure
   7.09:1 for the headline and 4.69:1 for the eyebrow.

   The 70% stop is the one that matters: the eyebrow sits high in the frame, so
   lightening that stop is what breaks it. Re-measure if the hero photo changes —
   a brighter photo needs more scrim, and nothing here warns you if it regresses. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to top,
            rgba(7, 55, 31, 0.92) 0%,
            rgba(7, 55, 31, 0.78) 38%,
            rgba(7, 55, 31, 0.78) 70%,
            rgba(7, 55, 31, 0.58) 100%);
}

.hero__inner { max-width: 46rem; }

.eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: var(--t-eyebrow);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-endzone);
    margin-bottom: clamp(0.85rem, 2vw, 1.25rem);
}

.hero__title {
    font-size: var(--t-hero);
    line-height: 1.06;
    letter-spacing: -0.022em;
    font-weight: 800;
    color: var(--c-paper);
    text-wrap: balance;
}

.hero__actions {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: background-color 140ms ease, transform 140ms ease;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
    background: var(--c-endzone);
    color: var(--c-ink-900);
}
.btn--primary:hover {
    background: var(--c-endzone-deep);
    color: var(--c-ink-900);
}

.btn__arrow { transition: transform 140ms ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Content bands
   -------------------------------------------------------------------------- */

.band { padding-block: clamp(3.5rem, 9vw, 6.5rem); }

.band--paper { background: var(--c-paper); border-bottom: 1px solid var(--c-line); }

.band__inner { max-width: 44rem; }

.band__title {
    font-size: var(--t-section);
    line-height: 1.15;
    letter-spacing: -0.018em;
    font-weight: 700;
    margin-bottom: 1.1rem;
    text-wrap: balance;
}

.band__text {
    font-size: var(--t-lede);
    color: var(--c-ink-600);
}

.band__text + .band__text { margin-top: 1.1rem; }

.band__text strong { color: var(--c-ink-900); }

/* Product name link — underlined in brand green so it reads as the one thing
   worth clicking in the paragraph. */
.link-strong {
    font-weight: 600;
    color: var(--c-field-700);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.band__actions { margin-top: 1.9rem; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--c-field-900);
    color: rgba(255, 255, 255, 0.72);
    padding-block: clamp(2.75rem, 6vw, 4rem);
    border-top: 3px solid var(--c-endzone);
    font-size: 0.95rem;
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 3rem;
    justify-content: space-between;
    align-items: flex-start;
}

.site-footer h2 {
    font-family: var(--font-display);
    font-size: var(--t-eyebrow);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-endzone);
    font-weight: 400;
    margin-bottom: 0.85rem;
}

.site-footer a { color: var(--c-paper); text-decoration-color: rgba(255, 255, 255, 0.4); }
.site-footer a:hover { color: var(--c-endzone); text-decoration-color: currentColor; }

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.site-footer__legal {
    flex-basis: 100%;
    margin-top: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Reduced motion — swap the video for its poster.
   `autoplay` does not honour this query on its own, so index.html also pauses
   playback in script. Both are needed.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .hero__media--video { display: none; }
    .hero {
        background-image: url("../img/hero-poster.jpg");
        background-size: cover;
        background-position: center;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .btn:hover { transform: none; }
}