/* ==========================================================================
   Marketing Landing Page
   Single-file stylesheet for the early-access one-pager at `/`.
   Reuses tokens from /css/base.css where possible; landing-specific tokens
   live here, scoped to `.landing`.
   ========================================================================== */

/* Self-hosted Google Fonts (Inter + Domine) as variable fonts. Served
   same-origin to avoid leaking visitor IP/User-Agent to Google per GDPR.
   `font-display: swap` matches Google's &display=swap behaviour so first-
   paint FOUT is unchanged. One file per family covers every weight used. */
@font-face {
    font-family: 'Inter';
    src: url('/layouts/marketing/assets/fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Domine';
    src: url('/layouts/marketing/assets/fonts/domine-variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

/* iOS Safari doesn't reliably propagate body's overflow-x: hidden to the
   viewport — absolutely-positioned descendants (hero thumbs at
   calc(50% − 980px), the 1812px hero glow, etc) can still grow the
   scrollable width. Clip at the html level too so the page can't scroll
   horizontally on any device. Scoped via class so portfolio pages are
   unaffected. */
html.landing-html,
html.landing-html body {
    overflow-x: hidden;
}

.landing {
    /* Landing tokens — harvested from the Figma file. Scoped to .landing so
       the portfolio stack (Inter-only on base.css) is unaffected. */

    /* Typography */
    --landing-font-display: 'Domine', ui-serif, Georgia, serif;  /* hero headline (was Bricolage) */
    --landing-font-serif: 'Domine', ui-serif, Georgia, serif;    /* section headings */
    --landing-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;  /* brand + UI (was Instrument Sans) */
    --landing-font-mono: 'Inter', -apple-system, sans-serif;     /* body / nav (already Inter) */

    /* Brand / surface colors */
    --landing-ink: #131115;                /* near-black text */
    --landing-ink-soft: #4f4f4f;           /* secondary text */
    --landing-ink-muted: #7b7b7b;          /* tertiary text */
    --landing-paper: #fbf9f3;              /* warm off-white page bg */
    --landing-paper-alt: #efece3;          /* slightly warmer cream */
    --landing-surface: #ffffff;            /* card surface */
    --landing-hairline: #e7e7e5;           /* divider lines */
    --landing-placeholder-bg: #d9d9d9;     /* grey placeholder boxes */

    /* Hero greens (dark gradient) */
    --landing-hero-deepest: #0a1301;
    --landing-hero-deep: #141c0b;
    --landing-hero-mid: #192110;
    --landing-hero-light: #202f04;
    --landing-hero-bg: radial-gradient(120% 80% at 50% 100%,
        #202f04 0%, #192110 40%, #141c0b 75%, #0a1301 100%);

    /* CTA band (chartreuse) */
    --landing-cta-bg: #ebff00;
    --landing-cta-bg-soft: #eefb9e;
    --landing-cta-fg: #1b1b1b;

    /* Pink accent (used in admin-showcase / feature illustrations) */
    --landing-accent-pink: #c7387f;
    --landing-accent-pink-deep: #8a2055;
    --landing-accent-pink-soft: #f6d4e7;

    /* Dark inverse (buttons, device frames) */
    --landing-ink-inverse: #1b1b1b;
    --landing-text-inverse: #fbf9f3;

    /* Radii */
    --landing-radius-sm: 10px;
    --landing-radius: 14px;
    --landing-radius-lg: 20px;
    --landing-radius-pill: 49px;

    /* Layout */
    --landing-section-pad-y: 160px;
    --landing-container-max: 1200px;
    --landing-container-pad: 80px;  /* desktop gutter — scaled down per media query below */

    font-family: var(--landing-font-sans);
    color: var(--landing-ink);
    background: #ffffff;
    position: relative;
    isolation: isolate;
    overflow-x: hidden;  /* the vignette pseudo is 5000px wide; clip any overflow */
    line-height: 1.4;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Outer cream blob — matches Figma's 3664×3555 ellipse (filled cream, blurred
   200px over the white root). Anchored to the top of the landing, not the
   viewport, so it stays in place as the user scrolls. */
.landing::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    width: 5000px;
    height: 2500px;
    border-radius: 50%;
    background: #fbf9f3;
    filter: blur(50px);
    z-index: -1;
    pointer-events: none;
}

.landing * { box-sizing: border-box; }
.landing img { max-width: 100%; height: auto; display: block; }

/* Click gradients — each pointerdown appends one of these (JS in
   click-effect.js) into .landing-click-layer. They scroll with the content
   and stay forever until page refresh. The parent layer clips overflow so
   gradients placed near page edges can't extend the scroll area. */
.landing-click-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}
img.click-gradient {
    position: absolute;
    width: 500px;
    height: 500px;
    max-width: none;
    transform: translate(-50%, -50%);
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 600ms ease-out;
}
img.click-gradient.is-visible { opacity: 1; }

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

/* ==========================================================================
   Nav (sits over the hero's light cream background)
   ========================================================================== */

.landing-nav {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--landing-container-pad);
    z-index: 10;
}

.landing-nav-brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
}

.landing-nav-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    flex-shrink: 0;
}
.landing-nav-brand-mark svg { width: 100%; height: 100%; display: block; }

.landing-nav-brand-text {
    font-family: var(--landing-font-sans);  /* Inter Medium */
    font-size: 22.82px;
    font-weight: 500;
    line-height: 1.19;
    letter-spacing: -0.59px;
    color: #141c0b;
    white-space: nowrap;
}

.landing-nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.landing-nav-signin {
    font-family: var(--landing-font-sans);  /* Inter */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.17;
    color: var(--landing-hero-mid);  /* #192110 */
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.landing-nav-signin:hover { background: rgba(0, 0, 0, 0.06); }

.landing-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    border-radius: 8.66px;
    background: var(--landing-hero-mid);  /* #192110 */
    color: var(--landing-paper);  /* #fbf9f3 */
    font-family: var(--landing-font-sans);  /* Inter */
    font-size: 16px;
    font-weight: 400;
    line-height: 1.17;
    text-decoration: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.landing-nav-cta:hover { transform: scale(1.03); }

/* ==========================================================================
   Hero
   ========================================================================== */

.landing-hero {
    position: relative;
    padding: 180px var(--landing-container-pad) 100px;
    text-align: center;
    background: transparent;
    color: var(--landing-hero-deepest);
    isolation: isolate;
    /* no overflow: hidden — lets the green glow's blur feather softly
       into the section below instead of stopping at a hard edge. */
}

/* Large green gradient image (exported from Figma at 2x).
   Size is locked proportional to the phone (383px fixed) — doesn't scale
   with the viewport, so the glow stays the same size relative to the phone. */
img.landing-hero-glow {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: 1812px;
    max-width: none;  /* beats .landing img's max-width: 100% at matching specificity */
    height: auto;
    z-index: -2;
    pointer-events: none;
    user-select: none;
}

/* Gradient overlay that tucks the phone's bottom into the green bg
   (sits between the showcase and the strip in source order so it renders
   on top of the phone but behind the glass tiles). Also locked to a fixed
   size so it tracks the phone, not the viewport. */
img.landing-hero-phone-gradient {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translateX(-50%);
    width: 1351px;
    max-width: none;  /* beats .landing img's max-width: 100% at matching specificity */
    height: auto;
    z-index: 2;
    pointer-events: none;
    user-select: none;
}

.landing-hero-grain { display: none; }

/* Film-grain overlay for the green gradient sections (CTA band + footer).
   Sits BEHIND the content (via negative z-index inside the section's
   isolated stacking context) so it only textures the green bg. */
.landing-cta-band::after,
.landing-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='800'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.08 0 0 0 0 0.02 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 640px 640px;
    opacity: 0.22;
    mix-blend-mode: multiply;
    z-index: -1;
}

/* Grain is only visible where the gradient has fully turned green —
   keep cream/white areas clean so the texture doesn't grey them out. */
.landing-cta-band::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 60%, black 85%, black 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 60%, black 85%, black 100%);
}

.landing-footer { position: relative; }

.landing-hero-eyebrow {
    position: relative;
    margin: 0 0 32px;
    display: flex;
    justify-content: center;
}

.landing-hero-eyebrow-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 167px;
    height: 48px;
    font-family: var(--landing-font-serif);  /* Domine Regular */
    font-size: 18px;
    font-weight: 400;
    line-height: 1.17;
    color: var(--landing-hero-mid);  /* #192110 */
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #ffffff;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 10px;
}

.landing-hero-title {
    font-family: var(--landing-font-display);
    font-size: clamp(52px, 9vw, 90px);
    font-weight: 400;
    font-optical-sizing: auto;
    font-variation-settings: 'opsz' 96, 'wdth' 100;
    line-height: 0.99;
    letter-spacing: -0.03em;
    margin: 0 auto 32px;
    max-width: 780px;
    color: var(--landing-hero-deepest);
}

.landing-hero-subtitle {
    font-family: var(--landing-font-sans);
    font-size: 22px;
    line-height: 1.3;
    color: var(--landing-hero-deepest);
    margin: 0 auto 80px;
    max-width: 620px;
    font-weight: 400;
}

/* Showcase is a positioning stage — phone locked to true center,
   thumbs slot-positioned around it so they can rotate via JS. */
.landing-hero-showcase {
    position: relative;
    z-index: 1;
    margin: 0 auto -120px;
    height: 720px;  /* tallest child (phone + margin) */
    max-width: 1540px;
}

.landing-hero-phone {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 383px;
    height: 554px;
    z-index: 2;  /* above thumbs */
}

/* Phone screen overlay — the 5th image in the carousel flow.
   Sits over the phone's screen area; cross-fades on each tick. */
.landing-hero-phone-screen {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 355px;
    height: 495px;
    object-fit: cover;
    border-radius: 34px;
    z-index: 1;  /* above phone frame */
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
}
.landing-hero-phone-screen.is-current { opacity: 1; }
.landing-hero-phone-screen.is-next    { opacity: 0; }
.landing-hero-phone.is-swapping .is-current { opacity: 0; }
.landing-hero-phone.is-swapping .is-next    { opacity: 1; }

.landing-hero-thumb {
    position: absolute;
    width: 220px;
    height: 220px;
    overflow: hidden;
    border-radius: 8.2px;
    background: var(--landing-placeholder-bg);
    transition:
        top 900ms cubic-bezier(0.25, 0.1, 0.25, 1),
        left 900ms cubic-bezier(0.25, 0.1, 0.25, 1),
        opacity 700ms ease;
    will-change: top, left, opacity;
}

.landing-hero-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
}

/* Thumbs never change size — only their position and opacity animate.
   Positions are calculated for a uniform 40px gap between every visible slot
   (thumb-to-thumb and thumb-to-phone alike). Phone is 383px wide (±191.5
   from center), thumbs are 220px, so edges land at:
     state 1 far-left:    −712 → −492
     state 2 inner-left:  −452 → −232   (232 - 191.5 = 40.5 gap to phone)
     state 3 phone:       invisible at center
     state 4 inner-right: +232 → +452
     state 5 far-right:   +492 → +712 */
.landing-hero-thumb[data-state="0"] { top: -110px; left: calc(50% - 980px); opacity: 0; }
.landing-hero-thumb[data-state="1"] { top:    0px; left: calc(50% - 712px); opacity: 1; }
.landing-hero-thumb[data-state="2"] { top:  180px; left: calc(50% - 452px); opacity: 1; }
.landing-hero-thumb[data-state="3"] { top:  180px; left: calc(50% - 110px); opacity: 0; }
.landing-hero-thumb[data-state="4"] { top:  180px; left: calc(50% + 232px); opacity: 1; }
.landing-hero-thumb[data-state="5"] { top:    1px; left: calc(50% + 492px); opacity: 1; }
.landing-hero-thumb[data-state="6"] { top: -110px; left: calc(50% + 760px); opacity: 0; }

.landing-hero-phone img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,0.65) 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, rgba(0,0,0,0.65) 86%, transparent 100%);
}

/* Small glass tiles sit behind the phone and extend left/right */
.landing-hero-strip {
    display: flex;
    gap: 28px;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0 auto;
    max-width: 1160px;
    padding: 0 20px;
    position: relative;
    z-index: 3;
}

.landing-hero-strip-tile {
    width: 254px;
    height: 240px;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid #ffffff;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: 10px;
    flex-shrink: 0;
}

/* ==========================================================================
   Generic Section
   ========================================================================== */

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

.landing-section--center { text-align: center; }
.landing-section--surface { background: var(--landing-surface); max-width: none; }
.landing-section--dark { background: var(--landing-hero-deepest); max-width: none; }

.landing-section--surface,
.landing-section--dark {
    /* Full-bleed sections re-apply the container width internally */
    padding-left: 0;
    padding-right: 0;
}

.landing-section--surface > *,
.landing-section--dark > * {
    max-width: var(--landing-container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--landing-container-pad);
    padding-right: var(--landing-container-pad);
}

.landing-section-heading {
    margin: 0 0 48px;
}

.landing-section-heading--center { text-align: center; }

.landing-section-heading h2 {
    font-family: var(--landing-font-serif);
    font-size: clamp(34px, 5vw, 50px);
    font-weight: 400;
    line-height: 0.99;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
    color: var(--landing-hero-light);  /* #202f04 — deep green */
}

.landing-section-kicker {
    font-family: var(--landing-font-mono);  /* Inter */
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: rgba(32, 47, 4, 0.7);
    margin: 0;
    max-width: 580px;
}

.landing-section-heading--center .landing-section-kicker {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   "For the busy creative" — XL centered heading + two alternating rows
   ========================================================================== */

.landing-busy {
    max-width: 1220px;
}

.landing-busy-heading {
    margin: 0 auto 100px;
    text-align: center;
}

.landing-busy-heading h2 {
    font-family: var(--landing-font-serif);
    font-size: clamp(48px, 7vw, 70px);
    font-weight: 400;
    line-height: 0.99;
    letter-spacing: -0.04em;
    color: var(--landing-hero-light);
    margin: 0;
    max-width: 680px;
    display: inline-block;
}

.landing-busy-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    margin-bottom: 80px;
}

.landing-busy-row:last-child { margin-bottom: 0; }

.landing-busy-row--reverse .landing-busy-text { order: 2; }
.landing-busy-row--reverse .landing-busy-img { order: 1; }

.landing-busy-text { max-width: 520px; }

.landing-busy-title {
    font-family: var(--landing-font-serif);
    font-size: clamp(36px, 5vw, 50px);
    font-weight: 400;
    line-height: 0.99;
    letter-spacing: -0.03em;
    color: var(--landing-hero-light);
    margin: 0 0 24px;
}

.landing-busy-body {
    font-family: var(--landing-font-mono);
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: rgba(32, 47, 4, 0.7);
    margin: 0;
}

.landing-busy-img {
    aspect-ratio: 580 / 347;
    background: var(--landing-paper-alt);
    border-radius: var(--landing-radius-lg);
}

/* ==========================================================================
   Audience tag cloud
   ========================================================================== */

.landing-audience {
    padding-top: 120px;
    padding-bottom: 120px;
}

.landing-tags {
    margin: 56px auto 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    max-width: 1100px;
}

.landing-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.landing-tag {
    display: inline-flex;
    align-items: center;
    padding: 16px 20px 14px 20px;
    background: var(--landing-cta-bg-soft);
    color: var(--landing-ink-inverse);
    border-radius: 0;
    font-family: var(--landing-font-display);
    font-size: clamp(20px, 1.9vw, 31px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.01em;
    white-space: nowrap;
    font-variation-settings: 'opsz' 12;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 1600ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 1600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: background-color, border-radius;
}

.landing-tag--pink,
.landing-tag--pink-hover {
    background: var(--landing-accent-pink-soft);  /* #f6d4e7 */
    border-radius: 60px;                          /* matches Figma rounded-[60.327px] */
}


/* ==========================================================================
   Résumé showcase ("Easily update and share your resume")
   ========================================================================== */

.landing-admin-section {
    max-width: 1220px;
    position: relative;
}

/* Soft cream rounded-rectangle behind the résumé section (matches Figma). */
.landing-admin-section::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 1500px;
    aspect-ratio: 1965 / 1400;
    background: #fbf9f3;
    border-radius: 18%;
    filter: blur(25px);
    z-index: -1;
    pointer-events: none;
}

.landing-resume-stage {
    position: relative;
    margin: 20px auto 0;
    width: 100%;
    max-width: 1100px;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Résumé card — simple image, borders/shadow applied around it. */
.landing-resume {
    position: relative;
    z-index: 1;
    width: 343px;
    height: 485px;
    object-fit: cover;
    background: #ffffff;
    border: 0.576px solid rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}

/* Floating placeholder cards — positioned asymmetrically, stacked IN FRONT of the résumé. */
.landing-resume-float {
    position: absolute;
    z-index: 3;
    width: 316px;
    height: 91px;
    border-radius: 14px;
    background: #d9d9d9;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.06);
}
.landing-resume-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
.landing-resume-float--tl { top: 10px;     left: calc(50% - 470px); }
.landing-resume-float--mr { top: 130px;    right: calc(50% - 450px); }
.landing-resume-float--bm { bottom: 20px;  left: calc(50% - 300px); }

/* ==========================================================================
   "Focus on the work" — pill feature cards
   ========================================================================== */

.landing-focus {
    max-width: 1320px;
    margin-top: 80px;
    margin-bottom: 60px;
}

.landing-focus .landing-section-kicker {
    text-align: center;
    margin: 0 auto 60px;
}

/* Project badges — small thumbnail stack + pink counter + label, 3+2 grid */
.landing-project-badges {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 36px 48px;
    justify-content: center;
    max-width: 900px;
}

.landing-project-badge {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    position: relative;
    padding-left: 4px;
    padding-top: 4px;
}

.landing-project-badge-stack {
    position: relative;
    display: inline-block;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

.landing-project-badge-stack img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border-radius: 7px;
    object-fit: cover;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.landing-project-badge-stack img:nth-child(1) {
    width: 42px; height: 57px;
    transform: translate(-50%, -50%) rotate(-12deg);
}
.landing-project-badge-stack img:nth-child(2) {
    width: 57px; height: 42px;
    transform: translate(-50%, -50%) rotate(4deg);
}
.landing-project-badge-stack img:nth-child(3) {
    width: 50px; height: 50px;
    transform: translate(-50%, -50%) rotate(0deg);
}

.landing-project-badge-count {
    position: absolute;
    top: -6px;
    left: 42px;
    min-width: 33px;
    height: 33px;
    padding: 0 6px;
    background: var(--landing-accent-pink-soft);  /* #f6d4e7 */
    border-radius: 9px;
    font-family: var(--landing-font-display);  /* Domine */
    font-weight: 600;
    font-size: 22px;
    color: var(--landing-ink-inverse);  /* #1b1b1b */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.landing-project-badge-label {
    font-family: var(--landing-font-display);
    font-weight: 400;
    font-size: 22px;
    margin-left: 8px;
    letter-spacing: -0.01em;
    color: var(--landing-ink-inverse);
    white-space: nowrap;
}

/* ==========================================================================
   "Works" dark-green textured band
   ========================================================================== */

.landing-works-band {
    padding: 40px var(--landing-container-pad);
    max-width: 1280px;
}

.landing-works-card {
    position: relative;
    aspect-ratio: 1182 / 504;
    background-color: #2a3d05;
    border-radius: 29px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
    isolation: isolate;
    --parallax-y: 0px;
}

/* Background lives on a pseudo-element that's taller than the card so the
   parallax translate never exposes an edge. JS updates --parallax-y on scroll
   via requestAnimationFrame for smooth, non-hacky motion. */
.landing-works-card::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 0;
    right: 0;
    bottom: -30%;
    background-image: url('/layouts/marketing/assets/cta-texture.jpg');
    background-size: cover;
    background-position: center;
    transform: translate3d(0, var(--parallax-y), 0);
    will-change: transform;
    z-index: -1;
    pointer-events: none;
}

/* Pink glow cone coming down from the top of the card. */
.landing-works-glow {
    position: absolute;
    top: -19%;
    left: 50%;
    transform: translateX(-50%);
    width: 54%;
    max-width: 640px;
    height: auto;
    pointer-events: none;
    object-fit: contain;
}

/* Pink "works" folder sitting below the glow. */
.landing-works-folder {
    position: absolute;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    width: 19%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}

/* Thumbnail stack + cursor on the right. */
.landing-works-cursor {
    position: absolute;
    top: 30%;
    right: 22%;
    transform: translateY(-50%);
    width: 18%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}

/* ==========================================================================
   "Made to share" — profile card placeholders
   ========================================================================== */

.landing-made-to-share { max-width: 1280px; }

.landing-profile-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
    margin-top: 56px;
}

.landing-profile-card {
    padding: 58px 28px 24px;
    background: var(--landing-paper);  /* #fbf9f3 */
    border-radius: 37px;
    text-align: center;
    min-height: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.landing-profile-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--landing-placeholder-bg);
    border: 1px solid rgba(198, 198, 198, 0.5);
    margin: 0 0 28px;
}

.landing-profile-name {
    font-family: var(--landing-font-mono);
    font-size: 18.5px;
    font-weight: 600;
    color: #000;
    margin: 0 0 4px;
    letter-spacing: 0.01em;
}

.landing-profile-role {
    font-family: var(--landing-font-mono);
    font-size: 18.5px;
    font-weight: 400;
    color: #000;
    margin: 0 0 auto;
}

.landing-profile-pills {
    display: flex;
    gap: 10px;
    margin: 24px 0 24px;
    justify-content: center;
    width: 100%;
}

.landing-profile-pill {
    flex: 1;
    max-width: 104px;
    height: 40px;
    background: #e7e7e5;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--landing-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: #000;
    letter-spacing: 0.01em;
}

/* ==========================================================================
   Device screenshots band — three dark cards (matches Figma #242424)
   ========================================================================== */

.landing-devices-section { max-width: 1380px; padding-top: 200px; padding-bottom: 120px; }

.landing-devices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: center;
}

.landing-device {
    aspect-ratio: 576 / 374;
    background: #242424;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
    padding: 12px;
    overflow: hidden;
}

.landing-device--center {
    transform: translateY(-53px);  /* matches Figma stagger (280 vs 386) */
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
}

.landing-device-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    background: #000;  /* fallback while loading */
}

/* ==========================================================================
   Early-access CTA band + form
   ========================================================================== */

.landing-cta-band {
    background: linear-gradient(
        180deg,
        #ffffff00 0%,
        #fbf9f300 20%,
        var(--landing-paper) 60%,
        var(--landing-cta-bg-soft) 85%,
        var(--landing-cta-bg-soft) 100%
    );
    color: var(--landing-hero-deepest);
    padding: 120px var(--landing-container-pad);
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.landing-cta-icon {
    display: inline-flex;
    width: 110px;
    height: 110px;
    margin: 0 auto 56px;
    position: relative;
}
.landing-cta-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 13.6866px 35.4837px rgba(151, 10, 88, 0.35));
}

.landing-cta-heading { margin: 0 auto 48px; max-width: 580px; position: relative; }

.landing-cta-card {
    position: relative;
    max-width: 1182px;
    margin: 0 auto;
    height: 246px;
    border-radius: 29px;
    overflow: hidden;
    background-color: #2a3d05;
    background-image: url('/layouts/marketing/assets/cta-texture.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 69px 0 75px;
}

.landing-cta-card .landing-form-row {
    width: 100%;
    background: transparent;
    padding: 0;
    border-radius: 0;
    gap: 0;
    align-items: center;
}

.landing-cta-card .landing-form-email {
    flex: 1;
    height: 105px;
    margin: 0;
    padding: 0 34px;
    border-radius: 12px;
    background: rgba(217, 217, 217, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fbf9f3;
    font-family: var(--landing-font-mono);  /* Inter */
    font-size: 26px;
    font-weight: 500;
    letter-spacing: -0.52px;
    line-height: 1.19;
}

.landing-cta-card .landing-form-email::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.landing-cta-card .landing-form-email:focus {
    outline: 2px solid var(--landing-accent-pink-soft);
    outline-offset: -3px;
}

.landing-cta-card .landing-form-submit {
    margin-left: 16px;
    width: 219px;
    height: 67px;
    padding: 0;
    border-radius: 20px;
    background: linear-gradient(180deg, #F6D4E7 0%, #E39CB9 100%);
    color: var(--landing-accent-pink-deep);
    font-family: var(--landing-font-sans);
    font-weight: 400;
    font-size: 29.7px;
    letter-spacing: -0.02em;
    line-height: 1.19;
}

.landing-cta-card .landing-form-submit:disabled {
    background: linear-gradient(180deg, #d9d9d9 0%, #b5b5b5 100%);
    color: #6b6b6b;
    opacity: 1;
}

.landing-cta-title {
    font-family: var(--landing-font-serif);
    font-size: clamp(36px, 5vw, 50px);
    font-weight: 400;
    line-height: 0.99;
    letter-spacing: -0.03em;
    margin: 0 0 24px;
    color: var(--landing-hero-light);
}

.landing-cta-subtitle {
    font-family: var(--landing-font-mono);
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    margin: 0;
    color: rgba(32, 47, 4, 0.7);
}

.landing-noscript-fallback {
    max-width: 480px;
    margin: 0 auto 24px;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: var(--landing-radius-sm);
    font-size: 14px;
    color: var(--landing-cta-fg);
}

.landing-noscript-fallback a { color: inherit; }

.landing-form {
    margin: 0 auto;
    text-align: left;
    position: relative;
}

.landing-form .landing-turnstile,
.landing-form .landing-form-consent,
.landing-form .landing-form-status {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.landing-form-row {
    display: flex;
    gap: 8px;
    background: var(--landing-hero-deepest);
    padding: 12px;
    border-radius: var(--landing-radius);
    align-items: center;
}

.landing-form-label-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.landing-form-email {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: none;
    background: transparent;
    color: var(--landing-paper);
    font-family: var(--landing-font-mono);
    font-size: 17px;
    letter-spacing: -0.2px;
}

.landing-form-email:focus {
    outline: 2px solid var(--landing-accent-pink);
    outline-offset: -2px;
    border-radius: 8px;
}

.landing-form-email::placeholder { color: rgba(251, 249, 243, 0.4); }

.landing-form-submit {
    padding: 12px 22px;
    border: none;
    border-radius: var(--landing-radius-sm);
    background: var(--landing-accent-pink-soft);
    color: var(--landing-accent-pink-deep);
    font-family: var(--landing-font-sans);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.landing-form-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.landing-form-submit:not(:disabled):hover { transform: scale(1.03); }

.landing-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.landing-turnstile {
    margin: 20px 0 0;
    display: flex;
    justify-content: center;
}

.landing-form-consent {
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.65);
    margin: 16px 0 0;
    line-height: 1.5;
}

.landing-form-consent a { color: inherit; text-decoration: underline; }

.landing-form-status {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    min-height: 1.4em;
}

.landing-form-status--ok { color: #1a5a1a; }
.landing-form-status--err { color: #9a2222; }

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer sits on the same pale yellow-green as the CTA band so the two read
   as one continuous block (no visible seam between them). */
.landing-footer {
    background: var(--landing-cta-bg-soft);
    padding: 0 var(--landing-container-pad) 34px;
    position: relative;
    isolation: isolate;
}

.landing-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 45px 0 30px;
    min-height: 87px;
    max-width: 1182px;
    margin: 0 auto;
    gap: 24px;
    flex-wrap: wrap;
    background: rgba(217, 217, 217, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.landing-footer-left {
    display: inline-flex;
    align-items: center;
    gap: 47px;                 /* space between the brand lockup and the copy */
    flex-wrap: wrap;
    font-family: var(--landing-font-mono);
    font-size: 14px;
    color: rgba(32, 47, 4, 0.7);
    letter-spacing: -0.28px;
    line-height: 1.4;
}

.landing-footer-lockup {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.landing-footer-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 31px;
    color: #141c0b;
    flex-shrink: 0;
}
.landing-footer-mark svg { width: 100%; height: 100%; display: block; }

.landing-footer-brand {
    font-family: var(--landing-font-sans);  /* Inter Medium */
    font-weight: 500;
    font-size: 20.67px;
    line-height: 1.19;
    color: #141c0b;
    letter-spacing: -0.5941px;
    white-space: nowrap;
}

.landing-footer-copy {
    margin: 0;
    white-space: nowrap;  /* keeps the full copyright line from breaking mid-string */
}

.landing-footer-links {
    display: flex;
    gap: 36px;
}

.landing-footer-links a {
    font-family: var(--landing-font-mono);
    font-size: 14px;
    color: rgba(32, 47, 4, 0.7);
    text-decoration: none;
    letter-spacing: -0.28px;
}

.landing-footer-links a:hover { color: var(--landing-hero-light); }

/* ==========================================================================
   Responsive — scales the container gutter token down at each breakpoint.
   Every horizontal padding that uses var(--landing-container-pad) follows
   automatically, so breakpoints mostly just retune the token + any specific
   layout flips (grids collapsing to single column, etc.).
   ========================================================================== */

@media (max-width: 1024px) {
    .landing {
        --landing-container-pad: 48px;
    }

    .landing-busy-row { gap: 48px; }
}

/* At 850px the layout flips to a single column. With no grid forcing tight
   gutters, horizontal margins grow a touch to give the content room, and the
   content column caps at 500px so it doesn't stretch awkwardly wide. */
@media (max-width: 850px) {
    .landing {
        --landing-section-pad-y: 100px;
        --landing-container-pad: 64px;   /* grows as multi-col collapses */
        --landing-container-max: 628px;  /* 500px column + 2 × 64px gutter */
    }

    /* Sections that override the container-max token need to match. */
    .landing-busy,
    .landing-admin-section,
    .landing-focus,
    .landing-made-to-share,
    .landing-works-band,
    .landing-devices-section {
        max-width: 628px;
    }

    .landing-nav { top: 20px; }

    .landing-hero { padding-top: 120px; padding-bottom: 60px; }

    .landing-busy-row { grid-template-columns: 1fr; gap: 32px; }
    .landing-busy-row--reverse .landing-busy-text { order: 0; }
    .landing-busy-row--reverse .landing-busy-img { order: 0; }

    .landing-features-row { grid-template-columns: 1fr; gap: 32px; }

    .landing-resume-float--tl,
    .landing-resume-float--mr,
    .landing-resume-float--bm { display: none; }
    .landing-profile-cards { grid-template-columns: 1fr; }
    .landing-devices { grid-template-columns: 1fr; }
    .landing-device--center { transform: none; }

    .landing-cta-band { padding-top: 60px; padding-bottom: 60px; }

    .landing-footer-inner { flex-direction: column; gap: 16px; align-items: flex-start; padding: 20px 24px; }
}

@media (max-width: 768px) {
    .landing {
        --landing-section-pad-y: 80px;
        --landing-container-pad: 40px;
    }

    .landing-hero-thumb { width: 80px; }
    .landing-hero-thumb--lead { width: 140px; }
}

@media (max-width: 480px) {
    .landing {
        --landing-container-pad: 20px;
    }

    .landing-nav-signin { display: none; }

    .landing-hero-showcase { gap: 12px; }
    .landing-hero-thumb { width: 56px; }
    .landing-hero-thumb--lead { width: 96px; }

    .landing-form-row {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .landing-form-submit { width: 100%; }
}