@import "tokens.css";

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-font-smoothing: antialiased; }
body {
  font-family: var(--font-body);
  color: var(--volcanic);
  background: var(--paper);
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ocean);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 600; }
h3 { font-size: 1.2rem; font-weight: 600; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }

/* Trust strip */
.trust-strip {
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5);
  justify-content: center; align-items: center;
  font-size: 0.85rem; color: var(--volcanic); opacity: 0.75;
  padding: var(--s-4) 0;
}
.trust-strip > * + *::before { content: "·"; margin-right: var(--s-4); color: var(--ocean); }

/* Buttons */
.btn {
  display: inline-block; padding: 14px 28px; border-radius: var(--r-md);
  font-weight: 600; font-size: 1rem; cursor: pointer; border: none;
  text-decoration: none; transition: background-color 0.15s;
  font-family: var(--font-body);
}
.btn-primary { background: var(--ocean); color: var(--paper); }
.btn-primary:hover { background: var(--sunset); }
.btn-secondary { background: transparent; color: var(--ocean); border: 1.5px solid var(--ocean); }
.btn-secondary:hover { background: var(--ocean); color: var(--paper); }

/* Plan card */
.plan-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
  position: relative;
}
.plan-card.featured { border-color: var(--sunset); border-width: 2px; }
.plan-card .name { font-size: 1.1rem; font-weight: 600; color: var(--ocean); }
.plan-card .price {
  font-family: var(--font-numerals); font-variant-numeric: tabular-nums;
  font-size: 2.2rem; font-weight: 500; color: var(--volcanic);
}
.plan-card .price .mo { font-size: 0.9rem; font-weight: 400; color: var(--volcanic); opacity: 0.6; }
.plan-card ul { list-style: none; }
.plan-card li { font-size: 0.9rem; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.plan-card li:last-child { border: none; }
.plan-card li::before { content: "✓"; color: var(--reef); margin-right: var(--s-2); font-weight: 600; }
.plan-card .badge {
  position: absolute; top: -10px; right: var(--s-4);
  background: var(--sunset); color: var(--paper);
  font-size: 0.72rem; padding: 4px 10px; border-radius: 100px; font-weight: 600;
}

/* Story block */
.story-block {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-7); align-items: center;
  padding: var(--s-8) 0;
}
.story-block.reverse { direction: rtl; }
.story-block.reverse > * { direction: ltr; }
.story-block img { width: 100%; border-radius: var(--r-lg); }
.story-block p { margin-bottom: var(--s-4); font-size: 1.05rem; }

/* FAQ */
.faq details {
  border-bottom: 1px solid var(--rule); padding: var(--s-4) 0;
}
.faq summary {
  font-weight: 600; font-size: 1rem; cursor: pointer;
  list-style: none; display: flex; justify-content: space-between;
}
.faq summary::after { content: "+"; color: var(--ocean); font-size: 1.25rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-top: var(--s-3); color: var(--volcanic); opacity: 0.8; font-size: 0.95rem; line-height: 1.7; }

/* Footer */
.footer {
  background: var(--volcanic); color: var(--sand);
  padding: var(--s-7) 0 var(--s-5); margin-top: var(--s-9);
  font-size: 0.85rem;
}
.footer a { color: var(--sand); text-decoration: none; }
.footer a:hover { color: var(--sunset); }

/* Coming-soon banner & nav */
.coming-soon-banner {
  background: var(--ocean); color: var(--paper); text-align: center;
  font-size: 0.85rem; padding: var(--s-2) var(--s-4);
}
.site-nav { border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; }
.brand { text-decoration: none; }
.brand .logo { height: 42px; width: auto; vertical-align: middle; }
.nav-links { display: flex; gap: var(--s-5); align-items: center; }
.nav-links a { color: var(--volcanic); text-decoration: none; font-weight: 500; }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }

/* Hero */
.hero { padding: var(--s-9) var(--s-5); text-align: center; }
.hero-sub {
  font-size: 1.15rem; max-width: 620px; margin: var(--s-4) auto var(--s-6);
  color: var(--volcanic); opacity: 0.85;
}
.hero .btn + .btn { margin-left: var(--s-3); }

/* Section blocks */
.savings, .compare, .why { padding: var(--s-7) var(--s-5); }
.pricing-disclaimer { font-size: 0.85rem; opacity: 0.7; font-style: italic; }
.plans-head { text-align: center; padding-top: var(--s-7); }

/* Plan grid */
.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-5); padding: var(--s-5);
}
.plan-card .data { font-size: 0.9rem; color: var(--ocean); font-weight: 600; }

/* FAQ items */
.faq-item { border-bottom: 1px solid var(--rule); padding: var(--s-4) 0; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--ocean); }
.faq-item p { margin-top: var(--s-3); opacity: 0.85; }

/* Waitlist form */
.waitlist {
  background: var(--sand); border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-5); margin: var(--s-7) auto; text-align: center;
}
.waitlist-sub { max-width: 560px; margin: var(--s-3) auto var(--s-5); opacity: 0.85; }
.waitlist-form {
  display: grid; gap: var(--s-4); max-width: 420px; margin: 0 auto; text-align: left;
}
.waitlist-form label { font-size: 0.85rem; font-weight: 600; display: grid; gap: var(--s-2); }
.waitlist-form input, .waitlist-form select {
  padding: 12px 14px; border: 1.5px solid var(--sand-2);
  border-radius: var(--r-md); font-size: 1rem; font-family: var(--font-body); background: var(--paper);
}
.waitlist-form .hp { position: absolute; left: -9999px; }
.waitlist-status { font-size: 0.9rem; min-height: 1.2em; color: var(--reef); }

/* Site footer (Coming Soon) */
.site-footer {
  background: var(--volcanic); color: var(--paper); padding: var(--s-7) 0; margin-top: var(--s-8);
}
.footer-mvno { font-size: 0.8rem; opacity: 0.7; max-width: 720px; }
.footer-legal { font-size: 0.8rem; opacity: 0.6; margin-top: var(--s-3); }
.footer-legal a { color: var(--sand); }

@media (max-width: 768px) {
  .story-block { grid-template-columns: 1fr; gap: var(--s-5); }
}