/* Selectable website looks, independent of the company sphere. Shared by the site and the schematic previews. */
:is(body.company-site, .site-style-preview).site-style-navy {
  --s-bg: #f4efe6; --s-surface: #ffffff; --s-sunken: #eef2f7; --s-ink: #0e1a2b; --s-muted: #5b6676; --s-line: #e4dccb;
  --s-scene: #132a4a; --s-scene-ink: #ffffff; --s-scene-muted: #c9d3e2;
  --s-accent: #ff8a3d; --s-accent-ink: #132a4a; --s-pick: #132a4a; --s-pick-ink: #ffffff;
  --s-display: "Unbounded", Manrope, system-ui, sans-serif; --s-display-weight: 700; --s-display-case: none; --s-radius: 24px;
  --s-heading: #132a4a; --s-edge: #7d8899; --s-hi: #e3e9f2; --s-link: #132a4a; --s-ghost: #132a4a;
  --s-scene-accent: #ff8a3d; --s-scene-line: rgb(244 239 230 / .45); --s-head: var(--s-scene);
}
:is(body.company-site, .site-style-preview).site-style-berry {
  --s-bg: #f7f1ea; --s-surface: #ffffff; --s-sunken: #f9eef2; --s-ink: #2b1720; --s-muted: #6e5a63; --s-line: #eadcd5;
  --s-scene: #4a1d33; --s-scene-ink: #ffffff; --s-scene-muted: #e2c9d2;
  --s-accent: #e3b868; --s-accent-ink: #3a1628; --s-pick: #4a1d33; --s-pick-ink: #ffffff;
  --s-display: "NS Display Serif", Manrope, Georgia, serif; --s-display-weight: 600; --s-display-case: none; --s-radius: 24px;
  --s-heading: #3a1628; --s-edge: #9c7f8c; --s-hi: #f3dce3; --s-link: #4a1d33; --s-ghost: #4a1d33;
  --s-scene-accent: #e3b868; --s-scene-line: rgb(255 255 255 / .45); --s-head: var(--s-bg);
}
:is(body.company-site, .site-style-preview).site-style-graphite {
  --s-bg: #f4f2ee; --s-surface: #ffffff; --s-sunken: #efece6; --s-ink: #1f1f1f; --s-muted: #5e5a55; --s-line: #e2ded6;
  --s-scene: #2b2b2b; --s-scene-ink: #ffffff; --s-scene-muted: #d2cdc5;
  --s-accent: #c9a25a; --s-accent-ink: #1f1f1f; --s-pick: #2b2b2b; --s-pick-ink: #ffffff;
  --s-heading: #1f1f1f; --s-edge: #8a857e; --s-hi: #ece4d3; --s-link: #2b2b2b; --s-ghost: #2b2b2b;
  --s-scene-accent: #d9b56e;
  --s-display: "NS Display Serif", Manrope, Georgia, serif; --s-display-weight: 600; --s-display-case: none; --s-radius: 24px;
  --s-scene-line: #8a857e; --s-head: var(--s-bg);
}
:is(body.company-site, .site-style-preview).site-style-teal {
  --s-bg: #f2ede6; --s-surface: #ffffff; --s-sunken: #fbfaf7; --s-ink: #13262a; --s-muted: #56676b; --s-line: #e0d8cc;
  --s-scene: #ddeff0; --s-scene-ink: #0e3b44; --s-scene-muted: #56676b;
  --s-accent: #0e4a55; --s-accent-ink: #ffffff; --s-pick: #0e4a55; --s-pick-ink: #ffffff;
  --s-display: "NS Text Serif", Manrope, Georgia, serif; --s-display-weight: 500; --s-display-case: none; --s-radius: 26px;
  --s-heading: #0e3b44; --s-edge: #6e8a8c; --s-hi: #ddeff0; --s-link: #0e4a55; --s-ghost: #0e4a55;
  --s-scene-accent: #0e4a55; --s-scene-line: #6e8a8c; --s-scene-open: #2f9e62; --s-tick: #7fd8c6; --s-head: var(--s-bg);
}
:is(body.company-site, .site-style-preview).site-style-night {
  --s-bg: #121212; --s-surface: #1b1b1b; --s-sunken: #262626; --s-ink: #edeae6; --s-muted: #a8a39d; --s-line: #2a2a2a;
  --s-scene: #1b1b1b; --s-scene-ink: #ffffff; --s-scene-muted: #c9c4be;
  --s-accent: #d62828; --s-accent-ink: #ffffff; --s-pick: #d62828; --s-pick-ink: #ffffff;
  --s-display: "Oswald", Manrope, system-ui, sans-serif; --s-display-weight: 700; --s-display-case: uppercase; --s-radius: 26px;
  --s-heading: #ffffff; --s-edge: #8a8580; --s-hi: #2a2a2a; --s-link: #ff6b6b; --s-ghost: #edeae6;
  --s-scene-accent: #f04848; --s-scene-line: #74706b; --s-alert: #ff6b6b; --s-head: var(--s-bg);
  --s-pick-quiet: #ffffff; /* the red takes no quieter words at 4.5:1 */
  color-scheme: dark;
}

:is(body.company-site, .site-style-preview).site-style-forest {
  --s-bg: #f5f8f6; --s-surface: #ffffff; --s-sunken: #edf3ef; --s-ink: #182d24; --s-muted: #53685e; --s-line: #d5e0d9;
  --s-scene: #163b2d; --s-scene-ink: #ffffff; --s-scene-muted: #cfdfd5;
  --s-accent: #b4f477; --s-accent-ink: #182d24; --s-pick: #163b2d; --s-pick-ink: #ffffff;
  --s-display: Manrope, system-ui, sans-serif; --s-display-weight: 700; --s-display-case: none; --s-radius: 24px;
  --s-heading: #163b2d; --s-edge: #73877a; --s-hi: #e3f0db; --s-link: #163b2d; --s-ghost: #163b2d;
  --s-scene-accent: #b4f477; --s-scene-line: #73877a; --s-head: var(--s-bg);
}
:is(body.company-site, .site-style-preview).site-style-lavender {
  --s-bg: #f7f6fc; --s-surface: #ffffff; --s-sunken: #eeebf7; --s-ink: #29223c; --s-muted: #655d77; --s-line: #ded8ea;
  --s-scene: #eee8f8; --s-scene-ink: #34234d; --s-scene-muted: #655d77;
  --s-accent: #6a4197; --s-accent-ink: #ffffff; --s-pick: #6a4197; --s-pick-ink: #ffffff;
  --s-display: Manrope, system-ui, sans-serif; --s-display-weight: 700; --s-display-case: none; --s-radius: 24px;
  --s-heading: #34234d; --s-edge: #8a7c9e; --s-hi: #e9dff7; --s-link: #6a4197; --s-ghost: #6a4197;
  --s-scene-accent: #6a4197; --s-scene-line: #8a7c9e; --s-head: var(--s-bg);
}
:is(body.company-site, .site-style-preview).site-style-terracotta {
  --s-bg: #faf7f2; --s-surface: #ffffff; --s-sunken: #f3ece3; --s-ink: #382820; --s-muted: #796256; --s-line: #e5d9cd;
  --s-scene: #f1e4d5; --s-scene-ink: #543124; --s-scene-muted: #796256;
  --s-accent: #9b432d; --s-accent-ink: #ffffff; --s-pick: #9b432d; --s-pick-ink: #ffffff;
  --s-display: "NS Text Serif", Manrope, Georgia, serif; --s-display-weight: 500; --s-display-case: none; --s-radius: 24px;
  --s-heading: #543124; --s-edge: #9c7c68; --s-hi: #f0dfcf; --s-link: #9b432d; --s-ghost: #9b432d;
  --s-scene-accent: #9b432d; --s-scene-line: #9c7c68; --s-head: var(--s-bg);
}
/* Explicit looks reset optional tokens from the sphere's default, including a club's dark colour scheme. */
body.company-site[class*="site-style-"] {
  --s-accent-hover: color-mix(in srgb, var(--s-accent) 88%, #000);
  --s-pick-deep: color-mix(in srgb, var(--s-pick) 80%, #000);
  --s-pick-quiet: var(--s-pick-ink); --s-alert: #a83232; --s-tick: var(--s-hi);
  --s-scene-open: #248348; --row-hover: var(--s-sunken); --hair: var(--s-line);
  color-scheme: light;
}
body.company-site.site-style-night { color-scheme: dark; --s-alert: #ff6b6b; --s-scene-open: #4ade80; }
.company-site[class*="site-style-"] .biz :is(h1, h2) {
  font-family: var(--s-display); font-weight: var(--s-display-weight); text-transform: var(--s-display-case); letter-spacing: -.02em;
}
.site-style-picker { margin-block: 16px; }
.site-style-picker > summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
/* In the compact signup this is a nested optional choice, without another padded card around its summary. */
.control-main .join details.site-style-picker { border: 0; background: none; padding: 0; margin: 4px 0 0; }
html form.join details.site-style-picker > summary { display: block; padding: 8px 0; font-size: 14px; font-weight: 600; }
@media (max-width: 640px) {
  .join .form-grid { row-gap: 8px; }
  .join #join-company .form-grid { margin-top: 8px; }
  .join-layout .join-preview { margin-bottom: 8px; }
  .control-main .join details.site-style-picker { margin-top: 0; }
}
.site-style-picker fieldset { border: 0; padding: 12px 0; margin: 0; min-width: 0; }
.site-style-picker legend { font-weight: 600; }
.site-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.site-style-option {
  display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 8px;
  border: 1px solid var(--rule, #d5e0d9); border-radius: 12px; padding: 12px; cursor: pointer; margin: 0;
}
.site-style-option input { width: 18px; height: 18px; margin: 3px 0 0; }
.site-style-option:has(input:checked) { border: 2px solid var(--forest, #163b2d); padding: 11px; background: var(--shade, #edf3ef); }
.site-style-option:focus-within { outline: 2px solid var(--forest, #163b2d); outline-offset: 3px; }
.site-style-label { font-weight: 600; }
.site-style-description { grid-column: 1 / -1; font-size: 13px; color: var(--muted, #53685e); }
.site-style-preview { grid-column: 1 / -1; display: block; overflow: hidden; border: 1px solid var(--s-line); border-radius: 8px; background: var(--s-bg); padding: 10px; }
.style-mini-bar { display: flex; gap: 5px; padding-bottom: 8px; }
.style-mini-bar i { width: 15px; height: 3px; background: var(--s-muted); border-radius: 3px; }
.style-mini-bar i:first-child { width: 36px; margin-right: auto; background: var(--s-ink); }
.style-mini-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; padding: 12px; background: var(--s-scene); border-radius: 6px; }
.style-mini-hero b { display: block; color: var(--s-scene-ink); font-family: var(--s-display); font-size: 12px; line-height: 1.3; text-transform: var(--s-display-case); }
.style-mini-hero i { display: block; height: 3px; margin-top: 5px; background: var(--s-scene-muted); opacity: .7; border-radius: 2px; }
.style-mini-hero i + i { width: 65%; }
.style-mini-button { display: inline-block; font: 600 10px/1.4 Manrope, sans-serif; background: var(--s-accent); color: var(--s-accent-ink); border-radius: 99px; padding: 4px 8px; margin-top: 8px; }
.style-mini-picture { border-radius: 4px; background: linear-gradient(145deg, var(--s-scene-muted), var(--s-scene-accent)); opacity: .65; }
.style-mini-cards { display: flex; gap: 6px; padding-top: 8px; }
.style-mini-cards i { flex: 1; height: 24px; background: var(--s-surface); border: 1px solid var(--s-line); border-radius: 4px; }
/* A club's edge-to-edge scene keeps the selected scene colour, including when its page is light. */
.company-site[class*="site-style-"] .biz-hero.site-hero-night { --s-scene: inherit; }
/* The header follows the selected page background, irrespective of the niche's former dark-header rules. */
body.company-site[class*="site-style-"] { --s-head: var(--s-bg); }
.company-site[class*="site-style-"] :is(.biz-bar, .site-nav) {
  --s-ink: inherit; --s-muted: inherit; --s-edge: inherit; --s-line: inherit;
}
.company-site[class*="site-style-"] .biz :is(h1, h2) { overflow-wrap: anywhere; }
.company-site.site-sport[class*="site-style-"]:not(.site-style-night) .biz-hero.site-hero-night h1 {
  font-size: clamp(36px, 6vw, 88px); overflow-wrap: anywhere;
}
.company-site.site-sport[class*="site-style-"] .biz-footer .biz-join { color: var(--s-link); text-decoration-color: currentColor; }
.company-site.site-sport[class*="site-style-"] .biz-footer .biz-join:hover { color: var(--s-ink); }