/* Axure Global — polish layer for the home page.
   Tokens + refinements on top of the existing styles. Loaded after the page's own <style>, so these win at equal specificity.
   Motion rule: only opacity/transform, 150–350 ms, one easing curve; all of it switched off by prefers-reduced-motion. */

/* ── Tokens ─────────────────────────────────────────── */
:root{
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:150ms; --t-mid:200ms; --t-panel:300ms;
  /* type scale */
  --fs-display:clamp(32px,5.2vw,52px); --fs-h2:clamp(26px,3.4vw,36px); --fs-h3:19px; --fs-body:16px; --fs-small:14px; --fs-micro:12px;
  --lh-tight:1.12; --lh-body:1.55;
  /* surfaces: page < raised < hover < selected */
  --surface-page:var(--bg-primary); --surface-raised:var(--bg-primary); --surface-sunken:var(--bg-secondary);
  --surface-hover:var(--bg-tertiary); --surface-selected:var(--primary-light);
  --ring:0 0 0 3px rgba(4,120,87,.28);
  --elev-1:0 1px 2px rgba(15,23,42,.05); --elev-2:0 6px 20px rgba(15,23,42,.08);
}
html{scroll-padding-top:76px}
body{font-variant-numeric:normal}
h1{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.025em}
.section-header h2{font-size:var(--fs-h2);line-height:1.15;letter-spacing:-.02em}
.eyebrow{letter-spacing:.08em}
/* money and statistics line up */

/* ── Icons (inline SVG sprite) ───────────────────────── */
svg.ic{width:1.15em;height:1.15em;vertical-align:-.2em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.role-icon,.feature-icon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--surface-selected);color:var(--primary);font-size:24px;margin-bottom:14px}
.role-icon svg.ic{width:24px;height:24px}

/* ── Focus: one visible style everywhere ─────────────── */
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:8px}

/* ── Buttons ─────────────────────────────────────────── */
.btn{transition:transform var(--t-fast) var(--ease),background-color var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);min-height:44px}
a.btn,a.btn:hover{text-decoration:none}
.btn:active{transform:scale(.98)}
.btn-primary:hover{box-shadow:var(--elev-2)}
@keyframes pg-drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── Hero dashboard ──────────────────────────────────── */

/* ── Cards ───────────────────────────────────────────── */
.fs-card,.feature-card{transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast) var(--ease),background-color var(--t-fast)}
.fs-card:hover{transform:translateY(-2px);box-shadow:var(--elev-2)}
.feature-card:hover{transform:none;background:var(--surface-hover)}
.fs-tab{transition:background-color var(--t-mid),color var(--t-mid)}
@keyframes pg-swap{from{opacity:0;transform:translateX(var(--pg-dx,16px))}to{opacity:1;transform:none}}

/* ── How it works: connected stepper ─────────────────── */
#how-it-works .features-grid{counter-reset:step;position:relative;gap:20px}
#how-it-works .feature-card{counter-increment:step;position:relative;background:var(--surface-raised);border:1px solid var(--border);text-align:left;padding:24px 22px}
#how-it-works .feature-icon{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;font-size:16px;font-weight:700;margin-bottom:12px}
#how-it-works .feature-icon::before{content:counter(step)}
@media (min-width:1024px){
  #how-it-works .feature-card:not(:last-child)::after{content:"";position:absolute;top:44px;left:calc(22px + 40px + 12px);right:-22px;height:2px;background:linear-gradient(90deg,var(--primary),var(--border));z-index:0;opacity:.5}
}
@media (max-width:1023px){
  #how-it-works .features-grid{padding-left:8px}
  #how-it-works .feature-card:not(:last-child)::after{content:"";position:absolute;left:41px;top:64px;bottom:-24px;width:2px;background:var(--border)}
}
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity var(--t-panel) var(--ease),transform var(--t-panel) var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* ── Pricing ─────────────────────────────────────────── */
#pricing .features-grid > div,#pricing [class*="plan"]{transition:border-color var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast) var(--ease)}
#pricing table{font-variant-numeric:tabular-nums}
#pricing table thead th{position:sticky;top:60px;background:var(--surface-sunken);z-index:1}
#pricing table td:first-child,#pricing table th:first-child{position:sticky;left:0;background:var(--surface-raised);z-index:1}
#pricing table thead th:first-child{background:var(--surface-sunken);z-index:2}
#pricing table tbody tr:hover td{background:var(--surface-sunken)}
#pricing table td,#pricing table th{border-bottom:1px solid var(--border-light)}
.local-price{transition:opacity var(--t-mid)}
.local-price.is-swapping{opacity:0}

/* ── FAQ accordion: smooth where supported, instant elsewhere ── */
.fs-faq summary,.fs-faq .fs-summary{min-height:44px;cursor:pointer;transition:color var(--t-fast)}
details{interpolate-size:allow-keywords}
details::details-content{block-size:0;overflow:hidden;transition:block-size var(--t-panel) var(--ease),content-visibility var(--t-panel) allow-discrete}
details[open]::details-content{block-size:auto}
details summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";flex:none;width:8px;height:8px;border-right:2px solid var(--text-secondary);border-bottom:2px solid var(--text-secondary);transform:rotate(45deg);transition:transform var(--t-mid) var(--ease)}
details[open] > summary::after{transform:rotate(225deg)}
details[open] > summary{color:var(--primary)}
@keyframes pg-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── Contact ─────────────────────────────────────────── */
.contact-cta{display:inline-flex;align-items:center;justify-content:center;margin:0 auto 12px}
.contact-addr{font-size:var(--fs-small)}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width:640px){
  html,body{overflow-x:clip}
  .features-container,.roles-container{padding-left:16px;padding-right:16px}
  .hero-actions .btn{width:100%}
}

/* ── Reduced motion: everything above becomes instant ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
}

/* Dashboard figures never break across lines */
.plan-note{max-width:760px;margin:16px auto 0;padding:0 16px;text-align:center;font-size:13px;color:var(--text-secondary);line-height:1.5}