/* Iso pilot landing pages. Every visual value comes from tokens.css (Modelina design system). */

/* Iso brand token. Modelina's lightest text weight is Normal (450); Iso's descriptive text runs one step
   lighter, on TT Norms Pro Regular (400), whose @font-face tokens.css already declares. */
:root { --iso-font-weight-body: 400; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--colors-background-bg-primary);
  color: var(--colors-text-text-primary-900);
  font: var(--text-text-lg-regular);
  font-weight: var(--iso-font-weight-body);
}
a { color: var(--colors-text-text-brand-tertiary-600); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.container { max-width: var(--container-max-width-desktop); margin: 0 auto; padding: 0 var(--container-padding-mobile); }
.narrow { max-width: var(--width-xl); }
.prose { max-width: var(--paragraph-max-width); }
.preview-banner {
  background: var(--colors-background-bg-warning-primary);
  color: var(--colors-text-text-primary-900);
  border-bottom: 1px solid var(--colors-border-border-secondary);
  padding: var(--spacing-md) 0;
  font: var(--text-text-sm-medium);
  text-align: center;
}
.placeholder { background: var(--colors-background-bg-warning-secondary); border-radius: var(--radius-xs); padding: 0 var(--spacing-xs); }

header.site { padding: var(--spacing-3xl) 0; border-bottom: 1px solid var(--colors-border-border-secondary); }
/* Shown as ISO, but the text stays "Iso" so screen readers say the name, not the letters I-S-O. */
.wordmark { font: var(--text-display-xs-semibold); color: var(--colors-text-text-primary-900); text-decoration: none; text-transform: uppercase; }

.hero { padding: var(--spacing-7xl) 0 var(--spacing-8xl); }
.eyebrow {
  display: inline-block; margin: 0 0 var(--spacing-3xl);
  padding: var(--spacing-xxs) var(--spacing-lg);
  border: 1px solid var(--colors-border-border-secondary); border-radius: var(--radius-full);
  background: var(--colors-background-bg-secondary);
  color: var(--colors-text-text-secondary-700); font: var(--text-text-sm-medium);
}
.hero h1 { margin: 0 0 var(--spacing-3xl); max-width: var(--width-2xl); }
.hero .lead { margin: 0 0 var(--spacing-5xl); color: var(--colors-text-text-tertiary-600); font: var(--text-text-xl-regular); }
.cta-note { margin: var(--spacing-lg) 0 0; color: var(--colors-text-text-tertiary-600); font: var(--text-text-sm-regular); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--spacing-6xl);
  padding: var(--spacing-lg) var(--spacing-2xl);
  border: 1px solid var(--colors-background-bg-brand-solid); border-radius: var(--radius-md);
  background: var(--colors-background-bg-brand-solid); color: var(--colors-text-text-white);
  box-shadow: var(--shadow-xs-skeuomorphic);
  font: var(--text-text-md-semibold); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--colors-background-bg-brand-solid-hover); border-color: var(--colors-background-bg-brand-solid-hover); }
.btn:focus-visible { box-shadow: var(--focus-ring-shadow-xs-skeuomorphic); }
.btn-secondary {
  background: var(--colors-background-bg-primary); color: var(--colors-text-text-secondary-700);
  border-color: var(--colors-border-border-primary);
}
.btn-secondary:hover { background: var(--colors-background-bg-primary-hover); border-color: var(--colors-border-border-primary); }
.btn[disabled] { background: var(--colors-background-bg-disabled); border-color: var(--colors-border-border-disabled); color: var(--colors-text-text-disabled); box-shadow: none; cursor: not-allowed; }

section.band { padding: var(--spacing-8xl) 0; border-top: 1px solid var(--colors-border-border-secondary); }
section.band.alt { background: var(--colors-background-bg-secondary); }
section.band h2 { margin: 0 0 var(--spacing-5xl); }

.steps { display: grid; gap: var(--spacing-3xl); grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  padding: var(--spacing-3xl);
  background: var(--colors-background-bg-primary);
  border: 1px solid var(--colors-border-border-secondary); border-radius: var(--radius-xl);
}
.steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--spacing-5xl); height: var(--spacing-5xl); margin-bottom: var(--spacing-xl);
  border-radius: var(--radius-full);
  background: var(--colors-background-bg-tertiary); color: var(--colors-text-text-secondary-700);
  font: var(--text-text-md-semibold);
}
.steps h3, .pillars h3 { margin: 0 0 var(--spacing-md); }
.steps p, .pillars p { margin: 0; color: var(--colors-text-text-tertiary-600); font: var(--text-text-md-regular); }

.pillars { display: grid; gap: var(--spacing-4xl); grid-template-columns: 1fr; }
.pillars > div { padding-top: var(--spacing-3xl); border-top: 1px solid var(--colors-border-border-secondary); }

.offer {
  padding: var(--spacing-5xl) var(--spacing-3xl);
  border: 1px solid var(--colors-border-border-secondary); border-radius: var(--radius-2xl);
  background: var(--colors-background-bg-primary);
}
.offer h2 { margin-bottom: var(--spacing-xl); }
.offer p { margin: 0 0 var(--spacing-xl); color: var(--colors-text-text-tertiary-600); }

.faq dl { margin: 0; }
.faq dt { margin: 0 0 var(--spacing-md); font: var(--text-text-lg-semibold); }
.faq dd { margin: 0 0 var(--spacing-4xl); color: var(--colors-text-text-tertiary-600); }

/* Sign-up flow */
.signup { scroll-margin-top: var(--spacing-3xl); }
.field { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-xl); }
.field label, fieldset legend { color: var(--colors-text-text-secondary-700); font: var(--text-text-sm-medium); }
.field input[type=email] {
  min-height: var(--spacing-6xl);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--colors-border-border-primary); border-radius: var(--radius-md);
  background: var(--colors-background-bg-primary); color: var(--colors-text-text-primary-900);
  box-shadow: var(--shadow-xs); font: var(--text-text-md-regular);
}
.field input[type=email]::placeholder { color: var(--colors-text-text-placeholder); }
.field input[type=email]:focus-visible { border-color: var(--colors-border-border-brand); box-shadow: var(--focus-ring-shadow-xs); }
.inline-form { display: flex; flex-direction: column; gap: var(--spacing-lg); }
fieldset { margin: 0 0 var(--spacing-3xl); padding: 0; border: 0; }
fieldset legend { margin-bottom: var(--spacing-md); padding: 0; }
.choices { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.choices label {
  display: inline-flex; align-items: center; gap: var(--spacing-md);
  min-height: var(--spacing-5xl); padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid var(--colors-border-border-primary); border-radius: var(--radius-md);
  color: var(--colors-text-text-secondary-700); font: var(--text-text-sm-medium); cursor: pointer;
}
.choices input { accent-color: var(--colors-background-bg-brand-solid); }
.choices label:has(input:checked) { border-color: var(--colors-border-border-brand); background: var(--colors-background-bg-secondary); }
.step-panel[hidden] { display: none; }
.thanks { padding: var(--spacing-3xl); border-radius: var(--radius-xl); background: var(--colors-background-bg-secondary); margin-bottom: var(--spacing-4xl); }
.thanks p { margin: 0; }
.subtle { color: var(--colors-text-text-tertiary-600); font: var(--text-text-sm-regular); }
.section-intro { margin: 0 0 var(--spacing-5xl); color: var(--colors-text-text-tertiary-600); font: var(--text-text-lg-regular); }
.group-title { margin: var(--spacing-5xl) 0 var(--spacing-3xl); }
.group-note { margin: var(--spacing-5xl) 0 0; }
.deposit { margin: var(--spacing-4xl) 0; padding-top: var(--spacing-4xl); border-top: 1px solid var(--colors-border-border-secondary); }

footer.site { padding: var(--spacing-5xl) 0; border-top: 1px solid var(--colors-border-border-secondary); color: var(--colors-text-text-tertiary-600); font: var(--text-text-sm-regular); }
footer.site p { margin: 0 0 var(--spacing-md); }

@media (min-width: 768px) {
  .container { padding: 0 var(--container-padding-desktop); }
  .hero { padding: var(--spacing-9xl) 0; }
  .hero h1 { font: var(--text-display-xl-semibold); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .pillars.pillars-2x2 { grid-template-columns: repeat(2, 1fr); }
  .inline-form { flex-direction: row; align-items: flex-end; }
  .inline-form .field { flex: 1; margin-bottom: 0; }
  .offer { padding: var(--spacing-6xl); }
}

/* Plans page */
.plans { display: grid; gap: var(--spacing-3xl); grid-template-columns: 1fr; }
.plan {
  display: flex; flex-direction: column;
  padding: var(--spacing-4xl) var(--spacing-3xl);
  background: var(--colors-background-bg-primary);
  border: 1px solid var(--colors-border-border-secondary); border-radius: var(--radius-xl);
}
.plan h3 { margin: 0 0 var(--spacing-xs); }
.plan-line { margin: 0 0 var(--spacing-xl); color: var(--colors-text-text-secondary-700); font: var(--text-text-md-semibold); }
.plan ul { margin: 0 0 var(--spacing-3xl); padding-left: var(--spacing-2xl); color: var(--colors-text-text-tertiary-600); font: var(--text-text-md-regular); }
.plan li { margin-bottom: var(--spacing-md); }
.plan-price { margin: auto 0 0; padding-top: var(--spacing-xl); border-top: 1px solid var(--colors-border-border-secondary); font: var(--text-text-lg-semibold); }
.field input[type=text] {
  min-height: var(--spacing-6xl);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--colors-border-border-primary); border-radius: var(--radius-md);
  background: var(--colors-background-bg-primary); color: var(--colors-text-text-primary-900);
  box-shadow: var(--shadow-xs); font: var(--text-text-md-regular);
}
.field input[type=text]:focus-visible { border-color: var(--colors-border-border-brand); box-shadow: var(--focus-ring-shadow-xs); }
@media (min-width: 768px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
}

/* Descriptive text takes the lighter Iso weight. Kept last so it wins over the font shorthands above. */
.hero .lead, .section-intro, .cta-note, .steps p, .pillars p, .plan ul, .subtle, footer.site, .faq dd, .offer p {
  font-weight: var(--iso-font-weight-body);
}

/* "Is this real?" prototype (/demo/is-this-real/): large type and big targets for older readers. */
.demo { padding-top: var(--spacing-5xl); padding-bottom: var(--spacing-8xl); }
.demo h1 { margin: 0 0 var(--spacing-xl); }
.demo h2 { margin: var(--spacing-4xl) 0 var(--spacing-md); }
.demo-lead { margin: 0 0 var(--spacing-4xl); color: var(--colors-text-text-secondary-700); font: var(--text-text-xl-regular); }
.demo-body { margin: 0; color: var(--colors-text-text-secondary-700); font: var(--text-text-lg-regular); }
.demo-body li + li { margin-top: var(--spacing-md); }
.demo-actions { display: grid; gap: var(--spacing-lg); margin: var(--spacing-4xl) 0 var(--spacing-xl); }
.demo-big { width: 100%; justify-content: center; font: var(--text-text-lg-semibold); padding: var(--spacing-xl) var(--spacing-3xl); }
.demo-label { display: block; margin: 0 0 var(--spacing-sm); font: var(--text-text-md-medium); }
.demo textarea { width: 100%; margin: 0 0 var(--spacing-xl); padding: var(--spacing-lg); font: var(--text-text-lg-regular); color: var(--colors-text-text-primary-900); background: var(--colors-background-bg-primary); border: 1px solid var(--colors-border-border-primary); border-radius: var(--radius-md); }
.demo-examples-title { margin-top: var(--spacing-5xl); }
.demo-examples { display: grid; gap: var(--spacing-md); }
.demo-example { width: 100%; justify-content: flex-start; text-align: left; font: var(--text-text-lg-medium); }
.demo-quote { margin: 0 0 var(--spacing-3xl); padding: var(--spacing-xl); border-left: var(--spacing-xs) solid var(--colors-border-border-secondary); background: var(--colors-background-bg-secondary); color: var(--colors-text-text-secondary-700); font: var(--text-text-md-regular); border-radius: var(--radius-sm); }
.demo-verdict { margin: 0 0 var(--spacing-xl); padding: var(--spacing-xl); border-radius: var(--radius-lg); font: var(--text-display-xs-semibold); }
.demo-verdict[data-verdict=scam] { background: var(--colors-background-bg-error-secondary); color: var(--colors-text-text-error-primary-600); }
.demo-verdict[data-verdict=genuine] { background: var(--colors-background-bg-success-secondary); color: var(--colors-text-text-success-primary-600); }
.demo-verdict[data-verdict=unsure] { background: var(--colors-background-bg-warning-secondary); color: var(--colors-text-text-warning-primary-600); }
.demo-note { margin: 0 0 var(--spacing-xl); color: var(--colors-text-text-tertiary-600); font: var(--text-text-md-regular); }
#photo-preview:not([hidden]) { display: block; max-width: 100%; margin: 0 0 var(--spacing-3xl); border-radius: var(--radius-lg); }