.marketing-site{
  --yellow:#FFE800;
  --ink:#111111;
  --ink-2:#171c23;
  --text:#202631;
  --muted:#66707d;
  --line:#e3e5e8;
  --surface:#f7f7f5;
  --surface-2:#f0f1f2;
  --white:#fff;
  --green:#18864b;
  --red:#c83d3d;
  --shadow:0 24px 70px rgba(17,17,17,.12);
  --radius:22px;
  --page:min(1180px,calc(100vw - 48px));
  --motion-duration:.45s;
  --motion-ease:cubic-bezier(.22,1,.36,1);
}
.marketing-site{min-height:100vh;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.marketing-site *{box-sizing:border-box}
.marketing-site img{display:block;max-width:100%}
.marketing-site a{color:inherit;text-decoration:none}
.marketing-site button,.marketing-site input{font:inherit}
.marketing-site button{color:inherit}
.skip-link{position:fixed;left:16px;top:-60px;background:var(--yellow);padding:12px 16px;border-radius:10px;z-index:1000;font-weight:800}.skip-link:focus{top:16px}
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:border-color .25s ease,background .25s ease}.site-header.is-scrolled,.site-header.is-solid{border-color:var(--line);background:rgba(255,255,255,.96)}
.nav-shell{position:relative;width:var(--page);height:76px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;align-items:center;flex:0 0 auto}.brand img{width:172px;height:auto}.desktop-nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:28px;margin:0}.desktop-nav a,.text-link{font-size:14px;font-weight:650;color:#353c46}.desktop-nav a:hover,.text-link:hover{color:#000}.nav-actions{display:flex;align-items:center;gap:14px;margin-left:auto}.menu-toggle{display:none;background:transparent;border:0;width:42px;height:42px;padding:10px;cursor:pointer}.menu-toggle span{display:block;height:2px;background:#111;margin:6px 0}.mobile-panel{display:none}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid transparent;border-radius:999px;font-weight:780;font-size:14px;transition:transform .2s ease,background .2s ease,border-color .2s ease}.button:hover{transform:translateY(-1px)}.button-dark{background:#111;color:#fff}.button-dark:hover{background:#252525}.button-yellow{background:var(--yellow);color:#111}.button-yellow:hover{background:#f4dd00}.button-ghost{border-color:#d8dadd;background:#fff;color:#111}.button-ghost:hover{border-color:#111}.button-outline-dark{border-color:#5e6672;color:#fff}.button-outline-dark:hover{border-color:#fff}.full{width:100%}
.section{width:var(--page);margin:auto;padding:110px 0}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:#626b78;margin:0 0 18px}.eyebrow-dark{color:#bfc6cf}.mini-label{font-size:11px;letter-spacing:.14em;font-weight:800;color:#818896;margin:0 0 12px}
.marketing-site h1,.marketing-site h2,.marketing-site h3,.marketing-site p{margin-top:0}.marketing-site h1,.marketing-site h2,.marketing-site h3{color:#151b24;letter-spacing:-.035em}.marketing-site h1{font-size:clamp(50px,6vw,84px);line-height:.98;margin-bottom:26px;max-width:820px}.marketing-site h2{font-size:clamp(38px,4.8vw,64px);line-height:1.02;margin-bottom:20px}.marketing-site h3{font-size:24px;line-height:1.1}.section-heading{max-width:760px;margin-bottom:48px}.section-heading>p:not(.eyebrow){font-size:18px;line-height:1.65;color:var(--muted)}.split-heading{max-width:none;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);gap:72px;align-items:end}.split-heading>p{margin:0 0 8px;font-size:17px;line-height:1.65;color:var(--muted)}
.hero{padding-top:150px;padding-bottom:84px}.hero-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(560px,1.22fr);gap:72px;align-items:center}.hero-lede{font-size:20px;line-height:1.62;color:#596270;max-width:650px;margin-bottom:30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;color:#58616e;font-size:13px;font-weight:700}.hero-proof span{display:flex;align-items:center;gap:9px}.hero-proof span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 4px rgba(255,232,0,.18)}
.hero-product{position:relative;min-width:0}.product-window{position:relative;background:#fff;border:1px solid #dadde1;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.product-window img{width:100%;height:auto}.product-window-hero{transform:translateZ(0);box-shadow:0 40px 90px rgba(15,20,26,.17)}.window-bar{height:44px;border-bottom:1px solid #e5e7eb;background:#fafafa;display:flex;align-items:center;padding:0 15px;gap:7px;color:#737b86;font-size:11px}.window-bar span{width:8px;height:8px;border-radius:50%;background:#d5d8dd}.window-bar strong{margin-left:8px;font-size:11px}.product-window-hero img{width:100%;transform:scale(1.003)}.floating-note{position:absolute;background:#fff;border:1px solid #e1e3e5;border-radius:16px;box-shadow:0 18px 44px rgba(17,17,17,.12);padding:15px 17px;display:flex;flex-direction:column;gap:5px;max-width:245px}.floating-note strong{font-size:14px;color:#202631}.floating-note span{font-size:12px;color:#6f7884;line-height:1.45}.note-a{left:-32px;bottom:-28px}.note-b{right:-18px;top:80px;flex-direction:row;align-items:center}.note-b i{display:block;width:9px;height:9px;background:var(--yellow);border-radius:50%}
.trust-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:#fbfbfa}.trust-track{width:var(--page);margin:auto;height:70px;display:flex;align-items:center;justify-content:space-between;gap:16px;color:#5f6874;font-size:13px;font-weight:750;white-space:nowrap}.trust-track b{width:4px;height:4px;background:#c6cbd2;border-radius:50%}
.principles{padding-bottom:130px}.principle-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.principle-card{padding:34px 28px 34px 0;min-height:220px}.principle-card+ .principle-card{padding-left:28px;border-left:1px solid var(--line)}.principle-card h3{font-size:24px;margin:0 0 14px}.principle-card h3:before{content:"";display:block;width:28px;height:3px;margin:0 0 26px;background:var(--yellow)}.principle-card p{font-size:15px;line-height:1.65;color:#66707d;margin:0}
.product-section{padding-top:120px;background:linear-gradient(#fff,#fbfbfa)}.walkthrough{border:1px solid var(--line);border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 28px 80px rgba(17,17,17,.08)}.walkthrough-nav{display:grid;grid-template-columns:repeat(4,1fr);padding:10px;border-bottom:1px solid var(--line);background:#fafafa}.walkthrough-tab{border:0;background:transparent;padding:16px 18px;border-radius:14px;font-weight:780;cursor:pointer;color:#6b7380}.walkthrough-tab.is-active{background:#111;color:#fff}.walkthrough-stage{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:610px}.walkthrough-copy{padding:44px 30px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end}.walkthrough-copy h3{font-size:34px}.walkthrough-copy p:last-child{color:#69727f;line-height:1.65;font-size:16px}.walkthrough-frame{padding:34px;background:#f3f4f5;display:flex;align-items:center}.walkthrough-frame img{border:1px solid #dfe2e5;border-radius:18px;box-shadow:0 28px 80px rgba(17,17,17,.10);transition:opacity .22s ease,transform .22s ease}.walkthrough-frame img.is-switching{opacity:.2;transform:translateY(8px)}
.detail-section{padding-top:130px;padding-bottom:130px}.detail-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(360px,.78fr);gap:80px;align-items:center}.detail-grid.reverse{grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr)}.detail-grid.reverse .detail-copy{order:1}.detail-grid.reverse .detail-visual{order:2}.detail-copy>p:not(.eyebrow){font-size:18px;line-height:1.65;color:#66707d}.check-list{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}.check-list li:before{content:"✓";display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;background:#edf7f0;color:#17844a;border-radius:50%;font-size:12px;font-weight:900;flex:0 0 auto}.detail-dark{width:100%;max-width:none;background:#11161d;color:#fff;padding-left:max(24px,calc((100vw - 1180px)/2));padding-right:max(24px,calc((100vw - 1180px)/2))}.detail-dark h2,.detail-dark h3{color:#fff}.detail-dark .detail-copy>p:not(.eyebrow){color:#aeb7c2}.product-window-dark{border-color:#2c333c;background:#0f141a;box-shadow:0 34px 100px rgba(0,0,0,.35)}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}.metric-row div{border:1px solid #343b44;border-radius:16px;padding:18px}.metric-row strong{display:block;color:#fff;margin-bottom:6px}.metric-row span{display:block;font-size:12px;line-height:1.45;color:#9ba4af}
.integration-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:stretch}.integration-window{box-shadow:0 24px 80px rgba(17,17,17,.08)}.integration-note{background:#11161d;border-radius:22px;padding:30px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}.integration-note h3{color:#fff;margin-bottom:12px}.integration-note p{color:#afb7c1;line-height:1.6;margin:0}.yellow-dot{width:12px;height:12px;border-radius:50%;background:var(--yellow);margin-bottom:auto;box-shadow:0 0 0 8px rgba(255,232,0,.08)}
.security-section{width:100%;max-width:none;background:#11161d;padding:110px max(24px,calc((100vw - 1180px)/2))}.security-shell{background:#171d25;border:1px solid #2b323b;border-radius:30px;padding:52px;color:#fff}.security-copy{max-width:750px}.security-copy h2{color:#fff}.security-copy>p:not(.eyebrow){color:#b8c0ca;font-size:18px;line-height:1.65}.security-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}.security-grid article{border:1px solid #303741;border-radius:18px;padding:22px;min-height:190px}.security-grid span{color:var(--yellow);font-size:11px;font-weight:900}.security-grid h3{color:#fff;font-size:20px;margin:30px 0 8px}.security-grid p{color:#aab3be;font-size:13px;line-height:1.55;margin:0}
.pricing-section{padding-top:130px}.pricing-heading{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}.billing-toggle{display:inline-flex;background:#f1f2f3;border:1px solid #e1e3e6;padding:4px;border-radius:999px;margin-top:20px}.billing-toggle button{border:0;background:transparent;border-radius:999px;padding:11px 18px;font-size:13px;font-weight:800;cursor:pointer}.billing-toggle button.is-active{background:#111;color:#fff}.billing-toggle span{display:inline-flex;background:var(--yellow);color:#111;border-radius:999px;padding:2px 6px;margin-left:5px;font-size:10px}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}.price-card{border:1px solid #dfe2e5;border-radius:22px;padding:28px;background:#fff;position:relative}.price-card-featured{border-color:#111;box-shadow:0 24px 70px rgba(17,17,17,.08)}.popular-badge{position:absolute;top:-14px;left:26px;background:var(--yellow);color:#111;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:900}.plan-name{font-size:22px;font-weight:850;color:#222934;margin:0 0 5px}.plan-summary{font-size:14px;color:#747d89;margin-bottom:36px}.price{display:flex;align-items:center;gap:11px;margin-bottom:7px}.price strong{font-size:48px;letter-spacing:-.04em;color:#111}.price span{font-size:12px;color:#67717e;line-height:1.35}.enterprise-price strong{font-size:46px}.annual-note{font-size:12px;color:#6f7884;min-height:34px;margin-bottom:20px}.limits{margin:22px 0 0;border:1px solid #e3e5e7;border-radius:14px;overflow:hidden}.limits div{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;border-bottom:1px solid #e3e5e7;gap:10px}.limits div:last-child{border-bottom:0}.limits dt{font-size:12px;color:#6c7581}.limits dd{font-size:12px;font-weight:800;margin:0;color:#222}.plan-features{list-style:none;padding:22px 0 0;margin:0;display:grid;gap:12px}.plan-features li{font-size:13px;line-height:1.4;color:#505965;display:flex;gap:10px}.plan-features li:before{content:"✓";color:#19854b;font-weight:900}.pricing-source-note{text-align:center;max-width:780px;margin:30px auto 0;color:#7a838f;font-size:12px;line-height:1.6}
.faq-section{padding-top:130px}.faq-layout{display:grid;grid-template-columns:360px minmax(0,1fr);gap:90px}.faq-list{border-top:1px solid var(--line)}.faq-item{border-bottom:1px solid var(--line)}.faq-item button{width:100%;background:transparent;border:0;padding:23px 0;display:flex;align-items:center;justify-content:space-between;text-align:left;font-weight:780;cursor:pointer}.faq-item button i{font-style:normal;font-size:20px;transition:transform .2s ease}.faq-item button[aria-expanded="true"] i{transform:rotate(45deg)}.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}.faq-answer p{overflow:hidden;color:#69727f;line-height:1.65;margin:0}.faq-item.is-open .faq-answer{grid-template-rows:1fr}.faq-item.is-open .faq-answer p{padding:0 40px 22px 0}
.final-cta{padding-bottom:110px}.cta-shell{background:#11161d;border-radius:30px;padding:56px;display:flex;align-items:flex-end;justify-content:space-between;gap:48px}.cta-shell h2{color:#fff;max-width:820px;margin:0;font-size:clamp(38px,4.8vw,62px)}.cta-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-width:290px}
.site-footer{border-top:1px solid var(--line);padding:58px max(24px,calc((100vw - 1180px)/2)) 32px;background:#fafafa}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-bottom:42px;border-bottom:1px solid var(--line)}.footer-brand img{width:128px}.footer-top p{color:#737c88;font-size:13px;margin:0}.footer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:42px 0}.footer-grid div{display:flex;flex-direction:column;gap:10px}.footer-grid strong{font-size:12px;text-transform:uppercase;letter-spacing:.1em}.footer-grid a{font-size:13px;color:#66707d}.footer-grid a:hover{color:#111}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:11px;color:#858e99;border-top:1px solid var(--line);padding-top:24px}
.reveal{opacity:1;transform:none}.hero .reveal{animation:marketing-enter .7s cubic-bezier(.22,1,.36,1) both}.hero .reveal-delay-1{animation-delay:.08s}@keyframes marketing-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.security-page{padding-top:76px}.security-hero{padding-top:130px;max-width:950px;margin:0 auto}.security-hero p:last-child{max-width:780px;font-size:20px;line-height:1.65;color:#69727f}.security-matrix{display:grid;grid-template-columns:1fr 1fr;gap:20px}.security-matrix article{border:1px solid var(--line);border-radius:24px;padding:36px}.security-matrix h2{font-size:38px}.confirm-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.confirm-grid span{border:1px solid var(--line);border-radius:12px;padding:14px;font-size:13px;color:#67707d}.security-contact{padding-top:20px}
@media (max-width:1020px){
  .marketing-site{--page:min(100% - 36px,900px)}.desktop-nav{display:none}.desktop-only{display:none}.menu-toggle{display:block}.mobile-panel{position:absolute;left:18px;right:18px;top:70px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;box-shadow:var(--shadow);display:none;flex-direction:column;gap:4px}.mobile-panel.is-open{display:flex}.mobile-panel>a:not(.button){padding:12px;border-radius:10px;font-weight:700}.mobile-panel>a:not(.button):hover{background:#f5f5f3}.hero-grid{grid-template-columns:1fr;gap:58px}.hero-copy{max-width:780px}.hero-product{max-width:840px}.note-a{left:18px}.note-b{right:18px}.principle-grid{grid-template-columns:repeat(2,1fr)}.principle-card:nth-child(3){border-left:0;border-top:1px solid var(--line);padding-left:0}.principle-card:nth-child(4){border-top:1px solid var(--line)}.split-heading{grid-template-columns:1fr;gap:20px}.walkthrough-stage{grid-template-columns:1fr}.walkthrough-copy{border-right:0;border-bottom:1px solid var(--line);padding:30px}.walkthrough-frame{padding:20px}.detail-grid,.detail-grid.reverse{grid-template-columns:1fr;gap:48px}.detail-grid.reverse .detail-copy,.detail-grid.reverse .detail-visual{order:initial}.detail-dark{padding-left:18px;padding-right:18px}.integration-layout{grid-template-columns:1fr}.integration-note{min-height:260px}.security-grid{grid-template-columns:repeat(2,1fr)}.pricing-grid{grid-template-columns:1fr;max-width:680px;margin:0 auto}.faq-layout{grid-template-columns:1fr;gap:10px}.cta-shell{align-items:flex-start;flex-direction:column}.cta-actions{justify-content:flex-start}.security-matrix{grid-template-columns:1fr}
}
@media (max-width:650px){
  .marketing-site{--page:calc(100vw - 28px)}.nav-shell{height:68px}.brand img{width:150px}.section{padding:82px 0}.hero{padding-top:118px}.hero-lede{font-size:18px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions .button{width:100%}.hero-proof{display:grid}.floating-note{display:none}.trust-track{overflow:auto;justify-content:flex-start;padding-right:10px}.principle-grid{grid-template-columns:1fr}.principle-card,.principle-card+ .principle-card,.principle-card:nth-child(3){padding:28px 0;border-left:0;border-top:1px solid var(--line);min-height:0}.principle-card:first-child{border-top:0}.step-number{margin-bottom:24px}.walkthrough-nav{grid-template-columns:repeat(4,max-content);overflow-x:auto;justify-content:start}.walkthrough-tab{padding:12px 14px}.walkthrough-copy h3{font-size:28px}.walkthrough-frame{overflow-x:auto;justify-content:flex-start}.walkthrough-frame img{min-width:780px}.detail-visual{overflow-x:auto;padding-bottom:6px}.detail-visual .product-window{min-width:760px}.metric-row{grid-template-columns:1fr}.integration-window{overflow-x:auto}.integration-window img{min-width:760px}.security-shell{padding:28px 22px;border-radius:22px}.security-grid{grid-template-columns:1fr}.pricing-section{padding-top:90px}.price-card{padding:24px 20px}.faq-item button{font-size:15px;gap:20px}.cta-shell{padding:32px 24px}.cta-actions{min-width:0;width:100%}.cta-actions .button{width:100%}.footer-top{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-bottom{flex-direction:column}.confirm-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero .reveal{animation:none}.button,.walkthrough-frame img,.faq-answer,.faq-item button i{transition:none}}

/* The authenticated application ships legacy global table and form rules. The public
   surface owns its controls explicitly so those rules cannot leak into this page. */
.marketing-site table{border-collapse:separate!important;border-spacing:0!important;font-size:inherit!important}
.marketing-site table thead{background:transparent!important}
.marketing-site table th,.marketing-site table td{padding:0!important;text-align:left!important;letter-spacing:normal!important;text-transform:none!important;background:transparent!important;color:inherit!important;font-size:inherit!important;font-weight:inherit!important;border:0!important}
.marketing-site button{border:0;background:none;cursor:pointer;transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease}
.marketing-site ::selection{background:#ffe800;color:#111}
.marketing-site :where(a,button):focus-visible{outline:3px solid #ffe800;outline-offset:3px;box-shadow:0 0 0 5px #111}
.marketing-site .walkthrough-tab:focus-visible,.marketing-site .billing-toggle button:focus-visible,.marketing-site .faq-item button:focus-visible{outline-color:#111;box-shadow:0 0 0 4px rgba(255,232,0,.72)}
.marketing-site .mobile-panel{max-height:calc(100dvh - 88px);overflow-y:auto}
.marketing-site .walkthrough-frame,.marketing-site .detail-visual,.marketing-site .integration-window{scrollbar-color:#737b86 #e5e7eb;scrollbar-width:thin}
.marketing-site [aria-pressed="true"]{font-weight:800}
.marketing-site a.button-dark,.marketing-site button.button-dark{border-color:#111!important;background:#111!important;color:#fff!important;opacity:1!important}
.marketing-site a.button-dark:hover,.marketing-site button.button-dark:hover{border-color:#292929!important;background:#292929!important;color:#fff!important}
.marketing-site a.button-yellow,.marketing-site button.button-yellow{border-color:#ffe800!important;background:#ffe800!important;color:#111!important;opacity:1!important}
.marketing-site a.button-yellow:hover,.marketing-site button.button-yellow:hover{border-color:#f3dc00!important;background:#f3dc00!important;color:#111!important}
.marketing-site a.button-ghost,.marketing-site button.button-ghost{border-color:#cbd0d5!important;background:#fff!important;color:#111!important;opacity:1!important}
.marketing-site a.button-outline-dark,.marketing-site button.button-outline-dark{border-color:#8c96a1!important;background:transparent!important;color:#fff!important;opacity:1!important}
.marketing-site a.button-outline-dark:hover,.marketing-site button.button-outline-dark:hover{border-color:#fff!important;background:#fff!important;color:#111!important}
.marketing-site .security-contact h2{color:#fff}
.marketing-site .product-window img,.marketing-site .walkthrough-frame img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:top left}
.marketing-site .product-window,.marketing-site .walkthrough{transform-origin:50% 35%}
.marketing-site .media-active{animation:marketing-media-in .65s cubic-bezier(.22,1,.36,1) both}
@keyframes marketing-media-in{from{opacity:.35;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (max-width:650px){.marketing-site h1{font-size:clamp(42px,13vw,58px)}.marketing-site h2{font-size:clamp(34px,10vw,46px)}.marketing-site .hero{padding-bottom:70px}.marketing-site .footer-grid{gap:30px}.marketing-site .trust-track b{display:none}}
@media (prefers-reduced-motion:reduce){.marketing-site .media-active{animation:none}}

/* Premium product-story pass: flatter enterprise surfaces, clearer hierarchy and
   motion that follows real interaction instead of decorative widgets. */
.marketing-site .button{border-radius:9px;transition:transform .22s cubic-bezier(.22,1,.36,1),background .2s ease,border-color .2s ease,box-shadow .2s ease}
.marketing-site .button:hover{transform:translateY(-2px)}
.marketing-site a.button-dark:hover,.marketing-site button.button-dark:hover{box-shadow:0 10px 26px rgba(17,17,17,.18)}
.marketing-site .hero{padding-top:164px;padding-bottom:96px}
.marketing-site .hero-grid{display:block}
.marketing-site .hero-copy{max-width:900px;margin:0 auto;text-align:center}
.marketing-site .hero-copy h1{margin-left:auto;margin-right:auto}
.marketing-site .hero-lede{max-width:720px;margin:0 auto 30px}
.marketing-site .hero-actions,.marketing-site .hero-proof{justify-content:center}
.marketing-site .hero-proof{margin-left:0;margin-right:0}
.marketing-site .hero-proof span:before{width:5px;height:5px;box-shadow:none}
.marketing-site .hero-product{max-width:1120px;margin:68px auto 0;perspective:1400px}
.marketing-site .product-window{border-radius:14px;box-shadow:0 24px 70px rgba(15,20,26,.11);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
.marketing-site .product-window:hover{transform:translateY(-5px);box-shadow:0 34px 90px rgba(15,20,26,.15)}
.marketing-site .product-window-hero{transform:rotateX(1.5deg);box-shadow:0 38px 110px rgba(15,20,26,.16)}
.marketing-site .product-window-hero:hover{transform:rotateX(0) translateY(-4px)}
.marketing-site .window-bar span{width:7px;height:7px}
.marketing-site .window-bar span:first-child{background:var(--yellow)}
.marketing-site .product-window-hero img{will-change:transform}
.marketing-site .floating-note{display:none}
.marketing-site .product-section{background:#fbfbfa}
.marketing-site .capability-list{margin:34px 0 0;border-top:1px solid #343b44}
.marketing-site .capability-list div{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid #343b44}
.marketing-site .capability-list dt{color:#fff;font-size:13px;font-weight:800}
.marketing-site .capability-list dd{margin:0;color:#9fa8b3;font-size:13px}
.marketing-site .security-section{padding-top:120px;padding-bottom:120px}
.marketing-site .security-shell{background:transparent;border:0;border-radius:0;padding:0}
.marketing-site .security-grid{gap:0;margin-top:60px;border-top:1px solid #343b44;border-bottom:1px solid #343b44}
.marketing-site .security-grid article{border:0;border-radius:0;padding:28px 28px 30px 0;min-height:150px}
.marketing-site .security-grid article+article{border-left:1px solid #343b44;padding-left:28px}
.marketing-site .security-grid h3{font-size:18px;margin:0 0 10px}
.marketing-site .billing-toggle{border-radius:10px}.marketing-site .billing-toggle button{border-radius:7px}.marketing-site .billing-toggle span{border-radius:4px}
.marketing-site .pricing-grid{gap:12px;align-items:stretch}
.marketing-site .price-card{border-radius:10px;padding:30px;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease}
.marketing-site .price-card:hover{transform:translateY(-5px);box-shadow:0 24px 60px rgba(17,17,17,.09)}
.marketing-site .price-card-featured{border:2px solid #111;box-shadow:none}
.marketing-site .popular-badge{top:0;left:auto;right:0;border-radius:0 8px 0 6px}
.marketing-site .limits{border-left:0;border-right:0;border-radius:0}
.marketing-site .limits div{padding-left:0;padding-right:0}
.marketing-site .price strong{transition:opacity .15s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.marketing-site .price.price-updating strong{opacity:.2;transform:translateY(-8px)}
.marketing-site .final-cta{width:100%;max-width:none;background:#11161d;padding:96px max(24px,calc((100vw - 1180px)/2))}
.marketing-site .cta-shell{background:transparent;border-radius:0;padding:0}
.marketing-site .reveal.motion-pending{opacity:0;transform:translateY(16px);transition:opacity .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.marketing-site .reveal.motion-pending.is-visible{opacity:1;transform:none}
.marketing-site .reveal-delay-1.motion-pending{transition-delay:.1s}.marketing-site .reveal-delay-2.motion-pending{transition-delay:.18s}.marketing-site .reveal-delay-3.motion-pending{transition-delay:.26s}
@media (max-width:1020px){.marketing-site .walkthrough-stage{grid-template-columns:1fr}.marketing-site .security-grid article:nth-child(3){border-left:0}.marketing-site .security-grid article:nth-child(n+3){border-top:1px solid #343b44}}
@media (max-width:650px){.marketing-site .hero-copy{text-align:left}.marketing-site .hero-actions,.marketing-site .hero-proof{justify-content:flex-start}.marketing-site .hero-product{margin-top:48px}.marketing-site .security-grid article,.marketing-site .security-grid article+article{border-left:0;padding:24px 0}.marketing-site .security-grid article+article{border-top:1px solid #343b44}.marketing-site .integration-note{min-height:0}.marketing-site .price-card{padding:24px 20px}}
@media (prefers-reduced-motion:reduce){.marketing-site .reveal.motion-pending{opacity:1;transform:none;transition:none}.marketing-site .product-window,.marketing-site .price-card{transition:none}}

/* One continuous base surface on the landing page only: the page root matches the
   marketing canvas so the atmospheric smoke never composites over a slightly different
   white while scrolling. Scoped to .marketing-home so /checkout, /security and
   authenticated routes keep their own surfaces. */
html:has(.marketing-home),body:has(.marketing-home){background:#fff!important}
.marketing-site .hero{position:relative;isolation:isolate}
.marketing-site .hero-grid{position:relative;z-index:2}
.marketing-site .hero-smoke{position:absolute;z-index:0;inset:76px -10% auto;height:610px;pointer-events:none;filter:saturate(.9);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 72%,transparent 100%),linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 72%,transparent 100%),linear-gradient(to right,transparent 0,#000 13%,#000 87%,transparent 100%);mask-composite:intersect}
.marketing-site .hero-smoke span{position:absolute;display:block;border-radius:48% 52% 58% 42%;filter:blur(58px);opacity:.28;will-change:transform;border:1px solid transparent;animation:hero-smoke-drift 16s var(--motion-ease) infinite alternate}
.marketing-site .hero-smoke span:nth-child(1){width:52%;height:300px;left:5%;top:72px;background:radial-gradient(ellipse at center,rgba(12,15,19,.78),rgba(12,15,19,0) 70%)}
.marketing-site .hero-smoke span:nth-child(2){width:47%;height:280px;right:3%;top:16px;opacity:.34;background:radial-gradient(ellipse at center,rgba(255,232,0,.9),rgba(255,232,0,0) 69%);animation-direction:alternate-reverse}
.marketing-site .hero-smoke span:nth-child(3){width:38%;height:230px;left:37%;top:205px;opacity:.22;background:radial-gradient(ellipse at center,rgba(25,28,31,.55),rgba(25,28,31,0) 72%);animation-delay:-8s}
@keyframes hero-smoke-drift{0%{transform:translate3d(-8%,8px,0) rotate(-4deg) scale(.9)}45%{transform:translate3d(8%,-18px,0) rotate(5deg) scale(1.08)}100%{transform:translate3d(-1%,18px,0) rotate(-2deg) scale(.98)}}
.marketing-site .hero .reveal{animation-duration:var(--motion-duration);animation-timing-function:var(--motion-ease)}
.marketing-site .reveal.motion-pending{transition-duration:var(--motion-duration);transition-timing-function:var(--motion-ease)}
.marketing-site .media-active{animation-duration:var(--motion-duration);animation-timing-function:var(--motion-ease)}
@media (max-width:650px){.marketing-site .hero-smoke{inset:64px -55% auto;height:520px}.marketing-site .hero-smoke span{filter:blur(54px);opacity:.15}}
@media (prefers-reduced-motion:reduce){.marketing-site .hero-smoke span{animation:none}.marketing-site .hero-smoke{opacity:.65}}

html:has(.marketing-site){scroll-behavior:smooth;scroll-padding-top:88px}
.marketing-site .principle-card h3:before{display:none}
.marketing-site .principle-card{padding-top:38px}
/* Reserve a two-line title box so card bodies align across the row (1-line titles don't ride up). Only where cards sit side by side. */
@media (min-width:651px){.marketing-site .principle-card h3{min-height:53px}}
.marketing-site .hero-smoke{transform:translate3d(0,var(--smoke-scroll,0),0);transition:transform .08s linear}
.marketing-site .hero-smoke span{mix-blend-mode:multiply;animation-duration:18s;animation-timing-function:var(--motion-ease)}
.marketing-site .hero-smoke span:nth-child(1){opacity:.34;animation-name:hero-smoke-a}
.marketing-site .hero-smoke span:nth-child(2){opacity:.46;animation-name:hero-smoke-b;animation-delay:-5s}
.marketing-site .hero-smoke span:nth-child(3){opacity:.3;animation-name:hero-smoke-c;animation-delay:-11s}
.marketing-site .hero-smoke span:nth-child(4){width:25%;height:190px;left:18%;top:245px;opacity:.3;background:radial-gradient(ellipse at center,rgba(255,232,0,.92),rgba(255,232,0,0) 70%);animation-name:hero-smoke-b;animation-delay:-14s}
.marketing-site .hero-smoke span:nth-child(5){width:29%;height:230px;right:19%;top:176px;opacity:.27;background:radial-gradient(ellipse at center,rgba(8,11,15,.8),rgba(8,11,15,0) 72%);animation-name:hero-smoke-c;animation-delay:-2s}
@keyframes hero-smoke-a{0%{transform:translate3d(-13%,12px,0) rotate(-7deg) scale(.88)}32%{transform:translate3d(7%,-22px,0) rotate(4deg) scale(1.12)}68%{transform:translate3d(16%,18px,0) rotate(-2deg) scale(.96)}100%{transform:translate3d(-4%,-8px,0) rotate(6deg) scale(1.05)}}
@keyframes hero-smoke-b{0%{transform:translate3d(14%,-14px,0) rotate(8deg) scale(1.05)}29%{transform:translate3d(-9%,21px,0) rotate(-5deg) scale(.91)}63%{transform:translate3d(-17%,-10px,0) rotate(3deg) scale(1.13)}100%{transform:translate3d(6%,16px,0) rotate(-7deg) scale(.98)}}
@keyframes hero-smoke-c{0%{transform:translate3d(-5%,24px,0) rotate(-3deg) scale(.96)}38%{transform:translate3d(18%,-16px,0) rotate(7deg) scale(1.09)}71%{transform:translate3d(-12%,-27px,0) rotate(-6deg) scale(.9)}100%{transform:translate3d(8%,9px,0) rotate(4deg) scale(1.11)}}
.marketing-site .reveal.motion-pending .product-window img,.marketing-site .reveal.motion-pending .walkthrough-frame img{opacity:.72;transform:translate3d(0,18px,0) scale(1.018)}
.marketing-site .reveal.motion-pending.is-visible .product-window img,.marketing-site .reveal.motion-pending.is-visible .walkthrough-frame img{opacity:1;transform:none;transition:opacity var(--motion-duration) var(--motion-ease),transform var(--motion-duration) var(--motion-ease)}
@media (prefers-reduced-motion:reduce){html:has(.marketing-site){scroll-behavior:auto}.marketing-site .hero-smoke{transform:none;transition:none}.marketing-site .reveal.motion-pending .product-window img,.marketing-site .reveal.motion-pending .walkthrough-frame img{opacity:1;transform:none}}

.marketing-site canvas.hero-smoke{inset:76px auto auto calc(50% - 50vw);display:block;width:100vw;height:610px;opacity:1;filter:saturate(1.08) contrast(1.06);transform:translate3d(0,var(--smoke-scroll,0),0)}
.marketing-site .hero .reveal-delay-1{animation-delay:0s}
.marketing-site .reveal-delay-1.motion-pending,.marketing-site .reveal-delay-2.motion-pending,.marketing-site .reveal-delay-3.motion-pending{transition-delay:0s}
@media (max-width:650px){.marketing-site canvas.hero-smoke{inset:64px auto auto calc(50% - 50vw);width:100vw;height:520px;filter:saturate(1.05) contrast(1.04)}}

/* Pricing stays within the established IDOTest controls and spacing rhythm. */
.marketing-site .pricing-section{padding-top:104px;padding-bottom:112px}
.marketing-site .pricing-heading{max-width:690px;margin-bottom:44px}
.marketing-site .pricing-heading h2{font-size:clamp(34px,4vw,48px);line-height:1.08;margin-bottom:14px}
.marketing-site .pricing-heading>p{font-size:16px;line-height:1.55;margin-bottom:0}
.marketing-site .billing-toggle{margin-top:24px;padding:4px;border-radius:9px}
.marketing-site .billing-toggle button{min-height:42px;padding:0 18px;transition:background .2s ease,color .2s ease}
.marketing-site .pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.marketing-site .price-card{display:grid;grid-template-rows:minmax(100px,auto) minmax(112px,auto) auto auto 1fr;min-width:0;padding:30px;border-radius:12px;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}
.marketing-site .price-card:hover{transform:none;border-color:#aeb5bd;box-shadow:0 12px 32px rgba(17,17,17,.06)}
.marketing-site .price-card-featured,.marketing-site .price-card-featured:hover{border:2px solid #111}
.marketing-site .popular-badge{padding:8px 12px;font-size:11px}
.marketing-site .plan-name{font-size:21px;line-height:1.2;margin-bottom:8px}
.marketing-site .plan-summary{max-width:31ch;margin:0;color:#5f6975;font-size:13px;line-height:1.5}
.marketing-site .price-card-amount{align-self:end;min-width:0}
.marketing-site .price{min-height:68px;align-items:baseline;margin:0;gap:10px}
.marketing-site .price strong{font-size:clamp(38px,3.8vw,52px);line-height:1.05;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}
.marketing-site .price span{line-height:1.35}
.marketing-site .enterprise-price strong{font-size:clamp(34px,3vw,42px)}
.marketing-site .annual-note{display:flex;flex-wrap:wrap;gap:4px 10px;align-content:start;min-height:38px;margin:10px 0 16px;color:#626d79;font-size:12px;line-height:1.35}
.marketing-site .annual-note strong{color:#246442;font-weight:750}
.marketing-site .price-card-cta{align-self:end;min-height:46px}
.marketing-site .limits{margin:22px 0 0;border-top:1px solid #e3e5e8;border-bottom:1px solid #e3e5e8}
.marketing-site .limits div{padding:11px 0}
.marketing-site .limits div:last-child{border-bottom:0}
.marketing-site .plan-features{align-content:start;gap:11px;padding-top:22px}
.marketing-site .plan-features li{font-size:13px;line-height:1.45;color:#4f5965}
.marketing-site .plan-features li:before{color:#276c45}
/* Mobile + small-tablet pricing becomes a native horizontal scroll-snap carousel
   (one source of truth: the same Razor cards reflow). Desktop/wide-tablet keep the
   three-card comparison grid. No JS, no library; native touch scrolling. */
@media (max-width:899px){
  .marketing-site .pricing-grid{display:flex;grid-template-columns:none;max-width:none;margin:0;gap:16px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:6px 0 12px}
  .marketing-site .pricing-grid::-webkit-scrollbar{display:none}
  .marketing-site .price-card{flex:0 0 84%;scroll-snap-align:start;grid-template-rows:auto auto auto auto 1fr;min-width:0}
  .marketing-site .price-card-heading{min-height:0}
}
@media (max-width:650px){.marketing-site .pricing-section{padding-top:80px;padding-bottom:88px}.marketing-site .pricing-heading{margin-bottom:36px}.marketing-site .price-card{padding:24px}.marketing-site .price strong{font-size:44px}}
@media (prefers-reduced-motion:reduce){.marketing-site .price-card,.marketing-site .billing-toggle button{transition:none}}

/* ============================================================================
   Checkout / plan confirmation (/checkout)
   Plan summary and secure hosted-payment handoff. Revised 2026-10-03.
   ========================================================================== */
.marketing-site.checkout-page{background:#fbfbfa;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}

.checkout-header{display:flex;align-items:center;justify-content:space-between;gap:16px;width:var(--page);margin:0 auto;padding:24px 0}
.checkout-header .brand img{width:128px}

/* the single, crafted back control */
.checkout-back{display:inline-flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid transparent;font-size:13.5px;font-weight:750;color:#3a424d;transition:border-color .2s var(--motion-ease),color .2s ease}
.checkout-back:hover{border-color:#111;color:var(--ink)}
.checkout-back-arrow{font-weight:800;font-size:15px;line-height:1;transition:transform .25s var(--motion-ease)}
.checkout-back:hover .checkout-back-arrow{transform:translateX(-3px)}

.checkout-main{width:var(--page);margin:0 auto;padding:8px 0 96px;flex:1 0 auto}

.checkout-title{max-width:680px;margin:20px 0 32px}
.checkout-title h1{font-size:clamp(28px,3vw,34px);line-height:1.15;letter-spacing:-.025em;margin:0 0 10px}
.checkout-lede{font-size:16px;line-height:1.55;color:var(--muted);margin:0}

.checkout-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:52px;align-items:start}

.checkout-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:32px;min-width:0}
.checkout-card-primary{border-color:#cfd3d7;box-shadow:0 14px 35px rgba(16,24,32,.06)}
.checkout-details{background:transparent;border:0;padding:16px 0}

.checkout-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.checkout-card-heading h2{font-size:19px;line-height:1.1;margin:0;letter-spacing:-.02em;color:var(--ink)}
.checkout-tag{font-size:12px;font-weight:650;color:#626b78;white-space:nowrap}
.checkout-payment-heading{align-items:flex-start}
.checkout-payment-heading p{font-size:14px;line-height:1.5;color:var(--muted);margin:12px 0 0;max-width:42ch}
.checkout-provider{font-size:12px;font-weight:800;background:var(--yellow);color:#111;padding:6px 10px;border-radius:6px}
.checkout-email-field{display:grid;gap:8px;margin:24px 0}
.checkout-email-field label{font-size:14px;font-weight:700;color:var(--ink)}
.checkout-email-field input{height:48px;min-width:0;width:100%;border:1px solid #aeb8c1;border-radius:6px;padding:0 13px;background:#fff;color:#111;font:inherit;font-size:16px}
.checkout-field-help{font-size:13px;color:var(--muted);margin:0;line-height:1.45}
.checkout-field-error{margin:8px 0;color:#a22b22;font-size:14px;line-height:1.5}
.checkout-order-total{margin:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.checkout-order-total>div{display:flex;justify-content:space-between;gap:16px;padding:18px 0}
.checkout-order-total dt{font-size:14px;color:var(--muted)}
.checkout-order-total dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.checkout-order-due{border-top:1px solid var(--line)}
.checkout-order-due dt,.checkout-order-due dd{font-size:18px;font-weight:750;color:var(--ink)}
.checkout-security-note{font-size:14px;line-height:1.55;color:var(--muted);margin:16px 0 0}
.checkout-trust{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--muted)}
.checkout-trust strong{display:block;color:var(--ink);font-size:13px;margin-bottom:2px}
.checkout-page :is(button,a,input):focus-visible{outline:2px solid #111;outline-offset:4px}

/* cadence toggle, matches .billing-toggle */
.checkout-cadence{display:flex;flex-wrap:wrap;background:#f0f1f3;border:1px solid #e4e6e9;padding:4px;border-radius:8px;margin:24px 0 16px}
.checkout-cadence button{display:inline-flex;flex:1;justify-content:center;align-items:center;gap:7px;border:0;background:transparent;border-radius:6px;padding:11px 12px;font-size:13px;font-weight:750;color:#3a424d;cursor:pointer;transition:background .2s ease,color .2s ease}
.checkout-cadence button.is-active{background:var(--ink);color:#fff;box-shadow:0 4px 12px rgba(17,17,17,.18)}
.checkout-cadence button:not(.is-active):hover{color:var(--ink)}
.checkout-cadence button:disabled{cursor:default;opacity:.55}
.checkout-cadence span{display:inline-flex;align-items:center;background:var(--yellow);color:#111;border-radius:999px;padding:3px 8px;font-size:10px;font-weight:850;letter-spacing:.02em}

/* price */
.checkout-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:11px;margin:2px 0 8px}
.checkout-price strong{font-size:clamp(34px,3.5vw,44px);font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.checkout-price span{font-size:15px;color:var(--muted);font-weight:650}
.checkout-billing-note{font-size:14px;line-height:1.5;color:#5a626d;margin:0 0 26px;display:flex;flex-wrap:wrap;gap:7px}
.checkout-billing-note strong{color:var(--green);font-weight:800}

.checkout-action{width:100%;gap:10px;font-size:15px;min-height:54px}
.checkout-action-arrow{font-weight:800;transition:transform .25s var(--motion-ease)}
.checkout-action:hover .checkout-action-arrow{transform:translateX(4px)}

/* "not open yet" note, an inset line with the brand dot, not a boxed alert */
.checkout-notice{display:flex;gap:12px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
.checkout-notice-dot{flex:none;margin-top:6px;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,232,0,.18)}
.checkout-notice strong{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px}
.checkout-notice p{font-size:13px;line-height:1.55;color:var(--muted);margin:0}

/* plan summary */
.checkout-limits{margin:0 0 4px;border-top:1px solid #e7e8ea}
.checkout-limits>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid #e7e8ea}
.checkout-limits dt{font-size:13px;color:var(--muted);margin:0;font-weight:600}
.checkout-limits dd{font-size:16px;font-weight:850;color:var(--ink);margin:0;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.checkout-features{list-style:none;padding:22px 0 0;margin:0;display:grid;gap:13px}
.checkout-features li{font-size:14px;line-height:1.4;color:#49515c;font-weight:550;display:flex;align-items:center;gap:11px}
.checkout-features li:before{content:"\2713";color:#276c45;font-weight:900;flex:none;font-size:13px}

.checkout-help{text-align:center;font-size:14px;color:var(--muted);margin:40px auto 0}
.checkout-help a{color:var(--ink);font-weight:750;border-bottom:1px solid #cfd3d8;transition:border-color .2s ease}
.checkout-help a:hover{border-color:var(--ink)}

/* loading and error states */
.checkout-loading{text-align:center;padding:96px 0;color:var(--muted);font-size:15px}
.checkout-error{text-align:center;padding:72px 0;max-width:520px;margin:0 auto}
.checkout-error h1{font-size:clamp(28px,4vw,40px);color:var(--ink);margin:0 0 12px;letter-spacing:-.03em}
.checkout-error p{font-size:16px;color:var(--muted);margin:0 0 24px}

@media (max-width:860px){
  .checkout-grid{grid-template-columns:1fr}
  .checkout-card,.checkout-details{padding:24px}
  .checkout-title{margin-bottom:28px}
}
@media (max-width:560px){.checkout-trust{grid-template-columns:1fr}.checkout-title{margin-top:8px}.checkout-main{padding-bottom:56px}}
@media (prefers-reduced-motion:reduce){
  .checkout-back-arrow,.checkout-action-arrow,.checkout-cadence button,.checkout-back{transition:none}
  .checkout-back:hover .checkout-back-arrow,.checkout-action:hover .checkout-action-arrow{transform:none}
}

/* Large-screen container breathing room. Laptops and below (<=1679px) are
   unchanged; only large displays widen the content so the page does not sit as
   a narrow column in a large empty canvas. Hero copy stays centered at its own
   max-width, so only section/grid width grows. Added 2026-10-02. */
@media (min-width:1680px){.marketing-site{--page:min(1320px,calc(100vw - 88px))}}
@media (min-width:2240px){.marketing-site{--page:min(1440px,calc(100vw - 120px))}}

/* Product screenshot bottom fade. App screens are taller than the wide product
   frame, so the image dissolves gently at the bottom instead of showing a hard
   horizontal cut through the UI. Added 2026-10-02. */
.marketing-site .product-window-hero{position:relative}
.marketing-site .product-window-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 92%);pointer-events:none;z-index:2;border-radius:0 0 14px 14px}

/* Detail-section product screenshots: graceful bottom fade for cropped views. */
.marketing-site .product-window:not(.product-window-hero):not(.product-window-dark)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20%;pointer-events:none;z-index:2;border-radius:0 0 14px 14px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0,#fff 94%)}
/* Complete views (nothing continues below the crop) keep a crisp bottom edge, so the fade is suppressed. */
.marketing-site .product-window.product-window-complete:not(.product-window-hero):not(.product-window-dark)::after{display:none}

/* ============================================================================
   Minimal product-story pass (2026-10-02). Typography-led sections replace the
   former screenshot gallery; only two product visuals remain (hero Execute view
   and the Progress payoff). Smoke, pricing and the dark CTA are unchanged.
   ========================================================================== */

/* Quiet product statement + differentiators (no cards, typography led). */
.marketing-site .statement{padding-top:112px;padding-bottom:96px}
.marketing-site .statement-points{display:grid;grid-template-columns:repeat(3,1fr);gap:52px;margin-top:4px}
.marketing-site .statement-point h3{font-size:19px;line-height:1.25;letter-spacing:-.012em;margin:0 0 12px;color:#1b222b}
.marketing-site .statement-point h3:before{content:"";display:block;width:26px;height:2px;background:var(--yellow);margin:0 0 20px}
.marketing-site .statement-point p{font-size:15px;line-height:1.65;color:var(--muted);margin:0;max-width:34ch}

/* Golden flow: a restrained segmented stepper, Project -> Reports. */
.marketing-site .flow-section{padding-top:56px;padding-bottom:116px}
.marketing-site .flow{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.marketing-site .flow-step{padding-top:20px;border-top:2px solid #e6e8eb}
.marketing-site .flow-step:first-child{border-top-color:var(--yellow)}
.marketing-site .flow-index{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;color:#9aa2ad;font-variant-numeric:tabular-nums}
.marketing-site .flow-label{display:block;margin-top:12px;font-size:18px;font-weight:800;letter-spacing:-.012em;color:#1b222b}
.marketing-site .flow-note{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--muted)}

/* One dark premium moment: automation + traceability, typography led. */
.marketing-site .dark-moment{width:100%;max-width:none;background:#11161d;color:#fff;padding:120px max(24px,calc((100vw - 1180px)/2))}
.marketing-site .dark-moment-shell{max-width:800px}
.marketing-site .dark-moment h2{color:#fff}
.marketing-site .dark-moment-lede{font-size:18px;line-height:1.62;color:#b8c0ca;margin:0;max-width:700px}
.marketing-site .dark-moment .capability-list{margin-top:40px}
.marketing-site .run-strip{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:38px;padding-top:26px;border-top:1px solid #2b323b}
.marketing-site .run-strip-label{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7e8794}
.marketing-site .run-chips{display:flex;flex-wrap:wrap;gap:8px}
.marketing-site .run-chip{font-size:12px;font-weight:750;padding:5px 12px;border-radius:999px;border:1px solid #2f3742;color:#c3cad3;font-variant-numeric:tabular-nums}
.marketing-site .run-chip.pass{color:#5fd39a;border-color:#2c4a3b}
.marketing-site .run-chip.fail{color:#f09090;border-color:#4a3030}
.marketing-site .run-chip.skip{color:#9aa2ad}

/* Integrations as truthful rows (no screenshot, no logo wall). */
.marketing-site .connect-list{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--line)}
.marketing-site .connect-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;align-items:center;gap:24px;padding:22px 2px;border-bottom:1px solid var(--line)}
.marketing-site .connect-name{font-size:16px;font-weight:800;letter-spacing:-.012em;color:#1b222b}
.marketing-site .connect-purpose{font-size:14px;color:var(--muted)}
.marketing-site .connect-status{justify-self:end;font-size:12px;font-weight:750;padding:5px 12px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.marketing-site .connect-status.is-available{color:#1b7a47;border-color:#c3e4d1;background:#f2faf5}
.marketing-site .connect-status.is-later{color:#7a838f;background:#f6f7f8}

/* Trust: quiet light columns (converted from the former dark band). */
.marketing-site .trust-section{padding-top:56px;padding-bottom:116px}
.marketing-site .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:2px}
.marketing-site .trust-item h3{font-size:18px;margin:0 0 10px;letter-spacing:-.012em;color:#1b222b}
.marketing-site .trust-item h3:before{content:"";display:block;width:26px;height:2px;background:var(--yellow);margin:0 0 18px}
.marketing-site .trust-item p{font-size:14px;line-height:1.6;color:var(--muted);margin:0;max-width:34ch}
.marketing-site .trust-link{font-weight:700;border-bottom:1px solid #cfd3d8;white-space:nowrap}
.marketing-site .trust-link:hover{border-color:#111}

@media (max-width:860px){
  .marketing-site .statement{padding-top:88px;padding-bottom:72px}
  .marketing-site .statement-points{grid-template-columns:1fr;gap:34px}
  .marketing-site .flow-section{padding-top:44px;padding-bottom:84px}
  .marketing-site .flow{grid-template-columns:1fr;gap:0}
  .marketing-site .flow-step{padding:20px 0 20px 0;border-top:1px solid var(--line)}
  .marketing-site .flow-step:first-child{border-top:2px solid var(--yellow)}
  .marketing-site .flow-label{margin-top:8px}
  .marketing-site .dark-moment{padding-left:18px;padding-right:18px;padding-top:88px;padding-bottom:88px}
  .marketing-site .trust-section{padding-top:44px;padding-bottom:84px}
  .marketing-site .trust-grid{grid-template-columns:1fr;gap:30px}
}
@media (max-width:620px){
  .marketing-site .connect-row{grid-template-columns:1fr auto;gap:4px 14px;padding:18px 2px}
  .marketing-site .connect-status{grid-row:1;grid-column:2;align-self:start}
  .marketing-site .connect-purpose{grid-column:1;grid-row:2}
}

/* Static billing toggle (landing page has no Blazor circuit). Both the monthly and
   yearly price sets are rendered in each card; data-cadence on the grid (set by
   site.js, default monthly) decides which one CSS shows. Each shown element keeps its
   own display, so .price / .annual-note stay flex and the CTA stays a full button. */
.marketing-site .pricing-grid:not([data-cadence="annual"]) .yearly-only{display:none}
.marketing-site .pricing-grid[data-cadence="annual"] .monthly-only{display:none}

/* ============================================================================
   Mobile-first hero discipline (<=650px). Desktop and tablet are untouched: every
   rule here is scoped to the phone breakpoint and overrides earlier desktop rules
   that were winning on mobile by specificity. Principle: one dominant idea at a
   time. The WebGL smoke keeps its shader and identity but moves into peripheral
   negative space (top and right) and is masked away from the text column; the
   headline is calm, not gigantic; the body recedes; the secondary action becomes a
   quiet text link; and the real Execute screenshot is framed as an intentional
   mobile crop instead of a microscopic full desktop capture. Added 2026-10-03.
   ========================================================================== */
@media (max-width:650px){
  /* Header-to-content: remove the dead 164px band (a later desktop rule was winning
     on mobile) so the first screen is not mostly empty below the compact header. */
  .marketing-site .hero{padding-top:104px;padding-bottom:62px}

  /* Eyebrow: same wording, quieter presence (less size, tracking and weight). */
  .marketing-site .hero .eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#6a727d;margin-bottom:16px}

  /* Headline: strong, premium, calm. A real mobile size, not a scaled desktop one. */
  .marketing-site .hero h1{font-size:clamp(34px,9.4vw,42px);line-height:1.05;letter-spacing:-.03em;margin:0 0 20px;max-width:none}

  /* Body: supports the headline rather than competing with it. */
  .marketing-site .hero-lede{font-size:16px;line-height:1.55;color:#5f6975;margin-bottom:26px;max-width:none}

  /* CTA hierarchy: one strong primary, one quiet text-style secondary with an arrow. */
  .marketing-site .hero-actions{flex-direction:column;align-items:flex-start;gap:14px}
  .marketing-site .hero-actions .button-dark{width:100%}
  .marketing-site .hero-actions a.button-ghost{width:auto;min-height:0;padding:11px 2px;border:0!important;background:transparent!important;color:#1b222b!important;font-weight:700;border-radius:0}
  .marketing-site .hero-actions a.button-ghost:hover{transform:none;color:#000!important}
  .marketing-site .hero-actions a.button-ghost::after{content:"\00a0\2192";font-weight:800;display:inline-block;transition:transform .2s var(--motion-ease)}
  .marketing-site .hero-actions a.button-ghost:hover::after{transform:translateX(3px)}

  /* Product: an intentional crop into the real Execute screenshot. The same image is
     scaled up and clipped to the meaningful left region (run, test cases and the
     selected case) so the UI reads clearly. Calmer, flatter frame. */
  .marketing-site .hero-product{margin-top:40px}
  .marketing-site .product-window-hero,.marketing-site .product-window-hero:hover{transform:none;box-shadow:0 16px 38px rgba(15,20,26,.12);border-color:#e2e5e8}
  .marketing-site .product-window-hero img{width:176%;max-width:none;transform:none;transform-origin:top left}

  /* Smoke: shader unchanged. Repositioned into the upper-right negative space and
     masked so the headline/body/CTA column stays clean. Not opacity-to-zero: reduced
     presence plus intelligent falloff preserves the identity. */
  .marketing-site canvas.hero-smoke{
    inset:50px auto auto calc(50% - 50vw);width:100vw;height:400px;opacity:.58;
    filter:saturate(1.02) contrast(1);
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 80%),linear-gradient(to right,transparent 0,transparent 26%,#000 72%,#000 100%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to bottom,#000 0,#000 30%,transparent 80%),linear-gradient(to right,transparent 0,transparent 26%,#000 72%,#000 100%);
    mask-composite:intersect;
  }

  /* Progress: the second product visual becomes an intentional crop into the real
     Reports screen (the totals donut and its results legend) instead of a full
     desktop capture in a nested horizontal-scroll frame that fights vertical swipe.
     Same scale as before, focused and without the nested scroll. */
  .marketing-site .detail-section .detail-visual{overflow:hidden;padding-bottom:0}
  .marketing-site .detail-section .detail-visual .product-window-complete{min-width:0;overflow:hidden}
  .marketing-site .product-window-complete img{width:210%;max-width:none;margin-left:-62%;transform:none}

  /* Scroll reveals even quieter on a phone. */
  .marketing-site .reveal.motion-pending{transform:translateY(10px)}
}