/* MyHata — shared design system for all marketing pages.
   Single source of truth; every page in web/ links this file. */

:root {
  --green:      #16784E;
  --green-deep: #0F513A;
  --green-wash: rgba(22,120,78,.10);
  --indigo:     #315FD6;
  --indigo-wash: rgba(59,127,255,.10);
  --amber:      #D9822B;
  --amber-wash: rgba(217,130,43,.12);
  --red:        #D83B3E;
  --red-wash:   rgba(232,56,61,.10);
  --civic:      #1F8F9C;
  --civic-wash: rgba(31,143,156,.11);
  --bg:         #EEF1ED;
  --card:       #FFFFFF;
  --ink:        #111613;
  --ink2:       #3E4741;
  --ink3:       #7B8580;
  --sep:        #DDE3DE;
  --track:      #E7ECE8;
  --radius:     18px;
  --shadow:     0 16px 44px rgba(17,22,19,.11);
  --shadow-sm:  0 2px 12px rgba(17,22,19,.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
a { color: var(--green); }
h1, h2, h3 { line-height: 1.15; letter-spacing: 0; margin: 0; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.muted { color: var(--ink3); }

/* ---------- Nav ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  background: rgba(238,241,237,.78);
  border-bottom: 1px solid var(--sep);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 62px; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 19px; letter-spacing: 0; text-decoration: none; color: var(--ink); }
.brand .mark { width: 30px; height: 30px; }
.brand .word { font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 900; }
.brand .word .my { color: #1D9A57; }
.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(22,120,78,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.nav-toggle span { margin: 5px 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-7px) rotate(-45deg); }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a { text-decoration: none; color: var(--ink2); font-weight: 600; font-size: 14.5px; padding: 8px 12px; border-radius: 10px; white-space: nowrap; }
.nav-links a:hover { background: rgba(0,0,0,.04); color: var(--ink); }
.nav-links a.active { color: var(--green-deep); }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green); color: #fff; text-decoration: none;
  font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 999px;
}
.nav-cta:hover { background: var(--green-deep); }

/* ---------- Generic page hero ---------- */
.page-hero { padding: 66px 0 20px; text-align: center; }
.page-hero .wrap { max-width: 760px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 800; }
.page-hero h1 .accent { color: var(--green); }
.page-hero .lede { font-size: 19px; color: var(--ink2); margin: 20px auto 0; max-width: 34em; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-wash); color: var(--green-deep);
  font-weight: 600; font-size: 13px; padding: 7px 14px; border-radius: 999px;
  margin-bottom: 22px;
  max-width: 100%;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.pill.amber { background: var(--amber-wash); color: #9A5A1F; }
.pill.amber .dot { background: var(--amber); }

/* ---------- Hero (home) ---------- */
/* No overflow:hidden here — it would make browsers treat this header as the
   scroll container for its #join anchor, silently breaking "Get early access"
   jump-to-form (the header itself has nothing to scroll, so the anchor jump
   would appear to do nothing instead of scrolling the page).
   overflow-x: clip is safe — unlike hidden, clip never creates a scroll
   container; it only crops the notification chips that hang past the edge
   on narrower desktop widths (otherwise they'd widen the page). */
header.hero { padding: 64px 0 40px; overflow-x: clip; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
h1 { font-size: clamp(38px, 5.4vw, 60px); font-weight: 800; }
h1 .accent { color: var(--green); }
.lede { font-size: 19px; color: var(--ink2); margin: 20px 0 30px; max-width: 30em; }

.notification-examples {
  pointer-events: none;
}
.notice-example {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 11px 13px 11px 34px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(221,227,222,.88);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.25;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.notice-example::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--green);
}
.notice-example b { font-size: 13.5px; font-weight: 800; }
.notice-example span {
  color: var(--ink3);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.notice-example.snow::before { background: var(--indigo); }
.notice-example.change::before { background: var(--amber); }
.notice-example.safety::before { background: var(--red); }
.notice-example.civic::before { background: var(--civic); }
.notice-example.outage::before { background: #5B6470; }

/* Authentic Apple "App Store" badge look */
.coming {
  display: inline-flex; align-items: center; gap: 9px;
  background: #000; color: #fff;
  border: 1px solid #A6A6A6; border-radius: 8px;
  padding: 7px 13px 8px; user-select: none;
}
.coming svg { width: 24px; height: 24px; flex: none; }
.coming > span { display: inline-flex; flex-direction: column; justify-content: center; }
.coming small { font-size: 10px; font-weight: 400; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; opacity: .95; }
.coming b { font-size: 21px; font-weight: 600; line-height: 1.02; letter-spacing: 0; margin-top: 1px; }

/* ---------- Signup / lead forms ---------- */
.signup { margin-top: 30px; max-width: 460px; }
.signup .row { display: flex; gap: 10px; }
.signup input[type=email],
.signup input[type=text],
.signup select,
.signup textarea {
  flex: 1; min-width: 0; width: 100%; max-width: 100%; font-size: 16px; padding: 14px 16px;
  border: 1px solid var(--sep); border-radius: 14px; background: #fff; color: var(--ink);
  box-shadow: var(--shadow-sm); font-family: inherit;
}
.signup textarea { width: 100%; resize: vertical; min-height: 96px; line-height: 1.45; }
.signup input:focus,
.signup select:focus,
.signup textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-wash); }
.signup .field { margin-top: 10px; }
.signup .field:first-child { margin-top: 0; }
.signup .two { display: flex; gap: 10px; }
.signup .two > * { flex: 1; min-width: 0; }
.signup button {
  font-size: 16px; font-weight: 700; color: #fff; background: var(--green);
  border: 0; border-radius: 12px; padding: 14px 22px; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm); transition: background .15s;
}
.signup button:hover { background: var(--green-deep); }
.signup button:disabled { opacity: .6; cursor: default; }
.signup button.block { width: 100%; margin-top: 12px; }
.beta { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 14.5px; color: var(--ink2); cursor: pointer; }
.beta input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--green); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin-top: 12px; font-size: 14.5px; min-height: 20px; font-weight: 600; }
.form-msg.ok { color: var(--green-deep); }
.form-msg.err { color: var(--red); }
.fineprint { margin-top: 10px; font-size: 12.5px; color: var(--ink3); }
.label { display: block; font-size: 13px; font-weight: 700; color: var(--ink2); margin: 0 0 6px 2px; }

/* ---------- Card form panel (contact pages) ---------- */
.form-card {
  background: var(--card); border-radius: var(--radius); padding: 30px;
  box-shadow: var(--shadow-sm); max-width: 560px; margin: 0 auto;
}
.form-card .signup { margin-top: 0; max-width: none; }
/* Heading inside a form-card, used when two form-cards sit side by side
   (e.g. grow.html's city-request + partner-enquiry) and each needs its own
   short label instead of relying on a page-level section-head. */
.form-card .fc-head { margin-bottom: 20px; }
.form-card .fc-head h3 { font-size: 19px; font-weight: 800; margin: 0 0 4px; }
.form-card .fc-head p { margin: 0; color: var(--ink3); font-size: 14.5px; }

/* ---------- Phone mockup (home) ---------- */
.phone-stage {
  display: flex;
  justify-content: center;
  position: relative;
  min-height: 648px;
  isolation: isolate;
}
.device {
  position: relative;
  z-index: 2;
  width: 300px; border-radius: 44px; padding: 11px;
  background: linear-gradient(145deg, #1c1c1e, #000);
  box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(255,255,255,.06);
}
.device img { width: 100%; height: auto; display: block; border-radius: 33px; }
.phone-stage .notification-examples {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.phone-stage .notice-example {
  position: absolute;
  width: 222px;
  min-height: 48px;
  opacity: 0;
  --notice-drift-x: 0;
  --notice-drift-y: 12px;
  animation: noticeDriftIn .72s cubic-bezier(.2, .8, .2, 1) forwards;
}
/* The chips layer over the device, so fade the whole layer out while the
   visitor's pointer is over the stage and the screenshot is fully readable.
   Opacity goes on the container, not the chips: each chip's own opacity is
   driven by the drift-in animation (fill-mode: forwards), which would win
   over a hover style on the same element. */
.phone-stage .notification-examples { transition: opacity .25s ease; }
@media (min-width: 861px) and (hover: hover) {
  .phone-stage:hover .notification-examples { opacity: .1; }
}
.phone-stage .notice-example.routine {
  top: 74px;
  left: -8px;
  --notice-drift-x: -18px;
  animation-delay: .16s;
}
.phone-stage .notice-example.snow {
  top: 154px;
  right: -6px;
  width: 236px;
  --notice-drift-x: 18px;
  animation-delay: .32s;
}
.phone-stage .notice-example.change {
  top: 302px;
  left: -26px;
  --notice-drift-x: -18px;
  animation-delay: .48s;
}
.phone-stage .notice-example.safety {
  top: 382px;
  right: -18px;
  width: 238px;
  --notice-drift-x: 18px;
  animation-delay: .64s;
}
.phone-stage .notice-example.civic {
  bottom: 114px;
  left: -8px;
  --notice-drift-x: -18px;
  --notice-drift-y: 16px;
  animation-delay: .80s;
}
.phone-stage .notice-example.outage {
  bottom: 46px;
  right: 10px;
  --notice-drift-x: 18px;
  --notice-drift-y: 16px;
  animation-delay: .96s;
}

@keyframes noticeDriftIn {
  0% {
    opacity: 0;
    transform: translate3d(var(--notice-drift-x), var(--notice-drift-y), 0) scale(.96);
  }
  62% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}


/* ---------- Sections ---------- */
section { padding: 72px 0; }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 48px; }
.section-head.left { text-align: left; margin-left: 0; }
.section-head .eyebrow { color: var(--green); font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; margin: 12px 0; }
.section-head p { font-size: 18px; color: var(--ink2); margin: 0; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.feature { background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.feature .fic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 22px; margin-bottom: 14px; }
.feature .fic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 18px; font-weight: 800; margin-bottom: 7px; }
.feature p { font-size: 14.5px; color: var(--ink2); margin: 0; }
.feature .tag { display: inline-block; margin-top: 12px; font-size: 11.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .04em; }
.status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--amber-wash); color: #9A5A1F;
  font-size: 11px; font-weight: 700; padding: 4px 10px 4px 8px;
  border-radius: 999px; margin-bottom: 10px;
}
.status-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); flex: none;
}
/* Inline variant for tight list rows (featlist) — sits next to the title
   instead of stacking above the description. */
.featlist h4 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.featlist .status-badge { margin-bottom: 0; padding: 3px 9px 3px 7px; font-size: 10px; }

/* Icon color helpers */
.bg-green  { background: var(--green); }
.bg-sky    { background: var(--indigo); }
.bg-amber  { background: var(--amber); }
.bg-red    { background: var(--red); }
.bg-civic  { background: var(--civic); }

/* ---------- Problem section ---------- */
.problem-section {
  padding: 58px 0;
  background: #fff;
  border-top: 1px solid var(--sep);
  border-bottom: 1px solid var(--sep);
}
.problem-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: 44px;
  align-items: start;
}
.problem-section .eyebrow {
  color: var(--green);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.problem-section h2 {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
}
.problem-section p {
  max-width: 38em;
  margin: 2px 0 22px;
  color: var(--ink2);
  font-size: 19px;
}
.problem-lines {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.problem-lines span {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 82px;
  padding: 16px 12px 15px;
  background: linear-gradient(180deg, #FFFFFF, #F6FAF7);
  border: 1px solid rgba(22,120,78,.16);
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(17,22,19,.07);
  color: var(--ink);
  text-align: center;
}
.problem-lines span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + 1px);
  width: 10px;
  height: 2px;
  background: var(--green);
  opacity: .32;
  transform: translateY(-50%);
}
.problem-lines span:last-child::after { display: none; }
.problem-lines small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.problem-lines b {
  font-size: 15.5px;
  font-weight: 850;
  line-height: 1.2;
}

/* ---------- City rollout timeline ---------- */
.rollout { padding-top: 56px; }
.rollout-grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(360px, 1.12fr);
  gap: 34px;
  align-items: center;
}
.city-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.city-timeline::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--sep);
}
.city-step {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: flex-start;
  background: var(--card);
  border: 1px solid var(--sep);
  border-radius: var(--radius);
  padding: 18px 20px 18px 0;
  box-shadow: var(--shadow-sm);
}
.city-dot {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--civic);
  box-shadow: 0 0 0 8px #fff;
  margin: 4px auto 0;
}
.city-step.is-current {
  border-color: rgba(22,120,78,.24);
  background: linear-gradient(180deg, #fff, #F6FBF8);
}
.city-step.is-current .city-dot {
  background: var(--green);
  box-shadow: 0 0 0 8px #F6FBF8;
}
.city-meta {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.city-step:not(.is-current) .city-meta { color: var(--ink3); }
.city-step h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 5px;
}
.city-step p {
  margin: 0;
  color: var(--ink2);
  font-size: 14.5px;
}

/* ---------- Tab-grouped feature blocks ---------- */
.tabblock { margin-bottom: 26px; }
.tabblock:last-child { margin-bottom: 0; }
.tabblock-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tabblock-head .fic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none; }
.tabblock-head .fic svg { width: 23px; height: 23px; }
.tabblock-head h3 { font-size: 23px; font-weight: 800; }
.tabblock-head .sub { font-size: 14px; color: var(--ink3); margin-top: 2px; }

/* Compact feature list — sits beside the phone screenshot instead of a full-width grid */
.featlist { display: flex; flex-direction: column; gap: 10px; }
.featlist .frow {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--card); border-radius: 16px; padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.featlist .fic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.featlist .fic svg { width: 18px; height: 18px; }
.featlist h4 { font-size: 14.5px; font-weight: 800; margin: 0 0 2px; }
.featlist p { font-size: 13px; color: var(--ink2); margin: 0; line-height: 1.45; }
/* On a white section background, a white card blends in — use the page's
   grey background instead so cards stay visible against either. */
section[style*="background:#fff"] .featlist .frow { background: var(--bg); box-shadow: none; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.step { text-align: center; padding: 0 10px; }
.step .n { counter-increment: step; width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; background: var(--green-wash); color: var(--green-deep); display: grid; place-items: center; font-weight: 800; font-size: 21px; }
.step .n::before { content: counter(step); }
.step h3 { font-size: 19px; font-weight: 800; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--ink2); margin: 0; }

/* ---------- Teaser band (cross-links between pages) ---------- */
.band {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--sep); border-radius: 24px; padding: 30px 34px;
  box-shadow: var(--shadow-sm);
}
.band .btext { flex: 1; min-width: 260px; }
.band .keyebrow { color: var(--green); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.band h3 { font-size: 22px; font-weight: 800; margin: 7px 0 6px; }
.band p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.band .bbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 12px; white-space: nowrap; }
.band .bbtn:hover { background: var(--green-deep); }

/* Krokva sister-brand band (home) */
.krokva {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: linear-gradient(135deg, #F4ECD5, #E7DEC2);
  border: 1px solid #E0D4AF; border-radius: 24px; padding: 32px 36px;
}
.krokva .kmark { width: 56px; height: 56px; border-radius: 15px; background: #FFFDF7; border: 1px solid #E4D9B8; display: grid; place-items: center; flex: none; }
.krokva .kmark svg { width: 34px; height: 34px; }
.krokva .ktext { flex: 1; min-width: 250px; }
.krokva .keyebrow { color: #93773A; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.krokva h3 { font-size: 23px; font-weight: 800; color: #4E5874; margin: 7px 0 6px; }
.krokva h3 b { color: #B89455; }
.krokva p { margin: 0; color: #5C5140; font-size: 15.5px; }
.krokva .kbtn { display: inline-flex; align-items: center; gap: 8px; background: #B89455; color: #fff; text-decoration: none; font-weight: 700; font-size: 15px; padding: 13px 22px; border-radius: 12px; white-space: nowrap; }
.krokva .kbtn:hover { background: #A07F42; }

/* ---------- Prose (data page etc.) ---------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose p { font-size: 17px; color: var(--ink2); margin: 0 0 18px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); }
.prose h2 { font-size: 22px; font-weight: 800; color: var(--ink); margin: 34px 0 12px; }
.prose h3 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 24px 0 8px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { font-size: 16px; color: var(--ink2); margin-bottom: 8px; }
.prose a { color: var(--green-deep); font-weight: 600; }
.prose em { color: var(--ink3); }

/* ---------- FAQ / disclosure ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { background: var(--card); border-radius: 16px; box-shadow: var(--shadow-sm); margin-bottom: 12px; padding: 4px 6px; }
.faq summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 700; font-size: 16.5px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink3); font-weight: 700; font-size: 22px; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { margin: 0; padding: 0 20px 18px; color: var(--ink2); font-size: 15.5px; }

/* ---------- Final CTA ---------- */
.cta {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green) 58%, var(--civic) 100%);
  border-radius: 24px; padding: 56px 40px; text-align: center; color: #fff;
  box-shadow: var(--shadow);
}
.cta h2 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; }
.cta p { font-size: 18px; opacity: .92; max-width: 30em; margin: 14px auto 26px; }
.cta .signup { margin: 0 auto; }
.cta .signup input[type=email] { border-color: transparent; }
.cta .signup button { background: #fff; color: var(--green-deep); }
.cta .signup button:hover { background: #f2f2f2; }
.cta .beta { color: rgba(255,255,255,.92); }
.cta .beta input { accent-color: #fff; }
.cta .fineprint { color: rgba(255,255,255,.75); }
.cta .form-msg.ok { color: #fff; }
.cta .form-msg.err { color: #ffe0e0; }

/* ---------- Footer ---------- */
footer { padding: 52px 0 60px; border-top: 1px solid var(--sep); color: var(--ink3); font-size: 14px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; margin-bottom: 34px; }
.foot-grid .brand { gap: 7px; font-size: 17px; color: var(--ink); margin-bottom: 12px; }
.foot-grid p { margin: 0; max-width: 24em; font-size: 14px; color: var(--ink3); }
.foot-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink3); font-weight: 800; margin: 4px 0 12px; }
.foot-col a { display: block; text-decoration: none; color: var(--ink2); font-weight: 600; font-size: 14px; padding: 5px 0; }
.foot-col a:hover { color: var(--green-deep); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 22px; border-top: 1px solid var(--sep); }

/* Studio credit — mirrors the "Built by TerrikonLabs" block in the app's Settings. */
.foot-studio { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink3); }
.foot-studio .label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.foot-studio .mark { display: block; flex: none; opacity: .9; }
.foot-studio .word { display: inline-flex; align-items: baseline; gap: 4px; color: var(--ink2); font-size: 13px; }
.foot-studio .word b { font-weight: 800; letter-spacing: .02em; }
.foot-studio .word i { font-style: normal; font-weight: 300; letter-spacing: .26em; }
.foot-studio:hover .label { color: var(--ink2); }
.foot-studio:hover .word { color: var(--ink); }
.foot-studio:hover .mark { opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  header.hero .hero-grid { gap: 34px; }
  .phone-stage { min-height: 0; flex-direction: column; align-items: center; gap: 18px; }
  .phone-stage .notification-examples {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: min(100%, 560px);
    pointer-events: auto;
  }
  .phone-stage .notice-example {
    position: relative;
    inset: auto;
    width: auto;
    min-height: 46px;
  }
  .problem-grid { grid-template-columns: 1fr; gap: 22px; }
  .rollout-grid { grid-template-columns: 1fr; }
  .grid, .grid.two { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; gap: 34px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  header.hero { padding: 40px 0 20px; }
  .wrap { padding: 0 18px; }
  h1 { font-size: clamp(40px, 13vw, 54px); }
  .lede { font-size: 17.5px; margin: 16px 0 24px; }
  .pill {
    align-items: flex-start;
    border-radius: 16px;
    line-height: 1.35;
    padding: 8px 12px;
  }
  .pill .dot { margin-top: 5px; flex: none; }
  .device {
    width: min(292px, calc(100vw - 76px));
    border-radius: 40px;
  }
  .phone-stage .notification-examples { grid-template-columns: 1fr; }
  .notice-example { min-height: 42px; }
  .notice-example b { overflow-wrap: anywhere; }
  .problem-lines { grid-template-columns: 1fr; gap: 9px; }
  .problem-lines span {
    min-height: 62px;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    gap: 11px;
    padding: 14px 15px;
    text-align: left;
  }
  .problem-lines span::after {
    top: calc(100% + 1px);
    left: 28px;
    width: 2px;
    height: 8px;
    transform: none;
  }
  .problem-lines small { margin: 0; flex: none; }
  .grid, .grid.two { grid-template-columns: 1fr; }
  .signup .row, .signup .two { flex-direction: column; }
  .cta { padding: 40px 22px; }
  .city-step { grid-template-columns: 42px 1fr; padding-right: 16px; }
  .city-timeline::before { left: 20px; }
  nav .wrap {
    position: relative;
    height: 64px;
  }
  .nav-toggle {
    display: flex;
    flex: none;
  }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 18px;
    right: 18px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    margin-left: 0;
    padding: 8px;
    background: rgba(255,255,255,.96);
    border: 1px solid var(--sep);
    border-radius: 16px;
    box-shadow: var(--shadow);
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
  }
  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 15px;
  }
  .nav-links .nav-cta {
    justify-content: center;
    margin-top: 4px;
    color: #fff;
  }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 390px) {
  .foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-stage .notice-example {
    animation: none;
    opacity: 1;
    transform: none;
  }
}