:root{
  --charcoal:#2E2E2E;
  --ink:#2E2E2E;
  --slate:#5B6472;
  --mid:#8A93A1;
  --line:#E4E8ED;
  --grey:#D9DEE5;
  --sapphire:#22A7E0;
  --sapphire-d:#0F6D99;
  --sapphire-l:#5FC7F0;
  --sapphire-tint:#EAF6FC;
  --mist:#F4F6F8;
  --white:#FFFFFF;
  --error:#C8322C;
  --error-tint:#FBEAE9;

  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-pill:999px;

  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:48px;
  --space-6:64px;
  --space-7:130px;

  --ease:cubic-bezier(.2,0,0,1);
  --dur-fast:120ms;
  --dur-med:180ms;
  --dur-slow:240ms;

  --content-max:1280px;
  --font-display:'Outfit', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--font-display);color:var(--ink);background:var(--white);line-height:1.5;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:var(--sapphire-d);text-decoration:none;}
a:hover{color:var(--sapphire);}
button{font-family:inherit;cursor:pointer;}
ul{list-style:none;}
input,select,textarea{font-family:inherit;}

:focus-visible{outline:2px solid var(--sapphire);outline-offset:2px;border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-3);}
@media (min-width:900px){ .wrap{padding:0 var(--space-5);} }

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--sapphire-d);
}

h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.03em;line-height:1.12;color:var(--ink);}

.section{padding:var(--space-6) 0;}
@media (min-width:900px){ .section{padding:88px 0;} }

.section-head{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4);max-width:680px;}
.lede{font-size:17px;line-height:1.6;color:var(--slate);max-width:620px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--radius-sm);font-size:14px;font-weight:500;letter-spacing:-.01em;
  padding:13px 22px;border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn--primary{background:var(--sapphire-d);color:#fff;}
.btn--primary:hover{background:#0B5779;color:#fff;}
.btn--primary:disabled{background:var(--grey);color:var(--mid);cursor:not-allowed;}
.btn--secondary{background:var(--mist);color:var(--ink);}
.btn--secondary:hover{background:var(--grey);}
.btn--ghost{border-color:var(--line);color:var(--ink);background:transparent;}
.btn--ghost:hover{border-color:var(--mid);}
.btn--link{background:none;border:none;color:var(--sapphire-d);font-size:13.5px;padding:4px 0;}
.btn--link:hover{color:var(--sapphire);}
.btn--block{width:100%;}
.btn--sm{padding:10px 16px;font-size:13px;}
.btn .spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;
  display:none;
}
.btn.is-loading .spinner{display:inline-block;}
.btn.is-loading .btn-label{opacity:.75;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ Hero (compact) ============ */
/* No site header any more, so the hero carries its own top breathing room. */
.hero{padding:var(--space-6) 0 var(--space-4);}
@media (min-width:900px){ .hero{padding:var(--space-7) 0 var(--space-5);} }
.hero .eyebrow{margin-bottom:var(--space-2);}
.hero h1{font-size:32px;max-width:18ch;margin-bottom:var(--space-2);}
@media (min-width:640px){ .hero h1{font-size:42px;} }
@media (min-width:1100px){ .hero h1{font-size:48px;} }
.hero-sub{font-size:16.5px;color:var(--slate);max-width:600px;}
@media (min-width:900px){ .hero-sub{font-size:18px;} }

/* ============ Stepper ============ */
.flow-shell{padding-top:var(--space-2);padding-bottom:var(--space-6);scroll-margin-top:24px;}
.stepper{
  display:flex;align-items:center;justify-content:center;
  gap:0;margin-bottom:var(--space-5);
  max-width:620px;margin-left:auto;margin-right:auto;
}
.stepper li{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;
}
.stepper li:not(:last-child)::after{
  content:"";position:absolute;top:15px;left:calc(50% + 24px);right:calc(-50% + 24px);
  height:1px;background:var(--line);z-index:0;
}
.stepper li.is-complete:not(:last-child)::after{background:var(--sapphire);}
.step-dot{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:12px;color:var(--mid);
  border:1px solid var(--line);background:#fff;z-index:1;
  transition:all var(--dur-med) var(--ease);
}
.stepper li.is-active .step-dot{border-color:var(--sapphire);color:var(--sapphire-d);background:var(--sapphire-tint);}
.stepper li.is-complete .step-dot{background:var(--sapphire);border-color:var(--sapphire);color:var(--charcoal);}
.step-dot svg{width:13px;height:13px;display:none;}
.stepper li.is-complete .step-dot svg{display:block;}
.stepper li.is-complete .step-dot span{display:none;}
.step-label{font-size:12.5px;color:var(--mid);text-align:center;}
.stepper li.is-active .step-label{color:var(--ink);font-weight:500;}
.stepper li.is-complete .step-label{color:var(--slate);}
.step-jump{background:none;border:none;display:flex;flex-direction:column;align-items:center;gap:8px;}
.step-jump:disabled{cursor:default;}

.step-panel{display:none;}
.step-panel.is-active{display:block;}
.step-fade{animation:stepFade var(--dur-slow) var(--ease);}
@keyframes stepFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

/* ============ Step 1: plan cards ============ */
.pricing-scroller{
  display:grid;grid-template-columns:repeat(5, minmax(220px,1fr));gap:var(--space-2);
  overflow-x:auto;padding-bottom:var(--space-2);scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
@media (max-width:1100px){ .pricing-scroller{grid-auto-columns:82%;grid-template-columns:none;grid-auto-flow:column;} }
@media (min-width:480px) and (max-width:1100px){ .pricing-scroller{grid-auto-columns:60%;} }
@media (min-width:720px) and (max-width:1100px){ .pricing-scroller{grid-auto-columns:38%;} }

.plan-card{
  scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius-md);background:#fff;
  padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);
  transition:border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);position:relative;
}
.plan-card.is-highlighted{border-color:var(--sapphire);background:linear-gradient(180deg, rgba(34,167,224,.05), rgba(34,167,224,0) 40%);}
.plan-card.is-enterprise{background:var(--mist);border-color:var(--line);}
.plan-card.is-selected{border-color:var(--sapphire);box-shadow:0 0 0 3px rgba(34,167,224,.14);}

.iti--allow-dropdown {
    width: 100%;
}
/* Badge sits in normal document flow at the top of the card (not an
   absolutely-positioned pokeout) so it can never be clipped by the
   horizontally-scrolling card row, whatever that row's overflow rules are. */
.plan-badge-slot{height:24px;}
.plan-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--charcoal);color:#fff;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--radius-pill);
}
.plan-card.is-highlighted .plan-badge{background:var(--sapphire);color:var(--charcoal);}
.plan-badge.is-selected-badge{background:var(--charcoal);color:#fff;}
.plan-badge.is-selected-badge svg{width:10px;height:10px;}

.plan-name{font-size:16px;font-weight:600;letter-spacing:-.01em;}
.plan-tagline{font-size:13px;color:var(--mid);min-height:2.6em;}
.plan-price-row{padding:var(--space-2) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:4px 0;}
.plan-price{font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.plan-price small{font-size:13px;font-weight:400;color:var(--mid);letter-spacing:0;margin-left:2px;}
.plan-price.is-custom{font-size:21px;}
.plan-limits{display:flex;flex-direction:column;gap:6px;font-size:13px;}
.plan-limits .row{display:flex;justify-content:space-between;color:var(--slate);}
.plan-limits .row b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;}
.plan-cta{margin-top:auto;padding-top:var(--space-2);}
.enterprise-bullets{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--slate);}
.enterprise-bullets li{display:flex;gap:8px;align-items:flex-start;}
.enterprise-bullets li::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--sapphire);display:block;margin-top:7px;flex:none;}
.scroller-hint{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mid);margin-top:var(--space-2);}
@media (min-width:1100px){ .scroller-hint{display:none;} }

/* feature comparison (collapsible) */
.compare-toggle{margin-top:var(--space-4);}
.compare-toggle summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:500;color:var(--sapphire-d);padding:10px 0;
}
.compare-toggle summary::-webkit-details-marker{display:none;}
.compare-toggle summary svg{width:14px;height:14px;transition:transform var(--dur-med) var(--ease);}
.compare-toggle[open] summary svg{transform:rotate(180deg);}
.table-scroller{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-md);-webkit-overflow-scrolling:touch;margin-top:var(--space-2);}
table.feature-table{border-collapse:collapse;width:100%;min-width:760px;}
.feature-table th, .feature-table td{padding:16px var(--space-2);text-align:center;border-bottom:1px solid var(--line);font-size:13px;}
.feature-table thead th{text-align:center;background:var(--mist);font-size:12px;font-weight:500;color:var(--slate);}
.feature-table td:first-child, .feature-table th:first-child{text-align:left;color:var(--ink);font-weight:500;position:sticky;left:0;background:#fff;min-width:200px;}
.feature-table thead th:first-child{background:var(--mist);}
.feature-table tbody tr:last-child td{border-bottom:none;}
.feature-table th.is-highlight, .feature-table td.is-highlight{background:rgba(34,167,224,.05);}
.feat-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;}
.feat-icon.is-yes svg{stroke:var(--ink);}
.feat-icon.is-no svg{stroke:var(--grey);}
.feat-flag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;color:var(--mid);}
.feat-flag .feat-icon{width:18px;height:18px;}
.feat-note{font-size:12.5px;color:var(--slate);}
.table-footnote{margin-top:var(--space-2);font-size:13px;color:var(--mid);}

/* ============ Step 2: details + order summary ============ */
.details-grid{display:grid;gap:var(--space-4);align-items:start;}
@media (min-width:980px){ .details-grid{grid-template-columns:1.5fr 1fr;} }

.form-card, .summary-card, .review-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3);
}
@media (min-width:640px){ .form-card, .summary-card, .review-card{padding:var(--space-4);} }

.form-card h3, .summary-card h3, .review-card h3{font-size:17px;margin-bottom:var(--space-3);}

.field-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2) var(--space-3);}
@media (min-width:560px){ .field-grid{grid-template-columns:1fr 1fr;} }
.field-grid .is-full{grid-column:1 / -1;}

.form-row label{display:block;font-size:12.5px;font-weight:500;color:var(--slate);margin-bottom:6px;}
.form-row .opt{color:var(--mid);font-weight:400;}
.form-row input, .form-row select, .form-row textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;
  font-size:14px;color:var(--ink);background:#fff;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-row textarea{resize:vertical;min-height:84px;}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  outline:none;border-color:var(--sapphire);box-shadow:0 0 0 3px rgba(34,167,224,.15);
}
.form-row.has-error input, .form-row.has-error select, .form-row.has-error textarea{border-color:var(--error);}
.field-error{font-size:12px;color:var(--error);margin-top:5px;display:none;}
.form-row.has-error .field-error{display:block;}
.phone-row{display:flex;gap:8px;}
.phone-row select{flex:0 0 92px;}
.phone-row input{flex:1;}

.form-actions{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap;}

.summary-card{position:sticky;top:96px;}
.summary-plan-name{font-size:19px;font-weight:600;letter-spacing:-.02em;}
.summary-plan-tagline{font-size:13px;color:var(--mid);margin-top:2px;}
.summary-price{font-size:28px;font-weight:600;letter-spacing:-.03em;margin:var(--space-2) 0;font-variant-numeric:tabular-nums;}
.summary-price small{font-size:13px;font-weight:400;color:var(--mid);margin-left:2px;}
.summary-price.is-custom{font-size:19px;color:var(--slate);}
.summary-divider{height:1px;background:var(--line);margin:var(--space-2) 0;}
.summary-limits{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:var(--space-2);}
.summary-limits .row{display:flex;justify-content:space-between;color:var(--slate);}
.summary-limits .row b{color:var(--ink);font-weight:500;}
.summary-terms{font-size:12.5px;color:var(--mid);line-height:1.6;}
.summary-terms p + p{margin-top:8px;}
.summary-change{font-size:12.5px;margin-top:var(--space-2);display:inline-block;}

/* ============ Step 3: review ============ */
.review-grid{display:grid;gap:var(--space-3);margin-bottom:var(--space-4);}
@media (min-width:800px){ .review-grid{grid-template-columns:1fr 1fr;} }
.review-card .row{display:flex;justify-content:space-between;gap:var(--space-2);padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.review-card .row:last-child{border-bottom:none;}
.review-card .row span:first-child{color:var(--mid);}
.review-card .row span:last-child{color:var(--ink);font-weight:500;text-align:right;}
.review-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:var(--space-3);}

.transparency-note{
  display:flex;gap:10px;align-items:flex-start;background:var(--mist);border-radius:var(--radius-sm);
  padding:var(--space-2);font-size:13px;color:var(--slate);margin-bottom:var(--space-4);
}
.transparency-note svg{width:16px;height:16px;stroke:var(--mid);flex:none;margin-top:2px;}

.error-banner{
  display:none;align-items:flex-start;gap:10px;background:var(--error-tint);border:1px solid rgba(200,50,44,.25);
  border-radius:var(--radius-sm);padding:var(--space-2);font-size:13.5px;color:#8a241f;margin-bottom:var(--space-3);
}
.error-banner.is-visible{display:flex;}
.error-banner svg{width:16px;height:16px;stroke:#8a241f;flex:none;margin-top:2px;}

/* ============ Step 4: confirmation ============ */
.confirm-wrap{max-width:560px;margin:0 auto;text-align:center;padding:var(--space-4) 0;}
.confirm-icon{
  width:56px;height:56px;border-radius:50%;background:var(--sapphire);
  display:flex;align-items:center;justify-content:center;margin:0 auto var(--space-3);
}
.confirm-icon svg{width:26px;height:26px;stroke:var(--charcoal);}
.confirm-wrap h2{font-size:26px;margin-bottom:var(--space-2);}
.confirm-wrap p{color:var(--slate);font-size:15.5px;margin-bottom:var(--space-2);}
.confirm-summary{
  text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  padding:var(--space-3);margin:var(--space-4) 0;
}
.confirm-summary .row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.confirm-summary .row:last-child{border-bottom:none;}
.confirm-summary .row span:first-child{color:var(--mid);}
.confirm-summary .row span:last-child{color:var(--ink);font-weight:500;}
.dev-banner{
  gap:10px;align-items:flex-start;text-align:left;background:var(--mist);
  border:1px dashed var(--grey);border-radius:var(--radius-sm);padding:var(--space-2);
  font-size:12.5px;color:var(--slate);margin-top:var(--space-3);
}
/* Setting display directly on .dev-banner would always beat the browser's
   default [hidden]{display:none} rule (author styles win regardless of the
   hidden attribute), so the "shown" state is opt-in via this selector
   instead — [hidden] alone is then free to actually hide it. */
.dev-banner:not([hidden]){display:flex;}
.dev-banner svg{width:15px;height:15px;stroke:var(--mid);flex:none;margin-top:2px;}
.dev-banner b{color:var(--ink);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:4px;}
.confirm-actions{display:flex;justify-content:center;gap:12px;margin-top:var(--space-3);flex-wrap:wrap;}

/* ============ What you get / terms (reference sections) ============ */
/* Single column on narrow phones, 3 columns from there up — both divide the
   9-item list evenly, so there's never a dangling empty cell in the grid. */
.benefits-grid{display:grid;grid-template-columns:repeat(1, 1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
@media (min-width:480px){ .benefits-grid{grid-template-columns:repeat(3,1fr);} }
.benefit{background:#fff;padding:var(--space-3) var(--space-2);display:flex;flex-direction:column;gap:var(--space-2);transition:background var(--dur-fast) var(--ease);}
.benefit:hover{background:var(--mist);}
.benefit-icon{width:40px;height:40px;border-radius:var(--radius-xs);background:var(--mist);display:flex;align-items:center;justify-content:center;transition:background var(--dur-fast) var(--ease);}
.benefit:hover .benefit-icon{background:#fff;}
.benefit-icon svg{width:20px;height:20px;stroke:var(--ink);}
.benefit-label{font-size:13.5px;font-weight:500;letter-spacing:-.01em;line-height:1.4;}

.terms-grid{display:grid;gap:var(--space-3);}
@media (min-width:800px){ .terms-grid{grid-template-columns:1fr 1fr;} }
.terms-card{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4);background:#fff;}
.terms-card h3{font-size:17px;margin-bottom:var(--space-2);}
.terms-card ul{display:flex;flex-direction:column;gap:12px;padding:0px;}
.terms-card li{position: relative;padding-left: 10px; font-size:14px;color:var(--slate);line-height:1.55;}
.terms-card li::before{position: absolute;content:"";width:4px;height:4px;border-radius:50%;background:var(--sapphire);display:block;margin-top:9px;left:0px;flex:none;}
.terms-card li b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============ Step 2: pricing breakdown rows (order summary + review) ============ */
.summary-breakdown{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:var(--space-2);}
.summary-breakdown .row{display:flex;justify-content:space-between;color:var(--slate);gap:var(--space-2);}
.summary-breakdown .row b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;}
.summary-breakdown .row.is-total{padding-top:8px;border-top:1px solid var(--line);margin-top:2px;}
.summary-breakdown .row.is-total span{color:var(--ink);font-weight:600;}
.summary-breakdown .row.is-total b{font-size:15px;}
.summary-breakdown .row.is-grand{color:var(--ink);}
.summary-breakdown .row.is-grand span, .summary-breakdown .row.is-grand b{font-weight:700;}
.summary-breakdown .row.is-grand b{font-size:17px;}

/* ============ Centre-aligned headings & subtext ============ */
.hero{text-align:center;}
.hero h1,.hero-sub{margin-left:auto;margin-right:auto;}
.section-head{align-items:center;text-align:center;margin-left:auto;margin-right:auto;}
.lede{margin-left:auto;margin-right:auto;}
.plan-badge-slot,.plan-name,.plan-tagline,.plan-price-row{text-align:center;}
.terms-card h3,.form-card h3,.summary-card h3,.summary-plan-name,.summary-plan-tagline{text-align:center;}
.benefit{align-items:center;text-align:center;}
.review-head{position:relative;justify-content:center;}
.review-head .btn--link{position:absolute;right:0;top:2px;}

/* ============ Responsive safety ============
   The feature-comparison table is 760px wide on purpose (it scrolls sideways inside
   its own box). Without containment its width leaked into the page, making the whole
   page 742px wide on phones so the browser zoomed everything out. */
.table-scroller{max-width:100%;contain:paint;}
.pricing-scroller{max-width:100%;}
.compare-toggle,.step-panel,.flow-shell,.details-grid,.form-card,.summary-card,.review-card{min-width:0;}
img,svg,select,input,textarea{max-width:100%;}
@media (max-width:640px){
  .review-head{flex-direction:column;align-items:center;gap:2px;}
  .review-head .btn--link{position:static;}
}
.section.wrap{padding-left:var(--space-3);padding-right:var(--space-3);}
@media (min-width:900px){ .section.wrap{padding-left:var(--space-5);padding-right:var(--space-5);} }
.hero{padding-left:var(--space-3);padding-right:var(--space-3);}
@media (min-width:900px){ .hero{padding-left:var(--space-5);padding-right:var(--space-5);} }
#becomeapartner, .modal-backdrop.show {display: none !important;}
@media (max-width: 450px) {.feature-table td:first-child, .feature-table th:first-child {max-width: 130px;min-width: auto;}}