/* Mobillify marketing site. One stylesheet for every page.
   Palette sampled from the approved invoice PDF (Mobillify_Approved_Master_Vector.pdf). */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-var.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:500;font-display:swap;src:url(/fonts/geist-mono-500.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-weight:600;font-display:swap;src:url(/fonts/geist-mono-600.woff2) format('woff2')}
@font-face{font-family:'Lato';font-weight:400;font-display:swap;src:url(/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-weight:700;font-display:swap;src:url(/fonts/lato-700.woff2) format('woff2')}
@font-face{font-family:'Lato';font-weight:900;font-display:swap;src:url(/fonts/lato-900.woff2) format('woff2')}

:root{
  --navy:#11254e;--ink:#141d33;--blue:#295bb1;--blue-hi:#0040cf;--teal:#01c8a8;
  --mint:#57b99b;--green:#3c7e5f;--green-bg:#eef9f4;
  --chip:#f0f6fc;--wash:#f6f9fd;--head:#ecf3fa;--line:#dce5ee;--line-2:#ccd9e7;
  --muted:#565c6c;--amber:#845326;--amber-bg:#fdf1e0;
  --grad:linear-gradient(100deg,#0040cf 0%,#1f6fd8 45%,#01c8a8 100%);
  --display:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--text:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.32,.72,0,1);
  --gutter:clamp(20px,4vw,56px);--max:1240px;--hdr:72px;
  --r-lg:24px;--r-md:16px;--r-sm:10px;
  --shadow:0 1px 2px rgba(17,37,78,.06),0 12px 32px -12px rgba(17,37,78,.18);
  --shadow-lg:0 2px 4px rgba(17,37,78,.05),0 40px 80px -32px rgba(17,37,78,.35);
}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 12px)}
body{margin:0;font:400 16px/1.6 var(--text);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:var(--blue);text-underline-offset:3px}
a:hover{color:var(--blue-hi)}
h1,h2,h3,h4{font-family:var(--display);color:var(--navy);margin:0;font-weight:560;letter-spacing:-.024em;text-wrap:balance}
p{margin:0}
p,li{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:600}
.skip:focus{top:12px;color:#fff}
.show-sm{display:none}
main,.site-footer{overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons and small type */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--text);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn:after{content:"";width:8px;height:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);margin-left:2px;transition:transform .25s var(--ease)}
.btn:hover:after{transform:translateX(3px) rotate(45deg)}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 10px 24px -10px rgba(17,37,78,.55)}
.btn-primary:hover{color:#fff;background-color:#0b1b3d;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--navy);border-color:var(--line-2);backdrop-filter:blur(6px)}
.btn-ghost:hover{color:var(--navy);border-color:var(--navy)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{color:var(--navy);transform:translateY(-1px)}
.btn-line-light{color:#fff;border-color:rgba(255,255,255,.35)}
.btn-line-light:hover{color:#fff;border-color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;font:600 12.5px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.eyebrow:before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.lede{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--muted);max-width:58ch}
.note{font-size:13px;color:var(--muted)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.link-arrow:after{content:"→";transition:transform .25s var(--ease)}
.link-arrow:hover:after{transform:translateX(4px)}
kbd{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:8px;font:650 11.5px/1 var(--text);letter-spacing:.06em;color:var(--navy);background:#fff;border:1px solid var(--line-2);box-shadow:0 2px 0 var(--line-2);white-space:nowrap}

/* Header */
.site-header{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.site-header.is-solid,.menu-open .site-header{background:rgba(255,255,255,.88);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;flex:none}
.brand .brand-mark{width:44px;height:auto}
.brand .brand-word{width:112px;height:auto;margin-top:3px}
.nav{display:flex;align-items:center;gap:8px}
.nav a{padding:12px 16px;border-radius:999px;font:500 14.5px/1 var(--text);color:var(--navy);text-decoration:none;transition:background .2s}
.nav a:hover{background-color:var(--chip)}
.nav a[aria-current=page]{background:var(--chip);color:var(--blue)}
.nav .nav-cta{background:var(--navy);color:#fff;padding:12px 24px;margin-left:8px}
.nav .nav-cta:hover{background-color:#0b1b3d;color:#fff}
.menu-toggle{display:none;align-items:center;gap:12px;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:#fff;font:600 14px/1 var(--text);color:var(--navy);cursor:pointer}
.menu-toggle i{position:relative;width:16px;height:2px;background:currentColor;border-radius:2px;transition:background .2s}
.menu-toggle i:before,.menu-toggle i:after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.menu-toggle i:before{top:-5px}.menu-toggle i:after{top:5px}
.menu-open .menu-toggle i{background:transparent}
.menu-open .menu-toggle i:before{transform:translateY(5px) rotate(45deg)}
.menu-open .menu-toggle i:after{transform:translateY(-5px) rotate(-45deg)}

/* Footer */
.site-footer{background:var(--navy);color:#c9d5ea;padding:clamp(64px,7vw,96px) 0 32px}
.site-footer a{color:#fff;text-decoration:none}
.site-footer a:hover{color:#8fe3cf}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px}
.foot-brand img{width:150px;filter:brightness(0) invert(1)}
.foot-brand p{margin-top:16px;max-width:34ch;font-size:15px}
.site-footer h2{font:600 12px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:#8fa3c8;margin:4px 0 16px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15px}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;color:#8fa3c8}

/* Section system */
main{display:block}
.sec{position:relative;padding-block:clamp(64px,9vh,112px)}
.sec-wash{background:var(--wash)}
.sec-dark{background:var(--navy);color:#c9d5ea}
.sec-dark h2,.sec-dark h3{color:#fff}
.sec-dark .lede{color:#b3c2dc}
.sec-dark .eyebrow{color:#8fe3cf}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(32px,4.5vh,48px);max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.sec-head .eyebrow{margin:0}
.sec h2{font-size:clamp(30px,3.4vw,52px);line-height:1.06}
.sec h3{font-size:clamp(18px,1.4vw,21px);line-height:1.25}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}

/* Reveal */
.js [data-reveal]{opacity:0;translate:0 18px;transition:opacity .7s var(--ease) var(--d,0s),translate .7s var(--ease) var(--d,0s),transform .45s var(--spring),box-shadow .45s var(--ease),border-color .3s,background-color .3s}
.js [data-reveal].is-in{opacity:1;translate:none}
.d1{--d:.08s}.d2{--d:.16s}.d3{--d:.24s}

/* Home hero: full bleed */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + 24px) 0 48px;overflow:hidden;isolation:isolate;background:#f4f8fd}
.hero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 70% at 78% 40%,rgba(1,200,168,.18),transparent 60%),
  radial-gradient(55% 65% at 92% 85%,rgba(0,64,207,.16),transparent 62%),
  radial-gradient(45% 55% at 8% 0%,rgba(41,91,177,.10),transparent 60%),
  linear-gradient(180deg,#f7faff 0%,#eef4fb 100%)}
.hero-bg:after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(17,37,78,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(17,37,78,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 70% at 70% 45%,#000 20%,transparent 75%);mask-image:radial-gradient(70% 70% at 70% 45%,#000 20%,transparent 75%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,64px);align-items:center;width:min(var(--max),100% - 2*var(--gutter))}
.hero-copy{display:grid;gap:24px;justify-items:start}
.hero-copy .eyebrow{margin:0}
.hero h1{font-size:clamp(42px,5.4vw,88px);line-height:1;letter-spacing:-.036em;font-weight:580;max-width:12ch}
.hero h1 .grad{display:inline}
.hero .lede{max-width:50ch;color:#3f4a60}
.hero-proof{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 24px;font:500 14px/1.3 var(--text);color:var(--navy)}
.hero-proof li{display:flex;align-items:center;gap:8px}
.hero-proof li:before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%233c7e5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1px #cdeadf}
.hero-visual{position:relative;display:grid;place-items:center;height:min(760px,calc(100svh - var(--hdr) - 64px))}

/* Phone demo. 1 design px = var(--u). */
.ph-stage{--ph-w:min(370px,calc((100svh - var(--hdr) - 80px) * .47),40vw);--u:calc(var(--ph-w) / 320);position:relative;width:var(--ph-w);height:calc(var(--u) * 680)}
.ph-glow{position:absolute;inset:8% -30% -6%;z-index:-1;background:radial-gradient(50% 45% at 50% 55%,rgba(1,200,168,.28),rgba(0,64,207,.12) 55%,transparent 72%);filter:blur(10px)}
.phone{position:absolute;inset:0;border-radius:calc(var(--u)*54);background:linear-gradient(145deg,#2b3446,#0d1220 45%,#1d2433);padding:calc(var(--u)*11);box-shadow:inset 0 0 0 calc(var(--u)*1.5) #4a5469,inset 0 0 calc(var(--u)*3) calc(var(--u)*2) rgba(255,255,255,.08),0 calc(var(--u)*50) calc(var(--u)*90) calc(var(--u)*-30) rgba(17,37,78,.55),0 calc(var(--u)*20) calc(var(--u)*40) calc(var(--u)*-20) rgba(17,37,78,.4)}
.phone:before{content:"";position:absolute;right:calc(var(--u)*-3);top:calc(var(--u)*150);width:calc(var(--u)*3);height:calc(var(--u)*72);border-radius:0 3px 3px 0;background:#2b3446}
.ph-screen{position:relative;height:100%;border-radius:calc(var(--u)*44);overflow:hidden;background:#f3f6fa;display:flex;flex-direction:column;isolation:isolate}
.ph-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*46);padding:calc(var(--u)*6) calc(var(--u)*28) 0;font:600 calc(var(--u)*13.5)/1 var(--text);color:#0d1220}
.ph-island{position:absolute;left:50%;top:calc(var(--u)*10);width:calc(var(--u)*96);height:calc(var(--u)*28);margin-left:calc(var(--u)*-48);border-radius:99px;background:#05070c}
.ph-sys{display:flex;gap:calc(var(--u)*5);align-items:center}
.ph-sys i{display:block;width:calc(var(--u)*17);height:calc(var(--u)*10);border-radius:calc(var(--u)*3);border:calc(var(--u)*1.5) solid #0d1220;position:relative}
.ph-sys i:after{content:"";position:absolute;inset:calc(var(--u)*1.5);right:calc(var(--u)*4);background:#0d1220;border-radius:1px}
.ph-sys b{display:block;width:calc(var(--u)*16);height:calc(var(--u)*10);background:linear-gradient(90deg,#0d1220 0 18%,transparent 18% 27%,#0d1220 27% 45%,transparent 45% 54%,#0d1220 54% 72%,transparent 72% 81%,#0d1220 81%);-webkit-mask:linear-gradient(to top,#000 0 100%);clip-path:polygon(0 70%,100% 0,100% 100%,0 100%)}
.ph-head{flex:none;display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*6) calc(var(--u)*16) calc(var(--u)*10);border-bottom:1px solid rgba(17,37,78,.08);background:rgba(255,255,255,.78);backdrop-filter:blur(10px)}
.ph-back{font:400 calc(var(--u)*30)/1 var(--text);color:#2563eb;margin-top:calc(var(--u)*-4)}
.ph-av{width:calc(var(--u)*36);height:calc(var(--u)*36);border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line);display:grid;place-items:center;overflow:hidden}
.ph-av img{width:78%}
.ph-head b{display:block;font:600 calc(var(--u)*14.5)/1.15 var(--text);color:#0d1220}
.ph-head small{display:block;font:500 calc(var(--u)*11)/1.2 var(--text);color:#6b7280}
.ph-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:0;padding:0 calc(var(--u)*12) calc(var(--u)*8);overflow:hidden}
.msg{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--spring),margin .45s var(--spring);margin-top:0}
.msg>div{min-height:0;overflow:hidden}
.msg.on{grid-template-rows:1fr;margin-top:calc(var(--u)*7)}
.bub{max-width:82%;padding:calc(var(--u)*9) calc(var(--u)*13);border-radius:calc(var(--u)*19);font:500 calc(var(--u)*13)/1.38 var(--text);opacity:0;transform:translateY(calc(var(--u)*10)) scale(.92);transition:opacity .35s var(--ease),transform .5s var(--spring)}
.msg.on .bub{opacity:1;transform:none}
.msg.out .bub{margin-left:auto;background:linear-gradient(180deg,#2f80ff,#1f6bf0);color:#fff;border-bottom-right-radius:calc(var(--u)*6);transform-origin:100% 100%}
.msg.in .bub{background:#fff;color:#0d1220;border-bottom-left-radius:calc(var(--u)*6);box-shadow:0 1px 1px rgba(17,37,78,.06);transform-origin:0 100%}
.msg.key .bub{font-weight:650;letter-spacing:.04em}
.bub.dots{display:flex;gap:calc(var(--u)*4);padding:calc(var(--u)*12) calc(var(--u)*14)}
.bub.dots i{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#9aa3b2;animation:dot 1.1s infinite ease-in-out}
.bub.dots i:nth-child(2){animation-delay:.15s}.bub.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(calc(var(--u)*-3));opacity:1}}
.bub.bub-card{padding:calc(var(--u)*10);width:82%}
.dcard{border-radius:calc(var(--u)*12);background:var(--wash);border:1px solid var(--line);padding:calc(var(--u)*10)}
.dcard-top{display:flex;align-items:center;gap:calc(var(--u)*8)}
.dcard-ico{width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:calc(var(--u)*6);background:var(--blue);display:grid;place-items:center;flex:none}
.dcard-ico svg{width:62%;height:62%}
.dcard-top b{font:650 calc(var(--u)*12)/1.2 var(--text);color:var(--navy);flex:1}
.dcard-pill{font:650 calc(var(--u)*10)/1 var(--text);padding:calc(var(--u)*5) calc(var(--u)*8);border-radius:99px;background:var(--amber-bg);color:var(--amber);transition:background .4s,color .4s}
.dcard.ok .dcard-pill{background:var(--green-bg);color:var(--green)}
.dcard-rows{margin-top:calc(var(--u)*8);display:grid;gap:calc(var(--u)*3);font:500 calc(var(--u)*11)/1.35 var(--text);color:var(--muted)}
.dcard-rows p{display:flex;justify-content:space-between}
.dcard-rows b{color:var(--ink);font-weight:600}
.dcard-total{margin-top:calc(var(--u)*7);padding-top:calc(var(--u)*7);border-top:1px dashed var(--line-2);display:flex;justify-content:space-between;font:650 calc(var(--u)*12.5)/1 var(--text);color:var(--navy)}
.dcard-hint{margin-top:calc(var(--u)*8);font:500 calc(var(--u)*11)/1.3 var(--text);color:var(--muted)}
.bub.pdf{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*9);width:78%;cursor:default;transition:opacity .35s var(--ease),transform .5s var(--spring),box-shadow .2s}
.bub.pdf.press{transform:scale(.96)}
.pdf-thumb{width:calc(var(--u)*40);height:calc(var(--u)*52);flex:none;border-radius:calc(var(--u)*5);background:#fff;border:1px solid var(--line);box-shadow:0 2px 6px rgba(17,37,78,.12);position:relative;overflow:hidden}
.pdf-thumb:before{content:"";position:absolute;left:12%;right:12%;top:12%;height:12%;background:var(--grad);border-radius:2px;opacity:.8}
.pdf-thumb:after{content:"";position:absolute;left:12%;right:12%;bottom:12%;height:10%;background:var(--blue);border-radius:2px}
.bub.pdf b{display:block;font:650 calc(var(--u)*13)/1.2 var(--text)}
.bub.pdf small{display:block;font:500 calc(var(--u)*11)/1.3 var(--text);color:#6b7280}
.ph-compose{flex:none;display:flex;align-items:flex-end;gap:calc(var(--u)*8);padding:calc(var(--u)*8) calc(var(--u)*12) calc(var(--u)*26);background:rgba(255,255,255,.9);border-top:1px solid rgba(17,37,78,.06)}
.ph-input{flex:1;min-height:calc(var(--u)*34);max-height:calc(var(--u)*82);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--u)*8) calc(var(--u)*13);border-radius:calc(var(--u)*17);border:1px solid #d6dbe3;background:#fff;font:500 calc(var(--u)*12.5)/1.35 var(--text);color:#9aa3b2;overflow:hidden}
.ph-input.typing{color:#0d1220}
.ph-input.typing span:after{content:"";display:inline-block;vertical-align:-.15em;width:1.5px;height:1.05em;background:#2563eb;margin-left:1px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.ph-send{width:calc(var(--u)*32);height:calc(var(--u)*32);border-radius:50%;flex:none;display:grid;place-items:center;background:#d6dbe3;color:#fff;transition:background .25s,transform .25s var(--spring)}
.ph-send svg{width:52%;height:52%}
.ph-send.ready{background:#1f6bf0}
.ph-send.tap{transform:scale(.85)}
.ph-home{position:absolute;left:50%;bottom:calc(var(--u)*8);width:calc(var(--u)*118);height:calc(var(--u)*5);margin-left:calc(var(--u)*-59);border-radius:99px;background:#0d1220;z-index:5}
.ph-shade{position:absolute;inset:0;background:rgba(5,9,20,.38);opacity:0;transition:opacity .5s var(--ease);z-index:2;pointer-events:none}
.ph-sheet{position:absolute;left:0;right:0;bottom:0;top:calc(var(--u)*40);z-index:3;background:#e9eef5;border-radius:calc(var(--u)*16) calc(var(--u)*16) 0 0;transform:translateY(102%);transition:transform .7s var(--spring);display:flex;flex-direction:column;box-shadow:0 -10px 30px rgba(5,9,20,.2)}
.ph-sheet-bar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:calc(var(--u)*12) calc(var(--u)*16) calc(var(--u)*10);font:600 calc(var(--u)*13)/1 var(--text);color:#0d1220}
.ph-sheet-bar span{color:#2563eb}
.ph-sheet-bar i{font:500 calc(var(--u)*11)/1 var(--text);color:#6b7280;font-style:normal}
.ph-doc{flex:1;min-height:0;padding:0 calc(var(--u)*12);overflow:hidden}
.ph-page{transform-origin:86% 74%;transition:transform 1.1s var(--spring);box-shadow:0 4px 18px rgba(17,37,78,.18);border-radius:calc(var(--u)*3);overflow:hidden}
.ph-toast{position:absolute;left:calc(var(--u)*14);right:calc(var(--u)*14);top:calc(var(--u)*50);z-index:4;display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*11) calc(var(--u)*13);border-radius:calc(var(--u)*18);background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 12px 30px rgba(5,9,20,.22);font:500 calc(var(--u)*12)/1.3 var(--text);color:#0d1220;transform:translateY(calc(var(--u)*-90));opacity:0;transition:transform .6s var(--spring),opacity .3s}
.ph-toast i{flex:none;width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:50%;background:var(--green-bg);display:grid;place-items:center}
.ph-toast i svg{width:58%;height:58%}
.ph-toast small{display:block;color:#6b7280;font-weight:500}
.ph-screen.s-sheet .ph-shade{opacity:1}
.ph-screen.s-sheet .ph-sheet{transform:none}
.ph-screen.s-zoom .ph-page{transform:scale(1.85)}
.ph-screen.s-toast .ph-toast{transform:none;opacity:1}
.ph-screen.s-fade .ph-thread,.ph-screen.s-fade .ph-sheet{opacity:0;transition:opacity .5s}
.ph-caption{position:absolute;left:50%;bottom:calc(var(--u)*-34);transform:translateX(-50%);white-space:nowrap;font:500 12px/1 var(--text);color:var(--muted);display:flex;gap:8px;align-items:center}
.ph-caption:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(87,185,155,.2)}
.float-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:var(--shadow);font:600 13px/1.25 var(--text);color:var(--navy);white-space:nowrap}
.float-chip small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.float-chip i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--chip);flex:none}
.float-chip i svg{width:16px;height:16px}
.fc-a{left:-14%;top:16%}
.float-chip{transition:opacity .4s var(--ease),transform .5s var(--ease)}
.ph-stage:has(.ph-screen:not([data-step=start],[data-step=typing],[data-step=sent],[data-step=dots],[data-step=reset])) .float-chip{opacity:0;transform:translateY(8px);pointer-events:none}
.fc-b{right:-12%;bottom:20%}

/* Invoice component (.mi). Paper is 72e wide, 1e = 1/72 of the container. */
.mi{container-type:inline-size;width:100%}
.mi-paper{--e:calc(100cqw / 72);position:relative;background:#fff;color:var(--ink);font-family:'Lato',var(--text);padding:calc(var(--e)*3.4) calc(var(--e)*3.3) calc(var(--e)*2.6);line-height:1.25;overflow:hidden}
.mi-paper *{margin:0}
.mi-top{display:grid;grid-template-columns:1fr auto;align-items:center;padding-bottom:calc(var(--e)*1.1);border-bottom:calc(var(--e)*.12) solid var(--blue)}
.mi-logo{display:grid;grid-template-columns:auto auto;align-items:end;justify-content:start;column-gap:calc(var(--e)*.3);row-gap:calc(var(--e)*.2);padding-right:calc(var(--e)*2.3);border-right:calc(var(--e)*.14) solid var(--blue);margin-right:calc(var(--e)*2.3)}
.mi-logo .mi-mark{width:calc(var(--e)*12.6)}
.mi-logotext{display:contents}
.mi-logotext img{width:calc(var(--e)*22);margin-bottom:calc(var(--e)*.6)}
.mi-tag{font:700 calc(var(--e)*.92)/1 'Lato',sans-serif;letter-spacing:.34em;color:var(--navy);white-space:nowrap;grid-column:1/-1;margin-left:calc(var(--e)*1.6)}
.mi-title{text-align:right}
.mi-title b{display:block;font:900 calc(var(--e)*4.75)/1 'Lato',sans-serif;letter-spacing:-.01em;color:var(--navy)}
.mi-title>span{display:block;margin-top:calc(var(--e)*1.6);font:500 calc(var(--e)*1.32)/1 'Lato',sans-serif;color:var(--ink)}
.mi-icons{list-style:none;padding:calc(var(--e)*1.05) 0!important;display:grid;grid-template-columns:1fr 1.32fr 1.04fr;border-bottom:calc(var(--e)*.08) solid var(--blue)}
.mi-icons li{display:flex;gap:calc(var(--e)*1);align-items:flex-start;padding:0 calc(var(--e)*.6);border-left:calc(var(--e)*.08) solid var(--line-2)}
.mi-icons li:first-child{border:0;padding-left:0}
.mi-icons svg{flex:none;width:calc(var(--e)*2.7);height:calc(var(--e)*2.7);color:var(--blue)}
.mi-icons b{display:block;font:700 calc(var(--e)*1.2)/1.1 'Lato',sans-serif;color:var(--blue);text-transform:uppercase}
.mi-icons span{display:block;margin-top:calc(var(--e)*.55);font:400 calc(var(--e)*1.12)/1.15 'Lato',sans-serif;white-space:nowrap}
.mi-biz{margin-top:calc(var(--e)*1.3);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--e)*1.3);padding:calc(var(--e)*1.05) calc(var(--e)*1.9) calc(var(--e)*1.05) calc(var(--e)*1.4);background:var(--chip);border-radius:calc(var(--e)*.75)}
.mi-biz-ico{width:calc(var(--e)*4.7);height:calc(var(--e)*4.05);border-radius:calc(var(--e)*.45);background:var(--blue);display:grid;place-items:center}
.mi-biz-ico svg{width:52%;height:60%}
.mi-biz-txt b{display:block;font:700 calc(var(--e)*2)/1.1 'Lato',sans-serif;color:var(--navy)}
.mi-biz-txt span{display:block;margin-top:calc(var(--e)*.3);font:400 calc(var(--e)*1.05)/1.2 'Lato',sans-serif}
.mi-pill{padding:calc(var(--e)*.7) calc(var(--e)*2.6);border-radius:99px;background:var(--amber-bg);color:var(--amber);font:700 calc(var(--e)*1.45)/1 'Lato',sans-serif;position:relative;margin-left:calc(var(--e)*1.4)}
.mi-pill:before{content:"";position:absolute;left:calc(var(--e)*-2);top:-30%;bottom:-30%;width:calc(var(--e)*.08);background:var(--line-2)}
.mi-pill.is-ok{background:var(--green-bg);color:var(--green)}
.mi-chips{margin-top:calc(var(--e)*1.6);display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--e)*2.05)}
.mi-chip{padding:calc(var(--e)*1.3) calc(var(--e)*1.4) calc(var(--e)*1.15) calc(var(--e)*1.9);background:var(--chip);border-radius:calc(var(--e)*.6);box-shadow:inset calc(var(--e)*.5) 0 0 var(--blue)}
.mi-chip small{display:block;font:700 calc(var(--e)*1.12)/1 'Lato',sans-serif;color:var(--blue);text-transform:uppercase}
.mi-chip b{display:block;margin-top:calc(var(--e)*.95);font:900 calc(var(--e)*2.25)/1 'Lato',sans-serif;color:var(--navy);white-space:nowrap}
.mi-chip.is-due{background:var(--green-bg);box-shadow:inset calc(var(--e)*.5) 0 0 var(--mint)}
.mi-chip.is-due small{color:var(--green)}
.mi-chip.is-due b{color:var(--green)}
.mi-dates{margin-top:calc(var(--e)*1.2);display:grid;grid-template-columns:1fr 1fr;padding:calc(var(--e)*.85) calc(var(--e)*1.7);background:var(--wash);border-radius:calc(var(--e)*.5);font:400 calc(var(--e)*1.18)/1 'Lato',sans-serif}
.mi-dates p{display:flex;gap:calc(var(--e)*3)}
.mi-dates p+p{border-left:calc(var(--e)*.08) solid var(--line-2);padding-left:calc(var(--e)*2.9)}
.mi-dates small{font:700 calc(var(--e)*1.1)/1 'Lato',sans-serif;color:var(--blue);min-width:calc(var(--e)*8.2)}
.mi-dates p+p small{min-width:calc(var(--e)*5.5)}
.mi-parties{margin-top:calc(var(--e)*1.3);display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--e)*2.05)}
.mi-party{border:calc(var(--e)*.08) solid var(--line-2);border-radius:calc(var(--e)*.6);padding:calc(var(--e)*1.15) calc(var(--e)*1.6) calc(var(--e)*1.15) calc(var(--e)*2.3);box-shadow:inset calc(var(--e)*.55) 0 0 var(--blue)}
.mi-party.is-from{box-shadow:inset calc(var(--e)*.55) 0 0 var(--mint)}
.mi-party small{display:block;font:700 calc(var(--e)*1.12)/1 'Lato',sans-serif;color:var(--blue);text-transform:uppercase}
.mi-party>b{display:block;margin-top:calc(var(--e)*.75);font:700 calc(var(--e)*1.72)/1.1 'Lato',sans-serif;color:var(--navy)}
.mi-party ul{list-style:none;padding:0!important;margin-top:calc(var(--e)*.6)!important;display:grid;gap:calc(var(--e)*.55)}
.mi-party li{display:flex;gap:calc(var(--e)*1.1);align-items:flex-start;font:400 calc(var(--e)*1.13)/1.3 'Lato',sans-serif}
.mi-party li svg{flex:none;width:calc(var(--e)*1.3);height:calc(var(--e)*1.3);color:var(--blue);margin-top:calc(var(--e)*.05)}
.mi-table{position:relative;margin-top:calc(var(--e)*1.75);width:100%;border-collapse:separate;border-spacing:0;font-family:'Lato',sans-serif}
.mi-table th{font:700 calc(var(--e)*1.12)/1 'Lato',sans-serif;color:var(--blue);text-transform:uppercase;background:var(--head);padding:calc(var(--e)*.9) calc(var(--e)*1.5);text-align:right}
.mi-table th:first-child{text-align:left;border-radius:calc(var(--e)*.5) 0 0 calc(var(--e)*.5)}
.mi-table th:last-child{border-radius:0 calc(var(--e)*.5) calc(var(--e)*.5) 0}
.mi-table th:nth-child(3),.mi-table td:nth-child(3){text-align:center}
.mi-table td{padding:calc(var(--e)*1.15) calc(var(--e)*1.5);border-bottom:calc(var(--e)*.08) solid var(--line);text-align:right;vertical-align:top;font:400 calc(var(--e)*1.22)/1.2 'Lato',sans-serif;white-space:nowrap}
.mi-table td:first-child{text-align:left;white-space:normal;width:58%}
.mi-table td b{display:block;font:700 calc(var(--e)*1.32)/1.2 'Lato',sans-serif;color:var(--ink)}
.mi-table td span{display:block;margin-top:calc(var(--e)*.4);font:400 calc(var(--e)*1.05)/1.25 'Lato',sans-serif;color:#2d3445}
.mi-table td.mi-num{padding-top:calc(var(--e)*1.6)}
.mi-wm{position:absolute;left:50%;top:calc(var(--e)*55);width:calc(var(--e)*17);margin-left:calc(var(--e)*-8.5);opacity:.07;pointer-events:none}
.mi-foot{margin-top:calc(var(--e)*3.1);display:grid;grid-template-columns:30fr 32fr;gap:calc(var(--e)*2.9);align-items:start}
.mi-terms{background:var(--wash);border-radius:calc(var(--e)*.6);padding:calc(var(--e)*.6) calc(var(--e)*1.4)}
.mi-terms div{display:grid;grid-template-columns:auto 1fr;gap:calc(var(--e)*1.4);padding:calc(var(--e)*.7) 0}
.mi-terms div+div{border-top:calc(var(--e)*.08) solid var(--line-2)}
.mi-terms svg{width:calc(var(--e)*2.5);height:calc(var(--e)*2.5);color:var(--blue);margin-top:calc(var(--e)*.3)}
.mi-terms b{display:block;font:700 calc(var(--e)*1.3)/1.15 'Lato',sans-serif;color:var(--blue)}
.mi-terms span{display:block;margin-top:calc(var(--e)*.6);font:400 calc(var(--e)*1.08)/1.3 'Lato',sans-serif}
.mi-sum p{display:flex;justify-content:space-between;align-items:baseline;font:400 calc(var(--e)*1.25)/1 'Lato',sans-serif;padding:calc(var(--e)*1.6) 0 calc(var(--e)*1.3) 0;border-bottom:calc(var(--e)*.1) solid var(--line-2)}
.mi-sum p b{font:900 calc(var(--e)*1.42)/1 'Lato',sans-serif}
.mi-sum p.mi-tax{padding:calc(var(--e)*1) 0}
.mi-sum .mi-bar{margin-top:calc(var(--e)*2.2);border:0;padding:calc(var(--e)*1.35) calc(var(--e)*1.75);border-radius:calc(var(--e)*.55);background:var(--blue);color:#fff;align-items:center}
.mi-bar span{font:700 calc(var(--e)*1.25)/1 'Lato',sans-serif}
.mi-sum .mi-bar b{font:900 calc(var(--e)*2)/1 'Lato',sans-serif}
.mi-end{margin-top:calc(var(--e)*3.6);padding-top:calc(var(--e)*1.6);border-top:calc(var(--e)*.16) solid var(--mint);display:flex;justify-content:space-between;align-items:baseline;padding-inline:calc(var(--e)*1)}
.mi-end i{font:700 italic calc(var(--e)*1.7)/1 Georgia,'Times New Roman',serif;color:var(--navy)}
.mi-end span{font:500 calc(var(--e)*1.2)/1 'Lato',sans-serif;color:var(--navy)}
.mi-shadow .mi-paper{border-radius:6px;box-shadow:var(--shadow-lg)}

/* Showcase: the finished invoice */
.inv-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.inv-stage{position:relative;justify-self:center;width:min(100%,calc((100svh - 2 * clamp(56px,9vh,112px) - 20px) / 1.32))}
.inv-stage:before{content:"";position:absolute;inset:6% -8% -4%;z-index:0;background:radial-gradient(50% 50% at 50% 50%,rgba(41,91,177,.18),transparent 70%)}
.inv-stage .mi{position:relative}
.inv-tag{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:12px;background:var(--navy);color:#fff;font:600 12.5px/1.2 var(--text);box-shadow:var(--shadow);white-space:nowrap}
.inv-tag b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--grad);font-size:11px}
.inv-tag.t1{left:-6%;top:22%}.inv-tag.t2{right:-7%;top:35%}.inv-tag.t3{left:-5%;top:60%}.inv-tag.t4{right:-6%;bottom:13%}
.callouts{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:4px;counter-reset:c}
.callouts li{counter-increment:c;display:grid;grid-template-columns:34px 1fr;gap:4px 16px;padding:16px 0;border-top:1px solid var(--line)}
.callouts li:before{content:counter(c);grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--chip);color:var(--blue);font:650 13px/1 var(--text)}
.callouts b{font:600 16px/1.3 var(--display);color:var(--navy);letter-spacing:-.01em}
.callouts span{font-size:15px;color:var(--muted);line-height:1.5}

/* Flow (dark) */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:f}
.flow li{position:relative;display:grid;align-content:start;gap:12px;padding:clamp(24px,2.4vw,32px);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1)}
.flow-n{font:600 13px/1 var(--text);letter-spacing:.14em;color:#8fe3cf}
.flow p{color:#b3c2dc;font-size:15.5px}
.keys{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.sec-dark kbd{background:rgba(255,255,255,.06);color:#e6edf8;border-color:rgba(255,255,255,.18);box-shadow:0 2px 0 rgba(255,255,255,.12)}
.sec-dark kbd.is-on{background:#fff;color:var(--navy);border-color:#fff;box-shadow:0 2px 0 #8fe3cf}
.flow li:not(:last-child):after{content:"";position:absolute;top:50%;right:-15px;width:10px;height:10px;border:solid rgba(143,227,207,.7);border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg);z-index:1}
.flow-foot{margin-top:32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.sec-dark .link-arrow{color:#fff}

/* Value tiles */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tile{display:grid;grid-template-rows:auto auto 1fr;gap:12px;padding:clamp(24px,2vw,32px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(17,37,78,.04)}
.tile p{color:var(--muted);font-size:15px;line-height:1.55}
.tile-art{height:118px;margin-bottom:8px;border-radius:var(--r-md);background:var(--wash);border:1px solid var(--line);display:grid;place-items:center;padding:16px;overflow:hidden}
.art-bubble{justify-self:end;max-width:92%;padding:9px 12px;border-radius:16px 16px 5px 16px;background:linear-gradient(180deg,#2f80ff,#1f6bf0);color:#fff;font:500 12.5px/1.35 var(--text)}
.art-brand{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);width:100%}
.art-brand i{width:34px;height:30px;border-radius:7px;background:var(--blue);display:grid;place-items:center;flex:none}
.art-brand i svg{width:18px;height:18px}
.art-brand b{display:block;font:800 13.5px/1.2 'Lato',var(--text);color:var(--navy)}
.art-brand small{display:block;font:500 11px/1.3 var(--text);color:var(--muted)}
.art-pills{display:flex;align-items:center;gap:10px}
.art-pills span{padding:7px 14px;border-radius:99px;font:800 13px/1 'Lato',var(--text)}
.art-pills .p1{background:var(--amber-bg);color:var(--amber)}
.art-pills .p2{background:var(--green-bg);color:var(--green)}
.art-pills em{font-style:normal;color:var(--muted);font-weight:700}
.art-tax{width:100%;display:grid;gap:7px}
.art-tax p{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:9px;background:#fff;border:1px solid var(--line);font:700 12.5px/1 'Lato',var(--text);color:var(--navy)}
.art-tax p span{font:600 10.5px/1 var(--text);letter-spacing:.06em;color:var(--blue);background:var(--chip);padding:5px 8px;border-radius:99px}

/* Ways to work */
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.way{position:relative;display:grid;align-content:start;gap:12px;padding:clamp(24px,2.2vw,32px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.way:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2);color:inherit}
.way-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--chip);color:var(--blue);margin-bottom:8px}
.way-ico svg{width:24px;height:24px}
.way p{color:var(--muted);font-size:15px}
.way .link-arrow{margin-top:8px;color:var(--blue)}
.trades{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.trades span{padding:8px 16px;border-radius:99px;background:#fff;border:1px solid var(--line);font:500 14px/1 var(--text);color:var(--navy)}

/* Pricing */
.price-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:stretch}
.plan{position:relative;overflow:hidden;display:grid;gap:16px;align-content:start;padding:clamp(24px,3vw,48px);border-radius:28px;background:var(--navy);color:#c9d5ea;isolation:isolate}
.plan:before{content:"";position:absolute;inset:auto -20% -60% 30%;height:120%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(1,200,168,.35),transparent 70%)}
.plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan-name{font:600 13px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;color:#8fe3cf}
.cur{display:inline-flex;padding:4px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.cur button{border:0;background:transparent;color:#c9d5ea;font:600 12.5px/1 var(--text);padding:8px 16px;border-radius:99px;cursor:pointer}
.cur button[aria-pressed=true]{background:#fff;color:var(--navy)}
.price{display:flex;align-items:baseline;gap:12px;color:#fff}
.price b{font:600 clamp(48px,5vw,72px)/1 var(--display);letter-spacing:-.03em}
.price span{font:500 15px/1.3 var(--text);color:#b3c2dc}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:15.5px}
.plan li{display:flex;gap:12px;align-items:flex-start}
.plan li:before,.checks li:before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(143,227,207,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%238fe3cf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plan .btn{justify-self:start}
.plan small{font-size:13px;color:#8fa3c8}
.side-cards{display:grid;gap:24px;grid-template-rows:auto 1fr}
.card{padding:clamp(24px,2.4vw,32px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line)}
.card h3{margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}
.card .link-arrow{margin-top:16px}
.card-wash{background:var(--wash)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:15px}
.checks li:before{background:var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%233c7e5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.beta{display:flex;gap:16px;align-items:flex-start}
.beta i{flex:none;width:40px;height:40px;border-radius:12px;background:var(--amber-bg);display:grid;place-items:center;color:var(--amber);font:700 16px/1 var(--text);font-style:normal}

/* Closing: CTA + FAQ */
.close-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,4vw,64px);align-items:start}
.cta-panel{position:relative;overflow:hidden;padding:clamp(32px,3.4vw,48px);border-radius:28px;background:var(--grad);color:#fff;display:grid;gap:16px;isolation:isolate}
.cta-panel:after{content:"";position:absolute;right:-60px;bottom:-60px;width:260px;height:260px;border-radius:50%;border:40px solid rgba(255,255,255,.1);z-index:-1}
.cta-panel h2{color:#fff}
.cta-panel p{color:rgba(255,255,255,.88);max-width:42ch}
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:border-color .2s,box-shadow .2s}
.faq details[open]{border-color:var(--line-2);box-shadow:0 1px 2px rgba(17,37,78,.05)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;font:600 16px/1.35 var(--display);color:var(--navy);letter-spacing:-.01em}
.faq summary::-webkit-details-marker,.mb-faq-item summary::-webkit-details-marker{display:none}
.faq summary:after,.mb-faq-item summary:after{content:"";flex:none;width:26px;height:26px;border-radius:50%;background:var(--chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%23295bb1' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary:after,.mb-faq-item[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 24px 16px;color:var(--muted);font-size:15px}

/* Interior pages */
.page-hero{position:relative;padding:calc(var(--hdr) + clamp(48px,7vh,96px)) 0 clamp(48px,7vh,96px);background:linear-gradient(180deg,#f4f8fd,#fff);overflow:hidden;isolation:isolate}
.page-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 60% at 85% 20%,rgba(1,200,168,.12),transparent 70%),radial-gradient(40% 60% at 100% 90%,rgba(0,64,207,.08),transparent 70%)}
.page-hero .split{align-items:center}
.page-hero-copy{display:grid;gap:24px;justify-items:start}
.page-hero-copy .eyebrow{margin:0}
.page-hero h1{font-size:clamp(36px,4.4vw,64px);line-height:1.04;letter-spacing:-.03em;font-weight:580;max-width:16ch}
.page-hero .narrow{max-width:780px}
.hero-inv{justify-self:center;width:min(100%,460px,calc((100svh - var(--hdr) - 120px) / 1.3))}
.hero-inv .mi-paper{border-radius:6px;box-shadow:var(--shadow-lg)}

/* Content blocks shared by guide pages (mb-*) */
.mb-page{display:block}
.mb-hero{position:relative;padding:calc(var(--hdr) + clamp(48px,7vh,96px)) 0 clamp(48px,6vh,64px);background:linear-gradient(180deg,#f4f8fd,#fff);overflow:hidden;isolation:isolate}
.mb-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 60% at 85% 20%,rgba(1,200,168,.12),transparent 70%),radial-gradient(40% 60% at 100% 90%,rgba(0,64,207,.08),transparent 70%)}
.mb-hero h1{font-size:clamp(36px,4.4vw,64px);line-height:1.04;letter-spacing:-.03em;font-weight:580;max-width:18ch;margin:0 0 24px}
.mb-wrap{width:min(1080px,100% - 2*var(--gutter));margin-inline:auto}
.mb-section{padding-block:clamp(48px,7vh,96px)}
.mb-section:nth-of-type(even){background:var(--wash)}
.mb-section h2{font-size:clamp(28px,3vw,44px);line-height:1.08;max-width:24ch;margin:0 0 16px}
.mb-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 16px;font:600 12.5px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.mb-eyebrow:before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.mb-lede{max-width:62ch;margin:0 0 32px;font-size:clamp(16px,1.25vw,19px);color:var(--muted)}
.mb-hero .mb-lede{color:#3f4a60}
.mb-cards,.mb-list,.mb-steps{margin:0 0 24px;padding:0;list-style:none}
.mb-cards{display:grid;gap:16px}
.mb-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mb-card{padding:clamp(24px,2vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.mb-section:nth-of-type(even) .mb-card,.mb-section:nth-of-type(even) .mb-faq-item,.mb-section:nth-of-type(even) .mb-steps li{background:#fff}
.mb-card h3,.mb-steps h3,.mb-faq h3{font-size:18px;line-height:1.3;margin:0 0 8px}
.mb-card p,.mb-steps p,.mb-faq p,.mb-list li{color:var(--muted);font-size:15.5px}
.mb-card p+p{margin-top:8px}
.mb-link{display:inline-flex;gap:8px;margin-top:12px;font-weight:600;text-decoration:none}
.mb-link:after{content:"→"}
.mb-list{display:grid;gap:12px;max-width:70ch}
.mb-list li{padding-left:32px;position:relative}
.mb-list li:before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:50%;background:var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%233c7e5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.mb-steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}
.mb-steps li{counter-increment:s;padding:24px 24px 24px 64px;position:relative;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.mb-steps li:before{content:counter(s,decimal-leading-zero);position:absolute;left:20px;top:20px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--navy);color:#fff;font:600 13px/1 var(--text)}
.mb-faq{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;margin-bottom:24px}
.mb-faq-item{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:border-color .2s,box-shadow .2s}
.mb-faq-item[open]{border-color:var(--line-2);box-shadow:0 1px 2px rgba(17,37,78,.05)}
.mb-faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px}
.mb-faq .mb-faq-item h3{margin:0}
.mb-faq-item p{padding:0 24px 16px}
.mb-table-wrap{margin:0 0 24px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.mb-table{width:100%;border-collapse:collapse;font-size:15px}
.mb-table caption{text-align:left;padding:16px 16px 0;font-size:13px;color:var(--muted)}
.mb-table th,.mb-table td{padding:16px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.mb-table tr:last-child>*{border-bottom:0}
.mb-table thead th{background:var(--head);color:var(--blue);font:600 12.5px/1.2 var(--text);letter-spacing:.06em;text-transform:uppercase}
.mb-table tbody th{color:var(--navy);font-weight:600}
.mb-table td{color:var(--muted)}
.mb-cta{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0}
.mb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font:600 15px/1 var(--text);text-decoration:none;border:1px solid transparent;transition:transform .25s var(--ease),background .25s}
.mb-btn-primary{background:var(--navy);color:#fff}
.mb-btn-primary:hover{background-color:#0b1b3d;color:#fff;transform:translateY(-1px)}
.mb-btn-secondary{border-color:var(--line-2);color:var(--navy);background:#fff}
.mb-btn-secondary:hover{border-color:var(--navy);color:var(--navy)}
.mb-note{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.mb-notice{max-width:70ch;margin:24px 0 0;padding:16px 24px;border-left:4px solid var(--blue);border-radius:12px;background:var(--chip);color:var(--ink)}
.mb-example{max-width:70ch;margin:0 0 24px;padding:16px 24px;border-radius:var(--r-md);background:#fff;border:1px dashed var(--line-2)}
.mb-example p+p{margin-top:8px}
.mb-section p+p{margin-top:12px}
.mb-section .mb-card p+p{margin-top:8px}

/* Legal and support pages */
.legal-body{width:min(780px,100% - 2*var(--gutter));margin:0 auto;padding:clamp(48px,6vh,64px) 0 clamp(64px,9vh,112px)}
.legal-body article{padding:32px 0;border-top:1px solid var(--line)}
.legal-body article:first-child{border-top:0;padding-top:0}
.legal-body h2{font-size:clamp(22px,2vw,28px);margin-bottom:12px}
.legal-body p,.legal-body li{color:#3f4a60;font-size:16px}
.legal-body ul{margin:0;padding-left:24px;display:grid;gap:8px}

/* Sign in and register */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100svh;padding-top:var(--hdr)}
.auth-card{width:min(440px,100% - 2*var(--gutter));margin:auto;padding:clamp(16px,3vh,48px) 0}
.auth-kicker{display:inline-flex;align-items:center;gap:12px;font:600 12px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.auth-kicker:before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad)}
.auth-card h1{font-size:clamp(30px,2.8vw,40px);line-height:1.06;letter-spacing:-.028em;font-weight:600;margin-bottom:8px}
.auth-card>p{color:var(--muted);margin-bottom:16px}
.auth-demo-note{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-radius:12px;background:var(--amber-bg);color:var(--amber);font-size:13.5px;margin-bottom:16px}
.auth-demo-note b{font-weight:650}
.auth-google-button{display:flex;width:100%;align-items:center;gap:12px;min-height:48px;padding:0 16px;border:1px solid var(--line-2);border-radius:14px;background:#fff;font-weight:600;color:var(--navy);cursor:pointer;transition:border-color .2s}
.auth-google-button:hover{border-color:var(--navy)}
.auth-google-mark{font:800 18px/1 Arial,sans-serif;color:#4285f4}
.auth-provider-arrow{margin-left:auto;color:var(--muted)}
.auth-divider{display:flex;align-items:center;gap:12px;margin:16px 0;font-size:12.5px;color:var(--muted)}
.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--line)}
.auth-mode-switch{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--wash);border:1px solid var(--line);margin-bottom:16px}
.auth-mode-switch button{flex:1;min-height:38px;border:0;border-radius:9px;background:transparent;font:600 13.5px/1 var(--text);color:var(--muted);cursor:pointer}
.auth-mode-switch button.active{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(17,37,78,.12)}
#demo-auth label{display:flex;justify-content:space-between;font:600 13px/1.3 var(--text);color:var(--navy);margin:0 0 6px}
#demo-auth label span{font:600 10px/1.3 var(--text);letter-spacing:.1em;color:var(--muted)}
#demo-auth input{display:block;width:100%;min-height:46px;padding:0 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--wash);color:var(--ink);margin-bottom:4px}
#demo-auth input[aria-invalid=true]{border-color:#c2410c}
.field-error{display:block;min-height:14px;margin-bottom:8px;font-size:12.5px;color:#b42318}
.auth-button{display:flex;width:100%;justify-content:center;align-items:center;gap:12px;min-height:48px;border:0;border-radius:14px;background:var(--navy);color:#fff;font:600 15px/1 var(--text);cursor:pointer;margin-top:4px}
.auth-button:hover{background-color:#0b1b3d}
.auth-button:disabled{opacity:.7;cursor:wait}
.auth-text-button{margin-top:12px;border:0;background:none;padding:8px 0;color:var(--blue);font-weight:600;cursor:pointer}
.auth-message{margin-top:12px;padding:12px 16px;border-radius:12px;background:var(--green-bg);color:var(--green);font-size:14px}
.auth-message.error{background:#fdecea;color:#b42318}
.auth-register{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}
.auth-register a{font-weight:600}
.auth-demo-controls{margin-top:16px;font-size:13.5px;color:var(--muted)}
.auth-demo-controls summary{cursor:pointer;font-weight:600;color:var(--navy)}
.auth-demo-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:12px 0}
.auth-demo-tools button{border:0;background:none;color:var(--blue);font-weight:600;cursor:pointer;padding:4px 0}
.auth-privacy{font-size:13px}
.text-link{display:inline-block;margin-top:16px;font-weight:600}
.auth-proof{position:relative;display:grid;align-content:center;justify-items:center;gap:24px;padding:clamp(32px,5vh,64px) var(--gutter);background:linear-gradient(160deg,#f4f8fd 0%,#e8f0fa 100%);overflow:hidden;isolation:isolate}
.auth-proof:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 50% at 70% 30%,rgba(1,200,168,.18),transparent 70%),radial-gradient(45% 50% at 20% 90%,rgba(0,64,207,.12),transparent 70%)}
.auth-proof-copy{text-align:center;max-width:440px}
.auth-proof-copy span{font:600 12px/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.auth-proof-copy h2{font-size:clamp(24px,2.2vw,32px);line-height:1.1;margin:12px 0 8px}
.auth-proof-copy p{color:var(--muted);font-size:15px}
.auth-proof-art{position:relative;width:min(100%,420px,calc((100svh - var(--hdr) - 260px) / 1.3))}
.auth-proof-art .mi-paper{border-radius:6px;box-shadow:var(--shadow-lg)}
.auth-return-chip{position:absolute;right:-8%;bottom:9%;display:flex;gap:12px;align-items:center;padding:12px 16px 12px 12px;border-radius:14px;background:#fff;box-shadow:var(--shadow);font-size:13px;white-space:nowrap}
.auth-return-chip>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--green-bg);color:var(--green);font-weight:700}
.auth-return-chip b{display:block;color:var(--navy)}
.auth-return-chip small{display:block;color:var(--muted)}
.auth-illustration-note{font-size:12.5px;color:var(--muted)}
.auth-provider-dialog{border:0;border-radius:20px;padding:32px;max-width:420px;box-shadow:var(--shadow-lg)}
.auth-provider-dialog::backdrop{background:rgba(17,37,78,.45)}
.auth-provider-dialog h2{font-size:24px;margin:8px 0 12px}
.auth-provider-dialog p{color:var(--muted);margin-bottom:16px}

/* Free generator */
.generator{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3.5vw,64px);align-items:start}
.gen-form{display:grid;gap:16px;padding:clamp(16px,1.8vw,24px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.gen-form h2{font-size:20px}
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gen-form label{display:grid;gap:8px;font:600 12.5px/1.2 var(--text);color:var(--navy);min-width:0}
.gen-form input,.gen-form select{width:100%;min-width:0;min-height:42px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--wash);font:500 15px/1.2 var(--text);color:var(--ink)}
.gen-form input:focus,.gen-form select:focus{background:#fff;border-color:var(--blue);outline:0;box-shadow:0 0 0 3px rgba(41,91,177,.15)}
.items{display:grid;gap:8px}
.item{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.7fr) minmax(0,.9fr) 36px;gap:8px;align-items:end}
.remove{height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);font-size:20px;cursor:pointer}
.remove:hover{color:#b42318;border-color:#f3c7c0}
.generator-tools{display:flex;justify-content:space-between;align-items:end;gap:12px}
.generator-tools>button{border:1px dashed var(--line-2);background:#fff;color:var(--blue);font-weight:600;border-radius:10px;min-height:42px;padding:0 16px;cursor:pointer}
.generator-tools label{width:150px}
.hint{font-size:13px;line-height:1.45;color:var(--muted)}
.gen-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.gen-foot .hint{max-width:30ch}
.gen-form .action{flex:none;border:0}
.gen-preview{position:sticky;top:calc(var(--hdr) + 20px)}
.gen-preview .mi-paper{border-radius:6px;box-shadow:var(--shadow-lg)}
.gen-preview .note{margin-top:12px;text-align:center}

/* Onboarding */
.onboarding{width:min(1080px,100% - 2*var(--gutter));margin:0 auto;padding:calc(var(--hdr) + clamp(32px,6vh,64px)) 0 clamp(64px,8vh,96px);display:grid;gap:24px;justify-items:start}
.onboard-progress{display:flex;gap:8px;flex-wrap:wrap}
.onboard-progress span{padding:8px 16px;border-radius:99px;background:var(--wash);border:1px solid var(--line);font:600 13px/1 var(--text);color:var(--muted)}
.onboard-progress .current{background:var(--navy);border-color:var(--navy);color:#fff}
.onboarding h1{font-size:clamp(36px,4vw,56px);line-height:1.03;letter-spacing:-.028em;font-weight:600}
.onboarding>p{color:var(--muted)}
.setup-panel{width:100%;padding:clamp(24px,2.4vw,32px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.steps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps article{padding:24px;border-radius:var(--r-md);background:var(--wash);border:1px solid var(--line)}
.steps i{font:600 13px/1 var(--text);font-style:normal;color:var(--blue);letter-spacing:.1em}
.steps h3{font-size:18px;margin:8px 0 8px}
.steps p{color:var(--muted);font-size:15px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.invoice{display:grid;gap:16px;max-width:680px}
form.invoice label{display:grid;gap:8px;font:600 13px/1.2 var(--text);color:var(--navy)}
form.invoice input,form.invoice select{min-height:46px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--wash);font:500 15px/1.2 var(--text);width:100%;min-width:0}
form.invoice button,.button{display:inline-flex;align-items:center;justify-content:center;justify-self:start;min-height:48px;padding:0 24px;border:0;border-radius:999px;background:var(--navy);color:#fff;font:600 15px/1 var(--text);text-decoration:none;cursor:pointer}
.button:hover,form.invoice button:hover{background:#0b1b3d;color:#fff}

/* Sample workspace */
.preview-note{position:relative;z-index:2;margin-top:var(--hdr);padding:12px var(--gutter);background:var(--amber-bg);color:var(--amber);font:500 13.5px/1.4 var(--text);text-align:center}
.app{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100svh - var(--hdr) - 40px)}
.side{padding:24px 16px;background:var(--wash);border-right:1px solid var(--line)}
.side button{display:flex;width:100%;align-items:center;gap:8px;text-align:left;border:0;background:transparent;padding:12px 16px;border-radius:10px;font:500 15px/1.2 var(--text);color:var(--muted);cursor:pointer}
.side button:hover{background:#fff;color:var(--navy)}
.side button.active{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(17,37,78,.08);font-weight:650}
.app .main{padding:clamp(24px,4vw,48px)}
.toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.toolbar .eyebrow{margin-bottom:8px}
.app h1{font-size:clamp(30px,3vw,40px);letter-spacing:-.03em;font-weight:600}
.workspace-content{margin-top:24px;display:grid;gap:16px}
.workspace-content>p{color:var(--muted)}
.app .card{padding:24px 24px}
.app .card small{display:block;color:var(--muted);font-size:13px}
.app .card b{display:block;margin-top:8px;font:600 26px/1.1 var(--display);color:var(--navy)}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.table-card{overflow:auto}
.table{width:100%;border-collapse:collapse}
.table th,.table td{text-align:left;border-bottom:1px solid var(--line);padding:12px 12px;font-size:14.5px}
.table th{color:var(--blue);font:600 12px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;background:var(--head)}
.table tr:last-child td{border-bottom:0}
.workspace-content label{display:grid;gap:8px;max-width:280px;font:600 13px/1.2 var(--text);color:var(--navy)}
.workspace-content select{min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;background:#fff}
.workspace-content form.invoice{padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.workspace-content form.invoice h3{font-size:18px}

/* Interior page blocks */
.split-top{align-items:start}
.feats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.feat{display:grid;align-content:start;gap:12px;padding:clamp(24px,2.2vw,32px);border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(17,37,78,.04)}
.feat .way-ico{margin-bottom:8px}
.feat p{color:var(--muted);font-size:15px;line-height:1.55}
.feat-list,.timeline,.anatomy,.limits,.reply-rows{list-style:none;margin:0;padding:0}
.feat-list{display:grid;gap:0}
.feat-list li,.timeline li{display:grid;gap:4px;padding:16px 0 16px 32px;border-top:1px solid var(--line);position:relative}
.feat-list li:before{content:"";position:absolute;left:0;top:19px;width:20px;height:20px;border-radius:50%;background:var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%233c7e5f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.feat-list b,.timeline b,.anatomy b,.limits b{font:600 17px/1.3 var(--display);color:var(--navy);letter-spacing:-.01em}
.feat-list span,.timeline span,.anatomy span,.limits span{color:var(--muted);font-size:15px;line-height:1.55}
.timeline{counter-reset:t}
.timeline li{counter-increment:t;padding-left:48px}
.timeline li:before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:16px;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--navy);color:#fff;font:600 13px/1 var(--text)}
.timeline li:not(:last-child):after{content:"";position:absolute;left:17px;top:56px;bottom:-12px;width:2px;background:var(--line)}
.mini-chat{--u:1px;justify-self:center;width:min(100%,400px);display:grid;gap:10px;padding:18px 18px 22px;border-radius:30px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.mc-head{display:flex;align-items:center;gap:10px;padding:0 4px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}
.mc-head b{display:block;font:650 14.5px/1.2 var(--text);color:var(--ink)}
.mc-head small{display:block;font:500 12px/1.2 var(--text);color:var(--green)}
.mc{max-width:84%;padding:10px 14px;border-radius:18px;font:500 14.5px/1.42 var(--text)}
.mc.in{justify-self:start;background:#eef1f6;color:var(--ink);border-bottom-left-radius:6px}
.mc.out{justify-self:end;background:linear-gradient(180deg,#2f80ff,#1f6bf0);color:#fff;border-bottom-right-radius:6px}
.mc.key{font-weight:650;letter-spacing:.04em}
.mc.pdf{display:flex;align-items:center;gap:10px;padding:9px;width:72%}
.mc.pdf b{display:block;font:650 13.5px/1.2 var(--text)}
.mc.pdf small{display:block;font:500 12px/1.3 var(--text);color:#6b7280}
.dcard-mini{display:grid;gap:6px;width:80%;background:#fff!important;border:1px solid var(--line)}
.dcard-mini b{font:650 13.5px/1.2 var(--text);color:var(--navy);padding-bottom:4px}
.dcard-mini span{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.dcard-mini em{font-style:normal;font-weight:600;color:var(--ink)}
.dcard-mini .tot{padding-top:6px;border-top:1px solid var(--line);color:var(--navy);font-weight:600}
.limits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.limits li{display:grid;gap:8px;padding:clamp(24px,2.4vw,32px);border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.limits b{color:#fff}
.limits span{color:#b3c2dc}
.reply-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.reply-rows li{display:grid;gap:12px;align-content:start;padding:clamp(24px,2.2vw,32px);border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.reply-rows .keys{margin:0}
.reply-rows p{color:#b3c2dc;font-size:15.5px}
.checks-lg li{font-size:16px;color:var(--ink)}
.beta-card{display:grid;gap:12px;box-shadow:var(--shadow)}
.beta-badge{justify-self:start;padding:4px 12px;border-radius:99px;background:var(--amber-bg);color:var(--amber);font:650 12px/1 var(--text);letter-spacing:.06em;text-transform:uppercase}
.free-card{display:grid;gap:16px;align-content:start}
.free-card h2{font-size:clamp(24px,2.2vw,32px)}
.anatomy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:a}
.anatomy li{counter-increment:a;display:grid;gap:8px;padding:clamp(24px,2.2vw,32px) clamp(24px,2.2vw,32px) clamp(24px,2.2vw,32px) 64px;position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff}
.anatomy li:before{content:counter(a);position:absolute;left:22px;top:22px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;font:650 14px/1 var(--text)}
.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:16px}
.contact-grid .card{display:grid;gap:12px;align-content:start}
.card-warn{background:var(--amber-bg);border-color:#f3dcb8}
.card-warn .way-ico{background:#fff;color:var(--amber)}
.card-warn p{color:#5c3b1c}
.band{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.band .eyebrow{margin-bottom:12px}
.band h2{margin-bottom:12px}
.ways-stack{grid-template-columns:1fr;gap:12px}
.ways-stack .way{grid-template-columns:auto 1fr;gap:2px 16px;padding:16px 24px}
.ways-stack .way-ico{grid-row:span 2;margin:0}
.gen-sec{padding:calc(var(--hdr) + clamp(24px,3.5vh,48px)) 0 clamp(32px,5vh,64px);background:linear-gradient(180deg,#f4f8fd,#fff 60%)}
.gen-left{display:grid;gap:16px}
.gen-intro{display:grid;gap:8px}
.gen-intro .eyebrow{margin:0}
.gen-intro h1{font-size:clamp(30px,2.9vw,44px);line-height:1.04;letter-spacing:-.028em;font-weight:600}
.gen-preview .mi{width:min(100%,calc((100svh - var(--hdr) - 96px) / 1.3));margin-inline:auto}

/* Responsive */
@media (max-width:1180px){
  .fields{grid-template-columns:1fr 1fr}
  .fc-a{left:-6%}.fc-b{right:-4%}
  .inv-tag.t1,.inv-tag.t3{left:-3%}.inv-tag.t2,.inv-tag.t4{right:-3%}
}
@media (max-width:1024px){
  .nav{display:none}
  .menu-toggle{display:inline-flex}
  .menu-open .nav{display:grid;position:fixed;top:var(--hdr);left:0;right:0;padding:12px var(--gutter) 24px;background:#fff;box-shadow:0 20px 40px -20px rgba(17,37,78,.3);gap:4px}
  .menu-open .nav a{padding:16px 12px;font-size:17px}
  .menu-open .nav .nav-cta{margin:8px 0 0;text-align:center;padding:16px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile-art{display:none}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anatomy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-grid{grid-template-columns:1fr 1fr}
  .contact-grid .card:first-child{grid-column:1/-1}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .auth{grid-template-columns:1fr}
  .auth-proof{display:none}
  .mb-steps{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px}
  .hero h1{font-size:clamp(36px,6vw,56px)}
  .float-chip{display:none}
  .ph-caption{display:none}
  .flow li:not(:last-child):after{display:none}
  .close-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media (max-width:820px){
  .inv-tag{display:none}
  .flow{grid-template-columns:1fr;gap:12px}
  .flow li{grid-template-columns:auto 1fr;gap:4px 16px;padding:16px 24px}
  .flow li .flow-n{grid-row:span 3;padding-top:4px}
  .ways{grid-template-columns:1fr;gap:12px}
  .way{grid-template-columns:auto 1fr;gap:2px 16px;padding:16px 24px}
  .way .way-ico{grid-row:span 3;margin:0}
  .mb-cols-3{grid-template-columns:1fr 1fr}
  .mb-faq{grid-template-columns:1fr}
  .limits,.tiles-3{grid-template-columns:1fr;gap:12px}
  .reply-rows{grid-template-columns:1fr;gap:12px}
}
@media (max-width:700px){
  :root{--hdr:64px}
  .brand .brand-mark{width:38px}
  .brand .brand-word{width:98px}
  .hero{min-height:100svh;padding:calc(var(--hdr) + 12px) 0 16px;align-items:stretch}
  .hero-grid{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:16px}
  .hero-copy{gap:12px}
  .hero h1{font-size:clamp(34px,9.6vw,44px);max-width:none}
  .hero .lede{font-size:15px;line-height:1.5}
  .hero-copy .eyebrow{font-size:11px}
  .hero-proof{display:none}
  .hide-sm{display:none}
  .show-sm{display:inline}
  .hero .cta-row{flex-wrap:nowrap}
  .hero .cta-row .btn{flex:1 1 0;padding:0 12px;gap:8px;white-space:nowrap}
  .price-grid{grid-template-columns:1fr}
  .flow li{grid-template-columns:28px 1fr}
  .flow-foot p{display:none}
  .cta-row .btn{min-height:46px;padding:0 16px;font-size:14px}
  .hero-visual{height:auto;min-height:0}
  .ph-stage{--ph-w:min(70vw,calc((100svh - var(--hero-copy-h,420px) - var(--hdr) - 46px) * .47))}
  .sec{padding-block:32px}
  .sec h2{font-size:clamp(26px,7.4vw,34px)}
  .sec-head{gap:12px;margin-bottom:24px}
  .lede{font-size:15px}
  .split,.inv-split{grid-template-columns:1fr;gap:24px}
  .inv-split .inv-copy{order:-1}
  .inv-stage{width:min(100%,calc((100svh - 330px) / 1.32))}
  .callouts{display:none}
  .inv-copy .lede{display:none}
  .tiles{grid-template-columns:1fr;gap:12px}
  .tile{grid-template-columns:1fr;padding:16px 16px;gap:4px}
  .tile p{font-size:14px;line-height:1.45}
  .flow li{padding:16px 16px}
  .flow p{font-size:14px}
  .keys kbd{min-height:26px;font-size:10.5px;padding:0 8px}
  .flow-foot{margin-top:16px}
  .way{padding:16px 16px}
  .way p{font-size:14px}
  .way-ico{width:40px;height:40px}
  .trades{display:none}
  .plan{gap:16px;padding:24px}
  .plan ul{font-size:14px;gap:8px}
  .side-cards{gap:12px}
  .side-cards .card{padding:16px 24px}
  .side-cards .card-hide-sm{display:none}
  .cta-panel{padding:24px;gap:12px}
  .faq summary{padding:12px 16px;font-size:15px}
  .faq details p{padding:0 16px 16px;font-size:14px}
  .close-grid{gap:24px}
  .page-hero h1,.mb-hero h1{font-size:clamp(32px,8.6vw,42px)}
  .page-hero{padding:calc(var(--hdr) + 24px) 0 32px}
  .page-hero .split{gap:24px}
  .page-hero .hero-inv{width:max(190px,min(100%,calc((100svh - var(--hdr) - var(--hero-copy-h,420px) - 84px) / 1.33)))}
  .contact-grid .way-ico,.free-card .way-ico{display:none}
  .auth-card{padding:16px 0 24px}
  .auth-card h1{font-size:28px}
  .auth-card>p{font-size:15px;margin-bottom:12px}
  .auth-demo-note{padding:8px 12px;margin-bottom:12px}
  .generator{grid-template-columns:1fr}
  .gen-preview{position:static}
  .gen-foot{flex-wrap:wrap}
  .gen-foot .action{flex:1 1 100%}
  .mb-cols-3{grid-template-columns:1fr}
  .feats{grid-template-columns:1fr;gap:12px}
  .feat{grid-template-columns:auto 1fr;gap:2px 16px;padding:16px 16px}
  .feat .way-ico{grid-row:span 2;margin:0;width:40px;height:40px}
  .feat p,.feat-list span,.timeline span,.anatomy span,.limits span{font-size:14px;line-height:1.45}
  .feat-list li,.timeline li{padding-block:12px}
  .timeline li{padding-left:46px}
  .timeline li:before{top:11px;width:32px;height:32px}
  .timeline li:not(:last-child):after{display:none}
  .anatomy{grid-template-columns:1fr;gap:8px}
  .anatomy li{padding:12px 16px 12px 48px}
  .anatomy li:before{left:14px;top:10px;width:28px;height:28px;font-size:12.5px}
  .limits li,.reply-rows li{padding:16px 16px;gap:8px}
  .reply-rows p{font-size:14px}
  .contact-grid{grid-template-columns:1fr;gap:12px}
  .contact-grid .card{padding:16px 16px;gap:8px}
  .mini-chat{padding:14px;gap:8px;border-radius:24px}
  .mc{font-size:13.5px;padding:8px 12px}
  .checks-lg li{font-size:15px}
  .mb-hero{padding:calc(var(--hdr) + 24px) 0 32px}
  .mb-section{padding-block:32px}
  .mb-section h2{font-size:clamp(26px,7.4vw,34px);margin-bottom:12px}
  .mb-eyebrow{margin-bottom:12px;font-size:11.5px}
  .mb-lede{margin-bottom:24px;font-size:15px}
  .mb-cards,.mb-steps,.mb-faq{gap:12px}
  .mb-list{gap:8px}
  .mb-card{padding:16px 16px}
  .mb-card h3,.mb-steps h3,.mb-faq h3{font-size:16.5px;margin-bottom:4px}
  .mb-card p,.mb-steps p,.mb-faq p,.mb-list li{font-size:14px;line-height:1.5}
  .mb-faq-item summary{padding:12px 16px}
  .mb-faq-item p{padding:0 16px 16px}
  .mb-steps li{padding:16px 16px 16px 58px}
  .mb-steps li:before{left:14px;top:14px;width:30px;height:30px}
  .mb-btn,.btn{flex:1 1 auto}
  .mb-table{font-size:13.5px}
  .mb-table th,.mb-table td{padding:12px 12px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .fields,.two{grid-template-columns:1fr 1fr}
  .item{grid-template-columns:minmax(0,1.6fr) minmax(0,.7fr) minmax(0,.9fr) 32px;gap:8px}
  .gen-form input,.gen-form select{font-size:16px;padding:0 8px}
  .app{grid-template-columns:1fr}
  .side{display:flex;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--line)}
  .side button{white-space:nowrap;width:auto}
  .stats{grid-template-columns:1fr}
  .table th:nth-child(2),.table td:nth-child(2){display:none}
  .toolbar{flex-wrap:wrap}
}
@media (max-width:420px){
  .fields{grid-template-columns:1fr}
}
/* ==========================================================================
   v8: the Mobillify touch (receipt edges, section tickets, approval stamp,
   hero particle field) and the interaction polish pass
   ========================================================================== */
:root{--mono:'Geist Mono',ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace}

/* Hero particle field */
.hero-field{position:absolute;left:0;top:0;z-index:-1;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.4),#000 48%);mask-image:linear-gradient(180deg,rgba(0,0,0,.4),#000 48%)}
@media (min-width:900px){.hero-field{-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 8%,#000 50%);mask-image:linear-gradient(90deg,rgba(0,0,0,.4) 8%,#000 50%)}}
.hero.has-field .hero-bg:after{opacity:.5}
.ph-stage .phone{translate:calc(var(--px,0) * -6px) calc(var(--py,0) * -6px)}
.ph-stage .float-chip{translate:calc(var(--px,0) * 12px) calc(var(--py,0) * 10px)}
.ph-stage .ph-glow{scale:calc(1 + var(--pin,0) * .06);opacity:calc(.85 + var(--pin,0) * .15)}

/* Live typing bubble in the hero eyebrow */
.eyebrow.has-typing:before{display:none}
.eb-typing{display:inline-flex;align-items:center;gap:3px;height:20px;margin-block:-3px;padding:0 8px;border-radius:10px 10px 10px 3px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 10px -6px rgba(17,37,78,.35)}
.eb-typing i{width:4px;height:4px;border-radius:50%;background:var(--blue);opacity:.35;animation:eb-dot 1.4s ease-in-out infinite}
.eb-typing i:nth-child(2){animation-delay:.18s}
.eb-typing i:nth-child(3){animation-delay:.36s}
@keyframes eb-dot{0%,60%,100%{opacity:.35;translate:0 0}30%{opacity:1;translate:0 -2px}}

/* Section tickets: every section label carries its number like an invoice line */
main{counter-reset:sec}
main :is(.sec-head,.inv-copy)>.eyebrow,main .mb-section .mb-eyebrow{counter-increment:sec}
main :is(.sec-head,.inv-copy)>.eyebrow:before,main .mb-section .mb-eyebrow:before{content:counter(sec,decimal-leading-zero);width:auto;height:auto;min-width:30px;padding:3px 8px;margin-block:-3px;border-radius:6px;background:#fff;border:1px dashed var(--line-2);font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--navy);text-align:center}
.sec-dark :is(.sec-head,.inv-copy)>.eyebrow:before{background:rgba(255,255,255,.06);border-color:rgba(143,227,207,.45);color:#8fe3cf}

/* Receipt edges: dark bands and the footer tear like the bottom of a receipt */
.sec-dark{-webkit-mask:radial-gradient(circle at 50% 0,#0000 7px,#000 7.5px) top/22px 51% repeat-x,radial-gradient(circle at 50% 100%,#0000 7px,#000 7.5px) bottom/22px 51% repeat-x;mask:radial-gradient(circle at 50% 0,#0000 7px,#000 7.5px) top/22px 51% repeat-x,radial-gradient(circle at 50% 100%,#0000 7px,#000 7.5px) bottom/22px 51% repeat-x}
.site-footer{-webkit-mask:radial-gradient(circle at 50% 0,#0000 7px,#000 7.5px) top/22px 51% repeat-x,linear-gradient(#000 0 0) bottom/100% 50% no-repeat;mask:radial-gradient(circle at 50% 0,#0000 7px,#000 7.5px) top/22px 51% repeat-x,linear-gradient(#000 0 0) bottom/100% 50% no-repeat}
.plan{-webkit-mask:radial-gradient(circle at 50% 100%,#0000 6px,#000 6.5px) bottom/20px 51% repeat-x,linear-gradient(#000 0 0) top/100% 50% no-repeat;mask:radial-gradient(circle at 50% 100%,#0000 6px,#000 6.5px) bottom/20px 51% repeat-x,linear-gradient(#000 0 0) top/100% 50% no-repeat}

/* Approval stamp lands on the sample invoice once it scrolls in */
.inv-stage:after{content:"Approved";content:"Approved"/"";position:absolute;z-index:3;right:-2%;bottom:2.5%;padding:.45em .8em .4em;border:3px solid currentColor;border-radius:10px;font:650 clamp(12px,1.45vw,18px)/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:#0b9c84;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);rotate:-9deg;opacity:.92;pointer-events:none}
.js .inv-stage:after{opacity:0;scale:1.7}
.js .inv-stage.is-in:after{animation:mb-stamp .55s var(--spring) 1s both}
@keyframes mb-stamp{0%{opacity:0;scale:1.7}60%{opacity:.95;scale:.96}100%{opacity:.92;scale:1}}

/* One time load in for hero copy */
@keyframes mb-rise{from{opacity:0;translate:0 16px}}
.js .hero-copy>*,.js .page-hero-copy>*,.js .mb-hero .mb-wrap>*{animation:mb-rise .9s var(--ease) both}
.js :is(.hero-copy,.page-hero-copy,.mb-hero .mb-wrap)>:nth-child(2){animation-delay:.07s}
.js :is(.hero-copy,.page-hero-copy,.mb-hero .mb-wrap)>:nth-child(3){animation-delay:.14s}
.js :is(.hero-copy,.page-hero-copy,.mb-hero .mb-wrap)>:nth-child(4){animation-delay:.21s}
.js :is(.hero-copy,.page-hero-copy,.mb-hero .mb-wrap)>:nth-child(n+5){animation-delay:.28s}
.js .hero-visual{animation:mb-rise 1.1s var(--ease) .2s both}

/* Tactile buttons: spring lift, light sweep, firm press */
.btn,.mb-btn,.auth-button,.auth-google-button{transition:transform .4s var(--spring),box-shadow .4s var(--ease),background-color .25s,border-color .25s,color .25s,background-position .9s var(--ease)}
.btn-primary,.mb-btn-primary,.nav .nav-cta,.auth-button{background-image:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);background-size:260% 100%;background-position:100% 0;background-repeat:no-repeat}
.nav a{transition:background-color .2s,color .2s,transform .3s var(--spring),background-position .9s var(--ease)}
.cur button{transition:background-color .2s,color .2s,transform .3s var(--spring)}
.site-footer a{transition:color .2s}
.gen-form input,.gen-form select{transition:border-color .2s,box-shadow .2s,background-color .2s}
.btn:active,.mb-btn:active,.auth-button:active,.auth-google-button:active,.nav a:active,.cur button:active{transform:translateY(0) scale(.97);transition-duration:.08s}

/* Cards and interactive bits */
.tile,.feat,.card,.mb-card,.mb-steps li,.flow li,.plan,.faq details,.mb-faq-item{transition:transform .45s var(--spring),box-shadow .45s var(--ease),border-color .3s,background-color .3s}
.tile-art>*{transition:translate .5s var(--spring)}
.way-ico{transition:transform .4s var(--spring),background-color .3s,color .3s}
.keys kbd{transition:translate .2s var(--ease),box-shadow .2s}
.inv-stage .mi,.hero-inv .mi{transition:transform .5s var(--spring)}
.inv-tag{transition:opacity .3s,scale .35s var(--spring),box-shadow .3s}
.callouts li:before{transition:background-color .25s,color .25s,scale .35s var(--spring)}
.callouts li.is-on:before{background:var(--navy);color:#fff;scale:1.08}
.inv-stage[data-focus] .inv-tag{opacity:.4}
.inv-stage[data-focus="1"] .t1,.inv-stage[data-focus="2"] .t2,.inv-stage[data-focus="3"] .t3,.inv-stage[data-focus="4"] .t4{opacity:1;scale:1.07;box-shadow:0 0 0 4px rgba(1,200,168,.35),var(--shadow)}
.inv-stage :is(.mi-biz,.mi-chip.is-due,.mi-table,.mi-terms){outline:calc(var(--e) * .3) solid transparent;outline-offset:calc(var(--e) * .45);transition:outline-color .3s}
.inv-stage[data-focus="1"] .mi-biz,.inv-stage[data-focus="2"] .mi-chip.is-due,.inv-stage[data-focus="3"] .mi-table,.inv-stage[data-focus="4"] .mi-terms{outline-color:var(--teal)}
.faq details[open]>:not(summary),.mb-faq-item[open]>:not(summary){animation:mb-rise .45s var(--ease)}

@media (hover:hover) and (pointer:fine){
  .btn:hover,.mb-btn:hover,.auth-google-button:hover{transform:translateY(-2px)}
  .btn-primary:hover,.mb-btn-primary:hover,.auth-button:hover,.nav .nav-cta:hover{background-position:0 0}
  .btn-primary:hover,.mb-btn-primary:hover{box-shadow:0 18px 34px -14px rgba(17,37,78,.65)}
  .btn-ghost:hover,.mb-btn-secondary:hover,.auth-google-button:hover{background-color:#fff;box-shadow:0 12px 26px -16px rgba(17,37,78,.45)}
  .btn-light:hover{box-shadow:0 16px 30px -14px rgba(0,0,0,.45)}
  .btn-line-light:hover{background-color:rgba(255,255,255,.1)}
  .nav a:not(.nav-cta):hover{color:var(--blue)}
  .cur button:not([aria-pressed=true]):hover{color:#fff;background-color:rgba(255,255,255,.08)}
  body:not([data-view]) :is(.tile,.feat,.card,.mb-card,.mb-steps li):hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(17,37,78,.04),0 24px 44px -24px rgba(17,37,78,.34);border-color:var(--line-2)}
  :is(.tile,.feat,.way,.card,.mb-card)[data-spot]:hover{background-image:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(1,200,168,.09),transparent 65%)}
  .tile:hover .tile-art>*{translate:0 -3px}
  .way:hover .way-ico{transform:rotate(-6deg) scale(1.08);background:var(--navy);color:#fff}
  .flow li:hover{transform:translateY(-4px);border-color:rgba(143,227,207,.45)}
  .flow li:hover .keys kbd{translate:0 1px}
  .plan:hover{transform:translateY(-4px)}
  .faq details:hover,.mb-faq-item:hover{border-color:var(--line-2);box-shadow:0 14px 30px -20px rgba(17,37,78,.4)}
  .inv-stage:hover .mi,.hero-inv .mi:hover{transform:translateY(-6px)}
  .callouts li{cursor:default}
}

/* v9: type system. Inter (optical sizes) for headings and text, Geist Mono for labels and numbers */
body{font-optical-sizing:auto}
:is(.eyebrow,.mb-eyebrow,.auth-kicker,.auth-proof-copy span,.site-footer h2,.flow-n,.plan-name,.steps i,.beta-badge){font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.08em}
:is(.mb-steps li,.timeline li):before,.callouts li:before,kbd{font-family:var(--mono);font-weight:500}
.price b,.dcard-total,.dcard-rows,.app .card b,.table td{font-variant-numeric:tabular-nums}
.sec-dark :is(h2,h3),.plan h3{font-weight:540}
h3,h4{letter-spacing:-.014em}

/* ==========================================================================
   v10: surface polish after the NexSaas payment template. Neutral greys
   instead of blue tints, a deeper ink, hairline cards with quiet depth,
   clean section edges and more room between sections on desktop.
   The invoice mock and the hero phone demo keep the v9 tokens.
   ========================================================================== */
:root{
  --navy:#0e1a33;--ink:#111a2c;--muted:#5a6273;
  --wash:#f6f7f9;--chip:#eff3f9;--head:#f5f6f8;--line:#e5e8ed;--line-2:#d5dae2;
  --grad:linear-gradient(100deg,#1d4fd0 0%,#2563d9 45%,#0a9e90 100%);
  --dark:#0a1327;--lift:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 0 0 1px rgba(16,24,40,.04),0 1px 2px rgba(16,24,40,.06),0 12px 28px -14px rgba(16,24,40,.24);
  --shadow-lg:0 0 0 1px rgba(16,24,40,.04),0 2px 4px rgba(16,24,40,.04),0 32px 64px -28px rgba(16,24,40,.34);
}
.mi,.ph-stage{--navy:#11254e;--ink:#141d33;--muted:#565c6c;--wash:#f6f9fd;--chip:#f0f6fc;--head:#ecf3fa;--line:#dce5ee;--line-2:#ccd9e7;--grad:linear-gradient(100deg,#0040cf 0%,#1f6fd8 45%,#01c8a8 100%);--shadow:0 1px 2px rgba(17,37,78,.06),0 12px 32px -12px rgba(17,37,78,.18);--shadow-lg:0 2px 4px rgba(17,37,78,.05),0 40px 80px -32px rgba(17,37,78,.35)}

/* Light surfaces: neutral, not blue tinted */
.hero{background:#f7f8fa}
.hero-bg{background:radial-gradient(60% 70% at 78% 40%,rgba(10,158,144,.12),transparent 60%),radial-gradient(55% 65% at 92% 85%,rgba(37,99,217,.12),transparent 62%),radial-gradient(45% 55% at 8% 0%,rgba(37,99,217,.06),transparent 60%),linear-gradient(180deg,#f9fafb 0%,#f2f4f7 100%)}
.page-hero,.mb-hero{background:linear-gradient(180deg,#f6f7f9,#fff)}
.page-hero:before,.mb-hero:before{opacity:.7}
.gen-sec{background:linear-gradient(180deg,#f6f7f9,#fff 60%)}
.auth-proof{background:linear-gradient(160deg,#f6f7f9 0%,#eceff4 100%)}
.site-header.is-solid,.menu-open .site-header{background:rgba(255,255,255,.86);box-shadow:0 1px 0 rgba(16,24,40,.07)}

/* Dark surfaces: one deep ink with a soft light source, clean straight edges */
.sec-dark{background:radial-gradient(70% 120% at 50% 0%,rgba(37,99,217,.16),transparent 62%),var(--dark);-webkit-mask:none;mask:none}
.site-footer{background:var(--dark);color:#c3cad7;-webkit-mask:none;mask:none}
.site-footer h2,.foot-base{color:#8a93a6}
.foot-base{border-top-color:rgba(255,255,255,.08)}
.plan{background:var(--dark);-webkit-mask:none;mask:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),var(--shadow-lg)}
.flow li{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.limits li,.reply-rows li{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}
.cta-panel{background:radial-gradient(80% 100% at 100% 100%,rgba(10,158,144,.42),transparent 55%),linear-gradient(135deg,#16306f 0%,#0f2150 50%,var(--dark) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),var(--shadow-lg)}
.cta-panel:after{border-color:rgba(255,255,255,.06)}

/* Cards: hairline edge, quiet lift, no nested borders */
.card,.way,.mb-card,.mb-steps li,.anatomy li,.faq details,.mb-faq-item,.mb-table-wrap,.workspace-content form.invoice{box-shadow:var(--lift)}
.beta-card,.gen-form,.setup-panel{box-shadow:var(--shadow)}
.tile-art{border:0;background:radial-gradient(90% 120% at 0% 0%,rgba(37,99,217,.24),transparent 60%),#0f1a31;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.tile-art .art-brand,.tile-art .art-tax p{border-color:transparent}
.tile-art .art-pills em{color:#8a93a6}
.tile-art .art-bubble{color:#fff}
.way-ico{box-shadow:inset 0 0 0 1px rgba(37,99,217,.1)}
.mb-example{border-style:solid;box-shadow:var(--lift)}
.mb-table thead th,.table th{color:#5a6273}

/* Labels, keys and buttons: solid, flatter, less glow */
main :is(.sec-head,.inv-copy)>.eyebrow:before,main .mb-section .mb-eyebrow:before{border:1px solid var(--line-2);background:#fff;box-shadow:var(--lift);color:var(--ink)}
.sec-dark :is(.sec-head,.inv-copy)>.eyebrow:before{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);box-shadow:none;color:#8fe3cf}
kbd{box-shadow:0 1px 0 var(--line-2)}
.sec-dark kbd{box-shadow:0 1px 0 rgba(255,255,255,.1)}
.sec-dark kbd.is-on{box-shadow:0 1px 0 #8fe3cf}
.btn-primary,.mb-btn-primary,.nav .nav-cta,.auth-button,form.invoice button,.button{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(10,19,39,.22),0 4px 12px -4px rgba(10,19,39,.3)}
.btn-primary:hover,.mb-btn-primary:hover,.nav .nav-cta:hover,.auth-button:hover,form.invoice button:hover,.button:hover{background-color:#060d1f}
.btn-ghost,.mb-btn-secondary,.auth-google-button{background-color:#fff;border-color:var(--line-2);box-shadow:var(--lift)}
.btn-ghost:hover,.mb-btn-secondary:hover,.auth-google-button:hover{border-color:#aab3c2}

/* Fields: white, hairline, soft focus ring */
#demo-auth input,.gen-form input,.gen-form select,form.invoice input,form.invoice select,.workspace-content select{background-color:#fff;border-color:var(--line-2);box-shadow:var(--lift)}
#demo-auth input:focus,form.invoice input:focus,form.invoice select:focus,.gen-form input:focus,.gen-form select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,217,.12)}

/* More room between sections on desktop. Phones keep the one screen per section rhythm. */
@media (min-width:701px){
  .sec:not(#invoice){padding-block:clamp(96px,8vw,128px)}
  .sec-head{margin-bottom:clamp(32px,4vw,64px)}
  .sec h2,.mb-section h2{line-height:1.1}
  .mb-section{padding-block:clamp(64px,7vw,104px)}
}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover,.mb-btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 4px rgba(10,19,39,.18),0 14px 28px -12px rgba(10,19,39,.45)}
  .btn-ghost:hover,.mb-btn-secondary:hover,.auth-google-button:hover{box-shadow:0 1px 2px rgba(16,24,40,.05),0 10px 22px -14px rgba(16,24,40,.32)}
  body:not([data-view]) :is(.tile,.feat,.card,.mb-card,.mb-steps li):hover{box-shadow:0 1px 2px rgba(16,24,40,.04),0 22px 40px -22px rgba(16,24,40,.28);border-color:var(--line-2)}
  .faq details:hover,.mb-faq-item:hover{box-shadow:0 12px 26px -18px rgba(16,24,40,.3)}
}

/* ==========================================================================
   v11: section labels. Soft pills in sentence case set in the text font,
   no section numbers, after the NexSaas "Reasons to select us" label.
   ========================================================================== */
:is(.eyebrow,.mb-eyebrow,.auth-kicker,.auth-proof-copy span){display:inline-flex;align-items:center;width:fit-content;gap:8px;padding:4px 12px 4px 12px;border-radius:999px;background:#eef3fc;box-shadow:inset 0 0 0 1px rgba(37,99,217,.1);color:#1e3f91;font:500 13px/1.2 var(--text);letter-spacing:0;text-transform:none}
:is(.eyebrow,.mb-eyebrow,.auth-kicker):before,main :is(.sec-head,.inv-copy)>.eyebrow:before,main .mb-section .mb-eyebrow:before{content:"";flex:none;width:6px;height:6px;min-width:0;padding:0;margin:0;border:0;border-radius:50%;background:var(--grad);box-shadow:none}
.auth-proof-copy span:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--grad)}
.sec-dark :is(.eyebrow,.mb-eyebrow){background:rgba(143,227,207,.1);box-shadow:inset 0 0 0 1px rgba(143,227,207,.2);color:#a6eedc}
.sec-dark :is(.sec-head,.inv-copy)>.eyebrow:before{border:0;background:#5fd6bd;box-shadow:none}
.eyebrow .eb-typing{height:auto;margin:0;padding:0;background:none;border:0;box-shadow:none}
.site-footer h2{font:600 13.5px/1.2 var(--text);letter-spacing:0;text-transform:none;color:#e6e9f0}
main .plan-name{font:600 14px/1 var(--text);letter-spacing:0;text-transform:none}
main .flow-n{font:500 13px/1 var(--text);letter-spacing:0}
main .beta-badge{font:600 12.5px/1 var(--text);letter-spacing:0;text-transform:none}
@media (max-width:700px){
  :is(.eyebrow,.mb-eyebrow,.auth-kicker,.auth-proof-copy span),.hero-copy .eyebrow{font-size:12.5px;padding:4px 12px 4px 12px}
  main .sec-head>.eyebrow{margin-block:-4px}
}

/* ==========================================================================
   v12: one neutral system for labels, FAQ, pricing cards and the sample
   workspace. White hairline pills with a teal status dot, ink icons and
   links, and the closing panel on the same deep ink as the plan card.
   ========================================================================== */
:root{--chip:#f1f3f6}

/* Labels: white hairline pill, ink text, teal dot */
:is(.eyebrow,.mb-eyebrow,.auth-kicker,.auth-proof-copy span){background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(16,24,40,.05);color:#2a3244}
:is(.eyebrow,.mb-eyebrow,.auth-kicker):before,main :is(.sec-head,.inv-copy)>.eyebrow:before,main .mb-section .mb-eyebrow:before,.auth-proof-copy span:before{background:#0a9e90;box-shadow:0 0 0 3px rgba(10,158,144,.14)}
.sec-dark :is(.eyebrow,.mb-eyebrow){background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:#dde2ea}
.sec-dark :is(.sec-head,.inv-copy)>.eyebrow:before{background:#5fd6bd;box-shadow:0 0 0 3px rgba(95,214,189,.16)}
.eb-typing i{background:#0a9e90}
main .beta-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(16,24,40,.05);color:#2a3244}
main .beta-badge:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#d48a1c;box-shadow:0 0 0 3px rgba(212,138,28,.16)}

/* Icons and links: ink on white, no blue tinted chips */
.way-ico,.beta i{background:linear-gradient(180deg,#fff,#f3f5f8);box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(16,24,40,.05);color:var(--ink)}
.card-warn .way-ico{color:var(--amber)}
.link-arrow,.way .link-arrow{color:var(--ink)}
.link-arrow:hover{color:#000}
.sec-dark .link-arrow{color:#fff}
.callouts li:before{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(16,24,40,.05);color:var(--ink)}
.mb-notice{border-left-color:var(--ink)}
.nav a[aria-current=page]{color:var(--ink)}

/* FAQ: hairline rows, ink toggle that fills when open */
.faq summary{color:var(--ink)}
.faq summary:after,.mb-faq-item summary:after{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%23111a2c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1px var(--line-2),0 1px 2px rgba(16,24,40,.05);transition:transform .3s var(--ease),background-color .25s}
.faq details[open] summary:after,.mb-faq-item[open] summary:after{background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5v9M3.5 8h9' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");box-shadow:none}
.faq details[open],.mb-faq-item[open]{border-color:var(--line-2);box-shadow:var(--shadow)}

/* Closing panel: the plan card's ink and teal light, so the two dark cards match */
.cta-panel{background:radial-gradient(55% 70% at 88% 112%,rgba(10,158,144,.42),transparent 70%),radial-gradient(70% 90% at 0% 0%,rgba(37,99,217,.16),transparent 60%),var(--dark)}

/* Pricing side cards: one white surface with the same depth as the rest */
.side-cards .card{background:#fff;border-color:var(--line);box-shadow:var(--shadow)}
@media (min-width:701px){
  .side-cards{grid-template-rows:1fr 1fr}
  .side-cards>.card:first-child,.side-cards .beta>div{display:flex;flex-direction:column;align-items:flex-start}
  .side-cards .beta>div{align-self:stretch}
  .side-cards .card .link-arrow{margin-top:auto;padding-top:16px}
}

/* Sample workspace: neutral sidebar state */
.side button.active{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(16,24,40,.06)}

@media (hover:hover) and (pointer:fine){
  .nav a:not(.nav-cta):hover{color:var(--ink)}
  .faq details:hover summary:after,.mb-faq-item:hover summary:after{box-shadow:inset 0 0 0 1px #aab3c2,0 1px 2px rgba(16,24,40,.05)}
  .faq details[open]:hover summary:after,.mb-faq-item[open]:hover summary:after{box-shadow:none}
}

/* ==========================================================================
   v13: final polish after Linear, Stripe and Ramp. Lighter display weights
   with tighter leading, one ink colour in the hero headline with a muted
   second line instead of gradient text, smaller radii, slimmer buttons,
   quieter nav links and dark card shadows, inline links in ink, and the
   pricing heading aligned left like every other section.
   The invoice mock and the hero phone demo keep their own tokens.
   ========================================================================== */
:root{--r-lg:16px;--r-md:12px;--r-sm:8px;--shadow-lg:0 0 0 1px rgba(16,24,40,.04),0 2px 4px rgba(16,24,40,.04),0 24px 48px -26px rgba(16,24,40,.32)}
.mi,.ph-stage{--r-lg:24px;--r-md:16px;--r-sm:10px}

/* Type: display headings lighter and tighter, small headings keep their weight */
:is(.hero,.page-hero,.mb-hero,.onboarding,.gen-intro) h1,.auth-card h1,.app h1,.sec h2,.mb-section h2,.sec-dark :is(h2,h3),.cta-panel h2,.free-card h2,.auth-proof-copy h2{font-weight:530}
.hero h1{letter-spacing:-.034em}
.hero h1 .grad{background:none;color:#5b6780}
.hero .lede{color:#4a5468}
.sec h2,.mb-section h2{letter-spacing:-.026em}
@media (min-width:901px){
  .hero h1{font-size:clamp(42px,4.7vw,76px);line-height:1.02}
}
@media (min-width:701px){
  .sec h2{font-size:clamp(30px,3.1vw,46px);line-height:1.08}
  .mb-section h2{font-size:clamp(28px,2.8vw,42px)}
  .page-hero h1,.mb-hero h1{font-size:clamp(36px,4vw,58px);line-height:1.04}
  .inv-copy>h2{margin-bottom:16px}
}

.sec-head.center{margin-inline:0;text-align:left;justify-items:start}

/* Buttons: slimmer, medium weight, one quiet shadow */
@media (min-width:701px){
  .btn{min-height:48px;padding:0 24px}
}
.btn,.mb-btn{font-weight:550;letter-spacing:-.006em}
.btn-primary,.mb-btn-primary,.nav .nav-cta,.auth-button,form.invoice button,.button{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(10,19,39,.2)}

/* Nav: quiet links, ink on hover and on the current page */
@media (min-width:1025px){
  .nav a:not(.nav-cta){color:#4a5468;font-weight:500}
  .nav a[aria-current=page]{color:var(--ink)}
  .nav .nav-cta{padding:12px 16px;font-weight:550}
}

/* Surfaces: radii to match the new scale */
.plan,.cta-panel{border-radius:20px}
.tile-art{border-radius:10px}
.way-ico{border-radius:10px}

/* Card actions sit on one line across a row */
@media (min-width:821px){
  .ways:not(.ways-stack) .way,.flow li{grid-template-rows:auto auto 1fr auto}
}

/* Inline links in running text: ink with a hairline underline */
main :is(p,li,dd,td) a:not(.btn,.mb-btn,.link-arrow,[class*="btn"]){color:var(--ink);text-decoration-color:rgba(17,26,44,.3);text-decoration-thickness:1px}
main :is(p,li,dd,td) a:not(.btn,.mb-btn,.link-arrow,[class*="btn"]):hover{color:#000;text-decoration-color:currentColor}
.sec-dark :is(p,li) a:not(.btn,.link-arrow){color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.auth-register a,.auth-text-button{color:var(--ink);text-decoration-color:rgba(17,26,44,.3);text-decoration-thickness:1px}
.auth-text-button:hover{color:#000}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover,.mb-btn-primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 4px rgba(10,19,39,.16),0 10px 22px -12px rgba(10,19,39,.4)}
}

/* ==========================================================================
   v14: colour with intent. The neutral system stays as the canvas and the
   brand blue to teal comes back in a few chosen places, the way Stripe,
   Ramp, Apple and Cloudflare spend one accent: the hero headline, the main
   call to action, the channel icons, link arrows, text links and the plan
   price. The invoice mock and the hero phone demo keep their own tokens.
   ========================================================================== */
:root{--accent:#1a4fdc;--accent-hi:#1442bd;--accent-ink:#1a4fdc}

/* Hero headline: the brand gradient, deeper so the teal end still reads */
.hero h1 .grad{background:linear-gradient(100deg,#0b44d6 0%,#1d5ee8 38%,#1279c9 62%,#0a9a8c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.06em}
.hero-bg{background:radial-gradient(60% 70% at 78% 40%,rgba(10,158,144,.16),transparent 60%),radial-gradient(55% 65% at 92% 85%,rgba(26,79,220,.18),transparent 62%),radial-gradient(50% 60% at 6% 0%,rgba(26,79,220,.08),transparent 60%),linear-gradient(180deg,#f9fafb 0%,#f2f4f7 100%)}

/* Main call to action: one brand blue with a soft glow. Light buttons on dark panels and the ink nav button stay as they are. */
.btn-primary,.mb-btn-primary,.auth-button,form.invoice button,.button{background-color:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(11,40,130,.28),0 8px 20px -8px rgba(26,79,220,.55)}
.btn-primary:hover,.mb-btn-primary:hover,.auth-button:hover,form.invoice button:hover,.button:hover{background-color:var(--accent-hi);color:#fff}
@media (hover:hover) and (pointer:fine){.btn-primary:hover,.mb-btn-primary:hover,.auth-button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 4px rgba(11,40,130,.24),0 14px 30px -10px rgba(26,79,220,.6)}}

/* Icons: brand blue glyphs on the white chips, filled blue on hover */
.way-ico,.beta i{color:var(--accent);background:linear-gradient(180deg,#fff,#f3f6fd);box-shadow:inset 0 0 0 1px rgba(26,79,220,.16),0 1px 2px rgba(16,24,40,.05)}
.card-warn .way-ico{color:var(--amber);background:linear-gradient(180deg,#fff,#fbf6ef);box-shadow:inset 0 0 0 1px rgba(132,83,38,.18),0 1px 2px rgba(16,24,40,.05)}
@media (hover:hover) and (pointer:fine){.way:hover .way-ico{background:var(--accent);color:#fff;box-shadow:0 6px 16px -6px rgba(26,79,220,.55)}.card-warn.way:hover .way-ico{background:var(--amber)}}

/* Links: ink label with a blue arrow, blue on hover. Text links in body copy are brand blue. */
.link-arrow:after{color:var(--accent)}
.link-arrow:hover{color:var(--accent)}
.sec-dark .link-arrow:after{color:#7fdcc7}
.sec-dark .link-arrow:hover{color:#fff}
main :is(p,li,dd,td) a:not(.btn,.mb-btn,.link-arrow,[class*="btn"]),.auth-register a,.auth-text-button{color:var(--accent-ink);text-decoration-color:rgba(26,79,220,.32)}
main :is(p,li,dd,td) a:not(.btn,.mb-btn,.link-arrow,[class*="btn"]):hover,.auth-register a:hover,.auth-text-button:hover{color:var(--accent-hi);text-decoration-color:currentColor}
.sec-dark :is(p,li) a:not(.btn,.link-arrow){color:#fff;text-decoration-color:rgba(255,255,255,.4)}

/* Key figure: the plan price picks up a light version of the brand gradient */
.plan .price b{background:linear-gradient(100deg,#fff 0%,#e4ecff 45%,#9ee6d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

::selection{background:rgba(26,79,220,.16)}
.sec-dark ::selection,.site-footer ::selection{background:rgba(127,220,199,.3)}

/* ==========================================================================
   v15: craft pass. Focus, states, loading, empty states, optical alignment
   and one heading scale. Nothing here touches the invoice mock or the phone.
   ========================================================================== */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ring:0 0 0 3px rgba(26,79,220,.2)}

/* Browser chrome: brand caret and native controls, thin inner scrollbars */
html{accent-color:var(--accent);-webkit-tap-highlight-color:transparent}
body{caret-color:var(--accent)}
:is(.table-card,.mb-table-wrap,.side,textarea){scrollbar-width:thin;scrollbar-color:#c4cad5 transparent}

/* Focus: a 2px ring that follows each control's own shape */
:focus-visible{outline-color:var(--accent)}
:where(a:not([class])):focus-visible{border-radius:4px}
:is(.sec-dark,.site-footer,.plan) :focus-visible{outline-color:#9ee6d4}
.cta-panel :focus-visible{outline-color:#fff}
html :is(input,select,textarea):not([type=checkbox],[type=radio],[type=submit],[type=button],[type=range]):is(:focus,:focus-visible),html #demo-auth input:focus{outline:0;border-color:var(--accent);box-shadow:var(--ring);background-color:#fff}
@media (hover:hover){:is(input,select,textarea):not([type=checkbox],[type=radio],[type=submit],[type=button]):not(:focus,:disabled):hover{border-color:#b6bfcc}}

/* Transitions on every control, quick and eased */
:where(button,summary,a,select,input,textarea):where(:not(.mi *,.ph-stage *,.phone *)){transition:color .16s var(--ease-out),background-color .16s var(--ease-out),border-color .16s var(--ease-out),box-shadow .18s var(--ease-out),opacity .16s var(--ease-out),scale .12s var(--ease-out)}

/* Press feedback */
:is(.side button,#add,.remove,.button,form.invoice button,.menu-toggle):active:not(:disabled){scale:.97;transition-duration:.06s}
:is(.faq summary,.mb-faq-item summary):active{opacity:.72}
main :is(p,li,dd,td) a:not([class]):active,.link-arrow:active{opacity:.7}

/* Cursors */
select,summary,label:has(>input[type=checkbox]),input[type=checkbox],input[type=radio]{cursor:pointer}

/* Disabled */
:is(button,input,select,textarea):disabled{opacity:.5;cursor:not-allowed}
:is(button,.btn):disabled:hover{transform:none}
.remove:disabled:hover{color:var(--muted);border-color:var(--line)}

/* Loading: a spinner inside the button while work is in progress */
:is(button,.btn)[aria-busy=true]:disabled{opacity:.85;cursor:progress}
:is(button,.btn)[aria-busy=true]::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:mb-spin .7s linear infinite}
.btn[aria-busy=true]::after{display:none}
@keyframes mb-spin{to{rotate:360deg}}

/* Generator controls: drawn icons instead of typed glyphs */
#add{display:inline-flex;align-items:center;gap:8px}
#add:hover:not(:disabled){border-color:var(--accent);background:#f5f8ff}
.remove{display:grid;place-items:center;padding:0}
.remove svg,#add svg{flex:none}

/* Sample workspace: status pills, number columns, icons, empty state */
.pill{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 8px;border-radius:999px;font:600 12.5px/1.2 var(--text);background:#f2f4f7;color:#475467;box-shadow:inset 0 0 0 1px rgba(16,24,40,.06);white-space:nowrap}
.pill:before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-paid{background:#ecf8f2;color:#1f6b4a;box-shadow:inset 0 0 0 1px rgba(31,107,74,.16)}
.pill-sent{background:#eff4ff;color:var(--accent);box-shadow:inset 0 0 0 1px rgba(26,79,220,.16)}
.pill-overdue{background:#fef1ef;color:#b42318;box-shadow:inset 0 0 0 1px rgba(180,35,24,.16)}
.table :is(th,td).num{text-align:right;font-variant-numeric:tabular-nums}
@media (hover:hover){.table tbody tr:hover td:not(.empty){background:#fafbfd}}
.table td.empty{padding:48px 24px;text-align:center}
.table td.empty b{display:block;font:600 15px/1.3 var(--display);color:var(--navy)}
.table td.empty span{display:block;margin-top:4px;color:var(--muted);font-size:14px}
.side .ico{flex:none;color:#8a93a6}
.side button:hover .ico{color:var(--navy)}
.side button.active .ico{color:var(--accent)}
.button{gap:8px}
.button svg{flex:none}

/* Type: one heading scale, tight leading on every heading */
:where(h1,h2):where(:not(.mi *,.ph-stage *,.phone *)){line-height:1.2}
:where(h3,h4):where(:not(.mi *,.ph-stage *,.phone *)){line-height:1.3}
.legal-body h2{line-height:1.2}
.app h1{line-height:1.1}
.steps h3{line-height:1.3}
@media (min-width:701px){
  .mb-section h2{font-size:clamp(30px,3.1vw,46px);line-height:1.08}
  .mb-card h3,.mb-steps h3,.mb-faq h3{font-size:clamp(18px,1.4vw,21px);line-height:1.25}
}
.band .eyebrow{margin-bottom:16px}

/* Optical alignment: badges and checks centred on the first line of text */
.mb-steps li{padding-left:76px}
.mb-steps li:before{left:24px;top:18px}
.timeline li:before{top:9px}
.timeline li:not(:last-child):after{top:49px;bottom:-5px}
.feat-list li:before{top:17px}
.mb-list li:before{top:calc(.2em - 2px)}
.beta i{width:36px;height:36px;border-radius:10px;margin-top:-6px}
.callouts li:before{margin-top:-4px}
:is(.checks,.feat-list,.mb-list) li:before{background-color:#e9f6ef;box-shadow:inset 0 0 0 1px rgba(60,126,95,.16)}

/* FAQ rows answer the pointer */
@media (hover:hover){:is(.faq summary,.mb-faq-item summary):hover{color:var(--accent)}}

/* Beta program page */
.beta-card .link-arrow{justify-self:start}
.beta-plan .plan-count{font:600 12.5px/1 var(--text);color:#c9d5ea;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.tiers{list-style:none;margin:0;padding:0;display:grid}
.plan .tiers li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:4px 16px;padding:16px 0;border-top:1px solid rgba(255,255,255,.12)}
.plan .tiers li:before{content:none}
.tiers span{font:500 13px/1.3 var(--mono);color:#8fa3c8}
.tiers b{font:600 clamp(22px,2vw,28px)/1.1 var(--display);letter-spacing:-.02em;color:#fff;text-align:right}
.tiers li:first-child b{background:linear-gradient(100deg,#fff 0%,#e4ecff 45%,#9ee6d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.tiers li:last-child b{color:#8fa3c8}
.tiers p{grid-column:1/-1;font-size:15px;line-height:1.5;color:#b3c2dc}
.beta-form{position:relative;display:grid;gap:24px;padding:clamp(24px,3vw,32px);border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid .span-2{grid-column:1/-1}
.beta-form label{display:grid;gap:8px;min-width:0;font:600 13px/1.2 var(--text);color:var(--navy)}
.beta-form :where(input:not([type=checkbox]),select,textarea){width:100%;min-width:0;min-height:48px;padding:0 16px;border:1px solid var(--line-2);border-radius:12px;background-color:#fff;font:500 15px/1.2 var(--text);color:var(--ink);box-shadow:var(--lift)}
.beta-form textarea{min-height:120px;padding:12px 16px;line-height:1.5;resize:vertical}
.beta-form select{appearance:none;-webkit-appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5' fill='none' stroke='%23565c6c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:16px}
.beta-form select:invalid{color:#7b8496}
.beta-form option{color:var(--ink)}
.beta-form :is(input,select,textarea):user-invalid{border-color:#c2410c}
.label-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.opt{font:500 12px/1.2 var(--text);color:var(--muted)}
.beta-form .consent{grid-template-columns:20px minmax(0,1fr);gap:12px;align-items:start;font:400 14.5px/1.5 var(--text);color:var(--muted)}
.consent input{width:20px;height:20px;margin:1px 0 0}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
@media (min-width:901px){#apply .sec-head{position:sticky;top:calc(var(--hdr) + 32px)}}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form-alert{padding:12px 16px;border-radius:12px;background:#fef1ef;color:#9a2a14;box-shadow:inset 0 0 0 1px rgba(180,35,24,.2);font:500 14.5px/1.5 var(--text)}
.form-alert:focus{outline:0}
.done-mark{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:#1f6b4a;background:linear-gradient(180deg,#fff,#eef9f4);box-shadow:inset 0 0 0 1px rgba(60,126,95,.2),0 1px 2px rgba(16,24,40,.05),0 12px 24px -12px rgba(60,126,95,.4)}
.done-mark svg{width:24px;height:24px}
.nf-links{list-style:none;margin:0;padding:24px 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 32px;width:100%}

@media (max-width:700px){
  .mb-steps li{padding-left:58px}
  .mb-steps li:before{left:16px;top:12px}
  .timeline li:before{top:7px}
  .feat-list li:before{top:13px}
  .form-grid{grid-template-columns:1fr}
  .beta-form :is(input:not([type=checkbox]),select,textarea){font-size:16px}
  .form-foot .btn{flex:1 1 100%}
}

/* ===== v16 structure: section flow, nav zones, footer sitemap. Cues from Linear, Stripe, Ramp, Apple ===== */
/* Nav: brand left, section links centred, account actions right */
@media (min-width:1025px){
  .site-header .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .nav{display:contents}
  .nav-links{display:flex;align-items:center;gap:4px;justify-self:center}
  .nav-end{display:flex;align-items:center;gap:4px;justify-self:end}
  .nav .nav-cta{margin-left:8px}
}
@media (max-width:1024px){
  .menu-open .nav-links,.menu-open .nav-end{display:contents}
}
/* Hero: the visual gets the room, the headline column stays tight */
.hero{min-height:min(100svh,940px)}
/* Proof strip: the three promises sit on their own hairline band under the hero */
.proof-band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-band .hero-proof{display:flex;justify-content:center;margin:0;padding:20px 0;gap:12px 0;font-size:14.5px;color:#2a3244}
.proof-band .hero-proof li{padding:0 32px}
.proof-band .hero-proof li+li{border-left:1px solid var(--line)}
.proof-band .hero-proof li:before{background-color:#e9f6ef;box-shadow:inset 0 0 0 1px rgba(60,126,95,.18)}
/* How it works: numbered columns on a hairline, no card chrome */
.flow{gap:clamp(24px,3vw,48px)}
.flow li{padding:32px 0 0;border-radius:0;background:none;border:0;border-top:1px solid rgba(255,255,255,.16);box-shadow:none}
.flow li:not(:last-child):after{display:none}
main .flow .flow-n{font:500 clamp(28px,2.6vw,36px)/1 var(--display);letter-spacing:-.02em;color:#7fdcc7;margin-bottom:8px}
.flow .flow-n .hide-sm{display:none}
.flow h3{font-size:clamp(19px,1.5vw,22px)}
.flow-foot{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}
@media (hover:hover) and (pointer:fine){
  .flow li:hover{transform:none;border-color:rgba(255,255,255,.16)}
  .flow li:hover .flow-n{color:#fff}
}
/* Why it matters: a bento. Two wide tiles pair the art with the claim, two square tiles keep the beat */
@media (min-width:1025px){
  .tiles{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:16px}
  .tile{padding:32px}
  .tile-art{height:128px}
  .tile:nth-child(1),.tile:nth-child(4){grid-column:span 2;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:1fr auto auto;column-gap:32px;row-gap:12px}
  .tile:nth-child(1) .tile-art,.tile:nth-child(4) .tile-art{grid-row:1/4;height:auto;min-height:220px;margin:0}
  .tile:nth-child(1) .tile-art{grid-column:2}
  .tile:nth-child(1)>h3,.tile:nth-child(1)>p{grid-column:1}
  .tile:nth-child(4) .tile-art{grid-column:1}
  .tile:nth-child(4)>h3,.tile:nth-child(4)>p{grid-column:2}
  .tile:nth-child(1)>h3,.tile:nth-child(4)>h3{grid-row:2;font-size:clamp(20px,1.6vw,24px)}
  .tile:nth-child(1)>p,.tile:nth-child(4)>p{grid-row:3;max-width:34ch}
  .tile:nth-child(1) .art-bubble{font-size:15px;max-width:26ch}
}
/* Channels: three columns on one rule with hairline dividers */
@media (min-width:901px){
  .ways:not(.ways-stack){gap:0;border-top:1px solid var(--line)}
  .ways:not(.ways-stack) .way{border:0;border-radius:0;background:transparent;box-shadow:none;padding:32px 32px 8px 0}
  .ways:not(.ways-stack) .way+.way{padding-left:32px;border-left:1px solid var(--line)}
  .ways:not(.ways-stack) .way:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .ways:not(.ways-stack) .way:hover h3{color:var(--accent)}
}
/* Features page: the four feature cards become the same divider columns */
@media (min-width:901px){
  .feats{gap:0;border-top:1px solid var(--line)}
  .feat{border:0;border-radius:0;background:transparent;box-shadow:none;padding:32px 32px 8px 0}
  .feat+.feat{padding-left:32px;border-left:1px solid var(--line)}
  body:not([data-view]) .feats .feat:hover{transform:none;box-shadow:none;border-color:var(--line)}
}
/* FAQ: heading column stays put while the questions scroll */
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,96px);align-items:start}
.faq-grid .sec-head{margin:0;position:sticky;top:calc(var(--hdr) + 32px)}
/* Closing band: one full width call to action after the questions, centred */
.sec.sec-cta{padding-top:0}
.sec-cta .cta-panel{justify-items:center;text-align:center;padding:clamp(56px,7vw,104px) 24px;gap:20px;border-radius:24px}
.sec-cta .cta-panel h2{font-size:clamp(32px,3.6vw,54px);max-width:16ch;letter-spacing:-.028em}
.sec-cta .cta-panel p{max-width:48ch;font-size:clamp(16px,1.2vw,18px)}
.sec-cta .cta-row{justify-content:center;margin-top:8px}
.sec-cta .cta-panel:after{right:auto;left:50%;bottom:auto;top:-180px;width:560px;height:560px;border-width:1px;transform:translateX(-50%);border-color:rgba(255,255,255,.08)}
/* Footer: brand, four link columns, then a legal row */
.foot-grid{grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:40px}
.site-footer ul{gap:10px;font-size:14.5px}
.site-footer a{color:#c3cad7}
.site-footer a:hover{color:#fff}
.foot-base{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px 32px;margin-top:64px;padding-top:24px}
.foot-note{text-align:center}
.site-footer .foot-legal{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:13.5px}
.foot-legal a{color:#8a93a6}
@media (max-width:1024px){
  .foot-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr;gap:32px}
  .faq-grid .sec-head{position:static}
  .flow li{padding:16px 0}
  main .flow .flow-n{font-size:22px;padding-top:2px}
  .proof-band .hero-proof li{padding:0 20px}
}
@media (max-width:700px){
  .proof-band .hero-proof{display:flex;flex-wrap:wrap;padding:12px 0;gap:8px 0;font-size:13px}
  .proof-band .hero-proof{gap:8px 20px}
  .proof-band .hero-proof li{padding:0}
  .proof-band .hero-proof li+li{border-left:0}
  .site-footer ul.foot-legal{display:flex;gap:20px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-base{grid-template-columns:1fr;text-align:left}
  .foot-note{text-align:left}
  .flow-foot{margin-top:24px;padding-top:16px}
  .sec-cta .cta-panel{padding:40px 24px;border-radius:20px}
}
/* ===== v17 flow: product fragments in the tiles, inner pages follow the home rhythm ===== */
/* Tile art: a light surface with a product fragment that sits on the bottom edge */
.tile-art{height:164px;padding:20px 20px 0;align-items:end;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#f4f7fb,#e8edf5);box-shadow:none}
.art-screen{width:100%;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:12px 12px 0 0;padding:14px 16px 10px;box-shadow:0 -1px 0 rgba(255,255,255,.8),0 16px 40px -20px rgba(17,37,78,.35);display:grid;gap:8px;font-family:var(--text)}
.art-chat .ab{max-width:88%;padding:8px 11px;border-radius:12px;font:500 12.5px/1.35 var(--text)}
.art-chat .ab-in{justify-self:end;background:linear-gradient(180deg,#2f80ff,#1f6bf0);color:#fff;border-bottom-right-radius:4px}
.art-chat .ab-out{justify-self:start;background:var(--wash);color:var(--ink);border:1px solid var(--line);border-bottom-left-radius:4px;display:grid;gap:3px}
.art-chat .ab-out b{font-weight:650;font-size:12.5px}
.art-chat .ab-out span{font-size:11.5px;color:var(--muted);line-height:1.35}
.art-chat .ab-key{font:600 11.5px/1 'SF Mono',Menlo,Consolas,monospace;letter-spacing:.06em;padding:9px 12px}
.art-doc .ad-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.art-doc i{width:32px;height:28px;border-radius:7px;background:var(--accent,var(--blue));display:grid;place-items:center;flex:none}
.art-doc i svg{width:16px;height:16px}
.art-doc b{display:block;font:800 13px/1.2 'Lato',var(--text);color:var(--navy)}
.art-doc small{display:block;font:500 10.5px/1.3 var(--text);color:var(--muted)}
.art-doc em{margin-left:auto;font:650 11px/1 var(--display);letter-spacing:.14em;color:var(--navy);font-style:normal}
.art-doc .ad-rows{display:grid;gap:7px;padding-top:2px}
.art-doc .ad-rows span{display:block;height:7px;border-radius:4px;background:#e3e8f0}
.art-flow ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
.art-flow li{display:grid;grid-template-columns:18px 1fr;column-gap:10px;align-items:center;padding:6px 0;position:relative}
.art-flow li:before{content:"";width:10px;height:10px;border-radius:50%;justify-self:center;background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
.art-flow li.now:before{background:#fff;border:2px solid var(--accent,var(--blue));box-shadow:0 0 0 3px var(--chip)}
.art-flow li+li:after{content:"";position:absolute;left:8px;top:-7px;height:14px;width:2px;background:var(--line)}
.art-flow b{font:650 12.5px/1.2 var(--text);color:var(--navy)}
.art-flow small{grid-column:2;font:500 10.5px/1.3 var(--text);color:var(--muted)}
.art-totals{gap:0}
.art-totals p{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);font:500 12px/1 var(--text);color:var(--muted);margin:0}
.art-totals p b{font:600 12px/1 var(--text);color:var(--ink);font-variant-numeric:tabular-nums}
.art-totals p.tot{border:0;padding-top:8px;color:var(--navy);font-weight:650}
.art-totals p.tot b{font-weight:750;font-size:13.5px;color:var(--navy)}
.tile-art>*{transition:translate .5s var(--spring)}
.tile:hover .tile-art>*{translate:0 -4px}
@media (min-width:1025px){
  .tile:nth-child(1) .tile-art,.tile:nth-child(4) .tile-art{min-height:240px;padding:28px 28px 0}
  .tile:nth-child(1) .art-screen,.tile:nth-child(4) .art-screen{padding:18px 20px 14px;gap:10px}
  .tile:nth-child(1) .ab{font-size:13.5px;max-width:84%}
  .tile:nth-child(4) .art-totals p{padding:9px 0;font-size:13.5px}
  .tile:nth-child(4) .art-totals p b{font-size:13.5px}
  .tile:nth-child(4) .art-totals p.tot b{font-size:16px}
  /* three tile pages stay three equal columns */
  .tiles.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tiles-3 .tile:nth-child(1),.tiles-3 .tile:nth-child(4){grid-column:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto;gap:12px}
  .tiles-3 .tile:nth-child(1) .tile-art{grid-column:auto;grid-row:auto;min-height:0;height:164px;margin:0;padding:20px 20px 0}
  .tiles-3 .tile:nth-child(1)>h3,.tiles-3 .tile:nth-child(1)>p{grid-column:auto;grid-row:auto;font-size:inherit;max-width:none}
  .tiles-3 .tile:nth-child(1)>h3{font-size:20px}
  .tiles-3 .tile:nth-child(1) .art-screen{padding:14px 16px 10px;gap:8px}
}
/* FAQ rows: hairline list instead of boxes, on every page */
.faq{gap:0;border-top:1px solid var(--line)}
.faq details,.mb-faq-item{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
.faq details[open],.mb-faq-item[open]{border-color:var(--line);box-shadow:none}
.faq summary,.mb-faq-item summary{padding:20px 0}
.faq details p,.mb-faq-item p{padding:0 48px 20px 0}
.mb-faq{grid-template-columns:minmax(0,1fr);gap:0;border-top:1px solid var(--line);margin-bottom:0}
.mb-section:nth-of-type(even) .mb-faq-item,.mb-section:nth-of-type(even) .mb-steps li,.mb-section:nth-of-type(even) .mb-card{background:transparent}
/* Legacy pages: section head and FAQ side by side like the home page */
.mb-faq-sec .mb-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,96px);align-items:start}
.mb-faq-sec .mb-head{position:sticky;top:calc(var(--hdr) + 32px)}
.mb-faq-sec .mb-head h2{margin-bottom:0}
.mb-faq-sec .mb-head .mb-lede{margin:16px 0 0}
.mb-faq-sec .mb-faq+.mb-faq{margin-top:24px}
/* Legacy steps: numbered hairline columns */
.mb-steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 32px;border-top:1px solid var(--line);margin-bottom:0}
.mb-steps li,.mb-card,.anatomy li{box-shadow:none}
.mb-steps li{padding:28px 0 8px;border:0;border-radius:0;background:transparent}
body:not([data-view]) :is(.mb-card,.mb-steps li):hover{transform:none;box-shadow:none}
.mb-steps li:before{position:static;width:auto;height:auto;display:block;margin:0 0 20px;background:none;color:var(--accent,var(--blue));font:500 clamp(28px,2.6vw,36px)/1 var(--display);letter-spacing:-.02em}
.mb-steps h3{font-size:19px}
/* Legacy cards: divider columns */
.mb-cards{gap:0;border-top:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:0}
.mb-card{border:0;border-radius:0;background:transparent;padding:28px 28px 8px 0}
.mb-card+.mb-card{padding-left:28px;border-left:1px solid var(--line)}
.mb-section .mb-cards+p,.mb-section .mb-steps+p{margin-top:32px}
/* How it works: reply words as four hairline columns on the dark band */
.reply-rows{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;border-top:1px solid rgba(255,255,255,.16)}
.reply-rows li{padding:28px 0 0;border:0;border-radius:0;background:transparent}
/* Custom invoices: anatomy as numbered hairline columns */
.anatomy{gap:0 32px;border-top:1px solid var(--line)}
.anatomy li{padding:28px 0 24px;border:0;border-radius:0;background:transparent;box-shadow:none;gap:10px}
.anatomy li:before{position:static;width:auto;height:auto;display:block;background:none;color:var(--accent,var(--blue));font:500 clamp(28px,2.6vw,36px)/1 var(--display);letter-spacing:-.02em;margin-bottom:10px;-webkit-text-fill-color:currentColor}
.anatomy li:nth-child(n+4){border-top:1px solid var(--line)}
.anatomy li:hover{transform:none}
/* Closing band on every page */
.sec-cta .free-card{justify-items:center;text-align:center;padding:clamp(56px,7vw,96px) 24px;border-radius:24px;border:1px solid var(--line)}
.sec-cta .free-card h2{font-size:clamp(32px,3.6vw,48px)}
.sec-cta .free-card p{max-width:48ch}
.sec-cta .free-card .cta-row{justify-content:center}
.mb-page .sec-cta{padding-top:0}
.mb-page .sec-cta .cta-panel h2{font-size:clamp(30px,3.4vw,48px);max-width:22ch}
.mb-page .sec-cta .cta-panel p{font-size:15px;max-width:60ch}
@media (max-width:900px){
  .mb-faq-sec .mb-wrap{grid-template-columns:minmax(0,1fr);gap:24px}
  .mb-faq-sec .mb-head{position:static}
  .reply-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reply-rows li{padding:20px 0 8px;border-top:1px solid rgba(255,255,255,.12)}
  .mb-steps li,.anatomy li{padding:20px 0 16px;border-top:1px solid var(--line)}
  .mb-steps li:before,.anatomy li:before{font-size:24px;margin-bottom:12px}
  .mb-steps,.anatomy,.mb-cards{border-top:0}
  .mb-card{padding:20px 0 12px;border-top:1px solid var(--line)}
  .mb-card+.mb-card{padding-left:0;border-left:0}
}
@media (max-width:700px){
  .tile-art{height:140px}
  .reply-rows{grid-template-columns:minmax(0,1fr)}
  .faq summary,.mb-faq-item summary{padding:16px 0}
  .faq details p,.mb-faq-item p{padding:0 32px 16px 0}
}

/* ===== v18 pricing: light plan sheet, footnote columns, centred pricing intro ===== */
.price-stack{display:grid;gap:clamp(28px,3.4vw,48px)}
.plan-sheet{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.plan-main{display:grid;gap:22px;align-content:start;padding:clamp(28px,3.4vw,48px);border-right:1px solid var(--line);background:linear-gradient(180deg,#fff,#f6f8fb)}
.plan-sheet .plan-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
main .plan-sheet .plan-name{color:var(--muted)}
.plan-sheet .cur{background:var(--wash);border:1px solid var(--line)}
.plan-sheet .cur button{color:var(--muted)}
.plan-sheet .cur button[aria-pressed=true]{background:var(--ink);color:#fff}
.plan-sheet .cur button:not([aria-pressed=true]):hover{color:var(--ink);background:#fff}
.plan-sheet .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 12px;color:var(--ink)}
.plan-sheet .price b{font:530 clamp(44px,4.8vw,68px)/1 var(--display);letter-spacing:-.035em;color:var(--ink);font-variant-numeric:tabular-nums}
.plan-sheet .price span{font:500 15px/1.3 var(--text);color:var(--muted)}
.plan-note{margin:0;font-size:14px;line-height:1.55;color:var(--muted);max-width:36ch}
.plan-main .btn{justify-self:start}
.plan-list{list-style:none;margin:0;padding:clamp(10px,1.4vw,18px) clamp(28px,3.4vw,48px);display:grid;align-content:center}
.plan-list li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink)}
.plan-list li:first-child{border-top:0}
.plan-list li:before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(26,79,220,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%231a4fdc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.price-notes{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,4vw,64px);padding-top:clamp(20px,2.4vw,32px);border-top:1px solid var(--line)}
.price-notes>div{display:grid;gap:8px;align-content:start;justify-items:start}
.price-notes>div+div{padding-left:clamp(24px,4vw,64px);border-left:1px solid var(--line)}
.price-notes h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.price-notes p{margin:0;color:var(--muted);font-size:15px;line-height:1.55;max-width:46ch}
.price-notes .link-arrow{margin-top:4px}
.price-stack .page-hero-copy{justify-items:center;text-align:center;margin:0 auto;max-width:760px}
.price-stack .page-hero-copy h1{max-width:none}
.price-stack .page-hero-copy .lede{max-width:56ch}
#included .checks-lg{gap:0;border-top:1px solid var(--line)}
#included .checks-lg li{padding:14px 0;border-bottom:1px solid var(--line)}
#included .beta-card{border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none;padding:0 0 0 clamp(24px,3vw,48px)}
body:not([data-view]) #included .beta-card:hover{transform:none;box-shadow:none}
@media (max-width:900px){
  .plan-sheet{grid-template-columns:1fr}
  .plan-main{border-right:0;border-bottom:1px solid var(--line)}
  .price-notes{grid-template-columns:1fr;gap:20px}
  .price-notes>div+div{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}
  #included .beta-card{border-left:0;padding:0}
}
@media (max-width:700px){
  .plan-main{padding:24px 20px;gap:18px}
  .plan-list{padding:6px 20px}
  .plan-list li{padding:12px 0;font-size:15px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .js [data-reveal]{opacity:1;translate:none}
  .js .hero-copy>*,.js .page-hero-copy>*,.js .mb-hero .mb-wrap>*,.js .hero-visual{animation:none}
  .phone,.float-chip{translate:none!important}
}
@media print{
  .site-header,.site-footer,.gen-intro,.gen-form,.mb-section,.skip,.gen-preview .note{display:none!important}
  .page-hero{padding:0;background:none}
  .page-hero:before{display:none}
  .generator{display:block}
  .gen-preview{position:static}
  .gen-preview .mi-paper{box-shadow:none}
  body{background:#fff}
}