/* Camptivity marketing site — shared styles. Teal brand (matches the app emails
   + welcome tour). Warm, friendly, professional. */
:root{
  --teal:#0f766e; --teal2:#14b8a6; --teal-d:#0b5d56;
  --ink:#1f2433; --ink-soft:#4b5167; --ink-dim:#7b8196;
  --cream:#f3fbf9; --card:#ffffff; --line:#e3ece9;
  --sun:#f59e0b; --coral:#fb7185;
  --grad:linear-gradient(125deg,#0f766e,#14b8a6 72%,#5ed6c4);
  --shadow:0 10px 30px rgba(15,80,75,.10);
  --shadow-sm:0 4px 14px rgba(15,80,75,.08);
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);
  background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.logo{font-family:'Baloo 2','Nunito',system-ui,sans-serif;line-height:1.12;color:var(--ink)}
a{color:var(--teal);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.center{text-align:center}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(243,251,249,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:64px}
/* Wordmark: "Camp" bold (Baloo 2) + "tivity" thin (Nunito), no space between —
   only the emoji is spaced from the word. NOT flex, so the markup whitespace rules. */
.logo{font-size:23px;color:var(--teal);white-space:nowrap;line-height:1;letter-spacing:-.2px}
.logo b{font-family:'Baloo 2','Nunito',sans-serif;font-weight:800;color:var(--teal)}
.logo span{font-family:'Nunito',system-ui,sans-serif;font-weight:400;color:var(--ink-dim)}
/* the tent stands in for the "a" in Camp — INLINE svg (renders everywhere incl.
   iOS Brave, where CSS masks can fail) and inherits the text color via
   currentColor (teal in the header, white in the footer). Negative margins pull
   the C and the m in tight against it. */
.logo .tent{height:.74em;width:auto;vertical-align:-.09em;margin:0 -.07em;fill:currentColor}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:22px}
.nav .links a{color:var(--ink-soft);font-weight:700;font-size:15px}
.nav .links a:hover{color:var(--teal)}
.btn{display:inline-block;font-family:'Nunito',sans-serif;font-weight:800;font-size:15px;
  padding:11px 22px;border-radius:999px;cursor:pointer;border:none;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(15,118,110,.32)}
.btn-ghost{background:#fff;color:var(--teal);border:1.5px solid var(--line)}
.btn-lg{padding:15px 30px;font-size:17px}
.nav .btn{margin-left:4px}
@media(max-width:720px){.nav .links a:not(.btn){display:none}}

/* hero */
.hero{padding:70px 0 40px;position:relative;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.eyebrow{display:inline-block;background:#dff5f1;color:var(--teal-d);font-weight:800;font-size:13px;
  padding:6px 14px;border-radius:999px;margin-bottom:18px;letter-spacing:.01em}
.hero h1{font-size:clamp(34px,5vw,52px);font-weight:800;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--teal);background:linear-gradient(transparent 62%,#bff0e7 0) }
.hero p.lead{font-size:19px;color:var(--ink-soft);margin:18px 0 26px;max-width:540px}
.cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.trust{margin-top:18px;color:var(--ink-dim);font-size:14px;font-weight:700}
.trust b{color:var(--teal)}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:30px}.hero{padding:44px 0 20px}}

/* phone preview (CSS-only app mock) */
.phone{justify-self:center;width:280px;background:#0b3b37;border-radius:38px;padding:11px;
  box-shadow:0 28px 60px rgba(11,59,55,.3)}
.phone .screen{background:var(--grad);border-radius:28px;overflow:hidden;padding:18px 15px 20px}
.phone .pbar{color:#fff;font-weight:800;font-size:18px;display:flex;align-items:center;gap:6px;justify-content:center;margin-bottom:14px}
.kidcard{background:#fff;border-radius:16px;padding:13px 14px;margin-bottom:10px;box-shadow:0 6px 14px rgba(0,0,0,.12)}
.kidcard .top{display:flex;align-items:center;gap:9px}
.kidcard .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:19px;background:#e8f7f4}
.kidcard .nm{font-weight:800;font-size:15px;color:var(--ink)}
.kidcard .pts{margin-left:auto;font-weight:800;color:var(--teal)}
.kidcard .bar{height:7px;border-radius:99px;background:#eef2f1;margin-top:9px;overflow:hidden}
.kidcard .bar i{display:block;height:100%;background:var(--grad);border-radius:99px}
.chip{display:inline-block;background:rgba(255,255,255,.92);color:var(--teal-d);font-weight:800;font-size:12px;
  padding:5px 11px;border-radius:999px;margin-top:4px}

/* sections */
section{padding:62px 0}
.sec-head{max-width:680px;margin:0 auto 42px;text-align:center}
.sec-head .kick{color:var(--teal);font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.sec-head h2{font-size:clamp(27px,3.6vw,38px);font-weight:800;margin:8px 0 12px}
.sec-head p{color:var(--ink-soft);font-size:17px}
.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* feature grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow-sm)}
.card .ico{font-size:30px;width:54px;height:54px;border-radius:14px;background:#e8f7f4;display:grid;place-items:center;margin-bottom:14px}
.card h3{font-size:19px;font-weight:800;margin-bottom:6px}
.card p{color:var(--ink-soft);font-size:15px}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
@media(max-width:720px){.steps{grid-template-columns:1fr}}
.step{position:relative;padding-left:8px}
.step .n{counter-increment:s;width:40px;height:40px;border-radius:12px;background:var(--grad);color:#fff;
  font-family:'Baloo 2';font-weight:800;font-size:20px;display:grid;place-items:center;margin-bottom:12px}
.step .n::after{content:counter(s)}
.step h3{font-size:19px;margin-bottom:6px}.step p{color:var(--ink-soft)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;max-width:940px;margin:0 auto}
@media(max-width:780px){.tiers{grid-template-columns:1fr;max-width:420px}}
.tier{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column}
.tier.feat{border-color:var(--teal);box-shadow:0 16px 40px rgba(15,118,110,.16);position:relative}
.tier .tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;
  font-weight:800;font-size:12px;padding:5px 14px;border-radius:999px}
.tier h3{font-size:21px}
.tier .price{font-family:'Baloo 2';font-weight:800;font-size:40px;color:var(--ink);margin:8px 0 2px}
.tier .price small{font-size:16px;color:var(--ink-dim);font-weight:700}
.tier .note{color:var(--ink-dim);font-size:14px;font-weight:700;min-height:20px}
.tier ul{list-style:none;margin:18px 0 22px}
.tier li{padding:7px 0 7px 28px;position:relative;color:var(--ink-soft);font-size:15px;border-top:1px solid #f1f5f4}
.tier li::before{content:'✓';position:absolute;left:0;color:var(--teal);font-weight:800}
.tier .btn{margin-top:auto;text-align:center}
/* summer promo treatment (applied to .tier-annual by promo.js, Jun–Aug) */
.price .was{color:var(--ink-dim);font-size:26px;font-weight:700;margin-right:10px;
  text-decoration:line-through;text-decoration-color:var(--coral);-webkit-text-decoration-color:var(--coral)}
.tier.summer{border-color:var(--sun);box-shadow:0 18px 44px rgba(245,158,11,.24)}
.tier.summer .tag{background:linear-gradient(120deg,#f59e0b,#fb7185)}
.tier.summer .price{color:#b45309}
.tier.summer .note{color:#b45309;font-weight:800}

/* faq */
.faq{max-width:760px;margin:0 auto}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:4px 20px;margin-bottom:12px}
.faq summary{font-weight:800;font-size:17px;padding:16px 0;cursor:pointer;list-style:none;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';margin-left:auto;color:var(--teal);font-size:24px;font-weight:700;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--ink-soft);padding:0 0 18px}

/* cta band */
.band{background:var(--grad);border-radius:26px;padding:48px 30px;text-align:center;color:#fff;box-shadow:var(--shadow)}
.band h2{color:#fff;font-size:clamp(26px,3.4vw,36px)}
.band p{color:rgba(255,255,255,.92);font-size:18px;margin:12px 0 24px}
.band .btn-primary{background:#fff;color:var(--teal)}

/* generic prose (about/legal) */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:26px;margin:30px 0 10px}
.prose h3{font-size:20px;margin:22px 0 8px}
.prose p,.prose li{color:var(--ink-soft);font-size:16.5px;margin-bottom:12px}
.prose ul{padding-left:22px;margin-bottom:14px}
.prose .lead{font-size:19px;color:var(--ink)}

/* contact form */
.form{max-width:520px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--shadow-sm)}
.form label{display:block;font-weight:800;font-size:14px;margin:14px 0 6px;color:var(--ink-soft)}
.form input,.form textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px;background:#fbfdfd}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--teal2)}
.form textarea{min-height:130px;resize:vertical}
.form .btn{width:100%;margin-top:18px}
.note-ok{background:#e8f7f4;color:var(--teal-d);border-radius:12px;padding:14px;font-weight:700;text-align:center}
.note-err{background:#fff1f2;color:#be123c;border-radius:12px;padding:12px;font-weight:700;margin-top:10px}

/* footer */
footer.site{background:#0b3b37;color:#cfe7e2;padding:46px 0 30px;margin-top:30px}
footer.site .cols{display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between}
footer.site .logo{color:#fff}
footer.site .logo b{color:#fff}
footer.site .logo span{color:#7fd3c7}
footer.site .blurb{max-width:300px;color:#9ec7c0;font-size:14.5px;margin-top:10px}
footer.site .fcol h4{font-family:'Nunito';font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#7fd3c7;margin-bottom:12px}
footer.site .fcol a{display:block;color:#cfe7e2;font-size:15px;padding:5px 0}
footer.site .fcol a:hover{color:#fff}
footer.site .base{border-top:1px solid rgba(255,255,255,.12);margin-top:30px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:#8fb8b1;font-size:13.5px}