/* Style previews for the public site, to compare looks with the same content. <html data-style="…"> picks one; the
   current look ("balanced") has no attribute and none of these rules. Each style redefines the tokens, then reshapes
   the pieces that give it its character. Motion is part of a style too: app.js sets how fast the marquee drifts, and
   the lively styles let sections rise in (.rv → .in) and light follows the pointer over cards (--mx, --my). */

/* Shared by every preview */
[data-style] dialog.umodal { background: var(--bg); color: var(--ink); }
[data-style] .primary { color: var(--bg); }
.rv { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; transform: none !important; transition: none; } }

/* The picker: a preview tool, so it looks the same in every style */
.stylepick { position: fixed; z-index: 60; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: #18181b; color: #f4f4f5;
  font: 500 12.5px/1 "Inter", system-ui, sans-serif; letter-spacing: 0; box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.stylepick .sp-label { padding: 0 8px 0 10px; color: #a1a1aa; font: 500 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.stylepick .sp-list { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.site .stylepick button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #d4d4d8; font: inherit; gap: 6px; }
.site .stylepick button:hover { background: #27272a; color: #fff; }
.site .stylepick button[aria-pressed="true"] { background: #f4f4f5; color: #18181b; }
.site .stylepick button:focus-visible { outline: 2px solid #1fc46b; outline-offset: 1px; }
.stylepick .sp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.stylepick .sp-note { padding: 0 12px 0 8px; color: #a1a1aa; white-space: nowrap; border-left: 1px solid #3f3f46; }
.site .stylepick .sp-hide { width: 30px; padding: 0; color: #a1a1aa; font-size: 16px; }
.stylepick.folded .sp-list, .stylepick.folded .sp-note { display: none; }
.site .stylepick.folded .sp-hide { transform: rotate(45deg); }
.site:has(.stylepick) .sitefoot { padding-bottom: 76px; }
@media (max-width: 960px) { .stylepick .sp-note { display: none; } }
@media (max-width: 640px) { .stylepick { left: 12px; right: 12px; transform: none; } .stylepick .sp-label { display: none; } .stylepick .sp-list { flex: 1; } }


/* ── Data platform: dark, glowing, a modern data stack. Lively. ───────────────────────────────────────────────── */
[data-style="lakehouse"] {
  --bg: #0a0c12; --bg-2: #0f121a; --hover: #161a26; --active: #1c2130;
  --ink: #eef1f7; --ink-2: #a3abbd; --ink-3: #6b7489;
  --line: #1d2231; --line-2: #2b3246;
  --green: #5eead4; --green-ink: #5eead4; --green-soft: rgba(94, 234, 212, .09);
  --sun: #fbbf24; --amber-soft: rgba(251, 191, 36, .1); --sky: #818cf8; --sky-soft: rgba(129, 140, 248, .11); --coral: #f472b6; --coral-soft: rgba(244, 114, 182, .1);
  --r: 10px; --glow: linear-gradient(110deg, #818cf8, #5eead4 55%, #a3e635);
  color-scheme: dark;
}
[data-style="lakehouse"] .brand img { filter: invert(1); }
[data-style="lakehouse"] ::selection { background: #5eead4; color: #0a0c12; }
[data-style="lakehouse"] .sitenav { background: rgba(10, 12, 18, .72); }
[data-style="lakehouse"] .wl-hero, [data-style="lakehouse"] .wl-cta { background: radial-gradient(55% 80% at 12% 0%, rgba(129, 140, 248, .2), transparent 60%),
  radial-gradient(45% 70% at 92% 35%, rgba(94, 234, 212, .14), transparent 60%), var(--bg); }
[data-style="lakehouse"] .wl-hero h1 { font-weight: 650; letter-spacing: -.05em; }
[data-style="lakehouse"] :is(.wl-hero h1, .wl-cta h2) .mark { background: var(--glow); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0; }
[data-style="lakehouse"] .eyebrow { color: var(--ink-2); }
[data-style="lakehouse"] .eyebrow::before, [data-style="lakehouse"] .strip span::before { border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px rgba(94, 234, 212, .8); }
[data-style="lakehouse"] .btn, [data-style="lakehouse"] button { background: rgba(255, 255, 255, .03); border-radius: 999px; }
[data-style="lakehouse"] .btn:hover { background: rgba(255, 255, 255, .07); }
[data-style="lakehouse"] .primary, [data-style="lakehouse"] .primary:hover { background: var(--glow); border-color: transparent; color: #06110d; }
[data-style="lakehouse"] .primary { transition: box-shadow .2s, filter .2s; }
[data-style="lakehouse"] .primary:hover { filter: brightness(1.08); box-shadow: 0 0 28px rgba(94, 234, 212, .45); }
[data-style="lakehouse"] .wl-art { background: #0d1019; border-radius: 16px; border-color: var(--line-2); box-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 30px 90px -24px rgba(94, 234, 212, .3); }
[data-style="lakehouse"] .feats { gap: 14px; border: 0; }
[data-style="lakehouse"] :is(.feat, .steps li, .aucards a, .ucase, .compare > div, .roles) { border: 1px solid var(--line); border-radius: 16px;
  background: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(94, 234, 212, .09), transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)); }
[data-style="lakehouse"] :is(.feat, .steps li, .aucards a, .ucase, .compare > div) { transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; }
[data-style="lakehouse"] :is(.feat, .steps li, .aucards a, .ucase, .compare > div):hover { transform: translateY(-4px); border-color: rgba(94, 234, 212, .35); box-shadow: 0 20px 50px -20px rgba(94, 234, 212, .25); }
[data-style="lakehouse"] .feat::before { border-radius: 2px; }
[data-style="lakehouse"] .compare .now { border-top: 1px solid rgba(94, 234, 212, .45); box-shadow: 0 20px 60px -24px rgba(94, 234, 212, .3); }
[data-style="lakehouse"] .compare .was { border-top-color: var(--line); }
[data-style="lakehouse"] .uart { background: #0d1019; }
[data-style="lakehouse"] .uart img { opacity: .38; }
[data-style="lakehouse"] .ucase:hover .uart img { opacity: .62; }
[data-style="lakehouse"] .ubody { border-top-width: 2px; }
[data-style="lakehouse"] .logowall li:hover { background: rgba(255, 255, 255, .03); }
[data-style="lakehouse"] dialog.umodal { border-radius: 18px; box-shadow: 0 40px 120px -30px rgba(94, 234, 212, .35); }
[data-style="lakehouse"] dialog.umodal::backdrop { background: rgba(4, 6, 10, .7); backdrop-filter: blur(6px); }
[data-style="lakehouse"] .uhero img { opacity: .45; }
[data-style="lakehouse"] .uclose { background: rgba(10, 12, 18, .8); }
[data-style="lakehouse"] .badge.admin { color: var(--sun); }
[data-style="lakehouse"] .archart .flow, [data-style="lakehouse"] .flowart .flow { filter: drop-shadow(0 0 4px rgba(94, 234, 212, .8)); animation-duration: 1.1s; }
[data-style="lakehouse"] .rv:not(.in), [data-style="signal"] .rv:not(.in) { opacity: 0; transform: translateY(32px); }


/* ── Bold: loud colour blocks, chunky outlines and shadows, springy. Lively. ───────────────────────────────── */
[data-style="signal"] {
  --bg: #ffffff; --bg-2: #f6f2e9; --hover: #efe9dc; --active: #e7dfcf;
  --ink: #0a0a0a; --ink-2: #333333; --ink-3: #6b6b6b;
  --line: #0a0a0a; --line-2: #0a0a0a;
  --green: #00d26a; --green-ink: #00803f; --green-soft: #c8f6dc;
  --sun: #ffd400; --amber-soft: #fff1a6; --sky: #4d7cff; --sky-soft: #d9e3ff; --coral: #ff5c39; --coral-soft: #ffdccf;
  --r: 10px; --spring: cubic-bezier(.34, 1.56, .64, 1);
}
[data-style="signal"] .sitenav { border-bottom-width: 2px; background: rgba(255, 255, 255, .9); }
[data-style="signal"] .wl-hero { border-bottom-width: 2px; background-color: var(--sun); background-image: radial-gradient(rgba(10, 10, 10, .22) 1.2px, transparent 1.3px); background-size: 22px 22px; }
[data-style="signal"] .wl-hero h1 { font-size: clamp(46px, 7vw, 104px); font-weight: 800; letter-spacing: -.055em; line-height: .92; }
[data-style="signal"] .wl-hero .lead { color: var(--ink); }
[data-style="signal"] .wl-sec h2, [data-style="signal"] .wl-cta h2 { font-weight: 800; letter-spacing: -.045em; }
[data-style="signal"] :is(.wl-hero h1, .wl-cta h2) .mark { display: inline-block; background: var(--bg); border: 3px solid var(--ink); border-radius: 14px; padding: 0 .14em .04em; transform: rotate(-2.5deg);
  box-shadow: 5px 5px 0 var(--ink); }
[data-style="signal"] .eyebrow { width: fit-content; padding: 6px 11px; border: 2px solid var(--ink); border-radius: 999px; background: var(--bg); color: var(--ink); font-weight: 500; }
[data-style="signal"] .eyebrow::before { border-radius: 50%; }
[data-style="signal"] .btn { border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); transition: transform .2s var(--spring), box-shadow .2s var(--spring), background .15s; }
[data-style="signal"] .btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
[data-style="signal"] .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
[data-style="signal"] .btn.ghost { border-color: transparent; box-shadow: none; }
[data-style="signal"] .primary, [data-style="signal"] .primary:hover { background: var(--green); border-color: var(--ink); color: var(--ink); }
[data-style="signal"] .wl-art { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 10px 10px 0 var(--ink); transform: rotate(1deg); }
[data-style="signal"] .strip { background: var(--ink); color: #fff; border: 0; font-size: 13px; padding: 20px 16px; }
[data-style="signal"] .strip span:nth-child(4n + 2)::before { background: var(--sun); }
[data-style="signal"] .strip span:nth-child(4n + 3)::before { background: var(--sky); }
[data-style="signal"] .strip span:nth-child(4n + 4)::before { background: var(--coral); }
[data-style="signal"] :is(.steps li, .aucards a, .ucase, .compare > div, .roles) { border: 2px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
[data-style="signal"] :is(.steps li, .aucards a, .ucase, .compare > div, .feat) { transition: transform .3s var(--spring), box-shadow .3s var(--spring); }
[data-style="signal"] :is(.steps li, .aucards a, .compare > div):hover { transform: translate(-3px, -3px) rotate(-.6deg); box-shadow: 10px 10px 0 var(--ink); }
[data-style="signal"] .ucase:hover { transform: translateY(-6px) rotate(-1.2deg); box-shadow: 8px 12px 0 var(--ink); }
[data-style="signal"] .steps li:nth-child(1) { background: var(--green-soft); }
[data-style="signal"] .steps li:nth-child(2) { background: var(--amber-soft); }
[data-style="signal"] .steps li:nth-child(3) { background: var(--sky-soft); }
[data-style="signal"] .steps li:nth-child(4) { background: var(--coral-soft); }
[data-style="signal"] .steps .num { font-size: 34px; font-weight: 500; color: var(--ink); }
[data-style="signal"] .steps code { border-top: 2px solid var(--ink); color: var(--ink-2); }
[data-style="signal"] .feats { gap: 14px; border: 0; }
[data-style="signal"] .feat { border: 2px solid var(--ink); border-radius: 18px; background: var(--green-soft); }
[data-style="signal"] .feat.sun { background: var(--amber-soft); }
[data-style="signal"] .feat.sky { background: var(--sky-soft); }
[data-style="signal"] .feat.coral { background: var(--coral-soft); }
[data-style="signal"] .feat:hover { transform: translateY(-4px) scale(1.02); }
[data-style="signal"] .feat::before { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--ink); }
[data-style="signal"] .aucards a:hover { border-color: var(--ink); }
[data-style="signal"] .aucards .sector, [data-style="signal"] .aucards a:hover .go { color: var(--ink); }
[data-style="signal"] .compare .now { background: var(--green-soft); border-top-width: 2px; }
[data-style="signal"] .compare .was { border-top-width: 2px; }
[data-style="signal"] .uart { border-bottom: 2px solid var(--ink); }
[data-style="signal"] .uart img { opacity: .75; filter: grayscale(1) contrast(1.15); }
[data-style="signal"] .ubody { border-top: 0; }
[data-style="signal"] .ucase .eg span, [data-style="signal"] .umodal .eg span { border-color: var(--ink); color: var(--ink); }
[data-style="signal"] .logowall { border-width: 2px; }
[data-style="signal"] .logowall li:hover { background: var(--sun); }
[data-style="signal"] .wl-cta { border-top-width: 2px; background-color: var(--green); background-image: radial-gradient(rgba(10, 10, 10, .2) 1.2px, transparent 1.3px); background-size: 22px 22px; }
[data-style="signal"] .wl-cta .lead { color: var(--ink); }
[data-style="signal"] .sitefoot { border-top-width: 2px; }
[data-style="signal"] dialog.umodal, [data-style="signal"] dialog.umodal:is(.sun, .sky, .coral) { border: 2px solid var(--ink); border-radius: 20px; box-shadow: 12px 12px 0 var(--ink); }
[data-style="signal"] .umodal .wl-art { transform: none; box-shadow: none; }
[data-style="signal"] .uhero { border-bottom: 2px solid var(--ink); }
[data-style="signal"] .uclose { border: 2px solid var(--ink); }
[data-style="signal"] .archart .flow, [data-style="signal"] .flowart .flow { stroke-width: 3; animation-duration: 1s; }
[data-style="signal"] .rv { transition-timing-function: ease, var(--spring); }
@media (max-width: 640px) { [data-style="signal"] .wl-art { box-shadow: 6px 6px 0 var(--ink); transform: none; } }


/* ── Industrial AI: graphite and safety amber, square edges, blueprint lines. Steady. ───────────────────────── */
[data-style="industrial"] {
  --bg: #111315; --bg-2: #15181b; --hover: #1c2024; --active: #22272c;
  --ink: #ebe8e1; --ink-2: #a9a59c; --ink-3: #716e67;
  --line: #24282c; --line-2: #353a3f;
  --green: #ffb000; --green-ink: #ffb000; --green-soft: rgba(255, 176, 0, .09);
  --sun: #ffd166; --amber-soft: rgba(255, 209, 102, .1); --sky: #6cc4ff; --sky-soft: rgba(108, 196, 255, .1); --coral: #ff5a36; --coral-soft: rgba(255, 90, 54, .1);
  --r: 0px; --blue: rgba(255, 176, 0, .07);
  color-scheme: dark;
}
[data-style="industrial"] .brand img { filter: invert(1); }
[data-style="industrial"] ::selection { background: #ffb000; color: #111315; }
[data-style="industrial"] .sitenav { background: rgba(17, 19, 21, .9); }
[data-style="industrial"] .wl-hero, [data-style="industrial"] .wl-cta { background-color: var(--bg-2);
  background-image: linear-gradient(var(--blue) 1px, transparent 1px), linear-gradient(90deg, var(--blue) 1px, transparent 1px),
    linear-gradient(rgba(255, 176, 0, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 176, 0, .025) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px, 20px 20px, 20px 20px; }
[data-style="industrial"] .wl-hero { border-bottom: 1px solid var(--line-2); }
[data-style="industrial"] :is(.wl-hero h1, .wl-sec h2, .wl-cta h2, dialog.umodal h2) { text-transform: uppercase; font-weight: 750; letter-spacing: -.02em; line-height: .98; }
[data-style="industrial"] .wl-hero h1 { font-size: clamp(38px, 5.2vw, 72px); }
[data-style="industrial"] :is(.wl-hero h1, .wl-cta h2) .mark { background: none; color: var(--green); padding: 0; }
[data-style="industrial"] .eyebrow { color: var(--green); }
[data-style="industrial"] .eyebrow::before { content: "//"; width: auto; height: auto; background: none; color: var(--ink-3); }
[data-style="industrial"] .btn, [data-style="industrial"] button { border-radius: 0; font-family: var(--mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; transition: none; }
[data-style="industrial"] .btn:hover { border-color: var(--green); background: transparent; color: var(--green); }
[data-style="industrial"] .primary { background: var(--green); border-color: var(--green); color: #111315; }
[data-style="industrial"] .primary:hover { background: #ffc233; border-color: #ffc233; color: #111315; }
[data-style="industrial"] .wl-art { background: var(--bg); border-radius: 0; border-color: var(--line-2); border-top: 2px solid var(--green); box-shadow: none; }
[data-style="industrial"] .strip { background: #0d0f11; color: var(--ink-2); }
[data-style="industrial"] .strip span::before { background: var(--green); }
[data-style="industrial"] :is(.steps li, .aucards a, .ucase, .compare > div, .roles, .logowall, .feats) { border-radius: 0; }
[data-style="industrial"] :is(.steps li, .aucards a, .compare > div) { position: relative; border-color: var(--line-2);
  background: linear-gradient(var(--green), var(--green)) 0 0 / 12px 2px, linear-gradient(var(--green), var(--green)) 0 0 / 2px 12px,
    linear-gradient(var(--green), var(--green)) 100% 100% / 12px 2px, linear-gradient(var(--green), var(--green)) 100% 100% / 2px 12px, var(--bg-2);
  background-repeat: no-repeat; }
[data-style="industrial"] :is(.steps li, .aucards a, .compare > div, .ucase):hover { border-color: var(--green); }
[data-style="industrial"] .aucards a:hover { box-shadow: none; transform: none; }
[data-style="industrial"] .aucards a, [data-style="industrial"] .ucase { transition: none; }
[data-style="industrial"] .steps .num { font-size: 30px; color: var(--green); }
[data-style="industrial"] .feat::before { width: 8px; height: 8px; }
[data-style="industrial"] .feat:hover { background: var(--bg-2); }
[data-style="industrial"] .compare .now { border-top: 1px solid var(--green); box-shadow: none; }
[data-style="industrial"] .compare .was { border-top: 1px solid var(--line-2); }
[data-style="industrial"] .ucase { background: var(--bg-2); }
[data-style="industrial"] .uart { background: #0b0c0e; }
[data-style="industrial"] .uart img { opacity: .42; filter: grayscale(1) contrast(1.2); }
[data-style="industrial"] .uart::before, [data-style="industrial"] .uhero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); }
[data-style="industrial"] .ubody { border-top-width: 2px; }
[data-style="industrial"] .ucase .eg span, [data-style="industrial"] .umodal .eg span, [data-style="industrial"] .badge { border-radius: 0; font-family: var(--mono); font-size: 11px; }
[data-style="industrial"] .logowall li:hover { background: var(--bg-2); color: var(--green); }
[data-style="industrial"] dialog.umodal, [data-style="industrial"] dialog.umodal:is(.sun, .sky, .coral) { border-radius: 0; border-top: 2px solid var(--green); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8); }
[data-style="industrial"] dialog.umodal::backdrop { background: rgba(8, 9, 10, .75); }
[data-style="industrial"] .uhero img { opacity: .45; }
[data-style="industrial"] .uclose { border-radius: 0; background: var(--bg); }
[data-style="industrial"] .utwin { border-radius: 0; border-left: 2px solid var(--green); }
[data-style="industrial"] .badge.admin { color: var(--sun); }
[data-style="industrial"] .sitenav .jumps a[aria-current="page"] { text-decoration-color: var(--green); }


/* ── Trusted firm: ivory, navy and a deep teal, serif headlines, soft shadows, no tricks. Calm. ───────────── */
[data-style="trust"] {
  --bg: #fbfaf7; --bg-2: #f3f1ec; --hover: #ece9e2; --active: #e4e0d7;
  --ink: #13233a; --ink-2: #4a5567; --ink-3: #868b95;
  --line: #e5e2db; --line-2: #d4d0c7;
  --green: #1f6f5c; --green-ink: #1f6f5c; --green-soft: #e5efeb;
  --sun: #c39b2a; --amber-soft: #f5eed9; --sky: #3a6ea5; --sky-soft: #e6edf5; --coral: #b5523b; --coral-soft: #f5e5e0;
  --display: "Iowan Old Style", "Charter", "Georgia", "Cambria", serif;
  --r: 4px; --soft: 0 1px 2px rgba(19, 35, 58, .05), 0 10px 30px -14px rgba(19, 35, 58, .16);
}
[data-style="trust"] ::selection { background: #d8e7e1; }
[data-style="trust"] .sitenav { background: rgba(251, 250, 247, .94); }
[data-style="trust"] .wl-hero, [data-style="trust"] .wl-cta { background: var(--bg-2); }
[data-style="trust"] .wl-hero { padding-top: clamp(56px, 9vw, 120px); padding-bottom: clamp(48px, 7vw, 96px); }
[data-style="trust"] :is(.wl-hero h1, .wl-sec h2, .wl-cta h2, dialog.umodal h2, h3, .feat b, .aucards b) { font-weight: 500; letter-spacing: -.012em; }
[data-style="trust"] .wl-hero h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.06; }
[data-style="trust"] .wl-sec h2, [data-style="trust"] .wl-cta h2 { line-height: 1.15; }
[data-style="trust"] :is(.wl-hero h1, .wl-cta h2) .mark { background: none; font-style: italic; color: var(--green); padding: 0; }
[data-style="trust"] .eyebrow { font: 600 12.5px/1 var(--sans); letter-spacing: .04em; text-transform: none; color: var(--green-ink); }
[data-style="trust"] .eyebrow::before { width: 18px; height: 1px; }
[data-style="trust"] .brand { letter-spacing: .14em; }
[data-style="trust"] .btn { transition: background .2s, border-color .2s, color .2s; }
[data-style="trust"] .primary { background: var(--ink); border-color: var(--ink); color: #fff; }
[data-style="trust"] .primary:hover { background: var(--green); border-color: var(--green); color: #fff; }
[data-style="trust"] .primary::after, [data-style="trust"] .primary:hover::after { transform: none; }
[data-style="trust"] .wl-art { border-color: var(--line); border-radius: 8px; box-shadow: var(--soft); }
[data-style="trust"] .strip { font: 500 13px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); gap: 10px 32px; }
[data-style="trust"] .strip span::before { width: 4px; height: 4px; border-radius: 50%; background: var(--line-2); }
[data-style="trust"] :is(.steps li, .aucards a, .ucase, .compare > div, .roles) { border-radius: 8px; background: #fff; }
[data-style="trust"] :is(.steps li, .aucards a, .compare > div) { box-shadow: 0 1px 2px rgba(19, 35, 58, .04); }
[data-style="trust"] .steps .num { font: 500 13px/1 var(--display); font-style: italic; letter-spacing: 0; }
[data-style="trust"] .steps code { border-top-style: solid; }
[data-style="trust"] .feats { border: 0; gap: 0 40px; }
[data-style="trust"] .feat { border: 0; border-top: 1px solid var(--line); padding: 22px 0 26px; }
[data-style="trust"] .feat::before, [data-style="trust"] .feat:is(.sun, .sky, .coral)::before { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
[data-style="trust"] .aucards a { transition: border-color .2s, box-shadow .2s; }
[data-style="trust"] .aucards a:hover { transform: none; border-color: var(--line-2); box-shadow: var(--soft); }
[data-style="trust"] .aucards .sector, [data-style="trust"] .ucase .sector, [data-style="trust"] .umodal .sector { font: 600 12px/1 var(--sans); letter-spacing: .02em; text-transform: none; }
[data-style="trust"] .compare .now { border-top: 1px solid var(--line-2); box-shadow: var(--soft); }
[data-style="trust"] .compare .now h3 { color: var(--green-ink); }
[data-style="trust"] .compare .was { background: var(--bg-2); border-top: 1px solid var(--line); }
[data-style="trust"] .ucase { transition: box-shadow .3s; }
[data-style="trust"] .ucase:hover { box-shadow: var(--soft); }
[data-style="trust"] .ubody, [data-style="trust"] .ucase:is(.sun, .sky, .coral) .ubody { border-top: 0; }
[data-style="trust"] .uart img { opacity: .5; filter: grayscale(1) sepia(.15); }
[data-style="trust"] .uart::after { display: none; }
[data-style="trust"] dialog.umodal, [data-style="trust"] dialog.umodal:is(.sun, .sky, .coral) { border-radius: 10px; border-color: var(--line); box-shadow: 0 30px 80px -20px rgba(19, 35, 58, .35); }
[data-style="trust"] dialog.umodal::backdrop { background: rgba(19, 35, 58, .35); }
[data-style="trust"] .utwin, [data-style="trust"] .umodal:is(.sun, .sky, .coral) .utwin { background: var(--green-soft); border-radius: 6px; }
[data-style="trust"] .archart .flow, [data-style="trust"] .flowart .flow { stroke-width: 2; animation-duration: 3.4s; }
[data-style="trust"] .sitefoot { text-transform: none; letter-spacing: 0; font: 400 13px/1 var(--sans); }


/* ── Quiet: monochrome, still, a lot of air. Toned right down. ──────────────────────────────────────────────── */
[data-style="quiet"] {
  --bg: #ffffff; --bg-2: #fafafa; --hover: #f3f3f3; --active: #ececec;
  --ink: #111111; --ink-2: #5c5c5c; --ink-3: #9a9a9a;
  --line: #ededed; --line-2: #dcdcdc;
  --green: #111111; --green-ink: #111111; --green-soft: #f4f4f4;
  --sun: #c4c4c4; --amber-soft: #f4f4f4; --sky: #9a9a9a; --sky-soft: #f4f4f4; --coral: #a0564b; --coral-soft: #f6f0ef;
  --r: 3px;
}
[data-style="quiet"] ::selection { background: #e6e6e6; }
[data-style="quiet"] .sitenav { border-bottom-color: transparent; background: rgba(255, 255, 255, .96); }
[data-style="quiet"] .wl-hero, [data-style="quiet"] .wl-cta { background: var(--bg); }
[data-style="quiet"] .wl-hero { border-bottom: 0; padding-top: clamp(64px, 11vw, 150px); }
[data-style="quiet"] .wl-sec { padding-top: clamp(72px, 11vw, 140px); }
[data-style="quiet"] :is(.wl-hero h1, .wl-sec h2, .wl-cta h2, dialog.umodal h2) { font-weight: 500; letter-spacing: -.04em; }
[data-style="quiet"] .wl-hero h1 { font-size: clamp(36px, 4.8vw, 64px); line-height: 1.04; }
[data-style="quiet"] :is(.wl-hero h1, .wl-cta h2) .mark { background: none; color: #e0a400; padding: 0; }
[data-style="quiet"] .eyebrow { color: var(--ink-3); font-weight: 400; }
[data-style="quiet"] .eyebrow::before { display: none; }
[data-style="quiet"] .primary { background: var(--ink); color: #fff; }
[data-style="quiet"] .primary:hover { background: #333; border-color: #333; color: #fff; }
[data-style="quiet"] .primary::after { content: none; }
[data-style="quiet"] .btn, [data-style="quiet"] button { transition: none; }
[data-style="quiet"] .wl-art { border-color: var(--line); box-shadow: none; background: var(--bg); }
[data-style="quiet"] .strip { border-bottom: 0; border-top: 1px solid var(--line); color: var(--ink-3); }
[data-style="quiet"] .strip span::before { display: none; }
[data-style="quiet"] :is(.steps li, .aucards a, .ucase, .compare > div, .roles) { border-radius: 4px; }
[data-style="quiet"] .steps .num { color: var(--ink-3); }
[data-style="quiet"] .steps code { border-top-style: solid; border-top-color: var(--line); }
[data-style="quiet"] .feats { border: 0; gap: 0 40px; }
[data-style="quiet"] .feat { border: 0; padding: 22px 0; }
[data-style="quiet"] .feat::before { display: none; }
[data-style="quiet"] .aucards a, [data-style="quiet"] .ucase { transition: none; }
[data-style="quiet"] .aucards a:hover { transform: none; box-shadow: none; border-color: var(--line-2); }
[data-style="quiet"] .aucards .sector { color: var(--ink-3); }
[data-style="quiet"] .compare .now, [data-style="quiet"] .compare .was { border-top: 1px solid var(--line); box-shadow: none; }
[data-style="quiet"] .compare .was { background: var(--bg); }
[data-style="quiet"] .ubody, [data-style="quiet"] .ucase:is(.sun, .sky, .coral) .ubody { border-top: 0; }
[data-style="quiet"] .uart img { opacity: .4; transition: none; }
[data-style="quiet"] .ucase:hover .uart img { opacity: .5; }
[data-style="quiet"] .ucase .eg span, [data-style="quiet"] .umodal .eg span { background: none; }
[data-style="quiet"] dialog.umodal, [data-style="quiet"] dialog.umodal:is(.sun, .sky, .coral) { border-color: var(--line-2); border-radius: 6px; box-shadow: 0 24px 64px -24px rgba(0, 0, 0, .25); }
[data-style="quiet"] .utwin, [data-style="quiet"] .umodal:is(.sun, .sky, .coral) .utwin { background: var(--bg-2); }
[data-style="quiet"] .archart .flow, [data-style="quiet"] .flowart .flow { animation: none; stroke-dasharray: none; stroke-width: 1.6; }
[data-style="quiet"] .badge.owner, [data-style="quiet"] .badge.admin { background: var(--bg-2); color: var(--ink-2); }
[data-style="quiet"] .sitefoot { border-top-color: var(--line); }
[data-style="quiet"] .sitenav .jumps a[aria-current="page"] { text-decoration-color: var(--ink); text-decoration-thickness: 1px; }
@media (max-width: 960px) { [data-style="trust"] .feats, [data-style="quiet"] .feats { gap: 0 24px; } }