/* The site's own page styles. Every colour, font, radius and space comes from the design tokens in kimio-design.css, so this file defines no colour. */

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
html.is-dark { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-text); font-size: var(--fs-16); line-height: var(--lh-16); }
img { max-width: 100%; height: auto; }
a { color: var(--roof-blue-600); }
a:hover { color: var(--roof-blue-700); }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }

.skip-link { position: absolute; left: var(--space-8); top: var(--space-8); padding: var(--space-8) var(--space-16); background: var(--bg-raised); color: var(--fg); border-radius: var(--radius-sm); transform: translateY(-200%); }
.skip-link:focus { transform: none; z-index: 1; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 var(--space-20); }
.section { padding: var(--space-48) 0; }
.section--sunken { background: var(--bg-sunken); }
h1, h2, h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: 0; color: var(--fg); }
h1 { font-size: var(--fs-40); line-height: var(--lh-40); font-variation-settings: "opsz" 72; }
h2 { font-size: var(--fs-32); line-height: var(--lh-32); font-variation-settings: "opsz" 48; }
h3 { font-size: var(--fs-20); line-height: var(--lh-20); }
.centred { text-align: center; }
.lede { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--fg-muted); margin: var(--space-16) 0 0; max-width: 36rem; }

.site-header { border-bottom: 1px solid var(--border); background: var(--bg); }
.site-header .wrap { display: flex; align-items: center; gap: var(--space-12); height: 64px; }
.lockup { display: inline-flex; align-items: center; gap: var(--space-8); text-decoration: none; color: var(--fg); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-24); }
.lockup img { width: 40px; height: 40px; }

.hero { background: var(--bg-hero); padding: var(--space-40) 0 var(--space-48); }
.hero .wrap { display: grid; gap: var(--space-32); align-items: center; }
.hero-badge { margin: var(--space-24) 0 0; }
.hero-art { justify-self: center; width: min(320px, 70vw); }
.hero-art img { display: block; width: 100%; }

.badge { display: inline-block; line-height: 0; }
.badge img { width: 200px; }
.cta-note { margin: var(--space-12) 0 0; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--fg-muted); max-width: 30rem; }

.wins { display: grid; gap: var(--space-16); margin: var(--space-32) 0 0; padding: 0; list-style: none; }
.win { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-24); box-shadow: var(--shadow-1); }
.win h3 { margin-bottom: var(--space-8); }
.win p { margin: 0; color: var(--fg-muted); }
.mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-weight: var(--fw-bold); margin-bottom: var(--space-12); }

/* Fixed phone-shaped boxes, so a screenshot dropped in later changes no layout. */
.shot { aspect-ratio: 9 / 19.5; width: 100%; background: var(--bg-sunken); border: 2px dashed var(--border-strong); border-radius: var(--radius-xl); display: grid; place-items: center; text-align: center; padding: var(--space-12); color: var(--fg-muted); font-size: var(--fs-12); line-height: var(--lh-12); }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); max-width: 36rem; margin: var(--space-32) auto 0; }

.steps { display: grid; gap: var(--space-16); margin: var(--space-24) 0 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: var(--space-16); align-items: start; }
.steps .mark { margin-bottom: 0; }
.steps h3 { font-size: var(--fs-18); line-height: var(--lh-18); }
.steps p { margin: var(--space-4) 0 0; color: var(--fg-muted); }

.promises { display: grid; gap: var(--space-16); margin: var(--space-24) 0 0; padding: 0; list-style: none; }
.promise { display: flex; gap: var(--space-12); align-items: flex-start; }
.promise::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--positive-soft); color: var(--meadow-700); font-weight: var(--fw-bold); }
.promise p { margin: 0; }
.promise strong { display: block; }
.subscription-note { margin: var(--space-32) 0 0; max-width: 40rem; color: var(--fg-muted); }

.band { background: var(--bg-sunken); border-top: 1px solid var(--border); text-align: center; padding: var(--space-48) 0; }
.band .cta-note, .band .lede { margin-left: auto; margin-right: auto; }
.band .badge, .band .mail-button { margin-top: var(--space-24); }

.preview-notice { margin: var(--space-24) 0 0; padding: var(--space-16) var(--space-20); max-width: 30rem; background: var(--bg-raised); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); }
.preview-notice p { margin: 0; }

.page-head { background: var(--bg-hero); padding: var(--space-40) 0 var(--space-24); }
.page-head h1 { font-size: var(--fs-40); line-height: var(--lh-40); font-variation-settings: "opsz" 72; }
.page-head + .section { padding-top: var(--space-24); }

.mail-button { display: inline-block; margin-top: var(--space-12); padding: var(--space-12) var(--space-20); border: 1px solid var(--accent); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-weight: var(--fw-semibold); text-decoration: none; }
.mail-button:hover { color: var(--accent-ink); background: var(--bg-raised); }

.support-contact { padding: var(--space-24); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); max-width: 36rem; }
.support-contact-address { margin: 0; font-family: var(--font-display); font-size: var(--fs-24); line-height: var(--lh-24); overflow-wrap: anywhere; }
.support-questions { max-width: 42rem; margin-top: var(--space-48); }
.support-questions h3 { margin-top: var(--space-24); font-size: var(--fs-18); line-height: var(--lh-18); }
.support-questions p { margin: var(--space-8) 0 0; color: var(--fg-muted); }

.legal-document-published { margin: var(--space-12) 0 0; font-size: var(--fs-14); line-height: var(--lh-14); color: var(--fg-muted); }
.legal-document, .section ol:not([class]), .section ul:not([class]) { max-width: 44rem; }
.section > .wrap > h2 + ol, .section > .wrap > h2 + ul { margin-top: var(--space-16); }
.section > .wrap > h2:not(:first-child) { margin-top: var(--space-40); }
.legal-document h2 { font-size: var(--fs-24); line-height: var(--lh-24); margin-top: var(--space-40); }
.legal-document h3 { margin-top: var(--space-24); }
.legal-document li { margin: var(--space-8) 0; }
.legal-document table { width: 100%; border-collapse: collapse; margin: var(--space-16) 0; font-size: var(--fs-14); line-height: var(--lh-14); }
.legal-document th, .legal-document td { text-align: left; vertical-align: top; padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--border); }
.legal-document th { background: var(--bg-sunken); }

/* On a phone each table row becomes a card whose lines are labelled with the column heading the API service copied onto each cell as data-label. */
@media (max-width: 40rem) {
  .legal-document thead { display: none; }
  .legal-document tr { display: block; margin: var(--space-12) 0; padding: var(--space-8) 0; background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-md); }
  .legal-document td { display: block; border: 0; padding: var(--space-4) var(--space-12); }
  .legal-document td::before { content: attr(data-label); display: block; font-weight: var(--fw-semibold); color: var(--fg); }
}

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); }

.site-footer { padding: var(--space-24) 0 var(--space-32); font-size: var(--fs-14); line-height: var(--lh-14); color: var(--fg-muted); border-top: 1px solid var(--border); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); justify-content: space-between; }

@media (min-width: 48rem) {
  h1 { font-size: var(--fs-56); line-height: var(--lh-56); font-variation-settings: "opsz" 96; }
  .hero .wrap { grid-template-columns: 1.2fr 1fr; }
  .hero-art { width: min(420px, 100%); }
  .wins { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps li { grid-template-columns: 1fr; }
  .steps .mark { margin-bottom: var(--space-12); }
  .promises { grid-template-columns: repeat(3, 1fr); }
  .section { padding: var(--space-64) 0; }
}