/* ============================================
   SIGVERA LANDING PAGE
   World-Class Design System
   ============================================ */

/* --------------------------------------------
   Design Tokens
   -------------------------------------------- */
:root {
    /* Primary Colors - Deep Navy & Gold */
    --landing-navy: #0A1628;
    --landing-navy-light: #132238;
    --landing-navy-dark: #060d18;
    --landing-gold: #C9A962;
    --landing-gold-light: #E5D4A1;
    --landing-gold-dark: #A68B4B;

    /* Neutrals */
    --landing-white: #FFFFFF;
    --landing-off-white: #F8F9FA;
    --landing-gray-100: #F1F3F5;
    --landing-gray-200: #E9ECEF;
    --landing-gray-300: #DEE2E6;
    --landing-gray-400: #CED4DA;
    --landing-gray-500: #ADB5BD;
    --landing-gray-600: #6C757D;
    --landing-gray-700: #495057;
    --landing-gray-800: #343A40;
    --landing-gray-900: #212529;

    /* Semantic */
    --landing-success: #10B981;
    --landing-warning: #F59E0B;
    --landing-error: #EF4444;

    /* Typography */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --section-padding: clamp(4rem, 10vw, 8rem);
    --container-max: 1200px;
    --container-padding: clamp(1rem, 5vw, 2rem);

    /* Animation */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------
   Base Styles
   -------------------------------------------- */
.landing {
    font-family: var(--font-body);
    color: var(--landing-gray-800);
    line-height: 1.6;
    overflow-x: hidden;
}

.landing .container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

/* Wrapping. No block of text on the landing page or in the site footer should end in a short line of one word.
   Headings, labels and the short lines of copy are balanced: set in lines of like length. The property is
   inherited, so one rule covers the page and the footer. Browsers balance blocks of up to six lines (Firefox:
   ten), and none of these is longer. (The Problem section's paragraph is one of them since its copy was
   shortened: two lines on a desktop, five on a phone, six at 320px.)
   Running text (the paragraphs named below) can be longer, on phones above all, and it should fill its lines
   as body text does. It wraps the ordinary way, and its closing words are wrapped in a `keep` span in the
   markup, which holds them on one line: when you edit one of these paragraphs, move the span to its new last
   two or three words.
   Why it is done this way. `keep` is an inline block, not no-break spaces: where the words do not fit a line
   at all (text enlarged to 200% in a narrow card), an inline block takes the line's width and wraps inside
   like any text, where no-break spaces ran out of the card. It is not combined with balancing: Firefox
   balances the text before an inline block and then sets the block beside it, which left a two-line
   sentence with a short first line and a long second one. And `text-wrap: pretty`, which would need no
   markup, is missing in Firefox and left a word alone at the end of some card texts in Chromium.
   What is left: on the narrowest phones a heading or label can end in one long word where no two fit a line. */
.landing,
.landing-footer {
    text-wrap: balance;
}

.landing :is(.solution-text, .step-description, .feature-card-text, .security-text),
.landing .industry-content p {
    text-wrap: wrap;
}

.landing .keep {
    display: inline-block;
}

/* A heading with a place where it should break is written as lines (`title-line`), not with a <br>: Chromium
   does not balance a block that holds a forced break, and a part too long for its column then drops its last
   word onto a line of its own. As blocks, each part is balanced by itself. */
.title-line {
    display: block;
}

/* Typography Scale */
.landing h1, .landing h2, .landing h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
}

.section-eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--landing-gold);
    margin: 0 0 1rem 0;
}

.section-title {
    /* The 10vw cap bites only where the reader has enlarged the text on a narrow phone: there 2rem made one long
       word ("Cryptographic") wider than the screen, and its section was cut off at the right. */
    font-size: min(clamp(2rem, 5vw, 3.5rem), 10vw);
    color: var(--landing-navy);
    margin: 0 0 1rem 0;
    line-height: 1.15;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--landing-gray-600);
    max-width: 600px;
    margin: 0;
    line-height: 1.5;
}

/* Override app.css flex display for section headers */
.landing .section-header {
    display: block;
    text-align: center;
    margin-bottom: 4rem;
}

.landing .section-header .section-eyebrow {
    display: block;
    margin-bottom: 1rem;
}

.landing .section-header .section-title {
    display: block;
    margin-bottom: 1rem;
}

.landing .section-header .section-subtitle {
    display: block;
    margin: 0 auto;
}

/* Buttons */
.landing .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
}

.landing .btn-primary {
    background: var(--landing-gold);
    color: var(--landing-navy);
    border-color: var(--landing-gold);
}

.landing .btn-primary:hover {
    background: var(--landing-gold-dark);
    border-color: var(--landing-gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(201, 169, 98, 0.4);
}

.landing .btn-outline {
    background: transparent;
    color: var(--landing-navy);
    border-color: var(--landing-navy);
}

.landing .btn-outline:hover {
    background: var(--landing-navy);
    color: var(--landing-white);
    transform: translateY(-2px);
}

.landing .btn-ghost {
    background: rgba(255, 255, 255, 0.1);
    color: var(--landing-white);
    border-color: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
}

.landing .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.landing .btn-hero {
    padding: 1rem 2.5rem;
    font-size: 1rem;
}

.landing .btn-pricing {
    width: 100%;
    padding: 1rem 1.5rem;
}

/* --------------------------------------------
   Hero Section
   -------------------------------------------- */
.landing .hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh; /* what is visible on a phone while the browser chrome is showing */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0; /* the app-wide .hero rule adds 6rem; this hero sizes itself */
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* Dark behind the headline for contrast, clearing toward the bottom, where every shot of the clip keeps its subject. */
    background: linear-gradient(
        180deg,
        rgba(10, 22, 40, 0.92) 0%,
        rgba(10, 22, 40, 0.88) 45%,
        rgba(10, 22, 40, 0.62) 72%,
        rgba(10, 22, 40, 0.42) 100%
    );
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    /* Room below the content for the clip. Every shot of the montage keeps its subject in the lower part of the
       frame, from about 60% of its height down (tools/hero-video/montage.py, `frame`). The content block (about
       29.4rem tall) is centred, so its bottom edge sits at (height + 29.4rem - padding) / 2 and stays above 61.5%
       of the hero's height when the padding is at least 29.4rem - 23vh (the vh term is 100 x (2 x 0.615 - 1)). The
       cap keeps short landscape viewports (phones on their side) from growing a tall, empty hero. */
    --hero-content-height: 29.4rem;
    padding: 2rem 0 clamp(6rem, calc(var(--hero-content-height) - 23vh), 50vh);
}

.hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--landing-gold);
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.2s forwards;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 600;
    color: var(--landing-white);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.4s forwards;
}

.hero-highlight {
    color: var(--landing-gold);
    display: block;
}

/* One sentence under the headline, and the only one: a size up from body copy, medium weight, nearly white. */
.hero-subtitle {
    font-size: clamp(1.125rem, 2.8vw, 1.5rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    max-width: 37.5rem;
    margin: 0 auto 2.5rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.6s forwards;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 4rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.8s forwards;
}

.hero-app-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2.5rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.9s forwards;
}

.app-badge {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--transition-base);
    color: var(--landing-white);
    opacity: 0.9;
}

.app-badge:hover {
    transform: translateY(-2px);
    opacity: 1;
}

.app-badge:active {
    transform: translateY(0);
}

.app-badge svg {
    height: 40px;
    width: auto;
    display: block;
}

@media (max-width: 480px) {
    .hero-app-badges {
        flex-direction: column;
        align-items: center;
    }

    .app-badge svg {
        height: 36px;
    }
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 0 1px 6px rgba(10, 22, 40, 0.8);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0;
    animation: fadeIn 0.8s ease 1.5s forwards;
}

.scroll-arrow {
    width: 24px;
    height: 24px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scrollBounce {
    0%, 100% { transform: rotate(45deg) translateY(0); }
    50% { transform: rotate(45deg) translateY(8px); }
}

/* Portrait screens are narrower than the clip: covering the full hero with it would show only a sliver of each
   shot. There the clip becomes a band along the bottom instead, 150% of the viewport wide, so it is 85vw tall
   (the clip is 1440x816) and shows the middle two thirds of the frame, which is where every shot keeps its
   subject. The band's top edge dissolves into the hero's own background, and the content keeps clear of the
   subjects, which lie in the band's lower 36vw. */
@media (max-width: 56em) and (orientation: portrait) {
    .hero-media {
        background: var(--landing-navy);
    }

    .hero-video {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 150%;
        max-width: none;
        height: auto;
        transform: translateX(-50%);
        object-fit: fill;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 48%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 48%);
    }

    .hero-content {
        padding-bottom: 38vw;
    }
}

/* Landscape viewports up to 960px tall (most laptops): a little less air under the buttons so the headline
   block does not start too close to the top once the room for the clip is taken. */
@media (max-height: 60em) and (orientation: landscape) {
    .hero-cta {
        margin-bottom: 2.5rem;
    }
}

/* Landscape viewports up to 800px tall (small laptops, tablets on their side): a more compact headline block,
   measured at about 25.4rem, so the headline, the buttons and the clip's subjects still share one screen. */
@media (max-height: 50em) and (orientation: landscape) {
    .hero-content {
        --hero-content-height: 26.9rem;
        padding-top: 1rem;
    }

    .landing .hero-title { /* outranks the app-wide `.hero h1` margin */
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        margin-bottom: 1.5rem;
    }

    .hero-cta {
        margin-bottom: 2rem;
    }

    .hero-app-badges {
        margin-bottom: 1.5rem;
    }
}

/* Phones: a tighter vertical rhythm so the headline, the buttons and the clip share one screen. The scroll cue
   would sit on the clip's subjects there, so it goes. */
@media (max-width: 40em) and (orientation: portrait) {
    .hero-content {
        padding-top: 1.5rem;
    }

    .hero-eyebrow {
        margin-bottom: 1rem;
    }

    .landing .hero-title { /* outranks the app-wide `.hero h1` margin */
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        margin-bottom: 1.75rem;
    }

    .hero-cta {
        margin-bottom: 2rem;
    }

    .hero-app-badges {
        margin-bottom: 0;
    }

    .hero-scroll-indicator {
        display: none;
    }
}

/* --------------------------------------------
   Trust Bar
   -------------------------------------------- */
.trust-bar {
    background: var(--landing-off-white);
    padding: 2rem 0;
    border-bottom: 1px solid var(--landing-gray-200);
}

.trust-bar .container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.trust-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--landing-gray-500);
    margin: 0;
}

.trust-logos {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.trust-logo {
    height: 24px;
    width: auto;
    opacity: 0.5;
    filter: grayscale(100%);
    transition: all var(--transition-base);
}

.trust-logo:hover {
    opacity: 0.8;
    filter: grayscale(0%);
}

/* --------------------------------------------
   Problem Section
   -------------------------------------------- */
.problem-section {
    padding: var(--section-padding) 0;
    background: var(--landing-white);
}

.problem-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.problem-text {
    font-size: 1.125rem;
    color: var(--landing-gray-600);
    margin-bottom: 2.5rem;
}

/* The section's key statement, set apart in a bordered panel with the picture that goes with it. */
.problem-callout {
    max-width: 56rem;
    margin: 0 auto;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 4.5vw, 3.25rem);
    border: 1px solid rgba(201, 169, 98, 0.7);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(201, 169, 98, 0.14) 0%, rgba(201, 169, 98, 0.04) 100%);
    text-align: center;
}

/* One sentence in two sizes: what comes before its colon leads in, what comes after is the point. */
.problem-statement {
    margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
    font-family: var(--font-display);
    color: var(--landing-navy);
}

/* (The vw bounds on the two sizes only act when the reader's text is enlarged on a narrow screen: the underlined
   words stay on one line, and at twice the size they would be wider than the panel. The lead-in is bounded with
   them, so that it stays the smaller of the two.) */
.statement-lead {
    display: block;
    font-size: min(clamp(1.125rem, 2vw, 1.375rem), 5.6vw);
    font-weight: 500;
    line-height: 1.4;
    color: var(--landing-gray-700);
}

.statement-point {
    display: block;
    margin-top: 0.3em;
    font-size: min(clamp(1.75rem, 3.8vw, 2.75rem), 8.8vw);
    font-weight: 600;
    line-height: 1.15;
}

/* The point breaks only between its three phrases: "you use", "the same one", "every time." */
.statement-point span {
    white-space: nowrap;
}

.statement-mark {
    text-decoration: underline;
    text-decoration-color: var(--landing-gold);
    text-decoration-thickness: 0.09em;
    text-underline-offset: 0.16em;
}

/* The same signature: three pages of different documents, fanned, each signed with the one sample signature.
   A picture made of boxes: every measure inside it is in em, and its font size follows the viewport on narrow
   screens, so the pages keep their proportions at any width and at any text size. The pages overlap from left
   to right and the signature keeps to the left of its line, so no page hides another's signature. */
.same-signature {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75em 0 0.25em;
    font-size: min(1rem, 2.9vw);
}

.signed-sheet {
    position: relative;
    flex: 0 1 11em;
    min-width: 0;
    aspect-ratio: 8.5 / 11;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.625em;
    padding: 1em 0.9em 1.6em;
    background: var(--landing-white);
    border: 1px solid var(--landing-gray-200);
    border-radius: 0.375em;
    box-shadow: 0 0.625em 1.625em rgba(10, 22, 40, 0.1);
    text-align: left;
}

.signed-sheet:nth-child(1) {
    transform: rotate(-5deg) translateY(0.4em);
    z-index: 1;
}

.signed-sheet:nth-child(2) {
    margin: 0 -0.9em;
    transform: translateY(-0.5em);
    z-index: 2;
}

.signed-sheet:nth-child(3) {
    transform: rotate(5deg) translateY(0.4em);
    z-index: 3;
}

.sheet-title {
    font-size: 0.7em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--landing-gray-700);
}

/* The page's print: grey rules, a little different in width from page to page. */
.sheet-text {
    flex: 1;
    min-height: 0;
    width: 90%;
    background: repeating-linear-gradient(to bottom, var(--landing-gray-200) 0 0.25em, transparent 0.25em 0.75em);
}

.signed-sheet:nth-child(2) .sheet-text {
    width: 100%;
}

.signed-sheet:nth-child(3) .sheet-text {
    width: 84%;
}

/* The signature line, with the mark that shows where to sign. The signature's letters stand on the row at 65%
   of its height, so it is let down by the rest: they come to stand on the line. */
.sheet-line {
    display: block;
    position: relative;
    padding-left: 0.9em;
    border-bottom: 1px solid var(--landing-gray-400);
}

.sheet-line::before {
    content: "\00d7";
    position: absolute;
    left: 0;
    bottom: 0.05em;
    font-size: 0.75em;
    line-height: 1;
    color: var(--landing-gray-500);
}

.sheet-line img {
    display: block;
    width: 84%;
    height: auto;
    transform: translateY(35%);
}

/* --------------------------------------------
   Solution Section
   -------------------------------------------- */
.solution-section {
    padding: var(--section-padding) 0;
    background: var(--landing-navy);
    color: var(--landing-white);
}

.solution-section .section-title {
    color: var(--landing-white);
}

.solution-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .solution-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
    }
}

.solution-text {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.solution-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.solution-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
}

.solution-features .feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    background: var(--landing-gold);
    color: var(--landing-navy);
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
    margin-top: 0; /* Align with first line of text */
}

.solution-features li > span:last-child {
    padding-top: 2px; /* Optical alignment with icon center */
    line-height: 1.5;
    min-height: 24px; /* Match icon height for perfect alignment */
}

.solution-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.code-demo {
    background: linear-gradient(135deg, var(--landing-navy-light) 0%, rgba(201, 169, 98, 0.1) 100%);
    border: 1px solid rgba(201, 169, 98, 0.3);
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    width: 100%;
    max-width: 400px;
}

.code-demo-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--landing-gold);
    margin-bottom: 1rem;
}

.code-demo-value {
    font-family: 'SF Mono', 'Fira Code', monospace;
    /* Nine characters with their spacing have to fit the card on one line: at 3rem they filled its 19rem to within a
       pixel, and in the monospace faces of some systems the code broke in two at its hyphen. */
    font-size: clamp(1.75rem, 6vw, 2.75rem);
    font-weight: 600;
    color: var(--landing-white);
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.code-demo-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.6);
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--landing-success);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* --------------------------------------------
   How It Works
   -------------------------------------------- */
.how-it-works {
    padding: var(--section-padding) 0;
    background: var(--landing-off-white);
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 900px) {
    .steps-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}

.step {
    text-align: center;
}

.step-image-wrapper {
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--landing-gray-200);
}

.step-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.step:hover .step-image {
    transform: scale(1.05);
}

.step-number {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--landing-white);
    background: var(--landing-gold);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--landing-navy);
    margin-bottom: 0.75rem;
}

.step-description {
    font-size: 0.9375rem;
    color: var(--landing-gray-600);
    line-height: 1.6;
}

/* --------------------------------------------
   Features Section
   -------------------------------------------- */
.features-section {
    padding: var(--section-padding) 0;
    background: var(--landing-white);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1000px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

.feature-card {
    background: var(--landing-white);
    border: 1px solid var(--landing-gray-200);
    border-radius: 12px;
    padding: 2rem;
    transition: all var(--transition-base);
    position: relative;
}

.feature-card:hover {
    border-color: var(--landing-gold);
    box-shadow: 0 8px 30px rgba(10, 22, 40, 0.08);
    transform: translateY(-4px);
}

.feature-card.feature-highlight {
    grid-column: span 1;
    background: linear-gradient(135deg, var(--landing-navy) 0%, var(--landing-navy-light) 100%);
    border-color: transparent;
    color: var(--landing-white);
}

.feature-card.feature-highlight .feature-card-title {
    color: var(--landing-white);
}

.feature-card.feature-highlight .feature-card-text {
    color: rgba(255, 255, 255, 0.75);
}

.feature-card.feature-highlight .feature-card-icon {
    color: var(--landing-gold);
}

.feature-card-icon {
    width: 48px;
    height: 48px;
    color: var(--landing-navy);
    margin-bottom: 1.25rem;
}

.feature-card-icon svg {
    width: 100%;
    height: 100%;
}

.feature-card-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--landing-navy);
    margin-bottom: 0.75rem;
}

.feature-card-text {
    font-size: 0.9375rem;
    color: var(--landing-gray-600);
    line-height: 1.6;
    margin: 0;
}

.feature-card-badge {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.25rem 0.75rem;
    background: var(--landing-gold);
    color: var(--landing-navy);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 100px;
}

/* --------------------------------------------
   Industries Section
   -------------------------------------------- */
.industries-section {
    padding: var(--section-padding) 0;
    background: var(--landing-gray-100);
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 800px) {
    .industries-grid {
        grid-template-columns: 1fr;
    }
}

.industry-card {
    display: flex;
    background: var(--landing-white);
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--transition-base);
}

.industry-card:hover {
    box-shadow: 0 12px 40px rgba(10, 22, 40, 0.1);
    transform: translateY(-4px);
}

.industry-image {
    flex: 0 0 180px;
    background: var(--landing-gray-200);
}

.industry-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.industry-content {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.industry-content h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--landing-navy);
    margin-bottom: 0.5rem;
}

.industry-content p {
    font-size: 0.9375rem;
    color: var(--landing-gray-600);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 500px) {
    .industry-card {
        flex-direction: column;
    }

    .industry-image {
        flex: 0 0 160px;
    }
}

/* --------------------------------------------
   Testimonials Section
   -------------------------------------------- */
.testimonials-section {
    padding: var(--section-padding) 0;
    background: var(--landing-white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1000px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.testimonial-card {
    background: var(--landing-off-white);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.testimonial-card.testimonial-featured {
    background: var(--landing-navy);
    color: var(--landing-white);
}

.testimonial-quote {
    flex: 1;
    margin-bottom: 1.5rem;
}

.testimonial-quote p {
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

.testimonial-featured .testimonial-quote p {
    font-size: 1.25rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--landing-gray-300);
}

.testimonial-info {
    display: flex;
    flex-direction: column;
}

.testimonial-info strong {
    font-size: 0.9375rem;
    color: inherit;
}

.testimonial-info span {
    font-size: 0.8125rem;
    color: var(--landing-gray-500);
}

.testimonial-featured .testimonial-info span {
    color: rgba(255, 255, 255, 0.6);
}

.testimonial-location {
    font-size: 0.75rem !important;
    opacity: 0.7;
}

.testimonial-rating {
    margin-top: 1rem;
}

.testimonial-rating .stars {
    color: var(--landing-gold);
    font-size: 1rem;
    letter-spacing: 0.1em;
}

/* --------------------------------------------
   Security Section
   -------------------------------------------- */
.security-section {
    padding: var(--section-padding) 0;
    background: linear-gradient(180deg, var(--landing-off-white) 0%, var(--landing-white) 100%);
}

/* Override app.css grid layout for security-content */
.landing .security-content {
    display: block;
}

.security-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: center;
}

@media (max-width: 900px) {
    .security-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
    }
}

.security-text {
    font-size: 1.0625rem;
    color: var(--landing-gray-600);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.security-features {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.security-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.security-feature-icon {
    width: 40px;
    height: 40px;
    color: var(--landing-gold);
    flex-shrink: 0;
}

.security-feature-icon svg {
    width: 100%;
    height: 100%;
}

.security-feature-content {
    display: flex;
    flex-direction: column;
}

.security-feature-content strong {
    font-size: 0.9375rem;
    color: var(--landing-navy);
    margin-bottom: 0.125rem;
}

.security-feature-content span {
    font-size: 0.8125rem;
    color: var(--landing-gray-500);
}

.security-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.security-badge-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--landing-navy) 0%, var(--landing-navy-light) 100%);
    box-shadow: 0 20px 60px rgba(10, 22, 40, 0.2);
}

.security-badge-large svg {
    width: 100px;
    height: 100px;
    color: var(--landing-gold);
    margin-bottom: 1rem;
}

.security-badge-large span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* --------------------------------------------
   Pricing Section
   -------------------------------------------- */
.pricing-section {
    padding: var(--section-padding) 0;
    background: var(--landing-navy);
}

.pricing-section .section-eyebrow {
    color: var(--landing-gold);
}

.pricing-section .section-title {
    color: var(--landing-white);
}

.pricing-section .section-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: minmax(0, 1fr);      /* a bare 1fr cannot shrink below the card's longest word */
        max-width: 400px;
        margin: 0 auto;
    }
}

.pricing-card {
    background: var(--landing-white);
    border-radius: 12px;
    /* 2rem, held to a share of the screen's width where the text is enlarged on a narrow phone: there 2rem a side
       left the card's content less room than its longest word needs, and the card ran off the screen. */
    padding: min(2rem, 9vw);
    min-width: 0;
    position: relative;
    transition: all var(--transition-base);
}

.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.pricing-card.pricing-featured {
    background: linear-gradient(135deg, var(--landing-gold) 0%, var(--landing-gold-light) 100%);
    transform: scale(1.02);
    z-index: 1;
}

.pricing-card.pricing-featured:hover {
    transform: scale(1.02) translateY(-4px);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 1rem;
    background: var(--landing-navy);
    color: var(--landing-white);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 100px;
}

.pricing-header {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--landing-gray-200);
}

.pricing-featured .pricing-header {
    border-color: rgba(10, 22, 40, 0.1);
}

.pricing-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--landing-navy);
    margin-bottom: 0.5rem;
}

.pricing-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

/* The yearly price under the monthly one (only while a yearly plan is offered). */
.pricing-alt {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--landing-gray-700);
    margin: 0 0 0.5rem;
}

.pricing-featured .pricing-alt {
    color: rgba(10, 22, 40, 0.8);
}

.price-amount {
    font-family: var(--font-display);
    font-size: min(3rem, 14vw);      /* still grows with the reader's text size, but not past the card on a narrow phone */
    font-weight: 600;
    color: var(--landing-navy);
    line-height: 1;
}

.price-period {
    font-size: 0.875rem;
    color: var(--landing-gray-500);
}

.pricing-featured .price-period {
    color: rgba(10, 22, 40, 0.6);
}

.pricing-description {
    font-size: 0.875rem;
    color: var(--landing-gray-500);
    margin: 0;
}

.pricing-featured .pricing-description {
    color: rgba(10, 22, 40, 0.7);
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

/* Override app.css ::before checkmarks */
.pricing-features li::before {
    content: none !important;
    display: none !important;
}

/* The check mark hangs in the left padding and the rest of the line is ordinary text, so that it wraps. (As a flex
   row every part of a line was an item of its own: "Unlimited" and "ink codes" stood a gap apart and could not
   wrap, which made the card wider than a phone's screen once the text was enlarged.) */
.pricing-features li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.75rem;
    font-size: 0.9375rem;
    color: var(--landing-gray-700);
}

.pricing-features li .check {
    position: absolute;
    left: 0;
}

.pricing-featured .pricing-features li {
    color: var(--landing-navy);
}

.pricing-features .check {
    color: var(--landing-success);
    font-weight: 700;
}

.pricing-note {
    text-align: center;
    font-size: 0.75rem;
    color: var(--landing-gray-500);
    margin-top: 0.75rem;
}

.pricing-featured .pricing-note {
    color: rgba(10, 22, 40, 0.6);
}

.pricing-featured .btn-primary {
    background: var(--landing-navy);
    color: var(--landing-white);
    border-color: var(--landing-navy);
}

.pricing-featured .btn-primary:hover {
    background: var(--landing-navy-dark);
    border-color: var(--landing-navy-dark);
}

/* --------------------------------------------
   Final CTA
   -------------------------------------------- */
.final-cta {
    padding: var(--section-padding) 0;
    background: linear-gradient(135deg, var(--landing-gold) 0%, var(--landing-gold-light) 100%);
    text-align: center;
}

.cta-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    color: var(--landing-navy);
    margin-bottom: 1rem;
}

.cta-subtitle {
    font-size: 1.125rem;
    color: rgba(10, 22, 40, 0.75);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.cta-buttons {
    margin-bottom: 1.5rem;
}

.final-cta .btn-primary {
    background: var(--landing-navy);
    color: var(--landing-white);
    border-color: var(--landing-navy);
}

.final-cta .btn-primary:hover {
    background: var(--landing-navy-dark);
    border-color: var(--landing-navy-dark);
    box-shadow: 0 4px 12px rgba(10, 22, 40, 0.3);
}

.cta-assurance {
    font-size: 0.8125rem;
    color: rgba(10, 22, 40, 0.6);
    margin: 0;
}

/* --------------------------------------------
   Footer
   -------------------------------------------- */
.landing-footer {
    background: var(--landing-navy-dark);
    color: var(--landing-white);
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 2.5fr;
    gap: 4rem;
    margin-bottom: 3rem;
}

@media (max-width: 800px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

.footer-brand {
    max-width: 300px;
}

.footer-logo {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--landing-white);
    margin-bottom: 0.75rem;
}

.footer-tagline {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
}

.footer-social {
    display: flex;
    gap: 1rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--transition-base);
}

.footer-social a:hover {
    background: var(--landing-gold);
    color: var(--landing-navy);
}

.footer-social svg {
    width: 18px;
    height: 18px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* minmax(0, 1fr), not 1fr: a column may be narrower than its heading. With text enlarged to 200% on a 360px
   phone the letter-spaced headings are wider than half the row, and tracks that grew to hold them pushed the
   second column past the screen's edge (every public page scrolled sideways; the landing page clipped it). */
@media (max-width: 600px) {
    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Just above the width where the brand moves beside the links (tablets held upright, small windows), a quarter
   of the links' share is narrower than "Terms of Service": the two- and three-word links broke in two and ended
   in one word. There are three columns of links, so in that range the grid has three, not four with one empty. */
@media (min-width: 50.01em) and (max-width: 65em) {
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-column h4 {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 0.5rem;
}

.footer-column a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-column a:hover {
    color: var(--landing-gold);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

.footer-compliance {
    display: flex;
    gap: 1.5rem;
}

.footer-compliance span {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3);
}

/* --------------------------------------------
   Responsive Adjustments
   -------------------------------------------- */
@media (max-width: 480px) {
    .hero-cta {
        flex-direction: column;
        align-items: center;
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 280px;
    }
}

/* --------------------------------------------
   Smooth Scroll
   -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* --------------------------------------------
   Early Access Modal
   -------------------------------------------- */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 22, 40, 0.85);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--container-padding);
    animation: fadeIn 0.2s ease;
}

.modal-content {
    background: var(--landing-white);
    border-radius: 16px;
    padding: 2.5rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
    position: relative;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--landing-gray-100);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    color: var(--landing-gray-600);
}

.modal-close:hover {
    background: var(--landing-gray-200);
    color: var(--landing-navy);
}

.modal-close svg {
    width: 16px;
    height: 16px;
}

.modal-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--landing-gold) 0%, var(--landing-gold-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--landing-navy);
}

.modal-icon svg {
    width: 32px;
    height: 32px;
}

.modal-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--landing-navy);
    margin: 0 0 1rem;
}

.modal-text {
    font-size: 1rem;
    color: var(--landing-gray-600);
    line-height: 1.6;
    margin: 0 0 0.75rem;
}

.modal-text strong {
    color: var(--landing-navy);
}

.modal-cta {
    font-size: 0.9375rem;
    color: var(--landing-gray-700);
    margin: 0 0 1.5rem;
}

.modal-cta strong {
    color: var(--landing-gold-dark);
}

.modal-btn {
    width: 100%;
}

/* --------------------------------------------
   Print Styles
   -------------------------------------------- */
@media print {
    .landing {
        color: #000;
    }

    .hero, .final-cta {
        background: #fff !important;
        color: #000;
    }

    .hero-video, .hero-overlay {
        display: none;
    }

    .modal-overlay {
        display: none;
    }
}