/* Minutify — shared stylesheet for the public website.
   Mobile-first, light/dark aware, no external fonts/CDNs/JS.

   One self-hosted family under ./fonts: Source Sans 3 400/600/700, woff2
   subsets of the TTFs the app bundles (MyAINotes/Resources/Fonts/SourceSans3/),
   OFL 1.1 with its license file alongside. No italic face: no page uses one.
   The system stack stays as the fallback; see the @font-face blocks.
   Range and the regeneration command: website/README.md §Restyle to v1.2.2. */

:root {
  /* bg/ink match the redesign's light tokens (design handoff README
     §Design Tokens: bg #FAFAF8, ink #16181C). */
  --bg: #fafaf8;
  --fg: #16181c;
  --muted: #5f6368;
  /* --accent matches the app's AccentColor in both themes. Every text
     pairing passes AA 4.5:1; numbers in website/README.md. */
  --accent: #0e7383;
  --border: #e2e2e5;
  --card: #f6f7f9;

  /* TASK-413 — redesign tokens. `surface` lifts cards off the warm bg;
     `line` is the handoff's hairline; `tint`/`tint-line` are the accent-tinted
     callout fill and its border, the app's tint and tint2.
     Contrast numbers for every pairing: website/README.md §Restyle to v1.2.2. */
  --surface: #ffffff;
  --line: rgba(22, 24, 28, 0.09);
  --tint: rgba(14, 115, 131, 0.08);
  --tint-line: rgba(14, 115, 131, 0.2);
  --shadow-card: 0 1px 2px rgba(16, 18, 22, 0.04), 0 8px 24px rgba(16, 18, 22, 0.05);
  --shadow-shot: 0 1px 2px rgba(16, 18, 22, 0.05), 0 12px 32px rgba(16, 18, 22, 0.12);

  /* One column width for nav, hero, content and footer, so they stay aligned.
     Widened on the landing page only — see the wide breakpoint near the end. */
  --shell: 720px;

  --font-sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* bg/ink match the redesign's dark tokens (bg #0C0D10, ink #F2F4F6). */
    --bg: #0c0d10;
    --fg: #f2f4f6;
    --muted: #a3a3aa;
    --accent: #5ab8c6;
    --border: #2e2e33;
    --card: #1c1c1f;

    --surface: #17191d;
    --line: rgba(255, 255, 255, 0.09);
    --tint: rgba(90, 184, 198, 0.16);
    --tint-line: rgba(90, 184, 198, 0.32);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-shot: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
  /* One px over the old face's 17: Source Sans 3 has a smaller x-height, and
     the app retunes its styles by the same step. */
  font-size: 18px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
  height: auto;
}

/* Focus — one visible ring everywhere, both themes. The accent scores 4.74:1
   or better against every surface it can land on (see README §Restyle to
   v1.2.2), well over the 3:1 that non-text UI indicators need. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Skip link — first thing in the tab order on every page, hidden until focused. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 0.75rem;
  z-index: 20;
  padding: 0.7rem 1.1rem;
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  font-weight: 700;
}

.skip-link:focus {
  top: 0.75rem;
  text-decoration: none;
}

/* Type */

h1 {
  font-size: clamp(1.9rem, 4vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

/* Section headings inside content: the handoff's 13px/bold + bottom-hairline
   pattern, scaled to this site's 18px body (the app's body is 14.5–15.5px, so
   the faithful translation of that ratio is ~15px here, not a literal 13px). */
h2 {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}

/* Accent numeral on the numbered legal-page headings. */
.sec-num {
  font-weight: 600;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  margin-right: 0.4ch;
}

p {
  margin: 0 0 1rem;
}

ul,
ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

/* Label: sentence case, 13.5px / 600, no tracking — the app's statusLabel.
   The same treatment serves .card-label, the footer links and the hero
   eyebrow and tagline. */
.microlabel {
  font-weight: 600;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Top navigation */

.site-nav {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.site-nav .nav-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.site-nav .brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--fg);
}

.site-nav .brand:hover,
.site-nav .brand:focus-visible {
  text-decoration: none;
  color: var(--accent);
}

.site-nav .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.site-nav .nav-links a {
  color: var(--fg);
  font-size: 0.95rem;
}

.site-nav .nav-links a:hover {
  color: var(--accent);
}

/* Current page: the handoff's 2px accent underline, plus the accent color so
   it is not carried by color alone. */
.site-nav .nav-links a[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Main content column */

.content {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 3rem;
}

.site-footer .footer-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-bottom: 0.9rem;
}

.site-footer .footer-links a {
  font-weight: 600;
  font-size: 0.84375rem;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--accent);
}

/* Cards — the handoff's 16–20 radius and two-layer shadow. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.35rem 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-card);
}

.card > :last-child {
  margin-bottom: 0;
}

/* Accent-tinted callout. Links inside a tint block use --fg with an underline:
   accent on the light tint is the weakest accent pairing on the site, and the
   underline keeps the link from being carried by color alone. */
.tint {
  background: var(--tint);
  border-color: var(--tint-line);
  box-shadow: none;
}

.tint a {
  color: var(--fg);
  text-decoration: underline;
}

/* Label heading a card (the handoff's TL;DR-callout pattern). */
.card-label {
  font-weight: 600;
  font-size: 0.84375rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 0.7rem;
  padding: 0;
  border: 0;
}

/* Sub-processor table on the privacy page (TASK-290). */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.95rem;
}

.data-table th,
.data-table td {
  border: 1px solid var(--border);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  background: var(--card);
  font-weight: 700;
}

.table-scroll {
  overflow-x: auto;
}

/* The scroller is a tab stop (privacy/index.html), so it needs the same visible
   ring every other focusable element gets. */
.table-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Landing page (TASK-289) */

.hero {
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 3rem 1.25rem 3.25rem;
  text-align: center;
}

.hero-eyebrow {
  margin: 0 0 0.35rem;
  font-weight: 600;
  font-size: 0.84375rem;
  color: var(--fg);
}

.hero-tagline {
  margin: 0 0 1.6rem;
  font-weight: 600;
  font-size: 0.84375rem;
  color: var(--muted);
}

.hero h1 {
  font-size: clamp(2.15rem, 5.5vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.1;
  max-width: 34rem;
  margin: 0 auto 1.1rem;
}

/* Two-tone hero, the app's rule: one phrase in the same face and weight,
   in muted gray. A plain <span>, not <em> — a type treatment, not stress
   emphasis, so a screen reader says the line unchanged. */
.hero-serif {
  color: var(--muted);
}

.hero-lead {
  max-width: 36rem;
  margin: 0 auto 1.75rem;
  color: var(--muted);
  font-size: 1.08rem;
}

/* CTA pill: 56px tall, radius 28 (full pill), per the handoff. A flat fill
   with no glow, as in the app. #0e7383 in both themes: the dark accent is
   too light for a white label. */
.btn-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 2rem;
  border-radius: 28px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  margin-bottom: 2.25rem;
  transition: background-color 120ms ease, transform 120ms ease;
}

.btn-store:hover {
  text-decoration: none;
  /* The app's pressed fill: the accent mixed 8% toward black. White on it
     scores higher than on the resting fill. */
  background: #0d6a79;
}

.btn-store:active {
  transform: scale(0.98);
}

.btn-store:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  .btn-store {
    background: #0e7383;
  }
}

.hero-shots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.hero-shots img {
  width: 240px;
  max-width: 45vw;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-shot);
}

.hero-shots--secondary {
  margin-top: 2rem;
  /* Same measure as the prose above it, so it stays centred on the text
     column rather than on the (wider) landing-page shell. */
  max-width: 44rem;
}

.section {
  margin: 3rem 0;
}

/* Prose stays at a readable measure even when the shell widens. */
.section > p,
.section > ul,
.section > ol,
.section .card > p,
.section .card > ul,
.section .card > ol {
  max-width: 44rem;
}

/* Hairline-divided card group — the Settings-screen pattern from the handoff,
   used here for the two "How it works" lists. */
.feature-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  max-width: 44rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.feature-list li {
  position: relative;
  margin: 0;
  padding: 0.85rem 1.25rem 0.85rem 2.5rem;
  border-top: 1px solid var(--line);
}

.feature-list li:first-child {
  border-top: 0;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 1.45rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

.feature-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2.5rem 1.25rem 1.2rem;
  box-shadow: var(--shadow-card);
}

.feature-card::before {
  content: "";
  position: absolute;
  top: 1.35rem;
  left: 1.25rem;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
}

/* Keep the tinted panel the same width as the measure it wraps: 44rem of prose
   plus the card's own 1.5rem side padding and 1px borders. Without this the card
   spans the full 1040px shell at the wide breakpoint while every line inside it
   stops at 704px, leaving a wide empty band of accent fill. */
.pricing-card {
  max-width: calc(44rem + 3rem + 2px);
}

.pricing-card ul {
  margin-bottom: 1rem;
}

.pricing-disclosure {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0;
}

@media (min-width: 640px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Wide viewports — landing page only. The legal pages keep the ~720px measure
   on purpose: long policy text is harder to read at a wide measure. Nav, hero,
   content and footer all read --shell, so they widen together and stay
   aligned. */
@media (min-width: 1080px) {
  .page-home {
    --shell: 1040px;
  }

  .page-home .hero-inner {
    padding: 4rem 1.25rem 4.25rem;
  }

  .page-home .hero-shots img {
    width: 280px;
  }

  .page-home .feature-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn-store:active {
    transform: none;
  }
}

/* Print — /privacy and /terms are the pages people save as PDF. Drop the
   chrome, force an ink-on-paper palette, keep headings with their sections.
   Must stay last: it re-declares tokens the dark-mode block also sets. */
@media print {
  :root {
    --bg: #ffffff;
    --fg: #000000;
    --muted: #333333;
    --surface: #ffffff;
    --card: #ffffff;
    --border: #999999;
    --line: #bbbbbb;
    --tint: transparent;
    --tint-line: #999999;
    --accent: #000000;
    --shadow-card: none;
    --shadow-shot: none;
    --shell: none;
  }

  .site-nav,
  .site-footer,
  .skip-link,
  .hero-shots,
  .btn-store {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .content,
  .hero-inner {
    max-width: none;
    padding: 0;
  }

  .card,
  .feature-list,
  .feature-card {
    box-shadow: none;
    border: 1px solid #999;
  }

  h1,
  h2 {
    break-after: avoid;
    page-break-after: avoid;
  }

  a {
    color: #000;
    text-decoration: underline;
  }
}