/* KadaAI — site.css: the shared design system. No build step.
   1 tokens · 2 reset · 3 type · 4 layout · 5 header · 6 footer · 7 buttons · 8 badges · 9 icons
   10 cards · 11 hero · 12 feature rows · 13 frames · 14 stats & trust · 15 compare · 16 faq · 17 tabs
   18 controls & forms · 19 pricing · 20 lists & steps · 21 callout, notes · 22 chat · 23 cta band
   24 lightbox · 25 reveal · 26 utilities. The class API is documented in README.md and styleguide.html. */

/* 1. Tokens */
:root {
  --navy: #0B1F44; --navy-2: #15295a; --ink: #0B1F44; --ink-2: #3A4A6B;
  --muted: #6B7A99; --text-muted: #5B6A88; /* text-muted: AA on light surfaces */
  --blue: #1E6BF0; --blue-ink: #1554CC; --cyan: #12B8C8; --teal: #14C8A8;
  --warm: #D9623B; --warm-ink: #B0461F; --warm-tint: #FCEEE8;
  --green: #2E9E5B; --green-ink: #1E7A43; --green-tint: #E6F5EC;
  --danger: #C8372D;
  --surface: #fff; --surface-2: #F6F8FC; --surface-3: #EEF3FB;
  --border: #E3E8F2; --border-strong: #CFD7E6; /* cards, sections, dividers: decoration only */
  /* form controls (inputs, stepper, radio dot, switch off): 3:1+ on white, --surface-2 and --surface-3 (WCAG 1.4.11) */
  --control-border: #7F8CA8; --control-border-hover: #5B6A88;
  --ai-gradient: linear-gradient(100deg, #1E6BF0 0%, #12B8C8 62%, #14C8A8 100%);
  /* gradient text: -text for 24px+ (.ai-text, stats); -ink for small text (.eyebrow--ai), 4.6:1+ on white */
  --ai-gradient-text: linear-gradient(100deg, #1E6BF0 8%, #0E9DB4 62%, #0D9C88 100%);
  --ai-gradient-ink: linear-gradient(100deg, #1554CC, #0A7C8E 60%, #0B7A6A);
  /* fills behind white text (.btn--ai, .badge--pro): every stop 4.6:1+ with white */
  --ai-gradient-strong: linear-gradient(100deg, #1C60E4 0%, #1277CD 50%, #0A7C8E 100%);
  --ai-tint: linear-gradient(120deg, rgba(30,107,240,.07), rgba(20,200,168,.09));
  /* Indic faces sit after Jakarta so Malayalam/Tamil glyphs fall back to them, character by character */
  --font: "Plus Jakarta Sans", "Noto Sans Malayalam", "Noto Sans Tamil", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Nirmala UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-display: clamp(2.375rem, 1.55rem + 3.6vw, 4.5rem);
  --fs-h1: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 1.9vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.12rem + .5vw, 1.5rem);
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  --fs-body: clamp(1.0625rem, 1rem + .15vw, 1.125rem);
  --fs-sm: .9375rem; --fs-xs: .8125rem;
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(4.5rem, 2.8rem + 6vw, 8.5rem);
  --gutter: clamp(1rem, -.25rem + 3.2vw, 2rem);
  --container: 1200px;
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;
  --shadow-pill: 0 1px 2px rgba(11,31,68,.08), 0 3px 10px -2px rgba(11,31,68,.1);
  --shadow-xs: 0 1px 2px rgba(11,31,68,.06);
  --shadow-sm: 0 1px 2px rgba(11,31,68,.05), 0 3px 10px -2px rgba(11,31,68,.06);
  --shadow-md: 0 2px 4px rgba(11,31,68,.04), 0 12px 28px -8px rgba(11,31,68,.14);
  --shadow-lg: 0 4px 10px rgba(11,31,68,.05), 0 28px 56px -16px rgba(11,31,68,.24);
  --shadow-frame: 0 0 0 1px rgba(11,31,68,.07), 0 2px 4px rgba(11,31,68,.04), 0 14px 28px -10px rgba(11,31,68,.14), 0 44px 80px -28px rgba(11,31,68,.28);
  --glow-ai: 0 8px 22px -8px rgba(30,107,240,.6), 0 3px 14px -4px rgba(18,184,200,.45);
  --header-h: 64px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");
}
@media (min-width: 940px) {:root {--header-h:72px} }

/* 2. Reset */
*, *::before, *::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 1rem);color-scheme:light}
@media (prefers-reduced-motion: no-preference) {html {scroll-behavior:smooth} }
body{min-height:100vh;font-family:var(--font);font-size:var(--fs-body);line-height:1.6;color:var(--ink-2);background:var(--surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img, picture, video, canvas{display:block;max-width:100%;height:auto}
input, button, textarea, select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:where(ul[role="list"], ol[role="list"]){list-style:none;padding:0} /* zero specificity: any class may set its own padding */
table{border-collapse:collapse}
fieldset{min-width:0;padding:0;border:0}
legend{padding:0}
[hidden]{display:none !important}
a{color:var(--blue-ink);text-decoration:underline;text-decoration-color:rgba(21,84,204,.35);text-decoration-thickness:1px;text-underline-offset:.2em;transition:color .15s, text-decoration-color .15s}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
::selection{background:rgba(30,107,240,.18)}
.nav-locked{overflow:hidden}

/* 3. Typography (.h1–.h4 give any element the full heading style) */
h1, h2, h3, h4, .h1, .h2, .h3, .h4{color:var(--ink);font-weight:800;line-height:1.1;letter-spacing:-.028em;text-wrap:balance}
h1, .h1{font-size:var(--fs-h1)}
h2, .h2{font-size:var(--fs-h2)}
h3, .h3{font-size:var(--fs-h3);font-weight:700;line-height:1.25;letter-spacing:-.018em}
h4, .h4{font-size:var(--fs-h4);font-weight:700;line-height:1.35;letter-spacing:-.01em}
.h1, .h2{font-weight:800;line-height:1.1;letter-spacing:-.028em}
p, li{text-wrap:pretty}
strong, b{font-weight:700;color:var(--ink)}
:lang(ml), :lang(ta){line-height:1.75}
.display{font-size:var(--fs-display);line-height:1.03;letter-spacing:-.042em;font-weight:800;color:var(--ink)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2)}
.small{font-size:var(--fs-sm)} .xsmall {font-size:var(--fs-xs)}
.muted{color:var(--text-muted)}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-sm);font-weight:700;line-height:1.3;letter-spacing:.005em;color:var(--blue-ink)}
.eyebrow .icon{width:1.125rem;height:1.125rem}
.eyebrow--ai .icon{color:var(--blue)}
.eyebrow--warm{color:var(--warm-ink)}
.eyebrow--muted{color:var(--text-muted)}
.ai-text, .eyebrow--ai, .stat__value--ai{background:var(--ai-gradient-text);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.eyebrow--ai{background-image:var(--ai-gradient-ink)}
.warm-text{color:var(--warm)} /* 24px+ only; small warm text uses --warm-ink */
.wordmark{display:inline-flex;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--navy);text-decoration:none;font-size:1.5rem}
.wordmark span{background:var(--ai-gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark--light{color:#fff}
kbd, .kbd{display:inline-block;min-width:1.6em;padding:.1em .45em;font-family:var(--mono);font-size:.8em;font-weight:600;line-height:1.5;text-align:center;color:var(--ink);background:#fff;border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:6px}
.prose{max-width:70ch}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.5rem, 1.3rem + .8vw, 1.875rem);margin-top:2.2em}
.prose h3{font-size:1.25rem;margin-top:1.8em}
.prose ul, .prose ol{padding-left:1.25em}
.prose li + li{margin-top:.4em}

/* 4. Layout */
.container{width:100%;max-width:calc(var(--container) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:calc(840px + 2 * var(--gutter))}
.container--text{max-width:calc(720px + 2 * var(--gutter))}
.section{position:relative;padding-block:var(--section-y)}
.section--tint{background:var(--surface-2)}
.section--tight{padding-block:calc(var(--section-y) * .6)}
.section--flush-top{padding-top:0}
.section--flush-bottom{padding-bottom:0}
.section--line{border-top:1px solid var(--border)}
.section-head{display:grid;gap:1rem;max-width:760px;margin-bottom:clamp(2.5rem, 2rem + 2vw, 4rem);justify-items:start;grid-template-columns:minmax(0, 1fr)}
.section-head > p:not(.eyebrow){font-size:var(--fs-lead);line-height:1.55}
.section-head--center{margin-inline:auto;text-align:center;justify-items:center}
.grid{display:grid;gap:var(--grid-gap, clamp(1rem, .75rem + 1vw, 1.5rem))}
.grid--auto{grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr))}
@media (min-width: 640px) {.grid--2, .grid--3, .grid--4 {grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width: 960px) {.grid--3 {grid-template-columns:repeat(3, minmax(0, 1fr))} .grid--4 {grid-template-columns:repeat(4, minmax(0, 1fr))} }
/* 640–959 px: two columns, so an odd last card spans the row instead of leaving half of it blank */
@media (min-width: 640px) and (max-width: 959.98px) {.grid--3 > :last-child:nth-child(odd), .grid--4 > :last-child:nth-child(odd) {grid-column:1 / -1} }
.split{display:grid;gap:clamp(2rem, 1.5rem + 2.5vw, 4rem);align-items:start}
@media (min-width: 900px) {.split {grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)} .split--center {align-items:center} }
.skip-link{position:absolute;left:1rem;top:-100px;z-index:100;padding:.75rem 1rem;border-radius:var(--r);background:var(--navy);color:#fff;font-weight:700;text-decoration:none}
.skip-link:focus{top:.75rem}

/* 5. Header */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:border-color .2s, box-shadow .2s}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)}
.site-header.is-scrolled{border-bottom-color:var(--border);box-shadow:0 8px 24px -16px rgba(11,31,68,.22)}
.site-header.is-scrolled::before, .site-header.nav-open::before{background:rgba(255,255,255,.94)}
.header-inner{display:flex;align-items:center;gap:.75rem;height:var(--header-h)}
.brand{display:inline-flex;align-items:center;flex:none;margin-right:auto;border-radius:6px}
.brand img{width:auto;height:25px}
.nav-list{list-style:none;padding:0}
.nav-link{display:flex;align-items:center;gap:.55rem;color:var(--ink);font-weight:600;text-decoration:none}
.nav-link .icon{color:var(--blue);width:1.1em;height:1.1em}
.nav-toggle{display:inline-grid;place-items:center;width:44px;height:44px;margin-right:-6px;border-radius:var(--r);color:var(--ink);text-decoration:none}
.nav-toggle:hover{background:var(--surface-2)}
.nav-toggle .icon{width:24px;height:24px}
.nav-toggle .icon-close, .nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
.js .nav-toggle--nojs, html:not(.js) .nav-toggle--js, .js .nav-close{display:none}
.nav-panel-note{margin-top:.875rem;font-size:var(--fs-sm);color:var(--text-muted)}
.nav-close{display:inline-block;margin-top:1rem;font-weight:600}
@media (max-width: 939.98px) {
  .site-nav {position:fixed;inset:var(--header-h) 0 0;z-index:49;display:none;flex-direction:column;padding:.5rem var(--gutter) 2rem;overflow-y:auto;background:#fff;border-top:1px solid var(--border)}
  .nav-open .site-nav, .site-nav:target {display:flex;animation:nav-in .22s var(--ease)}
  .nav-link {min-height:56px;padding:0 .25rem;font-size:1.1875rem;border-bottom:1px solid var(--border)}
  .nav-link[aria-current="page"] {color:var(--blue-ink)}
  .header-cta {padding-inline:.9rem}
  /* Panel foot: the footer's other pages, then the trial button */
  .nav-panel-foot {padding-top:.75rem}
  .nav-more {display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:0 1rem}
  .nav-more a {display:flex;align-items:center;min-height:48px;padding:0 .25rem;font-size:1rem;font-weight:600;color:var(--ink-2);text-decoration:none}
  .nav-more a:hover, .nav-more a[aria-current="page"] {color:var(--blue-ink)}
  .nav-panel-cta {margin-top:1.25rem}
  .nav-panel-note {text-align:center}
}
@media (max-width: 359.98px) {.brand img {height:22px} .header-cta {font-size:.875rem;padding-inline:.75rem} }
@keyframes nav-in {from {opacity:0;transform:translateY(-6px)} }
@media (min-width: 940px) {
  .brand img {height:28px}
  .site-nav {display:flex;align-items:center}
  .nav-list {display:flex;gap:.125rem}
  .nav-link {position:relative;min-height:40px;padding:0 .875rem;border-radius:var(--r-pill);font-size:.9375rem;color:var(--ink-2);transition:color .15s, background-color .15s}
  .nav-link:hover {color:var(--ink);background:var(--surface-2)}
  .nav-link[aria-current="page"] {color:var(--ink);font-weight:700}
  .nav-link[aria-current="page"]::after {content:"";position:absolute;left:50%;bottom:2px;width:18px;height:2.5px;margin-left:-9px;border-radius:2px;background:var(--ai-gradient)}
  .nav-toggle, .nav-panel-foot {display:none}
  .header-cta {margin-left:.75rem}
}

/* 6. Footer */
.site-footer{margin-top:auto;padding-block:clamp(3.5rem, 3rem + 2vw, 5rem) 2rem;background:var(--surface-2);border-top:1px solid var(--border);font-size:var(--fs-sm)}
.footer-grid{display:grid;gap:2.5rem 1.5rem;grid-template-columns:repeat(2, minmax(0, 1fr))}
.footer-brand{grid-column:1 / -1;display:grid;gap:.875rem;justify-items:start;max-width:340px;grid-template-columns:minmax(0, 1fr);align-content:start}
.footer-brand p{color:var(--ink-2);line-height:1.55}
.footer-art{width:132px;height:auto;margin-bottom:.25rem}
.footer-logo{display:inline-flex;border-radius:6px}
.footer-logo img{width:auto;height:28px}
.footer-contact{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}
.footer-contact a{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);font-weight:600;text-decoration:none}
.footer-contact a:hover{color:var(--blue-ink)}
.footer-title{margin-bottom:.875rem;font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.footer-col ul{list-style:none;padding:0;display:grid;gap:.125rem}
.footer-col a{display:inline-flex;align-items:center;min-height:36px;color:var(--ink-2);text-decoration:none}
.footer-col a:hover{color:var(--ink)}
@media (pointer: coarse) {.footer-col a {display:flex;min-height:44px} .footer-contact a {min-height:44px} }
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75rem 2rem;margin-top:clamp(2.5rem, 2rem + 2vw, 4rem);padding-top:1.5rem;border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--fs-xs)}
.footer-made{display:inline-flex;align-items:center;gap:.4rem}
@media (min-width: 640px) {.footer-grid {grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (min-width: 960px) {.footer-grid {grid-template-columns:1.6fr repeat(3, minmax(0, 1fr))} .footer-brand {grid-column:auto} }

/* 7. Buttons */
.btn{--btn-h:48px;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:var(--btn-h);padding:0 1.375rem;border:1px solid transparent;border-radius:var(--r-pill);font-size:1rem;font-weight:700;line-height:1.1;letter-spacing:-.005em;text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .15s var(--ease), box-shadow .2s, background-color .2s, background-position .4s var(--ease), border-color .2s, color .2s}
.btn:active{transform:translateY(1px)}
.btn .icon{width:1.15em;height:1.15em}
.btn--primary{color:#fff;background:var(--navy);box-shadow:0 1px 2px rgba(11,31,68,.25), inset 0 1px 0 rgba(255,255,255,.1)}
.btn--primary:hover{background:var(--navy-2);box-shadow:0 8px 18px -8px rgba(11,31,68,.55), inset 0 1px 0 rgba(255,255,255,.1)}
.btn--ai{color:#fff;background:var(--ai-gradient-strong);background-size:160% 100%;background-position:0 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.24), var(--glow-ai);text-shadow:0 1px 1px rgba(8,40,90,.18)}
.btn--ai:hover{background-position:100% 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 12px 28px -8px rgba(30,107,240,.62), 0 4px 18px -4px rgba(18,184,200,.55)}
.btn--ghost{color:var(--ink);background:#fff;border-color:var(--border-strong);box-shadow:var(--shadow-xs)}
.btn--ghost:hover{background:var(--surface-2);border-color:#B8C3D9}
.btn--light{color:var(--navy);background:#fff}
.btn--light:hover{background:var(--surface-3)}
.btn--outline-light{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.04)}
.btn--outline-light:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.45)}
.btn--link{--btn-h:auto;padding:0;border-radius:4px;color:var(--blue-ink);background:none}
.btn--link .icon{transition:transform .2s var(--ease)}
.btn--link:hover .icon{transform:translateX(3px)}
.btn--sm{--btn-h:40px;padding:0 1.05rem;font-size:.9375rem}
.btn--lg{--btn-h:56px;padding:0 1.75rem;font-size:1.0625rem}
.btn--block{display:flex;width:100%;padding-block:.6rem;white-space:normal}
.btn[aria-disabled="true"], .btn:disabled{opacity:.5;pointer-events:none}
@media (pointer: coarse) {.btn--sm, .btn--link {--btn-h:44px} }
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.btn-row--center{justify-content:center}
@media (max-width: 479.98px) {.btn-row--stack > .btn {width:100%} }

/* 8. Badges & chips */
.badge{display:inline-flex;align-items:center;gap:.3rem;height:1.625rem;padding:0 .65rem;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;line-height:1;letter-spacing:.015em;white-space:nowrap;vertical-align:middle;color:var(--ink-2);background:var(--surface-3)}
.badge .icon{width:.95rem;height:.95rem;stroke-width:2}
.badge--new{color:var(--warm-ink);background:var(--warm-tint)}
.badge--soon{color:var(--ink-2);background:var(--surface-3)}
.badge--ai{color:var(--blue-ink);border:1px solid transparent;background:linear-gradient(#fff, #fff) padding-box, var(--ai-gradient) border-box}
.badge--ai .icon{color:var(--blue)}
.badge--pro{color:#fff;background:var(--ai-gradient-strong)}
.badge--success{color:var(--green-ink);background:var(--green-tint)}
.badge--dark{color:#fff;background:var(--navy)}
.badge--outline{color:var(--text-muted);background:transparent;border:1px dashed var(--border-strong)}
.badge--lg{height:2rem;padding:0 .875rem;font-size:.8125rem}
.chip{display:inline-flex;align-items:center;gap:.6rem;max-width:100%;padding:.3rem .9rem .3rem .3rem;border:1px solid var(--border);border-radius:var(--r-pill);background:rgba(255,255,255,.9);box-shadow:var(--shadow-xs);color:var(--ink-2);font-size:.875rem;font-weight:600;line-height:1.3;text-decoration:none;transition:border-color .15s, box-shadow .15s}
.chip:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm)}
.chip > .icon{width:1rem;height:1rem;flex:none;color:var(--text-muted)}

/* 9. Icons */
.icon{display:inline-block;flex:none;width:1.25em;height:1.25em;vertical-align:-.25em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon--sm{width:1rem;height:1rem} .icon--lg {width:1.75rem;height:1.75rem} .icon--xl {width:2.5rem;height:2.5rem;stroke-width:1.5}
.icon-tile{display:inline-grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;border-radius:var(--r);color:var(--blue-ink);background:var(--surface-3)}
.icon-tile .icon{width:1.375rem;height:1.375rem}
.icon-tile--ai{color:#fff;background:var(--ai-gradient);box-shadow:var(--glow-ai)}
.icon-tile--warm{color:var(--warm-ink);background:var(--warm-tint)}
.icon-tile--green{color:var(--green-ink);background:var(--green-tint)}
.icon-tile--navy{color:#fff;background:var(--navy)}
.icon-tile--sm{width:2.25rem;height:2.25rem;border-radius:10px} .icon-tile--sm .icon {width:1.125rem;height:1.125rem}
.icon-tile--lg{width:3.5rem;height:3.5rem;border-radius:var(--r-lg)} .icon-tile--lg .icon {width:1.75rem;height:1.75rem}

/* 10. Cards */
.card{position:relative;display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.5rem, 1.25rem + .8vw, 2rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xs)}
.card h3{font-size:1.1875rem}
.card p{font-size:1rem;line-height:1.6}
.card > .icon-tile{margin-bottom:.5rem}
.card--hover, a.card{color:inherit;text-decoration:none;transition:transform .25s var(--ease), box-shadow .25s, border-color .25s}
.card--hover:hover, a.card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.card--tint{background:var(--surface-2);border-color:transparent;box-shadow:none}
.section--tint .card--tint{background:var(--surface-3)}
.card--ai{border-color:transparent;background:linear-gradient(#fff, #fff) padding-box, var(--ai-gradient) border-box;box-shadow:0 18px 40px -24px rgba(30,107,240,.45)}
.card--flat{box-shadow:none}
.card__badge{position:absolute;top:1.25rem;right:1.25rem}
.card__link{color:inherit;text-decoration:none}
.card__link::after{content:"";position:absolute;inset:0;border-radius:inherit}
@supports selector(:has(*)) {
  .card:has(.card__link:focus-visible) {outline:2.5px solid var(--blue);outline-offset:3px}
  .card__link:focus-visible {outline:none}
}
.card__foot{margin-top:auto;padding-top:.5rem}
.card__more{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:var(--fs-sm);color:var(--blue-ink)}

/* 11. Hero */
.hero{position:relative;isolation:isolate;overflow:hidden;overflow:clip;padding-block:clamp(2.75rem, 1.5rem + 5vw, 6rem) clamp(3.5rem, 2rem + 4vw, 6rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(55% 55% at 88% 8%, rgba(30,107,240,.13), transparent 70%), radial-gradient(45% 50% at 100% 70%, rgba(20,200,168,.12), transparent 70%), radial-gradient(45% 50% at 0% 100%, rgba(217,98,59,.09), transparent 70%);-webkit-mask-image:linear-gradient(#000 55%, transparent);mask-image:linear-gradient(#000 55%, transparent)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(11,31,68,.09) 1px, transparent 1.3px);background-size:24px 24px;-webkit-mask-image:radial-gradient(65% 60% at 72% 28%, #000, transparent 72%);mask-image:radial-gradient(65% 60% at 72% 28%, #000, transparent 72%)}
.hero__grid{display:grid;gap:clamp(2.5rem, 2rem + 3vw, 4.5rem);align-items:center}
.hero__content{display:grid;gap:1.5rem;justify-items:start;max-width:640px;grid-template-columns:minmax(0, 1fr)}
.hero__title{font-size:clamp(2.375rem, 1.55rem + 3.1vw, 4rem);line-height:1.04;letter-spacing:-.04em}
.hero__line{display:block} /* one sentence per span: each sentence balances on its own lines */
.hero__lead{font-size:var(--fs-lead);line-height:1.55;max-width:34em}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.25rem}
.hero__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;padding:0;font-size:.875rem;font-weight:600;color:var(--text-muted)}
.hero__meta li{display:inline-flex;align-items:center;gap:.4rem}
.hero__meta .icon{width:1.05rem;height:1.05rem;color:var(--green);stroke-width:2.25}
.hero__media{position:relative;min-width:0}
@media (min-width: 1100px) {.hero__grid {grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)} }
@media (max-width: 1099.98px) {.hero__media {width:100%;max-width:760px;margin-inline:auto} }
@media (max-width: 479.98px) {.hero__actions > .btn {width:100%} }
.hero--page{text-align:center;padding-block:clamp(2.75rem, 1.5rem + 4vw, 5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem)}
.hero--page .hero__content{margin-inline:auto;justify-items:center;max-width:820px}
.hero--page .hero__title{font-size:var(--fs-h1);letter-spacing:-.035em;line-height:1.07}
.hero--page .hero__actions, .hero--page .hero__meta{justify-content:center}
.hero--page::after{-webkit-mask-image:radial-gradient(60% 70% at 50% 0%, #000, transparent 75%);mask-image:radial-gradient(60% 70% at 50% 0%, #000, transparent 75%)}
.collage{position:relative;padding-bottom:14%}
.collage > .collage__main{position:relative}
.collage > .collage__till{position:absolute;left:0;bottom:0;width:58%}
.collage > .collage__float{position:absolute;z-index:2;right:0;top:10%;width:min(290px, 60%)}
@media (min-width: 1100px) {.collage > .collage__till {left:-6%} }
@media (min-width: 1360px) {.collage {margin-right:calc(var(--gutter) * -.5)} .collage > .collage__float {right:-5%} }
@media (max-width: 639.98px) {.collage {padding-bottom:0} .collage > .collage__till {position:relative;width:80%;margin:-14% 0 0 auto} .collage > .collage__float {position:relative;top:auto;right:auto;width:auto;margin:1rem 0 0} }
.float-card{padding:1rem 1.125rem 1.125rem;font-size:.875rem;line-height:1.5;color:var(--ink-2);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg)}
.float-card__head{display:flex;align-items:center;gap:.6rem;margin-bottom:.75rem;font-weight:700;color:var(--ink)}
.float-card__head .badge{margin-left:auto}

/* 12. Feature rows */
.feature-row{display:grid;gap:clamp(2rem, 1.5rem + 2.5vw, 4.5rem);align-items:center}
.feature-row__text{display:grid;gap:1rem;justify-items:start;grid-template-columns:minmax(0, 1fr)}
.feature-row__text h2, .feature-row__text h3{font-size:clamp(1.625rem, 1.3rem + 1.3vw, 2.375rem);line-height:1.12;letter-spacing:-.03em}
.feature-row__text > p{font-size:1.0625rem}
.feature-row__text .check-list{margin-top:.5rem}
.feature-row__text .btn-row{margin-top:.75rem}
.feature-row__media{min-width:0}
.feature-stack{display:grid;gap:clamp(4.5rem, 3rem + 5vw, 8rem)}
@media (min-width: 900px) {
  .feature-row {grid-template-columns:minmax(0, 5fr) minmax(0, 7fr)}
  .feature-row--even {grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
  .feature-row--reverse, .feature-stack > .feature-row:nth-child(even) {grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)}
  .feature-row--reverse > .feature-row__text, .feature-stack > .feature-row:nth-child(even) > .feature-row__text {order:2}
}

/* 13. Screen frames */
.shot{margin:0}
.shot--narrow{max-width:380px;margin-inline:auto} /* portrait shots: receipts, phone-sized panels */
.shot > figcaption, .frame-caption{margin-top:1rem;font-size:.875rem;line-height:1.5;color:var(--text-muted);text-align:center}
.frame{position:relative;isolation:isolate;margin:0;border-radius:var(--r-lg);box-shadow:var(--shadow-frame)}
.frame__bar{display:flex;align-items:center;gap:.75rem;height:2.25rem;padding:0 .875rem;background:#F3F5FA;border-bottom:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;font-size:.75rem;font-weight:600;color:var(--text-muted)}
.frame__dots{flex:none;width:44px;height:10px;background:radial-gradient(circle at 5px 5px, #D3DAE7 4.5px, transparent 5px), radial-gradient(circle at 22px 5px, #D3DAE7 4.5px, transparent 5px), radial-gradient(circle at 39px 5px, #D3DAE7 4.5px, transparent 5px)}
.frame__url{display:flex;align-items:center;justify-content:center;gap:.35rem;flex:1;min-width:0;max-width:300px;height:1.4rem;margin-inline:auto;padding:0 .75rem;overflow:hidden;white-space:nowrap;font-size:.6875rem;font-weight:600;color:var(--text-muted);background:#fff;border:1px solid var(--border);border-radius:6px}
.frame__url .icon{width:.75rem;height:.75rem;stroke-width:2.25}
.frame__url + .frame__spacer{width:44px;flex:none}
.frame__title{display:inline-flex;align-items:center;gap:.45rem;min-width:0;overflow:hidden;white-space:nowrap;color:var(--ink-2)}
.frame__controls{display:flex;gap:16px;margin-left:auto;color:#8C99B3}
.frame__controls i{position:relative;width:10px;height:10px}
.frame__controls i::before, .frame__controls i::after{content:"";position:absolute}
.frame__controls i:nth-child(1)::before{left:0;right:0;top:50%;height:1.5px;background:currentColor}
.frame__controls i:nth-child(2)::before{inset:0;border:1.5px solid currentColor;border-radius:1.5px}
.frame__controls i:nth-child(3)::before, .frame__controls i:nth-child(3)::after{left:-2px;right:-2px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;transform:rotate(45deg)}
.frame__controls i:nth-child(3)::after{transform:rotate(-45deg)}
.frame__body{display:block;position:relative;overflow:hidden;background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.frame__body:first-child{border-radius:var(--r-lg)}
.frame__body img{width:100%}
.frame--ai::before{content:"";position:absolute;z-index:-1;inset:-6% 2% -8%;border-radius:40%;background:var(--ai-gradient);filter:blur(56px);opacity:.3;pointer-events:none}
.frame__placeholder{display:grid;place-items:center;aspect-ratio:16 / 10;padding:1rem;font-size:.875rem;font-weight:600;color:var(--muted);background:linear-gradient(135deg, var(--surface-2), var(--surface-3))}
[data-lightbox]{cursor:zoom-in}
a[data-lightbox]{display:block;color:inherit;text-decoration:none;border-radius:inherit}

/* 14. Stats & trust strip */
.stats{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1px;overflow:hidden;background:var(--border);border:1px solid var(--border);border-radius:var(--r-xl)}
.stat{display:grid;gap:.5rem;align-content:start;padding:clamp(1.25rem, 1rem + 1.2vw, 2rem);background:#fff}
.stat__value{font-size:clamp(2rem, 1.4rem + 2.2vw, 3.25rem);font-weight:800;line-height:1;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat__value small{margin-left:.08em;font-size:.5em;font-weight:700;letter-spacing:-.01em;color:var(--ink-2)}
.stat__value--ai small{color:inherit}
.stat__label{font-size:.9375rem;line-height:1.45;color:var(--ink-2)}
@media (min-width: 900px) {.stats {grid-template-columns:repeat(4, minmax(0, 1fr))} .stats--3 {grid-template-columns:repeat(3, minmax(0, 1fr))} }
/* Below 900 px (two columns): an odd last stat spans the row, so no empty grey cell */
@media (max-width: 899.98px) {.stats > .stat:last-child:nth-child(odd) {grid-column:1 / -1} }
.trust{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1rem 1.25rem;list-style:none;padding:0}
.trust__item{display:flex;align-items:center;gap:.6rem;font-size:.9375rem;font-weight:600;line-height:1.3;color:var(--ink-2)}
.trust__item .icon{width:1.3rem;height:1.3rem;color:var(--blue-ink)}
.trust-band{padding-block:1.75rem;border-block:1px solid var(--border)}
@media (max-width: 639.98px) {.trust__item:last-child:nth-child(odd) {grid-column:1 / -1;justify-content:center} }
/* 640+: centred inline items; text-wrap:balance evens the rows (3 + 2, not 4 + 1) */
@media (min-width: 640px) {
  .trust {display:block;text-align:center;text-wrap:balance}
  .trust__item {display:inline-flex;margin:.4rem 1.1rem;vertical-align:middle}
}
@media (min-width: 1200px) {.trust__item {margin-inline:1.3rem} }

/* 15. Comparison table */
.compare{max-width:100%}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.9375rem}
.compare-table caption{padding-bottom:1rem;text-align:left;font-size:var(--fs-sm);color:var(--text-muted)}
.compare-table th, .compare-table td{padding:1.05rem 1.25rem;text-align:left;vertical-align:middle;border-bottom:1px solid var(--border)}
.compare-table thead th{padding-block:1.25rem;font-size:.875rem;font-weight:700;color:var(--ink-2);vertical-align:bottom}
.compare-table tbody th{font-weight:600;color:var(--ink)}
.compare-table .is-us{background:rgba(30,107,240,.045)}
.compare-table thead .is-us{border-radius:var(--r-lg) var(--r-lg) 0 0;color:var(--ink);font-size:1rem}
.compare-table tbody tr:last-child .is-us{border-radius:0 0 var(--r-lg) var(--r-lg)}
.compare-table tbody tr:last-child > *{border-bottom:0}
.cell{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-2)}
.cell .icon{width:1.25rem;height:1.25rem;stroke-width:2.25}
.cell--yes .icon{color:var(--green)}
.cell--no{color:var(--text-muted)} .cell--no .icon {color:#7A87A3}
.cell--part{color:var(--text-muted);font-size:.875rem}
@media (max-width: 719.98px) {
  .compare-table thead {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .compare-table caption {display:block}
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td {display:block}
  .compare-table tr {margin-bottom:.75rem;padding:.25rem 1.125rem .5rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
  .compare-table tbody th {padding:.85rem 0;font-size:1rem;border-bottom:1px solid var(--border)}
  .compare-table td {display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 0;border:0}
  .compare-table td::before {content:attr(data-label);font-size:.875rem;font-weight:500;color:var(--ink-2)}
  .compare-table td.is-us, .compare-table tbody tr:last-child .is-us {background:none;border-radius:0}
  .compare-table td.is-us::before {font-weight:700;color:var(--blue-ink)}
  .compare-table tbody tr:last-child > * {border-bottom:1px solid var(--border)}
  .compare-table tbody tr:last-child > td {border:0}
}

/* 16. FAQ */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
/* Block, not flex: inline spans in a question (a bound number, a <b>) stay in the text flow. The icon is positioned. */
.faq summary{position:relative;display:block;min-height:44px;padding:1.35rem 3.25rem 1.35rem 0;list-style:none;cursor:pointer;font-size:1.0625rem;font-weight:700;line-height:1.4;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:0;top:50%;width:1.75rem;height:1.75rem;margin-top:-.875rem;border-radius:50%;background:var(--surface-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1F44' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / .875rem no-repeat;transition:transform .25s var(--ease), background-color .2s}
.faq summary:hover::after{background-color:#E2E9F5}
.faq details[open] > summary::after{transform:rotate(45deg)}
.faq__body{padding:0 3rem 1.5rem 0;color:var(--ink-2)}
.faq__body > * + *{margin-top:.75em}

/* 17. Tabs */
.tabs__list{position:relative;display:flex;width:fit-content;max-width:100%;gap:.25rem;padding:.3rem;overflow-x:auto;scrollbar-width:none;background:var(--surface-3);border-radius:var(--r-pill)}
.tabs__list::-webkit-scrollbar{display:none}
.tabs--center .tabs__list{margin-inline:auto}
.tabs__tab{display:inline-flex;align-items:center;gap:.5rem;flex:none;min-height:44px;padding:0 1.15rem;border-radius:var(--r-pill);font-size:.9375rem;font-weight:600;white-space:nowrap;color:var(--ink-2);transition:color .15s, background-color .15s, box-shadow .15s}
.tabs__tab:hover{color:var(--ink)}
.tabs__tab:focus-visible{outline-offset:-3px}
/* site.js adds .is-start / .is-end while the list can scroll that way */
.tabs__list.is-start{-webkit-mask-image:linear-gradient(90deg, transparent, #000 2.5rem);mask-image:linear-gradient(90deg, transparent, #000 2.5rem)}
.tabs__list.is-end{-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);mask-image:linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent)}
.tabs__list.is-start.is-end{-webkit-mask-image:linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);mask-image:linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent)}
.tabs__tab[aria-selected="true"]{color:var(--ink);background:#fff;box-shadow:var(--shadow-pill)}
.tabs__tab .icon{width:1.1rem;height:1.1rem}
.tabs__panel{padding-top:clamp(1.75rem, 1.5rem + 1vw, 2.5rem)}
.tabs__panel:focus-visible{outline-offset:6px;border-radius:var(--r)}
.tabs__panel-title{margin-bottom:1rem;font-size:var(--fs-h3)}
html:not(.js) .tabs__list, .js .tabs__panel-title{display:none}
.js [data-tabs]:not(.is-ready) .tabs__panel ~ .tabs__panel{display:none} /* no flash of every panel before site.js runs */
html:not(.js) .tabs__panel + .tabs__panel{margin-top:2.5rem;border-top:1px solid var(--border)}

/* 18. Controls & forms */
.segmented{display:inline-flex;justify-self:start;width:fit-content;gap:.25rem;padding:.25rem;max-width:100%;background:var(--surface-3);border-radius:var(--r-pill)}
.segmented input, .switch input, .choice input{position:absolute;width:1px;height:1px;opacity:0}
.segmented label{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:0 1rem;border-radius:var(--r-pill);font-size:.9375rem;font-weight:600;white-space:nowrap;color:var(--ink-2);cursor:pointer;transition:color .15s, background-color .15s, box-shadow .15s}
.segmented input:checked + label{color:var(--ink);background:#fff;box-shadow:var(--shadow-pill)}
.segmented input:focus-visible + label, .choice input:focus-visible + .choice__body, .switch input:focus-visible + .switch__track{outline:2.5px solid var(--blue);outline-offset:2px}
.switch{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;font-weight:600;color:var(--ink);cursor:pointer}
.switch__track{position:relative;flex:none;width:46px;height:28px;border-radius:var(--r-pill);background:var(--control-border);transition:background-color .2s}
.switch__track::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(11,31,68,.3);transition:transform .2s var(--ease)}
.switch input:checked + .switch__track{background:var(--blue)}
.switch input:checked + .switch__track::after{transform:translateX(18px)}
.stepper{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem;background:#fff;border:1px solid var(--control-border);border-radius:var(--r-pill)}
.stepper__btn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ink);background:var(--surface-2);transition:background-color .15s}
.stepper__btn:hover{background:var(--surface-3)}
.stepper__btn[aria-disabled="true"]{opacity:.35;cursor:default}
.stepper__btn .icon{width:1.1rem;height:1.1rem;stroke-width:2.25}
.stepper__input{width:3.5rem;padding:0;text-align:center;font-size:1.25rem;font-weight:800;color:var(--ink);background:none;border:0;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.stepper__input::-webkit-inner-spin-button, .stepper__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper__input:focus-visible{outline-offset:0;border-radius:8px}
.choices{display:grid;gap:.75rem}
.choice{position:relative;display:block;cursor:pointer}
.choice__body{display:grid;grid-template-columns:auto minmax(0, 1fr) auto;grid-template-areas:"dot title price" "dot desc desc";gap:.2rem .875rem;align-items:center;padding:1rem 1.125rem;background:#fff;border:1.5px solid var(--border);border-radius:var(--r-lg);transition:border-color .15s, box-shadow .15s, background-color .15s}
.choice__body::before{content:"";grid-area:dot;align-self:start;width:20px;height:20px;margin-top:.15rem;border-radius:50%;border:1.5px solid var(--control-border);background:#fff;transition:border-color .15s, box-shadow .15s}
.choice:hover .choice__body{border-color:var(--border-strong)}
.choice input:checked + .choice__body{border-color:var(--blue);background:rgba(30,107,240,.03);box-shadow:0 0 0 3px rgba(30,107,240,.12)}
.choice input:checked + .choice__body::before{border:6px solid var(--blue)}
.choice__title{grid-area:title;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-weight:700;color:var(--ink)}
.choice__price{grid-area:price;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.choice__price small{font-size:.8em;font-weight:600;color:var(--text-muted)}
.choice__desc{grid-area:desc;font-size:.875rem;line-height:1.5;color:var(--text-muted)}
.form-grid{display:grid;gap:1.125rem}
@media (min-width: 640px) {.form-grid--2 {grid-template-columns:repeat(2, minmax(0, 1fr))} .field--full {grid-column:1 / -1} }
.field{display:grid;gap:.4rem;align-content:start}
.field > label, .field__label{font-size:.9375rem;font-weight:600;color:var(--ink)}
.field .opt{font-weight:500;color:var(--text-muted)}
.input, .select, .textarea{width:100%;min-height:48px;padding:.7rem 1rem;font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--control-border);border-radius:var(--r);transition:border-color .15s, box-shadow .15s}
.input::placeholder, .textarea::placeholder{color:#68778F}
.input:hover, .select:hover, .textarea:hover{border-color:var(--control-border-hover)}
.input:focus, .select:focus, .textarea:focus{outline:2px solid transparent;border-color:var(--blue);box-shadow:0 0 0 4px rgba(30,107,240,.15)}
.textarea{min-height:120px;resize:vertical;line-height:1.5}
.select{-webkit-appearance:none;appearance:none;padding-right:2.75rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A4A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center / 1rem no-repeat}
.field__hint{font-size:.8125rem;color:var(--text-muted)}
.field__error{display:none;font-size:.8125rem;font-weight:600;color:var(--danger)}
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea{border-color:var(--danger)}
.field.is-invalid .field__error{display:block}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;margin-top:.5rem}
.form-success{display:grid;gap:1rem;justify-items:start;padding:clamp(1.5rem, 1rem + 2vw, 2.25rem);background:var(--green-tint);border:1px solid #CBE9D6;border-radius:var(--r-xl)}
.form-success h3{display:flex;align-items:center;gap:.6rem}
.form-success h3 .icon{color:var(--green)}

/* 19. Pricing */
.price-cards{display:grid;gap:1.25rem;align-items:stretch}
@media (min-width: 960px) {.price-cards {grid-template-columns:repeat(3, minmax(0, 1fr))} }
@media (max-width: 959.98px) {.price-cards {max-width:560px;margin-inline:auto} }
.price-card{position:relative;display:flex;flex-direction:column;gap:1.25rem;padding:clamp(1.75rem, 1.5rem + 1vw, 2.25rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xs)}
.price-card--featured{border:1.5px solid transparent;background:linear-gradient(#fff, #fff) padding-box, var(--ai-gradient) border-box;box-shadow:0 30px 60px -30px rgba(30,107,240,.45)}
.price-card__badge{position:absolute;top:0;left:50%;transform:translate(-50%, -50%)}
.price-card__name{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.price-card__desc{min-height:3em;margin-top:.35rem;font-size:.9375rem;line-height:1.5;color:var(--ink-2)}
.price-card .check-list{font-size:.9375rem}
.price-card > .btn{margin-top:auto}
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .35rem;color:var(--ink)}
.price__amount{font-size:clamp(2.25rem, 1.9rem + 1.4vw, 3rem);font-weight:800;line-height:1;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.price__period{font-size:.9375rem;font-weight:600;color:var(--text-muted)}
.price__note{flex-basis:100%;font-size:.8125rem;color:var(--text-muted)}

/* 20. Lists & steps */
.check-list, .x-list{--li-bg:var(--green-tint);--li-fg:var(--green-ink);display:grid;gap:.75rem;list-style:none;padding:0}
.check-list li, .x-list li{position:relative;padding-left:2rem;line-height:1.5}
.check-list li::before, .x-list li::before{content:"";position:absolute;left:0;top:.1em;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--li-bg)}
.check-list li::after, .x-list li::after{content:"";position:absolute;left:.3125rem;top:calc(.1em + .3125rem);width:.75rem;height:.75rem;background:var(--li-fg);-webkit-mask:var(--i-check) center / contain no-repeat;mask:var(--i-check) center / contain no-repeat}
.x-list{--li-bg:var(--surface-3);--li-fg:var(--muted)}
.x-list li::after{-webkit-mask-image:var(--i-x);mask-image:var(--i-x)}
.check-list--ai{--li-bg:rgba(30,107,240,.1);--li-fg:var(--blue-ink)}
.check-list--light{--li-bg:rgba(255,255,255,.14);--li-fg:#fff}
.check-list--sm{gap:.5rem;font-size:.9375rem}
.check-list--2col{gap:.75rem 2rem}
@media (min-width: 640px) {.check-list--2col {grid-template-columns:repeat(2, minmax(0, 1fr))} }
.dot-list{display:grid;gap:.6rem;list-style:none;padding:0}
.dot-list li{position:relative;padding-left:1.1rem}
.dot-list li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:.45rem;border-radius:50%;background:var(--ai-gradient)}
.steps{display:grid;gap:1.75rem;list-style:none;padding:0;counter-reset:step}
.step{position:relative;min-height:2.75rem;padding-left:4rem;counter-increment:step}
.step::before{content:counter(step);position:absolute;left:0;top:0;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;font-weight:800;color:var(--blue-ink);background:#fff;border:1.5px solid var(--border);box-shadow:var(--shadow-xs)}
.step:not(:last-child)::after{content:"";position:absolute;left:calc(1.375rem - .75px);top:3.25rem;bottom:-1.25rem;width:1.5px;background:var(--border)}
.step h3{padding-top:.45rem;margin-bottom:.3rem;font-size:1.125rem}
.step p{font-size:1rem}
.steps--ai .step::before{color:#fff;background:var(--ai-gradient);border-color:transparent;box-shadow:var(--glow-ai)}
@media (min-width: 900px) {
  .steps--row {grid-auto-flow:column;grid-auto-columns:minmax(0, 1fr);gap:2rem}
  .steps--row .step {padding:4rem 0 0}
  .steps--row .step:not(:last-child)::after {left:3.5rem;right:-1.25rem;top:1.375rem;bottom:auto;width:auto;height:1.5px}
  .steps--row .step h3 {padding-top:0}
}

/* 21. Callout, footnotes */
.callout{display:flex;align-items:flex-start;gap:.875rem;padding:1.1rem 1.25rem;font-size:.9375rem;line-height:1.55;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-lg)}
.callout > .icon{width:1.35rem;height:1.35rem;margin-top:.05em;color:var(--blue-ink)}
.callout > div > * + *{margin-top:.4em}
.callout--ai{border-color:transparent;background:linear-gradient(#F7FAFF, #F4FBFB) padding-box, var(--ai-gradient) border-box}
.callout--ai > .icon{color:var(--blue)}
.callout--warm{background:var(--warm-tint);border-color:#F5D6CA} .callout--warm > .icon {color:var(--warm-ink)}
.callout--success{background:var(--green-tint);border-color:#CBE9D6} .callout--success > .icon {color:var(--green-ink)}
.fn-ref{margin-left:.1em;font-size:.62em;line-height:0;vertical-align:super}
.fn-ref a{position:relative;padding:0 .15em;font-weight:700;text-decoration:none}
.fn-ref a::after, .fn-back::after{content:"";position:absolute;inset:-16px -12px} /* 44px tap area, no layout change */
.fn-back{position:relative;text-decoration:none}
.footnotes{margin-top:clamp(2rem, 1.5rem + 2vw, 3rem);padding-top:1.25rem;font-size:.8125rem;line-height:1.55;color:var(--text-muted);border-top:1px solid var(--border)}
.footnotes ol{display:grid;gap:.5rem;padding-left:1.25rem}
.footnotes li:target{color:var(--ink)}
.footnotes a{color:inherit}
.note{font-size:.8125rem;line-height:1.55;color:var(--text-muted)}
.divider{height:1px;border:0;background:var(--border)}

/* 22. Chat bubbles (AI examples) */
.chat{display:grid;gap:.75rem}
.bubble{max-width:88%;padding:.75rem 1rem;font-size:.9375rem;line-height:1.5;border-radius:18px}
.bubble--user{justify-self:end;color:#fff;background:var(--navy);border-bottom-right-radius:6px}
.bubble--ai{justify-self:start;color:var(--ink-2);background:#fff;border:1px solid var(--border);border-bottom-left-radius:6px;box-shadow:var(--shadow-xs)}
.bubble__meta{display:flex;align-items:center;gap:.4rem;margin-bottom:.35rem;font-size:.75rem;font-weight:700;color:var(--blue-ink)}

/* 23. CTA band */
.cta-band{position:relative;isolation:isolate;overflow:hidden;padding:clamp(3rem, 2rem + 4vw, 5.5rem) clamp(1.25rem, 1rem + 3vw, 4rem);text-align:center;color:rgba(255,255,255,.8);background:var(--navy);border-radius:var(--r-2xl)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(48% 85% at 100% 0%, rgba(30,107,240,.6), transparent 70%), radial-gradient(42% 80% at 0% 100%, rgba(20,200,168,.4), transparent 70%)}
.cta-band::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.13) 1px, transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(55% 75% at 50% 50%, #000, transparent);mask-image:radial-gradient(55% 75% at 50% 50%, #000, transparent)}
.cta-band h2{max-width:18em;margin-inline:auto;color:#fff}
.cta-band h2 .ai-text{background-image:linear-gradient(100deg, #6FA8FF, #4FE0D9 60%, #5DEBC6)}
.cta-band > p{max-width:36em;margin:1.1rem auto 0;font-size:var(--fs-lead)}
.cta-band .btn-row{justify-content:center;margin-top:2.25rem}
.cta-band > .cta-band__meta{margin-top:1.25rem;font-size:.875rem;color:rgba(255,255,255,.6)}
.cta-band > .eyebrow{font-size:var(--fs-sm);margin-top:0;color:#8FD3FF;margin-bottom:1rem}

/* 24. Lightbox */
.lightbox{inset:0;width:100%;height:100%;max-width:100%;max-height:100%;margin:0;padding:clamp(1rem, 3vw, 3rem);border:0;background:transparent;color:#fff}
.lightbox[open]{display:grid;place-items:center;animation:fade-in .2s var(--ease)}
.lightbox::backdrop{background:rgba(6,16,36,.84);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox__figure{display:grid;gap:.875rem;justify-items:center;margin:0;max-width:100%}
.lightbox__img{max-width:min(1440px, 100%);max-height:84vh;width:auto;border-radius:var(--r);background:#fff;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.lightbox__caption{max-width:60ch;font-size:.9375rem;text-align:center;color:rgba(255,255,255,.85)}
.lightbox__close{position:fixed;top:1rem;right:1rem;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;background:rgba(255,255,255,.14)}
.lightbox__close:hover{background:rgba(255,255,255,.24)}
@keyframes fade-in {from {opacity:0} }

/* 25. Reveal on scroll (site.js adds .js; motion only) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal, .js .reveal-group > * {transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .js .reveal:not(.is-visible), .js .reveal-group:not(.is-visible) > * {opacity:0;transform:translateY(18px)}
  .js .reveal-group > :nth-child(2) {transition-delay:80ms} .js .reveal-group > :nth-child(3) {transition-delay:160ms}
  .js .reveal-group > :nth-child(4) {transition-delay:240ms} .js .reveal-group > :nth-child(5) {transition-delay:320ms}
  .js .reveal-group > :nth-child(n+6) {transition-delay:400ms}
  /* Failsafe: site.js adds .js-ready as it starts. If it hasn't after 4 s (slow or stalled load), show everything.
     If it never runs at all, boot.js drops .js at DOMContentLoaded and the page uses its no-JS layout. */
  .js:not(.js-ready) .reveal:not(.is-visible), .js:not(.js-ready) .reveal-group:not(.is-visible) > * {animation:reveal-failsafe .01s 4s forwards}
}
@keyframes reveal-failsafe {to {opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration:.01ms !important;transition-duration:.01ms !important} }
/* The review capture tool adds .capture before a full-page shot; without this, staggered items are caught half-faded. */
.capture .reveal, .capture .reveal-group > *{opacity:1 !important;transform:none !important;transition:none !important}

/* 26. Utilities (keep this list short) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.center{text-align:center} .mx-auto {margin-inline:auto}
.mt-s{margin-top:1rem} .mt-m {margin-top:2rem} .mt-l {margin-top:3rem}
.mb-s{margin-bottom:1rem} .mb-m {margin-bottom:2rem}
.flow > * + *{margin-top:var(--flow, 1rem)}
/* Display headings: Plus Jakarta Sans sets . , ! (and ? a little) too far from the word at 28px+. site.js wraps them
   in h1, h2, .h1, .h2, .display and feature-row headings; without JS the heading keeps the font's spacing. */
.punct{margin-left:-.06em} .punct--q {margin-left:-.04em}
.measure{max-width:38em}
@media (max-width: 639.98px) {.hide-sm {display:none !important} }
@media (min-width: 640px) {.show-sm {display:none !important} }