/* GenGrid "Liquid Glass" site style (2026-10-10). Active when <html data-style="liquid">.
   Palette = logo kit only: Grid Navy #1B1F4B, Gen Amber #0088CC, Bright Amber #38C6FF,
   Slate #56597B, Paper #F3F4FA. Motif = the kit's "ghost grid" (rounded tiles bleeding off
   the top-right, as on the og-image/banners) + soft navy/amber light for the glass to refract.
   Loaded AFTER theme-switch.css; light/dark text colours still come from theme-switch.css. */

/* ---------- backdrop: Paper + soft light + ghost grid ---------- */
html[data-style="liquid"] body.bg-white {
  background:
    radial-gradient(42rem 32rem at 100% 0%, rgba(0, 136, 204, 0.24), transparent 65%),
    radial-gradient(46rem 36rem at 0% 45%, rgba(27, 31, 75, 0.14), transparent 65%),
    radial-gradient(40rem 30rem at 85% 75%, rgba(86, 89, 123, 0.20), transparent 65%),
    radial-gradient(34rem 26rem at 20% 105%, rgba(0, 136, 204, 0.14), transparent 65%),
    #EBEDF6;
  background-attachment: fixed;
}
html[data-style="liquid"] body::before {
  content: ""; position: fixed; 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='%231B1F4B' fill-opacity='.07'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 100% 0%, #000000 0%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 70% at 100% 0%, #000000 0%, transparent 80%);
}
html[data-style="liquid"][data-theme="navy"] body.bg-white {
  background:
    radial-gradient(42rem 32rem at 100% 0%, rgba(56, 198, 255, 0.16), transparent 65%),
    radial-gradient(46rem 36rem at 0% 45%, rgba(70, 76, 145, 0.42), transparent 65%),
    radial-gradient(40rem 30rem at 85% 75%, rgba(86, 89, 123, 0.28), transparent 65%),
    radial-gradient(34rem 26rem at 20% 105%, rgba(56, 198, 255, 0.10), transparent 65%),
    #151941;
  background-attachment: fixed;
}
html[data-style="liquid"][data-theme="navy"] body::before {
  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='.06'/%3E%3C/svg%3E");
}

/* sections and page canvases let the backdrop through (no alternating bands) */
html[data-style="liquid"] main section.bg-sand,
html[data-style="liquid"] main section.bg-white,
html[data-style="liquid"] main .bg-slate-100.min-h-\[calc\(100vh-4rem\)\],
html[data-style="liquid"][data-theme="navy"] main section.bg-sand,
html[data-style="liquid"][data-theme="navy"] main section.bg-white,
html[data-style="liquid"][data-theme="navy"] main .bg-slate-100.min-h-\[calc\(100vh-4rem\)\] { background: transparent; }

/* ---------- liquid glass surfaces ---------- */
html[data-style="liquid"] main .bg-white:not(input):not(textarea):not(select):not(section),
html[data-style="liquid"] main .glass,
html[data-style="liquid"] main .bg-gray-50:not(section),
html[data-style="liquid"] main .bg-slate-50:not(section) {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.36) 48%, rgba(255, 255, 255, 0.50) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  --tw-ring-color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(27, 31, 75, 0.05), 0 18px 40px -24px rgba(27, 31, 75, 0.30);
}
html[data-style="liquid"][data-theme="navy"] main .bg-white:not(input):not(textarea):not(select):not(section),
html[data-style="liquid"][data-theme="navy"] main .glass,
html[data-style="liquid"][data-theme="navy"] main .bg-gray-50:not(section),
html[data-style="liquid"][data-theme="navy"] main .bg-slate-50:not(section) {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.11) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.07) 100%);
  --tw-ring-color: rgba(243, 244, 250, 0.14);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 22px 44px -24px rgba(0, 0, 0, 0.7);
}
/* hover: cards that are links lift and catch an amber edge */
html[data-style="liquid"] main a.bg-white:not(.rounded-full) { transition: transform .2s ease, box-shadow .2s ease; }
html[data-style="liquid"] main a.bg-white:not(.rounded-full):hover { transform: translateY(-3px); --tw-ring-color: rgba(0, 136, 204, 0.55); }
html[data-style="liquid"][data-theme="navy"] main a.bg-white:not(.rounded-full):hover { --tw-ring-color: rgba(56, 198, 255, 0.5); }

/* navy bands / CTA panels: smoked navy glass with the ghost grid */
html[data-style="liquid"] main .bg-ink {
  background:
    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='.04'/%3E%3C/svg%3E") right top / 72px 72px,
    linear-gradient(140deg, rgba(27, 31, 75, 0.95), rgba(33, 37, 82, 0.90));
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
html[data-style="liquid"][data-theme="navy"] main .bg-ink {
  background:
    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='.035'/%3E%3C/svg%3E") right top / 72px 72px,
    linear-gradient(140deg, rgba(11, 14, 48, 0.70), rgba(20, 23, 63, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* glass inside navy panels */
html[data-style="liquid"] main .bg-ink .bg-white\/5,
html[data-style="liquid"] main .bg-ink .bg-white\/10 {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* ---------- header, footer, menus ---------- */
html[data-style="liquid"] .glass-bar {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.55));
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  backdrop-filter: blur(24px) saturate(190%);
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 0 rgba(27, 31, 75, 0.06), 0 10px 30px -20px rgba(27, 31, 75, 0.35);
}
html[data-style="liquid"][data-theme="navy"] .glass-bar {
  background: linear-gradient(180deg, rgba(17, 21, 59, 0.72), rgba(17, 21, 59, 0.55));
  border-color: rgba(243, 244, 250, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 30px -20px rgba(0, 0, 0, 0.8);
}
html[data-style="liquid"] footer.bg-sand {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.65));
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-color: rgba(255, 255, 255, 0.8);
}
html[data-style="liquid"][data-theme="navy"] footer.bg-sand {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.06));
  border-color: rgba(243, 244, 250, 0.08);
}

/* ---------- controls ---------- */
/* amber CTAs: glossy liquid pill (navy text kept by theme-switch.css) */
html[data-style="liquid"] a.bg-brand, html[data-style="liquid"] button.bg-brand {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 71, 107, 0.18),
    0 10px 24px -10px rgba(0, 136, 204, 0.75);
  transition: transform .15s ease, box-shadow .15s ease;
}
html[data-style="liquid"] a.bg-brand:hover, html[data-style="liquid"] button.bg-brand:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 14px 30px -10px rgba(0, 136, 204, 0.85);
}
/* form fields: frosted but nearly opaque so typing stays crisp */
html[data-style="liquid"] main input:not([type="checkbox"]):not([type="radio"]).bg-white,
html[data-style="liquid"] main textarea.bg-white, html[data-style="liquid"] main select.bg-white {
  background: rgba(255, 255, 255, 0.85);
}
html[data-style="liquid"][data-theme="navy"] main input:not([type="checkbox"]):not([type="radio"]),
html[data-style="liquid"][data-theme="navy"] main textarea, html[data-style="liquid"][data-theme="navy"] main select {
  background: rgba(17, 21, 59, 0.6);
}

/* ---------- accessibility / fallbacks ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-style="liquid"] main .bg-white:not(input):not(textarea):not(select):not(section),
  html[data-style="liquid"] main .glass { background: rgba(255, 255, 255, 0.92); }
  html[data-style="liquid"][data-theme="navy"] main .bg-white:not(input):not(textarea):not(select):not(section),
  html[data-style="liquid"][data-theme="navy"] main .glass { background: rgba(33, 37, 82, 0.95); }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-style="liquid"] main .bg-white:not(input):not(textarea):not(select):not(section),
  html[data-style="liquid"] main .glass { background: rgba(255, 255, 255, 0.95); backdrop-filter: none; }
  html[data-style="liquid"][data-theme="navy"] main .bg-white:not(input):not(textarea):not(select):not(section),
  html[data-style="liquid"][data-theme="navy"] main .glass { background: rgba(33, 37, 82, 0.97); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-style="liquid"] main a.bg-white:hover, html[data-style="liquid"] a.bg-brand:hover { transform: none; }
}
/* lighter blur on small screens (GPU cost) */
@media (max-width: 640px) {
  html[data-style="liquid"] main .bg-white:not(input):not(textarea):not(select):not(section),
  html[data-style="liquid"] main .glass { -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
}

/* admin Appearance swatches */
.theme-swatch { height: 7rem; border-radius: 0.75rem; position: relative; overflow: hidden; }
.theme-swatch .tile { position: absolute; border-radius: 0.5rem; }

/* ---------- fixes from screenshot review ---------- */
/* old in-hero blobs are clipped by the hero's overflow and leave a hard seam: the page-wide light replaces them */
html[data-style="liquid"] main .rounded-full.bg-brand-soft.blur-3xl { display: none; }
/* illustrations: their solid white plate becomes glass so the panel shows through */
html[data-style="liquid"] main svg > rect[fill="#FFFFFF"]:first-of-type { fill: rgba(255, 255, 255, 0.35); }
html[data-style="liquid"][data-theme="navy"] main svg > rect[fill="#FFFFFF"]:first-of-type { fill: rgba(255, 255, 255, 0.04); }
/* navy mode: light-theme pieces inside those illustrations re-tinted for a dark plate */
html[data-style="liquid"][data-theme="navy"] main svg:has(> rect[fill="#FFFFFF"]:first-of-type) [fill="#D8EFFB"],
html[data-style="liquid"][data-theme="navy"] main svg:has(> rect[fill="#FFFFFF"]:first-of-type) [fill="#DAEFF9"] { fill: rgba(56, 198, 255, 0.14); }
html[data-style="liquid"][data-theme="navy"] main svg:has(> rect[fill="#FFFFFF"]:first-of-type) [fill="#1B1F4B"] { fill: #D8DBF1; }
html[data-style="liquid"][data-theme="navy"] main svg:has(> rect[fill="#FFFFFF"]:first-of-type) [stroke="#1B1F4B"] { stroke: #D8DBF1; }
/* navy mode (both styles): icon tiles were navy glyph on navy tile */
html[data-theme="navy"] .bg-brand-soft.text-brand, html[data-theme="navy"] .bg-brand-soft\/60.text-brand { color: #38C6FF; background-color: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(56, 198, 255, 0.35); }
/* light mode: extra mid-page light so the card rows have colour behind the frost */
html[data-style="liquid"]:not([data-theme="navy"]) main { position: relative; }
html[data-style="liquid"]:not([data-theme="navy"]) main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28rem 20rem at 85% 900px, rgba(0, 136, 204, 0.20), transparent 70%),
    radial-gradient(30rem 22rem at 12% 1300px, rgba(27, 31, 75, 0.12), transparent 70%),
    radial-gradient(26rem 20rem at 60% 2100px, rgba(0, 136, 204, 0.14), transparent 70%);
}

/* ---------- pass 4 (2026-10-10): pending fixes ---------- */
/* icon tiles sitting on cream/amber-soft cards were invisible: give them their own glass chip */
.bg-brand-soft > .bg-brand-soft.text-brand, .bg-sand > .bg-brand-soft.text-brand,
.bg-brand-soft .bg-brand-soft.text-brand {
  background: rgba(255, 255, 255, 0.85); box-shadow: inset 0 0 0 1px rgba(0, 136, 204, 0.45), 0 6px 14px -8px rgba(27, 31, 75, 0.35);
}
/* stronger light-mode backdrop: more colour for the frost to bend */
html[data-style="liquid"]:not([data-theme="navy"]) body.bg-white {
  background:
    radial-gradient(44rem 34rem at 100% 0%, rgba(0, 136, 204, 0.34), transparent 62%),
    radial-gradient(48rem 38rem at 0% 40%, rgba(27, 31, 75, 0.22), transparent 62%),
    radial-gradient(42rem 32rem at 90% 70%, rgba(56, 198, 255, 0.26), transparent 62%),
    radial-gradient(40rem 30rem at 15% 95%, rgba(86, 89, 123, 0.26), transparent 62%),
    #E7E9F5;
  background-attachment: fixed;
}
html[data-style="liquid"]:not([data-theme="navy"]) main .bg-white:not(input):not(textarea):not(select):not(section),
html[data-style="liquid"]:not([data-theme="navy"]) main .glass {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0.42) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(200%); backdrop-filter: blur(26px) saturate(200%);
}
/* solutions grid: cream and amber-soft link cards become tinted glass instead of flat fills */
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(183, 231, 255, 0.62), rgba(255, 255, 255, 0.30));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255,.9), inset 0 0 0 1px rgba(255, 255, 255,.5), 0 18px 40px -24px rgba(27, 31, 75,.3);
}
/* hero sections carry their own inner padding; theme-flagship.css's blanket `section{padding:96px 0}` doubled it */
main > section.relative.overflow-hidden { padding-top: 0; padding-bottom: 0; }
/* the slate/navy light on the left read as a grey smudge: light mode keeps only amber + a faint cool wash */
html[data-style="liquid"]:not([data-theme="navy"]) body.bg-white {
  background:
    radial-gradient(44rem 34rem at 100% 0%, rgba(0, 136, 204, 0.30), transparent 62%),
    radial-gradient(40rem 30rem at 92% 68%, rgba(56, 198, 255, 0.22), transparent 62%),
    radial-gradient(36rem 30rem at 30% 62%, rgba(0, 136, 204, 0.12), transparent 65%),
    radial-gradient(38rem 28rem at 10% 95%, rgba(0, 136, 204, 0.16), transparent 62%),
    #ECEEF7;
  background-attachment: fixed;
}
html[data-style="liquid"]:not([data-theme="navy"]) main::before { background:
    radial-gradient(28rem 20rem at 88% 1000px, rgba(0, 136, 204, 0.18), transparent 70%),
    radial-gradient(26rem 20rem at 55% 2100px, rgba(56, 198, 255, 0.14), transparent 70%); }
/* card links: pin "Read the guide" to the bottom so rows line up */
main a.rounded-3xl.p-8 { display: flex; flex-direction: column; }
main a.rounded-3xl.p-8 > :last-child { margin-top: auto; padding-top: .75rem; }
/* home "first offer" band: sits close under the hero, calm solid panel in both modes */
main > section.offer-band { padding: 0 0 24px; box-shadow: none; }
main > section.relative.overflow-hidden + section.offer-band { margin-top: -40px; }
html[data-style] main .offer-panel { background: linear-gradient(140deg, #1E2252, #1B1F4B) !important; box-shadow: 0 24px 50px -28px rgba(27, 31, 75,.6), inset 0 1px 0 rgba(255, 255, 255,.08); overflow: hidden; }
html[data-style] main .offer-panel .bg-white\/5 { background: rgba(255, 255, 255,.07) !important; }
/* light mode: amber-tinted icon tiles on warm glass cards were washed out */
html:not([data-theme="navy"]) main .glass > .bg-brand-soft.text-brand,
html:not([data-theme="navy"]) main .glass .bg-brand-soft.text-brand { background: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(0, 136, 204,.45), 0 6px 14px -8px rgba(27, 31, 75,.35); }