:root { --ease: cubic-bezier(.22,.61,.36,1); }
html,body{ -webkit-font-smoothing:antialiased !important; text-rendering:optimizeLegibility !important; }

/* Belt-and-suspenders alongside the native `hidden` attribute on
   #resumeBanner/#funnel in the markup: guarantees they stay display:none
   even if something else on the page (theme/page-builder CSS) has its
   own div{display:...} rule that would otherwise fight the browser's
   built-in [hidden] styling. This rule lives in funnel.css, not
   Tailwind's runtime-generated stylesheet, so it's active as soon as
   this file's <link> is parsed — no JS execution required — closing the
   flash-of-unstyled-content window where the resume banner could
   otherwise render visible (at the very top of the page) before
   Tailwind's JIT finishes injecting its own .hidden{display:none} rule. */
#resumeBanner[hidden], #funnel[hidden]{ display:none !important; }

/* landing background */
#landing{
  background:
    radial-gradient(1100px 620px at 90% -10%, #eaf1ff 0%, rgba(234,241,255,0) 60%),
    radial-gradient(820px 480px at 2% 2%, #f5f9ff 0%, rgba(245,249,255,0) 58%),
    linear-gradient(180deg,#ffffff 0%,#fbfcfe 55%,#f6f8fc 100%) !important;
}
/* funnel background */
#funnel{ background:#f2f3f5 !important; }

.fade-in{ animation:fadeIn .5s var(--ease) both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.scr{ animation:scrIn .42s var(--ease) both; }
.scr[data-dir="back"]{ animation-name:scrInBack; }
@keyframes scrIn{ from{opacity:0; transform:translate3d(16px,4px,0)} to{opacity:1; transform:none} }
@keyframes scrInBack{ from{opacity:0; transform:translate3d(-16px,4px,0)} to{opacity:1; transform:none} }

.rise{ animation:rise .38s var(--ease) both; }
@keyframes rise{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* option card (big selectable rows) */
.opt{ transition:border-color .18s var(--ease), box-shadow .22s var(--ease), background-color .18s var(--ease), transform .16s var(--ease) !important; cursor:pointer !important; }
.opt:hover{ transform:translateY(-1px) !important; }
.opt[aria-checked="true"]{ border-color:#2563eb !important; background:#f7faff !important; box-shadow:0 0 0 4px rgba(37,99,235,.12) !important; }
.opt:focus-visible{ outline:2px solid #2563eb !important; outline-offset:3px !important; }
.opt-chev{ transition:transform .18s var(--ease) !important; }
.opt:hover .opt-chev{ transform:translateX(3px) !important; }

/* fields */
.field{ width:100% !important; border-radius:.85rem !important; border:1.5px solid transparent !important; background:#f4f5f7 !important;
  padding:.8rem .9rem !important; font-size:1rem !important; color:#0f1729 !important; line-height:normal !important; box-shadow:none !important;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease) !important; }
.field::placeholder{ color:#9aa2b1 !important; opacity:1 !important; }
.field:hover{ background:#eef0f3 !important; }
.field:focus{ outline:none !important; background:#fff !important; border-color:#2563eb !important; box-shadow:0 0 0 4px rgba(37,99,235,.12) !important; }
.field.ok{ background:#f2fbf6 !important; border-color:#bfe6d0 !important; }
.field.bad{ background:#fff6f6 !important; border-color:#f2b8b8 !important; }
select.field{ appearance:none !important; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round'><path d='m6 9 6 6 6-6'/></svg>") !important; background-repeat:no-repeat !important; background-position:right .8rem center !important; background-size:1rem !important; padding-right:2.3rem !important; }

/* searchable select (searchSelectField in funnel.js)
   The trigger is a <button> carrying .field so it inherits the exact
   look of a real input; these rules only undo what a theme's own button
   styling would otherwise impose on it. The theme's button rules are the
   reason each one needs !important, same as everything else in here. */
/* .ss-wrap only anchors the absolutely-positioned menu. Deliberately no
   z-index: raising the trigger itself would also raise it while CLOSED,
   and it would then paint over the sticky header on scroll. Stacking is
   handled one level up, on .ss-open, and only while the menu is open. */

/* Goes on the .rise block holding an OPEN dropdown.
 *
 * .rise animates transform (translateY(10px) -> none). While that animation
 * runs the element has a non-none transform, which makes it a stacking
 * context, and a stacking context traps every z-index inside it. So the
 * menu's z-50 stops meaning "50 on the page" and becomes "50 within this one
 * block", while the block itself sits at the default level. The Continue
 * button is later in the DOM and, while disabled, gets a stacking level of
 * its own from opacity:.45 — so it wins and paints over the open list.
 *
 * Not a one-off during the reveal, either: refresh() rewrites the whole of
 * #blocksWrap on open and on every keystroke, so the animation restarts each
 * time and the trap is re-armed continuously.
 *
 * Both halves are needed. z-index lifts the block above the CTA, and
 * animation:none stops it re-animating (and re-trapping) while open, which
 * also kills the flicker of the list fading in again on every character.
 *
 * 10 is chosen to sit above the CTA but below the sticky header (z-20) and
 * the idle / AI modals (z-40) — the idle timer can fire while a dropdown is
 * open, since sitting on one is exactly what "idle" looks like. */
.ss-open{ position:relative !important; z-index:10 !important; animation:none !important; }
.ss-btn{ appearance:none !important; -webkit-appearance:none !important; cursor:pointer !important;
  text-align:left !important; font-weight:400 !important; text-transform:none !important; letter-spacing:normal !important;
  min-height:auto !important; height:auto !important; }
.ss-btn:focus{ outline:none !important; background:#fff !important; border-color:#2563eb !important; box-shadow:0 0 0 4px rgba(37,99,235,.12) !important; }
/* The menu is absolutely positioned and must paint over whatever block
   renders below it — without this the answer that block reveals as you
   pick would draw on top of the list. */
.ss-menu{ box-shadow:0 1px 2px rgba(15,23,41,.05), 0 18px 40px -16px rgba(15,23,41,.28) !important; }
/* Opened upward, when there is not enough room below the field. Set by
   sizeOpenMenus(). Two class selectors so it outranks Tailwind's own
   .top-full / .mt-1\.5, which are also !important. */
.ss-menu.ss-up{ top:auto !important; bottom:100% !important; margin-top:0 !important; margin-bottom:.375rem !important; }
/* Keeps momentum scrolling inside the list on iOS rather than handing the
   gesture to the page, which has nothing left to scroll. */
.ss-list{ -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; }
/* Put on every clipping ancestor of an OPEN dropdown, and only while one
   is open — see toggleMenuClipEscape() in funnel.js. The funnel card
   clips to its rounded corners, which was silently cutting the bottom
   off a long list (and those rows could not be scrolled to, because the
   list itself was not overflowing). Nothing else in the card overflows,
   so dropping the clip while a menu is open costs nothing visually.

   The selector is doubled for the same reason .ss-menu.ss-up is: the
   class being overridden is Tailwind's own .overflow-hidden, which is
   also !important (important:true in the build config) and is loaded
   AFTER this file, so a single class would tie on specificity and lose
   on source order. */
.ss-clip-escape.ss-clip-escape{ overflow:visible !important; }
.ss-item{ appearance:none !important; border:0 !important; background:transparent !important; cursor:pointer !important;
  font-weight:400 !important; text-transform:none !important; letter-spacing:normal !important; min-height:auto !important; }
.ss-item:hover{ background:#f8fafc !important; }

.lbl{ display:block !important; font-size:.9rem !important; font-weight:700 !important; color:#0f1729 !important; margin-bottom:.45rem !important; margin-top:0 !important; }
.lbl .req{ color:#ef4444 !important; }
.hint{ margin-top:.5rem !important; margin-bottom:0 !important; font-size:.82rem !important; color:#94a0b1 !important; }
.microlbl{ font-size:.72rem !important; font-weight:600 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:#8b93a3 !important; margin-bottom:.3rem !important; margin-top:0 !important; display:block !important; }

/* primary button */
.btn{ transition:transform .15s var(--ease), box-shadow .2s var(--ease), background-color .16s var(--ease), opacity .2s !important; cursor:pointer !important; text-decoration:none !important; }
.btn:hover{ transform:translateY(-1px) !important; }
.btn:active{ transform:translateY(0) scale(.995) !important; }
.btn:disabled{ opacity:.45 !important; cursor:not-allowed !important; transform:none !important; box-shadow:none !important; }
.btn:focus-visible, a:focus-visible, .opt:focus-visible, .tile:focus-visible{ outline:2px solid #2563eb !important; outline-offset:2px !important; }

.barfill{ transition:width .5s var(--ease) !important; }

/* summary chip (collapsed field) */
.sum{ transition:background-color .2s var(--ease) !important; cursor:pointer !important; }

/* passport books */
.book{ position:relative !important; border-radius:7px 10px 10px 7px !important;
  background:linear-gradient(150deg,#26407e 0%,#182c5c 55%,#101d40 100%) !important;
  box-shadow:0 22px 42px -16px rgba(9,16,40,.6), inset 0 0 0 1px rgba(255,255,255,.08) !important;
  transition:transform .5s var(--ease) !important; }
.book::before{ content:"" !important; position:absolute !important; inset:0 auto 0 0 !important; width:7px !important; border-radius:7px 0 0 7px !important;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.12)) !important; }
.book::after{ content:"" !important; position:absolute !important; top:6px !important; bottom:6px !important; right:-3px !important; width:4px !important; border-radius:2px !important;
  background:linear-gradient(90deg,#d8d2c4,#fffdf7 45%,#cec7b6) !important; }
.gold{ color:#d8b978 !important; }

/* toggle Yes/No */
.yn{ transition:background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease) !important; cursor:pointer !important; }

/* Commas (Fanbasis) checkout widget mount point */
#commas-checkout-element{ min-height:520px !important; overflow:visible !important; }
#commas-checkout-element iframe{ width:100% !important; min-height:520px !important; border:0 !important; }
.checkout-loading{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:520px !important; color:#94a0b1 !important; font-size:.88rem !important; }

/* resume-abandoned banner */
#resumeBanner{ transition:opacity .2s var(--ease), transform .2s var(--ease) !important; }

/* Every accordion/review-card link-styled action text (the funnel's own
   "Change" / "Tap to change" / "Edit" buttons on .sum rows and rrow-value
   cells) — WordPress themes very commonly set a global `a{color}` or
   `button{color}` rule, which otherwise wins over these since they're
   plain elements without their own per-instance Tailwind color class. */
.sum .text-brand-600,
.rrow-value button,
.edit-field, .edit-field-inline,
.open-ai-fix,
button[class*="text-brand"] { color:#3c82f5 !important; }

/* ...and strip the CHASSIS off those same buttons, not just recolour the
   text. Setting only `color` fixed half the problem and left the other
   half looking worse: a theme that paints every <button> with a solid
   brand background (this one does) turned "Add apartment, suite, or unit"
   into a filled blue slab with brand-blue text on it — unreadable, and
   indistinguishable from the real Continue call to action right below it.

   Scoped by the absence of a bg-* class so it can only ever hit the
   link-styled buttons. The genuinely filled ones — the .yn choice tiles,
   which carry both text-brand-600 and bg-brand-50/50 when selected — name
   their own background and are excluded by construction rather than by a
   list of ids that would need maintaining every time one is added.

   The :hover/:focus/:active copies earn their place: a tapped button on
   iOS holds its focus state until something else is touched, so a theme
   rule like `button:focus{background:...}` repaints the slab the instant
   the visitor uses the control and then leaves it that way. That is the
   state the bug was reported in. */
#funnel button[class*="text-brand"]:not([class*="bg-"]),
#funnel button[class*="text-brand"]:not([class*="bg-"]):hover,
#funnel button[class*="text-brand"]:not([class*="bg-"]):focus,
#funnel button[class*="text-brand"]:not([class*="bg-"]):active {
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  min-height:0 !important;
  width:auto !important;
  border-radius:0 !important;
  text-transform:none !important;
  letter-spacing:normal !important;
  -webkit-tap-highlight-color:transparent !important;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}