/* Dan Rodgers — The Technical Threshold
   POC funnel. Palette is deep-water, not "tech startup blue". */

:root {
  --ink: #0B1B26;
  --ink-soft: #1E3546;
  --body: #2B3F4E;
  --muted: #6A7F8D;
  --line: #DCE5EA;
  --paper: #FFFFFF;
  --wash: #F4F8FA;
  --deep: #08222F;
  --accent: #0E7C86;
  --accent-dark: #0A5F67;
  --warn: #B4531F;
  --max: 720px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 400 18px/1.65 Georgia, "Iowan Old Style", "Times New Roman", serif;
}

h1, h2, h3, .ui {
  font-family: "Helvetica Neue", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 5.2vw, 3.1rem); line-height: 1.12; letter-spacing: -0.021em; margin: 0 0 .6em; font-weight: 700; }
h2 { font-size: clamp(1.45rem, 3.4vw, 2rem); line-height: 1.2; letter-spacing: -0.014em; margin: 2.6em 0 .7em; font-weight: 700; }
h3 { font-size: 1.12rem; margin: 2em 0 .5em; font-weight: 700; letter-spacing: -0.006em; }
p { margin: 0 0 1.15em; }
a { color: var(--accent-dark); }

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

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(168deg, var(--deep) 0%, #0d3140 58%, #114455 100%);
  color: #E8F1F4;
  padding: 68px 0 60px;
}
.hero h1 { color: #fff; }
.hero .kicker {
  font: 600 12.5px/1 "Helvetica Neue", Inter, sans-serif;
  letter-spacing: .15em; text-transform: uppercase;
  color: #7FC4CC; margin: 0 0 22px;
}
.hero .lede { font-size: 1.16rem; color: #C6DCE2; max-width: 34em; }
.hero .lede strong { color: #fff; font-weight: 400; box-shadow: inset 0 -0.55em 0 rgba(14,124,134,.42); }

.byline { margin-top: 30px; font: 400 15px/1.5 "Helvetica Neue", Inter, sans-serif; color: #8FB2BC; }
.byline b { color: #DCEAEE; font-weight: 600; }

/* ---------- generic ---------- */
section { padding: 4px 0; }
.band { background: var(--wash); border-block: 1px solid var(--line); padding: 44px 0; margin: 56px 0; }

.lead-in { font-size: 1.1rem; color: var(--ink-soft); }

blockquote {
  margin: 1.8em 0; padding: 2px 0 2px 22px;
  border-left: 3px solid var(--accent);
  font-style: italic; color: var(--ink-soft);
}
blockquote p:last-child { margin-bottom: 0; }

.note {
  font: 400 15.5px/1.6 "Helvetica Neue", Inter, sans-serif;
  color: var(--muted);
}

/* ---------- the three collapses ---------- */
.collapse-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin: 26px 0 8px; }
.collapse {
  background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent);
  border-radius: 3px; padding: 18px 18px 6px;
}
.collapse h3 { margin: 0 0 .4em; font-size: 1rem; }
.collapse ul { margin: 0 0 14px; padding-left: 18px; font: 400 15.5px/1.55 "Helvetica Neue", Inter, sans-serif; color: var(--body); }
.collapse li { margin-bottom: 3px; }

/* ---------- contents ---------- */
.parts { margin: 24px 0; }
.part { border-top: 1px solid var(--line); padding: 16px 0 6px; }
.part-name {
  font: 600 12px/1 "Helvetica Neue", Inter, sans-serif;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 10px;
}
.part ol { margin: 0; padding-left: 20px; font: 400 16px/1.62 "Helvetica Neue", Inter, sans-serif; }
.part li { margin-bottom: 4px; color: var(--ink-soft); }

/* ---------- offer ---------- */
.offer {
  border: 2px solid var(--ink); border-radius: 4px; padding: 30px 28px 26px;
  margin: 30px 0; background: var(--paper);
}
.price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.price .amount { font: 700 3rem/1 "Helvetica Neue", Inter, sans-serif; color: var(--ink); letter-spacing: -.03em; }
.price .cur { font: 600 15px/1 "Helvetica Neue", Inter, sans-serif; color: var(--muted); }
.offer ul { padding-left: 20px; font: 400 16.5px/1.6 "Helvetica Neue", Inter, sans-serif; }
.offer li { margin-bottom: 6px; }

.btn {
  display: block; width: 100%; text-align: center; text-decoration: none;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  font: 600 18px/1 "Helvetica Neue", Inter, sans-serif;
  padding: 18px 22px; border-radius: 3px; margin-top: 20px;
  transition: background .14s ease;
}
.btn:hover { background: var(--accent-dark); }
.btn-sub { text-align: center; margin: 10px 0 0; font: 400 14px/1.5 "Helvetica Neue", Inter, sans-serif; color: var(--muted); }

/* ---------- back end ---------- */
.tier {
  border: 1px solid var(--line); border-radius: 4px; padding: 24px 24px 18px; margin: 18px 0;
  background: var(--paper);
}
.tier.flagship { border-color: var(--ink); border-width: 2px; }
.tier h3 { margin-top: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.tier .tag { font: 600 12px/1 "Helvetica Neue", Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); }
.tier .amt { font: 700 1.55rem/1 "Helvetica Neue", Inter, sans-serif; color: var(--ink); white-space: nowrap; }
.tier ul { padding-left: 20px; font: 400 16px/1.58 "Helvetica Neue", Inter, sans-serif; margin-bottom: 6px; }

/* ---------- author ---------- */
.author { display: flex; gap: 20px; align-items: flex-start; margin: 22px 0; }
.author .who { font: 600 16px/1.4 "Helvetica Neue", Inter, sans-serif; color: var(--ink); }

/* ---------- faq ---------- */
details { border-bottom: 1px solid var(--line); padding: 15px 0; }
details summary {
  cursor: pointer; font: 600 16.5px/1.4 "Helvetica Neue", Inter, sans-serif; color: var(--ink);
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; color: var(--accent); font-weight: 700; }
details[open] summary::before { content: "– "; }
details .body { padding-top: 10px; font-size: 17px; }
details .body p:last-child { margin-bottom: 0; }

/* ---------- footer ---------- */
footer {
  margin-top: 64px; border-top: 1px solid var(--line); padding: 26px 0 46px;
  font: 400 14.5px/1.6 "Helvetica Neue", Inter, sans-serif; color: var(--muted);
}
footer a { color: var(--muted); }

.poc {
  background: #FFF6E9; border: 1px solid #E9C99A; color: #7A4A12;
  font: 500 14px/1.5 "Helvetica Neue", Inter, sans-serif;
  padding: 11px 16px; border-radius: 3px; margin: 0 0 26px;
}

@media (max-width: 560px) {
  body { font-size: 17px; }
  .hero { padding: 48px 0 44px; }
  .offer { padding: 22px 20px 20px; }
}