/* Continuity website. Tokens from SUPER-SIMPLE-DESIGN.md.
   The site wears the Ink colorway: warm cream on ink. Body, quiet, and rule
   tones are the cream flattened over ink at the website opacities
   (74, 48, 55, 16 percent) so nothing is composited at render.
   Product specimens wear the Cream colorway: ink on paper, in the same
   flattened tones the app uses for its writing. */

:root {
  --ink: #151713;
  --cream: #F1EADC;
  --fg-body: #B8B3A8;
  --fg-quiet: #7F7C73;
  --rule-strong: #8E8B82;
  --rule-subtle: #383933;

  --paper: #FCFCFD;
  --paper-ink: #151713;
  --paper-writing: #515350;
  --paper-quiet: #8D8E8D;
  --paper-rule: #D7D7D8;

  --pad: clamp(28px, 5vw, 72px);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html {
  background: var(--ink);
  min-height: 100%;
}

body {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.62;
  margin: 0;
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 4px;
}

.skip-link {
  left: 16px;
  padding: 10px 14px;
  position: fixed;
  top: -60px;
  z-index: 10;
}
.skip-link:focus { background: var(--ink); top: 16px; }

.tm {
  font-size: 0.58em;
  line-height: 0;
  position: relative;
  top: -0.28em;
}

/* Layers that slide in sideways are clipped at the viewport, and their
   travel never counts toward the page's scrollable height. */
.page-wrap { overflow: clip; }

/* ---------- chrome: one header and one footer on every route ---------- */

.shell {
  margin: 0 auto;
  padding: var(--pad);
  width: min(100%, 1120px);
}

.site-header,
.site-footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  justify-content: space-between;
  width: 100%;
}
.site-home {
  align-items: center;
  display: inline-flex;
  font-kerning: none;
  font-size: 13px;
  font-weight: 600;
  gap: 5px;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-home svg {
  color: var(--cream);
  height: 17px;
  width: 17px;
}
.site-home span {
  color: var(--fg-quiet);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-left: 0;
  text-transform: none;
}
.site-home .tm { margin-left: -1px; top: -0.2em; }
.site-nav {
  color: var(--fg-quiet);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px 22px;
}
.site-nav a { transition: color 160ms ease; }
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--cream); }
.site-footer { align-items: baseline; }
.site-footer {
  border-top: 1px solid var(--rule-subtle);
  margin-top: clamp(72px, 10vh, 128px);
  padding-top: 24px;
}
.site-copyright,
.site-credits {
  color: var(--fg-quiet);
  flex-basis: 100%;
  font-size: 12px;
}
.site-credits { margin-top: -6px; }

/* ---------- landing: hero lockup ---------- */

.hero {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: clamp(72px, 12vh, 150px) 0 clamp(56px, 8vh, 96px);
  text-align: center;
}
.hero-mark {
  color: var(--cream);
  height: clamp(64px, 9vw, 112px);
  width: clamp(64px, 9vw, 112px);
}
.hero-wordmark {
  font-kerning: none;
  font-size: clamp(40px, 8.5vw, 120px);
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 0.95;
  margin-top: clamp(24px, 3vw, 36px);
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-byline {
  font-size: clamp(14px, 1.4vw, 17px);
  margin-top: 4px;
}
.statement {
  font-size: clamp(34px, 5.3vw, 76px);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.98;
  margin-top: clamp(80px, 14vh, 150px);
}
/* The clauses never break internally, so the line only comes apart at the
   comma or between sentences. */
.statement span,
.lede span,
.legal-intro span,
.nb { white-space: nowrap; }
.legal-intro { text-wrap: balance; }
.lede {
  color: var(--fg-body);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin-top: 26px;
  max-width: 36em;
  text-align: justify;
  text-align-last: center;
}
.hero .store-button { margin-top: clamp(34px, 5vh, 52px); }

.store-button {
  align-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: 11px;
  display: inline-flex;
  gap: 11px;
  min-height: 60px;
  padding: 9px 18px 9px 15px;
  text-align: left;
  transition: border-color 160ms ease;
}
.store-button:hover,
.store-button:focus-visible { border-color: var(--cream); }
.apple-glyph { height: 30px; width: 30px; }
.store-label small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.05;
}
.store-label strong {
  display: block;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
}
.store-button-small {
  border-radius: 8px;
  gap: 8px;
  min-height: 38px;
  padding: 5px 12px 5px 10px;
}
.store-button-small .apple-glyph { height: 20px; width: 20px; }
.store-button-small .store-label small { font-size: 9px; }
.store-button-small .store-label strong { font-size: 14px; }

/* ---------- product specimens: the app, rendered large ---------- */

.specimen {
  background: var(--paper);
  border-radius: 10px;
  color: var(--paper-ink);
  font-family: var(--serif);
  margin: clamp(48px, 7vh, 80px) auto 0;
  max-width: 780px;
  padding: clamp(24px, 4vw, 48px);
  text-align: left;
  width: 100%;
}
.specimen figcaption {
  color: var(--paper-quiet);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
  text-transform: uppercase;
}
.page + .page {
  border-top: 1px solid var(--paper-rule);
  margin-top: 26px;
  padding-top: 24px;
}
.page-title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;
}
.page-body {
  color: var(--paper-writing);
  font-size: 18px;
  line-height: 1.5;
}
.page.prior .page-body { font-size: 17px; }

/* Screens of the app, flat and large. Never in a device mockup. */
.shots {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 2.5vw, 32px);
  justify-content: center;
  margin: clamp(40px, 6vh, 64px) 0 0;
}
.shot { margin: 0; }
.shot img {
  border-radius: 10px;
  height: min(40vh, 520px);
  width: auto;
}
/* The vault's locked screen, drawn from the app's own composition: mark,
   wordmark, one line, the device button, the PIN dots, the recovery link. */
.gate {
  align-items: center;
  aspect-ratio: 1206 / 2417;
  background: var(--paper);
  border-radius: 10px;
  color: var(--paper-ink);
  display: flex;
  flex-direction: column;
  font-family: var(--sans);
  gap: 12px;
  height: min(56vh, 600px);
  justify-content: center;
  padding: 22px;
  text-align: center;
}
.gate > * { flex: none; letter-spacing: 0; margin: 0; max-width: 100%; text-align: center; }
.gate-mark { height: 44px; width: 44px; }
.gate-wordmark {
  font-kerning: none;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}
.gate-message { color: var(--paper-quiet); font-size: 11px; line-height: 1.3; }
.gate-button {
  align-items: center;
  background: var(--paper-ink);
  border-radius: 999px;
  color: var(--paper);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  gap: 7px;
  justify-content: center;
  margin-top: 6px;
  min-height: 36px;
  padding: 0 18px;
  width: 100%;
}
.gate-button svg { height: 16px; width: 16px; }
.gate-pin { display: flex; gap: 8px; margin-top: 8px; }
.gate-pin i {
  border: 1px solid var(--paper-quiet);
  border-radius: 50%;
  display: block;
  height: 9px;
  width: 9px;
}
.gate-caption { color: var(--paper-rule); font-size: 9px; }
.gate-caption { color: #B7B7B7; }
.gate-footnote { color: var(--paper-quiet); font-size: 10px; margin-top: 8px; }

.shot figcaption {
  color: var(--fg-quiet);
  font-size: 14px;
  line-height: 1.45;
  margin-top: 14px;
  text-wrap: pretty;
}

.atlas {
  display: grid;
  gap: 24px 32px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.atlas h3 {
  color: var(--paper-quiet);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.atlas ul {
  font-size: 17px;
  line-height: 1.55;
  list-style: none;
  margin: 0;
  padding: 0;
}
.atlas-line {
  border-top: 1px solid var(--paper-rule);
  color: var(--paper-writing);
  font-size: 17px;
  line-height: 1.5;
  margin-top: 20px;
  padding-top: 18px;
}
.atlas-line strong { color: var(--paper-ink); font-weight: 600; }

/* ---------- landing: the sections, one to a screen ---------- */

.stories { border-top: 1px solid var(--rule-subtle); }
.story {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: clamp(48px, 8vh, 96px) 0;
  text-align: center;
}
.story h2 {
  font-size: clamp(36px, 5.2vw, 76px);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.story > p {
  color: var(--fg-body);
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.45;
  margin-top: 22px;
  max-width: 36em;
  text-align: justify;
  text-align-last: center;
}
.story .specimen { margin-top: clamp(32px, 5vh, 56px); padding: clamp(20px, 3vw, 36px); }
.story .specimen figcaption { margin-bottom: 16px; }

.hero
/* ---------- legal pages: the Super Simple legal system ---------- */

.legal-header { padding: 2vh 0 clamp(64px, 10vw, 140px); }
.legal-header .site-header { margin-bottom: clamp(72px, 12vw, 160px); }
.legal-eyebrow,
.legal-date {
  color: var(--fg-quiet);
  font-size: 13px;
  margin-bottom: 16px;
}
.legal-header h1 {
  font-size: clamp(56px, 10vw, 150px);
  font-weight: 700;
  letter-spacing: -0.075em;
  line-height: 0.86;
  max-width: 900px;
}
.legal-intro {
  font-size: clamp(22px, 3vw, 38px);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 48px 0 20px;
  max-width: 760px;
  text-wrap: pretty;
}
.legal-date { margin-top: 24px; }
.legal-content { margin-left: auto; width: min(100%, 760px); }
.legal-content section {
  border-top: 1px solid var(--rule-subtle);
  padding: 44px 0;
}
.legal-content h2 {
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 24px;
}
.legal-content h3 { font-size: 18px; margin: 30px 0 10px; }
.legal-content p,
.legal-content li,
.legal-content address {
  color: var(--fg-body);
  font-size: 16px;
  line-height: 1.62;
}
.legal-content p { margin-bottom: 18px; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content ul,
.legal-content ol { margin: 0 0 22px; padding-left: 1.35em; }
.legal-content li + li { margin-top: 10px; }
.legal-content a {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.legal-content address { font-style: normal; margin-top: 26px; }
.legal-content kbd {
  font-family: inherit;
  font-size: inherit;
}

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .shell { padding: 24px 20px; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
  .site-header { flex-wrap: nowrap; gap: 12px; }
  .store-button-small .store-label small { display: none; }
  .store-button-small { min-height: 34px; padding: 4px 10px 4px 9px; }
  .hero { padding-top: 48px; }
  .hero-wordmark { font-size: clamp(34px, 11vw, 60px); }
  .statement { margin-top: clamp(56px, 10vh, 96px); }
  .hero .specimen { margin-top: clamp(40px, 6vh, 64px); }
  /* On a phone the clauses are wider than the screen, so they wrap like
     prose again; balance keeps the last line from being a single word. */
  .lede span,
  .legal-intro span { white-space: normal; }
  .story { padding: 56px 0; }
  .story h2 { font-size: clamp(36px, 11vw, 48px); }
  .story > p { font-size: 17px; margin-top: 18px; }
  .story .specimen { margin-top: 28px; padding: 20px; }
  .atlas { gap: 18px 20px; grid-template-columns: 1fr 1fr; }
  .atlas ul { font-size: 16px; line-height: 1.5; }
  .atlas-line { font-size: 16px; margin-top: 16px; padding-top: 14px; }
  /* The two screens fan out like a deck instead of sitting side by side. */
  .shots {
    display: block;
    height: min(46vh, 420px);
    margin: 32px auto 0;
    position: relative;
    width: min(100%, 320px);
  }
  .shot {
    left: 50%;
    position: absolute;
    top: 0;
  }
  .shot img { height: min(46vh, 420px); width: auto; }
  .shot:first-child { transform: translateX(-50%) translateX(-11%) rotate(-7deg); transform-origin: bottom center; }
  .shot:last-child { transform: translateX(-50%) translateX(11%) rotate(7deg); transform-origin: bottom center; }
  .shot figcaption { display: none; }
  .shots.single { display: flex; height: auto; justify-content: center; position: static; width: auto; }
  .shots.single .shot { position: static; transform: none; }
  .gate { height: min(60vh, 520px); }
  .hero.closing { padding-top: 56px; }
  .legal-header { padding-bottom: 80px; }
  .legal-header .site-header { margin-bottom: 100px; }
  .legal-header h1 { font-size: clamp(52px, 17vw, 88px); }
  .legal-content section { padding: 36px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav a,
  .store-button { transition: none; }
}