/*
 * Landing page styles. Sections in document order.
 *
 * The visual approach borrows futureclinic.com's structure — an eyebrow above
 * every heading, italic emphasis on one fragment of each headline, a stat strip,
 * an us-vs-them comparison, a card grid, an accordion FAQ — and renders it in
 * NoteFusion's own tokens (see theme.css). Nothing here overrides a token.
 */

/* ── Section rhythm ──────────────────────────────────────────────────────────
 * Every section is eyebrow → headline → body. The eyebrow is what lets a
 * scanner work out where they are without reading the headline.
 */

section {
  padding: 96px 0;
}

/* First tab stop on every load, so a keyboard user is not walked through six
   nav links before reaching the page. Off-screen until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--blue-deep);
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 0 0 var(--r-md) 0;
  box-shadow: var(--sh-card-lift);
}
.skip-link:focus {
  left: 0;
}

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 var(--s-md);
}
.eyebrow--on-blue {
  color: #fff;
}

h2 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  font-weight: 700;
  margin: 0 0 var(--s-lg);
  max-width: 20ch;
}

/* The page's main typographic device: one fragment of each headline set in
   italic, so the eye has somewhere to land in an otherwise flat block. */
h2 em,
h1 em {
  font-style: italic;
  color: var(--blue);
}

.lede {
  font-size: 1.075rem;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0 0 var(--s-xl);
}

.section-head {
  margin-bottom: var(--s-3xl);
}
.section-head--center {
  text-align: center;
}
.section-head--center h2,
.section-head--center .lede {
  margin-left: auto;
  margin-right: auto;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 247, 252, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--border);
  box-shadow: 0 1px 12px rgba(15, 23, 42, 0.04);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: var(--s-xl);
  height: 76px;
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-row:hover {
  text-decoration: none;
}
.brand-row .tagline {
  display: block;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-xl);
}
/* :not(.btn) so the CTA keeps its own colour — a bare `.site-nav a` outranks
   `.btn--primary` and would paint the button label muted grey. */
.site-nav a:not(.btn) {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.95rem;
}
.site-nav a:not(.btn):hover {
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 860px) {
  .site-nav a:not(.btn) {
    display: none;
  }
  .brand-row .tagline {
    display: none;
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding: 48px 0 80px;
  position: relative;
  overflow: hidden;
}

/* A soft blue wash bleeding out of the top-left, so the Mist canvas isn't a
   flat field behind the most important text on the site. */
.hero::before {
  content: "";
  position: absolute;
  top: -280px;
  left: -180px;
  width: 720px;
  height: 720px;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.16) 0%,
    rgba(59, 130, 246, 0) 70%
  );
  pointer-events: none;
}

/* `align-items: start`, not `center`. Centring returns only half of every pixel
   trimmed from this column, because the phone column is taller and the whole
   row re-centres around it. It was worth ~30px of CTA depth on its own. */
.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--s-3xl);
  align-items: start;
}

.hero h1 {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin: 0 0 var(--s-md);
}

.hero .lede {
  font-size: 1.075rem;
  margin-bottom: var(--s-lg);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-md);
  align-items: center;
}

/* The Play badge PNG carries its own transparent margin, which *is* the clear
   space Google's guidelines require — so it needs no padding of its own, and
   nothing may be placed inside that margin. Height is left to the aspect ratio
   of the 646 × 250 artwork. */
.store-badge {
  display: inline-block;
  line-height: 0;
  transition: transform 0.18s ease;
}
.store-badge img {
  width: 182px;
  height: auto;
}
.store-badge:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-lg);
  margin: var(--s-lg) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: var(--s-sm);
}
.hero-trust svg {
  color: var(--success);
  flex: none;
}

/* Pill listing what the app hears, directly under the CTA. The explicit bottom
   margin resets the UA's `ul { margin: 1em 0 }`, which otherwise adds 16px of
   dead space to the tallest column in the hero. */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm);
  margin: var(--s-xl) 0 0;
  padding: 0;
  list-style: none;
}
.hero-chips li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 7px 15px;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-muted);
  box-shadow: var(--sh-card);
}

/* ── Phone mock ────────────────────────────────────────────────────────────
 * A real screenshot inside a drawn bezel. Cheaper than a device photo and it
 * stays sharp at any density.
 */

/* Four faint stave lines behind the phone, so the right half of the hero reads
   as music rather than as an empty gutter. Purely decorative. */
.phone-col {
  position: relative;
}
.phone-col::before {
  content: "";
  position: absolute;
  inset: 18% -6% auto -6%;
  height: 64px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(37, 99, 235, 0.16) 0 1px,
    transparent 1px 16px
  );
  pointer-events: none;
}

.phone {
  position: relative;
  margin: 0 auto;
  width: min(300px, 78vw);
  padding: 12px;
  background: #0f172a;
  border-radius: 42px;
  box-shadow: 0 40px 80px rgba(15, 23, 42, 0.28),
    0 0 0 2px rgba(15, 23, 42, 0.06);
}
.phone img {
  border-radius: 32px;
  width: 100%;
}

/* Floating "Doh is D" card overlapping the bezel — shows the product's actual
   output rather than only its chrome. */
.phone-badge {
  position: absolute;
  left: -46px;
  bottom: 92px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 12px 16px;
  box-shadow: var(--sh-card-lift);
}
.phone-badge .k {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.phone-badge .v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--blue-deep);
}

/* The two outputs, named beside the screenshot. Decorative duplicates of copy
   that already appears in the h1 and the feature grid, so they are
   `aria-hidden` in the markup and dropped entirely once the phone has the
   column to itself. */
.phone-chip {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 14px;
  box-shadow: var(--sh-card-lift);
  color: var(--blue-deep);
}
.phone-chip .k {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.phone-chip .v {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--blue-deep);
  white-space: nowrap;
  margin-top: 2px;
}
.phone-chip--solfa {
  left: -58px;
  top: 56px;
}
.phone-chip--staff {
  right: -54px;
  top: 210px;
  display: grid;
  gap: 4px;
  justify-items: center;
}

@media (max-width: 940px) {
  .hero {
    padding: 32px 0 64px;
  }
  .hero .wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero .lede {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta,
  .hero-trust,
  .hero-chips {
    justify-content: center;
  }
  .phone-badge {
    left: -12px;
  }
  .phone-chip,
  .phone-col::before {
    display: none;
  }
}

/* ── Stat strip ──────────────────────────────────────────────────────────── */

.stats {
  padding: 0 0 24px;
}
.stats .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.stat {
  background: var(--surface);
  padding: var(--s-xl);
  text-align: center;
}
.stat b {
  display: block;
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  color: var(--blue-deep);
  line-height: 1.2;
}
.stat span {
  font-size: 0.85rem;
  color: var(--text-muted);
}
@media (max-width: 720px) {
  .stats .wrap {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── How it works ────────────────────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  box-shadow: var(--sh-card);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  background: var(--fusion-contrast);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: var(--s-lg);
  box-shadow: var(--sh-glow);
}
.step h3 {
  margin: 0 0 var(--s-sm);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.step p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ── Feature grid ────────────────────────────────────────────────────────── */

.features {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
}
.feature {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card-lift);
}
.feature .icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-lg);
  color: var(--blue);
}
.feature h3 {
  margin: 0 0 var(--s-sm);
  font-size: 1.075rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.feature p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.feature .meta {
  display: block;
  margin-top: var(--s-md);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 500;
}

@media (max-width: 900px) {
  .steps,
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ── African mode — the differentiator, so it gets the full-bleed blue ───── */

.african {
  background: var(--fusion);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.african::after {
  content: "";
  position: absolute;
  right: -140px;
  top: -140px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  pointer-events: none;
}
.african .wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3xl);
  align-items: center;
}
/* A grid item's default min-width is auto, so the nowrap solfa line below sets
   a min-content floor and pushes the column past the viewport. The section
   clips it rather than scrolling, so the text would simply vanish off-screen. */
.african .wrap > * {
  min-width: 0;
}
.african h2 {
  color: #fff;
  max-width: 16ch;
}
.african h2 em {
  color: #dbeafe;
}
/* Solid white, not a translucent white. Over the light end of a 135deg gradient
   ending in #3B82F6, white at .86 falls to 3.1:1. */
.african p {
  color: #fff;
  font-size: 1.05rem;
}
.african-list {
  list-style: none;
  margin: var(--s-xl) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-md);
}
.african-list li {
  display: flex;
  gap: var(--s-md);
  align-items: flex-start;
  color: #fff;
  font-size: 0.975rem;
}
.african-list svg {
  flex: none;
  margin-top: 3px;
}

/* Dark glass, not light. This panel sits in the right-hand column, which is the
   *light* end of the gradient; a white 10% fill lifted the background further
   and left the sample output at ~2.2:1. A 22% ink wash instead puts white text
   back over 5:1 and reads as a screen rather than a frosted card. */
.solfa-panel {
  background: rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.solfa-panel .title {
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 var(--s-xs);
  color: #fff;
}
.solfa-panel .doh {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff;
  font-weight: 500;
  font-size: 0.9rem;
  margin: 0 0 var(--s-lg);
}
.solfa-sample {
  margin: 0;
  overflow-x: auto;
}
.solfa-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: #fff;
  background: rgba(15, 23, 42, 0.25);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 0 0 var(--s-sm);
  white-space: nowrap;
}
.solfa-panel .caption {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
  margin: var(--s-md) 0 0;
}

@media (max-width: 900px) {
  .african .wrap {
    grid-template-columns: 1fr;
  }
}

/* ── Comparison ──────────────────────────────────────────────────────────── */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-xl);
}
.compare-col {
  border-radius: var(--r-lg);
  padding: var(--s-xl);
  border: 1px solid var(--border);
}
.compare-col h3 {
  margin: 0 0 var(--s-lg);
  font-size: 1.075rem;
  font-weight: 600;
}
.compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-md);
}
.compare-col li {
  display: flex;
  gap: var(--s-md);
  align-items: flex-start;
  font-size: 0.95rem;
}
.compare-col li svg {
  flex: none;
  margin-top: 3px;
}

.compare-col--them {
  background: var(--surface-alt);
  color: var(--text-muted);
}
.compare-col--us {
  background: var(--surface);
  box-shadow: var(--sh-card-lift);
  border-color: rgba(37, 99, 235, 0.25);
}

@media (max-width: 760px) {
  .compare {
    grid-template-columns: 1fr;
  }
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-xl);
  align-items: stretch;
}
.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  box-shadow: var(--sh-card);
}
.plan--featured {
  border-color: var(--blue);
  box-shadow: 0 20px 44px rgba(37, 99, 235, 0.18);
  position: relative;
}
.plan-tag {
  position: absolute;
  top: -13px;
  left: var(--s-xl);
  background: var(--fusion-contrast);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: var(--r-pill);
}
.plan h3 {
  margin: 0 0 var(--s-xs);
  font-size: 1.15rem;
  font-weight: 600;
}
.plan .price {
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.2;
}
.plan .price small {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}
.plan .blurb {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: var(--s-sm) 0 var(--s-lg);
}
.plan ul {
  list-style: none;
  margin: 0 0 var(--s-xl);
  padding: 0;
  display: grid;
  gap: 10px;
  flex: 1;
}
.plan li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.925rem;
}
.plan li svg {
  flex: none;
  margin-top: 3px;
  color: var(--success);
}
.plan .btn {
  width: 100%;
}
.pricing-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: var(--s-xl) 0 0;
}

@media (max-width: 900px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.faq {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
}
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: var(--s-md);
  overflow: hidden;
}
/* `summary` keeps its UA `display: list-item`. Changing it to flex has a long
   history of breaking the native disclosure behaviour in WebKit, which would
   leave the whole FAQ dead to mouse and keyboard on iOS. The flex row lives on
   an inner heading instead. */
.faq summary {
  cursor: pointer;
  padding: 18px var(--s-xl);
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-lg);
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.65;
}
/* The alt-text syntax gives the glyph an empty accessible name. Without it the
   question announces as "…? plus" — a second, differently-worded copy of the
   expanded state the native element already reports. The bare `content` above
   is the fallback for engines that do not parse the alt form. */
.faq summary h3::after {
  content: "+";
  content: "+" / "";
  color: var(--blue);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  flex: none;
}
.faq details[open] summary h3::after {
  content: "\2212"; /* minus */
  content: "\2212" / "";
}
.faq details p {
  margin: 0;
  padding: 0 var(--s-xl) 20px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ── Final CTA ───────────────────────────────────────────────────────────── */

.cta-band {
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.cta-band h2 {
  margin-left: auto;
  margin-right: auto;
  max-width: 18ch;
}
.cta-band .lede {
  margin-left: auto;
  margin-right: auto;
}
.cta-band .hero-cta {
  justify-content: center;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--text);
  color: rgba(255, 255, 255, 0.7);
  padding: 64px 0 40px;
  font-size: 0.925rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--s-xl);
  padding-bottom: var(--s-2xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer .wordmark {
  color: #fff;
}
.site-footer p {
  color: rgba(255, 255, 255, 0.6);
  max-width: 34ch;
}
/* An h2, not an h4: the footer columns follow the page's last h2, and jumping
   two levels breaks heading navigation. The size is set back down here. */
.site-footer .footer-head {
  color: #fff;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--s-md);
  font-weight: 600;
  max-width: none;
  line-height: 1.65;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.7);
}
.site-footer a:hover {
  color: #fff;
}
.footer-bottom {
  padding-top: var(--s-xl);
  display: flex;
  justify-content: space-between;
  gap: var(--s-lg);
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}
/* Required attribution wherever the Play badge appears. */
.footer-trademark {
  max-width: 46ch;
}

@media (max-width: 860px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  section {
    padding: 64px 0;
  }
}

/* ── Reveal on scroll ────────────────────────────────────────────────────── */

/* Scoped to .js (set inline in the <head>) so the page is never left invisible
   for a visitor without JavaScript — the fade is an enhancement, not a gate. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Tabbing can reach a link inside a section the observer has not fired for yet,
   which puts the focus ring on something invisible. */
.js .reveal:focus-within {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}