/* ==========================================================================
   Wildcaster landing page
   --------------------------------------------------------------------------
   The design language is forestfire.app's, not a new one. The tokens below are
   copied verbatim from that site's user.css so the two read as one product
   family: same near-black ground, same signal yellow, same Barlow Condensed /
   Lato pairing, same angled clip-path on buttons and section tags.
   Do not "improve" these values in isolation - change them in both places or
   the family splits.
   ========================================================================== */

:root {
    --wc-bg: #0a0a0a;
    --wc-surface: #1a1a1a;
    --wc-surface-alt: #141414;
    --wc-accent: #ffde14;
    --wc-accent-hover: #e6c800;
    --wc-text: #f0f0f0;
    --wc-text-muted: #999999;
    --wc-danger: #e2053a;
    --wc-border: #2a2a2a;
    --wc-font-heading: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
    --wc-font-body: "Lato", "Helvetica Neue", Arial, sans-serif;

    --wc-maxw: 1180px;
    --wc-gut: 24px;
}

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

html { scroll-behavior: smooth; }
/* Anchors must clear the sticky header, or a jump lands under it. */
:target { scroll-margin-top: 88px; }

body {
    margin: 0;
    background: var(--wc-bg);
    color: var(--wc-text);
    font-family: var(--wc-font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--wc-accent); }
a:hover { color: var(--wc-accent-hover); }

.wrap { max-width: var(--wc-maxw); margin: 0 auto; padding: 0 var(--wc-gut); }

/* ---------- typography ------------------------------------------------- */

h1, h2, h3, h4 {
    font-family: var(--wc-font-heading);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.03;
    margin: 0 0 14px;
    color: #fff;
}
h1 { font-size: clamp(2.1rem, 4.1vw, 3.35rem); letter-spacing: 1.8px; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.32rem; letter-spacing: 1.2px; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--wc-accent); }

.lede { font-size: 1.12rem; color: #d8d8d8; max-width: 68ch; }
.lede b, .lede strong { color: #fff; font-weight: 700; }
.muted { color: var(--wc-text-muted); }

/* The angled tag above each section heading. Straight from the datasheet. */
.tag {
    display: inline-block;
    background: var(--wc-accent);
    color: #000;
    font-family: var(--wc-font-heading);
    font-weight: 800;
    font-size: 0.86rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 5px 26px 5px 16px;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
    margin-bottom: 14px;
}
.tag.red { background: var(--wc-danger); color: #fff; }

/* ---------- header ----------------------------------------------------- */

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--wc-border);
}
.site-header .wrap {
    display: flex; align-items: center; gap: 20px;
    min-height: 68px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand img { height: 30px; width: auto; }
.brand .name {
    font-family: var(--wc-font-heading); font-weight: 800; font-size: 1.5rem;
    letter-spacing: 2.5px; text-transform: uppercase; color: #fff; line-height: 1;
}
.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
    font-family: var(--wc-font-heading); font-weight: 700; font-size: 1rem;
    letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--wc-text); text-decoration: none; white-space: nowrap;
}
.nav a:hover { color: var(--wc-accent); }

/* Language switcher: same shape as forestfire.app's mod_languages block,
   but the flags are inline SVG rather than 20x14 GIFs, so they stay crisp
   and the page keeps to its own origin. */
.langs { display: flex; align-items: center; gap: 8px; }
/* Inactive flags sit at 0.85, not lower. At 0.55 against this near-black
   ground the Spanish red darkened to almost black and the yellow went olive,
   so the flag read as GERMAN. The active state is carried by the accent
   border, which does not have to distort the colours to be legible. */
.langs .lang {
    display: block; line-height: 0; padding: 3px;
    border: 1px solid transparent; opacity: 0.85;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}
.langs .lang:hover { opacity: 1; }
.langs .lang.active { opacity: 1; border-color: var(--wc-accent); }
.langs .lang svg { display: block; width: 24px; height: 17px; }

/* ---------- buttons ---------------------------------------------------- */

.btn {
    display: inline-block;
    font-family: var(--wc-font-heading);
    font-weight: 700; font-size: 1rem;
    letter-spacing: 2px; text-transform: uppercase;
    padding: 15px 38px;
    border: 0; border-radius: 0;
    text-decoration: none; cursor: pointer;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 100%, 12px 100%);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.btn-primary { background: var(--wc-accent); color: #000; }
.btn-primary:hover { background: var(--wc-accent-hover); color: #000; }
.btn-secondary {
    background: transparent; color: var(--wc-accent);
    border: 2px solid var(--wc-accent);
    padding: 13px 36px;
}
.btn-secondary:hover { background: var(--wc-accent); color: #000; }
/* The app download. Red rather than a third outline button because it is the
   other primary action, and white on #e2053a measures 4.87:1 - above AA for
   this weight and size. */
.btn-danger { background: var(--wc-danger); color: #fff; }
.btn-danger:hover { background: #c40433; color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
/* One bar of five, spanning the full width BELOW the copy-and-photo row
   rather than sitting inside the ~550px copy column, which could not hold
   more than two across. Equal columns, so the bar reads as a single control
   strip and the labels can differ in length without unbalancing it. */
.hero .btn { padding: 14px 16px; letter-spacing: 1.2px; font-size: 0.94rem; }
.hero .btn-secondary { padding: 12px 14px; }
.hero .btn-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin: 36px 0 0;
}
.hero .btn-row .btn { width: 100%; text-align: center; }

/* ---------- hero ------------------------------------------------------- */

.hero { padding: 64px 0 20px; border-bottom: 1px solid var(--wc-border); }

/* Copy left, the operator photograph right. That right half was dead space
   before, and the whole page is screenshots of software: one image of the
   person actually holding it carries what the UI cannot. */
.hero-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 46px;
    align-items: center;
}
.hero-figure { margin: 0; border: 1px solid var(--wc-border); background: #000; }
.hero-figure img {
    width: 100%;
    /* 4:3 rather than a portrait crop: the firefighter is at the left edge and
       the fire at the right, so a narrower crop loses one or the other. */
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}
/* Eyebrow left, headline centred, CTAs centred under it. */
.hero .eyebrow {
    font-family: var(--wc-font-heading); font-weight: 700;
    font-size: 1rem; letter-spacing: 3px; text-transform: uppercase;
    color: var(--wc-accent); margin-bottom: 14px;
    text-align: left;
}
.hero h1 { text-align: center; }
.hero .btn-row { justify-content: center; }

.hero .lede {
    font-size: 1.2rem;
    text-align: justify;
    /* Justification without hyphenation opens rivers of white space in a
       column this narrow, and Spanish makes it worse - "descentralizados",
       "multiamenaza". Both pages set lang on <html>, which is what lets the
       browser hyphenate to the right dictionary. */
    -webkit-hyphens: auto;
    hyphens: auto;
}
.hero-shot {
    margin: 46px 0 0;
    border: 1px solid var(--wc-border);
    border-top: 3px solid var(--wc-accent);
    background: #000;
}
.hero-shot img { width: 100%; }
.hero-caption {
    font-size: 0.86rem; color: var(--wc-text-muted);
    padding: 10px 14px; border-top: 1px solid var(--wc-border);
}

/* Platform strip under the hero. */
.platforms {
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    padding: 20px 0 30px;
    font-family: var(--wc-font-heading); font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
    font-size: 0.92rem; color: var(--wc-text-muted);
}
.platforms b { color: var(--wc-text); font-weight: 700; }

/* ---------- sections --------------------------------------------------- */

section { padding: 68px 0; border-bottom: 1px solid var(--wc-border); }
section.alt { background: var(--wc-surface-alt); }

.grid { display: grid; gap: 34px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }

/* The 3px accent top border is the forestfire.app product-card signature. */
.card {
    background: var(--wc-surface);
    border-top: 3px solid var(--wc-accent);
    padding: 30px 26px;
}
.card h3 { margin-bottom: 8px; }
.card p { margin: 0; color: #cfcfcf; font-size: 0.98rem; }

.shot { border: 1px solid var(--wc-border); background: #000; }
.shot img { width: 100%; }
.shot figcaption {
    font-size: 0.86rem; color: var(--wc-text-muted);
    padding: 10px 14px; border-top: 1px solid var(--wc-border); margin: 0;
}

/* Numbered operational loop. */
.loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.loop .step { border-top: 2px solid var(--wc-border); padding-top: 16px; }
.loop .n {
    font-family: var(--wc-font-heading); font-weight: 800; font-size: 2.1rem;
    color: var(--wc-accent); line-height: 1; display: block; margin-bottom: 6px;
}
.loop h3 { font-size: 1.1rem; margin-bottom: 6px; }
.loop p { margin: 0; font-size: 0.94rem; color: #c4c4c4; }

/* Feature bullets with a yellow marker, as on the datasheet. */
ul.ticks { list-style: none; margin: 22px 0 0; padding: 0; }
ul.ticks li { position: relative; padding-left: 24px; margin-bottom: 11px; color: #d4d4d4; }
ul.ticks li::before {
    content: ""; position: absolute; left: 0; top: 0.62em;
    width: 10px; height: 2px; background: var(--wc-accent);
}
ul.ticks b { color: #fff; }

/* An exclusion, not a feature. The Viewer tier lists what it does NOT do, and
   those lines must not read as bullets of value: muted text, and the marker
   becomes a hollow rule rather than the accent bar. */
ul.ticks li.off { color: var(--wc-text-muted); }
ul.ticks li.off::before {
    background: transparent;
    border-top: 2px solid var(--wc-text-muted);
    opacity: 0.7;
}

/* ---------- pricing ---------------------------------------------------- */

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 34px; }
.tier {
    background: var(--wc-surface);
    border: 1px solid var(--wc-border);
    border-top: 3px solid var(--wc-border);
    padding: 32px 28px; display: flex; flex-direction: column;
}
.tier.featured { border-top-color: var(--wc-accent); background: #1d1d1d; }
/* The tier name is what a reader scans for, so it is the largest thing on the
   card - above the price, not a kicker over it. */
.tier .tier-code {
    font-family: var(--wc-font-heading); font-weight: 800;
    font-size: 1.85rem; line-height: 1.05;
    letter-spacing: 2px; text-transform: uppercase;
    color: var(--wc-accent); margin-bottom: 8px;
}
.tier h3 { margin-bottom: 4px; }
.tier .who { color: var(--wc-text-muted); font-size: 0.95rem; margin: 0 0 18px; }
.tier .price {
    font-family: var(--wc-font-heading); font-weight: 800; font-size: 1.7rem;
    color: #fff; letter-spacing: 1px; margin-bottom: 4px; text-transform: uppercase;
}
.tier .price-note { font-size: 0.85rem; color: var(--wc-text-muted); margin: 0 0 20px; }
.tier ul.ticks { margin-top: 0; flex: 1; }
.tier ul.ticks li { font-size: 0.95rem; }
.tier .btn { margin-top: 14px; text-align: center; width: 100%; }
.tier .btn + .btn { margin-top: 10px; }
.tier .cta-stack { margin-top: 22px; }

/* ---------- contact ---------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; }
.contact-item { margin-bottom: 22px; }
.contact-item .k {
    font-family: var(--wc-font-heading); font-weight: 700; font-size: 0.86rem;
    letter-spacing: 2px; text-transform: uppercase; color: var(--wc-text-muted);
    display: block; margin-bottom: 3px;
}
.contact-item .v { font-size: 1.08rem; color: #fff; }
.contact-item .v a { text-decoration: none; }

/* ---------- footer ----------------------------------------------------- */

.site-footer { padding: 40px 0; background: var(--wc-bg); border-top: 1px solid var(--wc-border); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 34px; align-items: center; }
.site-footer a { text-decoration: none; }
.site-footer .copy { color: var(--wc-text-muted); font-size: 0.9rem; margin-left: auto; }
.credits {
    margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--wc-border);
    color: var(--wc-text-muted); font-size: 0.88rem; line-height: 1.7;
}

/* ---------- responsive ------------------------------------------------- */

@media (max-width: 980px) {
    /* Stack the hero: the photo goes under the copy rather than squeezing the
       headline into a column too narrow to read. */
    .hero-grid { grid-template-columns: 1fr; gap: 30px; }
    /* Three then two. Two columns would leave a single orphan on the last
       row, which is the thing this layout exists to avoid. */
    .hero .btn-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .tiers { grid-template-columns: 1fr; }
    .split, .contact-grid { grid-template-columns: 1fr; gap: 30px; }
    .loop { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
    .hero .btn-row { grid-template-columns: 1fr; }
    body { font-size: 16px; }
    section { padding: 48px 0; }
    .hero { padding: 46px 0 16px; }
    .grid-2, .grid-4, .loop { grid-template-columns: 1fr; }
    .nav { gap: 16px; }
    .nav a { font-size: 0.92rem; letter-spacing: 1px; }
    .brand .name { font-size: 1.25rem; }
    .btn { width: 100%; text-align: center; }
}
/* Below ~600px the header cannot hold brand + nav + flags on one line, and
   with nowrap the flags simply left the viewport: the page scrolled sideways
   to 444px on a 375px screen. Wrap onto two rows instead - brand and language
   flags on the first, the nav across the second - so nothing is pushed off and
   no link has to be hidden to make room. */
@media (max-width: 600px) {
    .site-header .wrap { flex-wrap: wrap; min-height: 0; padding-top: 10px; }
    .brand { margin-right: auto; }
    .nav {
        order: 3; width: 100%;
        justify-content: space-between; gap: 10px;
        padding: 6px 0 10px;
    }
    .nav a { font-size: 0.86rem; letter-spacing: 0.8px; }
    :target { scroll-margin-top: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
}

/* ---------- contact form ------------------------------------------------ */
/* Cloned from forestfire.app's contact block: same fields, same self-hosted
   captcha gate, same POST to contact_handler.php. Expressed through the
   tokens above rather than that page's inline styles, which run to a couple
   of hundred attributes and cannot be maintained in two places. */

.cform { max-width: 620px; margin: 30px auto 0; }
.cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cform label.k {
    display: block; color: var(--wc-text);
    font-family: var(--wc-font-heading); font-weight: 700;
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 6px;
}
.cform .req { color: var(--wc-danger); }
.cform input[type="text"],
.cform input[type="email"],
.cform input[type="number"] {
    width: 100%;
    background: var(--wc-bg);
    border: 2px solid var(--wc-border);
    color: var(--wc-text);
    padding: 10px 12px;
    font-size: 1rem;
    font-family: var(--wc-font-body);
}
.cform input:focus { outline: 0; border-color: var(--wc-accent); }
.cform fieldset { border: 0; margin: 0; padding: 0; }
.cform .choices { display: flex; flex-direction: column; gap: 6px; }
.cform .choices label {
    color: var(--wc-text); font-size: 0.95rem; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
}
.cform input[type="radio"] { accent-color: var(--wc-accent); }
.cform .other-input { margin-top: 4px; padding: 6px 10px; font-size: 0.9rem; }
.cform .err { color: var(--wc-danger); font-size: 0.92rem; margin: 0 0 12px; }
.cform .actions { text-align: center; margin-top: 8px; }
.cform button[disabled] { opacity: 0.6; cursor: default; }

.cform-success { text-align: center; padding: 22px 0; }
.cform-success .h {
    color: var(--wc-accent); font-family: var(--wc-font-heading);
    font-size: 1.4rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 2px; margin-bottom: 10px;
}

/* The captcha gate. A full-screen overlay so the question is unmissable and
   the form underneath cannot be filled until it is answered. */
.captcha-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.85); z-index: 9999;
    justify-content: center; align-items: center;
}
.captcha-overlay.open { display: flex; }
.captcha-box {
    background: var(--wc-surface); padding: 38px 34px;
    max-width: 440px; width: 90%; text-align: center;
    border-top: 3px solid var(--wc-accent);
}
.captcha-box .title {
    color: var(--wc-text); font-family: var(--wc-font-heading);
    text-transform: uppercase; letter-spacing: 2px; font-size: 1.05rem;
    margin: 0 0 18px;
}
.captcha-box .q {
    color: var(--wc-accent); font-family: var(--wc-font-heading);
    font-size: 1.8rem; font-weight: 800; margin: 0 0 20px;
    text-transform: uppercase; letter-spacing: 1px;
}
.captcha-colors {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin: 0 auto 20px; max-width: 320px;
}
.captcha-colors button {
    width: 100%; height: 56px; padding: 0; cursor: pointer;
    border: 2px solid var(--wc-border);
    transition: transform 0.2s ease;
}
.captcha-colors button:hover { transform: scale(1.08); }
.captcha-math input { width: 130px; text-align: center; font-size: 1.2rem; padding: 12px; }
.captcha-cancel {
    margin: 16px auto 0; display: block;
    background: none; border: 0; color: var(--wc-text-muted);
    cursor: pointer; font-size: 0.9rem; font-family: var(--wc-font-body);
}
.captcha-cancel:hover { color: var(--wc-text); }
.captcha-err { color: var(--wc-danger); margin: 12px 0 0; font-size: 0.92rem; }

@media (max-width: 700px) {
    .cform-row { grid-template-columns: 1fr; }
}

/* ---------- download page ----------------------------------------------- */

/* A standing caveat, not an error. Amber-ish: the accent would read as a
   feature callout and the danger red as a failure. */
.notice {
    margin: 26px 0 0;
    padding: 14px 18px;
    background: rgba(255, 222, 20, 0.07);
    border-left: 3px solid var(--wc-accent);
    color: #d8d8d8;
    font-size: 0.98rem;
    max-width: 70ch;
}
.notice b { color: #fff; }

.card.dl { display: flex; flex-direction: column; }
.card.dl .dl-meta {
    font-family: var(--wc-font-heading);
    letter-spacing: 1.4px; text-transform: uppercase;
    font-size: 0.84rem; color: var(--wc-accent);
    margin: 0 0 14px;
}
.card.dl > p { margin-bottom: 14px; }
.card.dl .btn { margin-top: auto; text-align: center; }

ol.steps {
    margin: 0 0 20px; padding-left: 20px;
    color: #cfcfcf; font-size: 0.94rem;
}
ol.steps li { margin-bottom: 9px; }
ol.steps b { color: #fff; }
ol.steps code {
    display: inline-block; margin-top: 5px;
    background: var(--wc-bg); border: 1px solid var(--wc-border);
    padding: 4px 8px; font-size: 0.86rem; color: var(--wc-accent);
    word-break: break-all;
}

/* The registration form is deliberately dead until the backend exists. It
   must LOOK unavailable, not merely be unavailable, or someone fills it in
   and waits for a reply that is never coming. */
.pending {
    margin: 0 0 20px; padding: 12px 16px;
    background: var(--wc-surface-alt);
    border: 1px dashed var(--wc-border);
    color: var(--wc-text-muted); font-size: 0.94rem;
}
.pending b { color: var(--wc-text); }
.cform fieldset[disabled] { opacity: 0.5; }
.cform fieldset[disabled] input,
.cform fieldset[disabled] button { cursor: not-allowed; }