/* ImpulseShield — marketing pages (Family Mode + Pro).
   Chrome + primitives come from site.css (linked first). This owns the hero,
   feature lists, the signup/pricing cards, and the trust rows shared by the two
   waitlist/upgrade pages. */

/* ================================ hero =============================== */
.mk-hero{position:relative;text-align:center;padding:clamp(28px,5vw,56px) 0 clamp(20px,3vw,34px);overflow:hidden}
.mk-hero::before{content:"";position:absolute;inset:-160px 0 auto;height:540px;z-index:-1;
  background:radial-gradient(780px 360px at 70% 6%,rgba(21,168,107,.16),transparent 60%),
             radial-gradient(660px 380px at 14% 0%,rgba(14,124,123,.14),transparent 62%)}
.mk-hero .badge{margin-bottom:20px}
.mk-hero h1{font-size:clamp(31px,6vw,54px);line-height:1.06;letter-spacing:-.03em;
  margin:0 auto 16px;max-width:17ch}
.mk-hero .lead{max-width:600px;margin:0 auto}

/* ============================ split layout =========================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.5vw,44px);align-items:stretch;
  margin:clamp(22px,4vw,44px) 0 clamp(40px,6vw,72px)}
@media(max-width:860px){.split{grid-template-columns:1fr}}

/* left column: what's coming / what you get */
.pitch{display:flex;flex-direction:column;justify-content:center;gap:18px}
.pitch h2{font-size:clamp(21px,2.8vw,28px);letter-spacing:-.02em}
.feats{list-style:none;display:flex;flex-direction:column;gap:14px;margin:0;padding:0}
.feats li{display:flex;align-items:flex-start;gap:14px;font-size:clamp(15px,1.8vw,16.5px);
  color:var(--ink-soft);line-height:1.5}
.feats li .fi{flex:none;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(145deg,rgba(18,161,159,.16),rgba(14,124,123,.1));color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center}
.feats li .fi svg{width:19px;height:19px}
.feats li b{color:var(--ink);font-weight:600}

/* right column: the anchor card (signup or pricing) */
.anchor-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,40px);box-shadow:var(--shadow);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.anchor-card::before{content:"";position:absolute;right:-70px;top:-70px;width:220px;height:220px;
  border-radius:50%;background:radial-gradient(circle,rgba(21,168,107,.16),transparent 65%);pointer-events:none}
.anchor-card h2{font-size:clamp(20px,2.6vw,26px);letter-spacing:-.02em;margin-bottom:8px}
.anchor-card p.intro{color:var(--ink-soft);font-size:15.5px;margin-bottom:22px}

/* signup form (family) */
.notify{display:flex;flex-direction:column;gap:12px}
.notify input[type=email]{width:100%;border:1px solid var(--line);border-radius:13px;padding:15px 16px;
  font-size:16px;font-family:inherit;color:var(--ink);background:var(--bg);
  transition:border-color .15s ease,box-shadow .15s ease}
.notify input[type=email]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,124,123,.14)}
.notify .cta{width:100%}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.notifymsg{margin-top:14px;font-weight:600;font-size:15px;min-height:1.2em}
.notifyfine{margin-top:16px;font-size:12.5px;color:var(--ink-soft)}
.notifyfine a{color:var(--brand);font-weight:600}

/* ============================ pricing card =========================== */
.price-card{text-align:left}
.price-tag{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.price-tag .amount{font-size:clamp(38px,6vw,52px);font-weight:800;letter-spacing:-.03em;
  color:var(--brand-deep);line-height:1}
.price-tag .once{font-size:15px;font-weight:600;color:var(--ink-soft)}
/* Localized "one-time purchase" focal used when we don't show a USD figure. */
.price-tag .amount-soft{font-size:clamp(24px,3.4vw,32px);font-weight:800;letter-spacing:-.02em;
  color:var(--brand-deep);line-height:1.1}
.price-sub{color:var(--ink-soft);font-size:15px;margin-bottom:22px}
.price-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0 0 24px;padding:0}
.price-list li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--ink)}
.price-list li svg{flex:none;width:20px;height:20px;color:var(--accent);margin-top:1px}
.price-list li b{font-weight:600}
.price-card .cta{width:100%}
.price-note{margin-top:16px;font-size:13px;color:var(--ink-faint);text-align:center}

/* ============================ trust strip ============================ */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;
  margin:clamp(8px,2vw,20px) 0 clamp(40px,6vw,68px)}
.trust .t-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  box-shadow:var(--shadow-soft)}
.trust .t-ic{width:38px;height:38px;border-radius:11px;background:rgba(14,124,123,.1);color:var(--brand-deep);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.trust .t-ic svg{width:20px;height:20px}
.trust h3{font-size:16.5px;letter-spacing:-.01em;margin-bottom:5px}
.trust p{color:var(--ink-soft);font-size:14.5px;line-height:1.5}

/* ============================ pro sections =========================== */
.mk-section{margin:clamp(24px,5vw,56px) 0}
.mk-section-head{text-align:center;max-width:640px;margin:0 auto clamp(24px,4vw,38px)}
.mk-section-head h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;line-height:1.15}
.mk-section-head p{color:var(--ink-soft);margin-top:10px;font-size:clamp(15px,1.9vw,17px)}

/* free vs pro comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.5vw,24px);align-items:start}
@media(max-width:720px){.compare{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(24px,3.2vw,34px);box-shadow:var(--shadow-soft)}
.plan.is-pro{border-color:rgba(14,124,123,.32);box-shadow:var(--shadow);position:relative;
  background:linear-gradient(160deg,#fff,var(--bg-tint))}
.plan .plan-tier{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint)}
.plan.is-pro .plan-tier{color:var(--brand)}
.plan h3{font-size:clamp(19px,2.4vw,23px);letter-spacing:-.02em;margin:6px 0 16px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.plan li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;color:var(--ink);line-height:1.45}
.plan li svg{flex:none;width:19px;height:19px;margin-top:2px}
.plan li b{font-weight:600}
.plan.is-free li svg{color:var(--ink-faint)}
.plan.is-pro li svg{color:var(--accent)}

/* final CTA banner */
.mk-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:clamp(28px,4vw,44px);border-radius:var(--radius-lg);color:#fff;
  background:linear-gradient(140deg,#0e3b3a,#0a5b5a 55%,#0e7c7b);box-shadow:var(--shadow-lg)}
.mk-cta .mc-copy{max-width:62ch}
.mk-cta h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;line-height:1.18}
.mk-cta p{color:rgba(255,255,255,.85);margin-top:8px;font-size:15.5px}
.mk-cta .cta{background:#fff;color:var(--brand-deep);box-shadow:0 10px 24px rgba(0,0,0,.22);flex:none}
.mk-cta .cta:hover{color:var(--brand-deep);background:#f2fbfa}