/* Page layout for leadads.guide. Colour, type and shape come from tokens.css and la.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--surface); color: var(--on-surface); font: 400 17px/28px var(--font-body); }
img, iframe { max-width: 100%; display: block; }
h1, h2, h3, p, ul { margin: 0; }
a { color: var(--primary-strong); text-underline-offset: 3px; }
a.la-btn, a.la-wordmark { text-decoration: none; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-8); }
@media (max-width: 720px) { .wrap { padding: 0 var(--space-4); } }

/* Type helpers */
.eyebrow { font: 600 13px/18px var(--font-mono); letter-spacing: .04em; color: var(--tertiary); }
.ticket { font: 500 14px/20px var(--font-mono); color: var(--on-surface-variant); }
.hl { color: var(--primary-strong); }
.section-title { margin-bottom: var(--space-8); max-width: 20ch; }
@media (max-width: 720px) {
  .t-display-lg { font-size: 40px; line-height: 44px; }
  .t-display-md { font-size: 32px; line-height: 38px; }
  .t-headline-lg { font-size: 26px; line-height: 32px; }
}

/* Top bar */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: 64px; padding: 0 var(--space-8); background: var(--surface-container);
}
.top__links { display: flex; align-items: center; gap: var(--space-2); }
.la-wordmark { font-size: 24px; }
.la-wordmark--sm { font-size: 20px; }
@media (max-width: 720px) { .top { padding: 0 var(--space-4); } .top__library { display: none; } }

/* Sections */
.section { padding-block: var(--space-16); }
.section--narrow { max-width: 880px; }
.band { background: var(--surface-container-low); padding-block: var(--space-16); }

/* Hero */
.hero { padding-block: var(--space-16) var(--space-12); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); }
.hero__title { max-width: 16ch; }
.hero__sub { max-width: 56ch; color: var(--on-surface-variant); }
.hero__video { width: 100%; max-width: 880px; margin-top: var(--space-4); }
.hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hero__cta { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.la-btn .btn-price { font-family: var(--font-mono); font-weight: 700; font-size: .85em; opacity: .85; }
@media (max-width: 720px) { .hero { padding-top: var(--space-12); } .la-btn--lg { --la-h: 64px; padding: 0 24px; font-size: 19px; } }

/* Compare: two tonal columns, no borders */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.compare__col { background: var(--surface-container-lowest); border-radius: var(--shape-xl); padding: var(--space-6) var(--space-8); }
.compare__col--yes { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.compare__head { font: 650 22px/28px var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 0; margin-bottom: var(--space-4); }
@media (max-width: 820px) { .compare { grid-template-columns: 1fr; } .compare__col { padding: var(--space-6); } }

/* Tick lists: Material Symbols as markers */
.ticks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); font-size: 16px; line-height: 24px; }
.ticks li { display: flex; gap: var(--space-3); }
.ticks li::before {
  content: 'check_circle'; flex: none; font: 24px/1 'Material Symbols Rounded';
  font-variation-settings: 'FILL' 1; color: var(--tertiary);
}
.compare__col--yes .ticks li::before { color: var(--on-tertiary-container); }
.ticks--no li::before { content: 'cancel'; font-variation-settings: 'FILL' 0; color: var(--on-surface-variant); }

/* Outcome cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.cards .la-card { max-width: none; }
@media (max-width: 960px) { .cards { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }

.stack { display: flex; flex-direction: column; gap: var(--space-2); }

/* About */
.about { display: grid; grid-template-columns: 320px 1fr; gap: var(--space-12); align-items: center;
  background: var(--surface-container-low); border-radius: var(--shape-2xl); padding: var(--space-8); }
.about__photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--shape-xl); }
.about__bio { display: flex; flex-direction: column; gap: var(--space-4); max-width: 62ch; }
.about__bio p { color: var(--on-surface-variant); }
.about__bio .eyebrow { color: var(--tertiary); }
.about__links { font-weight: 600; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; padding: var(--space-6); gap: var(--space-6); } .about__photo { max-width: 280px; } }

/* Pricing */
.price { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
  background: var(--primary-container); color: var(--on-primary-container); border-radius: var(--shape-2xl); padding: var(--space-12) var(--space-8); }
.price .eyebrow { color: var(--on-primary-container); }
.price .ticket { color: var(--on-primary-container); }
.price__art { width: 120px; height: 120px; }
.price__amount { font: 800 80px/1 var(--font-display); letter-spacing: -.02em; }
.price__list { text-align: left; margin: var(--space-4) 0 var(--space-6); }
.price__list li::before { color: var(--on-primary-container); }
.price__note { font-size: 14px; line-height: 20px; }
@media (max-width: 720px) { .price { padding: var(--space-8) var(--space-6); } .price__btn { width: 100%; } }

/* FAQ: tonal rows that morph when open */
.faq { display: flex; flex-direction: column; gap: var(--space-2); }
.faq details { background: var(--surface-container-low); border-radius: var(--shape-lg);
  transition: border-radius var(--la-dur-fast) var(--la-spring-fast), background-color var(--la-dur-effects) var(--la-ease-effects); }
.faq details[open] { background: var(--surface-container); border-radius: var(--shape-xl); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; list-style: none;
  padding: var(--space-4) var(--space-6); font: 650 18px/26px var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .la-icon { color: var(--on-surface-variant); transition: transform var(--la-dur-default) var(--la-spring-default); }
.faq details[open] summary .la-icon { transform: rotate(180deg); }
.faq details p { padding: 0 var(--space-6) var(--space-6); color: var(--on-surface-variant); max-width: 68ch; }

/* Final CTA on espresso */
.final { background: var(--inverse-surface); color: var(--inverse-on-surface); padding-block: var(--space-16); margin-top: var(--space-8); }
.final__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-6); }
.final h2 { max-width: 18ch; }
.final .ticket { color: var(--inverse-on-surface); opacity: .8; }

/* Footer */
.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding-block: var(--space-8) var(--space-12); }
.foot__copy { font-size: 14px; color: var(--on-surface-variant); margin-top: var(--space-1); }
.foot__links { display: flex; gap: var(--space-6); font-weight: 600; font-size: 15px; }
.foot__links a { color: var(--on-surface-variant); text-decoration: none; }
.foot__links a:hover { color: var(--primary-strong); }
.credit { display: inline-flex; align-items: center; gap: var(--space-2); padding: 4px 14px 4px 4px; border-radius: var(--shape-full);
  background: var(--surface-container); color: var(--on-surface-variant); font: 600 13px/20px var(--font-body); text-decoration: none; }
.credit img { width: 28px; height: 28px; border-radius: 50%; }

/* Legal pages */
.legal { max-width: 760px; padding-block: var(--space-12) var(--space-16); }
.legal h1 { margin-bottom: var(--space-2); }
.legal h2 { font: 650 26px/34px var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 0; margin: var(--space-12) 0 var(--space-4); }
.legal h3 { font: 650 19px/26px var(--font-display); margin: var(--space-6) 0 var(--space-2); }
.legal p, .legal ul, .legal ol { margin-bottom: var(--space-4); }
.legal ul, .legal ol { padding-left: 1.4em; }
.legal li { margin-bottom: var(--space-1); }
.legal a { overflow-wrap: anywhere; }
.legal .note { font: 500 14px/20px var(--font-mono); color: var(--on-surface-variant); }
.legal .legal__lead { font-size: 19px; line-height: 30px; }
.legal table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: var(--space-6); font-size: 15px; line-height: 22px;
  background: var(--surface-container-low); border-radius: var(--shape-lg); overflow: hidden; display: block; overflow-x: auto; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); }
.legal th { background: var(--surface-container); font-weight: 650; }
.legal tr + tr td { box-shadow: inset 0 1px 0 var(--outline-variant); }
.legal code { font: 500 .9em var(--font-mono); }
.back { display: inline-flex; margin-top: var(--space-8); }

/* 404 */
.notfound { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-4); padding-block: var(--space-16); }
.notfound .la-spot, .notfound svg { width: 160px; height: 160px; }