/* Perqia AR site v33: locked direction "The billing month, set as a ledger".
   v3 adopts Perqia's product UI colors: green means paid, violet means the early-pay incentive. */

:root {
  --ink: #0b0b0c;
  --ink-hover: #26272c;      /* dark button hover and press */
  --ink-2: #4a4c55;
  --ink-3: #6b6e78;          /* lightest grey allowed for text */
  --rule: #e1e4ec;           /* hairlines */
  --line: #d3d6e0;           /* idle wires, rails and outlines in the product graphics */
  --field: #c9ccd6;          /* field borders and the switch track */
  --field-hover: #9ea2ae;
  --paper: #ffffff;
  --tint: #f6f7f9;           /* neutral fill: capability boxes, the Perqia lane, the shaded table row */
  --lilac: #d9d6fb;          /* sampled from the cloud; underlines the calculator's live figures */
  --chip: #f2f2f3;
  --paid: #15803d;           /* "paid" text (AA on white) */
  --paid-ink: #30c058;       /* "paid" marks: dots, lines, stamp; matches the product stamp */
  --paid-tint: #e7f7ec;
  --offer: #392ffd;          /* early-pay incentive, from the product's "Save" chip */
  --offer-tint: #ecebff;
  --late: #b42318;           /* past due */
  --late-tint: #fdecea;

  /* Type. Site text uses these sizes; the product mockups keep the sizes scaled from the product. */
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --fs-display: clamp(48px, 6.6vw, 96px);
  --fs-h2: clamp(38px, 4.6vw, 64px);
  --fs-h3: 22px;
  --fs-lede: 21px;
  --fs-body: 18px;
  --fs-card: 16px;           /* descriptions under a card or capability title */
  --fs-small: 15px;          /* nav, labels, footer */
  --fs-fine: 14px;           /* hints and notes */
  --fs-label: 12px;          /* uppercase labels, tracked .12em */
  --measure: 36em;           /* longest line for intro copy, about 70 characters */

  /* Space: an 8pt scale, and one fluid value for the padding above and below every section */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;
  --sec: clamp(88px, 10vw, 128px);
  --max: 1240px;
  --gutter: 40px;

  /* Corners. A box inside another box always has the smaller radius. */
  --r-xs: 6px;               /* method icons */
  --r-sm: 10px;              /* fields, icon frames, tiles and rows inside a graphic */
  --r-md: 14px;              /* cards inside a surface */
  --r-lg: 20px;              /* surfaces: capability boxes, the calculator, the Perqia lane */
  /* Product corners, scaled from the product screenshots: the offer, date and bank boxes are one component */
  --r-card: 40px;
  --r-box: 30px;
  --r-icon: 14px;

  /* Elevation: three levels, all tight and layered */
  --card-edge: 1px solid rgba(11, 11, 12, .09);
  --shadow-sm: 0 1px 2px rgba(20, 30, 90, .06);
  --shadow-md: 0 1px 2px rgba(11, 11, 12, .05), 0 12px 24px -14px rgba(20, 30, 90, .3);
  --card-shadow: 0 1px 2px rgba(11, 11, 12, .05), 0 8px 16px -8px rgba(20, 30, 90, .1), 0 30px 56px -28px rgba(20, 30, 90, .24);

  /* Motion. Six durations and four curves, with no overshoot anywhere. Spinners turn once
     every 800ms on a linear curve. */
  --dur-press: 120ms;        /* press feedback */
  --dur-fast: 200ms;         /* hovers and color changes */
  --dur-base: 300ms;         /* small state changes and crossfades */
  --dur-move: 450ms;         /* things that move, and drawn checks */
  --dur-slow: 600ms;         /* arrivals and scroll reveals */
  --dur-reveal: 900ms;       /* headline reveals and long draws */
  --ease-out: cubic-bezier(.2, .7, .1, 1);       /* arrivals, reveals and hovers */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* anything that travels from one state to the next */
  --ease-ui: cubic-bezier(.4, 0, .2, 1);         /* controls under the pointer */
  --ease-press: cubic-bezier(.32, 0, .67, 0);    /* the stamp: speeds up into the page and stops dead */

  --vig-bg: #f3f5fa;         /* capability graphic boxes and the Perqia lane: a plain pale tint of the cloud's blue */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .04  0 0 0 0 .06  0 0 0 0 .2  1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.16'/%3E%3C/svg%3E") 0 0 / 180px 180px;   /* paper grain: faint ink-blue specks from SVG noise, no image file. On the cloud and the pale tints */
  --dots: radial-gradient(rgba(11, 11, 12, .09) 1px, transparent 1.3px) 0 0 / 14px 14px;   /* faint dot texture */
  --ring: 0 0 0 4px rgba(57, 47, 253, .14);   /* focus ring for fields */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html { scroll-padding-top: 96px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--offer); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--offer-tint); color: var(--ink); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.num { font-feature-settings: "tnum", "lnum"; }
.label { font: 700 var(--fs-label)/1.2 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); }
[hidden] { display: none !important; }
p { text-wrap: pretty; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 700 16px/1 var(--sans); text-decoration: none; border: 1.5px solid var(--ink); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.btn:active { transform: scale(.98); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-dark:hover { background: var(--ink-hover); border-color: var(--ink-hover); }
.btn-line { background: #fff; color: var(--ink); }   /* solid, so the hero cloud never shows through */
.btn-line:hover { background: color-mix(in srgb, var(--ink) 5%, #fff); }
/* Hover arrow: the chevron grows a shaft and steps right */
.ha { flex: none; width: 10px; height: 10px; margin-right: -3px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ha-l { opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.ha-t { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .ha-l, .btn:focus-visible .ha-l { opacity: 1; }
.btn:hover .ha-t, .btn:focus-visible .ha-t { transform: translateX(3px); }

/* Nav */
/* Sticky nav: clear over the hero, then frosted white with a hairline once the page scrolls */
.site-nav { position: sticky; top: 0; z-index: 50; }
.site-nav::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--rule); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.site-nav.is-scrolled::before { opacity: 1; }
.site-nav > .wrap { position: relative; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; }
.nav img { height: 32px; width: auto; display: block; }
.nav ul { display: flex; gap: var(--s4); list-style: none; margin: 0; padding: 0; font-size: var(--fs-small); font-weight: 400; }
.nav ul a, .nav .login { text-decoration: none; padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.nav ul a { color: var(--ink-2); }
.nav ul a:hover, .nav ul a[aria-current], .nav .login:hover { color: var(--ink); background-size: 100% 1.5px; }
.nav .actions { display: flex; gap: var(--s2); align-items: center; font-size: var(--fs-small); font-weight: 400; }
.nav .actions .btn { min-height: 40px; padding: 0 18px; font-size: var(--fs-small); font-weight: 700; }
.nav .login { margin: 0 8px; }

/* Site switcher: Lenders (perqia.com) | Businesses (this site). A segmented pill beside the logo,
   so the pair reads as Perqia for Businesses. The current site is the white segment.
   Glassy on the cloud, so it sits on the hero like the nav does. */
.brand { display: flex; align-items: center; gap: 20px; }
.aud { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 14px; line-height: 1; }
.aud a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.aud a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.aud a[aria-current] { color: var(--ink); font-weight: 700; background: #fff; box-shadow: 0 0 0 1px rgba(11, 11, 12, .06), var(--shadow-sm), 0 2px 6px -2px rgba(20, 30, 90, .12); }
.aud a:focus-visible { outline: none; box-shadow: var(--ring); }
.aud-bar { display: none; }
/* On a dark nav (perqia.com): a faint white track, white text, and the same white current segment */
.aud.on-dark { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.aud.on-dark a { color: rgba(255, 255, 255, .72); }
.aud.on-dark a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.aud.on-dark a[aria-current] { color: var(--ink); background: #fff; box-shadow: none; }

/* Hero */
.hero { position: relative; overflow: hidden; margin-top: -84px; padding-top: 84px; }
/* The cloud sits still in its own layer, behind the hero content. Its 32px bleed keeps the
   framing it has had since v24. */
/* It fades out over the top of the lede (--fade, which JS measures), so the paragraph sits on white. */
.hero-bg { --fade: 520px; position: absolute; inset: 0 0 auto; height: 900px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(#000 calc(var(--fade) * .42), rgba(0, 0, 0, .7) calc(var(--fade) * .68), rgba(0, 0, 0, .3) calc(var(--fade) * .87), transparent var(--fade)); mask-image: linear-gradient(#000 calc(var(--fade) * .42), rgba(0, 0, 0, .7) calc(var(--fade) * .68), rgba(0, 0, 0, .3) calc(var(--fade) * .87), transparent var(--fade)); }
.hb-img { position: absolute; inset: -32px; background: url("assets/perqia-background.svg") center top / cover no-repeat; opacity: .75; }
.hb-img::after { content: ""; position: absolute; inset: 0; background: var(--grain); }   /* grain over the cloud, so it reads as paper, not a smooth digital gradient */
.hero > .wrap { position: relative; z-index: 1; }   /* copy, buttons and invoice sit above the cloud */
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "head card" "copy card"; grid-template-rows: auto 1fr; column-gap: var(--s6); row-gap: var(--s4); align-items: start; padding: calc(var(--s6) + 16px) 0 var(--sec); }   /* clear of the nav, now that no eyebrow sits above the headline */
.hero .head { grid-area: head; }
.hero h1 { font: 400 var(--fs-display)/.98 var(--serif); letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.hero .copy { grid-area: copy; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); max-width: 29em; margin: 0 0 var(--s4); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Invoice: rebuilt from Perqia's product UI */
/* As in the product, the card is glass at the top (here holding the invoice's month) with the
   white invoice sheet laid over its lower edge. The glass shows the cloud behind it.
   The glass is its own layer (::before, with its rim in ::after) so it can open up behind the
   sheet: on load the sheet starts at the top of the card, covering it, and slides down into
   place (--lift, from the journey's height to 0, which JS runs) as the glass grows behind it.
   The glass: a light tint over a blurred, saturated backdrop, a sheen from the top left, a
   bright specular line along the top, and a rim that catches the light at its top and corners. */
@property --lift { syntax: "<length>"; inherits: true; initial-value: 0px; }
.invoice { --lift: 0px; container: invoice / inline-size; grid-area: card; position: relative; min-width: 0; margin: 0; border-radius: var(--r-card); border: 1px solid transparent; }
.invoice.reveal { transition: --lift var(--dur-reveal) var(--ease-in-out); }   /* the sheet travels, so it eases in and out */
.invoice::before, .invoice::after { content: ""; position: absolute; inset: -1px -1px calc(var(--lift) - 1px); z-index: -1; border-radius: inherit; pointer-events: none; }
.invoice::before {
  background: radial-gradient(90% 80% at 8% 0%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 60%), linear-gradient(170deg, rgba(150, 172, 222, .2), rgba(170, 182, 226, .16) 55%, rgba(196, 180, 232, .2));
  -webkit-backdrop-filter: blur(12px) saturate(2); backdrop-filter: blur(12px) saturate(2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 18px 30px -22px rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(255, 255, 255, .3), var(--card-shadow); }
.invoice::after { padding: 1px; background: linear-gradient(165deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .45) 22%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sheet { transform: translateY(calc(-1 * var(--lift))); position: relative; padding: 32px 35px 25px; background: #fff; border-radius: calc(var(--r-card) - 1px); box-shadow: 0 0 0 1px rgba(11, 11, 12, .05), 0 -10px 28px -16px rgba(20, 30, 90, .22); }
.inv-amt { font: 700 48px/1 var(--sans); letter-spacing: -0.03em; margin: 0; }
.inv-due { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; color: var(--ink-2); font-size: 18px; }
.pill { display: inline-flex; flex: none; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--chip); font-size: 15px; font-weight: 700; color: var(--ink-2); }
.offer { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 26px 0 0; padding: 16px 20px 16px 16px; border-radius: var(--r-box); border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 200deg, #3a8df8, #9b5de5, #f0445a, #ff7a00, #ffb000, #9fd36a, #2ccfc0, #3a8df8) border-box;
  box-shadow: 0 6px 24px -10px rgba(240, 68, 90, .35), 0 -4px 20px -12px rgba(58, 141, 248, .4); }
.offer .ico { width: 48px; height: 48px; border-radius: var(--r-icon); background: var(--chip); display: grid; place-items: center; }
.offer strong { display: block; font-size: 18px; line-height: 1.25; }
.offer small { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.35; text-wrap: pretty; }
/* In a narrow card the Save chip drops under the offer text, so the title stays on one line */
@container invoice (max-width: 400px) {
  .offer { grid-template-columns: auto 1fr; }
  .offer .save { grid-column: 2; justify-self: start; }
}
.offer small b { color: var(--ink); }
.save { padding: 8px 12px; border-radius: 999px; background: var(--offer-tint); color: var(--offer); font-weight: 700; font-size: 15px; white-space: nowrap; }
.inv-meta { display: grid; grid-template-columns: 96px 1fr; gap: 12px 16px; margin: 24px 0 0; padding: 22px 0 0; border-top: 1px solid var(--rule); font-size: 16px; }
.inv-meta dt { color: var(--ink-3); }
.inv-meta dd { margin: 0; }
/* Footer, as in the product: download the PDF on the left, the full details on the right */
.inv-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); font-size: 15px; font-weight: 700; white-space: nowrap; }
.inv-dl { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px 0 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); }
.inv-more { display: inline-flex; align-items: center; gap: 4px; }
.inv-more svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
/* Too narrow for both on one line: the download spans the card and the link sits under it */
@container invoice (max-width: 480px) {   /* the card's width, padding included */
  .inv-foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .inv-dl { justify-content: center; }
  .inv-more { align-self: center; }
}
.meta-wrap { position: relative; }
/* The stamp. Once the paid chip has settled, it drops onto the invoice from above: it starts large
   and faint, casting a soft shadow on the card, and speeds up as it falls (--ease-press). At contact
   it stops dead at its resting angle, the ink turns solid and the shadow is gone. No bounce.
   JS adds .press to play it; without JS, or with reduced motion, the stamp simply sits on the card.
   It sits beside the Invoice and PO numbers and sizes with the card (100cqw is the invoice's
   width) to keep clear of the longer rows above them.
   The image is Perqia's own stamp, inked, with its tilt drawn in, so it rests unrotated. */
.stamp { position: absolute; right: -6px; bottom: 6px; width: clamp(110px, 100cqw - 311px, 140px); height: auto; pointer-events: none; opacity: 0; mix-blend-mode: multiply; }   /* inked like a rubber stamp; multiply lets the rows show through the ink */
.stamp.in { opacity: 1; }
@container invoice (max-width: 450px) {
  .stamp { right: -4px; bottom: -2px; width: min(116px, 100cqw - 240px); }
}
.stamp.press { animation: stamp-drop var(--dur-base) var(--ease-press) calc(var(--dur-fast) + var(--dur-move)) both, stamp-ink var(--dur-base) linear calc(var(--dur-fast) + var(--dur-move)) both; }   /* starts once the chip's check has drawn */
/* The shadow tracks the stamp's height: far and soft at the top, closing in and darkening as it
   falls, gone at contact (99% to 100% is the last 3ms). */
@keyframes stamp-drop {
  from { transform: rotate(-5deg) scale(1.6); filter: drop-shadow(18px 28px 18px rgba(20, 30, 90, .14)); }
  99% { filter: drop-shadow(1px 1px 2px rgba(20, 30, 90, .3)); }
  to { transform: none; filter: drop-shadow(0 0 0 rgba(20, 30, 90, 0)); }
}
@keyframes stamp-ink { 0% { opacity: 0; } 30%, 96% { opacity: .6; } 100% { opacity: 1; } }   /* faint in the air, solid ink on contact */
/* The invoice's month, in the card's glass header: a live day counter over a 30-day ruler.
   Each tick is a day; taller ticks are events. Elapsed days fill ink, reminders violet, and the
   elapsed days turn green once paid. The HTML ships in the end state (day 20, paid). */
.journey { padding: 24px 34px 22px; }
.jhead { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.counter { display: flex; align-items: baseline; gap: 8px; margin: 0; line-height: 1; white-space: nowrap; }
.counter .cl { font: 600 15px/1 var(--sans); color: var(--ink-2); }   /* sits on the number's baseline, like "/ 30" */
.counter .cnum { font: 700 38px/1 var(--sans); font-feature-settings: "tnum", "lnum"; letter-spacing: -0.03em; min-width: 1.3em; text-align: right; }   /* the font shorthand clears .num's figures, so they're set again: every digit is the same width, so the day never shifts */
.counter .cof { font-size: 15px; font-weight: 600; color: var(--ink-2); }
.ruler { display: flex; justify-content: space-between; align-items: flex-end; height: 34px; margin: 0 9px 0 10px; } /* insets = half the width of the "Sent"/"Due" labels minus half a tick, so the labels sit flush with the header's edges */
.ruler .t { display: block; width: 4px; height: 14px; border-radius: 2px; background: rgba(255, 255, 255, .85); transition: background var(--dur-press) linear, height var(--dur-base) var(--ease-out); }
.ruler .t.ev { height: 27px; }
/* Due: five identical 3px dashes with 3px gaps, so the tick starts and ends on a whole dash. Each dash is
   cut by a mask tile, so the top and bottom dashes have the same soft corners as the rest. */
.ruler .t.due { height: 27px; border-radius: 0; background: var(--ink-3); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6'%3E%3Crect width='4' height='3' rx='1'/%3E%3C/svg%3E") 0 0 / 4px 6px repeat-y; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='6'%3E%3Crect width='4' height='3' rx='1'/%3E%3C/svg%3E") 0 0 / 4px 6px repeat-y; }
.ruler .t.past { background: var(--ink); }
.ruler .t.now { height: 34px; background: var(--ink); }
.ruler.is-paid .t.past, .ruler.is-paid .t.now { background: var(--paid-ink); }
.ruler:not(.is-paid) .t.ev-reminder.past { background: var(--offer); }   /* reminders show violet until the invoice is paid, then turn green with every elapsed day */
.rlabels { position: relative; height: 12px; margin: 9px 11px 0 12px; font: 700 11px/1 var(--sans); letter-spacing: .04em; color: var(--ink-2); }
.rlabels span { position: absolute; left: calc(var(--d) / 30 * 100%); transform: translateX(-50%); white-space: nowrap; }
.rlabels span.paid { color: var(--paid); }
/* The status chip is a stack. With JS each change adds a pill that rolls up into place as the
   old one rolls out, the same move as every other chip on the page. */
.event { display: inline-grid; justify-items: end; margin: 0; overflow: hidden; border-radius: 999px; }
.evp { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: var(--chip); font-size: 13px; font-weight: 700; line-height: 1.25; color: var(--ink-2); white-space: nowrap; transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.evp i { flex: none; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
.evp.is-offer { background: var(--offer-tint); color: var(--offer); }
.evp.is-paid { background: var(--paid-tint); color: var(--paid); }
.evp.below { opacity: 0; transform: translateY(70%); transition: none; }
.evp.above { opacity: 0; transform: translateY(-70%); }

/* Problem */
.problem { padding: var(--sec) 0; }
h2 { font: 400 var(--fs-h2)/1.04 var(--serif); letter-spacing: -0.01em; margin: 0; max-width: 17em; text-wrap: balance; }
.problem .intro { color: var(--ink-2); max-width: var(--measure); margin: var(--s3) 0 0; }
.tag { display: table; margin-top: 12px; padding: 5px 9px; border-radius: 999px; font: 700 12px/1 var(--sans); letter-spacing: .02em; background: var(--late-tint); color: var(--late); white-space: nowrap; }
.tag.due { background: var(--chip); color: var(--ink-2); }
.chip.late { background: var(--late-tint); color: var(--late); }

/* Board: a stack of cards, one per milestone of a Net 30 invoice. Each card holds both sides,
   so every comparison sits on one card, and the Perqia side is the lit panel. The cards are
   sticky, each one --peek lower than the last: scrolling slides a card up over the one before,
   which tucks back (JS sets --s and --dim), fades the text it covers (--cover) and leaves its
   headlines showing. The finished stack
   reads as a summary of the month. JS measures --peek; without JS the fallback fits desktop. */
.stack { --peek: 112px; --top: 108px; list-style: none; margin: var(--s6) 0 0; padding: 0; }
/* The shadow falls below a card only, never over its top edge. A card still on its way in rides
   higher (--air from JS, 1 to 0): it sits slightly smaller and tilted back, with a longer, softer
   shadow, and settles flat as it lands. Its two sides trail it by a few pixels and settle a beat
   later, and its day rolls up from the card before's (JS).
   The card is built like paper on a desk: a hairline edge, a contact shadow where it touches,
   a short shadow for its thickness and a long ambient one, over a faintly cooler foot. */
.scard { --air: 0; position: sticky; top: calc(var(--top) + var(--i) * var(--peek)); display: grid; grid-template-columns: 172px 1fr 1fr; column-gap: var(--s4); margin-bottom: var(--s4); padding: 28px 28px 30px; background: linear-gradient(180deg, #fff 55%, #fbfbfd); border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px rgba(11, 11, 12, .075), 0 1px 1px rgba(11, 11, 12, .04), 0 3px 6px -2px rgba(20, 30, 90, .06), 0 calc(10px + 22px * var(--air)) calc(24px + 36px * var(--air)) calc(-16px - 10px * var(--air)) rgba(20, 30, 90, calc(.2 + .08 * var(--air)));
  transform: perspective(1600px) rotateX(calc(var(--tilt, 0) * 1deg)) scale(var(--s, 1)); transform-origin: 50% 0; }
.scard:last-child { margin-bottom: 0; }
.stack::after { content: ""; display: block; height: 120px; }   /* the finished stack holds here a moment before it scrolls away */
.scard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, #edeff5, #e3e6ee); opacity: var(--dim, 0); pointer-events: none; }   /* a covered card greys back, a little deeper toward the card above it */
.sc-today, .sc-perqia { transform: translateY(calc(var(--lag, 0) * 12px)); }   /* --lag follows --air more slowly */
.sc-day { display: grid; grid-template-columns: auto 1fr; align-items: center; align-self: start; column-gap: 10px; margin: 0; }
.sc-day .k { font: 400 26px/1 var(--serif); letter-spacing: -0.01em; color: var(--ink-3); }
.sc-day .n { grid-column: 1 / -1; margin-top: 8px; font: 400 60px/.86 var(--serif); letter-spacing: -0.02em; }
.scard.late .sc-day .n { color: var(--late); }
.sc-day .tag { grid-row: 1; grid-column: 2; justify-self: start; margin: -4px 0; }   /* beside the label, so it stays in view on a covered card */
/* Each side's label: "Today" in plain text, and Perqia's logo on the Perqia side, on rows of the
   same height so the two headlines line up. */
.sc-k { display: flex; align-items: center; height: 22px; margin: 0 0 12px; font: 600 15px/1 var(--sans); color: var(--ink-3); }
.sc-k img { display: block; width: auto; height: 30px; margin-left: -2px; }   /* the logo's artwork has some air around it; at this size it overhangs the row evenly */
.scard h3 { margin: 0 0 14px; font: 700 var(--fs-h3)/1.25 var(--sans); letter-spacing: -0.01em; }
.scard h3 + p { margin: 0; color: var(--ink-2); opacity: calc(1 - var(--cover, 0)); }   /* as the next card slides over, the text it covers fades, so only the headlines show */
.sc-today { padding-top: 18px; }
.sc-today h3 { color: var(--ink-2); }
.sc-perqia { margin: -10px -12px -14px 0; padding: 28px 24px 24px; border-radius: var(--r-md); background: linear-gradient(180deg, #f4f3ff, #fbfbff 70%); box-shadow: inset 0 0 0 1px rgba(57, 47, 253, .14), inset 0 1px 0 1px rgba(255, 255, 255, .7); }

[data-reveal] { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(12px); }
[data-reveal].rise { transition: opacity var(--dur-reveal) var(--ease-out) var(--rd, 0s), transform var(--dur-reveal) var(--ease-out) var(--rd, 0s), filter var(--dur-reveal) var(--ease-out) var(--rd, 0s); }
.js h2.rise:not(.is-in) { transform: translateY(18px); filter: blur(8px); }

/* Solution: three capabilities, each with a small animated piece of product UI */
.solution { padding: var(--sec) 0; }
/* Section heads: headline runs the full width, supporting line underneath */
.sol-head h2, .impact .head h2 { max-width: none; }
.sol-head p, .impact .head p { color: var(--ink-2); margin: var(--s3) 0 0; max-width: var(--measure); }
.caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); margin-top: var(--s6); }
.cap { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 0; align-content: start; }
.cap h3 { font: 700 var(--fs-h3)/1.25 var(--sans); letter-spacing: -0.01em; margin: 0 0 var(--s1); }
.cap p + .vig { margin-top: var(--s3); }
.cap p { margin: 0; color: var(--ink-2); font-size: var(--fs-card); line-height: 1.55; }
.vig { position: relative; height: 290px; border-radius: var(--r-lg); background: var(--grain), var(--vig-bg); box-shadow: inset 0 0 0 1px var(--rule); padding: 22px; display: flex; flex-direction: column; justify-content: center; font-size: 13px; overflow: hidden; transition: box-shadow var(--dur-move) var(--ease-out); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--chip); font-weight: 700; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.chip i { flex: none; width: .5em; height: .5em; border-radius: 50%; background: currentColor; }
/* Chip icons, the same in every section: a dot for a state, and a check that draws in once
   it's done. A status goes straight to its result, with no working state in between. */
.chip svg, .evp svg { flex: none; width: .92em; height: .92em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ck path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.chip.ap:not([data-state=""]):not([data-state="past"]) .ck path { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-move) var(--ease-out) .2s; }
.caps:not(.js-caps) .ck path { stroke-dashoffset: 0; }
.evp .ck path { stroke-dashoffset: 0; animation: ck-draw var(--dur-move) var(--ease-out) .2s both; }
@keyframes ck-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.chip.ok { background: var(--paid-tint); color: var(--paid); }

/* Capability graphics play one at a time, in order, then again on hover.
   Each graphic (.vx) lists its step lengths in data-times. JS moves through the steps and
   marks every [data-step] as "" (not yet), active, done, or past (when data-until is reached),
   and sets --p from 0 to 1 for progress. Without JS everything shows in its end state. */
.cap.playing .vig { box-shadow: inset 0 0 0 1.5px rgba(57, 47, 253, .16); }
.vx { display: flex; flex-direction: column; gap: 12px; }
.caps:not(.js-caps) [data-until] { display: none; }
.no-t, .no-t *, .no-t *::before, .no-t *::after { transition: none !important; animation: none !important; }
.ap { transition: opacity var(--dur-move) var(--ease-out) calc(var(--i, 0) * 90ms), transform var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 90ms); }
.ap[data-state=""], .ap[data-state="past"] { opacity: 0; transform: translateY(6px); }
.lbls { display: inline-grid; justify-items: end; }
.lbls.lft { justify-items: start; }
.lbls > * { grid-area: 1 / 1; white-space: nowrap; }
.vig .lbls { overflow: hidden; }   /* the outgoing label never shows outside its line */
.lbls > .ap[data-state=""] { transform: translateY(70%); }
.lbls > .ap[data-state="past"] { transform: translateY(-70%); }
.hl { background: linear-gradient(var(--offer-tint), var(--offer-tint)) no-repeat 0 0 / 100% 100%; color: var(--offer); font-weight: 700; border-radius: 4px; padding: 0 3px; transition: background-size var(--dur-move) var(--ease-out) calc(var(--i, 0) * 300ms), color var(--dur-base) var(--ease-out) calc(var(--i, 0) * 300ms); }
.hl[data-state=""] { background-size: 0% 100%; color: inherit; }
.vig .save { padding: 5px 9px; font-size: 12px; }
.posted { align-self: flex-start; }

/* Credit: a stepper. The rail fills down to each stage, which completes at once: its node
   draws a check, its result rolls in, and its row lifts until the rail moves on. */
/* The rail is drawn like the integration wires: a grey line (the background), a violet fill that
   eases down to the next node (::before), and a glowing pulse that leads the fill and fades as it
   lands (::after). Fill and pulse move on the same curve and clock; JS adds .go to run the pulse. */
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; background: linear-gradient(var(--line), var(--line)) 8px 20px / 2px calc(100% - 40px) no-repeat; }
.steps::before, .steps::after { content: ""; position: absolute; left: 8px; top: 20px; width: 2px; border-radius: 2px; pointer-events: none; }
.steps::before { height: calc((100% - 40px) * var(--p, 1)); background: var(--offer); transition: height var(--dur-slow) var(--ease-in-out); }
.steps::after { left: 7.25px; width: 3.5px; height: 12px; top: calc(10px + (100% - 40px) * var(--p, 1)); background: #8a83ff; filter: drop-shadow(0 0 6px rgba(57, 47, 253, .8)); opacity: 0; transition: top var(--dur-slow) var(--ease-in-out); }
.steps.go::after { animation: rail-pulse var(--dur-slow) linear; }
@keyframes rail-pulse { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
.steps li { display: grid; grid-template-columns: 18px 1fr; column-gap: 12px; align-items: center; }
.node { position: relative; z-index: 1; width: 18px; height: 18px; }
.node svg { display: block; width: 18px; height: 18px; overflow: visible; }
.n-bg { fill: var(--offer); stroke: var(--offer); stroke-width: 2; transition: fill var(--dur-base) var(--ease-out), stroke var(--dur-base) var(--ease-out); }
.n-tick { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-move) var(--ease-out) .12s; }
.steps li[data-state=""] .n-bg { fill: #fff; stroke: var(--line); }
.steps li[data-state=""] .n-tick { stroke-dashoffset: 1; transition: none; }
.steps .r { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 14px; background: #fff; border-radius: var(--r-sm); color: var(--ink-2); transition: opacity var(--dur-move) var(--ease-out), box-shadow var(--dur-move) var(--ease-out), transform var(--dur-move) var(--ease-out); }
.steps .r b { color: var(--ink); font-size: 14px; }
.steps li[data-state=""] .r { opacity: .55; }
.steps li[data-state="active"] .r { box-shadow: 0 0 0 1px rgba(57, 47, 253, .14), var(--shadow-md); transform: translateX(2px); }
/* The limit rolls in like an odometer, each column a full turn, right to left. Lines are a
   whole, even number of pixels, so each column comes to rest on the same pixel row. */
.odo { display: inline-flex; line-height: 18px; }
.odo .d { display: inline-block; height: 18px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 .2em, #000 calc(100% - .2em), transparent); mask-image: linear-gradient(transparent, #000 .2em, #000 calc(100% - .2em), transparent); }
.odo[data-state="done"] .d { -webkit-mask-image: none; mask-image: none; }
.odo .d > span { display: grid; transform: translateY(calc(var(--v) * -18px)); transition: transform var(--dur-reveal) var(--ease-out) calc(var(--i) * 60ms); }
.odo .d i { font-style: normal; height: 18px; }
.odo[data-state=""] .d > span { transform: none; }
/* Terms: a small selector slides from 15 to 30 */
.seg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.seg em { font-style: normal; }
.seg-t { position: relative; display: grid; grid-template-columns: repeat(3, 26px); padding: 2px; border-radius: 999px; background: var(--chip); }
.seg-t i { font-style: normal; text-align: center; line-height: 20px; }
/* The knob carries its own white copy of the numbers, shifted the opposite way, so the
   white text is exactly what sits under the knob at every moment of the slide. */
.seg-k { position: absolute; top: 2px; left: 2px; width: 26px; height: 20px; overflow: hidden; border-radius: 999px; background: var(--ink); color: #fff; transform: translateX(52px); transition: transform var(--dur-slow) var(--ease-in-out) .3s; }
.seg-kt { position: absolute; top: 0; left: 0; display: grid; grid-template-columns: repeat(3, 26px); transform: translateX(-52px); transition: transform var(--dur-slow) var(--ease-in-out) .3s; }
.seg[data-state=""] .seg-k, .seg[data-state=""] .seg-kt { transform: none; }
/* Monitoring: the live dot pulses */
.chip.live i { position: relative; }
.chip.live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; }
.chip.live[data-state="active"] i::after, .chip.live[data-state="done"] i::after { animation: live 1.6s var(--ease-out) .3s 3; }
@keyframes live { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }

/* Pay early: the invoice email as the customer receives it. The offer border draws,
   the old amount strikes through, the new one rises in and the button's amount rolls to
   match it, the payment methods arrive, and last the button catches the light. */
@property --oa { syntax: "<angle>"; inherits: false; initial-value: 200deg; }
.mail { display: grid; gap: 12px; background: #fff; border-radius: var(--r-md); padding: 14px; box-shadow: var(--shadow-md); }
.mail-h { display: flex; gap: 10px; align-items: center; min-width: 0; }
.mail-who { min-width: 0; flex: 1; }
.mail-who b, .em-who b { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-who small, .em-who small { display: block; color: var(--ink-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-t { align-self: flex-start; color: var(--ink-3); font-size: 11px; }
.mail-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 11px/1 var(--sans); }
.mail-av.sm { width: 28px; height: 28px; font-size: 10px; }
.offer2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px 9px 20px; border-radius: var(--r-box); border: 2px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--oa), #3a8df8, #9b5de5, #f0445a, #ff7a00, #ffb000, #9fd36a, #2ccfc0, #3a8df8) border-box; transition: --oa 1.4s var(--ease-in-out); }
.offer2[data-state=""] { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(var(--rule), var(--rule)) border-box; }
.offer2[data-state="active"] { animation: oa-spin 1.2s var(--ease-in-out); }
@keyframes oa-spin { from { --oa: -160deg; } to { --oa: 200deg; } }
.o-txt { display: grid; gap: 2px; min-width: 0; }
.o-txt b { font-size: 13px; color: var(--ink); }
.o-amt { display: flex; align-items: baseline; gap: 8px; font-size: 12px; }
.o-amt .was { position: relative; color: var(--ink-2); font-weight: 700; transition: color var(--dur-base) var(--ease-out); }
.o-amt .was::after { content: ""; position: absolute; left: -1px; right: -1px; top: 52%; height: 1.5px; background: currentColor; transform-origin: left; transition: transform var(--dur-move) var(--ease-out); }
.o-amt .was[data-state=""]::after { transform: scaleX(0); }
.o-amt .was:not([data-state=""]) { color: var(--ink-3); }
.o-amt .now { color: var(--ink); font-weight: 700; transition-delay: .15s; }
.offer2 .save[data-state=""] { transform: scale(.85); }
.offer2 .save { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-move) var(--ease-out); }
.mail-cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; transition: transform var(--dur-fast) var(--ease-out); }
.mail-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .2) 50%, transparent 62%); transform: translateX(-100%); }
.mail-cta[data-state="active"]::after { animation: shine 1s var(--ease-out) .3s; }
@keyframes shine { to { transform: translateX(100%); } }
/* The button's amount: each changing digit is a window onto a 0 to 9 strip, rolling from
   --a (the full price) to --b (the early price) just after the new price appears. Lines are
   a whole, even number of pixels, like the odometer's. */
.cta-t { line-height: 16px; white-space: nowrap; }
.rd { display: inline-block; height: 16px; overflow: hidden; vertical-align: top; -webkit-mask-image: linear-gradient(transparent, #000 .2em, #000 calc(100% - .2em), transparent); mask-image: linear-gradient(transparent, #000 .2em, #000 calc(100% - .2em), transparent); }
.rd > span { display: grid; transform: translateY(calc(var(--a) * -16px)); transition: transform var(--dur-slow) var(--ease-out) .35s; }
.rd > span > i { font-style: normal; height: 16px; }
.rd:not([data-state=""]) > span { transform: translateY(calc(var(--b) * -16px)); }
.mail-m { display: flex; justify-content: center; align-items: center; gap: 6px; color: var(--ink-3); font-size: 11px; font-weight: 700; }
.mi { display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--chip); color: var(--ink-2); }
.mi svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mi.ap[data-state=""] { transform: scale(.6); }
.mi.ap { transition: opacity var(--dur-base) var(--ease-out) calc(var(--i) * 90ms), transform var(--dur-move) var(--ease-out) calc(var(--i) * 90ms); }
.mail-m > span:last-child { margin-left: 2px; }

/* Nurture: a personalized reminder email goes out, then the ACH payment matches its
   invoice through a drawn link, and it posts to accounting. */
.em { display: grid; gap: 8px; background: #fff; border-radius: var(--r-md); padding: 13px 14px 14px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.em-h { display: flex; align-items: center; gap: 9px; min-width: 0; }
.em-who { flex: 1; min-width: 0; }
.em-st { align-self: flex-start; }
.em-st .chip { font-size: 11px; padding: 3px 8px; }
.em-who .em-s { color: var(--ink-2); font-weight: 700; }
.em-b { margin: 0; padding-top: 8px; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.mt2 { display: grid; grid-template-columns: 1fr 34px 1fr; align-items: stretch; }
.tile { display: grid; gap: 1px; padding: 8px 12px; border-radius: var(--r-sm); background: #fff; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow var(--dur-move) var(--ease-out), background-color var(--dur-move) var(--ease-out); }
.tile small { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.tile b { font-size: 13px; color: var(--ink); }
.tile b.ok { color: var(--paid); }
.tile.pay[data-state=""] { background: rgba(255, 255, 255, .5); }
.tile .lbls > * { white-space: nowrap; }
.mt2[data-state="active"] .tile, .mt2[data-state="done"] .tile { box-shadow: inset 0 0 0 1.5px var(--paid-ink); }
.link { position: relative; display: grid; place-items: center; }
.ln { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--paid-ink); transform-origin: left; transition: transform var(--dur-move) var(--ease-out); }
.lk { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--paid-ink); box-shadow: 0 0 0 3px var(--vig-bg); transition: transform var(--dur-move) var(--ease-out) .35s; }
.lk svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lk-t { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-move) var(--ease-out) .65s; }
.mt2[data-state=""] .ln { transform: scaleX(0); }
.mt2[data-state=""] .lk { transform: scale(0); }
.mt2[data-state=""] .lk-t { stroke-dashoffset: 1; }
.tile .lbls > .ok { transition-delay: .6s; }

/* Payments */
.payments { padding: var(--sec) 0; }
.pay-grid { display: grid; grid-template-columns: 1fr 440px; gap: var(--s7); align-items: start; }
.sec-lede { color: var(--ink-2); margin: var(--s3) 0 0; max-width: var(--measure); }
.method-list { list-style: none; margin: var(--s5) 0 0; padding: 0; border-top: 1px solid var(--ink); }
.method-list li { display: grid; grid-template-columns: 220px 1fr; gap: var(--s3); padding: 16px 0; border-bottom: 1px solid var(--rule); }
.method-list b { font-weight: 700; }
.method-list span { color: var(--ink-2); }
.paycard { container: paycard / inline-size; position: relative; overflow: hidden; margin: 0; background: #fff; border-radius: var(--r-card); border: var(--card-edge); padding: 36px; box-shadow: var(--card-shadow); }
.pc-h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 18px; font-weight: 700; }
.pc-h + .pc-date { margin-bottom: 26px; }
.pc-i { display: inline-grid; place-items: center; width: 16px; height: 16px; border: 1.5px solid var(--ink-3); border-radius: 50%; color: var(--ink-3); font: 700 10px/1 var(--sans); }
.pc-date { display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border: 3px solid var(--offer); border-radius: var(--r-box); box-shadow: 0 14px 30px -14px rgba(20, 30, 90, .16); }
.pc-cal, .pc-bico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-icon); background: var(--chip); }
.pc-bico { background: #1f4fa8; }
.pc-dt { display: grid; line-height: 1.3; }
.pc-dt b { font-size: 17px; }
.pc-dt span { color: var(--ink-2); font-size: 15px; }
.pc-date .save { margin-left: auto; font-size: 13px; padding: 6px 10px; }
.pc-change { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; white-space: nowrap; }
/* When the card is too narrow for the word, only the chevron stays */
@container paycard (max-width: 360px) {
  .pc-cw { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.pc-bank { display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border: 1px solid var(--rule); border-radius: var(--r-box); box-shadow: 0 14px 30px -14px rgba(20, 30, 90, .16); }
.pc-acct { display: grid; line-height: 1.3; min-width: 0; }
.pc-acct b { font-size: 16px; }
.pc-acct small { color: var(--ink-3); font-size: 14px; }
.pc-trash { margin-left: auto; color: var(--ink-3); }
.pc-sum { display: grid; grid-template-columns: 1fr auto; gap: 10px 0; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); font-size: 15px; }
.pc-sum dt { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.pc-sum dd { margin: 0; text-align: right; }
.pc-sum .tot { font-size: 17px; font-weight: 700; color: var(--ink); }
.pc-btn { position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; min-height: 54px; margin-top: 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; transition: background-color var(--dur-move) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.pc-legal { margin: 16px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

/* Payment animation. JS adds .js-pay, then is-press, is-busy, is-done and is-ok in turn.
   Both views share one grid cell, so the card keeps its height when it swaps. */
.pay-stage { display: flex; flex-direction: column; }
.pay-stage .replay { align-self: center; margin-top: 20px; }
.pay-stage:not(.js-pay) .replay { display: none; }
.js-pay .paycard { display: grid; }
.pc-view { grid-area: 1 / 1; min-width: 0; }
.pc-form { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out); }
.pc-form > :not(.pc-btn) { transition: opacity var(--dur-move) var(--ease-out); }
.paycard.is-busy .pc-form > :not(.pc-btn) { opacity: .45; }
.paycard.is-ok .pc-form { opacity: 0; transform: translateY(-14px) scale(.98); filter: blur(6px); transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-move) var(--ease-out); }
.paycard.is-press .pc-btn { transform: scale(.97); background: var(--ink-hover); }
.paycard.is-done .pc-btn { background: var(--paid); }
.pb { display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.pb-busy, .pb-done { position: absolute; inset: 0; opacity: 0; transform: translateY(70%); }
.is-busy .pb-idle { opacity: 0; transform: translateY(-70%); }
.is-busy .pb-busy, .is-done .pb-done { opacity: 1; transform: none; }
.is-busy.is-done .pb-busy { opacity: 0; transform: translateY(-70%); }
.pb-tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-done .pb-tick { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-move) var(--ease-out) .2s; }
.pc-ok { display: none; }
.js-pay .pc-ok { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.pc-ok > * { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.is-ok .pc-ok > * { opacity: 1; transform: none; transition: opacity var(--dur-move) var(--ease-out) calc(var(--d) * 70ms + 260ms), transform var(--dur-slow) var(--ease-out) calc(var(--d) * 70ms + 260ms); }
.ok-badge { position: relative; width: 72px; height: 72px; margin-bottom: 18px; }
.ok-badge svg { display: block; overflow: visible; }
.ok-badge::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--paid-ink); opacity: 0; }
.is-ok .ok-badge::after { animation: ok-ripple 1.1s var(--ease-out) 1.15s; }
@keyframes ok-ripple { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(1.35); } }
.ok-disc { fill: var(--paid-tint); transform-origin: 36px 36px; transform: scale(.4); }
.is-ok .ok-disc { transform: none; transition: transform var(--dur-slow) var(--ease-out) .3s; }
.ok-ring { fill: none; stroke: var(--paid-ink); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transform-origin: 36px 36px; transform: rotate(-90deg); }
.is-ok .ok-ring { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-slow) var(--ease-in-out) .4s; }
.ok-tick { fill: none; stroke: var(--paid); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.is-ok .ok-tick { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-move) var(--ease-out) .95s; }
.ok-h { margin: 0; font-size: 18px; font-weight: 700; }
.ok-amt { margin: 6px 0 0; font: 700 44px/1.05 var(--sans); letter-spacing: -0.03em; }
.ok-to { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
.ok-save { margin-top: 16px; padding: 8px 14px; border-radius: 999px; background: var(--offer-tint); color: var(--offer); font-weight: 700; font-size: 14px; }
.ok-meta { align-self: stretch; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 26px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); font-size: 15px; text-align: left; }
.ok-meta dt { color: var(--ink-2); }
.ok-meta dd { margin: 0; text-align: right; font-weight: 700; }
/* A text link, not a button: the download arrow is the same one the invoice uses */
.ok-receipt { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-weight: 700; font-size: 16px; color: var(--ink); }
.dl { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* Perqia P mark loader, the Sweep treatment from the loader lab: a band of light
   crosses the mark on a diagonal and the silhouette never moves. JS builds the SVG. */
.pmark { display: inline-block; flex: none; width: 20px; height: 22px; }
.pmark svg { display: block; width: 100%; height: 100%; }
.pm-sweep { animation: pm-sweep 1.1s linear infinite; }
@keyframes pm-sweep { from { transform: translateX(-32px); } to { transform: translateX(152px); } }
.btn[data-submit] { gap: 10px; }
.btn[data-submit]:disabled { cursor: default; }

/* Integrations: Perqia at the center, systems around it */
.integrations { padding: var(--sec) 0; overflow-x: clip; }
/* Swimlanes: who owns each step, left to right: your customer | Perqia | your systems.
   Rows run in time order. JS draws the wires in an SVG layer and plays each row:
   the step lights and shows its result (check), and a lit pulse runs to the next owner. */
.lanes { position: relative; margin-top: var(--s6); }
.lane-grid { --c1: 31%; --c2: 38%; position: relative; display: grid; grid-template-columns: var(--c1) var(--c2) 1fr; padding-bottom: 32px; }
.lane-grid::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--c1); width: var(--c2); border-radius: var(--r-lg); background: var(--grain), var(--vig-bg); box-shadow: inset 0 0 0 1px var(--rule); }
/* Headers share one structure (icon, name, line) and centre over their cards, not the lane */
.lane-head { position: relative; padding: 32px 28px 20px; display: grid; grid-template-rows: 32px auto; gap: 6px; justify-items: center; align-items: center; text-align: center; align-content: start; }
.lane-head.cu { padding-left: 0; padding-right: 44px; }
.lane-head.sys { padding-left: 44px; padding-right: 0; }
.lane-head b { font-size: 18px; line-height: 1.2; }
.lane-head > span:last-child { color: var(--ink-3); font-size: 14px; line-height: 1.4; max-width: 20em; min-height: 2.8em; }
.lane-head .logo { display: flex; align-items: center; height: 32px; }
.lane-head .logo img { display: block; height: 28px; width: auto; }
.lrow { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: stretch; padding: 16px 0; }
/* The row being played gets a faint band across all three lanes. It is one band (JS adds it)
   that glides from row to row, easing in and out and fitting each row's height as it goes, on the
   same curve as the wires. It fades in on the first row and out after the last. JS sets --y and
   --h from the row; --by insets it from the row's edges. */
.lband { --by: 6px; position: absolute; left: -16px; right: -16px; top: 0; height: calc(var(--h, 0px) - 2 * var(--by)); transform: translateY(calc(var(--y, 0px) + var(--by))); border-radius: var(--r-lg); background: linear-gradient(90deg, rgba(57, 47, 253, 0), rgba(57, 47, 253, .06) 20%, rgba(57, 47, 253, .06) 80%, rgba(57, 47, 253, 0)); opacity: 0; pointer-events: none; transition: transform var(--dur-reveal) var(--ease-in-out), height var(--dur-reveal) var(--ease-in-out), opacity var(--dur-slow) var(--ease-out); }
.lband.on { opacity: 1; }
.lane-grid.still .lband { transition: none; }
.lrow .cell { grid-row: 1; }
.cell { position: relative; z-index: 2; display: grid; grid-template-columns: 36px 1fr auto; column-gap: 12px; row-gap: 3px; align-items: center; align-content: center; min-height: 84px; padding: 14px 16px; margin: 0 28px; background: #fff; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--rule); opacity: .42; transition: opacity var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out); }   /* a step brightens in place, so the wires always meet its edges */
.cell.cu { grid-column: 1; margin-left: 0; margin-right: 44px; }
.cell.pq { grid-column: 2; }
.cell.sys { grid-column: 3; margin-left: 44px; margin-right: 0; }
.cell > .av, .cell > .fx { grid-row: 1 / span 2; }
.cx { display: contents; }
.cx b { grid-column: 2; font-size: 16px; line-height: 1.3; }
.cx small { grid-column: 2 / span 2; font-size: 14px; color: var(--ink-2); line-height: 1.35; text-wrap: pretty; }
.cell.on { opacity: 1; box-shadow: 0 0 0 1px var(--rule), var(--shadow-md); }
.cell.pq.on { box-shadow: 0 0 0 1.5px var(--offer), var(--shadow-md); }
.own { display: none; }
.av { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); font: 700 13px/1 var(--sans); }
.fx { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.fx svg, .av svg { stroke-width: 1.6; }
/* Status chip: the step's result, with a check on green chips and a dot on gray ones */
.st { grid-column: 3; grid-row: 1; justify-self: end; overflow: hidden; transition: background var(--dur-move) var(--ease-out), color var(--dur-move) var(--ease-out), width var(--dur-move) var(--ease-out); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--chip); color: var(--ink-2); font: 700 12px/1.2 var(--sans); }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st.ok { background: var(--paid-tint); color: var(--paid); }
.st.ok::before { width: 9px; height: 5px; border-radius: 0; background: none; border: solid currentColor; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.st.idle { background: var(--chip); color: var(--ink-3); }
.st.idle::before { width: 7px; height: 7px; border-radius: 50%; border: 0; background: currentColor; transform: none; }
/* With JS, each chip is one settled pill (main.js), hidden until its step is reached. Then it
   rolls up into place with the same move and timing as the capability labels, and a green
   pill's check draws in as it lands. The CSS marks above remain for no-JS. */
.js-lanes .st { display: inline-grid; justify-items: end; padding: 0; background: none; transition: none; }
.js-lanes .st::before { display: none; }
.sp { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--chip); color: var(--ink-2); transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.sp.d.ok { background: var(--paid-tint); color: var(--paid); }
.st:not([data-s="done"]) .sp.d { opacity: 0; transform: translateY(70%); }
.sp svg { flex: none; width: .92em; height: .92em; overflow: visible; }
.sti-dot { fill: currentColor; transform-origin: 6px 6px; transform: scale(.9); }
.sti-ck { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.st[data-s="done"] .sti-ck { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-move) var(--ease-out) .2s; }
.lane-grid.still .sp, .lane-grid.still .sp * { transition: none; }
/* Wire layer */
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.wires .base { fill: none; stroke: var(--line); stroke-width: 1.5; }
.wires .lit { fill: none; stroke: var(--offer); stroke-width: 2; stroke-linecap: round; }
.wires .pulse { fill: none; stroke: #8a83ff; stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(57, 47, 253, .8)); opacity: 0; }
/* Each head is a gray triangle with a violet copy on top, revealed from base to tip as the fill arrives */
.wires .head { fill: var(--line); stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }
.wires .head-lit { fill: var(--offer); stroke: var(--offer); }
.replay { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 13px; border-radius: 999px; border: 1px solid var(--rule); background: #fff; font: 700 14px/1 var(--sans); color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow-sm); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.replay .ri { flex: none; }
.replay.spin .ri { animation: replay-spin var(--dur-slow) var(--ease-out); }
@keyframes replay-spin { to { transform: rotate(-360deg); } }
.lanes .replay { position: absolute; right: 0; top: -62px; }
.replay:hover { color: var(--ink); border-color: var(--field); box-shadow: 0 4px 12px -4px rgba(20, 30, 90, .18); }
.lanes:not(.js-lanes) .cell { opacity: 1; }
.lanes:not(.js-lanes) .replay { display: none; }

/* Working capital */
.impact { padding: var(--sec) 0; }
.calc { margin-top: var(--s6); background: #fff; border-radius: var(--r-lg); padding: var(--s5); display: grid; grid-template-columns: 300px 1fr; gap: var(--s6); box-shadow: inset 0 0 0 1px var(--rule); }
.calc h3 { font: 400 clamp(30px, 3vw, 40px)/1.05 var(--serif); margin: 0 0 var(--s3); text-wrap: balance; }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s3); }
.inputs > .field:last-child { margin-bottom: 0; }
.field label { font-size: var(--fs-small); font-weight: 700; }
.field .box { display: flex; align-items: center; border: 1px solid var(--field); border-radius: var(--r-sm); padding: 0 14px; min-height: 56px; background: #fff; font-size: 22px; font-weight: 700; }
.field .box { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.field .box:hover { border-color: var(--field-hover); }
.field .box:focus-within { border-color: var(--ink); box-shadow: var(--ring); }
.field input { border: 0; outline: 0; width: 100%; font: inherit; padding: 0 4px; background: transparent; color: var(--ink); -moz-appearance: textfield; }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field .unit { color: var(--ink-3); font-weight: 500; font-size: 18px; }
.field-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; width: 40px; height: 24px; border-radius: 999px; background: var(--field); transition: background var(--dur-fast) var(--ease-ui); }
.switch .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 2px 6px -2px rgba(0, 0, 0, .15); transition: transform var(--dur-fast) var(--ease-ui), width var(--dur-press) var(--ease-ui); }
.switch:active .track::after { width: 22px; }
.switch input:checked + .track { background: var(--ink); }
.switch input:checked + .track::after { transform: translateX(16px); }
.switch:active input:checked + .track::after { transform: translateX(12px); }
.switch .state { min-width: 1.9em; }
.switch input:focus-visible + .track { outline: 3px solid var(--offer); outline-offset: 2px; }
.field.is-off .box { opacity: .45; }
.field .hint { font-size: var(--fs-fine); color: var(--ink-3); margin: 0; }
.results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); font-feature-settings: "tnum", "lnum"; font-size: 22px; line-height: 1.3; transition: grid-template-columns var(--dur-base) var(--ease-in-out); }
.calc.rev-off .results { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0fr); }
.rr { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
.rr > * { padding: 16px 14px; border-bottom: 1px solid var(--rule); text-align: right; font-weight: 700; white-space: nowrap; }
.rr > :first-child { text-align: left; font-weight: 500; color: var(--ink-2); }
.rh > * { padding-top: 0; padding-bottom: 14px; border-bottom-color: var(--ink); font-weight: 500; color: var(--ink-3); align-self: end; }
/* Headers never rewrap (the revenue column collapses through them), so they break at set points when the table is narrow */
.results { container-type: inline-size; }
.rh br { display: none; }
@container (max-width: 680px) { .rh br.b1 { display: inline; } }
@container (max-width: 440px) { .rh br.b2 { display: inline; } }
.rr[data-days="6"] > * { background: var(--tint); }
.rr[data-days="6"] > :first-child { color: var(--ink); }
/* Only the figures fade, so the row lines and the 6-day shading stay whole while the column moves */
.results .rc { overflow: hidden; transition: color var(--dur-fast) var(--ease-out) 100ms, padding var(--dur-base) var(--ease-in-out); }
.calc.rev-off .results .rc { color: transparent; padding-left: 0; padding-right: 0; transition: color var(--dur-fast) var(--ease-out), padding var(--dur-base) var(--ease-in-out); }
.calc-note { font-size: var(--fs-fine); color: var(--ink-3); margin: 0; padding-top: var(--s2); }

/* Close */
.close { padding: var(--sec) 0; }
.close .grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--s6); align-items: start; }
.close h2 + p { color: var(--ink-2); max-width: var(--measure); margin: var(--s3) 0 0; }
.form { display: flex; flex-direction: column; gap: var(--s2); }
.form label { font-size: var(--fs-small); font-weight: 700; display: grid; gap: 8px; }
.form input, .form select { min-height: 48px; border: 1px solid var(--field); border-radius: var(--r-sm); padding: 0 14px; font: 400 16px var(--sans); background: #fff; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.form input:hover, .form select:hover { border-color: var(--field-hover); }
.form input:focus, .form select:focus { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.form input::placeholder { color: var(--ink-3); }
.form select { -webkit-appearance: none; appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%230b0b0c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center; }
.form .btn { margin-top: 6px; }
/* Dropdown (main.js): the field opens a styled list. Without JS the native select above stays. */
.sel { position: relative; }
.sel-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px 0 14px; border: 1px solid var(--field); border-radius: var(--r-sm); background: #fff; font: 400 16px var(--sans); color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.sel-btn:hover { border-color: var(--field-hover); }
.sel-btn:focus-visible, .sel.open .sel-btn { outline: none; border-color: var(--ink); box-shadow: var(--ring); }
.sel-ch { flex: none; width: 12px; height: 8px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-base) var(--ease-in-out); }
.sel.open .sel-ch { transform: rotate(180deg); }
.sel-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--rule), var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); }
.sel.up .sel-list { top: auto; bottom: calc(100% + 6px); transform: translateY(6px); }
.sel.open .sel-list { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; }
.sel-list:focus { outline: none; }
.sel-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: var(--r-xs); font: 400 16px var(--sans); color: var(--ink-2); cursor: pointer; transition: background var(--dur-press) var(--ease-out); }
.sel-list li.at { background: var(--tint); color: var(--ink); }
.sel-list li[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.sel-list li svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--offer); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sel-list li[aria-selected="true"] svg { opacity: 1; }

/* Demo confirmation, matching the pay screen's "Payment submitted": the same card, green badge,
   type, meta list and staggered entrance. The form and the confirmation share one grid cell, so
   the card takes the form's height and centres its content, as the pay card does. On send the
   form lifts away and blurs, as the pay screen's checkout does. */
.demo { display: grid; }
.demo > * { grid-area: 1 / 1; min-width: 0; }
.demo .form { transition: opacity var(--dur-move) var(--ease-out), transform var(--dur-slow) var(--ease-out), filter var(--dur-move) var(--ease-out); }
.demo.is-sent .form { opacity: 0; transform: translateY(-14px) scale(.98); filter: blur(6px); pointer-events: none; }
.demo-ok { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 36px; background: #fff; border-radius: var(--r-card); border: var(--card-edge); box-shadow: var(--card-shadow); }
.demo-ok > * { opacity: 0; transform: translateY(12px); }
.demo.is-sent .demo-ok > * { opacity: 1; transform: none; transition: opacity var(--dur-move) var(--ease-out) calc(var(--d) * 70ms + 260ms), transform var(--dur-slow) var(--ease-out) calc(var(--d) * 70ms + 260ms); }
.demo.is-sent .ok-disc { transform: none; transition: transform var(--dur-slow) var(--ease-out) .3s; }
.demo.is-sent .ok-ring { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-slow) var(--ease-in-out) .4s; }
.demo.is-sent .ok-tick { stroke-dashoffset: 0; transition: stroke-dashoffset var(--dur-move) var(--ease-out) .95s; }
.demo.is-sent .ok-badge::after { animation: ok-ripple 1.1s var(--ease-out) 1.15s; }
.demo-ok .ok-h { outline: none; }
.demo-ok .ok-amt { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.demo-ok .ok-to span { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.demo-ok .ok-meta dd { overflow-wrap: anywhere; }
/* Dropdown (main.js): the field opens a styled list. Without JS the native select above stays. */

.form [aria-invalid="true"], .field .box:has([aria-invalid="true"]) { border-color: var(--late); }
.form [aria-invalid="true"]:focus, .field .box:has([aria-invalid="true"]):focus-within { border-color: var(--late); box-shadow: 0 0 0 4px rgba(180, 35, 24, .12); }
.err { margin: 0; font-size: var(--fs-fine); font-weight: 500; line-height: 1.4; color: var(--late); }
.form-note { font-size: var(--fs-fine); color: var(--ink-2); margin: 0; min-height: 1.4em; }
.foot { border-top: 1px solid var(--rule); padding: var(--s6) 0 var(--s5); font-size: var(--fs-fine); color: var(--ink-3); }
.f-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--s4) var(--s5); padding-bottom: var(--s5); }
.f-brand img { display: block; height: 28px; width: auto; }
.f-links { display: flex; flex-wrap: wrap; gap: 12px var(--s4); font-size: var(--fs-small); }
.f-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s2); padding-top: var(--s3); border-top: 1px solid var(--rule); }
.foot .legal { display: flex; gap: var(--s3); }
.f-links a, .foot .legal a { color: var(--ink-2); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.f-links a:hover, .foot .legal a:hover { color: var(--ink); }

/* Hairlines: guide lines run down the page at the edges of the 1240px wrap, and a small
   crosshair marks each point where a section divider meets them. Each section draws its own
   stretch of guide (::before, behind everything) and its two crosshairs (::after, above the
   divider). Both boxes share one position and width, so the marks always land on the lines. */
main { position: relative; isolation: isolate; }
main > section { position: relative; border-top: 1px solid var(--rule); }
main > section::before, main > section::after, .foot::after { content: ""; position: absolute; top: -6px; left: calc(50% - var(--max) / 2 - 5px); width: calc(var(--max) + 10px); pointer-events: none; }
.foot { position: relative; }
main > section::before { z-index: -1; bottom: 0;
  background: linear-gradient(var(--rule), var(--rule)) 5px 0 / 1px 100% no-repeat, linear-gradient(var(--rule), var(--rule)) calc(100% - 5px) 0 / 1px 100% no-repeat; }
main > section::after, .foot::after { height: 11px;
  background: linear-gradient(var(--ink-3), var(--ink-3)) 5px 0 / 1px 11px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) calc(100% - 5px) 0 / 1px 11px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 100% 5px / 11px 1px no-repeat; }
@media (max-width: 1300px) { main > section::before, main > section::after, .foot::after { display: none; } }

/* Live calculator: a revenue slider, headline figures that follow the inputs, and a shaded
   6-day row (the one the headline cites). */
.range { display: grid; grid-template-columns: 1fr 1fr; margin-top: 4px; font-size: 12px; color: var(--ink-3); }
.range span:last-child { justify-self: end; }
.range input { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; --f: 16.67%; }
.range input:focus-visible { outline: none; }
.range input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--f) 100% no-repeat, var(--rule); }
.range input::-moz-range-track { height: 4px; border-radius: 4px; background: var(--rule); }
.range input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ink); }
.range input::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); box-shadow: 0 1px 3px rgba(11, 11, 12, .2); transition: transform var(--dur-fast) var(--ease-ui), box-shadow var(--dur-fast) var(--ease-ui); }
.range input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); box-shadow: 0 1px 3px rgba(11, 11, 12, .2); }
.range input:hover::-webkit-slider-thumb { transform: scale(1.08); }
.range input:active::-webkit-slider-thumb { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(11, 11, 12, .06), 0 1px 3px rgba(11, 11, 12, .2); }
.range input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring), 0 1px 3px rgba(11, 11, 12, .2); }
.bind { background: linear-gradient(var(--lilac), var(--lilac)) 0 94% / 100% .09em no-repeat; }

@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .nav ul { display: none; }
  .hero-grid { column-gap: var(--s5); }
  .journey { padding: 22px 26px 20px; }
  .sheet { padding: 28px 25px 21px; }
  .inv-amt { font-size: 40px; }
  .scard { grid-template-columns: 120px 1fr 1fr; column-gap: var(--s3); }
  .sc-day .n { font-size: 52px; }
  .close .grid { grid-template-columns: 1fr; gap: var(--s5); }
  .calc { grid-template-columns: 1fr; gap: var(--s4); }
  .calc .inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
  .calc .inputs h3 { grid-column: 1 / -1; }
  .calc .inputs > .field { margin-bottom: 0; }
}
/* Tablet: one capability per row, graphic beside its text */
@media (max-width: 1180px) and (min-width: 641px) {
  .caps { grid-template-columns: 1fr; gap: var(--s5); }
  .cap { grid-template-rows: none; grid-row: auto; grid-template-columns: 1fr minmax(320px, 440px); column-gap: var(--s5); align-items: center; }
  .cap h3 { grid-column: 1; align-self: end; }
  .cap p { grid-column: 1; align-self: start; }
  .cap p + .vig { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 1180px) {
  /* Narrower lanes: the status chip drops under the text */
  .st { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 6px; }
  .js-lanes .st { justify-items: start; }
}
@media (max-width: 1180px) and (min-width: 901px) {
}
@media (max-width: 1100px) {
  .pay-grid { grid-template-columns: 1fr 400px; gap: var(--s5); }
}
@media (max-width: 900px) {
  .pay-grid { grid-template-columns: 1fr; gap: var(--s3); }
  .pay-stage { max-width: 440px; margin-top: var(--s4); }
  .hero-grid { grid-template-columns: 1fr; grid-template-areas: "head" "copy" "card"; grid-template-rows: none; row-gap: var(--s5); }
  .invoice { max-width: 560px; }
}
@media (max-width: 860px) {
  /* One column: each step shows its owner, in the order it happens */
  .lane-grid { display: block; padding: 8px 16px 16px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--rule); }
  .lane-grid::before, .lane-head { display: none; }
  .lrow { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 18px 0; }
  .lband { --by: 4px; left: -8px; right: -8px; }
  .cell, .cell.cu, .cell.sys { order: var(--o); margin: 0; }
  .own { display: block; grid-column: 1 / -1; margin-bottom: 8px; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
  .cell.pq .own { color: var(--offer); }
  .cell > .av, .cell > .fx { grid-row: 2 / span 3; }
  .cx b { grid-row: 2; }
  .cx small { grid-row: 3; }
  .st { grid-row: 4; grid-column: 2; }
  .lanes .replay { position: static; margin-top: var(--s2); }
}
@media (max-width: 640px) {
  .demo-ok { padding: 32px 24px; border-radius: var(--r-box); }
  .demo-ok .ok-amt { font-size: 34px; }
  .caps { grid-template-columns: 1fr; }
  .method-list li { grid-template-columns: 1fr; gap: 2px; }
  .rr > * { padding-left: 8px; padding-right: 8px; }
  .paycard { padding: 22px; }
  .pc-date, .pc-bank { gap: 10px; padding: 12px; }
  .pc-cal, .pc-bico { width: 38px; height: 38px; }
  :root { --gutter: 16px; --fs-body: 16px; --fs-lede: 18px; }
  .nav { height: 68px; }
  .hero { margin-top: -68px; padding-top: 68px; }
  /* Phone: the switcher moves to a slim row above the nav, which scrolls away; the sticky nav stays 68px.
     The hero's cloud runs up behind both. */
  .brand > .aud { display: none; }
  .aud-bar { display: block; position: relative; z-index: 51; padding-top: 10px; }
  .aud-bar .aud { font-size: 13px; }
  .aud-bar .aud a { min-height: 28px; padding: 0 12px; }
  .aud-bar + .site-nav + .hero, .aud-bar + .site-nav + main { margin-top: -112px; padding-top: 112px; }
  .nav img { height: 26px; }
  .nav .actions a:not(.btn) { display: none; }
  .hero-grid { grid-template-areas: "head" "card" "copy"; padding-top: calc(var(--s4) + 8px); row-gap: var(--s4); }
  /* Phone: the two buttons stack at full width */
  .cta { flex-direction: column; }
  .cta .btn { width: 100%; }
  .invoice { border-radius: 22px; }
  .sheet { padding: 22px 17px 17px; border-radius: 21px; }
  .journey { padding: 18px 16px 16px; }
  .counter .cnum { font-size: 30px; }
  .ruler { height: 30px; margin: 0 9px 0 10px; }
  .ruler .t { width: 3px; }
  .ruler .t.now { height: 30px; }
  /* Board on a phone: each card stacks its two sides; only the day row peeks out of a covered card */
  .stack { --top: 84px; --peek: 72px; }
  .scard { grid-template-columns: 1fr; row-gap: 18px; padding: 20px 18px 22px; }
  .sc-day { grid-template-columns: auto auto 1fr; column-gap: 10px; }
  .sc-day .n { grid-row: 1; grid-column: 2; margin: 0; font-size: 44px; }
  .sc-day .tag { grid-column: 3; justify-self: end; margin: 0; }
  .sc-today { padding-top: 0; }
  .sc-perqia { margin: 0 -8px -10px; padding: 18px 16px 18px; }
  .sc-today, .sc-perqia { opacity: calc(1 - var(--cover, 0)); }   /* only the day row shows on a covered card */
  .inv-foot { font-size: 14px; }
  .inv-amt { font-size: 34px; }
  .inv-due { font-size: 16px; }
  .offer { padding: 12px; gap: 12px; }
  .offer .ico { width: 40px; height: 40px; }
  .inv-meta { grid-template-columns: 80px 1fr; font-size: 15px; }
  .stamp { width: min(108px, 100cqw - 208px); bottom: -2px; }   /* phone padding and labels are narrower */
  .evp { font-size: 12px; }
  .calc { padding: var(--s3) 18px; }
  .calc .inputs { grid-template-columns: 1fr; }
  .calc .inputs > .field { margin-bottom: var(--s3); }
  .calc .inputs > .field:last-child { margin-bottom: 0; }
  .results { font-size: 17px; }
  .rh > * { font-size: var(--fs-small); }
  .rr:not(.rh) > * { padding-top: 14px; padding-bottom: 14px; }
}
/* Privacy and Terms. The same nav, footer, cloud and type as the home page. A short cloud
   header holds the title, effective date and opening paragraph; the sections follow in one column. */
.lg-hero .hero-bg { --fade: 420px; }
.lg-hero > .wrap { padding: calc(var(--s6) + 16px) var(--gutter) var(--s6); }
.lg-hero h1 { font: 400 var(--fs-h2)/1 var(--serif); letter-spacing: -0.015em; margin: 0; }
.lg-fill { color: var(--ink-3); }
.lg-meta { margin: var(--s2) 0 0; font-size: var(--fs-small); color: var(--ink-3); }
.lg-intro { margin: var(--s4) 0 0; max-width: var(--measure); font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); }
.lg-main { padding: var(--s6) 0 var(--sec); }
.lg-body { max-width: 44em; }
.lg-sec { scroll-margin-top: 108px; }
.lg-sec + .lg-sec { margin-top: var(--s5); }   /* sections part by space and their headings alone */
.lg-sec h2 { margin: 0 0 var(--s3); font: 700 var(--fs-h3)/1.3 var(--sans); letter-spacing: -0.01em; }
.lg-sec h3 { margin: var(--s4) 0 var(--s1); font-size: var(--fs-body); font-weight: 700; }
.lg-sec p, .lg-sec li { font-size: 17px; line-height: 1.7; color: var(--ink-2); }
.lg-sec p { margin: 0 0 var(--s2); }
.lg-sec ul { margin: 0 0 var(--s2); padding-left: 1.2em; }
.lg-sec li { margin-bottom: 6px; padding-left: 4px; }
.lg-sec li::marker { color: var(--ink-3); }
.lg-sec a { color: var(--ink); }
.foot .legal a[aria-current] { color: var(--ink); }
@media (max-width: 640px) {
  .lg-hero > .wrap { padding: calc(var(--s4) + 8px) var(--gutter) var(--s5); }
  .lg-intro { font-size: var(--fs-body); }
  .lg-main { padding-top: var(--s5); }
  .lg-sec p, .lg-sec li { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Ticker: calculator figures roll like an odometer. Each digit is a window onto a 0 to 9
   strip drawn in CSS; other characters ($ , . K M B) swap in place. Slots ease their width
   as digits change or as the number gains or loses a place. JS builds the slots. */
.tk { --lh: 1.3em; --win: calc(var(--lh) + .4em); white-space: nowrap; }   /* main.js sets --lh to the host's line height */
h2 .tk { --win: var(--lh); }
.counter .tk { --win: calc(var(--lh) + .2em); }   /* the day sits on a tight line, so its window stays close to it */
/* Each window is taller than the line (--win), so tall serif figures aren't clipped, and its
   negative margins give the line back that extra height, so the text around it doesn't move.
   main.js rounds the window to an even number of pixels (--step): a strip then always moves
   whole pixels, so every digit comes to rest on the same pixel row as the text around it. */
.tk-win { position: absolute; visibility: hidden; height: var(--win); }
.tk-d, .tk-c { display: inline-block; height: var(--step, var(--win)); margin: calc((var(--lh) - var(--step, var(--win))) / 2) var(--ls, 0em) calc((var(--lh) - var(--step, var(--win))) / 2) 0; letter-spacing: 0; line-height: var(--step, var(--win)); overflow: hidden; vertical-align: top; text-align: center; transition: width var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.tk-d { -webkit-mask-image: linear-gradient(transparent, #000 .16em, #000 calc(100% - .16em), transparent); mask-image: linear-gradient(transparent, #000 .16em, #000 calc(100% - .16em), transparent); }
.tk-d::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; display: block; white-space: pre; transform: translateY(calc(var(--d, 0) * -1 * var(--step, var(--win)))); transition: transform var(--dur-slow) var(--ease-out); }
.tk-run .tk-d::before { content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9"; }   /* counting up: three turns of 0 to 9, so every roll goes forward */
.tk-run .tk-d::before { transition-duration: var(--dur-fast); }   /* a count rolls at counting speed, so each day lands before the next */
.tk-c::before { content: attr(data-c); }
.tk-in, .tk-out { opacity: 0; }
.tk-sw { animation: tk-sw var(--dur-slow) var(--ease-out); }
@keyframes tk-sw { from { opacity: 0; transform: translateY(70%); } }
.tk-still .tk-d, .tk-still .tk-c, .tk-still .tk-d::before { transition: none; }
.tk-probe { position: absolute; visibility: hidden; white-space: pre; letter-spacing: 0; }

/* Reveal: a block that opens and closes smoothly (the write-in revenue field, field errors,
   the calculator note). Its row eases from 0 to its full height, so everything below glides.
   The negative top margin cancels the parent's gap while it's closed. */
/* A closed reveal takes no room: its negative top margin cancels the parent's gap. That only works in
   block or flex layout (a grid track can't go below zero), so the form and the calculator fields are flex columns. */
.rv { --rv-gap: var(--s2); display: grid; grid-template-rows: 0fr; min-height: 0; margin-top: calc(-1 * var(--rv-gap)); opacity: 0; transition: grid-template-rows var(--dur-base) var(--ease-in-out), opacity var(--dur-base) var(--ease-out); }
.rv.open { grid-template-rows: 1fr; opacity: 1; }
.rv > div { min-height: 0; overflow: hidden; }
.field-rv { margin-left: -5px; margin-right: -5px; transition: grid-template-rows var(--dur-base) var(--ease-in-out), opacity var(--dur-base) var(--ease-out), margin-bottom var(--dur-base) var(--ease-in-out); }
.field-rv.open { margin-bottom: -5px; }
.field-rv > div { padding: 0 5px; }   /* room for the focus ring inside the clip */
.field-rv > div > label { padding: var(--s2) 0 5px; }
.rv.tight > div > .err { padding-top: 6px; }
.field .rv { --rv-gap: 8px; }
.rv.note { margin-top: 0; }
.calc.rev-off .rv.note { grid-template-rows: 0fr; opacity: 0; }
/* Inside the write-in field the error sits in flow under the label's 5px ring room, with no pull-up, so the ring is never clipped */
.field-rv .rv { --rv-gap: 0px; }
.field-rv .rv.tight > div > .err { padding-top: 1px; }