/* Site refresh (1.7): one finish for every page, loaded last. A soft paper canvas, deep ink type, pill buttons in the AuthMantra
   teal-to-blue, cards with a hairline edge that tint on hover, and slow, smooth motion. The teal identity stays; only the finish changes. */
:root {
  --paper: #F6F6F2; --paper-2: #EFF1EC; --card: #FFFFFF; --hair: #E2E6E0; --ink-deep: #121C29;
  --brand-grad: linear-gradient(120deg, #0A9C99 0%, #0E7F95 45%, #2457B8 100%);
  --brand-grad-hover: linear-gradient(120deg, #088985 0%, #0B6D82 45%, #1D4BA3 100%);
  --wave: cubic-bezier(0.22, 0.9, 0.3, 1);
  --tint: linear-gradient(150deg, rgba(10, 191, 188, 0.10) 0%, rgba(47, 95, 196, 0.07) 100%);
}
html { background: var(--paper); }
body { background: var(--paper); color: var(--ink-deep); }
main { background: transparent; }

/* Type: tighter, darker headlines; calm body copy. */
h1, h2, h3 { color: var(--ink-deep); letter-spacing: -0.025em; }
h1 { font-weight: 600; }
h2 { font-weight: 600; }
p { color: #3E4A58; }

/* Buttons: the main action is a gradient pill with white text; the second is a white pill with a hairline. */
.btn, a.btn { border-radius: 999px !important; padding-inline: 20px; font-weight: 600; transition: background-position 520ms var(--wave), box-shadow 360ms var(--wave), transform 360ms var(--wave), background-color 360ms var(--wave), color 360ms var(--wave), border-color 360ms var(--wave) !important; }
.btn-primary, a.btn-primary, .btn.btn-primary { background: var(--brand-grad) !important; background-size: 160% 100% !important; background-position: 0% 0 !important; color: #fff !important; border: 0 !important; box-shadow: 0 10px 22px -12px rgba(11, 110, 140, 0.75) !important; }
.btn-primary:hover, a.btn-primary:hover { background-position: 100% 0 !important; box-shadow: 0 14px 28px -12px rgba(11, 110, 140, 0.85) !important; transform: translateY(-1px); color: #fff !important; }
.btn-ghost, a.btn-ghost { background: #fff !important; color: var(--ink-deep) !important; border: 1px solid #CDD5D0 !important; box-shadow: none !important; }
.btn-ghost:hover, a.btn-ghost:hover { border-color: #0A8F8C !important; color: #0A6F6C !important; background: #F4FBFA !important; }

/* Cards and tiles everywhere: white, a hairline, and a slow teal tint when the pointer arrives. */
:where(.card, .vz-card, .h2-plan, .h2-door, .lg-card, .bp-card, .cap-card, .ac-card, .sol-card, [class*="-card"]):not(.st-card) {
  border-color: var(--hair); transition: background-color 420ms var(--wave), border-color 420ms var(--wave), box-shadow 420ms var(--wave), transform 420ms var(--wave); }
:where(a.vz-card, .h2-door, .h2-plan, a[class*="-card"], .bp-card, .cap-card, .ac-card, .sol-card):hover {
  background-image: var(--tint); border-color: rgba(10, 143, 140, 0.45); box-shadow: 0 18px 36px -22px rgba(18, 40, 50, 0.4); transform: translateY(-2px); }

/* Every link, chip and tab eases instead of snapping. */
a, button, summary, [role="tab"], [class*="chip"], [class*="pill"], [class*="tab"], nav a {
  transition-property: color, background-color, border-color, box-shadow, transform, opacity; transition-duration: 360ms; transition-timing-function: var(--wave); }

/* Sections sit on the paper, and alternate bands are a shade deeper rather than blue. */
.sec, .h2-sec, section { background-color: transparent; }
.sec-alt, .h2-sky { background: var(--paper-2) !important; }

/* Header: frosted paper. */
.am-header { background: rgba(246, 246, 242, 0.86) !important; backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid rgba(18, 28, 41, 0.06); }

/* Footer: a deep painted band. */
.am-footer { position: relative; background: #0E2A33 !important; color: #C9D6DA; overflow: hidden; }
.am-footer::before { content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none; background: url("/assets/art/brush-deep.svg") center / cover no-repeat; }
.am-footer > * { position: relative; }
.am-footer a { color: #DCE8EB; } .am-footer a:hover { color: #7FE3DC; }
.am-footer h2 { color: #fff; } .am-footer p, .am-footer address { color: #A9BCC2; }
.am-footer .am-legal-line { color: #8FA5AC; border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Closing call to action: a painted band in the brand colours. */
.ct-cta { position: relative; overflow: hidden; background: #0B4F5E !important; }
.ct-cta::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; right: 0; top: 0; border-radius: 0; transform: none; background: url("/assets/art/brush-teal.svg") center / cover no-repeat !important; opacity: 0.95; }
.ct-cta::after { content: "" !important; position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; background: linear-gradient(90deg, rgba(6, 34, 43, 0.82) 0%, rgba(6, 34, 43, 0.55) 45%, rgba(6, 34, 43, 0.1) 100%) !important; }
.ct-cta { padding: 88px 0 !important; }
.ct-cta > * { position: relative; }
.ct-cta h2 { color: #fff !important; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.ct-cta p { color: rgba(255, 255, 255, 0.86) !important; }
.ct-cta .btn-primary { background: #121C29 !important; box-shadow: none !important; }
.ct-cta .btn-ghost { background: rgba(255, 255, 255, 0.92) !important; }

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

/* Inner page banners: the same deep brushstroke art as the India band, instead of a flat blue-purple gradient. */
.page-hero, .hm-hero, .vz-hero, .hub-hero, .bx-hero {
  background: linear-gradient(100deg, rgba(6, 30, 38, 0.72) 0%, rgba(6, 30, 38, 0.35) 55%, rgba(6, 30, 38, 0.15) 100%), url("/assets/art/brush-deep.svg") center / cover no-repeat, #0B3A45 !important; }
.vz-hero::before, .vz-hero::after, .page-hero::before, .hub-hero::before { opacity: 0.35; }
.vz-hero .btn-primary, .page-hero .btn-primary { box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6) !important; }
.vz-hero .btn-ghost, .page-hero .btn-ghost, .hm-hero .btn-ghost { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.45) !important; }
.vz-hero .btn-ghost:hover, .page-hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.16) !important; border-color: #7FE3DC !important; }

/* Praxis: the search box sits level with the "Today" card, at the same height, under the card's label row. */
@media (min-width: 861px) {
  .ac-top-grid { grid-template-rows: auto auto; align-items: stretch; row-gap: 10px; }
  .ac-top-grid > .ac-today { display: contents; }
  .ac-top-grid > .ac-today > .eyebrow { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  .ac-top-grid > .ac-today > .ac-today-card { grid-column: 2; grid-row: 2; }
  .ac-top-grid > .ac-search { grid-column: 1; grid-row: 2; align-self: stretch; min-height: 0; border-radius: 18px; }
}
/* Company: the fact cards sit below the banner, never on top of its buttons. */
.co-facts { margin-top: 28px !important; }

/* Two-way switches (Today / With AuthMantra) and every toggle button: a focus ring only for the keyboard, never after a click. */
.vx-switch button:focus:not(:focus-visible), [role="tab"]:focus:not(:focus-visible), .h3-tabs button:focus:not(:focus-visible), .ui-chip:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; }
.vx-switch button:focus-visible { outline: 2px solid #0A8F8C; outline-offset: 2px; box-shadow: none; }
.vx-switch { background: #fff; border: 1px solid var(--hair, #E2E6E0); box-shadow: 0 1px 2px rgba(18, 28, 41, 0.04); }
.vx-switch button { font-weight: 600; color: #4B5866; transition: color 420ms var(--wave, ease); }
.vx-switch i { background: linear-gradient(120deg, #0A9C99, #2457B8) !important; box-shadow: 0 8px 18px -10px rgba(11, 110, 140, 0.8); transition: transform 520ms var(--wave, ease), background 520ms var(--wave, ease) !important; }
.vx-flip[data-state="before"] .vx-switch i { background: linear-gradient(120deg, #556377, #36445A) !important; box-shadow: 0 8px 18px -10px rgba(30, 40, 55, 0.7); }
.vx-tab[aria-pressed="true"], .vx-tab[aria-selected="true"], .vx-tab.is-on { background: linear-gradient(120deg, #0A9C99, #2457B8) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 10px 22px -12px rgba(11, 110, 140, 0.75) !important; }
.vx-tab { transition: background 420ms var(--wave, ease), border-color 420ms, box-shadow 420ms, transform 420ms var(--wave, ease); }
.vx-tab:hover:not([aria-pressed="true"]):not([aria-selected="true"]) { background-image: var(--tint); border-color: rgba(10, 143, 140, 0.45); transform: translateY(-1px); }
:root { --grad-band: linear-gradient(120deg, #0A9C99, #2457B8); }

/* Before / after rows: a clean cross-fade. The outgoing line leaves first, the incoming one arrives after it, no blur, no
   overlap, and the row tint fades in as a whole instead of wiping across. */
.js .vx-before, .js .vx-after { filter: none !important; transition: opacity 260ms var(--wave, ease), transform 360ms var(--wave, ease) !important; }
.js .vx-flip[data-state="after"] .vx-before { opacity: 0; transform: translateY(-6px) !important; transition-delay: 0ms !important; }
.js .vx-flip[data-state="after"] .vx-after { opacity: 1; transform: none; transition-delay: 200ms !important; }
.js .vx-flip[data-state="before"] .vx-after { opacity: 0; transform: translateY(6px) !important; transition-delay: 0ms !important; }
.js .vx-flip[data-state="before"] .vx-before { opacity: 1; transform: none; transition-delay: 200ms !important; }
.vx-row::before { transform: none !important; opacity: 0; transition: opacity 520ms var(--wave, ease) !important; }
.js .vx-flip[data-state="after"] .vx-row::before { opacity: 1; }
/* Switch labels change colour as the pill arrives, not before it leaves. */
.vx-switch button { transition: color 260ms ease 220ms !important; }
.vx-switch i { left: 4px !important; width: calc(50% - 4px) !important; }
.vx-flip[data-state="after"] .vx-switch i { transform: translateX(100%) !important; }
.vx-switch i { transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), background 300ms ease !important; }
.vx-switch button { transition: color 140ms ease 170ms !important; }

/* Sign-in, sign-up and confirmation screens: the painted art behind the card. */
.gate-main { background: linear-gradient(160deg, rgba(6, 30, 38, 0.55), rgba(6, 30, 38, 0.2)), url("/assets/art/brush-teal.svg") center / cover no-repeat, #0B4F5E !important; }
.gate-card { box-shadow: 0 30px 70px -30px rgba(6, 20, 30, 0.65) !important; border-radius: 22px !important; }
/* Design page: its contents list is readable on the painted banner. */
.page-hero .ds-toc a { background: rgba(255, 255, 255, 0.10) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 999px !important; }
.page-hero .ds-toc a:hover { background: rgba(255, 255, 255, 0.2) !important; border-color: #7FE3DC !important; }
/* Demo: the Approve button text has full contrast. */
.st-btn--yes { color: #0B5F3F; } .st-btn--yes.is-pressed { background: #0B7A4B; border-color: #0B7A4B; color: #fff; }

/* Painted bands: the tint and the art stay behind the words (closing band, India band). */
.ct-cta { isolation: isolate; } .ct-cta::before, .ct-cta::after { z-index: -1 !important; } .ct-cta > * { position: relative; z-index: 1; }

/* Menu: the current-page tint covers the whole item (word and arrow) as one pill. */
.am-tabwrap:has(> .am-tab.is-current) { background: var(--accent-soft, #E7F8F8); }
.am-nav .am-tabwrap > .am-tab.is-current { background: none; }
/* Cards and toggles: a focus ring only for the keyboard, never after a click. */
.cp-card:focus-within:not(:has(:focus-visible)) { transform: none; box-shadow: var(--e-1, 0 1px 2px rgba(0, 0, 0, 0.04)); border-color: var(--line, #E2E6E0); outline: none; }
.cp-card :is(summary, button, a):focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* Banners and footer: plain teal, same family as the new pages; no brush texture */
.page-hero, .hm-hero, .vz-hero, .hub-hero, .bx-hero { background: linear-gradient(120deg, #0E7787 0%, #1B76A6 55%, #3465BB 100%) !important; }
.vz-hero::before, .vz-hero::after, .page-hero::before, .page-hero::after, .hub-hero::before, .am-footer::before, .am-footer::after { display: none !important; }
.am-footer { background: #0F566A !important; }
/* Old-style pages: brighter teal-tinted ground, tighter bands */
.sec-alt, body { background-color: #EBF6F8; } .sec { padding-top: clamp(28px, 3.6vw, 52px); padding-bottom: clamp(28px, 3.6vw, 52px); } .sec-tight { padding-top: 20px; padding-bottom: 28px; }
.vz-hero.cf-hero { padding: 22px 0 18px; }
.vz-hero.cf-hero, .vz-page .vz-hero { padding: 20px 0 16px !important; min-height: 0 !important; } .vz-page .sec-alt, .vz-page .sec, .vz-page { background: #EBF6F8 !important; }
.page-hero, .hm-hero, .vz-hero, .hub-hero, .bx-hero { background: linear-gradient(120deg, #0E7787 0%, #1B76A6 60%, #2F6BB8 100%) !important; }