/* OnePercentCoders – Funnel
   Layout & typography mirror the reference funnel (FunnelCockpit / Montserrat),
   recreated in clean code. Brand colour injected per variant via --brand. */

:root {
    --brand: #7c3aed;
    --brand-deep: color-mix(in srgb, var(--brand) 80%, #120a24);
    --brand-soft: color-mix(in srgb, var(--brand) 9%, #ffffff);
    --navy: #192b47;           /* reference headline colour rgb(25,43,71) */
    --ink: #1a1622;
    --muted: #6b6675;
    --line: #e8e5ef;
    --maxw: 820px;             /* white content card width like the reference */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    /* identical to the reference: Montserrat with Arial fallback */
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 17px;
    color: var(--ink);
    background: #ffffff;
    line-height: 1.4;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--brand-deep); }

.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 18px;
}
main { padding: 0 0 10px; }
.center { text-align: center; }

/* ---------- Intro bar (full-width coloured band, white bold italic) ---------- */
.intro-bar {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--brand);
    color: #f4f8ff;
    padding: 19px 16px 6px;
    text-align: center;
}
.intro-bar .intro-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    font-size: clamp(12px, 3.2vw, 19px);
    line-height: 1.6;
    font-weight: 900;
    font-style: italic;
}
.intro-bar u { text-underline-offset: 2px; }

/* ---------- Headline + subline ---------- */
.fc-hero { padding: 45px 0 8px; }

h1 {
    font-size: clamp(22px, 6.2vw, 41px);
    line-height: 1.18;
    letter-spacing: -1px;
    font-weight: 800;
    color: var(--navy);
    margin: 0 auto;
    padding: 0 6px;
    max-width: 16em;
}
h1 .hl { color: var(--brand); }

.subline {
    font-size: clamp(14px, 4.2vw, 30px);
    line-height: 1.4;
    font-weight: 600;
    font-style: italic;
    color: #000;
    margin: 14px auto 0;
    max-width: 22em;
}

/* short generic lead (other pages) */
.lead {
    margin: 14px auto 0; max-width: 34em;
    font-size: 17px; color: var(--muted); text-align: center;
}

/* ---------- Image card + button block ---------- */
.img-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 0 23px 0 rgba(210, 205, 225, .55);
    padding: 22px 18px 26px;
    margin-top: 24px;
}
.img-bordered {
    border: 3px solid var(--brand);
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 3px 6px 50px rgba(0,0,0,0.15);
    aspect-ratio: 16 / 10;
    display: grid; place-items: center;
    background:
        radial-gradient(420px 220px at 50% 35%, var(--brand-soft), #fff 75%);
    color: var(--brand-deep);
    margin: 0 auto;
    max-width: 720px;
}
.img-bordered img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-bordered .ph-play {
    width: 76px; height: 76px; border-radius: 50%;
    background: var(--brand); display: grid; place-items: center;
    box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}
.img-bordered .ph-play::after {
    content: ""; margin-left: 5px;
    border-style: solid; border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}

/* ---------- CTA button (big, with play icon) ---------- */
.cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin: 22px auto 0;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: clamp(17px, 4.6vw, 19px);
    color: #fff;
    background: var(--brand);
    border: 0;
    padding: 22px 28px;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 0 7px 0 rgba(0,0,0,.45);
    transition: filter .15s ease, transform .12s ease;
    line-height: 1.2;
}
.cta:hover { filter: brightness(1.07); transform: translateY(-1px); }
.cta:active { transform: translateY(0); }
.cta .play {
    width: 20px; height: 20px; flex: none;
    border-style: solid; border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
}

/* ---------- Scarcity bar ---------- */
.scarcity { max-width: 420px; margin: 18px auto 0; }
.scarcity .track {
    width: 100%; height: 8px; background: #2a2a2a;
    border-radius: 6px; overflow: hidden; position: relative;
}
.scarcity .fill {
    width: 93%; height: 100%; position: absolute; left: 0; top: 0;
    background: var(--brand); border-radius: 6px 0 0 6px;
    animation: scarcity-blink .7s infinite alternate;
}
.scarcity .gap {
    width: 7%; height: 100%; position: absolute; right: 0; top: 0;
    background: #444; border-radius: 0 6px 6px 0;
}
.scarcity .label {
    text-align: center; font-size: 12px; color: #000; font-weight: 700;
    margin-top: 8px; font-family: Arial, sans-serif;
}
@keyframes scarcity-blink {
    0%   { background-color: var(--brand); box-shadow: 0 0 8px var(--brand); }
    50%  { background-color: color-mix(in srgb, var(--brand) 80%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--brand) 60%, #fff); }
    100% { background-color: color-mix(in srgb, var(--brand) 45%, #fff); box-shadow: 0 0 16px #fff; }
}

/* small reassurance / fallback lines */
.secure { margin: 12px auto 0; text-align: center; color: var(--muted); font-size: 13px; }
.fallback { margin: 10px auto 0; text-align: center; font-size: 13.5px; color: var(--muted); }

/* ---------- Video (training) ---------- */
.video-frame {
    position: relative; margin-top: 8px; border-radius: 9px; overflow: hidden;
    background: #15102a; aspect-ratio: 16 / 9;
    border: 3px solid var(--brand);
    box-shadow: 3px 6px 50px rgba(0,0,0,0.15);
}
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder {
    position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff;
    background: radial-gradient(560px 280px at 50% 28%, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%), linear-gradient(160deg, #241640, #120b22);
}
.video-placeholder .play {
    width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.55); margin: 0 auto 14px;
}
.video-placeholder .play::after {
    content: ""; margin-left: 5px; border-style: solid; border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
}
.video-placeholder .vp-title { font-weight: 700; font-size: 17px; }
.video-placeholder .vp-sub { font-size: 12.5px; opacity: .7; margin-top: 5px; }

.watch-bar { margin-top: 12px; height: 7px; border-radius: 999px; background: var(--brand-soft); overflow: hidden; }
.watch-bar > span { display: block; height: 100%; width: 0%; background: var(--brand); transition: width .9s linear; }
.watch-note { margin-top: 11px; text-align: center; font-size: 14px; color: var(--muted); }
.reveal { opacity: 0; max-height: 0; overflow: hidden; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease, max-height .5s ease; }
.reveal.is-visible { opacity: 1; max-height: 680px; transform: translateY(0); }

/* ---------- Proof grid ---------- */
.proof-title { text-align: center; font-size: clamp(20px, 5vw, 30px); font-weight: 800; color: var(--navy); margin: 44px 0 16px; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.proof-grid .tile {
    aspect-ratio: 1 / 1; border-radius: 9px; background: var(--brand-soft);
    border: 1px solid var(--line); display: grid; place-items: center; text-align: center;
    color: var(--brand-deep); font-weight: 700; font-size: 12px; padding: 6px;
}

/* ---------- Thank you ---------- */
.thanks { text-align: center; padding: 40px 0 8px; }
.thanks .check {
    width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center;
    background: color-mix(in srgb, #16a34a 14%, #fff); color: #16a34a; font-size: 32px;
}
.thanks h1 { color: var(--navy); font-size: clamp(24px, 6vw, 36px); max-width: none; letter-spacing: -.5px; }
.thanks p { color: var(--muted); font-size: 17px; max-width: 36em; margin: 12px auto; }
.thanks .notice { font-style: italic; }
.thanks .next { font-weight: 800; color: var(--ink); font-size: 18px; margin-top: 16px; }
.callout {
    margin: 22px auto 0; max-width: 36em; background: var(--brand-soft);
    border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; color: var(--ink); font-size: 15px;
}

/* ---------- Footer ---------- */
.site-footer { padding: 80px 0 50px; }
.site-footer .wrap {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: center;
    font-size: 13px; color: rgba(0,0,0,.5);
}
.site-footer a { color: rgba(0,0,0,.6); text-decoration: none; }
.site-footer a:hover { color: var(--brand-deep); text-decoration: underline; }
.site-footer .sep { opacity: .55; }

/* ---------- Legal pages ---------- */
.legal { max-width: 720px; text-align: left; }
.legal h1 { text-align: left; font-size: 28px; color: var(--navy); max-width: none; letter-spacing: 0; padding: 0; }
.legal h2 { font-size: 19px; margin: 26px 0 8px; }
.legal p { color: var(--muted); }

@media (max-width: 520px) {
    .img-bordered { margin-left: 0; margin-right: 0; }
    .proof-grid { grid-template-columns: repeat(2, 1fr); }
}