/* Ironclad Formulas — homepage scaffold (layout modeled on supliful.com)
   Loaded after site.css on index.html only. Brand tokens come from site.css. */
.home{--r-card:16px;--card:#F1F3F6;--glow-1:#E4E9EF;--glow-2:#D5DDE6;background:#fff}
.home .btn{border-radius:999px}
.home .btn-dark{background:var(--steel-deep);color:var(--paper)}
.home .btn-dark:hover{background:#223347}
.h-section{padding:56px 0}
.tinted{background:
  radial-gradient(ellipse 60% 80% at 10% 0%,var(--glow-1),transparent 70%),
  radial-gradient(ellipse 50% 70% at 95% 100%,var(--glow-2),transparent 70%),var(--tint)}
.h-head{text-align:center;max-width:44rem;margin:0 auto 32px}
.h-head .lede{margin-inline:auto}
.kicker{display:block;font-size:.875rem;font-weight:600;color:var(--steel-mid);margin-bottom:6px}
.kicker-line{margin-top:8px;font-size:.9375rem;color:var(--steel-mid)}
.h-cta{display:flex;flex-direction:column;align-items:center;margin-top:28px}
.cta-note{margin-top:10px;font-size:.8125rem;color:var(--ink-2)}
.left-h{max-width:36rem;margin-bottom:32px}

/* 01 · floating pill nav */
.pill-nav{position:sticky;top:0;z-index:30;padding:10px var(--gutter) 0;pointer-events:none}
.pill-nav-inner{pointer-events:auto;max-width:1040px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 6px 6px 18px;border-radius:999px;background:rgba(20,32,45,.94);color:var(--paper);box-shadow:0 10px 30px -12px rgba(20,32,45,.45);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pill-nav .brand img{height:36px;width:auto}
.pill-nav .nav a{color:var(--on-dark-2);font-size:.875rem;font-weight:600}
.pill-actions{display:flex;align-items:center;gap:6px}
.pill-call{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;justify-content:center;padding:0 10px;border-radius:999px;color:var(--paper);text-decoration:none;font-size:.875rem;font-weight:600}
.pill-call svg{width:18px;height:18px}
.pill-call-text{display:none}
.pill-actions .btn{min-height:44px;padding:10px 18px;font-size:.875rem}

/* 02 · hero */
.h-hero{margin-top:-66px;padding:112px 0 40px;text-align:center;background:
  radial-gradient(ellipse 60% 70% at 15% 10%,var(--glow-2),transparent 70%),
  radial-gradient(ellipse 55% 60% at 90% 20%,var(--glow-1),transparent 70%),
  linear-gradient(#F4F6F9,#fff)}
.h-hero-copy{max-width:60rem;display:flex;flex-direction:column;align-items:center}
.h-hero h1{font-size:clamp(2.25rem,1.1rem + 4.2vw,4rem);line-height:1.08;letter-spacing:-.03em}
.h-hero .lede{margin:18px auto 26px;max-width:38rem}
.proof-row{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:.875rem}
.avatars{display:flex}
.avatars img{width:32px;height:32px;border-radius:50%;border:2px solid #fff;margin-left:-9px;object-fit:cover;background:var(--tint);box-shadow:0 1px 3px rgba(20,32,45,.18)}
.avatars img:first-child{margin-left:0}
.h-hero .marquee{margin-top:40px}
.h-hero .marquee-set li{border-radius:var(--r-card)}
.badge-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 48px;margin-top:40px}
.badge-row{align-items:center}
.badge-svg{height:64px;width:auto;color:var(--steel-deep);--badge-bg:#fff}
.badge-seal{height:84px}

/* 03 · stat cards */
.stat-cards{display:grid;gap:16px}
.stat-card{background:var(--card);border-radius:var(--r-card);padding:28px 20px;text-align:center}
.stat-card b{display:block;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.stat-card span{display:block;margin:8px auto 0;max-width:22rem;font-size:.9375rem;color:var(--ink-2)}

/* 04/06 · split with media */
.split2{display:grid;gap:40px;align-items:center}
.split2-media{position:relative}
.split2-copy h2{margin-bottom:14px}
.split2-copy .lede{margin:0 0 24px}
.lead-strong{font-weight:600;margin:0 0 20px}
.checks{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:18px}
.checks.tight{gap:12px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start}
.checks li > svg{width:22px;height:22px;padding:5px;border-radius:50%;background:var(--steel-deep);color:var(--paper);margin-top:1px}
.checks b{display:block;font-weight:600}
.checks span{display:block;color:var(--ink-2);font-size:.9375rem;margin-top:2px}
.checks a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule-strong);display:inline-block;padding:12px 0;margin:-12px 0}
.device{position:relative;width:min(300px,78%);margin:0 auto;aspect-ratio:9/16;border-radius:36px;overflow:hidden;background:#0d1620;border:8px solid var(--steel-deep);box-shadow:0 30px 60px -24px rgba(20,32,45,.45)}
.device video{width:100%;height:100%;object-fit:cover}
.device .tour-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(to top,rgba(10,16,23,.6),rgba(10,16,23,.05));border:0}
.device .tour-play span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:rgba(249,250,252,.95);color:var(--steel-deep);font-weight:600;font-size:.875rem}
.device .tour-play svg{width:16px;height:16px}
.float-card{position:absolute;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 16px 32px -16px rgba(20,32,45,.35);font-size:.75rem;color:var(--ink-2);line-height:1.3}
.float-card svg{width:22px;height:22px;color:var(--steel-mid);flex:none}
.float-card b{display:block;font-size:1.0625rem;color:var(--steel-deep);font-weight:600}
.fc-1{left:0;top:18%}
.fc-2{right:0;top:8%}
.fc-3{right:2%;bottom:14%}
.photo-frame{border-radius:var(--r-card);overflow:hidden;aspect-ratio:5/4;background:#0d1620}
.photo-frame img{width:100%;height:100%;object-fit:cover}
.photo-badge{position:absolute;left:-8px;bottom:14%;padding:10px 12px;background:#fff;border-radius:10px;box-shadow:0 12px 24px -12px rgba(20,32,45,.4);color:var(--steel-deep);--badge-bg:#fff}
.photo-badge svg{display:block;height:44px;width:auto}
@media (min-width:960px){.photo-badge{left:-24px}.photo-badge svg{height:54px}}

/* 05 · 3 steps */
.steps3{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.s3{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-card);overflow:hidden}
.s3-img{aspect-ratio:16/11;overflow:hidden;background:#0d1620}
.s3-img img{width:100%;height:100%;object-fit:cover}
.s3-body{padding:28px 24px 30px;display:grid;gap:8px}
.s3-num{display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:var(--steel-deep);color:var(--paper);font-weight:600;font-size:.875rem;margin-bottom:6px}
.s3 h3{font-size:1.3125rem}
.s3 p{color:var(--ink-2);font-size:.9375rem}



/* 10 · comparison */
#compare h2 em{font-style:normal;color:var(--steel-mid)}
.compare2{max-width:60rem;margin:0 auto}
.compare2 .cmp-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule)}
.compare2 .cmp-row > [role=rowheader]{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:14px 12px 4px;font-size:.875rem;font-weight:600}
.compare2 .cmp-row > [role=rowheader] svg{width:18px;height:18px;color:var(--steel-mid)}
.compare2 .cmp-row > [role=cell]{padding:6px 12px 14px 34px;font-size:.875rem;color:var(--ink-2);position:relative}
.compare2 .cmp-row > .cmp-us{background:#E9EDF2;color:var(--steel-deep);font-weight:600}
.compare2 .cmp-row:not(.cmp-head) > [role=cell]::before{content:"";position:absolute;left:12px;top:9px;width:14px;height:14px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.compare2 .cmp-row > [role=cell]:not(.cmp-us){--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.compare2 .cmp-row > .cmp-us{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.compare2 .cmp-head > span{display:flex;align-items:center;min-height:56px;padding:12px;font-size:.9375rem;font-weight:600}
.compare2 .cmp-head > span:first-child{display:none}
.compare2 .cmp-head > .cmp-us{border-radius:12px 12px 0 0}
.compare2 .cmp-head img{height:26px;width:auto}
.compare2 .cmp-row:last-child > .cmp-us{border-radius:0 0 12px 12px}

/* 11 · four features */
.features4{display:grid;gap:28px}
.f4 h3{font-size:1.1875rem;margin:14px 0 6px}
.f4 p{color:var(--ink-2);font-size:.9375rem}
.f4-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(20,32,45,.08)}
.f4-ico svg{width:22px;height:22px;color:var(--steel-deep)}

/* 12b · scale card */
.scale2{display:grid;gap:24px;background:var(--card);border-radius:24px;padding:28px 24px}
.scale2-copy h2{margin-bottom:12px}
.scale2-copy > p{color:var(--ink-2);margin-bottom:20px}
.scale2-photo{border-radius:var(--r-card);overflow:hidden;aspect-ratio:1;background:#0d1620}
.scale2-photo img{width:100%;height:100%;object-fit:cover}

/* 13 · quote section keeps its dark treatment from site.css */
.home #quote .section-head .eyebrow::before{content:none}

/* 14 · launch band */
.launch-band{position:relative;overflow:hidden;text-align:center;color:var(--steel-deep);background:
  linear-gradient(120deg,var(--steel-cool),#C9D2DC 60%,var(--steel-cool))}
.launch-band::before,.launch-band::after{content:"";position:absolute;width:190px;height:130px;background:radial-gradient(circle,rgba(249,250,252,.75) 1.5px,transparent 2px) 0 0/19px 19px;pointer-events:none}
.launch-band::before{left:6%;top:16px}
.launch-band::after{right:6%;bottom:16px}
.launch-band .wrap{position:relative;padding-block:56px;display:flex;flex-direction:column;align-items:center}
.launch-band h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem)}
.launch-band p{margin:10px 0 24px;max-width:30rem;color:var(--steel-deep)}

/* 15 · FAQ */
.faq2{max-width:none;border-top:0;display:grid;gap:0 40px}
.faq2 > div{border-top:1px solid var(--rule-strong)}
.faq2 > div + div{border-top:0}
.more-q{text-align:center;margin-top:40px}
.more-q h3{margin-bottom:6px}
.more-q p{color:var(--ink-2);font-size:.9375rem}
.more-q a{font-weight:600;text-underline-offset:3px}

/* 16 · footer */
.h-footer .hf-top{display:grid;gap:16px;margin-bottom:28px}
.h-footer .hf-top p{margin-top:12px;color:var(--on-dark-2);max-width:28rem}
.hf-social{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.h-footer .trust-bar{list-style:none;margin:0 0 36px;padding:14px 18px;display:flex;flex-wrap:wrap;gap:10px 28px;border-radius:12px;background:rgba(249,250,252,.05);border:1px solid rgba(153,166,180,.2);color:var(--paper);font-size:.8125rem}
.h-footer .trust-bar li{display:flex;align-items:center;gap:8px}
.h-footer .trust-bar svg{width:16px;height:16px;color:var(--steel-cool)}

/* Responsive */
@media (min-width:600px){
  .stat-cards{grid-template-columns:repeat(3,1fr)}
  .steps3{grid-template-columns:repeat(3,1fr)}
  .features4{grid-template-columns:repeat(2,1fr)}
  .compare2 .cmp-row{grid-template-columns:.75fr 1fr 1fr}
  .compare2 .cmp-row > [role=rowheader]{grid-column:auto;padding:16px 12px}
  .compare2 .cmp-row > [role=cell]{padding:16px 16px 16px 40px;display:flex;align-items:center}
  .compare2 .cmp-row:not(.cmp-head) > [role=cell]::before{left:16px;top:50%;margin-top:-7px}
  .compare2 .cmp-head > span:first-child{display:flex}
  .compare2 .cmp-head > span{padding:12px 16px}
  .pill-call-text:not(.ph){display:inline}
  .faq2{grid-template-columns:1fr 1fr}
  .faq2 > div + div{border-top:1px solid var(--rule-strong)}
}
@media (min-width:960px){
  .h-section{padding:88px 0}
  .h-hero{padding:140px 0 56px}
  .split2{grid-template-columns:1fr 1fr;gap:72px}
  .split2.photo .split2-media{padding-left:12px}
  .features4{grid-template-columns:repeat(4,1fr)}
  .scale2{grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:40px}
  .hf-top{grid-template-columns:1fr auto;align-items:start}
}
@media (max-width:959px){.pill-nav .nav{display:none}}

/* The pill nav already carries the CTA on every screen size */
.home .sticky-cta{display:none}

/* Hero carousel: 10% smaller than the base marquee */
.h-hero .marquee{--card:151px;--gap:11px}
.proof-row .avatars{margin-right:2px}
@media (min-width:600px){
  .h-hero .marquee{--card:198px;--gap:14px}
  .badge-svg{height:84px}.badge-seal{height:112px}
}
@media (min-width:960px){
  .h-hero .marquee{--card:245px}
  .pill-nav .brand img{height:44px}
}

/* Footer: larger logo + social icons */
.h-footer .hf-top .brand img{height:48px;width:auto}
.h-footer .hf-social a{display:grid;place-items:center;width:44px;height:44px;min-width:44px;border-radius:50%;border:1px solid rgba(153,166,180,.35);color:var(--paper)}
.h-footer .hf-social a:hover{border-color:var(--paper);background:rgba(249,250,252,.06);text-decoration:none}
.h-footer .hf-social svg{width:20px;height:20px}
@media (min-width:960px){.h-footer .hf-top .brand img{height:56px}}

/* ---------- Spacing pass ---------- */
/* Two plain (untinted) sections in a row: don't stack both paddings */
.h-section:not(.tinted) + .h-section:not(.tinted){padding-top:16px}
@media (min-width:960px){.h-section:not(.tinted) + .h-section:not(.tinted){padding-top:32px}}
/* Badges: clear breathing room under the cards */
.badge-row{margin-top:48px}
/* Comparison row labels: body font, not the old condensed label style */
.compare2 .cmp-row > [role=rowheader]{font:600 .875rem/1.35 var(--font-body);letter-spacing:0;text-transform:none;color:var(--steel-deep)}
/* Consistent heading → content rhythm */
.h-head{margin-bottom:40px}
.h-head h2 + .lede{margin-top:14px}
.split2-copy .checks{margin-bottom:32px}
.stat-card{padding:32px 24px}
.stat-card span{margin-top:10px;line-height:1.55}
.f4 p{line-height:1.55}
.more-q{margin-top:48px}
.device .tour-play span{white-space:nowrap}
@media (max-width:599px){
  .device .tour-play span{font-size:.8125rem;padding:9px 14px}
  .launch-band::before,.launch-band::after{width:110px;height:70px;opacity:.6}
  .launch-band::before{left:8px;top:8px}
  .launch-band::after{right:8px;bottom:8px}
  .launch-band .wrap{padding-block:64px}
}