/* AXIS homepage. Ported from a licensed template: composition, rhythm and
   responsive behaviour kept, identity replaced. Light ground, one accent,
   two curves. Every visitor readable string lives in index.html. */

:root{
  --bg:#F4F4F2; --bg2:#EDEDEA; --panel:#FFFFFD;
  --ink:#050505; --ink-soft:rgba(5,5,5,.78); --gray:rgba(5,5,5,.56); --faint:rgba(5,5,5,.5);
  --line:rgba(5,5,5,.12); --line2:rgba(5,5,5,.2);
  --accent:#E8FF47; --accent-dim:rgba(232,255,71,.32); --accent-ink:#0A0A05;
  --glass:linear-gradient(180deg, rgba(255,255,253,.74), rgba(246,246,242,.46));
  --glass-edge:0 1px 0 rgba(255,255,255,.9) inset, 0 20px 45px rgba(10,10,5,.06);
  --glass-edge-up:0 1px 0 rgba(255,255,255,.9) inset, 0 28px 60px rgba(10,10,5,.10);
  --ease:cubic-bezier(.32,.72,0,1); --spring:cubic-bezier(.34,1.4,.44,1);
  --r-lg:1.4rem; --r-md:1rem; --r-sm:.65rem;
  --display:'Clash Display','General Sans',system-ui,sans-serif;
  --body:'General Sans',system-ui,sans-serif;
  --measure:min(1260px, calc(100% - 144px));
}
*{margin:0;padding:0;box-sizing:border-box}
button,input,textarea{font-family:inherit}
html{scroll-behavior:auto}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* skip link: hidden until it takes focus */
.skip{
  position:fixed;top:12px;left:12px;z-index:30;
  padding:12px 18px;border-radius:12px;
  background:var(--ink);color:var(--bg);
  font:500 14px/1 var(--body);text-decoration:none;
  transform:translateY(-200%);opacity:0;
  transition:transform .2s var(--ease),opacity .2s var(--ease);
}
.skip:focus-visible{transform:translateY(0);opacity:1;outline:2px solid var(--accent);outline-offset:3px}

.bg-sheen{
  position:fixed;inset:-20%;
  z-index:0;pointer-events:none;
  background:
    linear-gradient(115deg,
      rgba(255,255,255,0)    18%,
      rgba(255,255,255,.75)  27%,
      rgba(255,255,255,0)    34%,
      rgba(230,230,224,.55)  46%,
      rgba(255,255,255,0)    55%,
      rgba(255,255,255,.6)   68%,
      rgba(255,255,255,0)    78%);
  filter:blur(30px);
}
/* width and height are explicit: Three sets the canvas attributes to
   CSS px times devicePixelRatio, and a replaced element with inset:0 but
   auto width shrinks to that intrinsic size, which doubles the canvas on
   every retina screen. */
#scene{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* clip, not hidden: the head pools reach past the gutters and must never
   become scrollable overflow, and clip creates no scroll container */
main{position:relative;z-index:2;overflow-x:clip}

/* ============ shared rhythm ============ */
.wrap{width:var(--measure);margin:0 auto}
section{position:relative}
.section{
  min-height:100vh;
  padding:17vh 0 11vh;
  display:flex;flex-direction:column;align-items:center;
  scroll-margin-top:110px;
}
.section-head{text-align:center;margin-bottom:9.5vh}
/* depth of field: a soft pool of ground behind every head so the helix never
   crosses an eyebrow or a sub line. The pose values are untouched. */
.section-head{position:relative;isolation:isolate}
.section-head::before{content:"";position:absolute;inset:-48px -140px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(244,244,242,.94) 38%,rgba(244,244,242,0) 72%)}
.section-head.tight{margin-bottom:0}
.eyebrow{
  font:600 10px/1 var(--body);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--faint);
}
.section-head .eyebrow{margin-bottom:18px}
.section-title{
  font:500 clamp(38px,4.4vw,62px)/1.1 var(--display);
  letter-spacing:-.015em;
  color:var(--ink);
}
.section-sub{
  margin:20px auto 0;
  max-width:640px;
  font:400 clamp(15px,1.15vw,18px)/1.55 var(--body);
  color:var(--gray);
}

/* the owned device: the mark's parallelogram as a volt highlighter */
.acc{position:relative;display:inline-block;isolation:isolate;padding:0 .06em;font-family:var(--display);font-weight:400;color:var(--ink)}
.acc::before{
  content:"";position:absolute;inset:.14em -.06em .06em -.06em;
  background:var(--accent);transform:skewX(-14deg);border-radius:.06em;z-index:-1;
}

/* reveals: rise 24px, staggered by class, never by an inline style */
[data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:var(--d,0s);
}
[data-reveal].is-in{opacity:1;transform:translateY(0)}
.d1{--d:.1s}.d2{--d:.2s}.d3{--d:.3s}.d4{--d:.4s}

/* ============ controls, shared states ============ */
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-primary,.btn-dark,.btn-ghost,.btn-light,.signin,.buy,.q-arrow{
  transition:transform .16s var(--spring),box-shadow .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.btn-primary:hover,.btn-dark:hover,.btn-ghost:hover,.btn-light:hover,.signin:hover,.buy:hover,.q-arrow:hover{transform:translateY(-1px)}
.btn-primary:active,.btn-dark:active,.btn-ghost:active,.btn-light:active,.signin:active,.buy:active,.q-arrow:active{transform:translateY(0)}
.btn-primary[disabled],.btn-dark[disabled],.btn-ghost[disabled],.buy[disabled]{opacity:.6;pointer-events:none}
.btn-primary,.btn-dark,.btn-ghost,.btn-light{
  display:inline-block;border-radius:13px;
  font:500 16px/1 var(--body);padding:19px 34px;cursor:pointer;text-decoration:none;
  white-space:nowrap;
}
.btn-primary{background:var(--accent);color:var(--accent-ink);border:0;box-shadow:0 6px 22px -10px rgba(232,255,71,.5)}
.btn-primary:hover{box-shadow:0 14px 30px -12px rgba(10,10,5,.28)}
.btn-dark{background:var(--ink);color:var(--bg);border:0}
.btn-dark:hover{box-shadow:0 14px 30px -12px rgba(10,10,5,.4)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}
.btn-ghost:hover{background:rgba(255,255,253,.7);box-shadow:0 14px 30px -14px rgba(10,10,5,.18)}
/* a ghost button for a dark ground */
.btn-light{background:transparent;color:var(--bg);border:1px solid rgba(244,244,242,.32)}
.btn-light:hover{background:rgba(244,244,242,.1);border-color:rgba(244,244,242,.6)}
.btn-primary.sm,.btn-light.sm{padding:15px 24px;font-size:15px;border-radius:11px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
[data-lead-submit].is-sending{animation:pulse 1.6s var(--ease) infinite}

/* ============ NAV ============ */
.nav{
  position:fixed;
  top:28px;left:40px;right:40px;
  height:66px;
  z-index:10;
  display:flex;align-items:center;
  padding:0 14px 0 28px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(248,248,245,.88), rgba(238,238,234,.78));
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 1px 0 rgba(255,255,255,.65) inset, 0 10px 30px rgba(10,10,5,.05);
  opacity:0;transform:translateY(-8px);
  transition:opacity .9s var(--ease) .25s,transform .9s var(--ease) .25s;
}
body.is-loaded .nav{opacity:1;transform:translateY(0)}
.brand{
  display:flex;align-items:center;gap:9px;
  font:500 19px/1 var(--display);letter-spacing:.06em;
  color:var(--ink);text-decoration:none;
}
.brand-mark{display:block;fill:var(--ink)}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:8px;list-style:none}
.nav-links a{
  display:block;padding:10px 14px;color:var(--ink-soft);text-decoration:none;
  font-size:15px;letter-spacing:.005em;
  transition:color .2s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.brand{transition:color .2s var(--ease)}
.brand:hover{color:var(--ink-soft)}
.brand:active,.nav-links a:active,.foot-links a:active,.ask-band .tel:active,.faq-q:active{color:var(--ink)}
.signin{
  margin-left:auto;
  background:var(--ink);color:var(--bg);
  border:0;border-radius:12px;
  font:500 15px/1 var(--body);
  padding:15px 26px;cursor:pointer;text-decoration:none;
  white-space:nowrap;
}
.signin:hover{box-shadow:0 12px 26px -12px rgba(10,10,5,.4)}

/* ============ HERO ============ */
.hero{height:100vh;min-height:640px}
.hero-sub{
  position:absolute;top:24.5vh;right:6.6vw;
  text-align:right;
  font:400 clamp(17px,1.6vw,24px)/1.5 var(--body);
  color:var(--gray);letter-spacing:.002em;
}
.hero-sub .tline{display:block;min-height:1.5em}
.hero-title{
  position:absolute;left:6.6vw;bottom:17vh;
  font:500 clamp(52px,6.2vw,92px)/1.06 var(--display);
  letter-spacing:-.02em;
  color:var(--ink);
}
.hero-title .tline{display:block;min-height:1.06em;white-space:nowrap}
.hero-title .acc{font-weight:400;min-height:1em}

/* ============ LINES ============ */
.cards{display:flex;gap:30px;width:var(--measure);align-items:stretch}
.card{
  flex:1;
  border-radius:26px;
  padding:26px 26px 40px;
  text-align:left;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:var(--glass-edge);
  display:flex;flex-direction:column;
}
.card-fig{
  position:relative;overflow:hidden;
  aspect-ratio:3 / 2;max-width:100%;
  border-radius:18px;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
}
/* the picture sits inset from the top left and bleeds off the bottom right,
   the way the template framed its own shots */
.card-fig img{
  position:absolute;
  left:22px;top:22px;
  width:calc(100% - 22px);height:calc(100% - 22px);
  object-fit:cover;object-position:left top;
  border-radius:12px 0 0 0;
  box-shadow:-12px -12px 30px rgba(10,10,5,.12);
  display:block;
}
.card-fig::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,0) 44%);
}
.card .eyebrow{margin-top:30px;padding:0 6px}
.card h3{margin-top:12px;padding:0 6px;font:500 26px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.card > p:not(.eyebrow){margin-top:12px;padding:0 6px;font:400 16px/1.55 var(--body);color:var(--gray)}
.gets{
  list-style:none;
  margin:24px 6px 0;padding-top:22px;border-top:1px solid var(--line);
  display:grid;gap:12px;align-content:start;flex:1;
}
.gets li{display:flex;align-items:flex-start;gap:11px;font:400 15px/1.45 var(--body);color:var(--ink-soft)}
.gets li svg{flex:none;margin-top:3px;fill:var(--ink)}
.g1{background:linear-gradient(140deg,#F6C8E8 0%,#F0FFA0 48%,#B9ECF6 100%)}
.g2{background:linear-gradient(140deg,#B9ECF6,#F3FFB0)}
.g3{background:linear-gradient(140deg,#F0FFA0,#F6C8E8)}
.g4{background:linear-gradient(140deg,#E4E4DE,#F0FFA0)}
.g5{background:linear-gradient(140deg,#F6FFC4,#B9ECF6)}

/* a slim dark band between sections: the ask, repeated where the decision forms */
.strip{
  width:var(--measure);
  margin:56px auto 0;
  padding:20px 20px 20px 34px;
  border-radius:18px;
  background:var(--ink);color:var(--bg);
  box-shadow:0 22px 50px -20px rgba(10,10,5,.35);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.strip p{font:400 clamp(15px,1.2vw,18px)/1.4 var(--body);color:rgba(244,244,242,.86);max-width:56ch}
.strip-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ============ PROOF: the monthly page in the template's window ============ */
.showcase-panel{
  width:var(--measure);
  border-radius:26px;
  padding:26px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:var(--glass-edge);
}
.app{
  border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg, #FDFDFB, #F5F5F2);
  border:1px solid rgba(255,255,253,.7);
  display:grid;grid-template-columns:232px 1fr;
  min-height:460px;
}
.app-bar{
  grid-column:1 / -1;
  height:52px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:0 22px;border-bottom:1px solid var(--line);
}
.app-bar .title{font:500 13px/1 var(--body);color:var(--ink-soft);letter-spacing:.02em}
.app-bar .range{font:400 13px/1 var(--body);color:var(--gray)}
.app-right{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}
/* the live mark: an ink dot that breathes while a source is answering */
.live{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--body);color:var(--ink)}
.live[hidden]{display:none}
.live i{width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 0 rgba(5,5,5,.28);animation:beat 1.8s var(--ease) infinite}
@keyframes beat{0%{box-shadow:0 0 0 0 rgba(5,5,5,.28)}70%{box-shadow:0 0 0 9px rgba(5,5,5,0)}100%{box-shadow:0 0 0 0 rgba(5,5,5,0)}}
.app-side{border-right:1px solid var(--line);padding:22px 18px}
.side-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 13px;border-radius:11px;
  font-size:14px;color:var(--gray);
}
.side-item i{width:14px;height:10px;border-radius:2px;background:var(--line);display:block;transform:skewX(-14deg)}
.side-item.on{background:var(--accent-dim);color:var(--ink);font-weight:500}
.side-item.on i{background:var(--accent)}
.app-main{padding:26px 28px 24px;text-align:left;display:flex;flex-direction:column;gap:22px}
.kpis{display:grid;grid-template-columns:repeat(4, 1fr);gap:14px}
.kpi{
  border-radius:14px;padding:18px 18px 16px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(10,10,5,.03);
  display:flex;flex-direction:column;
}
.k-label{font:600 10px/1.3 var(--body);letter-spacing:.16em;color:var(--faint)}
.kpi b{
  margin-top:12px;
  font:500 clamp(26px,2.3vw,34px)/1 var(--display);
  letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.kpi b .acc{font-weight:500}
.kpi small{margin-top:10px;font:400 13px/1.4 var(--body);color:var(--gray)}
.chart{
  border-radius:14px;padding:18px 18px 14px;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 4px 12px rgba(10,10,5,.03);
}
.chart-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font:600 10px/1.3 var(--body);letter-spacing:.16em;color:var(--faint);
}
.chart-head span:last-child{font-weight:400;letter-spacing:0;font-size:13px;text-transform:none;color:var(--gray)}
.bars{display:block;width:100%;height:150px;margin-top:14px}
.bars .day{fill:rgba(5,5,5,.26)}
.bars .day.hi{fill:var(--accent)}
.chart-foot{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:12px;
  font:400 12px/1 var(--body);color:var(--gray);
}
.chart-foot span:nth-child(2){color:var(--ink-soft);font-weight:500}
.report-note{font:400 14px/1.6 var(--body);color:var(--gray);max-width:78ch}
/* chips and the plan badge are the parallelogram: skew the box, unskew the letters */
.chip,.badge{
  display:inline-block;
  font:600 10px/1 var(--body);letter-spacing:.12em;
  padding:5px 9px;border-radius:3px;
  color:var(--accent-ink);background:var(--accent-dim);
  transform:skewX(-14deg);
}
.chip > span,.badge > span{display:inline-block;transform:skewX(14deg)}

/* ============ HOW ============ */
.timeline{
  width:var(--measure);
  display:grid;grid-template-columns:repeat(4, 1fr);gap:34px;
  position:relative;padding-top:48px;
}
.timeline::before{
  content:'';position:absolute;top:5px;left:6%;right:6%;
  height:1px;background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.step{text-align:center;position:relative;isolation:isolate}
.step::after{content:"";position:absolute;inset:-60px -30px -44px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(244,244,242,.97) 40%,rgba(244,244,242,0) 74%)}
/* the step marker is the parallelogram, not a dot */
.step::before{
  content:'';position:absolute;top:-48px;left:50%;margin-left:-7px;
  width:14px;height:10px;border-radius:2px;
  background:var(--accent);transform:skewX(-14deg);
}
.step.on::before{box-shadow:0 0 0 5px var(--accent-dim)}
.step em{
  font:400 clamp(44px,4.2vw,60px)/1 var(--display);font-style:normal;
  color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.step h4{margin-top:14px;font:500 clamp(22px,1.9vw,27px)/1.15 var(--display);letter-spacing:-.012em;color:var(--ink)}
.step p{margin-top:12px;font:400 clamp(15px,1.2vw,17px)/1.55 var(--body);color:var(--gray)}

/* ============ PRICE ============ */
.plans{display:flex;gap:30px;width:var(--measure);align-items:stretch}
.plan{
  flex:1;border-radius:26px;padding:46px 36px 40px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:var(--glass-edge);
  display:flex;flex-direction:column;
}
.plan.featured{
  background:linear-gradient(180deg, rgba(255,255,253,.94), rgba(250,250,240,.74));
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 26px 55px rgba(10,10,5,.10);
}
.plan .badge{align-self:flex-start;margin:0 0 18px 4px;font-size:11px;letter-spacing:.16em;padding:7px 12px;background:var(--accent)}
.plan .eyebrow{margin-bottom:12px}
.plan h3{font:500 24px/1.2 var(--display);letter-spacing:-.01em;color:var(--ink)}
.price{margin-top:20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.price b{font:500 54px/1 var(--display);letter-spacing:-.025em;color:var(--ink)}
.price i{font:400 15px/1.3 var(--body);font-style:normal;color:var(--gray)}
.plan > p:not(.eyebrow){margin-top:14px;font:400 15px/1.55 var(--body);color:var(--gray)}
.plan ul{list-style:none;margin-top:28px;padding-top:26px;border-top:1px solid var(--line);display:grid;gap:14px;align-content:start;flex:1}
.plan li{display:flex;align-items:flex-start;gap:11px;font:400 15px/1.45 var(--body);color:var(--ink-soft)}
.plan li svg{flex:none;margin-top:3px;fill:var(--ink)}
.plan .buy{
  margin-top:34px;width:100%;display:block;text-align:center;
  border:1px solid var(--line2);background:transparent;
  border-radius:13px;cursor:pointer;text-decoration:none;
  font:500 15px/1 var(--body);color:var(--ink);padding:17px 20px;
}
.plan .buy:hover{background:rgba(255,255,253,.75);box-shadow:0 14px 30px -14px rgba(10,10,5,.18)}
.plan.featured .buy{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.plan.featured .buy:hover{box-shadow:0 14px 30px -12px rgba(10,10,5,.4)}
.plans-note{
  width:var(--measure);
  margin:30px auto 0;text-align:center;
  font:400 13px/1.5 var(--body);color:var(--gray);
}

/* ============ KEEP ============ */
/* one terms panel, six cells, three by two */
.terms{
  width:var(--measure);
  display:grid;grid-template-columns:repeat(3, 1fr);
  border-radius:26px;overflow:hidden;
  background:var(--glass);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:var(--glass-edge);
}
.term{
  padding:44px 36px 40px;text-align:left;
  display:flex;flex-direction:column;
  border-left:1px solid var(--line);border-top:1px solid var(--line);
}
.term:nth-child(3n+1){border-left:0}
.term:nth-child(-n+3){border-top:0}
.term h3{margin-top:14px;font:500 clamp(24px,2vw,30px)/1.18 var(--display);letter-spacing:-.012em;color:var(--ink)}
.term p:not(.eyebrow){margin-top:16px;font:400 17px/1.6 var(--body);color:var(--gray);flex:1}

/* ============ QUESTIONS ============ */
.faq{padding:17vh 0 11vh;min-height:100vh;scroll-margin-top:110px}
.faq-head{width:var(--measure);margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.faq-head .eyebrow{margin-bottom:18px}
.faq-head > div{position:relative;isolation:isolate}
.faq-head > div::before{content:"";position:absolute;inset:-48px -140px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(244,244,242,.94) 38%,rgba(244,244,242,0) 72%)}
.q-title{
  font:500 clamp(48px,5.9vw,86px)/1.1 var(--display);
  letter-spacing:-.015em;color:var(--ink);
}
.faq-sub{margin-top:22px;max-width:520px;font:400 clamp(15px,1.15vw,18px)/1.55 var(--body);color:var(--gray)}
.q-arrow{
  flex:none;margin-top:14px;
  width:78px;height:78px;border-radius:50%;
  border:1px solid var(--line2);background:rgba(244,244,242,.92);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink);cursor:pointer;
}
.q-arrow:hover{background:rgba(255,255,253,.7);box-shadow:0 14px 30px -14px rgba(10,10,5,.18)}
.faq-list{width:var(--measure);margin:9.5vh auto 0}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-h{font:inherit;margin:0}
.faq-q{
  width:100%;background:transparent;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:30px;
  padding:30px 4px;text-align:left;
  font:400 clamp(19px,1.65vw,24px)/1.4 var(--body);
  letter-spacing:-.01em;color:var(--ink-soft);
  transition:color .2s var(--ease);
}
.faq-q:hover,.faq-item.is-open .faq-q{color:var(--ink)}
.faq-q:hover .faq-sign::before,.faq-q:hover .faq-sign::after{background:var(--ink)}
.faq-sign{flex:none;position:relative;width:18px;height:18px}
.faq-sign::before,.faq-sign::after{
  content:'';position:absolute;left:0;top:8px;
  width:18px;height:1.5px;background:var(--ink-soft);
  transition:transform .35s var(--ease);
}
.faq-sign::after{transform:rotate(90deg)}
.faq-item.is-open .faq-sign::after{transform:rotate(0deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq-item.is-open .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{
  max-width:780px;padding:0 4px 32px;
  font:400 17px/1.62 var(--body);color:var(--gray);
}

/* ============ START ============ */
.cta{padding:15vh 0 4vh;text-align:center}
.cta-actions{margin-top:40px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============ CONTACT ============ */
.contact{padding:0 40px 44px;scroll-margin-top:110px}
.ask-band{
  border-radius:22px;
  background:rgba(237,237,234,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  padding:52px 62px;
  display:grid;grid-template-columns:1fr 1fr;align-items:start;gap:40px 56px;
}
.ask-left .eyebrow{margin-bottom:16px}
.ask-band h2{font:500 clamp(22px,2vw,28px)/1.1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ask-band .tel{
  display:inline-block;margin-top:18px;
  font:400 clamp(44px,4.6vw,66px)/1 var(--display);
  color:var(--ink);text-decoration:none;letter-spacing:-.025em;
  transition:color .2s var(--ease);
}
.ask-band .tel:hover{color:var(--ink-soft)}
.ask-note{margin-top:16px;max-width:34ch;font:400 15px/1.5 var(--body);color:var(--gray)}
.lead{display:grid;gap:6px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font:500 13px/1.2 var(--body);color:var(--ink-soft);letter-spacing:.01em}
.field input,.field textarea{
  width:100%;
  font:400 16px/1.4 var(--body);color:var(--ink);
  padding:14px 16px;border-radius:12px;
  border:1px solid var(--line2);background:var(--panel);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.field textarea{resize:vertical;min-height:112px}
.field input:hover,.field textarea:hover{border-color:rgba(5,5,5,.34)}
.field input:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--ink)}
.err{min-height:1.2em;font:500 13px/1.2 var(--body);color:var(--ink)}
.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lead-actions{margin-top:6px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.lead-actions .btn-dark{padding:17px 30px;font-size:15px}
.form-status{font:400 14px/1.45 var(--body);color:var(--ink-soft);min-height:1.45em}
.form-status a{color:var(--ink);font-weight:500;text-underline-offset:3px;transition:color .2s var(--ease)}
.form-status a:hover{color:var(--ink-soft)}
.tags{margin:56px 40px 0;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between}
.tag{
  flex:1;padding:15px 10px;text-align:center;
  border:1px solid var(--line2);border-radius:999px;
  font:500 13px/1 var(--body);letter-spacing:.18em;
  color:var(--ink-soft);white-space:nowrap;
}
.foot{
  margin:62px 40px 0;border-top:1px solid var(--line);padding-top:34px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-mark{display:block;fill:var(--ink)}
.foot small{font:400 15px/1.3 var(--body);color:var(--gray)}
.foot-links{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.foot-links a{
  font:400 15px/1.3 var(--body);color:var(--gray);text-decoration:none;
  transition:color .2s var(--ease);
}
.foot-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}

/* ============ THE BAR ============ */
/* a slim fixed ask that rides in once the hero has gone and steps out again
   while the start and contact sections are on screen, so the page never
   asks twice at once */
.bar{
  position:fixed;left:50%;bottom:18px;z-index:9;
  width:min(780px, calc(100% - 32px));
  padding:10px 10px 10px 24px;
  border-radius:16px;
  background:rgba(5,5,5,.9);color:var(--bg);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 22px 50px -18px rgba(10,10,5,.55), 0 1px 0 rgba(255,255,255,.08) inset;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  transform:translate(-50%, 140%);visibility:hidden;
  transition:transform .6s var(--spring),visibility 0s linear .6s;
}
.bar.is-on{transform:translate(-50%, 0);visibility:visible;transition:transform .6s var(--spring),visibility 0s}
.bar p{font:400 15px/1.35 var(--body);color:rgba(244,244,242,.86)}
.bar-actions{display:flex;gap:8px;flex:none}
.bar .btn-primary.sm,.bar .btn-light.sm{padding:13px 18px;font-size:14px;border-radius:10px}
body[data-capture] .bar{display:none}

/* ============ responsive ============ */
@media (max-width:1100px){
  .app{grid-template-columns:1fr}
  .app-side{display:none}
  .kpis{grid-template-columns:1fr 1fr}
  .terms{grid-template-columns:1fr 1fr}
  .term:nth-child(3n+1){border-left:1px solid var(--line)}
  .term:nth-child(2n+1){border-left:0}
  .term:nth-child(-n+3){border-top:1px solid var(--line)}
  .term:nth-child(-n+2){border-top:0}
}
@media (max-width:900px){
  :root{--measure:calc(100% - 60px)}
  .cards,.plans{flex-direction:column}
  .card{padding:18px 18px 30px}
  .strip{margin-top:40px;padding:20px;justify-content:center;text-align:center}
  .strip p{max-width:none}
  .strip-actions{width:100%;justify-content:center}
  .showcase-panel{padding:14px}
  .app-bar{height:auto;padding:14px 18px;flex-direction:column;align-items:flex-start;gap:8px}
  .app-right{justify-content:flex-start;gap:10px}
  .app-main{padding:18px 16px 18px;gap:14px}
  .kpis{gap:10px}
  .kpi{padding:14px 14px 12px}
  .kpi b{font-size:clamp(22px,6.4vw,28px)}
  .bars{height:120px}
  .timeline{grid-template-columns:1fr;gap:44px;padding-top:0}
  .timeline::before{display:none}
  .step{text-align:left;display:grid;grid-template-columns:auto 1fr;gap:4px 20px;align-items:start}
  .step::before{position:static;display:block;margin:0;top:auto;left:auto;grid-column:1 / -1}
  .step::after{inset:-24px -16px}
  .step em{grid-row:2 / 4;font-size:clamp(48px,13vw,60px)}
  .step h4{margin-top:.12em}
  .step p{margin-top:8px}
  .terms{grid-template-columns:1fr}
  .terms .term{padding:30px 24px 28px;border-left:0;border-top:1px solid var(--line)}
  .terms .term:first-child{border-top:0}
  .nav{left:16px;right:16px;padding:0 10px 0 20px}
  .nav-links{display:none}
  .signin .num{display:none}
  .faq-head{flex-direction:column}
  .q-arrow{display:none}
  .tags{margin:40px 16px 0}
  .tag{flex:initial;padding:13px 22px}
  .contact{padding:0 16px 96px}
  .foot{margin:44px 16px 0}
  .hero-title .tline{white-space:normal}
  .hero-title{font-size:clamp(40px,10.8vw,52px)}
  /* stacked mobile sections are far taller than the desktop rhythm, so the
     helix crosses headings no matter where it is posed: drop it back to a
     background texture rather than fighting each pose. */
  #scene{opacity:.42}
  .hero-sub{top:15vh;left:30px;right:30px;text-align:left;font-size:17px}
  .hero-title{left:30px;right:30px;bottom:20vh}
  .section{padding:13vh 0 9vh}
  .section-head{margin-bottom:7vh;padding:0 30px}
  .section-head::before,.faq-head > div::before{inset:-40px 0}
  .cta .section-head{padding:0 30px}
  .faq{padding:13vh 0 9vh}
  .faq-list{margin-top:7vh}
  .plans,.cards{gap:18px}
  .ask-band{grid-template-columns:1fr;padding:34px 24px;gap:34px}
  .ask-band .tel{font-size:clamp(38px,11vw,48px)}
  .plan{padding:36px 26px 32px}
  .price b{font-size:46px}
  .bar{bottom:12px;width:calc(100% - 24px);padding:8px;gap:8px}
  .bar p{display:none}
  .bar-actions{flex:1}
  .bar-actions a{flex:1;text-align:center}
  .bar .num{display:none}
}
@media (max-width:420px){
  .tags{gap:10px}
  .tag{padding:11px 16px;font-size:12px;letter-spacing:.14em}
  .foot-links{gap:14px 20px}
  .kpis{grid-template-columns:1fr}
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .nav{opacity:1;transform:none;transition:none}
  .skip{transition:none}
  .btn-primary,.btn-dark,.btn-ghost,.btn-light,.signin,.buy,.q-arrow{transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
  .btn-primary:hover,.btn-dark:hover,.btn-ghost:hover,.btn-light:hover,.signin:hover,.buy:hover,.q-arrow:hover{transform:none}
  .faq-sign::before,.faq-sign::after{transition:none}
  .faq-a{transition:none}
  [data-lead-submit].is-sending{animation:none;opacity:.6}
  .bar{transition:none}
  .bar.is-on{transition:none}
  .live i{animation:none}
  #scene{opacity:.35}
}

/* Fallback: if the module never executes, reveal everything so the page still
   reads as a complete static document instead of a blank screen. */
html.no-module .nav,
html.no-module [data-reveal]{
  opacity:1 !important;transform:none !important;
}
html.no-module #scene{display:none}
body[data-capture] *,body[data-capture] *::before,body[data-capture] *::after{
  transition:none !important;animation:none !important;
}