/* ============================================================================
   HireJuno — flagship suburb × service page  (css/flagship.css)
   Page: /suburbs/<service>/<suburb> flagship template (first: end of lease
   cleaning, South Yarra). Generated by .dev/B/build-flagship.mjs.

   Scope rule: every selector is prefixed `.fx-` (or scoped under .fx-page) so
   nothing here reaches shared components (.btn, .navbar, mega-menu, footer).
   Tokens come from brand.css / tokens.css; the few extra colours below are the
   page's accent set (tier colours match js/booking.js day chips).
   Motion: transform/opacity only, 150–300ms state changes; loops are the
   documented "continuous indicator" exception; everything is off under
   prefers-reduced-motion (brand.css kills animations/transitions globally).
   ========================================================================== */

.fx-page {
  --fx-green: #2E8B44;
  --fx-green-dk: #1F6B33;
  --fx-green-deep: #14532D;
  --fx-mint: #E9F5EC;
  --fx-mint-2: #D5EDDC;
  --fx-navy: #1B2A41;
  --fx-navy-deep: #0F1B2D;
  --fx-cream: #FAF8F3;
  --fx-sand: #F3EFE6;
  --fx-line: #E7E4DC;
  --fx-line-2: #D8D4C9;
  --fx-ctl: #7E8794;
  --fx-ink: #1B2A41;
  --fx-ink-2: #4A5568;
  --fx-ink-3: #5F6B7F;
  --fx-gold: #F6B93B;
  --fx-gold-2: #E29A17;
  --fx-gold-soft: #FFF6DC;
  --fx-gold-line: #F4D48A;
  --fx-gold-ink: #7A4A00;
  --fx-sky: #DCEEFA;
  --fx-sky-ink: #1D5A9E;
  --fx-amber: #F5A623;
  --fx-amber-soft: #FDF3DC;
  --fx-amber-ink: #8A6200;
  --fx-red: #D64545;
  --fx-red-soft: #FBE8E8;
  --fx-red-ink: #B93030;
  --fx-r: 20px;
  --fx-r-lg: 28px;
  --fx-shadow-1: 0 1px 2px rgb(27 42 65 / .05), 0 2px 8px -4px rgb(27 42 65 / .08);
  --fx-shadow-2: 0 2px 4px -1px rgb(27 42 65 / .06), 0 14px 30px -12px rgb(27 42 65 / .16);
  --fx-shadow-3: 0 6px 12px -4px rgb(27 42 65 / .08), 0 30px 60px -20px rgb(27 42 65 / .28);
  --fx-ease: cubic-bezier(.22, .61, .36, 1);
  --fx-spring: cubic-bezier(.2, .8, .3, 1.15);
  --fx-top: 72px;             /* sticky navbar height (brand.css) */
  background: var(--fx-cream);
  overflow-x: clip;
}
.fx-main { display: block; }
.fx-page :is(h2, h3) { text-wrap: balance; }
.fx-page p { text-wrap: pretty; }

/* ---------------------------------------------------------------- layout */
.fx-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .fx-wrap { padding-inline: 24px; } }
@media (min-width: 1024px) { .fx-wrap { padding-inline: 32px; } }

/* single-column grids must never grow past the viewport (grid items default to min-width:auto) */
.fx-hero__grid, .fx-hero__side, .fx-calc, .fx-calc__side, .fx-check, .fx-ex, .fx-revs, .fx-bento, .fx-explore, .fx-faq, .fx-promise, .fx-credits { grid-template-columns: minmax(0, 1fr); }
.fx-sec { padding-block: 56px; position: relative; }
.fx-sec--tight { padding-block: 48px; }
@media (min-width: 1024px) { .fx-sec { padding-block: 88px; } .fx-sec--tight { padding-block: 64px; } }
.fx-sec--paper { background: #fff; }
.fx-sec--cream { background: var(--fx-cream); }
.fx-sec--sand { background: var(--fx-sand); }
.fx-sec--mint { background: var(--fx-mint); }
.fx-sec--navy { background: var(--fx-navy-deep); color: #fff; isolation: isolate; overflow: hidden; }
.fx-sec--navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 380px at 8% 0%, rgb(46 139 68 / .32), transparent 70%),
    radial-gradient(520px 340px at 100% 100%, rgb(246 185 59 / .14), transparent 70%);
}

.fx-head { max-width: 720px; margin-bottom: 28px; }
@media (min-width: 1024px) { .fx-head { margin-bottom: 40px; } }
.fx-head h2 {
  font-size: clamp(1.75rem, 1.25rem + 2.1vw, 2.65rem); line-height: 1.1;
  letter-spacing: -0.025em; font-weight: 800; margin: 0 0 12px;
}
.fx-head p { font-size: clamp(1rem, .96rem + .2vw, 1.12rem); line-height: 1.6; color: var(--fx-ink-2); margin: 0; }
.fx-head--light h2 { color: #fff; }
.fx-head--light p { color: #C7D1DE; }

.fx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--fx-green-dk);
}
.fx-eyebrow .fx-ic {
  width: 30px; height: 30px; padding: 6px; border-radius: 10px;
  background: var(--fx-mint); color: var(--fx-green-dk);
}
.fx-sec--mint .fx-eyebrow .fx-ic { background: #fff; }
.fx-eyebrow--light { color: #9BE0AF; }
.fx-eyebrow--light > .fx-ic { background: rgb(46 139 68 / .25); color: #9BE0AF; }

.fx-ic { width: 1.15em; height: 1.15em; flex: none; display: inline-block; }
.fx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fx-muted { color: var(--fx-ink-3); }
.fx-fine { font-size: .85rem; color: var(--fx-ink-3); margin: 14px 0 0; }
.fx-more { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 24px; }
.fx-more .fx-fine { margin-top: 6px; text-align: center; }
.fx-link { display: inline-flex; align-items: center; gap: 6px; color: var(--fx-green-dk); font-weight: 600; }
.fx-link .fx-ic { transition: transform .2s var(--fx-ease); }
.fx-link:hover .fx-ic { transform: translateX(3px); }
.fx-link-btn {
  appearance: none; background: none; border: 0; padding: 0 2px; min-height: 44px;
  color: var(--fx-green-dk); font: 600 .95rem/1.2 var(--font-body); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.fx-link-btn:hover { color: var(--fx-green-deep); }

/* --------------------------------------------------------------- buttons */
.fx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1.1 var(--font-display); letter-spacing: -0.005em; text-align: center;
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--fx-ease), box-shadow .2s var(--fx-ease), background-color .15s linear, border-color .15s linear, color .15s linear;
  -webkit-tap-highlight-color: transparent;
}
.fx-btn:active { transform: scale(.97); }
.fx-btn .fx-ic { width: 18px; height: 18px; }
.fx-btn:hover .fx-ic:last-child:not(:first-child) { transform: translateX(2px); }
.fx-btn .fx-ic { transition: transform .2s var(--fx-ease); }
.fx-btn--sm { min-height: 44px; padding: 0 16px; font-size: .92rem; }
.fx-btn--lg { min-height: 56px; padding: 0 26px; font-size: 1.05rem; }
.fx-btn--block { width: 100%; }
.fx-btn--primary { background: var(--fx-green-dk); color: #fff; box-shadow: 0 8px 20px -8px rgb(31 107 51 / .55); }
.fx-btn--primary:hover { background: var(--fx-green-deep); color: #fff; box-shadow: 0 12px 26px -10px rgb(31 107 51 / .6); transform: translateY(-1px); }
.fx-btn--ghost { background: #fff; color: var(--fx-ink); border-color: var(--fx-line-2); }
.fx-btn--ghost:hover { border-color: var(--fx-green-dk); color: var(--fx-green-dk); }
.fx-btn--outline { background: transparent; color: var(--fx-green-dk); border-color: var(--fx-green-dk); }
.fx-btn--outline:hover { background: var(--fx-mint); }
.fx-btn--light { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .35); }
.fx-btn--light:hover { background: rgb(255 255 255 / .2); border-color: #fff; }
.fx-btn--white { background: #fff; color: var(--fx-green-deep); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .35); }
.fx-btn--white:hover { transform: translateY(-1px); color: var(--fx-green-deep); }
.fx-btn--outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / .82); }
.fx-btn--outline-light:hover { background: rgb(255 255 255 / .1); color: #fff; }
.fx-btn--gold { background: linear-gradient(135deg, #FFD978, var(--fx-gold) 55%, var(--fx-gold-2)); color: #2B1A00; box-shadow: 0 10px 22px -12px rgb(226 154 23 / .8); }
.fx-btn--gold:hover { transform: translateY(-1px); color: #2B1A00; }
.fx-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.fx-actions--center { justify-content: center; }
.fx-page :is(a, button, input, summary):focus-visible { outline: 3px solid var(--fx-green-dk); outline-offset: 2px; }
.fx-sec--navy :is(a, button):focus-visible, .fx-final :is(a, button):focus-visible { outline-color: #fff; }

/* ----------------------------------------------------------------- stars */
.fx-starwrap { display: inline-flex; align-items: center; line-height: 0; flex: none; }
.fx-promise-mark { display: inline-grid; place-items: center; }
.fx-promise-mark .hj-promise { width: 30px; height: 30px; }
.fx-eyebrow--light .fx-promise-mark > .fx-ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: rgb(46 139 68 / .25); }
.fx-promise__ic .hj-icon, .fx-room__ic .hj-icon, .fx-journey__ic .hj-icon { width: 24px; height: 24px; }
.fx-promise__ic { --hj-icon-duo: .3; }
.fx-stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; flex: none; }
.fx-stars__row { display: inline-flex; gap: 1px; white-space: nowrap; }
.fx-stars__row svg { display: block; width: var(--fx-star, 16px); height: var(--fx-star, 16px); fill: currentColor; }
.fx-stars__row--base { color: #D8D4C9; }
.fx-stars__row--fill { position: absolute; inset: 0 auto 0 0; width: var(--fx-fill, 100%); overflow: hidden; color: #F5B800; }
.fx-stars--xs { --fx-star: 11px; }
.fx-stars--sm { --fx-star: 14px; }
.fx-stars--md { --fx-star: 18px; }
.fx-stars--lg { --fx-star: 24px; }

/* ------------------------------------------------------------------ hero */
.fx-hero {
  position: relative; padding: 12px 0 44px;
  background:
    radial-gradient(900px 520px at 88% -8%, #DDF0E2 0%, transparent 62%),
    radial-gradient(640px 420px at -12% 105%, #FDF0CF 0%, transparent 62%),
    var(--fx-cream);
}
@media (min-width: 1024px) { .fx-hero { padding: 18px 0 72px; } }
.fx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: .84rem; color: var(--fx-ink-3); margin-bottom: 18px; }
.fx-crumb a { color: var(--fx-ink-2); padding: 10px 2px; }
.fx-crumb a:hover { color: var(--fx-green-dk); }
.fx-crumb .fx-ic { width: 14px; height: 14px; color: var(--fx-ctl); }
.fx-crumb [aria-current] { color: var(--fx-ink); font-weight: 600; }
@media (max-width: 767px) {
  .fx-crumb { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; margin-bottom: 12px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .fx-crumb::-webkit-scrollbar { display: none; }
  .fx-crumb > * { flex: none; }
}
.fx-hero__grid { display: grid; gap: 32px; align-items: center; }
@media (min-width: 1024px) { .fx-hero__grid { grid-template-columns: 1.08fr .92fr; gap: 56px; } }
.fx-hero__copy { min-width: 0; }
.fx-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 16px;
  padding: 7px 14px 7px 10px; border-radius: 999px; font: 600 .88rem/1.2 var(--font-display);
}
.fx-chip--place { background: #fff; color: var(--fx-green-dk); border: 1px solid #CFE6D6; box-shadow: var(--fx-shadow-1); }
.fx-chip .fx-ic { width: 16px; height: 16px; }
.fx-hero__title {
  font-size: clamp(2.3rem, 1.55rem + 3.4vw, 4rem); line-height: 1.02; font-weight: 800;
  letter-spacing: -0.035em; margin: 0 0 14px; color: var(--fx-ink);
}
.fx-mark {
  color: var(--fx-green-dk); white-space: nowrap;
  background: linear-gradient(transparent 64%, #CDEBD5 64%, #CDEBD5 90%, transparent 90%) no-repeat 0 0 / 100% 100%;
  animation: fx-mark .5s .15s var(--fx-ease) both;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@keyframes fx-mark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.fx-hero__kicker { font: 700 clamp(1.1rem, 1rem + .5vw, 1.35rem)/1.3 var(--font-display); color: var(--fx-green-dk); margin: 0 0 10px; }
.fx-hero__lede { font-size: clamp(1rem, .96rem + .25vw, 1.12rem); line-height: 1.6; color: var(--fx-ink-2); max-width: 56ch; margin: 0 0 18px; }
.fx-rating {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 16px 9px 12px; border-radius: 16px; background: #fff; border: 1px solid var(--fx-line);
  box-shadow: var(--fx-shadow-1); color: var(--fx-ink-2) !important; font-size: .93rem; line-height: 1.35;
  text-decoration: none !important; transition: transform .2s var(--fx-ease), box-shadow .2s var(--fx-ease);
}
.fx-rating b { color: var(--fx-ink); }
.fx-rating:hover { transform: translateY(-2px); box-shadow: var(--fx-shadow-2); }
.fx-hero__buy { margin-top: 22px; }
.fx-from { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 16px; }
.fx-from > span { font: 600 1rem var(--font-display); color: var(--fx-ink-3); }
.fx-from b { font: 800 clamp(2.4rem, 2rem + 1.6vw, 3.1rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--fx-ink); }
.fx-from small { flex-basis: 100%; font-size: .88rem; color: var(--fx-ink-3); }
.fx-hero__assure { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.fx-hero__assure li { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 500; color: var(--fx-ink-2); }
.fx-hero__assure .fx-ic { color: var(--fx-green); width: 17px; height: 17px; }
.fx-hero__side { display: grid; gap: 18px; min-width: 0; }
.fx-hero__local {
  display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 14px 16px;
  border-radius: 16px; background: rgb(255 255 255 / .7); border: 1px solid var(--fx-line);
  font-size: .93rem; line-height: 1.55; color: var(--fx-ink-2); max-width: 60ch;
}
.fx-hero__local .fx-ic { color: var(--fx-green); margin-top: 2px; }
@media (max-width: 480px) { .fx-actions .fx-btn--lg { width: 100%; } }

.fx-hero__media { position: relative; margin: 0; min-width: 0; padding: 0 0 18px; }
.fx-hero__media::before {
  content: ""; position: absolute; inset: 22px -10px 4px 26px; border-radius: 34px; z-index: 0;
  background: linear-gradient(140deg, #CDEBD5, #FDF0CF); transform: rotate(3deg);
}
.fx-hero__photo {
  position: relative; z-index: 1; aspect-ratio: 4 / 3.2; border-radius: var(--fx-r-lg); overflow: hidden;
  background: var(--fx-mint); box-shadow: var(--fx-shadow-3);
}
.fx-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.fx-hero__cap {
  position: absolute; z-index: 2; right: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; background: rgb(15 27 45 / .72); color: #fff; font-size: .74rem; font-weight: 500;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fx-hero__cap .fx-ic { width: 13px; height: 13px; }
.fx-float {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 10px; border-radius: 16px; background: rgb(255 255 255 / .96);
  box-shadow: var(--fx-shadow-2); border: 1px solid rgb(231 228 220 / .8); max-width: 250px;
  animation: fx-pop .3s var(--fx-spring) both;
}
.fx-float b { display: block; font: 700 .92rem/1.2 var(--font-display); color: var(--fx-ink); }
.fx-float small { display: block; font-size: .74rem; line-height: 1.3; color: var(--fx-ink-3); }
.fx-float__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--fx-mint); color: var(--fx-green-dk); flex: none; }
.fx-float__ic--sky { background: var(--fx-sky); color: var(--fx-sky-ink); }
.fx-float__ic .fx-ic { width: 20px; height: 20px; }
.fx-float--a { top: 48px; left: 10px; animation-delay: .25s; }
.fx-float--b { bottom: 70px; right: 10px; animation-delay: .4s; }
.fx-float--c { bottom: 0; left: 18px; padding: 9px 14px; border-radius: 999px; font: 600 .84rem/1.2 var(--font-display); color: var(--fx-ink); animation-delay: .1s; white-space: nowrap; max-width: none; }
.fx-float--c[hidden] { display: none; }
@media (min-width: 1024px) {
  .fx-float--a { left: -26px; top: 58px; }
  .fx-float--b { right: -22px; }
}
@media (max-width: 639px) { .fx-float--b { display: none; } .fx-float:not(.fx-float--c) { max-width: 230px; } .fx-hero__photo { aspect-ratio: 4 / 3.4; } }
.fx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fx-green); flex: none; position: relative; }
.fx-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--fx-green); opacity: 0; animation: fx-ping 1.6s ease-out infinite; }
@keyframes fx-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fx-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- sub-nav */
.fx-subnav { background: #fff; border-bottom: 1px solid var(--fx-line); border-top: 1px solid var(--fx-line); }
.fx-subnav .fx-wrap { display: flex; align-items: center; gap: 12px; }
.fx-subnav ul {
  list-style: none; margin: 0; padding: 8px 0; display: flex; gap: 6px; overflow-x: auto; flex: 1;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.fx-subnav ul::-webkit-scrollbar { display: none; }
.fx-subnav ul a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  font: 600 .92rem/1 var(--font-display); color: var(--fx-ink-2); white-space: nowrap; text-decoration: none !important;
  transition: background-color .15s linear, color .15s linear;
}
.fx-subnav ul a:hover { background: var(--fx-sand); color: var(--fx-ink); }
.fx-subnav ul a[aria-current="true"] { background: var(--fx-mint); color: var(--fx-green-dk); }
.fx-subnav__cta { display: none; }
@media (min-width: 1024px) {
  .fx-subnav { position: sticky; top: var(--fx-top); z-index: 90; background: rgb(255 255 255 / .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .fx-subnav ul { -webkit-mask-image: none; mask-image: none; }
  .fx-subnav__cta { display: inline-flex; }
}

/* ------------------------------------------------------------ calculator */
.fx-calc { display: grid; gap: 20px; }
@media (min-width: 1024px) { .fx-calc { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 28px; align-items: start; } }
.fx-calc__controls { background: var(--fx-cream); border: 1px solid var(--fx-line); border-radius: var(--fx-r-lg); padding: 8px 18px 18px; min-width: 0; }
@media (min-width: 768px) { .fx-calc__controls { padding: 12px 26px 26px; } }
.fx-calc__mini {
  position: sticky; top: 80px; z-index: 5; margin: 10px 0 2px; display: flex; align-items: baseline; gap: 8px;
  width: fit-content; margin-left: auto; padding: 8px 14px; border-radius: 999px; background: var(--fx-navy); color: #fff;
  box-shadow: 0 10px 24px -12px rgb(15 27 45 / .6); font: 600 .85rem var(--font-display);
}
.fx-calc__mini b { font: 800 1.15rem var(--font-display); font-variant-numeric: tabular-nums; }
.fx-calc__mini small { font-size: .72rem; color: #B9C4D4; font-weight: 500; }
@media (min-width: 1024px) { .fx-calc__mini { display: none; } }
.fx-field { border: 0; margin: 0; padding: 18px 0; min-width: 0; }
.fx-field + .fx-field { border-top: 1px solid var(--fx-line); }
.fx-field__label { display: flex; flex-direction: column; gap: 2px; padding: 0; margin-bottom: 0; }
.fx-field__label > span { font: 700 1.05rem/1.25 var(--font-display); color: var(--fx-ink); }
.fx-field__label small { font-size: .86rem; color: var(--fx-ink-3); }
legend.fx-field__label { float: left; width: 100%; margin-bottom: 12px; }
legend.fx-field__label + * { clear: both; }
.fx-field--counter { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.fx-stepper { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--fx-line); border-radius: 999px; padding: 4px; }
.fx-stepper__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--fx-ctl); background: #fff; color: var(--fx-ink);
  display: grid; place-items: center; cursor: pointer; transition: transform .15s var(--fx-ease), border-color .15s linear, background-color .15s linear;
}
.fx-stepper__btn .fx-ic { width: 18px; height: 18px; }
.fx-stepper__btn:hover:not(:disabled) { border-color: var(--fx-green-dk); color: var(--fx-green-dk); background: var(--fx-mint); }
.fx-stepper__btn:active:not(:disabled) { transform: scale(.92); }
.fx-stepper__btn:disabled { opacity: .35; cursor: not-allowed; }
.fx-stepper__val { min-width: 34px; text-align: center; font: 800 1.35rem/1 var(--font-display); color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fx-stepper__val.is-bump { animation: fx-bump .22s var(--fx-spring); }
@keyframes fx-bump { 50% { transform: scale(1.22); } }
.fx-seg__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-seg__opt { position: relative; display: block; cursor: pointer; }
.fx-seg__opt input, .fx-extra input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fx-seg__opt > span {
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-height: 96px; justify-content: center;
  padding: 12px 6px; border-radius: 16px; background: #fff; border: 1.5px solid var(--fx-line-2);
  transition: border-color .15s linear, background-color .15s linear, transform .18s var(--fx-ease), box-shadow .2s var(--fx-ease);
}
.fx-seg__opt > span .fx-ic { width: 26px; height: 26px; color: var(--fx-ink-3); transition: color .15s linear, transform .2s var(--fx-spring); }
.fx-seg__opt b { font: 700 .9rem/1.15 var(--font-display); color: var(--fx-ink); }
.fx-seg__opt small { font-size: .78rem; color: var(--fx-ink-3); }
.fx-seg__opt:hover > span { border-color: var(--fx-green); }
.fx-seg__opt input:checked + span { border: 2px solid var(--fx-green-dk); background: var(--fx-mint); box-shadow: 0 6px 16px -10px rgb(31 107 51 / .6); }
.fx-seg__opt input:checked + span .fx-ic { color: var(--fx-green-dk); transform: scale(1.08); }
.fx-seg__opt input:checked + span small { color: var(--fx-green-dk); font-weight: 600; }
.fx-seg__opt input:focus-visible + span, .fx-extra input:focus-visible ~ .fx-extra__txt { outline: 3px solid var(--fx-green-dk); outline-offset: 2px; }
.fx-extras__grid { display: grid; gap: 8px; }
@media (min-width: 640px) { .fx-extras__grid { grid-template-columns: 1fr 1fr; } }
.fx-extra {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px;
  padding: 12px 14px; min-height: 64px; border-radius: 16px; background: #fff; border: 1.5px solid var(--fx-line-2); cursor: pointer;
  transition: border-color .15s linear, background-color .15s linear, box-shadow .2s var(--fx-ease);
}
.fx-extra:hover { border-color: var(--fx-green); }
.fx-extra__box { width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--fx-ctl); display: grid; place-items: center; background: #fff; color: transparent; transition: background-color .15s linear, border-color .15s linear, transform .2s var(--fx-spring); }
.fx-extra__box .fx-ic { width: 15px; height: 15px; stroke-width: 3; }
.fx-extra__txt b { display: block; font: 700 .93rem/1.2 var(--font-display); color: var(--fx-ink); }
.fx-extra__txt small { display: block; font-size: .78rem; line-height: 1.35; color: var(--fx-ink-3); margin-top: 2px; }
.fx-extra__price { font: 700 .95rem var(--font-display); color: var(--fx-green-dk); white-space: nowrap; }
.fx-extra:has(input:checked) { border-color: var(--fx-green-dk); background: var(--fx-mint); }
.fx-extra input:checked ~ .fx-extra__box { background: var(--fx-green-dk); border-color: var(--fx-green-dk); color: #fff; transform: scale(1.06); }

.fx-calc__side { display: grid; gap: 16px; min-width: 0; }
@media (min-width: 1024px) { .fx-calc__side { position: sticky; top: calc(var(--fx-top) + 76px); } }
.fx-when { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r-lg); padding: 16px 16px 12px; box-shadow: var(--fx-shadow-1); min-width: 0; }
.fx-when__head h3 { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 2px; }
.fx-when__head h3 .fx-ic { color: var(--fx-green-dk); }
.fx-when__head p { font-size: .86rem; color: var(--fx-ink-3); margin: 0 0 10px; }
.fx-days {
  display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.fx-days:empty { min-height: 90px; border-radius: 16px; background: linear-gradient(90deg, var(--fx-sand) 0%, #fff 50%, var(--fx-sand) 100%) 0 0 / 200% 100%; animation: fx-shimmer 1.2s linear infinite; }
@keyframes fx-shimmer { to { background-position: -200% 0; } }
.fx-day {
  flex: none; width: 64px; min-height: 90px; scroll-snap-align: start; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-radius: 16px; border: 1.5px solid var(--fx-line-2); background: #fff; color: var(--fx-ink); cursor: pointer;
  font-family: var(--font-body); padding: 10px 2px 8px;
  transition: border-color .15s linear, background-color .15s linear, transform .18s var(--fx-ease), box-shadow .2s var(--fx-ease);
}
.fx-day:hover { border-color: var(--fx-green); transform: translateY(-2px); }
.fx-day__dot { position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--fx-green); }
.fx-day--amber .fx-day__dot { background: var(--fx-amber); }
.fx-day--red .fx-day__dot { background: var(--fx-red); }
.fx-day--bonus .fx-day__dot { background: var(--fx-gold-2); }
.fx-day__dow { font-size: .7rem; font-weight: 600; color: var(--fx-ink-3); }
.fx-day__date { font: 800 1.3rem/1.1 var(--font-display); }
.fx-day__mon { font-size: .7rem; color: var(--fx-ink-3); }
.fx-day__tag { margin-top: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px; font: 700 .66rem/1.2 var(--font-display); background: var(--fx-sand); color: var(--fx-ink-2); }
.fx-day--red .fx-day__tag { background: var(--fx-red-soft); color: var(--fx-red-ink); }
.fx-day--amber .fx-day__tag { background: var(--fx-amber-soft); color: var(--fx-amber-ink); }
.fx-day--bonus .fx-day__tag { background: var(--fx-gold-soft); color: var(--fx-gold-ink); }
.fx-day__tag .jc-coin { width: 11px; height: 11px; vertical-align: 0; }
.fx-day[aria-pressed="true"] { border: 2px solid var(--fx-green-dk); background: var(--fx-mint); box-shadow: 0 8px 18px -10px rgb(31 107 51 / .7); transform: translateY(-2px); }
.fx-day:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.fx-legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--fx-ink-2); }
.fx-legend li { display: inline-flex; align-items: center; gap: 6px; }
.fx-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--fx-green); }
.fx-legend .is-amber i { background: var(--fx-amber); }
.fx-legend .is-red i { background: var(--fx-red); }
.fx-legend b { font-weight: 700; color: var(--fx-ink); }

.fx-receipt {
  position: relative; background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r-lg);
  padding: 20px 20px 18px; box-shadow: var(--fx-shadow-2);
}
.fx-receipt::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--fx-green), #7ED39A, var(--fx-gold)); }
.fx-receipt__title { display: flex; align-items: center; gap: 8px; font: 700 1.05rem var(--font-display); color: var(--fx-ink); margin: 4px 0 10px; }
.fx-receipt__title .fx-ic { color: var(--fx-green-dk); }
.fx-receipt__lines { display: grid; gap: 2px; }
.fx-line { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--fx-ink-2); padding: 5px 0; }
.fx-line span:last-child { font-variant-numeric: tabular-nums; color: var(--fx-ink); font-weight: 500; }
.fx-line.is-new { animation: fx-slide .24s var(--fx-ease); }
@keyframes fx-slide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fx-line--red { color: var(--fx-red-ink); } .fx-line--red span:last-child { color: var(--fx-red-ink); font-weight: 700; }
.fx-line--amber { color: var(--fx-amber-ink); } .fx-line--amber span:last-child { color: var(--fx-amber-ink); font-weight: 700; }
.fx-receipt__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1.5px dashed var(--fx-line-2); }
.fx-receipt__total span { font: 700 1rem var(--font-display); color: var(--fx-ink); }
.fx-receipt__total b { font: 800 2.3rem/1 var(--font-display); letter-spacing: -0.03em; color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fx-receipt__credits { margin-top: 10px; }
.fx-receipt__credits[hidden] { display: none; }
.fx-receipt__reward { font-size: .85rem; color: var(--fx-ink-2); margin: 12px 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--fx-gold-soft); border: 1px solid #F8E3B0; }
.fx-receipt__reward b { color: var(--fx-gold-ink); }
.fx-receipt__fine { display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; color: var(--fx-ink-3); margin: 12px 0 0; }
.fx-receipt__fine .fx-ic { color: var(--fx-green); margin-top: 1px; }

/* ------------------------------------------------------- promise (navy) */
.fx-promise { display: grid; gap: 12px; }
.fx-promise__list { list-style: none; margin: 0 -16px; padding: 2px 16px 10px; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; }
.fx-promise__list::-webkit-scrollbar { display: none; }
.fx-promise__list > li { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
@media (min-width: 640px) {
  .fx-promise__list { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .fx-promise__list > li { flex: none; }
}
@media (min-width: 1024px) {
  .fx-promise { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fx-promise__card--big { grid-column: span 2; }
  .fx-promise__list { display: contents; }
}
.fx-promise__card {
  position: relative; overflow: hidden; border-radius: 22px; padding: 22px;
  background: rgb(255 255 255 / .05); border: 1px solid rgb(255 255 255 / .1);
  transition: transform .22s var(--fx-ease), background-color .2s linear, border-color .2s linear;
}
.fx-promise__card:hover { transform: translateY(-3px); background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .2); }
.fx-promise__card h3 { color: #fff; font-size: 1.1rem; margin: 14px 0 6px; }
.fx-promise__card p { color: #C7D1DE; font-size: .94rem; line-height: 1.55; margin: 0; }
.fx-promise__ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgb(46 139 68 / .24); color: #9BE0AF; }
.fx-promise__ic svg { width: 24px; height: 24px; }
.fx-promise__card--big { background: linear-gradient(140deg, #1F6B33, #14532D 70%); border-color: rgb(155 224 175 / .3); padding: 26px; }
.fx-promise__card--big::after {
  content: ""; position: absolute; right: -40px; bottom: -50px; width: 220px; height: 220px; opacity: .12; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.5-3 7.6-7 9-4-1.4-7-4.5-7-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
.fx-promise__card--big h3 { font-size: 1.5rem; }
.fx-promise__card--big p { color: #E3F2E7; font-size: 1.02rem; max-width: 40ch; margin-bottom: 16px; }
.fx-promise__card--big .fx-promise__ic { background: rgb(255 255 255 / .16); color: #fff; }

/* ---------------------------------------------------------------- dialog */
.fx-dialog {
  width: min(540px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); border: 0; padding: 0; border-radius: var(--fx-r-lg);
  background: #fff; color: var(--fx-ink); box-shadow: 0 30px 80px -20px rgb(15 27 45 / .5);
}
.fx-dialog[open] { animation: fx-pop .26s var(--fx-spring); }
.fx-dialog::backdrop { background: rgb(15 27 45 / .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.fx-dialog__inner { position: relative; padding: 28px 22px 22px; }
@media (min-width: 640px) { .fx-dialog__inner { padding: 34px 32px 28px; } }
.fx-dialog__x, .fx-lb__x {
  position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--fx-sand); color: var(--fx-ink);
}
.fx-dialog__x:hover { background: #E9E2D3; }
.fx-dialog__badge { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--fx-mint); color: var(--fx-green-dk); margin-bottom: 14px; }
.fx-dialog__badge svg { width: 28px; height: 28px; }
.fx-dialog h2 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 16px; padding-right: 40px; }
.fx-dialog__steps { list-style: none; margin: 0 0 16px; padding: 0; counter-reset: fxs; display: grid; gap: 0; }
.fx-dialog__steps li { counter-increment: fxs; position: relative; padding: 0 0 18px 50px; }
.fx-dialog__steps li::before {
  content: counter(fxs); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fx-green-dk); color: #fff; font: 800 .95rem var(--font-display);
}
.fx-dialog__steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; width: 2px; background: var(--fx-mint-2); }
.fx-dialog__steps b { display: block; font: 700 1rem/1.3 var(--font-display); }
.fx-dialog__steps span { display: block; font-size: .92rem; color: var(--fx-ink-2); }
.fx-dialog__fine { font-size: .88rem; color: var(--fx-ink-2); background: var(--fx-sand); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; }

/* ------------------------------------------------------------- checklist */
.fx-check { display: grid; gap: 20px; }
@media (min-width: 1024px) { .fx-check { grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr); gap: 28px; align-items: start; } }
.fx-check__tools { display: flex; justify-content: flex-end; margin: -8px 0 4px; }
.fx-rooms { display: grid; gap: 10px; }
.fx-room { background: #fff; border: 1px solid var(--fx-line); border-radius: 18px; box-shadow: var(--fx-shadow-1); transition: box-shadow .2s var(--fx-ease), border-color .2s linear; }
.fx-room[open] { border-color: #CFE6D6; box-shadow: var(--fx-shadow-2); }
.fx-room summary {
  list-style: none; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic name chev" "ic meta chev"; column-gap: 12px; row-gap: 4px;
  align-items: center; padding: 12px 14px; min-height: 68px; cursor: pointer; border-radius: 18px;
}
@media (min-width: 640px) { .fx-room summary { grid-template-columns: auto 1fr auto auto; grid-template-areas: "ic name meta chev"; } }
.fx-room summary::-webkit-details-marker { display: none; }
.fx-room__ic { grid-area: ic; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--fx-mint); color: var(--fx-green-dk); }
.fx-room__ic svg { width: 22px; height: 22px; }
.fx-room__name { grid-area: name; font: 700 1.06rem/1.2 var(--font-display); color: var(--fx-ink); }
.fx-room__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-room__chev { grid-area: chev; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-sand); color: var(--fx-ink-2); transition: transform .22s var(--fx-ease), background-color .15s linear; }
.fx-room__chev svg { width: 18px; height: 18px; }
.fx-room[open] .fx-room__chev { transform: rotate(180deg); background: var(--fx-mint); color: var(--fx-green-dk); }
.fx-room[data-needs-founder] .fx-room__ic { background: var(--fx-sky); color: var(--fx-sky-ink); }
.fx-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font: 600 .74rem/1.3 var(--font-display); white-space: nowrap; }
.fx-pill--std { background: var(--fx-mint); color: var(--fx-green-dk); }
.fx-pill--add { background: var(--fx-gold-soft); color: var(--fx-gold-ink); border: 1px solid #F8E3B0; }
.fx-pill--muted { background: var(--fx-sky); color: var(--fx-sky-ink); }
.fx-room__body { padding: 0 14px 16px; }
@media (min-width: 640px) { .fx-room__body { padding: 0 20px 18px 70px; } }
.fx-room[open] .fx-room__body { animation: fx-slide .24s var(--fx-ease); }
.fx-room__body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fx-task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; font-size: .95rem; color: var(--fx-ink); }
.fx-task > .fx-ic { width: 24px; height: 24px; padding: 4px; border-radius: 50%; stroke-width: 3; }
.fx-task--std { background: #F6FBF7; }
.fx-task--std > .fx-ic { background: var(--fx-green); color: #fff; }
.fx-task--add { background: #FFFBEF; }
.fx-task--add > .fx-ic { background: var(--fx-gold); color: #3D2600; }
.fx-task--link { background: #F2F8FD; }
.fx-task--link > .fx-ic { background: var(--fx-sky); color: var(--fx-sky-ink); stroke-width: 2.4; }
.fx-task em { font-style: normal; font: 600 .76rem/1.2 var(--font-display); white-space: nowrap; }
.fx-task--std em { color: var(--fx-green-dk); }
.fx-task--add em { color: var(--fx-gold-ink); background: var(--fx-gold-soft); border: 1px solid #F8E3B0; padding: 3px 8px; border-radius: 999px; }
.fx-task--link a { font: 600 .8rem/1.3 var(--font-display); color: var(--fx-sky-ink); text-align: right; }
.fx-room__note { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0 0; font-size: .87rem; line-height: 1.5; color: var(--fx-ink-2); }
.fx-room__note .fx-ic { color: var(--fx-ink-3); margin-top: 2px; width: 16px; height: 16px; }
.fx-check__std {
  border-radius: var(--fx-r-lg); padding: 22px; border: 1px solid #CFE6D6;
  background: linear-gradient(170deg, var(--fx-mint) 0%, #fff 72%); box-shadow: var(--fx-shadow-1);
}
@media (min-width: 1024px) { .fx-check__std { position: sticky; top: calc(var(--fx-top) + 76px); } }
.fx-check__stdkicker { font: 600 .88rem var(--font-display); color: var(--fx-green-dk); margin: 0 0 2px; }
.fx-check__std h3 { font-size: 1.35rem; margin: 0 0 12px; }
.fx-check__std ol { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.fx-check__std li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--fx-ink); font-size: .96rem; }
.fx-check__std li .fx-ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--fx-green); color: #fff; stroke-width: 3; margin-top: 1px; }
.fx-check__stdnote { font-size: .86rem; color: var(--fx-ink-2); margin: 0 0 16px; }

/* ------------------------------------------------------------ explainer */
.fx-ex { display: grid; gap: 20px; }
@media (min-width: 1024px) { .fx-ex { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 32px; align-items: center; } }
.fx-ex__stage { background: #fff; border-radius: var(--fx-r-lg); padding: 14px; box-shadow: var(--fx-shadow-2); border: 1px solid #CFE6D6; min-width: 0; }
.fx-ex__svg { width: 100%; height: auto; display: block; }
.fx-ex__svg text { font: 600 15px var(--font-display); fill: #4A5568; }
.fx-ex__svg .fx-ex__entry { font-size: 12px; fill: #5F6B7F; }
.fx-ex__svg .fx-ex__shieldtxt { font: 700 14px var(--font-display); fill: #14532D; }
.fx-ex__label { display: flex; align-items: center; gap: 6px; justify-content: center; margin: 8px 0 0; font-size: .8rem; color: var(--fx-ink-3); }
.fx-ex__label .fx-ic { width: 15px; height: 15px; }
.fx-ex__tick, .fx-ex__cam > g, .fx-ex__shield > g { transform-box: fill-box; transform-origin: center; }
.fx-ex__flash, .fx-ex__cam, .fx-ex__shield, .fx-ex__pro { opacity: 0; }
.fx-ex__steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.fx-ex__steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: rgb(255 255 255 / .55); border: 1px solid transparent; }
.fx-ex__steps b { display: block; font: 700 .98rem/1.25 var(--font-display); color: var(--fx-ink); }
.fx-ex__steps small { display: block; font-size: .86rem; line-height: 1.45; color: var(--fx-ink-2); }
.fx-ex__n { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--fx-green-dk); font: 800 .85rem var(--font-display); border: 1.5px solid #CFE6D6; }
.fx-ex__toggle .fx-ex__play { display: none; }
.fx-ex.is-paused .fx-ex__toggle .fx-ex__pause { display: none; }
.fx-ex.is-paused .fx-ex__toggle .fx-ex__play { display: inline-flex; }
.fx-ex__toggle span { display: inline-flex; align-items: center; gap: 6px; }
/* the 12s loop — rooms/ticks sit in their finished state unless the loop runs */
.fx-ex.is-playing .fx-ex__r1 rect { animation: fx-r1 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r2 rect { animation: fx-r2 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r3 rect { animation: fx-r3 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r3b rect { animation: fx-r3b 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r3c rect { animation: fx-r3c 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r1 .fx-ex__tick { animation: fx-t1 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r2 .fx-ex__tick { animation: fx-t2 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r3 .fx-ex__tick { animation: fx-t3 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r3b .fx-ex__tick { animation: fx-t3b 12s linear infinite; }
.fx-ex.is-playing .fx-ex__r3c .fx-ex__tick { animation: fx-t3c 12s linear infinite; }
.fx-ex.is-playing .fx-ex__flash { animation: fx-flash 12s linear infinite; }
.fx-ex.is-playing .fx-ex__cam > g { animation: fx-cam 12s linear infinite; }
.fx-ex.is-playing .fx-ex__cam { opacity: 1; }
.fx-ex.is-playing .fx-ex__shield > g { animation: fx-shield 12s linear infinite; }
.fx-ex.is-playing .fx-ex__shield { opacity: 1; }
.fx-ex.is-playing .fx-ex__pro { animation: fx-pro 12s cubic-bezier(.45, .05, .35, 1) infinite; }
.fx-ex.is-playing .fx-ex__ping { animation: fx-ringpulse 1.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.fx-ex.is-playing .fx-ex__steps li { animation: fx-cap 12s linear infinite; animation-delay: var(--d); }
.fx-ex.is-playing .fx-ex__steps li .fx-ex__n { animation: fx-capn 12s linear infinite; animation-delay: var(--d); }
.fx-ex.is-paused *, .fx-ex.is-idle * { animation-play-state: paused !important; }
@keyframes fx-r1 { 0%, 17% { opacity: 0; } 21%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-r2 { 0%, 34% { opacity: 0; } 38%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-r3 { 0%, 50% { opacity: 0; } 53%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-r3b { 0%, 54% { opacity: 0; } 57%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-r3c { 0%, 58% { opacity: 0; } 62%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-t1 { 0%, 22% { transform: scale(0); } 25% { transform: scale(1.2); } 27%, 95% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes fx-t2 { 0%, 39% { transform: scale(0); } 42% { transform: scale(1.2); } 44%, 95% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes fx-t3 { 0%, 53% { transform: scale(0); } 55% { transform: scale(1.2); } 57%, 95% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes fx-t3b { 0%, 57% { transform: scale(0); } 59% { transform: scale(1.2); } 61%, 95% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes fx-t3c { 0%, 62% { transform: scale(0); } 64% { transform: scale(1.2); } 66%, 95% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes fx-flash { 0%, 69% { opacity: 0; } 70.5% { opacity: .9; } 74%, 100% { opacity: 0; } }
@keyframes fx-cam { 0%, 67% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.08); } 72%, 80% { opacity: 1; transform: scale(1); } 83%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes fx-shield { 0%, 83% { opacity: 0; transform: scale(.6); } 86% { opacity: 1; transform: scale(1.08); } 88%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.9); } }
@keyframes fx-pro {
  0% { opacity: 0; transform: translate(178px, 440px); }
  5% { opacity: 1; transform: translate(178px, 372px); }
  14% { opacity: 1; transform: translate(178px, 372px); }
  19%, 30% { opacity: 1; transform: translate(544px, 292px); }
  36%, 47% { opacity: 1; transform: translate(490px, 96px); }
  51%, 54% { opacity: 1; transform: translate(126px, 118px); }
  56%, 58% { opacity: 1; transform: translate(326px, 118px); }
  61%, 65% { opacity: 1; transform: translate(220px, 300px); }
  68%, 100% { opacity: 0; transform: translate(220px, 300px); }
}
@keyframes fx-ringpulse { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes fx-cap { 0%, 16% { background-color: #fff; border-color: #CFE6D6; box-shadow: 0 8px 20px -14px rgb(27 42 65 / .5); } 16.8%, 100% { background-color: rgb(255 255 255 / .55); border-color: transparent; box-shadow: none; } }
@keyframes fx-capn { 0%, 16% { background-color: #1F6B33; color: #fff; border-color: #1F6B33; } 16.8%, 100% { background-color: #fff; color: #1F6B33; border-color: #CFE6D6; } }

/* -------------------------------------------------------------- gallery */
.fx-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 14px; scrollbar-width: none; }
.fx-chips::-webkit-scrollbar { display: none; }
.fx-chipbtn {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--fx-line-2); background: #fff; color: var(--fx-ink); cursor: pointer;
  font: 600 .93rem/1 var(--font-display); transition: background-color .15s linear, color .15s linear, border-color .15s linear, transform .15s var(--fx-ease);
}
.fx-chipbtn span { padding: 3px 8px; border-radius: 999px; background: var(--fx-sand); font-size: .76rem; color: var(--fx-ink-2); font-variant-numeric: tabular-nums; }
.fx-chipbtn:hover { border-color: var(--fx-green-dk); }
.fx-chipbtn:active { transform: scale(.97); }
.fx-chipbtn[aria-pressed="true"] { background: var(--fx-navy); border-color: var(--fx-navy); color: #fff; }
.fx-chipbtn[aria-pressed="true"] span { background: rgb(255 255 255 / .16); color: #fff; }
.fx-gal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .fx-gal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .fx-gal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fx-gal__item { min-width: 0; }
.fx-gal__item.is-new { animation: fx-pop .3s var(--fx-ease) both; }
.fx-gal__btn { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: zoom-in; background: var(--fx-sand); box-shadow: var(--fx-shadow-1); }
.fx-gal__btn { aspect-ratio: 4 / 5; }
.fx-gal__btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s var(--fx-ease); }
.fx-gal__btn:hover img { transform: scale(1.04); }
.fx-gal__tag { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 999px; background: rgb(255 255 255 / .94); color: var(--fx-ink); font: 600 .72rem/1.2 var(--font-display); }
.fx-gal__by {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgb(15 27 45 / .78)); color: #fff; font: 600 .8rem/1.2 var(--font-display); text-align: left;
}

/* ------------------------------------------------------------- lightbox */
.fx-lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 16 26 / .96); color: #fff; }
.fx-lb[open] { animation: fx-fade .22s var(--fx-ease); }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
.fx-lb::backdrop { background: rgb(10 16 26 / .6); }
.fx-lb__inner { position: relative; height: 100%; display: grid; place-items: center; padding: 64px 12px 24px; }
@media (min-width: 768px) { .fx-lb__inner { padding: 56px 88px 32px; } }
.fx-lb__fig { margin: 0; display: grid; gap: 14px; justify-items: center; max-width: 1100px; width: 100%; }
.fx-lb__img { max-width: 100%; max-height: 64dvh; width: auto; height: auto; border-radius: 14px; object-fit: contain; box-shadow: 0 20px 60px rgb(0 0 0 / .5); }
.fx-lb__img.is-swap { animation: fx-fade .2s var(--fx-ease); }
.fx-lb__cap { max-width: 640px; text-align: center; font-size: .92rem; line-height: 1.5; color: #D6DEE8; }
.fx-lb__cap .fx-lb__who { display: inline-flex; align-items: center; gap: 8px; font: 700 1rem var(--font-display); color: #fff; margin-bottom: 4px; flex-wrap: wrap; justify-content: center; }
.fx-lb__cap q { display: block; color: #E8EDF3; }
.fx-lb__cap .fx-lb__svc { display: block; margin-top: 6px; font-size: .78rem; color: #AFBDCD; }
.fx-lb__x { background: rgb(255 255 255 / .14); color: #fff; }
.fx-lb__x:hover { background: rgb(255 255 255 / .26); }
.fx-lb__nav {
  position: absolute; top: 50%; translate: 0 -50%; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; background: rgb(255 255 255 / .14); color: #fff; transition: background-color .15s linear;
}
.fx-lb__nav:hover { background: rgb(255 255 255 / .28); }
.fx-lb__nav--prev { left: 8px; } .fx-lb__nav--next { right: 8px; }
@media (max-width: 767px) { .fx-lb__nav { top: auto; bottom: 16px; translate: none; } .fx-lb__nav--prev { left: calc(50% - 64px); } .fx-lb__nav--next { right: calc(50% - 64px); } .fx-lb__inner { padding-bottom: 80px; } }
.fx-lb__count { position: absolute; top: 22px; left: 20px; margin: 0; font: 600 .85rem var(--font-display); color: #AFBDCD; }

/* -------------------------------------------------------------- reviews */
.fx-revs { display: grid; gap: 20px; }
@media (min-width: 1024px) { .fx-revs { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; } }
.fx-score { background: #fff; border-radius: var(--fx-r-lg); padding: 22px; border: 1px solid var(--fx-line); box-shadow: var(--fx-shadow-1); }
@media (min-width: 1024px) { .fx-score { position: sticky; top: calc(var(--fx-top) + 76px); } }
.fx-score__num { font: 800 3.4rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--fx-ink); margin: 0 0 6px; }
.fx-score__num small { font-size: 1.1rem; font-weight: 600; color: var(--fx-ink-3); letter-spacing: 0; margin-left: 4px; }
.fx-score__count { font-weight: 600; color: var(--fx-ink); margin: 8px 0 14px; }
.fx-dist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.fx-dist li { display: grid; grid-template-columns: 34px 1fr 44px; align-items: center; gap: 8px; font-size: .85rem; color: var(--fx-ink-2); }
.fx-dist__k { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.fx-dist .fx-ic--star { width: 12px; height: 12px; fill: #F5B800; stroke: none; }
.fx-dist__bar { height: 8px; border-radius: 999px; background: var(--fx-sand); overflow: hidden; }
.fx-dist__bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #F5B800, var(--fx-gold-2)); transform-origin: left; }
.hj-js .fx-score:not(.is-in) .fx-dist__bar span { transform: scaleX(0); }
.fx-score.is-in .fx-dist__bar span { transition: transform .6s var(--fx-ease); }
.fx-dist__n { text-align: right; font-variant-numeric: tabular-nums; }
.fx-score__fine { font-size: .8rem; color: var(--fx-ink-3); margin: 0 0 10px; }
.fx-revgrid { columns: 1; column-gap: 14px; }
@media (min-width: 720px) { .fx-revgrid { columns: 2; } }
.fx-rev {
  break-inside: avoid; margin: 0 0 14px; background: #fff; border-radius: var(--fx-r); padding: 18px; border: 1px solid var(--fx-line); box-shadow: var(--fx-shadow-1);
}
.fx-rev.is-new { animation: fx-pop .3s var(--fx-ease) both; }
.fx-rev__head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.fx-rev__av { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font: 700 1.05rem var(--font-display); flex: none; }
.fx-av--0 { background: var(--fx-mint); color: var(--fx-green-dk); }
.fx-av--1 { background: var(--fx-sky); color: var(--fx-sky-ink); }
.fx-av--2 { background: var(--fx-gold-soft); color: var(--fx-gold-ink); }
.fx-av--3 { background: #FBE6EC; color: #9B2C4C; }
.fx-av--4 { background: #EDE7F8; color: #5A3E9B; }
.fx-rev__name { font: 700 1rem/1.2 var(--font-display); color: var(--fx-ink); margin: 0 0 3px; }
.fx-rev__meta { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; color: var(--fx-ink-3); }
.fx-rev__body p { font-size: .95rem; line-height: 1.6; color: var(--fx-ink-2); margin: 0 0 8px; }
.fx-rev__body p:last-child { margin-bottom: 0; }
.fx-rev__body.is-clamped { max-height: 10.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
.fx-rev__more { min-height: 44px; font-size: .9rem; }
.fx-rev__photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fx-rev__ph { width: 72px; height: 72px; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--fx-sand); }
.fx-rev__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s var(--fx-ease); }
.fx-rev__ph:hover img { transform: scale(1.08); }
.fx-rev__reply { margin-top: 10px; border-top: 1px solid var(--fx-line); padding-top: 4px; }
.fx-rev__reply summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; gap: 6px; font: 600 .86rem var(--font-display); color: var(--fx-green-dk); }
.fx-rev__reply summary::-webkit-details-marker { display: none; }
.fx-rev__reply summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--fx-mint); font-weight: 700; transition: transform .2s var(--fx-ease); }
.fx-rev__reply[open] summary::before { transform: rotate(45deg); }
.fx-rev__reply p { font-size: .88rem; line-height: 1.55; color: var(--fx-ink-2); background: var(--fx-cream); border-radius: 12px; padding: 10px 12px; margin: 0; }
.fx-revgrid[aria-busy="true"] { opacity: .55; transition: opacity .2s linear; }

/* --------------------------------------------------------------- journey */
.fx-journey { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.fx-journey__step { position: relative; padding: 0 0 22px 64px; min-height: 64px; }
.fx-journey__step::before { content: ""; position: absolute; left: 23px; top: 50px; bottom: -2px; width: 2px; background: repeating-linear-gradient(var(--fx-mint-2) 0 6px, transparent 6px 11px); }
.fx-journey__step:last-child::before { display: none; }
.fx-journey__ic { position: absolute; left: 0; top: 0; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: #fff; color: var(--fx-green-dk); border: 1.5px solid #CFE6D6; box-shadow: var(--fx-shadow-1); }
.fx-journey__ic svg { width: 22px; height: 22px; }
.fx-journey__n { display: block; font: 600 .78rem/1.2 var(--font-display); color: var(--fx-ink-3); margin: 2px 0 2px; }
.fx-journey h3 { font-size: 1.08rem; margin: 0 0 4px; }
.fx-journey p { font-size: .94rem; line-height: 1.55; color: var(--fx-ink-2); margin: 0; }
.fx-journey__step--end .fx-journey__ic { background: var(--fx-green-dk); color: #fff; border-color: var(--fx-green-dk); }
@media (min-width: 900px) {
  .fx-journey { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .fx-journey__step { padding: 20px; min-height: 0; background: var(--fx-cream); border: 1px solid var(--fx-line); border-radius: var(--fx-r); transition: transform .22s var(--fx-ease), box-shadow .22s var(--fx-ease); }
  .fx-journey__step:hover { transform: translateY(-3px); box-shadow: var(--fx-shadow-2); }
  .fx-journey__step::before { left: 76px; right: -17px; top: 44px; bottom: auto; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--fx-mint-2) 0 6px, transparent 6px 11px); }
  .fx-journey__step:nth-child(4n)::before { display: none; }
  .fx-journey__ic { position: relative; margin-bottom: 12px; }
  .fx-journey__step--end { background: linear-gradient(150deg, #1F6B33, #14532D); border-color: transparent; }
  .fx-journey__step--end h3 { color: #fff; } .fx-journey__step--end p { color: #E3F2E7; } .fx-journey__step--end .fx-journey__n { color: #9BE0AF; }
  .fx-journey__step--end .fx-journey__ic { background: rgb(255 255 255 / .16); border-color: transparent; }
}

/* ---------------------------------------------------------- local bento */
.fx-bento { display: grid; gap: 14px; }
@media (min-width: 768px) { .fx-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-tile--map { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .fx-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  .fx-tile--map { grid-column: span 7; } .fx-tile--homes { grid-column: span 5; }
  .fx-tile--means { grid-column: span 7; } .fx-tile--near { grid-column: span 5; }
  .fx-tile--marks { grid-column: span 7; } .fx-tile--streets { grid-column: span 5; }
  .fx-tile--marks .fx-marks { grid-template-columns: 1fr 1fr; column-gap: 18px; }
}
.fx-tile { background: #fff; border: 1px solid var(--fx-line); border-radius: var(--fx-r-lg); padding: 20px; box-shadow: var(--fx-shadow-1); min-width: 0; }
@media (min-width: 768px) { .fx-tile { padding: 24px; } }
.fx-tile h3 { display: flex; align-items: center; gap: 10px; font-size: 1.12rem; margin: 0 0 6px; }
.fx-tile h3 > .fx-ic { width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: var(--fx-mint); color: var(--fx-green-dk); }
.fx-tile__sub { font-size: .9rem; color: var(--fx-ink-3); margin: 0 0 14px; }
.fx-tile__sub b { color: var(--fx-ink); }
.fx-tile__note { font-size: .8rem; line-height: 1.5; color: var(--fx-ink-3); margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--fx-line-2); }
.fx-tile--map { padding: 0; overflow: hidden; display: grid; }
@media (min-width: 1024px) { .fx-tile--map { grid-template-rows: 1fr auto; } }
.fx-map { position: relative; aspect-ratio: 1200 / 680; background: #EEF4EC; overflow: hidden; } /* = the address-lookup map size, so its attribution is never cropped */
.fx-map__art, .fx-map img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-map img { animation: fx-fade .3s var(--fx-ease); }
.fx-map__facts { padding: 18px 20px 20px; }
.fx-map__facts h3 { margin-bottom: 10px; }
.fx-map__facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 16px; }
@media (min-width: 560px) { .fx-map__facts ul { grid-template-columns: 1fr 1fr; } }
.fx-map__facts li { display: flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--fx-ink-2); }
.fx-map__facts li .fx-ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--fx-sky); color: var(--fx-sky-ink); }
.fx-map__facts b { color: var(--fx-ink); }
.fx-stack { display: flex; height: 22px; border-radius: 999px; overflow: hidden; background: var(--fx-sand); margin: 4px 0 14px; }
.fx-stack__seg { width: var(--w); height: 100%; transform-origin: left; }
.fx-stack__seg + .fx-stack__seg { border-left: 2px solid #fff; }
.fx-stack__seg--flats, .fx-stack__k--flats .fx-sw { background: var(--fx-green); }
.fx-stack__seg--semi, .fx-stack__k--semi .fx-sw { background: var(--fx-gold); }
.fx-stack__seg--separate, .fx-stack__k--separate .fx-sw { background: #5BA4D9; }
.fx-stack__seg--other, .fx-stack__k--other .fx-sw { background: #A7AFBC; }
.fx-stack__key { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fx-stack__key li { display: grid; grid-template-columns: 12px 1fr auto auto; align-items: center; gap: 10px; font-size: .92rem; color: var(--fx-ink-2); }
.fx-stack__key b { font: 700 1rem var(--font-display); color: var(--fx-ink); font-variant-numeric: tabular-nums; }
.fx-stack__key small { font-size: .78rem; color: var(--fx-ink-3); min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; }
.fx-sw { width: 12px; height: 12px; border-radius: 4px; }
.fx-means { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fx-means li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background: var(--fx-cream); }
.fx-means__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: var(--fx-green); }
.fx-means li:nth-child(2) .fx-means__ic { background: var(--fx-gold); color: #3D2600; }
.fx-means li:nth-child(3) .fx-means__ic { background: #5BA4D9; color: #0D2F4F; }
.fx-means__ic svg { width: 22px; height: 22px; }
.fx-means p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--fx-ink-2); }
.fx-means p b { color: var(--fx-ink); }
.fx-means .fx-means__t { font: 700 1rem/1.3 var(--font-display); color: var(--fx-ink); margin-bottom: 2px; }
.fx-means__t span { font: 600 .78rem var(--font-body); color: var(--fx-ink-3); margin-left: 4px; }
.fx-streets { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fx-streets li { padding: 6px 11px; border-radius: 999px; background: var(--fx-sand); font-size: .84rem; color: var(--fx-ink-2); }
.fx-streets li.is-major { background: var(--fx-mint); color: var(--fx-green-dk); font-weight: 600; }
.fx-streets li.is-new { animation: fx-pop .25s var(--fx-ease) both; }
.fx-marks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fx-marks li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--fx-line); font-size: .93rem; color: var(--fx-ink); }
.fx-marks li:last-child { border-bottom: 0; }
.fx-marks li .fx-ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--fx-cream); color: var(--fx-green-dk); border: 1px solid var(--fx-line); }
.fx-marks small { font-size: .74rem; color: var(--fx-ink-3); background: var(--fx-sand); padding: 3px 8px; border-radius: 999px; }
.fx-near { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
@media (min-width: 480px) { .fx-near { grid-template-columns: 1fr 1fr; } }
.fx-near a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 8px 12px; border-radius: 14px; border: 1px solid var(--fx-line); background: var(--fx-cream); color: var(--fx-ink); font-weight: 600; font-size: .92rem; text-decoration: none !important; transition: background-color .15s linear, border-color .15s linear, transform .18s var(--fx-ease); }
.fx-near a:hover { background: var(--fx-mint); border-color: #CFE6D6; transform: translateY(-1px); }
.fx-near small { font-weight: 500; color: var(--fx-ink-3); font-size: .78rem; }
.fx-near b { font: 700 .82rem var(--font-display); color: var(--fx-green-dk); white-space: nowrap; }

/* -------------------------------------------------------------- examples */
.fx-table { overflow-x: auto; border-radius: var(--fx-r); border: 1px solid var(--fx-line); background: #fff; box-shadow: var(--fx-shadow-1); }
.fx-table table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: .95rem; }
.fx-table th, .fx-table td { padding: 14px 16px; text-align: left; vertical-align: middle; }
.fx-table thead th { background: var(--fx-sand); font: 600 .85rem/1.3 var(--font-display); color: var(--fx-ink-2); }
.fx-table tbody tr + tr { border-top: 1px solid var(--fx-line); }
.fx-table tbody tr { transition: background-color .15s linear; }
.fx-table tbody tr:hover { background: var(--fx-cream); }
.fx-table tbody th { font: 700 .98rem var(--font-display); color: var(--fx-ink); }
.fx-table td { color: var(--fx-ink-2); }
.fx-table .fx-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-table td.fx-num b { font: 800 1.15rem var(--font-display); color: var(--fx-ink); }
.fx-credits {
  margin-top: 24px; display: grid; gap: 16px; align-items: center; padding: 22px; border-radius: var(--fx-r-lg);
  background: linear-gradient(135deg, #FFF6DC 0%, #FFFBEF 55%, #FFF3D1 100%); border: 1px solid var(--fx-gold-line); position: relative; overflow: hidden;
}
@media (min-width: 900px) { .fx-credits { grid-template-columns: auto 1fr auto; gap: 24px; padding: 26px 30px; } }
.fx-credits__coin { width: 76px; height: 76px; display: grid; place-items: center; }
.fx-credits__coin svg { width: 76px; height: 76px; filter: drop-shadow(0 8px 14px rgb(226 154 23 / .35)); animation: fx-coin 3.2s ease-in-out infinite; }
@keyframes fx-coin { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
.fx-credits h3 { font-size: 1.3rem; margin: 0 0 6px; color: #3D2600; }
.fx-credits p { font-size: .96rem; color: #5A4210; margin: 0; }
.fx-credits .fx-fine { color: #6B5320; }
.fx-credits .jc-badge { vertical-align: middle; }
.fx-tiers { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-tiers:empty { display: none; }
.fx-tiers li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--fx-gold-line); font-size: .82rem; color: var(--fx-ink-2); }
.fx-tiers i { width: 8px; height: 8px; border-radius: 50%; background: var(--fx-green); }
.fx-tiers .is-red i { background: var(--fx-red); } .fx-tiers .is-amber i { background: var(--fx-amber); }
.fx-tiers b { color: var(--fx-ink); white-space: nowrap; }
.fx-tiers .is-bonus i, .fx-legend .is-bonus i { background: var(--fx-gold-2); }

@media (max-width: 639px) {
  .fx-table { overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0; }
  .fx-table table { min-width: 0; display: block; }
  .fx-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fx-table tbody { display: grid; gap: 10px; }
  .fx-table tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "home price" "rooms reward" "extras extras"; gap: 2px 12px; padding: 14px 16px; background: #fff; border: 1px solid var(--fx-line); border-radius: 18px; box-shadow: var(--fx-shadow-1); }
  .fx-table tbody tr + tr { border-top: 1px solid var(--fx-line); }
  .fx-table th, .fx-table td { padding: 0; }
  .fx-table tbody th { grid-area: home; }
  .fx-table td:nth-of-type(1) { grid-area: rooms; font-size: .88rem; }
  .fx-table td:nth-of-type(2) { grid-area: extras; font-size: .85rem; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--fx-line-2); }
  .fx-table td:nth-of-type(2)::before { content: "Extras: "; color: var(--fx-ink-3); }
  .fx-table td:nth-of-type(3) { grid-area: price; }
  .fx-table td:nth-of-type(4) { grid-area: reward; font-size: .8rem; color: var(--fx-gold-ink); }
  .fx-table td:nth-of-type(4)::after { content: " in credits"; }
  .fx-table td.fx-num b { font-size: 1.35rem; }
}

/* -------------------------------------------------------------------- faq */
.fx-faq { display: grid; gap: 10px; }
@media (min-width: 1024px) { .fx-faq { grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: start; } }
.fx-faq__item { background: #fff; border: 1px solid #CFE6D6; border-radius: 18px; transition: box-shadow .2s var(--fx-ease); }
.fx-faq__item[open] { box-shadow: var(--fx-shadow-2); }
.fx-faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 14px 18px; cursor: pointer; font: 600 1.02rem/1.35 var(--font-display); color: var(--fx-ink); border-radius: 18px; }
.fx-faq__item summary::-webkit-details-marker { display: none; }
.fx-faq__pm { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--fx-mint); color: var(--fx-green-dk); transition: transform .22s var(--fx-ease), background-color .15s linear; }
.fx-faq__pm svg { width: 18px; height: 18px; }
.fx-faq__item[open] .fx-faq__pm { transform: rotate(45deg); background: var(--fx-green-dk); color: #fff; }
.fx-faq__item p { margin: 0; padding: 0 18px 18px; font-size: .96rem; line-height: 1.6; color: var(--fx-ink-2); }
.fx-faq__item[open] p { animation: fx-slide .22s var(--fx-ease); }
.fx-faq__more { margin: 20px 0 0; color: var(--fx-ink-2); }
.fx-faq__more a { color: var(--fx-green-dk); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- explore */
.fx-explore { display: grid; gap: 28px; }
@media (min-width: 1024px) { .fx-explore { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; } }
.fx-explore h3 { font-size: 1.1rem; margin: 0 0 12px; }
.fx-svclinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .fx-svclinks { grid-template-columns: repeat(3, 1fr); } }
.fx-svclinks a { display: flex; flex-direction: column; justify-content: center; min-height: 58px; padding: 10px 14px; border-radius: 14px; background: var(--fx-cream); border: 1px solid var(--fx-line); color: var(--fx-ink); font: 600 .95rem/1.25 var(--font-display); text-decoration: none !important; transition: background-color .15s linear, border-color .15s linear, transform .18s var(--fx-ease); }
.fx-svclinks a:hover { background: var(--fx-mint); border-color: #CFE6D6; transform: translateY(-1px); }
.fx-svclinks small { font: 500 .8rem var(--font-body); color: var(--fx-green-dk); }
.fx-arealinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.fx-arealinks a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: 12px; color: var(--fx-ink); font-weight: 600; text-decoration: none !important; transition: background-color .15s linear; }
.fx-arealinks a:hover { background: var(--fx-sand); }
.fx-arealinks .fx-ic { width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: var(--fx-mint); color: var(--fx-green-dk); }

/* --------------------------------------------------------------- final cta */
.fx-final { padding: 8px 0 56px; background: #fff; }
@media (min-width: 1024px) { .fx-final { padding-bottom: 80px; } }
.fx-final__card {
  position: relative; overflow: hidden; isolation: isolate; text-align: center; color: #fff;
  border-radius: 32px; padding: 48px 20px; background: linear-gradient(135deg, #14532D, #1F6B33 55%, #256F39);
}
@media (min-width: 768px) { .fx-final__card { padding: 64px 40px; } }
.fx-final__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px 260px at 12% 110%, rgb(246 185 59 / .35), transparent 70%), radial-gradient(520px 300px at 95% -10%, rgb(155 224 175 / .35), transparent 70%); }
.fx-final__card h2 { color: #fff; font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -0.03em; margin: 0 0 12px; }
.fx-final__card p { color: #fff; font-size: 1.08rem; max-width: 56ch; margin: 0 auto 24px; }
.fx-sources { margin-top: 32px; font-size: .82rem; color: var(--fx-ink-3); }
.fx-sources__h { font-size: .95rem; margin: 0 0 8px; color: var(--fx-ink-2); }
.fx-sources ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.fx-sources code { font-size: .8rem; background: var(--fx-sand); padding: 1px 5px; border-radius: 6px; }

/* ------------------------------------------------------ fallback dock */
.fx-dock {
  position: fixed; z-index: 95; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .96); border-top: 1px solid var(--fx-line);
  box-shadow: 0 -10px 30px -12px rgb(27 42 65 / .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform .28s var(--fx-ease);
}
.fx-dock[hidden] { display: none; }
.fx-dock.is-shown { transform: none; }
.fx-dock__txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fx-dock__txt b { font: 700 .98rem var(--font-display); color: var(--fx-ink); }
.fx-dock__txt > span { font-size: .8rem; color: var(--fx-ink-3); }
@media (min-width: 768px) { .fx-dock { left: 50%; right: auto; bottom: 16px; width: 480px; margin-left: -240px; border-radius: 999px; border: 1px solid var(--fx-line); padding: 8px 8px 8px 22px; transform: translateY(160%); } .fx-dock.is-shown { transform: none; } }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .fx-mark { animation: none; background-size: 100% 100%; }
  .fx-float, .fx-dialog[open], .fx-lb[open], .fx-credits__coin svg { animation: none; }
  .fx-ex .fx-ex__toggle { display: none; }
  .fx-dist__bar span { transform: none !important; }
}
@media print {
  .fx-subnav, .fx-dock, .fx-ex__toggle, .fx-more, .fx-chips { display: none !important; }
  .fx-gal__item[hidden], .fx-streets li[hidden] { display: revert; }
}