/* v3 base — view transitions, buttons, links, inline CTA. Part of the v3 design layer (loaded after v3-reset.css + tokens, so it wins). Linked by build-pages.ts sharedStyle(). */
    /* ── Native cross-document page transitions (MPA View Transitions) ──────
       A real, framework-free page transition: the browser cross-fades the old page
       into the new one on navigation. Opt-in is this one at-rule — and it must be on
       BOTH pages, which it is (sharedStyle is on every page). Browsers without support
       just navigate instantly (graceful). Pairs with nav(): the mobile menu does NOT
       close on click, so it stays covering the old page and cross-fades to the new one
       (no flash of the old page mid-navigation). */
    @view-transition { navigation: auto; }
    ::view-transition-old(root), ::view-transition-new(root) {
      animation-duration: 0.26s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    @media (prefers-reduced-motion: reduce) {
      ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    }
    /* ── Base v3 button system (carried from index.html, trimmed). The .btn
       classes own their full look — fill, offset shadow, hover + active — so a
       button never depends on a browser or base default. */
    .btn {
      display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
      border: 1.5px solid #264068; background: #264068; color: white;
      padding: 12px 24px; border-radius: var(--radius-sm); text-decoration: none;
      font-size: 0.95em; font-weight: 500;
      font-family: var(--font-sans);
      letter-spacing: 0.01em; line-height: 1.2;
      box-shadow: -4px 4px 0 0 rgba(173, 165, 162, 0.55);
      transition: background-color 0.15s ease, transform 0.12s ease, box-shadow 0.12s ease;
      text-align: center; position: relative;
    }
    .btn--outline { background: white; color: #264068; border: 2px solid #264068; }
    /* All outline buttons (incl. small partner-program pills) get a grounded 3px
       bottom edge — balances the offset drop-shadow. */
    .btn--outline { border-bottom-width: 3px; }
    .btn--small { padding: 8px 16px; font-size: 0.9em; }
    .btn--block { display: flex; width: 100%; }
    /* No transform on hover/active — the button stays put; the growing box-shadow
       alone reads as a lift (and collapses on press). The old translate(1px,-1px)
       lifted every button 1px vertically on hover, which read as jumpy. (Border
       widths no longer need re-asserting — the reset doesn't touch <a> borders.) */
    .btn:hover { background: #2f4d7d; color: white; box-shadow: -5px 5px 0 0 rgba(150,168,190,0.6); }
    .btn--outline:hover { background: white; color: #264068; box-shadow: -6px 6px 0 0 rgba(150,168,190,0.7); }
    .btn:active { color: white; box-shadow: -1px 1px 0 0 rgba(150,168,190,0.4); transition-duration: 0.06s; }
    .btn--outline:active { color: #264068; box-shadow: -1px 1px 0 0 rgba(150,168,190,0.45); transition-duration: 0.06s; }
    /* A105 (WCAG 2.4.7 / 1.4.11). The ring colour is a VARIABLE, not a literal, because a
       navy ring is invisible on a navy surface — and .btn sits on two dark ones
       (.v3-band--invert, .v3-book-band), where a keyboard user saw nothing at all. Dark
       surfaces flip --focus-ring to white (v3-components.css / v3-pages.css) and every
       focusable inside them inherits it. Hardcoding navy here is what caused the bug, so
       don't put a literal back. */
    .btn:focus-visible { outline: 2px solid var(--focus-ring, #264068); outline-offset: 4px; }

    /* ── Draw-in arrow on primary buttons + the nav CTA ────────────────────
       Same hover affordance as .v3-cta below: an mdi arrow (currentColor CSS
       mask) that draws in left→right on hover/focus. currentColor makes it
       white on the filled .btn / nav CTA and navy on .btn--outline for free.
       At rest width is 0 (no arrow), so buttons look unchanged; the button
       reaches out ~1.3em on hover. .btn is inline-flex above; .v3nav__cta is
       already inline-flex (v3-nav.css). Small buttons (.btn--small — the
       partner-program pills, Read More) opt out: they're secondary, no arrow. */
    .btn:not(.btn--small)::after, .v3nav__cta::after {
      content: ''; flex: none; vertical-align: -0.06em;
      width: 0; height: 0.8em; margin-left: 0; opacity: 0; background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E") no-repeat left center / 0.95em 0.8em;
              mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E") no-repeat left center / 0.95em 0.8em;
      transition: width 0.3s cubic-bezier(0.45,0,0.25,1), margin-left 0.3s cubic-bezier(0.45,0,0.25,1), opacity 0.22s ease;
    }
    .btn:not(.btn--small):hover::after, .btn:not(.btn--small):focus-visible::after,
    .v3nav__cta:hover::after, .v3nav__cta:focus-visible::after {
      width: 0.95em; margin-left: 0.45em; opacity: 1;
    }
    @media (prefers-reduced-motion: reduce) { .btn::after, .v3nav__cta::after { transition: none; } }

    /* Link underlines now live in ONE place — v3-reset.css: text links underline
       on hover, anchor-components (.btn, .v3nav__*, .v3-cta, .v3-tcard,
       .v3-featured__card, .v3-polaroid__link, .v3-footer__brand) opt out there.
       prose.css excludes those same components from its always-on underline.
       No more per-component "undo the underline / re-assert the border" defenses. */

    /* ── Reusable inline CTA ───────────────────────────────────────────────
       ONE animated text link used everywhere: back links, "All services",
       footer "Insurance & financing", the about-page inline CTA. The mdi arrow
       is a CSS mask that DRAWS IN on hover (same motion as .v3-tcard__cta) —
       no static glyph in the markup. Default points right after the text;
       .v3-cta--back points left before the text. Self-contained: works inside
       or outside .v3-prose. */
    .v3-cta, .v3-prose a.v3-cta {
      display: inline-flex; align-items: center; width: fit-content;
      font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem;
      color: #264068; text-decoration: none; cursor: pointer;
    }
    /* The drawn arrow is the hover affordance — no underline (it's excluded in
       the reset's opt-out list). */
    .v3-cta:hover, .v3-cta:active, .v3-prose a.v3-cta:hover { color: #2f4d7d; text-decoration: none; }
    .v3-cta:focus-visible { outline: 2px solid var(--focus-ring, #264068); outline-offset: 3px; border-radius: 3px; } /* A105 — see .btn:focus-visible */
    /* forward arrow — after the text, points right, draws in left→right */
    .v3-cta:not(.v3-cta--back)::after {
      content: ''; display: inline-block; flex: none; vertical-align: -0.06em;
      width: 0; height: 0.78em; margin-left: 0; opacity: 0; background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E") no-repeat left center / 1.05em 0.78em;
              mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z'/%3E%3C/svg%3E") no-repeat left center / 1.05em 0.78em;
      transition: width 0.3s cubic-bezier(0.45,0,0.25,1), margin-left 0.3s cubic-bezier(0.45,0,0.25,1), opacity 0.22s ease;
    }
    .v3-cta:not(.v3-cta--back):hover::after { width: 1.05em; margin-left: 0.4em; opacity: 1; }
    /* back arrow — before the text, points left, draws in right→left */
    .v3-cta--back::before {
      content: ''; display: inline-block; flex: none; vertical-align: -0.06em;
      width: 0; height: 0.78em; margin-right: 0; opacity: 0; background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/%3E%3C/svg%3E") no-repeat right center / 1.05em 0.78em;
              mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z'/%3E%3C/svg%3E") no-repeat right center / 1.05em 0.78em;
      transition: width 0.3s cubic-bezier(0.45,0,0.25,1), margin-right 0.3s cubic-bezier(0.45,0,0.25,1), opacity 0.22s ease;
    }
    .v3-cta--back:hover::before { width: 1.05em; margin-right: 0.4em; opacity: 1; }
    @media (prefers-reduced-motion: reduce) { .v3-cta::after, .v3-cta--back::before { transition: none; } }