/* =======================================================================
   ET CÆTERA — EU Trade Sanctions Tool · landing styles (v3 "monochrome")
   =======================================================================
   Faithful to the co-worker's v3 design system (Design System/tokens/*):
     - Strictly monochrome: black ink on white paper. The only chroma that
       ever appears is the muted EU-flag blue INSIDE photography — never as
       UI chrome.
     - Display = Montserrat ExtraBold, TRACKED-OUT uppercase caps.
       Body = Nunito Sans, airy, justified.
     - Hard rectangles, hairline/strong rules, zero shadows.
     - Redaction-bar graphic motif + unredact entrance animation.

   Legacy semantic tokens (--primary*, --line, --radius, etc.) are kept as
   aliases so the existing modal / form / button markup keeps working.
   ======================================================================= */

:root {
    /* --- v3 monochrome scale (Design System/tokens/colors.css) --- */
    --ink: #1a1a1a;            /* primary black — logo, bars, headlines */
    --ink-soft: #333333;       /* dense body copy */
    --gray-700: #545454;       /* secondary text */
    --gray-500: #8a8a8a;       /* muted text, placeholders */
    --gray-300: #d6d6d6;       /* hairline borders */
    --gray-150: #ebebeb;       /* subtle dividers */
    --gray-75: #f5f5f5;        /* quiet panel fill */
    --paper: #ffffff;

    --eu-blue: #2f4d8f;        /* reserved — photography only, never UI */

    /* --- text --- */
    --text-body: #333333;
    --text-muted: #545454;
    --text-faint: #8a8a8a;
    --text-inverse: #ffffff;

    /* --- surfaces --- */
    --surface-panel: #f5f5f5;
    --surface-inverse: #1a1a1a;

    /* --- type --- */
    --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Nunito Sans", "Segoe UI", Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* --- tracking (the signature) --- */
    --tracking-heading: 0.18em;
    --tracking-label: 0.30em;

    /* --- motion --- */
    --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);

    /* === legacy aliases (UI is monochrome, so accent == ink) === */
    --accent: var(--ink);
    --accent-hover: #000000;
    --accent-soft: var(--gray-75);
    --alert: #1a1a1a;          /* no red accent in v3 — restriction tags are ink */
    --alert-soft: var(--gray-75);
    --primary: var(--ink);
    --primary-light: #000000;
    --primary-dark: #000000;
    --primary-50: var(--gray-75);
    --ink-2: var(--ink-soft);
    --ink-muted: var(--text-muted);
    --ink-faint: var(--text-faint);
    --line: var(--gray-150);
    --line-strong: var(--gray-300);
    --bg: var(--paper);
    --bg-muted: var(--surface-panel);
    --bg-deep: var(--ink);
    --radius: 0px;
    --radius-lg: 0px;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: 0 24px 48px rgba(26,26,26,0.16);
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--text-body);
    background: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--ink); text-decoration: none; transition: color 0.15s var(--ease); }
a:hover { color: #000; }

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Grayscale treatment for photography (the only place chroma lives). */
.etc-photo { filter: grayscale(0.85) contrast(1.02); }

/* Shared label / kicker — tracked-out uppercase caps */
.eyebrow, .section-kicker {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
    color: var(--ink);
}

.text-accent { color: var(--ink); }

/* ---------- Image placeholders (drop real assets in later) ---------- */
.img-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        repeating-linear-gradient(45deg, var(--gray-75) 0 12px, var(--gray-150) 12px 24px);
    border: 1.5px dashed var(--gray-300);
    color: var(--gray-700);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 1rem;
}
.img-ph-square { aspect-ratio: 1 / 1; width: 100%; }

/* =======================================================================
   Header
   ======================================================================= */
.site-header {
    background: var(--paper);
    color: var(--ink);
    position: sticky;
    top: 0;
    z-index: 40;
    border-bottom: 1px solid var(--gray-150);
}
.site-header a { color: var(--ink); }

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    gap: 1.5rem;
}

.brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex-shrink: 1; }
.brand-logo { height: 52px; width: auto; flex-shrink: 0; }
.brand-mark { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
}
.brand-sub {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gray-700);
    margin-top: 3px;
}

.site-nav { display: flex; align-items: center; gap: 1.75rem; flex-shrink: 0; }
.site-nav a {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
    color: var(--gray-700);
    border-bottom: 2px solid transparent;
    padding-bottom: 4px;
    white-space: nowrap;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.site-nav a:hover { color: var(--ink); border-color: var(--ink); }

.nav-toggle {
    display: none;
    width: 40px; height: 40px;
    background: transparent; border: 0; cursor: pointer;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; padding: 0;
}
.nav-toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--ink); border-radius: 0;
    transition: transform 0.2s var(--ease), opacity 0.15s;
}

/* =======================================================================
   Buttons — all ink (monochrome)
   ======================================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.85rem 1.5rem;
    border: 2px solid var(--ink);
    border-radius: 0;
    cursor: pointer;
    line-height: 1.1;
    white-space: nowrap;
    transition: transform 0.06s var(--ease), background-color 0.15s var(--ease),
                border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid rgba(26,26,26,0.35); outline-offset: 2px; }

.btn-sm { padding: 0.55rem 1rem; font-size: 0.66rem; }
.btn-lg { padding: 1rem 1.9rem; font-size: 0.8rem; }
.btn-block { display: inline-flex; width: 100%; }

/* Solid ink — primary CTA */
.btn-accent, .btn-primary, .btn-enter {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}
.btn-accent:hover, .btn-primary:hover, .btn-enter:hover {
    background: #000;
    border-color: #000;
    color: var(--paper);
}
/* "Enter platform" gets a dark-blue hover (the reserved EU blue) instead of
   black — a small accent cue. Placed after the shared rule so it wins.
   It also lifts + casts a soft shadow on hover, echoing the hero photos. */
.btn-enter {
    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
                background-color 0.15s var(--ease), border-color 0.15s var(--ease),
                color 0.15s var(--ease);
}
.btn-enter:hover {
    background: var(--eu-blue);
    border-color: var(--eu-blue);
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(47,77,143,0.32);
}
@media (prefers-reduced-motion: reduce) {
    .btn-enter:hover { transform: none; }
}

/* Ghost — ink outline */
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn-ghost:hover {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.btn-arrow { transition: transform 0.18s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(3px); }

/* =======================================================================
   Hero
   ======================================================================= */
.hero { padding: 4.5rem 0 3.5rem; }
.hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 4rem;
    align-items: center;
}
.hero-main { display: flex; flex-direction: column; gap: 1.6rem; }

.hero-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 4.2vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink);
}
.hero-title .unredact { display: block; width: fit-content; padding-right: 0.06em; }

.hero-lede {
    font-family: var(--font-body);
    font-size: 1.02rem;
    line-height: 1.75;
    color: var(--text-body);
    max-width: 520px;
}

/* Hero video placeholder (replaces the old sanctions search widget).
   Autoplays muted/looped on entry once a real file is dropped at the
   <source> path; until then the caption placeholder shows. */
.hero-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 2px solid var(--ink);
    background: var(--ink);
    overflow: hidden;
    margin: 0;
}
.hero-video-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #111;
    z-index: 1;
}
.hero-video-ph {
    position: absolute;
    inset: 0;
    z-index: 2;            /* above the (empty) video until it actually plays */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    color: var(--paper);
    pointer-events: none;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 14px, rgba(255,255,255,0.06) 14px 28px),
        var(--ink);
}
.hero-video-ph-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.hero-video-ph-sub {
    font-family: var(--font-body);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.7);
}
/* Play glyph */
.hero-video-ph::before {
    content: "";
    width: 0; height: 0;
    border-style: solid;
    border-width: 14px 0 14px 24px;
    border-color: transparent transparent transparent rgba(255,255,255,0.85);
    margin-bottom: 0.3rem;
}

.hero-cta { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.hero-cta-link {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 5px;
}
.hero-cta-note { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }

/* Hero media — photos (grayscale) + decorative redaction stripes */
.hero-media { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.hero-media img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
/* Hover: reveal the photo's colour and lift it a few px — a small cue that
   the site is alive. Pure CSS, no cost. */
.hero-media .etc-photo {
    transition: filter 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
    will-change: transform;
}
.hero-media .etc-photo:hover {
    filter: grayscale(0) contrast(1.02);
    transform: translateY(-5px);
    box-shadow: 0 10px 24px rgba(26, 26, 26, 0.22);
}
@media (prefers-reduced-motion: reduce) {
    .hero-media .etc-photo { transition: filter 0.35s var(--ease); }
    .hero-media .etc-photo:hover { transform: none; box-shadow: none; }
}
.hero-stripes { display: flex; flex-direction: column; gap: 0.85rem; justify-content: flex-end; }
.hero-stripes.is-top { justify-content: flex-start; }
.stripe { height: 26px; background: var(--ink); transform-origin: left; }

/* =======================================================================
   Trust band
   ======================================================================= */
.trust-band {
    background: var(--surface-panel);
    border-top: 1px solid var(--gray-150);
    border-bottom: 1px solid var(--gray-150);
    padding: 2.75rem 0;
}
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.75rem; }
.trust-item { border-top: 3px solid var(--ink); padding-top: 1.1rem; background: transparent; }
.trust-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.75rem;
    line-height: 1;
    color: var(--ink);
}
.trust-lbl {
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 0.65rem;
}
.trust-privacy {
    max-width: 760px;
    margin: 2rem auto 0;
    padding-top: 1.6rem;
    border-top: 1px solid var(--gray-150);
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--gray-500, #5a6675);
}

/* =======================================================================
   Sections / headings
   ======================================================================= */
.section { padding: 4rem 0; }
.section-muted { background: var(--surface-panel); }

.section-head { max-width: 720px; margin: 0 0 2.75rem; }
.section-head.is-centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-kicker { margin-bottom: 0.7rem; }
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.18;
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 0.7rem;
}
.section-lede { font-family: var(--font-body); color: var(--text-muted); font-size: 1rem; line-height: 1.7; }

/* =======================================================================
   How it works — steps
   ======================================================================= */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.75rem; }
.step { display: flex; flex-direction: column; gap: 0.7rem; }
.step-num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0.6rem;
    width: fit-content;
    min-width: 2.2rem;
}
.step h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
}
.step p { font-family: var(--font-body); color: var(--text-body); font-size: 0.92rem; line-height: 1.6; }

.section-cta { margin-top: 3rem; display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.section-cta-note { font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }

/* =======================================================================
   Compliance band (solid black)
   ======================================================================= */
.compliance { background: var(--surface-inverse); color: var(--text-inverse); }
.compliance-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 3.5rem; padding: 4rem 0; }
.compliance-rule { border: 0; border-top: 3px solid var(--paper); width: 180px; margin: 0 0 0.9rem; }
.compliance h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
    line-height: 1.25;
}
.compliance-body { display: flex; flex-direction: column; gap: 1.1rem; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.85; text-align: justify; text-wrap: pretty; }
.compliance-body p { margin: 0; }
.compliance-body p.is-emphasis { font-weight: 700; }
.compliance-cta { display: flex; gap: 1.25rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }
.compliance-cta .btn-ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
.compliance-cta .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.compliance-cta span { font-family: var(--font-body); font-size: 0.82rem; opacity: 0.65; }

/* =======================================================================
   Capabilities grid
   ======================================================================= */
.cap-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.75rem 2.5rem; }
.cap { display: flex; flex-direction: column; gap: 0.85rem; }
.cap-kicker {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
    border-bottom: 2px solid var(--ink);
    padding-bottom: 0.6rem;
}
.cap p { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.65; color: var(--text-body); }

/* =======================================================================
   Pricing
   ======================================================================= */
.pricing-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 2.75rem;
}
.pricing-head .section-kicker { margin-bottom: 0.7rem; }
.pricing-head .section-lede { margin-top: 1rem; }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: stretch; }
/* 4-tier layout (Basic / Professional / Enterprise / Custom).
   minmax(0, 1fr) — NOT 1fr — so every column is exactly equal width even
   when a card holds a long unbreakable feature line. (Plain 1fr resolves
   to minmax(auto, 1fr), letting min-content widen a column.) */
.pricing-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.pricing-grid-4 .plan { padding: 1.6rem 1.35rem; min-width: 0; }
/* Higher specificity than the generic .pricing-grid responsive rules below,
   so these win: 2×2 on tablet, single column on phones. */
@media (max-width: 1080px) {
    .pricing-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 680px; margin: 0 auto; }
}
@media (max-width: 620px) {
    .pricing-grid-4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

.plan {
    position: relative;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 0;
    padding: 1.9rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}
/* Featured plan is INVERTED — solid black card, white text (v3 signature) */
.plan-featured { background: var(--surface-inverse); color: var(--text-inverse); border-color: var(--ink); }
.plan-featured .plan-head h3,
.plan-featured .price-amount { color: var(--paper); }
.plan-featured .plan-tagline,
.plan-featured .price-period { color: rgba(255,255,255,0.7); }
.plan-featured .plan-features li { color: rgba(255,255,255,0.85); border-top-color: rgba(255,255,255,0.22); }

.plan-badge {
    position: absolute;
    top: -13px;
    left: 1.75rem;
    background: var(--paper);
    border: 2px solid var(--ink);
    color: var(--ink);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 0.28rem 0.65rem;
}

.plan-head { display: flex; flex-direction: column; gap: 0.5rem; }
.plan-head h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
}
.plan-tagline { font-family: var(--font-body); color: var(--text-muted); font-size: 0.85rem; }
.plan-price { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.6rem; }
.price-amount {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--ink);
}
.price-period { font-family: var(--font-body); color: var(--text-muted); font-size: 0.85rem; }
/* Custom tier shows a word, not a number — scale it down so it doesn't
   dwarf the "pricing" suffix and reads as a tidy "Custom pricing". */
.price-amount-custom { font-size: 1.9rem; }

.plan-features { flex: 1; display: flex; flex-direction: column; }
.plan-features li {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-body);
    padding: 0.55rem 0;
    border-top: 1px solid var(--gray-150);
}
/* Plan CTA inside the inverted featured card flips to a white button */
.plan-featured .btn-accent,
.plan-featured .btn-ghost {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}
.plan-featured .btn-accent:hover,
.plan-featured .btn-ghost:hover { background: #f0f0f0; color: var(--ink); border-color: #f0f0f0; }

.pricing-foot { margin-top: 1.6rem; text-align: center; font-family: var(--font-body); font-size: 0.82rem; color: var(--text-faint); }

/* Monthly / Yearly toggle */
.billing-toggle { display: inline-flex; gap: 0; }
.billing-toggle-btn {
    appearance: none;
    border: 1.5px solid var(--ink);
    background: var(--paper);
    padding: 0.6rem 1.15rem;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.billing-toggle-btn + .billing-toggle-btn { border-left: 0; }
.billing-toggle-btn.is-active { background: var(--ink); color: var(--paper); }
.billing-toggle-save {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.7rem;
    letter-spacing: 0;
    text-transform: none;
    opacity: 0.75;
}

/* =======================================================================
   Credibility
   ======================================================================= */
.cred-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.75rem; margin-bottom: 2.75rem; }
.cred-stat { border-top: 3px solid var(--ink); padding-top: 1.4rem; }
.cred-num { font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; color: var(--ink); }
.cred-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: var(--tracking-heading);
    text-transform: uppercase;
    color: var(--ink);
    margin-top: 0.75rem;
}
.cred-sub { font-family: var(--font-body); color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; margin-top: 0.6rem; }
.cred-paragraph { font-family: var(--font-body); color: var(--text-body); font-size: 0.98rem; line-height: 1.85; max-width: none; text-align: justify; text-wrap: pretty; }

/* =======================================================================
   About
   ======================================================================= */
.about-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 3.5rem; align-items: center; }
/* Fill the column flush and centre against the text block, rather than a small
   square floating top-left with dead space around it. */
.about-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.about-rule { border: 0; border-top: 3px solid var(--ink); width: 120px; margin-bottom: 1rem; }
.about-text .section-title { text-align: left; }
.about-text p { font-family: var(--font-body); color: var(--text-body); font-size: 1rem; line-height: 1.8; margin-top: 1.2rem; text-align: justify; text-wrap: pretty; }
.inline-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.founder-card { border-top: 3px solid var(--ink); margin-top: 2rem; padding-top: 1.4rem; display: flex; gap: 1.4rem; align-items: flex-start; }
.founder-avatar {
    width: 64px; height: 64px; flex-shrink: 0;
    background: var(--ink); color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: 0.06em;
}
.founder-name {
    font-family: var(--font-display); font-weight: 700; font-size: 0.88rem;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.founder-title { font-family: var(--font-body); color: var(--text-faint); font-size: 0.82rem; margin-top: 0.25rem; }
.founder-bio { font-family: var(--font-body); color: var(--text-muted); font-size: 0.88rem; line-height: 1.7; margin-top: 0.6rem; }

/* =======================================================================
   Contact
   ======================================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.contact-rule { border: 0; border-top: 3px solid var(--ink); width: 120px; margin-bottom: 1rem; }
.contact-info { font-family: var(--font-body); font-size: 0.98rem; line-height: 2; color: var(--text-body); margin-top: 1.5rem; }
.contact-info b { text-decoration: underline; text-underline-offset: 4px; }
.contact-text p { font-family: var(--font-body); color: var(--text-body); font-size: 1rem; line-height: 1.8; margin-top: 1.2rem; }
.contact-text .section-title { text-align: left; }
.contact-card { border: 2px solid var(--ink); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; }
.contact-card-lead { font-family: var(--font-body); font-size: 0.95rem; line-height: 1.7; color: var(--text-body); margin: 0; }
.contact-card-note { font-family: var(--font-body); font-size: 0.8rem; color: var(--text-faint); margin: 0; text-align: center; }

/* =======================================================================
   Footer
   ======================================================================= */
.site-footer { border-top: 1px solid var(--gray-150); background: var(--paper); color: var(--text-faint); padding: 1.75rem 0; }
.site-footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; }
.footer-brand {
    font-family: var(--font-display); font-weight: 700; font-size: 0.9rem;
    letter-spacing: 0.06em; color: var(--ink); margin-bottom: 0.3rem;
}
.footer-copy { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-faint); }
.footer-disclaimer { font-family: var(--font-body); max-width: 560px; font-size: 0.78rem; color: var(--text-faint); line-height: 1.6; }
.footer-links { display: flex; gap: 1.5rem; align-items: center; }
.footer-links a { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px; }
.footer-link-btn {
    appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
    font-family: var(--font-body); font-size: 0.78rem; color: var(--text-faint);
    text-decoration: underline; text-underline-offset: 3px;
}
.footer-link-btn:hover { color: var(--ink); }

/* Document modals (Disclaimer / Privacy) — long-form legal text */
.modal-card-doc { max-width: 680px; }
.modal-card-doc h2 { margin-bottom: 1.1rem; }
.doc-body { font-family: var(--font-body); color: var(--text-body); font-size: 0.9rem; line-height: 1.7; }
.doc-body p { margin: 0 0 1rem; text-align: justify; text-wrap: pretty; }
.doc-body h3 {
    font-family: var(--font-display); font-weight: 700; font-size: 0.82rem;
    letter-spacing: var(--tracking-heading); text-transform: uppercase; color: var(--ink);
    margin: 1.6rem 0 0.6rem;
}
.doc-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.doc-updated { font-size: 0.78rem; color: var(--text-faint); text-align: left !important; }
.footer-domain {
    font-family: var(--font-display); font-weight: 700; font-size: 0.66rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}

/* =======================================================================
   Modals (kept class-compatible with the existing auth/Stripe markup)
   ======================================================================= */
body.modal-open { overflow: hidden; }

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: fadeIn 0.18s var(--ease); }
/* Legal document modals (Terms / Privacy / Disclaimer) can be opened FROM the
   signup modal — lift them above it (and the cookie banner) so they're readable. */
#termsModal, #privacyModal, #disclaimerModal { z-index: 300; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(26,26,26,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.modal-card {
    position: relative; background: var(--paper); border-radius: 0; border: 2px solid var(--ink);
    width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto;
    padding: 2rem 1.9rem 1.9rem; box-shadow: var(--shadow-lg); animation: popIn 0.22s var(--ease);
}
.modal-close {
    position: absolute; top: 0.8rem; right: 0.8rem; width: 40px; height: 40px;
    background: transparent; border: 0; color: var(--text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.modal-close:hover { background: var(--gray-75); color: var(--ink); }

.modal-kicker {
    display: inline-block; background: var(--gray-75); color: var(--ink);
    font-family: var(--font-display); font-weight: 700; font-size: 0.68rem;
    letter-spacing: 0.18em; text-transform: uppercase; padding: 0.3rem 0.7rem; margin-bottom: 0.9rem;
}
.modal-card h2 {
    font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.45rem;
}
.modal-lede { font-family: var(--font-body); color: var(--text-muted); font-size: 0.95rem; margin-bottom: 1.3rem; }

.demo-form { display: flex; flex-direction: column; gap: 0.9rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
@media (max-width: 480px) { .field-row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field > span { font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.field > span i { color: var(--ink); font-style: normal; margin-left: 2px; }
.field > span small { color: var(--text-faint); font-weight: 400; }
.field input, .field textarea, .field select {
    font: inherit; font-family: var(--font-body); color: var(--ink); background: var(--paper);
    border: 1.5px solid var(--gray-300); border-radius: 0; padding: 0.65rem 0.8rem; width: 100%;
    transition: border-color 0.15s var(--ease); resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Native <select> restyled to match the text inputs: kill the OS chrome and
   draw our own chevron so it doesn't look like a stray Windows control. */
.field select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer; padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23333' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.9rem center;
}
.field select:invalid { color: var(--text-faint); }   /* dim the placeholder option */
.field select option { color: var(--ink); }
/* The browser's built-in [hidden] rule (display:none) loses to `.field`'s
   display:flex, so hidden .field blocks would still show — force it. */
.field[hidden], .demo-form [hidden] { display: none !important; }
.field-hint { color: var(--text-faint); font-family: var(--font-body); }

.modal-fineprint { font-family: var(--font-body); font-size: 0.78rem; color: var(--text-faint); margin-top: 0.3rem; text-align: center; }
.modal-fineprint code { background: var(--gray-75); padding: 0.08rem 0.35rem; font-size: 0.82rem; color: var(--ink); }

.modal-success { text-align: center; padding: 0.5rem 0; }
.success-check {
    width: 58px; height: 58px; border-radius: 0; background: var(--ink); color: var(--paper);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem;
}
.modal-success p { font-family: var(--font-body); color: var(--text-muted); margin-bottom: 1.3rem; }

/* ---------- Login modal ---------- */
.modal-card-login { max-width: 440px; }
.sso-buttons { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.8rem 0 1rem; }
.sso-btn {
    display: flex; align-items: center; gap: 0.7rem; width: 360px; max-width: 100%; margin: 0 auto;
    padding: 0.6rem 1.1rem; background: var(--paper); border: 1.5px solid var(--gray-300); border-radius: 0;
    font: inherit; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--ink);
    cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.sso-btn:hover { border-color: var(--ink); background: var(--gray-75); }
.sso-btn svg { flex-shrink: 0; }
.sso-btn span { flex: 1; text-align: center; }
.sso-google-wrap { display: flex; justify-content: center; min-height: 40px; }
.sso-google-wrap > div { max-width: 100%; }

.login-divider {
    display: flex; align-items: center; gap: 0.7rem; margin: 0.4rem 0 1rem;
    color: var(--text-faint); font-family: var(--font-display); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em;
}
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-150); }

.login-error {
    background: var(--gray-75); color: var(--ink); border: 1px solid var(--ink);
    border-radius: 0; padding: 0.55rem 0.8rem; font-family: var(--font-body); font-size: 0.86rem; margin: 0;
}
.login-success {
    margin: 0.5rem 0 0.75rem; padding: 0.55rem 0.75rem; background: var(--gray-75);
    border: 1px solid var(--gray-300); color: var(--ink); font-family: var(--font-body); font-size: 0.85rem;
}
.login-access-cta { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.login-access-cta .btn { flex: 1; }

.login-forgot { margin: 0.65rem 0 0; text-align: center; font-family: var(--font-body); font-size: 0.85rem; }
.login-forgot a { color: var(--ink); text-decoration: underline; font-weight: 700; }
.login-forgot a:hover { opacity: 0.7; }

.field-mfa input { text-align: center; font-size: 1.4rem; letter-spacing: 0.4em; padding-left: 0.4em; font-variant-numeric: tabular-nums; font-weight: 600; }

.link-back {
    background: none; border: 0; color: var(--ink); font: inherit; font-family: var(--font-display);
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
    padding: 0.35rem 0.5rem; margin: 0.3rem auto 0; display: block; text-align: center;
}
.link-back:hover { text-decoration: underline; }

button[aria-busy="true"], button[disabled] { opacity: 0.72; cursor: progress; }

.modal-body-redirecting {
    display: flex !important; flex-direction: column; align-items: center; text-align: center;
    gap: 1rem; padding: 0.6rem 0 0.4rem;
}
.modal-body-redirecting[hidden] { display: none !important; }
.auth-redirect-spinner {
    width: 44px; height: 44px; border: 3px solid var(--gray-150); border-top-color: var(--ink);
    border-radius: 50%; animation: ets-spin 0.85s linear infinite;
}
.auth-redirect-title { margin: 0; font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.auth-redirect-sub { margin: 0; font-family: var(--font-body); color: var(--text-faint); font-size: 0.85rem; }

/* =======================================================================
   Cookie consent banner
   ======================================================================= */
.cookie-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: var(--paper);
    border-top: 2px solid var(--ink);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.cookie-banner-text {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-body);
    max-width: 760px;
    margin: 0;
}
.cookie-banner-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
.cookie-banner-actions { display: flex; gap: 0.6rem; flex-shrink: 0; }
@media (max-width: 620px) {
    .cookie-banner-inner { padding: 0.9rem 1.25rem; gap: 0.9rem; }
    .cookie-banner-actions { width: 100%; }
    .cookie-banner-actions .btn { flex: 1; }
}

/* =======================================================================
   Animations
   ======================================================================= */
@keyframes ets-spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.unredact { position: relative; display: inline-block; overflow: hidden; }
[data-reveal] { transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out); }
[data-reveal].pre { opacity: 0; transform: translateY(18px); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-reveal], [data-reveal].pre { opacity: 1 !important; transform: none !important; }
}

/* =======================================================================
   Responsive
   ======================================================================= */
@media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .hero-media { max-width: 460px; }
    .compliance-grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .cap-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
    .cred-stats { grid-template-columns: 1fr; gap: 1.75rem; }
    .about-grid { grid-template-columns: 1fr; gap: 2rem; }
    .contact-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (max-width: 1100px) {
    .nav-toggle { display: flex; }
    .site-nav {
        position: absolute; top: 100%; left: 0; right: 0; background: var(--paper);
        flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem 1rem 1rem;
        border-bottom: 1px solid var(--gray-150); display: none;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 0.9rem 0.25rem; border-bottom: 1px solid var(--gray-150); }
    .site-nav .btn { margin-top: 0.8rem; }
}

@media (max-width: 560px) {
    .container { padding: 0 1.25rem; }
    .brand-sub { display: none; }
    .hero { padding: 3rem 0 0; }
    .section { padding: 3rem 0; }
    .cap-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: 1fr; }
    .trust-strip { grid-template-columns: 1fr; gap: 1.5rem; }
    .pricing-head { flex-direction: column; align-items: flex-start; }
    .site-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* =======================================================================
   Latest posts — LinkedIn embeds on a dark band (embeds themselves render
   white on linkedin.com and cannot be recolored; the ink surround + card
   chrome keeps the section on-brand).
   ======================================================================= */
.section-posts { background: var(--surface-inverse); overflow: hidden; }
.section-posts .section-kicker { color: var(--gray-500); }
.section-posts .section-title { color: var(--text-inverse); }
.posts-lede { color: var(--gray-500); }

/* Stage wraps the faded viewport plus the two nav arrows. The arrows are
   siblings of (not inside) the masked viewport, so the edge-fade never eats
   them. */
.posts-stage { position: relative; }
.posts-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff; cursor: pointer;
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.posts-nav:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; }
.posts-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.posts-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.posts-nav-prev { left: clamp(8px, 2.5vw, 30px); }
.posts-nav-next { right: clamp(8px, 2.5vw, 30px); }
@media (max-width: 640px) {
    .posts-nav { width: 40px; height: 40px; }
    .posts-nav svg { width: 18px; height: 18px; }
}

/* Viewport spans full width, but the row fades into the black well before the
   screen edges — the solid band is ~1040px centred (just inside the 1180px
   content column) so the cards dissolve into darkness roughly where the rest
   of the site's content ends. The fade width scales with the viewport via
   calc, falling back to a 56px minimum on narrow screens. */
.posts-viewport {
    margin-top: 2.25rem;
    --posts-fade: max(56px, calc((100% - 1040px) / 2));
    -webkit-mask-image: linear-gradient(90deg, transparent 0,
        #000 var(--posts-fade), #000 calc(100% - var(--posts-fade)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0,
        #000 var(--posts-fade), #000 calc(100% - var(--posts-fade)), transparent 100%);
}
.posts-row {
    display: flex; gap: 1.75rem;
    overflow-x: auto; padding: 0.5rem clamp(1rem, 5vw, 4rem) 0.5rem;
    scrollbar-width: none;                 /* Firefox: hide the row scrollbar */
    -webkit-overflow-scrolling: touch;
}
.posts-row::-webkit-scrollbar { display: none; }   /* WebKit: hide row scrollbar */

/* Each card clips its embed to a uniform height — kills the per-card inner
   scrollbar. The iframe keeps its natural (tall) height and is simply cropped;
   the ::after fade makes the crop read as intentional. */
.post-card {
    display: block; flex: 0 0 auto;
    width: 380px; height: 500px; position: relative; overflow: hidden;
    border-radius: 10px; background: #fff;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 12px 34px rgba(0,0,0,0.45);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.post-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,0.55); }
/* iframe keeps its natural (tall) attribute height so LinkedIn never draws its
   own scrollbar; the card crops it. pointer-events:none makes the whole card a
   single link and stops the embed hijacking scroll/hover. */
.post-card iframe { display: block; width: 100%; border: 0; pointer-events: none; }
.post-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px;
    background: linear-gradient(to top, #fff 12%, rgba(255,255,255,0));
    pointer-events: none;
}
.post-card::before {
    content: "View on LinkedIn →"; position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 1; padding: 0.85rem 1.1rem; font-family: var(--font-display);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink); opacity: 0; transition: opacity 0.25s var(--ease); pointer-events: none;
}
.post-card:hover::before { opacity: 1; }
@media (max-width: 640px) {
    .post-card { width: 84vw; height: 460px; }
}

/* ==================== FAQ section ====================
   Question-query SEO block above the contact section. <details> is used so the
   answers are in the DOM (and crawlable) whether or not they are expanded. */
.faq-list {
    max-width: 780px;
    margin: 0 auto;
    border-top: 1px solid var(--gray-150);
}
.faq-item {
    border-bottom: 1px solid var(--gray-150);
}
.faq-item > summary {
    cursor: pointer;
    list-style: none;
    padding: 1.15rem 2.2rem 1.15rem 0;
    position: relative;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.98rem;
    line-height: 1.45;
    color: var(--ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
    content: "";
    position: absolute;
    right: 0.4rem;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 1.5px solid var(--gray-500);
    border-bottom: 1.5px solid var(--gray-500);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
}
.faq-item[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq-item > summary:hover { color: var(--ink); }
.faq-item > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.faq-item > p {
    margin: 0 0 1.3rem;
    padding-right: 2.2rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--gray-700);
}
.faq-item > p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.faq-more {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    justify-content: center;
    max-width: 780px;
    margin: 2rem auto 0;
}
@media (max-width: 640px) {
    .faq-item > summary { font-size: 0.92rem; padding-right: 1.8rem; }
    .faq-more { gap: 1rem; }
}