/* =========================================================
   Self-hosted webfonts.

   These are the exact files Google Fonts served for this site —
   same woff2 data, same weights, same latin unicode-range, same
   font-display — just fetched from our own server. Rendering is
   unchanged; the difference is that loading a page no longer sends
   the visitor's IP address to Google. See privacy.html §7.3.

   Hanken Grotesk is one variable file referenced at four weights,
   which is exactly how Google served it. Note the declarations stop
   at 600: the stylesheet asks for 700/800 in places, and those
   resolve to the 600 face just as they always have. Widening the
   range here would silently make every heading heavier.

   Only the `latin` subset is included, because that is all the site's
   copy uses. Adding accented or extended-latin text means adding the
   matching latin-ext files from Google.
   ========================================================= */

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(fonts/hanken-grotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/hanken-grotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/hanken-grotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/hanken-grotesk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/instrument-serif-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   Candid — candid.contact
   Shared stylesheet for index, privacy, and terms pages.
   ========================================================= */

:root {
  /* Brand palette — see /Brand guidelines (Ink / Gold / Bone) */
  --bg: #0e0e10;          /* Ink — primary ground */
  --bg-elevated: #161619; /* Surface — cards, panels */
  --bg-raised: #1b1b1f;   /* Raised — prominent card */
  --border: #26262b;      /* Hairline */
  --text: #f5f3ef;        /* Bone — primary text */
  --text-muted: #8a8a90;  /* Muted — secondary text */
  --text-dim: #6b6b70;
  --accent: #cc9e48;      /* Candid Gold */
  --accent-muted: #8a6d20;

  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max-content: 720px;
  --max-marketing: 1100px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: color 120ms ease;
}

a:hover {
  color: var(--text);
  text-decoration: underline;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* =========================================================
   Site header (shared across all pages)
   ========================================================= */

.site-header {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 1.5rem;
}

.site-header .inner {
  max-width: var(--max-marketing);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-header .brand {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.site-header .brand:hover {
  color: var(--accent);
  text-decoration: none;
}

.site-header nav a {
  margin-left: 1.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.site-header nav a:hover {
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 540px) {
  .site-header nav a {
    margin-left: 0.9rem;
    font-size: 0.85rem;
  }
  .site-header .brand {
    font-size: 1rem;
  }
}

/* =========================================================
   Site footer (shared across all pages)
   ========================================================= */

.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 5rem;
  padding: 2.5rem 1.5rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.site-footer .inner {
  max-width: var(--max-marketing);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}

.site-footer a {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 1.25rem;
}

.site-footer a:last-child {
  margin-right: 0;
}

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

/* =========================================================
   index.html — marketing landing
   ========================================================= */

/* Hero ------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding: 5rem 1.5rem 4rem;
}

.hero-inner {
  max-width: var(--max-marketing);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 880px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

.hero-text .eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: rgba(204, 158, 72, 0.1);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  margin: 0 0 1.25rem;
  color: var(--text);
}

.hero .lead {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 0 2.25rem;
}

@media (max-width: 880px) {
  .hero .lead {
    margin-left: auto;
    margin-right: auto;
  }
}

.hero-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 480 / 520;
  max-width: 480px;
  margin-left: auto;
}

@media (max-width: 880px) {
  .hero-visual {
    margin: 0 auto;
    max-width: 380px;
  }
}

.hero-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Card content (rendered inside SVG via <foreignObject>) */
.hero-visual .card-body {
  font-family: var(--font-sans);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
}

.hero-visual .card-cat {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
}

.hero-visual .card-cat--muted {
  color: var(--text-dim);
  font-weight: 600;
}

.hero-visual .card-prompt {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.28;
  color: var(--text);
  letter-spacing: -0.01em;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  /* Centre the prompt vertically in the available space */
  margin: auto 0;
}

.hero-visual .card-prompt--muted {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 20px;
}

.hero-visual .card-meta {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 16px;
}

.hero-visual .card-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Subtle card hover float — pure CSS, respects reduced motion */
.hero-visual .card {
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-visual .card-back {
    animation: float-back 9s ease-in-out infinite;
  }
  .hero-visual .card-mid {
    animation: float-mid 9s ease-in-out infinite;
  }
  .hero-visual .card-front {
    animation: float-front 9s ease-in-out infinite;
  }
}

@keyframes float-back {
  0%, 100% { transform: translate(60px, 80px) rotate(-12deg); }
  50%      { transform: translate(60px, 76px) rotate(-13deg); }
}
@keyframes float-mid {
  0%, 100% { transform: translate(70px, 60px) rotate(-2deg); }
  50%      { transform: translate(70px, 64px) rotate(-1deg); }
}
@keyframes float-front {
  0%, 100% { transform: translate(80px, 100px) rotate(8deg); }
  50%      { transform: translate(80px, 96px) rotate(9deg); }
}

.hero .cta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}

@media (max-width: 880px) {
  .hero .cta {
    align-items: center;
  }
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  color: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
}

.app-store-badge {
  display: inline-block;
  line-height: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.app-store-badge img {
  display: block;
  width: 158px;
  height: auto;
  margin: 0 auto;
}

.app-store-badge.big {
  display: block;
}

.app-store-badge.big img {
  width: 180px;
}

.app-store-badge:hover {
  transform: translateY(-1px);
  opacity: 0.85;
}

.cta-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s ease-in-out infinite;
}

.cta-pill .label {
  letter-spacing: -0.005em;
}

.cta-note {
  font-size: 0.8rem;
  color: var(--text-dim);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Section wrapper for marketing blocks */

.section {
  max-width: var(--max-marketing);
  margin: 0 auto;
  padding: 4rem 1.5rem;
}

.section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 800;
  margin: 0 0 1rem;
  color: var(--text);
}

.section.centered-heading > h2 {
  text-align: center;
}

.section .lede {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 0 2.5rem;
}

/* Feature grid */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.feature {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
}

.feature h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.feature p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Two-column tier comparison */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.tier {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.75rem;
}

.tier.is-premium {
  border-color: var(--accent-muted);
  position: relative;
}

.tier.is-premium::before {
  content: "Premium";
  position: absolute;
  top: -10px;
  left: 1.5rem;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.tier h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
  color: var(--text);
}

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

.tier li {
  position: relative;
  padding: 0.4rem 0 0.4rem 1.4rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.tier li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Stats strip --------------------------------------------- */

.stats {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(204, 158, 72, 0.025);
}

.stats-inner {
  max-width: var(--max-marketing);
  margin: 0 auto;
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: center;
}

@media (max-width: 600px) {
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.stat strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.stat span {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.25rem;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* How it works steps -------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}

.step {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.75rem 1.75rem;
  position: relative;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 800;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.step h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.step p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Feature icons ------------------------------------------- */

.feature-icon {
  width: 28px;
  height: 28px;
  color: var(--accent);
  margin-bottom: 0.85rem;
}

/* Tier footnote ------------------------------------------- */

.tier-foot {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* FAQ ----------------------------------------------------- */

.faq {
  max-width: var(--max-content);
  margin: 0 auto;
}

.faq details {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--text);
  list-style: none;
  position: relative;
  padding-right: 2.75rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.4rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-weight: 700;
  font-size: 1.4rem;
  transition: transform 200ms ease;
}

.faq details[open] summary::after {
  content: "−";
}

.faq details p {
  margin: 0;
  padding: 0 1.4rem 1.3rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* Final CTA ----------------------------------------------- */

.final-cta {
  max-width: var(--max-content);
  margin: 5rem auto 2rem;
  padding: 4rem 2rem;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(204, 158, 72, 0.04),
    rgba(204, 158, 72, 0.01)
  );
  border-radius: 24px;
  border: 1px solid var(--border);
}

.final-cta h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.6rem;
  color: var(--text);
  letter-spacing: -0.015em;
}

.final-cta p {
  margin: 0 0 2rem;
  color: var(--text-muted);
  font-size: 1.05rem;
}

.cta-pill.big {
  font-size: 1rem;
  padding: 1rem 1.6rem;
}

/* Privacy callout */

.callout {
  max-width: var(--max-content);
  margin: 4rem auto;
  padding: 2.25rem 2rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: center;
}

.callout h2 {
  font-size: 1.5rem;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.callout p {
  margin: 0;
  color: var(--text-muted);
  font-size: 1rem;
}

/* =========================================================
   privacy.html / terms.html — legal pages
   ========================================================= */

.legal {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 3rem 1.5rem 1.5rem;
}

.legal h1 {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  letter-spacing: -0.015em;
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.legal .meta {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.legal h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.legal h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.legal p,
.legal li {
  color: var(--text);
  opacity: 0.92;
}

.legal ul,
.legal ol {
  padding-left: 1.4rem;
}

.legal li {
  margin-bottom: 0.4rem;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
}

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

.legal th {
  background: var(--bg-elevated);
  font-weight: 700;
  color: var(--accent);
}

.legal code {
  background: var(--bg-elevated);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
}

.legal hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.back-home {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.back-home::before {
  content: "← ";
}

/* =========================================================
   Brand typography (see /Brand guidelines)
   Instrument Serif — display, headlines, wordmark, prompts
   IBM Plex Mono    — eyebrows, labels, fine print
   Hanken Grotesk   — everything else (body, set on <body>)
   ========================================================= */

.site-header .brand,
.hero h1,
.section h2,
.final-cta h2,
.callout h2,
.legal h1,
.tier h3,
.stat strong,
.hero-visual .card-prompt {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* Instrument Serif is a single high-contrast weight; at large display
   sizes it carries on its own, so the prompts/headlines read lighter and
   more literary than the old 800-weight sans. */
.hero h1,
.final-cta h2 {
  line-height: 1.08;
}

.hero-text .eyebrow,
.hero-visual .card-cat,
.stat span,
.cta-note,
.tier.is-premium::before,
.back-home {
  font-family: var(--font-mono);
}

.hero-text .eyebrow {
  font-weight: 500;
  letter-spacing: 0.14em;
}

.hero-visual .card-cat {
  font-weight: 500;
  letter-spacing: 0.12em;
}