/* ==========================================================================
   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);

    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;
    border: 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 — layered via pseudo-element so we can control opacity / blend
   / mask independently. The grid tiles at its natural size so long pages
   (privacy, terms, etc.) show a consistent pattern instead of a single
   stretched copy. Fades out toward the top and left borders. */
body.new-landing .nl-root::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('./img/new-landing/background-image.png');
    background-position: 60px 120px;
    background-size: auto;
    background-repeat: repeat;
    mix-blend-mode: multiply;
    opacity: 0.18;
    /* Fade the grid out near the top and left edges so it blends into the border */
    -webkit-mask-image:
        linear-gradient(to bottom, transparent 0, #000 160px),
        linear-gradient(to right,  transparent 0, #000 160px);
    mask-image:
        linear-gradient(to bottom, transparent 0, #000 160px),
        linear-gradient(to right,  transparent 0, #000 160px);
    -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;
    mix-blend-mode: multiply;
    opacity: 0.75;
    /* Radial mask so the wave fades out toward all edges — no hard
       rectangular "box" around the pattern. */
    -webkit-mask-image: radial-gradient(ellipse 80% 85% at 55% 55%, #000 10%, rgba(0,0,0,0.85) 40%, transparent 95%);
    mask-image: radial-gradient(ellipse 80% 85% at 55% 55%, #000 10%, rgba(0,0,0,0.85) 40%, transparent 95%);
}

/* ==========================================================================
   Masthead — 3-col grid: [logo | middle | compass]
   Logo and compass span both rows. Middle region has two rows:
     (1) tagline + coords, (2) LOGIN | REQUEST EARLY ACCESS | CONTACT
   ========================================================================== */
body.new-landing .nl-masthead {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: auto 1fr auto;
    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: 20px 32px;
    border-right: 1px solid var(--nl-rule);
    min-width: 280px;
}

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

body.new-landing .nl-logo {
    display: block;
    width: 180px;   /* larger per design */
    height: auto;
}

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

body.new-landing .nl-compass {
    width: 72px;
    height: 72px;
    display: block;
}

/* 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". */
    padding: 16px 0 16px 32px;
    /* No vertical divider between tagline and coordinates — per design */
    /* Shared tab typography — matches LOGIN / COORDS / CONTACT */
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    color: #000;
}

body.new-landing .nl-mh-tagline .nl-rule-line {
    flex: 1;
    height: 1px;
    background: var(--nl-rule);
    min-width: 60px;
}

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. */
    padding: 16px 32px 16px 24px;
    white-space: nowrap;
    font-family: 'Roobert Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 3.6px;
    text-transform: uppercase;
    color: #000;
}

/* Bottom row: LOGIN | REQUEST EARLY ACCESS | CONTACT — 1:3:1 ratio per design
   so the wide action cell gets the bulk of the space. */
body.new-landing .nl-mh-nav {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    align-items: stretch;
}

body.new-landing .nl-nav-cell {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--nl-rule);
    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;
}

/* ==========================================================================
   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;
    padding: clamp(32px, 4.5vw, 72px) clamp(32px, 5vw, 80px) clamp(24px, 3vw, 48px) 0;
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4.5vw, 64px);
    max-width: 1400px;
}

/* 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: 80px;
    /* 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 * clamp(28px, 4.5vw, 64px) + 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: 12px;
    /* 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;
}

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: 80px;
}

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;
    top: clamp(16px, 2vw, 32px);
    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: 960px;
}

/* 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: 80px;
    padding-top: clamp(8px, 1.5vw, 24px);
    max-width: 780px;
}

body.new-landing .nl-subtext {
    position: relative;
    padding: clamp(20px, 2.2vw, 50px) clamp(28px, 3vw, 35px);
    /* 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;
    max-width: 460px;
}

/* 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 14px 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: -14px;
    width: calc(100% + 28px);   /* 14px past each side border */
    height: 1px;
    background: var(--nl-ink);
}

body.new-landing .nl-subtext::before {
    top: 14px;       /* horizontal line sits 14px below the top of the box */
}
body.new-landing .nl-subtext::after {
    bottom: 14px;    /* horizontal line sits 14px 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: 80px;
    padding-top: clamp(8px, 1.5vw, 24px);
    max-width: 640px;
}

body.new-landing .nl-voyage-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    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: clamp(14px, 1.8vw, 24px);
}

body.new-landing .nl-form {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    max-width: 640px;
}

body.new-landing .nl-form input[type="email"] {
    flex: 1 1 260px;
    min-width: 0;
    height: 48px;
    padding: 12px 18px;
    background: transparent;
    border: 1px solid var(--nl-input-border);
    border-radius: 2px;
    color: var(--nl-black);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    outline: none;
    transition: border-color 0.2s ease;
}

body.new-landing .nl-form input[type="email"]::placeholder {
    color: var(--nl-muted);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 3.2px;
    text-transform: uppercase;
}

body.new-landing .nl-form input[type="email"]:focus {
    border-color: var(--nl-ink);
    background: rgba(255, 255, 255, 0.3);
}

body.new-landing .nl-submit {
    flex: 1 1 260px;
    min-width: 220px;
    height: 48px;
    padding: 12px 24px;
    background: transparent;
    border: 1px solid var(--nl-input-border);
    border-radius: 2px;
    color: var(--nl-black);
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

body.new-landing .nl-submit:hover {
    background: var(--nl-ink);
    color: var(--nl-bg);
}

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

body.new-landing .nl-response {
    flex-basis: 100%;
    margin-top: 0;
    font-family: 'Roobert VF', 'Roobert', 'Inter', sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--nl-ink);
    min-height: 20px;
}

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;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    border-top: 1px solid var(--nl-rule);
    margin-top: auto;
    margin-left: 60px;
    background: transparent;
}

body.new-landing .nl-footer-cell {
    padding: 14px 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: 13px;
    font-weight: 400;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--nl-black);
}

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

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;
}
/* 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 */
    top: clamp(36px, 4vw, 80px);
    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;
    }
    body.new-landing .nl-legal h2 {
        margin: 36px 0 12px;
    }
    body.new-landing .nl-legal h3 {
        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: 220px;
    }
    body.new-landing .nl-logo {
        width: 150px;
    }
    body.new-landing .nl-compass {
        width: 60px;
        height: 60px;
    }
    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;
    }

    /* --- 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 {
        grid-template-columns: minmax(0, 1fr) 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: 100px;
    }
    /* 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;
    }

    /* 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 --- */
    body.new-landing .nl-main {
        padding: 28px 20px 20px;
        gap: 28px;
    }
    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%;
    }
    body.new-landing .nl-hiring-row {
        margin-bottom: -14px;   /* keep tight to headline */
    }
    body.new-landing .nl-hiring-banner {
        font-size: 13px;
        letter-spacing: 2px;
        gap: 8px;
    }
    body.new-landing .nl-headline {
        letter-spacing: -0.8px;
    }
    body.new-landing .nl-subtext-wrap {
        padding-top: 8px;
    }
    body.new-landing .nl-subtext {
        font-size: 12px;
        letter-spacing: 2px;
        padding: 22px 16px;     /* moderate internal padding */
        max-width: 100%;
    }
    /* 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;
    }
    body.new-landing .nl-voyage-label {
        font-size: 13px;
        letter-spacing: 2px;
        margin-bottom: 12px;
    }
    body.new-landing .nl-form {
        max-width: 100%;
    }
    body.new-landing .nl-form input[type="email"],
    body.new-landing .nl-submit {
        flex-basis: 100%;
    }

    /* --- wave pattern: soften on small viewports --- */
    body.new-landing .nl-wave {
        width: 120%;
        right: -10%;
        opacity: 0.35;
    }

    /* --- footer: 2-row layout ---
           Row 1: © 2026 AHOY TECHNOLOGIES INC. (full width, centered)
           Row 2: HELLO@AHOY.AI | PRIVACY POLICY | TERMS OF SERVICE
                  (3 equal cells with vertical dividers between them) */
    body.new-landing .nl-footer {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto;
    }
    body.new-landing .nl-footer-cell {
        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) — 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;
    }
}