/* The business-site pages in their industry looks (line 16008, google-path-business-sites-industry-looks-r1).
   Linked only while ai.features.google_path_business_sites_industry_looks is on (App\Support\Marketing\BusinessSitesIndustryLooks),
   on /industries/{industry}/{city?} (layouts.landing: css/pages/offer-pages-google-path.css points the page's --iv-* colours at
   the tokens) and /talking-websites/{trade} (the split shell: css/pages/doors-google-path.css points the trade names at them).
   The page root carries .ns-bsl and data-ns-look (one of config('split_shell.industries')). The accent family (--ns-gold fill,
   --ns-gold-light ink, --ns-on-accent) comes from css/ns-tokens.css, the split-shell industry tokens, in light and dark; this
   sheet adds the rest of each look from those same tokens: the hero wash, the heading type, the corner radius. No new hue
   except the pool look's afternoon sun. One type scale, 44 px targets, tabular figures, 375 px first. */

.ns-bsl {
    --bsl-head: var(--ns-font);
    --bsl-radius: 12px;
    --bsl-rule: none;
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 8%, var(--ns-bg)) 0%, var(--ns-bg) 100%);
    --bsl-h1: clamp(2rem, 5vw, 3.25rem);
    --bsl-h2: clamp(1.5rem, 3.2vw, 2.125rem);
}

/* Law: navy and paper, serif headings, square corners, a thin rule over the hero. */
.ns-bsl[data-ns-look="law"] {
    --bsl-head: 'Noto Serif', Georgia, 'Times New Roman', serif;
    --bsl-radius: 6px;
    --bsl-rule: inset 0 3px 0 var(--ns-gold);
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 9%, var(--ns-bg)) 0%, var(--ns-bg) 88%);
}

/* Pool: water and backyard. Soft ripples from the top corner, a warm afternoon sun low on the other side, round corners. */
.ns-bsl[data-ns-look="pool"] {
    --bsl-sun: #fbbc04;
    --bsl-radius: 20px;
    --bsl-hero:
        radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--ns-gold) 22%, transparent) 0%, transparent 70%),
        radial-gradient(55% 45% at 0% 100%, color-mix(in srgb, var(--bsl-sun) 16%, transparent) 0%, transparent 70%),
        repeating-radial-gradient(circle at 92% -10%, transparent 0 26px, color-mix(in srgb, var(--ns-gold) 7%, transparent) 26px 28px),
        var(--ns-bg);
}

/* Dental: clean mint, bright and calm. */
.ns-bsl[data-ns-look="dental"] {
    --bsl-radius: 16px;
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 11%, var(--ns-bg)) 0%, var(--ns-bg) 80%);
}

/* Med spa (and salons): a soft blush glow and an elegant serif. */
.ns-bsl[data-ns-look="med-spa"] {
    --bsl-head: 'Noto Serif', Georgia, 'Times New Roman', serif;
    --bsl-radius: 18px;
    --bsl-hero:
        radial-gradient(80% 90% at 85% 0%, color-mix(in srgb, var(--ns-gold) 16%, transparent) 0%, transparent 70%),
        var(--ns-bg);
}

/* Home services: warm and sturdy, a quiet work-stripe under the hero. */
.ns-bsl[data-ns-look="home-services"] {
    --bsl-radius: 10px;
    --bsl-hero:
        repeating-linear-gradient(135deg, transparent 0 18px, color-mix(in srgb, var(--ns-gold) 5%, transparent) 18px 20px),
        linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 10%, var(--ns-bg)) 0%, var(--ns-bg) 90%);
}

/* Real estate: an open horizon, green ground under a light sky. */
.ns-bsl[data-ns-look="real-estate"] {
    --bsl-radius: 14px;
    --bsl-hero: linear-gradient(180deg, var(--ns-bg) 0%, color-mix(in srgb, var(--ns-gold) 12%, var(--ns-bg)) 100%);
}

/* Line 16344 (business-sites-looks-tokens-11-r1): the eleven looks of the business-site fleet, one block each from
   docs/research/business-sites-industry-looks-20260929/LOOK-SPECS.md. Same six variables, same tokens, no new hue. */

/* AI workforce: a person already at work, in the house gold. */
.ns-bsl[data-ns-look="ai-workforce"] {
    --bsl-head: 'Google Sans', 'Roboto', system-ui, sans-serif;
    --bsl-radius: 16px;
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 7%, var(--ns-bg)) 0%, var(--ns-bg) 85%);
}

/* Enterprise: calm and typographic, ink accent, a large light headline, no wash. */
.ns-bsl[data-ns-look="enterprise"] {
    --bsl-head: 'Google Sans', 'Roboto', system-ui, sans-serif;
    --bsl-radius: 12px;
    --bsl-hero: var(--ns-bg);
    --bsl-h1: clamp(2.25rem, 6vw, 4rem);
}

/* Developer: precise and product-first, one mint accent glowing from the top corner. */
.ns-bsl[data-ns-look="developer"] {
    --bsl-head: 'Google Sans', 'Roboto', system-ui, sans-serif;
    --bsl-radius: 8px;
    --bsl-hero:
        radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--ns-gold) 10%, transparent) 0%, transparent 70%),
        var(--ns-bg);
}

/* Media: the work is the hero, a colour-drenched field and a display serif. */
.ns-bsl[data-ns-look="media"] {
    --bsl-head: 'Noto Serif Display', 'Noto Serif', Georgia, serif;
    --bsl-radius: 20px;
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 16%, var(--ns-bg)) 0%, var(--ns-bg) 100%);
}

/* Finance: trust through restraint, a faint indigo field and a thin rule over the hero. */
.ns-bsl[data-ns-look="finance"] {
    --bsl-head: 'Google Sans', 'Roboto', system-ui, sans-serif;
    --bsl-radius: 12px;
    --bsl-rule: inset 0 2px 0 var(--ns-gold);
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 6%, var(--ns-bg)) 0%, var(--ns-bg) 90%);
}

/* Commerce: product-forward and fast, a warm tangerine wash. */
.ns-bsl[data-ns-look="commerce"] {
    --bsl-head: 'Google Sans', 'Roboto', system-ui, sans-serif;
    --bsl-radius: 14px;
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 9%, var(--ns-bg)) 0%, var(--ns-bg) 70%);
}

/* Wellness: soft and unhurried, an editorial serif and a round glow. */
.ns-bsl[data-ns-look="wellness"] {
    --bsl-head: 'Noto Serif', Georgia, 'Times New Roman', serif;
    --bsl-radius: 24px;
    --bsl-hero:
        radial-gradient(70% 60% at 70% 20%, color-mix(in srgb, var(--ns-gold) 14%, transparent) 0%, transparent 70%),
        var(--ns-bg);
}

/* Industrial: heavy and outdoors, a condensed heading and a safety-amber rule. */
.ns-bsl[data-ns-look="industrial"] {
    --bsl-head: 'Roboto Condensed', 'Arial Narrow', 'Roboto', sans-serif;
    --bsl-radius: 6px;
    --bsl-rule: inset 0 4px 0 var(--ns-gold);
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 8%, var(--ns-bg)) 0%, var(--ns-bg) 90%);
}

/* Education: bright and encouraging, in the Nunito the layouts already load. */
.ns-bsl[data-ns-look="education"] {
    --bsl-head: 'Nunito', 'Google Sans', 'Roboto', system-ui, sans-serif;
    --bsl-radius: 18px;
    --bsl-hero: linear-gradient(180deg, color-mix(in srgb, var(--ns-gold) 8%, var(--ns-bg)) 0%, var(--ns-bg) 80%);
}

/* Consumer: minimal and personal, one soft glow where the host stands. */
.ns-bsl[data-ns-look="consumer"] {
    --bsl-head: 'Google Sans', 'Roboto', system-ui, sans-serif;
    --bsl-radius: 28px;
    --bsl-hero:
        radial-gradient(55% 45% at 50% 45%, color-mix(in srgb, var(--ns-gold) 18%, transparent) 0%, transparent 72%),
        var(--ns-bg);
}

/* Science: serious and luminous, a serif heading over a faint dotted field. */
.ns-bsl[data-ns-look="science"] {
    --bsl-head: 'Noto Serif', Georgia, 'Times New Roman', serif;
    --bsl-radius: 10px;
    --bsl-hero:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ns-gold) 18%, transparent) 1px, transparent 0) 0 0 / 14px 14px,
        var(--ns-bg);
}

.ns-bsl :is(a, button, summary):focus-visible { outline: 2px solid var(--ns-gold); outline-offset: 2px; }
.ns-bsl :is(#pricing, .ns-trade-price, .ns-trade-package) { font-variant-numeric: tabular-nums; }

/* ---------- /industries/{industry}/{city?} (inline styles: the type scale and the hero need !important) ---------- */
.ns-bsl.ns-iv-gp :is(h1, h2) { font-family: var(--bsl-head); }
.ns-bsl.ns-iv-gp h1 { font-size: var(--bsl-h1) !important; line-height: 1.1 !important; }
.ns-bsl.ns-iv-gp h2 { font-size: var(--bsl-h2) !important; line-height: 1.2 !important; }
.ns-bsl.ns-iv-gp .ns-bsl-hero { background: var(--bsl-hero) !important; box-shadow: var(--bsl-rule); }
.ns-bsl.ns-iv-gp a[href][style*="var(--ns-gold)"] { min-height: 44px; }
.ns-bsl.ns-iv-gp summary { min-height: 44px; }

/* ---------- /talking-websites/{trade} ---------- */
.ns-trade.ns-bsl :is(h1, h2) { font-family: var(--bsl-head); }
.ns-trade.ns-bsl h1 { font-size: var(--bsl-h1); }
.ns-trade.ns-bsl h2 { font-size: var(--bsl-h2); }
.ns-trade.ns-bsl .ns-trade-hero {
    margin-top: 8px;
    padding-left: clamp(16px, 3vw, 32px);
    padding-right: clamp(16px, 3vw, 32px);
    border-radius: var(--bsl-radius);
    background: var(--bsl-hero);
    box-shadow: var(--bsl-rule);
}
.ns-trade.ns-bsl :is(.ns-trade-button, .ns-trade-site, .ns-trade-package, .ns-trade-final, .ns-trade-desk) { border-radius: var(--bsl-radius); }
.ns-trade.ns-bsl .ns-trade-final { background: color-mix(in srgb, var(--ns-gold) 10%, var(--ns-surface)); }
.ns-trade.ns-bsl .ns-trade-button { min-height: 48px; }

@media (max-width: 480px) {
    .ns-trade.ns-bsl .ns-trade-hero { margin-left: -8px; margin-right: -8px; padding-left: 16px; padding-right: 16px; }
}