/* Faceless website: layout only. Every color, font, size, space, radius and shadow is a Warm Paper token
   (tokens.css, bundle.css, both unchanged). No new colors or fonts. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + var(--space-8)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--font-sans); }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }

.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 60; padding: var(--space-2) var(--space-4);
  background: var(--marketing-ink); color: var(--marketing-paper); border-radius: var(--radius-pill); }
.skip-link:focus { top: var(--space-4); }

/* Layout */
.wrap { width: min(100% - 2 * var(--space-4), var(--container-page)); margin-inline: auto; }
.wrap--narrow > * { max-width: var(--container-content); }  /* same edges as every section; only the text is narrower */
.section { padding-block: var(--space-16); }
.section .heading-2 { margin-bottom: var(--space-4); }
.section__lead { max-width: var(--container-reading); margin-bottom: var(--space-8); }
.center { text-align: center; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.row--center { justify-content: center; }
.nav-waitlist { margin-left: var(--space-2); }
@media (max-width: 640px) { .nav-waitlist { display: none; } }

/* Hero: one panel over the pattern */
.hero { min-height: 100svh; display: grid; place-items: center; padding: calc(var(--space-16) * 1.5) var(--space-4) calc(var(--space-16) * 2);
  margin-top: calc(-1 * (var(--nav-height) + var(--space-4))); padding-top: calc(var(--nav-height) + var(--space-16) * 1.5); }
.hero .panel { width: min(100%, 44rem); }
.hero__title { margin-top: var(--space-3); }
.hero__body { margin: var(--space-4) auto var(--space-6); max-width: 32rem; }
.hero__note { margin-top: var(--space-4); }
@media (max-width: 640px) {
  .hero .panel { padding: var(--space-8) var(--space-5); }
  .hero__title { font-size: var(--text-3xl); }
}

/* Demo: a made-up contractor's site beside its Faceless version, scroll-synced (app.js) */
.demo-moment { display: grid; gap: var(--space-8); align-items: start; }
.demo-moment .lead, .demo-moment .small, .demo-moment .eyebrow { color: var(--moment-fg); }
.demo-moment__text { max-width: var(--container-reading); display: grid; gap: var(--space-3); }
.demo { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .demo { grid-template-columns: 1fr 1fr; } }
.demo__pane { display: grid; gap: var(--space-2); min-width: 0; }
.demo__label { color: var(--moment-fg); font-weight: var(--weight-semibold); }
.demo__scroll { height: 26rem; overflow-y: auto; overscroll-behavior: contain; background: #fff; color: var(--marketing-ink);
  border: var(--border-width-bold) solid var(--marketing-outline); border-radius: var(--radius-lg); position: relative; }
@media (max-width: 640px) { .demo__scroll { height: 20rem; } }
.demo__site { font-size: var(--text-sm); }
.site-mock__bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); background: var(--marketing-ink); color: var(--marketing-paper); font-weight: var(--weight-semibold); }
.site-mock__menu { font-weight: var(--weight-normal); opacity: .8; }
.site-mock__popup { position: sticky; top: 3.1rem; z-index: 1; margin: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--moment-coral); color: var(--moment-coral-ink); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.site-mock__block { margin: var(--space-3); padding: var(--space-6) var(--space-4); border-radius: var(--radius-md); background: var(--muted);
  border: var(--border-width-bold) dashed transparent; transition: border-color var(--duration-base) var(--ease-out); display: grid; gap: var(--space-2); }
.site-mock__block.is-active { border-color: var(--marketing-ink); }
.site-mock__h { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-xl); }
.site-mock__btn { justify-self: start; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--marketing-ink); color: var(--marketing-paper); font-weight: var(--weight-semibold); }
.site-mock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.site-mock__grid span { padding: var(--space-4) var(--space-2); background: #fff; border-radius: var(--radius-xs); text-align: center; }
.site-mock__footer { margin-top: var(--space-16); padding: var(--space-6) var(--space-4); background: var(--marketing-ink); color: var(--marketing-paper); font-size: var(--text-xs); }
.demo__agent { padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; padding-bottom: 16rem; }
.demo__agent p { padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); transition: background-color var(--duration-base) var(--ease-out); }
.demo__agent p.is-active { background: var(--moment-yellow); color: var(--moment-yellow-ink); }
.demo__agent-note { font-family: var(--font-sans); color: var(--marketing-muted); }
.placeholder { margin-top: var(--space-3); color: var(--marketing-muted); font-style: italic; }

/* Problem */
.plain-list { padding-left: 1.2em; display: grid; gap: var(--space-3); color: var(--marketing-ink); }

/* How it works */
.steps { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.surface-paper .card { background: #fff; border-color: transparent; }
.step__num { border-color: currentColor !important; }
.step__num { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border: var(--border-width-bold) solid var(--marketing-outline);
  border-radius: var(--radius-pill); margin-bottom: var(--space-3); }

/* What's included */
#included .moment { display: grid; gap: var(--space-3); padding: var(--space-9); }
#included .moment .small { color: var(--moment-fg); }
#included .checklist, #included .checklist li::before { color: var(--moment-fg); border-color: var(--moment-fg); }
.checklist { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: var(--space-2); color: var(--marketing-ink); }
@media (min-width: 640px) { .checklist { grid-template-columns: 1fr 1fr; } }
.checklist li { padding-left: 1.75rem; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 1rem; height: 0.55rem;
  border-left: var(--border-width-bold) solid var(--marketing-ink); border-bottom: var(--border-width-bold) solid var(--marketing-ink); transform: rotate(-45deg); }

/* Pricing */
.tiers { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-6); align-items: stretch; }
@media (min-width: 760px) { .tiers { grid-template-columns: 1fr 1.1fr 1fr; } }
.tier { display: flex; flex-direction: column; gap: var(--space-2); width: auto; }

.tier--featured .tag { align-self: flex-start; }
.tier__price { color: var(--marketing-ink); }
.tier__est { display: none; align-self: flex-start; }
.tier[data-suggested="true"] .tier__est { display: inline-flex; }
.calc { gap: var(--space-3); }
.calc__row { display: flex; gap: var(--space-4); align-items: center; }
.calc__range { flex: 1; accent-color: var(--marketing-ink); min-height: 2.75rem; }
.calc__number { width: 6rem; }
.calc__result { color: var(--marketing-ink); font-weight: var(--weight-semibold); }

/* FAQ */
.faq { display: grid; border-top: var(--border-width) solid var(--marketing-muted); }
.faq details { border-bottom: var(--border-width) solid var(--marketing-muted); padding: var(--space-4) 0; }
.faq summary { cursor: pointer; font-weight: var(--weight-semibold); font-size: var(--text-lg); list-style-position: outside; }
.faq summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.faq details p { margin-top: var(--space-2); color: var(--marketing-muted); font-size: var(--text-md); line-height: var(--leading-relaxed); }

/* Forms */
.forms { display: grid; gap: var(--space-6); grid-template-columns: 1fr; margin-top: var(--space-8); align-items: start; }
@media (min-width: 860px) { .forms { grid-template-columns: 1.2fr 1fr; } }
.form { display: grid; gap: var(--space-4); width: 100%; }
.form .btn { justify-self: start; }
.form__status:empty { display: none; }
.form__status[data-state="ok"] { color: var(--marketing-ink); font-weight: var(--weight-semibold); }
.form__status[data-state="error"] { color: var(--destructive); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Footer: room for the phone capsule */
@media (max-width: 640px) { .footer { padding-bottom: calc(var(--space-16) + var(--space-8)); } }

/* Fix round (own review): keep the phone capsule labels on one line; FAQ arrows inside the shared edge */
.nav-capsule a { white-space: nowrap; }
.faq summary { list-style-position: inside; }

/* Final call to action: one coral band (Warm Paper moment colors) */
.cta-band { display: block; padding: var(--space-12) var(--space-6); }
.cta-band .small { color: var(--moment-fg); }
.cta-band .forms .small { color: var(--marketing-muted); }
/* Keep "Join the waitlist" outlined inside the coral band (Warm Paper's moment rule fills every .btn) */
.cta-band .btn--outline { --btn-bg: transparent; --btn-fg: var(--marketing-ink); --btn-border: var(--marketing-outline); }


/* ---------- Fix round 2 ---------- */

/* 1. Hero in color: Warm Paper's dotted pattern on moment-yellow; the white panel floats on it. */
.hero.pattern { background-color: var(--moment-yellow); }

/* 3. Oakline Roofing mock: a made-up contractor's own look (NOT Faceless's design system, on purpose,
   so it reads as someone else's website). Colors scoped to the mock only. */
.demo__site { --mock-navy: #13263b; --mock-orange: #e8661d; --mock-gray: #eef1f4;
  font-family: Arial, Helvetica, sans-serif; color: #1d2733; }
.demo__site .site-mock__bar { background: var(--mock-navy); color: #fff; }
.site-mock__logo { font-weight: 900; letter-spacing: .06em; display: grid; line-height: 1; }
.site-mock__logo small { font-size: .6rem; letter-spacing: .3em; color: var(--mock-orange); }
.demo__site .site-mock__popup { background: var(--mock-orange); color: #fff; border-radius: 4px; }
.demo__site .site-mock__block { background: var(--mock-gray); border-radius: 4px; }
.demo__site .site-mock__hero { background: var(--mock-navy); color: #fff; }
.site-mock__art { width: 9rem; color: var(--mock-orange); }
.demo__site .site-mock__h { font-family: Arial, Helvetica, sans-serif; font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; color: inherit; }
.demo__site .site-mock__btn { background: var(--mock-orange); color: #fff; border-radius: 4px; letter-spacing: .04em; }
.demo__site .site-mock__grid span { border-radius: 4px; font-weight: 700; color: var(--mock-navy); }
.demo__site .site-mock__footer { background: var(--mock-navy); color: #cfd6de; }
.demo__site .site-mock__block.is-active { border-color: var(--mock-orange); }

/* 5. How it works: steps you click, each with a live visual. */
.how { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .how { grid-template-columns: 1fr 1.15fr; align-items: stretch; } }
.how__steps { display: grid; gap: var(--space-3); }
.how__step { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: var(--space-1); padding: var(--space-5);
  background: #fff; color: var(--marketing-ink); border-radius: var(--radius-card); border: var(--border-width-bold) solid transparent;
  transition: background-color var(--duration-base) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
.how__step:hover { transform: translateY(-2px); }
.how__step:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.how__step .card__text { color: var(--marketing-muted); }
.how__step[aria-selected="true"][data-color="yellow"] { background: var(--moment-yellow); color: var(--moment-yellow-ink); }
.how__step[aria-selected="true"][data-color="pink"] { background: var(--moment-pink); color: var(--moment-pink-ink); }
.how__step[aria-selected="true"][data-color="coral"] { background: var(--moment-coral); color: var(--moment-coral-ink); }
.how__step[aria-selected="true"][data-color="blue"] { background: var(--moment-blue); color: var(--moment-blue-ink); }
.how__step[aria-selected="true"] { border-color: var(--marketing-outline); }
.how__step[aria-selected="true"] .card__text { color: inherit; }
.how__step .step__num { width: 2.25rem; height: 2.25rem; margin-bottom: var(--space-2); }
.how__stage { background: #fff; border: var(--border-width-bold) solid var(--marketing-outline); border-radius: var(--radius-card);
  padding: var(--space-8); display: grid; align-content: center; min-height: 22rem; }
.how__panel { display: grid; gap: var(--space-4); }
.how__panel[hidden] { display: none; }
.how__panel-title { color: var(--marketing-muted); font-family: var(--font-mono); }
.how__pages { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.how__pages li { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8); background: var(--marketing-paper); border-radius: var(--radius-md);
  position: relative; animation: how-in var(--duration-page) var(--ease-out) both; }
.how__pages li::before { content: ""; position: absolute; left: var(--space-3); top: 50%; width: .9rem; height: .5rem; margin-top: -.35rem;
  border-left: var(--border-width-bold) solid currentColor; border-bottom: var(--border-width-bold) solid currentColor; transform: rotate(-45deg); }
.how__pages li:nth-child(2) { animation-delay: .12s; } .how__pages li:nth-child(3) { animation-delay: .24s; }
.how__pages li:nth-child(4) { animation-delay: .36s; } .how__pages li:nth-child(5) { animation-delay: .48s; } .how__pages li:nth-child(6) { animation-delay: .6s; }
.how__code { margin: 0; padding: var(--space-5); background: var(--marketing-ink); color: var(--marketing-paper); border-radius: var(--radius-lg);
  display: grid; white-space: pre-wrap; }
.how__code span { animation: how-in var(--duration-page) var(--ease-out) both; }
.how__code span:nth-child(2) { animation-delay: .1s; } .how__code span:nth-child(3) { animation-delay: .2s; } .how__code span:nth-child(4) { animation-delay: .3s; }
.how__code span:nth-child(5) { animation-delay: .4s; } .how__code span:nth-child(6) { animation-delay: .5s; } .how__code span:nth-child(7) { animation-delay: .6s; }
.how__diff { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--marketing-paper); border-radius: var(--radius-lg); }
.how__del { text-decoration: line-through; color: var(--marketing-muted); animation: how-in var(--duration-page) var(--ease-out) both; }
.how__add { font-weight: var(--weight-semibold); padding: var(--space-1) var(--space-2); background: var(--moment-coral); color: var(--moment-coral-ink);
  border-radius: var(--radius-xs); justify-self: start; animation: how-in var(--duration-page) var(--ease-out) .25s both; }
.how__result { color: var(--marketing-ink); }
@keyframes how-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .how__pages li, .how__code span, .how__del, .how__add { animation: none; } }
@media (max-width: 640px) { .how__stage { padding: var(--space-5); min-height: 0; } .how__pages { grid-template-columns: 1fr; } }

/* 6. What's included: value cards on the pink band. */
.included { display: grid; gap: var(--space-4); padding: var(--space-10) var(--space-8); }
.included__lead, .included > .small { color: var(--moment-fg); }
.included__grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-block: var(--space-2); }
@media (min-width: 700px) { .included__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .included__grid { grid-template-columns: repeat(3, 1fr); } }
.included .card { gap: var(--space-2); padding: var(--space-6); }
.included .card__icon { width: 1.5rem; height: 1.5rem; color: var(--moment-pink-ink); }
.included .card__text { color: var(--marketing-muted); }
@media (max-width: 640px) { .included { padding: var(--space-8) var(--space-5); } }

/* 7. Pricing: the color follows the calculator; nothing is colored until it's moved. */
.tier { transition: background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out); }
.tier[data-suggested="true"] { background: var(--moment-yellow); color: var(--moment-yellow-ink); border: var(--border-width-heavy) solid var(--marketing-outline);
  --muted-foreground: var(--moment-yellow-ink); transform: translateY(-2px); }
.tier[data-suggested="true"] .tier__price, .tier[data-suggested="true"] .card__text { color: var(--moment-yellow-ink); }

.tier .tag { align-self: flex-start; }

/* Problem panels */
.clutter { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-5); background: var(--marketing-paper); border-radius: var(--radius-lg); }
.clutter span { padding: var(--space-1) var(--space-3); border: 1px dashed var(--marketing-muted); border-radius: var(--radius-pill);
  color: var(--marketing-muted); font-size: var(--text-sm); animation: how-in var(--duration-page) var(--ease-out) both; }
.clutter span:nth-child(odd) { animation-delay: .1s; } .clutter span:nth-child(3n) { animation-delay: .2s; }
.clutter .clutter__fact { border: 2px solid var(--marketing-ink); color: var(--marketing-ink); background: var(--moment-coral); font-weight: var(--weight-semibold); animation-delay: .35s; }
.scatter { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.scatter li { display: grid; gap: var(--space-1); padding: var(--space-4); background: var(--marketing-paper); border-radius: var(--radius-md);
  animation: how-in var(--duration-page) var(--ease-out) both; }
.scatter li:nth-child(2) { animation-delay: .12s; } .scatter li:nth-child(3) { animation-delay: .24s; } .scatter li:nth-child(4) { animation-delay: .36s; }
.scatter li:nth-child(odd) { rotate: -1deg; } .scatter li:nth-child(even) { rotate: 1deg; }
.scatter .small { color: var(--marketing-muted); font-family: var(--font-mono); }
.chat { display: grid; gap: var(--space-3); }
.chat p { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); max-width: 85%; animation: how-in var(--duration-page) var(--ease-out) both; }
.chat__q { justify-self: end; background: var(--marketing-ink); color: var(--marketing-paper); }
.chat__a { justify-self: start; background: var(--marketing-paper); border: 1px solid var(--marketing-muted); animation-delay: .35s !important; }

/* Included panels */
.how__step--compact { padding: var(--space-4) var(--space-5); }
@media (min-width: 900px) { .how--wide { grid-template-columns: 1fr 1.25fr; } }
.included .how__steps { gap: var(--space-2); }
.urlbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--marketing-paper);
  border: 2px solid var(--marketing-ink); border-radius: var(--radius-pill); font-family: var(--font-mono); animation: how-in var(--duration-page) var(--ease-out) both; }
.flag, .report { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--marketing-paper); border-radius: var(--radius-lg);
  animation: how-in var(--duration-page) var(--ease-out) both; }
.flag { border-left: 6px solid var(--moment-coral); }
.flag p, .report p { margin: 0; }
.report ul { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }

/* Works with: names sliding side to side, paused on hover and for reduced motion. */
.works { padding-block: var(--space-10); overflow: hidden; }
.works__title { text-align: center; margin-bottom: var(--space-5); }
.works__track { display: flex; width: max-content; animation: works-slide 28s linear infinite; }
.works:hover .works__track, .works:focus-within .works__track { animation-play-state: paused; }
.works__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-4); padding-right: var(--space-4); }
.works__item { padding: var(--space-3) var(--space-6); border: 2px solid var(--marketing-outline); border-radius: var(--radius-pill); background: #fff;
  font-family: var(--font-display); font-size: var(--text-xl); white-space: nowrap; }
.works__item:nth-child(5n+1) { background: var(--moment-yellow); } .works__item:nth-child(5n+3) { background: var(--moment-pink); } .works__item:nth-child(5n+5) { background: var(--moment-blue); color: var(--moment-blue-ink); }
@keyframes works-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .works__track { animation: none; width: auto; justify-content: center; flex-wrap: wrap; }
  .works__list[aria-hidden="true"] { display: none; }
  .clutter span, .scatter li, .chat p, .urlbar, .flag, .report { animation: none; }
}
/* Long file names must wrap on phones instead of widening the column. */
.how > * { min-width: 0; }
.how__panel-title, .urlbar { overflow-wrap: anywhere; }
/* Faceless logo (Jose's wordmark). Black on paper; turned white on the dark footer. */
.logo { display: block; height: 1.8rem; width: auto; }
.nav__brand { display: flex; align-items: center; }
.logo--footer { height: 2.4rem; filter: invert(1); margin-bottom: var(--space-4); }
/* Every "Book a call" uses the same outline look as "Join the waitlist". */
.nav__cta { background: transparent; color: var(--marketing-ink); border: 2px solid var(--marketing-outline); }
.works .wrap { display: flex; justify-content: center; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-5); }
.works .works__title { margin-bottom: 0; }
.works__pause { all: unset; cursor: pointer; text-decoration: underline; color: var(--marketing-muted); }
.works__pause:focus-visible { outline: 2px solid var(--foreground); outline-offset: 2px; }
.works.is-paused .works__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .works__pause { display: none; } }