/* Secure Scrivener site and app layout. Components come from ds.css; values from tokens.css. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/26px var(--font-sans); }
h1, h2, h3, p { margin: 0; }
a { color: var(--brand); }
img, svg { max-width: 100%; }
.wrap { max-width: var(--container-max); margin: 0 auto; padding-inline: var(--space-7); }
.muted { color: var(--ink-muted); }
.fine { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: var(--radius-md); z-index: 20; }
.skip:focus { left: 8px; }

/* type (mirrors the design-system styles) */
.display { font: 600 56px/60px var(--font-serif); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.h1 { font: 600 40px/46px var(--font-serif); letter-spacing: -0.01em; text-wrap: balance; }
.h2 { font: 600 28px/34px var(--font-serif); }
.h3 { font: 600 20px/28px var(--font-serif); }
.lede { font: 400 20px/31px var(--font-serif); color: var(--ink-muted); max-width: 36em; }
.overline { font: 600 12px/16px var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--brass); margin-bottom: var(--space-4); }

/* header logo sizing */
.ss-header .ss-logo { height: 34px; }
.ss-logo-svg { height: 100%; width: auto; display: block; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; padding-top: var(--space-9); padding-bottom: var(--space-8); }
.hero .display { margin-bottom: var(--space-5); }
.hero .lede { margin-bottom: var(--space-6); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.hero-cta .ss-link { font-weight: 500; }
.trust { list-style: none; margin: var(--space-7) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.trust li { display: flex; align-items: center; gap: var(--space-2); }
.trust .ss-icon { color: var(--brand); width: 18px; height: 18px; }
.hero-sheet { margin: 0; transform: rotate(0.6deg); }
.ss-sheet-head .right { text-align: right; }

/* closed-loop band */
.band { background: var(--brand-deep); color: var(--on-brand-deep); padding: var(--space-8) 0; }
.band .h1 { color: var(--on-brand-deep); margin-bottom: var(--space-4); }
.band .overline.on-deep { color: var(--on-brand-deep-muted); }
.band .lede { color: var(--on-brand-deep-muted); }
.loop-wide { display: block; max-width: 880px; margin: var(--space-7) 0 var(--space-6); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.steps li { border-top: 1px solid rgba(243, 239, 230, 0.22); padding-top: var(--space-5); }
.steps .h3 { color: var(--on-brand-deep); margin: var(--space-3) 0 var(--space-2); }
.steps p { color: var(--on-brand-deep-muted); font-size: 15px; line-height: 24px; }
.step-no { font: 500 13px/18px var(--font-mono); color: var(--on-brand-deep-muted); }

/* sections */
.section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.section .h1 { margin-bottom: var(--space-4); }
.section .lede { margin-bottom: var(--space-7); }
.section--sunk { background: var(--surface-sunk); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.compliance { margin-top: var(--space-6); display: flex; gap: var(--space-6); align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.compliance .h3 { margin-bottom: var(--space-1); }
.compliance p { color: var(--ink-muted); font-size: 15px; line-height: 24px; max-width: 44em; }

/* pricing */
.pricing { display: grid; grid-template-columns: 1fr minmax(0, 440px); gap: var(--space-8); align-items: start; }
.pricing .lede { margin-bottom: 0; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); scroll-margin-top: 24px; }
.price { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-5); }
.price-fig { font: 600 48px/52px var(--font-sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price-unit { color: var(--ink-muted); }
.checks { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-3); }
.checks li { display: flex; gap: var(--space-3); font-size: 15px; line-height: 22px; }
.checks .ss-icon { color: var(--ready); width: 18px; height: 18px; margin-top: 2px; stroke-width: 2.25; }
.block { display: flex; width: 100%; }
.price-card .fine { margin-top: var(--space-3); text-align: center; }
.disclaimer { padding-top: var(--space-7); padding-bottom: var(--space-7); }

/* footer */
.site-footer { background: var(--brand-deep); color: var(--on-brand-deep-muted); font-size: 14px; line-height: 22px; }
.footer-in { display: flex; justify-content: space-between; gap: var(--space-7); padding-top: var(--space-7); padding-bottom: var(--space-6); }
.footer-logo { height: 30px; margin-bottom: var(--space-4); }
.footer-note { max-width: 32em; }
.footer-links { display: grid; grid-auto-flow: row; gap: var(--space-2); align-content: start; }
.footer-links a { color: var(--on-brand-deep); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-links a:focus-visible { outline: 2px solid var(--on-brand-deep); outline-offset: 2px; }
.footer-base { border-top: 1px solid rgba(243, 239, 230, 0.16); padding-top: var(--space-4); padding-bottom: var(--space-5); font-size: 13px; }

/* ---------- app ---------- */
.app main { max-width: var(--container-max); margin: 0 auto; padding: var(--space-7) var(--space-7) var(--space-9); }
.app-head { display: flex; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.app-head .h2 { margin: 0; }
.app-narrow { max-width: var(--prose-max); }
.app .back { display: inline-flex; gap: 6px; align-items: center; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); text-decoration: none; margin-bottom: var(--space-4); }
.app .back:hover { color: var(--brand); }
.empty { text-align: center; padding: var(--space-8) var(--space-5); border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--ink-muted); }
.empty .h3 { color: var(--ink); margin-bottom: var(--space-2); }
.empty p { margin-bottom: var(--space-5); }
.form-section { margin-top: var(--space-6); }
.form-actions { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); }
.upload-progress { margin-top: var(--space-4); }
.upload-progress[hidden] { display: none; }
.bar { height: 6px; border-radius: 3px; background: var(--neutral-tint); overflow: hidden; }
.bar > span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .2s; }
.status-line { font-size: 14px; color: var(--ink-muted); margin-top: var(--space-2); min-height: 22px; }
.job-title { font: 600 28px/34px var(--font-serif); overflow-wrap: anywhere; margin-bottom: var(--space-3); }
.job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--ink-muted); font-size: 14px; margin-bottom: var(--space-6); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-5); }
.panel .h3 { margin-bottom: var(--space-2); }
.panel > p { color: var(--ink-muted); font-size: 14px; margin-bottom: var(--space-4); }
.panel[hidden] { display: none; }
.dl-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.speaker-rows { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3) var(--space-4); align-items: center; margin-bottom: var(--space-5); }
.speaker-rows label { font: 500 13px/18px var(--font-mono); color: var(--ink-muted); }
.speaker-rows .ss-input { margin: 0; }
.danger-zone { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-muted); }
.app .ss-notice { margin-bottom: var(--space-5); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-7); padding-top: var(--space-8); }
  .hero-sheet { transform: none; }
  .pricing { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 760px) {
  .wrap, .app main { padding-inline: var(--space-4); }
  .display { font-size: 40px; line-height: 44px; }
  .h1 { font-size: 30px; line-height: 36px; }
  .lede { font-size: 18px; line-height: 28px; }
  .hero { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .band, .section { padding-top: var(--space-7); padding-bottom: var(--space-7); }
  .steps { grid-template-columns: 1fr; gap: var(--space-5); }
  .compliance { flex-direction: column; align-items: flex-start; padding: var(--space-5); }
  .footer-in { flex-direction: column; gap: var(--space-5); }
  .app main { padding-top: var(--space-5); }
  .panel { padding: var(--space-5); }
  .speaker-rows { grid-template-columns: 1fr; gap: var(--space-1); }
  .speaker-rows .ss-input { margin-bottom: var(--space-3); }
  .danger-zone { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}
@media (max-width: 600px) {
  .loop-wide { display: none; }
  .steps { margin-top: var(--space-6); }
}
.page-title { margin-bottom: var(--space-5); }
.ss-drop-title { display: block; }
.status-line.inline { margin: 0; }
[hidden] { display: none !important; }
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.hero-sheet .ss-sheet-line { grid-template-columns: 36px 72px 1fr; font-size: 13.5px; }
@media (max-width: 960px) { .hero { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .hero-sheet .ss-sheet-line { grid-template-columns: 26px 1fr; font-size: 12.5px; line-height: 22px; }
  .hero-sheet .ss-sheet-head { flex-direction: column; gap: 6px; }
  .hero-sheet .ss-sheet-head .right { text-align: left; }
  .ss-fact { display: grid; grid-template-columns: 40px 1fr; gap: 0 var(--space-4); padding: var(--space-4); }
  .ss-fact-ico { grid-row: span 2; margin: 0; }
  .ss-facts { gap: var(--space-3); }
}