/* NDIScribe front door — calm field notebook, static-first. */

:root {
  color-scheme: light;
  --paper: #f4f1e9;
  --paper-deep: #e8e1d3;
  --surface: #fffdf8;
  --ink: #102f29;
  --ink-soft: #38554e;
  --teal: #0f5b50;
  --teal-deep: #0b3b34;
  --mint: #d9ebe2;
  --rust: #c85f32;
  --rust-soft: #f2d9c9;
  --line: #9ca9a2;
  --line-soft: #d4d5cb;
  --focus: #005fcc;
  --display: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --body: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font: 16px/1.6 var(--body);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, transparent 0, transparent calc(50% - 36rem), rgba(16, 47, 41, 0.04) calc(50% - 36rem), rgba(16, 47, 41, 0.04) calc(50% - 36rem + 1px), transparent calc(50% - 36rem + 1px)),
    var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.container {
  width: min(100% - 2.5rem, 72rem);
  margin-inline: auto;
}

.skip {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  background: var(--focus);
  color: #fff;
  padding: 0.7rem 1rem;
  text-decoration: none;
}

.skip:focus { top: 1rem; }

/* Header. Sticky, so the primary action is reachable from any scroll depth. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 241, 233, 0.97);
  backdrop-filter: saturate(140%) blur(6px);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  font: 700 1.35rem/1 var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  position: relative;
  display: inline-block;
  width: 1.65rem;
  height: 2rem;
  border: 1px solid currentColor;
  background:
    linear-gradient(90deg, transparent 0 0.42rem, var(--rust) 0.42rem 0.49rem, transparent 0.49rem),
    repeating-linear-gradient(0deg, transparent 0 0.38rem, rgba(16, 47, 41, 0.25) 0.38rem 0.44rem),
    var(--surface);
  transform: rotate(-2deg);
}

.brand-mark::after {
  content: "";
  position: absolute;
  right: -0.22rem;
  bottom: 0.2rem;
  width: 0.65rem;
  height: 0.15rem;
  background: var(--rust);
  transform: rotate(-38deg);
  transform-origin: right center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem 1.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-size: 0.9rem;
  text-decoration: none;
}

.nav-list a:not(.button):hover,
.nav-list a:not(.button):focus-visible {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-color: var(--rust);
  text-underline-offset: 0.35rem;
  text-decoration-thickness: 2px;
}

/* Type */
h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.05;
  text-wrap: balance;
}

/* Display sizes are deliberately smaller than they were. The previous h1 ran to
   5.7rem and pushed the only signup control below the fold on a laptop and off
   the first screen on a phone. Legibility was never the problem; reach was. */
h1 {
  max-width: 19ch;
  margin: 0 0 1.1rem;
  font-size: clamp(2.5rem, 4.4vw, 3.9rem);
  font-weight: 700;
  letter-spacing: -0.045em;
}

h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  letter-spacing: -0.035em;
}

h3 {
  margin: 0 0 0.55rem;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

.eyebrow,
.release-kicker,
.record-label,
.boundary-label {
  margin: 0 0 0.85rem;
  color: var(--teal);
  font: 700 0.72rem/1.4 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.status-dot {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--rust);
  box-shadow: 0 0 0 0.25rem var(--rust-soft);
}

.lede {
  max-width: 58ch;
  margin-bottom: 1.75rem;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}

.lede-small {
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Links and buttons */
main a,
.site-footer a {
  color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

main a:hover,
.site-footer a:hover { color: var(--teal-deep); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: 1px solid var(--teal-deep);
  border-radius: 0;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.button-primary {
  background: var(--teal-deep);
  color: #fff;
}

.button-primary:hover { background: var(--teal); color: #fff; }

.button-secondary {
  background: transparent;
  color: var(--teal-deep);
}

.button-secondary:hover { background: var(--surface); color: var(--teal-deep); }

.button-large {
  min-height: 54px;
  padding: 0.75rem 1.6rem;
  font-size: 1.05rem;
  box-shadow: 0.35rem 0.35rem 0 var(--rust-soft);
}

.nav-signin a {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--rust);
  text-underline-offset: 0.3rem;
}

/* .nav-list a sets colour on element+class and outranks .button-primary, which
   painted the header subscribe button dark green on dark green. */
.nav-list a.button-primary { color: #fff; }
.nav-list a.button-primary:hover { color: #fff; }

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration-color: var(--rust);
}

.text-link span { margin-left: 0.35rem; }

.store-badge {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 10.5rem;
  min-height: 56px;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  line-height: 1.1;
  text-decoration: none;
}

.store-badge:hover { background: var(--teal-deep); color: #fff; }
.store-badge-small { font-size: 0.69rem; letter-spacing: 0.03em; }
.store-badge-large { font: 700 1.15rem/1.1 var(--display); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 4.5vw, 4.4rem) 0 clamp(2.8rem, 4.5vw, 4.4rem);
  border-bottom: 1px solid var(--line);
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: -8rem;
  width: min(36vw, 34rem);
  height: 100%;
  background: repeating-linear-gradient(0deg, transparent 0 2.45rem, rgba(15, 91, 80, 0.11) 2.45rem 2.5rem);
  transform: skewX(-8deg);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(19rem, 0.65fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.cta-note {
  max-width: 40rem;
  margin-top: 1.15rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--rust);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.cta-note strong { color: var(--ink); }

.availability {
  max-width: 44rem;
  margin-top: 0.9rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.honest-inline {
  max-width: 62ch;
  margin-top: 1.4rem;
  padding: 0.9rem 1.1rem;
  border-left: 3px solid var(--rust);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.94rem;
}

.connected-preview .honest-inline strong { color: #f2b68f; }

.record-board {
  position: relative;
  border: 1px solid var(--ink);
  background:
    linear-gradient(90deg, transparent 0 2.9rem, rgba(200, 95, 50, 0.54) 2.9rem 3rem, transparent 3rem),
    repeating-linear-gradient(0deg, transparent 0 2.4rem, rgba(15, 91, 80, 0.13) 2.4rem 2.45rem),
    var(--surface);
  padding: 1.35rem 1.5rem 1.5rem 4.1rem;
  box-shadow: 1.15rem 1.15rem 0 var(--paper-deep);
  transform: rotate(1.2deg);
}

.record-board::before {
  content: "";
  position: absolute;
  inset: -0.55rem 1.8rem auto auto;
  width: 4.8rem;
  height: 1.2rem;
  background: rgba(207, 169, 112, 0.58);
  transform: rotate(2deg);
}

.record-board-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--ink);
  font: 700 0.7rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.record-board-head p { margin: 0; }
.record-state { color: var(--rust); }

/* The hero card lists the fields the register actually holds for one record,
   rather than an abstract three-step diagram. Specificity is the point. */
.record-fields {
  margin: 1.1rem 0 0;
  padding: 0;
}

.record-fields > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(16, 47, 41, 0.3);
}

.record-fields > div:first-child { border-top: 0; }

.record-fields dt {
  color: var(--ink-soft);
  font: 700 0.66rem/1.4 var(--body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.record-fields dd {
  margin: 0;
  font: 600 0.88rem/1.35 var(--body);
}

.record-fields dd span {
  display: block;
  color: var(--ink-soft);
  font: 500 0.7rem/1.3 var(--mono);
}

.record-foot {
  margin-top: 1rem;
  padding: 0.75rem 0 0.1rem;
  border-top: 2px solid var(--ink);
  font: 700 0.72rem/1.5 var(--mono);
}

/* Availability strip */
.release-strip {
  background: var(--teal-deep);
  color: #fff;
}

.release-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.release-grid > div { padding: 1.4rem clamp(1rem, 3vw, 2.2rem); }
.release-grid > div:first-child { border-right: 1px solid rgba(255, 255, 255, 0.4); }
.release-grid p { margin: 0; }
.release-grid p:last-child { color: #dfeae7; font-size: 0.9rem; }
.release-kicker { color: #a8dfc7; }
.release-kicker.review { color: #f2b68f; }

/* Sections */
.section {
  padding: clamp(3.25rem, 5.5vw, 5.25rem) 0;
  border-bottom: 1px solid var(--line);
}

/* The header is sticky, so in-page anchors must stop clear of it. */
main > section[id],
:target { scroll-margin-top: 5.5rem; }

.section-intro { max-width: 47rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-intro > p:last-child { max-width: 46rem; color: var(--ink-soft); font-size: 1.05rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  border-block: 1px solid var(--line);
  list-style: none;
}

.steps li {
  min-height: 18rem;
  padding: 2rem;
  border-right: 1px solid var(--line);
}

.steps li:last-child { border-right: 0; }

.step-number {
  display: block;
  margin-bottom: 4.5rem;
  color: var(--rust);
  font: 700 0.75rem/1 var(--mono);
}

.steps p { color: var(--ink-soft); }

.principles { background: var(--surface); }

.split-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(24rem, 1.2fr);
  gap: clamp(3rem, 8vw, 8rem);
}

.principle-list { border-top: 1px solid var(--line); }

.principle-list article {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1.25rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--line);
}

.principle-index { color: var(--rust); font: 700 0.75rem/1.5 var(--mono); }
.principle-list p:last-child { color: var(--ink-soft); }

/* Free guide */
.guide-section { background: var(--teal-deep); color: #fff; }

.guide-grid {
  display: grid;
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2.5rem, 7vw, 6.5rem);
  align-items: center;
}

.guide-preview {
  display: grid;
  place-items: center;
  min-height: 26rem;
  perspective: 900px;
}

.guide-page {
  position: relative;
  width: min(100%, 19rem);
  aspect-ratio: 210 / 297;
  border-left: 0.35rem solid var(--rust);
  padding: 3.2rem 2.2rem 2rem;
  background:
    repeating-linear-gradient(0deg, transparent 0 1.45rem, rgba(16, 47, 41, 0.08) 1.45rem calc(1.45rem + 1px)),
    var(--paper);
  color: var(--ink);
  box-shadow: 1.4rem 1.6rem 0 rgba(255, 255, 255, 0.1), 0 2rem 4rem rgba(0, 0, 0, 0.28);
  transform: rotate(-2.5deg);
}

.guide-page::before {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px solid rgba(16, 47, 41, 0.16);
  pointer-events: none;
}

.guide-kicker {
  position: relative;
  color: var(--rust);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.guide-title {
  position: relative;
  max-width: 10ch;
  margin: 2.2rem 0 3rem;
  font: 700 clamp(2rem, 4.7vw, 3.15rem)/0.98 var(--display);
  letter-spacing: -0.045em;
}

.guide-page ul {
  position: relative;
  margin: 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.guide-page li { margin-bottom: 0.5rem; }

.guide-brand {
  position: absolute;
  left: 2.2rem;
  bottom: 1.8rem;
  font: 700 0.9rem/1 var(--display);
}

.guide-copy .eyebrow { color: #a9d2c3; }
.guide-copy h2 { max-width: 24ch; color: #fff; }

.guide-copy > p:not(.eyebrow) {
  max-width: 61ch;
  color: #d7e7e1;
}

.guide-form {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.guide-fields {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 0.9rem;
}

.field-group { margin-bottom: 0.9rem; }

.field-group label {
  display: block;
  margin-bottom: 0.35rem;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.field-group label span { color: #a9d2c3; font-weight: 500; }

.field-group input {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 0;
  padding: 0.65rem 0.75rem;
  background: #fff;
  color: var(--ink);
  font: inherit;
}

.field-group input:focus-visible,
.consent-row input:focus-visible {
  outline: 3px solid #8fc8ff;
  outline-offset: 3px;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 58ch;
  color: #d7e7e1;
  font-size: 0.84rem;
  cursor: pointer;
}

.consent-row input {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.18rem;
  accent-color: var(--rust);
}

.guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.guide-actions .button-primary {
  border-color: #fff;
  background: #fff;
  color: var(--teal-deep);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.guide-actions .button-primary:hover { background: var(--mint); color: var(--teal-deep); }

.guide-actions .button-secondary {
  border-color: rgba(255, 255, 255, 0.72);
  color: #fff;
}

.guide-actions .button-secondary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.guide-actions button:disabled { cursor: wait; opacity: 0.65; }

.form-note,
.form-status {
  margin-top: 0.75rem;
  color: #a9d2c3;
  font-size: 0.8rem;
}

.form-status { min-height: 1.6em; }
.form-status a { color: #fff; }

/* Pricing */
.pricing-section {
  background:
    linear-gradient(135deg, rgba(216, 235, 226, 0.78), transparent 54%),
    var(--paper);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.price-card {
  display: flex;
  flex-direction: column;
  min-height: 32rem;
  border: 1px solid var(--ink);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  background: var(--surface);
  box-shadow: 0.65rem 0.65rem 0 var(--paper-deep);
}

.price-card.featured {
  border-top: 0.45rem solid var(--rust);
  padding-top: calc(clamp(1.5rem, 4vw, 2.5rem) - 0.45rem);
}

.price-label {
  color: var(--teal);
  font: 800 0.72rem/1.4 var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.price-card h2,
.price-card h3 { font-size: clamp(1.7rem, 3vw, 2.4rem); }

.price-amount { margin: 1.8rem 0 0; color: var(--ink-soft); }
.price-amount span { color: var(--ink); font: 700 clamp(2.4rem, 6vw, 4.2rem)/1 var(--display); letter-spacing: -0.045em; }
.price-year { color: var(--ink-soft); }

.price-card ul {
  flex: 1;
  margin: 1.5rem 0 2rem;
  padding: 1.4rem 0 0 1.2rem;
  border-top: 1px solid var(--line);
}

.price-card li { margin-bottom: 0.65rem; }

/* Second pricing card: the switching-cost answer, which this buyer asks before
   price and which the page previously never addressed. */
.switch-card {
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.switch-card h3 { color: var(--ink); }

.switch-card ul.switch-list {
  flex: 1;
  margin: 1.4rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.switch-list li {
  margin: 0;
  padding: 0.95rem 0 0.95rem 2rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
}

.switch-list li:first-child { border-top: 0; }
.switch-list strong { color: var(--ink); }
.switch-list li::before { top: 0.95rem; }

.pricing-note { max-width: 62rem; margin-top: 2rem; color: var(--ink-soft); }
.pricing-page { min-height: 75vh; }
.pricing-page h1 { max-width: 13ch; }
.pricing-terms { max-width: 54rem; margin-top: 4rem; padding-top: 2rem; border-top: 2px solid var(--ink); }
.pricing-terms h2 { font-size: clamp(2rem, 4vw, 3.2rem); }

.next-update {
  background:
    linear-gradient(135deg, rgba(216, 235, 226, 0.74), rgba(244, 241, 233, 0) 55%),
    var(--paper);
}

.update-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(24rem, 1.15fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.update-details {
  border-top: 2px solid var(--ink);
  padding-top: 1.5rem;
}

.plain-list {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.plain-list li {
  position: relative;
  margin: 0;
  padding: 1rem 0 1rem 2rem;
  border-top: 1px solid var(--line);
}

.checks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1rem;
  color: var(--teal);
  font-weight: 800;
}

/* The published limits list. A neutral rule rather than a cross, because these
   are facts about scope, not failures. */
.limit-list { border-bottom: 1px solid var(--line); }

.limit-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.6rem;
  width: 1.1rem;
  height: 2px;
  background: var(--rust);
}

.limit-list strong { display: block; }
.limit-list li { color: var(--ink-soft); }
.limit-list strong { color: var(--ink); }

.principles .lede-small { margin-bottom: 1.1rem; }
.principles .lede-small:last-child { max-width: 52ch; font-size: 0.92rem; }

.connected-preview { background: var(--teal-deep); color: #fff; }
.connected-preview .eyebrow { color: #a8dfc7; }

.provider-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
}

.provider-grid > div > p:not(.eyebrow):not(.pilot-note) { max-width: 62ch; color: #d8e6e2; }
.provider-actions { margin-top: 1.8rem; }

.connected-preview .button-primary { border-color: var(--rust-soft); background: var(--rust-soft); color: var(--ink); }
.connected-preview .button-primary:hover { background: #fff1e8; color: var(--ink); }
.connected-preview .button-secondary { border-color: #a8bdb7; color: #fff; }
.connected-preview .button-secondary:hover { background: rgba(255,255,255,0.1); color: #fff; }

.pilot-note {
  max-width: 60ch;
  margin-top: 1.1rem;
  color: #b9cbc6;
  font-size: 0.78rem;
}

.boundary-card {
  border: 1px solid #9bb4ad;
  background: rgba(255, 255, 255, 0.06);
  padding: 1.6rem;
}

.boundary-label { color: #f2b68f; }
.boundary-card ul { margin: 1.25rem 0 0; padding-left: 1.2rem; }
.boundary-card li { margin: 0.8rem 0; color: #d8e6e2; }

/* Who is behind this */
.who-section { background: var(--surface); }
.who-section .lede-small { max-width: 52ch; }

/* Closing call to action. The App Store badge is demoted into its own column so
   it stops competing with the only action that starts a subscription. */
.closing-cta {
  border-bottom: 0;
  background: var(--rust-soft);
}

.closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.closing-cta h2 { max-width: 20ch; }
.closing-cta > .container > div > p { max-width: 54ch; }
.closing-cta .cta-row { margin-top: 1.75rem; }

.closing-app {
  padding-top: 0.35rem;
  border-top: 2px solid var(--ink);
}

.closing-app p { max-width: 34ch; color: var(--ink-soft); font-size: 0.92rem; }
.closing-app .eyebrow { margin-top: 1.1rem; }
.closing-app .store-badge { margin-top: 1.1rem; }
.store-badge-light { box-shadow: 0.65rem 0.65rem 0 rgba(16, 47, 41, 0.18); }

/* Footer */
.site-footer {
  padding: 3.5rem 0;
  background: var(--ink);
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem;
  align-items: start;
}

.site-footer .footer-wordmark { color: #fff; }
.footer-wordmark .brand-mark { background-color: var(--surface); color: var(--ink); }

.fine-print {
  max-width: 60ch;
  margin-top: 1.4rem;
  color: #bcd0ca;
  font-size: 0.78rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #fff;
}

/* Thin legal fallbacks */
.thin-page {
  width: min(100% - 2.5rem, 38rem);
  margin: 5rem auto;
  padding: 2rem;
  border: 1px solid var(--line);
  background: var(--surface);
}

.thin-page h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); }

/* Focus */
a:focus-visible,
.button:focus-visible,
.store-badge:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* Navigation collapses by dropping section links only. The sign-in link and the
   primary subscribe button survive to the narrowest width, because losing the
   subscribe button on a phone was the original defect on this page. */
@media (max-width: 1080px) {
  .nav-list { gap: 0.25rem 1rem; }
  .nav-link-item:nth-of-type(2),
  .nav-link-item:nth-of-type(3) { display: none; }
}

@media (max-width: 980px) {
  .nav-list { justify-content: flex-end; }
  .nav-link-item { display: none; }
  .hero-grid,
  .provider-grid,
  .guide-grid { grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.62fr); gap: 3rem; }
  .record-board { padding-left: 3.75rem; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 2rem, 72rem); }
  .header-row { align-items: center; min-height: 3.9rem; gap: 0.75rem; }
  .nav-list .button { padding-inline: 0.85rem; font-size: 0.92rem; white-space: nowrap; }
  .nav-signin a { white-space: nowrap; }
  .hero-grid,
  .release-grid,
  .split-heading,
  .update-grid,
  .provider-grid,
  .guide-grid,
  .closing-grid,
  .footer-grid,
  .pricing-grid { grid-template-columns: 1fr; }
  .hero::before { right: -10rem; width: 75vw; }
  .hero-copy { position: relative; z-index: 2; }
  .record-board { width: calc(100% - 1rem); margin-top: 1rem; }
  .guide-preview { min-height: 30rem; }
  .guide-fields { grid-template-columns: 1fr; gap: 0; }
  .release-grid > div:first-child { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); }
  .steps { grid-template-columns: 1fr; }
  .steps li { min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .steps li:last-child { border-bottom: 0; }
  .step-number { margin-bottom: 2rem; }
  .footer-links { grid-template-columns: repeat(3, auto); justify-content: start; }
}

@media (max-width: 430px) {
  /* Phone type was set for drama at the cost of the first screen. These sizes
     keep the headline, the price and the subscribe button on one screen even
     with the Safari toolbars showing. */
  h1 { font-size: clamp(1.95rem, 8.4vw, 2.55rem); }
  h2 { font-size: clamp(1.65rem, 6.4vw, 2.15rem); }
  .hero { padding-top: 1.9rem; padding-bottom: 2.4rem; }
  .lede { font-size: 1.02rem; margin-bottom: 1.4rem; }
  .record-board { padding: 1.2rem 1.15rem 1.3rem 3.45rem; box-shadow: 0.65rem 0.65rem 0 var(--paper-deep); }
  .record-board-head { display: block; }
  .record-state { margin-top: 0.25rem !important; }
  .record-fields > div { grid-template-columns: 1fr; gap: 0.15rem; }
  .guide-preview { min-height: 20rem; }
  .wordmark { font-size: 1.12rem; gap: 0.5rem; }
  .brand-mark { width: 1.35rem; height: 1.65rem; }
  .nav-list { gap: 0.6rem; }
  .nav-list .button { padding-inline: 0.7rem; font-size: 0.86rem; }
  .nav-signin a { font-size: 0.86rem; }
  .cta-row .button,
  .provider-actions .button { width: 100%; }
  .cta-row .button-large { box-shadow: none; }
  .footer-links { grid-template-columns: repeat(2, auto); }
}

@media (forced-colors: active) {
  .status-dot,
  .brand-mark::after { forced-color-adjust: none; }
  .record-board,
  .boundary-card { background: Canvas; }
}

/* ---------- audit readiness scan ---------- */

.scan-privacy {
  background: var(--mint);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}