/* ==========================================================================
   StockToSold design tokens
   ========================================================================== */
:root{
  --navy:#0B1F39;
  --navy-800:#122b4d;
  --navy-700:#1b3a63;
  --blue:#2977FA;
  --blue-600:#1c62dc;
  --blue-700:#164fb4;
  --teal:#14C6B7;
  --teal-600:#0ea99c;
  --teal-700:#0a766e;
  --teal-800:#08655d;

  --ink:#0B1F39;
  --ink-70:#3d5573;
  --ink-55:#5d7292;
  --line:#dfe6f0;
  --line-soft:#eaeff7;
  --bg:#ffffff;
  --bg-soft:#f5f8fc;
  --bg-softer:#fafcff;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:20px;
  --radius-xl:28px;

  --shadow-sm:0 1px 2px rgba(11,31,57,.06), 0 1px 3px rgba(11,31,57,.05);
  --shadow:0 4px 16px rgba(11,31,57,.07), 0 1px 3px rgba(11,31,57,.05);
  --shadow-lg:0 24px 60px -20px rgba(11,31,57,.22), 0 6px 20px rgba(11,31,57,.07);
  --shadow-blue:0 18px 40px -18px rgba(41,119,250,.55);

  --grad-brand:linear-gradient(115deg,var(--teal) 0%,var(--blue) 62%);
  --grad-btn:linear-gradient(115deg,#0a7f76 0%,#1c62dc 64%);
  --grad-soft:linear-gradient(160deg,#f2f9ff 0%,#f6fbfa 55%,#ffffff 100%);

  --font:"Inter","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1160px;
  --gutter:clamp(1.15rem,4vw,2rem);
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
svg{display:block;width:1.15em;height:1.15em;flex:0 0 auto}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;letter-spacing:-.022em;font-weight:750}
h1{font-size:clamp(2.15rem,5.2vw,3.6rem);letter-spacing:-.033em}
h2{font-size:clamp(1.7rem,3.6vw,2.5rem);letter-spacing:-.028em}
h3{font-size:clamp(1.12rem,1.9vw,1.35rem);font-weight:700}
h4{font-size:1rem;font-weight:700}
p{margin:0 0 1.15em}
a{color:var(--blue-600);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0 0 1.15em;padding-left:1.15em}
li{margin:.3em 0}
strong{font-weight:680}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--navy);
  padding:.85rem 1.25rem;border-radius:0 0 var(--radius) 0;font-weight:700;box-shadow:var(--shadow)}
.skip-link:focus{left:0}
.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}

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap--narrow{max-width:790px}
.section{padding:clamp(3.5rem,7.5vw,6.5rem) 0}
.section--tight{padding:clamp(2.5rem,5vw,4rem) 0}
.section--soft{background:var(--bg-soft)}
.section--gradient{background:var(--grad-soft)}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy p{color:#c3d2e6}
.stack>*+*{margin-top:1.1rem}
.center{text-align:center}
.grid{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.split{display:grid;gap:clamp(2rem,5vw,4rem);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split--wide-right{grid-template-columns:.85fr 1.15fr}}

/* ==========================================================================
   Type helpers
   ========================================================================== */
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.775rem;font-weight:730;
  letter-spacing:.1em;text-transform:uppercase;color:var(--teal-700);margin-bottom:1rem}
.eyebrow svg{width:15px;height:15px;color:var(--teal-700)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--grad-brand)}
.section--navy .eyebrow{color:#5fe0d3}
.lede{font-size:clamp(1.06rem,1.7vw,1.22rem);color:var(--ink-70);line-height:1.62}
.section--navy .lede{color:#c9d8ea}
.muted{color:var(--ink-55);font-size:.95rem}
.section-head{max-width:660px;margin-bottom:clamp(2rem,4vw,3rem)}
.section-head.center{margin-inline:auto}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font:inherit;font-weight:670;font-size:1rem;line-height:1;
  padding:.92rem 1.5rem;border-radius:11px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--blue-600);color:#fff;box-shadow:var(--shadow-blue)}
.btn--primary:hover{background:var(--blue-700)}
.btn--brand{background:var(--grad-btn);color:#fff;box-shadow:var(--shadow-blue)}
.btn--brand:hover{filter:saturate(1.08) brightness(1.03)}
.btn--ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue-600);box-shadow:var(--shadow-sm)}
.btn--outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn--outline-light:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn svg{width:18px;height:18px}
.btn--sm{padding:.62rem 1.05rem;font-size:.925rem;border-radius:9px}
.btn--lg{padding:1.05rem 1.85rem;font-size:1.06rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.85rem}
.btn-row.center{justify-content:center}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line-soft);box-shadow:0 4px 18px -10px rgba(11,31,57,.2)}
.site-header__inner{display:flex;align-items:center;gap:1.25rem;min-height:78px}
.brand{display:inline-flex;align-items:center;flex:0 0 auto;padding:.35rem 0;border-radius:8px}
.brand:hover{text-decoration:none}
.brand img{height:44px;width:auto}
@media(max-width:520px){.brand img{height:36px}}
.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav a:not(.btn){
  color:var(--ink-70);font-weight:600;font-size:.955rem;padding:.55rem .72rem;border-radius:9px;
  transition:color .15s ease,background .15s ease;
}
.nav a:not(.btn):hover{color:var(--navy);background:var(--bg-soft);text-decoration:none}
.nav a:not(.btn)[aria-current="page"]{color:var(--blue-700);background:rgba(41,119,250,.1)}
.header-cta{display:flex;align-items:center;gap:.6rem;margin-left:.6rem}
.nav-toggle{
  display:none;margin-left:auto;align-items:center;justify-content:center;gap:.5rem;
  background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:.6rem .85rem;
  font:inherit;font-weight:650;font-size:.925rem;color:var(--navy);cursor:pointer;
}
.nav-toggle:hover{border-color:var(--blue);color:var(--blue-600)}
.nav-toggle__bars{position:relative;width:17px;height:12px;flex:0 0 auto}
.nav-toggle__bars span{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.nav-toggle__bars span:nth-child(1){top:0}
.nav-toggle__bars span:nth-child(2){top:5px}
.nav-toggle__bars span:nth-child(3){top:10px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
@media(max-width:1000px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:.15rem;
    background:#fff;border-bottom:1px solid var(--line);padding:.75rem var(--gutter) 1.25rem;
    box-shadow:0 20px 40px -24px rgba(11,31,57,.35);margin-left:0;
  }
  .nav[hidden]{display:none}
  .nav a{padding:.8rem .75rem;font-size:1.02rem}
  .header-cta{margin-left:0;margin-top:.6rem;flex-direction:column;align-items:stretch;gap:.55rem}
  .header-cta .btn{width:100%}
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--grad-soft);padding:clamp(3rem,6.5vw,5.25rem) 0 clamp(3.5rem,7vw,6rem)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:0}
.hero::before{width:640px;height:640px;top:-300px;right:-180px;background:radial-gradient(circle,rgba(41,119,250,.16),transparent 68%)}
.hero::after{width:520px;height:520px;bottom:-280px;left:-200px;background:radial-gradient(circle,rgba(20,198,183,.18),transparent 68%)}
.hero__inner{position:relative;z-index:1;display:grid;gap:clamp(2.5rem,5vw,3.5rem);align-items:center;grid-template-columns:1fr}
@media(min-width:1000px){.hero__inner{grid-template-columns:1fr 1.28fr}}
.hero__inner>*{min-width:0}
.hero h1{margin-bottom:.45em}
.hero .lede{max-width:34em}
.hero .btn-row{margin-top:1.9rem}
.pill{
  display:inline-flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.42rem .95rem .42rem .5rem;font-size:.86rem;font-weight:620;color:var(--ink-70);
  box-shadow:var(--shadow-sm);margin-bottom:1.4rem;
}
.pill__dot{width:22px;height:22px;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;flex:0 0 auto}
.pill__dot svg{width:12px;height:12px}
.hero__notes{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1.75rem;font-size:.9rem;color:var(--ink-55);font-weight:560}
.hero__notes span{display:inline-flex;align-items:center;gap:.45rem}
.hero__notes svg{width:15px;height:15px;color:var(--teal-700);flex:0 0 auto}

/* ==========================================================================
   App mockup
   ========================================================================== */
.mock{
  position:relative;border-radius:var(--radius-xl);background:#fff;overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--line-soft);
}
.mock::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.mock__bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;background:#f3f6fb;border-bottom:1px solid var(--line-soft)}
.mock__dots{display:flex;gap:.35rem}
.mock__dots i{width:9px;height:9px;border-radius:50%;background:#cdd8e8;display:block}
.mock__url{flex:1;text-align:center;font-size:.72rem;color:var(--ink-55);font-weight:600;
  background:#fff;border:1px solid var(--line-soft);border-radius:6px;padding:.2rem .6rem;
  max-width:230px;margin-inline:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock__body{display:grid;grid-template-columns:164px minmax(0,1fr);min-height:430px}
@media(max-width:640px){.mock__body{grid-template-columns:1fr}.mock__side{display:none}}
.mock__side{background:var(--navy);padding:1.05rem .85rem;color:#fff}
.mock__side-brand{display:flex;align-items:center;gap:.5rem;padding:.15rem .4rem 1rem}
.mock__side-brand img{height:22px;width:auto}
.mock__side-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border-radius:8px;
  font-size:.775rem;font-weight:600;color:#9fb4d0;margin-bottom:.12rem;white-space:nowrap}
.mock__side-item svg{width:14px;height:14px;flex:0 0 auto}
.mock__side-item.is-active{background:rgba(41,119,250,.22);color:#fff}
.mock__main{padding:1.15rem 1.25rem 1.4rem;background:var(--bg-softer);min-width:0}
.mock__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.mock__title{font-size:1rem;font-weight:740;letter-spacing:-.02em}
.mock__title span{display:block;font-size:.7rem;font-weight:550;color:var(--ink-55);letter-spacing:0}
.mock__btn{font-size:.72rem;font-weight:660;color:#fff;background:var(--blue-600);padding:.4rem .7rem;border-radius:7px}
.mock__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem;margin-bottom:.95rem}
@media(max-width:820px){.mock__stats{grid-template-columns:repeat(2,1fr)}}
.mock__stat{background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:.55rem .55rem;min-width:0}
.mock__stat b{display:block;font-size:.95rem;letter-spacing:-.02em;line-height:1.2}
.mock__stat small{display:block;font-size:.575rem;line-height:1.25;color:var(--ink-55);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem}
.mock__stat i{font-style:normal;font-size:.65rem;font-weight:700;color:var(--teal-700)}
.mock__table{background:#fff;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.mock__row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.72fr) minmax(0,.95fr);gap:.5rem;align-items:center;
  padding:.55rem .8rem;border-bottom:1px solid var(--line-soft);font-size:.755rem}
.mock__row>*{min-width:0}
.mock__row>span:not(.mock__item):not(:last-child){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mock__row:last-child{border-bottom:0}
.mock__row--head{background:#f7fafd;font-weight:700;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink-55)}

.mock__item{display:flex;align-items:center;gap:.55rem;min-width:0}
.mock__item>span{min-width:0}
.mock__thumb{width:28px;height:28px;border-radius:7px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(150deg,#e8f1ff,#e3f7f4)}
.mock__thumb svg{width:15px;height:15px;color:var(--blue)}
.mock__item b{display:block;font-weight:660;font-size:.755rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock__item small{display:block;color:var(--ink-55);font-size:.66rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{display:inline-block;font-size:.585rem;font-weight:720;padding:.2rem .5rem;border-radius:999px;
  text-transform:uppercase;letter-spacing:.045em;white-space:nowrap}
.tag--avail{background:rgba(20,198,183,.16);color:var(--teal-800)}
.tag--sold{background:rgba(41,119,250,.12);color:var(--blue-700)}
.tag--hold{background:#fff2dd;color:#96591a}
.tag--sched{background:rgba(11,31,57,.07);color:var(--ink-70)}
.mock__float{
  position:absolute;background:#fff;border:1px solid var(--line-soft);border-radius:13px;
  box-shadow:var(--shadow-lg);padding:.7rem .85rem;display:flex;align-items:center;gap:.65rem;z-index:2
}
.mock__float b{font-size:.78rem;display:block;line-height:1.3}
.mock__float small{font-size:.66rem;color:var(--ink-55);display:block}
.mock__float-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--grad-brand);color:#fff}
.mock__float-icon svg{width:16px;height:16px}
.mock__float--a{right:-32px;top:-20px}
.mock__float--b{left:-34px;bottom:-22px}
@media(max-width:1000px){.mock__float{display:none}}
.mock-frame{position:relative;min-width:0}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(1.35rem,2.4vw,1.75rem);box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease;height:100%;
}
.card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#d3e0f2}
.card h3{margin-bottom:.45rem}
.card p:last-child{margin-bottom:0}
.card p{color:var(--ink-70);font-size:.965rem}
.card__icon{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:1.05rem;
  background:linear-gradient(150deg,rgba(20,198,183,.16),rgba(41,119,250,.16));color:var(--blue-600);
}
.card__icon svg{width:23px;height:23px}
.card--flat{box-shadow:none;background:var(--bg-soft);border-color:transparent}
.card--dark{background:var(--navy-800);border-color:rgba(255,255,255,.09);color:#fff;box-shadow:none}
.card--dark p{color:#b9cae0}
.card--dark .card__icon{background:rgba(255,255,255,.09);color:#5fe0d3}
.card__list{list-style:none;margin:.9rem 0 0;padding:0}
.card__list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.925rem;color:var(--ink-70);margin:.5rem 0}
.card__list svg{width:16px;height:16px;color:var(--teal-700);flex:0 0 auto;margin-top:.28rem}
.card--dark .card__list li{color:#c3d2e6}

/* ==========================================================================
   Problem / solution
   ========================================================================== */
.compare{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media(min-width:820px){.compare{grid-template-columns:1fr auto 1fr;align-items:center}}
.compare__arrow{display:grid;place-items:center;color:var(--blue);font-size:1.5rem}
.compare__arrow svg{width:34px;height:34px}
@media(max-width:819px){.compare__arrow{transform:rotate(90deg)}}
.compare__panel{border-radius:var(--radius-lg);padding:clamp(1.35rem,2.6vw,1.85rem);height:100%}
.compare__panel--before{background:#fff;border:1px dashed #ccd6e5}
.compare__panel--after{background:var(--navy);color:#fff;box-shadow:var(--shadow-lg)}
.compare__panel h3{font-size:1.08rem;margin-bottom:.9rem}
.compare__panel--after h3{color:#fff}
.compare__panel ul{list-style:none;margin:0;padding:0}
.compare__panel li{display:flex;gap:.65rem;align-items:flex-start;font-size:.955rem;margin:.62rem 0;color:var(--ink-70)}
.compare__panel--after li{color:#c9d8ea}
.compare__panel svg{width:17px;height:17px;flex:0 0 auto;margin-top:.26rem}
.compare__panel--before svg{color:#a8b6c9}
.compare__panel--after svg{color:var(--teal)}

/* ==========================================================================
   Workflow
   ========================================================================== */
.flow{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));counter-reset:step}
.flow__step{
  position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:1.15rem 1rem;text-align:center;box-shadow:var(--shadow-sm);
}
.flow__num{
  width:34px;height:34px;border-radius:50%;margin:0 auto .7rem;display:grid;place-items:center;
  background:var(--grad-btn);color:#fff;font-weight:730;font-size:.87rem;
}
.flow__step b{display:block;font-size:.97rem;font-weight:700;letter-spacing:-.01em}
.flow__step small{display:block;color:var(--ink-55);font-size:.82rem;margin-top:.25rem;line-height:1.45}
.section--navy .flow__step{background:var(--navy-800);border-color:rgba(255,255,255,.09);box-shadow:none;color:#fff}
.section--navy .flow__step small{color:#a9bdd6}

/* ==========================================================================
   Feature rows
   ========================================================================== */
.featrow{display:grid;gap:clamp(1.75rem,4vw,3.5rem);align-items:center;grid-template-columns:1fr;
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--line-soft)}
.featrow:first-of-type{border-top:0;padding-top:0}
@media(min-width:920px){
  .featrow{grid-template-columns:1fr 1fr}
  .featrow--flip .featrow__media{order:-1}
}
.featrow__media{
  border-radius:var(--radius-lg);background:var(--grad-soft);border:1px solid var(--line-soft);
  padding:clamp(1.1rem,2.4vw,1.6rem);box-shadow:var(--shadow-sm);
}
.checklist{list-style:none;margin:1.25rem 0 0;padding:0}
.checklist li{display:flex;gap:.7rem;align-items:flex-start;margin:.6rem 0;font-size:.975rem;color:var(--ink-70)}
.checklist svg{width:18px;height:18px;color:var(--teal-700);flex:0 0 auto;margin-top:.27rem}
.section--navy .checklist li{color:#c9d8ea}

/* panel widgets used inside feature media */
.panel{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius);padding:.9rem 1rem;box-shadow:var(--shadow-sm)}
.panel+.panel{margin-top:.7rem}
.panel__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.6rem}
.panel__head b{font-size:.85rem;letter-spacing:-.01em}
.panel__head small{font-size:.7rem;color:var(--ink-55);font-weight:600}
.kv{display:flex;justify-content:space-between;gap:1rem;font-size:.79rem;padding:.32rem 0;border-bottom:1px dashed var(--line-soft)}
.kv:last-child{border-bottom:0}
.kv span{color:var(--ink-55)}
.kv b{font-weight:660}
.kv b.pos{color:var(--teal-800)}
.bar{height:7px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin:.3rem 0 .55rem}
.bar i{display:block;height:100%;border-radius:99px;background:var(--grad-brand)}

/* ==========================================================================
   Pricing
   ========================================================================== */
.plans{display:grid;gap:1.35rem;grid-template-columns:1fr;align-items:start}
@media(min-width:860px){.plans{grid-template-columns:1fr 1fr}}
.plan{
  position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-xl);
  padding:clamp(1.6rem,3vw,2.2rem);box-shadow:var(--shadow-sm);height:100%;display:flex;flex-direction:column;
}
.plan--featured{border-color:transparent;background:var(--navy);color:#fff;box-shadow:var(--shadow-lg)}
.plan--featured::before{
  content:"";position:absolute;inset:-1.5px;border-radius:inherit;z-index:-1;background:var(--grad-brand);
}
.plan--featured h3{color:#fff}
.plan__badge{
  position:absolute;top:-13px;right:clamp(1.6rem,3vw,2.2rem);background:var(--blue-600);color:#fff;
  font-size:.7rem;font-weight:740;letter-spacing:.07em;text-transform:uppercase;padding:.35rem .8rem;border-radius:999px;
  box-shadow:var(--shadow-blue);
}
.plan__name{font-size:1.28rem;font-weight:760;letter-spacing:-.02em;margin-bottom:.3rem}
.plan__price{display:flex;align-items:baseline;gap:.25rem;margin:.7rem 0 .3rem}
.plan__price b{font-size:clamp(2.3rem,5vw,3rem);font-weight:780;letter-spacing:-.038em;line-height:1}
.plan__price span{font-size:1rem;font-weight:620;color:var(--ink-55)}
.plan--featured .plan__price span{color:#a9bdd6}
.plan__summary{font-size:.95rem;color:var(--ink-70);margin:.5rem 0 1.35rem;min-height:3em}
.plan--featured .plan__summary{color:#c3d2e6}
.plan__inherit{font-size:.85rem;font-weight:700;color:var(--teal-700);margin:0 0 .75rem;
  text-transform:uppercase;letter-spacing:.05em}
.plan--featured .plan__inherit{color:#5fe0d3}
.plan__features{list-style:none;margin:0 0 1.6rem;padding:0;flex:1}
.plan__features li{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;margin:.55rem 0;color:var(--ink-70)}
.plan--featured .plan__features li{color:#d2dfee}
.plan__features svg{width:17px;height:17px;color:var(--teal-700);flex:0 0 auto;margin-top:.26rem}
.plan--featured .plan__features svg{color:var(--teal)}
.plan__note{font-size:.8rem;color:var(--ink-55);margin:.85rem 0 0;text-align:center}
.plan--featured .plan__note{color:#9fb4d0}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{border-top:1px solid var(--line-soft)}
.faq__item{border-bottom:1px solid var(--line-soft)}
.faq__q{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:1.25rem;
  background:none;border:0;padding:1.25rem .25rem;font:inherit;font-size:1.05rem;font-weight:670;
  color:var(--navy);text-align:left;cursor:pointer;letter-spacing:-.015em;
}
.faq__q:hover{color:var(--blue-600)}
.faq__icon{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--bg-soft);
  display:grid;place-items:center;margin-top:.1rem;transition:transform .2s ease,background .2s ease}
.faq__icon svg{width:14px;height:14px;color:var(--blue-600)}
.faq__q[aria-expanded="true"] .faq__icon{transform:rotate(45deg);background:rgba(41,119,250,.12)}
.faq__a{padding:0 .25rem 1.35rem;max-width:70ch}
.faq__a p{color:var(--ink-70);font-size:.98rem;margin-bottom:.75rem}
.faq__a p:last-child{margin-bottom:0}
.faq__a[hidden]{display:none}

/* ==========================================================================
   Callout / notices
   ========================================================================== */
.notice{
  display:flex;gap:.9rem;align-items:flex-start;border-radius:var(--radius);
  padding:1.05rem 1.2rem;font-size:.94rem;line-height:1.6;
}
.notice svg{width:19px;height:19px;flex:0 0 auto;margin-top:.18rem}
.notice p{margin:0}
.notice p+p{margin-top:.5rem}
.notice--info{background:rgba(41,119,250,.07);border:1px solid rgba(41,119,250,.2);color:#1c4a91}
.notice--info svg{color:var(--blue)}
.notice--edit{background:#fff8e8;border:1px solid #f0dcae;color:#7a5410}
.notice--edit svg{color:#c08a1e}
.notice--teal{background:rgba(20,198,183,.09);border:1px solid rgba(20,198,183,.28);color:#0a6f68}
.notice--teal svg{color:var(--teal-700)}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{position:relative;overflow:hidden;background:var(--navy);color:#fff;
  padding:clamp(3.25rem,6.5vw,5rem) 0;text-align:center}
.cta-band::before{content:"";position:absolute;width:760px;height:760px;top:-420px;left:50%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(20,198,183,.22),transparent 62%);pointer-events:none}
.cta-band::after{content:"";position:absolute;width:560px;height:560px;bottom:-380px;right:-140px;
  border-radius:50%;background:radial-gradient(circle,rgba(41,119,250,.28),transparent 66%);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{color:#fff;margin-bottom:.6rem}
.cta-band p{color:#c3d2e6;max-width:44em;margin-inline:auto}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.contact-card{
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:1.6rem;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;height:100%;
}
.contact-card p{font-size:.95rem;color:var(--ink-70);flex:1}
.contact-card .btn{margin-top:.5rem}

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal{max-width:74ch}
.legal h2{font-size:clamp(1.3rem,2.4vw,1.65rem);margin-top:2.5rem}
.legal h2:first-of-type{margin-top:1.5rem}
.legal p,.legal li{color:var(--ink-70);font-size:1rem}
.legal .placeholder{
  border-left:3px solid var(--teal);background:var(--bg-soft);border-radius:0 var(--radius) var(--radius) 0;
  padding:1rem 1.15rem;font-size:.94rem;color:var(--ink-70);margin:0 0 1.15em;
}
.legal .placeholder b{color:var(--navy)}
.toc{background:var(--bg-soft);border-radius:var(--radius);padding:1.25rem 1.5rem;margin:1.75rem 0}
.toc ol{margin:0;padding-left:1.25rem;columns:2;column-gap:2rem}
@media(max-width:640px){.toc ol{columns:1}}
.toc li{font-size:.93rem;margin:.28rem 0}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--navy);color:#a9bdd6;padding:clamp(3rem,6vw,4.5rem) 0 2rem;font-size:.94rem}
.footer-top{display:grid;gap:2.25rem;grid-template-columns:1fr}
@media(min-width:800px){.footer-top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.footer-brand img{height:46px;width:auto;margin-bottom:1.1rem}
.footer-brand p{color:#94aac6;max-width:32ch;font-size:.94rem}
.site-footer h2{color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:1rem;font-weight:730}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.55rem 0}
.site-footer a{color:#a9bdd6}
.site-footer a:hover{color:#fff;text-decoration:none}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  margin-top:2.75rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.11);font-size:.87rem;color:#8ba2c0;
}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:.75rem 1.35rem}

/* ==========================================================================
   Utilities
   ========================================================================== */
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-2{margin-top:2rem}
.js-anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.js-anim .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-anim .reveal{opacity:1;transform:none}}