/* GenGrid design refinement (2026-10-11). Loaded LAST, after theme-flagship.css.
   Keeps the Liquid Glass look (Grid Navy + Gen Amber, ghost grid, frosted panels) and fixes what the
   screenshot review found: crushed heading word gaps, a flat hero, every section looking the same,
   light-plated illustrations glaring on navy, a busy tile pattern on CTA bands, uneven card fills. */

/* ---------- typography ---------- */
/* theme-flagship.css sets h1 -0.04em / h2 -0.03em on top of Tailwind's tracking-tight: with Plus Jakarta
   the space between words all but vanished ("AIDoes", "ItLets"). */
main h1, main h2, main h3 { word-spacing: 0.06em; text-wrap: balance; }
main h1 { letter-spacing: -0.025em; }
main h2 { letter-spacing: -0.02em; }
main h3 { letter-spacing: -0.01em; }
main p { text-wrap: pretty; }

/* section label above h2 (home uses .gg-eyebrow; other pages' existing uppercase labels get the same look) */
main p.text-sm.font-semibold.uppercase.tracking-wide.text-brand, main p.text-sm.font-semibold.uppercase.tracking-wide.text-brand-glow,
.gg-eyebrow {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: rgb(var(--c-brand));
}
main p.text-sm.font-semibold.uppercase.tracking-wide.text-brand::before, main p.text-sm.font-semibold.uppercase.tracking-wide.text-brand-glow::before,
.gg-eyebrow::before { content: ""; width: 1.75rem; height: 2px; border-radius: 2px; background: currentColor; opacity: .8; }
html[data-theme="navy"] .gg-eyebrow, html[data-theme="navy"] main p.text-sm.font-semibold.uppercase.tracking-wide.text-brand { color: #38C6FF; }
.text-center > p.text-sm.font-semibold.uppercase.tracking-wide.text-brand, .text-center > div > p.text-sm.font-semibold.uppercase.tracking-wide.text-brand { justify-content: center; }

/* ---------- home hero ---------- */
.hero-h1 { line-height: 1.04; }
.hero-h1 .hl {
  display: block;
  background: linear-gradient(92deg, #0088CC 0%, #38C6FF 55%, #5BC8FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html:not([data-theme="navy"]) .hero-h1 .hl { background: linear-gradient(92deg, #006DA4, #0088CC 60%, #008ED6); -webkit-background-clip: text; background-clip: text; }
.hero-chips li { display: inline-flex; align-items: center; gap: .5rem; }
.hero-chips li::before {
  content: ""; width: 1.1rem; height: 1.1rem; flex: none; border-radius: 999px;
  background: rgba(0, 136, 204, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230088CC' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5'/%3E%3C/svg%3E") center / 70% no-repeat;
}
html[data-theme="navy"] .hero-chips { color: #BFC1D6; }
/* hero art floats on an amber halo */
.hero-art { position: relative; }
.hero-art::before {
  content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(56, 198, 255, .22), transparent 75%); filter: blur(10px);
}

/* ---------- section rhythm ---------- */
/* the hairline between every section made the page read as one long list; a soft fade line instead */
html[data-style="liquid"] main > section { box-shadow: none; position: relative; }
html[data-style="liquid"] main > section + section::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(80rem, 92%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(27, 31, 75, .12), transparent);
}
html[data-style="liquid"][data-theme="navy"] main > section + section::before { background: linear-gradient(90deg, transparent, rgba(243, 244, 250, .10), transparent); }
html[data-style="liquid"] main > section.offer-band::before,
html[data-style="liquid"] main > section.offer-band + section::before { display: none; }

/* ---------- cards ---------- */
/* numbered benefit / example cards */
.benefit .num, .example .num {
  font-family: "Plus Jakarta Sans", Inter, sans-serif; font-weight: 800; font-size: 1.9rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(0, 136, 204, .55);
}
.example .num { font-size: 1.4rem; }
.benefit, .example, .risk-card { transition: transform .2s ease, box-shadow .2s ease; }
.benefit:hover, .example:hover, .risk-card:hover { transform: translateY(-3px); }
/* risk cards: amber top edge as a glow line, not a heavy border */
.risk-card { position: relative; overflow: hidden; }
.risk-card::before {
  content: ""; position: absolute; top: 0; left: 1.75rem; right: 1.75rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, #38C6FF, transparent);
}
/* glass cards everywhere: a faint amber rim light on hover, also for non-link cards */
html[data-style="liquid"] main .glass:hover { --tw-ring-color: rgba(0, 136, 204, .35); }

/* solutions grid (navy): the cream/amber-soft link cards came out as three different slates; one family */
html[data-style="liquid"][data-theme="navy"] main a.bg-brand-soft,
html[data-style="liquid"][data-theme="navy"] main a.bg-sand {
  background: linear-gradient(155deg, rgba(56, 198, 255, .10), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .06));
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(56, 198, 255, .14), 0 22px 44px -24px rgba(0, 0, 0, .7);
}
html[data-style="liquid"] main a.bg-ink.rounded-3xl,
html[data-style="liquid"][data-theme="navy"] main a.bg-ink.rounded-3xl {
  background: linear-gradient(155deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03) 55%, rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 22px 44px -24px rgba(0, 0, 0, .7);
}
html[data-style="liquid"]:not([data-theme="navy"]) main a.bg-ink.rounded-3xl { background: linear-gradient(140deg, #1E2252, #1B1F4B); }
html[data-style="liquid"] main a.rounded-3xl { transition: transform .2s ease, box-shadow .2s ease; }
html[data-style="liquid"] main a.rounded-3xl:hover { transform: translateY(-3px); }

/* ---------- navy CTA bands ---------- */
/* the full tile pattern behind CTA text was busy: fade it out from one corner and add amber light */
html[data-style="liquid"] main .bg-ink.rounded-3xl:not(a):not(.offer-panel),
html[data-style="liquid"][data-theme="navy"] main .bg-ink.rounded-3xl:not(a):not(.offer-panel) {
  background:
    radial-gradient(30rem 18rem at 85% 0%, rgba(56, 198, 255, .20), transparent 70%),
    radial-gradient(26rem 16rem at 10% 100%, rgba(0, 136, 204, .10), transparent 70%),
    linear-gradient(140deg, #1E2252, #151941);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 0 1px rgba(56, 198, 255, .14), 0 30px 60px -30px rgba(0, 0, 0, .6);
  isolation: isolate;
}
html[data-style="liquid"] main .bg-ink.rounded-3xl:not(a):not(.offer-panel)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect x='6' y='6' width='44' height='44' rx='8' fill='%23F3F4FA' fill-opacity='.06'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 45% 80% at 100% 0%, #000000, transparent 75%);
  mask-image: radial-gradient(ellipse 45% 80% at 100% 0%, #000000, transparent 75%);
}
html[data-style="liquid"] main .bg-ink.rounded-3xl .blur-2xl { display: none; }
.cta-panel h2 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); }

/* ---------- illustrations ---------- */
/* light-plated illustrations (cream #DAEFF9 / paper #F3F4FA) were glaring white boxes on the navy page.
   Navy mode: dim them slightly and seat them in a glass frame so they read as deliberate cards. */
html[data-theme="navy"] main figure:has(svg > rect:first-of-type[fill="#DAEFF9"]),
html[data-theme="navy"] main figure:has(svg > rect:first-of-type[fill="#F3F4FA"]) {
  padding: 10px; border-radius: 34px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -30px rgba(0, 0, 0, .7);
}
html[data-theme="navy"] main figure:has(svg > rect:first-of-type[fill="#DAEFF9"]) svg,
html[data-theme="navy"] main figure:has(svg > rect:first-of-type[fill="#F3F4FA"]) svg { border-radius: 24px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .gg-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
  .gg-reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .benefit:hover, .example:hover, .risk-card:hover, html[data-style="liquid"] main a.rounded-3xl:hover { transform: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .hero-h1 { font-size: 2.35rem; }
  .hero-chips { flex-direction: column; }
  html[data-theme="navy"] main figure:has(svg > rect:first-of-type[fill="#DAEFF9"]),
  html[data-theme="navy"] main figure:has(svg > rect:first-of-type[fill="#F3F4FA"]) { padding: 6px; border-radius: 28px; }
}

/* full-width navy bands (home "Your team"): keep the ghost grid only as a corner accent */
html[data-style="liquid"] main > section.bg-ink,
html[data-style="liquid"][data-theme="navy"] main > section.bg-ink {
  background:
    radial-gradient(36rem 22rem at 100% 0%, rgba(56, 198, 255, .12), transparent 70%),
    linear-gradient(180deg, rgba(11, 14, 48, .55), rgba(20, 23, 63, .35));
  isolation: isolate;
}
html[data-style="liquid"]:not([data-theme="navy"]) main > section.bg-ink {
  background: radial-gradient(36rem 22rem at 100% 0%, rgba(56, 198, 255, .16), transparent 70%), linear-gradient(140deg, #1E2252, #1B1F4B);
}
html[data-style="liquid"] main > section.bg-ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Crect x='8' y='8' width='56' height='56' rx='9' fill='%23F3F4FA' fill-opacity='.05'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 40% 60% at 100% 0%, #000000, transparent 75%);
  mask-image: radial-gradient(ellipse 40% 60% at 100% 0%, #000000, transparent 75%);
}
.hero-chips { column-gap: 1.5rem; }
@media (min-width: 1024px) { .hero-h1 { font-size: 3.4rem; } }

/* =========================================================================================
   Uniform full-width cards (2026-10-11, Newton: "screen side end to end cards rather than small ones").
   Every card grid carries .gg-rows: one card per row, full content width, the same glass skin on every page.
   Desktop: label / icon / title float in a left column, text runs on the right. Small screens: stacked.
   ========================================================================================= */
.gg-rows { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 1.25rem !important; }
.gg-rows > * { grid-column: 1 / -1 !important; border-radius: 1.5rem !important; padding: 1.75rem !important; position: relative; }
.gg-rows-tight { gap: .75rem !important; }
.gg-rows-tight > * { padding: 1.25rem 1.5rem !important; border-radius: 1rem !important; }

/* one skin: liquid glass (light) / smoked glass (navy); overrides the old per-card bg/border/top-rule variety */
html main .gg-rows > *:not(.offer-panel *) {
  border: 0 !important;
  background: linear-gradient(155deg, rgba(255, 255, 255,.62), rgba(255, 255, 255,.30) 50%, rgba(255, 255, 255,.46)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255,.95), inset 0 0 0 1px rgba(255, 255, 255,.55), 0 18px 40px -26px rgba(27, 31, 75,.32) !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
html[data-theme="navy"] main .gg-rows > *:not(.offer-panel *) {
  background: linear-gradient(155deg, rgba(255, 255, 255,.10), rgba(255, 255, 255,.035) 50%, rgba(255, 255, 255,.065)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255,.14), inset 0 0 0 1px rgba(255, 255, 255,.06), 0 22px 44px -26px rgba(0, 0, 0,.7) !important;
}
/* amber accent line down the left edge: the one decoration every card shares */
html main .gg-rows > *:not(.offer-panel *)::before {
  content: ""; position: absolute; left: 0; top: 1.5rem; bottom: 1.5rem; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #38C6FF, rgba(0, 136, 204,.15));
}
.gg-rows > a:hover, .gg-rows > *:hover { transform: translateY(-2px); }
html main .gg-rows > a:hover::before { background: #38C6FF; }

/* same type sizes everywhere */
.gg-rows > * > :is(h2, h3) { font-family: "Plus Jakarta Sans", Inter, sans-serif; font-size: 1.3rem !important; line-height: 1.3; font-weight: 700; }
.gg-rows-tight > * > h3 { font-size: 1.05rem !important; }
.gg-rows > * p, .gg-rows > * li { font-size: 1rem; line-height: 1.65; }
.gg-rows > * > div.text-xs:first-child, .gg-rows > * > p.font-semibold:first-child {
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgb(var(--c-brand));
}
html[data-theme="navy"] .gg-rows > * > div.text-xs:first-child, html[data-theme="navy"] .gg-rows > * > p.font-semibold:first-child { color: #38C6FF; }
/* the old "pin link to bottom" flex rule on solution cards does not apply to rows */
main .gg-rows > a.rounded-3xl.p-8 { display: block; }

@media (min-width: 1024px) {
  .gg-rows > *:not(.flex) { display: flow-root !important; padding: 2.25rem 2.75rem 2.25rem 3rem !important; }
  .gg-rows-tight > *:not(.flex) { padding: 1.4rem 2rem !important; }
  .gg-rows > *:not(.flex) > * { margin-left: calc(34% + 2.5rem); }
  .gg-rows > *:not(.flex) > :is(h2, h3, h4),
  .gg-rows > *:not(.flex) > :first-child:is(span, div.text-xs, div.flex, p.font-semibold) {
    float: left; clear: left; width: 34%; margin-left: 0;
  }
  .gg-rows > *:not(.flex) > :first-child:is(span, div.text-xs, div.flex, p.font-semibold) + :is(h2, h3) { margin-top: .9rem; }
  /* first text block lines up with the top of the card */
  .gg-rows > *:not(.flex) > :is(h2, h3, h4) + :not(h2, h3, h4),
  .gg-rows > *:not(.flex) > p.font-semibold:first-child + ul,
  .gg-rows > *:not(.flex) > :is(h2, h3) + div > :first-child { margin-top: 0 !important; }
  .gg-rows > *:not(.flex) > :is(h2, h3) + div > div:first-child { margin-top: 0 !important; }
  .gg-rows-tight > *:not(.flex) > * { margin-left: calc(30% + 2rem); }
  .gg-rows-tight > *:not(.flex) > :is(h3) { width: 30%; }
}
@media (prefers-reduced-motion: reduce) { .gg-rows > *:hover { transform: none; } }
@media (min-width: 1024px) {
  /* icon tiles keep their own square size in the left column */
  .gg-rows > *:not(.flex) > span:first-child { width: 3rem !important; }
}

/* blog: topic filter chips + article reading card (2026-10-11) */
.blog-filter button { background: rgba(255, 255, 255,.55); color: rgb(var(--c-ink)); transition: background .15s, color .15s; }
html[data-theme="navy"] .blog-filter button { background: rgba(255, 255, 255,.06); color: #D8DBF1; --tw-ring-color: rgba(243, 244, 250,.14); }
.blog-filter button[aria-pressed="true"] { background: #38C6FF !important; color: #1B1F4B !important; --tw-ring-color: #38C6FF; }
.article-body > h2:first-child { margin-top: 0; }
html[data-theme="navy"] .article-body { color: #D8DBF1; }
/* guide-link card: heading chips */
html[data-theme="navy"] .guide-link .bg-white.rounded-full { background: rgba(255, 255, 255,.06) !important; color: #D8DBF1; --tw-ring-color: rgba(243, 244, 250,.14); }

/* ---------- short cards: grid, not full-width rows (card_layout.py adds gg-cols-2 / gg-cols-3) ---------- */
@media (min-width: 768px) {
  .gg-rows.gg-cols-2, .gg-rows.gg-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1024px) {
  .gg-rows.gg-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
.gg-rows:is(.gg-cols-2, .gg-cols-3) > * { grid-column: auto !important; display: flex !important; flex-direction: column; padding: 1.9rem !important; }
.gg-rows:is(.gg-cols-2, .gg-cols-3) > * > * { float: none !important; width: auto !important; margin-left: 0 !important; clear: none !important; }
.gg-rows:is(.gg-cols-2, .gg-cols-3) > * > span:first-child { width: 3rem !important; }
.gg-rows:is(.gg-cols-2, .gg-cols-3) > * > :is(h2, h3) { margin-top: .9rem !important; font-size: 1.15rem !important; }
.gg-rows:is(.gg-cols-2, .gg-cols-3) > * > :first-child:is(h2, h3) { margin-top: 0 !important; }
.gg-rows:is(.gg-cols-2, .gg-cols-3) > * > :is(p, ul, div:not(.text-xs):not(:first-child)) { margin-top: .6rem !important; }
/* links and "Read" rows sit at the bottom so cards in a row line up */
.gg-rows:is(.gg-cols-2, .gg-cols-3) > * > :last-child:is(span, div.flex) { margin-top: auto !important; padding-top: 1rem; }
/* accent edge moves to the top for grid cards */
html main .gg-rows:is(.gg-cols-2, .gg-cols-3) > *:not(.offer-panel *)::before { left: 1.9rem; right: auto; top: 0; bottom: auto; width: 2.5rem; height: 3px; border-radius: 0 0 3px 3px; background: #38C6FF; }
/* flex link cards (related guides): keep icon beside text */
.gg-rows:is(.gg-cols-2, .gg-cols-3) > a.flex { flex-direction: row !important; }

/* ---------- product components (2026-10-11): solution cards, numbered steps, tick lists, chips, FAQ ---------- */
.sol-card { transition: transform .2s ease, box-shadow .2s ease; }
.sol-card:hover { transform: translateY(-4px); --tw-ring-color: rgba(0, 136, 204,.45); }
.sol-card .text-xs { display: block; }
.sol-lead { position: relative; }
html main .sol-lead { box-shadow: inset 0 0 0 1px rgba(56, 198, 255,.45), 0 24px 50px -28px rgba(0, 136, 204,.55) !important; }
.sol-steps { counter-reset: none; list-style: none; padding: 0; }
.sol-steps .step-n {
  display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 999px;
  background: linear-gradient(180deg, #39BDFF, #0088CC); color: #1B1F4B; font-weight: 800; font-family: "Plus Jakarta Sans", Inter, sans-serif;
  box-shadow: 0 8px 18px -8px rgba(0, 136, 204,.8);
}
.tick-list, .cross-list { margin-top: .9rem; display: grid; gap: .6rem; }
.tick-list li, .cross-list li { position: relative; padding-left: 1.75rem; color: rgb(var(--c-ink-soft)); }
html[data-theme="navy"] .tick-list li, html[data-theme="navy"] .cross-list li { color: #CACCDD; }
.tick-list li::before, .cross-list li::before { position: absolute; left: 0; top: .05rem; font-weight: 700; color: #0088CC; }
.tick-list li::before { content: "✓"; }
.cross-list li::before { content: "✕"; color: #9EA0BC; }
.chip { border-radius: 999px; padding: .4rem 1rem; font-size: .875rem; background: rgba(255, 255, 255,.6); color: rgb(var(--c-ink)); box-shadow: inset 0 0 0 1px rgba(27, 31, 75,.12); }
html[data-theme="navy"] .chip { background: rgba(255, 255, 255,.06); color: #D8DBF1; box-shadow: inset 0 0 0 1px rgba(243, 244, 250,.14); }
.faq-list summary { list-style: none; position: relative; padding-right: 2rem; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: -.1rem; font-size: 1.4rem; color: #0088CC; transition: transform .2s; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
/* CTA panels line up with the content column (section padding + max-w-7xl inner padding) */
@media (min-width: 1024px) { main .cta-panel { max-width: 76rem; } }

/* =========================================================================================
   No gold haze (2026-10-11, Newton: "remove that goldish hue ... makes it look AI generated").
   Amber stays as a flat accent only: buttons, links, labels, small rules. No amber glows, halos,
   tinted washes or gradient text anywhere. Backgrounds are plain navy (dark) / paper (light).
   ========================================================================================= */
/* page backdrop: solid colour with one faint cool slate wash, ghost grid kept but quieter */
html[data-style="liquid"] body.bg-white,
html[data-style="liquid"]:not([data-theme="navy"]) body.bg-white {
  background: radial-gradient(60rem 40rem at 0% 0%, rgba(86, 89, 123, .10), transparent 70%), #F3F4FA !important;
  background-attachment: fixed;
}
html[data-style="liquid"][data-theme="navy"] body.bg-white {
  background: radial-gradient(60rem 40rem at 0% 0%, rgba(70, 76, 145, .22), transparent 70%), #151941 !important;
  background-attachment: fixed;
}
html[data-style="liquid"] body::before { opacity: .6; }
html[data-style="liquid"]:not([data-theme="navy"]) main::before { display: none !important; }
.hero-art::before { display: none !important; }

/* headline: solid amber, no gradient text */
.hero-h1 .hl, html:not([data-theme="navy"]) .hero-h1 .hl { background: none !important; -webkit-background-clip: border-box; background-clip: border-box; color: #0088CC !important; }
html[data-theme="navy"] .hero-h1 .hl { color: #38C6FF !important; }

/* buttons: flat amber, neutral shadow */
html[data-style="liquid"] a.bg-brand, html[data-style="liquid"] button.bg-brand,
html[data-style="liquid"] a.bg-brand-glow {
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(27, 31, 75, .18) !important;
}
html[data-style="liquid"] a.bg-brand:hover, html[data-style="liquid"] button.bg-brand:hover { box-shadow: 0 4px 12px -4px rgba(27, 31, 75, .35) !important; }

/* navy panels and bands: plain navy, no amber light */
html[data-style="liquid"] main .bg-ink.rounded-3xl:not(a):not(.offer-panel),
html[data-style="liquid"][data-theme="navy"] main .bg-ink.rounded-3xl:not(a):not(.offer-panel) {
  background: linear-gradient(140deg, #1E2252, #191C46) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -34px rgba(0, 0, 0, .55) !important;
}
html[data-style="liquid"] main > section.bg-ink,
html[data-style="liquid"][data-theme="navy"] main > section.bg-ink,
html[data-style="liquid"]:not([data-theme="navy"]) main > section.bg-ink { background: linear-gradient(180deg, #1B1F4B, #191C46) !important; }

/* cards: no amber glow on the lead card or the step numbers */
html main .sol-lead { box-shadow: inset 0 0 0 1px rgba(0, 136, 204, .55) !important; }
.sol-steps .step-n { background: #0088CC !important; box-shadow: none !important; }
html[data-theme="navy"] .sol-steps .step-n { background: #38C6FF !important; }
/* accent edges: flat amber line, no fade */
html main .gg-rows > *:not(.offer-panel *)::before { background: #0088CC !important; opacity: .9; }
/* light-mode tinted cards (old amber-soft / sand fills) become neutral glass */
html[data-style="liquid"]:not([data-theme="navy"]) main a.bg-brand-soft, html[data-style="liquid"]:not([data-theme="navy"]) main a.bg-sand,
html[data-style="liquid"][data-theme="navy"] main a.bg-brand-soft, html[data-style="liquid"][data-theme="navy"] main a.bg-sand {
  background: linear-gradient(155deg, rgba(255, 255, 255,.10), rgba(255, 255, 255,.04)) !important;
}
html[data-style="liquid"]:not([data-theme="navy"]) main a.bg-brand-soft, html[data-style="liquid"]:not([data-theme="navy"]) main a.bg-sand {
  background: linear-gradient(155deg, rgba(255, 255, 255,.75), rgba(255, 255, 255,.45)) !important;
}
/* hover rims: neutral instead of gold */
html[data-style="liquid"] main .glass:hover, .sol-card:hover { --tw-ring-color: rgba(27, 31, 75, .18); }
html[data-theme="navy"] main .glass:hover, html[data-theme="navy"] .sol-card:hover { --tw-ring-color: rgba(243, 244, 250, .22); }
/* blobs left in some templates */
main .blur-3xl, main .blur-2xl { display: none !important; }
/* headline in one colour; amber stays on buttons, links and labels only */
.hero-h1 .hl, html:not([data-theme="navy"]) .hero-h1 .hl, html[data-theme="navy"] .hero-h1 .hl { color: inherit !important; }

/* ---------- dark mode: admin console + customer portal (2026-10-11) ----------
   The delivery-pipeline stage columns (bg-slate-200/60) and the status badges had no navy overrides,
   so they showed as light-grey blocks and pale pills on the dark page. */
html[data-theme="navy"] .bg-slate-200\/60 { background-color: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(243, 244, 250, .08); }
html[data-theme="navy"] .bg-slate-200 { background-color: #2E3260; }
html[data-theme="navy"] .bg-slate-300 { background-color: #373B6B; }
html[data-theme="navy"] .text-slate-500 { color: #9D9FBB; }
html[data-theme="navy"] .text-slate-400 { color: #888BA8; }
html[data-theme="navy"] .text-slate-800, html[data-theme="navy"] .text-slate-900 { color: #E3E5F4; }
html[data-theme="navy"] .ring-slate-200 { --tw-ring-color: rgba(243, 244, 250, .12); }
html[data-theme="navy"] .ring-slate-100, html[data-theme="navy"] .border-slate-100,
html[data-theme="navy"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { --tw-ring-color: rgba(243, 244, 250, .08); border-color: rgba(243, 244, 250, .08); }
html[data-theme="navy"] .border-slate-200 { border-color: rgba(243, 244, 250, .12); }
/* pipeline project cards sit one step lighter than their column */
html[data-theme="navy"] .bg-slate-200\/60 a.bg-white { background-color: #262A58; --tw-ring-color: rgba(243, 244, 250, .10); }
html[data-theme="navy"] .bg-slate-200\/60 a.bg-white:hover { --tw-ring-color: rgb(var(--c-brand)); }
/* status badges and alert boxes: tinted, readable on navy */
html[data-theme="navy"] .bg-emerald-100, html[data-theme="navy"] .bg-emerald-50 { background-color: rgba(16, 185, 129, .16); }
html[data-theme="navy"] .bg-amber-100, html[data-theme="navy"] .bg-amber-50 { background-color: rgba(9, 149, 219, .16); }
html[data-theme="navy"] .bg-red-100, html[data-theme="navy"] .bg-red-50 { background-color: rgba(239, 68, 68, .16); }
html[data-theme="navy"] .text-emerald-800, html[data-theme="navy"] .text-emerald-700, html[data-theme="navy"] .text-emerald-600 { color: #6EE7B7; }
html[data-theme="navy"] .text-amber-800, html[data-theme="navy"] .text-amber-700, html[data-theme="navy"] .text-amber-600 { color: #39BBFC; }
html[data-theme="navy"] .text-red-800, html[data-theme="navy"] .text-red-700, html[data-theme="navy"] .text-red-600 { color: #FCA5A5; }
/* admin/portal panels are <section>s too: keep the marketing section padding, h2 size and divider line off them */
main section.rounded-xl, main section.mt-8 { padding: 0 !important; }
main section.rounded-xl::before, main section.mt-8::before { display: none !important; }
main section.rounded-xl > h2, main section.mt-8 h2.font-semibold { font-size: 1.05rem !important; line-height: 1.4; letter-spacing: 0; margin-bottom: 0; }