/* ---------------------------------------------------------------
   Clippa theme

   Restrained on purpose: near-black, cool paper, greige surfaces, and
   one deep claret used sparingly - for a live dot, a link, a focus
   ring. Buttons are ink rather than coloured, which is what keeps the
   whole thing quiet. Archivo set tight for display, Inter for the rest.

   One file, so every page moves together.
   --------------------------------------------------------------- */
:root {
  --ink: #14151A;
  --ink-soft: #3C3E48;
  --muted: #7B7E8A;

  --paper: #FCFCFD;
  --surface: #F2F2F5;
  --surface-2: #E8E8ED;
  --line: #E1E1E7;

  /* Used in drops, never in floods. */
  --accent: #7C2D3A;
  --accent-dark: #64222E;
  --accent-tint: #F6EDEF;

  --positive: #2F5D50;
  --positive-tint: #E8F0ED;

  --stage: #101116;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(20, 21, 26, .04), 0 8px 24px rgba(20, 21, 26, .06);
  --shadow-lift: 0 2px 4px rgba(20, 21, 26, .05), 0 20px 50px rgba(20, 21, 26, .11);

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px;
}

/* --- type ------------------------------------------------------ */
/* Archivo needs weight and negative tracking to look deliberate; at 400 and
   default spacing it reads like a system font that nobody chose. */
h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
h1 { font-size: clamp(2.6rem, 5.4vw, 4.1rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.02em; }
p { margin: 0; line-height: 1.65; }

.lede { font-size: clamp(1rem, 1.3vw, 1.125rem); color: var(--ink-soft); }
.eyebrow {
  font-family: var(--font);
  font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}

/* --- buttons --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 500; font-size: 14.5px;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover:not(:disabled) { background: #000; }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink-soft); }

.btn-quiet { background: var(--surface); border-color: transparent; color: var(--ink-soft); }
.btn-quiet:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }

.btn-sm { padding: 8px 14px; font-size: 13.5px; }

/* --- nav ------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(252, 252, 253, .9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 30px; height: 66px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -0.02em;
  text-decoration: none;
}
.brand-mark {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--ink);
  display: grid; place-items: center;
}
.brand-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.nav-links { display: flex; gap: 26px; }
.nav-links a {
  font-size: 14.5px; color: var(--ink-soft);
  text-decoration: none; padding: 6px 0;
}
.nav-links a:hover { color: var(--ink); }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
/* "Sign in" breaking across two lines on a phone looks like a bug. */
.nav-actions .btn, .nav-actions .pill { white-space: nowrap; }

@media (max-width: 760px) {
  .nav-links { display: none; }
}

/* --- footer ---------------------------------------------------- */
.footer { border-top: 1px solid var(--line); margin-top: 110px; background: var(--paper); }
.footer-grid {
  display: grid; gap: 44px;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  padding: 64px 0 52px;
}
.footer h4 {
  margin: 0 0 16px; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { font-size: 14.5px; color: var(--ink-soft); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer-base {
  border-top: 1px solid var(--line);
  padding: 22px 0 44px;
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: 13.5px; color: var(--muted);
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* --- forms ----------------------------------------------------- */
/* min-width:0 on both: a grid item will not shrink below its content, and an
   input's content width comes from its size attribute (~20 characters). Two
   of them side by side otherwise force the whole form wider than its card. */
.field { display: grid; gap: 7px; min-width: 0; }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.field input {
  width: 100%; min-width: 0;
  font-family: var(--font); font-size: 15px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color .16s ease;
}
.field input::placeholder { color: #A8AAB4; }
.field input:hover { border-color: #CFCFD7; }
.field input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20, 21, 26, .07); }
.field .hint { font-size: 12.5px; color: var(--muted); }

.notice {
  font-size: 14px; line-height: 1.5;
  padding: 11px 14px; border-radius: var(--radius);
  background: var(--accent-tint); color: var(--accent-dark);
}
.notice[data-tone="ok"] { background: var(--positive-tint); color: var(--positive); }
.notice[hidden] { display: none; }

/* --- misc ------------------------------------------------------ */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface);
  font-size: 13px; color: var(--ink-soft);
}

/* The account pill as a menu trigger. A plain --surface fill on the nav's
   near-white background had almost no contrast - a visible border and darker
   fill/text give it a real edge instead of blending in. */
.pill-btn {
  border: 1px solid var(--line); cursor: pointer;
  font-family: var(--font); font-weight: 500;
  background: var(--surface-2); color: var(--ink);
  transition: background .16s ease, border-color .16s ease;
}
.pill-btn:hover { background: var(--line); border-color: #CFCFD7; }
.pill-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pill-btn .caret { color: var(--ink-soft); font-size: 10px; }

.account-menu { position: relative; }
.account-menu-list {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 160px; padding: 6px;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  display: grid; gap: 2px;
}
.account-menu-list[hidden] { display: none; }
.account-menu-list a, .account-menu-list button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 6px; border: none; background: none;
  font-family: var(--font); font-size: 14px; color: var(--ink);
  text-decoration: none; cursor: pointer;
}
.account-menu-list a:hover, .account-menu-list button:hover { background: var(--surface); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}