/* Self-hosted (the site host accepts no third-party stylesheet or url(); lane M, S5). Inter + JetBrains Mono, latin + latin-ext, variable weights, from Google Fonts' woff2. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* desertfuzz.com: the SurfDoc edition's skin.
   surf-parse's surfdoc.css ships the structure (shell, hero, features,
   product-grid, tables, forms). This sheet carries the cloudsurf.com landing
   skin over to Desert Fuzz, in Desert Fuzz green (Brady 2026-10-19): the fixed
   page gradient with a brand glow at the top, the liquid-glass top bar with
   centered links and one filled pill, the full-screen top-sheet menu, glass
   cards, pill buttons, the stacked home hero and the 160/48 subpage rhythm.
   It is the ONLY file that names a colour or a font family (D-DFC-2).
   The ::player block is styled by the crate; nothing here touches it. */

/* ============================================================
   TOKENS: Desert Fuzz on surf-parse's hooks
   Inter for every line and control, JetBrains Mono for versions, sizes and
   prices (both from Google Fonts, linked in content/_shell.surf). The colours
   are the Next site's tokens (desert-fuzz-website/src/app/theme.css).
   ============================================================ */

:root {
    --font: "Inter", sans-serif;
    --font-heading: "Inter", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-sans: "Inter", sans-serif;
    --font-display: "Inter", sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    /* Green. The pill label is dark ink: white on #00c853 fails contrast. */
    --accent: #00c853;
    --accent-hover: #00b34a;
    --accent-deep: #0b6b2b;
    --accent-light: #2eff8b;
    --accent-soft: rgba(0, 200, 83, 0.12);
    --accent-text: #06130a;
    --accent-ink: #0b6b2b;                           /* inline link ink: the deep green reads on the light page */

    /* Light (default) */
    --background: #f8faf8;
    --bg: #f8faf8;
    --surface: #ffffff;
    --surface-alt: #f1f5f2;
    --surface-hover: #f1f5f2;
    --surface-code: #ffffff;
    --code-bg: #f1f5f2;
    --border: #e2e8e3;
    --border-light: #e2e8e3;
    --text: #0f1a12;
    --text-muted: #5b6f61;
    --text-faint: #5b6f61;
    --text-secondary: #33473a;
    --glass-bg: rgba(248, 250, 248, 0.72);
    --glass-border: rgba(15, 26, 18, 0.1);

    --radius: 12px;
    --radius-sm: 8px;

    /* surf-parse shell hooks: the frosted bar and sheet. The geometry ships
       in surfdoc.css; the blur and sheen are layered on below. */
    --shell-nav-bg: rgba(248, 250, 248, 0.55);
    --shell-btn-bg: transparent;
    --shell-drawer-bg: var(--glass-bg);
    --shell-drawer-link-hover-bg: rgba(15, 26, 18, 0.05);
    --shell-control-border: var(--glass-border);
    --shell-nav-h: 48px;

    /* surf-parse web-block hooks: pills everywhere, borderless 22% glass
       cards with 18px corners, no hover lift (the cloudsurf glass law). */
    --ws-radius-card: 18px;
    --ws-radius-btn: 999px;
    --ws-radius-chip: 999px;
    --ws-radius-img: 12px;
    --ws-hero-btn-radius: 999px;
    --ws-banner-btn-radius: 999px;
    --ws-cta-radius: 999px;
    --ws-form-submit-radius: 999px;
    --ws-control-radius: 12px;
    --ws-feature-card-bg: color-mix(in srgb, var(--surface) 22%, transparent);
    --ws-feature-card-radius: 18px;
    --ws-feature-card-pad: 28px;
    --ws-feature-card-hover-transform: none;
    --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;
    --ws-tile-surface-bg: color-mix(in srgb, var(--surface) 22%, transparent);
    --ws-details-bg: color-mix(in srgb, var(--surface) 22%, transparent);
    --ws-details-radius: 16px;
    --ws-form-input-bg: color-mix(in srgb, var(--surface) 45%, transparent);
    --ws-doc-page-bg: rgba(255, 255, 255, 0.88);
    --ws-doc-page-radius: 18px;
    --ws-pg-width: 72rem;                            /* product rows run the page measure */
    --ws-drawer-link-size: 1.375rem;                 /* 22px rows in the menu sheet */
    --ws-drawer-link-weight: 600;
    --ws-shadow: none;                               /* glass cards carry no resting shadow */
    --ws-shadow-hover: none;

    --df-page-max: 72rem;
    --df-paint: linear-gradient(135deg, rgba(0, 200, 83, 0.12), rgba(255, 255, 255, 0.4));
    --df-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --df-frost: rgba(255, 255, 255, 0.6);
    --df-frost-hover: rgba(255, 255, 255, 0.85);
}

[data-theme="dark"] {
    --background: #0c120d;
    --bg: #0c120d;
    --surface: #131a14;
    --surface-alt: #1a231c;
    --surface-hover: #1a231c;
    --surface-code: #131a14;
    --code-bg: #1a231c;
    --border: #243027;
    --border-light: #243027;
    --text: #eef4ef;
    --text-muted: #84957f;
    --text-faint: #84957f;
    --text-secondary: #b9c8bc;
    --accent-ink: #2eff8b;                           /* the bright green reads on the dark page */
    --glass-bg: rgba(12, 18, 13, 0.72);
    --glass-border: rgba(255, 255, 255, 0.12);
    --shell-nav-bg: rgba(12, 18, 13, 0.55);
    --shell-drawer-bg: var(--glass-bg);
    --shell-drawer-link-hover-bg: rgba(255, 255, 255, 0.08);
    --shell-control-border: var(--glass-border);
    --ws-feature-card-bg: color-mix(in srgb, var(--surface) 22%, transparent);
    --ws-doc-page-bg: rgba(12, 18, 13, 0.88);
    --df-paint: linear-gradient(135deg, rgba(0, 200, 83, 0.12), rgba(26, 35, 28, 0.4));
    --df-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --df-frost: rgba(255, 255, 255, 0.08);
    --df-frost-hover: rgba(255, 255, 255, 0.15);
}

/* ============================================================
   PAGE BACKGROUND + STICKY FOOTER
   One fixed gradient on <html>: a soft green glow at the top over a
   near-white to pale-green fall-off in light, over a deep green to
   near-black fall-off in dark. <body> is transparent so the root shows
   through every block. The flex column keeps the footer at the bottom of
   short pages (legal).
   ============================================================ */

html {
    background-color: #eef4ef;
    background-image:
        radial-gradient(1200px 600px at 50% -200px, rgba(0, 200, 83, 0.16), transparent 70%),
        linear-gradient(180deg, #f8faf8 0%, #eef4ef 100%);
    background-attachment: fixed;
}
html[data-theme="dark"] {
    background-color: #050a06;
    background-image:
        radial-gradient(1200px 600px at 50% -200px, rgba(0, 200, 83, 0.22), transparent 70%),
        linear-gradient(180deg, #0c120d 0%, #050a06 100%);
}
body,
[data-theme="dark"] body {
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main { flex: 1 0 auto; }

/* The server wraps every page in .df-page; the page measure lives there, so
   the crate's 48rem reading column opens to the viewport (the wide landing
   layout, carried to every page). Full-bleed bands (the stacked hero, the
   product grids) keep bleeding from the .df-page column to the edges. */
body > main.surfdoc {
    width: 100%;
    max-width: none;
    padding: 0;
}
.df-page {
    max-width: var(--df-page-max);
    margin: 0 auto;
    padding: 0 24px 48px;
}

/* ============================================================
   THE BAR: liquid glass, the wordmark at the left, links centered,
   one filled pill and the icon controls at the right
   ============================================================ */

.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, 26, 18, 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);
}

/* Anchor for the centered links. 48px bar: 44px controls + 2px each side. */
.surfdoc-shell-nav-inner {
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
}

/* The wordmark (df-3.png) is the brand: a mono silhouette, black on light,
   white on dark, 22px tall. The name stays in the DOM for assistive tech. */
.surfdoc-shell-brand { gap: 0; }
.surfdoc-shell-brand > .surfdoc-shell-emblem,
.surfdoc-shell-drawer-emblem {
    width: auto;
    height: 22px;
    border-radius: 0;
    filter: brightness(0);
}
[data-theme="dark"] .surfdoc-shell-brand > .surfdoc-shell-emblem,
[data-theme="dark"] .surfdoc-shell-drawer-emblem { filter: brightness(0) invert(1); }
.surfdoc-shell-brand > span,
.surfdoc-shell-drawer-brand > span,
.surfdoc-shell-footer-brand > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Icon-only controls: no circle, no border; the 44px 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; }
.surfdoc-shell-theme-toggle svg { width: 16px; height: 16px; }

/* Links: quiet weight, the current page in full ink. */
.surfdoc-shell-nav-link {
    padding: 9px 10px 7px;
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}
.surfdoc-shell-nav .surfdoc-shell-nav-link:hover { color: var(--text); background: transparent; }
.surfdoc-shell-nav .surfdoc-shell-nav-link.is-active { color: var(--text); font-weight: 600; }

/* The bar's one filled button: a green pill with dark ink, in both themes. */
.surfdoc-shell-nav-links { display: flex; margin-right: 6px; }
.surfdoc-shell-nav-cta {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.surfdoc-shell-nav-cta,
[data-theme="dark"] .surfdoc-shell-nav-cta { background: var(--accent); color: var(--accent-text); filter: none; }
.surfdoc-shell-nav-cta:hover,
[data-theme="dark"] .surfdoc-shell-nav-cta:hover { background: var(--accent-hover); color: var(--accent-text); filter: none; }

@media (min-width: 834px) {
    /* 44px desktop bar, controls flush. */
    :root { --shell-nav-h: 44px; }
    .surfdoc-shell-nav-inner { padding-top: 0; padding-bottom: 0; }
    /* Inline links replace the drawer from 834px (the crate waits for 1024). */
    .surfdoc-shell-menu-btn { display: none; }
    .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, pill, theme: the hamburger rides the
       right edge with the theme toggle at its left, the pill before both. */
    .surfdoc-shell-menu-btn { order: 10; }
    .surfdoc-shell-theme-toggle { order: 9; }
    .surfdoc-shell-nav-links { order: 8; margin-right: 2px; }
    .surfdoc-shell-nav-cta { height: 30px; padding: 0 12px; font-size: 0.85rem; }
    .surfdoc-shell-nav-inner { padding-right: 12px; }
}
/* 834 to 1199px: the links flow in the space between the wordmark and the
   controls, centered there, so they never run under the wordmark. */
@media (min-width: 834px) and (max-width: 1199.98px) {
    .surfdoc-shell-nav-spacer { display: none; }
    .surfdoc-shell-nav-inline {
        position: static;
        transform: none;
        flex: 1;
        justify-content: center;
        margin: 0 8px;
    }
}
/* From 1200px the bar's contents hold the page column: the wordmark at its
   left edge, the links spread evenly between, the pill and toggle at its
   right edge. Whitespace grows outside the column on wide screens. */
@media (min-width: 1200px) {
    .surfdoc-shell-nav-inner {
        max-width: var(--df-page-max);
        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 to X: the glyph turns a quarter while the outer bars fold into a
   cross and the middle bar fades. Driven by .drawer-open on <html>. */
.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; }
}

/* ============================================================
   THE MENU: a full-screen sheet from the top
   The crate's left drawer becomes an edge-to-edge glass sheet: it fades in
   with a small downward settle while the rows cascade (crate animation) and
   reverses on close. The bar's X closes it, so the sheet's own head is
   dropped. The glass composites only while open.
   ============================================================ */

.surfdoc-shell-drawer {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    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);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: none;
    box-shadow: none;
    transition:
        transform 400ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 400ms cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s;
}
.drawer-open .surfdoc-shell-scrim {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.surfdoc-shell-drawer-head { display: none; }
.surfdoc-shell-drawer-inner { padding: 64px 24px 40px; }
.surfdoc-shell-drawer-link { letter-spacing: -0.01em; }
.surfdoc-shell-drawer-link.is-active { color: var(--text); background: var(--accent-soft); }
/* The bar floats over the open sheet (nav z:100 under sheet z:200), with its
   glass stripped so only the controls show. */
.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; }
}

/* ============================================================
   FOOTER: the wordmark again, over the page gradient
   ============================================================ */

.surfdoc-shell-footer { background: transparent; border-top: none; padding: 56px 0 32px; }
.surfdoc-shell-footer-inner { max-width: var(--df-page-max); }
.surfdoc-shell-footer-emblem {
    width: auto;
    height: 28px;
    border-radius: 0;
    filter: brightness(0);
}
[data-theme="dark"] .surfdoc-shell-footer-emblem { filter: brightness(0) invert(1); }
.surfdoc-shell-footer-heading { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.surfdoc-shell-footer-tagline { color: var(--text-secondary); max-width: 28rem; font-size: 0.9375rem; }
.surfdoc-shell-footer-col a { font-size: 0.9375rem; }
.surfdoc-shell-footer-copyright { color: var(--text-muted); font-size: 0.8125rem; }

/* ============================================================
   PAGE MEASURE + TYPOGRAPHY
   ============================================================ */

.df-page h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.4rem; padding-bottom: 0; border-bottom: none; }
/* A second heading inside one section (the renderer groups headings that
   share a block run) takes the section cadence above it. */
.df-page .surfdoc-section > h2:not(:first-child) { margin-top: 2.75rem; }
.df-page h2 + p { color: var(--text-muted); margin-top: 0; }
.df-page h3 { font-size: 1.0625rem; font-weight: 600; }
.df-page p, .df-page li { font-size: 0.9375rem; line-height: 1.55; }
.df-page :is(p, li, td, dd, figcaption) > a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.df-page :is(p, li, td, dd, figcaption) > a:hover { color: var(--accent-ink); text-decoration-color: var(--accent-ink); }

/* Section cadence: a flat 40px, so sections sit 80px apart and the first
   one lands close under the hero (the crate pads up to 120px each side). */
.surfdoc .surfdoc-section { padding: 40px 0; }
.surfdoc-section-inner { max-width: var(--df-page-max); margin: 0 auto; padding: 0; }

/* ============================================================
   HERO
   The home carries the stacked, centered landing hero; every other page a
   transparent page head: kicker, title, lede, actions, one column, at the
   160px/48px subpage rhythm (the top padding clears the fixed bar).
   ============================================================ */

.surfdoc-hero-transparent {
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    color: var(--text);
    margin-top: 0;
}
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-headline {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: var(--text);
}
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-subtitle {
    font-size: 1.0625rem;
    line-height: 1.55;
    color: var(--text-secondary);
}
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-subtitle:last-child { margin-bottom: 0; }

/* Subpage heads: left, one column (the crate's align=left hero is a
   two-column split; the image, when there is one, sits above the copy). */
.surfdoc .surfdoc-hero-transparent:not(.surfdoc-hero-stacked) {
    padding: 160px 0 48px;
    margin-bottom: 0;
}
.surfdoc-hero-left .surfdoc-hero-inner { display: block; max-width: none; margin: 0; }
.surfdoc .surfdoc-hero-left .surfdoc-hero-headline { font-size: clamp(2rem, 4.5vw, 3rem); max-width: 30ch; margin: 0 0 0.75rem; }
.surfdoc .surfdoc-hero-left .surfdoc-hero-subtitle { margin: 0 0 1.5rem; max-width: 46rem; }
.surfdoc-hero-left .surfdoc-hero-actions { justify-content: flex-start; }
.surfdoc-hero-left .surfdoc-hero-image-side, .surfdoc-hero-left .surfdoc-hero-image { max-width: 20rem; margin: 0 0 1.5rem; }
.surfdoc-hero-left .surfdoc-hero-image img { width: 100%; height: auto; border: none; border-radius: var(--ws-radius-img); }

/* The kicker above a page title. */
.surfdoc-hero-badge,
.surfdoc-hero-left .surfdoc-hero-badge {
    display: inline-block;
    margin-bottom: 1rem;
    border: none;
    background: var(--accent-soft);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* The home hero: stacked and centered, the big headline and one line. The
   top padding clears the bar (no reading-column padding to pull against). */
.surfdoc .df-page > .surfdoc-hero-stacked {
    padding: calc(var(--shell-nav-h) + clamp(44px, 7vw, 88px)) 20px 30px;
}
.surfdoc .df-page > .surfdoc-hero-stacked .surfdoc-hero-inner { max-width: none; }
.surfdoc .df-page > .surfdoc-hero-stacked .surfdoc-hero-headline {
    max-width: 920px;
    margin: 0 auto 22px;
    font-size: clamp(2.7rem, 6.3vw, 5.3rem);
    line-height: 1.04;
    letter-spacing: -0.04em;
    text-wrap: balance;
}
.surfdoc .df-page > .surfdoc-hero-stacked .surfdoc-hero-subtitle {
    max-width: 34rem;
    margin: 0 auto 28px;
    font-size: clamp(1.08rem, 1.6vw, 1.3rem);
    line-height: 1.6;
    text-wrap: pretty;
}
.surfdoc-hero-actions { margin-top: 8px; }

/* Buttons: the primary is the green pill with dark ink; the secondary is
   frosted glass so it reads over the glow. (0,3,0) so the crate's hover
   recolours cannot repaint the label.) */
.surfdoc-hero-btn, .surfdoc-banner-btn, .surfdoc-cta, .surfdoc-form-submit, .surfdoc-pg-tile-cta { font-weight: 600; }
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-btn-primary,
.surfdoc .surfdoc-banner-btn-primary,
.surfdoc .surfdoc-cta-primary,
.surfdoc .surfdoc-pg-tile-cta:not(.surfdoc-pg-tile-cta-secondary) {
    background: var(--accent);
    color: var(--accent-text);
    border: 1px solid var(--accent);
    filter: none;
}
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-btn-primary:hover,
.surfdoc .surfdoc-banner-btn-primary:hover,
.surfdoc .surfdoc-cta-primary:hover,
.surfdoc .surfdoc-pg-tile-cta:not(.surfdoc-pg-tile-cta-secondary):hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-text);
    filter: none;
}
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-btn-secondary,
.surfdoc .surfdoc-banner-btn-secondary,
.surfdoc .surfdoc-cta-secondary {
    background: var(--df-frost);
    color: var(--text);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.surfdoc .surfdoc-hero-transparent .surfdoc-hero-btn-secondary:hover,
.surfdoc .surfdoc-banner-btn-secondary:hover,
.surfdoc .surfdoc-cta-secondary:hover {
    background: var(--df-frost-hover);
    border-color: var(--accent);
    color: var(--text);
}
[data-theme="dark"] .surfdoc .surfdoc-hero-transparent .surfdoc-hero-btn-secondary,
[data-theme="dark"] .surfdoc .surfdoc-banner-btn-secondary,
[data-theme="dark"] .surfdoc .surfdoc-cta-secondary { border-color: rgba(255, 255, 255, 0.2); }

/* ============================================================
   CARDS: borderless 22% glass, 18px corners, no lift
   The crate hardcodes a 1px border on every card; transparent (not none)
   keeps the box so hover and layout do not shift.
   ============================================================ */

.surfdoc .surfdoc-feature-card,
.surfdoc .surfdoc-stat,
.surfdoc .surfdoc-post-card,
.surfdoc .surfdoc-pg-card,
.surfdoc .surfdoc-pg-tile-surface,
.surfdoc .surfdoc-details { border-color: transparent; box-shadow: none; }
.surfdoc .surfdoc-feature-card:hover { background: color-mix(in srgb, var(--surface) 34%, transparent); box-shadow: none; }
.surfdoc .surfdoc-post-card:hover,
.surfdoc .surfdoc-pg-card:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 34%, transparent); transform: none; }
.surfdoc .surfdoc-pg-card-static,
.surfdoc .surfdoc-pg-card-static:hover { border-color: transparent; }
/* Card anchors carry ink, not link green (the crate's `.surfdoc a` outranks
   its own card colour); the hover border is the link cue. */
.surfdoc a.surfdoc-pg-card, .surfdoc a.surfdoc-feature-card, .surfdoc a.surfdoc-post-card,
.surfdoc a.surfdoc-pg-card:hover, .surfdoc a.surfdoc-feature-card:hover, .surfdoc a.surfdoc-post-card:hover { color: var(--text); }
.surfdoc-feature-icon { color: var(--accent-ink); background: var(--accent-soft); }
.surfdoc-feature-title { font-size: 1.0625rem; font-weight: 700; }
.surfdoc-feature-body { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.6; }
.surfdoc-feature-link { color: var(--accent-ink); font-weight: 600; }

/* Product rows: the grid runs the page measure, and the `cols="1 2 N"`
   attributes the block emits pick the columns (the crate has no rule for
   them and keeps every row at two). Four and five across stack each card. */
.df-page .surfdoc-pg-inner { padding: 0 24px 8px; }
.df-page .surfdoc-pg-row { gap: 16px; }
.surfdoc-pg-card { padding: 22px 24px; gap: 16px; }
.surfdoc-pg-name { font-size: 1.0625rem; font-weight: 600; }
.surfdoc-pg-tagline { color: var(--text-secondary); font-size: 0.875rem; line-height: 1.45; }
.surfdoc-pg-emblem { border-radius: 8px; object-fit: contain; }
.surfdoc-pg-arrow { color: var(--text-muted); }
@media (min-width: 640px) and (max-width: 1023.98px) {
    .surfdoc-product-grid[data-cols-tablet="1"] .surfdoc-pg-row { grid-template-columns: 1fr; }
    .surfdoc-product-grid[data-cols-tablet="1"] .surfdoc-pg-row > .surfdoc-pg-card:last-child:nth-child(odd) { max-width: none; }
}
@media (min-width: 1024px) {
    .surfdoc-product-grid[data-cols-desktop="1"] .surfdoc-pg-row { grid-template-columns: 1fr; }
    .surfdoc-product-grid[data-cols-desktop="3"] .surfdoc-pg-row { grid-template-columns: repeat(3, 1fr); }
    .surfdoc-product-grid[data-cols-desktop="4"] .surfdoc-pg-row { grid-template-columns: repeat(4, 1fr); }
    .surfdoc-product-grid[data-cols-desktop="5"] .surfdoc-pg-row { grid-template-columns: repeat(5, 1fr); }
    .surfdoc-product-grid:is([data-cols-desktop="1"], [data-cols-desktop="3"], [data-cols-desktop="4"], [data-cols-desktop="5"]) .surfdoc-pg-row > .surfdoc-pg-card:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: none;
        margin-inline: 0;
    }
    .surfdoc-product-grid:is([data-cols-desktop="4"], [data-cols-desktop="5"]) .surfdoc-pg-card { flex-direction: column; align-items: flex-start; gap: 12px; }
    .surfdoc-product-grid:is([data-cols-desktop="4"], [data-cols-desktop="5"]) .surfdoc-pg-body { flex-direction: column; align-items: flex-start; gap: 12px; }
    .surfdoc-product-grid:is([data-cols-desktop="4"], [data-cols-desktop="5"]) .surfdoc-pg-arrow { display: none; }
}

/* Tiles (::product-grid[tiles]): glass, rounded, the page measure. */
.df-page .surfdoc-pg-tiles { max-width: var(--df-page-max); padding: 0 0 8px; }
.surfdoc .surfdoc-pg-tile-surface { background: var(--ws-tile-surface-bg); }
.surfdoc-pg-tile-icon { color: var(--accent-ink); }
/* The wordmark stands in where a tile or row has no art; it is black ink,
   so it inverts on the dark page. */
[data-theme="dark"] .surfdoc-pg-tile-emblem[src*="df-3"],
[data-theme="dark"] .surfdoc-pg-emblem[src*="df-3"] { filter: invert(1); }

/* ============================================================
   BANNERS: a section's call, as a glass card with 56px of air
   ============================================================ */

.surfdoc .surfdoc-banner {
    width: auto;
    max-width: none;
    margin: 0.5rem 0 0;
    background: color-mix(in srgb, var(--surface) 22%, transparent);
    border: 1px solid transparent;
    border-radius: 18px;
}
.surfdoc .surfdoc-banner-inner { max-width: 720px; padding: 56px 24px; }
.surfdoc .surfdoc-banner-headline { font-size: clamp(1.625rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 14px; }
.surfdoc .surfdoc-banner-subtitle { color: var(--text-secondary); font-size: 1.0625rem; max-width: 40rem; margin: 0 auto 24px; }

/* ============================================================
   TABLES, CODE, CALLOUTS, FIGURES: the record, the season, the specs
   ============================================================ */

.df-page .surfdoc-table-wrap { border: none; border-radius: 0; margin: 0.75rem 0 1.5rem; }
.df-page table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; margin: 0.75rem 0 1.5rem; }
.df-page .surfdoc-table-wrap table { margin: 0; }
.df-page th { text-align: left; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.df-page td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.df-page td:first-child { white-space: nowrap; }
.df-page code { font-family: var(--font-mono); font-size: 0.8125rem; background: var(--code-bg); border-radius: 6px; padding: 0.1em 0.4em; }
.surfdoc-callout { border-radius: 18px; border-color: transparent; background: color-mix(in srgb, var(--accent) 8%, color-mix(in srgb, var(--surface) 22%, transparent)); box-shadow: none; }
.surfdoc-figure-img { border-radius: var(--ws-radius-img); background: var(--surface-alt); }
.surfdoc-gallery-item img { border-radius: var(--ws-radius-img); background: var(--surface-alt); }
.surfdoc-stats .surfdoc-stat-value { color: var(--accent-ink); }

/* ============================================================
   THE BUY FORM: one hidden field and one green pill, kept compact
   ============================================================ */

.surfdoc-form {
    display: inline-flex;
    background: color-mix(in srgb, var(--surface) 22%, transparent);
    border: 1px solid transparent;
    border-radius: 18px;
    padding: 1rem 1.25rem;
    margin: 0.5rem 0 1.5rem;
}
.surfdoc-form-submit { height: auto; padding: 0.6rem 1.25rem; border-radius: 999px; }
.surfdoc-form-submit:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-text); filter: none; }
.surfdoc-form-honey { display: none; }

/* Form controls and buttons inherit the page face rather than the UA's
   system default. */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ============================================================
   PHONE
   ============================================================ */

@media (max-width: 833.98px) {
    body > main { width: 100%; }
    .surfdoc .surfdoc-hero-transparent:not(.surfdoc-hero-stacked) { padding: 112px 0 40px; }
    .surfdoc .df-page > .surfdoc-hero-stacked { padding: calc(var(--shell-nav-h) + 40px) 16px 24px; }
    .surfdoc-shell-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 640px) {
    .df-page { padding: 0 16px 40px; }
    .df-page .surfdoc-pg-inner { padding: 0 16px 8px; }
    .df-page td:first-child { white-space: normal; }
    .surfdoc .surfdoc-banner-inner { padding: 40px 20px; }
    .surfdoc-shell-footer-grid { grid-template-columns: 1fr; }
}

/* Reduced motion: the crate swaps its reveals; the hover transitions here
   are short, but belt and braces. */
@media (prefers-reduced-motion: reduce) {
    .surfdoc *, .surfdoc *::before, .surfdoc *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- The player (surf-parse 0.42.0 ::player): the crate styles it; the page's
        link underline must not reach a locked row or the Buy button. ---------- */
.df-page .surfdoc-player a,
.df-page a.surfdoc-player-track,
.df-page a.surfdoc-player-buy-btn { text-decoration: none; }
.df-page .surfdoc-player a:hover { color: inherit; }
[data-theme="dark"] .surfdoc-player-art img[src$="df-3.png"] { filter: invert(1); }
/* The row's Buy pill: solid white lettering on the green (Brady 2026-10-19 17:53);
   the page's link rules would otherwise paint it like running text. */
.df-page a.surfdoc-player-buy-btn,
.df-page a.surfdoc-player-buy-btn:hover { color: #ffffff; }

/* ============================================================
   THE SITE HOST (lane M, S5 — measured 2026-10-19 on the probe):
   the platform renders its own bar (.surfdoc-site-nav / .site-nav-*)
   and wraps every page in <main id="surfdoc-main" class="surfdoc">
   with no .df-page column. These rules give the host's chrome the
   skin the axum shell has: the page measure on main, the inline links
   from 834px (the host keeps the drawer when a bar has 8+ links; ours
   has eight tabs and the pill), the quiet link weight, the green pill.
   ============================================================ */

body > main#surfdoc-main.surfdoc {
    max-width: var(--df-page-max);
    margin: 0 auto;
    padding: 0 24px 48px;
}

/* The bar: glass, no rule under it, 56px. */
.surfdoc-site-nav {
    min-height: 56px;
    border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 6px 24px rgba(15, 26, 18, 0.07);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
}
[data-theme="dark"] .surfdoc-site-nav {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 24px rgba(0, 0, 0, 0.35);
}
.surfdoc-site-nav .site-name { font-size: 1rem; }
.surfdoc-site-nav .site-nav-logo-img { width: 30px; height: 30px; object-fit: contain; }
[data-theme="dark"] .surfdoc-site-nav .site-nav-logo-img { filter: brightness(0) invert(1); }
.site-nav-hamburger, .site-nav-theme-toggle { border: none; background: transparent; box-shadow: none; }

@media (min-width: 834px) {
    .surfdoc-site-nav .site-nav-hamburger,
    .surfdoc-site-nav .site-nav-scrim { display: none; }
    .surfdoc-site-nav .site-nav-links {
        position: static; inset: auto; order: 2; margin-left: auto; width: auto;
        flex-direction: row; align-items: center; gap: 2px; padding: 0;
        background: none; backdrop-filter: none; -webkit-backdrop-filter: none;
        opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none;
    }
    .surfdoc-site-nav .site-nav-links a {
        padding: 9px 10px 7px; border: 0; border-radius: 999px;
        font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; line-height: 1.2;
        color: var(--text-secondary);
    }
    .surfdoc-site-nav .site-nav-links a:first-of-type { border-top: 0; }
    .surfdoc-site-nav .site-nav-links a:hover { color: var(--text); background: transparent; }
    .surfdoc-site-nav .site-nav-links a.active { color: var(--text); font-weight: 600; }
    .surfdoc-site-nav .site-nav-links a.site-nav-cta {
        margin: 0 0 0 10px; min-height: 32px; height: 32px; padding: 0 16px;
        font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em;
        background: var(--accent); color: var(--accent-text);
    }
    .surfdoc-site-nav .site-nav-links a.site-nav-cta:hover { background: var(--accent-hover); color: var(--accent-text); opacity: 1; }
    .surfdoc-site-nav .site-nav-theme-toggle { order: 3; margin-left: 4px; }
}