/* ==========================================================================
   New Landing Page Styles
   Scoped to body.new-landing to avoid collisions with shared-styles.css
   ========================================================================== */

/* Licensed fonts: Manier (display serif) and Roobert (UI sans) */
@font-face {
    font-family: 'Manier';
    src: url('font/new-landing/manier/manier-medium-webfont.woff2') format('woff2'),
         url('font/new-landing/manier/manier-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('font/new-landing/roobert/Roobert-Light.woff2') format('woff2'),
         url('font/new-landing/roobert/Roobert-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('font/new-landing/roobert/Roobert-Regular.woff2') format('woff2'),
         url('font/new-landing/roobert/Roobert-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roobert';
    src: url('font/new-landing/roobert/Roobert-Medium.woff2') format('woff2'),
         url('font/new-landing/roobert/Roobert-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Roobert variable font — allows any weight between 100 and 900 */
@font-face {
    font-family: 'Roobert VF';
    src: url('font/new-landing/roobert/RoobertVF.woff2') format('woff2-variations'),
         url('font/new-landing/roobert/RoobertVF.woff') format('woff-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Roobert Mono — used for header tabs (LOGIN / CONTACT / etc.) and coordinates */
@font-face {
    font-family: 'Roobert Mono';
    src: url('font/new-landing/roobert-mono/RoobertMono-Light.woff2') format('woff2'),
         url('font/new-landing/roobert-mono/RoobertMono-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

body.new-landing {
    --nl-bg: #E8E4DB;
    --nl-ink: #222049;
    --nl-black: #000000;
    --nl-rule: #222049;
    --nl-highlight: #B8D9D5;
    --nl-input-border: #222049;
    --nl-muted: rgba(0, 0, 0, 0.3);
    /* Masthead height = 5/8 fine cell with a 56 px floor. ~16 % shorter
       than the previous 3/4 fine cell at wide viewports (1440 86 → 72,
       1920 116 → 97); floored at 56 so narrow viewports still fit the
       tagline + login pill content. Two rows split 50/50 via
       grid-template-rows: 1fr 1fr → divider sits at exactly 50 %.
       round() forces an integer pixel — without it, 5/8 × fine produces
       fractional values (e.g. fine=90 → 56.25 px) that browsers rasterise
       inconsistently versus the grid background-position, leaving the
       masthead's bottom border 1 px off the grid pattern. */
    --nl-masthead-h: max(round(calc(var(--nl-grid-fine) * 5 / 8), 1px), 56px);
    /* Footer height = ¼ fine cell + 1 px border-top. Snaps to the
       quarter-cell grid. At 1024 ~21 px, 1440 ~29 px, 1920 ~39 px.
       round() on the cell fraction keeps the integer-pixel guarantee. */
    --nl-footer-h: calc(round(var(--nl-grid-fine) / 4, 1px) + 1px);
    /* Grid contract — every desktop padding/gap/max-width on this page is a multiple of these
       so the layout's spatial rhythm matches the SVG background grid. */
    /* Grid pitch scales with viewport so the masthead can span 100% width AND
       still have every cell boundary snap to a grid line. round(down, …, 1px)
       forces the fine cell to an integer pixel — without this, fractional vw
       math at viewports like 1024 / 1366 / 1280 leaves SVG tile-rounding and
       grid track-rounding 1-2 px out of sync. Floor (not nearest) guarantees
       12 × fine ≤ viewport-60 so the tracks never overflow. */
    --nl-grid-fine: round(down, (100vw - 60px) / 12, 1px); /* one fine cell = 1/4 of a major */
    --nl-grid-major: calc(var(--nl-grid-fine) * 4);    /* one major cell = 4 fine */
    --nl-indent: var(--nl-grid-fine);                  /* one fine cell of indent */
    /* Total grid-content width = 12 fine cells. Because fine is rounded DOWN,
       12 × fine ≤ viewport - 60, leaving 0-11 px of slack on the right.
       Masthead and footer clamp to this width so their right edges (and any
       right-anchored cell dividers) land exactly on the rightmost grid line.
       Without this, a right-anchored cell divider can sit 1-11 px off the
       grid at viewports like 1366 / 1441 / 1600. */
    --nl-grid-w: calc(var(--nl-grid-fine) * 12);
    /* Vertical rhythm scales with viewport HEIGHT (not width) so a wide-but-short
       viewport doesn't push content below the fold. var(--nl-grid-fine) gives
       155 px gaps at 1920 wide — huge — and there's no relationship between
       viewport width and what fits vertically. 4vh capped at 48 gives 31 px at
       768 vh, 43 at 1080, 48 above 1200, with a 28 px floor for short windows. */
    --nl-vspace: clamp(28px, 4vh, 48px);

    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--nl-bg);
    color: var(--nl-black);
    font-family: 'Roobert VF', 'Roobert', 'Inter', system-ui, sans-serif;
    position: relative;
    overflow-x: hidden;
}

body.new-landing * {
    box-sizing: border-box;
}

body.new-landing .nl-root {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Top + bottom page borders only — left/right removed per design
       feedback. Top + bottom horizontals frame the page; the masthead's
       and footer's own borders provide the internal divisions. */
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    background-color: #E8E4DB;
    overflow: hidden;
}

/* Full-height vertical rule on the left — runs from very top (through the
   masthead) all the way down through main and footer. Positioned 60px from
   the root's left edge. All content renders to the right of it (except the
   vector marker which sits ON the rule, horizontally centered on it). */
body.new-landing .nl-root::after {
    content: '';
    position: absolute;
    left: 60px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--nl-ink);
    z-index: 1;
    pointer-events: none;
}

/* Grid image — covers the whole root, but the mask fades it OUTSIDE main:
   transparent at the page's top/left edges, fully opaque at the masthead
   bottom (--nl-masthead-h) and the root rule (60px). Inside main the grid
   is at full strength, with major lines landing exactly on those two
   borders because background-position pins the tile origin to them. */
body.new-landing .nl-root::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('./img/new-landing/background-grid.svg');
    /* Shift the grid one fine cell to the right of the rule so the leftmost
       MAJOR line lands at x = 60 + fine (a fine line still coincides with
       the rule itself). */
    background-position: calc(60px + var(--nl-grid-fine)) var(--nl-masthead-h);
    background-size: var(--nl-grid-major) var(--nl-grid-major);
    background-repeat: repeat;
    mix-blend-mode: multiply;
    opacity: 0.14;
    -webkit-mask-image:
        linear-gradient(to bottom,
            transparent 0,
            #000 var(--nl-masthead-h),
            #000 calc(100% - var(--nl-footer-h)),
            transparent 100%),
        linear-gradient(to right,  transparent 0, #000 calc(60px + var(--nl-grid-fine)));
    mask-image:
        linear-gradient(to bottom,
            transparent 0,
            #000 var(--nl-masthead-h),
            #000 calc(100% - var(--nl-footer-h)),
            transparent 100%),
        linear-gradient(to right,  transparent 0, #000 calc(60px + var(--nl-grid-fine)));
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

/* ==========================================================================
   Wave / dotted background illustration on right side
   ========================================================================== */
body.new-landing .nl-wave {
    position: absolute;
    /* Positioned to match the reference mockup: the wave sits in the
       right-center of the main content area, its vertical midpoint aligned
       roughly with the viewport center, bleeding off the right edge.
       aspect-ratio is fixed at 64/33 per design spec. */
    top: 18%;
    right: -3%;
    width: 78%;
    aspect-ratio: 64 / 33;
    pointer-events: none;
    z-index: 1;
    background: url('./img/new-landing/background-pattern.svg') 50% 50% / cover no-repeat;
    /* The new SVG renders white dots over soft colored blobs — direct render
       (no mix-blend-mode) so dots stay white against the cream page. */
    opacity: 0.85;
    /* Radial mask so the wave fades out toward all edges — no hard
       rectangular "box" around the pattern. Tightened so the mask
       reaches transparent BEFORE the div edges (esp. left), avoiding
       the visible cliff that 80%-radius produced at the left boundary. */
    -webkit-mask-image: radial-gradient(ellipse 58% 85% at 60% 50%, #000 5%, rgba(0,0,0,0.9) 30%, transparent 78%);
    mask-image: radial-gradient(ellipse 58% 85% at 60% 50%, #000 5%, rgba(0,0,0,0.9) 30%, transparent 78%);
}

/* The wave SVG uses SMIL <animate> for its dot-drift animation, but SMIL
   doesn't observe prefers-reduced-motion from the host page. Dim the wave
   for users who've opted out of motion so the visual impact is subdued. */
@media (prefers-reduced-motion: reduce) {
    body.new-landing .nl-wave {
        opacity: 0.4;
    }
}

/* ==========================================================================
   Linear-style floating top menu — translucent glass-blur pill, centered,
   margins around it, floats over content. Hero gets top padding to push
   first content below the floating bar.
   ========================================================================== */
body.new-landing .nl-masthead.nl-yc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* Float-positioning. fixed (not sticky) so it stays put through scroll
       like Linear's. Centered horizontally via left+translateX. */
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 24px);
    /* Compact floating pill — tightened from 1080→580 to match the
       Framer-style menu (a small floating pill, not a wide bar). */
    max-width: 580px;
    height: 52px;
    margin: 0;
    padding: 0 6px 0 14px;
    /* Translucent cream (#E8E4DB at 88%) + backdrop blur = the Linear glass
       effect, tinted to the page palette. */
    background: rgba(232, 228, 219, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(26, 26, 46, 0.14);
    /* Slight rounded rectangle — matches the original floating-bar shape
       (the full pill at 999px read as too round at this compact size). */
    border-radius: 4px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 12px 32px rgba(26, 26, 46, 0.10),
        0 2px 8px rgba(26, 26, 46, 0.06);
    z-index: 100;
    /* Reset legacy .nl-masthead grid so it doesn't fight us. */
    grid-template-columns: none;
    grid-template-rows: none;
    grid-template-areas: none;
}
@media (min-width: 901px) {
    body.new-landing .nl-masthead.nl-yc {
        top: 16px;
        height: 48px;
        padding: 0 6px 0 14px;
    }
}

/* Push the page content down so the hero / first section isn't hidden
   under the floating bar. 52px bar + 12px top + 12px breathing = 76px. */
body.new-landing .nl-root {
    padding-top: 76px;
}
@media (min-width: 901px) {
    body.new-landing .nl-root {
        padding-top: 84px;
    }
}

body.new-landing .nl-yc-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}
body.new-landing .nl-yc-mark {
    /* The Ahoy SVG is a full lockup (mark + wordmark, 193×72 viewBox).
       Size by width and let height resolve from aspect. */
    width: clamp(61px, 5.4vw, 83px);
    height: auto;
    display: block;
}

/* Linear-style nav uses a proportional sans (Inter-equivalent). We use
   Roobert, the brand sans already loaded. Mono (Roobert Mono) fought the
   airy floating-pill feel. */
/* Inline desktop nav (lives inside .nl-yc-actions). The mobile dropdown
   nav is a separate sibling element — see .nl-yc-nav--dropdown rules
   in the mobile @media block below. */
body.new-landing .nl-yc-nav--inline {
    display: flex;
    align-items: center;
    gap: 4px;
}
body.new-landing .nl-yc-nav--dropdown {
    /* Hidden by default on every viewport. Mobile @media reveals it
       (via .is-open). The element exists in the DOM as a sibling of
       <header> so its `position: fixed` anchors to the viewport, not
       the masthead's transform-induced containing block. */
    display: none;
}
body.new-landing .nl-yc-nav a {
    color: rgba(26, 26, 46, 0.72);
    text-decoration: none;
    font-family: 'Roobert', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.05px;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 6px 12px;
    border-radius: 6px;
}
body.new-landing .nl-yc-nav a:hover {
    color: #1a1a2e;
    background: rgba(26, 26, 46, 0.04);
}

/* Ghost-pill login — light, sits inside the glass bar without competing
   with it. Border + tinted bg, dark text. Hover deepens both subtly. */
body.new-landing .nl-yc-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 14px;
    border: 1px solid rgba(26, 26, 46, 0.12);
    border-radius: 4px;
    background: rgba(26, 26, 46, 0.04);
    color: #1a1a2e;
    text-decoration: none;
    font-family: 'Roobert', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.05px;
    flex: 0 0 auto;
    transition: background 0.15s ease, border-color 0.15s ease;
}
body.new-landing .nl-yc-login:hover {
    background: rgba(26, 26, 46, 0.08);
    border-color: rgba(26, 26, 46, 0.2);
}
body.new-landing .nl-yc-login__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1px solid rgba(26, 26, 46, 0.18);
    border-radius: 3px;
    font-family: inherit;
    font-size: 10px;
    line-height: 1;
    opacity: 0.65;
    background: rgba(26, 26, 46, 0.04);
    color: inherit;
}

/* ─── Right-side actions group (nav + hamburger + login pill) ───────────
   Holds the nav links, the hamburger toggle (mobile-only), and the
   login pill — all clustered on the right of the masthead. */
body.new-landing .nl-yc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Hamburger menu toggle (mobile only) ─────────────────────────────── */
body.new-landing .nl-yc-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 36px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(26, 26, 46, 0.16);
    border-radius: 4px;
    cursor: pointer;
    color: var(--nl-ink);
    -webkit-appearance: none;
    appearance: none;
}
body.new-landing .nl-yc-menu-toggle:focus-visible {
    outline: 2px solid var(--nl-ink);
    outline-offset: 2px;
}
body.new-landing .nl-yc-menu-toggle__bar {
    display: block;
    width: 16px;
    height: 1.5px;
    background: var(--nl-ink);
    border-radius: 1px;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
/* Open state: collapse the two bars into an X. */
body.new-landing .nl-yc-menu-toggle[aria-expanded="true"] .nl-yc-menu-toggle__bar:first-child {
    transform: translateY(2.75px) rotate(45deg);
}
body.new-landing .nl-yc-menu-toggle[aria-expanded="true"] .nl-yc-menu-toggle__bar:last-child {
    transform: translateY(-2.75px) rotate(-45deg);
}

@media (max-width: 700px) {
    body.new-landing .nl-yc-menu-toggle { display: flex; }
    body.new-landing .nl-yc-login { padding: 6px 10px; font-size: 12px; }
    body.new-landing .nl-yc-login__kbd { display: none; }

    /* Inline desktop nav hides on mobile. */
    body.new-landing .nl-yc-nav--inline { display: none; }

    /* Dropdown nav (sibling of <header>, not a descendant). `position:
       fixed` here anchors to the viewport — no masthead-transform
       containing-block trap. Hidden by default; `.is-open` reveals it. */
    body.new-landing .nl-yc-nav--dropdown {
        display: none;
        position: fixed;
        top: 74px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        min-width: 200px;
        padding: 8px 0;
        /* Solid white so it lifts off the cream page bg (the previous
           cream rgba was invisible because cream-on-cream). */
        background: #FFFFFF;
        border: 1px solid rgba(26, 26, 46, 0.32);
        border-radius: 12px;
        box-shadow:
            0 4px 12px rgba(26, 26, 46, 0.10),
            0 16px 40px rgba(26, 26, 46, 0.24);
        z-index: 200;
    }
    body.new-landing .nl-yc-nav--dropdown.is-open { display: flex !important; }
    body.new-landing .nl-yc-nav a {
        padding: 12px 18px;
        font-size: 14px;
        text-align: left;
        border-radius: 0;
        font-family: 'Roobert', 'Inter', system-ui, -apple-system, sans-serif;
        font-weight: 400;
        color: var(--nl-ink);
        text-decoration: none;
    }
    body.new-landing .nl-yc-nav a:hover,
    body.new-landing .nl-yc-nav a:focus-visible {
        background: rgba(26, 26, 46, 0.06);
    }
}

/* ==========================================================================
   Masthead — 3-col grid: [logo | middle | compass]    [LEGACY — INERT]
   No longer rendered by nl-header.ejs. Kept temporarily to avoid breaking
   any leftover references; remove on next cleanup pass.
   ========================================================================== */
body.new-landing .nl-masthead {
    position: relative;
    z-index: 3;
    display: grid;
    /* Every track is an exact multiple of the integer-rounded fine cell so
       boundaries match the SVG grid pixel-for-pixel. Three tracks at 2 + 9 + 1
       fine cells = 12 fine cells total, matching the masthead's clamped
       width (--nl-grid-w). Compass-left lands on grid line 11; compass-right
       lands on grid line 12 (the rightmost line). Any 0-11 px of viewport
       slack sits OUTSIDE the masthead, not inside any cell. */
    grid-template-columns: calc(2 * var(--nl-grid-fine)) calc(9 * var(--nl-grid-fine)) var(--nl-grid-fine);
    grid-template-rows: 1fr 1fr;
    height: var(--nl-masthead-h);
    width: var(--nl-grid-w);
    grid-template-areas:
        "logo top     compass"
        "logo nav     compass";
    border-bottom: 1px solid var(--nl-rule);
    background: transparent;
    /* Offset so the masthead (and its border-bottom) sits entirely to the
       right of the 60px vertical rule — nothing renders in the 60px-wide
       clean strip on the left of the root except background color. */
    margin-left: 60px;
}

body.new-landing .nl-mh-logo { grid-area: logo; }
body.new-landing .nl-mh-top { grid-area: top; }
body.new-landing .nl-mh-nav { grid-area: nav; }
body.new-landing .nl-mh-compass { grid-area: compass; }

body.new-landing .nl-mh-logo {
    display: flex;
    align-items: center;
    justify-content: center;  /* center horizontally in the cell */
    padding: 14px 32px;
    border-right: 1px solid var(--nl-rule);
    /* min-width removed — grid track is fixed at 300px so the cell width
       no longer depends on this. */
}

body.new-landing .nl-mh-logo > a {
    display: flex;
    align-items: center;
    justify-content: center;
}

body.new-landing .nl-logo {
    display: block;
    /* Fluid: at 901 viewport ~63 px; at 1440 ~100 px; capped at 140. ~22%
       smaller than the previous clamp(60, 9vw, 180) — masthead grid track
       widths are independent of the logo so layout is unaffected. */
    width: clamp(50px, 7vw, 140px);
    height: auto;
}

body.new-landing .nl-mh-compass {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border-left: 1px solid var(--nl-rule);
}

body.new-landing .nl-compass {
    /* Legacy compass image. Replaced by .nl-water for the new-landing-page,
       still used by older pages (404, terms, etc.) until ASCII water rolls out
       site-wide. */
    width: clamp(36px, 4vw, 72px);
    height: clamp(36px, 4vw, 72px);
    display: block;
}

/* Animated ASCII water — sits in the masthead's compass slot. The <pre>
   keeps its newlines so block characters stack into a 3-row wave surface.
   Sized at the same scale as the previous compass icon. JS in nl-header.ejs
   drives the per-frame text content. */
body.new-landing .nl-water {
    margin: 0;
    padding: 0;
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-weight: 300;
    /* Tight line-height so the 3 rows visually fuse into one rippling band. */
    line-height: 0.85;
    /* Letter-spacing 0 + stretching block chars edge-to-edge means columns
       butt cleanly with no gap between them. */
    letter-spacing: 0;
    color: var(--nl-launch-ink, #222049);
    /* The animation is decorative — keep it quiet so it doesn't compete with
       the headline / hero content. */
    opacity: 0.9;
    /* Fluid font-size matches the compass cell width (12 chars × ~0.55ch). */
    font-size: clamp(8px, 1vw, 13px);
    user-select: none;
    -webkit-user-select: none;
    /* Center the text block in the cell. */
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: pre;
    text-align: center;
}

/* Top row: tagline | coords */
body.new-landing .nl-mh-top {
    display: grid;
    grid-template-columns: 1fr auto;
    border-bottom: 1px solid var(--nl-rule);
}

body.new-landing .nl-mh-tagline {
    display: flex;
    align-items: center;
    gap: 24px;
    /* Right padding is zero: the rule-line runs to the cell boundary.
       The coords cell's left padding (24px) produces the matching right gap
       so the rule-line ends up centered between "CRM" and "53.3498". */
    /* No vertical padding — the masthead sets row height to half a fine
       cell (via grid-template-rows: 1fr 1fr) and flex-centers content. */
    padding: 0 0 0 32px;
    /* No vertical divider between tagline and coordinates — per design */
    /* nowrap + overflow hidden prevents the tagline from wrapping at
       intermediate viewports (900–1200) where the cell narrows. Below 900
       the mobile media query takes over with a smaller font. */
    white-space: nowrap;
    overflow: hidden;
    /* Shared tab typography at 14 px so content fits comfortably even at
       narrow viewports (1024 → row ~40 px). */
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: #000;
}

body.new-landing .nl-mh-tagline .nl-rule-line {
    flex: 1;
    height: 1px;
    background: var(--nl-rule);
    /* min-width: 0 lets the rule-line collapse fully at narrow viewports
       so the tagline text gets first claim on space (was 60 px which
       pushed text out at narrow widths). */
    min-width: 0;
}

body.new-landing .nl-mh-coords {
    display: flex;
    align-items: center;
    /* Left padding of 24px creates the gap between the rule-line (ending at
       the tagline cell boundary) and the coords text — symmetrical with
       the 24px flex gap on the left side of the rule-line. */
    /* No vertical padding — masthead row height handles vertical layout. */
    padding: 0 32px 0 24px;
    white-space: nowrap;
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    color: #000;
}

/* Bottom row: (empty space) | LOGIN — fr-based, 7/2 = 9 fr, matching the
   parent middle column's 9 fr. The boundary (empty→Login at +7 fine cells)
   still snaps to a grid line at every viewport. */
body.new-landing .nl-mh-nav {
    display: grid;
    grid-template-columns: 7fr 2fr;
    align-items: stretch;
}

body.new-landing .nl-mh-nav .nl-nav-cell {
    /* Login pinned to the right column. */
    grid-column: 2;
    grid-row: 1;
}

body.new-landing .nl-nav-cell {
    /* Left padding = 1 fine cell + right padding = 2 px ensures the pill's
       content area is fine cell 9 (the rightmost grid cell, closest to the
       compass) with a guaranteed 2 px gap to the compass divider. Pill
       centers within that 1-cell area via justify-content: center. */
    padding: 0 2px 0 var(--nl-grid-fine);
    display: flex;
    align-items: center;
    justify-content: center;
    /* No border-right: compass's border-left already provides the right
       boundary, and a border-right here would render as a 2 px composite
       line at the nav↔compass seam. */
    white-space: nowrap;
    /* Per design spec: Roobert Mono, 18px, weight 300, letter-spacing 3.6px */
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    color: #000;
}

body.new-landing .nl-mh-nav .nl-nav-cell:last-child {
    border-right: none;
}

body.new-landing .nl-nav-cell a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    transition: opacity 0.2s ease;
}

body.new-landing .nl-nav-cell a:hover {
    opacity: 0.7;
}

/* Login pill — the masthead's secondary CTA. Sits as a sibling design
   to the form's primary submit button:
       form submit:  60 px filled-dark, 4 px radius, full ink colour
       login pill:   36 px outlined,    4 px radius, teal-tint fill
   Same design family (4 px radius, same teal tint base), different scale
   and weight — eye reads them as primary vs secondary at a glance. */
body.new-landing .nl-mh-nav .nl-login-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Refined small fully-rounded pill. 26 px tall fits comfortably in
       the new tighter 5/8-fine-cell masthead row at 1024 vw (row ≈ 28 px).
       Padding tightened to 12 px so the pill fits in 1 fine cell width. */
    height: 26px;
    padding: 0 12px;
    border: 1px solid rgba(34, 32, 73, 0.3);
    border-radius: 999px;
    background: transparent;
    /* Override .nl-mh-nav a's underline-gradient + opacity-on-hover */
    background-image: none;
    padding-bottom: 0;
    color: var(--nl-ink);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.5px;
    line-height: 1;
    text-decoration: none;
    text-transform: none;     /* sentence case "Log in" — friendlier than caps */
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
body.new-landing .nl-mh-nav .nl-login-pill:hover {
    background: var(--nl-ink);
    border-color: var(--nl-ink);
    color: var(--nl-bg);
    opacity: 1;             /* override .nl-nav-cell a:hover opacity 0.7 */
}
body.new-landing .nl-mh-nav .nl-login-pill__icon {
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* Keyboard-shortcut chip inside the Login pill. Press "L" anywhere on the
   page to navigate — handler in nl-header.ejs. Tightened: smaller chip
   (14×14), no margin-left, padding 3 px, no border (just bg) — keeps the
   pill compact enough to fit in 1 fine cell at typical viewports. */
body.new-landing .nl-mh-nav .nl-login-pill__kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    background: rgba(34, 32, 73, 0.12);
    border-radius: 2px;
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    color: var(--nl-ink);
    transition: background 0.18s ease, color 0.18s ease;
}
/* On pill hover (ink fill), invert the kbd chip so it stays readable */
body.new-landing .nl-mh-nav .nl-login-pill:hover .nl-login-pill__kbd {
    background: rgba(232, 228, 219, 0.22);
    color: var(--nl-bg);
}
body.new-landing .nl-mh-nav .nl-login-pill:hover .nl-login-pill__icon {
    transform: translate(2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
    body.new-landing .nl-mh-nav .nl-login-pill,
    body.new-landing .nl-mh-nav .nl-login-pill__icon {
        transition: none;
    }
    body.new-landing .nl-mh-nav .nl-login-pill:hover .nl-login-pill__icon {
        transform: none;
    }
}

/* ==========================================================================
   Main content area
   ========================================================================== */
body.new-landing .nl-main {
    position: relative;
    z-index: 3;
    flex: 1;
    /* Sits entirely to the right of the 60px root rule */
    margin-left: 60px;
    /* min-height removed (was round(up, …, var(--nl-grid-major)) for footer-top
       grid-snap). With flex:1 main fills exactly (100vh - masthead - footer),
       so the page = viewport at standard heights and there's no scroll-ahead
       of empty space below the form. The trade-off is footer-top no longer
       lands on a major grid line — design prioritizes form position. */
    /* Horizontal padding-right uses width-based grid (2 fine cells), but vertical
       padding and gap use --nl-vspace (vh-based) so spacing scales with viewport
       height — narrow vertical viewports get tighter spacing, taller ones more. */
    padding: var(--nl-vspace) calc(2 * var(--nl-grid-fine)) var(--nl-vspace) 0;
    display: flex;
    flex-direction: column;
    /* Center content vertically: with content + spacing < main height, the
       slack splits evenly above + below the children. Form sits ~75% down
       the viewport instead of pinned to the top of empty space. */
    justify-content: center;
    gap: var(--nl-vspace);
    /* No max-width — main spans full (viewport - 60) to match the 100%-width masthead. */
}

/* Hero wrapper — groups hiring banner + headline into a single visual unit.
   On desktop it's transparent (display: contents) so .nl-main keeps its
   original 4 flex children and existing spacing rules apply unchanged.
   The mobile breakpoint flips it to display: block so .nl-main has 3 flex
   children (hero, CRM box, form) for space-between distribution. */
body.new-landing .nl-hero {
    display: contents;
}

/* Hiring banner row — sits tight against the headline below */
body.new-landing .nl-hiring-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: var(--nl-indent);
    /* Pull the headline up close — override the larger main gap for this
       specific pairing (hiring banner + headline form a visual unit). */
    margin-bottom: calc(-1 * var(--nl-vspace) + 16px);
}

body.new-landing .nl-hiring-arrow {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: auto;
    opacity: 0;
    /* We'll show the hiring arrow on a later row per design — hide here */
}

body.new-landing .nl-hiring-banner {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    /* Per design spec: Roobert VF, 18px, weight 300, letter-spacing 3.6px */
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    color: #15133F;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

body.new-landing .nl-hiring-banner:hover {
    opacity: 0.75;
    text-decoration: none;
    color: #15133F;
}

body.new-landing .nl-star {
    width: 14px;
    height: 14px;
    display: inline-block;
    flex-shrink: 0;
    /* Shift the visual star left by half its width so its CENTER (not its
       left edge) sits exactly on the leftmost fine grid line at x = 60 + fine.
       position:relative + left keeps the layout untouched — only the star
       moves visually; the label text + gap that follows stays put. */
    position: relative;
    left: -7px;
}

body.new-landing .nl-arrow-inline {
    margin-left: 4px;
}

/* ==========================================================================
   Display heading — Guided by Intelligence. Built for Motion
   ========================================================================== */
body.new-landing .nl-headline-wrap {
    position: relative;
    padding-left: var(--nl-indent);
}

body.new-landing .nl-headline-marker {
    position: absolute;
    /* Pull the marker 26px left of the headline-wrap's edge (which sits at
       x=60, aligned with the root rule) so the 52px-wide vector is
       horizontally centered on the rule — half on each side. */
    left: -26px;
    /* Vertically center the marker on the G's center in the first headline line.
       font-size: same clamp() as .nl-headline so the em below resolves to the
       headline's actual font-size. With line-height 1.15 and cap-height ≈ 0.7em,
       the cap's vertical center sits at (1.15-0.7)/2 + 0.7/2 = 0.575em from the
       line-box top. translateY(-50%) then puts the marker's CENTER on that y. */
    font-size: clamp(40px, 5.2vw, 72px);
    top: 0.575em;
    transform: translateY(-50%);
    width: 52px;
    height: auto;
    z-index: 2;         /* above the root rule so the arrow overlays it */
}

body.new-landing .nl-headline {
    font-family: 'Manier', 'Fraunces', Georgia, serif;
    /* Fluid sizing: ~44px at ~900px viewport → ~72px at ~1500px+ */
    font-size: clamp(40px, 5.2vw, 72px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -1.2px;
    color: var(--nl-ink);
    margin: 0;
    max-width: calc(8 * var(--nl-grid-fine));    /* 8 fine cells */
}

/* Highlight covers only roughly the x-height → baseline of the text,
   leaving ascenders (top of I, l, t) and descenders (bottom of g)
   visible above/below the pill. The band sits through the middle of
   lowercase letters, matching the reference design. */
body.new-landing .nl-highlight {
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 26%,
        var(--nl-highlight) 26%,
        var(--nl-highlight) 88%,
        transparent 88%,
        transparent 100%
    );
    padding: 0 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ==========================================================================
   Bracketed sub-text — THE CRM YOU'VE BEEN WAITING FOR
   ========================================================================== */
body.new-landing .nl-subtext-wrap {
    position: relative;
    padding-left: var(--nl-indent);
    max-width: calc(6 * var(--nl-grid-fine));    /* 6 fine cells */
}

body.new-landing .nl-subtext {
    position: relative;
    padding: 32px 32px;       /* half-cell, square */
    /* Gentle wash inside the bracket frame — same teal as the headline
       highlight bars (--nl-highlight = #B8D9D5) at 15% opacity over cream.
       Hard-stop gradient instead of solid background-color so the wash
       only fills BETWEEN the top/bottom horizontal lines (16px inset),
       not the 16px strips above/below them. */
    background: linear-gradient(
        to bottom,
        transparent 0,
        transparent 16px,
        rgba(184, 217, 213, 0.15) 16px,
        rgba(184, 217, 213, 0.15) calc(100% - 16px),
        transparent calc(100% - 16px),
        transparent 100%
    );
    /* Side borders run the full height of the box. Top and bottom lines
       are drawn by ::before / ::after and extend PAST the side borders
       on both left and right — gives the bracketed-frame overshoot look. */
    border-left: 1px solid var(--nl-ink);
    border-right: 1px solid var(--nl-ink);
    color: var(--nl-black);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 400;
    line-height: 2;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    /* Hug the longest line of text instead of stretching to a fixed cell count.
       The bracketed frame should fit "THE CRM YOU'VE BEEN WAITING FOR," exactly,
       not extend to an arbitrary 5-cell width. */
    width: fit-content;
    max-width: calc(5 * var(--nl-grid-fine));    /* 5 fine cells — safety cap */
}

/* Top and bottom horizontal lines — positioned INSIDE the box (inset from
   top / bottom) so the side borders extend above and below them. Each
   horizontal line also extends 16px PAST the side borders on left and
   right, so both dimensions overshoot at every corner — matches the
   bracketed-frame look from the design. */
body.new-landing .nl-subtext::before,
body.new-landing .nl-subtext::after {
    content: '';
    position: absolute;
    left: -16px;
    width: calc(100% + 32px);   /* 16px past each side border */
    height: 1px;
    background: var(--nl-ink);
}

body.new-landing .nl-subtext::before {
    top: 16px;       /* horizontal line sits 16px below the top of the box */
}
body.new-landing .nl-subtext::after {
    bottom: 16px;    /* horizontal line sits 16px above the bottom of the box */
}

/* Unused span corners — hide, since the ::before / ::after lines alone
   create the frame */
body.new-landing .nl-subtext .nl-corner-tr,
body.new-landing .nl-subtext .nl-corner-bl {
    display: none;
}

/* ==========================================================================
   Join the Voyage / email signup
   ========================================================================== */
body.new-landing .nl-voyage-section {
    padding-left: var(--nl-indent);
    /* 8 fine cells — wide enough that the email placeholder
       "NAME@COMPANY.COM" (16 chars × 16 px / 3.2 px letter-spacing ≈ 211 px)
       fits inside the input's content area at every desktop viewport. The
       previous 6-cell max-width clipped the placeholder mid-string below
       ~1280 vw because voyage's content area (5 cells) split between two
       inputs with a 16 px gap left only ~160-218 px of content area. */
    max-width: calc(8 * var(--nl-grid-fine));
    /* No section-wide background — only the input field and submit button
       carry the teal wash, so the form pair reads as the lone CTA element. */
    padding-top: 24px;
    padding-bottom: 24px;
    padding-right: var(--nl-indent);
}

body.new-landing .nl-voyage-label {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: 'Manier', 'Fraunces', serif;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: var(--nl-black);
    margin-bottom: 16px;
}

body.new-landing .nl-form {
    /* Vertical stack: shell on top, response below. Replaces the previous
       horizontal flex with a wrapped quarter-cell gap — the new shell IS
       the unified row, so the form-level gap belonged at the wrong scope. */
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    max-width: calc(5 * var(--nl-grid-fine));   /* 5 cells — slightly wider than the old 4 + ¼ for visual prominence */
}

/* The shell wraps input + button into a single CTA-feel component.
   Border + bg are owned here; the inner input has neither. Focus-within
   sharpens the border and adds a soft teal glow — the whole shell reads
   as one premium control rather than two boxes. */
body.new-landing .nl-form-shell {
    display: flex;
    align-items: stretch;
    height: 60px;
    /* Solid teal-tinted background (no transparency) so the input reads as
       a definite field, not a barely-there tint. Progressive states bump
       saturation on hover and clear to white on focus. */
    background: #D5E0DA;
    border: 1px solid rgba(34, 32, 73, 0.22);
    /* 4px — original waitlist rounding, now also used by the floating top
       bar and the login pill so all three share one shape language. */
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.new-landing .nl-form-shell:hover {
    background: #C9D9D2;
    border-color: rgba(34, 32, 73, 0.36);
}

body.new-landing .nl-form-shell:focus-within {
    border-color: var(--nl-ink);
    box-shadow: 0 0 0 3px rgba(184, 217, 213, 0.55);
    background: #FFFFFF;
}

body.new-landing .nl-form input[type="email"] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 20px;
    background: transparent;
    border: none;
    color: var(--nl-ink);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    /* Natural-case, no letter-spacing — emails are typed data, not
       headline tracking. Drops the previous uppercase + 3.2px which made
       both placeholder and entered email render as spaced-out caps. */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    outline: none;
}

body.new-landing .nl-form input[type="email"]::placeholder {
    color: rgba(34, 32, 73, 0.5);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

body.new-landing .nl-submit {
    flex-shrink: 0;
    height: 100%;
    padding: 0 22px;
    /* Dark ink default — the button is the page's primary CTA, so it
       carries weight by default rather than waiting for hover. The colour
       contrast against the teal-tinted shell handles the visual divider
       (no border-left needed). */
    background: var(--nl-ink);
    border: none;
    color: var(--nl-bg);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.05s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

body.new-landing .nl-submit:hover {
    /* Subtle brighten — keeps the colour story coherent (no jarring swap). */
    filter: brightness(1.18);
}

body.new-landing .nl-submit:active {
    transform: translateY(1px);
}

body.new-landing .nl-submit:disabled {
    opacity: 0.55;
    cursor: wait;
}

body.new-landing .nl-submit-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

body.new-landing .nl-response {
    margin-top: 4px;
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--nl-ink);
    min-height: 18px;
}

body.new-landing .nl-response .nl-alert-error {
    color: #A03030;
}

body.new-landing .nl-response .nl-alert-success {
    color: #2F6B4E;
}

/* ==========================================================================
   Footer — copyright | email | privacy | terms
   ========================================================================== */
body.new-landing .nl-footer {
    position: relative;
    z-index: 3;
    display: grid;
    /* 4 + 2 + 3 + 3 = 12 fine cells, matching --nl-grid-w. Every cell is an
       exact multiple of the integer-rounded fine cell so all dividers land
       on grid lines. Careers (cell 3) is 3 fine cells wide so it equals the
       Privacy & Terms cell on its right — the layout reads as four equal-
       weight quadrants on the wider half of the footer. Any 0-11 px of
       viewport slack sits OUTSIDE the footer, not inside a cell. */
    grid-template-columns:
        calc(4 * var(--nl-grid-fine))
        calc(2 * var(--nl-grid-fine))
        calc(3 * var(--nl-grid-fine))
        calc(3 * var(--nl-grid-fine));
    border-top: 1px solid var(--nl-rule);
    margin-top: auto;
    margin-left: 60px;
    width: var(--nl-grid-w);
    background: transparent;
}

body.new-landing .nl-footer-cell {
    /* Height = ¼ fine cell — snaps to the quarter-cell grid. Text
       reduced 13 → 11 px so content fits the tighter row even at the
       smallest desktop viewport (1024 → cell 20 px, content 16.5 px).
       round() to integer px so the cell height matches --nl-footer-h
       exactly and the footer's top border lands on the grid line. */
    height: round(var(--nl-grid-fine) / 4, 1px);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--nl-rule);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nl-black);
}

body.new-landing .nl-footer-cell:last-child {
    border-right: none;
}

/* Footer cell with multiple inline children (e.g. Privacy & Terms) — small
   gap between the two anchors and the ampersand. */
body.new-landing .nl-footer-cell {
    gap: 8px;
}

body.new-landing .nl-footer-cell a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s ease;
}

body.new-landing .nl-footer-cell a:hover {
    opacity: 0.7;
}

body.new-landing .nl-footer-cell.nl-copy {
    justify-content: flex-start;
}

/* ==========================================================================
   Content-page variant — for legal / long-form pages (privacy, terms, etc.).
   Add class `nl-content` to the body alongside `new-landing` to reuse the
   shared chrome (masthead, footer, full-height 60px rule) while hiding the
   hero-only wave pattern and swapping the main content area for readable
   long-form typography.
   ========================================================================== */
body.new-landing.nl-content .nl-wave {
    display: none;
}
/* .nl-root::after (full-height left rule) kept as-is — same 60px offset.
   .nl-masthead, .nl-main, .nl-footer keep their 60px margin-left from base
   styles so all content sits to the right of the rule, consistent with the
   landing page. */
body.new-landing.nl-content .nl-main {
    position: relative;
    padding: clamp(28px, 3vw, 56px) 0;
}
/* Careers-only: top-align main content so the page marker (anchored at
   padding-top + 0.575em) lines up with the h1's first line. Other content
   pages keep the inherited `justify-content: center` from base .nl-main. */
body.new-landing.nl-careers .nl-main {
    justify-content: flex-start;
}
/* Horizontal padding lives on .nl-legal instead of .nl-main so that an
   absolutely-positioned page marker can sit against .nl-main's border-edge
   (and therefore line up with the 60px root rule). */
body.new-landing.nl-content .nl-legal {
    padding: 0 clamp(20px, 4vw, 72px);
    max-width: min(1000px, 100%);
}

/* Vector arrow pointing to the page title — same 52px glyph as the landing
   hero, centered horizontally on the 60px root rule. Hidden on narrow
   viewports (matches `.nl-root::after` and `.nl-headline-marker`). */
body.new-landing .nl-page-marker {
    position: absolute;
    left: -26px;               /* -26 of main's padding-box + 52/2 = 60 from root */
    /* Vertically center on the h1's first line, mirroring `.nl-headline-marker`.
       Set font-size to match the .nl-legal h1 so `em` resolves to the heading's
       font-size, then anchor top to: main's padding-top + half a line-box.
       With line-height 1.15, the cap's vertical center sits at 0.575em from the
       line-box top. translateY(-50%) then puts the marker's center on that y. */
    font-size: clamp(36px, 4.2vw, 56px);   /* same clamp as .nl-legal h1 */
    top: calc(clamp(28px, 3vw, 56px) + 0.575em);   /* main padding-top + line-box center */
    transform: translateY(-50%);
    width: 52px;
    height: auto;
    z-index: 2;
    pointer-events: none;
}
@media (max-width: 900px) {
    body.new-landing .nl-page-marker {
        display: none;
    }
}

/* --- Legal / long-form content ---
   Typography and spacing for pages like /privacy and /terms. Scoped under
   body.new-landing so it can't leak into the dark-theme pages. */
body.new-landing .nl-legal {
    color: var(--nl-ink);
    font-family: 'Roobert VF', 'Roobert', 'Inter', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.7;
}
body.new-landing .nl-legal .nl-back-link {
    display: inline-block;
    margin-bottom: 24px;
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--nl-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s ease;
}
body.new-landing .nl-legal .nl-back-link:hover {
    opacity: 0.7;
}
body.new-landing .nl-legal h1 {
    font-family: 'Manier', 'Fraunces', Georgia, serif;
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.8px;
    color: var(--nl-ink);
    margin: 0 0 8px;
}
body.new-landing .nl-legal .nl-last-updated {
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(34, 32, 73, 0.7);
    margin: 0 0 32px;
}
body.new-landing .nl-legal .nl-last-updated strong {
    color: var(--nl-ink);
    font-weight: 400;
}
body.new-landing .nl-legal h2 {
    font-family: 'Manier', 'Fraunces', Georgia, serif;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.4px;
    color: var(--nl-ink);
    margin: 48px 0 16px;
}
body.new-landing .nl-legal h3 {
    font-family: 'Manier', 'Fraunces', Georgia, serif;
    font-size: clamp(18px, 1.8vw, 21px);
    font-weight: 500;
    line-height: 1.3;
    color: var(--nl-ink);
    margin: 28px 0 12px;
}
body.new-landing .nl-legal p {
    margin: 0 0 16px;
    color: var(--nl-ink);
}
body.new-landing .nl-legal ul,
body.new-landing .nl-legal ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
body.new-landing .nl-legal li {
    margin-bottom: 8px;
    color: var(--nl-ink);
}
body.new-landing .nl-legal strong {
    font-weight: 500;
    color: var(--nl-ink);
}
body.new-landing .nl-legal a {
    color: var(--nl-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s ease;
}
body.new-landing .nl-legal a:hover {
    opacity: 0.7;
}
body.new-landing .nl-legal hr {
    border: 0;
    border-top: 1px solid rgba(34, 32, 73, 0.25);
    margin: 40px 0;
}
body.new-landing .nl-legal table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}
body.new-landing .nl-legal th,
body.new-landing .nl-legal td {
    border: 1px solid rgba(34, 32, 73, 0.35);
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    color: var(--nl-ink);
}
body.new-landing .nl-legal th {
    background: rgba(34, 32, 73, 0.06);
    font-weight: 500;
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    letter-spacing: 0.3px;
}
body.new-landing .nl-legal .nl-legal-callout {
    display: block;
    border: 1px solid rgba(34, 32, 73, 0.25);
    background: rgba(184, 217, 213, 0.25);
    padding: 16px 20px;
    margin: 0 0 32px;
    font-size: 15px;
}

/* Mobile adjustments for legal content */
@media (max-width: 600px) {
    body.new-landing .nl-legal {
        font-size: 14px;
        line-height: 1.6;
    }
    body.new-landing .nl-legal .nl-back-link {
        font-size: 11px;
        letter-spacing: 1.6px;
    }
    /* Smaller heading sizes on phone — drop below the clamp() floors used
       at desktop so headings feel proportional to the 14px body copy. */
    body.new-landing .nl-legal h1 {
        font-size: 28px;
        letter-spacing: -0.5px;
    }
    body.new-landing .nl-legal h2 {
        font-size: 18px;
        margin: 36px 0 12px;
    }
    body.new-landing .nl-legal h3 {
        font-size: 16px;
        margin: 24px 0 10px;
    }
    body.new-landing .nl-legal table {
        font-size: 13px;
    }
    body.new-landing .nl-legal th,
    body.new-landing .nl-legal td {
        padding: 8px 10px;
    }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* ==========================================================================
   Intermediate desktop (≤1200px) — minor shrink of masthead cells
   ========================================================================== */
@media (max-width: 1200px) {
    body.new-landing .nl-mh-logo {
        padding: 16px 24px;
        /* min-width removed — was forcing the 2fr logo track to grow beyond its
           fair share at narrow viewports, breaking the masthead's grid snap.
           The logo image itself uses clamp() now so it always fits the cell. */
    }
    body.new-landing .nl-mh-compass {
        /* Tighten padding so the 1fr compass cell (~70-95 px wide here) fits
           the compass image without overflowing into the CONTACT cell. */
        padding: 8px 12px;
    }
    body.new-landing .nl-nav-cell,
    body.new-landing .nl-mh-tagline,
    body.new-landing .nl-mh-coords {
        font-size: 15px;
        letter-spacing: 3px;
    }
}

/* ==========================================================================
   Tablet / small-screen desktop (≤900px) — major restructure:
   - Drops the 60px root rule and the vector marker
   - Masthead becomes 2 rows: [logo | compass] / [full-width nav]
   - Content blocks drop their left padding (no rule to align to)
   - Wave pattern softened
   - Footer stacks into a 2×2 grid with dividers
   ========================================================================== */
@media (max-width: 900px) {
    /* --- remove desktop-only rule + offsets --- */
    body.new-landing .nl-root::after {
        display: none;
    }
    body.new-landing .nl-headline-marker {
        display: none;
    }
    body.new-landing .nl-masthead,
    body.new-landing .nl-main,
    body.new-landing .nl-footer {
        margin-left: 0;
    }

    /* Background grid: replace the SVG with CSS gradient grid lines on
       mobile. The SVG (500×500 viewBox, stroke-width 1) scales its strokes
       below 1 device pixel at mobile-sized tiles and disappears. CSS
       gradients render strokes at exactly 1px regardless of cell size.
       Effective stroke opacity tuned to roughly match desktop's combined
       stroke-opacity 0.35 × layer opacity 0.14 ≈ 0.05 over cream — very
       subtle background texture rather than a defined grid. */
    body.new-landing .nl-root::before {
        background-image:
            linear-gradient(to right, rgba(34, 32, 73, 0.06) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(34, 32, 73, 0.06) 1px, transparent 1px);
        background-position: 0 0;
        background-size: 60px 60px;
        background-repeat: repeat;
        mix-blend-mode: normal;
        opacity: 1;
        /* Long fades top/bottom so the grid feels barely-defined near the
           header and footer, fully present only through the middle of the
           page. Opaque band sits roughly 35–65% of viewport height. */
        -webkit-mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 35%,
            #000 65%,
            transparent 100%);
        mask-image: linear-gradient(to bottom,
            transparent 0,
            #000 35%,
            #000 65%,
            transparent 100%);
    }

    /* --- masthead: 2-row layout on mobile ---
       Row 1: [ logo (fills) | LOGIN | compass ]
       Row 2: [ THE FINAL WAVE OF CRM ——— 53.3498° N, 6.2603° W ] full-width at 8px

       .nl-mh-logo, .nl-mh-top, .nl-mh-nav, .nl-mh-compass are all direct
       children of .nl-masthead (flat structure). REQUEST EARLY ACCESS and
       CONTACT are hidden on mobile (reachable via waitlist form + footer). */
    body.new-landing .nl-masthead {
        /* Override desktop's fixed 0.75-fine-cell height — at narrow viewports
           that height is way too small (e.g. 21 px at 400 vw) and clips logo +
           login. Auto height lets the 2-row mobile layout breathe. */
        height: auto;
        /* Override desktop's grid-clamped width — on mobile the masthead
           goes edge-to-edge so logo + login fit comfortably. */
        width: 100%;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "logo nav"
            "top  top";
        max-width: 100%;
        overflow: hidden;
    }
    body.new-landing .nl-mh-logo {
        grid-area: logo;
        padding: 8px 16px;
        min-width: 0;
        justify-content: flex-start;
    }
    body.new-landing .nl-logo {
        width: 80px;
    }
    /* Compass is decorative — hide on mobile to give logo and LOGIN more room */
    body.new-landing .nl-mh-compass {
        display: none;
    }

    /* LOGIN sits between logo and compass on row 1 */
    body.new-landing .nl-mh-nav {
        grid-area: nav;
        grid-template-columns: 1fr;
        align-self: stretch;
    }
    body.new-landing .nl-mh-nav .nl-nav-cell:nth-child(n+2) {
        display: none;
    }
    body.new-landing .nl-nav-cell {
        padding: 10px 12px;
        font-size: 11px;
        letter-spacing: 1.2px;
        border-right: none;
    }
    /* Hide the keyboard-shortcut hint on mobile — there's no physical
       keyboard so the "L" key indicator is just visual noise. */
    body.new-landing .nl-mh-nav .nl-login-pill__kbd {
        display: none;
    }

    /* Row 2: tagline + coords at 8px so they fit on one line without wrapping */
    body.new-landing .nl-mh-top {
        grid-area: top;
        display: grid;
        grid-template-columns: 1fr auto;
        border-top: 1px solid var(--nl-rule);
        border-bottom: none;
    }
    body.new-landing .nl-mh-tagline,
    body.new-landing .nl-mh-coords {
        font-size: 8px;
        letter-spacing: 1.2px;
        line-height: 14px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
    body.new-landing .nl-mh-tagline {
        gap: 8px;
        padding-left: 14px;
        padding-right: 0;
    }
    body.new-landing .nl-mh-coords {
        padding-left: 8px;
        padding-right: 14px;
    }
    body.new-landing .nl-mh-tagline .nl-rule-line {
        flex: 1;
        min-width: 24px;
    }

    /* --- main content: tighten and remove rule-related padding ---
       Top padding gives the WE ARE HIRING banner room to breathe below the
       2-row mobile masthead. Bottom padding kept tight on mobile so the
       footer stays within the initial viewport on common phone heights.

       justify-content: space-between distributes the 3 visual sections
       (hero = hiring + headline, CRM box, form) evenly across the available
       vertical space — hero pinned to the top of main, form pinned to the
       bottom, CRM box centered between them. The 28px gap is the MINIMUM
       spacing; space-between grows the gaps as needed to fill main. */
    body.new-landing .nl-main {
        padding: 56px 20px 4px;
        gap: 28px;
        justify-content: space-between;
    }
    /* Activate the hero wrapper on mobile: switch from display: contents
       (transparent on desktop) to display: block so hiring + headline are
       grouped into a single flex child of .nl-main. .nl-main now has 3
       flex children instead of 4, which is the count space-between needs
       to produce hero-top / CRM-middle / form-bottom. */
    body.new-landing .nl-hero {
        display: block;
        max-width: 100%;
    }
    body.new-landing .nl-hiring-row,
    body.new-landing .nl-headline-wrap,
    body.new-landing .nl-subtext-wrap,
    body.new-landing .nl-voyage-section {
        padding-left: 0;
        max-width: 100%;
    }
    /* Voyage section's BASE has padding-right: var(--nl-indent) (1 fine cell)
       which the mobile override didn't touch — that left ~1 fine cell of empty
       space to the right of the form. Subtitle wrap has no right padding by
       default, so the form was visibly narrower than the subtitle on the right.
       Drop voyage's right padding at mobile so form right edge = subtitle right. */
    body.new-landing .nl-voyage-section {
        padding-right: 0;
    }
    body.new-landing .nl-hiring-row {
        /* Inside the .nl-hero block wrapper there's no parent flex gap to
           cancel — set the gap-to-headline directly as a positive value. */
        margin-bottom: 14px;
    }
    body.new-landing .nl-hiring-banner {
        font-size: 13px;
        letter-spacing: 2px;
        gap: 8px;
    }
    body.new-landing .nl-headline {
        /* Drop from base 40px floor → 36px on mobile so the three-line
           headline doesn't dominate the viewport above the form. */
        font-size: 36px;
        letter-spacing: -0.8px;
        /* Drop the desktop grid constraint (8 fine cells ≈ 210px on a 375px
           phone). It's a composition rule reserving the right 4 cells for the
           wave pattern at desktop; on mobile the wave is repositioned so the
           constraint just forces "Built for Motion" to wrap. */
        max-width: none;
    }
    /* No extra top padding on the CRM box — `.nl-main`'s
       justify-content: space-between already produces the visible gap
       above this middle section, and the 8px nudge from when sections
       were stacked at the top is no longer needed (and shifts the
       middle section off-center). */
    body.new-landing .nl-subtext {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 22px 16px;     /* moderate internal padding */
        /* Override base `width: fit-content` — on mobile the bracketed box
           goes full width of its wrapper instead of hugging the text. */
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
    /* Shorter horizontal-line overshoot on mobile so the frame fits neatly */
    body.new-landing .nl-subtext::before,
    body.new-landing .nl-subtext::after {
        left: -8px;
        width: calc(100% + 16px);   /* 8px past each side border */
    }
    body.new-landing .nl-subtext::before {
        top: 10px;
    }
    body.new-landing .nl-subtext::after {
        bottom: 10px;
    }
    body.new-landing .nl-voyage-section {
        padding-top: 4px;
        /* Tighten bottom space below the form so the footer fits within the
           initial viewport on mobile (base value is 24px, too generous here). */
        padding-bottom: 0;
        /* margin-top: auto removed — the parent .nl-main now uses
           justify-content: space-between, which distributes leftover space
           among the gaps and pins the last flex child (this section) to the
           bottom. A flex item's `margin: auto` would consume ALL leftover
           space and override space-between, collapsing the middle section's
           share — so it must NOT be set here. */
    }
    /* `.nl-response` reserves min-height: 18px + margin-top: 4px below the
       form to prevent layout shift when an error / success message appears.
       That's ~22px of dead space when idle. On mobile we accept the trade —
       remove the reservation; the rare error message will push the footer
       down momentarily but the idle state stays compact. */
    body.new-landing .nl-response {
        min-height: 0;
        margin-top: 0;
    }
    body.new-landing .nl-voyage-label {
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }
    body.new-landing .nl-form {
        max-width: 100%;
    }
    /* Shell stays horizontal on mid-mobile (700-900 px), padding tightens. */
    body.new-landing .nl-form-shell {
        height: 56px;
    }
    body.new-landing .nl-form input[type="email"] {
        padding: 0 14px;
        font-size: 15px;
    }
    body.new-landing .nl-form input[type="email"]::placeholder {
        font-size: 15px;
    }
    body.new-landing .nl-submit {
        padding: 0 16px;
        font-size: 12px;
        letter-spacing: 1.6px;
    }

    /* --- Footer: 2-row layout at the same breakpoint as the masthead stack ---
           Row 1: © 2026 (full width, centered)
           Row 2: HELLO@AHOY.AI | CAREERS | PRIVACY & TERMS
                  (3 equal cells with vertical dividers between them) */
    body.new-landing .nl-footer {
        /* Mobile: edge-to-edge, override the desktop 12-fine-cell clamp. */
        width: 100%;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
    }
    body.new-landing .nl-footer-cell {
        height: auto;
        padding: 12px 6px;
        font-size: 10px;
        letter-spacing: 0.8px;
    }
    /* Row 1: copyright spans all 3 columns */
    body.new-landing .nl-footer-cell.nl-copy {
        grid-column: 1 / -1;
        justify-content: center;
        border-right: none;
        border-bottom: 1px solid var(--nl-rule);
    }
    /* Row 2: three link cells with right dividers (no bottom border) */
    body.new-landing .nl-footer-cell:not(.nl-copy) {
        border-right: 1px solid var(--nl-rule);
        border-bottom: none;
    }
    body.new-landing .nl-footer-cell:last-child {
        border-right: none;
    }
}

/* ==========================================================================
   Phone (≤600px) — same shell styling as desktop (teal-tinted background,
   4px corners, solid border via the shared base rules), but the submit
   collapses to an icon-only square so the form fits without text wrapping.
   Label stays in the accessibility tree (sr-only) as the button's name.
   ========================================================================== */
@media (max-width: 600px) {
    /* Voyage section keeps the same horizontal margins as the subtitle
       and other content blocks above — form aligns visually with the
       rest of the page rather than bleeding to the viewport edges. */
    body.new-landing .nl-voyage-section {
        max-width: 100%;
    }
    /* Input: 16px font-size to prevent iOS Safari from auto-zooming on
       focus (anything below 16px triggers the zoom). */
    body.new-landing .nl-form input[type="email"] {
        font-size: 16px;
    }
    body.new-landing .nl-form input[type="email"]::placeholder {
        font-size: 16px;
    }
    /* Submit collapses to an icon-only square — drops the text label so
       the form fits at narrow widths. Otherwise inherits desktop styling
       (full-height ink rectangle, cropped by shell's overflow: hidden +
       4px radius). Label is visually hidden via sr-only pattern. */
    body.new-landing .nl-submit {
        width: 56px;       /* matches the shell's 56px mobile height */
        padding: 0;
        gap: 0;
    }
    body.new-landing .nl-submit-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        padding: 0;
        margin: -1px;
    }
    body.new-landing .nl-submit-arrow {
        font-size: 18px;
        line-height: 1;
    }

    /* --- wave pattern: reposition just above the form on phone ---
       Default desktop position (top: 18%) lands the wave above the headline
       on phone, where it competes with the type. Anchor to bottom instead so
       the wave sits in the empty space between the bracketed CRM and the
       form (which is pinned to the bottom of main by .nl-main's
       justify-content: space-between). Bump opacity since the wave is now
       intentionally in-view rather than a peripheral flourish.

       Width: 180% with right: -40% gives a roughly-centered oversize blob
       (40% overflow on each side, clipped by .nl-root's overflow: hidden).
       Aspect ratio is locked 64/33 in the base rule, so the larger width
       also scales height proportionally — the wave reads as a big animated
       background presence on mobile rather than a modest accent. */
    body.new-landing .nl-wave {
        top: auto;
        bottom: 15%;
        width: 180%;
        right: -40%;
        opacity: 0.5;
    }

}

/* ==========================================================================
   Phone (≤600px) — stack the footer into a single column; tighter typography.
   Nav is already simplified to just LOGIN in the masthead above.
   ========================================================================== */
@media (max-width: 600px) {
    /* Footer layout (2-row) is defined in the @media 900 block and carries
       through here. Just tighten typography further for narrow phones. */
    body.new-landing .nl-footer-cell {
        padding: 12px 2px;
        font-size: 8px;
        letter-spacing: 0.4px;
    }

    /* Hiring banner — smaller, wraps cleanly */
    body.new-landing .nl-hiring-banner {
        font-size: 12px;
        letter-spacing: 1.5px;
        gap: 6px;
    }

    /* Main padding tightens further */
    body.new-landing .nl-main {
        padding: 24px 16px 16px;
    }
}

/* ==========================================================================
   Role cards + bounty callout — jobs page (cream theme)
   ========================================================================== */

body.new-landing.nl-content .nl-role-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 32px 0 48px;
    list-style: none;
    padding: 0;
}

body.new-landing.nl-content .nl-role-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(34, 32, 73, 0.25);
    background: rgba(255, 255, 255, 0.3);
    padding: clamp(20px, 2.4vw, 28px);
    transition: background 0.2s ease, border-color 0.2s ease;
}

body.new-landing.nl-content .nl-role-card:hover {
    border-color: var(--nl-ink);
    background: rgba(184, 217, 213, 0.25);
    text-decoration: none;
}

body.new-landing.nl-content .nl-role-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 12px;
}

body.new-landing.nl-content .nl-role-card__title {
    font-family: 'Manier', 'Fraunces', Georgia, serif;
    font-size: clamp(18px, 1.9vw, 22px);
    font-weight: 500;
    line-height: 1.25;
    color: var(--nl-ink);
    margin: 0;
}

body.new-landing.nl-content .nl-role-card__type {
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(34, 32, 73, 0.7);
}

body.new-landing.nl-content .nl-role-card__description {
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--nl-ink);
    margin: 0 0 20px;
}

body.new-landing.nl-content .nl-role-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body.new-landing.nl-content .nl-role-card__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.new-landing.nl-content .nl-role-card__skill {
    display: inline-block;
    padding: 4px 10px;
    border: 1px solid rgba(34, 32, 73, 0.35);
    border-radius: 2px;
    font-family: 'Roobert Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--nl-ink);
}

body.new-landing.nl-content .nl-role-card__cta {
    font-family: 'Roobert Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nl-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    white-space: nowrap;
}

body.new-landing.nl-content .nl-bounty-callout {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: clamp(20px, 2.4vw, 28px);
    border: 1px solid var(--nl-ink);
    background: rgba(184, 217, 213, 0.25);
    text-decoration: none;
    color: inherit;
    margin: 0 0 32px;
    transition: background 0.2s ease;
}

body.new-landing.nl-content .nl-bounty-callout:hover {
    background: rgba(184, 217, 213, 0.45);
    text-decoration: none;
    color: inherit;
}

body.new-landing.nl-content .nl-bounty-callout__icon {
    font-size: 36px;
    flex-shrink: 0;
    line-height: 1;
}

body.new-landing.nl-content .nl-bounty-callout__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.new-landing.nl-content .nl-bounty-callout__title {
    font-family: 'Manier', 'Fraunces', Georgia, serif;
    font-size: clamp(16px, 1.7vw, 20px);
    font-weight: 500;
    color: var(--nl-ink);
    margin: 0;
}

body.new-landing.nl-content .nl-bounty-callout__description {
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--nl-ink);
    margin: 0;
}

body.new-landing.nl-content .nl-bounty-callout__cta {
    font-family: 'Roobert Mono', ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--nl-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    body.new-landing.nl-content .nl-role-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    body.new-landing.nl-content .nl-role-card__footer {
        flex-direction: column;
        align-items: flex-start;
    }

    body.new-landing.nl-content .nl-bounty-callout {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ==========================================================================
   World-class polish layer (added to elevate teaser to YC-tier)
   - Custom selection colour, smooth scroll, focus-visible rings
   - Hover micro-states on nav / CTA / logo
   - Scroll-triggered reveals (paired with IntersectionObserver in index.ejs)
   - Atmospheric compass rotation
   - Form success state animation
   All motion guarded by prefers-reduced-motion.
   ========================================================================== */

/* Brand-coloured text selection */
body.new-landing ::selection {
    background: var(--nl-highlight);
    color: var(--nl-ink);
}

/* Smooth scroll for in-page anchors (e.g. Request Early Access -> #join-voyage) */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* Focus rings — keyboard nav only (not mouse clicks). Brand teal, offset so it
   reads as intentional and doesn't clip the element it's around. */
body.new-landing :focus-visible {
    outline: 2px solid var(--nl-highlight);
    outline-offset: 3px;
    border-radius: 2px;
}
/* Email input lives inside the form shell which owns the focus glow via
   :focus-within. Suppress the default outline on the input itself so the
   shell's glow is the only visible focus indicator. */
body.new-landing .nl-form input[type="email"]:focus-visible {
    outline: none;
}

/* Hover micro-states. Subtle motion only; cancelled by prefers-reduced-motion. */
body.new-landing .nl-hiring-banner .nl-arrow-inline,
body.new-landing .nl-submit > span[aria-hidden="true"] {
    display: inline-block;
    transition: transform 0.2s ease;
}
body.new-landing .nl-hiring-banner:hover .nl-arrow-inline,
body.new-landing .nl-submit:hover > span[aria-hidden="true"] {
    transform: translateX(3px);
}

/* Nav links: underline animates from left on hover */
body.new-landing .nl-mh-nav a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.25s ease;
    padding-bottom: 1px;
}
body.new-landing .nl-mh-nav a:hover {
    background-size: 100% 1px;
}

/* Logo: gentle scale on hover */
body.new-landing .nl-mh-logo > a {
    transition: transform 0.2s ease;
    transform-origin: center;
}
body.new-landing .nl-mh-logo > a:hover {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    body.new-landing .nl-hiring-banner .nl-arrow-inline,
    body.new-landing .nl-submit > span[aria-hidden="true"],
    body.new-landing .nl-mh-logo > a {
        transition: none;
    }
    body.new-landing .nl-hiring-banner:hover .nl-arrow-inline,
    body.new-landing .nl-submit:hover > span[aria-hidden="true"],
    body.new-landing .nl-mh-logo > a:hover {
        transform: none;
    }
}

/* Scroll-triggered reveal — sections fade up when entering the viewport.
   Initial hidden state set by .nl-reveal; .nl-reveal--in (added by JS) reveals.
   Critical: under prefers-reduced-motion both states show content immediately. */
body.new-landing .nl-reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}
body.new-landing .nl-reveal.nl-reveal--in {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    body.new-landing .nl-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Form-submit success animation — replaces the snap-in with a soft fade-up.
   The submit handler in index.ejs adds .nl-response--success on success. */
@keyframes nl-success-pop {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.new-landing .nl-response--success {
    animation: nl-success-pop 400ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    body.new-landing .nl-response--success {
        animation: none;
    }
}


/* ============================================================================
   LAUNCH-STYLE FOOTER — shared partial (src/partials/nl-footer-launch.ejs).
   Figma node 4043:44. Cream side rails, three horizontal hairlines splitting
   the left column into [brand] / [Clarity Over Chaos] / [coords], a column
   divider behind a 4-link nav stack, and a full-width legal strip below.

   Rules below are de-scoped from `.nl-launch-sections` so the partial
   works on every page (homepage, pricing, careers, blog, privacy, terms,
   etc.) without needing the launch-sections wrapper.
   ============================================================================ */
.nl-footer-launch {
    background: #222049;
    color: #E8E4DB;
    width: 100%;
    font-family: 'Roobert', 'Inter', sans-serif;
    /* Promote above any body-level pseudo (e.g. the pricing page's side
       rule at z-index:1). Without this, the rule's ink color paints over
       the inner element's left/right white borders at x=60 — making the
       white rails LOOK ink-coloured at the overlap. The colour was
       always white; it was just being covered. */
    position: relative;
    z-index: 2;
}
.nl-footer-launch__inner {
    /* Left-anchored to viewport-x = 60 so the inner rail lands on the same
       x as the page's side rule + leftmost background-grid major line.
       Right rail kept inset from the viewport (≥60 from the right edge
       on viewports ≤ 1502) so it doesn't get clipped at the boundary. */
    margin-left: 60px;
    margin-right: 0;
    max-width: min(1382px, calc(100vw - 120px));
    border-inline: 1px solid #FFFFFF;
}

/* Main 2-col area: left content + 285px nav. */
.nl-footer-launch__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 285px;
}
.nl-footer-launch__left {
    display: flex;
    flex-direction: column;
}

/* Brand zone (top-left). */
.nl-footer-launch__brand {
    padding: 55px 0 36px 28px;
}
.nl-footer-launch__logo {
    display: inline-block;
    color: #E8E4DB;
    margin-bottom: 22px;
}
.nl-footer-launch__logo svg {
    display: block;
    height: 56px;
    width: auto;
}
/* The Ahoy mark ships with mixed white + #15133F (navy) fills so it reads
   correctly on a cream surface; on the dark navy footer the navy paths
   blend with the bg and parts of the logo "drop out". Force every fill to
   white inside the footer so the mark renders solid white. */
.nl-footer-launch__logo svg path[fill="#15133F"] { fill: #ffffff; }
.nl-footer-launch__logo svg path[fill="white"]   { fill: #ffffff; }
.nl-footer-launch__tagline {
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

/* Clarity ── Over Chaos. */
.nl-footer-launch__claim {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 28px 22px 28px;
    border-top: 1px solid #FFFFFF;
    font-weight: 600;
    font-size: 26px;
    line-height: 24px;
}
.nl-footer-launch__claim p { margin: 0; flex-shrink: 0; }
.nl-footer-launch__claim-rule {
    flex: 1;
    height: 1px;
    background: #FFFFFF;
}

/* Coordinates row (3 cells, vertical hairlines between, fixed 59px tall). */
.nl-footer-launch__coords {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    height: 59px;
    border-top: 1px solid #FFFFFF;
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-weight: 300;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.nl-footer-launch__coords > * {
    text-align: center;
    border-right: 1px solid #FFFFFF;
}
.nl-footer-launch__coords > *:last-child { border-right: none; }
.nl-footer-launch__coords-mark {
    font-family: 'Roobert', 'Inter', sans-serif;
    font-weight: 300;
    font-size: 45px;
    line-height: 24px;
    letter-spacing: 0.45px;
    color: transparent;
    -webkit-text-stroke: 1px #FFFFFF;
    text-transform: none;
}

/* Right column: 4-link nav stack with column divider on the left. */
.nl-footer-launch__nav {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid #FFFFFF;
}
.nl-footer-launch__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 21px 54px 21px 48px;
    border-bottom: 1px solid #FFFFFF;
    color: #E8E4DB;
    text-decoration: none;
    font-weight: 600;
    font-size: 22px;
    line-height: 24px;
    transition: background-color 0.18s ease;
}
.nl-footer-launch__nav li:first-child a { padding-top: 47px; }
.nl-footer-launch__nav li:last-child a { border-bottom: none; }
.nl-footer-launch__nav a:hover {
    background-color: rgba(232, 228, 219, 0.06);
}
.nl-footer-launch__nav a:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: -2px;
}
.nl-footer-launch__arrow {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: #E8E4DB;
}

/* Legal strip — sits outside the main grid so its border-top spans the
   full inner-container width (the rails still bound left/right). 28/54
   padding mirrors Figma's asymmetric content anchors. */
.nl-footer-launch__legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 54px 18px 28px;
    border-top: 1px solid #FFFFFF;
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
}
.nl-footer-launch__legal p { margin: 0; }

/* Copyright + Terms + Privacy share the left side of the strip; the
   "Smooth seas" tagline stays right via the parent's space-between. */
.nl-footer-launch__legal-left {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.nl-footer-launch__legal-left a {
    color: inherit;
    text-decoration: none;
    transition: opacity 120ms ease;
}
.nl-footer-launch__legal-left a:hover { opacity: 0.7; }

/* Mobile: drop rails, stack everything, collapse coords to 2×2 with 03 hidden. */
@media (max-width: 640px) {
    .nl-footer-launch__inner {
        border-inline: none;
        margin-left: 0;
        max-width: 100%;
    }
    .nl-footer-launch__main { grid-template-columns: 1fr; }
    .nl-footer-launch__brand { padding: 32px 16px 28px; }
    .nl-footer-launch__logo svg { height: 48px; }
    .nl-footer-launch__claim {
        padding: 18px 16px;
        font-size: 20px;
    }
    .nl-footer-launch__coords {
        grid-template-columns: 1fr 1fr;
        height: auto;
        font-size: 16px;
        letter-spacing: 2px;
    }
    .nl-footer-launch__coords > * {
        padding: 12px 8px;
    }
    .nl-footer-launch__coords > :nth-child(2) { border-right: none; }
    .nl-footer-launch__coords-mark { display: none; }
    .nl-footer-launch__nav {
        border-left: none;
        border-top: 1px solid #FFFFFF;
    }
    .nl-footer-launch__nav a {
        padding: 16px;
        font-size: 18px;
    }
    .nl-footer-launch__nav li:first-child a { padding-top: 16px; }
    .nl-footer-launch__legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 16px;
        font-size: 14px;
    }
    .nl-footer-launch__legal-left {
        gap: 12px;
    }
}

/* ============================================================================
   JOIN WAITLIST MODAL — markup in src/partials/nl-waitlist-modal.ejs.
   Triggered by [data-waitlist-trigger] elements (or any link to
   #join-voyage whose text reads "Join Waitlist"). The launch footer
   partial includes the modal automatically, so every page that ships
   the launch footer also ships the modal.
   ============================================================================ */
.nl-waitlist-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.nl-waitlist-modal[hidden] { display: none; }
.nl-waitlist-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(34, 32, 73, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}
.nl-waitlist-modal__dialog {
    position: relative;
    background: #FFFFFF;
    border: 1px solid rgba(34, 32, 73, 0.20);
    border-radius: 6px;
    padding: 36px 32px 32px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 24px 64px rgba(34, 32, 73, 0.30);
    font-family: 'Roobert', 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--nl-ink, #222049);
}
.nl-waitlist-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(34, 32, 73, 0.18);
    border-radius: 4px;
    color: var(--nl-ink, #222049);
    cursor: pointer;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.nl-waitlist-modal__close:hover {
    background: rgba(34, 32, 73, 0.06);
    border-color: rgba(34, 32, 73, 0.32);
}
.nl-waitlist-modal__close:focus-visible {
    outline: 2px solid var(--nl-ink, #222049);
    outline-offset: 2px;
}
.nl-waitlist-modal__eyebrow {
    font-family: 'Roobert Mono', 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(34, 32, 73, 0.55);
    margin: 0 0 8px;
}
.nl-waitlist-modal__title {
    font-family: 'Manier', Georgia, serif;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.1;
    margin: 0 0 12px;
    color: var(--nl-ink, #222049);
}
.nl-waitlist-modal__lede {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(34, 32, 73, 0.78);
    margin: 0 0 24px;
}
.nl-waitlist-modal__form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.nl-waitlist-modal__form[hidden] { display: none; }
.nl-waitlist-modal__label {
    font-family: 'Roobert Mono', 'Roboto Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(34, 32, 73, 0.65);
}
.nl-waitlist-modal__input {
    padding: 12px 14px;
    border: 1px solid rgba(34, 32, 73, 0.30);
    border-radius: 4px;
    background: #FFFFFF;
    font-family: 'Roobert', 'Inter', sans-serif;
    font-size: 15px;
    color: var(--nl-ink, #222049);
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    box-sizing: border-box;
}
.nl-waitlist-modal__input:focus {
    outline: 2px solid var(--nl-ink, #222049);
    outline-offset: -1px;
    border-color: var(--nl-ink, #222049);
}
.nl-waitlist-modal__error {
    color: #B22222;
    font-size: 13px;
    margin: 4px 0 0;
}
.nl-waitlist-modal__error[hidden] { display: none; }
.nl-waitlist-modal__submit {
    margin-top: 12px;
    height: 48px;
    padding: 0 24px;
    background: var(--nl-ink, #222049);
    color: var(--nl-bg, #E8E4DB);
    border: 1px solid var(--nl-ink, #222049);
    border-radius: 999px;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.nl-waitlist-modal__submit:hover { opacity: 0.88; }
.nl-waitlist-modal__submit:focus-visible {
    outline: 2px solid var(--nl-ink, #222049);
    outline-offset: 3px;
}
.nl-waitlist-modal__success {
    text-align: center;
    padding: 12px 0;
}
.nl-waitlist-modal__success[hidden] { display: none; }
.nl-waitlist-modal__success-headline {
    font-family: 'Manier', Georgia, serif;
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 8px;
    color: var(--nl-ink, #222049);
}
.nl-waitlist-modal__success-lede {
    font-size: 14px;
    line-height: 1.5;
    color: rgba(34, 32, 73, 0.78);
    margin: 0;
}
@media (max-width: 480px) {
    .nl-waitlist-modal__dialog { padding: 28px 22px 24px; }
    .nl-waitlist-modal__title { font-size: 26px; }
}