:root { color-scheme: light; --bg:#eef1ef; --paper:#fff; --ink:#12201e; --muted:#596764; --line:#c7cfcc; --accent:#e9583f; --green:#087f72; --max:1080px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; overflow-x:hidden; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:68px; padding:12px max(18px,calc((100% - var(--max))/2)); border-bottom:1px solid var(--line); background:var(--paper); color:var(--muted); font-size:13px; font-weight:700; text-transform:uppercase; }
header a { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; text-transform:none; font-size:16px; }
main { width:min(var(--max),calc(100% - 32px)); margin:0 auto; }
.intro { padding:90px 0 70px; max-width:920px; }
.eyebrow { margin:0 0 14px; color:var(--green); font-size:12px; font-weight:800; text-transform:uppercase; }
h1 { max-width:100%; margin:0; font-size:clamp(42px,8vw,86px); line-height:.98; overflow-wrap:anywhere; }
.intro > p:last-child { width:100%; max-width:760px; margin:28px 0 0; color:var(--muted); font-size:20px; line-height:1.55; overflow-wrap:anywhere; }
.funnel { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); background:var(--paper); }
.funnel div { min-height:130px; display:flex; flex-direction:column; justify-content:space-between; padding:22px; border-right:1px solid var(--line); }
.funnel div:last-child { border:0; }
.funnel strong { font-size:19px; }
.funnel span { color:var(--muted); font-size:13px; text-transform:uppercase; }
.worksheet { margin:70px 0; border-top:1px solid var(--line); }
.worksheet article { display:grid; grid-template-columns:100px 1fr; gap:28px; padding:30px 0; border-bottom:1px solid var(--line); }
.worksheet article > span { color:var(--accent); font-size:30px; font-weight:800; }
.worksheet h2 { margin:0 0 10px; font-size:27px; }
.worksheet p { max-width:760px; margin:8px 0; color:var(--muted); font-size:17px; line-height:1.55; }
.worksheet .prompt { padding:14px 16px; border-left:3px solid var(--green); background:var(--paper); color:var(--ink); font-weight:650; }
.channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; margin-bottom:70px; border:1px solid var(--line); background:var(--line); }
.channel-grid > div { padding:34px; background:var(--paper); }
.channel-grid h2 { margin:0; font-size:34px; }
.channel-grid ul { margin:24px 0 0; padding-left:20px; color:var(--muted); line-height:1.9; }
.close { margin:0 calc(50% - 50vw); padding:80px max(18px,calc((100vw - var(--max))/2)); color:#f6f4ed; background:#12201e; }
.close .eyebrow { color:#65cfbd; }
.close h2 { max-width:900px; margin:0 0 30px; font-size:clamp(34px,6vw,62px); line-height:1.05; }
.close a { display:inline-flex; padding:12px 16px; border:1px solid #63716e; border-radius:6px; color:#fff; text-decoration:none; font-weight:750; }
footer { padding:24px max(18px,calc((100% - var(--max))/2)); color:var(--muted); background:var(--paper); font-size:13px; line-height:1.5; }
@media (max-width:700px) { header { align-items:flex-start; flex-direction:column; } .intro { padding-top:66px; } h1 { font-size:clamp(38px,11vw,52px); } .funnel,.channel-grid { grid-template-columns:1fr; } .funnel div { min-height:90px; border-right:0; border-bottom:1px solid var(--line); } .worksheet article { grid-template-columns:1fr; gap:10px; } }

/* v3 guide identity and interactive tools */
:root {
  --bg: #f7f5fa;
  --paper: #ffffff;
  --ink: #1b1325;
  --muted: #665c70;
  --line: #d8cfe2;
  --accent: #7444da;
  --green: #118b68;
}

header {
  color: #7444da;
}

.eyebrow {
  color: #118b68;
}

.funnel,
.channel-grid {
  box-shadow: 0 24px 70px rgba(65, 38, 91, 0.08);
}

.funnel div {
  border-top: 4px solid #7444da;
}

.funnel div:nth-child(2),
.funnel div:nth-child(4) {
  border-top-color: #118b68;
}

.worksheet article > span {
  color: #7444da;
}

.worksheet .prompt {
  border-left-color: #118b68;
}

.close {
  background: #241336;
}

.toolkit {
  margin: 80px calc(50% - 50vw);
  padding: 90px max(18px, calc((100vw - var(--max)) / 2));
  color: #ffffff;
  background: #21142f;
}

.toolkit-heading {
  max-width: 820px;
}

.toolkit-heading h2,
.economics h2 {
  margin: 0;
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1.04;
}

.toolkit-heading > p:last-child,
.economics-copy > p:last-child {
  color: #cbbfd7;
  font-size: 18px;
  line-height: 1.55;
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 22px;
  margin-top: 50px;
}

.builder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 26px;
  border: 1px solid #4d3864;
  border-radius: 8px;
  background: #2b1d3b;
}

.field {
  min-width: 0;
}

.field.full,
.builder-actions.full {
  grid-column: 1 / -1;
}

.field label,
.field legend {
  display: block;
  margin-bottom: 8px;
  color: #e9e0f0;
  font-size: 13px;
  font-weight: 750;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid #624b79;
  border-radius: 5px;
  color: #ffffff;
  background: #1b1126;
  font: inherit;
}

.field textarea {
  min-height: 92px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid #8e66e8;
  outline-offset: 1px;
}

.channel-picker {
  margin: 0;
  padding: 0;
  border: 0;
}

.channel-picker label {
  display: inline-flex;
  margin: 0 8px 0 0;
}

.channel-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.channel-picker span {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid #624b79;
  border-radius: 5px;
  color: #d5c8df;
  background: #1b1126;
  cursor: pointer;
}

.channel-picker input:checked + span {
  color: #ffffff;
  border-color: #9c76ef;
  background: #7444da;
}

.builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.builder-actions button,
.output-head button {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid #765c91;
  border-radius: 5px;
  color: #ffffff;
  background: #38264b;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.builder-actions .primary-action {
  color: #07130f;
  border-color: #28d79f;
  background: #28d79f;
}

.output {
  align-self: start;
  position: sticky;
  top: 20px;
  overflow: hidden;
  border: 1px solid #d8cfe2;
  border-radius: 8px;
  color: #1b1325;
  background: #ffffff;
}

.output-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid #e4dcea;
}

.output-head small {
  color: #7444da;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.output-head h3 {
  margin: 3px 0 0;
  font-size: 20px;
}

.output-head button {
  color: #352446;
  border-color: #c6b7d6;
  background: #f5f1f8;
}

#promptOutput {
  min-height: 285px;
  max-height: 430px;
  margin: 0;
  padding: 20px;
  overflow: auto;
  white-space: pre-wrap;
  color: #40364a;
  background: #fbf9fc;
  font: 13px/1.6 "Cascadia Code", Consolas, monospace;
}

.blueprint-head {
  border-top: 1px solid #e4dcea;
}

#blueprintOutput {
  padding: 20px;
}

.blueprint-empty {
  color: #746a7d;
  line-height: 1.55;
}

.blueprint-list {
  display: grid;
  gap: 12px;
}

.blueprint-list div {
  padding-bottom: 11px;
  border-bottom: 1px solid #ece6f0;
}

.blueprint-list small {
  display: block;
  color: #7444da;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.blueprint-list strong {
  display: block;
  margin-top: 4px;
}

.economics {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 40px;
  margin-top: 70px;
  padding-top: 60px;
  border-top: 1px solid #4d3864;
}

.economics-inputs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.economics-inputs label {
  position: relative;
  display: grid;
  gap: 7px;
  color: #d8cddd;
  font-size: 12px;
  font-weight: 700;
}

.economics-inputs label span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  color: #a99cb5;
}

.economics-inputs input {
  min-height: 44px;
  padding: 10px 12px 10px 29px;
  border: 1px solid #624b79;
  border-radius: 5px;
  color: #ffffff;
  background: #1b1126;
  font: inherit;
}

.economics-results {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin-top: 10px;
  border: 1px solid #4d3864;
  background: #4d3864;
}

.economics-results div {
  min-height: 105px;
  padding: 17px;
  background: #2b1d3b;
}

.economics-results small {
  display: block;
  color: #bfb1ca;
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.economics-results strong {
  display: block;
  margin-top: 15px;
  color: #ffffff;
  font-size: 25px;
}

@media (max-width: 900px) {
  .tool-layout,
  .economics {
    grid-template-columns: 1fr;
  }

  .output {
    position: static;
  }

  .economics-results {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .builder,
  .economics-inputs,
  .economics-results {
    grid-template-columns: 1fr;
  }

  .tool-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}