/* Extracted from get-greenfly.html */

:root {
    --bg: #050607;
    --bg-2: #0b0d0f;
    --bg-3: #101214;
    --accent: #B6F500;
    --accent-dim: #8bc000;
    --text: #f4f5f6;
    --dim: rgba(255,255,255,.64);
    --dim-2: rgba(255,255,255,.46);
    --hair: rgba(255,255,255,.10);
    --hair-strong: rgba(255,255,255,.20);
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --max: 1440px;
    --nav-h: 60px;
    --marquee-h: 64px;
  }

  /* Light theme — applied via .section-light on the form card so the
     form panel reads as cream / olive while the rest of the page stays
     dark. Mirrors the canonical declaration from tokens.md (background +
     color must be set or the section stays transparent). */
  /* Btn-primary text intentionally NOT overridden — base.css now sets it
     to #0F0F0F on .section-light for WCAG 1.4.3 (6.5:1 vs 3.2:1). */

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* The form panel fills the first viewport so the visitor can convert
     without scrolling; the marquee + footer live below the fold for
     anyone who wants to scroll. */
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

  .mono {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  .display {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.014em;
    line-height: .96;
  }

  /* =====================================================================
     NAV — fixed at top, same as every other page (minus scroll-hiding
     behavior, since the page itself doesn't scroll).
     ===================================================================== */

  /* =====================================================================
     PAGE — fixed split filling the viewport between nav and legal strip.
     LEFT (.pitch) is cream; the recognition + authority beats live here
     as static stacked elements. RIGHT (.door) is dark and holds the form.
     The dark/light split is the page's alternation — vertical instead of
     scroll-cadenced.
     ===================================================================== */
  .page {
    position: relative;
    min-height: calc(100vh - var(--nav-h));
    margin-top: var(--nav-h);
    /* Title + form as a LEFT-ANCHORED, top-aligned pair sitting side by side.
       The cluster starts at the page gutter (pitch under the nav logo) and the
       form sits flush beside it. Columns are width-capped, so past ~1440 the
       extra width falls to the right instead of stretching or centering. */
    padding-left: max(5vw, calc((100vw - var(--max)) / 2 + 72px));
    padding-right: min(5vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 560px);
    justify-content: start;
    align-items: start;
    column-gap: clamp(40px, 5vw, 80px);
  }

  /* --- LEFT: pitch panel ----------------------------------------------
     Same dark canvas as the form side; the hairline border between the
     two panels and the corner bloom are the only visual separation.
     The marquee lives at the bottom of this column, bleeding edge-to-
     edge past the pitch's horizontal padding. */
  .pitch {
    position: relative;
    /* Horizontal gutter + seam handled by .page (padding-left + column-gap). */
    padding: 5vh 0 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .pitch-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  /* Tagline — sits at category-eyebrow scale near the (nav) logo.
     Quiet, unmodified, no animation, no dot. Just the brand anchor. */
  .pitch-tagline {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim-2);
    margin-bottom: 28px;
  }

  /* Stacked "get it" hero — mirrors the homepage closing pattern.
     Right-aligned within the pitch column; both lines share one size so
     they read as a balanced stack. Color (not scale) gives the payoff
     line "GET GREENFLY" its dominance. */
  .get-headline {
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: -0.018em;
    line-height: 1;
    /* Sized so "The studios that get it." stays on one line at every
       breakpoint AND Get Greenfly stays substantial. */
    font-size: clamp(28px, 3.4vw, 52px);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: .06em;
    margin-bottom: 5vh;
    color: var(--text);
  }
  .get-headline-pre {
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
  }
  .get-headline-final {
    color: var(--accent);
  }

  /* Typewriter — single rotating word inside the setup line.
     Mirrors the homepage closing-stack treatment. */
  .typewriter {
    display: inline-block;
    white-space: nowrap;
  }
  .typewriter-word {
    color: var(--accent);
    font-variant-ligatures: none;
  }
  .typewriter-caret {
    display: inline-block;
    width: .06em;
    height: .82em;
    margin-left: .06em;
    vertical-align: -0.06em;
    background: var(--accent);
    animation: typewriter-blink 1.05s steps(2, end) infinite;
  }
  @keyframes typewriter-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .typewriter-caret { animation: none; opacity: .6; }
  }

  /* Four pillars — Speed / Scale / Reach / Impact.
     Subtle cards in a 2×2 grid; each shows a title + anchor line.
     No kicker, no lead-in: the pillars present themselves. */
  .pitch-pillars {
    list-style: none;
    margin-bottom: 5vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .pillar {
    background: var(--bg-2);
    border: 1px solid var(--hair);
    border-radius: 5px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .25s var(--ease), background .25s var(--ease);
  }
  .pillar:hover {
    border-color: var(--hair-strong);
    background: var(--bg-3);
  }
  .pillar-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .pillar-line {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
  }
  @media (max-width: 720px) {
    .pitch-pillars { grid-template-columns: 1fr; }
  }

  /* --- RIGHT: door panel + light card -------------------------------
     The door is the outer dark column with a subtle lime bloom. The card
     inside is the cream / olive form panel (.section-light), elevated by
     theme contrast alone — no border, no hairlines. The cream against
     dark is the only visual seam. */
  .door {
    position: relative;
    background: var(--bg);
    /* Right padding tracks the page-frame gutter so the form's right edge
       lines up with the nav CTA (1548 @ 1800); flex-end anchors the centered-
       width card to that gutter, mirroring the pitch on the left. The mobile
       (<=1000px) override re-centers it for the stacked layout. */
    /* Top-aligned with the title (no vertical centering); flush beside the
       pitch. Horizontal gutter/seam handled by .page. */
    padding: 5vh 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
  }
  /* Ambient hairline grid — same canonical pattern as company.html hero,
     masked at the edges so it fades into the dark door without a hard cut. */
  .door::after {
    content: "";
    position: absolute; inset: 0;
    background:
      repeating-linear-gradient(90deg,
        rgba(255,255,255,.045) 0 1px,
        transparent 1px 72px),
      repeating-linear-gradient(0deg,
        rgba(255,255,255,.035) 0 1px,
        transparent 1px 72px);
    -webkit-mask-image: radial-gradient(closest-side at 50% 50%, black 40%, transparent 92%);
            mask-image: radial-gradient(closest-side at 50% 50%, black 40%, transparent 92%);
    pointer-events: none;
    z-index: 0;
  }
  .door-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 540px;
    border-radius: 14px;
    padding: clamp(14px, 2.5vh, 40px) clamp(28px, 3vw, 44px);
    display: flex;
    flex-direction: column;
  }
  /* Form — airy two-column grid where applicable; each field is a
     label above a boxed input. Square corners, hairline border on all
     four sides, subtle fill — keeps the brutalist Greenfly aesthetic
     while giving each field clearer presence than a single underline. */
  .form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: clamp(10px, 1.8vh, 18px);
  }
  .form .field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .form .field.is-wide { grid-column: 1 / -1; }
  .form label {
    font-family: var(--body);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .01em;
    color: var(--dim);
  }
  .form label .req { color: var(--accent); }
  .form input,
  .form textarea {
    font-family: var(--body);
    font-size: 15px;
    color: var(--text);
    background: rgba(15,15,15,.04);
    border: 1px solid transparent;
    border-radius: 10px;
    outline: 0;
    padding: 8px 12px;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .2s var(--ease), background .2s var(--ease);
  }
  .form input:hover,
  .form textarea:hover {
    background: rgba(15,15,15,.07);
  }
  .form input:focus,
  .form textarea:focus {
    border-color: var(--accent);
    background: rgba(121,152,45,.06);
  }
  .form input::placeholder,
  .form textarea::placeholder { color: var(--dim-2); }
  .form textarea {
    resize: none;
    min-height: clamp(46px, 6vh, 70px);
    line-height: 1.4;
  }

  /* Character counter — small line under the textarea, no box. */
  .form-counter {
    margin-top: 6px;
    font-family: var(--condensed);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .01em;
    color: var(--dim-2);
    text-align: right;
  }
  .form-counter.is-near { color: var(--accent); }

  /* Honeypot — rendered off-screen so bots fill it and humans never see it.
     NOT display:none (some bots skip hidden inputs). */
  .hp-field {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
  }

  /* Delivery-failure fallback (js/get-greenfly.js unhides on API error). */
  .form-error {
    margin-top: 12px;
    font-family: var(--body);
    font-size: 13px;
    line-height: 1.5;
    color: #b3261e;
  }
  .form-error a {
    color: inherit;
    font-weight: 600;
    border-bottom: 1px solid currentColor;
  }
  /* Submit row — full-width primary button. */
  .form-foot {
    margin-top: clamp(10px, 1.6vh, 18px);
  }
  .form-foot .btn-primary {
    width: 100%;
    justify-content: center;
    padding: clamp(12px, 1.6vh, 16px) 22px;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .form-consent {
    margin-top: clamp(8px, 1.2vh, 14px);
    font-family: var(--body);
    font-size: 12px;
    letter-spacing: .01em;
    line-height: 1.5;
    color: var(--dim-2);
  }
  .form-consent a {
    color: var(--dim);
    border-bottom: 1px solid var(--hair);
    transition: color .2s var(--ease), border-color .2s var(--ease);
  }
  .form-consent a:hover { color: var(--accent); border-bottom-color: var(--accent); }

  /* Thank-you state — replaces the form on submit. Borderless. */
  .form-thanks {
    display: none;
    padding: 24px 0;
    text-align: center;
  }
  .form-thanks .mono {
    font-family: var(--condensed);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--accent);
    margin-bottom: 14px;
    display: inline-block;
  }
  .form-thanks h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.012em;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.04;
    margin-bottom: 12px;
  }
  .form-thanks p {
    color: var(--dim);
    font-size: 15px;
    line-height: 1.55;
    max-width: 38ch;
    margin: 0 auto;
  }
  .form-thanks p a {
    color: var(--accent);
    border-bottom: 1px solid var(--hair);
  }
  /* On submit, hide the form and everything between it and the thanks
     panel (captcha, footer buttons, consent text). */
  .form.is-submitted,
  .form.is-submitted ~ .form-foot,
  .form.is-submitted ~ .form-error,
  .form.is-submitted ~ .form-consent { display: none; }
  .form.is-submitted ~ .form-thanks { display: block; }

  /* =====================================================================
     MARQUEE — rotating logo strip that lives at the bottom of the pitch
     column, edge-to-edge. Bottom-aligned with the form card across the
     two-column split. Carries the customer-recognition signal as motion
     instead of a static grid.
     ===================================================================== */
  .marquee {
    position: relative;
    /* Sits directly beneath the pitch-uses bullets. Negative horizontal
       margins bleed the strip past the pitch's padding to the column's
       left/right edges. */
    margin: 0;
    height: var(--marquee-h);
    background: var(--bg);
    display: flex; align-items: center;
    overflow: hidden;
    /* Edge fades — same canonical mask treatment as homepage marquee. */
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  }
  .marquee-track {
    display: flex;
    align-items: center;
    gap: 64px;
    white-space: nowrap;
    animation: marquee-left 56s linear infinite;
    padding-left: 64px;
  }
  .marquee:hover .marquee-track { animation-play-state: paused; }
  .marquee-item {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--dim);
    transition: color .2s var(--ease);
  }
  .marquee-item:hover { color: var(--text); }
  @keyframes marquee-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }

  /* =====================================================================
     FOOTER — same hex-grid footer as the homepage.
     ===================================================================== */
  .hex-cell-shape {
    fill: transparent;
    stroke: var(--accent);
    stroke-opacity: .13;
    stroke-width: 1;
    transition: stroke-opacity .25s var(--ease), fill .25s var(--ease);
    cursor: pointer;
    pointer-events: all;
  }
  .hex-fly {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
    transform-origin: center;
    transform: scale(.75);
  }
  .hex-cell:hover .hex-cell-shape {
    fill: var(--accent);
    stroke-opacity: 1;
  }
  .hex-cell:hover .hex-fly {
    opacity: 1;
    transform: scale(1);
  }
  @keyframes footer-status-pulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(182,245,0,.5); }
    50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(182,245,0,0); }
  }

  /* =====================================================================
     RESPONSIVE — under 1000px the split stacks.
     ===================================================================== */
  @media (max-width: 1000px) {
    .page {
      min-height: 0;
      grid-template-columns: 1fr;
    }
    .pitch, .door { padding: 8vh 0 0; } /* .page supplies the 5vw side gutter */
    .door { align-items: center; } /* re-center the form in the stacked layout */
  }
  @media (max-width: 600px) {
    .form { grid-template-columns: 1fr; }
    .marquee-item { font-size: 14px; }
  }