:root{
  --blue:#123D73;--green:#8CCB32;--orange:#FF7A22;--coral:#E84B32;--navy:#10243E;--ice:#F4F8F7;--white:#fff;
  --muted:#607189;--border:#dce6eb;--shadow:0 28px 80px rgba(16,36,62,.14);--soft-shadow:0 15px 40px rgba(16,36,62,.10);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#fff 0%,#fff 54%,#f8fbfb 100%);color:var(--navy);font-family:"DM Sans",sans-serif}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.page-shell{overflow:hidden}.site-header{height:88px;max-width:1500px;margin:auto;padding:0 38px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;align-items:center;gap:12px;font:800 24px/1 "Plus Jakarta Sans",sans-serif;letter-spacing:-1px}.brand img{width:48px;height:34px;object-fit:cover;object-position:center;border-radius:18px}.brand>span>span,.mini-brand span{color:#61be21}.nav-links{display:flex;gap:40px;font-size:14px;font-weight:600}.nav-links a{transition:.2s}.nav-links a:hover{color:var(--blue)}.nav-actions{display:flex;gap:12px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;padding:13px 22px;font-weight:700;font-size:14px;transition:transform .2s,box-shadow .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-primary{background:var(--orange);color:white;box-shadow:0 10px 24px rgba(255,122,34,.22)}.button-primary:hover{box-shadow:0 14px 28px rgba(255,122,34,.3)}.button-ghost{border:1.5px solid var(--blue);color:var(--blue);background:#fff}.button-large{padding:16px 26px;font-size:15px}.menu-button{display:none;border:0;background:transparent;font-size:26px;color:var(--navy)}
.hero{min-height:760px;max-width:1500px;margin:0 auto;padding:82px 38px 40px;display:grid;grid-template-columns:.9fr 1.15fr;align-items:center;gap:40px;position:relative}.hero:before{content:"";position:absolute;width:520px;height:520px;left:-260px;bottom:-240px;border-radius:50%;background:radial-gradient(circle,rgba(18,61,115,.06),rgba(18,61,115,0) 68%)}.status-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#eef8e5;font-size:12px;font-weight:800;letter-spacing:.03em}.status-pill span{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(140,203,50,.12)}h1,h2,h3{font-family:"Plus Jakarta Sans",sans-serif}.hero h1{font-size:clamp(52px,5.25vw,86px);line-height:1.02;letter-spacing:-.055em;margin:27px 0 26px}.hero h1 em{font-style:normal;color:var(--green);position:relative}.hero h1 em:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--orange);position:absolute;right:-15px;bottom:10px}.hero-lede{max-width:610px;font-size:20px;line-height:1.62;color:#4f627a;margin:0}.hero-actions{display:flex;gap:16px;margin:34px 0 32px}.micro-benefits{display:flex;gap:27px;flex-wrap:wrap;color:#3c5068;font-size:13px;font-weight:600}.micro-benefits span{display:flex;align-items:center;gap:9px}.icon{font-style:normal;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800}.shield{color:var(--green);background:#f0f9e9}.trend{color:var(--orange);background:#fff2e9}.people{color:var(--blue);background:#eaf2fb}
.hero-visual{height:600px;position:relative}.browser-card{position:absolute;top:35px;right:0;width:min(760px,92%);height:500px;background:#fff;border-radius:26px;border:1px solid #dce6eb;box-shadow:var(--shadow);overflow:hidden;transform:rotate(-1.5deg)}.browser-top{height:62px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e9eef1;background:#fbfdfe}.mini-brand{display:flex;align-items:center;gap:8px;font:700 13px "Plus Jakarta Sans"}.mini-brand img{width:25px;height:18px;object-fit:cover;border-radius:12px}.browser-controls{display:flex;gap:8px}.browser-controls span{width:8px;height:8px;border-radius:50%;background:#d9e3e8}.browser-body{display:grid;grid-template-columns:64px 1fr;height:438px}.side-nav{background:var(--blue);padding-top:25px;display:flex;align-items:center;flex-direction:column;gap:18px}.nav-dot{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#d4e1f0;font-size:14px}.nav-dot.active{background:#255990;color:#fff}.dashboard{padding:24px;background:#f7fafb}.dash-headline{display:flex;align-items:center;justify-content:space-between}.dash-headline small{color:#7a8a9d}.dash-headline h3{margin:2px 0 0;font-size:22px}.dash-headline>span{font-size:11px;background:#fff;border:1px solid #e2eaee;padding:8px 10px;border-radius:8px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:20px 0}.stats article{background:#fff;border:1px solid #e8eef1;border-radius:12px;padding:13px;min-width:0}.stats small{display:block;color:#6f7f92;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stats strong{font:800 20px "Plus Jakarta Sans";display:block;margin:6px 0}.stats strong.word{font-size:15px}.stats b{font-size:9px;color:#62b927}.chart-card{background:#fff;border:1px solid #e6edf0;border-radius:14px;padding:16px}.chart-title{display:flex;justify-content:space-between;align-items:center}.chart-title span{font-size:9px;color:#8392a3}.chart-card svg{width:100%;height:205px;overflow:visible}.grid line{stroke:#edf2f4;stroke-width:1}.line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.line.blue{stroke:#2f70cc}.line.green{stroke:var(--green)}.line.orange{stroke:var(--orange)}.legend{display:flex;gap:15px;font-size:9px;color:#67788c}.legend span:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.blue-dot:before{background:#2f70cc}.green-dot:before{background:var(--green)}.orange-dot:before{background:var(--orange)}.floating-card{background:#fff;border:1px solid #e1eaed;box-shadow:var(--soft-shadow);border-radius:18px}.goal-card{position:absolute;z-index:4;width:245px;left:3%;bottom:8px;padding:18px}.goal-card>div:first-child{display:flex;justify-content:space-between}.goal-card span{color:var(--green);font-weight:800}.goal-card p{font-size:10px;margin:14px 0 6px}.progress{height:7px;border-radius:20px;background:#edf4e8;overflow:hidden}.progress i{height:100%;display:block;background:var(--green);border-radius:20px}.dash-mascot{position:absolute;z-index:5;right:-7px;bottom:-5px;width:300px;height:260px;object-fit:cover;object-position:58% 45%;mix-blend-mode:multiply;filter:drop-shadow(0 20px 18px rgba(16,36,62,.14));border-radius:45%}.orbit{position:absolute;border:2px dashed rgba(140,203,50,.58);border-radius:50%;pointer-events:none}.orbit-one{width:460px;height:300px;top:0;left:6%;transform:rotate(-17deg)}.orbit-two{width:490px;height:340px;right:-180px;bottom:0;border-color:rgba(255,122,34,.45);transform:rotate(15deg)}
.problem,.coming{max-width:1380px;margin:0 auto;padding:120px 38px}.problem{text-align:center}.section-kicker{font-size:12px;letter-spacing:.15em;font-weight:800;color:var(--blue)}.section-kicker.light{color:#b8d9ff}.problem h2,.coming h2{font-size:clamp(34px,3vw,54px);line-height:1.12;letter-spacing:-.045em;margin:14px auto 18px}.problem>p{max-width:850px;margin:0 auto;color:#5d6d80;font-size:18px;line-height:1.7}.problem-grid{margin-top:60px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left}.problem-grid article{background:#fff;border:1px solid #e2e9ec;border-radius:24px;padding:32px;box-shadow:0 10px 30px rgba(16,36,62,.05)}.problem-grid article>span{color:var(--orange);font:800 13px "Plus Jakarta Sans"}.problem-grid h3{font-size:22px;margin:15px 0 10px}.problem-grid p{color:#667588;line-height:1.6;margin:0}
.coming{padding-top:65px;text-align:center}.section-intro{color:#627387;max-width:700px;margin:0 auto 50px;font-size:18px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:left}.feature{position:relative;padding:30px;border-radius:28px;border:1px solid #e1e8eb;background:#fff;box-shadow:0 18px 48px rgba(16,36,62,.07);overflow:hidden}.feature:before{content:"";position:absolute;inset:0 0 auto 0;height:6px}.feature.collect:before{background:var(--blue)}.feature.understand:before{background:var(--green)}.feature.act:before{background:var(--orange)}.feature-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:27px;font-weight:800}.collect .feature-icon{color:var(--blue);background:#eaf2fb}.understand .feature-icon{color:#63b624;background:#eef8e6}.act .feature-icon{color:var(--orange);background:#fff0e6}.feature h3{font-size:28px;margin:20px 0 8px}.collect h3{color:var(--blue)}.understand h3{color:#63b624}.act h3{color:var(--orange)}.feature>p{color:#667689;line-height:1.6;min-height:78px}.mini-ui{margin-top:26px;background:#fbfdfe;border:1px solid #e8eef0;border-radius:18px;padding:18px;min-height:210px;box-shadow:0 10px 25px rgba(16,36,62,.06)}.mini-ui>small{font-weight:800}.session-ui label{display:block;font-size:10px;color:#68788b;margin:14px 0 6px}.input{font-size:12px;background:#fff;border:1px solid #dfe8ec;padding:10px;border-radius:8px;display:flex;justify-content:space-between}.rating{display:flex;gap:8px}.rating span{width:31px;height:31px;border-radius:8px;background:#f1f5f7;display:grid;place-items:center;font-size:11px}.rating .selected{background:var(--orange);color:#fff}.mini-chart{position:relative}.mini-chart svg{width:100%;height:130px;margin-top:18px}.mini-chart polyline{fill:none;stroke:var(--green);stroke-width:3}.gain{position:absolute;right:18px;top:18px;background:#eef8e7;border-radius:10px;padding:8px 10px;color:#5aa61e;font-weight:800}.gain small{display:block;font-size:7px;color:#779067}.activity-ui>div{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #edf1f3}.activity-ui>div:last-child{border:0}.activity-ui i{font-style:normal;background:#e9f1f8;color:var(--blue);border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:9px;font-weight:800}.activity-ui p{margin:0}.activity-ui strong,.activity-ui span{display:block;font-size:10px}.activity-ui span{color:#7c8a99;margin-top:2px}.activity-ui time{font-size:9px;color:#8996a5}
.beta-banner{max-width:1380px;margin:50px auto 90px;background:linear-gradient(135deg,#0d3565,#123d73 58%,#0f3159);border-radius:32px;min-height:260px;display:grid;grid-template-columns:260px 1fr 390px;align-items:center;gap:38px;padding:24px 48px;color:#fff;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(18,61,115,.22)}.beta-banner:after{content:"";position:absolute;width:520px;height:240px;right:-170px;bottom:-180px;border:2px dashed rgba(140,203,50,.6);border-radius:50%;transform:rotate(9deg)}.beta-dash-wrap{height:230px;align-self:end;overflow:hidden}.beta-dash-wrap img{width:250px;height:250px;object-fit:cover;object-position:62% 35%;border-radius:46%;mix-blend-mode:screen;filter:saturate(1.2) contrast(1.04)}.beta-copy h2{font-size:34px;margin:9px 0 10px;letter-spacing:-.04em}.beta-copy p{margin:0;color:#d8e5f2;line-height:1.6;max-width:520px}.beta-form{display:flex;flex-direction:column;gap:10px;z-index:2}.beta-form input{height:56px;border:0;border-radius:999px;padding:0 20px;font:500 14px "DM Sans";outline:none}.beta-form button{height:56px;border:0;border-radius:999px;background:var(--orange);color:#fff;font-weight:800;cursor:pointer;font-size:14px}.beta-form small{color:#c6d8e8;font-size:11px;padding-left:10px}.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}
footer{background:var(--navy);color:#d9e3ec;display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:50px;padding:58px max(38px,calc((100vw - 1380px)/2));font-size:13px}.brand.inverse{color:#fff}.footer-brand p{color:#9fb0c1;margin-top:24px}.footer-brand{min-width:240px}footer>div:not(.footer-brand){display:flex;flex-direction:column;gap:12px}footer strong{color:#fff;margin-bottom:5px}footer a,footer span{color:#b4c2cf}footer a:hover{color:#fff}
@media(max-width:1100px){.nav-links{display:none}.hero{grid-template-columns:1fr;padding-top:50px}.hero-copy{text-align:center}.hero-lede{margin:auto}.hero-actions,.micro-benefits{justify-content:center}.hero-visual{margin-top:25px}.feature-grid{grid-template-columns:1fr}.feature>p{min-height:0}.problem-grid{grid-template-columns:1fr}.beta-banner{grid-template-columns:190px 1fr}.beta-form{grid-column:2}.beta-dash-wrap{grid-row:1/3}.browser-card{left:50%;transform:translateX(-50%) rotate(-1.5deg)}footer{grid-template-columns:1.4fr 1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:720px){.site-header{height:72px;padding:0 20px}.brand{font-size:20px}.brand img{width:40px;height:29px}.nav-actions{display:none}.menu-button{display:block}.site-header.open{height:auto;min-height:72px;flex-wrap:wrap;padding-bottom:18px}.site-header.open .nav-links,.site-header.open .nav-actions{display:flex;width:100%;flex-direction:column;gap:12px}.hero{padding:45px 20px 20px;min-height:0}.hero h1{font-size:50px}.hero-lede{font-size:17px}.hero-actions{flex-direction:column;align-items:stretch}.micro-benefits{display:grid;grid-template-columns:1fr;text-align:left}.hero-visual{height:490px}.browser-card{width:720px;left:8px;transform:scale(.65) rotate(-1.5deg);transform-origin:top left}.goal-card{transform:scale(.8);transform-origin:bottom left;left:0}.dash-mascot{width:190px;height:170px;right:-35px}.problem,.coming{padding:85px 20px}.problem-grid{margin-top:40px}.beta-banner{margin:30px 20px 70px;padding:34px 24px;grid-template-columns:1fr;text-align:center}.beta-dash-wrap{display:none}.beta-form{grid-column:1}.beta-copy h2{font-size:30px}footer{grid-template-columns:1fr 1fr;padding:45px 24px}.footer-brand{grid-column:1/-1}}
\n\n/* v2 layout cleanup — keeps mascot art from colliding with UI */
.hero-visual{overflow:visible;padding-bottom:92px}
.browser-card{width:min(92%,760px);left:5%;top:30px}
.goal-card{left:0;bottom:28px;width:230px;z-index:7}
.dash-mascot{
  right:8px;
  bottom:4px;
  width:238px;
  height:238px;
  object-fit:cover;
  object-position:57% 44%;
  border-radius:42%;
  z-index:8;
}
.orbit{opacity:.5;z-index:0}
.browser-card,.goal-card,.dash-mascot{isolation:isolate}

/* Give the problem section breathing room after the layered hero. */
.problem{padding-top:145px}

/* Second mascot is intentionally a different supplied asset. */
.beta-banner{grid-template-columns:280px minmax(0,1fr) 390px;gap:42px;padding-left:34px}
.beta-dash-wrap{
  height:220px;
  align-self:center;
  overflow:visible;
  display:flex;
  align-items:center;
  justify-content:center;
}
.beta-dash-wrap img{
  width:285px;
  height:auto;
  max-height:190px;
  object-fit:contain;
  object-position:center;
  border-radius:0;
  mix-blend-mode:normal;
  filter:drop-shadow(0 18px 16px rgba(0,0,0,.18));
  transform:translateY(3px);
}
.beta-copy,.beta-form{position:relative;z-index:3}

@media(max-width:1100px){
  .hero-visual{padding-bottom:108px}
  .browser-card{width:760px;max-width:92%;left:50%;transform:translateX(-50%) rotate(-1deg)}
  .goal-card{left:4%;bottom:22px}
  .dash-mascot{right:4%;bottom:4px;width:220px;height:220px}
  .problem{padding-top:115px}
  .beta-banner{grid-template-columns:220px minmax(0,1fr);padding-left:28px}
  .beta-dash-wrap img{width:230px;max-height:170px}
}

@media(max-width:720px){
  .hero-visual{height:520px;padding-bottom:70px;overflow:hidden}
  .browser-card{width:720px;max-width:none;left:12px;top:22px;transform:scale(.61) rotate(-1deg);transform-origin:top left}
  .goal-card{left:12px;bottom:28px;width:205px;transform:none}
  .dash-mascot{right:-12px;bottom:12px;width:158px;height:158px}
  .problem{padding-top:88px}
  .beta-banner{grid-template-columns:1fr;padding:32px 22px}
  .beta-dash-wrap{display:flex;height:120px;grid-row:auto}
  .beta-dash-wrap img{width:220px;max-height:120px}
  .beta-form{grid-column:1}
}

/* v3 hero mascot composition — clean, intentional layering */
.hero-visual{
  height:640px;
  padding-bottom:0;
  isolation:isolate;
}
.browser-card{
  top:26px;
  left:7%;
  right:auto;
  width:min(88%,760px);
  z-index:2;
}
.goal-card{
  left:2%;
  bottom:20px;
  width:225px;
  z-index:5;
}
.dash-mascot{
  right:-12px;
  bottom:-8px;
  width:270px;
  height:auto;
  max-height:300px;
  object-fit:contain;
  object-position:center bottom;
  border-radius:0;
  mix-blend-mode:normal;
  filter:drop-shadow(0 22px 18px rgba(16,36,62,.18));
  z-index:6;
}
/* small soft "ground" under Dash so he feels placed, not pasted */
.hero-visual:after{
  content:"";
  position:absolute;
  width:250px;
  height:38px;
  right:-2px;
  bottom:-4px;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(16,36,62,.16),rgba(16,36,62,0) 70%);
  filter:blur(4px);
  z-index:3;
  pointer-events:none;
}
/* Keep the UI card and mascot visually separate. */
.goal-card{transform:translateY(6px)}
.problem{padding-top:125px}

@media(max-width:1250px){
  .browser-card{left:4%;width:min(90%,720px)}
  .dash-mascot{right:0;width:235px}
  .goal-card{left:1%;width:215px}
}

@media(max-width:1100px){
  .hero-visual{height:620px;padding-bottom:0}
  .browser-card{left:50%;width:760px;max-width:88%;transform:translateX(-50%) rotate(-1deg)}
  .goal-card{left:5%;bottom:12px}
  .dash-mascot{right:5%;bottom:-4px;width:225px;height:auto}
  .hero-visual:after{right:4%;width:215px}
}

@media(max-width:720px){
  .hero-visual{height:500px;padding-bottom:0;overflow:hidden}
  .browser-card{width:720px;max-width:none;left:10px;top:20px;transform:scale(.59) rotate(-1deg);transform-origin:top left}
  .goal-card{left:12px;bottom:22px;width:188px;transform:none;padding:14px}
  .goal-card p{margin:10px 0 5px}
  .dash-mascot{right:-18px;bottom:2px;width:155px;height:auto}
  .hero-visual:after{right:-9px;bottom:3px;width:150px;height:26px}
  .problem{padding-top:78px}
}

/* v4 — refreshed feature cards: remove template-like color trims */
.feature{
  padding:34px;
  border-radius:26px;
  border:1px solid #e4eaee;
  background:linear-gradient(180deg,#ffffff 0%,#fbfcfd 100%);
  box-shadow:0 14px 34px rgba(16,36,62,.055);
  overflow:visible;
}
.feature:before{display:none!important;content:none!important}

.feature-icon{
  width:48px;
  height:48px;
  border-radius:14px;
  font-size:24px;
  box-shadow:inset 0 0 0 1px rgba(16,36,62,.035);
}
.collect .feature-icon{background:#edf4fb;color:var(--blue)}
.understand .feature-icon{background:#f1f8e9;color:#65b824}
.act .feature-icon{background:#fff3ea;color:var(--orange)}

.feature h3{
  margin:22px 0 10px;
  font-size:29px;
  letter-spacing:-.035em;
}
.feature>p{
  margin:0;
  color:#637489;
  line-height:1.65;
  min-height:96px;
}

/* Small, intentional accent instead of a full-width colored rail. */
.feature h3:after{
  content:"";
  display:block;
  width:30px;
  height:3px;
  border-radius:999px;
  margin-top:14px;
  opacity:.85;
}
.collect h3:after{background:var(--blue)}
.understand h3:after{background:var(--green)}
.act h3:after{background:var(--orange)}

.mini-ui{
  margin-top:28px;
  background:#fff;
  border:1px solid #e6ecef;
  border-radius:17px;
  box-shadow:0 8px 22px rgba(16,36,62,.045);
}

/* Slight stagger makes the three cards feel composed rather than templated. */
@media(min-width:1101px){
  .feature-grid{align-items:start}
  .feature.understand{transform:translateY(18px)}
}

@media(max-width:1100px){
  .feature.understand{transform:none}
  .feature>p{min-height:0}
}

/* v5 — balanced feature-card refresh */
.feature-grid{
  align-items:stretch;
}
.feature{
  display:flex;
  flex-direction:column;
  min-height:560px;
  padding:34px;
  overflow:hidden;
  transform:none!important;
  background:#fff;
  border:1px solid #dfe7eb;
  box-shadow:0 14px 34px rgba(16,36,62,.055);
}
.feature:after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-72px;
  top:-72px;
  border-radius:50%;
  pointer-events:none;
  opacity:.55;
}
.feature.collect:after{background:radial-gradient(circle,rgba(18,61,115,.13) 0%,rgba(18,61,115,0) 70%)}
.feature.understand:after{background:radial-gradient(circle,rgba(140,203,50,.18) 0%,rgba(140,203,50,0) 70%)}
.feature.act:after{background:radial-gradient(circle,rgba(255,122,34,.17) 0%,rgba(255,122,34,0) 70%)}

.feature-icon{
  position:relative;
  z-index:1;
  width:54px;
  height:54px;
  border-radius:16px;
  font-size:25px;
  border:1px solid transparent;
}
.collect .feature-icon{background:#eaf2fb;color:var(--blue);border-color:#d7e7f6}
.understand .feature-icon{background:#eef8e6;color:#62b524;border-color:#ddefd0}
.act .feature-icon{background:#fff0e6;color:var(--orange);border-color:#ffe0cc}

.feature h3{
  position:relative;
  z-index:1;
  margin:22px 0 12px;
  font-size:29px;
  letter-spacing:-.035em;
}
.feature h3:after{display:none!important;content:none!important}
.feature>p{
  position:relative;
  z-index:1;
  margin:0;
  color:#637489;
  line-height:1.65;
  min-height:100px;
}

.mini-ui{
  position:relative;
  z-index:1;
  margin-top:auto;
  min-height:230px;
  background:#fbfdfe;
  border:1px solid #e4ebef;
  border-radius:18px;
  box-shadow:none;
}
.collect .mini-ui{box-shadow:inset 0 3px 0 rgba(18,61,115,.12)}
.understand .mini-ui{box-shadow:inset 0 3px 0 rgba(140,203,50,.20)}
.act .mini-ui{box-shadow:inset 0 3px 0 rgba(255,122,34,.18)}

@media(min-width:1101px){
  .feature-grid{align-items:stretch}
  .feature.understand{transform:none!important}
}
@media(max-width:1100px){
  .feature{min-height:auto}
  .feature>p{min-height:0}
  .mini-ui{margin-top:28px}
}

/* v6 — remove artificial feature-card dead space */
.feature-grid{
  align-items:stretch;
}
.feature{
  min-height:0;
  height:100%;
}
.feature>p{
  min-height:0;
  margin:0;
}
.feature .mini-ui{
  margin-top:26px;
  min-height:230px;
}
/* Let the grid equalize the outer cards instead of pushing the previews down. */
@media(min-width:1101px){
  .feature-grid{align-items:stretch}
  .feature{height:100%}
}

/* v7 — tighten the space after Collect / Understand / Act */
.coming{
  padding-bottom:44px;
}
.beta-banner{
  margin-top:18px;
}
@media(max-width:720px){
  .coming{padding-bottom:34px;}
  .beta-banner{margin-top:10px;}
}

/* v8 — align private beta banner to the same content grid as sections above */
.beta-banner{
  width:calc(100% - 76px);
  max-width:1304px;
  margin-left:auto;
  margin-right:auto;
}
@media(max-width:720px){
  .beta-banner{
    width:auto;
    margin-left:20px;
    margin-right:20px;
  }
}

/* v9 — tighten transition after WHY BEHAVIORDASH cards */
.problem{
  padding-bottom:42px;
}
.coming{
  padding-top:42px;
}
@media(max-width:720px){
  .problem{
    padding-bottom:30px;
  }
  .coming{
    padding-top:30px;
  }
}


/* v10 — hero punctuation + assurance-row refinement */
.hero h1 em:after{
  width:11px;
  height:11px;
  right:-16px;
  bottom:8px;
  box-shadow:0 0 0 4px rgba(255,122,34,.08);
}

.micro-benefits{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:650px;
  padding-top:22px;
  border-top:1px solid #e5ecef;
  color:var(--navy);
}
.micro-benefits .benefit-item{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  align-items:center;
  gap:10px;
  min-width:0;
  padding:0 18px;
}
.micro-benefits .benefit-item:first-child{padding-left:0}
.micro-benefits .benefit-item:last-child{padding-right:0}
.micro-benefits .benefit-item + .benefit-item{border-left:1px solid #e5ecef}
.micro-benefits .icon{
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:13px;
  flex:0 0 auto;
}
.micro-benefits strong{
  display:block;
  font:700 12px/1.25 "Plus Jakarta Sans",sans-serif;
  color:#273e58;
  letter-spacing:-.01em;
}
.micro-benefits small{
  display:block;
  margin-top:3px;
  color:#7a899a;
  font-size:10px;
  line-height:1.35;
  font-weight:500;
}

@media(max-width:1100px){
  .micro-benefits{margin-left:auto;margin-right:auto;text-align:left}
}
@media(max-width:720px){
  .hero h1 em:after{width:9px;height:9px;right:-12px;bottom:6px}
  .micro-benefits{
    grid-template-columns:1fr;
    gap:0;
    padding-top:8px;
    border-top:0;
    background:#fbfdfe;
    border:1px solid #e5ecef;
    border-radius:18px;
    overflow:hidden;
  }
  .micro-benefits .benefit-item,
  .micro-benefits .benefit-item:first-child,
  .micro-benefits .benefit-item:last-child{
    padding:13px 15px;
  }
  .micro-benefits .benefit-item + .benefit-item{
    border-left:0;
    border-top:1px solid #e5ecef;
  }
}


/* v11 — inline animated hero period + tighter WHY transition */
.hero h1 em:after{
  display:none !important;
  content:none !important;
}
.hero-period{
  position:relative;
  display:inline-block;
  width:.15em;
  height:.15em;
  margin-left:.075em;
  border-radius:50%;
  background:var(--orange);
  vertical-align:baseline;
  transform:translateY(.06em);
  box-shadow:0 0 0 0 rgba(255,122,34,.28);
}
.hero-period:after{
  content:"";
  position:absolute;
  inset:50% auto auto 50%;
  width:100%;
  height:100%;
  border-radius:50%;
  border:2px solid rgba(255,122,34,.36);
  transform:translate(-50%,-50%) scale(1);
  opacity:.72;
  animation:hero-period-ping 2.1s cubic-bezier(.2,.7,.2,1) infinite;
  pointer-events:none;
}
@keyframes hero-period-ping{
  0%,28%{transform:translate(-50%,-50%) scale(1);opacity:.58}
  72%,100%{transform:translate(-50%,-50%) scale(2.8);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-period:after{animation:none;opacity:0}
}

/* Pull WHY BEHAVIORDASH up so the hero transitions directly into the story. */
.problem{
  padding-top:58px !important;
}
@media(max-width:1100px){
  .problem{padding-top:46px !important;}
}
@media(max-width:720px){
  .problem{padding-top:34px !important;}
}


/* v15 — optical hero/header cleanup after full-width review */
/* Dot: a touch higher than v14, while remaining visually on the punctuation baseline. */
.hero-period{
  transform:translateY(.025em);
}

/* The desktop header was too close to the viewport edge at common laptop widths. */
.site-header{
  max-width:1440px;
  padding-left:34px;
  padding-right:34px;
}
.nav-actions{flex:0 0 auto}
.nav-links{gap:34px}

/* Remove excess air above the hero without crowding the navigation. */
.hero{
  padding-top:58px;
}

@media(max-width:1360px){
  .site-header{padding-left:28px;padding-right:28px;gap:22px}
  .nav-links{gap:26px}
  .nav-actions .button{padding-left:18px;padding-right:18px}
  .brand{font-size:22px}
}

@media(max-width:1180px){
  .nav-links{display:none}
  .hero{padding-top:46px}
}

@media(max-width:720px){
  .site-header{padding-left:20px;padding-right:20px}
  .hero{padding-top:38px}
  .hero-period{transform:translateY(.02em)}
}


/* v16 — Private Beta panel: Dash Green treatment */
.beta-banner{
  background:#8CCB32;
  border-color:#78b724;
  box-shadow:0 22px 55px rgba(16,36,62,.10);
}
.beta-banner::before{
  background:rgba(255,255,255,.16);
}
.beta-banner .eyebrow,
.beta-banner h2,
.beta-banner p{
  color:#10243E;
}
.beta-banner .eyebrow{
  background:rgba(255,255,255,.52);
  border-color:rgba(255,255,255,.58);
}
.beta-banner .beta-form{
  background:rgba(255,255,255,.20);
  border-color:rgba(255,255,255,.42);
}
.beta-banner .beta-form input{
  background:#FFFFFF;
  color:#10243E;
}


/* v17 — Private Beta contrast + form cleanup */
.beta-banner .eyebrow{
  background:#10243E;
  border-color:#10243E;
  color:#FFFFFF;
}

/* Remove the pale overlay/highlight that was washing across the email/join area. */
.beta-banner::before{
  display:none;
}

.beta-banner .beta-form{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.beta-banner .beta-form input{
  background:#FFFFFF;
  color:#10243E;
  box-shadow:none;
}

.beta-banner .beta-form input:focus{
  box-shadow:0 0 0 3px rgba(18,61,115,.16);
}

.beta-banner .beta-form .button,
.beta-banner .beta-form button{
  box-shadow:none;
}


/* v18 — Private Beta orange accents on green panel */
.beta-banner .eyebrow{
  background:#FF7A22;
  border-color:#FF7A22;
  color:#FFFFFF;
}

.beta-banner .beta-note,
.beta-banner .form-note,
.beta-banner .no-spam,
.beta-banner small{
  color:#FF7A22;
}


/* v19 — fix actual PRIVATE BETA selector + footer alignment */

/* The label in the markup is .section-kicker.light, not .eyebrow. */
.beta-banner .section-kicker.light{
  color:#123D73 !important;
  background:transparent;
  border:0;
  font-weight:900;
  letter-spacing:.14em;
}

/* Keep the no-spam note as an intentional orange accent. */
.beta-banner small{
  color:#FF7A22 !important;
  font-weight:700;
}

/* Footer: align the four columns to one common top baseline and tighten spacing. */
footer{
  align-items:start;
  column-gap:72px;
  row-gap:28px;
  padding-top:54px;
  padding-bottom:54px;
}

.footer-brand{
  align-self:start;
}

.footer-brand .brand{
  margin:0;
}

.footer-brand p{
  margin-top:22px;
  line-height:1.55;
}

footer > div:not(.footer-brand){
  align-self:start;
  padding-top:4px;
  gap:11px;
}

footer strong{
  display:block;
  margin:0 0 8px;
  line-height:1.2;
}

footer a,
footer span{
  line-height:1.35;
}

@media(max-width:1100px){
  footer{
    column-gap:48px;
    row-gap:34px;
  }
}

@media(max-width:720px){
  footer{
    grid-template-columns:1fr;
    gap:28px;
  }
  .footer-brand{
    grid-column:auto;
  }
}

/* v20 — beta helper text blue */
.beta-banner small{
  color:#123D73 !important;
}

/* v21 — center beta helper text under CTA */
.beta-banner small{
  display:block;
  width:100%;
  text-align:center;
  margin-top:10px;
}


/* v22 — animated digital signature + audit trail showcase */
.signing-showcase{
  max-width:1304px;
  margin:34px auto 54px;
  padding:54px 52px;
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:58px;
  align-items:center;
  background:#F4F8F7;
  border:1px solid #dce7e4;
  border-radius:34px;
}
.signing-copy h2{
  margin:12px 0 18px;
  max-width:540px;
  color:#10243E;
  font-size:clamp(36px,3.4vw,58px);
  line-height:1.02;
  letter-spacing:-.045em;
}
.signing-copy>p{
  margin:0;
  max-width:550px;
  color:#53677e;
  font-size:18px;
  line-height:1.65;
}
.signing-points{display:grid;gap:16px;margin-top:30px}
.signing-point{display:flex;align-items:flex-start;gap:13px}
.signing-point-icon{
  width:34px;height:34px;flex:0 0 34px;border-radius:11px;
  display:grid;place-items:center;background:#e7f0fa;color:#123D73;font-weight:900;
}
.signing-point-icon.green{background:#edf8dd;color:#5e9e16}
.signing-point-icon.orange{background:#fff0e5;color:#FF7A22}
.signing-point strong{display:block;color:#10243E;font-size:15px;margin:1px 0 3px}
.signing-point small{display:block;color:#6b7d90;font-size:13px;line-height:1.45}

.signature-window{
  overflow:hidden;
  background:#fff;
  border:1px solid #d9e4e8;
  border-radius:25px;
  box-shadow:0 22px 55px rgba(16,36,62,.10);
}
.signature-window-bar{
  min-height:62px;padding:0 22px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid #e7edef;color:#10243E;
}
.signature-window-bar>div{display:flex;align-items:center;gap:10px}
.signature-dot{width:10px;height:10px;border-radius:50%;background:#8CCB32;box-shadow:0 0 0 5px rgba(140,203,50,.15)}
.signature-status{
  padding:7px 11px;border-radius:999px;background:#edf8dd;color:#568d17;
  font-size:11px;font-weight:800;letter-spacing:.03em;
}
.signature-meta{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:20px 22px 0}
.signature-meta>div{padding:13px 15px;border-radius:14px;background:#F4F8F7}
.signature-meta small{display:block;color:#8190a0;font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.signature-meta strong{color:#10243E;font-size:13px}

.signature-pad{
  position:relative;margin:18px 22px 16px;padding:17px 20px 12px;
  min-height:196px;border:1.5px dashed #b8c9d3;border-radius:18px;background:#fcfefd;
}
.signature-pad-label{display:block;color:#8a99a8;font-size:10px;font-weight:800;letter-spacing:.12em}
.dash-signature{display:block;width:100%;height:108px;margin:3px 0 -4px}
.dash-signature path{
  fill:none;stroke:#123D73;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.signature-window.is-signing .dash-signature path{animation:drawDashSignature 2.45s cubic-bezier(.55,.05,.25,1) forwards}
.signature-line{height:1px;background:#d6e1e5}
.signature-pad-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:9px;color:#73869a;font-size:11px}
.replay-signature{
  border:0;background:transparent;color:#123D73;font:inherit;font-weight:800;cursor:pointer;padding:5px 0;
}
.replay-signature:hover{text-decoration:underline}

.audit-trail{margin:0 22px 22px;padding:16px 17px;border-radius:17px;background:#10243E;color:#fff}
.audit-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;font-size:12px}
.audit-head span{color:#aebed0;font-size:10px}
.audit-event{
  display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:start;
  padding:10px 0;border-top:1px solid rgba(255,255,255,.09);
  opacity:.32;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease;
}
.audit-event.active{opacity:1;transform:none}
.audit-marker{width:8px;height:8px;margin-top:4px;border-radius:50%;background:#8CCB32}
.audit-event strong{display:block;font-size:11px;margin-bottom:2px}
.audit-event small{display:block;color:#9fb0c3;font-size:9px}
.audit-event time{color:#9fb0c3;font-size:9px}
.signature-event .audit-marker{background:#FF7A22}
.completed-event .audit-marker{background:#8CCB32}

@keyframes drawDashSignature{to{stroke-dashoffset:0}}

@media(max-width:1000px){
  .signing-showcase{grid-template-columns:1fr;padding:42px 36px;gap:36px}
  .signing-copy h2,.signing-copy>p{max-width:720px}
}
@media(max-width:620px){
  .signing-showcase{margin:24px 20px 38px;padding:30px 20px;border-radius:25px}
  .signature-meta{grid-template-columns:1fr}
  .signature-window-bar{padding:0 15px}
  .signature-meta{padding-left:15px;padding-right:15px}
  .signature-pad,.audit-trail{margin-left:15px;margin-right:15px}
  .signature-pad-footer{align-items:flex-start;flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .signature-window.is-signing .dash-signature path{animation:none;stroke-dashoffset:0}
  .audit-event{transition:none}
}


/* v23 — readable handwritten “Dash” signature animation */
.dash-signature path{
  fill:none;
  stroke:#123D73;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}

.signature-window.is-signing .sig-d{
  animation:writeLetter .78s ease forwards;
}
.signature-window.is-signing .sig-a{
  animation:writeLetter .46s ease .73s forwards;
}
.signature-window.is-signing .sig-s{
  animation:writeLetter .42s ease 1.13s forwards;
}
.signature-window.is-signing .sig-h{
  animation:writeLetter .58s ease 1.49s forwards;
}
.signature-window.is-signing .sig-flourish{
  animation:writeLetter .34s ease 2.02s forwards;
}

@keyframes writeLetter{
  to{stroke-dashoffset:0}
}

/* Override the old one-path animation if it is still present earlier in the stylesheet. */
.signature-window.is-signing .dash-signature path{
  animation-name:none;
}
.signature-window.is-signing .sig-d{
  animation:writeLetter .78s ease forwards;
}
.signature-window.is-signing .sig-a{
  animation:writeLetter .46s ease .73s forwards;
}
.signature-window.is-signing .sig-s{
  animation:writeLetter .42s ease 1.13s forwards;
}
.signature-window.is-signing .sig-h{
  animation:writeLetter .58s ease 1.49s forwards;
}
.signature-window.is-signing .sig-flourish{
  animation:writeLetter .34s ease 2.02s forwards;
}

@media(prefers-reduced-motion:reduce){
  .signature-window.is-signing .dash-signature path{
    animation:none !important;
    stroke-dashoffset:0;
  }
}


/* v24 — continuous cursive “Dash” signature, with reliable replay */
.dash-signature .sig-word{
  fill:none;
  stroke:#123D73;
  stroke-width:4.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:none !important;
}
.signature-window.is-signing .dash-signature .sig-word{
  animation:cursiveDashWrite 2.65s cubic-bezier(.42,0,.2,1) forwards !important;
}
@keyframes cursiveDashWrite{
  from{stroke-dashoffset:1}
  to{stroke-dashoffset:0}
}
@media(prefers-reduced-motion:reduce){
  .signature-window.is-signing .dash-signature .sig-word{
    animation:none !important;
    stroke-dashoffset:0;
  }
}


/* v25 — refined cursive Dash: clearer s + h */
.dash-signature{
  overflow:visible;
}
.dash-signature .sig-word{
  stroke-width:4.25;
}


/* v26 — legible cursive “Dash”: discrete handwritten strokes */
.dash-signature .sig-stroke{
  fill:none;
  stroke:#123D73;
  stroke-width:4.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:none !important;
}
.signature-window.is-signing .sig-d1{animation:sigWrite .34s ease forwards !important}
.signature-window.is-signing .sig-d2{animation:sigWrite .44s ease .28s forwards !important}
.signature-window.is-signing .sig-join1{animation:sigWrite .18s linear .66s forwards !important}
.signature-window.is-signing .sig-a1{animation:sigWrite .40s ease .80s forwards !important}
.signature-window.is-signing .sig-a2{animation:sigWrite .20s ease 1.14s forwards !important}
.signature-window.is-signing .sig-s{animation:sigWrite .46s ease 1.29s forwards !important}
.signature-window.is-signing .sig-h1{animation:sigWrite .38s ease 1.68s forwards !important}
.signature-window.is-signing .sig-h2{animation:sigWrite .40s ease 2.00s forwards !important}
.signature-window.is-signing .sig-exit{animation:sigWrite .25s ease 2.35s forwards !important}

@keyframes sigWrite{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  .signature-window.is-signing .dash-signature .sig-stroke{
    animation:none !important;
    stroke-dashoffset:0;
  }
}


/* v27 — clearer typographic script signature */
.dash-signature .sig-stroke{
  fill:none;
  stroke:#123D73;
  stroke-width:4.15;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:none !important;
}
.signature-window.is-signing .sig-d{animation:sigWrite .72s ease forwards !important}
.signature-window.is-signing .sig-join-da{animation:sigWrite .15s linear .67s forwards !important}
.signature-window.is-signing .sig-a{animation:sigWrite .50s ease .80s forwards !important}
.signature-window.is-signing .sig-s{animation:sigWrite .52s ease 1.24s forwards !important}
.signature-window.is-signing .sig-hstem{animation:sigWrite .42s ease 1.70s forwards !important}
.signature-window.is-signing .sig-hhump{animation:sigWrite .42s ease 2.07s forwards !important}
.signature-window.is-signing .sig-exit{animation:sigWrite .25s ease 2.44s forwards !important}
@keyframes sigWrite{to{stroke-dashoffset:0}}


/* v28 — refined capital D only */
.dash-signature .sig-d{
  stroke-width:4.2;
}


/* =========================================================
   v29 — PAGE-WIDE LAYOUT / FORMATTING POLISH
   No content or signature redesign; spacing/alignment only.
   ========================================================= */

/* One consistent page rhythm */
:root{
  --page-max: 1400px;
  --page-pad: clamp(24px, 4vw, 62px);
  --section-gap: clamp(64px, 7vw, 96px);
}

/* Keep major content blocks on a common horizontal grid */
header,
.hero,
.problem-section,
.features-section,
.signing-showcase,
.beta-banner,
footer{
  box-sizing:border-box;
}

/* Header */
header{
  max-width:var(--page-max);
  margin-inline:auto;
  padding-left:var(--page-pad);
  padding-right:var(--page-pad);
  min-height:82px;
  display:flex;
  align-items:center;
}
header .brand{
  flex:0 0 auto;
}
header nav{
  align-items:center;
}
.header-actions{
  align-items:center;
}

/* Hero: cleaner vertical centering and equal visual weight */
.hero{
  max-width:var(--page-max);
  margin-inline:auto;
  padding-left:var(--page-pad);
  padding-right:var(--page-pad);
  column-gap:clamp(40px,5vw,82px);
  align-items:center;
}
.hero-copy{
  align-self:center;
}
.hero-copy p{
  max-width:650px;
}
.hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}
.hero-visual{
  align-self:center;
  min-width:0;
}

/* Remove accidental/oversized blank space between sections */
.problem-section,
.features-section{
  margin-top:0;
  margin-bottom:0;
}

.problem-section{
  padding-top:var(--section-gap);
  padding-bottom:calc(var(--section-gap) - 12px);
}
.features-section{
  padding-top:calc(var(--section-gap) - 12px);
  padding-bottom:calc(var(--section-gap) - 10px);
}

/* Section headings consistently centered relative to their content */
.section-heading{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.section-heading p{
  margin-left:auto;
  margin-right:auto;
}

/* Why BehaviorDash cards */
.problem-grid{
  align-items:stretch;
}
.problem-card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.problem-card p{
  margin-bottom:0;
}

/* Collect / Understand / Act — make all three cards truly equal */
.feature-grid{
  align-items:stretch;
}
.feature-card{
  height:100%;
  display:flex;
  flex-direction:column;
}
.feature-card > p{
  margin-bottom:24px;
}
.feature-demo{
  margin-top:auto;
}
.feature-card h3{
  line-height:1.08;
}

/* Signature showcase: line up copy and demo cleanly */
.signing-showcase{
  width:calc(100% - (var(--page-pad) * 2));
  max-width:calc(var(--page-max) - (var(--page-pad) * 2));
  margin:calc(var(--section-gap) - 18px) auto;
  padding:clamp(38px,4vw,56px);
  gap:clamp(42px,5vw,70px);
  align-items:center;
}
.signing-copy{
  align-self:center;
}
.signing-copy .section-kicker{
  display:block;
  margin-bottom:10px;
}
.signing-copy h2{
  margin-top:0;
}
.signature-demo{
  width:100%;
  min-width:0;
}
.signature-window{
  width:100%;
}

/* Signature interior alignment */
.signature-window-bar,
.signature-meta,
.signature-pad,
.audit-trail{
  box-sizing:border-box;
}
.signature-meta > div{
  min-width:0;
}
.signature-pad-footer{
  min-height:30px;
}
.audit-event > div{
  min-width:0;
}

/* Beta banner: same width/grid as the signature panel */
.beta-banner{
  width:calc(100% - (var(--page-pad) * 2));
  max-width:calc(var(--page-max) - (var(--page-pad) * 2));
  margin:0 auto var(--section-gap);
  padding:clamp(38px,4vw,54px);
  column-gap:clamp(34px,4vw,62px);
  align-items:center;
}
.beta-banner > *{
  min-width:0;
}
.beta-banner form{
  width:100%;
}
.beta-banner input,
.beta-banner button{
  box-sizing:border-box;
  width:100%;
}
.beta-banner small{
  width:100%;
  text-align:center;
}

/* Footer — clean common top line and balanced columns */
footer{
  width:100%;
  margin:0;
  padding:54px max(var(--page-pad), calc((100vw - var(--page-max))/2 + var(--page-pad)));
  grid-template-columns:minmax(270px,1.35fr) repeat(3,minmax(130px,.7fr));
  align-items:start;
  column-gap:clamp(48px,6vw,96px);
}
.footer-brand,
footer > div:not(.footer-brand){
  padding-top:0;
  align-self:start;
}
footer strong{
  min-height:20px;
  margin-bottom:12px;
}
footer > div:not(.footer-brand){
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Desktop safeguard: eliminate horizontal overflow from wide cards */
body{
  overflow-x:hidden;
}
img,svg{
  max-width:100%;
}

/* Tablet */
@media(max-width:1100px){
  header{
    padding-left:32px;
    padding-right:32px;
  }
  .hero{
    padding-left:32px;
    padding-right:32px;
  }
  .signing-showcase,
  .beta-banner{
    width:calc(100% - 64px);
  }
  footer{
    padding-left:32px;
    padding-right:32px;
    grid-template-columns:1.25fr repeat(3,.75fr);
    column-gap:36px;
  }
}

/* Mobile */
@media(max-width:760px){
  :root{
    --section-gap:64px;
  }

  header,
  .hero{
    padding-left:20px;
    padding-right:20px;
  }

  .hero{
    row-gap:38px;
  }

  .hero-actions > *{
    flex:1 1 auto;
  }

  .problem-section,
  .features-section{
    padding-left:20px;
    padding-right:20px;
  }

  .signing-showcase,
  .beta-banner{
    width:calc(100% - 40px);
    margin-left:auto;
    margin-right:auto;
  }

  .signing-showcase{
    padding:30px 20px;
  }

  .beta-banner{
    padding:32px 22px;
  }

  footer{
    padding:44px 24px;
    grid-template-columns:1fr 1fr;
    gap:34px 28px;
  }
  .footer-brand{
    grid-column:1 / -1;
  }
}

@media(max-width:480px){
  footer{
    grid-template-columns:1fr;
  }
  .footer-brand{
    grid-column:auto;
  }
}


/* =========================================================
   v30 — top-bar grid alignment + pen Dash placement
   ========================================================= */

/* Use the same actual content width for header and page sections. */
.site-header,
header{
  width:100%;
  max-width:1400px;
  margin-left:auto;
  margin-right:auto;
  padding-left:clamp(24px,4vw,62px) !important;
  padding-right:clamp(24px,4vw,62px) !important;
  box-sizing:border-box;
}

/* Keep nav contents from visually drifting wider than hero content. */
.site-header .brand,
header .brand{
  margin-left:0 !important;
}
.site-header .nav-actions,
header .nav-actions,
.site-header .header-actions,
header .header-actions{
  margin-right:0 !important;
}

/* Pen Dash sits with the explanatory copy, outside the signature card. */
.signing-copy{
  position:relative;
  padding-top:8px;
}

.signing-copy-mascot-wrap{
  width:min(270px,72%);
  margin:0 0 22px 0;
  position:relative;
  overflow:hidden;
}

.signing-copy-mascot{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
  transform:translateX(-2px);
}

/* Soft visual grounding without adding another card. */
.signing-copy-mascot-wrap::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:2px;
  height:12px;
  border-radius:50%;
  background:rgba(16,36,62,.08);
  filter:blur(8px);
  z-index:-1;
}

/* Keep the signature demo itself clean and untouched. */
.signature-demo,
.signature-window,
.signature-pad{
  position:relative;
  z-index:1;
}

@media(max-width:1100px){
  .site-header,
  header{
    padding-left:32px !important;
    padding-right:32px !important;
  }

  .signing-copy-mascot-wrap{
    width:230px;
  }
}

@media(max-width:760px){
  .site-header,
  header{
    padding-left:20px !important;
    padding-right:20px !important;
  }

  .signing-copy-mascot-wrap{
    width:190px;
    margin-bottom:18px;
  }
}


/* =========================================================
   v31 — move pen Dash to lower-right signature-section edge
   ========================================================= */

/* Neutralize prior copy-column mascot rules. */
.signing-copy-mascot-wrap,
.signing-copy-mascot{
  display:none !important;
}

.signing-showcase{
  position:relative;
  overflow:visible;
  padding-bottom:70px;
}

/* Dash is decorative, outside the functional signature UI. */
.signing-edge-mascot{
  position:absolute;
  right:34px;
  bottom:-8px;
  width:190px;
  z-index:3;
  pointer-events:none;
}

.signing-edge-mascot img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  mix-blend-mode:multiply;
}

/* Subtle grounding so he doesn't look like a floating cutout. */
.signing-edge-mascot::after{
  content:"";
  position:absolute;
  left:20%;
  right:16%;
  bottom:7px;
  height:12px;
  border-radius:50%;
  background:rgba(16,36,62,.10);
  filter:blur(8px);
  z-index:-1;
}

/* Reserve breathing room so the mascot never collides with the audit card. */
.signature-demo{
  padding-bottom:10px;
}

@media(max-width:1100px){
  .signing-showcase{
    padding-bottom:56px;
  }
  .signing-edge-mascot{
    width:160px;
    right:24px;
    bottom:-6px;
  }
}

@media(max-width:760px){
  .signing-showcase{
    padding-bottom:34px;
  }
  .signing-edge-mascot{
    position:relative;
    right:auto;
    bottom:auto;
    width:150px;
    margin:12px 0 -18px auto;
  }
}

/* v32 — true transparent pen-Dash asset */
.signing-edge-mascot img{
  mix-blend-mode:normal !important;
  background:transparent !important;
}


/* =========================================================
   v33 — signature section cleanup after mascot removal
   ========================================================= */

/* Remove all prior mascot layout reservations. */
.signing-edge-mascot,
.signing-copy-mascot-wrap,
.signing-copy-mascot{
  display:none !important;
}

/* Restore balanced section padding now that no mascot overlaps the edge. */
.signing-showcase{
  padding-top:clamp(40px,4vw,56px);
  padding-right:clamp(40px,4vw,56px);
  padding-bottom:clamp(40px,4vw,56px);
  padding-left:clamp(40px,4vw,56px);
  gap:clamp(44px,5vw,68px);
  align-items:center;
}

/* Left copy column */
.signing-copy{
  padding-top:0;
  align-self:center;
}
.signing-copy .section-kicker{
  margin-bottom:12px;
}
.signing-copy h2{
  margin-top:0;
  margin-bottom:18px;
}
.signing-copy > p{
  margin-top:0;
  margin-bottom:0;
}
.signing-points{
  margin-top:28px;
  gap:15px;
}
.signing-point{
  margin:0;
}

/* Right demo column */
.signature-demo{
  width:100%;
  min-width:0;
  padding-bottom:0;
}
.signature-window{
  width:100%;
  margin:0;
}

/* Interior vertical rhythm */
.signature-window-bar{
  min-height:60px;
}
.signature-meta{
  padding-top:18px;
}
.signature-pad{
  margin-top:16px;
  margin-bottom:14px;
}
.audit-trail{
  margin-top:0;
  margin-bottom:20px;
}

/* Keep audit rows visually even */
.audit-event{
  min-height:54px;
  align-items:center;
}
.audit-event time{
  align-self:center;
}

/* Avoid accidental large bottom gaps before next section */
.signing-showcase + .beta-banner{
  margin-top:0;
}

/* Tablet/mobile cleanup */
@media(max-width:1000px){
  .signing-showcase{
    gap:34px;
    padding:38px 34px;
  }
  .signing-copy{
    max-width:720px;
  }
}

@media(max-width:620px){
  .signing-showcase{
    width:calc(100% - 40px);
    padding:28px 20px;
    gap:28px;
  }
  .signature-meta{
    gap:10px;
  }
  .signature-pad{
    margin-top:14px;
  }
  .audit-trail{
    margin-bottom:0;
  }
}