/* Production layer for Madani's funnel prototype: only what the prototype
   didn't have. Colours are the prototype's own variables. */

.who figcaption { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The breed drawing is wider than the old thumbnail, which cropped the head and paws. */
.prof .pimg {
  width: 108px;
  height: 78px;
  align-items: flex-end;
  justify-content: center;
  border-radius: 16px;
}
.prof .pimg img {
  height: 92px;
  width: auto;
  max-width: none;
}

/* The live page: the prototype's "phone" becomes the whole page. On phones it
   is the design as delivered; on larger screens the bars span the page and the
   content sits in a centred column. */
html, body { background: var(--bg, #F5F1E6); margin: 0; }
.wrap { display: block !important; padding: 0 !important; }
.phone {
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 700px) {
  .phone { --col: 680px; --gut: max(24px, calc((100% - var(--col)) / 2)); }
  .top { padding: 8px max(24px, calc((100% - 1280px) / 2)) 0; height: 68px; }
  .top .logo { height: 44px; }
  .dogtabs { padding-top: 12px; }
  .sb { padding: 24px var(--gut) 24px; }
  .fx-breed .sb { padding: 36px var(--gut) 40px; }
  .fx-breed .pick { max-width: 640px; margin-left: auto; margin-right: auto; }
  .carousel {
    scrollbar-width: thin;
    scrollbar-color: #B8C4DC transparent;
    scroll-snap-type: none;
    padding-bottom: 10px;
  }
  .carousel::-webkit-scrollbar { display: block; height: 6px; }
  .carousel::-webkit-scrollbar-track { background: transparent; }
  .carousel::-webkit-scrollbar-thumb { background: #B8C4DC; border-radius: 99px; }
  .carousel::-webkit-scrollbar-thumb:hover { background: var(--n, #102A7D); }
  .scr.hasf .sb { padding-bottom: 150px; }
  .foot { padding: 18px var(--gut) var(--foot-gap); height: auto; }
  .sb h2, .sb h2.h2s, h2.fx-oneline { font-size: 34px; white-space: normal; text-wrap: wrap; }
  .sb h1, .sb h2, .sb h3, .sb .mad, .sb .sub, .home h1 { text-wrap: wrap; max-width: none; }
  .sb .sub { font-size: 17px; }

  /* Home (screen 0): a wider hero, the breed picker under it. */
  .home .promo { font-size: 13.5px; padding: 10px; }
  .home .hbar { padding: 0 max(24px, calc((100% - 1100px) / 2)); height: 72px; flex-basis: 72px; }
  .home .hero { width: min(1100px, calc(100% - 48px)); margin: 24px auto 0; border-radius: 24px; overflow: hidden; }
  .home .hero .heroimg { width: 100%; height: clamp(260px, 32vw, 420px); object-fit: cover; display: block; }
  .home .hpad { width: min(720px, calc(100% - 48px)); margin: 0 auto; padding-left: 0; padding-right: 0; }
  .home .hpad h1 { font-size: 44px; }
  .home > :not(.promo):not(.hbar):not(.hero):not(.hpad):not(.drawer):not(.scrim) { width: min(1100px, calc(100% - 48px)); margin-left: auto; margin-right: auto; }

}

@media (max-width: 699px) {
  .top { padding-top: 8px; padding-left: 22px; padding-right: 22px; height: 48px; }
  .lgm { top: 92px; right: 16px; }
}
.top .logo { height: 38px; }
.top .bk {
  gap: 0;
  padding: 4px 4px 4px 0;
  border-radius: 99px;
  font: 500 14.5px/1 Poppins, system-ui, sans-serif;
  color: var(--n, #102A7D);
  transition: opacity .15s ease, transform .15s ease;
}
.top .bk .ic { width: 25px; height: 25px; flex: 0 0 25px; }
.top .lg {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 99px;
  background: #fff;
  font: 600 13px/1 Poppins, sans-serif;
  color: var(--n, #102A7D);
  cursor: pointer;
}
.lgm { top: 102px; right: 16px; }
.top .bk:hover { opacity: .8; }
.top .bk:active { transform: translateX(-2px); }
/* The progress circles cover the header's bottom edge (--over). The row
   centres in the rest, and the logo's word, not its paw, sits on that line. */
.top { --over: 12px; padding-top: 8px; padding-bottom: var(--over); }
.top .logo { height: 34px; transform: translateY(-15%); }
/* The language button is plain text until its menu is open. */
.top .lg { background: transparent; transition: background-color .15s ease; }
.top .lg:hover { background: rgba(255, 255, 255, .55); }
.top .lg[aria-expanded="true"] { background: #fff; }
@media (min-width: 700px) {
  .top { --over: 14px; }
  .top .logo { height: 40px; }
}
@media (max-width: 699px) {
  .top .logo { height: 28px; }
}

/* Progress: a rail along the bottom edge of the header, edge to edge. The paw
   rides the navy fill through the profile. Plan, Add-ons and Checkout sit close
   together at the right end; from Plan on, the paw hands over to each one, which
   turns solid navy. Each icon sits in a small white circle that
   straddles the edge. */
.prog { align-items: flex-start; padding: 0; min-width: 0; }
.fx-bar {
  --bar-bg: var(--bg, #FAF8F2);
  --gut: calc(var(--ico) / 2 + 10px);
  --rail: 4px;
  --ico: 32px;
  --drop: 0px; /* circles sit centred on the rail */
  --step: calc(var(--ico) + 20px); /* centre to centre: 20px of rail between circles */
  --ease-bar: cubic-bezier(.3, .9, .3, 1);
  /* Centres along the rail. 100% is the rail's width wherever these are used. */
  --at-checkout: calc(100% - var(--gut));
  --at-addons: calc(100% - var(--gut) - var(--step));
  --at-plan: calc(100% - var(--gut) - 2 * var(--step));
  /* The paw runs from the left gutter to just short of the Plan circle. */
  --at-paw: calc(var(--gut) + (100% - 2 * var(--gut) - 2 * var(--step) - var(--ico) - 6px) * var(--p, 0));
  position: relative;
  z-index: 3;
  width: 100%;
  min-width: 0;
  height: calc(var(--rail) / 2 + var(--drop) + var(--ico) / 2 + 8px);
}
/* The row is only as tall as the rail in the layout: the screen scrolls right up
   to the rail and the white circles float over it (no blank strip under the
   header). The same space comes back as a spacer at the top of each screen, so
   nothing moves until it scrolls. --under: the bar's height minus the rail. */
.phone { --under: 22px; }
.prog { margin-bottom: calc(-1 * var(--under)); }
.fx-bar { pointer-events: none; }
.fx-ms, .fx-paw { pointer-events: auto; }
.phone:not(.fx-tabs-on) .scr > .sb::before { content: ""; flex: 0 0 var(--under); }
.phone.fx-tabs-on .dogtabs { margin-top: var(--under); }
@media (min-width: 700px) {
  .phone { --under: 26.5px; }
}
.fx-bar[data-stage="1"] { --at-paw: var(--at-plan); }
.fx-bar[data-stage="2"] { --at-paw: var(--at-addons); }
.fx-bar[data-stage="3"] { --at-paw: var(--at-checkout); }
body.fx-landing .fx-bar { --bar-bg: #FBF8F1; }
.fx-rail {
  position: relative;
  height: var(--rail);
  background: rgba(16, 42, 125, .12);
}
.fx-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--at-paw);
  border-radius: 0 99px 99px 0;
  background: var(--n, #102A7D);
  transition: width .7s var(--ease-bar);
}
/* The last stage (four questions) fills up to the box icon, not past it. */
body.fx-landing .fx-fill { width: 0; }
/* The first screen (breed social proof) shows no progress bar: no icons and
   no track line over the bowl. They keep their space so the header doesn't
   move on the next screen. */
body.fx-landing .fx-rail,
body.fx-landing .fx-ms,
body.fx-landing .fx-paw { visibility: hidden; }
.fx-ms, .fx-paw {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--ico);
  height: var(--ico);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(16, 42, 125, .16);
  color: #A9B4CB;
  line-height: 0;
  transform: translate(-50%, calc(-50% + var(--drop)));
}
.fx-ms { transition: color .35s ease; }
.fx-ms--plan { left: var(--at-plan); }
.fx-ms--addons { left: var(--at-addons); }
.fx-ms--checkout { left: var(--at-checkout); }
.fx-ms svg, .fx-paw svg { height: 18px; width: auto; display: block; fill: currentColor; }
.fx-ms--checkout svg { height: 16px; }
.fx-ms--plan svg { width: 22px; height: auto; }
.fx-ms .fx-cut { fill: #fff; transition: fill .35s ease; }
/* The icon is still pale while the paw is on its way. It turns navy on arrival. */
.fx-ms.on { color: var(--n, #102A7D); transition-delay: .45s; }
.fx-paw {
  z-index: 2;
  left: var(--at-paw);
  color: var(--n, #102A7D);
  transition: left .7s var(--ease-bar), opacity .25s ease;
}
.fx-paw svg { height: 19px; }
/* From Plan on, the paw slides into the milestone and hands over to it. */
.fx-bar:not([data-stage="0"]) .fx-paw {
  opacity: 0;
  transition: left .7s var(--ease-bar), opacity .2s ease .45s;
}
@media (prefers-reduced-motion: reduce) {
  .fx-fill, .fx-ms, .fx-ms .fx-cut, .fx-paw, .fx-bar:not([data-stage="0"]) .fx-paw { transition: none; }
}
@media (min-width: 700px) {
  .fx-bar { --gut: max(calc(var(--ico) / 2 + 12px), calc((100% - 1280px) / 2)); --rail: 5px; --ico: 42px; }
  .fx-ms svg { height: 24px; }
  .fx-ms--checkout svg { height: 21px; }
  .fx-ms--plan svg { width: 29px; height: auto; }
  .fx-paw svg { height: 25px; }
  .lgm { top: 114px; right: max(24px, calc((100% - 1280px) / 2)); }
}

/* Review-only parts of the prototype */
.side, .notesbtn, .todo { display: none !important; }
/* The home screen is the Wix hero in production; its menu has no pages here. */
.home .hbar .hm, .home .drawer, .home .scrim { display: none !important; }

/* Inputs that replace the prototype's example text («Rocky», «4», «30», «Marco») */
.fx-inp {
  font: inherit;
  font-weight: 700;
  color: var(--n);
  background: transparent;
  border: 0;
  border-bottom: 3px solid var(--y);
  border-radius: 0;
  padding: 0 4px;
  margin: 0;
  outline: none;
  text-align: center;
  min-width: 2ch;
  -webkit-appearance: none;
  appearance: none;
}
.fx-inp.n { width: 2.6ch; }

/* "I have [n] dog(s)": the number is shown, not typed. */
#ndog,
.fx-count {
  display: inline-block;
  min-width: 1.5em;
  font: inherit;
  font-weight: 700;
  color: var(--n, #102A7D);
  background: var(--y, #EFD573);
  border: 0;
  border-bottom: 0;
  border-radius: 10px;
  padding: 0 8px;
  margin: 0 4px;
  text-align: center;
  line-height: 1.35;
  vertical-align: middle;
  pointer-events: none;
  user-select: none;
  cursor: default;
}

#more {
  background: var(--n, #102A7D);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  font: 700 16px Poppins, system-ui, sans-serif;
  box-shadow: 0 4px 0 var(--nd, #0b1f66), 0 12px 20px rgba(16, 42, 125, 0.2);
}
#more:hover { background: #0c2268; }
#more:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--nd, #0b1f66);
}
#more .ic { width: 18px; height: 18px; color: #fff; }
.fx-inp:focus { border-bottom-color: var(--n); }
.fx-inp::placeholder { color: #9AA1BE; font-weight: 500; }

.fx-unit {
  position: relative;
  display: inline-block;
  margin: 0 2px;
  vertical-align: baseline;
}
.fx-unit__btn {
  font: inherit;
  color: inherit;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23102A7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 12px 8px no-repeat;
  border: 0;
  /* Yellow underline, like the age and weight inputs next to it. */
  border-bottom: 3px solid var(--y);
  border-radius: 0;
  padding: 0 20px 0 4px;
  cursor: pointer;
}
.fx-unit__btn:focus-visible {
  outline: 2px solid var(--n, #102A7D);
  outline-offset: 3px;
  border-radius: 6px;
}
.fx-unit__menu {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(16, 42, 125, 0.22);
}
.fx-unit__menu[hidden] { display: none; }
.fx-unit__opt {
  border: 0;
  background: transparent;
  color: var(--n, #102A7D);
  font: 600 16px/1.2 Poppins, system-ui, sans-serif;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.fx-unit__opt.on,
.fx-unit__opt:hover { background: var(--n, #102A7D); color: #fff; }

.fl input.fx-fl {
  font: 500 16.5px Poppins, system-ui, sans-serif;
  color: var(--t);
  background: transparent;
  border: 0;
  outline: none;
  width: 100%;
  min-width: 0;
  padding: 1px 0;
}
.fl input.fx-fl::placeholder { color: #6B7396; }
.fl:focus-within { border-color: var(--n); }
.fl.fx-bad,
.fl.fx-bad:focus-within { border-color: #F7A26A; }

/* Screen 8: today's two consent checkboxes */
.fx-consent { display: grid; gap: 8px; margin: 4px 2px 14px; }
.fx-consent label { display: flex; gap: 10px; align-items: flex-start; font: 13.5px/1.35 Poppins, system-ui, sans-serif; color: var(--t); cursor: pointer; }
.fx-consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--n); flex: 0 0 18px; }

/* Screen 11: expected adult weight for puppies */
.fx-puppy { margin: 2px 0 10px; text-align: left; }
.fx-puppy .fx-q { font: 600 16px/1.3 Poppins, system-ui, sans-serif; color: var(--t); margin: 0 0 8px; }
.fx-puppy .fl.fx-kg { grid-template-columns: 1fr auto; width: 132px; max-width: 100%; }
.fx-puppy .fl.fx-kg b { font: 600 16px Poppins, system-ui, sans-serif; color: var(--m); }
.fx-hint { font: 12.5px/1.35 Poppins, system-ui, sans-serif; color: var(--m); margin: 6px 2px 0; }

/* The prototype shows its first screen, and the old Profile / My plan / Order
   bar, before funnel.js opens step 0. Keep that frame invisible. */
.phone.fx-pending .scr,
.phone.fx-pending .prog,
.phone.fx-pending #foot,
.phone.fx-pending .top .bk {
  visibility: hidden !important;
}

/* Shown on /start only when the first dog has no breed yet. */
.phone.fx-breed-on .prog,
.phone.fx-breed-on .dogtabs,
.phone.fx-breed-on .foot,
.phone.fx-breed-on .scr { display: none !important; }
.fx-breed { display: none; flex: 1; flex-direction: column; min-height: 0; background: var(--bg, #F5F1E6); }
.phone.fx-breed-on .fx-breed { display: flex; }
/* Back from the first screen opens this list while the landing layout is still on. */
body:has(.fx-breed-on)::before,
body:has(.fx-breed-on) .wrap::before { content: none !important; }
body:has(.fx-breed-on) .phone,
body.fx-landing:has(.fx-breed-on) .phone {
  height: 100dvh !important;
  min-height: 100dvh !important;
  background: var(--bg, #F5F1E6) !important;
}
.fx-breed .sb { flex: 1; overflow: auto; padding: 28px 22px 32px; }
.fx-breed h2 { margin-top: 8px; }
.fx-breed .catl { margin: 18px auto 0; }

/* Screen 14: today's lists under the health tiles */
.fx-pick { margin: 6px 0 12px; }
.fx-pick .tiles.c2 .tile { min-height: 46px; padding-left: 12px; align-items: center; }
.fx-pick .tiles.c2 .tile .tl { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; align-self: stretch; margin: 0; line-height: 1.15; text-align: left; }

/* Messages */
#fx-toast {
  position: fixed;
  left: 50%;
  z-index: 36;
  width: min(680px, calc(100% - 44px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  box-sizing: border-box;
  background: var(--y, #EFD573);
  color: var(--n, #102A7D);
  text-align: center;
  font: 600 14.5px/1.35 Poppins, system-ui, sans-serif;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(16, 42, 125, .16);
  opacity: 0;
  transform: translate(-50%, 8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#fx-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
#fx-toast button { background: var(--n, #102A7D); color: #fff; border: 0; border-radius: 99px; padding: 6px 14px; font: 700 13px Poppins, system-ui, sans-serif; cursor: pointer; }

.fx-preview {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #FFD84D;
  color: #102A7D;
  font: 600 11.5px/1.3 Poppins, system-ui, sans-serif;
  text-align: center;
  padding: 3px 8px;
  pointer-events: none;
}

.btn.fx-shake { animation: fx-shake .38s; }
@keyframes fx-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.btn.fx-wait { opacity: .6; pointer-events: none; }

/* Menu cards. On a phone each one is 238px with a 220px photo, and the row swipes.
   On a wider screen each one is up to 240px, with a 200px photo. */
.menudog { display: none !important; }
/* The screen body (.sb) is a fixed-height scrolling column. A horizontal
   scroller may shrink to nothing in it, which squashed the cards and their
   photos, so the row and the photo keep their full height. */
.rec4 {
  display: flex;
  flex-shrink: 0;
  grid-template-columns: none;
  gap: 14px;
  margin: 0 -22px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 22px;
  padding: 20px 22px 40px;
  scrollbar-width: none;
}
.rec4::-webkit-scrollbar { display: none; }
.rec4 .rc {
  opacity: 1 !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  flex: 0 0 238px;
  width: 238px;
  scroll-snap-align: start;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 43, 125, 0.08);
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
  text-align: left;
}
.rec4 .rc-media {
  position: relative;
  width: 100%;
  height: 220px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--s, #EAE5D5);
}
.rec4 .rc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rec4 .rc em {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  display: inline-block;
  width: fit-content;
  max-width: calc(100% - 16px);
  margin: 0;
  padding: 3px 7px;
  border-radius: 7px;
  background: #fd80e8;
  color: #fff;
  font: 600 11px/1.2 Poppins, sans-serif;
  font-style: normal;
}
.rec4 .rc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 18px 18px 20px;
}
.rec4 .rc b {
  font: 700 16px/1.15 Faro, Poppins, sans-serif;
  color: var(--n, #102A7D);
  padding: 0;
  margin: 0 0 8px;
}
.rec4 .rc-desc {
  margin: 0;
  font: 400 14px/1.3 Poppins, sans-serif;
  /* The design balances every <p> (text-wrap: balance); descriptions just wrap. */
  text-wrap: wrap;
  color: var(--t, #26305E);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The bar along the bottom of each recipe card, with a checkbox: green
   "In your box" when picked, light "Add to box" with an empty box when not. */
.rec4 .rc-inbox {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 12px;
  border-radius: 0 0 16px 16px;
  background: var(--s, #EAE5D5);
  color: var(--n, #102A7D);
  font: 600 13.5px/1.2 Poppins, sans-serif;
  transition: background .2s, color .2s;
}
.rec4 .rc.on .rc-inbox { background: #2F5D34; color: #fff; }
.rec4 .rc-check {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 2px solid currentColor;
  border-radius: 5px;
  box-sizing: border-box;
  background: #fff;
  color: var(--n, #102A7D);
}
.rec4 .rc.on .rc-check { border-color: #fff; color: #2F5D34; }
.rec4 .rc-check svg { width: 12px; height: 12px; opacity: 0; }
.rec4 .rc.on .rc-check svg { opacity: 1; }
.rec4 .rc .rc-in,
.rec4 .rc.on .rc-out { display: none; }
.rec4 .rc.on .rc-in { display: inline; }
@media (min-width: 700px) {
  .rec4 {
    display: flex;
    justify-content: center;
    gap: 16px;
    width: min(1008px, calc(100vw - 48px));
    align-self: center;
    margin-top: 8px;
    margin-left: calc(-1 * var(--gut));
    margin-right: calc(-1 * var(--gut));
    overflow-x: visible;
    scroll-snap-type: none;
    padding: 0;
  }
  .rec4 .rc {
    flex: 1 1 0;
    width: auto;
    max-width: 240px;
    min-width: 0;
    scroll-snap-align: unset;
  }
  .rec4 .rc-media { height: 200px; }
  .rec4 .rc-body { padding: 16px 16px 18px; }
}

.plans { gap: 16px; margin: 14px 0 10px; }
.plan {
  border: 0;
  border-radius: 20px;
  padding: 0 0 14px;
  align-items: stretch;
  text-align: left;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 43, 125, 0.08);
  gap: 0;
}
.plan img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; margin: 0; display: block; }
.plan b, .plan small, .plan strong { width: 100%; box-sizing: border-box; padding-left: 14px; padding-right: 14px; }
.plan b { font: 700 19px/1.2 Faro, Poppins, sans-serif; margin: 12px 0 2px; text-align: left; }
.plan small { font: 400 13px/1.35 Poppins, sans-serif; min-height: 0; padding-top: 0; padding-bottom: 0; text-align: left; color: var(--n, #102A7D); }
.plan strong { font: 700 15.5px/1.2 Faro, Poppins, sans-serif; margin: 12px 0 0; text-align: right; }
.plan.on { border: 2.5px solid var(--n, #102A7D); background: var(--yl); box-shadow: 0 0 0 4px rgba(239, 213, 115, .35); }

/* Allergy confirm. Not .sheet: that class is the full-height breed panel. */
#fx-ask {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(16, 42, 125, .45);
}
#fx-ask[hidden] { display: none !important; }
#fx-ask .fx-card {
  width: min(420px, 100%);
  background: var(--bg, #F5F1E6);
  border-radius: 24px;
  padding: 26px 22px 18px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(16, 42, 125, .28);
}
#fx-ask h2 { margin: 0 0 8px; font-size: 26px; }
#fx-ask p {
  margin: 0 0 18px;
  text-align: center;
  color: #34406f;
  font: 500 16px/1.4 Poppins, system-ui, sans-serif;
}
#fx-ask .fx-actions { display: flex; flex-direction: column; gap: 8px; }
#fx-ask button {
  width: 100%;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
}
#fx-ask [data-a="no"] {
  background: var(--n);
  color: #fff;
  font: 700 19px Faro, Poppins, sans-serif;
  padding: 14px 18px;
  box-shadow: 0 5px 0 var(--nd), 0 12px 22px rgba(16, 42, 125, .26);
}
#fx-ask [data-a="no"]:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--nd); }
#fx-ask [data-a="yes"] {
  background: transparent;
  color: var(--n);
  font: 600 15px Poppins, system-ui, sans-serif;
  padding: 12px 8px;
}

.fx-loading {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 32px 28px;
  background: var(--bg, #F5F1E6);
  text-align: center;
}
.fx-loading[hidden] { display: none !important; }
.fx-loading__ring { width: 96px; height: 96px; margin-bottom: 14px; }
.fx-loading__ring svg { width: 100%; height: 100%; animation: fx-spin .9s linear infinite; }
.fx-loading__track { fill: none; stroke: #E1DBCB; stroke-width: 8; }
.fx-loading__arc {
  fill: none;
  stroke: var(--n, #102A7D);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 88 239;
}
.fx-loading h2 {
  margin: 0;
  font: 700 28px/1.15 Faro, Poppins, sans-serif;
  color: var(--n, #102A7D);
}
.fx-loading p {
  margin: 0;
  max-width: 18em;
  font: 500 16px/1.4 Poppins, sans-serif;
  color: #34406f;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .btn.fx-shake { animation: none; }
  #fx-toast { transition: none; }
  .fx-loading__ring svg { animation: none; }
}

/* Reviewer initials where Madani's photo is missing (lingue/av/) */
.fx-ini{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--yl);color:var(--n);display:flex;align-items:center;justify-content:center;font:700 12px Poppins;font-style:normal}

/* Screen 1 grows with the landing sections. Continue stays fixed to the
   viewport, including while those sections scroll. */
#foot {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
}
/* The reviews carousel is its own layer (z-index 1). The page wrapper has to
   sit above it, or the cards scroll over the fixed continue button. */
body.fx-landing .wrap { position: relative; z-index: 3; }
body.fx-landing,
body.fx-landing .phone,
body.fx-landing .scr { background: #FBF8F1; }
/* No full-screen minimum: the sections follow the review right away (the breed gate keeps its own). */
body.fx-landing .phone { height: auto !important; min-height: 0; overflow: visible; }
body.fx-landing .scr.cur { overflow: visible; flex: 0 0 auto; }
body.fx-landing .scr.cur .sb { overflow: visible; justify-content: flex-start; padding-bottom: 164px !important; }
body.fx-landing #foot {
  height: auto;
  margin: 0;
  padding: 48px 22px var(--foot-gap);
  background: linear-gradient(rgba(250, 248, 242, 0), var(--bg, #FAF8F2) 48px);
  z-index: 5;
  pointer-events: none;
}
body.fx-landing #foot > * { pointer-events: auto; }
body.fx-landing .fx-land { padding-bottom: 0; }
body.fx-landing.fx-breed-on .fx-land,
body:has(.fx-breed-on) .fx-land { display: none; }
@media (min-width: 700px) {
  body.fx-landing .phone { min-height: 0 !important; }
  body.fx-landing .scr.cur .sb { width: var(--col); max-width: var(--col); margin: 0 auto; padding-left: 0; padding-right: 0; padding-bottom: 0 !important; background: transparent; }
  body.fx-landing #foot {
    width: auto;
    max-width: none;
    padding-left: var(--gut);
    padding-right: var(--gut);
  }
}
#foot .btn, .foot .btn { font: 700 19px/1 Faro, Poppins, sans-serif; padding: 16px 54px; box-sizing: border-box; }
/* The bowl at the left edge, on wide screens. It sits on the page, under the
   step column and the sections below it. */
@media (min-width: 1100px) {
  body.fx-landing { position: relative; overflow-x: clip; }
  body.fx-landing .wrap { position: relative; overflow-x: clip; }
  body.fx-landing .phone { position: relative; z-index: 1; background: transparent; }
  body.fx-landing .scr { background: transparent; }
  body.fx-landing .top, body.fx-landing .prog { position: relative; z-index: 2; }
  body.fx-landing .fx-land { position: relative; z-index: 1; }
  body.fx-landing::before {
    /* Sized in funnel.js so the rim stays just clear of the content. */
    z-index: 0;
    content: "";
    position: absolute;
    left: calc(var(--bowl-fit, 420px) * -0.4);
    top: 148px;
    width: var(--bowl-fit, 420px);
    aspect-ratio: 471 / 477;
    background: url("/start/assets/bowl-landing.png") center / contain no-repeat;
    filter: drop-shadow(0 22px 36px rgba(16, 42, 125, 0.16));
    pointer-events: none;
  }
}
/* Narrower screens: the bowl tucks under the header and only its bottom
   third shows. It hangs from the progress row, under the header and promo bar. */
@media (max-width: 1099px) {
  body.fx-landing { --bowl-m: min(300px, 78vw); }
  body.fx-landing .fx-promo,
  body.fx-landing .top { position: relative; z-index: 2; }
  /* No z-index on the row itself: the bowl (1) goes under the header (2),
     the bar (3) stays over it. */
  body.fx-landing .prog { position: relative; z-index: auto; }
  body.fx-landing .prog::before {
    z-index: 1;
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: var(--bowl-m);
    aspect-ratio: 471 / 477;
    transform: translate(-50%, -66.67%);
    background: url("/start/assets/bowl-landing.png") center / contain no-repeat;
    filter: drop-shadow(0 16px 28px rgba(16, 42, 125, 0.14));
    pointer-events: none;
  }
  /* Room for the visible third (it starts at the header's edge, the progress row is inside it). */
  body.fx-landing .scr.cur .sb {
    padding-top: max(12px, calc(var(--bowl-m) * 477 / 471 / 3 - var(--prog-h, 28px) + 16px)) !important;
  }
}
@media (min-width: 700px) and (max-width: 1099px) {
  body.fx-landing { --prog-h: 35px; }
}
/* Screen 1 on phones: the review leads straight into the sections below. */
@media (max-width: 699px) {
  body.fx-landing .scr.cur .sb { padding-bottom: 8px !important; }
}

/* Sex step: male and female first. The follow-up appears after a choice. */
.sex:not(.fx-picked) ~ h3,
.sex:not(.fx-picked) ~ .seg[data-a="ster"],
.sex:not(.fx-picked) ~ .nota { display: none; }
.sex.fx-picked ~ h3,
.sex.fx-picked ~ .seg[data-a="ster"],
.sex.fx-picked ~ .nota { animation: fx-sex-in .4s ease backwards; }
.sex.fx-picked ~ .seg[data-a="ster"] { animation-delay: 60ms; }
.sex.fx-picked ~ .nota { animation-delay: 110ms; }
@keyframes fx-sex-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Neutering note: a speech bubble from Dr. Vet Neus. */
.nota.fx-vet {
  display: block;
  background: none;
  padding: 0;
  margin: 16px 0 6px;
  border-radius: 0;
  color: inherit;
}
.fx-vet__say {
  position: relative;
  background: #E9EDF3;
  color: #1B3E78;
  border-radius: 28px;
  padding: 18px 20px 16px;
}
.fx-vet__say::after {
  content: "";
  position: absolute;
  left: 36px;
  bottom: -11px;
  width: 22px;
  height: 22px;
  background: #E9EDF3;
  border-radius: 50%;
}
.fx-vet__say b {
  display: block;
  margin: 0 0 6px;
  font: 700 18px/1.2 Poppins, sans-serif;
  letter-spacing: -0.02em;
  color: #1B3E78;
}
.fx-vet__say p {
  margin: 0;
  font: 500 15px/1.4 Poppins, sans-serif;
  color: #1B3E78;
}
.fx-vet__who {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.fx-vet__who img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 68px;
}
.fx-vet__who p { margin: 0; }
.fx-vet__who b {
  display: block;
  font: 700 16px/1.2 Poppins, sans-serif;
  color: var(--n, #102A7D);
}
.fx-vet__who span {
  display: block;
  margin-top: 2px;
  font: 500 15px/1.3 Poppins, sans-serif;
  color: var(--n, #102A7D);
}

.fx-land[hidden] { display: none; }
.fx-land {
  --pawy-blue: #102b7d;
  --pawy-yellow: #efd573;
  --font-body: "Poppins", system-ui, -apple-system, sans-serif;
  --font-display: "Faro", "Poppins", system-ui, sans-serif;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --radius-pill: 999px;
  color: var(--pawy-blue);
  font-family: var(--font-body);
}
.fx-land__inner { width: min(1000px, calc(100% - 40px)); margin: 0 auto; }
.fx-land h2.fx-land__title { font: 700 clamp(30px, 4vw, 40px)/1.08 Faro, Poppins, sans-serif; letter-spacing: -0.02em; text-align: center; margin: 0 0 32px; }
.fx-land h3 { text-align: left; margin: 0; }

.fx-box { background: transparent; padding: 26px 0 64px; }
.fx-box__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: stretch; }
.fx-box__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.fx-box__card { display: flex; gap: 18px; align-items: center; background: #fff; border-radius: 16px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(16, 43, 125, 0.08); }
.fx-box__card img { flex: 0 0 48px; width: 48px; height: 48px; }
.fx-box__card h3 { font: 700 18px/1.2 Faro, Poppins, sans-serif; margin-bottom: 4px; }
.fx-box__card h3 .hl { white-space: nowrap; }
.fx-box__card p { margin: 0; font-size: 13.5px; line-height: 1.4; color: #34406f; }
.fx-box__media { margin: 0; }
.fx-box__media img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; border-radius: 20px; display: block; }

.fx-how { background: #FBF8F1; padding: 24px 0 72px; }
.fx-how__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.fx-how__step { text-align: center; }
.fx-how__step img { width: 64px; height: 64px; display: block; margin: 0 auto 16px; }
.fx-land .fx-how__step h3 { text-align: center; font: 700 16px/1.25 Poppins, sans-serif; margin-bottom: 8px; }
.fx-how__step p { margin: 0 auto; max-width: 240px; font-size: 13.5px; line-height: 1.45; color: #34406f; }

.fx-reviews { padding-top: 56px; }
.fx-reviews .recipe-reviews__header { width: min(1000px, calc(100% - 40px)); margin: 0 auto; }
.fx-reviews__verified { display: flex; justify-content: center; align-items: center; gap: 8px; margin: 8px auto 0; font-size: 14px; }

@media (max-width: 760px) {
  .fx-box__grid { grid-template-columns: 1fr; gap: 20px; }
  .fx-box__media { order: -1; }
  .fx-box__media img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .fx-how__steps { grid-template-columns: 1fr; gap: 28px; }
  .fx-box { padding: 32px 0 32px; }
  .fx-how { padding: 8px 0 48px; }
}

/* The continue button stays above illustrations, the bowl and the photo wall. */
.foot, #foot { z-index: 30; }
/* 25px under the continue button (or the line under it), on every screen. */
.phone { --foot-gap: calc(25px + env(safe-area-inset-bottom, 0px)); }
.foot { height: auto; padding-bottom: var(--foot-gap); }

/* Short steps sit in the middle. Tall ones start at the top, so nothing is cut off. */
.sb { justify-content: safe center; }
.sb > :first-child { margin-top: 0; }
.sb > :last-child { margin-bottom: 0; }

/* Eater (and the other sliders): the thumb sits on the same line as each label. */
.sld .ticks {
  position: relative;
  display: block;
  height: 2.7em;
  margin: 8px 0 0;
}
.sld .ticks > span {
  position: absolute;
  top: 0;
  width: max-content;
  max-width: 7.5em;
  transform: translateX(-50%);
  text-align: center;
}
.sld input::-moz-range-track {
  height: 8px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--n) var(--p), #D9D3C2 var(--p));
}
.sld input::-moz-range-thumb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--y);
  border: 3px solid var(--n);
  box-shadow: 0 4px 12px rgba(16, 42, 125, .3);
  cursor: grab;
}

.sb h2, .sb h2.h2s, h2.fx-wide, h2.fx-oneline {
  width: 100%;
  max-width: none;
  text-wrap: wrap;
  white-space: normal;
  font-size: 27px;
}
.tiles:not(.c2) { width: 100%; }
.tiles:not(.c2) .tile { width: 100%; }

/* One review box per selected problem. */
.fb:has(.fx-stats) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: transparent;
  padding: 0;
}
.fb:has(.fx-stats) > .fbh,
.fb:has(.fx-stats) > .fbr,
.fb:has(.fx-stats) > small { display: none; }
.fx-stats { display: flex; flex-direction: column; gap: 12px; }
.fx-stat {
  background: var(--n);
  color: #fff;
  border-radius: 18px;
  padding: 13px 16px 14px;
  text-align: left;
}
.fx-stat .fbh,
.fx-stat .fbh span {
  color: #fff;
  margin: 0 0 6px;
  font: 700 20px/1.2 Poppins, sans-serif;
  letter-spacing: -0.01em;
}
.fx-stat .fbr { display: flex; align-items: flex-end; gap: 14px; }
.fx-stat .fbr > span:last-child { font: 500 15px/1.3 Poppins, sans-serif; color: #fff; }
.fx-stat .fbr > span:last-child b { font-weight: 700; }
.fx-fb-source {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: flex-start;
  gap: 8px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fff;
  font: 500 13.5px/1.3 Poppins, sans-serif;
  color: var(--t, #26305E);
}
.fx-fb-source[hidden] { display: none !important; }
.fx-fb-source .gg { width: 18px; height: 18px; flex: 0 0 18px; }

/* Current food transition stat shown directly under each selected food option */
.tiles[data-a="food"].multi { gap: 9px; }
.tiles[data-a="food"].multi .tile { min-height: 54px; }
.fx-food-stat {
  margin: 0;
  width: 100%;
  opacity: 1 !important;
  transform: none !important;
  animation: rise .32s var(--ease) backwards;
}
.fx-food-stat > b {
  white-space: normal;
}
/* As wide as the phrase, up to 8.4em: short ones ("3× LESS") stay on one
   line and leave no gap. It doesn't shrink for the text beside it. */
.fx-food-stat > b.fx-phrase {
  flex: 0 0 auto;
  max-width: 8.4em;
  font-size: 20px;
  line-height: 1.15;
}
.fx-food-stat > span b {
  font-weight: 700;
}

/* Add-on cards follow the current site design. */
.scr.upsell .sub,
.scr.upsell .uptot { display: none !important; }
.ups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 10px;
}
.ups .up {
  opacity: 1;
  transform: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(16, 43, 125, 0.08);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ups .up-media {
  position: relative;
  width: 100%;
  /* About 25% taller than the earlier 16:11. */
  aspect-ratio: 8 / 7;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--s, #EAE5D5);
}
.ups .up-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  display: block;
}
.ups .up-media em {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  margin: 0;
  padding: 4px 11px;
  border-radius: 8px;
  background: var(--y, #EFD573);
  color: var(--n, #102A7D);
  font: 500 12.5px/1.2 Poppins, sans-serif;
  font-style: normal;
}
.ups .upt {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 14px 18px 16px;
}
.ups .upt b {
  font: 700 19px/1.2 Faro, Poppins, sans-serif;
  color: var(--n, #102A7D);
  margin: 0 0 2px;
}
.ups .upt small {
  font: 400 13px/1.35 Poppins, sans-serif;
  color: var(--n, #102A7D);
  margin: 0 0 3px;
}
.ups .upt ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font: 400 13px/1.45 Poppins, sans-serif;
  color: var(--n, #102A7D);
}
.ups .upp {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.ups .upp-price {
  text-align: right;
  line-height: 1.2;
}
.ups .upp-price strong {
  display: block;
  font: 700 15.5px/1.2 Faro, Poppins, sans-serif;
  color: var(--n, #102A7D);
}
.ups .upp-price span {
  display: block;
  font: 400 12.5px/1.25 Poppins, sans-serif;
  color: var(--n, #102A7D);
  margin-top: 2px;
}
@media (max-width: 699px) {
  .ups .upt { padding: 10px 10px 12px; }
  .ups .upt b { font-size: 15px; }
  .ups .upt ul { margin-bottom: 8px; font-size: 12px; line-height: 1.35; }
  .ups .up-media em { top: 8px; left: 8px; padding: 3px 8px; font-size: 11px; }
}
@media (min-width: 700px) {
  .ups {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    width: min(920px, calc(100vw - 48px));
    align-self: center;
    margin-left: calc(-1 * var(--gut));
    margin-right: calc(-1 * var(--gut));
  }
  .sb h2, .sb h2.h2s, h2.fx-wide, h2.fx-oneline { font-size: 34px; }
  .plans { gap: 20px; }
}

.fx-promo {
  flex: 0 0 auto;
  background: var(--y, #EFD573);
  color: var(--n, #102A7D);
  text-align: center;
  font: 600 13.5px/1.35 Poppins, sans-serif;
  padding: 8px 16px;
}
.fx-promo span {
  display: inline-block;
  max-width: 100%;
  background: var(--halo, #DCE5F4);
  border-radius: 999px;
  padding: 2px 12px;
}
.fx-promo b { font-weight: 700; }

.carousel { touch-action: pan-x; scroll-snap-type: x proximity; }
.carousel .breed img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
.addp .nmf { display: none; }
.breed { height: auto; min-height: 112px; flex-basis: 106px; }
.breed span {
  display: block;
  margin: auto 0;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  white-space: normal;
}
@media (min-width: 700px) {
  .carousel { cursor: grab; touch-action: pan-x; scroll-snap-type: x proximity; }
  .carousel.fx-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
  .carousel .breed img { -webkit-user-drag: none; }
}

.duo { align-items: flex-start; justify-content: center; gap: 8px; margin-bottom: 18px; }
.duo figure {
  position: relative;
  flex: 0 0 140px;
  width: 140px;
  height: 140px;
  gap: 0;
  justify-content: center;
  overflow: visible;
  background: var(--halo, #DCE5F4);
  border-radius: 50%;
}
.fx-person {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 140px;
  background: var(--halo, #DCE5F4);
}
.fx-person .ic { width: 78px; height: 78px; color: var(--n, #102A7D); }
.duo .dg img { height: 122px; width: auto; max-width: 130px; background: none; }
.duo figcaption {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 1;
  max-width: 9em;
  margin: 0;
  transform: translate(-50%, 50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duo .lnk { height: 140px; display: flex; align-items: center; margin: 0; flex: 0 0 auto; }
.duo .lnk .ic { width: 28px; height: 28px; }

.fx-build-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  margin: 0 auto 8px;
}
.fx-build-head .ring { width: 72px; height: 72px; margin: 0; flex: 0 0 72px; }
.fx-build-head .pc { font-size: 16px; }
.fx-build-head h2 { margin: 0; text-align: left; }

@media (max-width: 699px) {
  .sld .ticks > span { max-width: 5.4em; }
  .bub, .bub b, .bub span { overflow-wrap: break-word; }
}

/* Box size (after the add-ons): how often the box comes after the trial. */
.fx-bs .pw { font-size: 30px; margin-bottom: 8px; }
.fx-bs__proof {
  margin: 0 0 12px;
  text-align: center;
  color: var(--n);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* Fill the line before wrapping (the design balances every <p>). */
.fx-bs__proof b { font: 700 16px/1.3 Faro, Poppins, sans-serif; text-wrap: wrap; }
.fx-bs__proof b .hl { font-size: calc(1em + 1px); }
.fx-bs__proof > span { font: 500 14.5px/1.35 Poppins, sans-serif; }
.fx-bs__q { margin: 2px 0 16px; text-align: center; font: 400 13.5px/1.4 Poppins, sans-serif; color: var(--t); }
.fx-bs__list { display: flex; flex-direction: column; gap: 10px; }
.fx-bs__opt {
  position: relative;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 14px;
  border: 1.6px solid var(--h);
  border-radius: 16px;
  background: #fff;
  color: var(--n);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.fx-bs__opt.on { border: 2.5px solid var(--n); padding: 15px 13px; background: var(--yl); box-shadow: 0 0 0 4px rgba(239, 213, 115, .35); }
.fx-bs__opt:focus-visible { outline: 3px solid var(--y); outline-offset: 2px; }
.fx-bs__radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--n);
  background: #fff;
}
.fx-bs__opt.on .fx-bs__radio { box-shadow: inset 0 0 0 3.5px #fff; background: var(--n); }
.fx-bs__w {
  font: 700 22px/1 Faro, Poppins, sans-serif;
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1.5px solid var(--n);
}
.fx-bs__amt { display: flex; flex-direction: column; gap: 2px; min-width: 0; font: 500 13.5px/1.25 Poppins, sans-serif; }
.fx-bs__amt small { font-size: 12.5px; color: var(--m); }
.fx-bs__price { font: 700 15px/1.2 Faro, Poppins, sans-serif; white-space: nowrap; }
.fx-bs__pop {
  position: absolute;
  top: -12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 11px 3px 8px;
  border-radius: 99px;
  background: var(--n);
  color: #fff;
  font: 500 12px/1.3 Poppins, sans-serif;
  font-style: normal;
}
.fx-bs__pop svg { width: 14px; height: 14px; fill: var(--y); }
.fx-bs__more {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--n);
  font: 700 16px Faro, Poppins, sans-serif;
  cursor: pointer;
}
.fx-bs__more[hidden] { display: none; }
.fx-bs__more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.fx-bs__note {
  margin: 14px 0 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--s);
  text-align: center;
  font: 400 13px/1.35 Poppins, sans-serif;
  color: var(--t);
}
.fx-bs__note b { font-weight: 700; color: var(--n); }
/* On the plans screen the note sits under the fridge card, as plain small text. */
/* Under the box sizes, above «More options»: 13px on phones and desktop. */
.fx-bs--inline .fx-bs__note { margin: 10px 0 0; padding: 0 8px; background: none; border-radius: 0; font-size: 13px; }
/* The dog-at-its-bowl photo in the plans row is for desktop only. */
.fx-plansrow__ph { display: none; }
/* The fridge icon on the left of its text, in a white card like the trial
   box, centred, 450px at most. */
.fx-fresh {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 450px;
  box-sizing: border-box;
  margin: 14px auto 0;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 42, 125, .07);
}
/* The fridge icon, in navy, on the left of the text. */
.fx-fresh__ic { flex: none; width: 36px; height: 36px; color: var(--n, #102A7D); }
.fx-fresh p { margin: 0; text-align: left; text-wrap: wrap; font: 400 13.5px/1.35 Poppins, sans-serif; color: var(--t); }
.fx-fresh p b { font-weight: 700; color: var(--n); }
@media (min-width: 700px) {
  .fx-fresh p { font-size: 15px; }
  .fx-fresh__ic { width: 40px; height: 40px; }
}
/* The 1 % line is now the first of the four yes questions. */
.fx-plans .char { display: none; }
.yr .yt b { font-weight: 700; color: var(--n); }
.yr .yt .hl { padding: 0 5px; border-radius: 6px; font: 700 calc(1em + .5px)/1.2 Faro, Poppins, sans-serif; color: var(--n); white-space: nowrap; }
.fx-bs__q b { font-weight: 700; color: var(--n); }
.fx-bs__q .hl { font: 700 calc(1em + 1px)/1.2 Faro, Poppins, sans-serif; color: var(--n); white-space: nowrap; }
.foot .fx-bs__hint { color: var(--n); font-weight: 600; }
/* The line under the button sits in the middle of the gap below it: 12px
   above and below the text. Above, that is counted from the button's 5px 3D
   edge (its box-shadow), so the margin is 5 + 12. */
#foot .fx-pause { margin: 17px 0 0; font-size: 12px; line-height: 1; }
#foot:has(.fx-pause) { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

/* Phones: the amount goes under the weeks, the price stays on the right. */
@media (max-width: 699px) {
  .fx-bs__opt {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "r w p" "r a p";
    column-gap: 12px;
    row-gap: 4px;
    padding: 14px 14px;
  }
  .fx-bs__opt.on { padding: 13px 13px; }
  .fx-bs__radio { grid-area: r; }
  .fx-bs__w { grid-area: w; font-size: 21px; padding-right: 0; border-right: 0; }
  .fx-bs__amt { grid-area: a; font-size: 12.5px; }
  .fx-bs__amt small { font-size: 12px; }
  .fx-bs__price { grid-area: p; font-size: 15px; }
}
@media (max-width: 360px) {
  .fx-bs__opt { column-gap: 10px; padding: 13px 11px; }
  .fx-bs__opt.on { padding: 12px 10px; }
  .fx-bs__w { font-size: 19px; }
  .fx-bs__price { font-size: 13.5px; }
}
@media (min-width: 700px) {
  .fx-bs .pw { font-size: 40px; }
  .fx-bs__proof b { font-size: 19px; }
  .fx-bs__proof > span { font-size: 16px; }
  .fx-bs__q { font-size: 15px; }
  .fx-bs__opt { padding: 20px 24px; gap: 20px; }
  .fx-bs__opt.on { padding: 19px 23px; }
  .fx-bs__w { font-size: 30px; padding-right: 20px; }
  .fx-bs__amt { font-size: 16px; }
  .fx-bs__amt small { font-size: 14.5px; }
  .fx-bs__price { font-size: 19px; }
}

/* Desktop: fields and reviews stay a comfortable 400px, selection cards
   550px, both centred in the column. Sliders, most hints and the continue
   button keep the full column width. */
@media (min-width: 700px) {
  .phone { --field: 400px; --pick: 550px; }
  .sb > .fl,
  .sb > .fx-consent,
  .sb > .prof,
  .sb > .fx-profs,
  .sb > .goals,
  .sb > figure.rv,
  .sb > .sex,
  .sb > .seg,
  .sb > .tiles,
  .sb > .tiles[data-a="food"] ~ .nota,
  .sb > .tiles ~ .fb,
  .sb > .fx-lead,
  .sb > .fx-none,
  .sb > [data-by="health"],
  .sb > .fx-insight,
  .sb .fx-bs__list {
    width: 100%;
    max-width: var(--field);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  .sb > .sex,
  .sb > .seg,
  .sb > .tiles,
  .sb > .tiles[data-a="food"] ~ .nota,
  .sb > .tiles ~ .fb,
  .sb > .fx-lead,
  .sb > .fx-none,
  .sb > [data-by="health"],
  .sb > .fx-insight,
  .sb .fx-bs__list { max-width: var(--pick); }
}

.cap:empty { display: none; }

.fx-lead {
  margin: 8px 0 2px;
  text-align: center;
  font: 700 34px/1.05 Faro, Poppins, sans-serif;
  color: var(--n, #102A7D);
}

.fx-none {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 42, 125, .07);
  text-align: center;
}
.fx-none b {
  display: block;
  color: var(--n, #102A7D);
  font: 700 18px/1.2 Faro, Poppins, sans-serif;
}
.fx-none p {
  display: block;
  margin: 6px 0 0;
  font: 500 14.5px/1.4 Poppins, sans-serif;
  color: var(--t, #26305E);
}
.fx-none p b {
  display: inline;
  font: inherit;
  font-weight: 700;
  color: inherit;
}

.fx-pick .tiles.c2 .care { grid-column: 1 / -1; margin: 4px 0 8px; }

.teamrow {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.teamrow img {
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
}
.teamrow span { flex: none; padding: 12px 14px 14px; }
/* The photo strip keeps its height. On a wide screen the team photo uses the
   room that is left, so the strip is not squeezed flat under the card. */
.scr.build .wallc,
.scr.build .joins { flex-shrink: 0; }
@media (min-width: 700px) {
  /* A grid: the spacer under the progress rail would take the first row, so
     the same room goes into the top padding here. */
  .phone .scr.build .sb::before { content: none; }
  .phone:not(.fx-tabs-on) .scr.build .sb { padding-top: calc(24px + var(--under)); }
  .scr.build .sb {
    display: grid;
    grid-template-rows: auto auto minmax(72px, 420px) 84px auto;
    align-content: safe center;
    row-gap: 12px;
  }
  .scr.build .fx-build-head,
  .scr.build .steps,
  .scr.build .teamrow,
  .scr.build .joins {
    width: 100%;
    max-width: var(--col);
    justify-self: center;
  }
  .scr.build .teamrow {
    height: 100%;
    min-height: 0;
    margin-bottom: 0;
  }
  .scr.build .teamrow img {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center 62%;
  }
  /* The photo strip is as wide as the team photo above it. */
  .scr.build .wallc {
    width: 100%;
    max-width: var(--col);
    justify-self: center;
    margin: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  }
}

/* Problems screen: the points and review from the removed "What we've seen"
   screen, under the review counts. Only the list and the review show. */
/* 12px under the review counts (their own bottom margin), like the other gaps here. */
.fx-insight { margin-top: 0; }
.fx-insight .pts { margin-top: 0; }
.fx-insight .fbh,
.fx-insight .bignum,
.fx-insight .zampe,
.fx-insight .h2s { display: none; }
.fx-insight .sq { opacity: 1; transform: none; }

/* Plans screen (trial_plans) with the box size under the 100 % / 50 % cards.
   No timeline, no prices on the cards: the footer sums up the trial and the
   plan per day for the plan and box picked. */
.fx-plans .sb > .tl,
.fx-plans .tot1,
.fx-plans .after,
.fx-plans .plan strong { display: none !important; }
/* Room for the fixed footer, with a little space left above the summary
   when scrolled to the end (Alex, 10 Nov: less, but keep some). */
.scr.hasf.fx-plans .sb { padding-bottom: 186px; }

.fx-bs--inline { display: flex; flex-direction: column; margin: 8px 0 4px; }
.fx-bs--inline[hidden] { display: none; }
.fx-bs--inline .fx-bs__q { margin: 6px 0 18px; }
.fx-bs--inline .fx-bs__opt { padding: 12px 14px; column-gap: 10px; }
.fx-bs--inline .fx-bs__opt.on { padding: 11px 13px; }
.fx-bs--inline .fx-bs__w { font-size: 18px; padding-right: 10px; }
/* The plan titles (100% / 50% fresh) match the weeks of the box sizes. */
.fx-plans .plan b { font-size: 18px; }
/* The 100 % / 50 % cards stacked, each a row: a small bowl photo on the
   left, title and line on the right, the −30% badge top right. */
.fx-plans .plans { grid-template-columns: 1fr; gap: 10px; }
.fx-plans .plan {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  column-gap: 14px;
  padding: 0;
  min-height: 78px;
}
.fx-plans .plan img { grid-column: 1; grid-row: 1 / -1; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }
.fx-plans .plan b, .fx-plans .plan small { grid-column: 2; padding: 0 14px 0 0; }
/* Clear of the −30% badge. */
.fx-plans .plan b { padding-right: 64px; }
.fx-plans .plan b { grid-row: 2; margin: 0 0 2px; }
.fx-plans .plan small { grid-row: 3; }
.fx-bs--inline .fx-bs__amt { font-size: 12.5px; }
.fx-bs--inline .fx-bs__amt small { font-size: 11.5px; }
.fx-bs--inline .fx-bs__price { font-size: 14px; }
.fx-bs--inline .fx-bs__more { margin-top: 12px; font-size: 15px; }
/* A little more room between the sections (Alex, 10 Nov): title, cards,
   «7 out of 10», box sizes, «More options», fridge card, note. */
.fx-plans .plans { margin: 20px 0 14px; }
.fx-bs--inline .fx-fresh { margin-top: 26px; }

/* Trial box under the 100 % / 50 % cards: title, the portions
   and a line per dog. */
.fx-starter {
  margin: 0 auto 22px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 42, 125, .07);
  color: var(--n, #102A7D);
}
/* The 100 % / 50 % cards and the trial box share one width on phones,
   centred: 480px at most. */
.fx-plans .plans,
.fx-starter {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}
.fx-starter[hidden] { display: none; }
/* Title and portions on the left, the total kg centred on both lines. */
.fx-starter__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fx-starter__t { display: block; font: 500 12px/1.2 Poppins, sans-serif; }
.fx-starter__n { margin: 3px 0 0; font: 700 16px/1.2 Faro, Poppins, sans-serif; }
.fx-starter__dogs { margin-top: 8px; }
.fx-starter__dog { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--s, #EAE5D5); }
.fx-starter__dog:last-child { padding-bottom: 0; }
/* Name · 14 days of food, on one line; a long name is cut off, the days never. */
.fx-starter__who { flex: 1; min-width: 0; display: flex; align-items: baseline; }
.fx-starter__who b { min-width: 0; font: 700 13px/1.25 Poppins, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-starter__who small { flex: none; font: 400 11.5px/1.3 Poppins, sans-serif; color: #102a7d; white-space: nowrap; }
.fx-starter__who small::before { content: "\00B7"; margin: 0 6px; font-weight: 700; }
.fx-starter__g { white-space: nowrap; }
.fx-starter__g b { font: 700 13px/1.2 Faro, Poppins, sans-serif; }
.fx-starter__g span { font: 400 12px/1.2 Poppins, sans-serif; }
@media (min-width: 700px) {
  .fx-starter { padding: 12px 18px; }
  .fx-starter__t { font-size: 13px; }
  .fx-starter__n { font-size: 18px; }
  .fx-starter__who b { font-size: 14px; }
  .fx-starter__who small { font-size: 12.5px; }
  .fx-starter__g b { font-size: 14px; }
  .fx-starter__g span { font-size: 13px; }
}

.fx-sum {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 12px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 42, 125, .08);
  color: var(--n, #102A7D);
  pointer-events: auto;
}
.fx-sum[hidden] { display: none; }
.fx-sum > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font: 500 14px/1.3 Poppins, sans-serif;
}
/* The trial line is bold (label and amount, not "/day"); the ongoing plan
   line is regular. */
.fx-sum b { font: 500 14px/1.2 Poppins, sans-serif; white-space: nowrap; }
.fx-sum__trial > span { font-weight: 700; }
.fx-sum__trial b { font: 700 16px/1.2 Faro, Poppins, sans-serif; }
.fx-sum .fx-sum__unit { font: 400 14px/1.2 Poppins, sans-serif; }
/* The ongoing plan line in the lighter grey of the "14 × 200 g portions" line. */
.fx-sum > div:not(.fx-sum__trial) { color: var(--m); }

@media (min-width: 700px) {
  .scr.hasf.fx-plans .sb { padding-bottom: 200px; }
  /* The plans screen is 50px wider (730px); the footer with Continue keeps 680px. */
  .scr.fx-plans { --col: 730px; --gut: max(24px, calc((100% - var(--col)) / 2)); }
  .fx-bs--inline .fx-bs__list { width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; }
  .fx-bs--inline .fx-bs__q { font-size: 15px; }
  .fx-bs--inline .fx-bs__opt { padding: 14px 18px; column-gap: 14px; }
  .fx-bs--inline .fx-bs__opt.on { padding: 13px 17px; }
  .fx-bs--inline .fx-bs__w { font-size: 22px; padding-right: 14px; }
  .fx-plans .plan b { font-size: 22px; }
  .fx-plans .plans { gap: 12px; }
  /* The trial box to the right of the 100 % / 50 % cards, as tall as its
     content and centred against them; on its own (no trial box yet) the
     cards keep the 480px column. */
  .fx-plansrow {
    display: grid;
    /* Cards 60 %, photo with the trial box 40 %. */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
    align-items: center;
    margin: 20px 0 22px;
  }
  .fx-plansrow:has(> .fx-starter[hidden]) { grid-template-columns: minmax(0, 480px); justify-content: center; }
  .fx-plansrow > .plans { grid-column: 1; grid-row: 1; }
  /* The photo fills the right column; the trial box sits on its lower
     part. */
  .fx-plansrow > .fx-plansrow__ph {
    display: block;
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: 100%;
    /* 100px taller than the two cards (196px); the cards are centred
       against it. */
    height: 296px;
    object-fit: cover;
    object-position: 50% 60%;
    border-radius: 20px;
  }
  .fx-plansrow > .fx-starter { grid-column: 2; grid-row: 1; align-self: end; width: auto; margin: 0 12px 12px; }
  /* Frosted white glass over the photo. */
  .fx-plansrow > .fx-starter {
    background: rgba(255, 255, 255, .8);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 8px 24px rgba(16, 42, 125, .12);
  }
  .fx-plansrow > .fx-starter .fx-starter__dog { border-top-color: rgba(16, 42, 125, .12); }
  /* A bit smaller in the narrower photo column. */
  .fx-plansrow .fx-starter__t { font-size: 12px; }
  .fx-plansrow .fx-starter__n { font-size: 16px; }
  .fx-plansrow .fx-starter__who b,
  .fx-plansrow .fx-starter__g b { font-size: 13px; }
  .fx-plansrow .fx-starter__who small,
  .fx-plansrow .fx-starter__g span { font-size: 11.5px; }
  .fx-plansrow:has(> .fx-starter[hidden]) > .fx-plansrow__ph { display: none; }
  .fx-plansrow > .plans,
  .fx-plansrow > .fx-starter { max-width: none; }
  .fx-plansrow > .plans { margin: 0; }
  .fx-plansrow > .fx-starter { display: flex; flex-direction: column; justify-content: center; }
  .fx-plansrow > .fx-starter[hidden] { display: none; }
  .fx-plans .plan { grid-template-columns: 110px 1fr; column-gap: 16px; min-height: 92px; }
  .fx-bs--inline .fx-bs__amt { font-size: 14px; }
  .fx-bs--inline .fx-bs__amt small { font-size: 13px; }
  .fx-bs--inline .fx-bs__price { font-size: 16px; }
  .fx-sum { padding: 12px 18px; }
  .fx-sum > div { font-size: 15px; }
  .fx-sum b, .fx-sum .fx-sum__unit { font-size: 15px; }
  .fx-sum__trial b { font-size: 17px; }
}

/* Menu numbers (kcal, grams, recipes): the label sits closer under the number. */
.kc b { line-height: 1.05; margin-bottom: 4px; }
.kc small { display: block; line-height: 1.3; }

/* Profile screen with more than one dog: a card per dog, stacked. */
.fx-profs { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.fx-profs .prof { margin: 0; }

/* Add-on buttons: "Add +" outlined, "Added" navy, and − n + in yellow for an
   add-on sold per article (the bar). */
.ups .up-add {
  width: 100%;
  height: 46px;
  border: 2px solid var(--n, #102A7D);
  border-radius: 14px;
  background: transparent;
  color: var(--n, #102A7D);
  font: 700 17px/1 Faro, Poppins, sans-serif;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.ups .up-add.on { background: var(--n, #102A7D); color: #fff; }
.ups .up-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  padding: 0 10px;
  border-radius: 14px;
  background: var(--y, #EFD573);
  color: var(--n, #102A7D);
  font: 700 18px/1 Faro, Poppins, sans-serif;
}
.ups .up-qty button {
  display: flex;
  padding: 4px;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.ups .up-qty button[disabled] { opacity: .35; cursor: default; }
.ups .up-qty svg { width: 26px; height: 26px; }
@media (max-width: 699px) {
  .ups .up-add, .ups .up-qty { height: 40px; border-radius: 12px; }
  .ups .up-add { font-size: 15px; }
  .ups .up-qty { padding: 0 4px; font-size: 16px; }
  .ups .up-qty svg { width: 22px; height: 22px; }
}

/* Goals screen: the six benefits (title, one line of detail, "in the menu"). */
.sub .hl { font-weight: 700; color: var(--n, #102A7D); }
.fx-benefits > div { padding: 12px 14px; gap: 14px; }
.fx-benefits .chip { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; }
.fx-benefits .chip .ic { width: 26px; height: 26px; }
.fx-bf { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fx-bf b { font: 700 16px/1.25 Poppins, sans-serif; color: var(--n, #102A7D); }
.fx-bf small { font: 500 13.5px/1.3 Poppins, sans-serif; color: var(--t, #26305E); }
.fx-benefits em { font-size: 13px; }
.fx-benefits em .ic { width: 18px; height: 18px; }
/* Desktop: wider benefit cards, and the review under them as wide (Alex, 10 Nov). */
@media (min-width: 700px) {
  .sb > .goals.fx-benefits,
  .sb:has(> .fx-benefits) > figure.rv { max-width: 480px; }
}

/* One menu for several dogs: a cell per dog (grams a day) and the recipes picked. */
.fx-kc-dogs { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.fx-kc-dogs small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.fx-kc-dogs b { font-size: 20px; white-space: nowrap; }
/* The screen's column is a flex box: with six benefits it would squash the
   check circle above the title into an oval. */
.okbig { flex-shrink: 0; }
/* Phones: a little less room above the check circle on the goals screen. */
@media (max-width: 699px) {
  .sb:has(> .fx-benefits) > .okbig { margin-top: 6px; }
}
/* Desktop: about half the room between the progress rail and the check circle (Alex, 11 Nov). */
@media (min-width: 700px) {
  .sb:has(> .fx-benefits) { padding-top: 8px; }
  .sb:has(> .fx-benefits) > .okbig { margin-top: 0; }
}