/* Dashboard That — site styles
   C7 DARK MODE brand applied: charcoal bg, electric cyan + saturated periwinkle accents.
   Same hub/panel layout. Site embodies the dashboard. */

:root {
  --bg:          #2c2d3a;       /* charcoal page background */
  --surface:     #383a48;       /* panel surface (lifts off bg) */
  --surface-up:  #424454;       /* cards inside panels (further lifted, three layers of depth) */
  --text:        #f0f0f0;       /* off-white body text */
  --text-soft:   #b8bcc6;       /* cool light gray secondary text */
  --cyan:        #5eecdf;       /* electric cyan — KW, section labels, CTA pop */
  --cyan-deep:   #3dd0c4;       /* slightly deeper cyan — hover/depth */
  --periwinkle:  #7a99e8;       /* saturated periwinkle — tagline, italics */
  --rule:        #4a4d5a;       /* cool gray dividers/borders */

  /* Type scale — exactly 5 sizes. Italics/letter-spacing/color do the rest. */
  --t-xs:        0.8rem;        /* uppercase labels, header wordmark, footer */
  --t-sm:        0.95rem;       /* secondary text, card body, captions */
  --t-base:      1.05rem;       /* body default, all main text */
  --t-lg:        1.6rem;        /* section headlines */
  --t-xl:        2.2rem;        /* display headlines */

  --serif:       Georgia, "Times New Roman", serif;
  --max:         1100px;
  --pad:         clamp(1rem, 3vw, 1.75rem);
  --gap:         clamp(1.25rem, 2.5vw, 2rem);
  --radius:      6px;
  --shadow:      0 2px 4px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.22);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(94, 236, 223, 0.3);
}
a:hover { color: var(--cyan-deep); border-bottom-color: var(--cyan-deep); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: normal;
  color: var(--text);
  margin: 0 0 0.75rem 0;
  line-height: 1.2;
}

h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--cyan);
  margin-bottom: 1.25rem;
}
h4 { font-size: var(--t-base); color: var(--text); margin-bottom: 0.4rem; }

p { margin: 0 0 1rem 0; }
ul, ol { margin: 0 0 1rem 0; padding-left: 1.2rem; }

/* ---------- Layout primitives ---------- */

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.panel {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.panel-row {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .panel-row.triplet { grid-template-columns: 1fr 1fr 1fr; }
  .panel-row.duo     { grid-template-columns: 1fr 1fr; }
}

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

header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.5rem var(--pad) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
header .wordmark {
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: normal;
}
header nav { font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; }
header nav a {
  margin-left: 1.5rem;
  border-bottom: none;
  color: var(--text-soft);
}
header nav a:hover { color: var(--cyan); }

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

#hero {
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#hero h1 { margin-bottom: 2rem; color: var(--text); }
#hero h1 .kw {
  letter-spacing: 0.06em;
  color: var(--cyan);
}
#hero .pain-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  max-width: 38rem;
  font-size: var(--t-base);
  color: var(--text);
}
#hero .pain-list li {
  padding: 0.4rem 0;
  font-style: italic;
  color: var(--text-soft);
}
#hero .pain-list li em { color: var(--text); font-style: italic; }
#hero .relief {
  font-size: var(--t-base);
  color: var(--periwinkle);
  font-style: italic;
  margin: 1.5rem 0 0;
}

/* Brand verb panel — climactic tagline + value paragraph */
#brand-verb .big-verb {
  font-size: var(--t-xl);
  font-weight: normal;
  margin: 0 0 1rem 0;
  line-height: 1.25;
}
#brand-verb .big-verb em {
  color: var(--periwinkle);
  font-style: italic;
}
#brand-verb .brand-subtitle {
  font-size: var(--t-base);
  color: var(--cyan);
  letter-spacing: 0.04em;
  font-style: italic;
  margin: 0 0 2rem 0;
}
#brand-verb .value {
  font-size: var(--t-base);
  max-width: 40rem;
  margin: 0 0 2rem 0;
  color: var(--text-soft);
  line-height: 1.75;
}
#brand-verb h3 {
  margin-top: 2.5rem;
}
#brand-verb .founder-voice {
  font-size: var(--t-base);
  color: var(--text);
  line-height: 1.75;
  max-width: 40rem;
  margin: 0 0 1.25rem 0;
}
#brand-verb .founder-voice.closer {
  color: var(--periwinkle);
  margin-top: 1.5rem;
}
#brand-verb .founder-voice.closer em {
  font-style: italic;
}

/* ---------- Verb definition panel ---------- */

#verb > h3 {
  font-size: 1.65rem;
}
#verb .lingo-demo,
#verb .lingo-origin,
#verb .brand-intro,
#verb .definition,
#verb .definition-close,
#verb h2 {
  font-size: 1.3rem;
}
#verb .brand-intro {
  color: var(--text);
  margin: 0 0 2rem 0;
}
#verb .brand-intro strong {
  color: var(--cyan);
  font-weight: normal;
  letter-spacing: 0.02em;
}
#verb h2 {
  margin: 0 0 2rem 0;
}
#verb h2 em {
  color: var(--cyan);
  font-style: italic;
}
#verb .definition {
  max-width: 40rem;
  margin: 0 0 2rem 0;
  line-height: 1.75;
  color: var(--text);
}
#verb .def-term {
  color: var(--cyan);
  letter-spacing: 0.04em;
}
#verb .def-meta {
  color: var(--text-soft);
  font-style: italic;
  margin-left: 0.4rem;
}
#verb .brand-term,
.brand-term {
  color: var(--cyan);
  letter-spacing: 0.03em;
}
#verb .lingo-demo {
  color: var(--text);
  margin: 0 0 1.25rem 0;
}
#verb .lingo-demo em {
  color: var(--cyan);
  font-style: italic;
}

/* ---------- Triplet panel content ---------- */

.panel ul.tight, .panel ol.tight {
  padding-left: 1rem;
  font-size: var(--t-base);
}
.panel ul.tight li, .panel ol.tight li {
  padding: 0.25rem 0;
}
.panel ul.tight li em { color: var(--text); font-style: italic; }
.panel .relief {
  margin-top: 1.25rem;
  font-size: var(--t-base);
  color: var(--periwinkle);
  font-style: italic;
}

/* outcomes (gain panel) */
.outcomes {
  list-style: none;
  padding: 0;
  margin: 0;
}
.outcomes li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-base);
}
.outcomes li:last-child { border-bottom: none; }
.outcomes li::before {
  content: "→ ";
  color: var(--cyan);
  font-weight: bold;
}

/* how it works steps */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  padding: 0.75rem 0 0.75rem 2.5rem;
  position: relative;
  font-size: var(--t-base);
  border-bottom: 1px solid var(--rule);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--bg);
  font-size: var(--t-xs);
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps li strong { display: block; color: var(--text); }
.steps li span { color: var(--text-soft); font-size: var(--t-sm); }

/* ---------- Card grids (proof + invite) ---------- */

.cards {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  margin-top: 1.25rem;
}
@media (min-width: 540px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .cards.three { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 900px) { .cards.five { grid-template-columns: repeat(5, 1fr); } }

.card {
  background: var(--surface-up);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.2rem;
}
.card h4 {
  font-size: var(--t-base);
  color: var(--cyan);
  margin-bottom: 0.5rem;
}
.card p {
  font-size: var(--t-sm);
  color: var(--text-soft);
  margin: 0;
  line-height: 1.55;
}

/* category cards (invite section) */
.category-card {
  background: var(--surface-up);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.2rem;
}
.category-card h4 {
  font-size: var(--t-xs);
  color: var(--cyan);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.category-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--text-soft);
}
.category-card ul li {
  padding: 0.18rem 0;
  border-bottom: 1px dotted var(--rule);
}
.category-card ul li:last-child { border-bottom: none; }

.invite-intro {
  margin-bottom: 1rem;
}
.invite-intro p { color: var(--text); font-size: var(--t-base); }
.invite-intro p strong { color: var(--periwinkle); font-style: italic; font-weight: normal; }

.invite-closer {
  margin-top: 2rem;
  font-size: var(--t-base);
  color: var(--periwinkle);
  font-style: italic;
}

/* ---------- Deeper pains — what digital disorganization actually costs ---------- */

.pain-cost-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}
.pain-cost-list li {
  padding: 0.9rem 0 0.9rem 1.75rem;
  position: relative;
  font-size: var(--t-base);
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
}
.pain-cost-list li:last-child { border-bottom: none; }
.pain-cost-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0.9rem;
  color: var(--cyan);
}
.pain-cost-list li em {
  color: var(--periwinkle);
  font-style: italic;
}

/* ---------- The reframe panel ---------- */

#reframe .reframe-line {
  font-size: var(--t-lg);
  color: var(--text);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}
#reframe .reframe-line em {
  color: var(--cyan);
  font-style: italic;
}

/* ---------- What you get back (gain) ---------- */

#gain .gain-item {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--rule);
}
#gain .gain-item:last-child { border-bottom: none; }
#gain .gain-item h4 {
  font-size: var(--t-base);
  color: var(--cyan);
  margin: 0 0 0.4rem 0;
  letter-spacing: 0.02em;
}
#gain .gain-item p {
  font-size: var(--t-base);
  color: var(--text);
  margin: 0;
  max-width: 42rem;
  line-height: 1.65;
}

/* ---------- Start here (curated reflection) ---------- */

#start-here .start-prompt {
  font-style: italic;
  color: var(--periwinkle);
  font-size: var(--t-base);
  margin: 0 0 1.5rem 0;
}
#start-here .start-questions {
  list-style: none;
  padding: 0;
  margin: 0;
}
#start-here .start-questions li {
  padding: 0.9rem 0 0.9rem 1.75rem;
  position: relative;
  font-size: var(--t-base);
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
}
#start-here .start-questions li:last-child { border-bottom: none; }
#start-here .start-questions li::before {
  content: "?";
  position: absolute;
  left: 0;
  top: 0.9rem;
  color: var(--cyan);
  font-style: italic;
}

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

#cta {
  background: var(--cyan);
  color: var(--bg);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#cta h2, #cta p { color: var(--bg); }
#cta a {
  color: var(--bg);
  border-bottom: 1px solid var(--bg);
  font-style: italic;
}
#cta a:hover { opacity: 0.7; }
#cta .kw-cta {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

footer {
  padding: 2.5rem var(--pad) 3rem;
  font-size: var(--t-xs);
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
footer .footer-tag {
  font-style: italic;
  color: var(--periwinkle);
  margin: 0.4rem 0;
  font-size: var(--t-sm);
  letter-spacing: 0;
}
footer a { color: var(--cyan); border-bottom: none; }
footer a:hover { color: var(--cyan-deep); }