/* Clean editorial landing page.
   Humanist / organic typefaces, generous whitespace, clear section breaks,
   strong typography doing the work. No decoration for its own sake. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* MethodKit brand palette (methodkit.com) */
  --petrol: #3c8db5;          /* primary brand */
  --petrol-dark: #2c6c8c;     /* hover / deeper */
  --petrol-light: #a7cee5;    /* custom-petrol-light-faq */
  --petrol-lightest: #e9f2f7; /* custom-petrol-lightest-faq */
  --navy: #112337;            /* deep brand navy (hero/footer) */
  --maroon: #da4c26;          /* named accent / warm CTA */
  --maroon-dark: #b83c1c;
  --maroon-soft: #fbe7df;

  --ink: #1e1e1e;             /* custom-grey-darkest */
  --ink-soft: #404040;        /* custom-grey-dark */
  --ink-faint: #7d7c78;
  --paper: #FBFAF3;           /* accent-5 off-white */
  --paper-2: #eef4f8;         /* faint petrol-tinted band */
  --line: #dfe4e2;            /* neutral hairline, sits with petrol tints */

  /* Warm/human accent system: maroon is the single accent (CTA, links,
     bullets, eyebrows). Petrol is demoted to a structural role; navy stays
     the neutral dark block. */
  --accent: var(--maroon);
  --accent-soft: var(--maroon-soft);
  --accent-dark: var(--maroon-dark);   /* hover / pressed */
  --max: 720px;

  /* Honour OS light/dark for UA-rendered surfaces (scrollbars, form fields) */
  color-scheme: light dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 19px;
  line-height: 1.65;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Layout ---------- */
.sheet { width: 100%; }

section {
  padding: 84px 28px;
  border-bottom: 1px solid var(--line);
}
section > .inner {
  max-width: var(--max);
  margin: 0 auto;
}
section.alt { background: var(--paper-2); }
section.dark {
  background: var(--navy);
  color: var(--paper);
  border-bottom-color: #1d3147;
}
section.dark .eyebrow { color: var(--maroon); }
section.dark p { color: #c4d2de; }

/* Dark Context bridge — a navy "portal" block previewing darkcontext.ai so the
   funnel seam (socials → landing ↔ darkcontext, both directions) reads as one
   world. The one place petrol/cyan returns: cool = Dark Context, warm = workshop.
   Navy in both colour schemes, so it needs no dark-mode override. */
section.ctx-bridge {
  background-color: var(--navy);
  background-image:
    radial-gradient(150px 150px at 12% 24%, rgba(60,141,181,0.22), transparent 70%),
    radial-gradient(180px 180px at 88% 80%, rgba(140,64,96,0.18), transparent 70%),
    radial-gradient(1.5px 1.5px at 18% 38%, rgba(167,206,229,0.75), transparent),
    radial-gradient(1.5px 1.5px at 31% 68%, rgba(167,206,229,0.5), transparent),
    radial-gradient(1.5px 1.5px at 54% 26%, rgba(167,206,229,0.6), transparent),
    radial-gradient(1.5px 1.5px at 72% 54%, rgba(167,206,229,0.45), transparent),
    radial-gradient(1.5px 1.5px at 84% 32%, rgba(167,206,229,0.55), transparent),
    radial-gradient(1.5px 1.5px at 45% 84%, rgba(167,206,229,0.4), transparent);
  background-repeat: no-repeat;
}
section.ctx-bridge .eyebrow { color: var(--petrol-light); }   /* cyan = dark context */
section.ctx-bridge h2 { color: var(--paper); }
section.ctx-bridge h2 em { font-style: italic; color: #fff; }
section.ctx-bridge p { color: #c4d2de; }
/* Quiet text link, deliberately NOT a button. The page's only button-style CTA
   is "Book Office Hours"; this low-emphasis "read more" keeps the dark-context
   handoff from competing with the office-hours conversion. */
section.dark.ctx-bridge .ctx-more {
  display: inline-block;
  margin-top: 6px;
  color: var(--petrol-light);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid rgba(167, 206, 229, 0.4);
  padding-bottom: 1px;
  transition: border-color .15s ease;
}
section.dark.ctx-bridge .ctx-more:hover { border-bottom-color: var(--petrol-light); }

/* ---------- Typography ---------- */
h1, h2 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0 0 24px;
  text-wrap: balance;
}

h1 {
  font-size: clamp(38px, 6.2vw, 62px);
  line-height: 1.04;
  font-weight: 500;
}

h2 {
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.1;
}

h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

p { margin: 0 0 20px; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }

.lead { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.5; color: var(--ink); }

.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 0 0 20px;
}
/* ✷ glyph borrows darkcontext.ai's wordmark/label grammar. */
.hero .eyebrow::before,
section.ctx-bridge .eyebrow::before { content: "\2737\00a0\00a0"; }

strong { font-weight: 600; color: var(--ink); }

/* ---------- Hero ---------- */
.hero { padding-top: 104px; padding-bottom: 96px; }
.hero h1 { margin-bottom: 28px; }
.byline {
  font-size: 15px;
  color: var(--ink-faint);
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ---------- Lists ---------- */
ul.clean {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
ul.clean li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}
ul.clean li:last-child { border-bottom: none; }
ul.clean li::before {
  content: "";
  position: absolute;
  left: 0; top: 23px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
ul.check li::before,
ul.cross li::before {
  background: none;
  font-weight: 600;
  font-size: 16px;
  top: 13px; left: 0;
  width: auto; height: auto;
  border-radius: 0;
}
ul.check li::before { content: "\2713"; color: var(--accent); }
ul.cross li::before { content: "\2715"; color: var(--ink-faint); }

/* ---------- CTA ---------- */
.cta {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--paper);
  background: var(--accent);
  padding: 16px 32px;
  border-radius: 4px;
  margin: 12px 0 0;
  transition: background .15s ease, transform .15s ease;
}
.cta:hover { background: var(--accent-dark); transform: translateY(-1px); }
section.dark .cta { background: var(--maroon); color: var(--paper); }
section.dark .cta:hover { background: var(--maroon-dark); }

/* ---------- Cal.com inline embed ---------- */
/* Light card so the white scheduler reads as intentional on the navy section.
   min-height holds layout before the embed finishes auto-sizing. */
#cal-inline {
  min-height: 600px;
  margin: 28px 0 4px;
  padding: 8px;
  background: var(--paper);
  border-radius: 12px;
  overflow: hidden;
  /* CTAs scroll here (the embed), not the section header above it.
     scroll-margin keeps the calendar card off the very top edge. */
  scroll-margin-top: 32px;
}

.micro { font-size: 14px; color: var(--ink-faint); margin: 16px 0 0; }
section.dark .micro { color: #9fb1bf; }
.micro a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; transition: color .15s ease; }
.micro a:hover { color: var(--accent-dark); }
section.dark .micro a { color: var(--maroon); }
section.dark .micro a:hover { color: var(--paper); }

.anchor-link {
  display: inline-block;
  margin-top: 18px;
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.anchor-link:hover { border-bottom-color: var(--accent); }
.anchor-link::after { content: " \2193"; opacity: 0.6; }

/* Inline concept link in body copy (e.g. "dark context" → darkcontext.ai).
   Grounding reference, not a CTA — quiet underline, accent on hover. */
.ctx-link {
  color: var(--petrol);     /* cyan = points at Dark Context, not the warm workshop accent */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .15s ease;
}
.ctx-link:hover { color: var(--petrol-dark); }

/* ---------- Comparison table ---------- */
.compare { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 16px; }
.compare th, .compare td {
  text-align: left;
  vertical-align: top;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.compare th {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.compare td { color: var(--ink-soft); }
.compare td:first-child { font-weight: 600; color: var(--ink); width: 26%; }
.compare tr.highlight td {
  background: var(--accent-soft);
  color: var(--ink);
}
.compare tr.highlight td:first-child { color: var(--accent-dark); }

/* ---------- FAQ ---------- */
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: none; }
.faq-item p { margin-bottom: 0; }

/* ---------- Scene cards (show-then-name opener) ---------- */
.scenes {
  display: grid;
  gap: 24px;
  margin: 8px 0 0;
}
@media (min-width: 720px) {
  .scenes { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
.scene {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px;
}
section.alt .scene { background: #fff; }
.scene .scene-label {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
  margin: 0 0 12px;
}
.scene p { font-size: 16.5px; line-height: 1.55; margin: 0 0 14px; }
.scene .scene-turn {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

/* ---------- Pull quote / recognition line ---------- */
.recognize {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  font-weight: 500;
  color: var(--ink);
  margin: 36px 0 0;
  text-wrap: balance;
}

/* ---------- Session offer card ---------- */
.offer-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.offer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 22px 26px;
  background: var(--navy);
  color: var(--paper);
}
.offer-head .offer-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 23px;
  font-weight: 600;
}
.offer-head .offer-meta {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.9;
}
.offer-body {
  display: grid;
  gap: 0;
}
@media (min-width: 680px) {
  .offer-body { grid-template-columns: 1fr 1fr; }
  .offer-col + .offer-col { border-left: 1px solid var(--line); }
}
.offer-col { padding: 26px; }
.offer-col + .offer-col { border-top: 1px solid var(--line); }
@media (min-width: 680px) {
  .offer-col + .offer-col { border-top: none; }
}
.offer-col h4 {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}
.offer-col ul { list-style: none; padding: 0; margin: 0; }
.offer-col li {
  position: relative;
  padding: 0 0 14px 22px;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.offer-col li:last-child { padding-bottom: 0; }
.offer-col li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.offer-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 26px;
  border-top: 1px solid var(--line);
  background: var(--accent-soft);
}
.offer-foot .offer-note { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* ---------- Artifact (sample brief) ---------- */
.artifact {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin: 8px 0 0;
  background: var(--navy);
}
.artifact-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #0c1b2c;
  border-bottom: 1px solid #1d3147;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: #9fb1bf;
}
.artifact-bar .dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: #2f4256; display: inline-block;
}
.artifact pre {
  margin: 0;
  padding: 22px 20px;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #cdd9e4;
  overflow-x: auto;
  white-space: pre;
  tab-size: 2;
}
.artifact pre .c { color: #6f8294; }       /* comment / meta */
.artifact pre .k { color: var(--petrol-light); } /* key */
.artifact pre .v { color: #e7c89a; }        /* value */
.artifact-cap {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 14px 0 0;
}

/* ---------- Proof logo band ---------- */
.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  margin: 22px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.logos .logos-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.logos .logo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-soft);
}
.logos-wall {
  width: 100%;
  margin: 22px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.logos-wall .logos-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 18px;
}
.logos-wall img {
  display: block;
  width: 100%;
  max-width: 760px;
  height: auto;
  opacity: 0.78;
}

/* ---------- Variant switcher ---------- */
.switch {
  position: fixed;
  top: 18px; right: 18px;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(250,248,243,0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 8px;
  z-index: 50;
}
.switch a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink-soft);
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 5px;
}
.switch a.on { background: var(--accent); color: var(--paper); }

/* ---------- Site footer (public) ---------- */
.site-footer {
  padding: 56px 28px 64px;
  text-align: center;
  background: var(--paper);
}
.site-footer .inner { max-width: var(--max); margin: 0 auto; }
.site-footer .foot-brand {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.site-footer .foot-line {
  font-size: 14px;
  color: var(--ink-faint);
  margin: 0;
}
.site-footer .foot-line a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease;
}
.site-footer .foot-line a:hover { border-bottom-color: var(--accent); }

/* ---------- Section eyebrow spacing ---------- */
.inner > .eyebrow:first-child { margin-top: 0; }

@media (max-width: 560px) {
  section { padding: 60px 22px; }
  .hero { padding-top: 80px; }
  .compare td:first-child { width: auto; }

  /* Comparison table: tighter so the three columns breathe at phone width. */
  .compare { font-size: 14px; }
  .compare th, .compare td { padding: 12px 10px; }

  /* Code-block artifact: wrap long lines instead of running off-screen.
     pre-wrap keeps the indentation; overflow-wrap handles any long token. */
  .artifact pre {
    font-size: 12px;
    padding: 16px 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* ---------- Dark mode (auto, follows OS setting) ----------
   The palette is variable-driven, so most of the page re-themes by
   re-pointing the tokens. The explicit rules below handle the cases that
   don't flow through a token: light text that must stay light on surfaces
   which remain coloured in both modes, the white card backgrounds, the
   translucent switcher, and the monochrome client logos. */
@media (prefers-color-scheme: dark) {
  :root {
    --petrol: #56a6cf;          /* brightened so accents/links/buttons carry on dark */
    --petrol-dark: #7cbce0;     /* hover lightens on dark instead of deepening */
    --petrol-light: #a7cee5;
    --petrol-lightest: #15303d; /* now a dark petrol-tinted surface (highlight row, offer foot) */
    --navy: #112337;            /* CTA band + artifact stay navy; reads raised on the darker page */
    --maroon: #ec6442;          /* brightened for eyebrow/label legibility on dark */
    --maroon-dark: #d4502c;
    --maroon-soft: #2c1812;     /* dark warm-tinted surface (offer foot, table highlight) */

    --ink: #eef2f7;             /* headings, lead, strong */
    --ink-soft: #c4ced8;        /* body text */
    --ink-faint: #8693a0;       /* muted text, hairline labels */
    --paper: #0d1620;           /* page background */
    --paper-2: #14202c;         /* alternating band (sits just above the page) */
    --line: #273440;            /* hairlines */
    /* --accent / --accent-soft derive from the above automatically */
  }

  /* Light text on surfaces that stay coloured/navy in both modes. */
  .cta,
  section.dark,
  section.dark .cta,
  .offer-head,
  .switch a.on,
  section.dark .micro a:hover { color: #FBFAF3; }

  /* Raised card surfaces (were #fff in light mode). */
  .scene,
  section.alt .scene,
  .offer-card { background: #18252f; }

  /* Floating variant switcher pill. */
  .switch { background: rgba(16, 24, 34, 0.92); }

  /* Client wordmarks are monochrome #404040 and would vanish on dark;
     flatten to white and preserve the built-in opacity hierarchy. */
  .logos-wall img { filter: brightness(0) invert(1); opacity: 0.7; }
}