@charset "UTF-8";
/* modestartup.com — homepage */

.section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.h2 {
  font-family: var(--f-display);
  font-weight: 850;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 2rem + 3vw, 4.75rem);
  line-height: .92;
  letter-spacing: -.005em;
  margin-bottom: 1.25rem;
}
.h2 em { font-style: normal; color: var(--orange); }
.lead { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); line-height: 1.5; color: var(--ink-2); max-width: 38rem; }
.slash { list-style: none; margin: 0; padding: 0; }
.slash li { position: relative; padding-left: 1.6em; }
.slash li::before { content: "//"; position: absolute; left: 0; color: var(--orange); font-weight: 700; letter-spacing: -.05em; }

/* ── HERO ───────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--paper); }
.hero-top { padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.hero-top .container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: end;
}
.hero h1 {
  font-family: var(--f-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3rem, 1.4rem + 5.4vw, 5.4rem);
  line-height: .86;
  letter-spacing: -.01em;
  margin-bottom: 1.1rem;
}
.hero h1 .o { color: var(--orange); display: block; }
.hero-sub { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); line-height: 1.4; color: var(--ink-2); margin-bottom: 1.25rem; max-width: 34rem; }
.hero-byline { font-family: var(--f-label); font-size: 1.05rem; letter-spacing: .03em; color: var(--ink-2); margin-bottom: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; }
.hero-byline strong { color: var(--ink); font-weight: 700; }
.rating { display: inline-flex; align-items: center; gap: .5rem; }
.rating img { width: 92px; height: auto; }
a.rating { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: .15em; }
.readers-score a { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.buy-price {
  font-family: var(--f-display); font-weight: 800; font-size: 2.25rem; line-height: 1;
  margin-right: .5rem; font-variant-numeric: tabular-nums;
}
.buy-price small { display: block; font-family: var(--f-label); font-weight: 500; font-size: .9rem; letter-spacing: .03em; color: var(--ink-3); margin-top: .2rem; }
.hero-free { margin-top: 1rem; font-size: 1.02rem; color: var(--ink-2); }
.hero-free a { font-weight: 600; color: var(--ink); }

/* The book, as an object */
.book-stage { position: relative; perspective: 1800px; align-self: end; margin-bottom: -9rem; z-index: 2; }
.book {
  position: relative;
  width: min(116%, 660px);
  margin-left: auto;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-16deg) rotateZ(1.5deg);
  transition: transform .9s var(--ease-out);
}
.book-stage:hover .book { transform: rotateX(4deg) rotateY(-8deg) rotateZ(.5deg); }
.book-front { position: relative; z-index: 2; border-radius: 2px 4px 4px 2px; overflow: hidden; background: #fff;
  box-shadow: inset 4px 0 6px -3px rgba(0,0,0,.25); }
.book-front img { width: 100%; height: auto; }
.book-front::after { /* spine crease */
  content: ""; position: absolute; inset: 0 auto 0 0; width: 14px;
  background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(255,255,255,.35) 45%, rgba(0,0,0,0));
}
.book-pages {
  position: absolute; top: 3px; bottom: 3px; right: 0; width: 26px;
  transform-origin: right center;
  transform: rotateY(90deg) translateX(13px) translateZ(0);
  background: repeating-linear-gradient(90deg, #fff 0 2px, #E8DED6 2px 3px);
}
.book-shadow {
  position: absolute; left: 6%; right: -4%; bottom: -8%; height: 22%;
  background: radial-gradient(closest-side, rgba(70, 30, 5, .38), rgba(70, 30, 5, 0));
  filter: blur(6px);
  transform: translateZ(-40px);
  z-index: 0;
}

.hero-band { background: var(--peach); position: relative; z-index: 1; }
.hero-band .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); padding-top: 1.5rem; padding-bottom: 1.75rem; }
.band-steps {
  font-family: var(--f-label); text-transform: uppercase; font-weight: 500;
  letter-spacing: .06em; font-size: 1.02rem; line-height: 1.25;
  display: grid; grid-template-columns: 1fr 1fr; gap: .45rem 2rem;
}
.band-steps a { text-decoration: none; }
.band-steps a:hover { color: var(--ink); text-decoration: underline; }
.band-steps li::before { color: var(--orange-ink); }

/* Press strip */
.press-strip { border-bottom: 1px solid var(--rule); }
.press-strip .container { display: flex; align-items: center; gap: 1.5rem 2.75rem; flex-wrap: wrap; padding-top: 1.75rem; padding-bottom: 1.75rem; }
.press-strip p { margin: 0; font-family: var(--f-label); font-size: 1rem; letter-spacing: .04em; color: var(--ink-3); }
.press-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2.5rem; }
.press-strip img { height: 26px; width: auto; filter: grayscale(1) contrast(1.2); opacity: .72; transition: opacity .2s, filter .2s; }
.press-strip a:hover img { filter: none; opacity: 1; }

/* ── THESIS ─────────────────────────────────────── */
.thesis .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.thesis-statement {
  font-family: var(--f-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.2rem, 1.6rem + 2.6vw, 4rem); line-height: .95; margin: 0;
}
.thesis-statement em { font-style: normal; color: var(--orange); }
.audiences { border-top: 2px solid var(--ink); }
.audience { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.audience h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: 1; margin-bottom: .4rem; }
.audience p { margin: 0; color: var(--ink-2); font-size: 1.05rem; }

/* ── METHOD MAP ─────────────────────────────────── */
.method { background: var(--peach); }
.method-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.method-head .lead { color: var(--ink); margin: 0; }
.method-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }

.map { position: sticky; top: 6rem; margin: 0; }
.map-frame { position: relative; }
.map-frame img { width: 100%; height: auto; }
.map-veil {
  position: absolute; inset: 0;
  background: var(--peach);
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse var(--rw, 17%) var(--rh, 21%) at var(--x, 50%) var(--y, 50%), transparent 96%, #000 100%);
  mask-image: radial-gradient(ellipse var(--rw, 17%) var(--rh, 21%) at var(--x, 50%) var(--y, 50%), transparent 96%, #000 100%);
  transition: opacity .45s var(--ease-out);
  pointer-events: none;
}
.map[data-active] .map-veil { opacity: .66; }
.pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--f-display); font-weight: 900; font-size: 1.6rem; line-height: 1;
  background: var(--ink); color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(60, 25, 0, .25);
  transition: transform .35s var(--ease-out), background-color .25s, opacity .3s;
}
.pin:hover { color: #fff; }
.pin.on { background: var(--orange-deep); transform: translate(-50%, -50%) scale(1.18); }
.map[data-active] .pin:not(.on) { opacity: .45; }
.map figcaption { font-size: .95rem; color: var(--ink-2); margin-top: .75rem; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 2px solid var(--ink); }
.step { border-bottom: 1px solid rgba(27, 23, 20, .18); }
.step a {
  display: grid; grid-template-columns: 3.25rem 1fr auto; gap: 0 1rem; align-items: start;
  padding: 1.15rem 0; text-decoration: none; color: var(--ink);
  transition: background-color .25s;
}
.step-n { font-family: var(--f-display); font-weight: 900; font-size: 3rem; line-height: .8; color: var(--ink); transition: color .25s; font-variant-numeric: tabular-nums; }
.step h3 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.75rem; line-height: .95; margin-bottom: .45rem; }
.step ul { margin: 0; padding: 0; list-style: none; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.step ul li { padding-left: 1.4em; position: relative; margin-top: .2rem; }
.step ul li::before { content: "//"; position: absolute; left: 0; color: var(--orange-ink); font-weight: 700; letter-spacing: -.05em; }
.step-go { width: 1.5rem; height: 1.5rem; margin-top: .25rem; opacity: .35; transition: opacity .25s, transform .3s var(--ease-out); }
.step a:hover .step-go, .step a:focus-visible .step-go, .step.on .step-go { opacity: 1; transform: translateX(4px); }
.step.on .step-n, .step a:hover .step-n { color: var(--orange-ink); }
.step a:focus-visible { outline-offset: -3px; }

/* ── ECM ────────────────────────────────────────── */
.ecm { background: var(--ink); color: #F3E9E2; }
.ecm .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.ecm .h2 { color: #fff; }
.ecm .h2 em { color: var(--orange); }
.ecm p { font-size: 1.2rem; line-height: 1.55; color: #E3D6CD; max-width: 34rem; }
.ecm strong { color: #fff; }
.versus { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.25); }
.versus li { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: 1.05rem; line-height: 1.35; }
.versus li > span:first-child { color: #B9A89C; text-decoration: line-through; text-decoration-color: rgba(237, 92, 1, .8); text-decoration-thickness: 2px; }
.versus li > span:last-child { color: #fff; font-weight: 600; }
.versus .vh { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.versus .vh > span:first-child { text-decoration: none; }
.versus .vh > span:last-child { color: var(--orange); font-weight: 700; }

/* ── READERS ────────────────────────────────────── */
.readers-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.readers-score { display: flex; align-items: center; gap: .9rem; font-family: var(--f-label); font-size: 1.05rem; color: var(--ink-2); }
.readers-score strong { font-family: var(--f-display); font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--ink); }
.readers-score img { width: 110px; }
.readers-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
.quote-lead { margin: 0; }
.quote-lead blockquote, .press-quote blockquote { margin: 0; }
.quote-lead p {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); line-height: 1.02;
  margin-bottom: 1.25rem;
}
.quote-lead p::before { content: "« "; color: var(--orange); }
.quote-lead p::after { content: " »"; color: var(--orange); }
.quote-by { font-family: var(--f-label); font-size: 1.05rem; letter-spacing: .03em; color: var(--ink-2); }
.quote-by strong { color: var(--ink); }
.quotes { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.quotes li { padding: 1.35rem 0; border-bottom: 1px solid var(--rule); }
.quotes h3 { font-family: var(--f-label); font-weight: 700; font-size: 1.2rem; margin-bottom: .35rem; }
.quotes p { font-size: 1.05rem; color: var(--ink-2); margin-bottom: .5rem; }

/* ── AUTHOR ─────────────────────────────────────── */
.author { background: var(--peach-soft); }
.author .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.author-photo-wrap { position: relative; }
.author-photo-wrap img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 2px; filter: saturate(.95); }
.author-photo-wrap figcaption { font-family: var(--f-label); font-size: .95rem; color: var(--ink-2); margin-top: .6rem; letter-spacing: .02em; }
.author-bio p { font-size: 1.12rem; color: var(--ink-2); max-width: 40rem; }
.author-bio strong { color: var(--ink); }
.creds { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.75rem 0 2rem; padding: 0; list-style: none; font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.5rem; line-height: 1.1; }
.creds li::after { content: "/"; color: var(--orange); margin-left: 1.75rem; }
.creds li:last-child::after { content: none; }
.author-links { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── TOOLS ──────────────────────────────────────── */
.tools .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.ledger { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.ledger > li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.ledger-n { font-family: var(--f-display); font-weight: 900; font-size: 2.2rem; line-height: .85; color: var(--orange); font-variant-numeric: tabular-nums; }
.ledger h3 { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: .95rem; color: var(--ink-3); margin-bottom: .35rem; }
.ledger ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; }
.ledger a { font-weight: 600; font-size: 1.12rem; text-decoration: underline; text-decoration-color: rgba(237, 92, 1, .5); }
.ledger a:hover { text-decoration-color: var(--orange); }
.capture { background: var(--orange-deep); color: #fff; padding: clamp(1.75rem, 3vw, 2.5rem); border-radius: 2px; position: sticky; top: 6rem; }
.capture h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 2.5rem; line-height: .92; margin-bottom: .9rem; }
.capture p { color: #FFFFFF; font-size: 1.05rem; }
.capture .email-form { margin: 1.5rem 0 1rem; }
.capture .email-form input[type="email"] { border-color: #fff; }
.capture .btn { border-color: #fff; background: #fff; color: var(--ink); }
.capture .btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.capture .alt { font-size: .98rem; color: #FFFFFF; margin: 0; }
.capture .alt a { color: #fff; text-decoration-color: #fff; font-weight: 600; }
.capture .form-msg.ok { color: #fff; }
.capture .form-msg.err { color: #fff; text-decoration: underline; }
.capture :focus-visible { outline-color: #fff; }

/* ── PRESS ──────────────────────────────────────── */
.press { border-top: 1px solid var(--rule); }
.press-quote { margin: 0 0 clamp(2.5rem, 5vw, 4rem); max-width: 56rem; }
.press-quote p { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.9rem); line-height: 1.04; margin-bottom: 1rem; }
.press-quote p::before { content: "“"; color: var(--orange); }
.press-quote p::after { content: "”"; color: var(--orange); }
.press-quote cite { font-style: normal; font-family: var(--f-label); color: var(--ink-2); font-size: 1.05rem; letter-spacing: .02em; }
.press-sub { font-family: var(--f-label); font-weight: 700; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .75rem; }
.press-list + .press-sub { margin-top: 2.5rem; }
.press-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); columns: 2; column-gap: clamp(2rem, 5vw, 5rem); }
.press-list li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
.press-list a { display: grid; grid-template-columns: 8.5rem 1fr 1.25rem; gap: 1.25rem; align-items: center; padding: 1rem 0; text-decoration: none; }
.press-list img { height: 24px; width: auto; max-width: 8.5rem; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.press-list span { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.press-list svg { width: 1.1rem; height: 1.1rem; opacity: .4; transition: opacity .2s, transform .25s var(--ease-out); }
.press-list .wm { font-family: var(--f-text); font-weight: 800; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink-3); }
.press-list a:hover img { filter: none; opacity: 1; }
.press-list a:hover svg { opacity: 1; transform: translate(2px, -2px); }

/* ── FAQ ────────────────────────────────────────── */
.faq { background: var(--peach-soft); }
.faq .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-list { border-top: 2px solid var(--ink); }
.faq-item { border-bottom: 1px solid rgba(27, 23, 20, .18); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.25rem 0;
  font-family: var(--f-label); font-weight: 700; font-size: 1.3rem; line-height: 1.25;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .3s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq-item summary:hover { color: var(--orange-ink); }
.faq-item p { margin: 0 0 1.4rem; max-width: 42rem; color: var(--ink-2); font-size: 1.1rem; }

/* ── FINAL BUY ──────────────────────────────────── */
.final { background: var(--peach); overflow: hidden; }
.final .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.final .h2 { font-size: clamp(2.8rem, 2rem + 3.6vw, 5.5rem); }
.final .lead { color: var(--ink); margin-bottom: 2rem; }
.final .book-final img { width: 100%; height: auto; box-shadow: 0 30px 50px -20px rgba(80, 30, 0, .45), 0 2px 6px rgba(80, 30, 0, .15); transform: rotate(-2.5deg); border-radius: 2px; }
.final .buy-price small { color: var(--ink-2); }
.final .stay { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid rgba(27, 23, 20, .25); }
.final .stay h3 { font-family: var(--f-label); font-weight: 700; font-size: 1.25rem; margin-bottom: .25rem; }
.final .stay p { color: var(--ink-2); font-size: 1.02rem; margin-bottom: .9rem; }

/* ── Motion: one authored entrance ──────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js .book { animation: book-settle 1.4s var(--ease-out) both; }
  .js .hero h1 .o { animation: o-in 1s .15s var(--ease-out) both; }
}
@keyframes book-settle {
  from { transform: rotateX(18deg) rotateY(-38deg) rotateZ(4deg) translate3d(40px, -24px, 0); filter: blur(2px); }
  to   { transform: rotateX(8deg) rotateY(-16deg) rotateZ(1.5deg); filter: blur(0); }
}
@keyframes o-in {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1080px) {
  .method-grid { grid-template-columns: 1fr; }
  .map { position: relative; top: 0; max-width: 760px; }
  .press-list { columns: 1; }
}
@media (max-width: 900px) {
  .hero-top .container, .hero-band .container,
  .thesis .container, .ecm .container, .readers-grid, .author .container,
  .tools .container, .faq .container, .final .container { grid-template-columns: 1fr; }
  .book-stage { margin: 0 auto 1.25rem; width: min(60%, 300px); order: -1; }
  .book { width: 100%; }
  .hero-top { padding-top: 1.25rem; }
  .hero-sub { margin-bottom: .75rem; }
  .hero-byline { margin-bottom: 1rem; }
  .hero-band .container { padding-top: 2rem; }
  .band-steps { grid-template-columns: 1fr; }
  .capture { position: relative; top: 0; }
  .author-photo-wrap { max-width: 320px; }
  .final .book-final { max-width: 420px; }
}
@media (max-width: 560px) {
  body { font-size: 1.0625rem; }
  .buy { gap: .6rem; }
  .buy .btn { flex: 1 1 100%; }
  .buy .btn-secondary { flex: 1 1 auto; }
  .buy-price { flex: 1 1 100%; margin: 0; font-size: 1.9rem; }
  .buy-price small { display: inline; margin-left: .5rem; }
  .press-strip img { height: 22px; }
  .press-list a { grid-template-columns: 6.5rem 1fr 1rem; gap: .9rem; }
  .press-list img { max-width: 6.5rem; }
  .versus li { grid-template-columns: 1fr; gap: .25rem; }
  .versus .vh { display: none; }
  .step a { grid-template-columns: 2.5rem 1fr; }
  .step-go { display: none; }
  .step-n { font-size: 2.5rem; }
  .pin { width: 2rem; height: 2rem; font-size: 1.25rem; }
  .ledger > li { grid-template-columns: 2.25rem 1fr; }
}

/* Secondary text on peach: tinted from the peach, not gray */
.method, .hero-band, .final, .canvas-hero { --ink-2: #5C2A0E; --ink-3: #6E3A1C; }