/* ═══════════════════════════════════════════════════════════════
   Landing skin v3 — Console
   Aligns the marketing and legal pages of both apps with skin.css:
   the same warm neutrals, the same orange accent, the same hairlines
   and radii. Loaded last so it wins over each page's inline <style>.

   The two landings ship different token names (Thinkhubˣ uses
   --accent/--bg-2, Studyhubˣ uses --teal/--cream), and Studyhubˣ also
   hardcodes its teal in a handful of inline styles, so both naming
   sets and those specific elements are handled here.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Shared */
  --ink:#1F1E1C; --muted:#6F6C66;
  --line:rgba(31,30,28,.11);
  --card:#FFFFFF;

  /* Thinkhubˣ names */
  --bg:#FAF9F5; --bg-2:#F2F0EA;
  --link:#C96442; --accent:#C96442; --warm:#C96442;

  /* Studyhubˣ names */
  --cream:#FAF9F5;
  --teal:#C96442;          /* primary accent, was verdigris */
  --teald:#B4552F;         /* hover */
  --aqua:#F2EDE7;          /* soft chip fill */
  --rose:#F4EFE9;
  --dogwood:#EDE7DF;
}
body {
  letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;
  background:var(--bg, var(--cream));
}

/* Nav and announcement bar: one hairline strip, no colour wash. */
nav {
  background:rgba(250,249,245,.82);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.announceBar { background:var(--bg-2) !important; color:var(--ink) !important; }
.announceBar .annDot { background:var(--accent) !important; }
.announceBar button { background:var(--line) !important; color:var(--ink) !important; }

/* Primary actions: solid ink, the same as the app's send button family. */
.nl .cta, .btn-primary, .cta-primary {
  background:var(--ink); color:#fff; border-radius:999px; font-weight:600;
  transition:opacity .15s;
}
.nl .cta:hover, .btn-primary:hover, .cta-primary:hover { opacity:.9; }

/* Surfaces: one radius scale, one flat elevation. */
.frame, .card, .panel, .win, .quote, .tile {
  border-radius:16px;
  border:1px solid var(--line);
  box-shadow:none;
  background:var(--card);
}
.frame { background:var(--bg-2); }
.miniChip, .chipRow span, .pill {
  background:var(--aqua) !important; color:var(--ink) !important;
  border-radius:999px; font-weight:600;
}

/* Studyhubˣ hardcodes the old teal in these inline styles, so they are
   named directly rather than reached through a variable. */
#lTabLogin, #lTabReg, #lLoginSubmit, #lRegisterSubmit {
  background:var(--accent) !important; color:#fff !important;
  border-radius:10px !important;
}
#lTabLogin[style*="transparent"], #lTabReg[style*="transparent"] {
  background:transparent !important; color:var(--muted) !important;
}
a[href="/terms"], a[href="/privacy"] { color:var(--accent) !important; }
.card.teacher h3, .card.teacher p, .thanksCard .kicker { color:var(--ink) !important; }

/* Hero wash, in the accent rather than violet or teal. */
header::before {
  background:radial-gradient(closest-side,
    color-mix(in oklab, var(--accent) 14%, transparent),
    transparent 72%) !important;
}

::selection { background:color-mix(in oklab, var(--accent) 26%, transparent); }

/* Studyhubˣ animates its headline through a teal gradient and paints a
   mint band behind one section. Both are re-cut in the accent so the two
   landings read as one brand. */
.grad {
  background-image:linear-gradient(90deg, var(--accent), var(--ink) 55%, var(--accent)) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  color:transparent !important;
}
.band {
  background:linear-gradient(155deg,
    color-mix(in oklab, var(--accent) 10%, transparent),
    color-mix(in oklab, var(--accent) 5%, transparent)) !important;
}
.blob { opacity:.35; filter:saturate(.35); }