/*
@@@ 2026.08.14-32  custom-front.css  (gifting payment button element)
- Moved the gifting payment-control guard from input[type="submit"] to the
  button[type="submit"] element now used by plus-account-gifting.php, matching
  the proven plus-info.php fix for Vuexy Waves' input-wrapper bug.

@@@ 2026.08.14-31  custom-front.css  (gifting panel + payment control fix)
- Raised the gifting-panel body selector above older card-body rules so every
  first control clears its header divider at desktop and mobile widths.
- Neutralized article-heading decoration inside gifting card headers and made
  the Braintree form's native submit input render its label and approved
  light-blue button surface explicitly in every interaction state.

@@@ 2026.08.14-30  custom-front.css  (Plus gifting checkout)
- Added a focused, page-scoped checkout treatment for plus-account-gifting.php:
  readable intro, quiet bonus callout, plain bordered promo/payment panels,
  restrained price badge, approved light-blue actions, and white form fields.
- Added comfortable field spacing, responsive CAPTCHA/payment containment,
  mobile stacking, dark-theme surfaces, and print-safe panel behavior without
  changing shared chrome or payment components elsewhere.

@@@ 2026.08.14-29  custom-front.css  (inline FAQ tag pills)
- Returned the compact FAQ tag pills above the tag-page article list without a
  surrounding panel, using the approved light-blue selected/label states.
- Added the quiet horizontal divider requested beneath the pills; article and
  sidebar styling remain unchanged.

@@@ 2026.08.14-28  custom-front.css  (FAQ tag pills returned to sidebar)
- Removed the one-off main-column tag-filter styling. FAQ tag pages now use
  the same article-list treatment and full shared sidebar as category pages,
  including the existing compact tag pills Jeff preferred.

@@@ 2026.08.14-27  custom-front.css  (FAQ tag pages)
- Added faq-tags.php to the approved FAQ category/article layout system with
  raised article cards, desktop-sticky shared navigation, and sidebar tabs.
- Styled the tag cloud as a quiet filter surface with compact count badges and
  the approved #5c9acf selected state instead of Vuexy's darker primary blue.

@@@ 2026.08.14-26  custom-front.css  (FAQ article category-link weight)
- Returned the category link inside the article information row to normal
  font weight. Sidebar, article-body, tag, and other link weights are unchanged.

@@@ 2026.08.14-25  custom-front.css  (FAQ article header combination)
- Removed the now-unused in-card article-title hook after returning the exact
  question h1 above the white card. The preferred unboxed inline article-info
  row and divider from @2026.08.14-24 remain unchanged.

@@@ 2026.08.14-24  custom-front.css  (original FAQ article header)
- Restored the original in-card article-title treatment, simple subtitle rule,
  unboxed inline metadata row, and divider requested by Jeff.
- The refined answer typography, supporting sections, sticky sidebar, tabs,
  responsive layout, dark theme, and print behavior remain unchanged.

@@@ 2026.08.14-23  custom-front.css  (FAQ article pages)
- Added the article-page companion to the approved FAQ category treatment:
  exact-question title zone, quiet subtitle and metadata surfaces, readable
  answer typography, supporting section headings, media, keywords, resources,
  tags, and desktop-sticky sidebar behavior.
- Reused the approved Popular / Recent sidebar tab presentation with responsive,
  dark-theme, reduced-motion, and print handling.

@@@ 2026.08.14-22  custom-front.css  (FAQ category title + sidebar tabs)
- Returned category breadcrumbs and the concise category h1 to the shared
  title zone above the white page card, matching the other exterior pages.
- Added a raised, accessible Popular / Recent FAQ tab panel to the existing
  sticky sidebar with approved light-blue links and compact metadata.

@@@ 2026.08.14-21  custom-front.css  (FAQ category pages)
- Consolidated faq-categories.php to one concise content h1, retained visible
  breadcrumbs, and added readable raised article cards with restrained metadata.
- Added desktop-sticky FAQ navigation plus responsive, dark, reduced-motion,
  and print behavior using the approved light brand-blue palette.

@@@ 2026.08.14-20  custom-front.css  (FAQ payoff-path hero)
- Replaced the template help-center backdrop with an original responsive
  planning-grid/payoff-path treatment using the approved brand blues.
- Added restrained light/dark hero surfaces and mobile positioning while
  preserving the existing search-first hierarchy and navbar geometry.

@@@ 2026.08.14-19  custom-front.css  (FAQ featured-card depth)
- Restored the approved flame and sparkles header tiles in New & Popular and
  strengthened the cards' soft white surface, border, and drop shadow to match
  the reference. Other FAQ sections and all shared card styles are unchanged.

@@@ 2026.08.14-18  custom-front.css  (FAQ landing hub)
- Added a page-scoped help-center hierarchy for faq.php: clearer hero/search,
  compact featured answers, two-column category navigation with readable link
  lists, restrained video/tag treatments, contact fallback, dark mode, mobile,
  and print behavior. Uses the approved light brand blue throughout.

@@@ 2026.08.14-17  custom-front.css  (auth action button color)
- Replaced the authentication pages' older deep-blue primary button override
  with the approved #5c9acf brand blue and #4b88bb hover treatment. Login,
  logoff, lost-password, and reset-password now match the approved form style.

@@@ 2026.08.14-16  custom-front.css  (sitewide white form fields)
- Promoted the approved white light-theme input treatment from new-user.php
  to every exterior form-control and form-select, including focus state.
  Dark-theme fields remain on Vuexy's theme-aware surface.

@@@ 2026.08.14-15  custom-front.css  (test-drive breathing room)
- Increased the test-drive panel's effective desktop top gap to roughly three
  times its prior size and matched the bottom gap; retained a tighter mobile
  treatment so the single action remains easy to reach on small screens.

@@@ 2026.08.14-14  custom-front.css  (test-drive action panel)
- Applied the approved neutral form-panel language to test-drive.php: centered
  readable shell, plain bordered header, full-width brand-blue demo action,
  restrained reassurance copy, and responsive spacing in both themes.

@@@ 2026.08.14-13  custom-front.css  (signup form + modal polish)
- Removed the signup form's blue top accent, restored white light-theme input
  backgrounds, and normalized exterior modal close buttons inside their
  headers so Vuexy's offset treatment can no longer be cropped.

@@@ 2026.08.14-12  custom-front.css  (direct signup-page targeting)
- Retargeted the original-style signup spacing directly to the page's durable
  udi-signup-page hook. This removes the extra-class dependency and makes the
  deployment fingerprint unmistakable while leaving every other page alone.

@@@ 2026.08.14-11  custom-front.css  (original-style signup spacing)
- Restored the new-user page's original desktop breathing room and usable
  column width by removing its nested container constraint, adding generous
  top/bottom spacing, and slightly relaxing form-group and supporting-copy gaps.
- Returned the signup callouts, CAPTCHA refresh control, panel shadow, and
  button shades to the cleaner original treatment. Mobile remains compact and
  all other exterior pages are unchanged through the udi-signup-spacious scope.

@@@ 2026.08.14-10  custom-front.css  (live-scale promo bar)
- Restored the promo strip to the lighter #5c9acf brand blue used by the live
  site instead of the deeper #3d6689 treatment.
- Reduced vertical padding from .5rem to .375rem, promo copy from .8125rem to
  .75rem, letter spacing from .3px to .2px, and the star to the same compact
  scale. Navbar geometry and every other shared-chrome rule are unchanged.

@@@ 2026.08.14-9  custom-front.css  (overwhelmed-page icon + link cleanup)
- Removed the vacated intro/CTA icon columns on feeling-overwhelmed-with-debt
  after its two decorative boxed icons were retired.
- Locked that page's ordinary light-theme links to the approved #5c9acf logo
  blue with #4b88bb hover; dark-theme lifted link colors remain unchanged.

@@@ 2026.08.14-8  custom-front.css  (exterior-wide link color)
- Standardized ordinary light-theme links across the redesigned exterior on
  the lighter #5c9acf logo blue, with #4b88bb on hover.
- Updated both the Bootstrap link variables and the editorial article override;
  buttons, headings, icons, navigation, and lifted dark-theme links are unchanged.

@@@ 2026.08.14-7  custom-front.css  (Undebt.AI media + link color)
- Left-aligned the Undebt.AI setup screenshot.
- Restored Undebt.AI article links to the lighter #5c9acf brand blue used by
  the previous page; the accessible lifted dark-theme link color is retained.

@@@ 2026.08.14-6  custom-front.css  (Debt Blaster media refinement)
- Left-aligned the standalone Debt Blaster setup screenshot.
- Kept both two-column comparison layouts while removing their outer bordered
  card frames; screenshots and explanatory copy remain paired and responsive.

@@@ 2026.08.14-5  custom-front.css  (YNAB screenshot alignment)
- Left-aligned standalone walkthrough screenshots on the YNAB sync page,
  matching the approved 52 Week Savings Challenge treatment.
- The hidden affiliate-tracking pixel and all other page layouts are unchanged.

@@@ 2026.08.14-4  custom-front.css  (savings screenshot alignment)
- Left-aligned standalone screenshots on the 52 Week Savings Challenge page.
  Its two-image setup grid and the other feature guides are unchanged.

@@@ 2026.08.14-3  custom-front.css  (feature-guide type scale)
- Reduced the four feature guides to the established exterior article scale:
  0.9375rem body copy, 1.375rem h2 headings, and 1.25rem h3 headings.
- Layout, spacing, screenshots, lists, comparisons, colors, responsive rules,
  and all earlier stylesheet history are unchanged.

@@@ 2026.08.14-2  custom-front.css  (feature-specific guide batch)
- Added a shared, page-scoped feature-guide presentation for Undebt.AI, YNAB
  syncing, the 52 Week Savings Challenge, and Debt Blaster.
- Uses the approved original-style gutters, readable article scale, normal
  opening copy, consistent ruled headings, responsive screenshot treatments,
  AI output, option lists, and before/after comparisons. Includes dark, phone,
  reduced-motion, and print behavior without changing shared chrome.

@@@ 2026.08.14-1  custom-front.css  (account + support page batch)
- Added coordinated, page-scoped layouts for new-user.php,
  new-user-welcome.php, lost-password.php, contact.php, and 404.php.
- Signup now has a focused value/form split; Welcome uses an onboarding
  sequence; password recovery reuses the approved authentication shell;
  Contact has a readable full form; and 404 has a restrained recovery layout.
- Includes durable button states, readable field/help text, dark theme,
  phone, reduced-motion, and print behavior without changing shared chrome.

@@@ 2026.08.13-9  custom-front.css  (login + logoff authentication pair)
- Added a shared, restrained authentication shell for login.php and logoff.php:
  readable form sizing, stronger field/action hierarchy, a quiet magic-link
  panel, coordinated completion alert, full-width Google action, durable hover
  states, and responsive/dark/print treatments.
- Page chrome and all authentication/session behavior remain outside this layer.

@@@ 2026.08.13-8  custom-front.css  (first three article-page gutters)
- Applied the same original-style full-card article measure and desktop inner
  gutter approved for the pricing and basic-page batches to the debt snowball,
  overwhelmed-by-debt, and how-it-works pages. Phone layouts keep native card
  padding. No component dimensions or typography were changed.

@@@ 2026.08.13-7  custom-front.css  (basic information-page batch)
- Added a restrained, shared layout for About, Support, Private Label, and
  Privacy Policy. The pages use the approved original-style gutters, larger
  article typography, normal opening paragraphs, and consistent section rules.
- Added page-scoped timeline galleries, support option cards, partnership
  sections, and legal-document hierarchy. Button states, dark mode, mobile,
  reduced-motion, and print behavior are included without changing the chrome.

@@@ 2026.08.13-6  custom-front.css  (authority-page original-style gutters)
- Restored the pricing/features/reviews page's original spatial rhythm: the
  article now uses the available card width with an additional 1.5rem inner
  gutter and modest top/bottom breathing room instead of the shared 68rem
  centered article cap. Phone layouts fall back to the card's native padding.

@@@ 2026.08.13-5  custom-front.css  (authority-page paragraph width)
- Removed the 72ch maximum from direct pricing/features/reviews paragraphs.
  They now use the full article content width, matching Jeff's instruction to
  keep the opening copy on the normal page flow without special formatting.

@@@ 2026.08.13-4  custom-front.css  (pricing/features/reviews authority page)
- Added a page-scoped layout for pricing-features-reviews.php: balanced tier
  cards, a concise pricing note, limitation cards, publication review grid,
  archive/media accordions, video cards, and testimonial cards.
- Keeps the opening paragraphs on the normal article scale by explicit project
  decision. Includes durable button states, dark theme, tablet/phone, reduced
  motion, and print behavior without touching review or product copy.
- Removed the now-unused udi-how-lead override after Jeff stripped the extra
  first-paragraph class from the deployed how-it-works page.

@@@ 2026.08.13-3  custom-front.css  (how-it-works intro + button states)
- Replaced the how-it-works intro panel treatment with a plain, comfortable
  reading measure and no decorative icon or tinted container.
- Explicitly fixed primary/outline button label colors for hover, focus, and
  active states; nested span/small labels now inherit the state color.

@@@ 2026.08.13-2  custom-front.css  (visual walkthrough + carousel)
- Added the scoped how-it-works layout: alternating screenshot/copy steps,
  Vuexy/Bootstrap carousel frames, payoff-method cards, video cards, and an
  advanced-feature grid. Carousels stay manual, touch-enabled, captioned,
  keyboard-operable, and responsive without another vendor dependency.
- Preserved the approved editorial type scale and added dark-theme, tablet,
  phone, reduced-motion, and print treatments for the new components.

@@@ 2026.08.13-1  custom-front.css  (shared editorial article system)
- Added the scoped udi-article component family for informational pages:
  readable line length/type scale, lead panels, key points, numbered steps,
  responsive tables, advisory callouts, CTA panels, and FAQ treatment.
- Includes dark-theme and phone layouts; shared chrome, calculator engines,
  homepage components, and existing generic page-card rules are untouched.

@@@ 2026.08.12-7  custom-front.css  (homepage readability typography)
- Raised the real homepage content to a comfortable reading baseline: proof
  labels, step/benefit titles and descriptions, supporting details, reviews,
  Plus copy, and section headings now follow the larger Vuexy frontend scale.
- Kept the CSS-built dashboard and laptop microcopy intentionally miniature;
  those elements are product-image placeholders rather than reading content.

@@@ 2026.08.12-6  custom-front.css  (proof-bar icon alignment)
- Gave every Font Awesome proof icon a fixed, centered flex slot. Font Awesome
  glyphs have different advance widths, so relying on each icon's intrinsic
  width let the infinity, calendar, and chart spill into their value text.
- Added responsive slot widths while preserving the approved icon sizes.

@@@ 2026.08.12-5  custom-front.css  (Font Awesome solid homepage icons)
- Retuned homepage icon boxes for Font Awesome's denser solid glyphs and
  restored compact grid tracks. This supersedes the oversized Tabler-box
  compensation in @2026.08.12-4 while keeping the symbols visually stronger.
- Tablet and phone sizes remain independently constrained.

@@@ 2026.08.12-4  custom-front.css  (visible icon scale correction)
- Increased the homepage proof, step, benefit, and Plus glyph boxes again
  after Firefox confirmed the 2026.08.12-3 rules were loading correctly.
  Iconify's Tabler SVGs occupy only part of their 24x24 viewBox, so the prior
  em sizes produced a much smaller visible drawing than their CSS box implied.
- Widened the corresponding grid columns and added tablet/phone reductions so
  desktop icons read clearly without crowding stacked mobile cards.

@@@ 2026.08.12-3  custom-front.css  (calculator removal + device/icon refinement)
- Removed the homepage estimator from the rendered flow and retuned the
  features section to follow the overlapping proof bar directly.
- Rebuilt the hero laptop chassis with a thicker display bezel, camera/chin,
  hinge, aluminum deck, trackpad, front lip, and stronger grounded shadow.
- Increased homepage proof, step, benefit, and Plus-list icons. The scoped
  declarations intentionally use !important to beat Vuexy's global
  .icon-base font-size utility without changing icons elsewhere.

@@@ 2026.08.12-2  custom-front.css  (homepage redesign)
- Added the mobile-first homepage component set used by index.php
  @2026.08.12-3: split hero, CSS product placeholders, proof tiles, compact
  estimator, three-step cards, feature grid, testimonials, Undebt.it+
  placeholder grid, and final CTA.
- All new pairings stay inside the documented brand roles in light and dark:
  #5c9acf for graphics/fills, #3d6689 for text on light surfaces,
  #7fb3dd/#a8cbe8 for text on dark surfaces, and #161823 for the CTA.
- Added phone-width debt-card layout and full-width touch targets. Shared
  promo, navbar, page-card, calculator-engine, and footer rules are unchanged.

@@@ 2026.08.10-6  custom-front.css  v22  (bump head include to ?v=22)
- CARD HEADER, FINAL (Jeff: "it might work if you can get rid of that
  horizontal line"): the header's border-bottom divider is REMOVED — the
  2px accent top edge carries the panel identity alone, and the header
  title now sits directly over the body content. Everything else from v21
  stands (accent edge, transparent cap, tightened cap padding, heading
  color, fw 500). NOTE: the line between the PayPal button and Card Number
  inside the payment panel is Braintree's own field separator inside its
  iframe — not ours to remove.

@@@ 2026.08.10-5  custom-front.css  v21  (bump head include to ?v=21)
- CARD HEADER, TAKE TWO (Jeff: v20's tint "looks pretty bad with the
  padding" — it filled the header's full padding box and turned the top of
  each card into a gray slab). SUPERSEDES v20's band. New treatment, depth
  from structure instead of fill:
  * headered cards get the chrome's EXISTING accent language — the footer's
    2px #5c9acf top edge (v16 pattern) on the card's top border;
  * header itself: transparent, divider below, heading color, fw 500, and
    vertical padding tightened via --bs-card-cap-padding-y (the slab was
    half padding);
  * scoped with :has(> .card-header) so ONLY titled panels get the accent
    edge — plain cards (trial promo bg-primary, gift card) are untouched.
- v20's rule block replaced in place; its changelog entry stands as history.

@@@ 2026.08.10-4  custom-front.css  v20  (bump head include to ?v=20)
- CARD HEADER BAND (Jeff: "add some kind of a header style to these cards
  like the live page has" — the Canvas panels' tinted heading strip).
  Exterior card-headers get a tinted band + divider. The tint is
  var(--bs-body-bg) — the page's own tinted backdrop color — NOT the fixed
  --udi-surface-tint hex, so the band adapts by itself when the dark-theme
  toggle flips (a hardcoded light tint would glow on dark cards). Scoped
  under .udi-page-card: hits the plus-info promo + payment panels Jeff
  pointed at, plus any other headered card inside the page card (FAQ
  family) for consistency; the hero/help-center ($page_card=false) are
  unreachable as ever. font-weight 500 + heading color echo the Canvas
  panel-heading feel.
- FOR THE RECORD (Jeff, this session): live plus-info's PayPal button is
  ALSO wordmark-less — pre-existing, parked for a future Braintree drop-in
  modernization item (v2 is deprecated; see plus-info @2026.08.10-2 notes).

@@@ 2026.08.10-3  custom-front.css  v19  (bump head include to ?v=19)
- H3 JOINS THE HEADING SCALE (Jeff: "adjust the H3 as well. I don't want it
  too small though"): .udi-page-card h3 -> 1.25rem. Vuexy's fluid h3
  reaches ~1.9rem at desktop; 1.25rem (20px) keeps a clear step below the
  1.375rem h2 while staying visibly larger than the 0.9375rem body. h4+
  untouched. Same scoping story as v18: the hero and help-center header
  live outside .udi-page-card and cannot be reached.
- .udi-media-shadow (Jeff: Canvas "had a nice drop shadow css class that
  could be added to media objects"): soft, wide-blur halo for screenshots
  and embeds — a media treatment, distinct from the crisp shadow-sm that
  stays on cards/UI. Slightly navy-tinted so it reads warm on the tinted
  body instead of gray. First consumers: plus-info @2026.08.10-3 (28
  content imgs + the lite-youtube wrapper). Reusable anywhere via the one
  class; deploy WITH plus-info @-3 or its media loses shadows entirely.

@@@ 2026.08.10-2  custom-front.css  v18  (bump head include to ?v=18)
- HEADING SCALE, EXTERIOR-WIDE (Jeff: "h1 & H2 text is too large"; CSS-only
  per his "don't rebuild all pages" constraint — zero page files touched).
  Vuexy's headings are FLUID: h1 grows to 2.875rem (46px) and h2 to
  ~2.375rem at >=1200px, which is landing-hero sizing applied to article
  pages. New fixed sizes, scoped so the homepage keeps its hero display
  sizing:
    .udi-title-zone h1/h2 -> 1.75rem  (the chrome's page titles; h2 covers
                                       FAQ subpages passing $page_h1_tag)
    .udi-page-card h1     -> 1.75rem  (faq-article's in-card article h1 —
                                       matches the zone so no page looks
                                       out of family)
    .udi-page-card h2     -> 1.375rem (in-card section headings)
  index.php and faq.php run $page_card=false and have no title zone, so
  the hero and help-center header are untouched by construction. h3+ left
  alone (Jeff named h1/h2 only). REQUIRES v5_exterior_header.php
  @2026.08.10-2 (adds the udi-title-zone class) — deploy together.

@@@ 2026.08.10-1  custom-front.css  v17  (bump head include to ?v=17)
- CALCULATOR ICON SHIM: the five calculator pages' inline engines (kept
  byte-identical per the port addendum) inject Canvas icon classes at
  runtime — icon-trash2 (remove-debt-row control) and
  icon-line-chevron-down ("Show all N months") — which have no glyphs on
  the Vuexy stack; the remove control rendered invisible. Unicode ::before
  glyphs restore them chrome-side with ZERO engine edits (flagged
  independently by two port verifications; 15 injection sites across the
  five pages).
- PRINT STYLESHEET (SEO contract §7.10 — the printables-gap play): sitewide
  @media print hides the chrome (promo bar, navbar, footer, breadcrumbs,
  buttons, lite-youtube facades) and interactive-only calculator controls
  (method toggle, slider, steppers, remove-row), flattens the page card,
  frees .table-responsive overflow so full schedules print, and keeps
  table rows from splitting across pages. Result: printing a calculator
  page yields the user's actual plan — metric cards + schedule — which no
  competitor in the printables citation set can match. Tip: click "Show
  all N months" before printing for the complete schedule (the engine
  controls row visibility).

@@@ 2026.08.09-16  custom-front.css  v16  (bump head include to ?v=16)
- FOOTER RE-KEYED TO THE BRAND DARK (Jeff: "the current purple shades of
  the footer don't match anything else on the site" — correct, #2f3349 /
  #282c3e were Vuexy's slate-purples, orphans on our palette):
  * .footer-top: #2f3349 -> #161823 — THE brand dark already carried by
    the navbar pill and the interior left menu. Page is now bookended top
    and bottom by the same color.
  * footer-bottom bar: #282c3e -> #0f111a — a darker sibling of #161823
    (same blue-leaning hue), preserving the "darker basement bar" pattern
    of the live Canvas footer Jeff likes.
  * NEW: 2px #5c9acf accent line on the footer's top edge (the offered
    option) — a crisp brand-blue separation from the tinted body. ONE
    LINE to remove if unwanted (the border-top declaration).
- Contrast audited (house practice): footer text white@.78 on #161823
  ~10:1 AA; hover white ~17:1; bottom text #d3d4dc on #0f111a ~12:1 AA.
  #5c9acf line is decorative (no text contrast requirement). Same colors
  serve light AND dark themes (footer darker than the dark body #25293c,
  matching how the interior menu sits).

@@@ 2026.08.09-15  custom-front.css  v15  (bump head include to ?v=15)
- FOOTER REWORK (Jeff): (1) rounded top corners squared — the template's
  3.75rem radius on .footer-top is gone; (2) the ~800KB footer-bg PNGs are
  retired (footer @2026.08.09-2 removed the <img>) and .footer-top now
  paints solid #2f3349 — the PNGs' actual measured color (pixel-sampled:
  flat #2f3349 slate, texture invisible at render; light/dark variants
  near-identical, so one color serves both themes). footer-bottom keeps
  the template's #282c3e. Colors unchanged from what Jeff approved; only
  the delivery mechanism changed (image -> css).
- NOTE: front-page.css defines --bs-footer-top-bg: #241d31 but never
  applies it (the PNG supplied the visible color) — deliberately NOT used
  here; #241d31 is Vuexy's purple family, not what renders today.

@@@ 2026.08.09-14  custom-front.css  v14  (bump head include to ?v=14)
- NEW: TINTED PAGE BACKGROUND (Jeff, depth pass — checkout-demo example).
  front-page.css sets body to paper-bg (flat white); the checkout/pricing
  demos run on the theme's body gray so paper cards visibly float. Body now
  uses var(--bs-body-bg): #f8f7fa light / #25293c dark — the SAME values the
  interior runs on, so interior/exterior read as one product. Equal-
  specificity body override; this sheet loads last and wins.
- Pairs with header @2026.08.09-6 + footer @2026.08.09-1: the chrome wraps
  page content in a paper card (.udi-page-card) — cards/boxes on the tint
  supply the depth. Full-bleed pages (index, faq, chrome-preview) opt out
  via $page_card = false and manage their own section backgrounds.

@@@ 2026.08.09-13  custom-front.css  v13  (bump head include to ?v=13)
- NEW: plus-info plans-comparison guard. front-page-pricing.css sets
  white-space:nowrap on the table's first column — fits the demo's short
  labels, but our feature names run long ("The warm, fuzzy feeling…") and
  nowrap would force a huge first column + horizontal scroll on phones
  (mobile is 55% of clicks, §2b — never trade mobile for desktop polish).
  Override: wrap normally, keep the vendor's start alignment, and give the
  column a sane minimum so it doesn't crush against the icon columns.

@@@ 2026.08.09-12  custom-front.css  v12  (bump head include to ?v=12)
- NEW: FAQ/help-center hero (faq.php on front-page-help-center.css): same
  tuck pattern as .landing-hero so the banner art reaches the top of the
  page behind the sticky nav (-5.5rem ≈ nav float padding + pill; retune
  together with the hero rule if the pill height changes). The template's
  first-section-pt (11.28rem) supplies the compensating padding — 5.5rem
  hidden behind the nav, ~5.8rem visible. Promo bar already stacks at
  z-index:2 (v11), so tuck overshoot stays harmless.
- .help-center-header .input-wrapper gains a soft shadow + the template's
  29rem cap loosened to 36rem on wide screens (search is the page's primary
  action for Goal 1/mobile users; larger touch target).

@@@ 2026.08.09-11  custom-front.css  v11  (bump head include to ?v=11)
- ROOT CAUSE FOUND (promo offset, rounds 2-3): the v9 hero tuck
  (margin-block-start: -5.5rem) is an ESTIMATE of nav height — at other
  zoom/font metrics the pill is shorter, the hero rises past the nav's top,
  and (being position:relative, later in DOM) paints its gradient OVER the
  promo bar's bottom edge — covering part of the band and pushing the
  visible text off-center. Verified: v10 css was live and correct
  (fetched from the server), yet the offset persisted -> not a style issue,
  an OVERLAY issue, and its onset coincided with the v9 tuck.
  FIX: promo bar gets position:relative + z-index:2 — it stacks above any
  hero overshoot (nav already stacks at 1075). Robust at every zoom level;
  any tuck excess now hides harmlessly behind the promo band.
  **Pattern-library candidate: negative-margin overlays must never rely on
  matched element heights — give every neighbor that must stay visible an
  explicit stacking level.**

@@@ 2026.08.09-10  custom-front.css  v10  (bump head include to ?v=10)
- CHANGED (Jeff: promo text "got a little offset" on the staged homepage):
  the promo bar now owns ALL of its geometry here — display:flex centered on
  both axes, explicit font-size/line-height, padding moved from markup
  utilities into this rule (utilities removed from the header markup, v4
  lesson). Removes every mis-centering candidate (inherited font sizing,
  baseline shift from the inline star icon, wrap asymmetry) in one shape.
  Root cause was not reproducible from the cropped screenshot — if any
  offset survives this, request a FULL-WIDTH screenshot before iterating.

@@@ 2026.08.09-9  custom-front.css  v9  (bump head include to ?v=9)
- FIXED (Jeff: hero "getting offset from the top"): in the demo the hero
  gradient runs BEHIND the transparent fixed navbar to the top of the page;
  our in-flow sticky nav left a white band above/beside the pill and the
  gradient started only below it. The hero now TUCKS UP under the nav:
  margin-block-start: -5.5rem (≈ nav height: 1rem float padding + ~4.5rem
  pill) + padding-block-start: 9.5rem (5.5rem hidden behind the nav + 4rem
  visual breathing room — this is why the template shipped 10.2rem, which v8
  wrongly trimmed to 4rem without understanding its job). Nav keeps z-index
  1075 so the pill floats ON the gradient, matching the demo. Scoped to
  .landing-hero — non-hero pages unaffected. If the pill height ever
  changes, retune the -5.5rem to match.

@@@ 2026.08.09-8  custom-front.css  v8  (bump head include to ?v=8)
- NEW: brand-blue hero treatment for pages using front-page-landing.css
  (homepage @2026.08.09-2). Overrides via the template's own hooks:
  * --bs-hero-bg: Vuexy lavender/pink -> brand surface wash
    (#e9ecf3 -> #d9e9f6; backgrounds-only role, per brand audit)
  * hero padding-block-start 10.2rem -> 4rem (the template assumed a FIXED
    overlay navbar; ours is sticky in-flow — 10.2rem doubles the gap)
  * hero-title gradient shine re-tinted to the blue family, light AND dark
    audited: light = #3d6689->#5c9acf->#7fb3dd on the pale wash; dark =
    lifted #5c9acf->#7fb3dd->#a8cbe8 on the template's #1e2130 dark hero
  * template's [data-bs-theme=dark] .landing-hero bg rule intentionally
    untouched (higher specificity, still wins in dark)

@@@ 2026.08.09-7  custom-front.css  v7  (bump head include to ?v=7)
- FIXED (Jeff, toolbar polish round): three issues, one root cause each:
  * ICON SPACING wider than interior: front-page.css inflates every
    .navbar-nav .nav-link with padding-inline .625rem + margin-inline-end
    .625rem — on btn-icon toggles that stacks onto the fixed button box.
    Neutralized (padding:0, margin-inline-end:0) so each toggle is the same
    compact circle as the interior navbar; li me-* utilities provide the
    small gaps.
  * BADGE DOT clipped to a half-moon: node-waves adds .waves-effect
    (overflow:hidden) to every .btn at runtime; the inflated box pushed the
    dot to the clipped edge. overflow:visible on the toggles + the padding
    fix restores interior geometry (dot sits inside the button box).
  * "Log Off" text was #3d6689 (the LIGHT-surface link blue via
    .btn-outline-primary) — illegible-dim on the dark pill. Scoped override:
    text = menu text color (white/.85, ~15:1), border stays brand #5c9acf
    (accent role), hover fills #5c9acf with white text (approved button pair).

@@@ 2026.08.09-6  custom-front.css  v6  (bump head include to ?v=6)
- CHANGED (Jeff): navbar pill matches the interior LEFT MENU color —
  #161823, sourced from interior custom.css line ~148 (--bs-menu-bg: #161823;
  the interior menu overrides core's #2f3349) and confirmed against Jeff's
  screenshot pixels. Logo elements that sank into #2f3349 now read correctly
  (top_logo.png was designed against this darker family).
- Hover/active accent upgraded #7fb3dd -> TRUE brand blue #5c9acf: on the
  darker #161823 it now passes AA for text (5.9:1 — it was 4.1:1 on #2f3349,
  which forced the lightened variant). Matches the interior menu's active
  gradient family (#4b7ba5 -> #5c9acf). New contrast set on #161823:
  base links white/.85 ~15:1; #5c9acf 5.9:1 AA.

@@@ 2026.08.08-5  custom-front.css  v5  (bump head include to ?v=5)
- Toolbar toggles now use the interior's btn-text-secondary btn-icon
  rounded-pill treatment (header @-4). Its default hover circle is a gray
  tuned for light navbars — muddy on the navy pill; hover/active circle
  re-tuned to translucent white here.

@@@ 2026.08.08-4  custom-front.css  v4  (bump head include to ?v=4)
- FIXED (with v5_exterior_header.php @-2): the v3 floating offset never
  rendered because the nav markup carried the py-0 UTILITY (padding !important
  in Bootstrap) — utility removed from markup; padding here is now explicit
  padding-block: 1rem 0 so this stylesheet owns the nav's vertical spacing
  outright (core/front-page.css padding, if any, is overridden both ends).

@@@ 2026.08.08-3  custom-front.css  v3  (bump head include to ?v=3)
- FIXED (screenshot #2, mega menu white-on-white): the v2 white link override
  used a DESCENDANT selector (.landing-nav-menu .navbar-nav .nav-link), which
  also matched the mega-dropdown panel links (they are .nav-link too) and beat
  front-page.css's lower-specificity base color. Now a direct-child chain
  (.landing-nav-menu > .navbar-nav > .nav-item > .nav-link) — white applies to
  the five top-level items ONLY; panel links return to template colors.
  Toolbar rule tightened to the same direct-child shape for symmetry.
- FIXED (screenshot #2, pill flush to top): the pill's 1rem offset was
  margin-block-start on .landing-navbar — child margins COLLAPSE out of the
  (transparent) sticky nav, so the gap rendered ABOVE the nav and vanished
  when stuck: pill pinned to the viewport edge. Offset moved to
  padding-block-start on nav.layout-navbar (padding cannot collapse; the gap
  now travels WITH the sticky element, matching the demo's floating look) and
  the pill's own margin zeroed.

@@@ 2026.08.08-2  custom-front.css  v2  (bump head include to ?v=2)
- NEW: sticky navbar (replaces layout-navbar-fixed, which painted the fixed
  navbar over the promo bar on first deploy). Sticky is in-flow: no overlap,
  no body-padding compensation, promo scrolls away, navbar pins.
- NEW: DARK NAVBAR (Jeff's call after first-run screenshot): navy pill from
  the Vuexy dark family (#2f3349) so top_logo.png sits on the background it
  was designed for (its ".it" is near-white — invisible on the light pill).
  Contrast audited per house practice:
    base links  rgba(255,255,255,.85) on #2f3349  ~10:1   AA
    hover/active #7fb3dd (brand blue lightened for dark text role) 5.5:1 AA
    #5c9acf raw on #2f3349 is 4.1:1 — below AA for text; stays reserved for
    button fills/icons (approved graphics role), never link text on navy
  Scoping: white link colors apply to the toolbar (all sizes) and to the
  expanded menu (>=992px only) — below lg the collapse panel keeps default
  paper-bg colors, so panel links stay dark-on-light. Inner close toggler
  keeps heading color; outer toggler forced white (it sits on the navy pill).

@@@ 2026.08.08-1  custom-front.css  (deploy to /app/assets/css/custom-front.css)
- NEW FILE v1: EXTERIOR overrides on stock Vuexy front-pages CSS. Sibling of
  the interior custom.css (which stays interior-only). Loaded last by
  v5_exterior_head.php with ?v=1 — BUMP THE ?v= on every edit.
- Brand colors follow the 2026-08 brand audit ROLES (contrast-driven):
    #5c9acf  brand blue  — graphics/accent only: buttons-with-white-text,
             icons, progress fills, borders (3.01:1 on white, NOT text-safe)
    #3d6689  text-safe deep blue — links/emphasis on light surfaces (AA);
             derived color-mix(in srgb, #5c9acf 66%, black)
    #e9ecf3  brand surface tint — backgrounds/wells/tracks only
- v1 scope is deliberately minimal: primary swap, link color, promo bar,
  navbar logo sizing. The full brand pass (dark-theme tuning, section
  accents) iterates HERE, never in vendor files.
- TODO (brand pass): dark-theme link/primary tuning under [data-bs-theme=dark];
  audit every new component pair light AND dark per house practice.
*/

/* ---- Brand primary: Vuexy purple -> Undebt.it blue (accent role) ---- */
:root,
[data-bs-theme="light"] {
  --bs-primary: #5c9acf;
  --bs-primary-rgb: 92, 154, 207;

  /* Jeff 2026-08-14: ordinary exterior links use the logo-blue accent. */
  --bs-link-color: #5c9acf;
  --bs-link-color-rgb: 92, 154, 207;
  --bs-link-hover-color: #4b88bb;
  --bs-link-hover-color-rgb: 75, 136, 187;

  /* brand surface tint available as a utility variable */
  --udi-surface-tint: #e9ecf3;
}

/* keep primary buttons legible: white text on #5c9acf is an approved
   graphics-role pair (buttons-with-white-text) per the brand audit */
.btn-primary {
  --bs-btn-bg: #5c9acf;
  --bs-btn-border-color: #5c9acf;
  --bs-btn-hover-bg: #4a8ac2;
  --bs-btn-hover-border-color: #4a8ac2;
  --bs-btn-active-bg: #3d6689;
  --bs-btn-active-border-color: #3d6689;
}
.btn-outline-primary {
  --bs-btn-color: #3d6689;            /* text-safe on light */
  --bs-btn-border-color: #5c9acf;     /* border = accent role */
  --bs-btn-hover-bg: #5c9acf;
  --bs-btn-hover-border-color: #5c9acf;
}

/* ---- Page background: tinted so paper cards float (depth pass 2026-08-09).
        front-page.css flattens body to paper-bg; the demos' depth comes from
        running on the theme body gray. Same variable the interior uses —
        light #f8f7fa / dark #25293c track automatically. ---- */
body {
  background-color: var(--bs-body-bg);
}

/* ---- Promo bar: compact live-site scale on the established brand blue.
        This rule owns ALL promo geometry — the markup carries NO layout
        utilities (v4 lesson). ---- */
.udi-promo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  background: #5c9acf;
  color: #ffffff;
  letter-spacing: 0.2px;
  text-align: center;
  /* stack ABOVE the hero: the landing-hero tuck (negative margin) can
     overshoot the nav at some zoom levels and would otherwise paint its
     gradient over this band (the "promo text offset" bug) */
  position: relative;
  z-index: 2;
}
.udi-promo-bar small {
  font-size: 0.75rem;
  line-height: 1.5;
}
.udi-promo-bar .udi-promo-link {
  color: #ffffff;
  text-decoration: underline;
}
.udi-promo-bar .icon-base {
  font-size: 0.75rem !important;
  vertical-align: -1px;
}

/* ---- Navbar: sticky (in-flow; replaces layout-navbar-fixed) ---- */
nav.layout-navbar {
  position: sticky;
  inset-block-start: 0;
  z-index: 1075;
  /* the floating offset: PADDING (not margin — margins collapse out of the
     sticky box and the pill pins flush to the viewport). Content scrolls
     behind this transparent gap, blurred by the template's navbar-active
     ::before, same as the demo. Requires the markup to carry NO py-* utility
     on the nav (utilities are !important and would beat this — v4 lesson). */
  padding-block: 1rem 0;
}
nav.layout-navbar .navbar.landing-navbar {
  margin-block-start: 0;   /* offset lives on the nav padding now */
}

/* ---- Navbar: navy pill (top_logo.png is a dark-background asset) ---- */
nav.layout-navbar .navbar.landing-navbar {
  --bs-front-navbar-bg: #161823;   /* = interior --bs-menu-bg (custom.css) */
  --bs-front-navbar-border-color: rgba(255, 255, 255, 0.08);
}
/* scrolled state: front-page.css navbar-active resets the pill to paper-bg
   (would put white links on white) — keep it menu-navy; custom-front.css
   loads last, so equal specificity wins here */
nav.layout-navbar.navbar-active .landing-navbar {
  background-color: #161823;
}

/* toolbar (theme/search/auth — TOP-LEVEL links only, on the pill at ALL
   sizes; direct-child chain keeps dropdown-panel content out) */
nav.layout-navbar .navbar.landing-navbar > .navbar-nav > .nav-item > .nav-link,
nav.layout-navbar .navbar.landing-navbar > .navbar-nav > li > .nav-link {
  color: rgba(255, 255, 255, 0.85);                 /* ~15:1 on #161823 */
}
nav.layout-navbar .navbar.landing-navbar > .navbar-nav > .nav-item > .nav-link:hover,
nav.layout-navbar .navbar.landing-navbar > .navbar-nav > .nav-item > .nav-link.active,
nav.layout-navbar .navbar.landing-navbar > .navbar-nav > .nav-item > .nav-link.show {
  color: #5c9acf;                                    /* 5.9:1 on #161823, AA */
}

/* expanded menu: white for the five TOP-LEVEL items only, >=lg only.
   Direct-child chain (> .navbar-nav > .nav-item > .nav-link) is the fix for
   the white-on-white mega panel: panel links are .nav-link too, but they sit
   deeper (inside .dropdown-menu) and no longer match — template colors
   apply there. Below lg the slide-in panel keeps default paper-bg colors. */
@media (min-width: 992px) {
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu > .navbar-nav > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.85);
  }
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu > .navbar-nav > .nav-item.show > .nav-link,
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu > .navbar-nav > .nav-item > .nav-link.show,
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu > .navbar-nav > .nav-item > .nav-link.active,
  nav.layout-navbar .navbar.landing-navbar .landing-nav-menu > .navbar-nav > .nav-item > .nav-link:hover {
    color: #5c9acf;
  }
}

/* icon-button toggles (theme/search/bell): the btn-text-secondary hover
   circle is tuned for light navbars — use translucent white on the navy */
nav.layout-navbar .navbar.landing-navbar > .navbar-nav > .nav-item > .nav-link.btn-text-secondary {
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.1);
  --bs-btn-active-bg: rgba(255, 255, 255, 0.14);
  --bs-btn-hover-color: #5c9acf;
  --bs-btn-active-color: #5c9acf;
}

/* toggle geometry = interior: front-page.css inflates .navbar-nav .nav-link
   with inline padding + end margin — on btn-icon that widens the circles and
   spreads the row; strip it so btn-icon's own box rules (compact circle).
   overflow:visible beats the runtime-added .waves-effect{overflow:hidden}
   which was clipping the badge dot into a half-moon. */
nav.layout-navbar .navbar.landing-navbar > .navbar-nav > .nav-item > .nav-link.btn-icon {
  padding: 0;
  margin-inline-end: 0;
  overflow: visible;
}

/* "Log Off" (outline button on the pill): text must match the menu text
   color — .btn-outline-primary's #3d6689 is the LIGHT-surface role and goes
   dim on #161823. Border keeps brand blue (accent role); hover = filled
   #5c9acf w/ white (approved button pair). */
nav.layout-navbar .navbar.landing-navbar > .navbar-nav .btn-outline-primary {
  --bs-btn-color: rgba(255, 255, 255, 0.85);
  --bs-btn-border-color: #5c9acf;
  --bs-btn-hover-bg: #5c9acf;
  --bs-btn-hover-border-color: #5c9acf;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: #3d6689;
  --bs-btn-active-color: #ffffff;
}

/* outer mobile toggler sits on the navy pill -> white; the INNER close
   toggler (inside the paper-bg panel) keeps its heading color */
nav.layout-navbar .navbar.landing-navbar > .navbar-brand .navbar-toggler .icon-base {
  color: #ffffff !important;   /* overrides the markup's text-heading utility */
}

.udi-nav-logo {
  height: 34px;
  width: auto;
}
.udi-nav-search {
  min-width: 320px;
}

/* ---- Accounts-due dropdown ---- */
.udi-accounts-due {
  min-width: 22rem;
  max-width: 92vw;
}

/* ---- Hero (pages loading front-page-landing.css): brand-blue wash ---- */
.landing-hero {
  /* stock: lavender->pink. Brand: surface tint -> soft blue (bg-only roles) */
  --bs-hero-bg: linear-gradient(138.18deg, #e9ecf3 0%, #d9e9f6 94.44%);
  /* tuck the gradient panel UP behind the sticky nav so it reaches the top
     of the page (demo look): -5.5rem ≈ nav float padding (1rem) + pill
     (~4.5rem). The compensating padding keeps content clear of the pill:
     5.5rem hidden + 4rem visible gap. Retune both together if the pill's
     height ever changes. */
  margin-block-start: -5.5rem;
  padding-block-start: 9.5rem;
}

/* ---- Calculator icon shim (v17): the byte-identical calculator engines
        inject these Canvas icon classes at runtime; Canvas font-icons.css
        is retired, so give them unicode glyphs. Chrome-side on purpose —
        the engines are never edited. ---- */
i.icon-trash2::before {
  content: "\2715";              /* ✕ */
  font-style: normal;
  font-weight: 700;
  font-size: 0.85em;
}
i.icon-line-chevron-down::before {
  content: "\25BE";              /* ▾ */
  font-style: normal;
}

/* ---- Print (v17, SEO contract §7.10): a printed calculator page is the
        user's actual payoff plan — hide everything interactive/chrome. ---- */
@media print {
  .udi-promo-bar,
  nav.layout-navbar,
  footer.landing-footer,
  .breadcrumb,
  .btn,
  button,
  lite-youtube,
  .sc-toggle,
  #sc-extra-slider,
  .sc-slider-hints,
  .sc-step,
  .sc-remove-row {
    display: none !important;
  }
  body {
    background: #ffffff !important;
  }
  .udi-page-card {
    box-shadow: none !important;
    border: 0 !important;
  }
  .udi-page-card > .card-body {
    padding: 0 !important;
  }
  .table-responsive {
    overflow: visible !important;
  }
  tr {
    page-break-inside: avoid;
  }
}

/* FAQ category result pages @2026.08.14-22. The concise h1 and breadcrumb
   trail live in the shared title zone above the card. */
.udi-faq-category-page,
.udi-faq-tag-page,
.udi-faq-article-page {
  --udi-faq-category-blue: #5c9acf;
  --udi-faq-category-blue-hover: #4b88bb;
  --udi-faq-category-line: rgba(63, 98, 134, 0.18);
  --udi-faq-category-soft: rgba(92, 154, 207, 0.08);
  color: var(--bs-body-color);
  font-size: 0.975rem;
}

.udi-faq-article-page {
  font-size: 1rem;
}

.udi-faq-category-order-note {
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--udi-faq-category-line);
  color: var(--bs-secondary-color);
  line-height: 1.55;
}

.udi-faq-tag-pills .btn-label-primary {
  border: 1px solid rgba(92, 154, 207, 0.16);
  background: rgba(92, 154, 207, 0.14);
  color: var(--udi-faq-category-blue-hover);
  box-shadow: none;
}

.udi-faq-tag-pills .btn-label-primary:hover,
.udi-faq-tag-pills .btn-label-primary:focus-visible {
  border-color: rgba(92, 154, 207, 0.34);
  background: rgba(92, 154, 207, 0.22);
  color: var(--udi-faq-category-blue-hover);
}

.udi-faq-tag-pills .btn-primary,
.udi-faq-tag-pills .btn-primary:hover,
.udi-faq-tag-pills .btn-primary:focus-visible {
  border-color: var(--udi-faq-category-blue);
  background: var(--udi-faq-category-blue);
  color: #fff;
}

.udi-faq-tag-pills .badge {
  font-weight: 600;
}

.udi-faq-tag-pills .btn-label-primary .badge {
  background: var(--udi-faq-category-blue) !important;
}

.udi-faq-tag-pills .btn-primary .badge {
  color: var(--udi-faq-category-blue-hover) !important;
}

.udi-faq-tag-divider {
  margin-block-start: 0;
  border-color: var(--udi-faq-category-line);
  opacity: 1;
}

.udi-faq-category-article-card {
  overflow: hidden;
  border: 1px solid var(--udi-faq-category-line);
  background: #fff;
  box-shadow: 0 0.45rem 1.35rem rgba(38, 60, 85, 0.08);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.udi-faq-category-article-card:hover {
  border-color: rgba(92, 154, 207, 0.42);
  box-shadow: 0 0.7rem 1.7rem rgba(38, 60, 85, 0.12);
  transform: translateY(-1px);
}

.udi-faq-category-article-card .card-body {
  padding: 1.35rem 1.45rem;
}

.udi-faq-category-article-card h2 {
  font-size: 1.12rem;
  line-height: 1.4;
}

.udi-faq-category-article-card h2 a {
  color: var(--udi-faq-category-blue-hover);
}

.udi-faq-category-article-card h2 a:hover,
.udi-faq-category-article-card h2 a:focus-visible {
  color: var(--udi-faq-category-blue);
}

.udi-faq-category-meta {
  color: var(--bs-secondary-color);
  font-size: 0.825rem;
  line-height: 1.45;
}

.udi-faq-category-meta .icon-base {
  margin-inline-end: 0.18rem;
  color: var(--udi-faq-category-blue);
  font-size: 0.95rem;
  vertical-align: -0.12rem;
}

.udi-faq-meta-divider {
  color: rgba(63, 98, 134, 0.38);
}

.udi-faq-category-article-card p {
  color: var(--bs-body-color);
  line-height: 1.62;
}

.udi-faq-sidebar-tabs {
  overflow: hidden;
  border: 1px solid var(--udi-faq-category-line);
  background: #fff;
  box-shadow: 0 0.45rem 1.35rem rgba(38, 60, 85, 0.08);
}

.udi-faq-sidebar-tabs .nav-tabs {
  gap: 0.25rem;
  padding: 0.7rem 0.8rem 0;
  border-block-end: 1px solid var(--udi-faq-category-line);
  background: var(--udi-faq-category-soft);
}

.udi-faq-sidebar-tabs .nav-link {
  margin-block-end: -1px;
  padding: 0.7rem 0.8rem;
  border: 0;
  border-block-end: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--bs-heading-color);
  font-weight: 600;
}

.udi-faq-sidebar-tabs .nav-link:hover,
.udi-faq-sidebar-tabs .nav-link:focus-visible {
  color: var(--udi-faq-category-blue-hover);
}

.udi-faq-sidebar-tabs .nav-link.active {
  border-block-end-color: var(--udi-faq-category-blue);
  background: #fff;
  color: var(--udi-faq-category-blue-hover);
}

.udi-faq-sidebar-tabs .tab-content {
  padding: 0.35rem 1.1rem;
}

.udi-faq-sidebar-article-list li {
  padding-block: 0.95rem;
  border-block-end: 1px solid var(--udi-faq-category-line);
}

.udi-faq-sidebar-article-list li:last-child {
  border-block-end: 0;
}

.udi-faq-sidebar-article-list a {
  display: block;
  color: var(--bs-heading-color);
  font-size: 0.925rem;
  font-weight: 600;
  line-height: 1.4;
}

.udi-faq-sidebar-article-list a:hover,
.udi-faq-sidebar-article-list a:focus-visible {
  color: var(--udi-faq-category-blue-hover);
}

.udi-faq-sidebar-article-meta {
  display: block;
  margin-block-start: 0.35rem;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  line-height: 1.35;
}

.udi-faq-sidebar-article-meta .icon-base {
  margin-inline-end: 0.25rem;
  color: var(--udi-faq-category-blue);
  font-size: 0.9rem;
  vertical-align: -0.1rem;
}

.udi-faq-article-subtitle {
  margin-block-start: 0;
  padding: 0.2rem 0 0.2rem 1rem;
  border: 0;
  border-inline-start: 3px solid var(--udi-faq-category-blue);
  border-radius: 0;
  background: transparent;
}

.udi-faq-article-subtitle p {
  color: var(--bs-heading-color);
  font-size: 1.02rem;
  font-weight: 450;
  line-height: 1.65;
}

.udi-faq-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 0.825rem;
  line-height: 1.45;
}

.udi-faq-article-meta li {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}

.udi-faq-article-meta .icon-base {
  flex: 0 0 auto;
  color: var(--udi-faq-category-blue);
  font-size: 1rem;
}

.udi-faq-article-meta a {
  color: var(--udi-faq-category-blue-hover);
  font-weight: 400;
}

.udi-faq-article-meta a:hover,
.udi-faq-article-meta a:focus-visible {
  color: var(--udi-faq-category-blue);
}

.udi-faq-article-header-divider {
  margin-block-start: 0;
  border-color: var(--udi-faq-category-line);
  opacity: 1;
}

.udi-faq-article-content {
  color: var(--bs-body-color);
  font-size: 1.02rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.udi-faq-article-content p,
.udi-faq-article-content li {
  text-wrap: pretty;
}

.udi-faq-article-content p:last-child,
.udi-faq-article-content > :last-child {
  margin-block-end: 0;
}

.udi-faq-article-content ul,
.udi-faq-article-content ol {
  padding-inline-start: 1.4rem;
}

.udi-faq-article-content li + li {
  margin-block-start: 0.55rem;
}

.udi-faq-article-content li::marker {
  color: var(--udi-faq-category-blue-hover);
}

.udi-faq-article-content img {
  max-inline-size: 100%;
  block-size: auto;
  border-radius: 0.55rem;
}

.udi-faq-article-content .table-responsive,
.udi-faq-article-content table {
  margin-block: 1.25rem;
}

.udi-faq-article-section {
  padding-block-start: 2.5rem;
}

.udi-faq-article-section > h2 {
  position: relative;
  margin: 0 0 1.15rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px solid var(--udi-faq-category-line);
  color: var(--bs-heading-color);
  font-size: 1.375rem;
  line-height: 1.35;
}

.udi-faq-article-section > h2::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 3.25rem;
  block-size: 2px;
  background: var(--udi-faq-category-blue);
}

.udi-faq-article-keywords {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--udi-faq-category-line);
  border-radius: 0.65rem;
  background: var(--udi-faq-category-soft);
  color: var(--bs-body-color);
  font: inherit;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.udi-faq-article-resource {
  overflow-wrap: anywhere;
}

.udi-faq-article-resource a {
  color: var(--udi-faq-category-blue);
  font-weight: 600;
}

.udi-faq-article-resource a:hover,
.udi-faq-article-resource a:focus-visible {
  color: var(--udi-faq-category-blue-hover);
}

@media (min-width: 992px) {
  .udi-faq-category-page > .container > .row > .col-lg-4,
  .udi-faq-tag-page > .container > .row > .col-lg-4,
  .udi-faq-article-page > .container > .row > .col-lg-4 {
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }
}

[data-bs-theme="dark"] .udi-faq-category-page,
[data-bs-theme="dark"] .udi-faq-tag-page,
[data-bs-theme="dark"] .udi-faq-article-page {
  --udi-faq-category-line: rgba(168, 203, 232, 0.2);
  --udi-faq-category-soft: rgba(127, 179, 221, 0.1);
}

[data-bs-theme="dark"] .udi-faq-category-article-card {
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .udi-faq-sidebar-tabs,
[data-bs-theme="dark"] .udi-faq-sidebar-tabs .nav-link.active {
  background: var(--bs-body-bg);
}

@media (max-width: 767.98px) {
  .udi-faq-category-article-card .card-body {
    padding: 1.15rem;
  }
  .udi-faq-article-meta {
    display: flex;
  }
}

@media (max-width: 575.98px) {
  .udi-faq-meta-divider {
    display: none;
  }
  .udi-faq-category-meta > span:not(.udi-faq-meta-divider) {
    flex-basis: 100%;
  }
  .udi-faq-article-meta {
    gap: 0.65rem 1rem;
  }
  .udi-faq-article-subtitle,
  .udi-faq-article-keywords {
    padding: 0.9rem;
  }
  .udi-faq-article-subtitle {
    padding-inline-start: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .udi-faq-category-article-card {
    transition: none;
  }
  .udi-faq-category-article-card:hover {
    transform: none;
  }
}

@media print {
  .udi-faq-category-page > .container > .row > .col-lg-4,
  .udi-faq-tag-page > .container > .row > .col-lg-4,
  .udi-faq-article-page > .container > .row > .col-lg-4 {
    display: none !important;
  }
  .udi-faq-category-page > .container > .row > .col-lg-8,
  .udi-faq-tag-page > .container > .row > .col-lg-8,
  .udi-faq-article-page > .container > .row > .col-lg-8 {
    inline-size: 100%;
  }
  .udi-faq-category-article-card {
    break-inside: avoid;
    box-shadow: none;
  }
  .udi-faq-sidebar-tabs {
    display: none !important;
  }
}

/* Account + support page batch @2026.08.14-1 */
.udi-signup-page,
.udi-welcome-page,
.udi-contact-page,
.udi-404-page {
  --udi-flow-blue: #5c9acf;
  --udi-flow-blue-dark: #3979af;
  --udi-flow-navy: #10233f;
  --udi-flow-line: rgba(63, 98, 134, 0.2);
  --udi-flow-soft: rgba(92, 154, 207, 0.08);
  padding-block-start: 0.75rem;
}

.udi-flow-alert {
  margin-block-end: 1.25rem;
  padding: 1.05rem 3rem 1.05rem 1.2rem;
  border: 1px solid var(--bs-alert-border-color);
  border-radius: 0.8rem;
  font-size: 1rem;
  line-height: 1.55;
}

.udi-flow-alert .alert-heading,
.udi-flow-alert > h4 {
  margin-block-end: 0.4rem;
  font-size: 1.05rem;
}

.udi-flow-panel {
  overflow: hidden;
  border: 1px solid var(--udi-flow-line);
  border-radius: 0.9rem;
  background: var(--bs-body-bg);
  box-shadow: 0 0.75rem 2rem rgba(38, 60, 85, 0.09);
}

.udi-flow-panel-header {
  padding: 1.2rem clamp(1.25rem, 3vw, 1.75rem);
  border-block-end: 1px solid var(--udi-flow-line);
  background: var(--udi-flow-soft);
  color: var(--udi-flow-navy);
  font-size: 1.05rem;
}

.udi-flow-panel-body {
  padding: clamp(1.35rem, 3vw, 1.85rem);
}

.udi-flow-form {
  margin: 0;
}

.udi-flow-form .form-label,
.udi-contact-form .form-label {
  margin-block-end: 0.45rem;
  color: var(--bs-heading-color);
  font-size: 0.96rem;
  font-weight: 600;
}

.udi-flow-input-group,
.udi-flow-input-group .form-control {
  min-block-size: 3.1rem;
}

.udi-flow-input-group .input-group-text {
  inline-size: 3.1rem;
  justify-content: center;
  border-color: var(--udi-flow-line);
  background: var(--udi-flow-soft);
  color: var(--udi-flow-blue-dark);
}

.udi-flow-input-group .form-control,
.udi-contact-form .form-control,
.udi-welcome-account-form .form-select {
  border-color: var(--udi-flow-line);
  font-size: 1rem;
}

.udi-flow-input-group:focus-within,
.udi-contact-form .form-control:focus,
.udi-welcome-account-form .form-select:focus {
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0 0 0.2rem rgba(92, 154, 207, 0.16);
}

.udi-flow-input-group:focus-within .input-group-text,
.udi-flow-input-group:focus-within .form-control,
.udi-contact-form .form-control:focus,
.udi-welcome-account-form .form-select:focus {
  border-color: var(--udi-flow-blue);
  box-shadow: none;
}

.udi-field-help,
.udi-welcome-account-form small {
  display: block;
  margin-block-start: 0.45rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

/* New account */
.udi-signup-grid {
  align-items: flex-start;
  max-inline-size: 72rem;
  margin-inline: auto;
}

.udi-signup-form-column,
.udi-signup-info {
  min-inline-size: 0;
}

.udi-signup-handoff {
  margin-block-end: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--bs-alert-border-color);
  border-radius: 0.75rem;
  font-size: 0.98rem;
  line-height: 1.55;
}

.udi-signup-terms {
  margin-block: 0 1.2rem;
  color: var(--bs-secondary-color);
  font-size: 0.94rem;
  line-height: 1.55;
}

.udi-signup-terms small,
.udi-signup-social small {
  font-size: inherit;
}

.udi-flow-captcha-field {
  margin-block-end: 1.25rem;
}

.nu-captcha-row,
.udi-contact-captcha-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-block-start: 0.65rem;
}

.nu-captcha-row img,
.udi-contact-captcha-row img {
  max-inline-size: 12rem;
  block-size: auto;
  border: 1px solid var(--udi-flow-line);
  border-radius: 0.5rem;
}

.refresh-captcha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.7rem;
  block-size: 2.7rem;
  border: 1px solid var(--udi-flow-line);
  border-radius: 50%;
  background: var(--udi-flow-soft);
  color: var(--udi-flow-blue-dark);
  font-size: 1.35rem;
  cursor: pointer;
}

.refresh-captcha:hover,
.refresh-captcha:focus-visible {
  border-color: var(--udi-flow-blue);
  background: rgba(92, 154, 207, 0.14);
  outline: none;
}

.udi-signup-actions,
.udi-signup-options-actions,
.udi-welcome-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.udi-signup-actions .btn {
  min-block-size: 2.85rem;
}

.nu-social-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.45rem 0;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.nu-social-divider::before,
.nu-social-divider::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--udi-flow-line);
}

.udi-signup-social {
  text-align: center;
}

.udi-signup-social .nu-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  inline-size: 100%;
  min-block-size: 2.9rem;
  font-weight: 600;
}

.udi-signup-social .mt-2 {
  margin-block-start: 0.7rem !important;
  color: var(--bs-secondary-color);
  font-size: 0.92rem;
}

.udi-signup-info {
  padding: 0.6rem clamp(0rem, 1.5vw, 1rem) 0;
}

.udi-signup-info > h2 {
  margin-block: 0 1rem;
  color: var(--bs-heading-color);
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  line-height: 1.25;
}

.udi-signup-info > p {
  margin-block-end: 1.4rem;
  font-size: 1.05rem;
  line-height: 1.7;
}

.udi-signup-privacy {
  margin-block: 0 1.4rem;
  padding: 0.95rem 1.05rem;
  border: 0;
  border-inline-start: 4px solid var(--udi-flow-blue);
  border-radius: 0.35rem;
  background: var(--udi-flow-soft);
  color: var(--bs-body-color);
  font-size: 0.98rem;
  line-height: 1.55;
}

.udi-signup-options {
  border: 1px solid var(--udi-flow-line);
  border-radius: 0.8rem;
  background: var(--udi-flow-soft);
  box-shadow: none;
}

.udi-signup-options .card-body {
  padding: 1.3rem;
}

.udi-signup-options h4 {
  color: var(--bs-heading-color);
  font-size: 1.1rem;
}

.udi-signup-options p {
  font-size: 0.98rem;
  line-height: 1.6;
}

.udi-flow-modal .modal-content {
  --udi-flow-line: rgba(63, 98, 134, 0.2);
  overflow: hidden;
  border: 1px solid var(--udi-flow-line);
  border-radius: 0.9rem;
}

.udi-flow-modal .modal-header,
.udi-flow-modal .modal-body {
  padding-inline: clamp(1.25rem, 3vw, 1.75rem);
}

.udi-flow-modal .modal-body {
  font-size: 1rem;
  line-height: 1.65;
}

/* New-user welcome */
.udi-welcome-shell {
  max-inline-size: 66rem;
}

.udi-welcome-intro {
  margin-block-end: 1.5rem;
}

.udi-welcome-intro h2 {
  margin: 0 0 0.25rem;
  color: var(--bs-heading-color);
  font-size: clamp(1.55rem, 2.5vw, 2rem);
}

.udi-welcome-intro p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 1.02rem;
}

.udi-welcome-step-card,
.udi-welcome-plus-card {
  margin-block-end: 1.25rem;
  border: 1px solid var(--udi-flow-line);
  border-radius: 0.85rem;
  background: var(--bs-body-bg);
  box-shadow: 0 0.55rem 1.5rem rgba(38, 60, 85, 0.07);
}

.udi-welcome-step-card .card-body,
.udi-welcome-plus-card .card-body {
  padding: clamp(1.25rem, 3vw, 1.65rem);
}

.nw-step-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block-end: 0.85rem !important;
}

.nw-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  flex: 0 0 2.5rem;
  border-radius: 50%;
  background: var(--udi-flow-blue-dark);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.nw-step-header h3 {
  color: var(--bs-heading-color);
  font-size: 1.25rem;
  line-height: 1.3;
}

.udi-welcome-step-card p,
.udi-welcome-plus-card p {
  font-size: 1rem;
  line-height: 1.65;
}

.udi-welcome-account-form {
  margin-block-start: 1.2rem;
  padding: 1.25rem;
  border: 1px solid var(--udi-flow-line);
  border-radius: 0.75rem;
  background: var(--udi-flow-soft);
}

.udi-welcome-account-form .form-control,
.udi-welcome-account-form .form-select {
  min-block-size: 3rem;
}

.udi-welcome-actions {
  margin-block-start: 0.4rem;
}

.udi-welcome-actions .btn {
  min-block-size: 2.8rem;
}

.udi-welcome-video {
  overflow: hidden;
  border: 1px solid var(--udi-flow-line);
  border-radius: 0.7rem;
  background: var(--udi-flow-navy);
  box-shadow: 0 0.65rem 1.6rem rgba(38, 60, 85, 0.12);
}

.udi-welcome-plus-card {
  background: var(--udi-flow-soft);
  box-shadow: none;
}

.udi-welcome-plus-card .nw-step-num {
  background: var(--udi-flow-navy);
}

.udi-welcome-plus-card small {
  display: block;
  margin-block-start: 0.75rem;
  color: var(--bs-secondary-color);
  font-size: 0.88rem;
}

/* Password recovery */
.udi-recovery-copy {
  margin-block-end: 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
}

.udi-recovery-submit {
  inline-size: 100%;
  min-block-size: 2.9rem;
  font-weight: 600;
}

/* Contact */
.udi-contact-shell {
  inline-size: min(100%, 58rem);
  margin-inline: auto;
  padding: 0.75rem clamp(1rem, 2vw, 1.5rem) 1rem;
}

.udi-contact-intro {
  margin-block: 0 1.6rem;
  color: var(--bs-body-color);
  font-size: 1.06rem;
  line-height: 1.7;
}

.udi-contact-form .form-control {
  min-block-size: 3.1rem;
}

.udi-contact-form textarea.form-control {
  min-block-size: 10rem;
  line-height: 1.55;
  resize: vertical;
}

.udi-contact-form .form-label small {
  color: var(--bs-danger);
  font-size: inherit;
}

.udi-contact-captcha .form-control {
  max-inline-size: 18rem;
}

.udi-contact-submit {
  min-inline-size: 10rem;
  min-block-size: 2.9rem;
  font-weight: 600;
}

.udi-contact-footer-note {
  margin: 0.75rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.94rem;
  text-align: center;
}

.udi-contact-footer-note small {
  font-size: inherit;
}

/* 404 */
.udi-404-shell {
  max-inline-size: 50rem;
  padding: clamp(1.25rem, 4vw, 2.5rem) 1rem 1.5rem;
}

.udi-404-code {
  margin: 0 0 0.35rem;
  color: var(--udi-flow-blue-dark);
  font-size: clamp(4.5rem, 12vw, 7.25rem);
  font-weight: 750;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

.udi-404-heading {
  margin-block: 0 1rem;
  color: var(--bs-heading-color);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.3;
}

.udi-404-copy {
  max-inline-size: 44rem;
  margin-inline: auto;
  font-size: 1.05rem;
  line-height: 1.7;
}

.udi-404-primary-action {
  margin-block: 1.6rem 0;
}

.udi-404-primary-action .btn {
  min-block-size: 2.9rem;
  padding-inline: 1.35rem;
  font-weight: 600;
}

.udi-404-links {
  margin: 1.7rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.96rem;
  line-height: 1.9;
}

.udi-404-links small {
  font-size: inherit;
}

.udi-404-links a {
  font-weight: 600;
  white-space: nowrap;
}

/* Durable action colors for this page batch */
.udi-signup-page .btn-primary,
.udi-welcome-page .btn-primary,
.udi-contact-page .btn-primary,
.udi-404-page .btn-primary {
  border-color: var(--udi-flow-blue-dark);
  background: var(--udi-flow-blue-dark);
  color: #fff;
}

.udi-signup-page .btn-primary:hover,
.udi-signup-page .btn-primary:focus-visible,
.udi-signup-page .btn-primary:active,
.udi-welcome-page .btn-primary:hover,
.udi-welcome-page .btn-primary:focus-visible,
.udi-welcome-page .btn-primary:active,
.udi-contact-page .btn-primary:hover,
.udi-contact-page .btn-primary:focus-visible,
.udi-contact-page .btn-primary:active,
.udi-404-page .btn-primary:hover,
.udi-404-page .btn-primary:focus-visible,
.udi-404-page .btn-primary:active {
  border-color: #2d6797;
  background: #2d6797;
  color: #fff;
}

.udi-signup-page .btn-outline-primary,
.udi-welcome-page .btn-outline-primary {
  border-color: var(--udi-flow-blue-dark);
  color: var(--udi-flow-blue-dark);
}

.udi-signup-page .btn-outline-primary:hover,
.udi-signup-page .btn-outline-primary:focus-visible,
.udi-signup-page .btn-outline-primary:active,
.udi-welcome-page .btn-outline-primary:hover,
.udi-welcome-page .btn-outline-primary:focus-visible,
.udi-welcome-page .btn-outline-primary:active {
  border-color: var(--udi-flow-blue-dark);
  background: var(--udi-flow-blue-dark);
  color: #fff;
}

.udi-signup-page .btn *,
.udi-welcome-page .btn *,
.udi-contact-page .btn *,
.udi-404-page .btn * {
  color: inherit;
}

[data-bs-theme="dark"] .udi-signup-page,
[data-bs-theme="dark"] .udi-welcome-page,
[data-bs-theme="dark"] .udi-contact-page,
[data-bs-theme="dark"] .udi-404-page {
  --udi-flow-blue-dark: #8fc0e7;
  --udi-flow-navy: #d9ebf8;
  --udi-flow-line: rgba(168, 203, 232, 0.22);
  --udi-flow-soft: rgba(92, 154, 207, 0.12);
}

[data-bs-theme="dark"] .udi-flow-panel,
[data-bs-theme="dark"] .udi-welcome-step-card {
  background: var(--bs-body-bg);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.22);
}

[data-bs-theme="dark"] .udi-flow-modal .modal-content {
  --udi-flow-line: rgba(168, 203, 232, 0.22);
}

[data-bs-theme="dark"] .udi-welcome-video {
  background: #10233f;
}

[data-bs-theme="dark"] .udi-signup-page .btn-primary,
[data-bs-theme="dark"] .udi-signup-page .btn-primary:hover,
[data-bs-theme="dark"] .udi-signup-page .btn-primary:focus-visible,
[data-bs-theme="dark"] .udi-signup-page .btn-primary:active,
[data-bs-theme="dark"] .udi-welcome-page .btn-primary,
[data-bs-theme="dark"] .udi-welcome-page .btn-primary:hover,
[data-bs-theme="dark"] .udi-welcome-page .btn-primary:focus-visible,
[data-bs-theme="dark"] .udi-welcome-page .btn-primary:active,
[data-bs-theme="dark"] .udi-contact-page .btn-primary,
[data-bs-theme="dark"] .udi-contact-page .btn-primary:hover,
[data-bs-theme="dark"] .udi-contact-page .btn-primary:focus-visible,
[data-bs-theme="dark"] .udi-contact-page .btn-primary:active,
[data-bs-theme="dark"] .udi-404-page .btn-primary,
[data-bs-theme="dark"] .udi-404-page .btn-primary:hover,
[data-bs-theme="dark"] .udi-404-page .btn-primary:focus-visible,
[data-bs-theme="dark"] .udi-404-page .btn-primary:active,
[data-bs-theme="dark"] .udi-signup-page .btn-outline-primary:hover,
[data-bs-theme="dark"] .udi-signup-page .btn-outline-primary:focus-visible,
[data-bs-theme="dark"] .udi-signup-page .btn-outline-primary:active,
[data-bs-theme="dark"] .udi-welcome-page .btn-outline-primary:hover,
[data-bs-theme="dark"] .udi-welcome-page .btn-outline-primary:focus-visible,
[data-bs-theme="dark"] .udi-welcome-page .btn-outline-primary:active {
  border-color: #79adde;
  background: #79adde;
  color: #10233f;
}

[data-bs-theme="dark"] .udi-signup-page .btn-outline-primary,
[data-bs-theme="dark"] .udi-welcome-page .btn-outline-primary {
  border-color: #8fc0e7;
  color: #b9d9f1;
}

@media (max-width: 767.98px) {
  .udi-signup-grid {
    --bs-gutter-y: 2rem;
  }
  .udi-signup-info {
    padding-inline: 0;
  }
  .udi-welcome-account-form {
    padding: 1rem;
  }
}

@media (max-width: 575.98px) {
  .udi-signup-page,
  .udi-welcome-page,
  .udi-contact-page,
  .udi-404-page {
    padding-block-start: 0.25rem;
  }
  .udi-flow-panel-body,
  .udi-welcome-step-card .card-body,
  .udi-welcome-plus-card .card-body {
    padding: 1.15rem;
  }
  .udi-signup-actions,
  .udi-signup-options-actions,
  .udi-welcome-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .udi-signup-actions .btn,
  .udi-signup-options-actions .btn,
  .udi-welcome-actions .btn,
  .udi-contact-submit {
    inline-size: 100%;
  }
  .udi-signup-info > h2 {
    font-size: 1.55rem;
  }
  .nw-step-header {
    align-items: flex-start;
  }
  .udi-welcome-account-form {
    padding: 0;
    border: 0;
    background: transparent;
  }
  .udi-contact-shell {
    padding: 0.25rem 0 0.5rem;
  }
  .udi-contact-captcha .form-control {
    max-inline-size: none;
  }
  .udi-404-shell {
    padding-inline: 0;
  }
  .udi-404-primary-action .btn {
    inline-size: 100%;
  }
  .udi-404-links a {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .refresh-captcha {
    transition: none;
  }
}

@media print {
  .udi-flow-panel,
  .udi-welcome-step-card,
  .udi-welcome-plus-card {
    box-shadow: none;
  }
  .udi-signup-page .btn,
  .udi-signup-page .form-check,
  .udi-signup-page .nu-social-divider,
  .udi-signup-social,
  .udi-welcome-page .btn,
  .udi-contact-page form,
  .udi-404-page .btn {
    display: none !important;
  }
}

/* ========================================================================
   Pricing, features & reviews @2026.08.13-4
   Search-sensitive authority page: presentation only, copy remains literal.
   ======================================================================== */

.udi-pfr-page > h2 {
  position: relative;
  margin: 3rem 0 1.25rem !important;
  padding-block-end: 0.85rem;
  border-block-end: 1px solid var(--udi-article-line);
  color: var(--bs-heading-color);
  font-size: clamp(1.4rem, 1.25rem + 0.42vw, 1.65rem);
  line-height: 1.3;
}

.udi-pfr-page > h2:first-child {
  margin-block-start: 0 !important;
}

.udi-pfr-page > h2::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 3.25rem;
  block-size: 2px;
  background: var(--udi-article-blue);
}

.udi-pfr-page > h2 small {
  display: inline-block;
  margin-inline-start: 0.35rem;
  color: var(--bs-secondary-color) !important;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.udi-pfr-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  max-inline-size: 56rem;
  margin-block: 1.5rem;
  margin-inline: auto;
}

.udi-pfr-price-plan {
  min-inline-size: 0;
}

.udi-pfr-price-card {
  overflow: hidden;
  border: 1px solid var(--udi-article-line);
  border-radius: 1rem;
  background: var(--bs-card-bg);
  box-shadow: 0 0.8rem 2rem rgba(38, 60, 85, 0.08);
}

.udi-pfr-price-card--plus {
  position: relative;
  border-color: rgba(92, 154, 207, 0.7) !important;
  box-shadow: 0 1rem 2.35rem rgba(61, 102, 137, 0.16) !important;
}

.udi-pfr-price-card--plus::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 0.28rem;
  background: var(--udi-article-blue);
}

.udi-pfr-price-card .card-body {
  padding: 1.7rem;
}

.udi-pfr-price-card h3 {
  color: var(--bs-heading-color);
  font-size: 1.1rem !important;
  font-weight: 700;
  letter-spacing: 0.045em;
}

.udi-pfr-price-card .display-5 {
  color: var(--bs-heading-color);
  font-size: clamp(2.4rem, 1.95rem + 1.3vw, 3.25rem);
  line-height: 1.1;
}

.udi-pfr-price-card ul {
  display: grid;
  gap: 0.72rem;
  margin-block: 0.5rem 1.5rem !important;
  padding: 0;
}

.udi-pfr-price-card li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.45rem;
  align-items: start;
  margin: 0 !important;
  font-size: 0.96rem;
  line-height: 1.5;
}

.udi-pfr-price-card li .icon-base {
  margin: 0.15rem 0 0 !important;
  color: var(--udi-article-blue-dark) !important;
  font-size: 1.15rem !important;
}

.udi-pfr-price-card .mt-auto {
  padding-inline: 0 !important;
}

.udi-pfr-pricing-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  max-inline-size: 56rem;
  margin-inline: auto;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.85rem;
  background: var(--udi-article-soft);
}

.udi-pfr-pricing-note p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.65;
}

.udi-pfr-pricing-note .btn {
  white-space: nowrap;
}

.udi-pfr-limitations {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1.25rem;
  padding: 0 !important;
}

.udi-pfr-limitations > li {
  margin: 0 !important;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--udi-article-line);
  border-inline-start: 4px solid var(--udi-article-blue);
  border-radius: 0.8rem;
  background: var(--bs-card-bg);
  font-size: 0.98rem;
  line-height: 1.68;
}

.udi-pfr-limitations strong {
  display: block;
  margin-block-end: 0.4rem;
  color: var(--bs-heading-color);
  font-size: 1.02rem;
  line-height: 1.45;
}

.udi-pfr-limitations strong small {
  font-size: 0.78em;
  font-weight: 550;
}

.udi-pfr-reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}

.udi-pfr-reviews-grid > .row {
  min-inline-size: 0;
  margin: 0 !important;
}

.udi-pfr-reviews-grid > .row > [class*="col-"] {
  inline-size: 100%;
  max-inline-size: none;
  height: 100%;
  padding: 0;
}

.udi-pfr-reviews-grid > .row > [class*="col-"] > .border {
  display: flex;
  min-inline-size: 0;
  height: 100%;
  flex-direction: column;
  padding: 1.25rem !important;
  border-color: var(--udi-article-line) !important;
  border-radius: 0.9rem !important;
  background: var(--bs-card-bg);
  box-shadow: 0 0.7rem 1.8rem rgba(38, 60, 85, 0.07);
}

.udi-pfr-reviews-grid > .row > [class*="col-"] > .border > p:first-child {
  display: flex;
  align-items: center;
  min-block-size: 4.4rem;
  margin: -0.25rem 0 0.8rem;
  padding-block-end: 0.8rem;
  border-block-end: 1px solid var(--udi-article-line);
}

.udi-pfr-reviews-grid img {
  display: block;
  max-inline-size: min(11rem, 55%);
  max-block-size: 3.25rem;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
  object-position: left center;
}

.udi-pfr-reviews-grid h3 {
  margin-block-end: 0.45rem !important;
  color: var(--bs-heading-color);
  font-size: 1.15rem !important;
  font-weight: 650;
  line-height: 1.42;
}

.udi-pfr-reviews-grid h3 + .text-muted {
  margin-block-end: 0.7rem;
  font-size: 0.86rem;
  line-height: 1.45;
}

.udi-pfr-reviews-grid h4 {
  margin-block-start: 0.35rem;
  color: var(--udi-article-blue-dark);
  font-size: 0.92rem !important;
  font-weight: 700;
  line-height: 1.4;
}

.udi-pfr-reviews-grid h5,
.udi-pfr-archive h5 {
  color: var(--bs-secondary-color);
  font-size: 0.82rem !important;
  font-weight: 500;
  line-height: 1.45;
}

.udi-pfr-reviews-grid .blockquote {
  flex: 1;
  margin: 0.9rem 0 0;
  padding: 1rem 1.05rem;
  border-inline-start: 3px solid var(--udi-article-blue);
  border-radius: 0 0.65rem 0.65rem 0;
  background: var(--udi-article-soft);
}

.udi-pfr-reviews-grid .blockquote p {
  font-size: 0.95rem;
  line-height: 1.68;
}

.udi-pfr-reviews-grid .blockquote p:last-of-type {
  margin-block-end: 0;
}

.udi-pfr-reviews-grid .blockquote-footer,
.udi-pfr-testimonial-grid .blockquote-footer,
.udi-pfr-archive .blockquote-footer {
  margin-block-start: 0.8rem;
  color: var(--bs-secondary-color);
  font-size: 0.82rem;
  line-height: 1.45;
}

.udi-pfr-archive {
  display: grid;
  gap: 0.75rem;
}

.udi-pfr-archive .accordion-item {
  overflow: hidden;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.8rem;
  background: var(--bs-card-bg);
}

.udi-pfr-archive .accordion-button {
  padding: 1rem 1.15rem;
  color: var(--bs-heading-color);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.45;
}

.udi-pfr-archive .accordion-button:not(.collapsed) {
  background: var(--udi-article-soft);
  color: var(--udi-article-blue-dark);
  box-shadow: inset 0 -1px 0 var(--udi-article-line);
}

.udi-pfr-archive .accordion-body {
  padding: 1rem;
}

.udi-pfr-archive .accordion-body .border {
  padding: 1rem !important;
  border-color: var(--udi-article-line) !important;
  background: var(--bs-card-bg);
}

.udi-pfr-archive .blockquote {
  margin-block-end: 0;
  padding: 1rem;
  border-inline-start: 3px solid var(--udi-article-blue);
  background: var(--udi-article-soft);
}

.udi-pfr-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
}

.udi-pfr-video-grid > [class*="col-"] {
  inline-size: 100%;
  max-inline-size: none;
  padding: 1rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.9rem;
  background: var(--bs-card-bg);
  box-shadow: 0 0.65rem 1.55rem rgba(38, 60, 85, 0.09);
}

.udi-pfr-video-grid .ratio {
  margin: 0 !important;
  border-radius: 0.65rem !important;
  background: var(--udi-article-navy);
}

.udi-pfr-media-archive .accordion-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
}

.udi-pfr-media-archive .accordion-body > [class*="col-"] {
  inline-size: 100%;
  max-inline-size: none;
}

.udi-pfr-media-archive .accordion-body .border {
  height: 100%;
}

.udi-pfr-media-archive img {
  display: block;
  max-inline-size: 9rem;
  max-block-size: 2.8rem;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}

.udi-pfr-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.udi-pfr-testimonial-grid .blockquote {
  margin: 0;
  padding: 1.2rem 1.25rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.85rem;
  background: var(--bs-card-bg);
}

.udi-pfr-testimonial-grid .blockquote:last-child {
  grid-column: 1 / -1;
}

.udi-pfr-testimonial-grid .blockquote p {
  color: var(--bs-heading-color);
  font-size: 0.98rem;
  line-height: 1.68;
}

.udi-pfr-page .btn-primary,
.udi-pfr-page .btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}

.udi-pfr-page .btn-primary:hover,
.udi-pfr-page .btn-primary:focus-visible,
.udi-pfr-page .btn-primary:active,
.udi-pfr-page .btn-primary.active,
.udi-pfr-page .btn-danger:hover,
.udi-pfr-page .btn-danger:focus-visible,
.udi-pfr-page .btn-danger:active,
.udi-pfr-page .btn-danger.active {
  color: #fff;
}

.udi-pfr-page .btn span,
.udi-pfr-page .btn small,
.udi-pfr-page .btn .icon-base {
  color: inherit;
}

[data-bs-theme="dark"] .udi-pfr-price-card,
[data-bs-theme="dark"] .udi-pfr-reviews-grid > .row > [class*="col-"] > .border,
[data-bs-theme="dark"] .udi-pfr-video-grid > [class*="col-"] {
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .udi-pfr-price-card--plus {
  box-shadow: 0 1rem 2.35rem rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 991.98px) {
  .udi-pfr-pricing-note {
    grid-template-columns: minmax(0, 1fr);
  }
  .udi-pfr-pricing-note .btn {
    inline-size: 100%;
    white-space: normal;
  }
  .udi-pfr-reviews-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .udi-pfr-media-archive .accordion-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  .udi-pfr-pricing-grid,
  .udi-pfr-limitations,
  .udi-pfr-video-grid,
  .udi-pfr-testimonial-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .udi-pfr-testimonial-grid .blockquote:last-child {
    grid-column: auto;
  }
}

@media (max-width: 575.98px) {
  .udi-pfr-page > h2 {
    margin-block-start: 2.4rem !important;
    font-size: 1.35rem;
  }
  .udi-pfr-page > h2 small {
    display: block;
    margin: 0.35rem 0 0;
  }
  .udi-pfr-price-card .card-body,
  .udi-pfr-reviews-grid > .row > [class*="col-"] > .border {
    padding: 1.1rem !important;
  }
  .udi-pfr-pricing-note,
  .udi-pfr-limitations > li,
  .udi-pfr-testimonial-grid .blockquote {
    padding: 1rem;
  }
  .udi-pfr-video-grid > [class*="col-"] {
    padding: 0.7rem;
  }
  .udi-pfr-archive .accordion-button,
  .udi-pfr-archive .accordion-body {
    padding-inline: 1rem;
  }
}

@media print {
  .udi-pfr-price-card,
  .udi-pfr-limitations > li,
  .udi-pfr-reviews-grid > .row > [class*="col-"] > .border,
  .udi-pfr-testimonial-grid .blockquote {
    break-inside: avoid;
    box-shadow: none !important;
  }
  .udi-pfr-archive .accordion-collapse {
    display: block !important;
  }
}

/* ---- Footer (reworked 2026-08-09): square corners, no bg image (the
        ~800KB PNGs measured as flat color — retired in v15), and v16
        re-keys the palette to the BRAND dark family so the page is
        bookended by the same color as the navbar pill / interior menu.
        Bottom bar = darker sibling (live-footer "basement bar" pattern);
        2px brand-blue accent line separates footer from the tinted body. ---- */
.landing-footer {
  --bs-footer-bottom-bg: #0f111a;   /* was Vuexy slate #282c3e */
}
.landing-footer .footer-top {
  background-color: #161823;        /* = navbar pill / interior --bs-menu-bg */
  border-top: 2px solid #5c9acf;    /* brand accent — delete this line to drop it */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ---- FAQ / help-center hero (pages loading front-page-help-center.css):
        same tuck as .landing-hero so the banner art runs behind the sticky
        nav to the top of the page. first-section-pt (11.28rem) already
        over-pads for a fixed navbar — it absorbs the 5.5rem now hidden. ---- */
.help-center-header {
  margin-block-start: -5.5rem;
}
.help-center-header .input-wrapper {
  max-inline-size: 36rem;          /* template caps at 29rem; search is the
                                      page's primary action — give it room */
  box-shadow: 0 0.25rem 1rem rgba(22, 24, 35, 0.08);
  border-radius: var(--bs-border-radius);
}

/* ---- Plans-comparison table (plus-info on front-page-pricing.css): the
        vendor nowrap on the first column fits the demo's short labels; our
        feature names are sentences — let them wrap (mobile first, §2b). ---- */
.pricing-plans-comparison .table tr > th:first-child,
.pricing-plans-comparison .table tr > td:first-child {
  white-space: normal;
  min-inline-size: 13rem;
}

.landing-hero .hero-title {
  /* re-tint the template's shine gradient to the brand family (light) */
  background-image: linear-gradient(to right, #3d6689 0%, #5c9acf 47.92%, #7fb3dd 100%);
}
[data-bs-theme="dark"] .landing-hero .hero-title {
  /* lifted stops for the dark hero (#1e2130, template rule) */
  background-image: linear-gradient(to right, #5c9acf 0%, #7fb3dd 50%, #a8cbe8 100%);
}

/* ---- Heading scale (v18, Jeff 2026-08-10): Vuexy's fluid headings reach
        2.875rem/2.375rem on desktop — landing sizing, wrong for article
        pages. Fixed sizes, scoped away from the homepage hero and the FAQ
        help-center header (both $page_card=false, so neither selector can
        reach them). Requires header @2026.08.10-2 for .udi-title-zone. ---- */
.udi-title-zone h1,
.udi-title-zone h2,
.udi-page-card h1 {
  font-size: 1.75rem;
}
.udi-page-card h2 {
  font-size: 1.375rem;
}

/* ---- v19 (Jeff 2026-08-10): h3 joins the heading scale; Canvas-style
        media shadow utility. ---- */
.udi-page-card h3 {
  font-size: 1.25rem;
}

/* Soft wide-blur halo for media (screenshots, video embeds) — the Canvas
   look. Navy-tinted (brand #263c55 family) so it sits warm on the tinted
   body; keep crisp shadow-sm for cards and UI chrome. */
.udi-media-shadow {
  box-shadow: 0 0.625rem 1.875rem rgba(38, 60, 85, 0.16);
}

/* ---- v21 (Jeff 2026-08-10, supersedes v20's tinted band): titled panels
        get the chrome's accent language — the footer's 2px #5c9acf top
        edge — plus a clean header divider. No fill: the v20 tint filled
        the header's padding box and read as a gray slab. :has() limits the
        accent to cards that actually have a header. ---- */
.udi-page-card .card:has(> .card-header) {
  border-top: 2px solid #5c9acf;
}
.udi-page-card .card > .card-header {
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: 0.875rem;
  border-bottom: 0; /* v22: divider removed (Jeff) — the accent edge carries the panel */
  color: var(--bs-heading-color);
  font-weight: 500;
}

/* ========================================================================
   Homepage @2026.08.12-3
   ======================================================================== */

/* Vuexy's label utility inherits --bs-primary as text. Our accent blue is
   not text-safe on its pale tint, so homepage badges use the audited pair. */
.udi-home-hero .bg-label-primary,
.udi-home-section .bg-label-primary,
.udi-home-calculator .bg-label-primary,
.udi-home-plus .bg-label-primary {
  color: #3d6689 !important;
}
[data-bs-theme="dark"] .udi-home-hero .bg-label-primary,
[data-bs-theme="dark"] .udi-home-section .bg-label-primary,
[data-bs-theme="dark"] .udi-home-calculator .bg-label-primary,
[data-bs-theme="dark"] .udi-home-plus .bg-label-primary {
  color: #a8cbe8 !important;
}

.udi-home-hero {
  padding-block-end: 5rem;
}
.udi-home-hero .hero-title {
  max-inline-size: 12ch;
  line-height: 1.08;
}
.udi-home-hero .lead {
  max-inline-size: 40rem;
}
.udi-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}
.udi-hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.udi-hero-tour-link {
  display: inline-flex;
  align-items: center;
  margin-block-start: 1rem;
  color: #3d6689;
  font-weight: 600;
}
[data-bs-theme="dark"] .udi-hero-tour-link {
  color: #a8cbe8;
}

.udi-section-heading {
  max-inline-size: 56rem;
}
.udi-readable {
  max-inline-size: 72ch;
}
.udi-stat-icon {
  display: inline-flex;
  margin-block-end: 0.75rem;
  font-size: 2.25rem;
}
.udi-proof-grid .card-body {
  padding: 1.5rem 1rem;
}

/* Replaceable product screenshot placeholders. */
.udi-product-placeholder,
.udi-progress-placeholder,
.udi-plus-placeholder {
  border: 1px solid var(--bs-border-color);
  background: var(--bs-paper-bg, #ffffff);
  border-radius: 0.875rem;
}
.udi-product-placeholder {
  overflow: hidden;
}
.udi-placeholder-toolbar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-block-size: 2.75rem;
  padding-inline: 1rem;
  background: #161823;
  color: #ffffff;
}
.udi-placeholder-brand {
  margin-inline-end: auto;
  color: #7fb3dd;
  font-weight: 700;
}
.udi-placeholder-dot {
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
}
.udi-placeholder-body {
  display: flex;
  min-block-size: 22rem;
}
.udi-placeholder-sidebar {
  inline-size: 5.5rem;
  padding: 1rem 0.75rem;
  border-inline-end: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
}
.udi-placeholder-sidebar span {
  display: block;
  block-size: 0.45rem;
  margin-block-end: 1rem;
  border-radius: 999px;
  background: rgba(92, 154, 207, 0.28);
}
.udi-placeholder-content {
  flex: 1;
  min-inline-size: 0;
  padding: 1.25rem;
}
.udi-placeholder-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block-end: 1.25rem;
}
.udi-placeholder-stats span {
  padding: 0.85rem 0.65rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  text-align: center;
}
.udi-placeholder-stats small,
.udi-placeholder-stats strong {
  display: block;
}
.udi-placeholder-stats small {
  margin-block-end: 0.35rem;
  color: var(--bs-secondary-color);
  font-size: 0.68rem;
}
.udi-placeholder-stats strong {
  color: var(--bs-heading-color);
  font-size: 0.82rem;
}
.udi-placeholder-table {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
}
.udi-placeholder-table span {
  display: block;
  block-size: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(92, 154, 207, 0.38) 0 38%, var(--udi-surface-tint) 38% 100%);
}
[data-bs-theme="dark"] .udi-placeholder-table span {
  background: linear-gradient(90deg, rgba(127, 179, 221, 0.55) 0 38%, rgba(168, 203, 232, 0.14) 38% 100%);
}

/* Lightweight homepage estimator. */
.udi-home-calculator {
  background: var(--bs-body-bg);
}
.udi-quick-calculator {
  max-inline-size: 76rem;
  margin-inline: auto;
  border: 1px solid rgba(92, 154, 207, 0.38);
}
.udi-quick-debt {
  display: grid;
  grid-template-columns: minmax(10rem, 1.5fr) repeat(3, minmax(7rem, 1fr)) auto;
  gap: 0.75rem;
  align-items: end;
  padding-block: 0.75rem;
  border-block-end: 1px solid var(--bs-border-color);
}
.udi-quick-field label,
.udi-quick-calculator .form-label {
  display: block;
  margin-block-end: 0.4rem;
  color: var(--bs-heading-color);
  font-size: 0.75rem;
  font-weight: 600;
}
.udi-remove-debt {
  margin-block-end: 0.15rem;
}
.udi-method-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.udi-method-toggle .btn {
  border-radius: 0;
}
.udi-method-toggle .btn:first-of-type {
  border-start-start-radius: var(--bs-border-radius);
  border-end-start-radius: var(--bs-border-radius);
}
.udi-method-toggle .btn:last-of-type {
  border-start-end-radius: var(--bs-border-radius);
  border-end-end-radius: var(--bs-border-radius);
}
.udi-quick-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(92, 154, 207, 0.28);
  border-radius: 0.75rem;
  background: rgba(92, 154, 207, 0.2);
}
.udi-quick-results > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.65rem;
  align-items: center;
  padding: 1.1rem;
  background: var(--bs-paper-bg, #ffffff);
}
.udi-quick-results .icon-base {
  grid-row: 1 / 3;
  color: #5c9acf;
  font-size: 1.5rem;
}
.udi-quick-results span {
  color: var(--bs-secondary-color);
  font-size: 0.78rem;
}
.udi-quick-results strong {
  color: var(--bs-heading-color);
  font-size: 1.15rem;
}

/* Steps and benefit cards. */
.udi-step-card {
  position: relative;
  padding: 1.5rem;
}
.udi-step-number {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: rgba(92, 154, 207, 0.16);
  color: #3d6689;
  font-weight: 700;
}
[data-bs-theme="dark"] .udi-step-number {
  color: #a8cbe8;
}
.udi-feature-icon {
  display: inline-flex;
  margin-block-end: 1rem;
  color: #5c9acf;
  font-size: 2.25rem;
}
.udi-feature-card {
  padding: 1.5rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.75rem;
  background: var(--bs-paper-bg, #ffffff);
  text-align: center;
}
.udi-feature-card p {
  color: var(--bs-secondary-color);
}
.udi-method-list {
  display: grid;
  gap: 0.65rem;
}
.udi-method-list li {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-weight: 600;
}
.udi-method-list .icon-base {
  flex: 0 0 auto;
  margin-block-start: 0.1rem;
  color: #5c9acf;
}

/* Progress placeholder. */
.udi-progress-placeholder {
  padding: 1.5rem;
}
.udi-progress-heading,
.udi-progress-summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.udi-progress-heading {
  margin-block-end: 1.5rem;
  color: var(--bs-heading-color);
  font-weight: 600;
}
.udi-progress-heading strong {
  display: grid;
  place-items: center;
  inline-size: 4rem;
  block-size: 4rem;
  border: 0.45rem solid rgba(92, 154, 207, 0.22);
  border-block-start-color: #5c9acf;
  border-radius: 50%;
}
.udi-progress-row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 2fr;
  gap: 1rem;
  align-items: center;
  margin-block-end: 1rem;
  font-size: 0.875rem;
}
.udi-progress-row i {
  position: relative;
  display: block;
  overflow: hidden;
  block-size: 0.6rem;
  border-radius: 999px;
  background: var(--udi-surface-tint);
}
.udi-progress-row i::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  inline-size: var(--udi-progress);
  border-radius: inherit;
  background: #5c9acf;
}
.udi-progress-summary {
  margin-block-start: 1.5rem;
  padding: 1rem;
  border-radius: 0.65rem;
  background: rgba(92, 154, 207, 0.12);
}
.udi-progress-summary strong,
.udi-progress-summary small {
  display: block;
}

.udi-quote-icon {
  margin-block-end: 1rem;
  color: #5c9acf;
  font-size: 2rem;
}

/* Replaceable Undebt.it+ media grid. */
.udi-home-plus {
  background: var(--bs-paper-bg, #ffffff);
}
.udi-plus-placeholder-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1rem;
}
.udi-plus-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-block-size: 11rem;
  padding: 1.25rem;
  text-align: center;
  background: linear-gradient(145deg, rgba(233, 236, 243, 0.8), rgba(217, 233, 246, 0.82));
}
.udi-plus-placeholder-tall {
  grid-row: span 2;
}
.udi-plus-placeholder .icon-base {
  margin-block-end: 0.75rem;
  color: #5c9acf;
  font-size: 2.5rem;
}
.udi-plus-placeholder strong,
.udi-plus-placeholder span {
  display: block;
}
.udi-plus-placeholder strong {
  color: #3d6689;
}
.udi-plus-placeholder span {
  margin-block-start: 0.4rem;
  color: #3d6689;
  font-size: 0.75rem;
}
[data-bs-theme="dark"] .udi-plus-placeholder {
  background: linear-gradient(145deg, rgba(92, 154, 207, 0.12), rgba(127, 179, 221, 0.18));
}
[data-bs-theme="dark"] .udi-plus-placeholder strong,
[data-bs-theme="dark"] .udi-plus-placeholder span {
  color: #a8cbe8;
}

/* Final CTA deliberately reuses the navbar/interior-menu dark. */
.udi-home-final-cta {
  position: relative;
  overflow: hidden;
  background: #161823;
  color: rgba(255, 255, 255, 0.85);
}
.udi-home-final-cta h2 {
  color: #ffffff;
}
.udi-home-final-cta h2 span {
  color: #7fb3dd;
}
.udi-home-final-cta .btn-outline-light {
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: rgba(255, 255, 255, 0.72);
  --bs-btn-hover-color: #161823;
  --bs-btn-hover-bg: #ffffff;
}

@media (max-width: 991.98px) {
  .udi-home-hero .hero-title {
    max-inline-size: 16ch;
  }
  .udi-home-hero .col-lg-6:first-child {
    text-align: center;
  }
  .udi-home-hero .lead {
    margin-inline: auto;
  }
  .udi-hero-trust {
    justify-content: center;
  }
  .udi-hero-product {
    max-inline-size: 44rem;
    margin-inline: auto;
  }
}

@media (max-width: 767.98px) {
  .udi-home-hero {
    padding-block-start: 8.5rem;
    padding-block-end: 3.5rem;
  }
  .udi-home-hero .hero-title {
    margin-inline: auto;
    font-size: clamp(2.25rem, 10vw, 3rem);
  }
  .udi-home-hero .btn,
  .udi-home-calculator > .container > .d-grid .btn,
  .udi-home-plus .btn {
    inline-size: 100%;
  }
  .udi-placeholder-body {
    min-block-size: 16rem;
  }
  .udi-placeholder-content {
    padding: 0.85rem;
  }
  .udi-placeholder-stats {
    gap: 0.4rem;
  }
  .udi-placeholder-stats span {
    padding: 0.65rem 0.35rem;
  }
  .udi-placeholder-stats small {
    font-size: 0.58rem;
  }
  .udi-placeholder-stats strong {
    font-size: 0.7rem;
  }
  .udi-quick-debt {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-end: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.65rem;
    background: var(--bs-body-bg);
  }
  .udi-quick-name,
  .udi-quick-field:nth-child(4) {
    grid-column: 1 / -1;
  }
  .udi-quick-name {
    padding-inline-end: 2.5rem;
  }
  .udi-remove-debt {
    position: absolute;
    inset-block-start: 0.55rem;
    inset-inline-end: 0.55rem;
  }
  .udi-quick-results {
    grid-template-columns: 1fr;
  }
  .udi-quick-results > div {
    grid-template-columns: auto 1fr auto;
  }
  .udi-quick-results .icon-base {
    grid-row: auto;
  }
  .udi-quick-results strong {
    text-align: end;
  }
  .udi-progress-row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .udi-plus-placeholder-grid {
    grid-template-columns: 1fr;
  }
  .udi-plus-placeholder-tall {
    grid-row: auto;
  }
}

@media (max-width: 575.98px) {
  .udi-proof-grid .card-body {
    padding: 1rem 0.5rem;
  }
  .udi-proof-grid h3 {
    font-size: 1.05rem;
  }
  .udi-proof-grid p {
    font-size: 0.72rem;
  }
  .udi-stat-icon {
    font-size: 1.75rem;
  }
  .udi-quick-calculator > .card-body {
    padding: 1rem !important;
  }
}

/* ========================================================================
   Homepage approved-mockup parity pass — 2026.08.12
   This block intentionally follows the supplied desktop composition closely.
   It is scoped to .udi-home-mockup so shared exterior pages are unaffected.
   ======================================================================== */

.udi-home-mockup {
  --udi-mockup-navy: #10213e;
  --udi-mockup-blue: #2f84ce;
  --udi-mockup-blue-dark: #2877bd;
  --udi-mockup-line: #d8e1eb;
  --udi-mockup-wash: #edf6fd;
  color: #1f2d42;
  background: var(--bs-paper-bg, #fff);
}

.udi-home-mockup .container {
  max-inline-size: 1180px;
}

.udi-home-mockup h1,
.udi-home-mockup h2,
.udi-home-mockup h3 {
  color: var(--udi-mockup-navy);
  letter-spacing: -0.025em;
}

.udi-home-mockup .udi-home-hero {
  margin-block-start: -5.5rem;
  padding: 9.9rem 0 0;
  background: linear-gradient(112deg, #f8fcff 0%, #edf7ff 54%, #e6f3fc 100%);
}

.udi-home-mockup .udi-hero-row {
  min-block-size: 415px;
  padding-block: 1rem 2.5rem;
}

.udi-home-mockup .udi-hero-eyebrow {
  display: block;
  margin-block-end: 0.8rem;
  color: #243653;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.udi-home-mockup .udi-home-hero .hero-title {
  max-inline-size: none;
  margin: 0 0 1rem;
  color: var(--udi-mockup-navy);
  background: none;
  -webkit-text-fill-color: currentColor;
  font-size: clamp(2.7rem, 4.1vw, 4.05rem);
  line-height: 1.03;
}

.udi-home-mockup .udi-hero-copy {
  max-inline-size: 34rem;
  margin-block-end: 1.75rem;
  color: #34445d;
  font-size: 1.1rem;
  line-height: 1.65;
}

.udi-home-mockup .udi-hero-actions {
  display: grid;
  gap: 0.75rem;
  max-inline-size: 25rem;
}

.udi-home-mockup .udi-hero-actions .btn {
  min-block-size: 3.15rem;
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  font-weight: 600;
}

.udi-home-mockup .udi-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin-block-start: 1.65rem;
  color: #2c3a50;
  font-size: 0.85rem;
}

.udi-home-mockup .udi-hero-trust span + span::before {
  content: "•";
  margin-inline: 0.7rem;
  color: #6f8096;
}

.udi-home-mockup .udi-laptop {
  position: relative;
  inline-size: 108%;
  max-inline-size: 620px;
  margin-inline-start: -1rem;
  padding-block-end: 2.65rem;
  filter: drop-shadow(0 1.15rem 1.25rem rgba(26, 48, 77, 0.22));
}

.udi-home-mockup .udi-laptop-screen {
  position: relative;
  z-index: 4;
  overflow: hidden;
  aspect-ratio: 16 / 10.25;
  padding: 0.5rem;
  border: 0.58rem solid #101216;
  border-block-start-width: 0.82rem;
  border-block-end-width: 1rem;
  border-radius: 1rem 1rem 0.28rem 0.28rem;
  background: linear-gradient(145deg, #1c1f24, #08090b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0.28rem 0.4rem rgba(0, 0, 0, 0.24);
}

.udi-home-mockup .udi-laptop-screen::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset-block-start: 0.18rem;
  inset-inline-start: 50%;
  inline-size: 0.24rem;
  block-size: 0.24rem;
  border-radius: 50%;
  background: #31343b;
}

.udi-home-mockup .udi-laptop-screen::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset-inline-start: 50%;
  inset-block-end: 0.23rem;
  inline-size: 2.1rem;
  block-size: 0.16rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.udi-home-mockup .udi-laptop-hinge {
  position: absolute;
  z-index: 3;
  inset-inline-start: 17%;
  inset-block-end: 2.25rem;
  inline-size: 66%;
  block-size: 0.52rem;
  border-radius: 0 0 0.45rem 0.45rem;
  background: linear-gradient(to bottom, #17191c 0 45%, #73777b 46% 72%, #1d1f22 73%);
  box-shadow: 0 0.18rem 0.15rem rgba(0, 0, 0, 0.28);
}

.udi-home-mockup .udi-laptop-deck {
  position: absolute;
  z-index: 2;
  inset-inline-start: -6.5%;
  inset-block-end: 0.48rem;
  inline-size: 113%;
  block-size: 2.15rem;
  clip-path: polygon(6% 0, 94% 0, 100% 72%, 98% 100%, 2% 100%, 0 72%);
  background:
    linear-gradient(to bottom, #f4f5f6 0%, #bfc3c7 33%, #9da2a7 64%, #e1e3e5 100%);
  box-shadow:
    inset 0 1px 0 #ffffff,
    inset 0 -0.18rem 0 rgba(80, 85, 90, 0.3),
    0 0.45rem 0.5rem rgba(0, 0, 0, 0.28);
}

.udi-home-mockup .udi-laptop-trackpad {
  position: absolute;
  inset-inline-start: 42%;
  inset-block-start: 0.35rem;
  inline-size: 16%;
  block-size: 0.85rem;
  border: 1px solid rgba(94, 99, 104, 0.42);
  border-radius: 0.18rem;
  background: rgba(215, 218, 220, 0.62);
}

.udi-home-mockup .udi-laptop-lip {
  position: absolute;
  z-index: 3;
  inset-inline-start: 38%;
  inset-block-end: 0.37rem;
  inline-size: 24%;
  block-size: 0.3rem;
  border-radius: 0 0 0.55rem 0.55rem;
  background: linear-gradient(to bottom, #7e8388, #d4d7d9);
}

.udi-home-mockup .udi-laptop-lip::after {
  content: "";
  position: absolute;
  inset-inline: -132%;
  inset-block-start: 0.23rem;
  block-size: 0.12rem;
  border-radius: 50%;
  background: rgba(40, 44, 48, 0.42);
  filter: blur(0.06rem);
}

.udi-home-mockup .udi-placeholder-toolbar {
  min-block-size: 2rem;
  padding-inline: 0.65rem;
  border-radius: 0.25rem 0.25rem 0 0;
  font-size: 0.55rem;
}

.udi-home-mockup .udi-placeholder-status {
  margin-inline-start: 0.5rem;
  margin-inline-end: auto;
  padding: 0.1rem 0.32rem;
  border-radius: 0.2rem;
  background: #ee4d45;
  color: #fff;
  font-size: 0.42rem;
}

.udi-home-mockup .udi-placeholder-body {
  min-block-size: 0;
  block-size: calc(100% - 2rem);
  border-radius: 0 0 0.25rem 0.25rem;
  background: #fff;
}

.udi-home-mockup .udi-placeholder-sidebar {
  inline-size: 5.2rem;
  padding: 0.75rem 0.45rem;
  background: #f6f8fb;
}

.udi-home-mockup .udi-placeholder-sidebar small {
  display: block;
  overflow: hidden;
  margin-block-end: 0.65rem;
  color: #718097;
  font-size: 0.42rem;
  white-space: nowrap;
}

.udi-home-mockup .udi-placeholder-content {
  padding: 0.72rem;
}

.udi-home-mockup .udi-placeholder-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
  margin-block-end: 0.65rem;
}

.udi-home-mockup .udi-placeholder-stats span {
  padding: 0.5rem 0.25rem;
  border: 0;
  background: #f7f9fb;
}

.udi-home-mockup .udi-placeholder-stats small {
  font-size: 0.42rem;
}

.udi-home-mockup .udi-placeholder-stats strong {
  font-size: 0.64rem;
}

.udi-home-mockup .udi-placeholder-table {
  gap: 0.55rem;
  padding: 0.65rem;
}

.udi-home-mockup .udi-placeholder-table strong {
  font-size: 0.55rem;
}

.udi-home-mockup .udi-placeholder-table span {
  block-size: 0.42rem;
}

.udi-home-mockup .udi-proof-bar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  transform: translateY(50%);
  border: 1px solid rgba(216, 225, 235, 0.85);
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0.75rem 2rem rgba(29, 57, 88, 0.09);
}

.udi-home-mockup .udi-proof-item {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 1rem;
  align-items: center;
  min-block-size: 6.35rem;
  padding: 1.2rem;
}

.udi-home-mockup .udi-proof-item + .udi-proof-item::before {
  content: "";
  position: absolute;
  inset-block: 1.45rem;
  inset-inline-start: 0;
  inline-size: 1px;
  background: var(--udi-mockup-line);
}

.udi-home-mockup .udi-proof-item .icon-base {
  flex: 0 0 4rem;
  inline-size: 4rem;
  color: var(--udi-mockup-blue);
  font-size: 2.75rem !important;
  line-height: 1;
  text-align: center;
}

.udi-home-mockup .udi-proof-item > span {
  min-inline-size: 0;
  text-align: start;
}

.udi-home-mockup .udi-proof-item strong,
.udi-home-mockup .udi-proof-item small {
  display: block;
}

.udi-home-mockup .udi-proof-item strong {
  color: var(--udi-mockup-navy);
  font-size: 1.35rem;
  line-height: 1.1;
}

.udi-home-mockup .udi-proof-item small {
  margin-block-start: 0.25rem;
  color: #52627a;
  font-size: 0.9rem;
}

.udi-home-mockup .udi-home-calculator {
  padding: 7rem 0 1.9rem;
  background: #fff;
}

.udi-home-mockup .udi-quick-calculator {
  max-inline-size: none;
  border: 1px solid var(--udi-mockup-line);
  border-radius: 0.8rem;
  box-shadow: none;
}

.udi-home-mockup .udi-quick-calculator > .card-body {
  padding: 2.1rem 2.3rem;
}

.udi-home-mockup .udi-calculator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18.5rem;
  gap: 2.1rem;
  align-items: stretch;
}

.udi-home-mockup .udi-calculator-entry h2 {
  margin-block-end: 1.25rem;
  font-size: 1.55rem;
}

.udi-home-mockup .udi-quick-debt {
  grid-template-columns: minmax(9rem, 1.45fr) minmax(6rem, 0.85fr) minmax(5.5rem, 0.7fr) minmax(7rem, 0.9fr) 2rem;
  gap: 0.65rem;
  padding-block: 0.32rem;
  border: 0;
}

.udi-home-mockup .udi-quick-debt:not(:first-child) label {
  visibility: hidden;
}

.udi-home-mockup .udi-quick-field label,
.udi-home-mockup .udi-quick-calculator .form-label {
  margin-block-end: 0.45rem;
  color: var(--udi-mockup-navy);
  font-size: 0.7rem;
}

.udi-home-mockup .udi-quick-calculator .form-control,
.udi-home-mockup .udi-quick-calculator .input-group-text {
  min-block-size: 2.35rem;
  padding-block: 0.35rem;
  font-size: 0.76rem;
}

.udi-home-mockup .udi-remove-debt {
  align-self: end;
  margin: 0 0 0.1rem;
}

.udi-home-mockup .udi-add-debt {
  margin-block: 0.45rem 1.2rem;
  padding-inline-start: 0;
  font-size: 0.72rem;
}

.udi-home-mockup .udi-calculator-controls {
  display: grid;
  grid-template-columns: minmax(8rem, 0.85fr) minmax(12rem, 1.2fr) minmax(10rem, 1fr);
  gap: 1.7rem;
  align-items: end;
}

.udi-home-mockup .udi-calculator-controls > .btn,
.udi-home-mockup .udi-method-toggle .btn {
  min-block-size: 2.45rem;
  font-size: 0.72rem;
}

.udi-home-mockup #udiQuickMessage {
  margin-block-start: 0.75rem;
  font-size: 0.66rem;
}

.udi-home-mockup .udi-quick-results {
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: 0.75rem;
  background: linear-gradient(150deg, #f7f9fc 0%, #eff4f9 100%);
}

.udi-home-mockup .udi-quick-results h3 {
  margin: 0;
  padding: 1.55rem 1.5rem 1.1rem;
  border-block-end: 1px solid #dfe6ee;
  font-size: 0.88rem;
}

.udi-home-mockup .udi-quick-results > div {
  display: block;
  margin-inline: 1.5rem;
  padding: 1.15rem 0;
  border-block-end: 1px solid #dfe6ee;
  background: transparent;
}

.udi-home-mockup .udi-quick-results > div:last-child {
  border-block-end: 0;
}

.udi-home-mockup .udi-quick-results span,
.udi-home-mockup .udi-quick-results strong {
  display: block;
}

.udi-home-mockup .udi-quick-results span {
  margin-block-end: 0.4rem;
  color: #4b5b71;
  font-size: 0.72rem;
}

.udi-home-mockup .udi-quick-results strong {
  color: var(--udi-mockup-navy);
  font-size: 1.55rem;
  line-height: 1.15;
}

.udi-home-mockup .udi-home-features {
  padding: 7rem 0 3rem;
  background: #fff;
}

.udi-home-mockup .udi-centered-heading {
  margin: 0 0 1.15rem;
  text-align: center;
  font-size: clamp(1.9rem, 2.5vw, 2.2rem);
}

.udi-home-mockup .udi-step-grid {
  margin-block-end: 2.1rem;
}

.udi-home-mockup .udi-step-grid .card,
.udi-home-mockup .udi-feature-card {
  border-color: var(--udi-mockup-line) !important;
  border-radius: 0.75rem;
  background: #fff;
}

.udi-home-mockup .udi-step-card {
  display: grid;
  grid-template-columns: 3rem 1.2rem 1fr;
  gap: 0.65rem;
  align-items: center;
  min-block-size: 8rem;
  padding: 1.1rem;
}

.udi-home-mockup .udi-step-card .udi-feature-icon {
  justify-self: center;
  margin: 0;
  font-size: 2.35rem !important;
  line-height: 1;
}

.udi-home-mockup .udi-step-number {
  position: static;
  display: block;
  align-self: stretch;
  inline-size: auto;
  block-size: auto;
  padding-block-start: 0.15rem;
  border-inline-end: 1px solid var(--udi-mockup-line);
  border-radius: 0;
  background: transparent;
  color: var(--udi-mockup-blue);
  font-size: 0.85rem;
}

.udi-home-mockup .udi-step-card h3,
.udi-home-mockup .udi-feature-card h3 {
  margin-block-end: 0.35rem;
  font-size: 1.05rem;
}

.udi-home-mockup .udi-step-card p,
.udi-home-mockup .udi-feature-card p {
  margin: 0;
  color: #536279;
  font-size: 0.95rem;
  line-height: 1.55;
}

.udi-home-mockup .udi-benefits-heading {
  margin-block-start: 1rem;
}

.udi-home-mockup .udi-feature-card {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.75rem;
  padding: 1.15rem;
  text-align: start;
}

.udi-home-mockup .udi-feature-card .udi-feature-icon {
  justify-self: center;
  margin: 0;
  font-size: 2.1rem !important;
  line-height: 1;
}

.udi-home-mockup .udi-home-details {
  max-inline-size: 53rem;
  margin: 1.25rem auto 0;
  color: #52627a;
  font-size: 0.95rem;
  text-align: center;
}

.udi-home-mockup .udi-home-details summary {
  cursor: pointer;
  color: #3d6689;
  font-weight: 600;
}

.udi-home-mockup .udi-home-details-body {
  margin-block-start: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--udi-mockup-line);
  border-radius: 0.75rem;
  text-align: start;
}

.udi-home-mockup .udi-home-details-body h3 {
  font-size: 1.1rem;
}

.udi-home-mockup .udi-home-details-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.25rem;
  margin-block-start: 1rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--udi-mockup-line);
  font-weight: 600;
}

.udi-home-mockup .udi-method-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  list-style: none;
}

.udi-home-mockup .udi-home-reviews {
  padding: 2.3rem 0 2.5rem;
  background: linear-gradient(90deg, #edf6fd, #f7fbff 50%, #eaf5fd);
}

.udi-home-mockup .udi-review-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-template-rows: repeat(3, auto);
  gap: 0.65rem;
}

.udi-home-mockup .udi-review-grid .card {
  border: 1px solid rgba(216, 225, 235, 0.8);
  border-radius: 0.7rem;
  box-shadow: none;
}

.udi-home-mockup .udi-review-featured {
  grid-row: 1 / 4;
}

.udi-home-mockup .udi-review-featured .card-body {
  justify-content: center;
  padding: 2rem 1.65rem;
}

.udi-home-mockup .udi-review-small .card-body {
  padding: 0.9rem 1.2rem;
}

.udi-home-mockup .udi-review-grid p {
  margin-block-end: 0.65rem;
  color: #314158;
  font-size: 0.96rem;
  line-height: 1.55;
}

.udi-home-mockup .udi-review-small p {
  font-size: 0.9rem;
  line-height: 1.55;
}

.udi-home-mockup .udi-quote-icon {
  margin-block-end: 0.75rem;
  font-size: 1.8rem;
}

.udi-home-mockup .udi-review-name {
  color: #40516a;
  font-size: 0.85rem;
}

.udi-home-mockup .udi-home-plus {
  padding: 2.5rem 0;
  background: #fff;
}

.udi-home-mockup .udi-plus-dashboard {
  overflow: hidden;
  border: 1px solid var(--udi-mockup-line);
  border-radius: 0.7rem;
  background: #fff;
  box-shadow: 0 0.75rem 1.5rem rgba(31, 55, 83, 0.1);
}

.udi-home-mockup .udi-plus-dashboard-body {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  min-block-size: 15.8rem;
}

.udi-home-mockup .udi-plus-sidebar {
  padding: 0.75rem 0.55rem;
  border-inline-end: 1px solid #e4eaf0;
  background: #f8fafc;
}

.udi-home-mockup .udi-plus-sidebar span {
  display: block;
  block-size: 0.38rem;
  margin-block-end: 0.8rem;
  border-radius: 1rem;
  background: #d6e5f3;
}

.udi-home-mockup .udi-plus-content {
  padding: 0.9rem;
}

.udi-home-mockup .udi-plus-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-block-end: 0.8rem;
}

.udi-home-mockup .udi-plus-metrics span {
  padding: 0.65rem 0.35rem;
  border-radius: 0.35rem;
  background: #f6f8fa;
  text-align: center;
}

.udi-home-mockup .udi-plus-metrics small,
.udi-home-mockup .udi-plus-metrics strong {
  display: block;
}

.udi-home-mockup .udi-plus-metrics small {
  color: #68788e;
  font-size: 0.48rem;
}

.udi-home-mockup .udi-plus-metrics strong {
  color: var(--udi-mockup-navy);
  font-size: 0.7rem;
}

.udi-home-mockup .udi-plus-charts {
  display: grid;
  grid-template-columns: 1.5fr 0.8fr;
  gap: 0.7rem;
  block-size: 8.8rem;
}

.udi-home-mockup .udi-line-chart,
.udi-home-mockup .udi-donut-chart {
  position: relative;
  border: 1px solid #e6ebf0;
  border-radius: 0.4rem;
  background: repeating-linear-gradient(to bottom, #fff 0, #fff 1.7rem, #edf1f5 1.75rem);
}

.udi-home-mockup .udi-line-chart b {
  position: absolute;
  inset: 2rem 1.2rem 1.35rem;
  transform: skewY(20deg);
  border-block-end: 0.18rem solid var(--udi-mockup-blue);
}

.udi-home-mockup .udi-donut-chart {
  display: grid;
  place-items: center;
  background: #fff;
}

.udi-home-mockup .udi-donut-chart::before {
  content: "";
  inline-size: 5rem;
  block-size: 5rem;
  border: 0.75rem solid #dfeaf4;
  border-block-start-color: var(--udi-mockup-blue);
  border-inline-end-color: var(--udi-mockup-blue);
  border-radius: 50%;
  transform: rotate(25deg);
}

.udi-home-mockup .udi-donut-chart strong {
  position: absolute;
  color: var(--udi-mockup-navy);
  font-size: 0.75rem;
}

.udi-home-mockup .udi-home-plus h2 {
  margin-block-end: 1rem;
  font-size: clamp(1.9rem, 2.5vw, 2.2rem);
}

.udi-home-mockup .udi-plus-list {
  display: grid;
  gap: 0.65rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.udi-home-mockup .udi-plus-list li {
  color: #27374f;
  font-size: 1rem;
}

.udi-home-mockup .udi-plus-list .icon-base {
  margin-inline-end: 0.5rem;
  color: var(--udi-mockup-blue);
  font-size: 1.05rem !important;
  vertical-align: -0.18em;
}

.udi-home-mockup .udi-home-plus .btn {
  min-inline-size: 12rem;
}

.udi-home-mockup .udi-home-final-cta {
  padding: 2.2rem 0;
  background: linear-gradient(110deg, #102342, #0e1b32);
}

.udi-home-mockup .udi-home-final-cta h2 {
  margin-block-end: 1.25rem;
  color: #fff;
  font-size: clamp(1.9rem, 2.5vw, 2.2rem);
}

.udi-home-mockup .udi-home-final-cta .btn {
  min-inline-size: 14rem;
}

@media (max-width: 991.98px) {
  .udi-home-mockup .udi-home-hero {
    padding-block-start: 9rem;
  }
  .udi-home-mockup .udi-hero-row {
    padding-block-end: 1rem;
  }
  .udi-home-mockup .udi-home-hero .col-lg-6:first-child {
    text-align: center;
  }
  .udi-home-mockup .udi-hero-copy,
  .udi-home-mockup .udi-hero-actions {
    margin-inline: auto;
  }
  .udi-home-mockup .udi-hero-trust {
    justify-content: center;
  }
  .udi-home-mockup .udi-laptop {
    inline-size: 100%;
    margin: 2rem auto 0;
  }
  .udi-home-mockup .udi-proof-item {
    padding-inline: 0.7rem;
  }
  .udi-home-mockup .udi-proof-item .icon-base {
    flex-basis: 3.5rem;
    inline-size: 3.5rem;
    font-size: 2.5rem !important;
  }
  .udi-home-mockup .udi-calculator-layout {
    grid-template-columns: 1fr;
  }
  .udi-home-mockup .udi-quick-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .udi-home-mockup .udi-quick-results h3 {
    grid-column: 1 / -1;
  }
  .udi-home-mockup .udi-quick-results > div {
    margin: 0;
    padding: 1rem 1.2rem;
    border-block-end: 0;
    border-inline-end: 1px solid #dfe6ee;
  }
  .udi-home-mockup .udi-quick-results > div:last-child {
    border-inline-end: 0;
  }
}

@media (max-width: 767.98px) {
  .udi-home-mockup .udi-home-hero {
    padding-block-start: 8.5rem;
  }
  .udi-home-mockup .udi-home-hero .hero-title {
    font-size: clamp(2.35rem, 10vw, 3.15rem);
  }
  .udi-home-mockup .udi-hero-trust {
    display: grid;
    gap: 0.35rem;
  }
  .udi-home-mockup .udi-hero-trust span + span::before {
    display: none;
  }
  .udi-home-mockup .udi-proof-bar {
    grid-template-columns: repeat(2, 1fr);
    transform: translateY(35%);
  }
  .udi-home-mockup .udi-proof-item {
    min-block-size: 5.2rem;
  }
  .udi-home-mockup .udi-proof-item + .udi-proof-item::before {
    inset-block: 1rem;
  }
  .udi-home-mockup .udi-proof-item:nth-child(3)::before {
    inset: 0.35rem 1rem auto;
    inline-size: auto;
    block-size: 1px;
  }
  .udi-home-mockup .udi-home-calculator {
    padding-block-start: 6.4rem;
  }
  .udi-home-mockup .udi-quick-calculator > .card-body {
    padding: 1.25rem;
  }
  .udi-home-mockup .udi-quick-debt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-end: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--udi-mockup-line);
    border-radius: 0.65rem;
  }
  .udi-home-mockup .udi-quick-debt:not(:first-child) label {
    visibility: visible;
  }
  .udi-home-mockup .udi-quick-name,
  .udi-home-mockup .udi-quick-field:nth-child(4) {
    grid-column: 1 / -1;
  }
  .udi-home-mockup .udi-calculator-controls {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .udi-home-mockup .udi-quick-results {
    grid-template-columns: 1fr;
  }
  .udi-home-mockup .udi-quick-results > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-inline-end: 0;
    border-block-end: 1px solid #dfe6ee;
  }
  .udi-home-mockup .udi-quick-results span {
    margin: 0;
  }
  .udi-home-mockup .udi-step-card {
    grid-template-columns: 2.8rem 1.1rem 1fr;
    min-block-size: 0;
  }
  .udi-home-mockup .udi-step-card .udi-feature-icon {
    font-size: 2.2rem !important;
  }
  .udi-home-mockup .udi-feature-card {
    grid-template-columns: 2.65rem 1fr;
  }
  .udi-home-mockup .udi-feature-card .udi-feature-icon {
    font-size: 2rem !important;
  }
  .udi-home-mockup .udi-review-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .udi-home-mockup .udi-review-featured {
    grid-row: auto;
  }
  .udi-home-mockup .udi-home-plus .col-lg-6:last-child {
    text-align: center;
  }
  .udi-home-mockup .udi-plus-list {
    display: inline-grid;
    text-align: start;
  }
}

@media (max-width: 575.98px) {
  .udi-home-mockup .container {
    padding-inline: 1rem;
  }
  .udi-home-mockup .udi-laptop-screen {
    padding: 0.35rem;
    border-width: 0.18rem;
    border-block-start-width: 0.55rem;
  }
  .udi-home-mockup .udi-placeholder-sidebar {
    inline-size: 3.7rem;
  }
  .udi-home-mockup .udi-placeholder-stats small {
    display: none;
  }
  .udi-home-mockup .udi-proof-item {
    gap: 0.45rem;
    padding: 0.75rem 0.45rem;
  }
  .udi-home-mockup .udi-proof-item .icon-base {
    flex-basis: 2.75rem;
    inline-size: 2.75rem;
    font-size: 2.1rem !important;
  }
  .udi-home-mockup .udi-proof-item strong {
    font-size: 1.15rem;
  }
  .udi-home-mockup .udi-proof-item small {
    font-size: 0.78rem;
  }
  .udi-home-mockup .udi-centered-heading,
  .udi-home-mockup .udi-home-plus h2,
  .udi-home-mockup .udi-home-final-cta h2 {
    font-size: 1.7rem;
  }
  .udi-home-mockup .udi-step-card {
    grid-template-columns: 2.55rem 1rem 1fr;
    gap: 0.5rem;
  }
  .udi-home-mockup .udi-step-card .udi-feature-icon {
    font-size: 2.05rem !important;
  }
  .udi-home-mockup .udi-feature-card {
    grid-template-columns: 2.4rem 1fr;
  }
  .udi-home-mockup .udi-feature-card .udi-feature-icon {
    font-size: 1.9rem !important;
  }
  .udi-home-mockup .udi-method-list {
    grid-template-columns: 1fr;
  }
  .udi-home-mockup .udi-plus-dashboard-body {
    grid-template-columns: 3.4rem 1fr;
    min-block-size: 12rem;
  }
  .udi-home-mockup .udi-plus-charts {
    block-size: 6rem;
  }
  .udi-home-mockup .udi-home-final-cta .btn {
    min-inline-size: 0;
    inline-size: 100%;
  }
}

/* ========================================================================
   Editorial article pages @2026.08.13-1
   Scoped to .udi-article so calculators, auth pages, the homepage, and the
   shared page-card contract retain their existing geometry.
   ======================================================================== */

.udi-article {
  --udi-article-blue: #5c9acf;
  --udi-article-blue-dark: #3d6689;
  --udi-article-navy: #102342;
  --udi-article-line: rgba(61, 102, 137, 0.2);
  --udi-article-soft: rgba(92, 154, 207, 0.08);
  max-inline-size: 68rem;
  margin-inline: auto;
  color: var(--bs-body-color);
  font-size: 1.05rem;
  line-height: 1.75;
}

.udi-article p,
.udi-article li {
  text-wrap: pretty;
}

.udi-article a:not(.btn) {
  color: var(--udi-article-blue);
  font-weight: 600;
  text-decoration-color: rgba(92, 154, 207, 0.45);
  text-underline-offset: 0.16em;
}

.udi-article a:not(.btn):hover {
  color: #4b88bb;
  text-decoration-color: currentColor;
}

.udi-article-intro {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  margin-block-end: 1.75rem;
  padding: 1.75rem 1.9rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(92, 154, 207, 0.12), rgba(168, 203, 232, 0.05));
}

.udi-article-intro-icon,
.udi-article-cta-icon {
  display: grid;
  place-items: center;
  inline-size: 4.25rem;
  block-size: 4.25rem;
  border-radius: 0.9rem;
  background: #fff;
  color: var(--udi-article-blue-dark);
  box-shadow: 0 0.5rem 1.2rem rgba(38, 60, 85, 0.1);
}

.udi-article-intro-icon .icon-base,
.udi-article-cta-icon .icon-base {
  font-size: 2.25rem !important;
}

.udi-article-kicker {
  margin-block-end: 0.35rem;
  color: var(--udi-article-blue-dark);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  line-height: 1.3;
  text-transform: uppercase;
}

.udi-article .udi-article-lead {
  margin: 0;
  color: var(--bs-heading-color);
  font-size: 1.2rem;
  font-weight: 450;
  line-height: 1.65;
}

.udi-article-keypoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  margin-block: 1.9rem 0.25rem;
}

.udi-article-keypoints > div {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
  min-block-size: 5rem;
  padding: 1rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.8rem;
  background: var(--bs-card-bg);
  color: var(--bs-heading-color);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.45;
}

.udi-article-keypoints .icon-base {
  color: var(--udi-article-blue);
  font-size: 1.65rem !important;
}

.udi-article-section {
  padding-block-start: 2.8rem;
}

.udi-article-section > h2,
.udi-article-section > h3 {
  position: relative;
  margin: 0 0 1.25rem;
  padding-block-end: 0.85rem;
  border-block-end: 1px solid var(--udi-article-line);
  color: var(--bs-heading-color);
  line-height: 1.3;
}

.udi-page-card .udi-article-section > h2 {
  font-size: clamp(1.4rem, 1.25rem + 0.42vw, 1.65rem);
}

.udi-page-card .udi-article-section > h3 {
  font-size: clamp(1.25rem, 1.15rem + 0.28vw, 1.4rem);
}

.udi-article-section > h2::after,
.udi-article-section > h3::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 3.25rem;
  block-size: 2px;
  background: var(--udi-article-blue);
}

.udi-article-step > h2 {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
}

.udi-article-step-number {
  display: grid;
  place-items: center;
  inline-size: 2.7rem;
  block-size: 2.7rem;
  border-radius: 50%;
  background: rgba(92, 154, 207, 0.13);
  color: var(--udi-article-blue-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.udi-article ul {
  padding-inline-start: 1.4rem;
}

.udi-article li::marker {
  color: var(--udi-article-blue-dark);
}

.udi-article li + li {
  margin-block-start: 0.75rem;
}

.udi-article-choice-list {
  display: grid;
  gap: 0.8rem;
  margin-block: 1.25rem;
  padding: 0;
  list-style: none;
}

.udi-article-choice-list li {
  position: relative;
  margin: 0;
  padding: 1rem 1rem 1rem 3rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.75rem;
  background: var(--udi-article-soft);
}

.udi-article-choice-list li::before {
  content: "\2713";
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  display: grid;
  place-items: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background: var(--udi-article-blue);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.udi-article-cta-card {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: center;
  margin-block-start: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(92, 154, 207, 0.1), rgba(255, 255, 255, 0));
  box-shadow: 0 0.75rem 1.8rem rgba(38, 60, 85, 0.08);
}

.udi-page-card .udi-article-cta-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
}

.udi-article-cta-card p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.92rem;
  line-height: 1.5;
}

.udi-article-table-wrap {
  margin-block: 1.35rem 1.6rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.8rem;
}

.udi-article-table > :not(caption) > * > * {
  padding: 0.9rem 1rem;
}

.udi-article-table thead th {
  border-block-end-color: var(--udi-article-line);
  background: var(--udi-article-soft);
  color: var(--bs-heading-color);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.udi-article-table tbody tr:last-child td {
  border-block-end: 0;
}

.udi-article-note,
.udi-article-inline-cta,
.udi-article-warning,
.udi-article-support-panel,
.udi-article-reassurance {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  margin-block: 1.35rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.8rem;
  background: var(--udi-article-soft);
}

.udi-article-note > .icon-base,
.udi-article-inline-cta > .icon-base,
.udi-article-warning > .icon-base,
.udi-article-support-panel > .icon-base,
.udi-article-reassurance > .icon-base {
  margin-block-start: 0.08rem;
  color: var(--udi-article-blue-dark);
  font-size: 1.75rem !important;
}

.udi-article-note p,
.udi-article-inline-cta p,
.udi-article-warning p,
.udi-article-support-panel p,
.udi-article-reassurance p {
  margin: 0;
}

.udi-article-support-panel p + p {
  margin-block-start: 0.9rem;
}

.udi-article-inline-cta {
  align-items: center;
  background: rgba(92, 154, 207, 0.13);
  color: var(--bs-heading-color);
}

.udi-article-warning {
  border-inline-start: 4px solid #d79b45;
  background: rgba(215, 155, 69, 0.08);
}

.udi-article-warning > .icon-base {
  color: #b8751f;
}

.udi-article-warning-list {
  margin: 0;
  padding-inline-start: 1.15rem !important;
}

.udi-article-reassurance {
  border-inline-start: 4px solid var(--udi-article-blue);
}

.udi-article-split-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 1.25rem;
}

.udi-article-mini-card {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  padding: 1.25rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.8rem;
  background: var(--bs-card-bg);
}

.udi-article-mini-card > .icon-base {
  color: var(--udi-article-blue);
  font-size: 1.75rem !important;
}

.udi-article-mini-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
}

.udi-article-faq .accordion {
  display: grid;
  gap: 0.75rem;
}

.udi-article-faq .accordion-item {
  overflow: hidden;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.75rem;
  background: var(--bs-card-bg);
}

.udi-page-card .udi-article-faq .accordion-header {
  margin: 0;
  font-size: inherit;
}

.udi-article-faq .accordion-button {
  padding: 1rem 1.15rem;
  color: var(--bs-heading-color);
  font-size: 0.96rem;
  font-weight: 650;
  line-height: 1.45;
}

.udi-article-faq .accordion-button:not(.collapsed) {
  background: var(--udi-article-soft);
  color: var(--udi-article-blue-dark);
  box-shadow: inset 0 -1px 0 var(--udi-article-line);
}

.udi-article-faq .accordion-body {
  padding: 1rem 1.15rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.udi-article-final-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  margin-block-start: 3rem;
  padding: 1.8rem 2rem;
  border-radius: 1rem;
  background: linear-gradient(115deg, #102342, #0e1b32);
  box-shadow: 0 1rem 2.25rem rgba(14, 27, 50, 0.18);
}

.udi-article-final-cta p {
  margin: 0;
  color: #dce8f4;
  font-size: 0.95rem;
  line-height: 1.6;
}

.udi-article-final-cta .udi-article-final-cta-title {
  margin-block-end: 0.35rem;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.35;
}

.udi-article-final-cta .udi-article-final-cta-note {
  margin-block-start: 0.5rem;
  font-size: 0.82rem;
}

.udi-article-final-cta .udi-article-final-cta-note a {
  color: #a8cbe8;
  text-decoration-color: rgba(168, 203, 232, 0.55);
}

.udi-article-final-cta .btn {
  min-inline-size: 15rem;
}

[data-bs-theme="dark"] .udi-article {
  --udi-article-blue-dark: #a8cbe8;
  --udi-article-line: rgba(168, 203, 232, 0.2);
  --udi-article-soft: rgba(92, 154, 207, 0.12);
}

[data-bs-theme="dark"] .udi-article a:not(.btn) {
  color: #a8cbe8;
}

[data-bs-theme="dark"] .udi-article a:not(.btn):hover {
  color: #d5e8f7;
}

[data-bs-theme="dark"] .udi-article-intro-icon,
[data-bs-theme="dark"] .udi-article-cta-icon {
  background: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .udi-article-cta-card {
  background: linear-gradient(135deg, rgba(92, 154, 207, 0.14), rgba(37, 41, 60, 0));
}

[data-bs-theme="dark"] .udi-article-warning {
  background: rgba(215, 155, 69, 0.1);
}

@media (max-width: 767.98px) {
  .udi-article-cta-card,
  .udi-article-final-cta {
    grid-template-columns: 1fr;
  }
  .udi-article-cta-card .btn,
  .udi-article-final-cta .btn {
    inline-size: 100%;
  }
}

@media (max-width: 575.98px) {
  .udi-article {
    font-size: 1rem;
    line-height: 1.7;
  }
  .udi-article-intro {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.25rem;
  }
  .udi-article-intro-icon,
  .udi-article-cta-icon {
    inline-size: 3.5rem;
    block-size: 3.5rem;
  }
  .udi-article-intro-icon .icon-base,
  .udi-article-cta-icon .icon-base {
    font-size: 1.9rem !important;
  }
  .udi-article .udi-article-lead {
    font-size: 1.08rem;
    line-height: 1.65;
  }
  .udi-article-keypoints,
  .udi-article-split-cards {
    grid-template-columns: 1fr;
  }
  .udi-article-keypoints > div {
    min-block-size: 0;
  }
  .udi-article-section {
    padding-block-start: 2.25rem;
  }
  .udi-page-card .udi-article-section > h2 {
    font-size: 1.35rem;
  }
  .udi-page-card .udi-article-section > h3 {
    font-size: 1.25rem;
  }
  .udi-article-step > h2 {
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: 0.65rem;
  }
  .udi-article-step-number {
    inline-size: 2.35rem;
    block-size: 2.35rem;
    font-size: 0.68rem;
  }
  .udi-article-cta-card,
  .udi-article-final-cta {
    gap: 1rem;
    padding: 1.25rem;
  }
  .udi-article-note,
  .udi-article-inline-cta,
  .udi-article-warning,
  .udi-article-support-panel,
  .udi-article-reassurance,
  .udi-article-mini-card {
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 1rem;
  }
  .udi-article-note > .icon-base,
  .udi-article-inline-cta > .icon-base,
  .udi-article-warning > .icon-base,
  .udi-article-support-panel > .icon-base,
  .udi-article-reassurance > .icon-base,
  .udi-article-mini-card > .icon-base {
    font-size: 1.5rem !important;
  }
  .udi-article-table > :not(caption) > * > * {
    padding: 0.75rem;
    white-space: nowrap;
  }
  .udi-article-faq .accordion-button,
  .udi-article-faq .accordion-body {
    padding-inline: 1rem;
  }
  .udi-article-final-cta .btn {
    min-inline-size: 0;
  }
}

/* Feeling Overwhelmed by Debt @2026.08.14-9
   The page no longer renders the two decorative boxed icons, so its intro and
   calculator CTA use the available width without retaining empty icon tracks. */
.udi-overwhelmed-page .udi-article-intro {
  grid-template-columns: minmax(0, 1fr);
}

.udi-overwhelmed-page .udi-article-cta-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.udi-overwhelmed-page a:not(.btn) {
  color: #5c9acf;
}

.udi-overwhelmed-page a:not(.btn):hover {
  color: #4b88bb;
}

[data-bs-theme="dark"] .udi-overwhelmed-page a:not(.btn) {
  color: #a8cbe8;
}

[data-bs-theme="dark"] .udi-overwhelmed-page a:not(.btn):hover {
  color: #d5e8f7;
}

@media (max-width: 767.98px) {
  .udi-overwhelmed-page .udi-article-cta-card {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========================================================================
   How Undebt.it works @2026.08.13-2
   Vuexy's documented Bootstrap carousel, styled as a product walkthrough.
   ======================================================================== */

.udi-how-page .udi-how-intro > h2 {
  position: relative;
  margin: 0 0 1.25rem;
  padding-block-end: 0.85rem;
  border-block-end: 1px solid var(--udi-article-line);
  color: var(--bs-heading-color);
  font-size: clamp(1.4rem, 1.25rem + 0.42vw, 1.65rem);
  line-height: 1.3;
}

.udi-how-page .udi-how-intro > h2::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 3.25rem;
  block-size: 2px;
  background: var(--udi-article-blue);
}

.udi-how-steps,
.udi-how-feature-grid {
  display: grid;
  gap: 1.35rem;
}

.udi-how-step {
  display: grid;
  grid-template-areas: "media copy";
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 1.65rem;
  align-items: center;
  padding: 1.35rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 1rem;
  background: var(--bs-card-bg);
  box-shadow: 0 0.8rem 2rem rgba(38, 60, 85, 0.07);
}

.udi-how-step--reverse {
  grid-template-areas: "copy media";
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

.udi-how-step-media {
  grid-area: media;
  min-inline-size: 0;
}

.udi-how-step-copy {
  grid-area: copy;
  min-inline-size: 0;
}

.udi-how-step-copy > h3,
.udi-how-feature-copy > h3,
.udi-how-method-card > h3 {
  margin: 0 0 0.9rem;
  color: var(--bs-heading-color);
  font-size: 1.22rem;
  font-weight: 650;
  line-height: 1.4;
}

.udi-how-step-label {
  display: table;
  margin-block-end: 0.55rem;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  background: rgba(92, 154, 207, 0.13);
  color: var(--udi-article-blue-dark);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.udi-how-step-copy p:last-of-type,
.udi-how-feature-copy p:last-of-type,
.udi-how-method-card p:last-child {
  margin-block-end: 0;
}

.udi-how-step-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-block-start: 1.1rem;
}

.udi-how-step-actions .btn {
  padding: 0.75rem 0.9rem;
  line-height: 1.3;
}

.udi-how-page .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
}

.udi-how-page .btn-outline-primary {
  --bs-btn-color: #3d6689;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #3d6689;
}

.udi-how-page .btn-primary:hover,
.udi-how-page .btn-primary:focus-visible,
.udi-how-page .btn-primary:active,
.udi-how-page .btn-primary.active,
.udi-how-page .btn-outline-primary:hover,
.udi-how-page .btn-outline-primary:focus-visible,
.udi-how-page .btn-outline-primary:active,
.udi-how-page .btn-outline-primary.active {
  color: #fff;
}

.udi-how-page .btn-primary span,
.udi-how-page .btn-primary small,
.udi-how-page .btn-outline-primary span,
.udi-how-page .btn-outline-primary small {
  color: inherit;
}

.udi-how-step-actions small {
  margin-block-start: 0.18rem;
  font-size: 0.72rem;
}

.udi-how-carousel,
.udi-how-media-frame {
  overflow: hidden;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.85rem;
  background: #f6f8fb;
  box-shadow: 0 0.65rem 1.55rem rgba(38, 60, 85, 0.12);
}

.udi-how-carousel-link,
.udi-how-media-frame > a {
  background: #f6f8fb;
}

.udi-how-carousel img,
.udi-how-media-frame img {
  display: block;
  inline-size: 100%;
  block-size: clamp(15rem, 29vw, 22rem);
  object-fit: contain;
  object-position: center;
}

.udi-how-carousel-caption,
.udi-how-media-frame figcaption {
  min-block-size: 4.6rem;
  margin: 0;
  padding: 0.8rem 1rem 2.25rem;
  border-block-start: 1px solid var(--udi-article-line);
  background: var(--bs-card-bg);
  color: var(--bs-body-color);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

.udi-how-media-frame figcaption {
  min-block-size: auto;
  padding-block-end: 0.8rem;
}

.udi-how-carousel .carousel-indicators {
  inset-block-end: 0.6rem;
  gap: 0.22rem;
  margin-block-end: 0;
}

.udi-how-carousel .carousel-indicators [data-bs-target] {
  inline-size: 1.65rem;
  block-size: 0.25rem;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background-color: var(--udi-article-blue-dark);
}

.udi-how-carousel .carousel-control-prev,
.udi-how-carousel .carousel-control-next {
  inset-block-end: 4.6rem;
  inline-size: 14%;
  opacity: 0.82;
}

.udi-how-carousel .carousel-control-prev:hover,
.udi-how-carousel .carousel-control-next:hover,
.udi-how-carousel .carousel-control-prev:focus-visible,
.udi-how-carousel .carousel-control-next:focus-visible {
  opacity: 1;
}

.udi-how-carousel .carousel-control-prev-icon,
.udi-how-carousel .carousel-control-next-icon {
  inline-size: 2.35rem;
  block-size: 2.35rem;
  border: 0.35rem solid var(--udi-article-navy);
  border-radius: 50%;
  background-color: var(--udi-article-navy);
  background-size: 62%;
  box-shadow: 0 0.35rem 0.8rem rgba(14, 27, 50, 0.24);
}

.udi-how-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.udi-how-method-card {
  padding: 1.25rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.85rem;
  background: var(--bs-card-bg);
}

.udi-how-method-card--wide {
  grid-column: span 2;
}

.udi-how-method-card > h3 {
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

.udi-how-method-number {
  display: grid;
  place-items: center;
  inline-size: 2.45rem;
  block-size: 2.45rem;
  border-radius: 50%;
  background: rgba(92, 154, 207, 0.13);
  color: var(--udi-article-blue-dark);
  font-size: 0.82rem;
  font-weight: 800;
}

.udi-how-method-card p {
  font-size: 0.96rem;
  line-height: 1.68;
}

.udi-how-video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.udi-how-video-card {
  overflow: hidden;
  padding: 1rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.9rem;
  background: var(--bs-card-bg);
  box-shadow: 0 0.65rem 1.55rem rgba(38, 60, 85, 0.09);
}

.udi-how-video-title {
  margin: 0;
  margin-block-end: 0.75rem;
  color: var(--bs-heading-color);
  font-size: 1.05rem;
  font-weight: 650;
}

.udi-how-video-card .ratio {
  overflow: hidden;
  border-radius: 0.65rem;
  background: var(--udi-article-navy);
}

.udi-how-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.udi-how-feature-card {
  display: flex;
  min-inline-size: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--udi-article-line);
  border-radius: 1rem;
  background: var(--bs-card-bg);
  box-shadow: 0 0.8rem 2rem rgba(38, 60, 85, 0.07);
}

.udi-how-feature-media .udi-how-carousel,
.udi-how-feature-media .udi-how-media-frame {
  border: 0;
  border-block-end: 1px solid var(--udi-article-line);
  border-radius: 0;
  box-shadow: none;
}

.udi-how-feature-media .udi-how-carousel img,
.udi-how-feature-media .udi-how-media-frame img {
  block-size: clamp(14rem, 26vw, 19rem);
}

.udi-how-feature-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.35rem;
}

.udi-how-feature-copy .btn {
  margin-block-start: auto;
}

[data-bs-theme="dark"] .udi-how-carousel,
[data-bs-theme="dark"] .udi-how-media-frame,
[data-bs-theme="dark"] .udi-how-carousel-link,
[data-bs-theme="dark"] .udi-how-media-frame > a {
  background: #f1f4f8;
}

[data-bs-theme="dark"] .udi-how-step,
[data-bs-theme="dark"] .udi-how-video-card,
[data-bs-theme="dark"] .udi-how-feature-card {
  box-shadow: 0 0.8rem 2rem rgba(0, 0, 0, 0.2);
}

[data-bs-theme="dark"] .udi-how-step-label,
[data-bs-theme="dark"] .udi-how-method-number {
  background: rgba(168, 203, 232, 0.12);
}

@media (max-width: 991.98px) {
  .udi-how-step,
  .udi-how-step--reverse {
    grid-template-areas:
      "media"
      "copy";
    grid-template-columns: minmax(0, 1fr);
  }
  .udi-how-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .udi-how-method-card--wide {
    grid-column: auto;
  }
  .udi-how-feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .udi-how-feature-media .udi-how-carousel img,
  .udi-how-feature-media .udi-how-media-frame img {
    block-size: clamp(17rem, 56vw, 26rem);
  }
}

@media (max-width: 575.98px) {
  .udi-how-page .udi-how-intro > h2 {
    font-size: 1.35rem;
  }
  .udi-how-step {
    gap: 1.15rem;
    padding: 0.9rem;
  }
  .udi-how-carousel img,
  .udi-how-media-frame img,
  .udi-how-feature-media .udi-how-carousel img,
  .udi-how-feature-media .udi-how-media-frame img {
    block-size: clamp(12rem, 65vw, 18rem);
  }
  .udi-how-carousel-caption,
  .udi-how-media-frame figcaption {
    font-size: 0.76rem;
  }
  .udi-how-carousel .carousel-control-prev-icon,
  .udi-how-carousel .carousel-control-next-icon {
    inline-size: 2rem;
    block-size: 2rem;
  }
  .udi-how-step-actions,
  .udi-how-method-grid,
  .udi-how-video-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .udi-how-step-actions .btn {
    inline-size: 100%;
  }
  .udi-how-method-card,
  .udi-how-feature-copy {
    padding: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .udi-how-carousel .carousel-item {
    transition: none;
  }
}

@media print {
  .udi-how-carousel .carousel-control-prev,
  .udi-how-carousel .carousel-control-next,
  .udi-how-carousel .carousel-indicators {
    display: none !important;
  }
  .udi-how-step,
  .udi-how-feature-card,
  .udi-how-method-card,
  .udi-how-video-card {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* Pricing authority-page gutter refinement @2026.08.13-6.
   Kept at the end so it intentionally supersedes the shared article measure. */
.udi-article.udi-pfr-page {
  max-inline-size: none;
  padding: 0.75rem clamp(1rem, 1.8vw, 1.5rem) 1rem;
}

@media (max-width: 575.98px) {
  .udi-article.udi-pfr-page {
    padding: 0.25rem 0 0.5rem;
  }
}

/* ========================================================================
   Basic information pages @2026.08.13-7
   A quiet shared shell with small page-specific refinements. Opening copy is
   intentionally ordinary article text by standing project decision.
   ======================================================================== */

.udi-article.udi-basic-page {
  max-inline-size: none;
  padding: 0.75rem clamp(1rem, 1.8vw, 1.5rem) 1rem;
  font-size: 1.0625rem;
}

.udi-basic-page > h2,
.udi-basic-section > h2,
.udi-basic-section > header > h2,
.udi-about-origin > h2,
.udi-about-version-header h3 {
  position: relative;
  margin: 0 0 1.25rem;
  padding-block-end: 0.8rem;
  border-block-end: 1px solid var(--udi-article-line);
  color: var(--bs-heading-color);
  line-height: 1.3;
}

.udi-page-card .udi-basic-page > h2,
.udi-page-card .udi-basic-section > h2,
.udi-page-card .udi-basic-section > header > h2,
.udi-page-card .udi-about-origin > h2 {
  font-size: clamp(1.42rem, 1.26rem + 0.42vw, 1.68rem);
}

.udi-page-card .udi-about-version-header h3 {
  font-size: clamp(1.28rem, 1.16rem + 0.3vw, 1.45rem);
}

.udi-basic-page > h2::after,
.udi-basic-section > h2::after,
.udi-basic-section > header > h2::after,
.udi-about-origin > h2::after,
.udi-about-version-header h3::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 3.25rem;
  block-size: 2px;
  background: var(--udi-article-blue);
}

.udi-basic-section {
  padding-block: 2.75rem 0.25rem;
}

.udi-basic-section + .udi-basic-section {
  margin-block-start: 2.75rem;
  border-block-start: 1px solid var(--udi-article-line);
}

.udi-basic-page .btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #5c9acf;
  --bs-btn-border-color: #5c9acf;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #3d6689;
  --bs-btn-hover-border-color: #3d6689;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #315674;
  --bs-btn-active-border-color: #315674;
}

.udi-basic-page .btn-primary:hover,
.udi-basic-page .btn-primary:focus-visible,
.udi-basic-page .btn-primary:active,
.udi-basic-page .btn-primary.active,
.udi-basic-page .btn-dark:hover,
.udi-basic-page .btn-dark:focus-visible,
.udi-basic-page .btn-dark:active,
.udi-basic-page .btn-dark.active {
  color: #fff;
}

/* About */
.udi-about-origin {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

.udi-about-origin > h2 {
  grid-column: 1 / -1;
}

.udi-about-origin-logo {
  display: block;
  inline-size: min(100%, 10.5rem);
  block-size: auto;
}

.udi-about-origin-copy p:last-child {
  margin-block-end: 0;
}

.udi-about-version {
  padding-block-start: 2.8rem;
}

.udi-about-version + .udi-about-version {
  margin-block-start: 2.8rem;
  border-block-start: 1px solid var(--udi-article-line);
}

.udi-about-version-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: center;
  margin-block-end: 1.25rem;
}

.udi-about-version-header h3 {
  margin-block-end: 0.45rem;
}

.udi-about-version-header p {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.udi-about-version-header img {
  inline-size: auto;
  max-inline-size: 15.625rem;
  max-block-size: 4.5rem;
  margin: 0 !important;
  object-fit: contain;
}

.udi-about-feature-columns {
  margin-block: 1.25rem;
}

.udi-about-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
  max-inline-size: 56rem;
  margin-block: 1.5rem 0 !important;
}

.udi-about-gallery > div {
  inline-size: auto;
  padding: 0;
}

.udi-about-gallery a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.65rem;
  background: var(--bs-card-bg);
}

.udi-about-gallery img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 0 !important;
  box-shadow: none !important;
  object-fit: cover;
  transition: transform 180ms ease;
}

.udi-about-gallery a:hover img,
.udi-about-gallery a:focus-visible img {
  transform: scale(1.025);
}

/* Support */
.udi-support-intro {
  max-inline-size: 76rem;
}

.udi-support-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block-start: 2rem;
}

.udi-support-option {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 1.5rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.9rem;
  background: var(--bs-card-bg);
}

.udi-support-option > h2 {
  margin: 0 0 0.9rem;
  color: var(--bs-heading-color);
  font-size: 1.3rem;
  line-height: 1.35;
}

.udi-support-option > p {
  flex: 1 1 auto;
}

.udi-support-option .btn-primary,
.udi-support-option form,
.udi-support-socials {
  align-self: flex-start;
  margin-block-start: 0.5rem;
}

.udi-support-option .btn-primary {
  min-inline-size: 13rem;
}

.udi-support-option .btn-primary .small {
  color: inherit;
}

.udi-support-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.udi-support-socials a {
  text-decoration: none;
}

.udi-support-socials .btn {
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.udi-support-thanks {
  margin: 2rem 0 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--udi-article-line);
  color: var(--bs-heading-color);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.6;
}

.udi-support-thanks small {
  color: inherit;
  font-size: inherit;
}

/* Affiliate and private label */
.udi-partnership-section:first-child {
  padding-block-start: 0;
}

.udi-partnership-section > h3 {
  margin-block: 2rem 1rem;
  color: var(--bs-heading-color);
  font-size: 1.25rem;
}

.udi-partnership-shot {
  display: block;
  inline-size: min(100%, 56rem);
  margin-block: 1.5rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.85rem !important;
  box-shadow: 0 0.75rem 2rem rgba(38, 60, 85, 0.1) !important;
}

.udi-basic-note {
  margin-block: 1.5rem;
  padding: 1rem 1.15rem;
  border-inline-start: 4px solid var(--udi-article-blue);
  background: var(--udi-article-soft);
}

.udi-basic-note strong {
  display: block;
  margin-block-end: 0.25rem;
  color: var(--bs-heading-color);
}

/* Privacy policy */
.udi-legal-page > h2 {
  margin-block-start: 2.75rem;
}

.udi-legal-page > h3 {
  margin-block: 2.2rem 0 0.8rem;
  color: var(--bs-heading-color);
  font-size: 1.2rem;
}

.udi-legal-page > h3::after {
  content: none;
}

.udi-legal-page #delete-info {
  scroll-margin-block-start: 7rem;
}

.udi-legal-page #ynab {
  margin-block-start: 3.5rem;
  padding-block-start: 1.75rem;
  border-block-start: 1px solid var(--udi-article-line);
  scroll-margin-block-start: 7rem;
}

.udi-legal-updated {
  margin-block-start: 2.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--udi-article-line);
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
  font-weight: 600;
}

[data-bs-theme="dark"] .udi-support-option,
[data-bs-theme="dark"] .udi-about-gallery a {
  background: rgba(255, 255, 255, 0.025);
}

@media (max-width: 767.98px) {
  .udi-about-origin {
    grid-template-columns: 1fr;
  }
  .udi-about-origin > h2 {
    grid-column: auto;
  }
  .udi-about-origin-logo {
    inline-size: 8.5rem;
  }
  .udi-about-version-header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .udi-about-version-header img {
    max-inline-size: 13rem;
  }
  .udi-support-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .udi-article.udi-basic-page {
    padding: 0.25rem 0 0.5rem;
    font-size: 1rem;
  }
  .udi-basic-section,
  .udi-about-version {
    padding-block-start: 2.25rem;
  }
  .udi-basic-section + .udi-basic-section,
  .udi-about-version + .udi-about-version {
    margin-block-start: 2.25rem;
  }
  .udi-about-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .udi-support-option {
    padding: 1.2rem;
  }
  .udi-support-option .btn-primary {
    inline-size: 100%;
    min-inline-size: 0;
  }
  .udi-partnership-shot {
    border-radius: 0.65rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .udi-about-gallery img {
    transition: none;
  }
}

@media print {
  .udi-article.udi-basic-page {
    padding: 0;
    font-size: 10.5pt;
  }
  .udi-support-grid {
    display: block;
  }
  .udi-support-option {
    margin-block-end: 1rem;
    break-inside: avoid;
    box-shadow: none;
  }
  .udi-support-socials,
  .udi-support-option form,
  .udi-basic-page .btn {
    display: none !important;
  }
  .udi-about-gallery img,
  .udi-partnership-shot {
    box-shadow: none !important;
  }
}

/* Original-style article gutters @2026.08.13-8.
   Shared by the first three editorial pages completed on 2026-08-13. */
.udi-article.udi-original-gutters {
  max-inline-size: none;
  padding: 0.75rem clamp(1rem, 1.8vw, 1.5rem) 1rem;
}

@media (max-width: 575.98px) {
  .udi-article.udi-original-gutters {
    padding: 0.25rem 0 0.5rem;
  }
}

/* Login + logoff authentication pair @2026.08.13-9 */
.udi-auth-page {
  --udi-auth-blue: #5c9acf;
  --udi-auth-blue-dark: #3979af;
  --udi-auth-navy: #10233f;
  --udi-auth-line: rgba(63, 98, 134, 0.2);
  --udi-auth-soft: rgba(92, 154, 207, 0.08);
  padding-block-start: 0.75rem;
}

.udi-auth-shell {
  inline-size: min(100%, 39rem);
  margin-inline: auto;
}

.udi-auth-alert {
  margin-block-end: 1.25rem;
  padding: 1.1rem 3rem 1.1rem 1.2rem;
  border: 1px solid var(--bs-alert-border-color);
  border-radius: 0.8rem;
  box-shadow: 0 0.5rem 1.5rem rgba(38, 60, 85, 0.08);
}

.udi-auth-alert .alert-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-block-end: 0.4rem;
  font-size: 1.05rem;
}

.udi-auth-alert p {
  font-size: 1rem;
  line-height: 1.55;
}

.udi-auth-alert img {
  max-inline-size: 100%;
  block-size: auto;
  margin-block-start: 0.75rem;
  border-radius: 0.65rem;
}

.udi-auth-panel {
  overflow: hidden;
  border: 1px solid var(--udi-auth-line);
  border-radius: 0.9rem;
  background: var(--bs-body-bg);
  box-shadow: 0 0.75rem 2rem rgba(38, 60, 85, 0.09);
}

.udi-auth-panel-header {
  padding: 1.2rem clamp(1.25rem, 3vw, 1.75rem);
  border-block-end: 1px solid var(--udi-auth-line);
  background: var(--udi-auth-soft);
  color: var(--udi-auth-navy);
  font-size: 1.05rem;
}

.udi-auth-panel-body {
  padding: clamp(1.35rem, 3vw, 1.85rem);
}

.udi-auth-form .form-label {
  margin-block-end: 0.45rem;
  color: var(--bs-heading-color);
  font-size: 0.96rem;
  font-weight: 600;
}

.udi-auth-input-group {
  min-block-size: 3.15rem;
}

.udi-auth-input-group .input-group-text {
  inline-size: 3.15rem;
  justify-content: center;
  border-color: var(--udi-auth-line);
  background: var(--udi-auth-soft);
  color: var(--udi-auth-blue-dark);
}

.udi-auth-input-group .form-control {
  min-block-size: 3.15rem;
  border-color: var(--udi-auth-line);
  font-size: 1rem;
}

.udi-auth-input-group:focus-within {
  border-radius: var(--bs-border-radius);
  box-shadow: 0 0 0 0.2rem rgba(92, 154, 207, 0.16);
}

.udi-auth-input-group:focus-within .input-group-text,
.udi-auth-input-group:focus-within .form-control {
  border-color: var(--udi-auth-blue);
  box-shadow: none;
}

.udi-auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block: 1.15rem 1rem;
}

.udi-auth-actions .form-check-label {
  color: var(--bs-body-color);
  font-size: 0.95rem;
}

.udi-auth-actions .btn {
  min-inline-size: 9rem;
  min-block-size: 2.8rem;
  margin: 0;
  font-weight: 600;
}

.udi-auth-links,
.udi-auth-account-note {
  margin: 0;
  color: var(--bs-secondary-color);
  font-size: 0.95rem;
  line-height: 1.55;
}

.udi-auth-links a,
.udi-auth-account-note a {
  font-weight: 600;
  text-underline-offset: 0.16em;
}

.udi-auth-links small,
.udi-auth-account-note small {
  font-size: inherit;
}

.udi-auth-magic {
  margin-block-start: 1.25rem;
  padding: 1.2rem;
  border: 1px solid var(--udi-auth-line);
  border-radius: 0.75rem;
  background: var(--udi-auth-soft);
}

.udi-auth-magic-copy {
  margin-block-end: 1rem;
  color: var(--bs-body-color);
  font-size: 0.95rem;
  line-height: 1.55;
}

.udi-auth-magic-copy small {
  font-size: inherit;
}

.udi-auth-page .li-social-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.4rem 0;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}

.udi-auth-page .li-social-divider::before,
.udi-auth-page .li-social-divider::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--udi-auth-line);
}

.udi-auth-social {
  text-align: center;
}

.udi-auth-social .li-google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  inline-size: 100%;
  min-block-size: 2.9rem;
  font-weight: 600;
}

.udi-auth-page .btn-primary {
  border-color: var(--udi-auth-blue);
  background: var(--udi-auth-blue);
  color: #fff;
}

.udi-auth-page .btn-primary:hover,
.udi-auth-page .btn-primary:focus-visible,
.udi-auth-page .btn-primary:active,
.udi-auth-page .btn-primary.active {
  border-color: #4b88bb;
  background: #4b88bb;
  color: #fff;
}

.udi-auth-page .btn-outline-primary {
  border-color: var(--udi-auth-blue-dark);
  color: var(--udi-auth-blue-dark);
}

.udi-auth-page .btn-outline-primary:hover,
.udi-auth-page .btn-outline-primary:focus-visible,
.udi-auth-page .btn-outline-primary:active,
.udi-auth-page .btn-outline-primary.active {
  border-color: var(--udi-auth-blue-dark);
  background: var(--udi-auth-blue-dark);
  color: #fff;
}

.udi-auth-page .btn-primary *,
.udi-auth-page .btn-outline-primary:hover *,
.udi-auth-page .btn-outline-primary:focus-visible *,
.udi-auth-page .btn-outline-primary:active * {
  color: inherit;
}

.udi-auth-account-note {
  margin-block-start: 1.1rem;
  padding-inline: 1rem;
  text-align: center;
}

[data-bs-theme="dark"] .udi-auth-page {
  --udi-auth-blue-dark: #8fc0e7;
  --udi-auth-navy: #d9ebf8;
  --udi-auth-line: rgba(168, 203, 232, 0.22);
  --udi-auth-soft: rgba(92, 154, 207, 0.12);
}

[data-bs-theme="dark"] .udi-auth-panel {
  background: var(--bs-body-bg);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.24);
}

[data-bs-theme="dark"] .udi-auth-page .btn-primary,
[data-bs-theme="dark"] .udi-auth-page .btn-primary:hover,
[data-bs-theme="dark"] .udi-auth-page .btn-primary:focus-visible,
[data-bs-theme="dark"] .udi-auth-page .btn-primary:active,
[data-bs-theme="dark"] .udi-auth-page .btn-outline-primary:hover,
[data-bs-theme="dark"] .udi-auth-page .btn-outline-primary:focus-visible,
[data-bs-theme="dark"] .udi-auth-page .btn-outline-primary:active {
  border-color: #79adde;
  background: #79adde;
  color: #10233f;
}

[data-bs-theme="dark"] .udi-auth-page .btn-outline-primary {
  border-color: #8fc0e7;
  color: #b9d9f1;
}

@media (max-width: 575.98px) {
  .udi-auth-page {
    padding-block-start: 0.25rem;
  }
  .udi-auth-panel-body {
    padding: 1.2rem;
  }
  .udi-auth-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .udi-auth-actions .btn {
    inline-size: 100%;
  }
  .udi-auth-links small {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
  }
  .udi-auth-links [aria-hidden="true"] {
    display: none;
  }
  .udi-auth-magic {
    padding: 1rem;
  }
}

@media print {
  .udi-auth-panel {
    box-shadow: none;
  }
  .udi-auth-page .btn,
  .udi-auth-page .form-check,
  .udi-auth-page .li-social-divider,
  .udi-auth-account-note {
    display: none !important;
  }
}

/* ========================================================================
   Feature-specific guides @2026.08.14-2
   Product walkthroughs keep the approved full-card editorial gutters and
   ordinary opening paragraphs; visual hierarchy begins with the headings.
   ======================================================================== */

.udi-article.udi-feature-guide {
  font-size: 0.9375rem;
  line-height: 1.65;
}

.udi-page-card .udi-feature-guide > h2 {
  font-size: 1.375rem;
}

.udi-feature-guide > h2:not(:first-child) {
  margin-block-start: 3rem !important;
}

.udi-feature-guide > h3,
.udi-feature-section > h3 {
  position: relative;
  margin: 2.8rem 0 1.25rem !important;
  padding-block-end: 0.8rem;
  border-block-end: 1px solid var(--udi-article-line);
  color: var(--bs-heading-color);
  font-size: 1.25rem;
  line-height: 1.3;
}

.udi-feature-guide > h3::after,
.udi-feature-section > h3::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  inline-size: 3.25rem;
  block-size: 2px;
  background: var(--udi-article-blue);
}

.udi-feature-section:first-of-type > h3 {
  margin-block-start: 2.8rem !important;
}

.udi-feature-note {
  margin-block: 1.25rem;
  padding: 0.95rem 1.1rem;
  border-inline-start: 4px solid var(--udi-article-blue);
  background: var(--udi-article-soft);
}

.udi-feature-media {
  margin: 1.5rem 0 0;
}

.udi-feature-media img,
.udi-feature-shot {
  display: block;
  inline-size: auto;
  max-inline-size: min(100%, 58rem);
  block-size: auto;
  margin: 1.5rem auto !important;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.8rem !important;
  box-shadow: 0 0.75rem 2rem rgba(38, 60, 85, 0.1) !important;
}

.udi-feature-shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
  margin-block: 1.5rem 2rem;
}

.udi-feature-shot-grid .udi-feature-shot {
  inline-size: 100%;
  max-inline-size: none;
  margin: 0 !important;
}

.udi-savings-page > .udi-feature-shot {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.udi-ynab-page > .udi-feature-shot {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.udi-blaster-page > .udi-feature-shot {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.udi-ai-page .udi-feature-media img {
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
}

.udi-ai-page a:not(.btn) {
  color: var(--udi-article-blue);
}

.udi-ai-page a:not(.btn):hover {
  color: #4b88bb;
}

.udi-feature-summary-grid,
.udi-feature-requirements,
.udi-feature-method-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-block: 1.35rem 1.75rem;
  padding: 0 !important;
  counter-reset: udi-feature-item;
  list-style: none;
}

.udi-feature-summary-grid > li,
.udi-feature-requirements > li,
.udi-feature-method-list > li {
  position: relative;
  margin: 0 !important;
  padding: 1rem 1.1rem 1rem 3.25rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.8rem;
  background: var(--bs-card-bg);
}

.udi-feature-summary-grid > li::before,
.udi-feature-requirements > li::before,
.udi-feature-method-list > li::before {
  counter-increment: udi-feature-item;
  content: counter(udi-feature-item);
  position: absolute;
  inset-block-start: 1.05rem;
  inset-inline-start: 1rem;
  display: grid;
  place-items: center;
  inline-size: 1.55rem;
  block-size: 1.55rem;
  border-radius: 50%;
  background: rgba(92, 154, 207, 0.14);
  color: var(--udi-article-blue-dark);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.udi-feature-summary-grid > li u,
.udi-feature-requirements > li strong,
.udi-feature-method-list > li strong {
  color: var(--bs-heading-color);
}

.udi-feature-options-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-block: 1.35rem 2rem;
  padding: 0 !important;
  list-style: none;
}

.udi-feature-options-list > li {
  margin: 0 !important;
  padding: 1rem 1.1rem;
  border: 1px solid var(--udi-article-line);
  border-inline-start: 4px solid var(--udi-article-blue);
  border-radius: 0.75rem;
  background: var(--bs-card-bg);
}

.udi-feature-options-list > li:first-child {
  grid-column: 1 / -1;
}

.udi-feature-options-list > li > ul {
  margin-block-start: 0.75rem;
}

.udi-ai-output {
  overflow: auto;
  max-block-size: 42rem;
  margin-block: 1.4rem 1.8rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.85rem;
  background: #f6f8fb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  scrollbar-color: var(--udi-article-blue) transparent;
}

.udi-ai-output:focus-visible {
  outline: 3px solid rgba(92, 154, 207, 0.28);
  outline-offset: 2px;
}

.udi-ai-output pre {
  margin: 0;
  padding: 1.35rem 1.5rem;
  background: transparent;
  color: #26374d;
  font-size: 0.9rem;
  line-height: 1.62;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.udi-blaster-method-grid,
.udi-blaster-results {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-block: 1.5rem 2rem;
}

.udi-blaster-method-card,
.udi-blaster-result-card {
  overflow: hidden;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.85rem;
  background: var(--bs-card-bg);
}

.udi-blaster-method-card img,
.udi-blaster-result-card img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  margin: 0 !important;
  border: 1px solid var(--udi-article-line);
  border-radius: 0.65rem !important;
  box-shadow: none !important;
}

.udi-blaster-method-card p,
.udi-blaster-result-card figcaption {
  margin: 1rem 0 0;
  color: var(--bs-body-color);
  font-size: inherit;
  line-height: 1.65;
}

.udi-blaster-result-card--highlight {
  border-block-start: 4px solid var(--udi-article-blue);
}

[data-bs-theme="dark"] .udi-feature-summary-grid > li,
[data-bs-theme="dark"] .udi-feature-requirements > li,
[data-bs-theme="dark"] .udi-feature-method-list > li,
[data-bs-theme="dark"] .udi-feature-options-list > li,
[data-bs-theme="dark"] .udi-blaster-method-card,
[data-bs-theme="dark"] .udi-blaster-result-card {
  background: rgba(255, 255, 255, 0.025);
}

[data-bs-theme="dark"] .udi-ai-output {
  background: #182033;
  box-shadow: none;
}

[data-bs-theme="dark"] .udi-ai-output pre {
  color: #d8e5f0;
}

.udi-blaster-page .udi-blaster-method-card,
.udi-blaster-page .udi-blaster-result-card {
  overflow: visible;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.udi-blaster-page .udi-blaster-result-card--highlight {
  border-block-start: 0;
}

@media (max-width: 767.98px) {
  .udi-feature-shot-grid,
  .udi-feature-summary-grid,
  .udi-feature-requirements,
  .udi-feature-method-list,
  .udi-feature-options-list,
  .udi-blaster-method-grid,
  .udi-blaster-results {
    grid-template-columns: minmax(0, 1fr);
  }
  .udi-feature-options-list > li:first-child {
    grid-column: auto;
  }
}

@media (max-width: 575.98px) {
  .udi-feature-guide > h2:not(:first-child),
  .udi-feature-guide > h3,
  .udi-feature-section > h3 {
    margin-block-start: 2.35rem !important;
  }
  .udi-feature-media img,
  .udi-feature-shot {
    margin-block: 1.15rem !important;
    border-radius: 0.65rem !important;
  }
  .udi-feature-summary-grid > li,
  .udi-feature-requirements > li,
  .udi-feature-method-list > li,
  .udi-feature-options-list > li,
  .udi-blaster-method-card,
  .udi-blaster-result-card {
    padding-block: 0.9rem;
  }
  .udi-ai-output {
    max-block-size: 34rem;
  }
  .udi-ai-output pre {
    padding: 1rem;
    font-size: 0.82rem;
    line-height: 1.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .udi-feature-guide * {
    scroll-behavior: auto;
  }
}

@media print {
  .udi-feature-shot,
  .udi-feature-media img,
  .udi-blaster-method-card,
  .udi-blaster-result-card {
    box-shadow: none !important;
    break-inside: avoid;
  }
  .udi-ai-output {
    overflow: visible;
    max-block-size: none;
    box-shadow: none;
  }
  .udi-ai-output pre {
    color: #000;
    font-size: 8.5pt;
  }
}

/* Original-style new-account spacing @2026.08.14-12.
   The v5 page card already supplies the outer container. Avoid a second
   Bootstrap max-width inside it so the two signup columns keep their original
   readable measure and the form does not feel compressed. */
.udi-signup-page {
  padding-block: 0 1.5rem;
}

.udi-signup-page.pb-6 {
  padding-block-end: 1.5rem !important;
}

.udi-signup-page > .container {
  inline-size: 100%;
  max-inline-size: none;
  padding-inline: 0;
}

.udi-signup-page .udi-signup-grid {
  max-inline-size: none;
  --bs-gutter-x: 1.5rem;
}

.udi-signup-page .udi-signup-panel {
  border-block-start: 1px solid var(--udi-flow-line) !important;
  border-radius: 0.4rem;
  box-shadow: none;
}

.udi-signup-page .form-control {
  background-color: #fff;
}

.udi-signup-page .udi-flow-panel-header {
  padding: 1rem 1.5rem;
  background: var(--bs-body-bg);
}

.udi-signup-page .udi-signup-panel .udi-flow-panel-body {
  padding: 1.5rem;
}

.udi-signup-page .udi-signup-panel .mb-3 {
  margin-block-end: 1.25rem !important;
}

.udi-signup-page .udi-signup-terms {
  margin-block: 0.2rem 1.5rem;
}

.udi-signup-page .udi-flow-captcha-field {
  margin-block-end: 1.5rem;
}

.udi-signup-page .udi-signup-info {
  padding: 1rem 0.5rem 0;
}

.udi-signup-page .udi-signup-info > h2 {
  margin-block-end: 1.5rem;
  font-size: 1.5rem;
}

.udi-signup-page .udi-signup-info > p {
  margin-block-end: 1.25rem;
  line-height: 1.55;
}

.udi-signup-page .udi-signup-privacy {
  margin-block-end: 1rem;
  padding: 0.85rem 1rem;
  border: 0;
  background: #cff4fc;
}

.udi-signup-page .udi-signup-options {
  border: 0;
  border-radius: 0.4rem;
  background: rgba(109, 119, 135, 0.06);
  box-shadow: 0 0.35rem 1rem rgba(38, 60, 85, 0.08);
}

.udi-signup-page .udi-signup-options .card-body {
  padding: 1.5rem;
}

.udi-signup-page .refresh-captcha {
  inline-size: auto;
  block-size: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5c9acf;
}

.udi-signup-page .refresh-captcha:hover,
.udi-signup-page .refresh-captcha:focus-visible {
  border: 0;
  background: transparent;
  color: #4b88bb;
}

.udi-signup-page .btn-primary {
  border-color: #5c9acf;
  background: #5c9acf;
}

.udi-signup-page .btn-primary:hover,
.udi-signup-page .btn-primary:focus-visible,
.udi-signup-page .btn-primary:active {
  border-color: #4b88bb;
  background: #4b88bb;
  color: #fff;
}

.udi-signup-page .btn-outline-primary {
  border-color: #5c9acf;
  color: #4b88bb;
}

.udi-signup-page .btn-outline-primary:hover,
.udi-signup-page .btn-outline-primary:focus-visible,
.udi-signup-page .btn-outline-primary:active {
  border-color: #4b88bb;
  background: #4b88bb;
  color: #fff;
}

[data-bs-theme="dark"] .udi-signup-page .udi-signup-options {
  background: rgba(255, 255, 255, 0.04);
}

[data-bs-theme="dark"] .udi-signup-page .form-control {
  background-color: var(--bs-body-bg);
}

/* Keep Vuexy's translated modal close control inside the visible header.
   This is shared exterior chrome because the clipping appeared on multiple
   redesigned pages, not only the registration help dialogs. */
.modal .modal-content {
  overflow: visible;
}

.modal .modal-header .btn-close {
  position: static;
  flex: 0 0 auto;
  margin: 0 0 0 auto !important;
  transform: none !important;
}

@media (max-width: 767.98px) {
  .udi-signup-page {
    padding-block: 0 1rem;
  }
  .udi-signup-page.pb-6 {
    padding-block-end: 1rem !important;
  }
  .udi-signup-page .udi-signup-grid {
    --bs-gutter-x: 1.5rem;
  }
  .udi-signup-page .udi-signup-info {
    padding: 0.5rem 0 0;
  }
}

@media (max-width: 575.98px) {
  .udi-signup-page .udi-signup-panel .udi-flow-panel-body {
    padding: 1.25rem 1.1rem 1.35rem;
  }
  .udi-signup-page .udi-signup-panel .mb-3 {
    margin-block-end: 1.1rem !important;
  }
}

/* One-click demo action panel @2026.08.14-14.
   This follows the approved exterior form treatment without pretending the
   hidden-credential demo action is an editable login form. */
.udi-test-drive-page {
  --udi-test-drive-line: rgba(63, 98, 134, 0.2);
  padding-block: 3rem;
}

.udi-test-drive-page.pb-6 {
  padding-block-end: 3rem !important;
}

.udi-test-drive-shell {
  inline-size: min(100%, 50rem);
  margin-inline: auto;
}

.udi-test-drive-panel {
  overflow: hidden;
  border: 1px solid var(--udi-test-drive-line);
  border-block-start: 1px solid var(--udi-test-drive-line) !important;
  border-radius: 0.4rem;
  background: var(--bs-body-bg);
  box-shadow: none;
}

.udi-test-drive-panel-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1.5rem;
  border-block-end: 1px solid var(--udi-test-drive-line);
  background: var(--bs-body-bg);
  color: var(--bs-heading-color);
  font-size: 1.05rem;
}

.udi-test-drive-panel-header .icon-base {
  color: #5c9acf;
  font-size: 1.25rem;
}

.udi-test-drive-panel-body {
  padding: 1.5rem;
}

.udi-test-drive-copy,
.udi-test-drive-followup {
  font-size: 1rem;
  line-height: 1.7;
}

.udi-test-drive-copy {
  margin-block-end: 1.35rem;
}

.udi-test-drive-form {
  margin: 0;
}

.udi-test-drive-page .btn-primary {
  min-block-size: 3rem;
  border-color: #5c9acf;
  background: #5c9acf;
  color: #fff;
  font-weight: 600;
}

.udi-test-drive-page .btn-primary:hover,
.udi-test-drive-page .btn-primary:focus-visible,
.udi-test-drive-page .btn-primary:active {
  border-color: #4b88bb;
  background: #4b88bb;
  color: #fff;
}

.udi-test-drive-page .btn-primary * {
  color: inherit;
}

.udi-test-drive-note {
  margin: 0.8rem 0 0;
  color: var(--bs-secondary-color);
  font-size: 0.94rem;
  line-height: 1.55;
}

.udi-test-drive-note small {
  font-size: inherit;
}

.udi-test-drive-followup {
  margin: 1.5rem 0 0;
}

[data-bs-theme="dark"] .udi-test-drive-page {
  --udi-test-drive-line: rgba(168, 203, 232, 0.22);
}

@media (max-width: 575.98px) {
  .udi-test-drive-page,
  .udi-test-drive-page.pb-6 {
    padding-block: 1.5rem !important;
  }
  .udi-test-drive-panel-header,
  .udi-test-drive-panel-body {
    padding: 1.15rem;
  }
  .udi-test-drive-page .btn-primary {
    font-size: 0.95rem;
  }
}

/* Approved exterior form-field surface @2026.08.14-16.
   Public-site text-entry areas and selects are white in light mode. Icon/addon
   cells retain their subtle tint for field affordance and dark mode continues
   to use the Vuexy surface tokens. */
html:not([data-bs-theme="dark"]) .form-control,
html:not([data-bs-theme="dark"]) .form-control:focus,
html:not([data-bs-theme="dark"]) .form-select,
html:not([data-bs-theme="dark"]) .form-select:focus {
  background-color: #fff;
}

/* Plus gifting checkout @2026.08.14-30. Payment behavior remains owned by the
   page and Braintree; this layer only clarifies the purchase flow. */
.udi-gift-page {
  --udi-gift-blue: #5c9acf;
  --udi-gift-blue-hover: #4b88bb;
  --udi-gift-line: rgba(63, 98, 134, 0.2);
  --udi-gift-soft: rgba(92, 154, 207, 0.08);
  padding-block-start: 0.75rem;
}

.udi-gift-shell {
  max-inline-size: 58rem;
}

.udi-gift-intro {
  padding-inline: 0.25rem;
}

.udi-gift-lead {
  margin-block-end: 1.35rem;
  color: var(--bs-body-color);
  font-size: 1.05rem;
  line-height: 1.75;
}

.udi-gift-page .pg-bonus.udi-gift-bonus {
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--udi-gift-line);
  border-inline-start: 4px solid var(--udi-gift-blue);
  border-radius: 0.6rem;
  background: var(--udi-gift-soft);
  color: var(--bs-body-color);
  font-size: 0.975rem;
  line-height: 1.6;
}

.udi-page-card .udi-gift-panel,
.udi-page-card .udi-gift-panel:has(> .card-header) {
  overflow: hidden;
  border: 1px solid var(--udi-gift-line);
  background: #fff;
  box-shadow: 0 0.45rem 1.35rem rgba(38, 60, 85, 0.08);
}

.udi-page-card .udi-gift-panel > .udi-gift-panel-header {
  padding: 1.1rem 1.3rem;
  border-block-end: 1px solid var(--udi-gift-line);
  background: #fff;
}

.udi-page-card .udi-gift-panel-header h2,
.udi-gift-payment-title {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--bs-heading-color);
  line-height: 1.4;
}

.udi-page-card .udi-gift-panel-header h2::after {
  content: none;
}

.udi-gift-payment-title small {
  font-size: 0.825rem;
  font-weight: 400;
  line-height: 1.45;
}

.udi-page-card .udi-gift-panel > .udi-gift-panel-header + .udi-gift-panel-body {
  padding: 1.35rem 1.3rem 1.45rem !important;
}

.udi-gift-promo-form .form-control,
.udi-gift-field .form-control {
  min-block-size: 3rem;
  background: #fff;
}

.udi-gift-field .form-label {
  margin-block-end: 0.5rem;
  color: var(--bs-heading-color);
  font-weight: 600;
}

.udi-gift-promo-status {
  min-block-size: 1.35rem;
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
  line-height: 1.5;
}

.udi-gift-price {
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(92, 154, 207, 0.28);
  background: var(--udi-gift-soft);
  color: var(--udi-gift-blue-hover);
  font-size: 1rem;
  font-weight: 700;
}

.udi-gift-renewal-note {
  margin-block-end: 1.35rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--udi-gift-line);
  border-radius: 0.55rem;
  background: var(--udi-gift-soft);
  color: var(--bs-body-color);
  line-height: 1.55;
}

.udi-gift-page #dropin {
  max-inline-size: 100%;
  margin-block: 0.25rem 1.25rem;
  overflow-x: auto;
}

.udi-gift-page .loader_container div {
  padding: 1rem;
  border: 1px solid var(--udi-gift-line);
  border-radius: 0.55rem;
  background: var(--udi-gift-soft);
  color: var(--bs-secondary-color);
}

.udi-gift-captcha {
  max-inline-size: 100%;
  overflow-x: auto;
}

.udi-gift-page .btn-primary {
  min-block-size: 2.85rem;
  border-color: var(--udi-gift-blue);
  background: var(--udi-gift-blue);
  color: #fff;
  font-weight: 600;
}

.udi-gift-page .btn-primary:hover,
.udi-gift-page .btn-primary:focus-visible,
.udi-gift-page .btn-primary:active {
  border-color: var(--udi-gift-blue-hover);
  background: var(--udi-gift-blue-hover);
  color: #fff;
}

.udi-gift-page button[type="submit"].udi-gift-payment-btn {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  inline-size: 100%;
  min-block-size: 3rem;
  border: 1px solid var(--udi-gift-blue) !important;
  background-color: var(--udi-gift-blue) !important;
  background-image: none !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 1rem !important;
  font-weight: 600;
  line-height: 1.5;
  text-indent: 0;
  opacity: 1;
}

.udi-gift-page button[type="submit"].udi-gift-payment-btn:hover,
.udi-gift-page button[type="submit"].udi-gift-payment-btn:focus-visible,
.udi-gift-page button[type="submit"].udi-gift-payment-btn:active {
  border-color: var(--udi-gift-blue-hover) !important;
  background-color: var(--udi-gift-blue-hover) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.udi-gift-alert {
  padding: 1.1rem 3rem 1.1rem 1.2rem;
  line-height: 1.6;
}

.udi-gift-alert h4 {
  margin-block-end: 0.5rem;
  font-size: 1.05rem;
}

[data-bs-theme="dark"] .udi-gift-page {
  --udi-gift-line: rgba(168, 203, 232, 0.22);
  --udi-gift-soft: rgba(127, 179, 221, 0.1);
}

[data-bs-theme="dark"] .udi-page-card .udi-gift-panel,
[data-bs-theme="dark"] .udi-page-card .udi-gift-panel:has(> .card-header),
[data-bs-theme="dark"] .udi-page-card .udi-gift-panel > .udi-gift-panel-header {
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .udi-gift-promo-form .form-control,
[data-bs-theme="dark"] .udi-gift-field .form-control {
  background: var(--bs-body-bg);
}

@media (max-width: 575.98px) {
  .udi-gift-page {
    padding-block-start: 0.25rem;
  }
  .udi-gift-intro {
    padding-inline: 0;
  }
  .udi-page-card .udi-gift-panel > .udi-gift-panel-header {
    padding: 1.1rem;
  }
  .udi-page-card .udi-gift-panel > .udi-gift-panel-header + .udi-gift-panel-body {
    padding: 1.1rem !important;
  }
  .udi-gift-payment-header {
    flex-direction: column;
  }
  .udi-gift-price {
    align-self: flex-start;
  }
  .udi-gift-apply-btn {
    inline-size: 100%;
  }
}

@media print {
  .udi-page-card .udi-gift-panel {
    break-inside: avoid;
    box-shadow: none;
  }
}

/* Database-driven FAQ landing hub @2026.08.14-18. The page keeps every
   server-rendered article, category, and tag link while making the large
   knowledge base easier to scan. */
.udi-faq-landing {
  --udi-faq-blue: #5c9acf;
  --udi-faq-blue-hover: #4b88bb;
  --udi-faq-line: rgba(63, 98, 134, 0.18);
  --udi-faq-soft: rgba(92, 154, 207, 0.08);
}

.udi-faq-hero {
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 254, 0.93) 46%, rgba(237, 246, 252, 0.97) 100%);
}

.udi-faq-path-bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
}

.udi-faq-hero > .container {
  position: relative;
  z-index: 1;
}

.udi-faq-landing .udi-faq-hero h1 {
  color: var(--bs-heading-color);
  font-size: clamp(1.75rem, 2.6vw, 2.35rem);
}

.udi-faq-hero-copy {
  color: var(--bs-secondary-color);
  font-size: 1rem;
  line-height: 1.6;
}

.udi-faq-breadcrumbs .breadcrumb {
  margin-block-end: 0;
}

.udi-faq-search .input-wrapper {
  overflow: hidden;
  border: 1px solid rgba(63, 98, 134, 0.22);
  background: #fff;
  box-shadow: 0 0.65rem 1.75rem rgba(38, 60, 85, 0.1);
}

.udi-faq-search .input-group-text,
.udi-faq-search .form-control,
.udi-faq-search .btn {
  min-block-size: 3.35rem;
}

.udi-faq-search .input-group-text {
  border: 0;
  background: #fff;
  color: var(--udi-faq-blue-hover);
}

.udi-faq-search .form-control {
  border: 0;
  background: #fff;
  color: var(--bs-body-color);
  font-size: 1rem;
}

.udi-faq-search .form-control:focus {
  background: #fff;
  box-shadow: none;
}

.udi-faq-landing .btn-primary,
.udi-faq-landing .btn-label-primary:hover,
.udi-faq-landing .btn-label-primary:focus-visible,
.udi-faq-landing .btn-label-primary:active {
  border-color: var(--udi-faq-blue);
  background: var(--udi-faq-blue);
  color: #fff;
}

.udi-faq-landing .btn-primary:hover,
.udi-faq-landing .btn-primary:focus-visible,
.udi-faq-landing .btn-primary:active {
  border-color: var(--udi-faq-blue-hover);
  background: var(--udi-faq-blue-hover);
  color: #fff;
}

.udi-faq-landing .btn-primary *,
.udi-faq-landing .btn-label-primary:hover *,
.udi-faq-landing .btn-label-primary:focus-visible * {
  color: inherit;
}

.udi-faq-featured-section,
.udi-faq-categories-section,
.udi-faq-tags-section,
.udi-faq-video-section,
.udi-faq-search-results {
  font-size: 0.975rem;
}

.udi-faq-featured-section {
  background: rgba(63, 98, 134, 0.035);
}

.udi-faq-landing section > .container > h2 {
  color: var(--bs-heading-color);
  font-size: 1.625rem;
}

.udi-faq-featured-card,
.udi-faq-category-card,
.udi-faq-search-result {
  border: 1px solid var(--udi-faq-line);
  box-shadow: 0 0.4rem 1.3rem rgba(38, 60, 85, 0.06);
}

.udi-faq-featured-card {
  background: #fff;
  box-shadow: 0 0.55rem 1.65rem rgba(38, 60, 85, 0.11);
}

.udi-faq-featured-card .card-body {
  padding: 1.5rem;
}

.udi-faq-featured-card .card-body > .d-flex {
  padding-block-end: 0;
}

.udi-faq-featured-card .avatar {
  inline-size: 2.2rem;
  block-size: 2.2rem;
}

.udi-faq-featured-card .avatar-initial {
  background: rgba(92, 154, 207, 0.14) !important;
  color: var(--udi-faq-blue) !important;
}

.udi-faq-featured-card .avatar .icon-base {
  font-size: 1.15rem;
}

.udi-faq-featured-card h3 {
  color: var(--bs-heading-color);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.udi-faq-featured-item {
  padding-block: 1.05rem;
  border-block-end: 1px solid var(--udi-faq-line);
}

.udi-faq-featured-item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.udi-faq-featured-item h4 {
  font-size: 1.05rem;
  line-height: 1.4;
}

.udi-faq-featured-item p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--bs-secondary-color) !important;
  font-size: 0.925rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.udi-faq-video-section {
  border-block: 1px solid var(--udi-faq-line);
  background: var(--udi-faq-soft) !important;
}

.udi-faq-video-section lite-youtube {
  overflow: hidden;
  border: 1px solid var(--udi-faq-line);
  box-shadow: 0 0.5rem 1.4rem rgba(38, 60, 85, 0.09) !important;
}

.udi-faq-category-card {
  align-self: start;
  overflow: hidden;
}

.udi-faq-category-card .card-body {
  padding: 1.4rem;
}

.udi-faq-category-header {
  min-block-size: 3.35rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid var(--udi-faq-line);
}

.udi-faq-category-header .avatar {
  inline-size: 2.75rem;
  block-size: 2.75rem;
}

.udi-faq-category-header .avatar-initial {
  background: var(--udi-faq-soft) !important;
  color: var(--udi-faq-blue-hover) !important;
}

.udi-faq-category-header .icon-base {
  font-size: 1.45rem;
}

.udi-faq-category-card h3 {
  font-size: 1.1rem;
  line-height: 1.35;
}

.udi-faq-category-list {
  columns: 2;
  column-gap: 1.5rem;
}

.udi-faq-category-list li {
  break-inside: avoid;
  margin: 0 !important;
  padding-block: 0.45rem;
  border-block-end: 1px solid rgba(63, 98, 134, 0.1);
}

.udi-faq-category-list a {
  gap: 0.35rem;
  color: var(--udi-faq-blue-hover) !important;
  font-size: 0.925rem;
  line-height: 1.4;
}

.udi-faq-category-list a:hover,
.udi-faq-category-list a:focus-visible {
  color: var(--udi-faq-blue) !important;
}

.udi-faq-category-list .text-truncate {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

.udi-faq-category-list .icon-base {
  flex: 0 0 auto;
  font-size: 0.9rem;
}

.udi-faq-tags-section .btn-label-primary {
  border: 1px solid rgba(92, 154, 207, 0.3);
  background: var(--udi-faq-soft);
  color: var(--udi-faq-blue-hover);
}

.udi-faq-tags-section .badge.bg-primary {
  background: var(--udi-faq-blue) !important;
  color: #fff;
}

.udi-faq-contact {
  padding-block-start: 2rem;
  border-block-start: 1px solid var(--udi-faq-line);
}

.udi-faq-contact p {
  color: var(--bs-secondary-color);
}

.udi-faq-contact .btn {
  min-inline-size: 12rem;
}

.udi-faq-search-result .card-body {
  padding: 1.4rem;
}

[data-bs-theme="dark"] .udi-faq-landing {
  --udi-faq-line: rgba(168, 203, 232, 0.2);
  --udi-faq-soft: rgba(127, 179, 221, 0.1);
}

[data-bs-theme="dark"] .udi-faq-hero {
  background:
    radial-gradient(circle at 50% 48%, rgba(32, 39, 55, 0.97) 0%, rgba(27, 33, 47, 0.97) 50%, rgba(22, 28, 41, 0.99) 100%);
}

[data-bs-theme="dark"] .udi-faq-path-bg {
  opacity: 0.58;
  filter: brightness(1.2) saturate(0.9);
}

[data-bs-theme="dark"] .udi-faq-featured-section {
  background: rgba(127, 179, 221, 0.035);
}

[data-bs-theme="dark"] .udi-faq-featured-card {
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .udi-faq-search .input-wrapper,
[data-bs-theme="dark"] .udi-faq-search .input-group-text,
[data-bs-theme="dark"] .udi-faq-search .form-control,
[data-bs-theme="dark"] .udi-faq-search .form-control:focus {
  background: var(--bs-body-bg);
}

@media (max-width: 1199.98px) {
  .udi-faq-category-list {
    columns: 1;
  }
}

@media (max-width: 767.98px) {
  .udi-faq-landing section > .container > h2 {
    font-size: 1.45rem;
  }
  .udi-faq-featured-card .card-body,
  .udi-faq-category-card .card-body,
  .udi-faq-search-result .card-body {
    padding: 1.2rem;
  }
  .udi-faq-featured-section .row.g-6,
  .udi-faq-video-section .row.g-6,
  .udi-faq-categories-section .row.g-6 {
    --bs-gutter-y: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .udi-faq-path-bg {
    object-position: 68% center;
    opacity: 0.62;
  }
  .udi-faq-hero-copy {
    font-size: 0.94rem;
  }
  .udi-faq-search .input-group-text {
    display: none;
  }
  .udi-faq-search .form-control,
  .udi-faq-search .btn {
    min-block-size: 3rem;
  }
  .udi-faq-search .form-control {
    padding-inline-start: 1rem;
    font-size: 0.94rem;
  }
  .udi-faq-search .btn {
    padding-inline: 1rem;
  }
  .udi-faq-category-header {
    align-items: flex-start !important;
  }
}

@media print {
  .udi-faq-path-bg,
  .udi-faq-hero .banner-bg-img,
  .udi-faq-search,
  .udi-faq-video-section,
  .udi-faq-tags-section,
  .udi-faq-contact {
    display: none !important;
  }
  .udi-faq-featured-card,
  .udi-faq-category-card,
  .udi-faq-search-result {
    break-inside: avoid;
    box-shadow: none;
  }
  .udi-faq-featured-item p {
    display: block;
    overflow: visible;
  }
}