/* ============================================================================
   PinTrax landing page - AURORA LIGHT (redesign 29 Jul 2026)
   THESIS: the injection manager where your data glows only on your device. The page alternates deep
     aurora panels (hero/privacy/CTA) - app + headline glowing against ink - with clean light content;
     privacy dramatized as light in the dark. Refuses the flat light-teal Web3 template.
   OWN-WORLD: two grounds (pearl #f4f7f9 / aurora ink #071a2b). One signature gradient teal->violet->
     emerald carries display headlines (clip:text), the primary CTA, and layered aurora radial fields +
     faint starfield. Glass everywhere; on ink the hairline glows.
   FIRST VIEWPORT: dark aurora hero - gradient headline + glowing CTA left, two app phones glowing on
     aurora + starfield right.  FORM: aurora deep-space premium, rendered from the brand gradient as real
     material (not neon-on-black), hybridised with light content.  Constraints: self-contained, no CDN/
     external fonts, pure ASCII, mobile-first, all copy preserved. Full record: assets/Website/DESIGN.md
   ========================================================================== */
:root {
  --paper: #f4f7f9;
  --surface: #ffffff;
  --surface-soft: #f1f6f8;
  --border: #dce5ea;
  --border-strong: #cbdce5;
  --ink: #0a3550;                 /* primary TEXT on light */
  --muted: #43566a;
  --navy: #0b4a73;
  --teal: #0b7e8b;
  --teal-bright: #1ea4a3;
  --green: #00b25a;
  /* Aurora world */
  --night: #071a2b;               /* aurora ink ground */
  --night-2: #0b3150;
  --glow-teal: #1ea4a3;
  --glow-violet: #7259a8;
  --glow-emerald: #00d38a;
  --aurora: linear-gradient(118deg, #21b3ac 0%, #6f5bc0 50%, #17c589 100%);      /* signature gradient */
  --aurora-cta: linear-gradient(120deg, #1ea4a3 0%, #6f5bb5 55%, #0b4a73 100%);  /* CTA: dark end keeps white legible */
  --gradient: var(--aurora-cta);  /* back-compat alias */
  --ink-glass: rgba(255,255,255,.055);
  --ink-hairline: rgba(126,208,217,.28);
  --on-ink: rgba(255,255,255,.82);   /* body text on ink (AA) */
  --on-ink-dim: rgba(233,244,250,.62);
  --shadow: 0 28px 80px rgba(10, 53, 80, .13);
  --shadow-soft: 0 16px 45px rgba(10, 53, 80, .08);
  --max: 1220px;
}

/* Aurora ink panel: layered radial glows + faint starfield over the night ground. Reused by hero,
   privacy, and CTA. Committed material (the pinned world), not a floating haze. */
.aurora-bg { position: relative; background: var(--night); color: var(--on-ink); isolation: isolate; }
.aurora-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42rem 34rem at 12% -8%, rgba(33,179,172,.30), transparent 62%),
    radial-gradient(38rem 32rem at 88% 6%, rgba(111,91,192,.28), transparent 60%),
    radial-gradient(34rem 30rem at 72% 108%, rgba(23,197,137,.20), transparent 60%),
    linear-gradient(160deg, #071a2b 0%, #0a2740 58%, #071c30 100%);
}
.aurora-bg::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7) 1px, transparent 1.4px),
    radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,.55) 1px, transparent 1.4px),
    radial-gradient(1px 1px at 84% 62%, rgba(160,230,225,.6) 1px, transparent 1.4px),
    radial-gradient(1px 1px at 38% 78%, rgba(255,255,255,.45) 1px, transparent 1.4px),
    radial-gradient(1px 1px at 52% 42%, rgba(200,180,240,.5) 1px, transparent 1.4px);
  background-size: 260px 260px, 320px 320px, 300px 300px, 280px 280px, 240px 240px;
  mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 3%, rgba(30,164,163,.10), transparent 30rem),
    radial-gradient(circle at 97% 8%, rgba(11,74,115,.10), transparent 34rem),
    var(--paper);
  font-family: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background-image: radial-gradient(circle at 1px 1px, rgba(11,74,115,.13) 1px, transparent 1.1px);
  background-size: 27px 27px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
}
img { max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
figure { margin: 0; }
p { margin: 0; }

.shell { width: min(var(--max), calc(100% - 48px)); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 1000;
  transform: translateY(-160%);
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.skip-link:focus { transform: none; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(244,247,249,.9);
  border-bottom-color: rgba(203,220,229,.8);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 28px rgba(10,53,80,.05);
}
/* Over the dark aurora hero (not yet scrolled): white lockup + light nav (desktop inline nav only; the
   mobile dropdown is a light panel and keeps dark links). */
/* The lockup is SWAPPED, not filtered. brightness(0) invert(1) turned the full-colour lockup into
   a solid white silhouette: the pin glyph is a white body with a teal vial and a gradient outline,
   so flattening it leaves a featureless blob. */
.site-header .brand-mark-ondark { display: none; }
.site-header:not(.scrolled) .brand-mark-ondark { display: block; }
.site-header:not(.scrolled) .brand-mark-onlight { display: none; }
.site-header:not(.scrolled) .menu-toggle { border-color: rgba(160,215,222,.30); background: rgba(255,255,255,.08); }
.site-header:not(.scrolled) .menu-toggle span:not(.sr-only) { background: #fff; }
@media (min-width: 901px) {
  .site-header:not(.scrolled) .primary-nav > a { color: rgba(228,241,247,.86); }
  .site-header:not(.scrolled) .primary-nav > a:hover { color: #7fe0d6; }
}
.nav-row {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand { display: inline-flex; width: 132px; text-decoration: none; }   /* was 170px - nav scale, not hero scale */
.brand img { display: block; width: 100%; height: auto; }
.primary-nav { display: flex; align-items: center; gap: 28px; }
.primary-nav > a {
  color: #3d5d70;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: color .2s ease;
}
.primary-nav > a:hover { color: var(--teal); }
.primary-nav .nav-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  border-radius: 13px;
  color: #fff;
  background: var(--gradient);
  box-shadow: 0 12px 28px -10px rgba(30,164,163,.72);
}
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.8);
}
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; border-radius: 2px; background: var(--ink); }

.hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 44px;
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(6px); pointer-events: none; }
.hero-orb-one { width: 500px; height: 500px; right: -250px; top: 40px; background: radial-gradient(circle, rgba(30,164,163,.14), transparent 68%); }
.hero-orb-two { width: 380px; height: 380px; left: -230px; bottom: -180px; background: radial-gradient(circle, rgba(11,74,115,.10), transparent 68%); }
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(470px, 1.05fr);
  gap: 68px;
  align-items: center;
}
.badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid rgba(11,126,139,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  color: var(--teal);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(10,53,80,.05);
}
.badge span { width: 8px; height: 8px; border-radius: 50%; background: #00d38a; box-shadow: 0 0 0 5px rgba(0,211,138,.11); }
.kicker-line {
  margin: 26px 0 13px;
  color: var(--teal);
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 750;
  letter-spacing: -.03em;
}
.hero h1 {
  margin: 0;
  max-width: 680px;
  font-size: clamp(44px, 5.2vw, 72px);
  line-height: 1;
  letter-spacing: -.067em;
  font-weight: 800;
}
.hero h1 em { color: var(--teal); font-style: normal; }
.hero-text {
  max-width: 670px;
  margin-top: 27px;
  color: var(--muted);
  font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.64;
}
/* The switch argument, directly under the subhead: one sentence, lighter than .hero-text but still
   readable prose, not fine print. It is the reason a visitor already using another tracker keeps
   reading, so it sits above the fold and above the form. */
.hero-switch {
  max-width: 670px;
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.6;
}
.signup-form { display: flex; gap: 10px; }
.hero-form { max-width: 640px; margin-top: 30px; }
.signup-form input {
  min-width: 0;
  flex: 1;
  min-height: 56px;
  padding: 0 17px;
  border: 1px solid var(--border);
  border-radius: 13px;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.signup-form input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(11,126,139,.10); }
.signup-form input::placeholder { color: #9babb6; }
.signup-form button {
  min-height: 56px;
  padding: 0 21px;
  border: 0;
  border-radius: 13px;
  color: #fff;
  background: var(--gradient);
  font-weight: 800;
  box-shadow: 0 14px 28px -9px rgba(30,164,163,.72);
  white-space: nowrap;
}
.signup-form button span { margin-left: 5px; }
.form-note { margin-top: 12px; color: #566b7c; font-size: 13px; line-height: 1.5; }
.form-note span { color: var(--teal); font-weight: 900; }
.trust-trio {
  max-width: 650px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.trust-trio div { padding-right: 24px; }
.trust-trio div + div { padding-left: 24px; border-left: 1px solid var(--border); }
.trust-trio strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 14px; }
.trust-trio span { color: var(--muted); font-size: 12px; line-height: 1.4; }

.hero-stage { position: relative; min-height: 690px; }
.hero-photo {
  position: absolute;
  right: 0;
  top: 25px;
  width: 74%;
  height: 600px;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: var(--shadow);
}
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(244,247,249,.65) 0%, rgba(244,247,249,.10) 48%, rgba(11,74,115,.08)); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; filter: saturate(.78) contrast(.96); }
.device {
  position: absolute;
  z-index: 2;
  width: 205px;
  padding: 13px 10px 12px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 39px;
  background: #09283a;
  box-shadow: 0 27px 60px rgba(10,53,80,.28), inset 0 0 0 1px rgba(255,255,255,.12);
}
.device img { display: block; width: 100%; border-radius: 28px; }
.device-camera {
  position: absolute;
  z-index: 3;
  top: 5px;
  left: 50%;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  transform: translateX(-50%);
}
.device-front { left: 30px; top: 178px; transform: rotate(-4deg); }
.device-heat { left: 188px; right: auto; top: 138px; transform: rotate(4deg); }

/* --- Hero as an aurora ink panel (.hero.aurora-bg) --- */
.hero { padding: 116px 0 96px; }
.hero .hero-orb { display: none; }                 /* aurora-bg supplies the glows + starfield */
.hero .badge { border-color: rgba(126,208,217,.30); background: rgba(255,255,255,.06); color: #9fe9e2; box-shadow: 0 8px 26px rgba(0,0,0,.30); }
.hero .badge span { background: #23e39a; box-shadow: 0 0 0 5px rgba(0,211,138,.20); }
.hero .kicker-line { color: #8fd8e6; }
.hero h1 { color: #fff; text-shadow: 0 2px 34px rgba(12,52,80,.5); }
.hero h1 em {
  background: var(--aurora); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 6px 30px rgba(46,190,180,.42));
}
.hero .hero-text { color: var(--on-ink); }
.hero .signup-form input { background: rgba(255,255,255,.07); border-color: rgba(160,215,222,.26); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.hero .signup-form input::placeholder { color: rgba(220,236,242,.6); }
.hero .signup-form input:focus { border-color: var(--glow-teal); box-shadow: 0 0 0 4px rgba(30,164,163,.24); }
.hero .signup-form button { background: var(--aurora-cta); box-shadow: 0 18px 36px -10px rgba(46,180,180,.62); }
.hero .form-note { color: var(--on-ink-dim); }
/* The switch line needs the on-ink override like every other hero text element: the base rule uses
   var(--muted), which is a dark slate meant for light sections and is close to invisible on the aurora
   panel. Sits between .hero-text (--on-ink) and .form-note (--on-ink-dim) in weight, because it has to
   actually be read - it is the reason a visitor on another tracker keeps scrolling. */
.hero .hero-switch { color: var(--on-ink); opacity: .84; }
.hero .form-note span { color: #7fe0d6; }
.hero .trust-trio { border-top-color: rgba(160,215,222,.20); }
.hero .trust-trio div + div { border-left-color: rgba(160,215,222,.16); }
.hero .trust-trio strong { color: #fff; }
.hero .trust-trio span { color: var(--on-ink-dim); }
.hero-photo::after { background: linear-gradient(150deg, rgba(6,20,33,.66) 0%, rgba(6,20,33,.16) 46%, rgba(111,91,192,.22)); }
.hero-photo img { filter: saturate(.82) contrast(.98) brightness(.94); }

.stats-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(255,255,255,.68); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-grid > div { min-height: 122px; display: flex; align-items: center; gap: 18px; padding: 24px 30px; }
.stats-grid > div + div { border-left: 1px solid var(--border); }
.stats-grid strong { font-size: 35px; letter-spacing: -.05em; background: var(--aurora); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.stats-grid span { max-width: 135px; color: var(--muted); font-size: 13px; line-height: 1.4; }

.section { padding: 112px 0; }
.section-heading { margin-bottom: 52px; }
.section-heading.centered { max-width: 760px; margin-inline: auto; text-align: center; }
.section-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--teal);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-kicker.light { color: #70e0d9; }
.section-heading h2, .calculator-copy h2, .privacy-copy h2, .faq-intro h2, .waitlist-copy h2 {
  margin: 0;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.02;
  letter-spacing: -.057em;
}
/* Light-section display headings carry the aurora gradient; dark-panel headings (privacy/waitlist) stay
   white for maximum presence on ink. */
.section-heading h2, .calculator-copy h2, .faq-intro h2 {
  background: var(--aurora); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section-heading p { color: var(--muted); font-size: 17px; line-height: 1.65; }

.how-section { background: rgba(255,255,255,.46); }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step-card {
  position: relative;
  overflow: hidden;
  min-height: 685px;
  padding: 30px 30px 0;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-soft);
}
.step-number {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--gradient);
  font-size: 13px;
  font-weight: 850;
}
.step-card h3 { margin: 0 0 11px; font-size: 24px; letter-spacing: -.035em; }
.step-card p { min-height: 115px; color: var(--muted); font-size: 15px; line-height: 1.62; }
.step-screen { position: absolute; left: 28px; right: 28px; bottom: -60px; overflow: hidden; background: var(--surface-soft); box-shadow: 0 20px 42px rgba(10,53,80,.14); }
.phone-window { height: 430px; border: 9px solid #0a2d40; border-radius: 32px 32px 0 0; }
.phone-window img { width: 100%; height: auto; display: block; }
.modal-window { bottom: 34px; border: 1px solid var(--border-strong); border-radius: 25px; }
.modal-window img { width: 100%; display: block; }

.features-section { padding-top: 60px; padding-bottom: 92px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.feature-card {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  padding: 35px;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow-soft);
}
.feature-wide { grid-column: span 2; min-height: 520px; display: grid; grid-template-columns: .86fr 1.14fr; align-items: center; gap: 40px; }
.feature-copy { position: relative; z-index: 2; }
.feature-icon { display: block; width: 38px; height: 38px; margin-bottom: 22px; color: var(--teal); }
.feature-card h3 { margin: 0 0 13px; font-size: 30px; line-height: 1.12; letter-spacing: -.045em; }
.feature-card h3 small { display: inline-block; padding: 4px 8px; border: 1px solid rgba(11,126,139,.25); border-radius: 7px; color: var(--teal); background: #eaf7f7; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; vertical-align: .35em; }
.feature-card p { max-width: 510px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.feature-media { overflow: hidden; background: var(--surface-soft); box-shadow: 0 18px 45px rgba(10,53,80,.15); }
.device-mini {
  position: absolute;
  width: 270px;
  right: 36px;
  bottom: -105px;
  padding: 9px;
  border-radius: 32px;
  background: #09283a;
}
.device-mini img { display: block; width: 100%; border-radius: 24px; }
.feature-wide > .device-mini { position: relative; width: min(330px, 90%); right: auto; bottom: auto; justify-self: center; transform: rotate(2deg); }
.crop-card { position: absolute; left: 32px; right: 32px; bottom: 30px; border: 1px solid var(--border-strong); border-radius: 24px; }
.crop-card img { display: block; width: 100%; }
.feature-trends { grid-template-columns: .7fr 1.3fr; }
.trend-pair { display: flex; align-items: flex-end; justify-content: center; gap: 22px; min-height: 420px; }
.trend-pair .device-mini { position: relative; width: 250px; right: auto; bottom: auto; }
.trend-pair .device-mini:first-child { transform: rotate(-2deg) translateY(24px); }
.trend-pair .device-mini:last-child { transform: rotate(2deg); }

/* Non-wide feature cards: copy stacked above a contained screenshot preview, both in normal flow, so the
   text can never overlap the image. (The absolute-positioned "phone peek" collided with the longer copy
   and pushed the Schedules screenshot off the card.) The wide first card keeps its two-column grid. */
.feature-card:not(.feature-wide) { display: flex; flex-direction: column; min-height: 0; }
.feature-card:not(.feature-wide) .feature-copy { position: static; }
.feature-card:not(.feature-wide) .feature-media {
  position: static; inset: auto; right: auto; left: auto; bottom: auto; top: auto; transform: none;
  width: min(310px, 84%); margin: 34px auto 0;
  height: 320px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent);
          mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.feature-card:not(.feature-wide) .feature-media img { width: 100%; height: auto; display: block; }

/* Minimal line icons, drawn in CSS so no icon library or external request is needed. */
.target-icon { border: 3px solid var(--teal); border-radius: 50%; box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 9px var(--teal); }
.target-icon::after { content: ""; display: block; width: 6px; height: 6px; margin: 13px; border-radius: 50%; background: var(--teal); }
.vial-icon { border: 3px solid var(--teal); border-radius: 5px 5px 8px 8px; position: relative; }
.vial-icon::before { content: ""; position: absolute; left: 4px; right: 4px; top: -8px; height: 7px; border-radius: 3px 3px 0 0; background: var(--teal); }
.vial-icon::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 7px; height: 9px; border-radius: 4px; background: rgba(30,164,163,.25); }
.syringe-icon { position: relative; transform: rotate(-38deg); border: 3px solid var(--teal); border-radius: 4px; width: 30px; height: 14px; margin-top: 12px; }
.syringe-icon::before { content: ""; position: absolute; right: -13px; top: 4px; width: 13px; height: 2px; background: var(--teal); }
.syringe-icon::after { content: ""; position: absolute; left: -9px; top: 2px; width: 7px; height: 6px; border: 2px solid var(--teal); }
.calendar-icon { border: 3px solid var(--teal); border-radius: 7px; position: relative; }
.calendar-icon::before { content: ""; position: absolute; left: -3px; right: -3px; top: 8px; border-top: 3px solid var(--teal); }
.calendar-icon::after { content: ""; position: absolute; left: 8px; bottom: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--teal); box-shadow: 11px 0 var(--teal); }
.chart-icon { position: relative; border-left: 3px solid var(--teal); border-bottom: 3px solid var(--teal); }
.chart-icon::after { content: ""; position: absolute; left: 5px; right: 2px; bottom: 8px; height: 18px; border-left: 5px solid var(--teal); border-right: 5px solid var(--teal); box-shadow: 10px 7px 0 -1px var(--teal); transform: skewY(-26deg); }
.export-icon { position: relative; border: 3px solid var(--teal); border-radius: 7px; }
.export-icon::before { content: "\2191"; position: absolute; left: 50%; top: -15px; transform: translateX(-50%); color: var(--teal); font-size: 25px; font-weight: 800; background: var(--surface); line-height: 1; }

.extras-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 24px;
  padding: 20px 30px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow-soft);
}
.extras-label { flex: 0 0 auto; padding-right: 26px; color: var(--teal); font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.extras-strip ul { flex: 1; min-width: 260px; display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; list-style: none; }
.extras-strip li { display: flex; flex-direction: column; gap: 3px; padding: 0 24px; }
.extras-strip li + li { border-left: 1px solid var(--border); }
.extras-strip li strong { color: var(--ink); font-size: 15px; }
.extras-strip li span { color: var(--muted); font-size: 13px; }

.calculator-section { padding-top: 28px; }
.calculator-card {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 68px;
  align-items: center;
  min-height: 700px;
  padding: 62px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 32px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
}
.calculator-device { position: relative; min-height: 580px; }
.device-calc { width: 310px; left: 18px; top: -25px; transform: rotate(-5deg); }
.calculator-copy h2 { max-width: 650px; }
.worked-label { margin-top: 28px; color: var(--muted); font-size: 13px; font-weight: 750; text-transform: uppercase; letter-spacing: .10em; }
.equation-row { display: flex; align-items: center; gap: 13px; margin-top: 18px; }
.equation-row > div { min-width: 100px; }
.equation-row strong { display: block; font-size: 18px; }
.equation-row span { color: var(--muted); font-size: 11px; }
.equation-row b { color: #a7b7c1; font-size: 19px; }
.result-strip { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; border: 1px solid var(--border); border-radius: 16px; background: #edf8f8; }
.result-strip > div { padding: 19px 17px; text-align: center; }
.result-strip > div + div { border-left: 1px solid rgba(11,126,139,.14); }
.result-strip strong { display: block; color: var(--teal); font-size: 19px; }
.result-strip span { color: var(--muted); font-size: 11px; }
.check-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 25px; margin: 28px 0 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 24px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 900; }

.privacy-section { padding: 90px 0; color: #fff; }
.privacy-card {
  display: grid;
  grid-template-columns: .55fr 1.45fr;
  gap: 72px;
  align-items: center;
  min-height: 500px;
  padding: 68px;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--ink-hairline);
  backdrop-filter: blur(16px);
  box-shadow: 0 34px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.privacy-graphic { display: grid; place-items: center; }
.privacy-ring {
  width: 270px;
  height: 270px;
  display: grid;
  place-items: center;
  padding: 28px;
  border-radius: 50%;
  background: conic-gradient(from 205deg, #0b4a73, #0b7e8b, #1fc8bd, #0b4a73);
  box-shadow: 0 25px 60px rgba(0,0,0,.25);
}
.privacy-ring::before { content: ""; position: absolute; }
.privacy-ring img { width: 100%; border-radius: 50%; background: #fff; }
.privacy-copy h2 { margin-bottom: 22px; }
.privacy-copy > p { max-width: 780px; color: rgba(255,255,255,.78); font-size: 17px; line-height: 1.75; }
.privacy-proof { margin-top: 18px; }
/* Site-analytics disclosure (24 Aug 2026). Set quieter than the surrounding copy but not
   hidden: it is a factual correction to the claims around it, so it has to be readable. */
.privacy-site-note { margin-top: 18px; font-size: 15.5px !important;
  color: rgba(233,244,250,.66) !important; border-left: 2px solid var(--ink-hairline);
  padding-left: 16px; }
.privacy-proof strong { color: #fff; }
.privacy-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; color: #8bf1ea; font-weight: 800; text-decoration: none; }

.gallery-section { padding-top: 78px; padding-bottom: 40px; }
.screen-gallery { display: flex; gap: 28px; overflow-x: auto; padding: 8px 4px 28px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.screen-gallery figure { flex: 0 0 270px; scroll-snap-align: start; text-align: center; }
.gallery-phone { padding: 9px; overflow: hidden; border-radius: 33px; background: #09283a; box-shadow: 0 20px 50px rgba(10,53,80,.18); }
.gallery-phone img { display: block; width: 100%; border-radius: 25px; }
.screen-gallery figcaption { margin-top: 14px; color: var(--muted); font-size: 14px; font-weight: 700; }

.faq-section { padding-top: 62px; background: rgba(255,255,255,.48); }
.faq-grid { display: grid; grid-template-columns: .62fr 1.38fr; gap: 76px; align-items: start; }
.faq-intro { position: sticky; top: 118px; }
.faq-intro h2 { margin-bottom: 20px; }
.faq-intro p { max-width: 360px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.accordion { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 2px; border: 0; background: transparent; color: var(--ink); text-align: left; font-size: 17px; font-weight: 750; }
.faq-item button i { position: relative; flex: 0 0 30px; width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: 50%; }
.faq-item button i::before, .faq-item button i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: var(--teal); transform: translate(-50%,-50%); transition: transform .2s ease; }
.faq-item button i::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item.open button i::after { transform: translate(-50%,-50%) rotate(0deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq-answer > p { overflow: hidden; padding: 0 45px 0 0; color: var(--muted); font-size: 15px; line-height: 1.72; transition: padding .28s ease; }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer > p { padding-bottom: 25px; }

.waitlist-section { padding: 10px 0 112px; }
.waitlist-card {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 54px;
  align-items: center;
  padding: 58px 62px;
  border-radius: 30px;
  color: #fff;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ink-hairline);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.waitlist-copy h2 { margin-bottom: 16px; }
.waitlist-copy p { max-width: 590px; color: rgba(255,255,255,.75); font-size: 16px; line-height: 1.65; }
.final-form { flex-direction: column; }
.final-form input { background: #fff; }
.final-form button { width: 100%; }

.site-footer { border-top: 1px solid var(--border); background: rgba(255,255,255,.7); }
.footer-main { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; padding: 58px 0 42px; }
.footer-brand { width: 165px; }
.footer-brand-block p { margin-top: 17px; color: var(--teal); font-size: 14px; font-weight: 750; }
.footer-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 45px; }
.footer-nav > div { display: flex; flex-direction: column; gap: 11px; }
.footer-nav strong { margin-bottom: 5px; color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.footer-nav a { width: fit-content; color: var(--muted); font-size: 14px; text-decoration: none; }
.footer-nav a:hover { color: var(--teal); }
.footer-legal { padding: 25px 0 34px; border-top: 1px solid var(--border); }
.footer-legal p { max-width: 970px; color: #5b7181; font-size: 12px; line-height: 1.65; }

@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .hero-stage { transform: scale(.9); transform-origin: center; }
  .feature-wide { grid-template-columns: .8fr 1.2fr; }
  .calculator-card { grid-template-columns: .65fr 1.35fr; gap: 42px; padding: 50px; }
  .privacy-card { grid-template-columns: .48fr 1.52fr; gap: 45px; padding: 55px; }
}

@media (max-width: 900px) {
  .primary-nav { display: none; position: absolute; left: 24px; right: 24px; top: 68px; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.98); box-shadow: var(--shadow-soft); }
  .primary-nav.open { display: flex; }
  .primary-nav > a { padding: 13px 12px; }
  .primary-nav .nav-cta { margin-top: 6px; justify-content: center; }
  .menu-toggle { display: block; }
  .hero { padding-top: 64px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-stage { min-height: 640px; transform: none; max-width: 680px; margin-inline: auto; width: 100%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .stats-grid > div:nth-child(4) { border-top: 1px solid var(--border); }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 720px; max-width: 560px; margin-inline: auto; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-wide { grid-column: auto; display: flex; flex-direction: column; min-height: 0; }
  .feature-wide > .device-mini { position: static; right: auto; bottom: auto; width: min(320px, 86%); margin: 32px auto 0; transform: none; }
  .feature-trends { min-height: 750px; }
  .trend-pair { position: absolute; left: 30px; right: 30px; bottom: -80px; }
  .calculator-card { grid-template-columns: 1fr; }
  .calculator-device { min-height: 520px; }
  .device-calc { left: 50%; transform: translateX(-50%) rotate(-3deg); }
  .privacy-card { grid-template-columns: 1fr; text-align: center; }
  .privacy-copy > p { margin-inline: auto; }
  .faq-grid { grid-template-columns: 1fr; gap: 42px; }
  .faq-intro { position: static; }
  .waitlist-card { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 28px, var(--max)); }
  .nav-row { min-height: 70px; }
  .brand { width: 145px; }
  .hero { padding: 50px 0 62px; }
  .hero h1 { font-size: clamp(38px, 10.5vw, 52px); }
  .hero-text { font-size: 16px; }
  .signup-form { flex-direction: column; }
  .signup-form button { width: 100%; }
  .trust-trio { grid-template-columns: 1fr; gap: 15px; }
  .trust-trio div, .trust-trio div + div { padding: 0; border-left: 0; }
  .trust-trio div + div { padding-top: 15px; border-top: 1px solid var(--border); }
  .hero-stage { min-height: 525px; margin-top: 12px; }
  .hero-photo { width: 82%; height: 430px; }
  .device { width: 205px; padding: 9px 7px 8px; border-radius: 29px; }
  .device img { border-radius: 21px; }
  .device-front { left: 1px; top: 72px; }
  .device-heat { left: auto; right: 0; top: 100px; }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid > div { min-height: 94px; padding: 20px 22px; }
  .stats-grid > div + div, .stats-grid > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--border); }
  .section { padding: 78px 0; }
  .section-heading h2, .calculator-copy h2, .privacy-copy h2, .faq-intro h2, .waitlist-copy h2 { font-size: clamp(38px, 11vw, 52px); }
  .steps-grid { gap: 18px; }
  .step-card { min-height: 650px; padding: 24px 22px 0; }
  .step-card p { min-height: 125px; }
  .step-screen { left: 20px; right: 20px; }
  .phone-window { height: 390px; }
  .feature-card { min-height: 575px; padding: 28px 24px; }
  .feature-wide { min-height: 0; }
  .feature-card h3 { font-size: 27px; }
  .feature-wide > .device-mini { right: auto; bottom: auto; width: min(320px, 90%); transform: none; }
  .crop-card { left: 18px; right: 18px; bottom: 22px; }
  .device-mini { right: 50%; width: 250px; transform: translateX(50%); }
  .trend-pair { left: 16px; right: 16px; gap: 10px; }
  .trend-pair .device-mini { width: 195px; }
  .extras-strip { flex-direction: column; align-items: stretch; gap: 0; padding: 22px 24px; }
  .extras-label { padding: 0 0 14px; }
  .extras-strip ul { grid-template-columns: 1fr; }
  .extras-strip li { padding: 14px 0; }
  .extras-strip li + li { border-left: 0; border-top: 1px solid var(--border); }
  .calculator-section { padding-top: 0; }
  .calculator-card { gap: 30px; padding: 34px 22px; border-radius: 26px; }
  .calculator-device { min-height: 470px; }
  .device-calc { width: 255px; }
  .equation-row { flex-wrap: wrap; }
  .equation-row > div { min-width: 42%; }
  .result-strip { grid-template-columns: 1fr; }
  .result-strip > div + div { border-left: 0; border-top: 1px solid rgba(11,126,139,.14); }
  .check-list { grid-template-columns: 1fr; }
  .privacy-section { padding: 55px 0; }
  .privacy-card { padding: 38px 24px; border-radius: 26px; }
  .privacy-ring { width: 210px; height: 210px; padding: 22px; }
  .privacy-copy > p { font-size: 15px; }
  .screen-gallery figure { flex-basis: 230px; }
  .faq-item button { font-size: 15px; }
  .waitlist-section { padding-bottom: 78px; }
  .waitlist-card { padding: 38px 24px; border-radius: 25px; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; padding-top: 45px; }
  .footer-nav { gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Store badges (hero). The two official assets are NOT the same aspect ratio and neither is
   scaled to match the other's box: Apple's SVG is the badge itself at 119.66x40, Google's PNG
   carries its required clear space inside the file (visible artwork 564x168 of a 646x250
   canvas). Rendering the Play canvas at 60px tall puts its VISIBLE height at 40px, level with
   Apple's. Centring on the cross axis then lines the two artworks up, and Google's built-in
   padding supplies most of the clear space both brands require, which is why the gap is small. */
/* Hero download line. Same display treatment as a section headline - the h2 rule below owns the face,
   line-height and tracking - but on its own smaller clamp, because at the section clamp (40-66px) it
   competes with the hero h1 sitting right above it at 58-92px. White rather than the aurora gradient,
   matching how the other dark-panel headings (privacy, waitlist) are handled. */
.hero .download-line {
  margin: 30px 0 0;
  color: #fff;
  font-size: clamp(27px, 2.6vw, 36px);
  line-height: 1.02;
  letter-spacing: -.057em;
  font-weight: 800;
}
.store-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.store-badge { display: inline-flex; line-height: 0; border-radius: 8px; }
.store-badge:focus-visible { outline: 2px solid var(--brand, #0B7E8B); outline-offset: 3px; }
.badge-apple { height: 40px; width: auto; display: block; }
.badge-play { height: 60px; width: auto; display: block; }
.footer-trademark { font-size: .78rem; opacity: .62; }

/* ---- 30 Sep 2026: pricing home, tier lines, worked-example table ------------------------
   Added for the AI-legibility pass. Prices and limits live in real <table>s so a crawler that
   never runs JavaScript reads them as data, and each feature card says which tier it is on. */
.hero-facts { font-weight: 600; }
.hero-facts a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.feature-tier { margin-top: 14px; color: var(--teal); font-size: 14px; font-weight: 700; }
.section-heading p a { color: var(--teal); }
.worked-table { width: 100%; margin-top: 22px; border-collapse: collapse; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #edf8f8; font-size: 15px; }
.worked-table caption { caption-side: top; text-align: left; padding-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.worked-table th, .worked-table td { padding: 10px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.worked-table th { color: var(--muted); font-weight: 600; }
.worked-table td { color: var(--ink); font-weight: 700; text-align: right; }
.worked-table tr:last-child th, .worked-table tr:last-child td { border-bottom: 0; }
.worked-table .worked-result th, .worked-table .worked-result td { color: var(--teal); font-size: 17px; }

/* ---- Pricing, rebuilt 30 Sep 2026 (Bob's brief): an aurora ink panel with two ink-glass plan
   cards, the full comparison behind a native <details> toggle (in the raw HTML either way, so a
   crawler reads it without JavaScript), and a muted footnote. The comparison table is the fact
   source for the free/Pro boundary; only its styling lives here. */
.pricing-section { padding: 112px 0; }
.pricing-section h2 { color: #fff; }
.pricing-section .section-heading .pricing-lead { margin-top: 16px; color: var(--on-ink); font-size: 19px; line-height: 1.55; }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 980px; }
.plan-card {
  padding: 34px 32px;
  border-radius: 26px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--ink-hairline);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.plan-pro { background: rgba(255,255,255,.075); border-color: rgba(112,224,217,.45); }
.plan-card h3 { margin: 0; color: #fff; font-size: 22px; letter-spacing: -.02em; }
.plan-price { margin-top: 14px; color: #fff; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em; }
.plan-note { margin-top: 8px; color: var(--on-ink-dim); font-size: 15px; }
.plan-list { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--ink-hairline); list-style: none; }
.plan-list li { position: relative; padding: 6px 0 6px 24px; color: var(--on-ink); font-size: 15px; line-height: 1.5; }
.plan-list li::before { content: "\2713"; position: absolute; left: 0; color: #70e0d9; font-weight: 900; }
.plan-compare { max-width: 980px; margin-top: 30px; }
.plan-compare summary { cursor: pointer; color: #8bf1ea; font-weight: 700; font-size: 15px; }
.plan-compare summary:focus-visible { outline: 2px solid #8bf1ea; outline-offset: 4px; border-radius: 4px; }
.plan-table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--ink-hairline); border-radius: 16px; }
.pricing-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pricing-table th, .pricing-table td { padding: 11px 16px; text-align: left; vertical-align: top; font-weight: 400; color: var(--on-ink); }
.pricing-table thead th { color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--ink-hairline); }
.pricing-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.035); }
.pricing-table tbody th { width: 46%; }
.pricing-terms { max-width: 980px; margin-top: 24px; color: var(--on-ink-dim); font-size: 13px; line-height: 1.6; }
@media (max-width: 680px) {
  .pricing-section { padding: 78px 0; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { padding: 26px 22px; }
  .plan-price { font-size: 25px; }
  .pricing-table { font-size: 13px; }
  .pricing-table th, .pricing-table td { padding: 10px; }
  .pricing-table tbody th { width: 42%; }
}