/* Section style (630_section_style.sql, check-in 1 of claude/design-controls-plan.md): the choices an owner makes in Admin,
   Your page, Style, for one section. solo.js adds the sxs-* classes from site_sections.data.sx. Colored backgrounds work by
   giving the section its own set of the site's tokens (--ground, --panel, --cream...), so every card, button and line inside
   it stays readable without knowing how it's built. ":root .sx" outranks the designs' tone rules in looks.css and sales.css.
   --sx-a/--sx-b are the site's two colors, --sx-on/--sx-onb/--sx-og the text that reads on them (set by solo.js). */

:root { --sx-a: var(--amber); --sx-b: var(--blue); --sx-on: var(--on-accent); --sx-onb: #fff; --sx-og: #fff; --sx-deep: var(--deep, #10131F); --sx-edge: 48px; }

/* ---------- backgrounds */
:root .sx.sxs-bg-plain { background: var(--ground); }
:root .sx.sxs-bg-soft { background: color-mix(in srgb, var(--sx-a) 9%, var(--ground)); --panel: color-mix(in srgb, var(--sx-a) 4%, var(--panel)); }
html[data-theme="dark"] .sx.sxs-bg-soft { background: color-mix(in srgb, var(--sx-a) 14%, var(--ground)); }

:root .sx:is(.sxs-bg-dark, .sxs-bg-photo) {
  --ground: var(--sx-deep); --panel: color-mix(in srgb, #fff 7%, var(--sx-deep)); --panel-2: color-mix(in srgb, #fff 10%, var(--sx-deep));
  --line: rgba(255, 255, 255, .14); --line-2: rgba(255, 255, 255, .26);
  --cream: #F3F4F8; --cream-2: #CDD2DF; --muted: #A6ACBE; --dim: #80879B; --on-deep: #fff;
  --blue: color-mix(in srgb, var(--sx-a) 50%, #fff); --tint-text: color-mix(in srgb, var(--sx-a) 50%, #fff);
  --soft: color-mix(in srgb, var(--sx-a) 18%, var(--sx-deep)); --soft-line: color-mix(in srgb, var(--sx-a) 40%, rgba(255, 255, 255, .2));
  --deep: color-mix(in srgb, #000 35%, var(--sx-deep));
  background: var(--ground); color: var(--cream); color-scheme: dark;
}
:root .sx:is(.sxs-bg-accent, .sxs-bg-accent2, .sxs-bg-gradient) {
  --c: var(--sx-a); --t: var(--sx-on);
  --ground: var(--c); --panel: color-mix(in srgb, var(--t) 11%, var(--c)); --panel-2: color-mix(in srgb, var(--t) 7%, var(--c));
  --line: color-mix(in srgb, var(--t) 24%, var(--c)); --line-2: color-mix(in srgb, var(--t) 36%, var(--c));
  --cream: var(--t); --cream-2: color-mix(in srgb, var(--t) 88%, var(--c)); --muted: color-mix(in srgb, var(--t) 76%, var(--c)); --dim: color-mix(in srgb, var(--t) 62%, var(--c));
  --amber: var(--t); --accent: var(--t); --on-accent: var(--c); --blue: var(--t); --tint-text: var(--t);
  --soft: color-mix(in srgb, var(--t) 13%, var(--c)); --soft-line: color-mix(in srgb, var(--t) 30%, var(--c));
  --deep: color-mix(in srgb, #000 42%, var(--c)); --on-deep: #fff;
  background: var(--c); color: var(--t);
}
:root .sx.sxs-bg-accent2 { --c: var(--sx-b); --t: var(--sx-onb); }
:root .sx.sxs-bg-gradient { --t: var(--sx-og); --panel: color-mix(in srgb, var(--t) 14%, transparent); --panel-2: color-mix(in srgb, var(--t) 9%, transparent);
  --line: color-mix(in srgb, var(--t) 26%, transparent); --line-2: color-mix(in srgb, var(--t) 40%, transparent);
  --cream-2: color-mix(in srgb, var(--t) 88%, transparent); --muted: color-mix(in srgb, var(--t) 78%, transparent); --dim: color-mix(in srgb, var(--t) 64%, transparent);
  --on-accent: #141A2B; background: linear-gradient(180deg, var(--sx-a), var(--sx-b)); }
:root .sx.sxs-bg-gradient.sxs-og-dark { --on-accent: #fff; }
:root .sx.sxs-bg-gradient.sxs-g-across { background: linear-gradient(90deg, var(--sx-a), var(--sx-b)); }
:root .sx.sxs-bg-gradient.sxs-g-corner { background: linear-gradient(135deg, var(--sx-a), var(--sx-b)); }
/* When the two colors want different text, the gradient gets a gentle shade so white text reads on both ends. */
:root .sx.sxs-bg-gradient.sxs-shade::before { content: ''; position: absolute; inset: 0; background: rgba(8, 10, 18, .32); pointer-events: none; }

/* On colored backgrounds every heading and quote follows the section's text color, whatever the design colors them. */
:root .sx.sxs-on :is(.sx-h, h2, h3, h4, blockquote, .stx-n) { color: var(--cream); }
:root .sx.sxs-on .btn-ghost { color: var(--cream); border-color: var(--line-2); background: transparent; }
:root .sx.sxs-on a:not(.btn) { color: inherit; }

/* ---------- patterns: a layer in the accent color, cut out by a mask */
:root .sx.sxs-bg-pattern { background: var(--ground); }
.sxs-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--sx-a); opacity: .16; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
html[data-theme="dark"] .sxs-art { opacity: .2; }
.sxs-p-dots .sxs-art { opacity: .3; -webkit-mask-image: radial-gradient(circle, #000 1.7px, transparent 2px); mask-image: radial-gradient(circle, #000 1.7px, transparent 2px); -webkit-mask-size: 22px 22px; mask-size: 22px 22px; }
.sxs-p-grid .sxs-art { opacity: .12; -webkit-mask-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); mask-image: linear-gradient(#000 1px, transparent 1px), linear-gradient(90deg, #000 1px, transparent 1px); -webkit-mask-size: 34px 34px; mask-size: 34px 34px; }
.sxs-p-waves .sxs-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='28'%3E%3Cpath d='M0 14 Q24 2 48 14 T96 14' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='28'%3E%3Cpath d='M0 14 Q24 2 48 14 T96 14' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); -webkit-mask-size: 96px 28px; mask-size: 96px 28px; }
.sxs-p-contour .sxs-art { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M130 40c52 0 92 30 92 84s-46 96-98 96-86-40-86-90 40-90 92-90z'/%3E%3Cpath d='M130 66c38 0 66 22 66 60s-34 68-70 68-60-28-60-64 28-64 64-64z'/%3E%3Cpath d='M130 92c22 0 40 14 40 36s-20 40-42 40-34-16-34-38 14-38 36-38z'/%3E%3Cpath d='M-20 230c40-20 80 10 120-6s70-40 110-26 60 30 80 20'/%3E%3Cpath d='M-20 14c40 14 70-6 110 6s80 30 120 14 50-20 80-10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Cpath d='M130 40c52 0 92 30 92 84s-46 96-98 96-86-40-86-90 40-90 92-90z'/%3E%3Cpath d='M130 66c38 0 66 22 66 60s-34 68-70 68-60-28-60-64 28-64 64-64z'/%3E%3Cpath d='M130 92c22 0 40 14 40 36s-20 40-42 40-34-16-34-38 14-38 36-38z'/%3E%3Cpath d='M-20 230c40-20 80 10 120-6s70-40 110-26 60 30 80 20'/%3E%3Cpath d='M-20 14c40 14 70-6 110 6s80 30 120 14 50-20 80-10'/%3E%3C/svg%3E"); -webkit-mask-size: 260px 260px; mask-size: 260px 260px; }
.sxs-p-confetti .sxs-art { opacity: .24; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Crect x='20' y='26' width='14' height='5' rx='2' transform='rotate(28 27 28)'/%3E%3Ccircle cx='98' cy='18' r='3.5'/%3E%3Crect x='140' y='60' width='13' height='5' rx='2' transform='rotate(-34 146 62)'/%3E%3Ccircle cx='52' cy='104' r='3'/%3E%3Crect x='96' y='120' width='14' height='5' rx='2' transform='rotate(62 103 122)'/%3E%3Ccircle cx='160' cy='150' r='4'/%3E%3Crect x='14' y='156' width='12' height='5' rx='2' transform='rotate(-18 20 158)'/%3E%3Cpath d='M120 80l5 9 5-9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Crect x='20' y='26' width='14' height='5' rx='2' transform='rotate(28 27 28)'/%3E%3Ccircle cx='98' cy='18' r='3.5'/%3E%3Crect x='140' y='60' width='13' height='5' rx='2' transform='rotate(-34 146 62)'/%3E%3Ccircle cx='52' cy='104' r='3'/%3E%3Crect x='96' y='120' width='14' height='5' rx='2' transform='rotate(62 103 122)'/%3E%3Ccircle cx='160' cy='150' r='4'/%3E%3Crect x='14' y='156' width='12' height='5' rx='2' transform='rotate(-18 20 158)'/%3E%3Cpath d='M120 80l5 9 5-9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); -webkit-mask-size: 180px 180px; mask-size: 180px 180px; }

/* ---------- a photo behind the section, darkened so the words read */
.sxs-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: cover; background-position: center; }
.sxs-photo::after { content: ''; position: absolute; inset: 0; background: rgba(6, 8, 14, .55); }
.sxs-d-light .sxs-photo::after { background: rgba(6, 8, 14, .38); }
.sxs-d-strong .sxs-photo::after { background: rgba(6, 8, 14, .74); }
.sxs-d-light :is(.sx-h, .sx-lede, p) { text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
@media (hover: hover) and (min-width: 900px) { .sxs-fixed .sxs-photo { background-attachment: fixed; } }
.sx:is(.sxs-bg-pattern, .sxs-bg-photo, .sxs-bg-gradient) > .sx-in { position: relative; z-index: 1; }

/* ---------- spacing, width, alignment */
:root .sx.sxs-sp-compact { padding-top: clamp(36px, 4.5vw, 56px); padding-bottom: clamp(36px, 4.5vw, 56px); }
:root .sx.sxs-sp-roomy { padding-top: clamp(104px, 13vw, 184px); padding-bottom: clamp(104px, 13vw, 184px); }
:root .sx.sxs-w-narrow > .sx-in { width: min(780px, 100% - var(--gutter, 20px) * 2); }
:root .sx.sxs-w-full > .sx-in { width: calc(100% - var(--gutter, 20px) * 2); max-width: none; }
:root .sx.sxs-al-center .sx-head { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
:root .sx.sxs-al-center :is(.sx-h, .sx-lede) { margin-left: auto; margin-right: auto; text-align: center; }
:root .sx.sxs-al-center > .sx-in > :is(p, .rich, .sx-body) { text-align: center; margin-left: auto; margin-right: auto; }

/* ---------- heading size: Auto keeps the design's own */
:root .sx.sxs-h-s .sx-h { font-size: clamp(26px, 3vw, 36px); }
:root .sx.sxs-h-m .sx-h { font-size: clamp(32px, 4.2vw, 52px); }
:root .sx.sxs-h-l .sx-h { font-size: clamp(40px, 5.6vw, 76px); }
:root .sx.sxs-h-xl .sx-h { font-size: clamp(48px, 7.6vw, 108px); max-width: 18ch; }
:root .sx.sxs-h-hide .sx-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the edge at the top of the section */
:root .sx.sxs-e-line { border-top: 1px solid var(--line-2); }
:root .sx:is(.sxs-e-wave, .sxs-e-slant) { margin-top: calc(var(--sx-edge) * -1); border-top: var(--sx-edge) solid transparent; background-clip: border-box; }
.sx:is(.sxs-e-wave, .sxs-e-slant) :is(.sxs-art, .sxs-photo) { top: calc(var(--sx-edge) * -1); }
:root .sx.sxs-e-wave { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C180 6 360 6 540 22s360 26 540 10 270-26 360-16V48H0z'/%3E%3C/svg%3E") top / 100% var(--sx-edge) no-repeat, linear-gradient(#000, #000) 0 var(--sx-edge) / 100% calc(100% - var(--sx-edge)) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 30C180 6 360 6 540 22s360 26 540 10 270-26 360-16V48H0z'/%3E%3C/svg%3E") top / 100% var(--sx-edge) no-repeat, linear-gradient(#000, #000) 0 var(--sx-edge) / 100% calc(100% - var(--sx-edge)) no-repeat; }
:root .sx.sxs-e-slant { clip-path: polygon(0 var(--sx-edge), 100% 0, 100% 100%, 0 100%); }
@media (max-width: 640px) { :root { --sx-edge: 28px; } }

/* Sections drawn for a dark band (reviews, numbers, videos, the request form, military service) on a light or colored
   background: their white words and lines follow the section's own text color instead. */
:root .sx.sxs-lightdark { --on-deep: var(--cream); --on-deep-2: var(--muted); }
:root .sx.sxs-lightdark :is(.qc-q blockquote, .stx-n, .qc-btn) { color: var(--cream); }
:root .sx.sxs-lightdark .qc-btn { border-color: var(--line-2); }
:root .sx.sxs-lightdark .qc-dot { background: var(--line-2); }
:root .sx.sxs-lightdark .qc-dot[aria-current="true"] { background: var(--amber); }
:root .sx.sxs-lightdark .stx-i + .stx-i { border-left-color: var(--line-2); }
:root .sx.sxs-lightdark .qf-promise .ico { background: var(--soft); color: var(--amber); }
:root .sx.sxs-lightdark :is(.sv-honors li) { border-color: var(--line-2); }
:root .sx.sxs-lightdark .sv-seal::before { border-color: var(--line-2); }
.sx-anchor { position: absolute; top: -72px; left: 0; width: 1px; height: 1px; }