/* ===== polish (2026-11-05). Loaded last, after d2.css. ===== */

/* --- dark theme: d2.css paints the white → #FAFAFA band as a background IMAGE on .fs and .kb, which sat on top of
   the dark background colour, so only the cards went dark. The band now lives on a layer behind the section and
   fades out with the theme, so the whole page crossfades. --- */
.fs, .kb { background-image: none; isolation: isolate; }
.kb { position: relative; }
.fs::before, .kb::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(#FFFFFF 0%, #FAFAFA 32%, #FAFAFA 87%, #FFFFFF 100%); transition: opacity .6s var(--e); }
html.dark .fs::before, html.dark .kb::before { opacity: 0; }

/* --- sticky ripples: about 6% more visible --- */
.rings { opacity: .585; }

/* --- hero cards: solid and crisp, clearly in front of the colour (the frosted glass let the light through,
   which read as the gradient lying on top of them) --- */
.f--row, .f--stop { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none;
  border: 1px solid rgba(13,18,16,.06);
  box-shadow: 0 1px 2px rgba(13,18,16,.04), 0 18px 36px -22px rgba(13,18,16,.18) !important; }
.f--row .tile, .f--stop .tile, .f--stop .sum { background: #F4F5F3; }

/* --- the headline pill's charger: the app's own marker under a price tag with a notch, instead of a dot and a
   ripple. While the car charges the marker turns green (status), with no glow or rings. --- */
@property --mkbg { syntax: '<color>'; inherits: true; initial-value: #fff; }
@property --mkfg { syntax: '<color>'; inherits: true; initial-value: #1E9E5A; }
.pill__glow, .pill__pin i::after { display: none !important; }
.pill__pin b { position: relative; }
.pill__pin b::after { content: ""; position: absolute; left: 50%; bottom: -.3em; width: .62em; height: .62em; margin-left: -.31em;
  border-radius: .12em; background: inherit; transform: rotate(45deg); z-index: -1; }
.pill__pin i.pp__mk { display: grid; place-items: center; width: .2em; height: .2em; margin-top: .055em; border-radius: 50%;
  background: var(--mkbg); color: var(--mkfg); box-shadow: 0 .008em .03em rgba(13,18,16,.3); animation: none; }
.pp__mk svg { width: .15em; height: .15em; display: block; }
.pp__mk .mk-b { fill: currentColor; } .pp__mk .mk-w { fill: var(--mkbg); } .pp__mk .mk-c { fill: none; stroke: currentColor; }
.js .pill__pin i.pp__mk { animation: pMk 7s infinite 1.7s backwards; }
@keyframes pMk {
  0%, 30% { --mkbg: #fff; --mkfg: #1E9E5A; transform: scale(1); }
  33% { transform: scale(.86); }                                  /* the plug goes in */
  37% { --mkbg: #1E9E5A; --mkfg: #fff; transform: scale(1.06); }
  41%, 65% { --mkbg: #1E9E5A; --mkfg: #fff; transform: scale(1); }
  70%, 100% { --mkbg: #fff; --mkfg: #1E9E5A; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .js .pill__pin i.pp__mk { animation: none !important; } }

/* --- light → dark handoff into the bento (2026-11-09): slower, softer crossfade, started a little earlier (site.js),
   and the bento's top edge blends up into the light section until the page has gone dark, so there's no hard line --- */
body, .hero, .say, .fs, .kb, .next, .nav,
.fs__h, .fs__p, .kb__h, .kb__card, .kb__txt h3, .kb__txt p, .fs__big, .fs__sm, .eb, .next__t, .bx__t {
  transition-property: background-color, color, box-shadow; transition-duration: .8s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.fs::before, .kb::before { transition: opacity .35s ease-out; }   /* get out of the way fast, so the section colour itself carries the fade in step with the bento edge */
.bento[data-fix="3"] { position: relative; isolation: isolate; }
.bento[data-fix="3"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 320px; z-index: -1; pointer-events: none;
  background: linear-gradient(#FFFFFF 0%, rgba(255,255,255,.75) 30%, rgba(255,255,255,.25) 65%, rgba(255,255,255,0) 100%);
  transition: opacity .8s cubic-bezier(.4, 0, .2, 1); }
html.dark .bento[data-fix="3"]::before { opacity: 0; }
/* .kb was transparent in light mode, so its fade to dark stacked on top of the body's fade and ran ahead of the
   bento edge. An opaque start colour keeps the two in step. */
html body .kb { background-color: #fff; }
/* the fixed blur strip along the bottom of the screen is off (2026-11-09): it smeared and tinted whatever section
   was passing under it, worst at the light → dark handoff */
.vblur { display: none !important; }