/* ---------- Inter (self-hosted, variable) ---------- */
/* Served locally so no visitor IP is sent to Google Fonts (GDPR). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand palette */
  --petrol:      #157470;
  --mint:        #ACEFD0;
  --mint-soft:   #DCF6EA;
  --deep-teal:   #104A4C;
  --off-white:   #FAF9F7;
  --ink:         #0E2E2E;

  /* Derived */
  --text:        #0E2E2E;
  --text-muted:  #5B7573;
  --border:      rgba(16, 74, 76, 0.10);
  --border-soft: rgba(16, 74, 76, 0.07);
  --bg:          var(--off-white);

  --radius:      14px;
  --radius-lg:   22px;
  --nav-h:       64px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
  letter-spacing: -0.011em;
}

a { color: inherit; text-decoration: none; }

/* ---------- Top navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 249, 247, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-soft);
}

.nav__inner {
  width: 100%;
  max-width: 1120px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  color: var(--deep-teal);
}
.brand__logo { width: 26px; height: 26px; display: block; flex: none; }
.brand__q { color: var(--petrol); }

/* Tabs */
.tabs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tab {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.tab:hover { color: var(--deep-teal); background: rgba(16, 74, 76, 0.05); }

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 10px;
  background: var(--deep-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.nav__cta:hover { background: var(--petrol); transform: translateY(-1px); }

/* ---------- Hero ---------- */
/* Mobile-first: single column, copy on top, phone below. */
.hero {
  max-width: 1120px;
  margin: 0 auto;
  padding: 56px 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}
.hero__copy { width: 100%; max-width: 620px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--mint-soft);
  border: 1px solid rgba(21, 116, 112, 0.14);
  color: var(--petrol);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 28px;
}
.eyebrow__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--petrol);
  box-shadow: 0 0 0 4px rgba(21, 116, 112, 0.16);
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 7vw, 66px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--deep-teal);
}
.hero h1 em {
  font-style: normal;
  color: var(--petrol);
}

.hero p {
  margin: 24px auto 0;
  max-width: 520px;
  font-size: clamp(17px, 2.4vw, 19px);
  color: var(--text-muted);
  line-height: 1.55;
}

/* ---------- Waitlist form ---------- */
.waitlist {
  margin: 40px auto 0;
  max-width: 460px;
  width: 100%;
}
.waitlist__row {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 74, 76, 0.04),
              0 8px 24px rgba(16, 74, 76, 0.06);
  transition: box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.waitlist__row:focus-within {
  border-color: rgba(21, 116, 112, 0.45);
  box-shadow: 0 1px 2px rgba(16, 74, 76, 0.04),
              0 8px 28px rgba(16, 74, 76, 0.08),
              0 0 0 4px rgba(172, 239, 208, 0.5);
}
.waitlist input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15.5px;
  color: var(--text);
}
.waitlist input::placeholder { color: #9BADAB; }

.btn-submit {
  flex: none;
  border: none;
  cursor: pointer;
  padding: 12px 22px;
  border-radius: 9px;
  background: var(--petrol);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease);
}
.btn-submit:hover { background: var(--deep-teal); transform: translateY(-1px); }
.btn-submit:active { transform: translateY(0); }

.waitlist__note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  opacity: 0.85;
}

/* Honeypot field - visually hidden but still in the DOM for bots to find.
   Not display:none, so simple bots don't skip it. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Consent line under the form */
.waitlist__consent {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  opacity: 0.9;
}
.waitlist__consent a { color: var(--petrol); text-decoration: underline; text-underline-offset: 2px; }
.cta .waitlist__consent { color: rgba(220, 246, 234, 0.7); }
.cta .waitlist__consent a { color: var(--mint); }

/* Status message after submit (success / error) */
.waitlist__status {
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 500;
  min-height: 1em;
}
.waitlist__status.is-success { color: var(--petrol); }
.waitlist__status.is-error { color: #b3261e; }

/* ---------- Success state ----------
   A one-line status message under the form was too easy to miss, so a
   successful signup swaps the whole form out for a panel: brand mark with the
   check drawing itself, the headline the server sent, and the address the mail
   went to. Same visual language as confirmed.html, so the two ends of the
   double opt-in feel like one flow. The panel is built by script.js, which is
   why there is no markup for it in index.html. */

/* The consent line deliberately stays: it carries what the visitor just
   agreed to and the link to the privacy policy, and that should not disappear
   the moment they act on it. Everything else steps aside for the panel. */
.waitlist.is-confirmed .waitlist__row,
.waitlist.is-confirmed .waitlist__note,
.waitlist.is-confirmed .waitlist__status { display: none; }

.waitlist.is-confirmed .waitlist__consent { margin-top: 12px; }

.waitlist__done {
  display: none;
  margin: 4px 0 0;
  padding: 18px 20px;
  gap: 15px;
  align-items: flex-start;
  text-align: left;
  background: var(--mint-soft);
  border: 1px solid rgba(21, 116, 112, 0.16);
  border-radius: var(--radius);
}
.waitlist.is-confirmed .waitlist__done {
  display: flex;
  animation: doneIn 0.45s var(--ease) both;
}

.donemark { width: 38px; height: 38px; flex: none; margin-top: 1px; }
.donemark__back,
.donemark__front { transform-box: fill-box; transform-origin: center; }
.donemark__check {
  stroke: var(--deep-teal);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
}

/* Scoped under .waitlist__done on purpose. The panel also appears inside the
   final CTA, where ".cta p" sets a near-white colour for the dark background -
   that selector is more specific than a bare .waitlist__donetitle and won
   outright, leaving white text on the panel's light mint. Two classes beat it,
   and the panel now keeps its own colours wherever it is placed. */
.waitlist__done .waitlist__donetitle {
  margin: 0;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--deep-teal);
}
.waitlist__done .waitlist__donesub {
  margin: 5px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  /* Not --text-muted: against the panel's mint that lands at 4.35:1, just
     under WCAG AA. Two shades darker keeps the muted look at 4.74:1. */
  color: #556F6D;
}
.waitlist__done .waitlist__donesub b {
  font-weight: 600;
  color: var(--text);
  /* A long address must not push the panel wider than the column. */
  overflow-wrap: anywhere;
}

@keyframes doneIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes doneSettle {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes doneDraw { to { stroke-dashoffset: 0; } }

.waitlist.is-confirmed .donemark__back  { animation: doneSettle 0.4s var(--ease) 0.10s both; }
.waitlist.is-confirmed .donemark__front { animation: doneSettle 0.4s var(--ease) 0.20s both; }
.waitlist.is-confirmed .donemark__check { animation: doneDraw 0.45s var(--ease) 0.48s forwards; }

@media (prefers-reduced-motion: reduce) {
  .waitlist.is-confirmed .waitlist__done,
  .waitlist.is-confirmed .donemark__back,
  .waitlist.is-confirmed .donemark__front { animation: none; }
  .waitlist.is-confirmed .donemark__check { animation: none; stroke-dashoffset: 0; }
}

/* Loading state on the button */
.btn-submit.is-loading { opacity: 0.7; pointer-events: none; }

/* ---------- Hero phone mockup ---------- */
.hero__device { display: flex; justify-content: center; width: 100%; }

.phone {
  position: relative;
  width: 260px;
  height: 540px;
  background: #0E2E2E;
  border-radius: 42px;
  padding: 12px;
  box-shadow: 0 30px 60px rgba(16, 74, 76, 0.22),
              0 8px 20px rgba(16, 74, 76, 0.12);
}
.phone__notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  background: #0E2E2E;
  border-radius: 0 0 14px 14px;
  z-index: 2;
}
.phone__screen {
  width: 100%;
  height: 100%;
  border-radius: 32px;
  background: var(--off-white);
  overflow: hidden;
}

/* Both mockups below simulate app UI, so their internal alignment must not
   depend on how the surrounding page is laid out. .hero and .widgetsec__inner
   are centred on mobile and only switch to text-align:left at the desktop
   breakpoint - which the mockups inherited. The effect was subtle and only on
   phones: a short line ("Day 14", the big "4") drifted right while the wider
   line under it still looked correctly aligned. Anything inside that really
   is centred uses flexbox or sets text-align itself, so this reset is safe. */
.appshot,
.widget {
  text-align: left;
}

/* Static app-screen snapshot inside the phone (non-interactive) */
.appshot {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--off-white);
}
.appshot__status {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 6px;
  font-size: 12px; font-weight: 600; color: var(--deep-teal);
}
.appshot__sbicons { display: inline-flex; align-items: center; gap: 5px; color: var(--deep-teal); }

.appshot__body {
  flex: 1;
  overflow: hidden;
  padding: 8px 18px 6px;
}

.appshot__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 16px;
}
.appshot__hi { margin: 0 0 1px; font-size: 11.5px; color: var(--text-muted); font-weight: 500; }
.appshot__title { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; color: var(--deep-teal); }
.appshot__logo { width: 26px; height: 26px; }

/* The Grip: the addiction as a foggy shape you push back */
.appshot__grip { display: flex; flex-direction: column; align-items: center; margin-top: 2px; }
.appshot__blobwrap { position: relative; width: 150px; height: 150px; }
.appshot__blob {
  width: 100%; height: 100%;
  /* it has been pushed back to 61% - a touch smaller than full strength */
  transform: scale(1.2);
  filter: drop-shadow(0 10px 22px rgba(16, 74, 76, 0.28));
}
.appshot__griplabel {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
}
.appshot__gripnum { font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.appshot__gripunit { font-size: 17px; font-weight: 600; opacity: 0.85; margin-left: 1px; }
.appshot__griptag {
  margin-top: 3px; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.72;
}
.appshot__gripstatus {
  /* Hidden on mobile to keep the +1 button in view; shown from the desktop
     breakpoint where the phone is taller and there's room. */
  display: none;
  margin: 5px 0 0; text-align: center;
  font-size: 10.5px; font-weight: 500; color: var(--text-muted);
}

/* forecast */
.appshot__fc {
  margin-top: 12px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px;
  background: var(--mint-soft); border-radius: 14px;
}
.appshot__fccount { display: flex; align-items: baseline; gap: 4px; }
.appshot__fccount b { font-size: 18px; font-weight: 700; color: var(--deep-teal); letter-spacing: -0.03em; }
.appshot__fccount span { font-size: 11px; color: var(--text-muted); }
.appshot__fcarrow { color: var(--petrol); font-weight: 700; }
.appshot__fcres { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.appshot__fcres b { font-size: 18px; font-weight: 700; color: var(--petrol); letter-spacing: -0.03em; }
.appshot__fcres span { font-size: 9.5px; color: var(--text-muted); }

/* log a snus */
.appshot__log {
  margin-top: 12px;
  display: flex; align-items: center; gap: 8px;
}
.appshot__logminus {
  flex: none; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 600; color: var(--text-muted);
  background: #fff; border: 1px solid var(--border);
}
.appshot__logadd {
  flex: 1; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #fff;
  background: var(--petrol);
  box-shadow: 0 6px 14px rgba(21, 116, 112, 0.28);
}
.appshot__logadd b { font-size: 14px; font-weight: 700; }

/* why card */
.appshot__why {
  margin-top: 12px; padding: 12px 14px;
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
}
.appshot__whylabel { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--petrol); }
.appshot__whytext { margin: 3px 0 0; font-size: 14px; font-weight: 500; color: var(--deep-teal); letter-spacing: -0.02em; }

/* bottom tab bar */
.appshot__tabs {
  flex: none;
  display: flex; align-items: center; justify-content: space-around;
  height: 56px;
  border-top: 1px solid var(--border-soft);
  background: rgba(250, 249, 247, 0.9);
}
.appshot__tab { color: var(--text-muted); display: flex; }
.appshot__tab svg { width: 21px; height: 21px; }
.appshot__tab.is-active { color: var(--petrol); }

/* Two-column hero on larger screens */
@media (min-width: 880px) {
  .hero {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 56px;
    padding: 96px 24px 104px;
    text-align: left;
  }
  .hero__copy { flex: 1; margin: 0; }
  .hero p { margin-left: 0; margin-right: 0; max-width: 480px; }
  .hero .waitlist { margin-left: 0; margin-right: 0; }
  .hero__device { width: auto; flex: none; }
  .phone { width: 288px; height: 596px; }
  .appshot__gripstatus { display: block; }
}

/* ---------- Generic section ---------- */
.section { padding: 96px 24px; }
.section--alt { background: var(--mint-soft); }

.section__inner { max-width: 1040px; margin: 0 auto; }
.section__inner--narrow { max-width: 760px; }

.section__head { max-width: 620px; margin: 0 auto 56px; text-align: center; }
.section__kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: 14px;
}
.section__head h2 {
  margin: 0;
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--deep-teal);
}
.section__head p {
  margin: 16px auto 0;
  max-width: 480px;
  font-size: 17px;
  color: var(--text-muted);
}

/* ---------- Widget showcase ---------- */
.widgetsec__inner {
  max-width: 1120px;   /* match the hero so both phones align horizontally */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}
.widgetsec__copy { max-width: 520px; }
.widgetsec__copy h2 {
  margin: 12px 0 0;
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--deep-teal);
}
.widgetsec__copy > p {
  margin: 16px 0 0;
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.55;
}
.widgetsec__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.widgetsec__list li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px;
  color: var(--deep-teal);
}
.widgetsec__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mint-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23157470' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* iOS-style home screen inside a phone */
.widgetsec__device { display: flex; justify-content: center; width: 100%; }
.hs {
  width: 288px;                  /* match the hero phone (.phone) exactly */
  height: 596px;
  padding: 16px 16px 20px;
  border-radius: 44px;
  /* Dark frame as a border (inside the box), like the hero .phone - so the
     visible outer width is exactly 288px and both phones align. */
  border: 12px solid #0E2E2E;
  background:
    linear-gradient(160deg, #cfeede 0%, #a7d8c4 40%, #7bbfa8 100%);
  box-shadow: 0 30px 60px rgba(16, 74, 76, 0.24),
              0 8px 20px rgba(16, 74, 76, 0.12);
  display: flex;
  flex-direction: column;
}
.hs__statusbar {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 8px 20px;
  font-size: 13px; font-weight: 600; color: #0E2E2E;
}
.hs__sbicons { display: inline-flex; align-items: center; gap: 5px; color: #0E2E2E; }

.hs__grid { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.hs__apps { display: flex; justify-content: space-between; padding: 0 4px; }
.hsapp {
  width: 50px; height: 50px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);
}
/* a little colour variety so it reads as real apps */
.hsapp--a { background: rgba(255,255,255,0.65); }
.hsapp--b { background: rgba(16,74,76,0.22); }
.hsapp--c { background: rgba(255,255,255,0.5); }
.hsapp--d { background: rgba(21,116,112,0.28); }
.hsapp--e { background: rgba(21,116,112,0.2); }
.hsapp--f { background: rgba(255,255,255,0.6); }
.hsapp--g { background: rgba(16,74,76,0.18); }
.hsapp--h { background: rgba(255,255,255,0.5); }

.hs__dock {
  flex: none;
  margin-top: 20px;
  display: flex; justify-content: space-between;
  padding: 12px 8px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hsapp--dock { background: rgba(255,255,255,0.7); }

/* The snusQuit widget itself */
.widget {
  background: var(--off-white);
  border-radius: 20px;
  padding: 14px 16px;
  box-shadow: 0 6px 16px rgba(16, 74, 76, 0.18);
}
.widget__head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.widget__logo { width: 16px; height: 16px; }
.widget__name { font-size: 12.5px; font-weight: 600; color: var(--deep-teal); letter-spacing: -0.02em; }
.widget__body { display: flex; align-items: center; justify-content: space-between; }
.widget__num { display: flex; flex-direction: column; line-height: 1; }
.widget__num b { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; color: var(--deep-teal); }
.widget__num span { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.widget__ring { width: 44px; height: 44px; }
.widget__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wring__track { fill: none; stroke: var(--mint-soft); stroke-width: 6; }
.wring__val {
  fill: none; stroke: var(--petrol); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 113; stroke-dashoffset: 38;   /* ~66% */
}
.widget__bar {
  margin-top: 12px; height: 6px; border-radius: 3px;
  background: var(--mint-soft); overflow: hidden;
}
.widget__bar span { display: block; height: 100%; width: 66%; border-radius: 3px; background: var(--petrol); }

@media (min-width: 880px) {
  .widgetsec__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    gap: 56px;                 /* match .hero exactly so both phones line up */
  }
  .widgetsec__copy { flex: 1; max-width: 620px; }  /* same as .hero__copy */
  .widgetsec__list { display: flex; }
  .widgetsec__device { width: auto; flex: none; }
}

/* ---------- How it works: steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.step:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(16, 74, 76, 0.08);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--mint-soft);
  color: var(--petrol);
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 20px;
}
.step h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--deep-teal);
}
.step p { margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.55; }

/* ---------- Why: reasons ---------- */
.reasons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.reason {
  background: rgba(250, 249, 247, 0.6);
  border: 1px solid rgba(16, 74, 76, 0.09);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.reason h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--deep-teal);
}
.reason p { margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.55; }

/* ---------- FAQ accordion ---------- */
.faq {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid var(--border-soft); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--deep-teal);
  text-align: left;
  transition: color 0.2s var(--ease);
}
.faq__q:hover { color: var(--petrol); }
.faq__icon {
  flex: none;
  width: 20px; height: 20px;
  color: var(--petrol);
  transition: transform 0.3s var(--ease);
}
.faq__item.is-open .faq__icon { transform: rotate(45deg); }

.faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease);
}
.faq__a p {
  margin: 0;
  padding: 0 24px 24px;
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- Final CTA ---------- */
.cta {
  padding: 100px 24px;
  background: var(--deep-teal);
  text-align: center;
}
.cta__inner { max-width: 560px; margin: 0 auto; }
.cta h2 {
  margin: 0;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.cta p {
  margin: 16px auto 0;
  max-width: 400px;
  font-size: 17px;
  color: rgba(220, 246, 234, 0.82);
}
.cta .waitlist { margin-top: 36px; }
.cta .waitlist__note { color: rgba(220, 246, 234, 0.7); opacity: 1; }

/* ---------- Footer ---------- */
.footer {
  padding: 40px 24px;
  border-top: 1px solid var(--border-soft);
  background: var(--off-white);
}
.footer__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand--footer { font-size: 17px; }
.footer__right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* Four links now, so they have to be allowed to wrap on narrow phones.
   row-gap is tighter than column-gap so a wrapped second row still reads as
   one block rather than two. */
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer__links a {
  font-size: 14px; font-weight: 500; color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.footer__links a:hover { color: var(--petrol); }
.footer__copy { margin: 0; font-size: 14px; color: var(--text-muted); }

/* ---------- Anchor offset ---------- */
/* Sticky nav is --nav-h tall; keep scrolled-to sections clear of it. */
#why, #faq, #join, #top, #widget { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* ---------- Keyboard focus ---------- */
/* Visible focus ring for keyboard users, hidden for mouse clicks. */
.tab:focus-visible,
.nav__cta:focus-visible,
.btn-submit:focus-visible,
.faq__q:focus-visible,
.brand:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 3px;
  border-radius: 8px;
}
.waitlist input:focus-visible { outline: none; } /* ring shown on the row wrapper */

/* Active nav tab (set by scroll-spy in JS) */
.tab.is-active { color: var(--deep-teal); background: rgba(16, 74, 76, 0.06); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
  .reasons { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .tabs { display: none; }
  .section { padding: 72px 22px; }
  .cta { padding: 80px 22px; }
}
@media (max-width: 440px) {
  .waitlist__row { flex-direction: column; padding: 8px; }
  .btn-submit { width: 100%; padding: 14px; }
  .waitlist input { padding: 12px 12px 8px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  /* The footer stacks here, so the right-hand column has to stop pushing its
     contents to the right - otherwise the wrapped legal links sit ragged. */
  .footer__right { align-items: flex-start; }
}

/* ---------- Scroll reveal ---------- */
/* Elements start slightly lowered and transparent, then ease into place
   once they enter the viewport (the .is-visible class is added by JS). */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  /* Drop the compositor hint once revealed - leaving will-change on keeps the
     element on its own layer, which softens/blurs SVG + text (the phone mockup). */
  will-change: auto;
}

/* Respect users who prefer no motion: show everything instantly. */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}