
:root{
  --ink:#131713;--muted:#626a63;--paper:#f5f5f0;--card:#fff;--line:#d8ddd5;
  --signal:#dfff45;--signal2:#c9f42f;--dark:#182018;--dark2:#222b22;
  --soft:#ecefe8;--radius:24px;--max:1200px;--shadow:0 18px 55px rgba(19,23,19,.09)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}img{max-width:100%}.wrap{width:min(calc(100% - 32px),var(--max));margin:auto}
.top{background:var(--dark);color:#dfe5df;font-size:13px;padding:8px 0}.top .wrap{display:flex;justify-content:space-between;gap:18px}
header{position:sticky;top:0;z-index:50;background:rgba(245,245,240,.92);backdrop-filter:blur(14px);
border-bottom:1px solid rgba(19,23,19,.07)}.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-weight:950;font-size:25px;letter-spacing:-1.45px}.logo span{background:var(--signal);padding:2px 7px;border-radius:7px;margin-left:2px}
nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:850}.navbtn,.btn{display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--ink);border-radius:999px;padding:13px 20px;font-weight:900;transition:.18s ease}
.navbtn,.btn.primary{background:var(--signal);box-shadow:3px 3px 0 var(--ink)}.btn.ghost{background:transparent}.btn.dark{background:var(--dark);color:#fff}
.btn:hover,.navbtn:hover{transform:translateY(-2px)}.hero{padding:72px 0 44px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:46px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.09em;font-size:12px;font-weight:950}
.status{width:9px;height:9px;border-radius:50%;background:#69af37;box-shadow:0 0 0 5px #dcefd0}
h1{font-size:clamp(50px,7.3vw,92px);line-height:.93;letter-spacing:-.068em;margin:20px 0 22px;max-width:940px}
h1 mark{background:var(--signal);color:inherit;padding:0 .08em;border-radius:.12em}
.lead{font-size:clamp(18px,2vw,22px);color:#4d554e;max-width:760px}.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}
.hero-visual{background:var(--dark);border-radius:34px;min-height:475px;position:relative;overflow:hidden;color:#fff;padding:30px;box-shadow:var(--shadow)}
.container-art{position:absolute;inset:50px -45px auto auto;width:92%;height:255px;transform:rotate(-5deg)}
.container-art .box{position:absolute;inset:0;border:3px solid #7b887b;border-radius:16px;background:linear-gradient(135deg,#242e24,#1b221b)}
.container-art .box:before{content:"";position:absolute;inset:14px;opacity:.55;background:repeating-linear-gradient(90deg,transparent 0 31px,#596659 31px 34px)}
.container-art .door{position:absolute;right:16px;top:16px;bottom:16px;width:32%;border:2px solid #8c988c;border-radius:7px}
.hero-visual .offer{position:relative;z-index:3;background:var(--signal);color:var(--ink);width:max-content;padding:9px 13px;border-radius:999px;font-weight:950;font-size:13px}
.hero-visual .visual-copy{position:absolute;z-index:3;left:30px;right:30px;bottom:28px}.hero-visual h2{font-size:42px;line-height:.98;letter-spacing:-.045em;margin:0 0 8px}
.hero-visual p{margin:0;color:#c6d0c6;max-width:480px}.intentbar{padding:16px 0 70px}.intent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.intent-grid a{background:#fff;border:1px solid var(--line);padding:19px 20px;border-radius:18px;font-weight:900;display:flex;align-items:center;justify-content:space-between}
.intent-grid a:hover{border-color:#8f998f}.section{padding:76px 0}.section.dark{background:var(--dark);color:white}.section h2{font-size:clamp(36px,5.1vw,60px);line-height:.98;letter-spacing:-.052em;margin:0 0 18px}
.sub{font-size:18px;color:var(--muted);max-width:760px}.dark .sub{color:#b8c1b8}.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.route{border:1px solid var(--line);border-radius:30px;background:#fff;padding:34px;min-height:320px}.route.inverse{background:var(--dark2);color:#fff;border-color:#354035}
.route h3{font-size:42px;line-height:1;letter-spacing:-.045em;margin:14px 0}.route p{color:var(--muted)}.route.inverse p{color:#c6cec6}
.route ul{padding-left:20px;color:var(--muted)}.route.inverse ul{color:#c6cec6}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:28px}
.tile{background:#fff;border:1px solid var(--line);border-radius:24px;padding:24px;display:flex;flex-direction:column;min-height:285px;transition:.18s}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.tile.signal{background:var(--signal);border-color:var(--ink)}
.tag{font-size:11px;font-weight:950;letter-spacing:.04em;text-transform:uppercase;background:var(--soft);width:max-content;padding:7px 10px;border-radius:999px}
.signal .tag{background:var(--ink);color:#fff}.tile h3{font-size:25px;line-height:1.08;letter-spacing:-.03em;margin:12px 0}.tile p{color:var(--muted)}
.tile.signal p{color:#384038}.price{font-size:30px;font-weight:950;letter-spacing:-.035em;margin-top:auto}.micro{font-size:12px;color:var(--muted)}
.signal .micro{color:#3f493e}.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:26px}.proof div{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px}
.proof strong{display:block;font-size:20px;margin-bottom:5px}.funnel-wrap{background:#fff;border:1px solid var(--line);border-radius:32px;overflow:hidden;display:grid;grid-template-columns:.78fr 1.22fr}
.funnel-copy{padding:38px}.funnel-copy h2{font-size:48px}.tally-shell{background:#edf0e9;padding:18px;min-height:390px}.tally-shell iframe{width:100%;border:0;background:white;border-radius:18px}
.lp{padding:42px 0 58px}.crumb{padding-top:22px;color:var(--muted);font-size:13px}.lp-grid{display:grid;grid-template-columns:1fr .72fr;gap:36px;align-items:start}
.pricebox{background:var(--signal);border:1px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:28px;padding:28px}.pricebox .price{font-size:45px;line-height:1;margin:7px 0}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}.fact{background:rgba(255,255,255,.5);border-radius:13px;padding:12px;font-weight:780;font-size:14px}
.steps{counter-reset:s}.steps .step{position:relative;padding-left:54px;margin:24px 0}.steps .step:before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:50%;
display:grid;place-items:center;background:var(--signal);border:1px solid var(--ink);font-weight:950}.faq{max-width:860px}.faq details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:10px 0}
.faq summary{font-weight:900;cursor:pointer}.notice{background:#fff5cc;border:1px solid #e8d074;border-radius:14px;padding:14px 16px;margin:18px 0}
.compare{overflow:auto}.compare table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}.compare th,.compare td{padding:15px 17px;border-bottom:1px solid var(--line);text-align:left}
.compare th{background:var(--soft);font-size:13px}.mobile-cta{display:none}
footer{background:#101510;color:#c8d0c8;padding:50px 0 28px}.footgrid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:32px}.footgrid strong{color:#fff}.flinks{display:grid;gap:8px;font-size:14px}
.legal{border-top:1px solid #2a322a;margin-top:38px;padding-top:18px;font-size:12px;color:#8d978d}
@media(max-width:900px){nav a:not(.navbtn){display:none}.hero-grid,.lp-grid,.two,.funnel-wrap,.footgrid{grid-template-columns:1fr}.grid3{grid-template-columns:1fr 1fr}
.intent-grid,.proof{grid-template-columns:repeat(2,1fr)}.hero-visual{min-height:360px}.container-art{top:35px}.hero-visual .visual-copy{bottom:24px}.mobile-cta{display:flex;position:fixed;z-index:60;left:10px;right:10px;bottom:10px;background:var(--dark);
border-radius:999px;padding:8px;box-shadow:0 16px 40px rgba(0,0,0,.24);gap:8px}.mobile-cta a{flex:1}.mobile-cta .call{color:#fff;border:1px solid #596359;border-radius:999px;padding:12px;text-align:center;font-weight:900}}
@media(max-width:580px){.wrap{width:min(calc(100% - 22px),var(--max))}.grid3,.intent-grid,.proof,.facts{grid-template-columns:1fr}h1{font-size:52px}.hero{padding-top:48px}
.route h3{font-size:34px}.funnel-copy{padding:26px}.top .wrap span:last-child{display:none}.hero-visual h2{font-size:35px}}

/* FIX: white cards inside dark sections need dark typography */
.section.dark .route:not(.inverse),
.section.dark .route:not(.inverse) h1,
.section.dark .route:not(.inverse) h2,
.section.dark .route:not(.inverse) h3,
.section.dark .route:not(.inverse) h4,
.section.dark .route:not(.inverse) strong,
.section.dark .route:not(.inverse) .step {
  color: var(--ink);
}
.section.dark .route:not(.inverse) p,
.section.dark .route:not(.inverse) li {
  color: var(--muted);
}

/* Tally: more breathing room around the embedded form */
.tally-shell {
  padding: 32px 34px;
}
.tally-shell iframe {
  display: block;
  width: 100%;
  min-height: 360px;
}
@media (max-width: 580px) {
  .tally-shell { padding: 22px 18px; }
}


/* FIX: product tiles inside dark sections must not inherit white text */
.section.dark .tile:not(.signal),
.section.dark .tile:not(.signal) h1,
.section.dark .tile:not(.signal) h2,
.section.dark .tile:not(.signal) h3,
.section.dark .tile:not(.signal) h4,
.section.dark .tile:not(.signal) strong,
.section.dark .tile:not(.signal) .price,
.section.dark .tile:not(.signal) .micro {
  color: var(--ink);
}

.section.dark .tile:not(.signal) p,
.section.dark .tile:not(.signal) li {
  color: var(--muted);
}

.section.dark .tile:not(.signal) .tag {
  background: var(--soft);
  color: var(--ink);
}


/* GLOBAL SIGNAL RULE:
   On all yellow/green signal backgrounds, typography should always be dark. */
.logo span,
.btn.primary,
.navbtn,
.hero-visual .offer,
.pricebox,
.tile.signal {
  color: var(--ink);
}

.logo span *,
.btn.primary *,
.navbtn *,
.hero-visual .offer *,
.pricebox *,
.tile.signal * {
  color: inherit;
}

/* Keep text dark on green cards/boxes/buttons */
.tile.signal h1,
.tile.signal h2,
.tile.signal h3,
.tile.signal h4,
.tile.signal strong,
.tile.signal .price,
.tile.signal .micro,
.tile.signal p,
.tile.signal li,
.tile.signal .tag,
.pricebox h1,
.pricebox h2,
.pricebox h3,
.pricebox h4,
.pricebox strong,
.pricebox .price,
.pricebox p,
.pricebox .fact,
.hero-visual .offer,
.btn.primary,
.navbtn {
  color: var(--ink);
}

/* Tags on signal cards should also be dark-on-light, not white-on-dark */
.tile.signal .tag {
  background: rgba(255,255,255,.35);
  color: var(--ink);
}

/* Footer/logo fix: the green highlighted part must also use dark text */
footer .logo span,
footer .logo span * {
  color: var(--ink) !important;
}

/* If any generic element ends up on a signal background, keep it dark */
[style*="#dfff45"],
[style*="#dffe49"] {
  color: var(--ink);
}


/* HERO FIX:
   Prevent the green highlight behind "Container." from colliding with the lead text below. */
h1{
  line-height: 0.98;
  margin: 20px 0 30px;
}
h1 mark{
  display:inline;
  padding: .02em .10em .04em;
  border-radius: .14em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* A bit more breathing room below the homepage hero headline */
.hero .lead{
  margin-top: 10px;
}
