/* ===========================================================================
   THE CHOOSER — "Help me choose"
   ---------------------------------------------------------------------------
   The package finder, and the popup it opens in.

   This file exists because the finder now has two homes: inline on /pricing/,
   and as a site-wide popup opened by every `#quiz-` link (header mega-menu,
   footer, and the "Help me choose" button on the marketing pages). The rules
   below were MOVED here out of pricing.css rather than copied, so there is one
   definition of the finder and the two surfaces cannot drift apart. pricing.css
   now names this file as an enqueue dependency and loads after it, which keeps
   the original cascade order — both blocks used to sit above everything that
   might override them.

   TOKENS. pricing.css scopes its design tokens to `.oa-pricing`, the page
   wrapper — not to :root. The popup renders from wp_footer, outside that
   wrapper, so it carries its own copy of the same token set on `.oa-chooser`
   below. The moved rules therefore resolve against whichever root they find
   themselves in, and neither surface leaks the names site-wide.

   Companion files: js/chooser.js (steps + scoring + open/close),
   inc/chooser-markup.php (generated from scripts/pricing-page/spec.json).
   =========================================================================== */

.oa-chooser {
  /* The same values pricing.css sets on .oa-pricing. Kept in step by hand;
     they are brand constants, not layout numbers, and they change about once
     a year. */
  --oa-orange: #FE7C10;
  --oa-ink: #030304;
  --oa-card: #111218;
  --oa-card-lift: #1A1B22;
  --oa-hair: rgba(255, 255, 255, 0.10);
  --oa-hair-soft: rgba(255, 255, 255, 0.07);
  --oa-txt: #FFFFFF;
  --oa-sub: #D3D9E6;
  --oa-faint: #99A1B5;
  --oa-fs-micro: 11px;
  --oa-fs-meta: 13px;
  --oa-fs-body: 14.5px;
  --oa-fs-lead: 17px;
  --oa-lh-body: 1.6;
  --oa-sans: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --oa-serif: 'Source Serif 4', Georgia, serif;
  --oa-card-r: 14px;
}

/* ===========================================================================
   1. Gradient buttons — iconsax .button-gradient structure, our behaviour
   ---------------------------------------------------------------------------
   Layers, z-indexes and timings are theirs (ButtonGradient.DTdUhbre.css). The
   STATE MACHINE is not, deliberately. Upstream a button is dark until it is
   .visible or hovered, and `.button-gradient.visible:hover .gradient-0` then
   snaps an opaque slab of the PAGE background over the middle — so even their
   lit button ends up a dark pill wearing a 2px ring of colour.
   Owner call, 2026-08: our brand button is ORANGE, at rest and on hover. So the
   colour field is on unconditionally, the base fill is the brand ramp rather
   than the canvas, and the inset slab is rust — hover deepens the pill instead
   of draining it. `.is-live` no longer changes appearance; it is only the hook
   pricing.js uses to keep a button's blobs drifting while it is on screen.
   =========================================================================== */
.oa-gbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
  padding: 10px 26px;
  border: 0;
  border-radius: 25px;
  overflow: hidden;
  /* Rest is COLOUR, not black. This base is what shows between the blurred
     blobs — and it is the whole button with JS off or reduced motion on — so it
     has to be brand orange in its own right, never the canvas. */
  background: linear-gradient(135deg, #FF4D14 0%, #FE7C10 52%, #FFB454 100%);
  color: #fff !important;
  font-family: var(--oa-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  box-shadow: 0 6px 20px -12px rgba(254, 124, 16, .7);
  transition: transform .3s ease, box-shadow .3s ease;
}
.oa-gbtn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -14px rgba(255, 77, 20, .85); }
/* An orange ring on an orange button is invisible, so the focus ring is white. */
.oa-gbtn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.oa-gbtn .btn-content {
  position: relative;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(0, 0, 0, .5);
}
.oa-gbtn .btn-content svg {
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, .5));
  transition: transform .3s ease;
}
.oa-gbtn:hover .btn-content svg { transform: translateX(3px); }

/* Rim light — always on. */
.oa-gbtn .g1 {
  position: absolute;
  inset: 0;
  z-index: 12;
  border-radius: inherit;
  background: radial-gradient(103.46% 134.6% at 64.66% 50%, hsla(0, 0%, 85%, 0) 27.37%, hsla(0, 0%, 85%, .3) 100%);
  transition: all .4s ease;
}

/* Inset core slab. Off at rest — the colour field owns the button. On hover it
   snaps sharp and opaque, leaving a 2px ring of the bloated blob field around
   it. Iconsax fills this with the page background, which is how theirs goes
   dark-cored on hover; ours fills it with rust so hover deepens rather than
   drains, and white on #D2570A is higher contrast than white on #FE7C10. */
.oa-gbtn .g0 {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  z-index: 12;
  border-radius: inherit;
  background: linear-gradient(135deg, #D2570A 0%, #FF4D14 100%);
  filter: blur(10px);
  opacity: 0;
  transform: scale(.95);
  transition: all .5s ease;
}
.oa-gbtn:hover .g0 { filter: blur(0); opacity: 1; transform: scale(1); }

/* The colour field, on in BOTH states — no opacity/scale(3) gate. Hover only
   bloats it to 1.1, which is exactly what .button-gradient.visible:hover does
   upstream; overflow:hidden clips the overspill, so colour gets denser at the
   edges rather than larger. */
.oa-gbtn .g2 {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transform: scale(1);
  transition: all .5s ease;
}
.oa-gbtn:hover .g2 { transform: scale(1.1); }

/* Blobs carry a REST position rather than translate(0). Stacked dead-centre the
   button reads as one soft disc until hovered — and with prefers-reduced-motion
   (pricing.js bails before scatter()) it would stay that way for good. The JS
   writes inline transforms that beat these once it starts drifting. The lightest
   tone, cream, is parked off-centre and away from the label. */
.oa-gbtn .c {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  filter: blur(12px);
  transition: transform 2s ease;
}
.oa-gbtn .c1 { background: #FE7C10; transform: translate(-70%,  26%); }
.oa-gbtn .c2 { background: #FFB454; transform: translate( 88%,  24%); }
.oa-gbtn .c3 { background: #FF4D14; transform: translate( -6%,  -8%); }
.oa-gbtn .c4 { background: #FFD9A8; transform: translate(112%,  -8%); }
.oa-gbtn .c5 { background: #D2570A; transform: translate( 48%, -30%); }
.oa-gbtn .c6 { background: #FF9F45; transform: translate(-105%, -22%); }

/* Secondary + tertiary buttons: same family, quieter. */
.oa-ghostbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
  padding: 10px 26px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  color: #fff !important;
  font-family: var(--oa-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: border-color .25s ease, background-color .25s ease, box-shadow .3s ease;
}
.oa-ghostbtn:hover {
  border-color: rgba(254, 124, 16, .6);
  background: rgba(254, 124, 16, .08);
  box-shadow: 0 0 24px rgba(254, 124, 16, .22);
}
a.oa-mini {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--oa-orange);
  color: #fff !important;
  font-family: var(--oa-sans);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1;
  text-decoration: none !important;
  white-space: nowrap;
  transition: box-shadow .3s ease, transform .2s ease;
}
a.oa-mini:hover { box-shadow: 0 0 24px rgba(254, 124, 16, .5); transform: translateY(-1px); }

.oa-btnrow { display: flex; justify-content: center; margin: 0; }


/* --- 03 Package finder -----------------------------------------------------
   Four questions on one card. One step is visible at a time and the card
   animates its own height between them, so the section never jumps and the
   page below it never moves — the thing that makes most multi-step forms feel
   cheap. Options are real radios inside a fieldset: arrow keys, Tab and screen
   readers all work without a line of script, and the script only handles which
   step is showing and what the answer adds up to. */
.oa-quiz {
  position: relative;
  margin: 34px auto 0;
  max-width: 720px;
  text-align: left;
}
.oa-quiz-form,
.oa-quiz-out {
  position: relative;
  padding: 28px 30px 26px;
  border: 1px solid var(--oa-hair);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(254, 124, 16, .10), transparent 62%),
    linear-gradient(180deg, #111218 0%, #0A0B0E 100%);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95);
}

/* Progress: a rail that fills, and the count beside it. Both are driven from
   one custom property so they can never disagree. */
.oa-quiz-top { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.oa-quiz-bar {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.oa-quiz-fill {
  display: block;
  width: var(--oa-quiz-p, 25%);
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #B3550A, var(--oa-orange));
  box-shadow: 0 0 12px rgba(254, 124, 16, .55);
  transition: width .45s cubic-bezier(.22, .61, .36, 1);
}
.oa-quiz-count {
  margin: 0;
  flex: 0 0 auto;
  font-family: var(--oa-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--oa-faint);
}
.oa-quiz-count .n { color: var(--oa-orange); }

/* The steps stack in one grid cell, so the outgoing and incoming steps can
   cross-fade in the same space instead of one pushing the other down. */
.oa-quiz-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: height .42s cubic-bezier(.22, .61, .36, 1);
}
.oa-qstep {
  grid-area: 1 / 1;
  min-width: 0;
}
.oa-qstep[hidden] { display: none; }
.oa-qstep fieldset { margin: 0; padding: 0; border: 0; }
/* A <legend> arrives with the theme's form reset on it — border-bottom
   1px #E5E5E5 — which drew a light grey rule straight across the dark card,
   under every question. */
.oa-qstep-q {
  display: block;
  float: none;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  font-family: var(--oa-sans);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: #fff;
}
.oa-quiz-steps.is-moving .oa-qstep.is-out { animation: oaQOut .22s ease both; }
.oa-quiz-steps .oa-qstep.is-in { animation: oaQIn .38s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes oaQOut {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: translateX(-18px); filter: blur(4px); }
}
@keyframes oaQIn {
  from { opacity: 0; transform: translateX(26px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
/* Each option lands just after the one above it, so a step arrives as a run
   rather than a block. Four delays, which is the most options any step has. */
.oa-qstep.is-in .oa-qopt { animation: oaQOptIn .4s cubic-bezier(.22, .61, .36, 1) both; }
.oa-qstep.is-in .oa-qopt:nth-child(1) { animation-delay: .05s; }
.oa-qstep.is-in .oa-qopt:nth-child(2) { animation-delay: .10s; }
.oa-qstep.is-in .oa-qopt:nth-child(3) { animation-delay: .15s; }
.oa-qstep.is-in .oa-qopt:nth-child(4) { animation-delay: .20s; }
@keyframes oaQOptIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.oa-qopts { display: flex; flex-direction: column; gap: 10px; }
.oa-qopt { display: block; cursor: pointer; }
/* The radio stays in the page (focusable, announced); it is the box beside it
   that is painted. Never `display:none` — that takes it out of the tab order
   and off the accessibility tree with it. */
.oa-qopt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.oa-qopt-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--oa-hair);
  border-radius: 14px;
  background: rgba(255, 255, 255, .02);
  transition: border-color .22s ease, background-color .22s ease, transform .22s ease;
}
.oa-qopt:hover .oa-qopt-box {
  border-color: rgba(254, 124, 16, .45);
  background: rgba(254, 124, 16, .05);
  transform: translateX(3px);
}
.oa-qopt input:focus-visible + .oa-qopt-box {
  outline: 2px solid var(--oa-orange);
  outline-offset: 2px;
}
.oa-qopt input:checked + .oa-qopt-box {
  border-color: var(--oa-orange);
  background: rgba(254, 124, 16, .10);
  box-shadow: 0 0 0 1px rgba(254, 124, 16, .5), 0 14px 34px -22px rgba(254, 124, 16, .8);
}
.oa-qopt-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  transition: border-color .22s ease, background-color .22s ease;
}
.oa-qopt-tick svg { width: 12px; height: 12px; opacity: 0; transform: scale(.4); }
.oa-qopt input:checked + .oa-qopt-box .oa-qopt-tick {
  border-color: var(--oa-orange);
  background: var(--oa-orange);
}
.oa-qopt input:checked + .oa-qopt-box .oa-qopt-tick svg {
  animation: oaQTick .34s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes oaQTick {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: scale(1); }
}
.oa-qopt-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.oa-qopt-l {
  font-family: var(--oa-sans);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
}
.oa-qopt-h {
  font-family: var(--oa-sans);
  font-size: 13px;
  line-height: 1.5;
  color: var(--oa-faint);
}
.oa-qopt input:checked + .oa-qopt-box .oa-qopt-h { color: var(--oa-sub); }

.oa-quiz-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--oa-hair);
}
.oa-quiz-back,
.oa-quiz-restart {
  padding: 9px 16px;
  border: 1px solid var(--oa-hair);
  border-radius: 999px;
  background: transparent;
  color: var(--oa-sub);
  font-family: var(--oa-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .22s ease, color .22s ease;
}
.oa-quiz-back:hover,
.oa-quiz-restart:hover { border-color: var(--oa-orange); color: #fff; }
.oa-quiz-next {
  padding: 9px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--oa-orange);
  color: #fff;
  font-family: var(--oa-sans);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: opacity .22s ease, transform .22s ease;
}
.oa-quiz-next:hover:not(:disabled) { transform: translateX(2px); }
/* Disabled goes solid muted, never a faded orange — a translucent brand fill
   reads as a broken button. Same rule as the SPA's FILLED_DISABLED. */
.oa-quiz-next:disabled {
  background: #26272E;
  color: #6B7183;
  cursor: default;
}
.oa-quiz-hint {
  font-family: var(--oa-sans);
  font-size: 12.5px;
  color: var(--oa-faint);
}
.oa-quiz-next:disabled ~ .oa-quiz-hint { opacity: 1; }
.oa-quiz-next:not(:disabled) ~ .oa-quiz-hint { opacity: 0; }

/* --- the answer ----------------------------------------------------------- */
.oa-quiz-out { animation: oaQResIn .5s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes oaQResIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.oa-qres[hidden] { display: none; }
.oa-qres-eyebrow {
  margin: 0 0 10px;
  font-family: var(--oa-sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--oa-orange);
}
.oa-qres-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--oa-hair);
}
.oa-qres-name {
  margin: 0;
  font-family: var(--oa-sans);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.7px;
  color: #fff;
}
.oa-qres-cat {
  margin: 5px 0 0;
  font-family: var(--oa-sans);
  font-size: 13.5px;
  color: var(--oa-faint);
}
.oa-qres-price { margin: 0; white-space: nowrap; }
.oa-qres-price .amt {
  font-family: var(--oa-sans);
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #fff;
}
.oa-qres-price .per {
  font-family: var(--oa-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--oa-faint);
}
.oa-qres-why {
  margin: 16px 0 0;
  font-family: var(--oa-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--oa-sub);
}
.oa-qres-items { margin: 16px 0 0; padding: 0; list-style: none; }
.oa-qres-items li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  font-family: var(--oa-sans);
  font-size: 14.5px;
  color: var(--oa-sub);
}
.oa-qres-items li:last-child { border-bottom: 0; }
.oa-qres-items .amt { font-weight: 700; color: #fff; white-space: nowrap; }
.oa-qres-who,
.oa-qres-addon {
  margin: 16px 0 0;
  font-family: var(--oa-sans);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--oa-faint);
}
.oa-qres-who b,
.oa-qres-addon b { color: var(--oa-sub); font-weight: 700; }
.oa-qres-addon {
  padding: 12px 14px;
  border: 1px dashed rgba(254, 124, 16, .32);
  border-radius: 12px;
}
.oa-qres-ctas {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.oa-qres-see {
  font-family: var(--oa-sans);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--oa-sub);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.oa-qres-see:hover { color: var(--oa-orange); border-bottom-color: var(--oa-orange); }
.oa-qres-alt {
  margin: 22px 0 16px;
  padding-top: 18px;
  border-top: 1px solid var(--oa-hair);
  font-family: var(--oa-sans);
  font-size: 13px;
  line-height: 1.6;
  color: var(--oa-faint);
}


/* ===========================================================================
   THE POPUP
   ---------------------------------------------------------------------------
   A native <dialog>, which is what makes this shorter than the overlay it
   replaces: the top layer, the backdrop, Escape-to-close, focus containment
   and the modal semantics all come from the element. The RevenueHunt overlay
   this supersedes had to be taught Escape and a dialog role by hand, and its
   backdrop click left the page permanently scroll-locked.

   The panel is the near-black canvas and the finder's own card sits inside it
   — the same two-tone hierarchy the pricing page uses (#030304 page, #111218
   card), so the popup reads as a slice of that page rather than a new surface.
   =========================================================================== */

.oa-chooser {
  width: min(760px, 100vw - 40px);
  max-width: none;
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--oa-hair);
  border-radius: 22px;
  background: var(--oa-ink);
  color: var(--oa-sub);
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .3),
    0 40px 90px -30px rgba(0, 0, 0, .85),
    0 0 90px -34px rgba(254, 124, 16, .45);
}

.oa-chooser::backdrop {
  background: rgba(3, 3, 4, .62);
  -webkit-backdrop-filter: blur(10px) saturate(118%);
  backdrop-filter: blur(10px) saturate(118%);
}

.oa-chooser[open] { animation: oaChooserIn .42s cubic-bezier(.22, 1, .36, 1) both; }
.oa-chooser[open]::backdrop { animation: oaChooserVeil .26s ease both; }

@keyframes oaChooserIn {
  from { opacity: 0; transform: translateY(22px) scale(.975); }
  to   { opacity: 1; transform: none; }
}
@keyframes oaChooserVeil { from { opacity: 0; } to { opacity: 1; } }

/* The panel scrolls, not the dialog: keeping the scroll container inside means
   the rounded corners never clip a scrollbar and the close button can stay
   pinned to the panel rather than scrolling away with the content. */
.oa-chooser-panel {
  position: relative;
  max-height: min(88vh, 900px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 34px 34px 30px;
}

/* The theme styles every bare <button> on the site — 15px/35px padding, an 8px
   radius and a near-black fill — and inside /pricing/ the Elementor document
   held that off. In the footer the popup has no such shelter, so the close
   control was rendering as a 70px grey slab with its icon squashed to zero
   width. Hence the doubled selector and the !importants: they are aimed at
   theme rules that are more specific than a single class, not at anything in
   this file. */
.oa-chooser .oa-chooser-x {
  position: sticky;
  top: 0;
  float: right;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px !important;
  min-width: 0;
  height: 40px !important;
  margin: -8px -8px 0 0;
  padding: 0 !important;
  border: 1px solid var(--oa-hair) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .05) !important;
  color: var(--oa-sub);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
/* flex: none — the icon is a flex item here, and the theme's `svg { width:auto }`
   let it shrink to nothing rather than hold its box. */
.oa-chooser .oa-chooser-x svg {
  flex: none;
  width: 17px !important;
  height: 17px !important;
}
.oa-chooser .oa-chooser-x:hover {
  background: var(--oa-orange) !important;
  border-color: var(--oa-orange) !important;
  color: #fff;
  transform: rotate(90deg);
}
/* An orange ring on an orange control is invisible — white, as everywhere else. */
.oa-chooser .oa-chooser-x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.oa-chooser-head { text-align: center; }

.oa-chooser-kicker {
  margin: 0 0 10px;
  font-family: var(--oa-sans);
  font-size: var(--oa-fs-micro);
  font-weight: 800;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--oa-orange);
}
.oa-chooser-t {
  margin: 0 0 10px;
  font-family: var(--oa-sans);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.7px;
  color: var(--oa-txt);
}
.oa-chooser-deck {
  margin: 0 auto;
  max-width: 46ch;
  font-family: var(--oa-sans);
  font-size: var(--oa-fs-lead);
  line-height: var(--oa-lh-body);
  color: var(--oa-faint);
}

/* Inside the popup the finder is the whole point, so it loses the top margin
   it needs as one section among many on /pricing/. */
.oa-chooser .oa-quiz { margin-top: 22px; }

@media (max-width: 640px) {
  .oa-chooser {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .oa-chooser-panel {
    max-height: 100dvh;
    padding: 22px 18px 26px;
  }
  .oa-chooser .oa-quiz-form,
  .oa-chooser .oa-quiz-out { padding: 20px 18px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .oa-chooser[open],
  .oa-chooser[open]::backdrop { animation-duration: .01ms !important; }
  .oa-chooser-x:hover { transform: none; }
}