/* CloudSurf Landing Page — app.css
   Project-specific overrides on top of surf-ui.css.
   surf-ui.css provides: reset, nav, buttons, forms, sections, hero, footer,
   badges, empty-state, focus-visible, responsive nav, reduced-motion. */

/* ============================================================
   TYPOGRAPHY — Surf Display (self-hosted, fonts/dist canonical)
   Two faces only (Brady 2026-07-17): Black owns all emphasis
   (600–900), Regular owns body. The Medium cut was RETIRED — it
   reads as a different typeface next to Regular/Black (it carried
   every semibold: card titles, menu rows, form labels, strong).
   Weight 500 intentionally has no face: CSS font-matching resolves
   it down to Regular, so SurfDisplay-Medium.woff2 is never loaded.
   ============================================================ */

@font-face {
    font-family: "Surf Display";
    src: url("/static/fonts/SurfDisplay-Regular.woff2?v=20260811") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Surf Display";
    src: url("/static/fonts/SurfDisplay-Black.woff2?v=20260811") format("woff2");
    font-weight: 600 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Surf Display Mono";
    src: url("/static/fonts/SurfDisplayMono-Regular.woff2?v=20260811") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Surf Display Mono";
    src: url("/static/fonts/SurfDisplayMono-Bold.woff2?v=20260811") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Heading weights (Black 900 h1–h3), the hero clamp, and the +2–6px type
   scale were upstreamed into surf-ui.css as style-v2 spec defaults — the
   site inherits them; only the Surf Display face itself is brand-local. */

/* ============================================================
   VARIABLE OVERRIDES & ALIASES
   ============================================================ */

:root {
    /* ── Brand typeface tokens (surf-ui.css var-hooks) ───────────────────
       SURF DISPLAY ONLY (Brady 2026-08-11). No named third-party face
       appears anywhere on the site — no -apple-system, Segoe UI, Roboto,
       SF Mono, Fira Code, Cascadia, Menlo or Consolas. The bare generic
       keyword is kept as the last-resort safety net: it is not a typeface,
       and without it a failed woff2 load would drop to the browser default
       serif (Times), which is worse than the OS sans.

       `--font` matters as much as the rest: surfdoc.css sets
       `body { font-family: var(--font) }`, and the crate's default for it is
       a system stack. Leaving it unset meant everything OUTSIDE .surfdoc
       (nav, drawer, footer) rendered in the system font, not Surf Display.
       `--font-display` had no definition at all in either stylesheet, so
       .surfdoc-shell-drawer-link fell through to `inherit`. */
    --font: "Surf Display", sans-serif;
    --font-heading: "Surf Display", sans-serif;
    --font-body: "Surf Display", sans-serif;
    --font-sans: "Surf Display", sans-serif;
    --font-display: "Surf Display", sans-serif;
    --font-mono: "Surf Display Mono", monospace;

    /* Light mode (default) */
    --background: #fafafa;
    --surface: #ffffff;
    --surface-hover: #f0f0f2;
    --border: #e2e4e9;
    --text: #171717;
    --text-muted: #6b7280;
    --nav-bg: rgba(255, 255, 255, 0.45);
    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    --radius: 12px;
    --radius-sm: 8px;

    /* Aliases used in templates */
    --card: var(--surface);
    --card-hover: var(--surface-hover);
    --foreground: var(--text);
    --muted-foreground: var(--text-muted);

    /* surf-parse shell var-hooks → cloudsurf frosted-glass values. The shell
       geometry/structure ships in surfdoc.css; we only re-skin via these vars
       plus the bespoke backdrop-filter/sheen rules below. */
    --shell-nav-bg: rgba(255, 255, 255, 0.45);
    --shell-btn-bg: var(--glass-bg);
    --shell-drawer-bg: var(--glass-bg);
    --shell-drawer-link-hover-bg: rgba(255, 255, 255, 0.5);
    --shell-control-border: var(--glass-border);
    --shell-nav-h: 48px;

    /* surf-parse web-block component tokens (DOG-3) → cloudsurf values. These
       set ONLY token values; the matching app.css specificity-tie overrides were
       deleted now that surfdoc.css exposes the hooks. (var(--surface)/var(--radius)
       resolve per-theme at the consuming rule, so both themes stay correct.) */
    --ws-hero-btn-radius: 999px;                     /* hero CTAs are pills (Brady 2026-07-14) */
    --ws-banner-btn-radius: 999px;                   /* banner CTAs ("Start a project") too */
    --ws-cta-radius: 999px;                          /* standalone CTAs are pills too */
    --ws-feature-card-pad: 32px;
    --ws-feature-card-hover-transform: none;         /* cards never lift on hover */
    /* `surface` tiles render frosted-translucent so the sky shows through
       (crate default is the opaque theme surface). */
    --ws-tile-surface-bg: color-mix(in srgb, var(--surface) 22%, transparent);

    /* Landing glass carried site-wide (STYLE-6, corners revised 2026-07-18):
       every card surface is the same 22% surface tint the home value-tiles
       use — sky/starfield stays crisp through it (NO backdrop blur) — with
       iOS-style rounded corners (Brady 2026-07-18; supersedes the sharp-corner
       contract). CTAs stay pills. --surface flips per theme, so one value
       serves both themes. */
    --ws-feature-card-bg: color-mix(in srgb, var(--surface) 22%, transparent);
    --ws-feature-card-radius: 18px;
    --ws-post-card-bg: color-mix(in srgb, var(--surface) 22%, transparent);
    --ws-post-card-radius: 18px;
    --ws-pg-card-bg: color-mix(in srgb, var(--surface) 22%, transparent);
    --ws-pg-card-radius: 18px;
    --ws-pg-tile-radius: 16px;                       /* home/research tiles round softly (Brady 2026-07-14); hover outline+glow follow */
    --ws-details-bg: color-mix(in srgb, var(--surface) 22%, transparent);
    --ws-details-radius: 16px;
    /* Inputs carry more surface (45%) than display tiles — text entry needs a
       quieter backdrop than a display card, but the sky still reads through. */
    --ws-form-input-bg: color-mix(in srgb, var(--surface) 45%, transparent);
    --ws-control-radius: 12px;                       /* rounded inputs */
    --ws-radius-img: 12px;                           /* rounded icon chips + imgs */
    --ws-form-submit-radius: 999px;                  /* pill submit */
    /* Legal/doc-viewer sheet: reading surface — same 0.88 ink as .article
       (legibility over the drifting clouds), never the display-tile 0.2. */
    --ws-doc-page-bg: rgba(255, 255, 255, 0.88);
    --ws-doc-page-radius: 18px;
}

/* Glass product tiles (home): pure 0.2-alpha tint, NO backdrop blur — blur
   smeared the point-stars to nothing in dark mode and hazed the sky milky in
   light mode. The crisp backdrop through the tint IS the effect. */

/* Home product-tile emblems render monochrome over the glass: black in light
   mode, white in dark mode (transparent-bg brand marks → silhouettes). Scoped
   to .home — badge-style emblems elsewhere (research SurfDoc/SurfContext
   squares) keep their colors, a silhouette would erase them. */
.home .surfdoc-pg-tile-emblem { filter: brightness(0); width: 84px; height: 84px; }
[data-theme="dark"] .home .surfdoc-pg-tile-emblem { filter: brightness(0) invert(1); }
/* Surfspace leads the grid — its wave mark reads a notch larger (Brady
   2026-07-14, balancing the 124px-wide Mako swim Lottie beside it). */
.home .surfdoc-pg-tile[data-product="surfspace"] .surfdoc-pg-tile-emblem { width: 104px; height: 104px; }

/* Each product tile hovers/pills in its own accent (the crate's hover
   outline + glow and both CTA pills all read var(--product-accent)):
   grid green, reef coral, wavesite indigo, the blues for the blue brands.
   Value tiles (Innovate/Simplify/Scale) keep the site accent. */
.surfdoc-pg-tile[data-product="surfspace"] { --product-accent: #2E8AD8; }
.surfdoc-pg-tile[data-product="mako"] { --product-accent: #1E80D6; }
.surfdoc-pg-tile[data-product="surf-grid"] { --product-accent: #10B981; }
.surfdoc-pg-tile[data-product="surf-reef"] { --product-accent: #F0744A; }
.surfdoc-pg-tile[data-product="wavesite"] { --product-accent: #5B6EE8; }
.surfdoc-pg-tile[data-product="surfdoc"] { --product-accent: #D97706; }
.surfdoc-pg-tile[data-product="surfcontext"] { --product-accent: #6366f1; }

/* Mako tile emblem is the swim-loop Lottie (mako-lottie.js swaps it in;
   static PNG stays for reduced-motion / no-JS / load failure). The mono
   silhouette treatment carries over via fill: currentColor — the tile ink
   is var(--text), so it's black in light and white in dark like the PNGs. */
.home .mako-swim { width: 124px; height: 84px; margin-bottom: var(--ws-space-2xs); }
.home .mako-swim svg path { fill: currentColor; }

[data-theme="dark"] {
    --background: #050510;
    --surface: rgba(12, 12, 28, 0.85);
    --surface-hover: rgba(20, 20, 40, 0.9);
    --border: rgba(255, 255, 255, 0.08);
    --text: #e5e5e5;
    --text-muted: #8a8a9a;
    --nav-bg: rgba(10, 10, 24, 0.45);
    --glass-bg: rgba(22, 22, 40, 0.5);
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);

    --shell-nav-bg: rgba(10, 12, 24, 0.55);
    --shell-btn-bg: var(--glass-bg);
    --shell-drawer-bg: var(--glass-bg);
    --shell-drawer-link-hover-bg: rgba(255, 255, 255, 0.08);
    --shell-control-border: var(--glass-border);

    /* Reading sheets pin their own ink per theme (rgba literals, not --surface,
       so the alpha is exact); display-card tokens flip via --surface instead. */
    --ws-doc-page-bg: rgba(10, 10, 24, 0.88);
}

/* Toy-Story sky, seam-free by construction: the blue is a pure CSS gradient
   (no image, so it can never show a tile seam) painted on <html> and pinned to
   the viewport (`fixed`), and the clouds are a separate TRANSPARENT png tiled
   over it on <body>. Decoupling the color from the clouds is what kills the
   old three-band seam — the gradient is continuous at any page length, and the
   cloud tile is transparent so repeating it produces no edge. The page color
   matches the gradient's settle color (#e9f5fd — lightened from #aae2fa,
   Brady 2026-07-18: whiter sky, less saturated blue) so the first paint,
   before the gradient renders, is already sky-tinted with no flash. */
html { background-color: #e9f5fd; }

/* The sky lives on <body> so it overrides surf-parse's `body { background:
   var(--background) }` (#fafafa) default. Three layers, no seam possible:
   the transparent clouds png tiled on top, a short light-crown gradient band
   pinned to the very top (no-repeat, fixed height), and the solid #e9f5fd
   fill below from background-color. The color is pure CSS, so it can never
   show a tile seam; the cloud tile is transparent, so repeating it adds no edge.
   Clouds render at 1800px (was 1100px; source PNG is 2000px so still crisp) —
   larger puffs, fewer per viewport = the sparser sky Brady asked for. */
body {
    background-color: #e9f5fd;
    background-image:
        url('/assets/clouds-bg.png'),
        linear-gradient(to bottom, #ffffff 0%, #e9f5fd 100%);
    background-repeat: repeat, no-repeat;
    background-size: 1800px auto, 100% 620px;
    background-position: center top, center top;
    background-attachment: scroll, scroll;
}
/* Below 1200px the fixed 1800px tile shows only its middle slice — the
   left/right alternating puffs sit off-screen and the sky looks
   center-clustered (worst around 750–900px). Scale to 150% of the viewport
   instead: the full left-right cloud rhythm spans the screen at every width,
   and at exactly 1200px, 150% = 1800px, so the handoff to the fixed desktop
   tile is seamless. */
@media (max-width: 1199.98px) {
    body { background-size: 150% auto, 100% 620px; }
}

/* data-theme lives ON <html>, so the root override must be html[data-theme],
   not a descendant selector. Dark clears the light gradient + clouds. */
html[data-theme="dark"] {
    background-color: #050510;
    background-image: none;
}

[data-theme="dark"] body {
    background: var(--background) url('/assets/stars-tile.png');
    background-attachment: fixed;
}

/* Sticky footer: short pages (news) otherwise float the footer mid-viewport
   with a dead band below it. Both shells (public surfdoc + legacy admin)
   render <main> and the footer as direct body children; fixed-position
   chrome (nav, drawer, scrim, chat widget) is out of flow and unaffected. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main {
    flex: 1 0 auto;
}

/* ============================================================
   SHELL RE-SKIN (doc.surf frosted-glass flavor)
   surf-parse (surfdoc.css) owns the shell geometry, background, and borders
   via --shell-* vars (assigned above). These rules layer ONLY cloudsurf's
   bespoke liquid-glass effects (backdrop blur + inner sheen) on top — the
   one thing the var-hooks can't express.
   ============================================================ */

/* Liquid-glass top bar: heavy blur + saturation, an inner top sheen, and a
   soft drop shadow so it reads as a pane of glass floating over the sky. */
.surfdoc-shell-nav {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 24px rgba(15, 23, 42, 0.07);
}

[data-theme="dark"] .surfdoc-shell-nav {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* The reading-frame capsule back button keeps the frosted-glass
   treatment (the nav's menu + theme buttons are icon-only — see the
   NAV LAYOUT section). */
.surfdoc-doc-back {
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ============================================================
   NAV LAYOUT (apple.com-style bar)
   Emblem-only brand on the left, inline links dead-centered on
   desktop, controls clustered on the right. Below the inline-link
   breakpoint (1024px, set by surf-parse) the hamburger rides the
   right edge with the theme toggle at its left.
   ============================================================ */

/* Emblem-only brand: hide the wordmark in the top bar on every screen
   size. The drawer head and footer keep theirs. Visually hidden (not
   display:none) — the emblem img has alt="", so this span is the brand
   link's only accessible name. */
.surfdoc-shell-nav .surfdoc-shell-brand > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Anchor for the absolutely-centered inline links. 48px bar total:
   44px controls + 2px top/bottom (keep --shell-nav-h in sync). */
.surfdoc-shell-nav-inner {
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Icon-only controls: strip the crate's circular chrome from the bar's
   menu + theme buttons. The 44px accessible hit target stays. */
.surfdoc-shell-menu-btn,
.surfdoc-shell-theme-toggle {
    border: none;
    background: transparent;
    box-shadow: none;
}
.surfdoc-shell-menu-btn:hover,
.surfdoc-shell-theme-toggle:hover { background: transparent; }

/* Mono brand emblem (cloudsurf-mark.svg — the cs-27 mark, square canvas).
   The nav and footer treatments are INTENTIONALLY monochrome: brightness(0)
   flattens the csBlue gradient to a solid silhouette, black on light and white
   on dark. The gradient itself shows everywhere else the mark appears (drawer,
   hero, favicons, og-image). Drop the filter to let the nav go full-colour. */
.surfdoc-shell-emblem {
    width: 34px;
    height: 34px;
    filter: brightness(0);
}
[data-theme="dark"] .surfdoc-shell-emblem { filter: brightness(0) invert(1); }

/* Footer emblem: same mono treatment, sized against the wordmark. The mark's
   ink is landscape in a square canvas — only 64.8% of the box height — so a
   1.08rem box puts the ink at exact cap height (0.70em). Brady ruled that a
   hair small optically (2026-08-12); 1.4rem renders the ink ~14.5px beside
   11.2px caps — deliberately a touch over cap height, still far from the
   34px it replaced. The crate default also sets 6px border-radius,
   meaningless on a transparent mark, so clear it. */
.surfdoc-shell-footer-emblem {
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 0;
    filter: brightness(0);
    /* Flex-centering leaves the ink bottom 3px below the wordmark baseline
       (measured at 2x); lift it so both sit on the same baseline. */
    transform: translateY(-3px);
}
[data-theme="dark"] .surfdoc-shell-footer-emblem { filter: brightness(0) invert(1); }

/* NVIDIA Inception badge (news article). The badge artwork carries its own
   white field and black keyline, which is why it reads on light AND dark
   pages — NEVER filter/invert/recolor it (NVIDIA brand rule: badge colors
   must not be altered). Override the crate's 16/9 cover box so the 501×217
   badge renders whole at its natural proportions, at a modest width so it
   stays subordinate to the CloudSurf brand on the page. */
.surfdoc-figure-img:has(> img[src*="nvidia-inception-program-badge"]) {
    aspect-ratio: auto;
    background: transparent;
    border: none;
    display: block;
    width: min(220px, 100%);
    margin: 0 auto;
}
.surfdoc-figure-img:has(> img[src*="nvidia-inception-program-badge"])::after { content: none; }
.surfdoc-figure-img > img[src*="nvidia-inception-program-badge"] {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Slightly smaller theme glyph (44px hit target unchanged). */
.surfdoc-shell-theme-toggle svg {
    width: 16px;
    height: 16px;
}

@media (min-width: 834px) {
    /* Tighter desktop bar: 44px (controls flush, no vertical padding).
       Mobile keeps 48px. --shell-nav-h follows for content offset. */
    :root { --shell-nav-h: 44px; }
    .surfdoc-shell-nav-inner {
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Inline links replace the drawer on desktop: no hamburger.
       834px (not the crate's 1024px) is the desktop/mobile cutover —
       the display:flex override surfaces the links the crate would
       keep hidden until 1024px. */
    .surfdoc-shell-menu-btn { display: none; }

    /* True center of the bar, independent of the left/right cluster
       widths (a plain flex row would sit off-center). */
    .surfdoc-shell-nav-inline {
        display: flex;
        align-items: center;
        gap: 2px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin-left: 0;
    }
}

@media (max-width: 833.98px) {
    /* DOM order is menu, brand, spacer, CTA, theme — reorder so the
       hamburger is rightmost with the theme toggle to its left. */
    .surfdoc-shell-menu-btn { order: 10; }
    .surfdoc-shell-theme-toggle { order: 9; }

    /* The hamburger glyph is inset ~12px inside its 44px hit target, so the
       bar's 24px padding parked it ~36px off the screen edge. 12px bar
       padding puts the glyph at ~24px optical — matching the brand emblem's
       24px on the left. Hit target unchanged. */
    .surfdoc-shell-nav-inner { padding-right: 12px; }
}

/* ≥1200px: apple.com-style bar — the bar contents live inside the site's
   content column (--ws-band-inner, 1120px) instead of the full viewport:
   emblem at the column's left edge, links spread evenly between, theme
   toggle at its right edge. On wide screens the whole group holds the
   content width (whitespace grows equally outside it) — the logo and
   toggle never strand at the viewport corners, and never crowd the middle.
   834–1199px keeps the absolute-centered layout above. (Nav CTAs were
   removed 2026-07-18, so the toggle is the only right-side control.) */
@media (min-width: 1200px) {
    .surfdoc-shell-nav-inner {
        max-width: var(--ws-band-inner, 1120px);
        margin: 0 auto;
    }
    .surfdoc-shell-nav-spacer { display: none; }
    .surfdoc-shell-nav-inline {
        position: static;
        transform: none;
        flex: 1;
        justify-content: space-evenly;
        gap: 0;
        margin: 0;
    }
}

/* Hamburger -> X morph (apple.com menu): the glyph spins a quarter turn
   while the outer bars fold into a cross and the middle bar fades.
   Driven by `.drawer-open` on <html>, so it reverses on close. */
.surfdoc-shell-menu-btn svg {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.surfdoc-shell-menu-btn svg line {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
}
.drawer-open .surfdoc-shell-menu-btn svg { transform: rotate(90deg); }
.drawer-open .surfdoc-shell-menu-btn svg line:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
.drawer-open .surfdoc-shell-menu-btn svg line:nth-of-type(2) { opacity: 0; }
.drawer-open .surfdoc-shell-menu-btn svg line:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .surfdoc-shell-menu-btn svg,
    .surfdoc-shell-menu-btn svg line { transition: none; }
}

/* Apple.com-style large-type menu: big semibold rows in the drawer (the
   crate's --ws-drawer-link-* hooks), display face for the menu voice. */
:root {
    --ws-drawer-link-size: 1.375rem;   /* 22px */
    --ws-drawer-link-weight: 600;
}
.surfdoc-shell-drawer-link { font-family: var(--font-display, inherit); letter-spacing: -0.01em; }

/* iOS-style liquid-glass menu sheet: deep blur + inner sheen.
   The glass composites ONLY while open — the closed sheet now spans
   the whole viewport (see FULL-SCREEN MENU below), and an always-on
   invisible backdrop-filter layer over the page is a WebKit hit-test
   hazard: a style invalidation (e.g. the theme flipping) can make the
   hidden layer start swallowing clicks meant for the nav beneath it. */
.drawer-open .surfdoc-shell-drawer {
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    /* No panel trim on the full-screen sheet: a border or inset sheen
       on an edge-to-edge element reads as a stray hairline across the
       window (this rule outranks the border reset below, so keep these
       explicit). */
    border: none;
    box-shadow: none;
}

/* Soft glass blur behind the drawer scrim — same open-only scoping. */
.drawer-open .surfdoc-shell-scrim {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ============================================================
   FULL-SCREEN MENU (apple.com mobile menu)
   The crate's left drawer becomes a full-screen sheet that opens
   from the top: it fades in with a slight downward settle while
   the link rows cascade top-down (crate animation), and reverses
   on close. `visibility` keeps the closed sheet unclickable since
   it now overlays the page instead of parking off-screen left.
   ============================================================ */

.surfdoc-shell-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    border-radius: 0;
    border: none;
    opacity: 0;
    visibility: hidden;
    /* Belt to visibility's suspenders: the closed sheet overlays the
       viewport, so make click-through independent of hit-test quirks. */
    pointer-events: none;
    transform: translateY(-2.5%);
    transition:
        transform 400ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 400ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s linear 400ms;
}

.drawer-open .surfdoc-shell-drawer {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
        transform 400ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 400ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s;
}

/* One menu button: the bar's hamburger (already morphed into an X)
   stays above the open sheet and closes it — so the sheet's own
   head (brand + duplicate close button) is dropped, and the link
   list starts below the floating bar. */
.surfdoc-shell-drawer-head { display: none; }
.surfdoc-shell-drawer-inner { padding: 64px 24px 40px; }

/* Lift the bar above the open sheet (nav z:100 < sheet z:200) and
   strip its glass so only the controls float over the menu. */
.drawer-open .surfdoc-shell-nav {
    z-index: 300;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce) {
    .surfdoc-shell-drawer,
    .drawer-open .surfdoc-shell-drawer { transition: none; }
}

/* .nav-links survives ONLY for the admin/legacy shell (admin_nav / NAV_LOGIN
   in src/html.rs + src/routes/admin.rs). The old public-nav companions
   (.nav-site-link, .nav-cta, the mobile popout) were swept 2026-07-17 —
   the public shell is entirely surfdoc-shell-*. */
.nav-links {
    gap: 4px;
}

.nav-links a {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 4px;
    transition: background 150ms ease, color 150ms ease;
}

.nav-links a:hover {
    color: var(--text);
    background: var(--surface);
}

/* ============================================================
   BUTTON OVERRIDES
   ============================================================ */

.btn {
    border-radius: var(--radius-sm);
}

.btn-submit {
    width: 100%;
    margin-top: 8px;
}

.btn-danger {
    background: transparent;
    color: #ef4444;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

/* ============================================================
   SECTION OVERRIDES
   ============================================================ */

.section-inner {
    max-width: 960px;
    padding: 96px 24px;
}

.section-headline {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
}

/* ============================================================
   HERO OVERRIDES
   ============================================================ */

.hero {
    padding-top: 0;
}

.hero .section-inner {
    padding-top: 120px;
    padding-bottom: 80px;
}

.hero-headline {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.05;
    margin-bottom: 20px;
}

.hero-subtitle {
    max-width: 520px;
    margin-bottom: 40px;
}

/* Hero brand (unique to cloudsurf) */
.hero-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 28px;
}

.hero-emblem {
    width: 180px;
    height: 180px;
    margin-bottom: 8px;
}

.hero-brand-name {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}

/* ============================================================
   FORM OVERRIDES
   ============================================================ */

.form-group {
    margin-bottom: 16px;
}

/* Bare input/textarea styling (templates use <input> not .form-input) */
.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    transition: border-color 150ms ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer (surfdoc-shell-footer*) structure + skin ships in surfdoc.css and is
   palette-driven, so no overrides needed here. */

/* ============================================================
   BADGE OVERRIDE
   ============================================================ */

.badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 4px;
    border: none;
    letter-spacing: 0;
}

/* ============================================================
   PRODUCTS (unique to cloudsurf.com)
   ============================================================ */

.products-section {
    border-top: none;
}

.products-section .section-inner {
    padding-bottom: 48px;
}

.products-label {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
    margin-bottom: 16px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.products-label + .products-grid {
    margin-bottom: 40px;
}

.products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 680px;
    margin: 0 auto;
}

/* Single-item rows (e.g. Tools) span the full width instead of leaving a
   lopsided half-empty grid cell. */
.products-grid-single {
    grid-template-columns: 1fr;
}

.product-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 28px;
    color: var(--text);
    text-decoration: none;
    transition: all 200ms ease;
}

.product-card[data-product="surf"] { --product-accent: #2E8AD8; }
.product-card[data-product="mako"] { --product-accent: #1466B4; }
.product-card[data-product="wavesite"] { --product-accent: #2B6CB0; }
.product-card[data-product="surfdoc"] { --product-accent: #D97706; }
.product-card[data-product="surfcontext"] { --product-accent: #6366f1; }

/* If a row has an odd trailing card (e.g. 3 cards in a 2-col grid),
   center it under the pair instead of leaving it stuck to the left. */
.products-grid > .product-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 12px);
    margin-inline: auto;
    width: 100%;
}

.product-card:hover {
    background: var(--surface-hover);
    border-color: var(--product-accent, var(--accent));
    color: var(--text);
}

.product-body {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.product-emblem {
    border-radius: 8px;
    object-fit: contain;
    flex-shrink: 0;
}

.product-name {
    font-weight: 700;
    font-size: 1.125rem;
    display: block;
}

.product-tagline {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.product-arrow {
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 200ms ease, color 200ms ease;
}

.product-card:hover .product-arrow {
    color: var(--product-accent, var(--accent));
}

/* ============================================================
   ABOUT / VALUES (unique to cloudsurf.com)
   ============================================================ */

.about-section {
    border-top: none;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.value-card {
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.value-icon {
    color: var(--accent);
    margin-bottom: 16px;
}

.value-card h3 {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 8px;
}

.value-card p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ============================================================
   CONTACT FORM (unique to cloudsurf.com)
   ============================================================ */

.contact-section {
    border-top: none;
}

.contact-form {
    max-width: 640px;
    margin: 0 auto;
}

/* ============================================================
   LEGAL PAGES (unique to cloudsurf.com)
   ============================================================ */

.legal-section {
    padding-top: 0;
    color: var(--text);
}

.legal-section .section-inner {
    padding-top: 56px;
    padding-bottom: 32px;
}

.legal-updated {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 32px;
}

.legal-embed,
.legal-content .surfdoc-embed {
    margin-top: 24px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #fff;
}

.legal-embed iframe,
.legal-content .surfdoc-embed iframe {
    width: 100%;
    height: 80vh;
    border: none;
    display: block;
}

.legal-content {
    max-width: 720px;
    color: var(--text);
}

.legal-content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 32px;
    margin-bottom: 12px;
}

.legal-content p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
}

.legal-content ul {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 16px;
    padding-left: 24px;
}

.legal-content li {
    margin-bottom: 6px;
}

.legal-trademark {
    margin-top: 48px;
    padding-top: 24px;
    font-size: 0.875rem;
}

/* ============================================================
   BACK BUTTON (shared across subpages)
   ============================================================ */

/* iOS-style back: a rounded pill, tinted to the accent, with a chevron. */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: var(--accent);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--border);
    transition: background 150ms ease, transform 150ms ease;
    margin-bottom: 20px;
}

.back-link:hover {
    color: var(--accent);
    background: var(--surface-hover);
    text-decoration: none;
}

.back-link:active {
    transform: scale(0.97);
}

.back-link svg {
    width: 16px;
    height: 16px;
}

/* ============================================================
   SUPPORT PAGE (unique to cloudsurf.com)
   ============================================================ */

.support-hero { padding: 4rem 0 2rem; text-align: center; }
.support-hero h1 { font-size: 2.5rem; margin-bottom: 0.5rem; }
.support-subtitle { color: var(--text-muted); font-size: 1.1rem; }
.support-products { padding: 2rem 0; }
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }

.support-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    background: var(--surface);
}

.support-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.support-card p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }

.support-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.support-card ul li {
    padding: 0.25rem 0;
    padding-left: 1.2rem;
    position: relative;
}

.support-card ul li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--accent, #3b82f6);
}

.support-link {
    font-size: 0.85rem;
    color: var(--accent, #3b82f6);
    text-decoration: none;
}

.support-link:hover { text-decoration: underline; }
.support-contact { padding: 0 0 4rem; }
.support-contact .section-inner { max-width: 960px; margin: 0 auto; padding: 2rem 24px 0; }
.support-contact h2 { font-size: 1.5rem; margin-bottom: 0.5rem; text-align: center; }
.support-contact p { color: var(--text-muted); margin-bottom: 1.5rem; text-align: center; }
.support-email { margin-bottom: 2rem; text-align: center; }

.support-email a {
    font-size: 1.1rem;
    color: var(--accent, #3b82f6);
    text-decoration: none;
    font-weight: 500;
}

.support-email a:hover { text-decoration: underline; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   ADMIN LOGIN (unique to cloudsurf.com)
   ============================================================ */

.admin-login {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 120px);
    padding-top: 52px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.login-card h1 {
    font-size: 1.5rem;
    margin-bottom: 24px;
}

/* ============================================================
   STATS DASHBOARD (unique to cloudsurf.com)
   ============================================================ */

.stats-section {
    padding-top: 52px;
}

.stats-section .section-inner {
    padding-top: 80px;
    padding-bottom: 32px;
}

.stats-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.stats-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
}

.stats-mrr {
    font-size: 1.125rem;
    font-weight: 700;
    color: #22c55e;
}

.table-wrap {
    overflow-x: auto;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.stats-table th {
    text-align: left;
    padding: 8px 16px;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stats-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.stats-table th.num,
.stats-table td.num {
    text-align: right;
}

.stats-table tbody tr:hover {
    background: var(--surface);
}

.product-cell {
    font-weight: 700;
    white-space: nowrap;
}

.mrr-cell {
    color: #22c55e;
    font-weight: 600;
}

.highlights-cell {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.highlight-tag {
    display: inline-flex;
    gap: 4px;
    padding: 2px 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.highlight-tag strong {
    color: var(--text);
}

/* ============================================================
   INBOX (unique to cloudsurf.com)
   ============================================================ */

.inbox-section .section-inner {
    padding-top: 80px;
}

.stats-section + .inbox-section .section-inner {
    padding-top: 32px;
}

.inbox-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.inbox-header h1 {
    font-size: 1.75rem;
}

.inbox-count {
    font-size: 0.875rem;
    color: var(--accent);
    font-weight: 600;
}

.message-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message-row {
    padding: 20px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: opacity 300ms ease;
}

.message-row.unread {
    border-left: 3px solid var(--accent);
}

.message-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.875rem;
}

.message-sender {
    font-weight: 700;
    color: var(--text);
}

.message-email {
    color: var(--text-muted);
}

.message-time {
    color: var(--text-muted);
    margin-left: auto;
}

.message-subject {
    font-weight: 600;
    margin-bottom: 4px;
}

.message-body {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 12px;
    white-space: pre-wrap;
}

.message-actions {
    display: flex;
    gap: 8px;
}

/* ============================================================
   CONFIG FORM / AI DASHBOARD (unique to cloudsurf.com)
   ============================================================ */

.config-form {
    margin-top: 4px;
}

.config-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.config-row .form-group {
    margin-bottom: 0;
    flex: 1;
    min-width: 180px;
}

.config-save {
    margin-bottom: 0;
    white-space: nowrap;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737373' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.label-hint {
    font-weight: 400;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.provider-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 4px;
    color: #22c55e;
    font-size: 0.8125rem;
    font-weight: 600;
}

.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nowrap {
    white-space: nowrap;
}

/* ============================================================
   SURFDOC BLOCK OVERRIDES
   ============================================================ */

/* Logo — override surf-ui.css defaults:
   - `margin: 2rem 0` → zero both (gap controlled by hero padding only)
   - img `display: inline-block` → block (removes baseline descender gap) */
.surfdoc-logo {
    padding-top: 64px;
    padding-bottom: 0;
    margin: 0;
}

.surfdoc-logo img {
    display: block;
    margin: 0 auto;
}

/* (DOG-3) The base `.surfdoc-hero` margin/padding + `.surfdoc-hero-headline`
   size/line-height overrides were DEAD CODE and have been removed: every hero on
   the site renders as `.surfdoc-hero-transparent` (its own padding/margin win by
   source order), and surfdoc.css's `.surfdoc .surfdoc-hero-headline` (0,2,0) always
   beat this 0,1,0 rule — the headline already renders at the crate's clamp, never
   the 4rem here. Reviving the larger headline is a deliberate design change, not a
   token refactor; left for a content/design pass. */
.surfdoc-hero-subtitle {
    max-width: 520px;
    margin: 0 auto 40px;
}

/* (DOG-3) `.surfdoc-hero-btn` radius is now the --ws-hero-btn-radius token value
   set in :root; the specificity-tie override here was deleted. */

/* Features */
.surfdoc-features {
    border: none;
    padding: 0;
}

/* (DOG-3) `.surfdoc-feature-card` bg/padding/radius are now the --ws-feature-card-*
   token values set in :root; the value-tie override here was deleted. The hover
   BACKGROUND change below is additive (surfdoc.css's hover only lifts), so it stays
   website-local; the hover-lift cancel moved to --ws-feature-card-hover-transform. */
.surfdoc-feature-card:hover {
    /* glass cards brighten by carrying a little more surface on hover —
       an opaque --surface-hover here would flash the slab back. */
    background: color-mix(in srgb, var(--surface) 34%, transparent);
}

.surfdoc-feature-icon {
    color: var(--accent);
}

.surfdoc-feature-title {
    font-weight: 700;
    font-size: 1.125rem;
}

.surfdoc-feature-body {
    color: var(--text-muted);
    line-height: 1.6;
}

/* Sections */
.surfdoc-section {
    border-top: none;
}

/* Section cadence (2026-07-17 polish): the crate's --ws-section-pad gives
   every marketing section up to 120px top AND bottom — adjacent sections sat
   200px+ apart and pages read as mostly void. A flat 40px cadence puts
   sections 80px apart and the first section ~88px under the hero. The
   `.surfdoc` prefix outranks both crate rules (the section-pad default and
   the hero-adjacent compact top). */
.surfdoc .surfdoc-section {
    padding: 40px 0;
}

/* Marketing card grids: inside the 48rem reading column the 3-up cards were
   ~225px wide at 1440 with acres of empty margin either side. Break section
   card grids out to the 1120px marketing band (same treatment the crate gives
   banner-introduced grids), centered on the column. Margin % resolves against
   the column, so 50% − width/2 centers the overhang symmetrically; on phones
   the min() collapses to the viewport and the grid is already 1-col. */
.surfdoc .surfdoc-section > .surfdoc-features,
main.surfdoc > .surfdoc-features {
    --cs-band: min(var(--ws-band-inner), calc(100vw - 48px));
    width: var(--cs-band);
    max-width: none;
    margin-left: calc(50% - var(--cs-band) / 2);
    margin-right: calc(50% - var(--cs-band) / 2);
}
/* 2-up grids (support product cards) read bloated at the full band — cap
   them at the 960 content width instead. (Home's grids live under `.home`,
   not directly in main, so they keep their own treatment.) */
.surfdoc .surfdoc-section > .surfdoc-features[data-cols="2"],
main.surfdoc > .surfdoc-features[data-cols="2"] {
    --cs-band: min(960px, calc(100vw - 48px));
}

/* News/research index pages: the crate's compact top pad left the page title
   ~46px under the fixed bar; the full 116px hero clearance read too deep for
   a small left-aligned index title (Brady 2026-07-17). ~68px under the bar
   splits the difference. */
.surfdoc .surfdoc-post-grid {
    padding-top: 80px;
}
@media (max-width: 833.98px) {
    .surfdoc .surfdoc-post-grid {
        padding-top: 56px;
    }
}

/* Banner cadence: same 200px+ void problem as sections (crate pads the inner
   column with --ws-section-pad top+bottom). 72px reads as a band, not a gulf;
   a banner that introduces a form (Let's Talk / Contact Us) hands off with a
   12px seat so the intro and its form read as one unit. */
.surfdoc .surfdoc-banner-inner {
    padding-top: 72px;
    padding-bottom: 72px;
}
.surfdoc .surfdoc-banner:has(+ .surfdoc-form) .surfdoc-banner-inner {
    padding-bottom: 12px;
}

/* Explicit ::section blocks emit an inner column; the section itself now
   carries the 40px cadence, so the inner adds horizontal geometry only
   (the old 48/96px vertical pads doubled up into 180px+ gaps on careers). */
.surfdoc-section-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 24px;
}

.surfdoc-section-headline {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.surfdoc-section-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
    margin-bottom: 48px;
}

.section-dark {
    background: var(--surface);
}

/* Stats */
.surfdoc-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    padding: 32px 24px;
    max-width: 960px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.surfdoc-stat {
    text-align: center;
}

.surfdoc-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
}

.surfdoc-stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Pipeline */
.surfdoc-pipeline {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 16px 0;
}

.surfdoc-pipeline-step {
    text-align: center;
    flex: 1;
    min-width: 120px;
    max-width: 180px;
}

.surfdoc-pipeline-label {
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.surfdoc-pipeline-desc {
    font-size: 0.8125rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.surfdoc-pipeline-arrow {
    color: var(--text-muted);
    font-size: 1.25rem;
    margin-top: 8px;
}

/* CTA button — (DOG-3) radius is now the --ws-cta-radius token value in :root. */
.surfdoc-cta-primary {
    background: var(--accent);
    color: #fff;
}

.surfdoc-cta-primary:hover {
    opacity: 0.9;
}

/* ============================================================
   SOLUTIONS PAGE (unique to cloudsurf.com)
   ============================================================ */

/* (Removed stale `body:has(.solutions-process) .surfdoc-hero` override: the
   solutions page now renders the shared transparent hero — same as
   careers/support — and no longer emits a `.solutions-process` wrapper.) */

.solutions-process {
    border-top: none;
}

.solutions-process .section-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}

.solutions-process .section-headline {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.solutions-process .section-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
    margin-bottom: 48px;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.process-card {
    padding: 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    transition: all 200ms ease;
}

.process-card:hover {
    background: var(--surface-hover);
    transform: translateY(-2px);
}

.process-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #2563eb;
    margin-bottom: 12px;
    line-height: 1;
}

.process-card h3 {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 8px;
}

.process-card p {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.solutions-cta-section {
    border-top: none;
}

.solutions-cta-section .section-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}

.solutions-cta-section .section-headline {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.solutions-cta-section .section-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
    margin-bottom: 32px;
    text-align: center;
}

/* ============================================================
   CAREERS PAGE (unique to cloudsurf.com)
   ============================================================ */

.careers-stack-section {
    border-top: none;
}

.careers-stack-section .section-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}

.careers-stack-section .section-headline {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.careers-stack-section .section-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
    margin-bottom: 48px;
}

.stack-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stack-card {
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.stack-card h3 {
    font-weight: 700;
    font-size: 0.9375rem;
    margin-bottom: 4px;
}

.stack-card p {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.careers-roles-section {
    border-top: none;
}

.careers-roles-section .section-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}

.careers-roles-section .section-headline {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 32px;
}

.role-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 32px;
}

.role-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.role-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.role-badge {
    display: inline-flex;
    padding: 4px 12px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 4px;
    color: #2563eb;
    font-size: 0.8125rem;
    font-weight: 600;
}

.role-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.role-detail {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.role-detail strong {
    color: var(--text);
    min-width: 100px;
    display: inline-block;
}

/* Multi-role layout: stacked cards with breathing room between them. */
.roles-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.role-summary {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin: 0 0 24px;
}

.role-block {
    margin-bottom: 20px;
}

.role-block h4 {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0 0 10px;
}

.role-block ul {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.role-block li {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.55;
}

.role-stack {
    font-size: 0.9375rem;
    color: var(--text-muted);
    line-height: 1.6;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.role-stack strong {
    color: var(--text);
    margin-right: 6px;
}

.careers-apply-section {
    border-top: none;
}

.careers-apply-section .section-inner {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px 24px 96px;
}

.careers-apply-section .section-headline {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 8px;
}

.careers-apply-section .section-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
    margin-bottom: 16px;
}

/* ============================================================
   HERO ACTIONS (landing CTA row under hero)
   ============================================================ */

.hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 8px;
}

/* Secondary hero button: frosted glass so it stays legible over the sky. */
.hero-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-color: rgba(15, 23, 42, 0.14);
    color: var(--text);
}

.hero-actions .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(15, 23, 42, 0.22);
}

[data-theme="dark"] .hero-actions .btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .hero-actions .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* When the hero is immediately followed by the CTA row (landing page),
   drop the hero's bottom padding so the buttons sit just beneath the
   subtitle — the subtitle's own margin supplies the gap. */
.surfdoc-hero:has(+ .hero-actions) {
    padding-bottom: 0;
}

.surfdoc-hero:has(+ .hero-actions) .surfdoc-hero-subtitle {
    margin-bottom: 28px;
    font-size: clamp(1.375rem, 3.5vw, 2rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    max-width: none;
}

/* Mission statement (landing — under "Our Mission", above the cards) */
.mission-statement {
    text-align: center;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    max-width: 760px;
    margin: 0 auto 8px;
}

/* ============================================================
   FROSTED HOME CARDS (light mode only)
   The Platforms/Tools/Standards product cards and the Mission
   feature cards sit over the sky background on the home page —
   give them the same frosted-glass treatment as the nav so the
   sky reads through while text stays legible. Scoped to `.home`
   so the shared card classes on subpages keep their solid surface.
   ============================================================ */
/* (STYLE-6) The .home-scoped frosted feature-card skin was deleted: the home
   page renders no feature/product cards since the tile-grid conversion, and
   card glass is now the site-wide --ws-*-card-bg token values (no blur). */

/* Light theme only: the category eyebrow labels (news/research/events cards)
   and the Mission feature icon-chips render too faint over the bright frosted
   cards. Deepen the blue (and firm up the chip) so they read clearly. Dark
   theme keeps the brand --accent untouched. */
[data-theme="light"] .surfdoc-post-card-meta {
    color: #1d4ed8;
}
[data-theme="light"] .surfdoc-feature-icon {
    background: #d6e2ff;
    color: #1d4ed8;
}

/* ============================================================
   HOME CTA BAND (closing call-to-action before footer)
   ============================================================ */

.home-cta-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 80px 24px 96px;
    text-align: center;
}

.home-cta-headline {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

.home-cta-subtitle {
    color: var(--text-muted);
    font-size: 1.0625rem;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 28px;
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

@media (max-width: 768px) {
    .hero-headline {
        font-size: 2.25rem;
    }

    .hero .section-inner {
        padding-top: 80px;
        padding-bottom: 60px;
    }

    /* Compact hero for above-the-fold platforms */
    .surfdoc-logo {
        padding-top: 16px;
    }

    .surfdoc-logo img {
        width: 100px;
        height: 100px;
    }

    /* (Dead `.surfdoc-hero { padding-bottom }` rule removed 2026-07-17 — it
       lost to the crate's (0,2,0) hero padding; mobile hero rhythm now lives
       with the transparent-hero rules in the marketing-blocks section.) */
    .surfdoc-hero-headline {
        font-size: 2rem;
    }

    .surfdoc-hero-subtitle {
        margin-bottom: 20px;
    }

    .products-section .section-inner {
        padding-top: 24px;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .section-inner {
        padding: 64px 16px;
    }

    .surfdoc-shell-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .legal-embed iframe,
    .legal-content .surfdoc-embed iframe {
        height: 70vh;
    }

    .stats-table {
        font-size: 0.8125rem;
    }

    .stats-table th,
    .stats-table td {
        padding: 8px 10px;
    }

    .highlights-cell {
        min-width: 180px;
    }

    .inbox-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .message-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .message-time {
        margin-left: 0;
    }

    .message-actions {
        flex-wrap: wrap;
    }

    .process-grid {
        grid-template-columns: 1fr;
    }

    .stack-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================================
   NEWS / RESEARCH / EVENTS (article subpages)
   The index card grids now render from surf-parse's ::post-grid block
   (.surfdoc-post-* classes in surfdoc.css). Only the single-post article
   typography lives here.
   ============================================================ */

/* Article (single post) page */
.article-section .section-inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 110px 24px 96px;
}

/* Article body floats as a reading sheet over the sky — without it the tiled
   clouds-bg puffs drift directly behind the running text (most visible in light
   theme) and hurt legibility. (STYLE-6) The sheet follows the glass law — NO
   backdrop blur — but as a READING surface it carries far more ink than a
   display tile (0.88 vs 0.2): the sky is present at the edges of perception,
   never under the copy. iOS-rounded + borderless like every other card
   (2026-07-18); the shadow alone seats it. */
.article {
    margin-top: 24px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid transparent;
    border-radius: 18px;
    padding: clamp(28px, 5vw, 56px);
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
}
[data-theme="dark"] .article {
    background: rgba(10, 10, 24, 0.88);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.article-title {
    font-size: clamp(2rem, 4.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 14px 0 16px;
    color: var(--text);
}

.article-lead {
    font-size: 1.1875rem;
    color: var(--text);
    line-height: 1.55;
    margin: 0 0 28px;
}

.article-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    border-top: 1px solid var(--border);
    padding-top: 28px;
}

.article-body p {
    font-size: 1.0625rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ============================================================
   SURFDOC MARKETING BLOCKS
   Pure-SurfDoc landing/solutions/careers/support pages render via
   surf-parse only (no raw HTML). These rules style the blocks that
   replaced the old bespoke marketing sections:
     ::hero[layout=stacked]  — logo above headline (was ::logo + .hero-actions)
     ::banner                — centered CTA band (was .home-cta / .mission / apply)
     ::product-grid          — grouped emblem link-cards (was .products-section)
   Forms (::form), steps (::steps) and role cards (::details) inherit
   their base styling from surf-parse's surfdoc.css.
   ============================================================ */

/* Borderless cards (Brady 2026-07-18): the crate hardcodes a 1px var(--border)
   outline on every display card and exposes no border token, so the removal
   lives here. `border-color: transparent` (not `border: none`) keeps the 1px
   box so hover states and layout don't shift. Hover accents are re-asserted
   below (these (0,2,0) rules would otherwise outrank the crate's :hover), and
   the home tile-grid keeps its existing frosted borders via the .home
   re-assert — this pass targets the subpage cards (solutions / careers /
   research / news / support), not the home glass contract. */
.surfdoc .surfdoc-feature-card,
.surfdoc .surfdoc-stat,
.surfdoc .surfdoc-post-card,
.surfdoc .surfdoc-pg-card,
.surfdoc .surfdoc-details {
    border-color: transparent;
}
.surfdoc .surfdoc-post-card:hover,
.surfdoc .surfdoc-pg-card:hover {
    border-color: var(--accent);
}
.surfdoc .surfdoc-pg-card-static,
.surfdoc .surfdoc-pg-card-static:hover {
    border-color: transparent;
}
.surfdoc .home .surfdoc-pg-card {
    border-color: var(--border);
}
.surfdoc .home .surfdoc-pg-card:hover {
    border-color: var(--product-accent, var(--accent));
}

/* Transparent hero: drop the gradient card so the hero blends into the page
   (e.g. the home starfield/sky). Text + buttons switch to theme colors with
   real contrast instead of the white-on-gradient treatment. */
.surfdoc-hero-transparent {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    color: var(--text);
    margin-top: 0;
}
/* Subpage hero rhythm (2026-07-17 polish). The old (0,1,0) padding override
   here silently LOST to the crate's `.surfdoc-hero:not(.surfdoc-hero-left)`
   (0,2,0) --ws-section-pad default — heroes actually rendered ~101px/101px at
   1440, jamming the headline near the bar and opening a chasm below. The
   `.surfdoc` prefix + :not() outranks it: the headline now sits ~116px under
   the 44px fixed bar (the hero starts at viewport top, and the crate's
   :first-child rule still pulls -2rem), with a tight 48px seat into the first
   section. Home's stacked hero (logo mass) keeps the crate rhythm. */
.surfdoc .surfdoc-hero-transparent:not(.surfdoc-hero-stacked) {
    padding: 160px 2rem 48px;
    margin-bottom: 0;
}
@media (max-width: 833.98px) {
    .surfdoc .surfdoc-hero-transparent:not(.surfdoc-hero-stacked) {
        padding: 112px 1.5rem 40px;
    }
}
/* When nothing follows the subtitle inside the hero (solutions/support), its
   40px trailing margin is dead space on top of the hero's own seat. */
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-subtitle:last-child {
    margin-bottom: 0;
}
.surfdoc-hero-transparent .surfdoc-hero-headline,
.surfdoc-hero-transparent .surfdoc-hero-subtitle {
    color: var(--text);
}
/* Buttons on a transparent hero need their own contrast (the base styles
   assume a dark gradient backdrop). */
.surfdoc-hero-transparent .surfdoc-hero-btn-primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}
/* surf-parse's generic primary-hover default sets `color: var(--accent)` — that
   reads fine on a WHITE-filled hero button (blue label on white), but on this
   ACCENT-filled transparent-hero button it paints the label the same blue as
   the fill and hides it. Pin the label white on hover; keep the new
   filter:brightness() darken from the base (no override needed for that). */
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-btn-primary:hover {
    color: #fff;
}
.surfdoc-hero-transparent .surfdoc-hero-btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}
.surfdoc-hero-transparent .surfdoc-hero-btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
}
/* Light mode: the home hero sits over the bright sky — frost the secondary
   button so it stays legible. */
[data-theme="light"] .home .surfdoc-hero-transparent .surfdoc-hero-btn-secondary {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* `.back-link` is a website-only class (not emitted by surf-parse), so it keeps
   its own underline-suppression. The surfdoc-* button/card anchors are now
   covered by surf-parse's surfdoc.css default. */
.surfdoc .back-link:hover {
    text-decoration: none;
}

/* Hero stacked logo: the CloudSurf mark is the hero image above the headline.
   Clean logo presentation — override the base hero-image card border/sizing. */
.surfdoc-hero-stacked .surfdoc-hero-image {
    margin: 0 auto 8px;
}
.surfdoc-hero-image img {
    display: block;
    width: 140px;
    height: auto;
    max-height: none;
    margin: 0 auto;
    border: none;
    border-radius: 0;
}

/* CTA buttons folded into the hero: layout (row, centered, never wraps,
   compact on phones) ships in surf-ui.css — only the breathing room is ours. */
.surfdoc-hero-actions { margin-top: 8px; }

/* Secondary hero/banner button: frosted glass so it stays legible over the sky. */
.surfdoc-hero-btn-secondary,
.surfdoc-banner-btn-secondary {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .surfdoc-hero-btn-secondary,
[data-theme="dark"] .surfdoc-banner-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
}

/* Hide the honeypot field — bots fill it, humans never see it. */
.surfdoc-form-honey {
    display: none;
}

/* Home page: the Innovate/Simplify/Scale ::features grid is a top-level block
   (no section wrapper), so constrain + pad it like the product grid / banners
   instead of letting the cards bleed to the viewport edges. */
.home .surfdoc-features {
    max-width: 1040px;
    margin: 2rem auto;
    padding: 0 24px;
}

/* (DOG-3 / closes DOG-1 residual) The feature-card hover-lift cancel moved
   upstream to the --ws-feature-card-hover-transform token (set to `none` in :root);
   the surfdoc.css default lifts, cloudsurf opts out via the token. */

/* Role accordions (::details): the website wants the list rendered as a
   flex/gap stack (a layout choice, not a specificity patch). Paragraph spacing
   is handled by surf-parse's surfdoc.css default. */
.surfdoc-details-body ul {
    margin: 0 0 14px;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.surfdoc-details-body strong {
    color: var(--text);
}

/* ---- ::banner — centered CTA band ----
   DOG-2: the structural geometry (band, inner column, action row, button shape,
   secondary-button outline) now ships in surf-parse's surfdoc.css. The website
   keeps only the bespoke centered-subtitle max-width; the frosted secondary
   button lives in the hero section above. */
.surfdoc .surfdoc-banner-subtitle {
    max-width: 600px;
    margin-inline: auto;
}

/* ---- ::product-grid — grouped emblem link-cards ----
   DOG-2: card/row/body/emblem/name/tagline/arrow geometry, the odd-card
   centering, base hover (bg + accent border + arrow), and the mobile 1-col
   collapse now ship in surfdoc.css. The website keeps only the per-product
   accent values and the frosted-glass-over-sky home skin. */
.surfdoc-pg-card[data-product="surf"] { --product-accent: #2E8AD8; }
.surfdoc-pg-card[data-product="mako"] { --product-accent: #1466B4; }
.surfdoc-pg-card[data-product="wavesite"] { --product-accent: #2B6CB0; }
.surfdoc-pg-card[data-product="surfdoc"] { --product-accent: #D97706; }
.surfdoc-pg-card[data-product="surfcontext"] { --product-accent: #6366f1; }
.surfdoc-pg-card[data-product="surf-cli"] { --product-accent: #0ea5e9; }

/* Frosted home cards over the sky (light mode), same as feature cards. */
[data-theme="light"] .home .surfdoc-pg-card {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-color: rgba(15, 23, 42, 0.1);
}
[data-theme="light"] .home .surfdoc-pg-card:hover {
    background: rgba(255, 255, 255, 0.72);
    /* Accent border on hover. This must out-specify the light-home frosted
       RESTING border rule above (both are website-only); surf-parse can't
       arbitrate the [data-theme] .home context. */
    border-color: var(--product-accent, var(--accent));
}

@media (max-width: 768px) {
    .surfdoc-hero-image img {
        width: 100px;
    }
}

/* ============================================================
   CAREERS PAGE (unique to cloudsurf.com) — scoped via .careers-page
   ============================================================ */

/* Careers wraps its whole body in a .careers-page div, so the crate's
   first-child hero pull-up (-2rem against the reading column's top padding)
   misses its hero and the headline sat 32px lower than every other subpage.
   Restore parity by carrying the 2rem in the hero's own top padding
   (site rhythm 160px − 32px; 112px − 32px on mobile). */
.surfdoc > .careers-page:first-child > .surfdoc-hero:not(.surfdoc-hero-left):first-child {
    padding-top: 128px;
}
@media (max-width: 833.98px) {
    .surfdoc > .careers-page:first-child > .surfdoc-hero:not(.surfdoc-hero-left):first-child {
        padding-top: 80px;
    }
}

/* Hero: larger, more intentional headline + centered CTA. (The old 3.5rem
   padding override was dropped in the 2026-07-17 rhythm pass — careers now
   shares the site-wide subpage hero rhythm.) */
.careers-page .surfdoc-hero .surfdoc-hero-headline {
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    letter-spacing: -0.02em;
}
.careers-page .surfdoc-hero .surfdoc-hero-subtitle {
    font-size: 1.1875rem;
    max-width: 600px;
    margin: 0 auto 1.75rem;
}
.careers-page .surfdoc-hero-actions,
.careers-page .surfdoc-hero-inner {
    align-items: center;
}

/* Open-role cards: lift the surf-parse <details> default into a cleaner,
   scannable card with a hover state — glass + sharp per the landing
   contract (STYLE-6); the token values in :root carry the base treatment,
   these rules only add the careers-scale padding/type + open state. */
.careers-page .surfdoc-details {
    border: 1px solid transparent;
    background: color-mix(in srgb, var(--surface) 22%, transparent);
    margin: 16px 0;
    overflow: hidden;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.careers-page .surfdoc-details:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.10);
}
.careers-page .surfdoc-details > summary,
.careers-page .surfdoc-details-summary {
    padding: 18px 20px;
    font-size: 1.0625rem;
    font-weight: 650;
}
.careers-page .surfdoc-details[open] > summary,
.careers-page .surfdoc-details[open] .surfdoc-details-summary {
    background: color-mix(in srgb, var(--surface) 34%, transparent);
}
.careers-page .surfdoc-details-body {
    padding: 4px 20px 20px 23px;
    line-height: 1.6;
}

/* Application form */
.careers-apply {
    padding: 24px 0 8px;
}
.careers-apply .section-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 24px;
}
.careers-apply h2 {
    margin-bottom: 8px;
}
.careers-apply-lead {
    color: var(--text-muted);
    margin-bottom: 24px;
}
.careers-apply-optional {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.875em;
}
.careers-apply-form input[type="file"] {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 45%, transparent);
    color: var(--text-muted);
    font-size: 0.9375rem;
    cursor: pointer;
}
.careers-apply-form input[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: none;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
.careers-apply-form .cf-turnstile-field {
    margin-top: 4px;
}


/* ============================================================
   PAGE-LOAD INTRO (bespoke half — the crate staggers .surfdoc-hero-inner
   children; the home CTA row is a hero SIBLING, so it joins the same
   surfdoc-intro-up timeline here with the trailing delay.)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
    .hero-actions {
        opacity: 0;
        animation: surfdoc-intro-up 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.35s both;
    }
}

/* Lead Platforms tile: the CloudSurf mark sits just above the title, larger
   than the default 48px tile emblem (2x asset keeps it crisp). */
.home .surfdoc-pg-tile[data-product="cloudsurf"] .surfdoc-pg-tile-emblem {
    width: 140px;
    height: 140px;
}


/* ============================================================
   SURF DISPLAY ONLY — sweep the last non-Surf faces
   surfdoc.css drives nearly every font through the var-hooks overridden in
   :root above, but two places bypass them and need pinning here.
   ============================================================ */

/* surfdoc.css hardcodes a system stack on the app-shell demo block
   (`.surfdoc .surfdoc-app-shell { font-family: -apple-system, ... }`) rather
   than reading a var-hook, so it is the one rule the token override cannot
   reach. Pin it and let its descendants inherit. */
.surfdoc .surfdoc-app-shell,
.surfdoc .surfdoc-app-shell * {
    font-family: var(--font-sans);
}

/* Mono descendants inside the shell keep the mono face. */
.surfdoc .surfdoc-app-shell .surfdoc-terminal,
.surfdoc .surfdoc-app-shell .surfdoc-log-stream,
.surfdoc .surfdoc-app-shell .surfdoc-code-editor,
.surfdoc .surfdoc-app-shell .surfdoc-panel .surfdoc-tab-content,
.surfdoc .surfdoc-app-shell .surfdoc-badge {
    font-family: var(--font-mono);
}

/* Form controls and buttons inherit the page face rather than the UA's
   system default (`font: 400 13.33px Arial` on an unstyled <button>). */
button, input, select, textarea, optgroup {
    font-family: inherit;
}