/* =========================================================
   BUILD — Editorial Design System
   Black / Grey / Off-white / Muted Gold, geometric diamond motif
   ========================================================= */

/* Self-hosted fonts (previously loaded from Google Fonts' CDN) — avoids sending visitor IPs to a third party on every page view. */
@font-face{
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/fraunces-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('assets/fonts/inter-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --black: #0a0a0b;
  --black-soft: #101012;
  --panel: #131315;
  --panel-2: #17171a;
  --line: rgba(245,244,240,0.10);
  --line-strong: rgba(245,244,240,0.18);
  --off-white: #f3f1ec;
  --white: #ffffff;
  --grey-300: #c9c7c2;
  --grey-500: #8f8d8a;
  --grey-600: #6f6d6b;
  --grey-700: #504f4d;

  --gold: #b9924a;
  --gold-light: #d9c08a;
  --gold-dim: rgba(185,146,74,0.4);
  --gold-faint: rgba(185,146,74,0.14);

  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container: 1240px;
  --container-narrow: 760px;
  --pad-inline: clamp(1.25rem, 5vw, 3rem);

  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 4.5rem;

  --fs-hero: clamp(3.4rem, 11vw, 8rem);
  --fs-h1: clamp(2.1rem, 5.4vw, 3.75rem);
  --fs-h2: clamp(1.8rem, 4.2vw, 2.9rem);
  --fs-h3: clamp(1.3rem, 2.4vw, 1.7rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-label: .78rem;

  --ease: cubic-bezier(.22,1,.36,1);
  --dur: .7s;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body{
  margin: 0;
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
svg{ display: block; }

::selection{ background: var(--gold); color: var(--black); }

:focus-visible{
  outline: 1px solid var(--gold-light);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Layout helpers ---------- */
.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-inline);
}
.container--narrow{ max-width: var(--container-narrow); }

.section{ position: relative; }
.section--lg{ padding-block: clamp(5rem, 11vw, 9.5rem); }
.section--md{ padding-block: clamp(3.75rem, 7.5vw, 6.5rem); }
.section--sm{ padding-block: clamp(2.75rem, 5vw, 4rem); }

.section-border-top{ border-top: 1px solid var(--line); }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.section-head{
  max-width: 46rem;
  margin-bottom: var(--space-lg);
}
.section-head--wide{ max-width: 56rem; }
.section-head h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--white);
  margin-top: .6em;
}
.section-head p{
  margin-top: var(--space-sm);
  font-size: var(--fs-lead);
  color: var(--grey-300);
  max-width: 38rem;
  line-height: 1.55;
}

.lede{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-lead);
  color: var(--grey-300);
}

.visually-hidden{
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link{
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--gold);
  color: var(--black);
  padding: .6rem 1rem;
  font-size: var(--fs-small);
  font-weight: 600;
  z-index: 200;
  transition: top .2s var(--ease);
}
.skip-link:focus{ top: 1rem; }

/* ---------- Diamond motif ---------- */
.diamond{
  display: inline-block;
  width: .5em; height: .5em;
  background: var(--gold);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.diamond--outline{
  background: none;
  border: 1px solid var(--gold);
}
.diamond--sm{ width: .38em; height: .38em; }

.diamond-frame{
  position: relative;
  width: 1.6em; height: 1.6em;
  border: 1px solid var(--gold-dim);
  transform: rotate(45deg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.diamond-frame .diamond{
  transform: none;
}

.rule{
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}
.rule--gold{ background: var(--gold-dim); }

/* Divider with center diamond, echoes the cover art */
.diamond-divider{
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: 22rem;
}
.diamond-divider .rule{ flex: 1; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 1rem 1.9rem;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform .3s var(--ease);
}
.btn-primary{
  background: var(--gold);
  color: var(--black);
  border: 1px solid var(--gold);
}
.btn-primary:hover{
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateY(-1px);
}
.btn-ghost{
  background: transparent;
  color: var(--off-white);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover{
  border-color: var(--gold-dim);
  color: var(--gold-light);
}
.btn-text{
  padding: 0;
  border: none;
  background: none;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--off-white);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: .35em;
}
.btn-text:hover{ color: var(--gold-light); border-color: var(--gold-dim); }
.btn-text .arrow{ transition: transform .3s var(--ease); display: inline-block; }
.btn-text:hover .arrow{ transform: translateX(4px); }

/* ---------- Header ---------- */
.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.4rem;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), padding var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(10,10,11,0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  padding-block: 1rem;
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.logo{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--white);
}
.logo .diamond{ width: .55em; height: .55em; }

.nav-desktop{
  display: flex;
  align-items: center;
  gap: 2.1rem;
}
.nav-desktop a{
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--grey-300);
  position: relative;
  padding-bottom: .3rem;
}
.nav-desktop a::after{
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--gold);
  transition: right var(--dur) var(--ease);
}
.nav-desktop a:hover{ color: var(--off-white); }
.nav-desktop a:hover::after{ right: 0; }
.nav-desktop a.is-active{ color: var(--gold-light); }

.nav-cta{
  padding: .8rem 1.5rem;
  font-size: .74rem;
}

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: .32rem;
  padding: .5rem;
}
.nav-toggle span{
  width: 22px; height: 1px;
  background: var(--off-white);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-menu{
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pad-inline);
  transform: translateY(-100%);
  transition: transform .5s var(--ease);
}
.mobile-menu.is-open{ transform: translateY(0); }
.mobile-menu nav{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.mobile-menu a{
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--off-white);
}
.mobile-menu .btn{ margin-top: 2rem; align-self: flex-start; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  min-height: min(100svh, 880px);
  display: flex;
  align-items: center;
  padding-top: 6.5rem;
  padding-bottom: 3rem;
  overflow: hidden;
}
.hero::before{
  content:"";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(185,146,74,0.10), transparent 60%),
    radial-gradient(50% 50% at 10% 90%, rgba(185,146,74,0.06), transparent 60%);
  pointer-events: none;
}
.hero .container{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
.hero-copy{ position: relative; z-index: 2; }
.hero-eyebrow{
  font-size: var(--fs-label);
  letter-spacing: .22em;
  color: var(--grey-500);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.hero-eyebrow em{
  font-style: normal;
  color: var(--gold);
}
.hero-mark{
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-hero);
  line-height: .88;
  letter-spacing: -.02em;
  color: var(--white);
}
.hero-tagline{
  display: block;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--grey-300);
  margin-top: 1rem;
  max-width: 22ch;
  line-height: 1.35;
}
.hero-tagline .accent{ color: var(--gold-light); }
.hero-lead{
  margin-top: 1.4rem;
  font-size: var(--fs-lead);
  color: var(--grey-300);
  max-width: 34rem;
  line-height: 1.6;
}
.hero-ctas{
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 2.2rem;
  flex-wrap: wrap;
}

.hero-visual{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.hero-visual .cover-frame{
  position: relative;
  width: min(280px, 80%);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
  animation: float 8s ease-in-out infinite;
}
.hero-visual .cover-frame img{
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
}
.hero-visual .diamond-frame{
  position: absolute;
  top: -14%;
  right: -10%;
  width: 3.4rem; height: 3.4rem;
  background: var(--black);
}
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}

.hero-scroll{
  position: absolute;
  left: var(--pad-inline);
  bottom: 2rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--grey-600);
}
.hero-scroll .line{
  width: 1px; height: 34px;
  background: linear-gradient(var(--gold), transparent);
}

/* ---------- The Idea (manifesto) ---------- */
.idea{
  text-align: left;
}
.idea .container{ max-width: var(--container-narrow); }
.idea h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--white);
}
.idea .lede{
  margin-top: 1.1rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
}
.idea .body-copy{
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  color: var(--grey-300);
  font-size: var(--fs-lead);
  line-height: 1.65;
  max-width: 42rem;
}
.idea .body-copy strong{ color: var(--off-white); font-weight: 500; }

/* ---------- Ideas Worth Building On ---------- */
.ideas-list{
  border-top: 1px solid var(--line);
}
.idea-item{
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
  padding-block: clamp(1.8rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--line);
  transition: background var(--dur) var(--ease);
}
.idea-item:hover{ background: rgba(255,255,255,0.015); }
.idea-num{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--gold-dim);
  font-weight: 400;
  transition: color var(--dur) var(--ease);
}
.idea-item:hover .idea-num{ color: var(--gold); }
.idea-body h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  color: var(--white);
  letter-spacing: -.01em;
  max-width: 30ch;
}
.idea-body p{
  margin-top: .9rem;
  color: var(--grey-300);
  max-width: 42rem;
  line-height: 1.6;
  font-size: 1rem;
}
.idea-body p + p{ margin-top: .5rem; }
.idea-body .idea-punch{
  color: var(--gold-light);
  font-family: var(--font-display);
  font-style: italic;
}

/* ---------- Architecture ---------- */
.architecture{ }
.arch-list{ border-top: 1px solid var(--line); }
.arch-part{
  border-bottom: 1px solid var(--line);
}
.arch-part > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.4rem, 3vw, 1.9rem);
}
.arch-part > summary::-webkit-details-marker{ display:none; }
.arch-roman{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--gold);
  width: 3.5rem;
  flex-shrink: 0;
}
.arch-title-group{ flex: 1; min-width: 0; }
.arch-part-label{
  font-size: var(--fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.arch-part-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--white);
  margin-top: .25rem;
}
.arch-count{
  font-size: var(--fs-small);
  color: var(--grey-500);
  white-space: nowrap;
  flex-shrink: 0;
}
.arch-toggle{
  width: 1.6rem; height: 1.6rem;
  flex-shrink: 0;
  position: relative;
}
.arch-toggle .diamond-frame{
  width: 100%; height: 100%;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.arch-toggle .diamond-frame .diamond{
  transition: opacity .3s var(--ease);
}
.arch-part[open] .arch-toggle .diamond-frame{
  border-color: var(--gold);
}
.arch-part[open] .arch-toggle .diamond-frame .diamond{ opacity: 0; }

.arch-chapters{
  padding-bottom: clamp(1.4rem, 3vw, 2rem);
  padding-left: calc(3.5rem + clamp(1rem, 3vw, 2rem));
}
.arch-chapters ol{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .6rem 2rem;
}
.arch-chapters li{
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding-block: .5rem;
  border-bottom: 1px solid var(--line);
  color: var(--grey-300);
  font-size: .96rem;
}
.arch-chapters .ch-num{
  font-family: var(--font-display);
  color: var(--gold-dim);
  font-size: .95rem;
  flex-shrink: 0;
}

/* animated open via [open] + height handled by browser; add fade-in */
.arch-chapters{
  animation: fadeIn .5s var(--ease);
}
@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------- A Look Inside ---------- */
.inside-grid{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.inside-visual{
  position: relative;
}
.inside-cover{
  width: min(300px, 100%);
  margin-inline: auto;
  position: relative;
}
.inside-cover img{
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
}
.inside-excerpt{
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
}
.inside-excerpt .pull-quote{
  margin-top: 0;
}
.excerpt-source{
  margin-top: .6rem;
  font-size: var(--fs-small);
  color: var(--grey-500);
}
.flow{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.flow-step{
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.flow-step:first-child{ border-top: 1px solid var(--line); }
.flow-marker{
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-marker .diamond-frame{ width: 1.5rem; height: 1.5rem; }
.flow-text .flow-label{
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
}
.flow-text p{
  margin-top: .35rem;
  color: var(--grey-300);
  font-size: .98rem;
  max-width: 34rem;
}
.inside-note{
  margin-top: 1.6rem;
  color: var(--grey-500);
  font-size: var(--fs-small);
  font-style: italic;
  font-family: var(--font-display);
}

/* ---------- Thinking Tools ---------- */
.tools-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tool-card{
  background: var(--black);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}
.tool-head{
  display: flex;
  align-items: center;
  gap: .8rem;
}
.tool-name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--white);
}
.tool-sub{
  font-size: var(--fs-small);
  color: var(--grey-500);
}

/* Offer Stack / Three Numbers / Small-Bet / Pivot lists */
.tool-list{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tool-list li{
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding-block: .7rem;
  border-top: 1px solid var(--line);
  color: var(--grey-300);
  font-size: .96rem;
}
.tool-list li:last-child{ border-bottom: 1px solid var(--line); }

.pivot-loop{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .9rem;
  color: var(--grey-300);
}
.pivot-loop span.step{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border: 1px solid var(--line-strong);
}
.pivot-loop .connector{ color: var(--gold-dim); }

/* ---------- Author ---------- */
.author-grid{
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.author-name{
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--grey-300);
}
.author-role{
  font-size: var(--fs-small);
  color: var(--grey-500);
  margin-top: .2rem;
}
.author-copy h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.15;
  color: var(--white);
}
.author-copy p{
  margin-top: 1.4rem;
  color: var(--grey-300);
  font-size: var(--fs-lead);
  line-height: 1.65;
  max-width: 40rem;
}
.pull-quote{
  margin-top: 2.2rem;
  padding-left: 1.6rem;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--gold-light);
  max-width: 34rem;
  line-height: 1.5;
}

/* ---------- What BUILD Is Not ---------- */
.not-section{
  background: var(--black-soft);
}
.not-list{
  display: flex;
  flex-direction: column;
  gap: .3em;
}
.not-list li{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.4vw, 2.9rem);
  line-height: 1.28;
  color: var(--grey-600);
  letter-spacing: -.01em;
}
.not-list li.emphasis{
  color: var(--white);
  font-weight: 500;
  margin-top: .4em;
}
.not-list li .diamond{
  margin-right: .4em;
  vertical-align: middle;
  width: .34em; height: .34em;
}

/* ---------- Who Is BUILD For ---------- */
.audience-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.audience-card{
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}
.audience-card .diamond{ margin-bottom: 1.1rem; }
.audience-card h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--white);
}
.audience-card p{
  margin-top: .6rem;
  color: var(--grey-300);
  font-size: .96rem;
  line-height: 1.55;
}

/* ---------- Edition / Levels of BUILD ---------- */
.edition{
  background: var(--black-soft);
}

.tiers-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tier-card{
  background: var(--black-soft);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tier-step{
  font-size: var(--fs-label);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.tier-name{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--white);
  margin-top: .55rem;
}
.tier-desc{
  margin-top: .7rem;
  color: var(--grey-300);
  font-size: .95rem;
  line-height: 1.55;
  min-height: 4.6em;
}
.tier-price-row{
  margin-top: 1.4rem;
  display: flex;
  align-items: baseline;
  gap: .4rem;
}
.tier-price{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.1rem;
  color: var(--white);
}
.tier-cadence{
  font-size: var(--fs-small);
  color: var(--grey-500);
  letter-spacing: .04em;
}
.tier-features{
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  flex: 1;
}
.tier-features li{
  display: flex;
  align-items: baseline;
  gap: .65rem;
  color: var(--grey-300);
  font-size: .92rem;
  line-height: 1.4;
}
.tier-cta{
  margin-top: 1.8rem;
  width: 100%;
  justify-content: center;
}

.tiers-note{
  margin-top: 1.6rem;
  color: var(--grey-500);
  font-size: var(--fs-small);
  text-align: center;
}

/* ---------- FAQ ---------- */
.faq-list{ border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item > summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.8vw, 1.22rem);
  color: var(--white);
}
.faq-item > summary::-webkit-details-marker{ display: none; }
.faq-item .diamond-frame{
  width: 1.3rem; height: 1.3rem;
  transition: transform .4s var(--ease);
}
.faq-item .diamond-frame .diamond{ transition: opacity .3s var(--ease); }
.faq-item[open] .diamond-frame .diamond{ opacity: 0; }
.faq-answer{
  padding-bottom: 1.4rem;
  color: var(--grey-300);
  font-size: .98rem;
  max-width: 42rem;
  line-height: 1.6;
  animation: fadeIn .4s var(--ease);
}

/* ---------- Final CTA ---------- */
.final-cta{
  background: var(--black);
  text-align: center;
  position: relative;
}
.final-cta::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 60% at 50% 30%, rgba(185,146,74,0.08), transparent 65%);
}
.final-cta .container{ position: relative; }
.final-diamond{
  width: 3rem; height: 3rem;
  margin-inline: auto;
  margin-bottom: 1.8rem;
}
.final-cta .logo-mark{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--grey-500);
  font-size: var(--fs-label);
  text-transform: uppercase;
}
.final-cta h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  color: var(--white);
  margin-top: 1rem;
  line-height: 1.15;
  max-width: 22ch;
  margin-inline: auto;
}
.final-cta p{
  margin-top: 1.3rem;
  color: var(--grey-300);
  font-size: var(--fs-lead);
  max-width: 34rem;
  margin-inline: auto;
  line-height: 1.6;
}
.final-cta .hero-ctas{ justify-content: center; margin-top: 2.4rem; }
.final-meta{
  margin-top: 2.6rem;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-size: var(--fs-small);
  color: var(--grey-500);
  letter-spacing: .04em;
}
.final-meta .price{ color: var(--gold-light); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer{
  border-top: 1px solid var(--line);
  padding-block: var(--space-lg);
}
.footer-top{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-tagline{
  max-width: 24rem;
  color: var(--grey-500);
  font-size: var(--fs-small);
  line-height: 1.6;
  margin-top: 1rem;
}
.footer-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem 2.2rem;
}
.footer-nav a{
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey-500);
}
.footer-nav a:hover{ color: var(--gold-light); }
.footer-bottom{
  margin-top: var(--space-lg);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  color: var(--grey-500);
  font-size: .82rem;
}
.footer-legal{
  flex-basis: 100%;
  margin: 0 0 .4rem;
  line-height: 1.6;
}
.footer-legal a{
  color: var(--grey-300);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.footer-legal a:hover{ color: var(--gold-light); }

/* ---------- Legal pages (Privacy / Terms) ---------- */
.legal-page{ padding-block: clamp(3.5rem, 8vw, 6rem); }
.legal-updated{
  color: var(--grey-500);
  font-size: var(--fs-small);
  margin-top: .8rem;
}
.legal-content{
  margin-top: var(--space-lg);
  color: var(--grey-300);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.legal-content h2{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  color: var(--white);
  margin-top: var(--space-lg);
  margin-bottom: .8rem;
}
.legal-content h2:first-child{ margin-top: 0; }
.legal-content p{ margin-top: 1rem; }
.legal-content p:first-child{ margin-top: 0; }
.legal-content ul{
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.legal-content li{
  padding-left: 1.4rem;
  position: relative;
}
.legal-content li::before{
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .38em; height: .38em;
  background: var(--gold);
  transform: rotate(45deg);
}
.legal-content a{ color: var(--gold-light); text-decoration: underline; text-underline-offset: .2em; }
.legal-content a:hover{ color: var(--gold); }
.legal-content strong{ color: var(--off-white); font-weight: 500; }

/* ---------- Reveal on scroll ---------- */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .nav-desktop{ display: none; }
  .nav-toggle{ display: flex; }
  .hero-scroll{ display: none; }
  .hero .container{
    grid-template-columns: 1fr;
    text-align: left;
  }
  .hero-visual{ order: -1; margin-bottom: 1rem; }
  .hero-visual .cover-frame{ width: min(220px, 60%); }
  .hero-mark{ font-size: clamp(3.4rem, 20vw, 6rem); }
  .inside-grid{ grid-template-columns: 1fr; }
  .inside-visual{ order: 1; }
  .author-grid{ grid-template-columns: 1fr; }
  .tools-grid{ grid-template-columns: 1fr; }
  .audience-grid{ grid-template-columns: 1fr; }
  .tiers-grid{ grid-template-columns: 1fr; }
  .idea-item{ grid-template-columns: 3rem 1fr; }
  .arch-chapters{ padding-left: 0; }
  .arch-chapters ol{ grid-template-columns: 1fr; }
}

@media (max-width: 560px){
  .hero-ctas{ flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .final-cta .hero-ctas{ align-items: center; }
  .footer-top{ flex-direction: column; }
}