/* 43rd Element — main site styles
   Used by the home page, the app info pages, and 404.

   The look follows recall.it's structural language: full-bleed sections that
   alternate near-black and white, pill buttons, small uppercase kicker labels
   over large geometric headings, wide corner radii and deep soft shadows. The
   reference's floating pill nav is not used — the wordmark sits at the top of
   the page itself instead.

   Two deliberate departures from the reference:

   * The accent is dark blue, not recall.it's #FF4B14. Note Recall and Recall
     are adjacent products with adjacent names; borrowing their exact brand
     colour as well would invite confusion.

     Dark blue cannot do every job a bright accent does, so it has three
     tokens rather than one. A navy fill on a near-black ground only reaches
     2.3:1 — below the 3:1 WCAG asks for a control's boundary — so the primary
     button INVERTS on dark grounds: light blue fill, navy text. Kickers and
     links likewise switch between --accent-ink and --accent-lift depending on
     the ground they sit on. Every pair here was measured, not guessed.
   * There is no prefers-color-scheme inversion. Light and dark are composed
     into the page here — the hero is meant to be black and the app grid is
     meant to be white — so flipping them on a system setting would fight the
     design rather than serve it. The pages the APP links to keep their
     auto-theming (see app-pages.css and legal.css).

   Pages the app links to do NOT use this file. */

:root {
  /* Ground — near-black, tinted navy so the blue accent reads as deliberate */
  --ink-0: #080B14;          /* hero, footer */
  --ink-1: #131A2B;          /* alternate dark section */
  --paper: #FFFFFF;          /* light section */
  --surface: #F2F2F2;        /* panels on light ground */
  --surface-dark: #1B2437;   /* panels on dark ground */

  /* Ink */
  --on-dark: #FFFFFF;
  --on-dark-muted: #A9B6CC;  /* 9.6:1 on --ink-0 */
  --on-light: #151515;
  --on-light-muted: #6B6B6B;

  --line-dark: rgba(255, 255, 255, 0.13);
  --line-light: #E4E4E4;

  /* Accent — three tokens, see the note at the top of this file */
  --accent: #1E40AF;         /* solid fill; carries white text at 8.7:1 */
  --accent-hover: #17348F;
  --on-accent: #FFFFFF;
  --accent-ink: #1B3F91;     /* accent TEXT on light grounds  (9.7:1 on white) */
  --accent-lift: #A8C2F7;    /* accent TEXT + inverted fill on dark grounds */
  --accent-deep: #15347A;    /* text sitting on --accent-lift (6.5:1) */

  /* Form */
  --r-panel: 24px;
  --r-card: 16px;
  --r-pill: 999px;
  --shadow-panel: 0 44px 100px -40px rgba(21, 21, 21, 0.22);

  /* A geometric sans, matching the reference's Avenir Next / Futura stack.
     Avenir Next ships on macOS and iOS, which is nearly all of this
     audience, so no webfont is needed and the page stays self-contained. */
  --font: "Avenir Next", Avenir, "Century Gothic", Futura, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--ink-0);
  color: var(--on-dark);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- Masthead ----
   The wordmark sits at the top of the page itself, not in a floating bar.
   Large and centred on the home page (.hero); small and left-aligned on the
   interior pages (.masthead), where it doubles as the way back home. */

.masthead {
  background: var(--ink-0);
  padding: 32px 28px 0;
}

.masthead a { display: inline-block; }

/* A plain <img>, not a CSS mask. A mask fetches the SVG as a style resource,
   which browsers block under file:// — the mark then renders as nothing at
   all, and the page looks like the logo was never there. Both places that use
   the wordmark now want it white, so there is nothing a mask would buy. */
.masthead .mark {
  display: block;
  width: 132px;
  height: auto;
  opacity: 0.92;
  transition: opacity 0.15s ease;
}

.masthead a:hover .mark { opacity: 1; }

/* ---- Sections ---- */

.section { padding: 84px 24px; }

.section.dark { background: var(--ink-0); color: var(--on-dark); }
.section.dark-alt { background: var(--ink-1); color: var(--on-dark); }
.section.light { background: var(--paper); color: var(--on-light); }

.section-inner { max-width: 900px; margin: 0 auto; }
.section-inner.narrow { max-width: 720px; }

/* ---- Hero: the wordmark, and nothing else ---- */

.hero {
  background: var(--ink-0);
  padding: 92px 24px 96px;
  text-align: center;
}

.hero .brand-logo {
  display: block;
  width: 340px;
  max-width: 74vw;
  aspect-ratio: 368 / 87;
  margin: 0 auto;
}

/* Interior page title, sitting directly under the masthead on the same ground. */
.page-head {
  background: var(--ink-0);
  padding: 46px 24px 76px;
  text-align: center;
}

/* ---- Type ---- */

.kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--accent-lift);
}

.section.light .kicker { color: var(--accent-ink); }

h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}

h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}

h3 {
  font-size: 1.06rem;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: 1.12rem;
  line-height: 1.55;
  max-width: 34em;
  color: var(--on-dark-muted);
}

.section.light .lede { color: var(--on-light-muted); }
.hero .lede,
.page-head .lede {
  color: var(--on-dark-muted);
  margin-left: auto;
  margin-right: auto;
}

.page-head .actions { justify-content: center; }


.muted { color: var(--on-dark-muted); }
.section.light .muted { color: var(--on-light-muted); }

.note { font-size: 0.88rem; color: var(--on-dark-muted); }
.section.light .note { color: var(--on-light-muted); }

/* ---- Panels ---- */

.panel {
  background: var(--surface);
  color: var(--on-light);
  border-radius: var(--r-panel);
  padding: 34px 38px;
  box-shadow: var(--shadow-panel);
}

.section.light .panel {
  background: var(--surface);
  box-shadow: none;
  border: 1px solid var(--line-light);
}

.section.dark .panel,
.section.dark-alt .panel {
  background: var(--surface-dark);
  color: var(--on-dark);
  border: 1px solid var(--line-dark);
  box-shadow: none;
}

.panel + .panel { margin-top: 18px; }

/* ---- App grid ---- */

.app-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

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

.app-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--on-light);
  border-radius: var(--r-panel);
  padding: 30px 32px;
  box-shadow: var(--shadow-panel);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

a.app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 52px 110px -40px rgba(21, 21, 21, 0.3);
}

.app-card.placeholder {
  background: transparent;
  border: 1px dashed var(--line-light);
  box-shadow: none;
  color: var(--on-light-muted);
}

.section.dark .app-card.placeholder,
.section.dark-alt .app-card.placeholder {
  border-color: var(--line-dark);
  color: var(--on-dark-muted);
}

.app-card .name {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.app-card .summary {
  color: var(--on-light-muted);
  font-size: 0.97rem;
  margin-top: 8px;
  flex: 1;
}

.app-card.placeholder .summary { color: inherit; }

.app-card .more {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
  background: rgba(30, 64, 175, 0.10);
  color: #1E3A8A;
}

.badge.soon {
  background: rgba(21, 21, 21, 0.07);
  color: #5C5C5C;
}

.section.dark .app-card.placeholder .badge.soon,
.section.dark-alt .app-card.placeholder .badge.soon {
  background: rgba(255, 255, 255, 0.09);
  color: var(--on-dark-muted);
}

/* ---- Feature list ---- */

.features { list-style: none; margin: 0; padding: 0; }

.features li { padding: 20px 0; border-top: 1px solid var(--line-light); }
.features li:first-child { border-top: 0; padding-top: 0; }
.features li:last-child { padding-bottom: 0; }

.section.dark .features li,
.section.dark-alt .features li { border-top-color: var(--line-dark); }

.features .why { color: var(--on-light-muted); font-size: 0.97rem; }
.section.dark .features .why,
.section.dark-alt .features .why,
.page-head .features .why { color: var(--on-dark-muted); }

.panel .features .why { color: var(--on-light-muted); }
.section.dark .panel .features .why,
.section.dark-alt .panel .features .why { color: var(--on-dark-muted); }

/* ---- Buttons ---- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.btn {
  display: inline-block;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  border: 1px solid transparent;
}


/* A .btn that states a fact rather than offering an action — no pointer, no
   hover lift. Used for "Coming soon" until the App Store listing is live. */
.btn.is-static { cursor: default; }

.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-hover); }

.hero .btn.primary,
.page-head .btn.primary,
.section.dark .btn.primary,
.section.dark-alt .btn.primary {
  background: var(--accent-lift);
  color: var(--accent-deep);
}

.hero .btn.primary:hover,
.page-head .btn.primary:hover,
.section.dark .btn.primary:hover,
.section.dark-alt .btn.primary:hover { background: #C3D6FA; }

.btn.secondary { border-color: rgba(21, 21, 21, 0.2); color: var(--on-light); }
.btn.secondary:hover { border-color: var(--on-light); }

.section.dark .btn.secondary,
.section.dark-alt .btn.secondary,
.hero .btn.secondary,
.page-head .btn.secondary {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--on-dark);
}

.section.dark .btn.secondary:hover,
.section.dark-alt .btn.secondary:hover,
.hero .btn.secondary:hover,
.page-head .btn.secondary:hover { border-color: var(--on-dark); }

.panel .btn.secondary { border-color: rgba(21, 21, 21, 0.2); color: var(--on-light); }
.section.dark .panel .btn.secondary,
.section.dark-alt .panel .btn.secondary {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--on-dark);
}

/* ---- Link rows ---- */

.link-list { display: flex; flex-direction: column; gap: 14px; }

.link-row {
  display: block;
  background: var(--surface);
  color: var(--on-light);
  border-radius: var(--r-card);
  padding: 24px 28px;
  border: 1px solid var(--line-light);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.link-row:hover { transform: translateY(-2px); border-color: rgba(21, 21, 21, 0.3); }

.section.dark .link-row,
.section.dark-alt .link-row {
  background: var(--surface-dark);
  color: var(--on-dark);
  border-color: var(--line-dark);
}

.section.dark .link-row:hover,
.section.dark-alt .link-row:hover { border-color: rgba(255, 255, 255, 0.34); }

.link-row .title { font-size: 1.08rem; font-weight: 600; }

.link-row .sub {
  color: var(--on-light-muted);
  font-size: 0.94rem;
  margin-top: 4px;
}

.section.dark .link-row .sub,
.section.dark-alt .link-row .sub { color: var(--on-dark-muted); }

/* ---- Callout ---- */

.callout {
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: rgba(30, 64, 175, 0.07);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 0.96rem;
}

/* ---- Footer ---- */

.site-footer {
  background: var(--ink-0);
  color: var(--on-dark-muted);
  text-align: center;
  font-size: 0.84rem;
  padding: 56px 24px 64px;
}

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

.footer-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 4px;
  margin-bottom: 22px;
}

.footer-nav a {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  color: var(--on-dark-muted);
}

.footer-nav a:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-dark); }

/* ---- Small screens ---- */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .masthead { padding: 24px 18px 0; }
  .masthead .mark { width: 104px; height: 25px; }
  .section { padding: 60px 18px; }
  .hero { padding: 64px 18px 70px; }
  .page-head { padding: 34px 18px 56px; }
  .panel { padding: 26px 22px; border-radius: 18px; }
  .app-card { padding: 24px 22px; border-radius: 18px; }
  .actions .btn { flex: 1 1 100%; text-align: center; }
}