/* ==========================================================================
   Deep Think City — shared stylesheet
   Used by the homepage and every stub/backing page. Tokens from
   design_direction.md.

   Fonts: Inter is self-hosted (no runtime Google Fonts / third-party CDN) —
   see the @font-face block below. Georgia stays system: it's a scoped
   exception to the Inter-only rule, used for digest card headlines only,
   because the serif is what the product's own output looks like.
   ========================================================================== */

/* ---- Self-hosted Inter (weights 400/500/600/700) ------------------------- */
/* woff2 files live in /fonts/. Until they're dropped in, the --font-ui stack
   falls back to the system sans-serif, so the page still renders correctly. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Inter-Bold.woff2') format('woff2');
}

:root {
  --color-teal:             #2DBFA0;
  --color-teal-interactive: #147A62;
  --color-navy:             #2D4A5A;
  --color-navy-hover:       #1F3644;
  --color-slate:            #4A6070;
  --color-slate-light:      #7A9AAA;
  --color-bg:               #F4F7F6;
  --color-surface:          #FFFFFF;
  --color-border:           #DCE4E2;
  --text-primary:           #22333D;
  --text-on-dark:           #FFFFFF;

  --radius-card:   8px;
  --radius-button: 6px;

  --font-ui:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-headline: Georgia, 'Times New Roman', serif;

  --container: 1100px;
  --measure:   680px;   /* text blocks — roughly 68 characters at 18px */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.measure { max-width: var(--measure); }

section { padding: 56px 0; }

.band-tint  { background: var(--color-bg); }
.band-white { background: var(--color-surface); }

h1, h2, h3 { margin: 0; font-weight: 700; color: var(--color-navy); }

a { color: var(--color-teal-interactive); }

/* ---- Header -------------------------------------------------------------- */

.site-header {
  background: var(--color-navy);
  padding: 14px 0;
  position: relative;   /* containing block for the open nav panel */
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-on-dark);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.nav-toggle {
  background: none;
  border: 0;
  color: var(--text-on-dark);
  font-size: 22px;
  line-height: 1;
  padding: 6px 4px;
  cursor: pointer;
}
.site-nav { display: none; }
.site-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;            /* directly below the header bar, not overlapping it */
  left: 0; right: 0;
  background: var(--color-navy);
  padding: 4px 20px 18px;
  z-index: 20;
}
.site-nav a {
  display: block;
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.site-nav a:last-child { border-bottom: 0; }
/* Deep Digests is the product and leaves the site — set apart, marked outbound */
.site-nav a.is-product { font-weight: 600; }
.site-nav a.is-product::after { content: ' \2197'; font-size: 0.85em; opacity: 0.75; }

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

.hero { padding: 52px 0 48px; }
.hero h1 {
  font-size: 31px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.hero p.lead {
  font-size: 18px;
  color: var(--color-slate);
  margin: 0 0 22px;
}
.hero p.stance {
  font-size: 17px;
  color: var(--text-primary);
  margin: 0;
  padding-left: 16px;
  border-left: 3px solid var(--color-teal);
}

/* ---- Section 3: obstacles / hinge / response ----------------------------- */

.section-heading {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}

.obstacles { margin: 0 0 34px; padding: 0; list-style: none; }
.obstacles li {
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-primary);
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
}
.obstacles li:first-child { border-top: 1px solid var(--color-border); }

/* The hinge stands alone — it's the turn the section pivots on */
.hinge {
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-primary);
  margin: 0 0 38px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--color-teal);
}

.response p { margin: 0 0 18px; color: var(--color-slate); }
.response p:last-child { margin-bottom: 0; }
.response strong { color: var(--text-primary); font-weight: 600; }

/* ---- Section 4: Deep Digests --------------------------------------------- */

.dd-lead { color: var(--color-slate); margin: 0 0 28px; }

.digest-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 14px;
  margin: 0 -20px;          /* bleed to the screen edge on phone */
  scrollbar-width: none;
}
.digest-strip::-webkit-scrollbar { display: none; }

.digest-card {
  flex: 0 0 84%;            /* < 100% so the next card peeks — the swipe cue */
  max-width: 320px;
  scroll-snap-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px 18px 20px;
}
.digest-card__channel {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-slate);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--color-teal);
  margin-bottom: 13px;
}
.digest-card__headline {
  font-family: var(--font-headline);
  font-size: 17px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-navy);
  margin: 0 0 5px;
}
.digest-card__byline {
  font-size: 12.5px;
  color: var(--color-slate-light);
  margin: 0 0 9px;
}
.digest-card__summary {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-slate);
  margin: 0;
}

.format-note {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-slate-light);
  margin: 14px 0 26px;
}

/* ---- Buttons and links --------------------------------------------------- */

.btn-primary {
  display: inline-block;
  background: var(--color-navy);
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 11px 22px;
  border: 0;
  border-radius: var(--radius-button);
  cursor: pointer;
}
.btn-primary:hover { background: var(--color-navy-hover); }

/* Filled teal, not white-on-border: next to an input of the same height and
   radius, a bordered white button reads as another field. Teal rather than
   navy keeps the DD button the only navy one on the page. */
.btn-secondary {
  background: var(--color-teal-interactive);
  color: var(--text-on-dark);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  padding: 11px 20px;
  border: 1px solid var(--color-teal-interactive);
  border-radius: var(--radius-button);
  cursor: pointer;
  white-space: nowrap;
}
.btn-secondary:hover { background: #0F6350; border-color: #0F6350; }

.text-link {
  display: inline-block;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-teal-interactive);
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* ---- Forms --------------------------------------------------------------- */

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 460px;
  margin-top: 22px;
}
.signup-form input {
  font-family: var(--font-ui);
  font-size: 16px;
  height: 44px;
  padding: 0 13px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: var(--text-primary);
}
.signup-form input:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
  border-color: var(--color-teal);
}
.form-row { display: flex; gap: 10px; }
.form-row input[name="zip"] { flex: 0 0 110px; }
.form-row input[type="email"] { flex: 1 1 auto; min-width: 0; }

/* Honeypot: off-screen (not display:none, so bots that skip hidden fields
   still fill it) and removed from tab/AT flow. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status { color: var(--color-navy); margin: 6px 0 0; min-height: 1em; }
.form-confirm { color: var(--color-teal-interactive); font-weight: 600; margin: 22px 0 0; }

.timing-note { color: var(--color-slate); margin: 14px 0 0; }

/* ---- Section 6: AI groups ------------------------------------------------ */

.group-list { margin: 26px 0 0; padding: 0; list-style: none; }
.group-list li { border-bottom: 1px solid var(--color-border); }
.group-list li:first-child { border-top: 1px solid var(--color-border); }
.group-list a {
  display: block;
  padding: 15px 0;
  text-decoration: none;
  color: var(--text-primary);
}
.group-list a:hover .group-name { color: var(--color-teal-interactive); }
.group-name {
  display: block;
  font-weight: 600;
  font-size: 18px;
  color: var(--color-navy);
  margin-bottom: 2px;
}
.group-gloss {
  display: block;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-slate);
}

/* ---- Body copy in content sections --------------------------------------- */

.body-copy { color: var(--color-slate); margin: 0 0 16px; }
.body-copy:last-of-type { margin-bottom: 0; }

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

.site-footer {
  background: var(--color-navy);
  color: var(--text-on-dark);
  padding: 44px 0 36px;
}
.site-footer .wordmark { font-size: 17px; display: inline-block; margin-bottom: 22px; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 26px;
  padding: 0;
  list-style: none;
}
.footer-links a {
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 15px;
  opacity: 0.88;
}
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-fine {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.6);
  margin: 0;
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 760px) {

  section { padding: 84px 0; }

  .nav-toggle { display: none; }
  .site-nav { display: flex; gap: 30px; }
  .site-nav a {
    border-bottom: 0;
    padding: 0;
    font-size: 15.5px;
  }

  .hero { padding: 92px 0 80px; }
  .hero h1 { font-size: 44px; letter-spacing: -0.025em; }
  .hero p.lead { font-size: 20px; }
  .hero p.stance { font-size: 18px; }

  .section-heading { font-size: 31px; }

  .obstacles li { font-size: 20px; }
  .hinge { font-size: 20px; }

  /* Cards become a 2x2 grid — four across would squeeze each to ~190px */
  .digest-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    overflow: visible;
    max-width: 820px;
    padding: 0;
    margin: 0;
  }
  .digest-card { max-width: none; padding: 22px 24px 24px; }
  .digest-card__headline { font-size: 18px; }
  .digest-card__summary  { font-size: 15px; }

  .signup-form { flex-direction: row; align-items: center; max-width: 540px; }
  .signup-form input[type="email"] { flex: 1 1 auto; min-width: 0; }
  .form-row { flex: 1 1 auto; min-width: 0; }

  .group-list a { padding: 17px 0; }
  .group-name { font-size: 19px; }
}