/* Liquid glass for the bento tiles: translucent material, bright edge, specular light that follows the pointer.
   Glass only reads over colour, so soft colour drifts behind the grid. */
.glass-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.glass-bg i { position: absolute; width: 46vw; height: 46vw; border-radius: 50%; filter: blur(70px); opacity: .6; will-change: transform; animation: gb-drift 28s ease-in-out infinite alternate; }
.glass-bg i:nth-child(1) { background: var(--glow-1); left: -8vw; top: 6vh; }
.glass-bg i:nth-child(2) { background: var(--glow-2); right: -10vw; top: 2vh; width: 38vw; height: 38vw; animation-duration: 34s; animation-delay: -9s; }
.glass-bg i:nth-child(3) { background: var(--glow-3); left: 24vw; bottom: -12vh; animation-duration: 31s; animation-delay: -4s; }
.glass-bg i:nth-child(4) { background: var(--glow-4); opacity: .32; right: 4vw; bottom: -8vh; width: 34vw; height: 34vw; animation-duration: 38s; animation-delay: -15s; }
@keyframes gb-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(7vw, -6vh, 0) scale(1.18); } }
:root[data-theme="dark"] .glass-bg i { opacity: .42; } :root[data-theme="dark"] .glass-bg i:nth-child(4) { opacity: .26; }

.bento.glass .bt {
  --mx: 28%; --my: 0%;
  background: linear-gradient(140deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,.4) 100%);
  -webkit-backdrop-filter: blur(26px) saturate(190%); backdrop-filter: blur(26px) saturate(190%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35), inset 0 0 34px rgba(255,255,255,.28), 0 24px 44px -22px rgba(40,24,16,.38), 0 2px 6px rgba(40,24,16,.08);
  isolation: isolate; animation: gl-in .7s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--n, 0) * 70ms);
}
.bento.glass .bt:nth-child(1) { --n: 0; } .bento.glass .bt:nth-child(2) { --n: 1; } .bento.glass .bt:nth-child(3) { --n: 2; } .bento.glass .bt:nth-child(4) { --n: 3; } .bento.glass .bt:nth-child(6) { --n: 4; } .bento.glass .bt:nth-child(7) { --n: 5; } .bento.glass .bt:nth-child(8) { --n: 6; }
/* the specular: a soft light that follows the pointer, and a thin bright rim along the top-left edge */
.bento.glass .bt::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 60%); opacity: .55; transition: opacity .3s ease; }
.bento.glass .bt:hover::before { opacity: 1; }
.bento.glass .bt::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,.3) 100%); mix-blend-mode: soft-light; }
.bento.glass .bt:hover { transform: translateY(-4px) scale(1.005); }
.bento.glass .bt:active { transform: scale(.992); }
@keyframes gl-in { from { opacity: 0; transform: translateY(14px) scale(.965); } }

/* text on glass: heavier and higher contrast, never flat grey */
.bento.glass .bt p { color: color-mix(in srgb, var(--ink) 90%, transparent); font-weight: 450; }
.bento.glass .bt small.l { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.bento.glass .bt h2 { text-shadow: 0 1px 0 rgba(255,255,255,.35); }

/* dark and red glass */
.bento.glass .bt.dk { background: linear-gradient(140deg, rgba(24,25,32,.7), rgba(8,8,12,.5)); border-color: rgba(255,255,255,.2); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 0 34px rgba(255,255,255,.05), 0 24px 44px -22px rgba(0,0,0,.6); color: #f1f0ec; }
.bento.glass .bt.dk p { color: rgba(241,240,236,.82); } .bento.glass .bt.dk small.l { color: rgba(241,240,236,.62); } .bento.glass .bt.dk h2 { text-shadow: none; }
.bento.glass .bt.dk::before { background: radial-gradient(520px circle at var(--mx) var(--my), rgba(255,255,255,.22), rgba(255,255,255,0) 60%); }
.bento.glass .bt.ac { background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 92%, transparent), color-mix(in srgb, color-mix(in srgb, var(--brand) 75%, black) 80%, transparent)); border-color: rgba(255,255,255,.4); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 0 34px rgba(255,255,255,.14), 0 24px 44px -22px rgba(190,30,30,.55); color: #fff; }
.bento.glass .bt.ac p { color: rgba(255,255,255,.94); } .bento.glass .bt.ac small.l { color: rgba(255,255,255,.82); } .bento.glass .bt.ac h2 { text-shadow: 0 1px 8px rgba(100,8,8,.3); } .bento.glass .bt.ac .pill.solid { color: var(--brand-deep); }

/* the wide payment demo sits on heavier, darker glass because it is the biggest surface */
.bento.glass .bt-wide .dm-surface { background: linear-gradient(145deg, rgba(22,23,30,.72), rgba(8,8,12,.55)); -webkit-backdrop-filter: blur(34px) saturate(170%); backdrop-filter: blur(34px) saturate(170%); border: 1px solid rgba(255,255,255,.22); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 0 40px rgba(255,255,255,.05), 0 30px 60px -26px rgba(0,0,0,.65); }
.bento.glass .bt-wide .dm-surface::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(640px circle at var(--mx, 30%) var(--my, 0%), rgba(255,255,255,.14), rgba(255,255,255,0) 60%); }
.bento.glass .py-mix { background: linear-gradient(140deg, rgba(255,255,255,.55), rgba(255,255,255,.25)); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.9), 0 16px 34px -20px rgba(40,24,16,.35); }
.bento.glass .bt-more li a { background: rgba(255,255,255,.42); border-color: rgba(255,255,255,.7); }
.bento.glass .bt-more li a:hover { background: rgba(255,255,255,.7); }

/* dark theme: the glass turns smoky, the rim stays bright */
:root[data-theme="dark"] .bento.glass .bt:not(.dk):not(.ac), :root[data-theme="dark"] .bento.glass .py-mix { background: linear-gradient(140deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 55%, rgba(255,255,255,.1)); border-color: rgba(255,255,255,.22); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 0 34px rgba(255,255,255,.05), 0 24px 44px -22px rgba(0,0,0,.6); }
:root[data-theme="dark"] .bento.glass .bt-more li a { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
:root[data-theme="dark"] .bento.glass .bt p, :root[data-theme="dark"] .bento.glass .py-mix p { color: rgba(241,240,236,.84); }

/* small and touch screens: a lighter glass and still colour, so older phones stay smooth */
@media (max-width: 760px), (hover: none) {
  .glass-bg i { animation: none; filter: blur(44px); }
  .glass-bg i:nth-child(4) { display: none; }
  .bento.glass .bt { -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); animation-duration: .4s; }
  .bento.glass .bt-wide .dm-surface { -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
  .bento.glass .py-mix { -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%); }
  .bento.glass .bt::before { display: none; }
}

/* accessibility and fallbacks: frostier and still, never unreadable */
@media (prefers-reduced-transparency: reduce) {
  .bento.glass .bt, .bento.glass .py-mix, .bento.glass .bt-wide .dm-surface { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bento.glass .bt:not(.dk):not(.ac) { background: var(--card); } .bento.glass .bt.dk { background: #14151a; } .bento.glass .bt.ac { background: var(--accent); }
  .bento.glass .bt-wide .dm-surface { background: #14151a; } .glass-bg { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bento.glass .bt:not(.dk):not(.ac) { background: var(--card); } .bento.glass .bt.dk { background: #14151a; } .bento.glass .bt-wide .dm-surface { background: #14151a; }
}
@media (prefers-reduced-motion: reduce) { .glass-bg i, .bento.glass .bt { animation: none; } .bento.glass .bt:hover { transform: none; } }
.bento.glass .bt .crumbs, .bento.glass .bt .crumbs a { color: color-mix(in srgb, var(--ink) 68%, transparent); }

/* ---- legibility pass (measured, not guessed) ----
   Light glass over a bright glow becomes a mid-tone, where grey text fails. So: light mode keeps ink-dark text and a deeper red for the
   title accent; dark mode uses smoky glass (dark tint) so light text always sits on a dark pixel. */
.bento.glass .bt-hero h1 em { color: var(--brand-deep); }
.bento.glass .bt-more li span { color: color-mix(in srgb, var(--ink) 74%, transparent); }
.bento.glass .bt figcaption, .bento.glass .bt-shots figcaption { color: color-mix(in srgb, var(--ink) 88%, transparent); }
.bento.glass .py-mix p { color: color-mix(in srgb, var(--ink) 88%, transparent); }
.glass ~ .lay-foot .foot, .lay-bento .lay-foot .foot { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.lay-bento .lay-foot .foot a:hover { color: var(--ink); }
.bento.glass .bt-wide .dm-surface { background: linear-gradient(145deg, rgba(20,21,28,.82), rgba(8,8,12,.7)); }
.bento.glass .bt-wide .py-tag { color: #c9cbd2; }
.bento.glass .bt-wide .dm-cap, .bento.glass .dm-cap { color: color-mix(in srgb, var(--ink) 80%, transparent); }
:root[data-theme="dark"] .bento.glass .bt:not(.dk):not(.ac), :root[data-theme="dark"] .bento.glass .py-mix { background: linear-gradient(140deg, rgba(18,18,24,.66), rgba(8,8,12,.5)); }
:root[data-theme="dark"] .bento.glass .bt-hero h1 em { color: var(--brand-soft); }
:root[data-theme="dark"] .bento.glass .bt-more li span, :root[data-theme="dark"] .bento.glass .bt figcaption, :root[data-theme="dark"] .bento.glass .py-mix p, :root[data-theme="dark"] .bento.glass .dm-cap { color: rgba(241,240,236,.9); }
:root[data-theme="dark"] .bento.glass .bt small.l { color: rgba(241,240,236,.94); }

/* red glass: deeper tint so white text keeps contrast over the brightest glow */
.bento.glass .bt.ac { background: linear-gradient(140deg, color-mix(in srgb, color-mix(in srgb, var(--brand) 92%, black) 95%, transparent), color-mix(in srgb, color-mix(in srgb, var(--brand) 70%, black) 88%, transparent)); }
.bento.glass .bt.ac p, .bento.glass .bt.ac small.l { color: #fff; }
.bento.glass .bt-wide .py-tag { color: #e1e3e8; }

/* the specular must not wash out the label sitting under it on the coloured tiles */
.bento.glass .bt.ac::before, .bento.glass .bt.dk::before { opacity: .22; }
.bento.glass .bt.ac:hover::before, .bento.glass .bt.dk:hover::before { opacity: .5; }
.bento.glass .bt.ac::after { background: linear-gradient(135deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 74%, rgba(255,255,255,.18) 100%); }
.bento.glass .bt.dk { background: linear-gradient(140deg, rgba(20,21,28,.86), rgba(8,8,12,.74)); }
.bento.glass .bt.dk small.l { color: rgba(241,240,236,.88); } .bento.glass .bt.dk p { color: rgba(241,240,236,.92); }
.bento.glass .bt-wide .py-tag { color: #fff; }

/* dark mode: deeper smoke and a calmer glow, so light text always sits on a dark pixel; red tile labels stay white */
:root[data-theme="dark"] .bento.glass .bt:not(.dk):not(.ac), :root[data-theme="dark"] .bento.glass .py-mix { background: linear-gradient(140deg, rgba(12,12,16,.82), rgba(6,6,9,.7)); }
:root[data-theme="dark"] .glass-bg i { opacity: .34; } :root .bento.glass .bt.ac small.l, :root .bento.glass .bt.ac p { color: #fff; }
:root[data-theme="dark"] .bento.glass .bt-more li a, :root[data-theme="dark"] .bento.glass .bt .crumbs a { color: rgba(241,240,236,.94); }