/* Odonto Modular · inner pages, forms, dialog, consent banner. Tokens come from styles.css */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-form { display: grid; gap: .9rem; }
.field { display: grid; gap: .35rem; }
.field label { font-weight: 600; font-size: var(--step--1); }
.field input, .field select, .field textarea {
  min-height: 48px; padding: .75rem 1rem; border-radius: 8px;
  border: 1.5px solid oklch(0.24 0.012 205 / .22); background: var(--paper); color: var(--ink);
  font: 400 var(--step-0)/1.4 var(--f-body);
}
.field textarea { resize: vertical; }
/* Focus ring scoped to forms, dialog, footer, consent and inner pages: the home scene keeps its own ring from styles.css */
.field :focus-visible,
.sheet .btn:focus-visible, .sheet a:focus-visible, .sheet button:focus-visible,
.foot a:focus-visible, .foot button:focus-visible,
.consent .btn:focus-visible, .consent a:focus-visible,
.page-inner .btn:focus-visible, .page-inner a:focus-visible, .page-inner button:focus-visible { outline: 3px solid var(--tq); outline-offset: 2px; }
.page-inner .page-section .btn:focus-visible, .page-inner .page-section a:focus-visible { outline-color: var(--tq-deep); }
html { scrollbar-gutter: stable; }
body.has-consent { padding-bottom: 9rem; }
@media (max-width: 760px) { body.has-consent { padding-bottom: 12rem; } }
[aria-invalid="true"] { border-color: oklch(0.55 0.17 25); }
.form__status:empty { display: none; }
.form__status { font-weight: 500; }
.form__status[data-state="busy"] { color: var(--ink-soft); }
.form__status[data-state="error"] { color: oklch(0.5 0.17 25); padding-left: .8rem; border-left: 3px solid oklch(0.55 0.17 25); }
.form__status[data-state="ok"] { color: var(--tq-deep); font-weight: 600; padding-left: .8rem; border-left: 3px solid var(--tq); }
.form__legal { font-size: var(--step--1); opacity: .75; }
.form__legal a { color: inherit; text-underline-offset: 3px; }

.btn--ghost-ink { background: transparent; color: var(--ink); border-color: oklch(0.24 0.012 205 / .4); justify-self: start; }
.btn--ghost-ink:hover { border-color: var(--tq-deep); color: var(--tq-deep); }
.btn[hidden] { display: none; }

.kit__more { color: var(--tq-deep); font-weight: 600; text-underline-offset: 3px; }

.sheet { width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); border: 0; border-radius: 14px; padding: 0; background: var(--paper); color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.sheet > form { padding: clamp(1.4rem, 4vw, 2.4rem); }
.sheet::backdrop { background: oklch(0.2 0.01 205 / .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sheet__close { position: absolute; top: .8rem; right: .8rem; width: 44px; height: 44px; border: 0; background: transparent; font-size: 1.8rem; cursor: pointer; color: inherit; }
.sheet__note { color: var(--ink-soft); margin-top: -.4rem; }
html:has(dialog[open]) { overflow: hidden; }

.foot__nav { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; }
.foot__nav a, .foot__link { color: inherit; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot__nav a:hover, .foot__link:hover { color: var(--tq); }

@media (max-width: 600px) { .sheet { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; } }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ---------- inner pages: hero + light sections ---------- */
.page-hero {
  background: var(--graphite); color: var(--mist);
  padding: clamp(7.5rem, 20vh, 11rem) var(--gutter) clamp(3.5rem, 9vh, 6rem);
}
.page-hero > * { max-width: 46rem; }
.page-hero > .lede { max-width: min(46rem, 62ch); }
.page-hero h1 { font: 700 var(--step-3)/1.02 var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }
.page-hero .btn { margin-top: 2rem; }
.page-section {
  padding: clamp(3.5rem, 10vh, 6.5rem) var(--gutter);
  background-image:
    linear-gradient(oklch(0.52 0.09 190 / .07) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.52 0.09 190 / .07) 1px, transparent 1px);
  background-size: 72px 72px; background-position: -1px -1px;
}
.page-section > .h2 { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.page-section__note { margin-top: 1.4rem; color: var(--ink-soft); max-width: 52ch; }
.page-section--paper { background-image: none; background-color: var(--paper-2); }

/* ruled list: numbered rows instead of icon cards */
.rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); column-gap: clamp(1.6rem, 4vw, 3.4rem); counter-reset: rule; }
.rules > li { counter-increment: rule; display: grid; gap: .35rem; padding: 1.1rem 0 1.4rem; border-top: 1.5px solid oklch(0.24 0.012 205 / .22); }
.rules > li::before { content: counter(rule, decimal-leading-zero); font: 600 var(--step--1)/1 var(--f-display); letter-spacing: .08em; color: var(--tq-deep); }
.rules__t { font: 600 var(--step-1)/1.2 var(--f-display); letter-spacing: -0.015em; }
.rules p { color: var(--ink-soft); max-width: 44ch; }

/* numbered step walk */
.walk { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; counter-reset: walk; }
.walk > li { counter-increment: walk; position: relative; padding: 1.2rem 1.2rem 1.3rem 1.2rem; background: oklch(0.975 0.006 185 / .88); border-radius: 6px; box-shadow: 0 1px 0 oklch(0.24 0.012 205 / .06), 0 16px 34px -26px oklch(0.24 0.012 205 / .35); }
.walk > li::before { content: counter(walk); display: block; font: 700 var(--step-2)/1 var(--f-display); letter-spacing: -0.03em; color: var(--tq-deep); margin-bottom: .6rem; }
.walk__t { display: block; font: 600 var(--step-1)/1.2 var(--f-display); }
.walk p { color: var(--ink-soft); margin-top: .25rem; }

/* is / is not */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); }
.split__col { padding: clamp(1.3rem, 3vw, 2rem); border-radius: 6px; background: var(--paper); box-shadow: 0 18px 40px -30px oklch(0.24 0.012 205 / .4); }
.split__col--is { border-top: 4px solid var(--tq); }
.split__col--not { border-top: 4px solid oklch(0.24 0.012 205 / .3); }
.split__col h3 { font: 600 var(--step-1)/1.2 var(--f-display); margin-bottom: .9rem; }
.split__col ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .7rem; color: var(--ink-soft); }

.waitlist { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.waitlist__copy { display: grid; gap: 1.1rem; }
.waitlist__copy p { color: var(--ink-soft); max-width: 40ch; }
.waitlist .kit__form { margin: 0; }

/* material cards: cover on top, form below */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.card { display: grid; gap: 1rem; align-content: start; padding: clamp(1.2rem, 3vw, 1.8rem); border-radius: 8px; background: var(--paper); box-shadow: 0 1px 0 oklch(0.24 0.012 205 / .06), 0 24px 50px -34px oklch(0.24 0.012 205 / .45); }
.card__cover { border-radius: 4px; background: var(--paper-2); box-shadow: 0 10px 26px -16px oklch(0.24 0.012 205 / .55); aspect-ratio: 600 / 849; width: min(100%, 15rem); height: auto; }
.card .card__meta { font: 600 var(--step--1)/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--tq-deep); }
.card__title { font: 600 var(--step-1)/1.15 var(--f-display); letter-spacing: -0.015em; }
.card p { color: var(--ink-soft); }
.card .lead-form .btn { justify-self: start; }
.card .btn[data-download] { justify-self: start; }

@media (max-width: 760px) { .waitlist { grid-template-columns: minmax(0, 1fr); } }

/* inner pages only (body.page-inner; home does not have it): solid dark bar so scrolled text never shows behind the logo */
body.page-inner .topbar:not(.is-light) { background: oklch(0.235 0.009 205 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* privacy text: reading width */
.legal { display: grid; gap: 1.1rem; align-content: start; }
.legal > p { max-width: 70ch; line-height: 1.65; }
.partner-form { max-width: 34rem; }

/* 404: centered graphite screen */
.notfound { min-height: 78vh; display: grid; place-content: center; justify-items: center; gap: 1.2rem; text-align: center; padding: 3rem var(--gutter); background: var(--graphite); color: var(--mist); }
.notfound h1 { font: 700 var(--step-3)/1.02 var(--f-display); letter-spacing: -0.03em; text-wrap: balance; }
.notfound p { color: var(--mist-soft); font-size: var(--step-1); }

/* cookie notice: fixed strip above the scene (topbar 50), below native <dialog> (top layer) */
.consent {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 60;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem;
  max-width: 62rem; margin-inline: auto; padding: .9rem 1.2rem;
  background: var(--graphite-2); color: var(--mist); border: 1px solid oklch(0.95 0.008 185 / .18); border-radius: 14px;
  font-size: var(--step--1); line-height: 1.5; box-shadow: 0 10px 40px oklch(0.1 0.01 205 / .5);
}
.consent p { flex: 1 1 20rem; margin: 0; }
.consent a { color: var(--tq); text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: .6rem; }
.consent .btn--small { min-height: 44px; }
@media (max-width: 760px) { .consent { inset: auto 1rem 1rem 1rem; } .consent__actions { width: 100%; } .consent__actions .btn { flex: 1; } }

/* tap targets: 44px minimum on touch screens (footer links) and on inner pages (topbar CTA) */
@media (pointer: coarse) { .foot__nav a, .foot__link { display: inline-flex; align-items: center; min-height: 44px; } }
.page-inner .topbar .btn--small { min-height: 44px; }