/* Hallmark · shape: Conversational FAQ · genre: editorial · theme: Specimen (deal 1/3, adapted to existing SBC brand) · job: try · draw: 534dfb
 * hero: Settled · nav: edge-aligned wordmark and reading destinations · footer: colophon
 * imagery: two genuine native app screenshots · signature: a reading before the download
 * axes: light/roman-serif/neutral · posture: restrained · contrast: checked statically · fold: unverified (browser checks prohibited) · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · weakest: R, removed the decorative battery illustration and extra download buttons. */
/* Hallmark · adapted: preserve Lora/Inter with a neutral gray, black and white palette at user request; no browser rendering under repository instructions. */
@import url("./tokens.css");
@import url("./base.css");

.skip {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: var(--z-raised);
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-paper);
  background: var(--color-ink);
}
.skip:focus-visible { top: var(--space-md); }
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.site-header { min-height: 100px; flex-wrap: wrap; padding-block: var(--space-md); }
.wordmark { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.035em; text-decoration: none; white-space: nowrap; }
nav { display: flex; align-items: center; gap: var(--space-xl); }
nav a { font-size: var(--text-sm); text-decoration: none; white-space: nowrap; padding-block: var(--space-sm); }
nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.nav-access { border-bottom: 1px solid var(--color-ink); }
.hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: var(--space-2xl); min-height: min(780px, calc(100svh - 100px)); padding-block: var(--space-xl) var(--space-2xl); }
.hero h1 { font-size: clamp(3rem, 5.5vw, 5.25rem); max-width: 12ch; letter-spacing: -0.055em; line-height: 1.09; }
.hero-copy > .lead { margin-top: var(--space-lg); max-width: 30ch; color: var(--color-muted); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg); margin-top: var(--space-xl); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: var(--space-md) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); border: 1px solid var(--color-accent); border-radius: var(--radius-button); font-weight: 600; font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.button:hover { background: var(--color-ink); border-color: var(--color-ink); }
.button:active { transform: translateY(1px); }
.text-link { font-size: var(--text-sm); padding-block: var(--space-sm); }
a:hover { text-decoration-thickness: 2px; }
.hero-product { margin: 0; width: 100%; }
.product-stage { display: flex; align-items: center; justify-content: center; background: var(--color-paper-3); padding: var(--space-lg); border-radius: var(--radius-panel); }
.app-screen { filter: grayscale(1); width: min(100%, 278px, calc((100svh - 310px) * 1206 / 2622)); border-radius: var(--radius-screen); box-shadow: var(--shadow-screen); }
figcaption { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-md); text-align: center; }
.reading-section { margin-top: var(--section-gap-s); background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.reading-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-3xl); align-items: start; }
.reading-intro h2 { max-width: 12ch; }
.reading-intro > p { max-width: 32ch; margin-top: var(--space-lg); color: var(--color-muted); }
.reading-intro .caption { margin-top: var(--space-xl); }
.caption { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.reading-prose { font-family: var(--font-display); font-size: clamp(1.35rem, 1.8vw, 1.75rem); line-height: 1.7; letter-spacing: -0.015em; }
.small-step { margin-top: var(--space-xl); border-top: 1px solid var(--color-rule-2); border-bottom: 1px solid var(--color-rule-2); }
summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); cursor: pointer; list-style: none; padding-block: var(--space-lg); font-size: var(--text-md); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: var(--text-xl); font-weight: 400; flex: 0 0 auto; }
details[open] > summary::after { content: "−"; }
summary:hover { color: var(--color-accent); }
summary:active { color: var(--color-ink); }
details > p { padding-bottom: var(--space-lg); line-height: 1.7; }
.app-section { padding-block: var(--section-gap-l) var(--section-gap); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl); }
.section-heading h2 { max-width: 18ch; }
.section-heading .lead { max-width: 23ch; color: var(--color-muted); padding-bottom: var(--space-2xs); }
.app-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-3xl); margin-top: var(--space-2xl); }
.library-figure { margin: 0; padding: var(--space-xl); background: var(--color-paper-2); border-radius: var(--radius-panel); }
.library-screen { filter: grayscale(1); width: min(100%, 300px); max-height: 540px; object-fit: cover; object-position: top; border-radius: var(--radius-screen); margin-inline: auto; }
.feature-rows { margin: 0; }
.feature-rows > div { border-top: 1px solid var(--color-rule); padding-block: var(--space-xl); }
.feature-rows > div:last-child { border-bottom: 1px solid var(--color-rule); }
dt { font-family: var(--font-display); font-size: var(--text-title); line-height: 1.3; }
dd { margin: var(--space-sm) 0 0; max-width: 38ch; color: var(--color-muted); }
.permission-section { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.permission-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); align-items: center; }
.permission-layout h2 { font-size: var(--text-display-s); }
.permission-layout .lead { max-width: 35ch; }
.questions-section { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); padding-block: var(--section-gap-l); }
.questions { border-top: 1px solid var(--color-rule-2); }
.questions details { border-bottom: 1px solid var(--color-rule); }
.questions details > p { color: var(--color-muted); padding-right: var(--space-xl); }
.questions summary { min-height: 88px; }
.access-section { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xl); padding-block: var(--space-2xl) var(--section-gap-s); }
.access-section h2 { font-size: var(--text-display-s); }
.access-section .lead { margin-top: var(--space-lg); max-width: 34ch; color: var(--color-muted); }
.access-action { flex-shrink: 0; }
.access-action .caption { margin-top: var(--space-md); }
.site-footer { min-height: 180px; border-top: 1px solid var(--color-rule); }

/* The support and policy pages use the same reading materials. */
.document { padding-block: var(--space-2xl) var(--section-gap); }
.document > * { max-width: 46rem; margin-inline: auto; }
.document h1 { font-size: var(--text-display-s); }
.document h2 { font-size: var(--text-title); margin-top: var(--space-xl); margin-bottom: var(--space-md); }
.document p, .document li { line-height: 1.8; }
.document p { margin-top: var(--space-md); }
.document ol { padding-left: var(--space-lg); }
.document .button { margin-top: var(--space-xl); }

@media (min-width: 90rem) { .hero { min-height: 800px; } .app-screen { width: min(100%, 300px, calc((100svh - 310px) * 1206 / 2622)); } }
@media (max-width: 64rem) {
  .hero { gap: var(--space-xl); }
  .hero h1 { font-size: clamp(3rem, 5.5vw, 4.5rem); }
  .reading-layout, .app-layout, .permission-layout, .questions-section { gap: var(--space-xl); }
  .product-stage { padding: var(--space-md); }
  .section-heading { align-items: start; }
}
@media (max-width: 48rem) {
  .site-header { min-height: 88px; }
  nav { gap: var(--space-lg); }
  .nav-reading, .nav-questions { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; padding-top: var(--space-xl); gap: var(--space-2xl); }
  .hero h1 { max-width: 14ch; font-size: clamp(3rem, 9.7vw, 4.5rem); }
  .hero-copy > .lead { max-width: 30ch; }
  .hero-actions { margin-top: var(--space-lg); }
  .product-stage { padding-block: var(--space-xl); }
  .app-screen { filter: grayscale(1); width: min(75%, 278px); }
  .reading-section { margin-top: var(--space-lg); }
  .reading-layout, .app-layout, .permission-layout, .questions-section { grid-template-columns: minmax(0, 1fr); }
  .reading-intro h2 { max-width: 16ch; }
  .reading-intro > p { max-width: 45ch; }
  .reading-intro .caption { margin-top: var(--space-lg); }
  .section-heading, .access-section { flex-direction: column; align-items: start; }
  .section-heading .lead { max-width: 32ch; }
  .app-layout { margin-top: var(--space-xl); }
  .library-figure { padding: var(--space-lg); }
  .library-screen { max-height: 470px; }
  .feature-rows > div { padding-block: var(--space-lg); }
  .permission-layout .lead { max-width: 40ch; }
  .questions summary { font-size: var(--text-sm); min-height: 80px; }
  .access-section { gap: var(--space-xl); padding-top: 0; }
  .site-footer { align-items: start; flex-direction: column; justify-content: center; gap: var(--space-md); padding-block: var(--space-xl); }
  .site-footer nav { flex-wrap: wrap; }
}