/* Footing - the welcome page, the first thing every guest sees. The app's own look: Manrope, the brand's blues
   and glow, glass tiles, pills and thin large numbers. Real captures of the app, a month you can try with
   sliders, and light and dark side by side. Loaded after et.css and footing.css, which give the colours. Motion
   is transform and opacity only, and stops for people who ask for less motion. */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body.et-welcome { min-height: 100vh; margin: 0; background: transparent; color: var(--ink); font-family: var(--font); font-weight: 500; }
body.et-welcome::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-theme="light"] body.et-welcome::before {
  background:
    radial-gradient(900px 620px at 50% -10%, rgba(94, 184, 255, .55), rgba(94, 184, 255, 0) 70%),
    radial-gradient(700px 560px at 100% 40%, rgba(43, 100, 174, .22), rgba(43, 100, 174, 0) 70%),
    radial-gradient(760px 600px at 0% 80%, rgba(70, 120, 170, .26), rgba(70, 120, 170, 0) 70%),
    #E2E0DA;
}
html[data-theme="dark"] body.et-welcome::before {
  background:
    radial-gradient(900px 620px at 50% -10%, rgba(94, 184, 255, .36), rgba(94, 184, 255, 0) 70%),
    radial-gradient(700px 560px at 100% 40%, rgba(43, 100, 174, .35), rgba(43, 100, 174, 0) 70%),
    radial-gradient(760px 600px at 0% 80%, rgba(60, 110, 160, .3), rgba(60, 110, 160, 0) 70%),
    #060D17;
}
/* Each picture comes in a light and a dark version; only the one matching the page shows (and loads). */
html:not([data-theme="dark"]) .wl .if-dark, html[data-theme="dark"] .wl .if-light { display: none !important; }
.wl img { max-width: none; }
.wl .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wl [id] { scroll-margin-top: 92px; }
.wl-wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }

/* ---------- buttons ---------- */
.wl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: 999px; background: var(--sel); color: var(--on-sel);
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.wl-btn:hover { opacity: .9; }
.wl-btn:active { transform: scale(.98); }
.wl-btn .ic { transition: transform 240ms var(--ease); }
.wl-btn:hover .ic { transform: translateX(3px); }
.wl-btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.wl-btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }
.wl-btn-ghost { border-color: var(--hair); background: var(--w-bg-2); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wl-btn-ghost:hover { opacity: 1; border-color: var(--hair-2); }
.wl-btn-light { background: #DCEEFB; color: #0F2E4D; }
.wl-btn-glass { border-color: rgba(220, 238, 251, .3); background: rgba(220, 238, 251, .08); color: #F4F7FA; }
.wl-btn-glass:hover { opacity: 1; border-color: rgba(220, 238, 251, .5); }

/* ---------- top bar: clear over the hero, glass once the page scrolls ---------- */
.wl-bar { position: sticky; top: 0; z-index: 50; }
.wl-bar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); transition: opacity 300ms var(--ease);
}
html[data-theme="light"] .wl-bar::before { background: rgba(233, 231, 225, .72); }
html[data-theme="dark"] .wl-bar::before { background: rgba(6, 13, 23, .66); }
.wl-bar.is-stuck::before { opacity: 1; }
.wl-bar-in { display: flex; align-items: center; gap: 28px; height: 76px; }
.wl-brand { display: inline-flex; flex: none; text-decoration: none; }
.wl-logo img { display: block; width: auto; height: 30px; }
.wl-nav { display: flex; gap: 4px; }
.wl-nav a { padding: 8px 14px; border-radius: 999px; color: var(--slate); font-size: 14px; font-weight: 600; text-decoration: none; transition: color var(--t) var(--ease), background-color var(--t) var(--ease); }
.wl-nav a:hover { background: var(--w-bg-2); color: var(--ink); }
.wl-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.wl .lang-switch { gap: 3px; padding: 3px; border: 1px solid var(--hair); border-radius: 999px; background: transparent; }
.wl .lang-switch button { height: 30px; min-width: 40px; border: 0 !important; border-radius: 999px; color: var(--slate); }
.wl .lang-switch button:hover { background: var(--w-bg-2); }
.wl .lang-switch button[aria-pressed="true"] { background: var(--sel); color: var(--on-sel); }
.wl .theme-btn { width: 40px; height: 40px; border: 1px solid var(--hair); border-radius: 50%; background: transparent; color: var(--ink); }
.wl .theme-btn:hover { background: var(--w-bg-2); }
.wl-link { padding: 8px 12px; color: var(--ink); font-size: 14px; font-weight: 600; text-decoration: none; }
.wl-link:hover { text-decoration: underline; }
.wl-notice { padding: 12px 0; border-bottom: 1px solid var(--line); background: var(--w-bg); color: var(--ink); font-size: 14px; font-weight: 600; }

/* ---------- hero ---------- */
.wl-hero { position: relative; padding: 56px 0 24px; overflow: hidden; }
.wl-hero-copy { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 7px 16px 7px 12px; border: 1px solid var(--hair);
  border-radius: 999px; background: var(--w-bg-2); color: var(--text); font-size: 13.5px; font-weight: 600;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.wl-pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.wl-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: wl-ping 2.4s var(--ease) infinite; }
@keyframes wl-ping { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }
.wl-hero h1 {
  max-width: 16ch; margin: 24px 0 0; color: var(--ink); font-size: clamp(44px, 6.6vw, 92px); font-weight: 300;
  letter-spacing: -.045em; line-height: .98; text-wrap: balance;
}
.wl-lead { max-width: 58ch; margin: 24px 0 0; color: var(--slate); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; text-wrap: pretty; }
.wl-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.wl-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--slate); font-size: 13.5px; }
.wl-proof li { display: inline-flex; align-items: center; gap: 7px; }
.wl-proof .ic { width: 15px; height: 15px; color: var(--accent); }

/* The app, tilted back, straightening as the page scrolls; two cards float off it and lean towards the mouse.
   --tilt and --lift come from the scroll, --px and --py (-1 to 1) from the mouse. */
.wl-stage { position: relative; width: min(1180px, 100% - 48px); margin: 64px auto 0; perspective: 2200px; }
.wl-stage::before {
  content: ""; position: absolute; left: 10%; right: 10%; top: 6%; height: 70%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(94, 184, 255, .45), rgba(94, 184, 255, 0)); filter: blur(20px);
}
.wl-screen {
  position: relative; width: min(1060px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid var(--w-line); border-radius: 22px;
  transform-origin: 50% 0; transform: rotateX(var(--tilt, 0deg)) scale(var(--lift, 1));
  box-shadow: 0 70px 140px rgba(8, 17, 28, .28), 0 0 0 1px rgba(255, 255, 255, .06);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
}
html[data-theme="dark"] .wl-screen { box-shadow: 0 70px 140px rgba(0, 0, 0, .55), 0 0 0 1px rgba(94, 184, 255, .12); }
.wl-shot { display: block; width: 100%; height: auto; }
.wl-pop { position: absolute; z-index: 2; }
.wl-pop-img { display: block; width: 100%; height: auto; }
.wl-pop-bal { left: 0; top: 46%; width: clamp(190px, 25%, 320px); transform: translate3d(calc(var(--px, 0) * 22px), calc(var(--py, 0) * 16px), 0) rotate(-4deg); animation: wl-bob 8s ease-in-out infinite alternate; }
.wl-pop-bal img { border-radius: 8.24% / 11.72%; box-shadow: 0 40px 90px rgba(8, 17, 28, .35), 0 0 0 1px rgba(94, 184, 255, .25); }
.wl-pop-up { right: 0; top: 12%; width: clamp(170px, 21%, 270px); transform: translate3d(calc(var(--px, 0) * 32px), calc(var(--py, 0) * 22px), 0) rotate(3deg); animation: wl-bob 10s ease-in-out -4s infinite alternate; }
.wl-pop-up img { border-radius: 8.24% / 6.56%; box-shadow: 0 40px 90px rgba(8, 17, 28, .35), 0 0 0 1px rgba(220, 238, 251, .2); }
@keyframes wl-bob { from { translate: 0 0; } to { translate: 0 -12px; } }
/* The captures load lazily, so each one fades in once it has arrived instead of popping in. */
.wl-fade img { opacity: 0; transition: opacity 800ms var(--ease); }
.wl-fade img.is-in { opacity: 1; }

/* ---------- sections ---------- */
.wl-sec { padding: 120px 0 0; }
.wl-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.wl-kicker { display: inline-block; margin: 0 0 16px; color: var(--accent); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wl-head h2 { margin: 0; color: var(--ink); font-size: clamp(34px, 4.6vw, 60px); font-weight: 300; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.wl-head h2 + p { margin: 18px auto 0; max-width: 56ch; color: var(--slate); font-size: 17px; line-height: 1.55; text-wrap: pretty; }

/* Glass, like the app's tiles. */
.wl-calc, .wl-tile, .wl-steps li, .wl-trust-in > div {
  border: 1px solid var(--w-line); background: var(--w-bg); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
}

/* ---------- try it: a month with sliders ---------- */
.wl-calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: 1060px; margin: 0 auto; border-radius: 32px; overflow: hidden; }
.wl-calc-in { display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 44px 40px; border-right: 1px solid var(--line); }
.wl-range { display: grid; gap: 14px; cursor: pointer; }
.wl-range-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wl-range-name { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-size: 15px; font-weight: 600; }
.wl-range-name i { width: 9px; height: 9px; border-radius: 50%; background: var(--k); }
.wl-range output { color: var(--ink); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-range input { width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --fill: 50%; }
.wl-range input:focus { outline: none; }
.wl-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--k) var(--fill), var(--track) var(--fill)); }
.wl-range input::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--k) var(--fill), var(--track) var(--fill)); }
.wl-range input::-webkit-slider-thumb {
  width: 24px; height: 24px; margin-top: -9px; border: 2px solid var(--k); border-radius: 50%; background: var(--solid);
  box-shadow: 0 4px 14px rgba(8, 17, 28, .2); -webkit-appearance: none; appearance: none; transition: transform 160ms var(--ease);
}
.wl-range input::-moz-range-thumb { width: 20px; height: 20px; border: 2px solid var(--k); border-radius: 50%; background: var(--solid); box-shadow: 0 4px 14px rgba(8, 17, 28, .2); }
.wl-range input:active::-webkit-slider-thumb { transform: scale(1.15); }
.wl-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px var(--focus); }
.wl-range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px var(--focus); }
.wl-calc-out { display: flex; flex-direction: column; justify-content: center; padding: 44px 44px 40px; }
.wl-calc-label { margin: 0; color: var(--slate); font-size: 14px; font-weight: 600; }
/* A big number the way the app writes it: a small currency sign, the whole amount, lighter cents. */
.wl-big { margin: 6px 0 0; color: var(--ink); font-size: clamp(54px, 6.4vw, 86px); font-weight: 200; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wl-big .s { margin-right: .06em; font-size: .42em; font-weight: 300; letter-spacing: 0; vertical-align: .9em; color: var(--slate); }
.wl-big .c { font-size: .46em; font-weight: 300; letter-spacing: -.02em; color: var(--slate); }
.wl-big .k { margin-left: .2em; font-size: .36em; font-weight: 400; letter-spacing: 0; color: var(--slate); }
.wl-big.is-neg { color: var(--c-exp); }
.wl-calc-note { min-height: 3em; margin: 16px 0 0; color: var(--slate); font-size: 15px; line-height: 1.5; }
.wl-calc-note b { color: var(--ink); font-weight: 700; }
.wl-bars { display: grid; gap: 14px; margin-top: 26px; }
.wl-bar-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; gap: 14px; color: var(--text); font-size: 13.5px; font-weight: 600; }
.wl-track { position: relative; height: 10px; overflow: hidden; border-radius: 5px; background: var(--track); }
/* Each bar is full width and slides in from the left, so its rounded end stays round at any length. */
.wl-track i { position: absolute; inset: 0; border-radius: 5px; background: var(--k); transform: translateX(-100%); transition: transform 650ms var(--ease); }
.k-kept { --k: var(--c-inc-soft); }
.k-kept .wl-track i { background: var(--c-inc-soft); box-shadow: inset 0 0 0 1px var(--c-inc); }

/* ---------- features: a grid of glass tiles with real captures ---------- */
.wl-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: dense; gap: 18px; }
.wl-tile {
  position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 30px 30px 0; overflow: hidden; border-radius: 28px;
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.wl-tile:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(8, 17, 28, .14); }
html[data-theme="dark"] .wl-tile:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .4); }
.wl-tile-copy h3 { margin: 0; color: var(--ink); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.wl-tile-copy p { max-width: 44ch; margin: 10px 0 0; color: var(--slate); font-size: 15px; line-height: 1.55; }
/* Rows: the overview and what is due; renewals, budgets and accounts; then transactions and reports across the
   whole width, their captures on alternate sides. */
.wl-t-overview { grid-column: span 4; }
.wl-t-upcoming, .wl-t-renew, .wl-t-budgets, .wl-t-accts { grid-column: span 2; }
.wl-t-tx, .wl-t-reports { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 30px; min-height: 0; }
.wl-t-tx .wl-tile-copy, .wl-t-reports .wl-tile-copy { align-self: center; padding-bottom: 30px; }
.wl-t-reports { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.wl-t-reports .wl-tile-copy { order: 2; }
/* A capture that runs off the tile's bottom corner. */
.wl-pic { position: relative; }
.wl-pic-bleed { margin: 28px -30px 0 0; }
.wl-t-overview .wl-pic-bleed { margin-top: auto; padding-top: 28px; }
.wl-pic-bleed .wl-pic-img {
  display: block; width: 100%; height: auto; border-radius: 16px 0 0 0; border: 1px solid var(--w-line); border-width: 1px 0 0 1px;
  box-shadow: 0 -10px 50px rgba(8, 17, 28, .1); transition: transform 600ms var(--ease);
}
.wl-t-tx .wl-pic-bleed { margin: 30px -30px 0 0; align-self: end; }
.wl-t-reports .wl-pic-bleed { margin: 30px 0 0 -30px; align-self: end; }
.wl-t-reports .wl-pic-bleed .wl-pic-img { border-radius: 0 16px 0 0; border-width: 1px 1px 0 0; }
.wl-tile:hover .wl-pic-bleed .wl-pic-img { transform: translate3d(-6px, -6px, 0); }
.wl-tile.wl-t-reports:hover .wl-pic-bleed .wl-pic-img { transform: translate3d(6px, -6px, 0); }
/* What is due: the card runs off the bottom of its tile. */
.wl-t-upcoming .wl-pic-card { height: 300px; margin: 26px 0 0; padding: 0; }
/* A capture that sits on the tile like a card, rounded like the app's (28px corners on a 340px tile). */
.wl-pic-card { margin: auto 0 0; padding: 28px 0 30px; }
.wl-pic-card .wl-pic-img { display: block; width: min(100%, 340px); height: auto; margin: 0 auto; transform: rotate(-2deg); box-shadow: 0 30px 70px rgba(8, 17, 28, .2), 0 0 0 1px var(--w-line); transition: transform 500ms var(--ease); }
html[data-theme="dark"] .wl-pic-card .wl-pic-img { box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(94, 184, 255, .18); }
.wl-tile:hover .wl-pic-card .wl-pic-img { transform: rotate(0deg) translateY(-4px); }
.wl-r-up .wl-pic-img { border-radius: 8.24% / 6.56%; }
.wl-r-bud .wl-pic-img { border-radius: 8.24% / 11.16%; }
.wl-t-budgets .wl-pic-card .wl-pic-img { width: min(100%, 300px); }

/* A price that changes on its own date: four payments down a line, the renewal marked. */
.wl-chain { position: relative; display: grid; gap: 4px; margin: auto 0 0; padding: 26px 0 30px; list-style: none; }
.wl-chain::before { content: ""; position: absolute; left: 7px; top: 44px; bottom: 50px; width: 2px; border-radius: 1px; background: var(--track); }
.wl-pt { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 46px; padding: 0 14px 0 0; }
.wl-pt::before { content: ""; width: 12px; height: 12px; margin-left: 2px; border: 2px solid var(--hair-2); border-radius: 50%; background: var(--solid); }
.wl-pt b { color: var(--text); font-size: 14px; font-weight: 600; }
.wl-pt span { color: var(--ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wl-pt:first-child span { color: var(--slate); }
.wl-pt em { grid-column: 2; grid-row: 2; justify-self: start; margin: -4px 0 4px; padding: 2px 10px; border-radius: 999px; background: var(--sel); color: var(--on-sel); font-size: 11.5px; font-style: normal; font-weight: 700; }
.wl-pt.is-new { padding: 8px 14px 8px 0; border-radius: 16px; background: var(--w-bg-2); }
.wl-pt.is-new::before { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 5px var(--focus); }

/* Accounts: the switch from the app's top bar, and one account shared to view only. */
.wl-accts { display: grid; gap: 16px; margin: auto 0 0; padding: 28px 0 32px; }
.wl-pills { display: flex; gap: 8px; }
.wl-pills span { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border: 1px solid var(--hair); border-radius: 999px; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.wl-pills .is-on { border-color: transparent; background: var(--sel); color: var(--on-sel); }
.wl-pills .wl-plus { justify-content: center; width: 42px; padding: 0; color: var(--slate); font-size: 18px; font-weight: 400; }
.wl-share { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--w-line); border-radius: 18px; background: var(--w-bg-2); }
.wl-avatar { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--c-inv-soft); color: var(--c-inv); font-size: 15px; font-weight: 700; }
.wl-share b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; }
.wl-share small { display: block; margin-top: 2px; color: var(--slate); font-size: 12.5px; font-weight: 600; }

.wl-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.wl-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border: 1px solid var(--w-line); border-radius: 999px; background: var(--w-bg-2); color: var(--text); font-size: 14px; font-weight: 600; }
.wl-chips .ic { color: var(--accent); }

/* ---------- how it works ---------- */
.wl-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.wl-steps li { padding: 30px 30px 34px; border-radius: 28px; }
.wl-num { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--hair); border-radius: 50%; color: var(--accent); font-size: 22px; font-weight: 300; }
.wl-steps h3 { margin: 22px 0 0; color: var(--ink); font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.wl-steps p { margin: 10px 0 0; color: var(--slate); font-size: 15px; line-height: 1.55; }

/* ---------- light and dark: drag across to compare ---------- */
/* --cut (0% to 100%) is where the line is. The dark picture's frame slides right and the picture slides back
   by the same amount, so it stays put while less or more of it shows: all transforms, no clipping. */
.wl-compare {
  position: relative; max-width: 1060px; margin: 0 auto; overflow: hidden; border: 1px solid var(--w-line); border-radius: 26px;
  box-shadow: 0 50px 110px rgba(8, 17, 28, .2); --cut: 50%; touch-action: pan-y;
}
html[data-theme="dark"] .wl-compare { box-shadow: 0 50px 110px rgba(0, 0, 0, .5); }
.wl-cmp-a { display: block; width: 100%; height: auto; }
.wl-cmp-b { position: absolute; inset: 0; overflow: hidden; transform: translateX(var(--cut)); }
.wl-cmp-b img { display: block; width: 100%; height: auto; transform: translateX(calc(var(--cut) * -1)); }
.wl-cmp-line { position: absolute; inset: 0; pointer-events: none; transform: translateX(var(--cut)); }
.wl-cmp-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #F4F7FA; box-shadow: 0 0 18px rgba(94, 184, 255, .7); }
.wl-cmp-knob {
  position: absolute; left: 0; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%;
  background: rgba(244, 247, 250, .92); box-shadow: 0 10px 30px rgba(8, 17, 28, .35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.wl-cmp-knob::before, .wl-cmp-knob::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: solid #0F2E4D; border-width: 0 0 2px 2px; }
.wl-cmp-knob::before { left: 12px; transform: rotate(45deg); }
.wl-cmp-knob::after { right: 12px; transform: rotate(-135deg); }
.wl-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.wl-compare:focus-within .wl-cmp-knob { box-shadow: 0 10px 30px rgba(8, 17, 28, .35), 0 0 0 5px var(--focus); }

/* ---------- trust ---------- */
.wl-trust-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.wl-trust-in > div { padding: 28px 30px 30px; border-radius: 28px; }
.wl-trust-in .ic { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--c-inv-tint); color: var(--accent); }
html[data-theme="dark"] .wl-trust-in .ic { background: rgba(94, 184, 255, .1); }
.wl-trust-in h3 { margin: 18px 0 0; color: var(--ink); font-size: 19px; font-weight: 600; }
.wl-trust-in p { margin: 8px 0 0; color: var(--slate); font-size: 15px; line-height: 1.55; }

/* ---------- last call: the navy of the app's tiles ---------- */
.wl-final { padding: 120px 0 0; }
.wl-final-card {
  position: relative; overflow: hidden; isolation: isolate; padding: 88px 32px; border-radius: 36px; color: #F4F7FA; text-align: center;
  background:
    radial-gradient(700px 420px at 50% -10%, rgba(94, 184, 255, .5), rgba(94, 184, 255, 0) 70%),
    radial-gradient(600px 500px at 0% 110%, rgba(43, 100, 174, .55), rgba(43, 100, 174, 0) 65%),
    linear-gradient(160deg, #0F2E4D 0%, #0A1A2C 60%, #060D17 100%);
  box-shadow: 0 50px 120px rgba(8, 17, 28, .3);
}
.wl-final-card h2 { margin: 0; color: #F4F7FA; font-size: clamp(38px, 5.4vw, 72px); font-weight: 300; letter-spacing: -.04em; line-height: 1; text-wrap: balance; }
.wl-final-card p { max-width: 46ch; margin: 20px auto 0; color: rgba(220, 238, 251, .72); font-size: 17px; line-height: 1.55; }

/* ---------- footer ---------- */
.wl-foot { margin-top: 96px; border-top: 1px solid var(--line); }
.wl-foot-in { display: flex; align-items: center; gap: 28px; padding: 30px 0 40px; color: var(--slate); font-size: 13.5px; }
.wl-foot-in nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-left: auto; }
.wl-foot-in nav a { color: var(--slate); font-weight: 600; text-decoration: none; }
.wl-foot-in nav a:hover { color: var(--ink); }
.wl-foot .wl-logo img { height: 26px; }

/* ---------- coming into view as the page scrolls (only when the script runs) ---------- */
.js-reveal [data-reveal] { opacity: 0; translate: 0 28px; transition: opacity 900ms var(--ease), translate 900ms var(--ease), transform 400ms var(--ease), box-shadow 400ms var(--ease); }
.js-reveal [data-reveal].is-in { opacity: 1; translate: none; }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px) {
  .wl-nav { display: none; }
  .wl-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-t-overview, .wl-t-tx, .wl-t-reports { grid-column: span 2; }
  .wl-t-upcoming, .wl-t-renew, .wl-t-budgets, .wl-t-accts { grid-column: span 1; }
  .wl-t-tx, .wl-t-reports { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wl-t-tx .wl-tile-copy, .wl-t-reports .wl-tile-copy { order: 0; padding-bottom: 0; }
  .wl-t-reports .wl-pic-bleed { margin: 28px -30px 0 0; }
  .wl-t-reports .wl-pic-bleed .wl-pic-img { border-radius: 16px 0 0 0; border-width: 1px 0 0 1px; }
  .wl-calc { grid-template-columns: minmax(0, 1fr); }
  .wl-calc-in { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .wl-steps, .wl-trust-in { grid-template-columns: minmax(0, 1fr); }
  .wl-sec, .wl-final { padding-top: 88px; }
}
@media (max-width: 700px) {
  .wl-wrap, .wl-stage { width: calc(100% - 32px); }
  .wl-bar-in { gap: 12px; height: 64px; }
  .wl-logo img { height: 26px; }
  .wl-tools { gap: 6px; }
  .wl-tools .wl-btn-sm { display: none; }
  .wl-link { padding: 8px 6px; }
  .wl-hero { padding-top: 34px; }
  .wl-hero h1 { margin-top: 22px; }
  .wl-cta { width: 100%; }
  .wl-cta .wl-btn { flex: 1 1 100%; }
  .wl-stage { margin-top: 44px; }
  .wl-screen { border-radius: 14px; }
  .wl-pop-up { display: none; }
  .wl-pop-bal { left: -6px; top: auto; bottom: 4%; width: 46%; }
  .wl-bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wl-t-overview, .wl-t-tx, .wl-t-reports, .wl-t-upcoming, .wl-t-renew, .wl-t-budgets, .wl-t-accts { grid-column: auto; }
  .wl-tile { min-height: 0; padding: 24px 22px 0; border-radius: 24px; }
  .wl-pic-bleed, .wl-t-tx .wl-pic-bleed, .wl-t-reports .wl-pic-bleed { margin-right: -22px; }
  .wl-t-upcoming .wl-pic-card { height: 260px; }
  .wl-calc { border-radius: 26px; }
  .wl-calc-in, .wl-calc-out { padding: 28px 22px; }
  .wl-bar-row { grid-template-columns: 92px minmax(0, 1fr); }
  .wl-head { margin-bottom: 36px; }
  .wl-head h2 + p { font-size: 16px; }
  .wl-final-card { padding: 64px 22px; border-radius: 28px; }
  .wl-compare { border-radius: 18px; }
  .wl-cmp-knob { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .wl-foot-in { flex-direction: column; align-items: flex-start; gap: 16px; }
  .wl-foot-in nav { margin-left: 0; }
}
@media (max-width: 400px) {
  .wl .lang-switch button { min-width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .wl *, .wl *::before, .wl *::after { animation: none !important; transition-duration: 0ms !important; }
}