@font-face{font-family:"Figtree";src:url(fonts/figtree-latin.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
/* WhizInvoice v6. Quiet premium: warm canvas, pure white surfaces, no borders, no tinted cards, no gradients.
   Restraint: ink type at 600 and 700, one accent (blue); mint, gold and coral appear only as status colours.
   One surface per idea (no cards inside cards). Single light theme by design. */
/* Safety net, kept first on purpose: if a browser ever gets only the start of this file, line icons
   still stay icon sized instead of filling the page. Zero specificity, so every real rule below wins.
   Measured 20 Oct 2026: no icon on the site renders above 40px, so this changes nothing when the file loads. */
:where(svg[viewBox="0 0 24 24"]:not([width]),svg[viewBox="0 0 20 20"]:not([width]),svg[viewBox="0 0 16 16"]:not([width])){max-width:3em;max-height:3em}
:root{
  --canvas:#FAF9F7; --stone:#F2F0EB; --card:#FFFFFF;
  --ink:#0B1630; --ink2:#3A445E; --muted:#6B7489; --faint:#A3A9B7;
  --hair:rgba(11,22,48,.09); --hair2:rgba(11,22,48,.06);
  --blue:#2B63F6; --blue-ink:#1A47D1; --blue-wash:#EEF3FF;
  --mint:#0E9F6E; --mint-wash:#E7F5EF;
  --gold:#D9921F; --gold-wash:#FBF1DC;
  --coral:#D94A39; --coral-wash:#FBEAE7;
  --navy:#0B1630;
  --sh1:0 1px 2px rgba(11,22,48,.05),0 2px 8px -2px rgba(11,22,48,.05);
  --sh2:0 1px 2px rgba(11,22,48,.04),0 16px 40px -16px rgba(11,22,48,.13);
  --sh3:0 2px 4px rgba(11,22,48,.04),0 48px 110px -36px rgba(11,22,48,.28);
  --f:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink2);font:400 17.5px/1.65 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}
h1,h2,h3{color:var(--ink);text-wrap:balance}
.kicker{display:inline-block;font:600 15.5px/1.2 var(--f);color:var(--blue)}
h2{font:700 clamp(34px,4.2vw,52px)/1.08 var(--f);letter-spacing:-.04em;margin:14px 0 0}
.intro{font-size:19px;line-height:1.6;color:var(--ink2);max-width:36em;margin:20px 0 0}
section{padding-block:68px}
.hd{margin-bottom:64px}
.hd.c{text-align:center}
.hd.c h2{max-width:15em;margin-left:auto;margin-right:auto}
.hd.c .intro{margin-left:auto;margin-right:auto;max-width:34em}

/* buttons: pills with a soft inner highlight, a gentle lift on hover, and the arrow in its own chip */
.b{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:50px;padding:0 24px;border-radius:999px;font:600 15.5px/1 var(--f);letter-spacing:-.005em;border:0;cursor:pointer;white-space:nowrap;transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background .2s,color .2s}
.b:active{transform:translateY(1px)}
.b.pri{background:var(--blue);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(8,20,60,.18),0 1px 2px rgba(11,22,48,.18),0 10px 24px -10px rgba(43,99,246,.7)}
.b.pri:hover{background:#2459EE;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(8,20,60,.18),0 2px 4px rgba(11,22,48,.16),0 16px 32px -12px rgba(43,99,246,.75)}
.b.sec{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(11,22,48,.07),0 1px 2px rgba(11,22,48,.06),0 6px 16px -10px rgba(11,22,48,.18)}
.b.sec:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(11,22,48,.09),0 2px 4px rgba(11,22,48,.06),0 14px 28px -14px rgba(11,22,48,.28)}
.b.lt{background:#fff;color:var(--ink);box-shadow:inset 0 -1px 0 rgba(11,22,48,.08),0 10px 24px -12px rgba(0,0,0,.5)}
.b.lt:hover{transform:translateY(-1px)}
.b.ghost{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.b.ghost:hover{background:rgba(255,255,255,.12)}
.b.lg{height:56px;padding:0 30px;font-size:16.5px}
.b .arr{width:28px;height:28px;margin-right:-13px;border-radius:50%;display:inline-grid;place-items:center;font-size:14px;line-height:1;background:rgba(255,255,255,.2);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.b.lg .arr{width:34px;height:34px;margin-right:-19px;font-size:15px}
.b.lt .arr{background:var(--ink);color:#fff}
.b:hover .arr{transform:translateX(3px)}

/* status chips and ticks inside product UI */
.st{display:inline-flex;align-items:center;gap:6px;font:600 12px/1 var(--f);padding:5px 9px;border-radius:999px;white-space:nowrap}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st.new{color:#B5730E;background:var(--gold-wash)} .st.sent{color:var(--blue-ink);background:var(--blue-wash)} .st.paid{color:var(--mint);background:var(--mint-wash)} .st.late{color:var(--coral);background:var(--coral-wash)}
.tick{width:20px;height:20px;border-radius:50%;background:var(--mint);display:inline-grid;place-items:center;flex:none}
.tick::after{content:"";width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}

/* ===== nav ===== */
.top{position:sticky;top:0;z-index:30;background:rgba(250,249,247,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);padding-top:env(safe-area-inset-top,0px);transition:box-shadow .2s}
.top.s{box-shadow:0 1px 0 var(--hair)}
.nav{height:74px;display:flex;align-items:center;gap:44px}
.brand{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--f);letter-spacing:-.02em;color:var(--ink)}
.brand .mark{width:36px;height:36px;flex:none;display:block}
.brand em{font-style:normal}.brand span{color:var(--blue)}
.links{display:flex;gap:32px;font-weight:500;font-size:15.5px;color:var(--ink2)}
.links a:hover{color:var(--ink)}
.nav .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav .login{font-weight:500;font-size:15.5px;padding:0 14px;color:var(--ink)}
.nav .b{height:42px;padding:0 20px;font-size:15px}
.menu-btn{display:none;width:42px;height:42px;border-radius:50%;border:0;background:var(--card);box-shadow:var(--sh1);cursor:pointer;place-items:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;position:relative;content:""}
.menu-btn span::before{position:absolute;top:-6px}.menu-btn span::after{position:absolute;top:6px}
.mnav{background:var(--canvas);box-shadow:0 1px 0 var(--hair);padding:6px 0 18px}
.mnav a{display:block;padding:14px 2px;font-weight:600;font-size:18px;color:var(--ink);box-shadow:0 1px 0 var(--hair2)}

/* ===== 1 hero: headline left, the real dashboard right ===== */
.hero{padding-block:76px 68px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:56px;align-items:center}
.hero-grid>*{min-width:0}
.hero-copy{text-align:left}
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--card);box-shadow:var(--sh1);color:var(--ink);font:500 14.5px/1 var(--f);padding:10px 16px 10px 13px;border-radius:999px}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-wash)}
h1{font:700 clamp(44px,4.4vw,64px)/1.03 var(--f);letter-spacing:-.05em;margin:26px 0 0}
h1 em{font-style:normal;color:var(--blue)}
.lead{font-size:clamp(17.5px,1.45vw,19.5px);line-height:1.6;color:var(--ink2);margin:24px 0 0;max-width:30em}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.assure{display:flex;flex-wrap:wrap;gap:8px 24px;margin:24px 0 0;font-size:14.5px;color:var(--muted)}
.assure span{display:inline-flex;align-items:center;gap:9px}
.assure span::before{content:"";width:9px;height:5px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg) translateY(-2px)}

.app{position:relative;background:var(--card);border-radius:22px;box-shadow:var(--sh3);color:var(--ink);font-size:13.5px;text-align:left}
.app-top{display:flex;align-items:center;gap:14px;height:58px;padding:0 16px;box-shadow:inset 0 -1px 0 var(--hair2)}
.app-top .ws{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;flex:none}
.app-top .ws i{width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 11.5px/1 var(--f);font-style:normal}
.app-top .search{flex:1;min-width:0;display:flex;align-items:center;gap:10px;height:38px;padding:0 14px;border-radius:10px;background:var(--canvas);color:var(--muted);font-size:13.5px;white-space:nowrap;overflow:hidden}
.app-top .search svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.app-top .new{margin-left:auto;background:var(--blue);color:#fff;font-weight:600;font-size:13px;padding:10px 14px;border-radius:10px;white-space:nowrap}
.app-body{display:grid;grid-template-columns:208px minmax(0,1fr)}
.list{padding:16px 10px 20px;box-shadow:inset -1px 0 0 var(--hair2)}
.list .lh{display:flex;align-items:baseline;gap:8px;padding:0 10px}
.list .lh b{font-size:16px;font-weight:700}
.list .lh span{color:var(--faint);font-size:13px;font-weight:600}
.chips{display:flex;gap:6px;margin:14px 10px 12px}
.chips span{font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:8px;background:var(--canvas);color:var(--ink2)}
.chips span.on{background:var(--ink);color:#fff}
.chips span{white-space:nowrap}
.chips span:nth-child(2){display:none}
.row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:10px 10px;border-radius:11px}
.row>div{min-width:0}
.row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row b{display:block;font-size:14px;font-weight:600}
.row span{display:block;font-size:12.5px;color:var(--muted)}
.row time{font-size:11.5px;color:var(--faint);white-space:nowrap}
.row.sel{background:var(--blue-wash)}
.row.sel b{color:var(--blue-ink)}
.doc{padding:22px 24px 24px;min-width:0}
.dh{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dh>div{display:flex;align-items:center;gap:10px}
.dh b{font-size:19px;font-weight:700;letter-spacing:-.01em}
.tpl{font-size:12.5px;color:var(--muted)}
.billto{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:22px;padding:18px 0;box-shadow:inset 0 1px 0 var(--hair2),inset 0 -1px 0 var(--hair2)}
.billto small{display:block;font:600 11px/1.4 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.billto b{display:block;font-size:15.5px;font-weight:700;margin:4px 0 2px}
.billto span{display:block;font-size:13px;color:var(--muted)}
.billto .filled{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--mint);white-space:nowrap}
.filled .tick{width:18px;height:18px}
.items{margin-top:20px}
.ih,.it{display:grid;grid-template-columns:minmax(0,1fr) 30px 70px 84px;gap:10px}
.ih{font:600 11px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-bottom:12px}
.ih span:nth-child(n+2),.it span:nth-child(n+2){text-align:right}
.it{padding:14px 0;box-shadow:inset 0 -1px 0 var(--hair2),inset 0 1px 0 var(--hair2);font-size:14px}
.it span:first-child{font-weight:600}
.it small{display:none}
.tot{margin:14px 0 0 auto;width:240px;max-width:100%;font-size:13.5px}
.tot div{display:flex;justify-content:space-between;padding:5px 0;color:var(--ink2)}
.tot .grand{margin-top:8px;padding-top:12px;box-shadow:inset 0 1.5px 0 var(--ink);color:var(--ink);font-weight:600;font-size:15px;align-items:baseline}
.tot .grand b{font:700 24px/1 var(--f);letter-spacing:-.02em}
.acts{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.acts span{font-weight:600;font-size:13.5px;padding:12px 18px;border-radius:11px}
.acts .ghost{background:var(--canvas);color:var(--ink)}
.acts .send{background:var(--blue);color:#fff;box-shadow:0 10px 20px -10px rgba(43,99,246,.7)}
.toast{position:absolute;left:-30px;bottom:-26px;display:flex;align-items:center;gap:12px;background:var(--card);border-radius:16px;padding:14px 20px 14px 14px;box-shadow:var(--sh3);animation:rise .9s .35s cubic-bezier(.2,.7,.2,1) both}
.toast .ic{width:38px;height:38px;border-radius:12px;background:var(--mint);display:grid;place-items:center;flex:none}
.toast .ic::after{content:"";width:13px;height:7px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.toast b{display:block;font-size:15px;font-weight:700}.toast span{display:block;color:var(--muted);font-size:12.5px}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.madefor{display:flex;flex-wrap:wrap;gap:10px 30px;margin-top:72px;padding-top:28px;box-shadow:inset 0 1px 0 var(--hair);font-size:15px;color:var(--muted)}
.madefor b{color:var(--ink);font-weight:600}

/* ===== 2 connect: every website, one list ===== */
.cx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:88px;align-items:center}
.cx>*{min-width:0}
.cx .intro{max-width:30em}
.tl{margin:44px 0 0;font:600 12.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
.tiers>div{padding:2px 0 2px 22px;box-shadow:inset 1px 0 0 var(--hair)}
.tiers>div:first-child{padding-left:0;box-shadow:none}
.tiers b{display:block;font:700 38px/1 var(--f);letter-spacing:-.04em;color:var(--ink)}
.tiers>div:last-child b{color:var(--blue)}
.tiers span{display:block;margin-top:10px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.sites{background:var(--card);border-radius:24px;box-shadow:var(--sh3);padding:24px 26px 22px}
.sites .sh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 4px 18px}
.sites .sh b{font:700 17px/1 var(--f);color:var(--ink)}
.sites .sh span{font-size:13.5px;color:var(--muted)}
.wsite,.sites .add{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:16px;align-items:center;padding:15px 4px;box-shadow:0 -1px 0 var(--hair2)}
.wsite>i{width:44px;height:44px;border-radius:13px;background:var(--c);color:#fff;display:grid;place-items:center;font:700 13.5px/1 var(--f);font-style:normal;letter-spacing:.03em}
.wsite .nm b,.sites .add b{display:block;font:600 16px/1.3 var(--f);color:var(--ink)}
.wsite .nm span,.sites .add span{display:block;font-size:13.5px;color:var(--muted)}
.wsite .ct{text-align:right;line-height:1.1}
.wsite .ct b{display:block;font:700 21px/1 var(--f);letter-spacing:-.02em;color:var(--ink)}
.wsite .ct span{font-size:12px;color:var(--muted)}
.sites .add{grid-template-columns:44px minmax(0,1fr)}
.sites .add .plus{width:44px;height:44px;border-radius:13px;background:var(--canvas);color:var(--blue);display:grid;place-items:center;font:400 26px/1 var(--f)}
.sites .add b{color:var(--blue)}
.works{display:flex;flex-wrap:wrap;gap:8px 20px;padding:18px 4px 4px;box-shadow:0 -1px 0 var(--hair2);font-size:14px}
.works span{width:100%;font:600 11.5px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.works b{font-weight:600;color:var(--ink2)}

/* ===== 3 how it works: the 30 second clock ===== */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;padding-top:44px}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:var(--hair)}
.steps::after{content:"";position:absolute;left:0;top:0;height:2px;border-radius:2px;width:calc(66.667% + 46.33px);background:var(--blue)}
.steps .lim{position:absolute;right:0;top:-30px;font-size:13px;font-weight:600;color:var(--faint)}
.step{position:relative;min-width:0}
.step::before{content:"";position:absolute;left:0;top:-52px;width:18px;height:18px;border-radius:50%;background:var(--card);box-shadow:inset 0 0 0 4px var(--blue),0 0 0 6px var(--canvas)}
.step .t{display:block;font:700 15px/1 var(--f);color:var(--blue);letter-spacing:.02em}
.step h3{font:700 24px/1.25 var(--f);letter-spacing:-.025em;margin:16px 0 10px}
.step p{margin:0;font-size:16.5px;max-width:22em}

/* ===== 4 features: one flat surface per idea ===== */
.kit{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.tool{background:var(--card);border-radius:24px;box-shadow:var(--sh2);padding:36px;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.tool h3{font:700 22px/1.25 var(--f);letter-spacing:-.02em;margin:0 0 8px}
.tool p{margin:0;font-size:16px;color:var(--ink2)}
.t-pdf{grid-column:span 4;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:center;padding:40px 40px 40px 44px}
.t-pdf .dn{margin-top:22px;font-size:13.5px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.t-rem,.t-tax,.t-price,.t-cash{grid-column:span 2}
.vis{margin-top:auto;padding-top:28px}
.fan{position:relative;height:270px}
.pdf{position:absolute;top:22px;width:168px;height:224px;background:#fff;border-radius:10px;box-shadow:0 1px 2px rgba(11,22,48,.06),0 18px 40px -14px rgba(11,22,48,.24);padding:16px 14px;font-size:8px;color:var(--ink);overflow:hidden}
.pdf .ph{display:flex;justify-content:space-between;align-items:center}
.pdf .lg{width:20px;height:20px;border-radius:6px;background:var(--ink)}
.pdf .ph b{font-size:9px;font-weight:700}
.pdf .pl{margin:16px 0 12px;display:grid;gap:5px}
.pdf .pl i,.pdf .pr i{display:block;height:5px;border-radius:3px;background:#ECEAE5}
.pdf .pr{display:flex;justify-content:space-between;gap:10px;padding:8px 0;box-shadow:inset 0 -1px 0 var(--hair2)}
.pdf .pr i:first-child{width:56%}.pdf .pr i:last-child{width:22%}
.pdf .pt{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;padding-top:8px;box-shadow:inset 0 1px 0 var(--ink)}
.pdf .pt b{font-size:12px}
.pdf.p1{left:6%;transform:rotate(-7deg);opacity:.95}
.pdf.p3{right:6%;transform:rotate(7deg);opacity:.95}
.pdf.p3 .lg{background:var(--gold);border-radius:50%}
.pdf.p3 .pt b{color:var(--ink)}
.pdf.p2{left:50%;top:6px;width:188px;height:252px;transform:translateX(-50%);z-index:1;padding:0 16px 16px;box-shadow:0 2px 4px rgba(11,22,48,.06),0 30px 60px -18px rgba(11,22,48,.32)}
.pdf.p2 .ph{margin:0 -16px;padding:16px;background:var(--blue);color:#fff}
.pdf.p2 .lg{background:#fff}
.pdf.p2 .pt b{font-size:13px;color:var(--blue)}
.chase>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 0;font-size:14.5px;font-weight:600;color:var(--ink);box-shadow:inset 0 1px 0 var(--hair2)}
.chase small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.ctry>div{display:flex;justify-content:space-between;gap:12px;padding:11px 0;font-size:14.5px;box-shadow:inset 0 1px 0 var(--hair2)}
.ctry b{font-weight:600;color:var(--ink)}
.ctry span{color:var(--muted);font-size:13.5px;white-space:nowrap}
.ctry .any b{color:var(--blue)}
.plist>div{display:grid;grid-template-columns:minmax(0,1fr) auto 30px;gap:12px;align-items:center;padding:12px 0;font-size:14.5px;box-shadow:inset 0 1px 0 var(--hair2)}
.plist span{font-weight:600;color:var(--ink);min-width:0}
.plist small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
.plist b{font-weight:700;color:var(--ink)}
.plist i{width:30px;height:30px;border-radius:9px;background:var(--canvas);color:var(--blue);display:grid;place-items:center;font:500 18px/1 var(--f);font-style:normal}
.owed .big{font:700 36px/1 var(--f);letter-spacing:-.035em;color:var(--ink)}
.owed .big small{display:block;font:500 13px/1.4 var(--f);letter-spacing:0;color:var(--muted);margin-top:8px}
.owed .split{display:flex;height:8px;border-radius:99px;overflow:hidden;margin:22px 0 14px;gap:3px}
.owed .split i{display:block;height:100%}
.owed .key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;font-weight:500;color:var(--ink2)}
.owed .key span{display:inline-flex;align-items:center;gap:7px}
.owed .key span::before{content:"";width:8px;height:8px;border-radius:3px;background:var(--c)}
.owed .gst{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:14px;box-shadow:inset 0 1px 0 var(--hair2);font-size:14px;color:var(--ink2)}
.owed .gst b{color:var(--ink);font-weight:600}

/* ===== 5 why: the vault ===== */
.vault{background:var(--navy);border-radius:32px;padding:80px 72px 36px;color:#AEB9D2}
.vault .kicker{color:#F0B54A}
.vault h2{color:#fff;max-width:12em}
.vh{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:end}
.vh>*{min-width:0}
.vh p{margin:0;font-size:18px;line-height:1.6;color:#AEB9D2}
.vh .b{margin-top:26px}
.perks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.09);margin:64px -36px 0}
.perk{background:var(--navy);padding:40px 36px 44px;min-width:0}
.perk .ic{width:46px;height:46px;border-radius:13px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#F0B54A}
.perk .ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.perk h3{font:600 19.5px/1.3 var(--f);letter-spacing:-.015em;color:#fff;margin:24px 0 8px}
.perk p{margin:0;font-size:15.5px;line-height:1.6;color:#A3AEC8}

/* ===== 6 meter: what free really means ===== */
.meterbox{background:var(--card);border-radius:24px;box-shadow:var(--sh2);padding:18px 40px 26px}
.scale{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px;padding:14px 0 12px;font-size:11.5px;color:var(--faint);font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.scale .ticks{display:flex;justify-content:space-between}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:32px;align-items:center;padding:20px 0;box-shadow:0 -1px 0 var(--hair2)}
.mrow .nm b{display:block;color:var(--ink);font-size:16.5px;font-weight:600}
.mrow .nm span{display:block;font-size:13.5px;color:var(--muted)}
.mrow .nm em{font-style:normal;color:var(--ink);font-weight:600}
.track{position:relative;height:32px;border-radius:9px;background:var(--canvas)}
.track .fill{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:#CFD4DE;min-width:8px}
.track .val{position:absolute;top:50%;transform:translateY(-50%);font-weight:600;font-size:14.5px;color:var(--ink2);white-space:nowrap}
.mrow.us .track{overflow:visible}
.mrow.us .track .fill{background:var(--blue)}
.mrow.us .track .val{left:16px;color:#fff}
.mrow.us .track .inf{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 22px/1 var(--f);color:#fff}
.mrow.us .nm b{color:var(--blue)}
.meter-note{margin-top:20px;font-size:13.5px;color:var(--muted);text-align:center}

/* ===== 7 showcase: built in ===== */
.show{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.show>*{min-width:0}
.asks{display:grid;gap:2px}
.ask{all:unset;box-sizing:border-box;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding:18px 20px 18px 16px;border-radius:18px;cursor:pointer;transition:background .15s,box-shadow .15s}
.ask:hover{background:rgba(255,255,255,.7)}
.ask .no{font:600 14px/1.7 var(--f);color:var(--faint);font-variant-numeric:tabular-nums}
.ask b{display:block;font:600 17px/1.45 var(--f);color:var(--ink2)}
.ask span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px}
.ask[aria-selected="true"]{background:var(--card);box-shadow:var(--sh2)}
.ask[aria-selected="true"] b{color:var(--ink)}
.ask[aria-selected="true"] .no{color:var(--blue)}
.ask:focus-visible{outline:3px solid var(--blue)}
.ask .inline{display:none}
.pane{position:sticky;top:110px;background:var(--card);border-radius:24px;box-shadow:var(--sh3);padding:36px 38px;min-height:440px;display:flex;flex-direction:column}
.pane .lab{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--f);color:var(--mint)}
.pane .lab .tick{width:18px;height:18px}
.pane h3{font:700 25px/1.2 var(--f);letter-spacing:-.025em;margin:16px 0 6px}
.pplan{font-size:14.5px;color:var(--muted)}
.demo{margin-top:28px;flex:1;font-size:14px;color:var(--ink)}
.demo[hidden]{display:none!important}
.demo .card+.card{margin-top:22px}
.demo .line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;box-shadow:inset 0 1px 0 var(--hair2)}
.demo .line small{display:block;color:var(--muted);font-size:12.5px}
.demo .due{display:flex;justify-content:space-between;align-items:baseline;padding-top:13px;box-shadow:inset 0 1.5px 0 var(--ink);font-weight:700;font-size:18px}
.demo .btn{display:inline-flex;background:var(--ink);color:#fff;font-weight:600;font-size:13px;padding:9px 14px;border-radius:10px;white-space:nowrap}
.demo .soft{color:var(--muted);font-size:13px}
.demo .mail div{display:flex;gap:10px;padding:12px 0;box-shadow:inset 0 1px 0 var(--hair2)}
.demo .mail div span{width:66px;flex:none;color:var(--muted)}
.demo .mail div b{min-width:0;overflow-wrap:anywhere;font-weight:600}
.demo .ver{display:inline-flex;align-items:center;gap:8px;color:var(--mint);font-weight:600;font-size:13px;margin-top:16px}
.demo .ver .tick{width:18px;height:18px}
.phone{width:212px;margin:0 auto;background:var(--ink);border-radius:32px;padding:10px;box-shadow:var(--sh2)}
.phone .scr{background:var(--canvas);border-radius:24px;padding:16px 12px;min-height:300px}
.phone .scr .t{display:flex;justify-content:space-between;font-weight:700;font-size:15px;margin-bottom:12px}
.phone .scr .it{background:var(--card);border-radius:12px;box-shadow:var(--sh1);padding:10px;margin-bottom:8px;font-size:12.5px}
.phone .scr .it b{display:block;font-size:13px;font-weight:600}
.phone .ok{color:var(--mint);font-weight:600}.phone .op{color:var(--blue);font-weight:600}.phone .dr{color:var(--muted);font-weight:600}
.phone .scr .fab{margin-top:12px;background:var(--blue);color:#fff;border-radius:12px;text-align:center;padding:10px;font-weight:600;font-size:13px}
.csv .file{display:flex;align-items:center;gap:14px}
.csv .file i{width:40px;height:48px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 11px/1 var(--f);font-style:normal;flex:none}
.csv .file b{display:block;font-weight:600}
.csv .file span{display:block;color:var(--muted);font-size:13px}
.csv .file em{margin-left:auto;font-style:normal;color:var(--mint);font-weight:600;font-size:13px;white-space:nowrap}
.csv .bar{height:6px;border-radius:99px;background:var(--mint);margin:18px 0 0}
.csv .maps{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.csv .jobs{display:flex;align-items:center;gap:8px;margin:16px 0 0;font-size:13px;font-weight:600}
.csv .maps span{background:var(--canvas);border-radius:8px;padding:7px 10px;font-size:12.5px;font-weight:600}
.pane .src{margin:18px 0 0;font-size:13px;color:var(--muted)}

/* ===== 8 plans ===== */
.bill-row{display:flex;justify-content:center}
.bill-tog{display:inline-flex;padding:5px;border-radius:999px;background:var(--card);box-shadow:var(--sh1)}
.bill-tog button{border:0;background:transparent;border-radius:999px;padding:11px 20px;font:600 15px/1 var(--f);color:var(--muted);cursor:pointer}
.bill-tog button[aria-pressed="true"]{background:var(--ink);color:#fff}
.bill-tog em{font-style:normal;margin-left:6px;color:var(--mint)}
.bill-tog button[aria-pressed="true"] em{color:#6EE7B7}
.ptabs{display:none}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px;align-items:stretch}
.plan{position:relative;background:var(--card);border-radius:24px;box-shadow:var(--sh2);padding:32px 26px 26px;display:flex;flex-direction:column;min-width:0}
.plan h3{font:700 19px/1 var(--f);margin:0}
.plan .for{font-size:14.5px;color:var(--muted);margin:10px 0 0;min-height:44px}
.amt{margin:22px 0 0;font:700 44px/1 var(--f);letter-spacing:-.045em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.amt small{font:500 15px/1 var(--f);letter-spacing:0;color:var(--muted);margin-left:5px}
.per{font-size:13.5px;color:var(--muted);min-height:20px}
.plan ul{list-style:none;margin:24px 0 28px;padding:24px 0 0;display:grid;gap:12px;font-size:15px;color:var(--ink2);box-shadow:0 -1px 0 var(--hair2)}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li .tick{width:16px;height:16px;margin-top:4px;background:none}
.plan li .tick::after{width:10px;height:5px;border-color:var(--blue);transform:rotate(-45deg) translate(1px,-2px)}
.plan li.plus{display:block;font-weight:600;color:var(--ink);font-size:14px}
.plan .b{margin-top:auto;width:100%;height:50px}
.trial-note{margin:10px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted);text-align:center}
.plan.rec .trial-note{color:#9AA6C2}
.plan .b.sec{background:var(--canvas);box-shadow:none}
.plan .b.sec:hover{background:var(--stone);transform:none}
.plan.rec{background:var(--navy);box-shadow:var(--sh3)}
.plan.rec h3,.plan.rec .amt,.plan.rec li.plus{color:#fff}
.plan.rec .for,.plan.rec .per,.plan.rec .amt small{color:#9AA6C2}
.plan.rec ul{color:#D4DBEA;box-shadow:0 -1px 0 rgba(255,255,255,.1)}
.plan.rec li .tick::after{border-color:#8FB0FF}
.seal{position:absolute;top:-30px;right:-16px;width:86px;height:86px;z-index:2;filter:drop-shadow(0 10px 18px rgba(11,22,48,.24));transition:opacity .3s,transform .4s cubic-bezier(.2,.9,.25,1.2)}
.seal svg{width:100%;height:100%;display:block;overflow:visible}
.seal .s-bg{fill:#F0B54A}.seal .s-in{fill:var(--navy)}
.seal .s-ring{transform-origin:40px 40px;animation:sealspin 18s linear infinite}
.seal .s-txt{font:700 6.6px/1 var(--f);letter-spacing:.06em;fill:var(--navy)}
.seal .s-big{font:700 15px/1 var(--f);letter-spacing:-.03em;fill:#F0B54A}
.seal .s-sm{font:700 6.5px/1 var(--f);letter-spacing:.24em;fill:#fff}
.plan:hover .seal{transform:rotate(-8deg) scale(1.05)}
@keyframes sealspin{to{transform:rotate(360deg)}}
.plans[data-cycle="m"] .seal{opacity:0;transform:scale(.6) rotate(-30deg);pointer-events:none}
.go-yearly{display:none;align-self:flex-start;margin-top:10px;padding:0;border:0;background:none;cursor:pointer;font:600 13px/1.3 var(--f);color:var(--blue);text-align:left}
.go-yearly:hover{text-decoration:underline}
.plan.rec .go-yearly{color:#8FB0FF}
.plans[data-cycle="m"] .go-yearly{display:inline-block}
.terms{margin:18px 0 0}
.terms>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;font-size:13.5px}
.terms>div+div{box-shadow:inset 0 1px 0 var(--hair2)}
.terms dt{color:var(--muted)}
.terms dd{margin:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.terms dd b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.terms s{color:var(--faint);font-variant-numeric:tabular-nums}
.terms s:empty{display:none}
.plan.rec .terms>div+div{box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.plan.rec .terms dt{color:#9AA6C2}.plan.rec .terms dd b{color:#fff}.plan.rec .terms s{color:#6F7C99}
.plan .rib{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;box-shadow:0 6px 14px -6px rgba(11,22,48,.45);font:600 12px/1 var(--f);color:var(--navy);background:#F0B54A;padding:7px 10px;border-radius:999px}

/* promise */
.promise{margin-top:64px;background:var(--card);border-radius:24px;box-shadow:var(--sh2);padding:44px 48px 46px}
.ph2{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.ph2 h3{font:700 26px/1.2 var(--f);letter-spacing:-.025em;margin:0}
.ph2 .sig{margin:0;font-size:14.5px;color:var(--muted)}
.p4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair2);margin-top:32px;box-shadow:0 -1px 0 var(--hair2)}
.p4>div{background:var(--card);padding:26px 24px 4px;min-width:0}
.p4>div:first-child{padding-left:0}
.p4>div:last-child{padding-right:0}
.p4 .n{display:block;font:600 13px/1 var(--f);color:var(--blue);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.p4 b{display:block;color:var(--ink);font-size:17px;font-weight:600;margin-top:14px}
.p4 div>span:last-child{display:block;font-size:15px;color:var(--ink2);margin-top:6px}

/* ===== checkout: busy button, welcome dialog, confetti ===== */
.b.busy{pointer-events:none;opacity:.88}
.b.busy .arr{display:none}
.b.busy::after{content:"";width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;-webkit-mask:conic-gradient(#000 0 75%,transparent 0);mask:conic-gradient(#000 0 75%,transparent 0);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.co-err{display:block;margin-top:10px;font-size:13px;color:var(--coral);text-align:center}
.yay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(11,22,48,.56);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.yay-card{position:relative;z-index:1;width:100%;max-width:440px;background:var(--card);border-radius:28px;box-shadow:var(--sh3);padding:44px 36px 32px;text-align:center;animation:ypop .6s cubic-bezier(.2,.9,.25,1.25)}
.yay-card .mk svg{width:78px;height:78px;display:block;margin:0 auto;animation:ywave 1.2s .35s ease-in-out}
.yay-card h3{font:700 28px/1.15 var(--f);letter-spacing:-.03em;margin:22px 0 10px}
.yay-card p{margin:0;color:var(--ink2);font-size:16px;line-height:1.55}
.yay-card .next{margin-top:12px;font-size:14.5px;color:var(--muted)}
.yay-card .b{margin-top:26px;width:100%}
.yay-card .b:focus-visible{outline:2px solid rgba(43,99,246,.3);outline-offset:4px}
.yay-card .yay-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);font:400 24px/1 var(--f);cursor:pointer}
.yay-card .yay-x:hover{background:var(--stone);color:var(--ink)}
.yay-card .yay-x:focus-visible{outline:2px solid rgba(43,99,246,.3);outline-offset:2px}
.yay-card .yay-mail{display:flex;flex-direction:column;gap:4px;margin-top:22px;padding:16px 18px;border-radius:16px;background:var(--stone);text-align:left;font-size:14.5px;line-height:1.5;color:var(--ink2)}
.yay-card .yay-mail b{color:var(--ink);font-size:15.5px}
.yay-card .yay-mail strong{display:block;color:var(--ink);overflow-wrap:anywhere}
.yay-card .yay-mail .yay-has{margin-top:6px;padding-top:10px;border-top:1px solid rgba(11,22,48,.08);font-size:13.5px;color:var(--muted)}
.yay-card .b.sec{margin-top:16px}
.yay-card .yay-small{margin-top:12px;font-size:14px;color:var(--muted)}
.yay-card .yay-small a{color:var(--blue)}
.yay-card .yay-mbg{margin-top:18px;font-size:13.5px;color:var(--muted)}
.yay canvas{position:fixed;inset:0;z-index:2;pointer-events:none}
@keyframes ypop{from{transform:scale(.86) translateY(18px)}to{transform:none}}
@keyframes ywave{0%,100%{transform:none}25%{transform:rotate(-8deg) scale(1.06)}55%{transform:rotate(6deg) scale(1.06)}}

/* ===== legal pages ===== */
.legal-page{padding-block:72px 104px}
.legal-page .wrap{max-width:820px}
.legal-page h1{font-size:clamp(34px,4.2vw,52px);margin-top:16px}
.legal-page .lead{max-width:none}
.legal-page .upd{margin:14px 0 0;font-size:14px;color:var(--faint)}
.lp-body{margin-top:44px;padding-top:8px;box-shadow:inset 0 1px 0 var(--hair)}
.lp-body h2{font:700 21px/1.3 var(--f);letter-spacing:-.015em;margin:34px 0 8px}
.lp-body p{margin:0;color:var(--ink2)}
.lp-cta{margin-top:48px}
.lp-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.lp-toc a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--hair),0 1px 2px rgba(11,22,48,.04);font:600 13.5px/1 var(--f);color:var(--ink);text-decoration:none;transition:box-shadow .15s,color .15s}
.lp-toc a:hover{color:var(--blue);box-shadow:0 0 0 1px rgba(43,99,246,.35)}
.lp-region{margin-top:40px;padding:6px 30px 30px;border-radius:22px;background:#fff;box-shadow:0 0 0 1px var(--hair2),0 18px 44px -28px rgba(11,22,48,.18);scroll-margin-top:96px}
.lp-region>h2{margin-top:26px}
.lp-body h3{font:700 16.5px/1.35 var(--f);color:var(--ink);letter-spacing:-.01em;margin:24px 0 6px}
.lp-body p+p{margin-top:12px}
.lp-body ul,.lp-body ol{margin:10px 0 0;padding-left:20px;color:var(--ink2)}
.lp-body li+li{margin-top:6px}
.lp-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.lp-body table{width:100%;border-collapse:collapse;margin-top:14px;font-size:14.5px}
.lp-body th,.lp-body td{text-align:left;padding:10px 12px;vertical-align:top;box-shadow:inset 0 -1px 0 var(--hair)}
.lp-body th{font-weight:700;color:var(--ink);background:var(--stone)}
a.em span{display:inline}
.refund-line{margin:24px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.refund-line a,.qa details p a{color:var(--blue);font-weight:600}
.refund-line a:hover,.qa details p a:hover{text-decoration:underline}

/* ===== 9 questions ===== */
.qa{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.qa>*{min-width:0}
.qa .side{position:sticky;top:110px}
.qa .help{margin:28px 0 0;font-size:15.5px;color:var(--ink2);max-width:22em}
.qa .help b{display:block;color:var(--ink);font-size:16.5px;font-weight:600;margin-bottom:2px}
.qa details{padding:24px 0;box-shadow:0 1px 0 var(--hair)}
.qa details:first-child{box-shadow:0 -1px 0 var(--hair),0 1px 0 var(--hair)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;font:600 18.5px/1.4 var(--f);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.qa details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.qa details p{margin:14px 0 0;max-width:40em}

/* ===== 10 close + footer ===== */
.close{padding-block:68px 96px}
.cta-panel{background:var(--navy);border-radius:32px;text-align:center;padding:104px 40px 108px}
.cta-panel h2{color:#fff;font-size:clamp(34px,4.6vw,58px);max-width:14em;margin:0 auto}
.cta-panel p{color:#A9B4CD;font-size:19px;margin:20px auto 0;max-width:34em}
.cta-panel .ctas{margin-top:36px}
footer.site{color:var(--muted);padding-block:72px 40px;font-size:14.5px;box-shadow:inset 0 1px 0 var(--hair)}
.ftop{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;padding-bottom:44px;box-shadow:inset 0 -1px 0 var(--hair)}
.fbrand p{margin:18px 0 0;max-width:31em;font-size:15.5px;line-height:1.6}
.fcta{display:flex;align-items:center;gap:22px;font-size:14px;line-height:1.45;text-align:right}
.fc{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:48px 28px;padding-top:52px}
.fc details{min-width:0}
.fc details summary{list-style:none;color:var(--ink);font:600 14.5px/1.2 var(--f);margin:0 0 18px;cursor:default}
.fc details summary::-webkit-details-marker{display:none}
.fc a{display:block;margin-bottom:10px;line-height:1.4}.fc a:hover{color:var(--ink)}
.fc .note{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--faint);max-width:16em}
.fc .brand,.ftop .brand{display:inline-flex;color:var(--ink)}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:56px;padding-top:24px;box-shadow:0 -1px 0 var(--hair);font-size:13.5px}
.legal a{color:var(--ink2);font-weight:500}.legal a:hover{color:var(--blue)}
.mcta{display:none}

/* ===== responsive ===== */
@media (max-width:1120px){
  .links{display:none}.menu-btn{display:grid}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .hero-copy{text-align:center;max-width:860px;margin:0 auto}
  h1{font-size:clamp(44px,6.4vw,72px);max-width:12.5em;margin-left:auto;margin-right:auto}
  .lead{margin-left:auto;margin-right:auto;max-width:33em}
  .ctas,.assure{justify-content:center}
  .app{max-width:1000px;margin:0 auto;width:100%;font-size:14px}
  .app-body{grid-template-columns:270px minmax(0,1fr)}
  .chips span:nth-child(2){display:block}
  .app-top .search{max-width:420px}
  .doc{padding:26px 30px 30px}
  .ih,.it{grid-template-columns:minmax(0,1fr) 56px 96px 108px;gap:12px}
  .tot{width:280px}
  .madefor{justify-content:center;box-shadow:none;padding-top:0;margin-top:64px}
  .toast{left:16px;bottom:-26px}
  .cx{gap:56px}
  .kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .t-pdf{grid-column:span 2}.t-rem,.t-tax,.t-price,.t-cash{grid-column:span 1}
  .vault{padding:64px 48px 28px}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr));margin:56px -32px 0}
  .perk{padding:36px 32px 40px}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .show{grid-template-columns:minmax(0,1fr)}
  .pane{position:relative;top:auto}
  .p4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p4>div{padding:24px 24px 22px}
  .p4>div:nth-child(odd){padding-left:0}.p4>div:nth-child(even){padding-right:0}
  .fc{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
  .app-body{grid-template-columns:minmax(0,1fr)}
  .list{box-shadow:inset 0 -1px 0 var(--hair2);padding-bottom:12px}
  .list .row:nth-of-type(n+6){display:none}
  .cx{grid-template-columns:minmax(0,1fr);gap:44px}
  .steps{gap:32px}
  .steps::after{width:calc(66.667% + 30.33px)}
  .t-pdf{grid-template-columns:minmax(0,1fr);gap:8px}
  .vh{grid-template-columns:minmax(0,1fr);gap:20px}
  .qa{grid-template-columns:minmax(0,1fr);gap:28px}
  .qa .side{position:static}
  .fc{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .lp-region{padding:4px 18px 22px;border-radius:18px}
  .lp-body table{display:block;overflow-x:auto}
  body{font-size:16.5px;padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .wrap{padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  .nav{height:64px;gap:12px}
  .nav .login{display:none}
  .nav .b{height:40px;padding:0 18px}
  section{padding-block:44px}
  .hd{margin-bottom:36px}
  h2{font-size:31px}
  .intro{font-size:17px}
  .hero{padding-block:32px 44px}
  .pill{font-size:13.5px}
  h1{font-size:41px;margin-top:22px}
  .lead{font-size:17px;margin-top:18px}
  .ctas{margin-top:26px}.ctas .b{flex:1 1 100%}
  .assure{font-size:14px;gap:6px 18px;margin-top:20px}
  .hero-grid{gap:36px}
  .app{margin-top:0;border-radius:20px;font-size:13.5px}
  .app-top{height:56px;padding:0 14px}
  .app-top .search{display:none}
  .list{padding:14px 10px 10px}
  .chips{display:none}
  .list .lh{padding:0 8px 8px}
  .list .row:not(.sel){display:none}
  .doc{padding:18px 16px 20px}
  .dh b{font-size:17px}
  .tpl{display:none}
  .billto{margin-top:14px;padding:14px 0;flex-direction:column;gap:10px}
  .ih{display:none}
  .it{grid-template-columns:minmax(0,1fr) auto}
  .it span:nth-child(2),.it span:nth-child(3){display:none}
  .it small{display:block;font-weight:400;color:var(--muted);font-size:12.5px}
  .tot{width:100%}
  .acts span{flex:1;text-align:center}
  .toast{position:static;margin:0 12px 12px;box-shadow:none;background:var(--mint-wash);animation:none}
  .madefor{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin-top:36px;gap:10px 22px}
  .madefor::-webkit-scrollbar{display:none}
  .tl{margin-top:30px}
  .tiers b{font-size:28px}
  .tiers>div{padding-left:14px}
  .tiers span{font-size:12.5px;white-space:normal;line-height:1.3}
  .sites{padding:16px 16px 14px;border-radius:20px}
  .wsite,.sites .add{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:13px 2px}
  .sites .add{grid-template-columns:40px minmax(0,1fr)}
  .wsite>i,.sites .add .plus{width:40px;height:40px;border-radius:12px}
  .wsite .st{display:none}
  .wsite .nm b,.sites .add b{font-size:15px}
  .wsite .nm span,.sites .add span{font-size:13px}
  .works{font-size:13px;gap:6px 14px}
  .steps{grid-template-columns:minmax(0,1fr);gap:30px;padding:0 0 0 38px}
  .steps::before{left:8px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .steps::after{left:8px;top:6px;bottom:6px;width:2px;height:auto}
  .steps .lim{display:none}
  .step::before{left:-38px;top:0}
  .step h3{font-size:20px;margin:10px 0 6px}
  .step p{font-size:16px}
  .kit{grid-template-columns:minmax(0,1fr);gap:14px}
  .t-pdf,.t-rem,.t-tax,.t-price,.t-cash{grid-column:span 1}
  .tool{padding:26px 22px;border-radius:20px}
  .t-pdf{padding:26px 22px 10px}
  .tool h3{font-size:20px}
  .fan{height:236px}
  .pdf{width:138px;height:186px;padding:12px 11px}
  .pdf.p2{width:156px;height:212px;padding:0 12px 12px}
  .pdf.p2 .ph{margin:0 -12px;padding:12px}
  .pdf.p1{left:0}.pdf.p3{right:0}
  .vault{border-radius:24px;padding:44px 22px 8px}
  .vh .b{width:100%}
  .perks{grid-template-columns:minmax(0,1fr);margin:36px -22px 0}
  .perk{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 16px;padding:24px 22px}
  .perk .ic{grid-row:span 2;width:44px;height:44px;border-radius:12px}
  .perk h3{margin:2px 0 2px;font-size:18px}
  .perk p{font-size:15px}
  .meterbox{padding:8px 18px 18px;border-radius:20px}
  .scale{display:none}
  .mrow{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px 0}
  .track{height:28px}
  .mrow.us .track .inf{right:12px}
  .ask{grid-template-columns:28px minmax(0,1fr);padding:16px 14px}
  .ask .inline{display:block;margin-top:14px}
  .ask[aria-selected="false"] .inline{display:none}
  .pane{display:none}
  .ask .inline .demo{margin-top:0}
  .ptabs{display:flex;gap:6px;margin-top:16px;overflow-x:auto;scrollbar-width:none}
  .ptabs::-webkit-scrollbar{display:none}
  .ptabs button{flex:1 0 auto;border:0;background:var(--card);box-shadow:var(--sh1);border-radius:999px;padding:12px 16px;font:600 15px/1 var(--f);color:var(--muted);cursor:pointer}
  .ptabs button[aria-selected="true"]{background:var(--ink);color:#fff}
  .bill-row{justify-content:flex-start}
  .plans{grid-template-columns:minmax(0,1fr);margin-top:30px}
  .seal{top:-22px;right:-8px;width:74px;height:74px}
  .plans .plan{display:none}.plans .plan.on{display:flex}
  .promise{margin-top:40px;padding:30px 22px 26px;border-radius:20px}
  .ph2 h3{font-size:22px}
  .p4{grid-template-columns:minmax(0,1fr);margin-top:22px}
  .p4>div,.p4>div:nth-child(odd),.p4>div:nth-child(even){padding:18px 0}
  .p4 b{margin-top:8px}
  .qa summary{font-size:17px}
  .close{padding-block:44px 60px}
  .legal-page{padding-block:40px 64px}
  .legal-page h1{font-size:32px}
  .lp-cta .b{width:100%}
  .cta-panel{border-radius:24px;padding:64px 22px}
  .cta-panel h2{font-size:32px}
  .cta-panel p{font-size:17px}
  footer.site{padding-block:40px 28px}
  .ftop{flex-direction:column;align-items:stretch;gap:22px;padding-bottom:28px}
  .fcta{justify-content:space-between;text-align:left}
  .fc{grid-template-columns:minmax(0,1fr);gap:0;padding-top:4px}
  .legal{flex-direction:column;margin-top:28px}
  .fc details{box-shadow:0 1px 0 var(--hair);padding:16px 0}
  .fc details summary{margin:0;cursor:pointer;display:flex;justify-content:space-between}
  .fc details summary::after{content:"+";font-size:20px;line-height:15px}
  .fc details[open] summary::after{content:"\2212"}
  .fc details[open] summary{margin-bottom:14px}
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;gap:12px;align-items:center;background:rgba(250,249,247,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--hair),0 -12px 30px -20px rgba(11,22,48,.35);padding:12px max(18px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));transform:translateY(110%);transition:transform .25s}
  .mcta.show{transform:none}
  .mcta div{flex:1;min-width:0;font-size:13.5px;color:var(--muted);line-height:1.3}
  .mcta div b{display:block;color:var(--ink);font-size:15px}
  .mcta .b{height:46px;padding:0 22px}
}
/* small phones: a compact header so Start free and the menu stay on screen (footer brand untouched) */
@media (max-width:374px){
  .nav{gap:10px}
  .nav .brand{gap:8px;font-size:18px}
  .nav .brand .mark{width:32px;height:32px}
  .nav .r{gap:6px}
  .nav .b{height:38px;padding:0 14px;font-size:14px}
  .nav .menu-btn{width:38px;height:38px}
}
@media (max-width:319px){
  .nav .brand em{display:none}
}
/* ===== hero v9 (23 Oct 2026): our own product, nobody else's look. The paper is our Ledger design exactly as
   the app prints it, the phone is our phone app's invoice screen, and two cards tell the story around them:
   a website enquiry comes in, the invoice goes out, it is opened and paid. The picture is one container:
   every size inside is in cqw (its own width) or em, so on a phone it shrinks as one image. ===== */
.h9{padding-block:56px 64px}
.h9-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center}
.h9-grid>*{min-width:0}
.h9-pill{display:inline-flex;align-items:center;gap:10px;background:var(--card);box-shadow:var(--sh1),0 0 0 1px var(--hair2);color:var(--ink);font:600 14px/1.2 var(--f);padding:9px 16px 9px 12px;border-radius:999px}
.h9-pill i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-wash)}
.h9-h1{font:800 clamp(44px,4.9vw,70px)/1 var(--f);letter-spacing:-.05em;margin:24px 0 0;color:var(--ink);text-wrap:balance}
.h9-hl{position:relative;display:inline-block;color:var(--blue)}
.h9-hl svg{position:absolute;left:-1%;bottom:-.1em;width:102%;height:.22em;overflow:visible}
.h9-hl path{fill:none;stroke:#F0B54A;stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1200;stroke-dashoffset:1200;animation:h9draw 1s .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes h9draw{to{stroke-dashoffset:0}}
.h9-lead{font-size:clamp(18px,1.4vw,20px);line-height:1.55;color:var(--ink2);margin:22px 0 0;max-width:31em}
.h9-plan{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:600px;background:var(--card);border-radius:18px;box-shadow:0 0 0 1px var(--hair),var(--sh1)}
.h9-plan li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:15px 16px 14px;min-width:0}
.h9-plan li+li{box-shadow:inset 1px 0 0 var(--hair2)}
.h9-plan .ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font:800 14px/1 var(--f);letter-spacing:-.02em}
.h9-plan .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.h9-plan .t-g{background:var(--gold-wash);color:#9A5F05}
.h9-plan .t-b{background:var(--blue-wash);color:var(--blue)}
.h9-plan .t-m{background:var(--mint-wash);color:var(--mint)}
.h9-plan b{display:block;font:700 14.5px/1.25 var(--f);color:var(--ink)}
.h9-plan small{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:2px}
.h9-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.h9-dev{display:flex;align-items:center;gap:9px;margin:18px 0 0;font-size:14px;color:var(--muted)}
.h9-dev svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}

.h9-vis{container-type:inline-size;position:relative;margin-right:calc(-1 * clamp(0px,(100vw - 1220px) / 2,48px))}
.h9-stage{position:relative;height:104cqw}
.h9-glow{position:absolute;left:-6cqw;right:-14cqw;top:8cqw;bottom:-4cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(43,99,246,.11),rgba(43,99,246,0) 70%),radial-gradient(closest-side at 70% 60%,rgba(240,181,74,.2),rgba(240,181,74,0));pointer-events:none}
@keyframes h9up{from{opacity:0;transform:translateY(3cqw)}to{opacity:1;transform:none}}
@keyframes h9drop{from{opacity:0;transform:translateY(-2.4cqw) scale(.96)}to{opacity:1;transform:none}}
@keyframes h9in{to{opacity:1}}
@keyframes h9out{to{opacity:0}}
@keyframes h9press{50%{transform:scale(.95);filter:brightness(.92)}}
@keyframes h9stamp{from{opacity:0;transform:rotate(-11deg) scale(1.9)}to{opacity:.92;transform:rotate(-11deg) scale(1)}}
@keyframes h9dot{from{transform:scale(0)}to{transform:none}}

/* our Ledger design, as the app prints it (app/resources/views/designs/ledger.blade.php) */
.lp{--acc:#0E5E6F;--rule:#E4E7ED;--mp:#5E6676;position:absolute;left:0;top:8cqw;width:65cqw;height:92cqw;z-index:1;
  font:400 1.18cqw/1.45 var(--f);color:#151C2C;font-variant-numeric:tabular-nums;padding:4.4em 4.8em 3em;display:flex;flex-direction:column;gap:1.75em;
  background:#fff;border-radius:.3em;animation:h9up .9s cubic-bezier(.2,.8,.2,1) both;
  box-shadow:0 0 0 1px rgba(11,22,48,.05),0 .2em .5em rgba(11,22,48,.05),1.1em 1.1em 0 -.2em #F3F1EB,1.1em 1.1em 0 -.12em rgba(11,22,48,.07),0 3em 6em -2.6em rgba(11,22,48,.32)}
.lp::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,0) 55%,rgba(11,22,48,.025));pointer-events:none}
.lp small{display:block;font-size:.76em;font-weight:600;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--mp);margin-bottom:.55em}
.lp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:2em}
.lp-biz{display:flex;gap:1.1em;align-items:flex-start;min-width:0}
.lp-logo{width:3.6em;height:3.6em;flex:none}
.lp-biz b{display:block;font-size:1.3em;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.lp-biz span{display:block;font-size:.88em;line-height:1.5;color:var(--mp);white-space:nowrap}
.lp-doc{text-align:right;flex:none}
.lp-doc h4{margin:0;font:700 .96em/1 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.lp-doc span{display:block;margin-top:.65em;font-size:1.05em;font-weight:600}
.lp-hero{display:grid;grid-template-columns:1.3fr 1fr 1fr;box-shadow:inset 0 .2em 0 var(--acc),inset 0 -1px 0 var(--rule);padding:1.3em 0 1.15em}
.lp-hero>div{padding:0 1.3em;box-shadow:inset 1px 0 0 var(--rule)}
.lp-hero>div:first-child{padding-left:0;box-shadow:none}
.lp-hero b{display:block;font-size:1.2em;font-weight:700}
.lp-hero>div:first-child b{font-size:2.3em;letter-spacing:-.03em;line-height:1.05}
.lp-parts{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:1.6em}
.lp-parts b{display:block;font-size:1.08em;font-weight:700}
.lp-parts span{display:block;font-size:.96em;color:var(--mp)}
.lp-parts .k{color:#151C2C;font-weight:500}
.lp-parts dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25em .95em;margin:0;font-size:.96em}
.lp-parts dt{color:var(--mp)}
.lp-parts dd{margin:0;font-weight:500}
.lp-items{display:flex;flex-direction:column}
.lp-ih,.lp-ln{display:grid;grid-template-columns:minmax(0,1fr) 5.4em 5em 3.4em 5.8em;gap:.8em;align-items:start}
.lp-ih{padding-bottom:.75em;box-shadow:inset 0 -1.5px 0 #151C2C;font-size:.76em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--mp)}
.lp-ih span:nth-child(n+2),.lp-ln>span:nth-child(n+2){text-align:right}
.lp-ih span:nth-child(4),.lp-ln>span:nth-child(4){text-align:center}
.lp-ln{padding:.85em 0;box-shadow:inset 0 -1px 0 var(--rule)}
.lp-ln b{display:block;font-size:1.04em;font-weight:600}
.lp-ln em{display:block;font-style:normal;font-size:.9em;color:var(--mp);margin-top:.1em}
.lp-ln i{font-style:normal;font-size:.88em;color:var(--mp)}
.lp-ln u{display:inline-block;text-decoration:none;padding:0 .55em;border-radius:.45em;background:#F1F3F6;font-size:.84em;font-weight:600;line-height:1.75}
.lp-ln>span:last-child{font-weight:600}
.lp-sum{display:grid;grid-template-columns:minmax(0,1fr) 21em;gap:2.4em;align-items:start}
.lp-pay{padding:1.1em 1.3em;border-radius:.6em;box-shadow:inset 0 0 0 1px var(--rule)}
.lp-pay dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3em 1em;margin:0;font-size:.94em}
.lp-pay dt{color:var(--mp);white-space:nowrap}
.lp-pay dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.lp-tot div{display:flex;justify-content:space-between;gap:1em;padding:.38em 0}
.lp-tot div span:first-child{color:var(--mp)}
.lp-tot .big{margin-top:.6em;padding-top:.9em;box-shadow:inset 0 1.5px 0 #151C2C;align-items:baseline}
.lp-tot .big span:first-child{color:#151C2C;font-weight:600}
.lp-tot .big b{font-size:1.65em;font-weight:700;letter-spacing:-.02em}
.lp-foot{margin:auto 0 0;font-size:.92em;color:var(--mp)}
.lp-stamp{position:absolute;left:43%;top:75%;z-index:2;font:800 3.5em/1 var(--f);letter-spacing:.16em;color:#0E9F6E;padding:.16em .3em .12em .46em;border:.11em solid currentColor;border-radius:.16em;
  transform:rotate(-11deg);opacity:.92;mix-blend-mode:multiply;box-shadow:inset 0 0 0 .05em rgba(255,255,255,.6);animation:h9stamp .5s 3.3s cubic-bezier(.3,1.5,.5,1) both}

/* our phone app's invoice screen (app/resources/dash, the phone editor) */
.h9-ph{position:absolute;right:0;top:21cqw;width:38cqw;height:81cqw;z-index:3;padding:1.3cqw;border-radius:7cqw;background:#0B1630;
  box-shadow:0 0 0 .3cqw #2A3653,0 0 0 .55cqw #0B1630,0 4.6cqw 9cqw -3cqw rgba(11,22,48,.55),0 1.2cqw 2.4cqw rgba(11,22,48,.16);animation:h9up .9s .12s cubic-bezier(.2,.8,.2,1) both}
.ps{position:relative;height:100%;border-radius:5.7cqw;background:#FAF9F7;overflow:hidden;display:flex;flex-direction:column;font:400 1.86cqw/1.35 var(--f);color:#0B1630}
.ps svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ps-island{position:absolute;top:.8em;left:50%;width:5.8em;height:1.85em;margin-left:-2.9em;border-radius:1em;background:#000}
.ps-status{display:flex;justify-content:space-between;align-items:center;height:3.4em;padding:.45em 1.25em 0 2.1em;flex:none}
.ps-status b{font-size:1.04em;font-weight:600}
.ps-status span{display:flex;align-items:center;gap:.35em}
.ps-status svg{height:.82em;width:auto;fill:currentColor;stroke:none}
.ps-status svg:first-child{width:1.15em}.ps-status svg:nth-child(2){width:1.05em}.ps-status svg:last-child{width:1.75em}
.ps-top{display:flex;align-items:center;gap:.5em;padding:.2em .85em .7em;flex:none;white-space:nowrap}
.ps-top>svg{width:1.45em;height:1.45em;color:#3A445E}
.ps-top>svg:last-child{margin-left:auto;color:#6B7489}
.ps-seg{display:flex;padding:.2em;border-radius:999px;background:#EFEDE8;font-size:.84em}
.ps-seg b,.ps-seg span{padding:.4em .72em;border-radius:999px;line-height:1}
.ps-seg b{background:#fff;font-weight:600;box-shadow:0 1px 2px rgba(11,22,48,.12)}
.ps-seg span{color:#6B7489}
.ps-no{font-size:1em;font-weight:700;letter-spacing:-.01em}
.ps-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:.6em;padding:0 .85em}
.ps-from{display:flex;align-items:center;gap:.5em;padding:.5em .75em;border-radius:.8em;background:#EEF3FF;color:#1A47D1;font-size:.84em;font-weight:600}
.ps-from svg{width:1.35em;height:1.35em;flex:none}
.ps-card{display:flex;flex-direction:column;padding:.8em .95em .85em;border-radius:1em;background:#fff;box-shadow:0 0 0 1px rgba(11,22,48,.07),0 1px 2px rgba(11,22,48,.04)}
.ps-ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.45em}
.ps-ch small{font-size:.84em;color:#6B7489}
.ps-ch em{font-style:normal;font-size:.82em;font-weight:600;color:#1A47D1}
.ps-card>b{font-size:1em;font-weight:600}
.ps-card>span{font-size:.86em;color:#3A445E;line-height:1.5}
.ps-qty{display:flex;align-items:center;gap:.5em;margin-top:.6em}
.ps-qty .stp,.ps-qty .pr{display:inline-flex;align-items:center;gap:.55em;height:2.3em;padding:0 .7em;border-radius:999px;background:#F2F0EB;font-weight:600}
.ps-qty .stp i{font-style:normal;color:#3A445E;font-weight:500}
.ps-qty small{font-weight:400;font-size:.82em;color:#6B7489}
.ps-amt{align-self:flex-end;margin-top:.4em;font-weight:700}
.ps-more{display:flex;justify-content:space-between;gap:.6em;margin-top:.55em;padding-top:.6em;box-shadow:inset 0 1px 0 rgba(11,22,48,.07);font-size:.84em;color:#6B7489}
.ps-more b{color:#0B1630;font-weight:600}
.ps-tot div{display:flex;justify-content:space-between;font-size:.86em;color:#3A445E;padding:.12em 0}
.ps-tot .t{margin-top:.35em;padding-top:.45em;box-shadow:inset 0 1px 0 rgba(11,22,48,.09);font-size:1em;color:#0B1630;font-weight:600;align-items:baseline}
.ps-tot .t b{font-size:1.25em;letter-spacing:-.02em}
.ps-send{position:relative;flex:none;display:grid;padding:.75em .85em 2em;background:linear-gradient(rgba(250,249,247,0),#FAF9F7 .7em)}
.ps-send>span{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:.6em;height:3.1em;border-radius:999px;font-weight:600;font-size:1em;color:#fff}
.ps-send .go{background:#2B63F6;box-shadow:0 .5em 1.2em -.5em rgba(43,99,246,.8);animation:h9press .35s 1.8s,h9out .25s 2.1s forwards}
.ps-send .go i{width:1.6em;height:1.6em;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.ps-send .go svg{width:1em;height:1em;stroke-width:2.2}
.ps-send .ok{background:#0E9F6E;opacity:0;animation:h9in .3s 2.1s forwards}
.ps-send .ok svg{width:1.2em;height:1.2em;stroke-width:2.4}
.ps-home{position:absolute;bottom:.6em;left:50%;width:7.5em;height:.3em;margin-left:-3.75em;border-radius:1em;background:#0B1630}

/* the story around them: the enquiry that came in, and the invoice being tracked */
.h9-enq{position:absolute;right:0;top:0;z-index:4;width:62cqw;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.85em;align-items:center;padding:.9em 1.05em .9em .9em;
  font:400 1.92cqw/1.35 var(--f);background:#fff;border-radius:1.15em;box-shadow:0 0 0 1px rgba(11,22,48,.06),0 1.6em 3.4em -1.4em rgba(11,22,48,.34);animation:h9drop .7s .75s cubic-bezier(.2,.9,.25,1.15) both}
.h9-enq .ic{width:2.7em;height:2.7em;border-radius:.8em;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 .4em .9em -.4em rgba(43,99,246,.8)}
.h9-enq .ic svg{width:1.45em;height:1.45em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.h9-enq b{display:block;font-size:1em;font-weight:700;color:var(--ink)}
.h9-enq span{display:block;font-size:.88em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h9-enq em{align-self:start;font-style:normal;font-size:.8em;font-weight:600;color:var(--blue);white-space:nowrap}
.h9-trk{position:absolute;left:-2cqw;bottom:0;z-index:4;display:flex;align-items:center;gap:.55em;padding:.85em 1.1em;font:400 1.82cqw/1.25 var(--f);background:#fff;border-radius:1.1em;
  box-shadow:0 0 0 1px rgba(11,22,48,.06),0 1.6em 3.4em -1.4em rgba(11,22,48,.34);animation:h9up .6s 2.3s cubic-bezier(.2,.8,.2,1) both}
.h9-trk>div{display:flex;align-items:center;gap:.55em}
.h9-trk>div+div::before{content:"";width:1.7em;height:.16em;border-radius:1em;background:#C9D7FD;margin-right:.1em}
.h9-trk i{position:relative;width:1.55em;height:1.55em;flex:none;border-radius:50%;background:var(--blue);animation:h9dot .35s 2.6s cubic-bezier(.3,1.5,.5,1) both}
.h9-trk i::after{content:"";position:absolute;left:.47em;top:.48em;width:.55em;height:.28em;border-left:.15em solid #fff;border-bottom:.15em solid #fff;transform:rotate(-45deg)}
.h9-trk .s2 i{animation-delay:2.9s}
.h9-trk .s3 i{background:var(--mint);animation-delay:3.25s}
.h9-trk .s3::before{background:#A9DCC8}
.h9-trk p{margin:0}
.h9-trk b{display:block;font-size:.96em;font-weight:700;color:var(--ink)}
.h9-trk .s3 b{color:var(--mint)}
.h9-trk span{display:block;font-size:.8em;color:var(--muted);white-space:nowrap}

/* laptops with short screens (1366x687 and the like): the copy and the picture both fit above the fold */
@media (min-width:1121px) and (max-height:820px){
  .h9{padding-block:34px 48px}
  .h9-h1{font-size:clamp(44px,4.3vw,60px);margin-top:18px}
  .h9-lead{margin-top:16px;font-size:18px}
  .h9-plan{margin-top:22px}
  .h9-plan li{padding:12px 14px 11px;gap:8px}
  .h9-ctas{margin-top:22px}
  .h9-dev{margin-top:14px}
  .h9-vis{justify-self:end;width:100%;max-width:max(500px,calc((100svh - 120px) * .96))}
}
@media (max-width:1120px){
  .h9-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .h9-copy{max-width:760px}
  .h9-vis{width:100%;max-width:640px;margin:0 auto}
}
@media (max-width:760px){
  .h9{padding-block:26px 40px}
  /* on a phone the picture comes straight after the buttons, so the first two screens show the product */
  .h9-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .h9-copy{display:contents}
  .h9-pill{order:1;align-self:flex-start}
  .h9-h1{order:2}
  .h9-lead{order:3}
  .h9-ctas{order:4}
  .h9-vis{order:5;margin-top:30px}
  .h9-plan{order:6}
  .h9-dev{order:7}
  .h9-pill{font-size:13px}
  .h9-h1{font-size:clamp(38px,10.6vw,54px);margin-top:20px}
  .h9-lead{font-size:17px;margin-top:16px}
  .h9-plan{grid-template-columns:minmax(0,1fr);margin-top:24px}
  .h9-plan li{flex-direction:row;align-items:center;gap:12px;padding:11px 14px}
  .h9-plan li+li{box-shadow:inset 0 1px 0 var(--hair2)}
  .h9-plan .ic{width:34px;height:34px;border-radius:10px}
  .h9-ctas{margin-top:24px}
  .h9-ctas .b{flex:1 1 100%}
  .h9-dev{font-size:13.5px;align-items:flex-start}
  .h9-stage{height:138cqw}
  .lp{top:15cqw;width:76cqw;height:107cqw;font-size:1.27cqw}
  .h9-ph{top:37cqw;width:48cqw;height:101cqw;padding:1.5cqw;border-radius:8.4cqw}
  .ps{border-radius:6.9cqw;font-size:2.34cqw}
  .h9-enq{right:0;width:88cqw;font-size:2.5cqw}
  .h9-trk{left:0;font-size:2.45cqw;gap:.4em;padding:.8em .9em}
  .h9-trk span{display:none}
  .h9-trk>div+div::before{width:.9em}
}

/* ===== setup v8: one living scene, your website on the left, WhizInvoice on the right, the link between ===== */
.s8 .hd{margin-bottom:44px}
.s8-box{background:var(--card);border-radius:28px;box-shadow:var(--sh3);padding:28px 28px 22px}
.s8-steps{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));padding:2px 0 24px}
.s8-track{position:absolute;left:calc(100% / 12);right:calc(100% / 12);top:22px;height:3px;border-radius:3px;background:var(--stone)}
.s8-track i{display:block;height:100%;width:var(--p,0%);border-radius:3px;background:var(--blue);transition:width .6s cubic-bezier(.4,0,.2,1)}
.s8-steps button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 4px;background:none;border:0;cursor:pointer;font:inherit}
.s8-steps .nd{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 2px var(--stone);color:var(--muted);font:700 16px/1 var(--f);transition:background .3s,color .3s,box-shadow .3s}
.s8-steps .done .nd{background:var(--blue);color:#fff;box-shadow:0 0 0 2px var(--blue)}
.s8-steps [aria-selected="true"] .nd{background:#fff;color:var(--blue);box-shadow:0 0 0 3px var(--blue),0 0 0 9px var(--blue-wash)}
.s8-steps .lb{font:600 14px/1.25 var(--f);color:var(--muted);text-align:center}
.s8-steps .done .lb,.s8-steps [aria-selected="true"] .lb{color:var(--ink)}
.s8-steps button:hover .nd{box-shadow:0 0 0 3px var(--blue-wash),0 0 0 2px var(--blue)}

.s8-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1.08fr);align-items:stretch;height:430px;padding:22px;border-radius:22px;background:var(--canvas)}
.s8-scene>*{min-width:0}
.s8-site,.s8-app{position:relative;background:#fff;border-radius:16px;box-shadow:var(--sh2);overflow:hidden;transition:opacity .45s}
.s8-scene[data-step="1"] .s8-site{opacity:.5}
.s8-scene[data-step="3"] .s8-app,.s8-scene[data-step="5"] .s8-app{opacity:.62}
.s8-chrome{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:#F1F0EC}
.s8-chrome i{width:9px;height:9px;border-radius:50%;background:#D9D7D0}
.s8-chrome span{flex:1;min-width:0;margin-left:10px;height:22px;border-radius:6px;background:#fff;display:flex;align-items:center;padding:0 10px;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden}
.s8-page{display:flex;flex-direction:column;gap:8px;padding:14px 18px}
.s8-pnav{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.s8-pnav b{margin-right:auto;font-size:12.5px;color:var(--ink)}
.s8-pnav span{width:26px;height:5px;border-radius:3px;background:var(--stone)}
.s8-page h5{margin:2px 0;font:700 17px/1.2 var(--f);color:var(--ink)}
.s8-field{display:flex;flex-direction:column;gap:3px;min-height:46px;padding:7px 10px;border-radius:9px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);overflow:hidden}
.s8-field small{font-size:10.5px;color:var(--muted)}
.tw{display:block;font-size:13px;color:var(--ink);white-space:nowrap;clip-path:inset(0 100% 0 0)}
.s8-send{display:grid;place-items:center;height:36px;margin-top:2px;border-radius:9px;background:var(--ink);color:#fff;font-size:13px;font-weight:600}

.s8-zip{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;background:#fff;box-shadow:0 12px 30px -12px rgba(11,22,48,.45),0 0 0 1px var(--hair);font-size:12px;font-weight:600;color:var(--ink);opacity:0;transform:translateY(10px)}
.s8-zip span{padding:5px 6px;border-radius:6px;background:var(--blue-wash);color:var(--blue);font-size:10px;font-weight:800}
.s8-zip i{margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--mint-wash);position:relative}
.s8-zip i::after,.s8-ok i::after,.s8-con i::after,.s8-wait .c i::after{content:"";position:absolute;left:6px;top:6px;width:7px;height:4px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg)}

.s8-wp{position:absolute;left:12px;right:12px;top:48px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 22px 50px -18px rgba(11,22,48,.45),0 0 0 1px var(--hair);opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s}
.s8-scene[data-step="3"] .s8-wp,.s8-scene[data-step="4"] .s8-wp{opacity:1;transform:none}
.s8-wph{display:flex;align-items:center;gap:8px;padding:10px 12px;background:#1D2327;color:#fff;font-size:13px;font-weight:600}
.s8-wph .wl{width:20px;height:20px;border-radius:50%;background:#fff;color:#1D2327;display:grid;place-items:center;font:700 11px/1 Georgia,serif}
.s8-wpr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;background:var(--blue-wash)}
.s8-wpr b{display:block;font-size:13px;color:var(--ink)}
.s8-wpr small{font-size:11px;color:var(--muted)}
.s8-act{display:grid;flex:none;font-size:12px;font-weight:600}
.s8-act em{grid-area:1/1;font-style:normal;padding:6px 11px;border-radius:999px;text-align:center}
.s8-act em:first-child{background:var(--blue);color:#fff}
.s8-act em:last-child{background:var(--mint-wash);color:var(--mint);opacity:0}
.s8-scene[data-step="4"] .s8-act em:last-child{opacity:1}
.s8-wpc{display:flex;flex-direction:column;gap:6px;padding:12px;opacity:.35;transition:opacity .3s}
.s8-scene[data-step="4"] .s8-wpc{opacity:1}
.s8-wpc small{font-size:11px;color:var(--muted)}
.s8-code{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:8px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair)}
.s8-code .tw{font:500 12.5px/1 ui-monospace,"SFMono-Regular",Consolas,monospace}
.s8-con{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--mint);opacity:0}
.s8-con i,.s8-ok i,.s8-wait .c i{position:relative;width:20px;height:20px;border-radius:50%;background:var(--mint-wash);flex:none}

.s8-forms{position:absolute;inset:36px 0 0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:8px;padding:16px;background:rgba(255,255,255,.9);opacity:0;pointer-events:none;transition:opacity .35s}
.s8-scene[data-step="5"] .s8-forms{opacity:1}
.s8-forms span{padding:8px 13px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--hair),0 8px 18px -12px rgba(11,22,48,.4);font-size:12.5px;font-weight:600;color:var(--ink2)}
.s8-forms span:last-child{background:var(--blue-wash);color:var(--blue);box-shadow:none}

.s8-link{position:relative;display:grid;place-items:center}
.s8-line{position:absolute;left:-8px;right:-8px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:repeating-linear-gradient(90deg,#CFCCC4 0 8px,transparent 8px 16px)}
.s8-line i{position:absolute;inset:0;border-radius:4px;background:repeating-linear-gradient(90deg,var(--blue) 0 14px,#9DB8FF 14px 28px);background-size:28px 100%;opacity:0}
.s8-scene[data-step="5"] .s8-line i,.s8-scene[data-step="6"] .s8-line i{opacity:1;animation:s8flow .7s linear infinite}
.s8-state{position:relative;z-index:1;display:grid;transform:translateY(-34px)}
.s8-state em{grid-area:1/1;font-style:normal;font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap;text-align:center;transition:opacity .3s}
.s8-state .off{background:#fff;color:var(--muted);box-shadow:0 0 0 1px var(--hair)}
.s8-state .on{background:var(--mint-wash);color:var(--mint);opacity:0}
.s8-scene[data-step="5"] .s8-state .on,.s8-scene[data-step="6"] .s8-state .on{opacity:1}
.s8-scene[data-step="5"] .s8-state .off,.s8-scene[data-step="6"] .s8-state .off{opacity:0}
.s8-pkt{position:absolute;top:50%;left:50%;z-index:2;opacity:0;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none}
.s8-pkt-zip{padding:7px 10px;border-radius:8px;background:var(--blue);color:#fff;font:800 11px/1 var(--f);box-shadow:0 8px 18px -8px rgba(43,99,246,.8)}
.s8-pkt-code{padding:7px 10px;border-radius:8px;background:var(--ink);color:#fff;font:600 11px/1 ui-monospace,Consolas,monospace;box-shadow:0 8px 18px -8px rgba(11,22,48,.8)}
.s8-pkt-enq{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;box-shadow:0 14px 30px -12px rgba(11,22,48,.5),0 0 0 1px var(--hair)}
.s8-pkt-enq b{font-size:10.5px;color:var(--blue)}

/* the app side looks like the app: menu on the warm canvas, one white surface beside it */
.s8-app{display:grid;grid-template-columns:50px minmax(0,1fr);background:var(--canvas);box-shadow:var(--sh2),0 0 0 1px var(--hair2)}
.s8-side{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 0 12px 6px}
.s8-side svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.s8-side .lg{width:26px;height:26px;margin-bottom:7px}
.s8-side .nw{width:30px;height:30px;margin-bottom:7px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:0 6px 14px -6px rgba(43,99,246,.8)}
.s8-side .nw svg{width:15px;height:15px;stroke-width:2.4}
.s8-side i{width:34px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--muted);transition:background .3s,color .3s,box-shadow .3s}
.s8-side i svg{width:17px;height:17px}
.s8-scene[data-step="2"] .n-set,.s8-scene[data-step="3"] .n-set,.s8-scene[data-step="4"] .n-set,.s8-scene[data-step="5"] .n-enq,.s8-scene[data-step="6"] .n-enq{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(11,22,48,.08),0 0 0 1px var(--hair2)}
.s8-main{position:relative;overflow:hidden;margin:8px 8px 8px 4px;border-radius:12px;background:#fff;box-shadow:var(--sh1),0 0 0 1px var(--hair2)}
.s8-a{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;padding:18px;opacity:0;transform:translateX(16px);transition:opacity .4s,transform .4s}
.s8-scene[data-step="1"] .s8-a1,.s8-scene[data-step="2"] .s8-a2,.s8-scene[data-step="3"] .s8-a2,.s8-scene[data-step="4"] .s8-a2,.s8-scene[data-step="5"] .s8-a3,.s8-scene[data-step="6"] .s8-a3{opacity:1;transform:none}
.s8-h{font:700 17px/1.2 var(--f);color:var(--ink)}
.s8-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:38px;padding:0 16px;border-radius:999px;background:var(--blue);color:#fff;font-size:13px;font-weight:600}
.s8-btn i{width:22px;height:22px;margin-right:-8px;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.s8-btn svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.s8-btn.sm{height:30px;padding:0 12px;font-size:12px}
.s8-ok{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--mint);opacity:0}
.s8-card{display:flex;flex-direction:column;gap:12px;padding:14px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--hair)}
.s8-card>small{font-size:11.5px;font-weight:600;color:var(--muted)}
.s8-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;font-size:13px;color:var(--ink)}
.s8-n{width:22px;height:22px;border-radius:50%;background:var(--stone);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted)}
.s8-chip{padding:6px 8px;border-radius:7px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);font:500 11.5px/1 ui-monospace,Consolas,monospace;color:var(--ink);transition:box-shadow .3s,background .3s}
.s8-scene[data-step="4"] .s8-chip{background:var(--blue-wash);box-shadow:inset 0 0 0 2px var(--blue)}
.s8-wait{display:grid;font-size:12.5px;font-weight:600}
.s8-wait em{grid-area:1/1;display:inline-flex;align-items:center;gap:8px;font-style:normal}
.s8-wait .w{color:var(--muted)}
.s8-wait .w::before{content:"";width:8px;height:8px;border-radius:50%;background:#F0B54A;animation:s8blink 1.2s ease-in-out infinite}
.s8-wait .c{color:var(--mint);opacity:0}
.s8-lh{display:flex;justify-content:space-between;align-items:baseline}
.s8-lh span{font-size:12px;color:var(--muted)}
.s8-er{display:grid;grid-template-columns:7px minmax(0,1fr) auto;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;box-shadow:inset 0 -1px 0 var(--hair2)}
.s8-er>i{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.s8-er b{display:block;font-size:13px;color:var(--ink)}
.s8-er small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s8-er em{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
.s8-new{background:var(--blue-wash);box-shadow:none}
.s8-new em{color:var(--blue);font-weight:700}
.s8-scene[data-step="5"] .s8-new{display:none}
.s8-inv{align-self:flex-start;margin-top:4px}
.s8-scene[data-step="5"] .s8-inv{opacity:0}

/* what each step plays (the .go class restarts them each time a step opens) */
.s8-scene.go[data-step="1"] .s8-a1 .tw{animation:s8type 1s .35s steps(var(--n)) forwards}
.s8-scene.go[data-step="1"] .s8-a1 .tw.t2{animation-delay:1.45s}
.s8-scene.go[data-step="1"] .s8-btn{animation:s8press .3s 2.55s}
.s8-scene.go[data-step="1"] .s8-ok{animation:s8in .35s 2.85s forwards}
.s8-scene.go[data-step="2"] .s8-dl{animation:s8press .3s .2s,s8ring 1s .2s}
.s8-scene.go[data-step="2"] .s8-pkt-zip{animation:s8rtl 1s .45s ease-in-out both}
.s8-scene.go[data-step="2"] .s8-zip{animation:s8up .4s 1.35s forwards}
.s8-scene.go[data-step="3"] .s8-act em:last-child{animation:s8in .3s 1.3s forwards}
.s8-scene.go[data-step="4"] .s8-pkt-code{animation:s8rtl 1s .15s ease-in-out both}
.s8-scene.go[data-step="4"] .s8-code .tw{animation:s8type .3s 1.1s steps(var(--n)) forwards}
.s8-scene.go[data-step="4"] .s8-con{animation:s8in .3s 1.55s forwards}
.s8-scene.go[data-step="4"] .s8-line i{animation:s8in .5s 1.7s forwards,s8flow .7s linear infinite}
.s8-scene.go[data-step="4"] .s8-state .on,.s8-scene.go[data-step="4"] .s8-wait .c{animation:s8in .3s 1.7s forwards}
.s8-scene.go[data-step="4"] .s8-state .off,.s8-scene.go[data-step="4"] .s8-wait .w{animation:s8out .3s 1.7s forwards}
.s8-scene.go[data-step="5"] .s8-forms span{animation:s8chip .45s both}
.s8-scene.go[data-step="5"] .s8-forms span:nth-child(2){animation-delay:.08s}.s8-scene.go[data-step="5"] .s8-forms span:nth-child(3){animation-delay:.16s}
.s8-scene.go[data-step="5"] .s8-forms span:nth-child(4){animation-delay:.24s}.s8-scene.go[data-step="5"] .s8-forms span:nth-child(5){animation-delay:.32s}
.s8-scene.go[data-step="5"] .s8-forms span:nth-child(6){animation-delay:.4s}.s8-scene.go[data-step="5"] .s8-forms span:nth-child(7){animation-delay:.48s}
.s8-scene.go[data-step="5"] .s8-forms span:nth-child(8){animation-delay:.6s}
.s8-scene.go[data-step="6"] .s8-site .tw{animation:s8type .8s .3s steps(var(--n)) forwards}
.s8-scene.go[data-step="6"] .s8-site .tw.t2{animation-delay:1.15s}
.s8-scene.go[data-step="6"] .s8-site .tw.t3{animation-delay:1.9s}
.s8-scene.go[data-step="6"] .s8-send{animation:s8press .3s 2.8s}
.s8-scene.go[data-step="6"] .s8-pkt-enq{animation:s8ltr 1.1s 3s ease-in-out both}
.s8-scene.go[data-step="6"] .s8-new{animation:s8row .5s 4s both}
.s8-scene.go[data-step="6"] .s8-inv{animation:s8in .3s 4.35s both,s8ring 1.2s 4.6s 2}
@keyframes s8type{to{clip-path:inset(0 0 0 0)}}
@keyframes s8in{to{opacity:1}}
@keyframes s8out{to{opacity:0}}
@keyframes s8up{to{opacity:1;transform:none}}
@keyframes s8press{50%{transform:scale(.95);filter:brightness(.9)}}
@keyframes s8ring{0%{box-shadow:0 0 0 0 rgba(43,99,246,.4)}100%{box-shadow:0 0 0 12px rgba(43,99,246,0)}}
@keyframes s8flow{to{background-position:28px 0}}
@keyframes s8blink{50%{opacity:.3}}
@keyframes s8chip{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.06);background:var(--blue-wash);color:var(--blue)}100%{opacity:1;transform:none}}
@keyframes s8row{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes s8rtl{0%{opacity:0;left:115%;top:50%}15%{opacity:1}50%{top:30%}85%{opacity:1}100%{opacity:0;left:-15%;top:50%}}
@keyframes s8ltr{0%{opacity:0;left:-15%;top:50%}15%{opacity:1}50%{top:30%}85%{opacity:1}100%{opacity:0;left:115%;top:50%}}
@keyframes s8btt{0%{opacity:0;top:115%}15%{opacity:1}85%{opacity:1}100%{opacity:0;top:-15%}}
@keyframes s8ttb{0%{opacity:0;top:-15%}15%{opacity:1}85%{opacity:1}100%{opacity:0;top:115%}}
@keyframes s8flowv{to{background-position:0 28px}}

.s8-cap{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 6px 2px}
.s8-cap>div:first-child{min-width:0}
.s8-of{font-size:13px;font-weight:600;color:var(--blue)}
.s8-cap h3{margin:4px 0;font:700 22px/1.25 var(--f)}
.s8-cap p{margin:0;max-width:40em;font-size:16px;line-height:1.55;color:var(--ink2)}
.s8-ctl{display:flex;gap:8px;flex:none}
.s8-ctl button{width:44px;height:44px;border:0;border-radius:50%;background:var(--canvas);box-shadow:0 0 0 1px var(--hair);cursor:pointer;display:grid;place-items:center;transition:background .2s}
.s8-ctl button:hover{background:var(--stone)}
.s8-ctl svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.s8-play i{width:10px;height:12px;border-left:3px solid var(--ink);border-right:3px solid var(--ink)}
.s8-play[data-playing="0"] i{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--ink);margin-left:3px}

@media (max-width:860px){
  .s8-box{padding:18px 14px 16px;border-radius:22px}
  .s8-steps{padding-bottom:18px}
  .s8-steps .lb{display:none}
  .s8-steps .nd{width:36px;height:36px;font-size:14px}
  .s8-track{top:18px}
  .s8-scene{grid-template-columns:minmax(0,1fr);grid-template-rows:300px 70px 300px;height:auto;padding:12px}
  .s8-line{left:50%;right:auto;top:-8px;bottom:-8px;width:4px;height:auto;margin:0 0 0 -2px;background:repeating-linear-gradient(180deg,#CFCCC4 0 8px,transparent 8px 16px)}
  .s8-line i{background:repeating-linear-gradient(180deg,var(--blue) 0 14px,#9DB8FF 14px 28px);background-size:100% 28px}
  .s8-scene[data-step="5"] .s8-line i,.s8-scene[data-step="6"] .s8-line i{animation-name:s8flowv}
  .s8-scene.go[data-step="4"] .s8-line i{animation:s8in .5s 1.7s forwards,s8flowv .7s linear infinite}
  .s8-state{transform:translateX(64px)}
  .s8-scene.go[data-step="2"] .s8-pkt-zip,.s8-scene.go[data-step="4"] .s8-pkt-code{animation-name:s8btt}
  .s8-scene.go[data-step="6"] .s8-pkt-enq{animation-name:s8ttb}
  .s8-a{padding:14px;gap:9px}
  .s8-a .tw{font-size:12.5px}
  .s8-card{padding:12px;gap:10px}
  .s8-row{grid-template-columns:22px minmax(0,1fr);row-gap:7px}
  .s8-row>:last-child{grid-column:2;justify-self:start}
  .s8-cap{flex-direction:column;align-items:stretch;gap:14px;padding-top:18px}
  .s8-cap h3{font-size:19px}
  .s8-cap p{font-size:15px}
  .s8-ctl{justify-content:flex-end}
}
/* hero send layer (24 Oct 2026): an invoice going out. A WhatsApp message, then an email, glides out from behind the
   invoice into the empty space beside a line of the headline, lands with a short note, and fades. site.js measures
   the headline so nothing ever crosses the words; nothing sits above the headline, and reduced motion shows none of it. */
.h9-copy{position:relative}
.h9-copy>:not(.h9-send),.h9-vis{position:relative;z-index:1}
.h9-send{position:absolute;inset:-48px -44px -40px -60px;z-index:0;pointer-events:none;overflow:hidden}
.h9-routes{position:absolute;inset:0;width:100%;height:100%}
.h9-routes path{fill:none;stroke-linecap:round;stroke-width:2.6;opacity:0}
.h9-routes .wa{stroke:#7FD3A2}
.h9-routes .em{stroke:#9DB8FF}
.h9-tok{position:absolute;left:0;top:0;display:flex;align-items:center;gap:12px;opacity:0;will-change:transform,opacity}
.h9-tok i{width:48px;height:48px;margin:-24px 0 0 -24px;flex:none;border-radius:50%;display:grid;place-items:center}
.h9-tok svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.h9-tok.wa i{background:#E2F6E9;color:#159947;box-shadow:0 14px 28px -14px rgba(21,153,71,.7)}
.h9-tok.wa .hs{fill:currentColor;stroke:none}
.h9-tok.em i{background:var(--blue-wash);color:var(--blue);box-shadow:0 14px 28px -14px rgba(43,99,246,.7)}
.h9-tok b{display:flex;align-items:center;gap:7px;margin-top:-24px;font:600 14px/1 var(--f);color:var(--ink2);white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .35s,transform .35s}
.h9-tok b::before{content:"";width:9px;height:5px;margin-top:-3px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg)}
.h9-tok.land i{animation:h9land .45s cubic-bezier(.3,1.6,.5,1)}
.h9-tok.land b{opacity:1;transform:none}
.h9-tok.bare b{display:none}
@keyframes h9land{40%{transform:scale(1.14)}100%{transform:none}}
@media (max-width:760px){
  .h9-grid{position:relative}
  .h9-send{inset:-18px -24px auto -24px;height:420px}
  .h9-tok i{width:42px;height:42px;margin:-21px 0 0 -21px}
  .h9-tok svg{width:20px;height:20px}
  .h9-tok b{margin-top:-21px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.h9-send{display:none}}

/* ===== tour v10 (24 Oct 2026): one living scene, WhizInvoice on the left, the other person's phone on the right,
   the line between. It shares the setup scene's stepper, chrome and motion, so the two read as one family. ===== */
.f9 .hd{margin-bottom:44px}
.f9-scene{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 112px 236px;height:452px;padding:22px;border-radius:22px;background:var(--canvas)}
.f9-scene>*{min-width:0}
.f9-app{display:grid;grid-template-columns:50px minmax(0,1fr);border-radius:16px;background:var(--canvas);box-shadow:var(--sh2);overflow:hidden}
.f9-scene[data-step="1"] .n-quo,.f9-scene[data-step="2"] .n-inv,.f9-scene[data-step="3"] .n-inv,.f9-scene[data-step="4"] .n-inv,.f9-scene[data-step="5"] .n-cal,.f9-scene[data-step="6"] .n-rep{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(11,22,48,.1)}
.f9-main{position:relative;overflow:hidden;margin:8px 8px 8px 4px;border-radius:12px;background:#fff;box-shadow:var(--sh1)}
.f9-a{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;padding:18px 20px;opacity:0;transform:translateX(16px);transition:opacity .4s,transform .4s}
.f9-scene[data-step="1"] .f9-a1,.f9-scene[data-step="2"] .f9-a2,.f9-scene[data-step="3"] .f9-a3,.f9-scene[data-step="4"] .f9-a4,.f9-scene[data-step="5"] .f9-a5,.f9-scene[data-step="6"] .f9-a6{opacity:1;transform:none}
.f9-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:3px}
.f9-hd>div{min-width:0}
.f9-hd>div>b{display:block;font:700 17px/1.2 var(--f);color:var(--ink)}
.f9-hd small{display:block;margin-top:3px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f9-amt{flex:none;font:700 20px/1.1 var(--f);letter-spacing:-.02em;color:var(--ink)}
.f9-st{display:grid;flex:none;font-size:12px;font-weight:600}
.f9-st em{grid-area:1/1;font-style:normal;padding:5px 11px;border-radius:999px;text-align:center;white-space:nowrap}
.f9-st em+em{opacity:0}
.f9-st .sent{background:var(--stone);color:var(--ink2)}
.f9-st .op{background:var(--blue-wash);color:var(--blue-ink)}
.f9-st .ok{background:var(--mint-wash);color:var(--mint)}
.f9-st .late{background:var(--coral-wash);color:var(--coral)}
.f9-hist i,.f9-toast i{position:relative;width:20px;height:20px;flex:none;border-radius:50%;background:var(--mint-wash)}
.f9-hist i::after,.f9-toast i::after{content:"";position:absolute;left:6px;top:6px;width:7px;height:4px;border-left:2px solid var(--mint);border-bottom:2px solid var(--mint);transform:rotate(-45deg)}

/* 1 quote */
.f9-opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:var(--canvas);font-size:13.5px;color:var(--ink2)}
.f9-opt b{color:var(--ink);font-weight:700}
.f9-sig{display:flex;align-items:center;gap:12px;margin-top:auto;padding:10px 14px;border-radius:12px;background:var(--canvas);opacity:0;transform:translateY(8px)}
.f9-sig svg{width:118px;height:30px;flex:none}
.f9-sig span{font-size:12px;color:var(--muted)}
.f9-sig path,.f9-sign path{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.f9-sign path{stroke-dasharray:300;stroke-dashoffset:300}

/* 2 send */
.f9-btns{display:flex;flex-wrap:wrap;gap:10px}
.f9-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;color:#fff}
.f9-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.f9-emb{background:var(--blue)}
.f9-wa{background:#1FA855}
.f9-btn.sm{height:30px;padding:0 13px;font-size:12px;background:var(--blue)}
.f9-lbl{margin-top:6px;font-size:11.5px;font-weight:600;color:var(--muted)}
.f9-hist{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:var(--canvas);font-size:12.5px;color:var(--ink);opacity:0}
.f9-hist span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f9-hist em{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}

/* 3 track */
.f9-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;box-shadow:inset 0 -1px 0 var(--hair2)}
.f9-row>div{min-width:0}
.f9-row b{display:block;font-size:13px;color:var(--ink)}
.f9-row small{display:block;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f9-row .rm{color:#B5730E;font-weight:600;opacity:0}

/* 4 get paid */
.f9-due{position:relative;padding:16px 18px;border-radius:14px;background:var(--canvas)}
.f9-due small{display:block;font-size:11.5px;color:var(--muted)}
.f9-due b{display:block;margin-top:4px;font:700 30px/1.1 var(--f);letter-spacing:-.03em;color:var(--ink)}
.f9-stamp{position:absolute;right:24px;top:50%;margin-top:-19px;font:800 24px/1 var(--f);letter-spacing:.14em;color:var(--mint);padding:6px 8px 4px 12px;border:3px solid currentColor;border-radius:6px;transform:rotate(-9deg);opacity:0;mix-blend-mode:multiply}
.f9-in{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding:12px 14px;border-radius:12px;background:var(--mint-wash)}
.f9-in small{font-size:12px;color:var(--ink2)}
.f9-in b{display:grid;font:700 18px/1 var(--f);color:var(--mint);font-variant-numeric:tabular-nums}
.f9-in b span{grid-area:1/1;text-align:right}
.f9-in .b{opacity:0}

/* 5 jobs */
.f9-team{display:flex;padding-left:6px}
.f9-team i{width:28px;height:28px;margin-left:-3px;border-radius:50%;display:grid;place-items:center;font:700 10.5px/1 var(--f);font-style:normal;box-shadow:0 0 0 2px #fff}
.f9-team .d{background:var(--blue-wash);color:var(--blue-ink)}
.f9-team .a{background:var(--gold-wash);color:#9A5F05}
.f9-cal{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);gap:6px}
.f9-cal .dh{font-size:11px;font-weight:600;color:var(--muted);text-align:center}
.f9-cal .col{position:relative;border-radius:10px;background:var(--canvas)}
.f9-cal .v{position:absolute;left:4px;right:4px;top:var(--t);height:var(--h);padding:6px 7px;border-radius:8px;font-size:10.5px;line-height:1.3;color:var(--ink2);overflow:hidden}
.f9-cal .v b{display:block;font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f9-cal .v.d{background:var(--blue-wash)}
.f9-cal .v.a{background:var(--gold-wash)}
.f9-cal .v.f9-new{background:var(--blue);color:rgba(255,255,255,.86);box-shadow:0 10px 20px -10px rgba(43,99,246,.8)}
.f9-cal .v.f9-new b{color:#fff}
.f9-toast{position:absolute;left:20px;right:20px;bottom:16px;display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:12px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;opacity:0;transform:translateY(10px)}

/* 6 reports */
.f9-bars{flex:1;min-height:0;display:flex;align-items:flex-end;gap:12px;padding:8px 4px 22px}
.f9-bars span{position:relative;flex:1;height:var(--v);border-radius:8px 8px 4px 4px;background:var(--blue-wash);transform-origin:bottom}
.f9-bars .now{background:var(--blue)}
.f9-bars i{position:absolute;left:0;right:0;bottom:-20px;text-align:center;font-style:normal;font-size:11px;color:var(--muted)}
.f9-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.f9-kpi div{min-width:0;padding:10px 12px;border-radius:12px;background:var(--canvas)}
.f9-kpi small{display:block;font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f9-kpi b{display:block;margin-top:2px;font:700 16px/1.2 var(--f);color:var(--ink);font-variant-numeric:tabular-nums}

/* the line between: what travels, and which way */
.f9-link{position:relative;display:grid;place-items:center}
.f9-link .s8-line i{opacity:1;animation:s8flow .7s linear infinite}
.f9-link .s8-pkt{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:#fff;color:var(--ink);font-size:12px;font-weight:600;box-shadow:0 14px 30px -12px rgba(11,22,48,.45),0 2px 6px rgba(11,22,48,.06)}
.f9-link .s8-pkt b{font-size:10.5px;color:var(--blue)}
.f9-link .s8-pkt.wa{flex-direction:row;align-items:center;gap:7px;background:#1FA855;color:#fff;box-shadow:0 12px 26px -10px rgba(31,168,85,.7)}
.f9-link .s8-pkt.wa svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.f9-link .s8-pkt.pay{background:var(--mint);color:#fff;font-size:13px;font-weight:700;box-shadow:0 12px 26px -10px rgba(14,159,110,.7)}

/* the other person's phone */
.f9-side{display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0}
.f9-who{display:grid;font-size:12.5px;font-weight:600;color:var(--ink2)}
.f9-who em{grid-area:1/1;font-style:normal;text-align:center;white-space:nowrap;opacity:0;transition:opacity .3s}
.f9-scene[data-step="1"] .f9-who .c,.f9-scene[data-step="2"] .f9-who .c,.f9-scene[data-step="3"] .f9-who .c,.f9-scene[data-step="4"] .f9-who .c,.f9-scene[data-step="5"] .f9-who .t,.f9-scene[data-step="6"] .f9-who .y{opacity:1}
.f9-ph{flex:1;min-height:0;width:196px;padding:7px;border-radius:32px;background:#0B1630;box-shadow:0 0 0 2px #2A3653,0 22px 44px -18px rgba(11,22,48,.6)}
.f9-scr{position:relative;height:100%;border-radius:25px;background:#FAF9F7;overflow:hidden}
.f9-scr::before{content:"";position:absolute;top:8px;left:50%;z-index:3;width:56px;height:16px;margin-left:-28px;border-radius:10px;background:#000}
.f9-p{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;padding:34px 12px 14px;font-size:11.5px;color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.f9-scene[data-step="1"] .f9-p1,.f9-scene[data-step="2"] .f9-p2,.f9-scene[data-step="3"] .f9-p3,.f9-scene[data-step="4"] .f9-p4,.f9-scene[data-step="5"] .f9-p5,.f9-scene[data-step="6"] .f9-p6{opacity:1;transform:none}
.f9-biz{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#0E5E6F}
.f9-logo{width:26px;height:26px;flex:none;border-radius:7px}
.f9-biz .f9-logo{width:20px;height:20px}
.f9-card .f9-logo{width:28px;height:28px}
.f9-pt{font:700 14px/1.25 var(--f);color:var(--ink)}
.f9-ps{font-size:10px;color:var(--muted)}
.f9-big{font:700 24px/1.1 var(--f);letter-spacing:-.03em;color:var(--ink)}
.f9-po,.f9-sign,.f9-bank,.f9-mail,.f9-job,.f9-mini{border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(11,22,48,.07)}
.f9-po{display:flex;justify-content:space-between;gap:6px;padding:9px 10px;font-size:11px;font-weight:600;color:var(--ink2)}
.f9-po em{font-style:normal;color:var(--ink)}
.f9-sign{display:flex;flex-direction:column;gap:1px;padding:7px 10px}
.f9-sign small{font-size:9.5px;color:var(--muted)}
.f9-sign svg{width:100%;height:26px}
.f9-pbtn{display:grid;margin-top:auto}
.f9-pbtn em{grid-area:1/1;display:grid;place-items:center;height:34px;border-radius:999px;font-style:normal;font-size:12px;font-weight:600;color:#fff}
.f9-pbtn .go{background:var(--blue)}
.f9-pbtn .ok{background:var(--mint);opacity:0}
.f9-p2{gap:0;padding:28px 0 0;background:#EFEAE2}
.f9-wah{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#F7F6F3}
.f9-wah i,.f9-mail i{width:26px;height:26px;border-radius:50%;background:#0E5E6F;color:#fff;display:grid;place-items:center;font:700 9px/1 var(--f);font-style:normal;flex:none}
.f9-wah b{display:block;font-size:11.5px}
.f9-wah small{font-size:9.5px;color:var(--mint)}
.f9-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding:12px 9px 16px}
.f9-msg{align-self:flex-start;max-width:94%;padding:8px 9px 5px;border-radius:4px 12px 12px 12px;background:#fff;font-size:10.5px;line-height:1.42;color:var(--ink);box-shadow:0 1px 1px rgba(11,22,48,.08);opacity:0}
.f9-card{display:flex;align-items:center;gap:7px;margin-top:7px;padding:7px;border-radius:8px;background:#F4F2EE}
.f9-card i{width:28px;height:28px;flex:none;border-radius:7px;background:#0E5E6F}
.f9-card b{display:block;font-size:10.5px}
.f9-card small{display:block;font-size:9.5px;color:var(--muted)}
.f9-msg>em{display:block;margin-top:3px;text-align:right;font-style:normal;font-size:9px;color:var(--muted)}
.f9-mail{display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:8px;padding:8px}
.f9-mail i.g{background:var(--gold-wash);color:#9A5F05}
.f9-mail i.m{background:var(--stone);color:var(--ink2)}
.f9-mail span{min-width:0}
.f9-mail b{display:block;font-size:10.5px}
.f9-mail small{display:block;font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f9-mail em{align-self:start;font-style:normal;font-size:9px;color:var(--muted)}
.f9-mail.f9-mnew{background:var(--blue-wash);box-shadow:none;opacity:0}
.f9-p4 .f9-pbtn{margin-top:4px}
.f9-via{margin-top:-2px;font-size:9.5px;color:var(--muted);text-align:center}
.f9-bank{display:flex;flex-direction:column;gap:2px;padding:8px 10px;font-size:10.5px}
.f9-bank small{font-size:9.5px;color:var(--muted)}
.f9-paid{display:grid;place-items:center;height:30px;border-radius:999px;background:var(--stone);font-size:11.5px;font-weight:600;color:var(--ink)}
.f9-job{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:6px;padding:8px}
.f9-job em{font-style:normal;font-size:10.5px;font-weight:700;color:var(--blue-ink)}
.f9-job span{min-width:0}
.f9-job b{display:block;font-size:10.5px}
.f9-job small{display:block;font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f9-job.f9-jnew{background:var(--blue-wash);box-shadow:none;opacity:0}
.f9-mini{display:flex;justify-content:space-between;gap:6px;padding:8px 10px;font-size:10.5px;color:var(--ink2)}
.f9-mini b{color:var(--ink)}
.f9-mini.late b{color:var(--coral)}

/* what each step plays (the .go class restarts them each time a step opens) */
.f9-scene.go[data-step="1"] .f9-p1 .f9-pick{animation:f9pick .35s .5s forwards}
.f9-scene.go[data-step="1"] .f9-p1 .f9-pick em{animation:f9white .35s .5s forwards}
.f9-scene.go[data-step="1"] .f9-sign path{animation:f9sign 1.2s 1.1s ease-in-out forwards}
.f9-scene.go[data-step="1"] .f9-p1 .go{animation:s8press .3s 2.45s}
.f9-scene.go[data-step="1"] .f9-p1 .ok{animation:s8in .3s 2.75s forwards}
.f9-scene.go[data-step="1"] .f9-k1{animation:s8rtl 1s 2.85s ease-in-out both}
.f9-scene.go[data-step="1"] .f9-a1 .sent{animation:s8out .3s 3.85s forwards}
.f9-scene.go[data-step="1"] .f9-a1 .ok{animation:s8in .3s 3.85s forwards}
.f9-scene.go[data-step="1"] .f9-a1 .f9-pick{animation:f9mint .4s 3.85s forwards}
.f9-scene.go[data-step="1"] .f9-sig{animation:s8up .4s 4.1s forwards}
.f9-scene.go[data-step="2"] .f9-wa{animation:s8press .3s .35s,f9ring 1s .35s}
.f9-scene.go[data-step="2"] .f9-k2{animation:s8ltr 1s .7s ease-in-out both}
.f9-scene.go[data-step="2"] .f9-a2 .f9-h1{animation:s8row .4s .75s both}
.f9-scene.go[data-step="2"] .f9-msg{animation:s8row .45s 1.75s both}
.f9-scene.go[data-step="2"] .f9-card{animation:s8press .3s 3s}
.f9-scene.go[data-step="2"] .f9-a2 .f9-h2{animation:s8row .4s 3.4s both}
.f9-scene.go[data-step="3"] .f9-a3 .rm{animation:s8in .3s .35s forwards}
.f9-scene.go[data-step="3"] .f9-k3{animation:s8ltr 1s .5s ease-in-out both}
.f9-scene.go[data-step="3"] .f9-mnew{animation:s8row .45s 1.5s both,s8press .3s 2.7s}
.f9-scene.go[data-step="3"] .f9-k3b{animation:s8rtl 1s 2.9s ease-in-out both}
.f9-scene.go[data-step="3"] .f9-a3 .late{animation:s8out .3s 3.9s forwards}
.f9-scene.go[data-step="3"] .f9-a3 .f9-row .op{animation:s8in .3s 3.9s forwards}
.f9-scene.go[data-step="4"] .f9-p4 .go{animation:s8press .3s .8s}
.f9-scene.go[data-step="4"] .f9-p4 .ok{animation:s8in .3s 1.1s forwards}
.f9-scene.go[data-step="4"] .f9-k4{animation:s8rtl 1s 1.3s ease-in-out both}
.f9-scene.go[data-step="4"] .f9-a4 .op{animation:s8out .3s 2.3s forwards}
.f9-scene.go[data-step="4"] .f9-a4 .ok{animation:s8in .3s 2.3s forwards}
.f9-scene.go[data-step="4"] .f9-stamp{animation:f9stamp .5s 2.3s cubic-bezier(.3,1.5,.5,1) both}
.f9-scene.go[data-step="4"] .f9-h3{animation:s8row .4s 2.6s both}
.f9-scene.go[data-step="4"] .f9-in .a{animation:s8out .3s 2.95s forwards}
.f9-scene.go[data-step="4"] .f9-in .b{animation:s8in .3s 2.95s forwards}
.f9-scene.go[data-step="5"] .f9-new{animation:f9drop .5s .4s cubic-bezier(.2,.9,.25,1.15) both}
.f9-scene.go[data-step="5"] .f9-toast{animation:s8up .4s 1.1s forwards}
.f9-scene.go[data-step="5"] .f9-k5{animation:s8ltr 1s 1.6s ease-in-out both}
.f9-scene.go[data-step="5"] .f9-jnew{animation:s8row .45s 2.6s both}
.f9-scene.go[data-step="6"] .f9-bars span{animation:f9grow .6s cubic-bezier(.2,.8,.2,1) both}
.f9-scene.go[data-step="6"] .f9-bars span:nth-child(2){animation-delay:.08s}.f9-scene.go[data-step="6"] .f9-bars span:nth-child(3){animation-delay:.16s}
.f9-scene.go[data-step="6"] .f9-bars span:nth-child(4){animation-delay:.24s}.f9-scene.go[data-step="6"] .f9-bars span:nth-child(5){animation-delay:.32s}
.f9-scene.go[data-step="6"] .f9-bars span:nth-child(6){animation-delay:.4s}
.f9-scene.go[data-step="6"] .f9-kpi div{animation:s8row .4s .7s both}
.f9-scene.go[data-step="6"] .f9-kpi div+div{animation-delay:.85s}.f9-scene.go[data-step="6"] .f9-kpi div+div+div{animation-delay:1s}
.f9-scene.go[data-step="6"] .f9-dl{animation:s8press .3s 2.2s,s8ring 1s 2.2s}
.f9-scene.go[data-step="6"] .f9-p6 .f9-mini{animation:s8row .4s .5s both}
.f9-scene.go[data-step="6"] .f9-p6 .f9-mini:nth-child(4){animation-delay:.65s}.f9-scene.go[data-step="6"] .f9-p6 .f9-mini:nth-child(5){animation-delay:.8s}
.f9-scene.go[data-step="6"] .f9-p6 .f9-mini:nth-child(6){animation-delay:.95s}
@keyframes f9pick{to{background:var(--blue);color:#fff}}
@keyframes f9white{to{color:#fff}}
@keyframes f9sign{to{stroke-dashoffset:0}}
@keyframes f9mint{to{background:var(--mint-wash);color:var(--ink)}}
@keyframes f9ring{0%{box-shadow:0 0 0 0 rgba(31,168,85,.45)}100%{box-shadow:0 0 0 12px rgba(31,168,85,0)}}
@keyframes f9stamp{from{opacity:0;transform:rotate(-9deg) scale(1.8)}to{opacity:.92;transform:rotate(-9deg) scale(1)}}
@keyframes f9drop{from{opacity:0;transform:translateY(-16px) scale(.94)}to{opacity:1;transform:none}}
@keyframes f9grow{from{transform:scaleY(0)}to{transform:none}}

.f9-caps{display:grid;min-width:0}
.f9-caps>div{grid-area:1/1;min-width:0}
.f9-caps>div[hidden]{display:block;visibility:hidden}
@media (max-width:860px){
  .f9-scene{grid-template-columns:minmax(0,1fr);grid-template-rows:300px 56px auto;height:auto;padding:12px}
  .f9-link .s8-line{top:0;bottom:0}
  .f9-app{grid-template-columns:minmax(0,1fr)}
  .f9-app .s8-side{display:none}
  .f9-main{margin:6px}
  .f9-a{padding:14px;gap:8px}
  .f9-hd>div>b{font-size:15.5px}
  .f9-opt{padding:10px 12px;font-size:12.5px}
  .f9-due b{font-size:26px}
  .f9-cal{gap:4px}
  .f9-cal .v{left:2px;right:2px;padding:5px;font-size:9.5px}
  .f9-cal .v b{font-size:10px}
  .f9-bars{gap:8px}
  .f9-kpi{gap:6px}
  .f9-kpi div{padding:8px 9px}
  .f9-kpi b{font-size:14px}
  .f9-link .s8-line i{animation-name:s8flowv}
  .f9-scene.go[data-step="2"] .f9-k2,.f9-scene.go[data-step="3"] .f9-k3,.f9-scene.go[data-step="5"] .f9-k5{animation-name:s8ttb}
  .f9-scene.go[data-step="1"] .f9-k1,.f9-scene.go[data-step="3"] .f9-k3b,.f9-scene.go[data-step="4"] .f9-k4{animation-name:s8btt}
  .f9-ph{flex:none;width:184px;height:350px}
}
@media (prefers-reduced-motion:reduce){
  .f9 .f9-sig,.f9 .f9-hist,.f9 .f9-row .rm,.f9 .f9-mnew,.f9 .f9-in .b,.f9 .f9-toast,.f9 .f9-jnew,.f9 .f9-st em+em,.f9 .f9-pbtn .ok,.f9 .f9-msg{opacity:1;transform:none}
  .f9 .f9-st em:not(:last-child),.f9 .f9-in .a,.f9 .f9-pbtn .go{opacity:0}
  .f9 .f9-stamp{opacity:.92}
  .f9 .f9-sign path{stroke-dashoffset:0}
  .f9 .f9-p1 .f9-pick{background:var(--blue);color:#fff}
  .f9 .f9-p1 .f9-pick em{color:#fff}
  .f9 .f9-a1 .f9-pick{background:var(--mint-wash)}
  .f9 .s8-pkt{display:none}
}

@media (prefers-reduced-motion:reduce){
  .h9-hl path{stroke-dashoffset:0}
  .s8 .tw{clip-path:none}
  .s8-pkt{display:none}
  .s8-scene[data-step="1"] .s8-ok,.s8-scene[data-step="3"] .s8-act em:last-child,.s8-scene[data-step="4"] .s8-con,
  .s8-scene[data-step="4"] .s8-state .on,.s8-scene[data-step="4"] .s8-wait .c,.s8-scene[data-step="4"] .s8-line i,
  .s8-scene[data-step="2"] .s8-zip{opacity:1;transform:none}
  .s8-scene[data-step="4"] .s8-state .off,.s8-scene[data-step="4"] .s8-wait .w{opacity:0}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;z-index:50}
.skip:focus{left:16px}

/* ===== content pages (industries, countries, features, switch, tools, templates, help, guides, company) =====
   Same language as the home page: warm canvas, white surfaces, one blue accent, no borders, no gradients. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-hero{padding-block:56px 40px}
.pg-hero .wrap{max-width:980px}
.pg-hero h1{font:800 clamp(38px,5.2vw,64px)/1.04 var(--f);letter-spacing:-.045em;margin:12px 0 0;max-width:16em}
.pg-hero .lead{max-width:38em}
.pg-hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.pg-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 14px/1.4 var(--f);color:var(--muted);margin-bottom:26px}
.pg-crumbs a{color:var(--muted);transition:color .15s}.pg-crumbs a:hover{color:var(--blue)}
.pg-crumbs [aria-current]{color:var(--ink2)}
.pg-main{padding-block:24px 40px}
.pg-main .wrap{max-width:1080px}
.pg-block{margin-top:72px;scroll-margin-top:100px}
.pg-block:first-child{margin-top:8px}
.pg-h2{font:700 clamp(28px,3.2vw,40px)/1.12 var(--f);letter-spacing:-.035em;margin:0;max-width:22em}
.pg-intro{font-size:18.5px;line-height:1.6;margin:14px 0 0;max-width:40em}
.pg-ico{width:44px;height:44px;border-radius:14px;display:inline-grid;place-items:center;background:var(--blue-wash);color:var(--blue);flex:none}
.pg-ico svg{width:23px;height:23px}

/* cards */
.pg-cards{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.pg-cards.n4{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-cards.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pg-card{background:var(--card);border-radius:22px;padding:26px 26px 28px;box-shadow:var(--sh1)}
.pg-card h3{font:700 19px/1.3 var(--f);letter-spacing:-.015em;margin:18px 0 0}
.pg-card p{margin:8px 0 0;font-size:16px;line-height:1.6}

/* steps */
.pg-steps{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;counter-reset:s}
.pg-steps li{display:flex;gap:16px;background:var(--card);border-radius:22px;padding:24px;box-shadow:var(--sh1)}
.pg-n{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font:700 15px/36px var(--f);text-align:center;flex:none}
.pg-steps h3{font:700 17.5px/1.3 var(--f);margin:5px 0 0}
.pg-steps p{margin:6px 0 0;font-size:15.5px;line-height:1.55}

/* prose */
.pg-prose{max-width:44em;margin-top:16px}
.pg-prose p{margin:14px 0 0}
.pg-prose a,.pg-faq a,.pg-card a,.pg-note a,.pg-facts a,.pg-callout a,.pg-intro a,.pg-steps a{color:var(--blue);font-weight:600;text-underline-offset:3px}
.pg-prose a:hover,.pg-faq a:hover,.pg-card a:hover,.pg-callout a:hover,.pg-intro a:hover,.pg-steps a:hover{text-decoration:underline}
.pg-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.pg-list li{position:relative;padding-left:30px}
.pg-list li::before{content:"";position:absolute;left:4px;top:.55em;width:11px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}

/* facts */
.pg-facts{margin:28px 0 0;background:var(--card);border-radius:22px;box-shadow:var(--sh1);overflow:hidden}
.pg-facts div{display:grid;grid-template-columns:minmax(160px,.38fr) 1fr;gap:20px;padding:16px 26px;box-shadow:inset 0 -1px 0 var(--hair2)}
.pg-facts div:last-child{box-shadow:none}
.pg-facts dt{font-weight:600;color:var(--muted);font-size:15.5px}
.pg-facts dd{margin:0;color:var(--ink);font-weight:600;font-size:16px}
.pg-note{font-size:14px;color:var(--muted);margin:12px 0 0;max-width:46em}

/* callout */
.pg-callout{display:flex;gap:16px;align-items:flex-start;background:var(--card);border-radius:22px;padding:22px 24px;box-shadow:var(--sh1);max-width:52em}
.pg-callout b{color:var(--ink);font-size:17px}
.pg-callout p{margin:4px 0 0;font-size:16px}

/* compare */
.pg-tablewrap{margin-top:28px;overflow-x:auto;background:var(--card);border-radius:22px;box-shadow:var(--sh1)}
.pg-compare{width:100%;border-collapse:collapse;min-width:560px;font-size:15.5px}
.pg-compare th,.pg-compare td{padding:15px 22px;text-align:left;vertical-align:top;box-shadow:inset 0 -1px 0 var(--hair2)}
.pg-compare thead th{font:700 15px/1.3 var(--f);color:var(--ink);background:var(--stone)}
.pg-compare thead th:nth-child(2){color:var(--blue)}
.pg-compare tbody th{font-weight:600;color:var(--ink2)}
.pg-yes,.pg-no{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.pg-yes{color:#0B7A55}.pg-yes::before{content:"";width:9px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}
.pg-no{color:var(--muted)}.pg-no::before{content:"";width:10px;height:2px;background:currentColor;border-radius:2px}

/* example invoice */
.pg-split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.pg-doc{position:relative;margin:0;background:#fff;border-radius:22px;padding:30px 30px 24px;box-shadow:var(--sh3);font-size:14.5px}
.pg-ex{position:absolute;top:-12px;right:22px;background:var(--gold-wash);color:#8A5A0B;font:700 12px/1 var(--f);letter-spacing:.06em;text-transform:uppercase;padding:7px 11px;border-radius:999px}
.pg-doc header{display:flex;justify-content:space-between;gap:16px;padding-bottom:16px;box-shadow:inset 0 -1px 0 var(--hair)}
.pg-doc header div{display:grid;gap:3px}
.pg-biz{color:var(--ink);font-size:16.5px}
.pg-doc header span{color:var(--muted);font-size:13px}
.pg-kind{text-align:right}.pg-kind b{color:var(--ink);font-size:15px}
.pg-billto{display:grid;gap:2px;margin-top:14px}
.pg-billto span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.pg-billto b{color:var(--ink)}
.pg-doc table{width:100%;border-collapse:collapse;margin-top:16px}
.pg-doc th{font:600 12px/1.2 var(--f);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:0 0 8px}
.pg-doc td{padding:10px 0;box-shadow:inset 0 -1px 0 var(--hair2);color:var(--ink2);vertical-align:top}
.pg-doc td+td,.pg-doc th+th{padding-left:12px}
.pg-doc .r{text-align:right;white-space:nowrap}
.pg-tot{margin:14px 0 0 auto;max-width:280px;display:grid;gap:6px}
.pg-tot div{display:flex;justify-content:space-between;gap:16px}
.pg-tot span{color:var(--muted)}
.pg-tot .grand{margin-top:6px;padding-top:10px;box-shadow:inset 0 1px 0 var(--hair);font-size:17px}
.pg-tot .grand span,.pg-tot .grand b{color:var(--ink);font-weight:700}
.pg-doc footer{margin-top:18px;font-size:13px;color:var(--muted)}

/* downloads */
.pg-downloads{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px;max-width:640px}
.pg-downloads li{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:18px;padding:14px 16px 14px 18px;box-shadow:var(--sh1)}
.pg-downloads li div{display:grid;gap:2px;flex:1}
.pg-downloads b{color:var(--ink)}
.pg-downloads span{font-size:13.5px;color:var(--muted)}
.pg-ext{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--stone);color:var(--ink);font:700 12px/1 var(--f);letter-spacing:.04em;flex:none}
.pg-downloads .b{height:44px;margin:0;width:auto}

/* FAQ */
.pg-faq{padding-block:56px}
.pg-faq-in{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:start}
.pg-faq h2{font:700 clamp(28px,3.2vw,40px)/1.12 var(--f);letter-spacing:-.035em;margin:10px 0 0}
.pg-qa{display:grid;gap:10px}
.pg-qa details{background:var(--card);border-radius:18px;box-shadow:var(--sh1);padding:0 22px}
.pg-qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:19px 0;font:600 17px/1.4 var(--f);color:var(--ink)}
.pg-qa summary::-webkit-details-marker{display:none}
.pg-qa summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform .2s;flex:none}
.pg-qa details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pg-qa details p{margin:0;padding:0 0 20px;font-size:16px}

/* related */
.pg-related{padding-block:24px 40px}
.pg-rel,.pg-hub{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pg-rel a,.pg-hub a{display:grid;gap:6px;height:100%;background:var(--card);border-radius:18px;padding:20px 22px;box-shadow:var(--sh1);transition:box-shadow .2s,transform .2s}
.pg-rel a:hover,.pg-hub a:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.pg-rel b,.pg-hub b{color:var(--ink);font-size:17px}
.pg-rel span,.pg-hub span{font-size:14.5px;color:var(--muted);line-height:1.5}
.pg-hub a{position:relative;padding-right:46px}
.pg-hub i{position:absolute;right:20px;top:20px;font-style:normal;color:var(--blue);transition:transform .2s}
.pg-hub a:hover i{transform:translateX(3px)}
.pg-main .pg-hub+.pg-h2{margin-top:56px}
.pg-main>.wrap>.pg-h2:first-child{margin-top:8px}
.pg-all{margin:18px 0 0}.pg-all a{color:var(--blue);font-weight:600}

/* closing CTA */
.pg-cta{padding-block:40px 96px}
.pg-cta-in{background:var(--navy);border-radius:32px;padding:64px 40px;text-align:center;color:#C9D1E3}
.pg-cta-in h2{color:#fff;font:700 clamp(30px,3.8vw,46px)/1.1 var(--f);letter-spacing:-.04em;margin:0 auto;max-width:18em}
.pg-cta-in p{margin:14px auto 0;max-width:34em;font-size:18px}
.pg-cta-in .ctas{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:30px}
.pg-cta-in .b.sec{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.pg-cta-in .b.sec:hover{background:rgba(255,255,255,.14)}
.pg-cta-in .pg-cta-fine{font-size:14px;color:#8E9AB6;margin-top:16px}

/* articles */
.pg-art-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}
.pg-toc{position:sticky;top:96px;background:var(--card);border-radius:18px;padding:20px 22px;box-shadow:var(--sh1);font-size:14.5px}
.pg-toc b{color:var(--ink);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.pg-toc ol{margin:12px 0 0;padding-left:18px;display:grid;gap:8px}
.pg-toc a{color:var(--ink2)}.pg-toc a:hover{color:var(--blue)}
.pg-art-body .pg-block{margin-top:48px}
.pg-art-body .pg-block:first-child{margin-top:0}
.pg-article .pg-h2{font-size:clamp(26px,2.8vw,34px)}
.pg-article .pg-split{grid-template-columns:1fr;gap:28px}

/* tools wrapper */
.pg-tool{margin-top:8px}

@media (max-width:980px){
  .pg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-split{grid-template-columns:1fr;gap:28px}
  .pg-faq-in{grid-template-columns:1fr;gap:24px}
  .pg-rel,.pg-hub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-art-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .pg-art-body{min-width:0}
  .pg-toc{position:static}
}
@media (max-width:640px){
  .pg-hero{padding-block:36px 24px}
  .pg-hero .ctas .b{width:100%}
  .pg-block{margin-top:52px}
  .pg-cards,.pg-cards.n4,.pg-cards.n2,.pg-rel,.pg-hub{grid-template-columns:1fr}
  .pg-card{padding:22px}
  .pg-facts div{grid-template-columns:1fr;gap:4px;padding:14px 20px}
  /* comparison tables become one card per row on a phone: no sideways scrolling */
  .pg-tablewrap{overflow:visible;background:none;box-shadow:none;border-radius:0}
  .pg-compare{min-width:0;display:block}
  .pg-compare thead{display:none}
  .pg-compare tbody{display:grid;gap:12px}
  .pg-compare tr{display:block;background:var(--card);border-radius:18px;box-shadow:var(--sh1);padding:6px 0}
  .pg-compare tbody th,.pg-compare td{display:block;box-shadow:none;padding:8px 20px}
  .pg-compare tbody th{font-weight:700;color:var(--ink);padding-top:12px}
  .pg-compare td{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;box-shadow:inset 0 1px 0 var(--hair2)}
  .pg-compare td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:14px}
  .pg-compare td:nth-child(2)::before{color:var(--blue)}
  .pg-doc{padding:24px 18px 20px;font-size:13.5px}
  .pg-doc header{flex-direction:column}
  .pg-kind{text-align:left}
  .pg-downloads li{flex-wrap:wrap}
  .pg-downloads .b{width:100%}
  .pg-cta-in{padding:44px 22px;border-radius:24px}
  .pg-cta-in .b{width:100%}
}
@media print{
  .top,.site,.mcta,.pg-cta,.pg-related,.pg-crumbs,.pg-hero .ctas{display:none!important}
}

/* WhizInvoice free tools. Appended to the site CSS by the build. Colours come only from the v6 tokens.
   Every class starts with wt- so nothing collides with the home page (.tool, .steps, .items and so on). */
.wt{position:relative;color:var(--ink2);font-size:16px;line-height:1.55;text-align:left}
.wt [hidden]{display:none!important}
.wt *,.wt *::before,.wt *::after{box-sizing:border-box}
.wt-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wt-offscreen{position:fixed;left:-9999px;top:0;opacity:0}
.wt-noscript{margin:0 0 16px;padding:16px 20px;border-radius:14px;background:var(--gold-wash);color:var(--ink);font-weight:600}

/* ---------- fields ---------- */
.wt fieldset{border:0;margin:0;padding:0;min-width:0;min-inline-size:0}
.wt legend{float:left;width:100%;padding:0;margin:0 0 14px;font:700 18px/1.3 var(--f);letter-spacing:-.01em;color:var(--ink)}
.wt legend+*{clear:both}
.wt-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.wt-f>label,.wt-f .wt-lab{font:600 14px/1.35 var(--f);color:var(--ink)}
.wt-f>label .wt-opt{font-weight:500;color:var(--muted)}
.wt input:not([type]),.wt input[type="text"],.wt input[type="email"],.wt input[type="tel"],.wt input[type="url"],.wt input[type="date"],.wt input[type="number"],.wt select,.wt textarea{
  width:100%;min-width:0;height:48px;padding:0 14px;border:0;border-radius:12px;background:var(--card);color:var(--ink);
  font:500 16px/1.3 var(--f);box-shadow:inset 0 0 0 1px rgba(11,22,48,.16);transition:box-shadow .15s;-webkit-appearance:none;appearance:none}
.wt textarea{height:auto;min-height:48px;padding:12px 14px;line-height:1.45;resize:vertical}
.wt select{padding-right:38px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 14px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.wt input[type="date"]{padding-right:10px}
.wt input::placeholder,.wt textarea::placeholder{color:var(--muted);opacity:1}
.wt input:hover,.wt select:hover,.wt textarea:hover{box-shadow:inset 0 0 0 1px rgba(11,22,48,.28)}
.wt input:focus,.wt select:focus,.wt textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--blue),0 0 0 4px var(--blue-wash)}
.wt [aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--coral)!important}
.wt-help{margin:0;font-size:13.5px;line-height:1.45;color:var(--muted)}
.wt-err{margin:0;padding:10px 14px;border-radius:12px;background:var(--coral-wash);box-shadow:inset 3px 0 0 var(--coral);font-size:14px;font-weight:600;color:var(--ink)}
.wt-cols2,.wt-cols3{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.wt-cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wt-stack{display:grid;gap:14px}
.wt-check{display:flex;align-items:flex-start;gap:10px;font:500 15.5px/1.4 var(--f);color:var(--ink);cursor:pointer}
.wt-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--blue);cursor:pointer}
.wt-checks{display:flex;flex-wrap:wrap;gap:12px 28px}
.wt-unit{position:relative}
.wt-unit input{padding-right:56px}
.wt-unit span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:600;font-size:14px;color:var(--muted);pointer-events:none}

/* segmented choice (radios), like the pricing toggle */
.wt-seg{display:block}
.wt-seg .wt-segs{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(11,22,48,.12)}
.wt-seg input,.wt-chip input,.wt-swatch input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.wt-seg label{display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:999px;font:600 15px/1 var(--f);color:var(--ink2);cursor:pointer;transition:background .15s,color .15s}
.wt-seg label:hover{color:var(--ink)}
.wt-seg input:checked+label{background:var(--ink);color:#fff}
.wt-seg input:focus-visible+label,.wt-chip input:focus-visible+label,.wt-swatch input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.wt-chips{display:block}
.wt-chips .wt-chiplist{display:flex;flex-wrap:wrap;gap:8px}
.wt-chip{position:relative;display:inline-flex}
.wt-chip label{display:flex;flex-direction:column;gap:2px;min-width:92px;padding:11px 16px;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(11,22,48,.14);font:500 13px/1.25 var(--f);color:var(--muted);cursor:pointer;transition:box-shadow .15s,background .15s}
.wt-chip label b{font:700 17px/1.1 var(--f);color:var(--ink);letter-spacing:-.01em}
.wt-chip label:hover{box-shadow:inset 0 0 0 1px rgba(11,22,48,.3)}
.wt-chip input:checked+label{background:var(--blue-wash);box-shadow:inset 0 0 0 2px var(--blue);color:var(--blue-ink)}
.wt-chip input:checked+label b{color:var(--blue-ink)}
.wt-swatches{display:flex;flex-wrap:wrap;gap:8px}
.wt-swatch{position:relative}
.wt-swatch label{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(11,22,48,.14);font:600 14px/1 var(--f);color:var(--ink);cursor:pointer}
.wt-swatch label::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--wt-sw,var(--ink))}
.wt-swatch input:checked+label{box-shadow:inset 0 0 0 2px var(--ink)}
.wt-sw-ink{--wt-sw:var(--ink)}.wt-sw-blue{--wt-sw:var(--blue)}.wt-sw-mint{--wt-sw:var(--mint)}.wt-sw-coral{--wt-sw:var(--coral)}.wt-sw-slate{--wt-sw:var(--ink2)}

/* buttons: the site pills, plus a compact size and a text link */
.wt .b{font-family:var(--f)}
.wt .wt-sm{height:44px;padding:0 18px;font-size:14.5px;gap:8px}
.wt .wt-sm .arr{width:24px;height:24px;margin-right:-10px;font-size:13px}
.wt-link{display:inline;padding:0;border:0;background:none;font:600 14.5px/1.4 var(--f);color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.wt-link:hover{color:var(--blue)}
.wt .b.is-done,.wt-copy.is-done{background:var(--mint-wash);color:var(--ink);box-shadow:inset 0 0 0 1px var(--mint)}

/* ---------- invoice, quote and receipt makers ---------- */
.wt-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;margin:0 0 18px}
.wt-private{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:14.5px;line-height:1.45;color:var(--ink2);max-width:52em}
.wt-private svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wt-private b{color:var(--ink)}
.wt-saved{margin:0;font-size:13.5px;color:var(--ink2)}
.wt-saved.is-warn{padding:6px 12px;border-radius:10px;background:var(--coral-wash);box-shadow:inset 3px 0 0 var(--coral);color:var(--ink);font-weight:600}
.wt-notice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 16px;padding:14px 18px;border-radius:14px;background:var(--blue-wash);color:var(--ink);font-size:15px}
.wt-bar{display:none}
.wt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.wt-form{display:grid;gap:16px;min-width:0;margin:0}
.wt-card{background:var(--card);border-radius:20px;box-shadow:var(--sh1);padding:24px 24px 26px!important}
.wt-card>.wt-f+.wt-f,.wt-card>.wt-f+.wt-cols2,.wt-card>.wt-cols2+.wt-f,.wt-card>.wt-cols2+.wt-cols2,.wt-card>.wt-cols3+.wt-f,.wt-card>.wt-f+.wt-cols3,.wt-card>*+.wt-checks,.wt-card>.wt-checks+*,.wt-card>.wt-cols2+.wt-cols3,.wt-card>.wt-cols3+.wt-cols2,.wt-card>.wt-preset+*,.wt-card>*+.wt-seg,.wt-card>.wt-seg+*{margin-top:16px}
.wt-preset{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:var(--canvas);font-size:13.5px;color:var(--ink2)}
.wt-notax .wt-taxset{display:none!important}
.wt-only-in{display:none!important}
.wt-in .wt-only-in{display:flex!important}
.wt-in.wt-notax .wt-only-in{display:none!important}

.wt-logo{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.wt-logo-box{flex:none;width:112px;height:72px;border-radius:14px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair);display:grid;place-items:center;overflow:hidden}
.wt-logo-box span{font:600 13px/1 var(--f);color:var(--muted)}
.wt-logo-box img{max-width:100%;max-height:100%;object-fit:contain;padding:8px}
.wt-logo-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0}
.wt-logo-acts .wt-help{flex-basis:100%}
.wt-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.wt-file:focus-visible+label{outline:3px solid var(--blue);outline-offset:3px}
.wt-logo-acts label.b{cursor:pointer}

.wt-lines{display:grid;gap:10px}
.wt-line{padding:14px;border-radius:16px;background:var(--canvas);box-shadow:inset 0 0 0 1px var(--hair2)}
.wt-l-top{display:flex;gap:8px;align-items:flex-start}
.wt-l-d{flex:1}
.wt-l-d textarea{min-height:48px;resize:none;overflow:hidden}
.wt-l-x{flex:none;width:44px;height:44px;margin-top:25px;border:0;border-radius:12px;background:transparent;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.wt-l-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.wt-l-x:hover{background:var(--coral-wash);color:var(--coral)}
.wt-l-nums{display:grid;grid-template-columns:84px minmax(0,1fr) minmax(0,1.15fr) minmax(104px,auto);gap:10px;margin-top:10px;align-items:end}
.wt-notax .wt-l-nums{grid-template-columns:84px minmax(0,1fr) minmax(104px,auto)}
.wt-notax .wt-l-t{display:none}
.wt-l-nums .wt-f>label{font-size:13px;font-weight:600;color:var(--ink2)}
.wt-l-a{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:6px;min-height:48px;padding-bottom:12px;text-align:right}
.wt-l-al{font:600 13px/1.35 var(--f);color:var(--ink2)}
.wt-l-a output{font:700 16px/1.2 var(--f);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.wt-add{margin-top:12px}
.wt-add span{font-size:20px;line-height:1}

.wt-checklist{background:var(--card);border-radius:20px;box-shadow:var(--sh1);padding:22px 24px}
.wt-checklist-h{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin:0 0 10px;font:700 17px/1.3 var(--f);color:var(--ink)}
.wt-checklist-h span{font:600 14px/1 var(--f);color:var(--muted)}
.wt-checklist ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}
.wt-checklist li{position:relative;display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink2)}
.wt-checklist li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(11,22,48,.22)}
.wt-checklist li.ok{color:var(--ink)}
.wt-checklist li.ok::before{background:var(--mint);box-shadow:none}
.wt-checklist li.ok::after{content:"";position:absolute;left:5px;top:8px;width:8px;height:4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.wt-checklist .wt-help{margin-top:12px}

.wt-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.wt-confirm{padding:18px 20px;border-radius:16px;background:var(--gold-wash);color:var(--ink)}
.wt-confirm p{margin:0 0 12px;font-size:15px;line-height:1.5}
.wt-row{display:flex;flex-wrap:wrap;gap:10px}
.wt-fine{margin:0;font-size:13.5px;color:var(--ink2)}
.wt-fine .wt-link{font-size:13.5px;color:var(--ink2)}

.wt-view{min-width:0}
.wt-view-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 14px}
.wt-sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;min-width:0}
.wt-sum-l{font:600 14px/1.3 var(--f);color:var(--ink2)}
.wt-sum-v{font:700 26px/1.1 var(--f);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.wt-sum-m{flex-basis:100%;font-size:13.5px;color:var(--ink2)}
.wt-stage{position:relative;overflow:hidden;border-radius:10px}
.wt-stage.is-zoom{overflow-x:auto;-webkit-overflow-scrolling:touch}
.wt-scaler{transform-origin:0 0;width:max-content}
.wt-view-foot{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:baseline;margin-top:14px}
.wt-zoom{display:none}
.wt-hint{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.wt-hint b{color:var(--ink2)}

/* ---------- the document itself (screen preview and print) ---------- */
.wt-sheet{--wt-acc:var(--ink);position:relative;width:794px;min-height:1123px;padding:56px 60px 48px;background:#fff;color:var(--ink);
  border-radius:6px;box-shadow:var(--sh2);font:400 13px/1.5 var(--f);text-align:left;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.wt-sheet.wt-p-letter{width:816px;min-height:1056px}
.wt-a-ink{--wt-acc:var(--ink)}.wt-a-blue{--wt-acc:var(--blue)}.wt-a-mint{--wt-acc:var(--mint)}.wt-a-coral{--wt-acc:var(--coral)}.wt-a-slate{--wt-acc:var(--ink2)}
.wt-ph{color:var(--muted);background:var(--stone);border-radius:4px;padding:0 5px}
.wt-s-band{display:none}
.wt-s-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:26px;box-shadow:inset 0 -1px 0 var(--hair)}
.wt-s-brand{min-width:0;max-width:52%}
.wt-s-logo{display:block;max-width:220px;max-height:78px;object-fit:contain}
.wt-s-biz{display:block;font:700 22px/1.2 var(--f);letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.wt-s-ttl{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.wt-s-title{font:700 30px/1.05 var(--f);letter-spacing:-.03em;color:var(--wt-acc)}
.wt-s-no{font:600 14px/1.3 var(--f);color:var(--ink2);font-variant-numeric:tabular-nums}
.wt-s-paid{display:inline-flex;align-items:center;gap:7px;margin-top:6px;padding:5px 11px 5px 6px;border-radius:999px;background:var(--mint-wash);font:700 12.5px/1 var(--f);color:var(--ink)}
.wt-tick{width:16px;height:16px;border-radius:50%;background:var(--mint);display:inline-grid;place-items:center;flex:none}
.wt-tick::after{content:"";width:7px;height:3.5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
.wt-s-parties{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);gap:24px;padding:24px 0}
.wt-s-party{display:flex;flex-direction:column;min-width:0;color:var(--ink2);overflow-wrap:anywhere}
.wt-s-party b{font:700 14px/1.35 var(--f);color:var(--ink);margin-bottom:2px}
.wt-s-lab{display:block;margin-bottom:6px;font:700 10.5px/1.2 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.wt-s-meta{margin:0;display:grid;gap:7px;align-content:start}
.wt-s-meta div{display:flex;justify-content:space-between;gap:12px}
.wt-s-meta dt{color:var(--muted)}
.wt-s-meta dd{margin:0;font-weight:600;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.wt-s-due{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:18px 22px;border-radius:12px;background:var(--stone)}
.wt-s-due-l{font:600 13px/1.3 var(--f);color:var(--ink2)}
.wt-s-due-v{font:700 26px/1.1 var(--f);letter-spacing:-.02em;color:var(--wt-acc);font-variant-numeric:tabular-nums}
.wt-s-due-w{margin-left:auto;font:600 13px/1.3 var(--f);color:var(--ink2)}
.wt-s-items{width:100%;margin-top:24px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.wt-s-items th{padding:0 0 10px 12px;font:700 10.5px/1.2 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:1.5px solid var(--wt-acc)}
.wt-s-items th:first-child,.wt-s-items td:first-child{padding-left:0}
.wt-s-items td{padding:12px 0 12px 12px;vertical-align:top;border-bottom:1px solid var(--hair)}
.wt-s-items .n{text-align:right;white-space:nowrap}
.wt-s-items th:first-child{width:52%}
.wt-s-d1{display:block;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.wt-s-d2{display:block;margin-top:2px;color:var(--muted);overflow-wrap:anywhere}
.wt-s-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:36px;margin-top:22px;align-items:start}
.wt-s-info{display:grid;gap:18px;min-width:0;color:var(--ink2);overflow-wrap:anywhere}
.wt-s-info p{margin:0}
.wt-s-tot{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.wt-s-tot th{padding:6px 12px 6px 0;font-weight:500;color:var(--ink2);text-align:left}
.wt-s-tot td{padding:6px 0;text-align:right;white-space:nowrap;color:var(--ink)}
.wt-s-tot tr.tot th,.wt-s-tot tr.tot td{padding-top:12px;font-weight:700;font-size:15px;color:var(--ink);border-top:1.5px solid var(--ink)}
.wt-s-tot tr.inc th,.wt-s-tot tr.inc td{font-size:12px;color:var(--muted);padding-top:2px}
.wt-s-tot tr.due th,.wt-s-tot tr.due td{padding-top:12px;font-weight:700;color:var(--ink)}
.wt-s-tot tr.due td{font-size:17px;color:var(--wt-acc)}
.wt-s-accept{margin-top:34px;padding-top:18px;box-shadow:inset 0 1px 0 var(--hair)}
.wt-s-sign{display:grid;grid-template-columns:1.2fr 1.2fr .8fr;gap:28px;margin-top:30px}
.wt-s-sign i{display:block;height:1px;background:var(--ink2)}
.wt-s-sign span{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.wt-s-foot{margin-top:40px;padding-top:14px;box-shadow:inset 0 1px 0 var(--hair);font-size:11px;color:var(--muted);text-align:center;overflow-wrap:anywhere}
/* banded: an accent strip and a warm grey header */
.wt-d-banded .wt-s-band{display:block;height:8px;margin:-56px -60px 0;border-radius:6px 6px 0 0;background:var(--wt-acc)}
.wt-d-banded .wt-s-head{margin:0 -60px;padding:30px 60px 26px;background:var(--stone);box-shadow:none}
.wt-d-banded .wt-s-due{background:transparent;box-shadow:inset 0 0 0 1.5px var(--wt-acc)}
/* minimal: type only */
.wt-d-minimal .wt-s-title{color:var(--ink);font-weight:600;font-size:26px}
.wt-d-minimal .wt-s-head{box-shadow:none;padding-bottom:6px}
.wt-d-minimal .wt-s-due{padding:14px 0;border-radius:0;background:transparent;box-shadow:inset 0 1px 0 var(--hair),inset 0 -1px 0 var(--hair)}
.wt-d-minimal .wt-s-items th{border-bottom:1px solid var(--ink)}

/* ---------- calculators ---------- */
.wt-calc-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--card);border-radius:24px;box-shadow:var(--sh2);overflow:hidden;margin:0}
.wt-calc-in{display:grid;gap:20px;align-content:start;padding:32px}
.wt-calc-out{display:flex;flex-direction:column;gap:18px;padding:32px;background:var(--navy);color:rgba(255,255,255,.76)}
.wt .wt-big input{height:60px;font-size:24px;font-weight:700;letter-spacing:-.01em}
.wt-res{margin:0;display:grid;gap:2px}
.wt-res>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:14px 16px;border-radius:14px;transition:background .15s}
.wt-res>div.is-answer{background:rgba(255,255,255,.07)}
.wt-res dt{font:500 14.5px/1.35 var(--f);color:rgba(255,255,255,.76)}
.wt-res dd{margin:0;display:flex;align-items:center;gap:12px;justify-content:flex-end}
.wt-res output{font:700 22px/1.15 var(--f);letter-spacing:-.015em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.wt-res>div.is-answer output{font-size:26px}
.wt-copy{flex:none;height:34px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font:600 13px/1 var(--f);cursor:pointer}
.wt-copy:hover{background:rgba(255,255,255,.18)}
.wt-copy:focus-visible{outline:3px solid #fff;outline-offset:2px}
.wt-calc-out .wt-copy.is-done{background:var(--mint-wash);color:var(--ink);box-shadow:none}
.wt-formula{margin:0;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.wt-calc-out .wt-err{color:var(--ink)}
.wt-res-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.wt-calc-out .b.sec{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.wt-calc-out .b.sec:hover{background:rgba(255,255,255,.16)}
.wt-calc-out .b.sec.is-done{background:var(--mint-wash);color:var(--ink);box-shadow:none}
.wt-calc-out .b:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wt-calc-note{margin:0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.68)}
.wt-calc-note a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.wt-parts{border-radius:14px;background:var(--canvas);padding:0 16px}
.wt-parts summary{cursor:pointer;padding:14px 0;font:600 15px/1.3 var(--f);color:var(--ink);list-style-position:inside}
.wt-parts[open]{padding-bottom:16px}
.wt-examples{display:flex;flex-wrap:wrap;gap:8px}
.wt-ex{height:38px;padding:0 14px;border:0;border-radius:999px;background:var(--canvas);box-shadow:inset 0 0 0 1px rgba(11,22,48,.12);font:600 13.5px/1 var(--f);color:var(--ink);cursor:pointer}
.wt-ex:hover{box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue-ink)}
.wt-ex b{font-weight:700}
.wt-mini-h{margin:0;font:600 14px/1.35 var(--f);color:var(--ink)}

/* number generator */
.wt-next-l{margin:0;font:600 14px/1.3 var(--f);color:rgba(255,255,255,.76)}
.wt-next{margin:-6px 0 0;font:700 clamp(28px,4vw,40px)/1.1 var(--f);letter-spacing:-.025em;color:#fff;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.wt-pattern{margin:0;font-size:14px;color:rgba(255,255,255,.76)}
.wt-pattern code{font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#fff;background:rgba(255,255,255,.08);padding:4px 8px;border-radius:8px}
.wt-numlist{margin:0;padding:6px 0 6px 0;list-style:none;counter-reset:n;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;max-height:280px;overflow:auto;border-radius:14px;background:rgba(255,255,255,.05);padding:10px 16px}
.wt-numlist li{counter-increment:n;display:flex;gap:10px;padding:5px 0;font:600 14.5px/1.3 var(--f);color:#fff;font-variant-numeric:tabular-nums;min-width:0}
.wt-numlist li::before{content:counter(n);min-width:18px;color:rgba(255,255,255,.55);font-weight:500;text-align:right}
.wt-numlist li span{overflow-wrap:anywhere}
.wt-after{margin:0;padding:12px 14px;border-radius:12px;background:var(--canvas);font-size:14.5px;color:var(--ink2)}
.wt-after b{color:var(--ink)}

/* late fee */
.wt-clause{padding:16px;border-radius:14px;background:rgba(255,255,255,.05)}
.wt-clause-h{margin:0 0 6px;font:600 13px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.68)}
.wt-clause p+p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:#fff}
.wt-under{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink2)}

/* ---------- responsive ---------- */
@media (min-width:1121px){
  .wt-maker .wt-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px}
  .wt-maker .wt-view{position:sticky;top:96px;max-height:calc(100vh - 112px);overflow:auto;padding:4px 4px 8px;margin:-4px;scrollbar-width:thin}
}
@media (max-width:1120px){
  .wt-maker .wt-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;position:sticky;top:calc(74px + env(safe-area-inset-top,0px));z-index:20;margin:0 0 16px;padding:10px 0;background:var(--canvas);box-shadow:0 1px 0 var(--hair)}
  .wt-tog{display:inline-flex;padding:4px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px rgba(11,22,48,.12)}
  .wt-tog button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:transparent;font:600 15px/1 var(--f);color:var(--ink2);cursor:pointer;white-space:nowrap}
  .wt-tog button[aria-pressed="true"]{background:var(--ink);color:#fff}
  .wt-tog-t{font-weight:500;opacity:.8;font-variant-numeric:tabular-nums}
  .wt-maker .wt-bar .b{height:44px;padding:0 18px;font-size:15px}
  .wt-maker:not(.wt-show-preview) .wt-view{display:none}
  .wt-maker.wt-show-preview .wt-form{display:none}
  .wt-view-head .b{display:none}
  .wt-zoom{display:inline}
}
@media (max-width:860px){
  .wt-calc-card{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .wt-maker .wt-bar{top:calc(64px + env(safe-area-inset-top,0px))}
  .wt-card{padding:20px 16px 22px!important;border-radius:18px}
  .wt-cols3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wt-cols3>:first-child{grid-column:1/-1}
  .wt-calc-in,.wt-calc-out{padding:22px 18px}
  .wt-calc-card{border-radius:20px}
  .wt-checklist ul{grid-template-columns:minmax(0,1fr)}
  .wt-actions .b{flex:1 1 100%}
  .wt-res>div{padding:12px 10px}
  .wt-res output{font-size:20px}
  .wt-res>div.is-answer output{font-size:23px}
  .wt-numlist{grid-template-columns:minmax(0,1fr)}
  .wt-res-acts .b{flex:1 1 auto}
}
@media (max-width:560px){
  .wt-cols2{grid-template-columns:minmax(0,1fr)}
  .wt-cols2.wt-keep{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wt-l-nums,.wt-notax .wt-l-nums{grid-template-columns:76px minmax(0,1fr) minmax(0,1fr)}
  .wt-notax .wt-l-nums{grid-template-columns:76px minmax(0,1fr)}
  .wt-l-a{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:baseline;min-height:0;padding:10px 2px 0;box-shadow:inset 0 1px 0 var(--hair2)}
  .wt-l-al{font-size:14px}
  .wt-logo{align-items:flex-start}
  .wt-logo-box{width:88px;height:60px}
  .wt-seg .wt-segs{display:flex}
  .wt-seg label{flex:1 1 auto;justify-content:center;padding:0 12px}
  .wt-chip{flex:1 1 calc(50% - 4px)}
  .wt-chip label{width:100%}
  .wt-tog button{padding:0 12px}
  .wt-tog-t{display:none}
}
@media (max-width:380px){
  .wt-maker .wt-bar .b{padding:0 14px}
}

/* ---------- print: only the document, on a clean A4 or Letter page ---------- */
#wt-print-root{display:none}
@page wtA4{size:A4;margin:0}
@page wtLetter{size:letter;margin:0}
@media print{
  html.wt-printing,html.wt-printing body{background:#fff!important;margin:0!important;padding:0!important;min-width:0!important}
  html.wt-printing body>*:not(#wt-print-root){display:none!important}
  html.wt-printing #wt-print-root{display:block;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .wt-paper-a4{page:wtA4}
  .wt-paper-letter{page:wtLetter}
  .wt-pf{width:100%;border-collapse:collapse}
  .wt-pf>thead>tr>td,.wt-pf>tbody>tr>td,.wt-pf>tfoot>tr>td{padding:0 15mm;border:0}
  .wt-pf-sp{height:13mm}
  .wt-print-root .wt-sheet{width:auto!important;min-height:0!important;padding:0!important;box-shadow:none!important;border-radius:0!important}
  .wt-print-root .wt-d-banded .wt-s-band{margin:0;border-radius:0}
  .wt-print-root .wt-d-banded .wt-s-head{margin:0;padding:24px 22px 22px}
  .wt-print-root .wt-ph{visibility:hidden}
  .wt-print-root tr,.wt-print-root .wt-s-due,.wt-print-root .wt-s-accept,.wt-print-root .wt-s-tot,.wt-print-root .wt-s-info>div{break-inside:avoid;page-break-inside:avoid}
  .wt-print-root .wt-s-items thead{display:table-header-group}
  /* printing a calculator page: keep the tool, drop the site chrome */
  html:not(.wt-printing) .top,html:not(.wt-printing) footer.site,html:not(.wt-printing) .mcta{display:none!important}
  html:not(.wt-printing) .wt-calc-card{box-shadow:none;break-inside:avoid}
  html:not(.wt-printing) .wt-copy,html:not(.wt-printing) .wt-res-acts{display:none!important}
}

/* The free template popup (src6/get.js). Desktop: a centred card. Phones: a bottom sheet that leaves the page
   (and the template preview) visible above it. */
.getd{border:0;padding:0;margin:auto;width:min(480px,calc(100% - 32px));max-height:calc(100% - 32px);border-radius:24px;background:var(--card,#fff);color:var(--ink,#0B1630);
  box-shadow:0 2px 4px rgba(11,22,48,.04),0 40px 90px -32px rgba(11,22,48,.36);overflow:auto}
.getd::backdrop{background:rgba(11,22,48,.42);backdrop-filter:blur(2px)}
.getd[open]{animation:getdIn .22s cubic-bezier(.2,.8,.2,1)}
@keyframes getdIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.getd-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--stone,#F2F0EB);color:var(--ink,#0B1630);font:400 24px/1 var(--f);cursor:pointer}
.getd-x:hover{background:#E9E6DF}
.getd-form,.getd-done{padding:34px 32px 28px}
.getd-h{font:700 23px/1.25 var(--f);letter-spacing:-.015em;margin:0 40px 8px 0;color:var(--ink,#0B1630)}
.getd-h:focus{outline:none}
.getd-sub{margin:0 0 20px;color:var(--ink2,#3A445E);font-size:16px}
.getd-lab{display:block;font:600 14px/1.3 var(--f);margin-bottom:8px}
.getd-in{width:100%;height:52px;border-radius:14px;border:1px solid rgba(11,22,48,.12);background:#fff;padding:0 16px;font:500 16.5px/1 var(--f);color:var(--ink,#0B1630)}
.getd-in:focus{outline:none;border-color:var(--blue,#2B63F6);box-shadow:0 0 0 4px var(--blue-wash,#EEF3FF)}
.getd-hint{display:block;margin-top:8px;border:0;background:none;padding:0;font:600 14px/1.3 var(--f);color:var(--blue,#2B63F6);cursor:pointer;text-align:left}
.getd-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0}
.getd-tick{display:flex;gap:12px;align-items:flex-start;margin:18px 0 0;font-size:14.5px;color:var(--ink2,#3A445E);cursor:pointer;line-height:1.45}
.getd-tick input{width:18px;height:18px;margin-top:2px;accent-color:var(--blue,#2B63F6);flex:none}
.getd-err{margin:14px 0 0;background:#FBEAE7;color:#A1301F;border-radius:12px;padding:10px 14px;font-size:14.5px}
.getd-go{width:100%;margin-top:20px;height:52px}
.getd-go.busy{opacity:.75;pointer-events:none}
.getd-note{margin:14px 0 0;font-size:13px;color:var(--muted,#6B7489);line-height:1.5}
.getd-note a{color:var(--muted,#6B7489);text-decoration:underline}
.getd-ok{width:52px;height:52px;border-radius:16px;background:var(--mint-wash,#E7F5EF);margin-bottom:18px;position:relative}
.getd-ok::after{content:"";position:absolute;left:19px;top:13px;width:12px;height:22px;border:solid var(--mint,#0E9F6E);border-width:0 3px 3px 0;transform:rotate(45deg)}
.getd-small{margin:6px 0 0;font-size:14.5px;color:var(--ink2,#3A445E)}
.getd-link{border:0;background:none;padding:0;font:600 14.5px/1.3 var(--f);color:var(--blue,#2B63F6);cursor:pointer}
.getd-link:disabled{opacity:.5}
.getd-online{display:flex;width:100%;margin-top:22px;height:50px}
.getd-pitch{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(11,22,48,.07);font-size:14px;color:var(--muted,#6B7489)}
.getd-pitch a{font-weight:600}
@media (max-width:640px){
  .getd{width:100%;max-width:none;margin:auto 0 0;border-radius:24px 24px 0 0;max-height:88vh}
  .getd[open]{animation:getdUp .26s cubic-bezier(.2,.8,.2,1)}
  @keyframes getdUp{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
  .getd-form,.getd-done{padding:28px 20px calc(24px + env(safe-area-inset-bottom))}
  .getd-h{font-size:21px}
}
@media (prefers-reduced-motion:reduce){.getd[open]{animation:none}}