/* Modulus Partner — shared stylesheet */

:root {
  --navy:    #0A1520;
  --navy2:   #0F1E2E;
  --mid:     #1A3352;
  --steel:   #7B96B2;
  --steel2:  #A8C0D6;
  --muted:   #8AAAC4;
  --cream:   #F2EDE6;
  --white:   #FFFFFF;
  --border:  rgba(123,150,178,0.14);
  --border2: rgba(123,150,178,0.26);

  --measure: 34rem;
  --gutter: 3.5rem;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

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

body {
  background:var(--navy);
  color:var(--cream);
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.75;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

body::after {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.022;
  pointer-events:none;
  z-index:9999;
}

a { color:inherit; }

::selection { background:var(--steel2); color:var(--navy); }

:focus-visible {
  outline:2px solid var(--steel2);
  outline-offset:3px;
  border-radius:2px;
}

/* ── Type scale ── */

h1, h2, h3, .display {
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--cream);
}

h1 {
  font-size:clamp(2.6rem, 6vw, 4.5rem);
  line-height:1.06;
}

h2 {
  font-size:clamp(1.9rem, 3.4vw, 2.9rem);
  line-height:1.14;
}

h3 {
  font-size:1.35rem;
  line-height:1.3;
}

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

strong { font-weight:500; color:var(--white); }

.lede {
  font-size:1.1875rem;
  line-height:1.8;
  color:var(--muted);
}

.meta {
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  letter-spacing:0.04em;
  color:var(--steel);
}

/* ── Shell ── */

.wrap {
  max-width:72rem;
  margin:0 auto;
  padding:0 var(--gutter);
}

.narrow { max-width:46rem; }

section { position:relative; z-index:1; }

.band {
  padding:6.5rem 0;
  border-top:1px solid var(--border);
}

.band-fill { background:var(--navy2); }

.band-head { margin-bottom:3.25rem; }
.band-head h2 { max-width:24ch; }
.band-head p { margin-top:1.25rem; }

/* ── Nav ── */

.nav {
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  height:4rem;
  padding:0 var(--gutter);
  background:rgba(10,21,32,0.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}

.brand {
  display:flex;
  align-items:center;
  gap:0.7rem;
  text-decoration:none;
  flex-shrink:0;
}

.brand-mark {
  width:2rem; height:2rem;
  background:var(--mid);
  border:1px solid var(--border2);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
}

.brand-name {
  font-family:'Cormorant Garamond', serif;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:0.01em;
}
.brand-name span { color:var(--steel2); font-weight:400; }

.nav-links {
  display:flex;
  align-items:center;
  gap:1.75rem;
  font-size:0.9375rem;
}

.nav-links a {
  text-decoration:none;
  color:var(--muted);
  transition:color 0.18s;
  white-space:nowrap;
}
.nav-links a:hover { color:var(--cream); }

.nav-links a.nav-cta {
  color:var(--cream);
  border:1px solid var(--border2);
  border-radius:2px;
  padding:0.45rem 1.1rem;
}
.nav-links a.nav-cta:hover { background:rgba(123,150,178,0.12); border-color:var(--steel); }

/* ── Buttons ── */

.btn {
  display:inline-block;
  font-family:'IBM Plex Sans', sans-serif;
  font-size:1rem;
  font-weight:400;
  text-decoration:none;
  padding:0.85rem 1.9rem;
  border-radius:2px;
  transition:background 0.2s, border-color 0.2s, color 0.2s;
}

.btn-solid {
  background:var(--cream);
  color:var(--navy);
}
.btn-solid:hover { background:var(--steel2); }

.btn-line {
  border:1px solid var(--border2);
  color:var(--cream);
}
.btn-line:hover { border-color:var(--steel); background:rgba(123,150,178,0.08); }

.btn-row {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.25rem;
}

/* ── Hero ── */

.hero {
  padding:7rem 0 6rem;
}

.hero h1 { max-width:16ch; }

.hero .lede {
  margin-top:1.75rem;
  max-width:38rem;
}

.hero .btn-row { margin-top:2.75rem; }

.hero-credential {
  margin-top:4.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem 2.25rem;
  font-size:0.9375rem;
  color:var(--steel);
  max-width:54rem;
}

/* Single orchestrated page-load reveal, hero only */
.hero > * { opacity:0; transform:translateY(0.9rem); animation:rise 0.7s cubic-bezier(.2,.6,.2,1) forwards; }
.hero > *:nth-child(1) { animation-delay:0.05s; }
.hero > *:nth-child(2) { animation-delay:0.16s; }
.hero > *:nth-child(3) { animation-delay:0.27s; }
.hero > *:nth-child(4) { animation-delay:0.38s; }

@keyframes rise { to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .hero > * { opacity:1; transform:none; animation:none; }
  * { transition-duration:0.01ms !important; }
}

/* ── Problem list ── */

.problems {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:2.75rem 4rem;
}

.problem h3 { margin-bottom:0.6rem; }
.problem p { color:var(--muted); font-size:1rem; }

/* ── Module selector ── */

.modules {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
}

.module { position:relative; background:var(--navy); }

.module input {
  position:absolute;
  opacity:0;
  width:0; height:0;
}

.module label {
  display:block;
  padding:2.25rem 2.25rem 2.5rem;
  cursor:pointer;
  height:100%;
  transition:background 0.2s;
  border-left:2px solid transparent;
}

.module label:hover { background:rgba(26,51,82,0.35); }

.module input:focus-visible + label {
  outline:2px solid var(--steel2);
  outline-offset:-2px;
}

.module input:checked + label {
  background:rgba(26,51,82,0.5);
  border-left-color:var(--steel2);
}

.module-top {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:0.75rem;
}

.module-top h3 { margin:0; }

.module-state {
  font-family:'IBM Plex Mono', monospace;
  font-size:0.6875rem;
  letter-spacing:0.08em;
  color:var(--steel);
  border:1px solid var(--border2);
  border-radius:999px;
  padding:0.15rem 0.7rem;
  white-space:nowrap;
}
.module input:checked + label .module-state {
  color:var(--navy);
  background:var(--steel2);
  border-color:var(--steel2);
}
.module-state::before { content:attr(data-off); }
.module input:checked + label .module-state::before { content:attr(data-on); }

.module p { color:var(--muted); font-size:1rem; max-width:30rem; }

.module ul {
  list-style:none;
  margin-top:1.1rem;
  display:grid;
  gap:0.4rem;
  font-size:0.9375rem;
  color:var(--steel2);
}
.module li { padding-left:1rem; position:relative; }
.module li::before {
  content:'';
  position:absolute;
  left:0; top:0.72em;
  width:5px; height:1px;
  background:var(--steel);
}

.basket {
  margin-top:1.75rem;
  padding:1.5rem 2rem;
  border:1px solid var(--border2);
  background:var(--navy2);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1.25rem;
}

.basket-text { max-width:40rem; }
.basket-text p { color:var(--muted); font-size:1rem; margin:0; }
#basket-list { color:var(--cream); }

/* ── Sequence (process) ── */

.steps {
  counter-reset:step;
  display:grid;
  gap:0;
}

.step {
  display:grid;
  grid-template-columns:4rem 1fr;
  gap:2rem;
  padding:2.25rem 0;
  border-top:1px solid var(--border);
  align-items:start;
}
.steps .step:last-child { border-bottom:1px solid var(--border); }

.step::before {
  counter-increment:step;
  content:counter(step);
  font-family:'Cormorant Garamond', serif;
  font-size:2.25rem;
  line-height:1;
  color:var(--steel);
}

.step h3 { margin-bottom:0.5rem; }
.step p { color:var(--muted); font-size:1rem; }

/* ── Two column ── */

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4.5rem;
  align-items:start;
}

.fitlist { list-style:none; display:grid; gap:0.9rem; }
.fitlist li {
  display:grid;
  grid-template-columns:1.25rem 1fr;
  gap:0.75rem;
  font-size:1rem;
  color:var(--muted);
  line-height:1.7;
}
.fitlist li b { font-weight:400; color:var(--steel2); }
.fitlist.no li b { color:var(--steel); }

.callout {
  margin-top:2rem;
  padding:1.5rem 1.75rem;
  border-left:2px solid var(--steel2);
  background:rgba(26,51,82,0.3);
}
.callout p { font-size:1rem; color:var(--cream); margin:0; }

/* ── Founder ── */

.founder-quote {
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  line-height:1.35;
  color:var(--cream);
  max-width:28ch;
}

.founder-facts { list-style:none; display:grid; gap:1.1rem; }
.founder-facts li { font-size:1rem; color:var(--muted); }
.founder-facts b { display:block; font-weight:400; color:var(--cream); }

/* ── FAQ ── */

.faq { border-top:1px solid var(--border); }
.faq details { border-bottom:1px solid var(--border); }

.faq summary {
  list-style:none;
  cursor:pointer;
  padding:1.5rem 3rem 1.5rem 0;
  position:relative;
  font-family:'Cormorant Garamond', serif;
  font-size:1.3rem;
  font-weight:600;
  color:var(--cream);
  transition:color 0.18s;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--steel2); }

.faq summary::after {
  content:'';
  position:absolute;
  right:0.5rem; top:2rem;
  width:0.7rem; height:1px;
  background:var(--steel);
}
.faq summary::before {
  content:'';
  position:absolute;
  right:0.85rem; top:1.65rem;
  width:1px; height:0.7rem;
  background:var(--steel);
  transition:transform 0.22s, opacity 0.22s;
}
.faq details[open] summary::before { transform:scaleY(0); opacity:0; }

.faq details p {
  color:var(--muted);
  font-size:1rem;
  padding:0 3rem 1.75rem 0;
}

/* ── Contact ── */

.contact { text-align:left; }
.contact p { margin-top:1.25rem; }

.mail {
  display:inline-block;
  margin-top:2.25rem;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(1.6rem, 3.5vw, 2.4rem);
  color:var(--cream);
  text-decoration:none;
  border-bottom:1px solid var(--border2);
  padding-bottom:0.2rem;
  transition:border-color 0.2s, color 0.2s;
}
.mail:hover { color:var(--steel2); border-color:var(--steel2); }

/* ── Post list ── */

.postlist { display:grid; }

.postlist a {
  display:grid;
  grid-template-columns:9rem 1fr;
  gap:2.5rem;
  padding:2rem 0;
  border-top:1px solid var(--border);
  text-decoration:none;
  transition:background 0.18s;
}
.postlist a:last-child { border-bottom:1px solid var(--border); }
.postlist a:hover { background:rgba(26,51,82,0.25); }

.postlist h3 { margin-bottom:0.4rem; }
.postlist p { color:var(--muted); font-size:1rem; margin:0; }

/* ── Article ── */

.article { padding:5rem 0 4rem; }
.article-head { max-width:46rem; margin-bottom:3rem; }
.article-head h1 { font-size:clamp(2.1rem, 4.6vw, 3.25rem); }
.article-head .meta { display:block; margin-bottom:1.5rem; }

.prose { max-width:40rem; }
.prose > * + * { margin-top:1.4rem; }
.prose h2 { font-size:1.75rem; margin-top:3.25rem; }
.prose h3 { font-size:1.25rem; margin-top:2.25rem; }
.prose p { color:var(--cream); }
.prose ul, .prose ol { padding-left:1.25rem; color:var(--cream); display:grid; gap:0.6rem; }
.prose li { padding-left:0.35rem; }
.prose li::marker { color:var(--steel); }
.prose blockquote {
  border-left:2px solid var(--steel2);
  padding:0.25rem 0 0.25rem 1.5rem;
  color:var(--steel2);
  font-family:'Cormorant Garamond', serif;
  font-size:1.35rem;
  line-height:1.45;
}
.prose a { color:var(--steel2); text-decoration:underline; text-underline-offset:3px; }
.prose hr { border:0; border-top:1px solid var(--border); margin:3rem 0; }

.article-end {
  max-width:40rem;
  margin-top:4rem;
  padding-top:2rem;
  border-top:1px solid var(--border);
}
.article-end p { color:var(--muted); font-size:1rem; }

/* ── Footer ── */

.foot {
  border-top:1px solid var(--border);
  padding:2.5rem var(--gutter);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem 2rem;
  font-size:0.875rem;
  color:var(--steel);
}
.foot a { text-decoration:none; }
.foot a:hover { color:var(--cream); }
.foot-links { display:flex; gap:1.5rem; flex-wrap:wrap; }

/* ── Responsive ── */

@media (max-width: 900px) {
  :root { --gutter:1.5rem; }
  .nav { height:auto; padding:0.85rem var(--gutter); flex-wrap:wrap; }
  .nav-links { gap:1.15rem; font-size:0.875rem; }
  .nav-links a.nav-cta { padding:0.35rem 0.85rem; }
  .band { padding:4.5rem 0; }
  .hero { padding:4rem 0 3.5rem; }
  .problems, .modules, .split { grid-template-columns:1fr; }
  .problems { gap:2.25rem; }
  .split { gap:2.75rem; }
  .module label { padding:1.75rem 1.5rem 2rem; }
  .step { grid-template-columns:2.5rem 1fr; gap:1.25rem; }
  .postlist a { grid-template-columns:1fr; gap:0.5rem; }
  .basket { flex-direction:column; align-items:flex-start; }
}

/* ── Additions: hero visual, pricing, about ── */

.hero-grid {
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:4rem;
  align-items:center;
}
.hero-visual { width:100%; height:auto; display:block; }
.hero-visual text { font-family:'IBM Plex Mono', monospace; font-size:11px; fill:#8AAAC4; letter-spacing:0.04em; }
.hero-visual .route { stroke:#7B96B2; stroke-width:1; fill:none; stroke-dasharray:3 4; opacity:0.8; }
.hero-visual .node { fill:#0F1E2E; stroke:#7B96B2; stroke-width:1.2; }
.hero-visual .home { fill:#A8C0D6; stroke:none; }

.price-intro { max-width:46rem; }

.pricelist {
  display:grid;
  border:1px solid var(--border);
}
.pricerow {
  display:grid;
  grid-template-columns:1.4fr 2fr 0.8fr 0.8fr;
  gap:2rem;
  padding:2rem 2.25rem;
  border-bottom:1px solid var(--border);
  align-items:start;
}
.pricerow:last-child { border-bottom:none; }
.pricerow.head {
  padding:1rem 2.25rem;
  background:var(--navy2);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--steel);
  letter-spacing:0.04em;
}
.pricerow h3 { margin-bottom:0.35rem; }
.pricerow .what { color:var(--muted); font-size:0.9375rem; }
.pricerow .what ul { list-style:none; margin-top:0.6rem; display:grid; gap:0.3rem; }
.pricerow .what li { padding-left:1rem; position:relative; }
.pricerow .what li::before { content:''; position:absolute; left:0; top:0.72em; width:5px; height:1px; background:var(--steel); }
.price {
  font-family:'Cormorant Garamond', serif;
  font-size:1.75rem;
  font-weight:600;
  color:var(--cream);
  line-height:1.1;
}
.price small { display:block; font-family:'IBM Plex Sans', sans-serif; font-size:0.8125rem; font-weight:300; color:var(--steel); margin-top:0.35rem; }
.dur { color:var(--muted); font-size:0.9375rem; padding-top:0.35rem; }

.featured { background:rgba(26,51,82,0.28); border-left:2px solid var(--steel2); }

.terms { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.terms h3 { margin-bottom:0.5rem; }
.terms p { color:var(--muted); font-size:0.9375rem; }

.about-hero {
  display:grid;
  grid-template-columns:5fr 4fr;
  gap:4.5rem;
  align-items:start;
}
.portrait {
  width:100%;
  height:auto;
  display:block;
  border:1px solid var(--border2);
}
.portrait-note { margin-top:0.75rem; color:var(--steel); font-size:0.875rem; }

.timeline { list-style:none; display:grid; }
.timeline li {
  display:grid;
  grid-template-columns:8rem 1fr;
  gap:2rem;
  padding:1.5rem 0;
  border-top:1px solid var(--border);
}
.timeline li:last-child { border-bottom:1px solid var(--border); }
.timeline .when { font-family:'IBM Plex Mono', monospace; font-size:0.8125rem; color:var(--steel); padding-top:0.3rem; }
.timeline b { display:block; font-weight:400; color:var(--cream); margin-bottom:0.2rem; }
.timeline p { color:var(--muted); font-size:0.9375rem; }

.principles { display:grid; grid-template-columns:repeat(2,1fr); gap:2.5rem 4rem; }
.principles h3 { margin-bottom:0.5rem; }
.principles p { color:var(--muted); font-size:1rem; }

.brandtile {
  display:flex; align-items:center; gap:2rem;
  padding:2rem; border:1px solid var(--border); background:var(--navy2);
  max-width:46rem;
}
.brandtile img { width:7rem; height:7rem; border-radius:6px; flex-shrink:0; }
.brandtile p { font-size:0.9375rem; color:var(--muted); margin:0; }

.nav-links a.active { color:var(--cream); }

@media (max-width: 900px) {
  .hero-grid, .about-hero, .principles, .terms { grid-template-columns:1fr; }
  .hero-grid { gap:2.5rem; }
  .hero-visual { max-width:26rem; }
  .pricerow { grid-template-columns:1fr; gap:0.75rem; padding:1.5rem 1.25rem; }
  .pricerow.head { display:none; }
  .timeline li { grid-template-columns:1fr; gap:0.35rem; }
  .brandtile { flex-direction:column; align-items:flex-start; }
  .nav-links { width:100%; justify-content:flex-start; }
}

/* ── Additions: pillars, data strip, quotes, before/after, doc preview, flow ── */

.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; }
.pillar h3 { margin:0.35rem 0 0.75rem; }
.pillar p { color:var(--muted); font-size:1rem; }
.pillar .gain { margin-top:0.9rem; color:var(--cream); }
.pillar .gain b { font-weight:400; color:var(--steel2); }

.datastrip { display:grid; grid-template-columns:repeat(3,1fr); gap:2.5rem; }
.datastrip .num {
  display:block;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2.4rem, 4vw, 3.4rem);
  font-weight:600;
  line-height:1;
  color:var(--cream);
  margin-bottom:0.6rem;
}
.datastrip .lab { display:block; color:var(--muted); font-size:0.9375rem; max-width:22rem; }
.datanote { margin-top:1.5rem; color:var(--steel); font-size:0.8125rem; }

.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
.quotes blockquote {
  background:var(--navy);
  padding:2rem;
  margin:0;
  font-family:'Cormorant Garamond', serif;
  font-size:1.3rem;
  line-height:1.4;
  color:var(--cream);
}
.quotes blockquote::before { content:'“'; color:var(--steel); margin-right:0.15rem; }
.quotes blockquote::after { content:'”'; color:var(--steel); margin-left:0.15rem; }

.beforeafter { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border); border:1px solid var(--border); }
.ba-col { background:var(--navy); padding:2.25rem; }
.ba-after { background:rgba(26,51,82,0.3); border-left:2px solid var(--steel2); }
.ba-tag { display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:0.75rem; color:var(--steel); margin-bottom:1rem; }
.ba-after .ba-tag { color:var(--steel2); }
.ba-text { font-family:'Cormorant Garamond', serif; font-size:1.5rem; line-height:1.35; color:var(--cream); max-width:none; }
.ba-note { margin-top:1rem; color:var(--muted); font-size:0.9375rem; }

.doc { border:1px solid var(--border2); background:var(--navy); }
.doc-head { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:1.1rem 1.5rem; border-bottom:1px solid var(--border2); font-family:'Cormorant Garamond', serif; font-size:1.2rem; font-weight:600; color:var(--cream); }
.doc-row { display:grid; grid-template-columns:11rem 1fr; gap:1.25rem; padding:0.9rem 1.5rem; border-bottom:1px solid var(--border); font-size:0.9375rem; }
.doc-row:last-child { border-bottom:none; }
.doc-k { color:var(--steel); }
.doc-v { color:var(--cream); }

.flow { width:100%; max-width:46rem; height:auto; display:block; margin:-1.5rem 0 3rem; }
.flow line { stroke:var(--border2); stroke-width:1; }
.flow circle { fill:var(--navy); stroke:var(--steel); stroke-width:1.5; }
.flow circle.end { fill:var(--steel2); stroke:var(--steel2); }
.flow text { fill:var(--muted); font-family:'IBM Plex Sans', sans-serif; font-size:13px; text-anchor:middle; }

@media (max-width: 900px) {
  .pillars, .datastrip, .quotes, .beforeafter { grid-template-columns:1fr; }
  .pillars { gap:2.25rem; }
  .doc-row { grid-template-columns:1fr; gap:0.25rem; }
  .flow { margin:-0.5rem 0 2rem; }
}