:root {
  --paper: #fbfbf9;
  --ink: #16160f;
  --ink-soft: #6b6b60;
  --hair: #e4e4dc;
  --focus: #16160f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* --- layout --- */
.page {
  max-width: 35rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}

/* --- wordmark --- */
.mark {
  font-family: Baskerville, "Baskerville Old Face", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0;
  display: inline-flex;
  align-items: baseline;
  text-decoration: none;
  color: var(--ink);
}
.mark .caret {
  display: inline-block;
  width: max(2px, 0.055em);
  height: 1.05em;
  background: var(--ink);
  margin-left: 0.22em;
  transform: translateY(0.18em);
  animation: blink 1.15s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

header { margin-bottom: 4rem; display: flex; justify-content: space-between; align-items: baseline; }
header nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.9rem;
  margin-left: 1.5rem;
}
header nav a.current { color: var(--ink); font-weight: 600; }

/* --- prose --- */
h1 {
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.8;
  letter-spacing: -0.005em;
  margin-bottom: 2.5rem;
}
p { margin-bottom: 2rem; }
.soft { color: var(--ink-soft); }

/* underline micro-animation on links */
.u {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--ink), var(--ink));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size 320ms cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: 2px;
}
.u:hover { background-size: 0% 1px; background-position: 100% 100%; }
.u.soft-link { color: var(--ink-soft); }

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.cta .arrow { transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1); }
.cta:hover .arrow { transform: translateX(6px); }

/* staggered reveal */
.reveal > * {
  opacity: 0;
  transform: translateY(10px);
  animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.reveal > *:nth-child(1)  { animation-delay: 60ms; }
.reveal > *:nth-child(2)  { animation-delay: 160ms; }
.reveal > *:nth-child(3)  { animation-delay: 260ms; }
.reveal > *:nth-child(4)  { animation-delay: 360ms; }
.reveal > *:nth-child(5)  { animation-delay: 460ms; }
.reveal > *:nth-child(6)  { animation-delay: 560ms; }
.reveal > *:nth-child(7)  { animation-delay: 660ms; }
.reveal > *:nth-child(8)  { animation-delay: 760ms; }
.reveal > *:nth-child(9)  { animation-delay: 860ms; }
.reveal > *:nth-child(10) { animation-delay: 960ms; }
.reveal > *:nth-child(n+11) { animation-delay: 1060ms; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* --- values list --- */
.values p { margin-bottom: 1.6rem; }
.values .rule {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 2.5rem 0;
}

/* --- legal pages --- */
.legal h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 2.5rem 0 1rem;
}
.legal p { margin-bottom: 1.4rem; }
.legal .updated { font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 2.5rem; }

/* --- start page --- */
.start-wrap {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 24rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.start-w {
  font-size: 3.4rem;
  letter-spacing: 0;
  margin-bottom: 2.5rem;
}
.counter {
  font-family: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.counter-label {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 3rem;
}

.field, select {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.85rem 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color 200ms ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.field:hover, select:hover { border-color: #c9c9bf; }

.start-btn {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.9rem;
  border: none;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
}
.start-btn:hover { opacity: 0.9; }
.start-btn:active { transform: scale(0.98); }
/* The invite page's CTA is a link, not a form submit, but should look identical to the real start button. */
a.start-btn { display: block; text-align: center; text-decoration: none; }

.disclaimer {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-top: 1.5rem;
}
.disclaimer a { color: var(--ink-soft); }

footer {
  margin-top: 5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hair);
  font-size: 0.85rem;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
footer a { color: var(--ink-soft); text-decoration: none; }
footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .reveal > * { animation: none; opacity: 1; transform: none; }
  .mark .caret { animation: none; }
  * { transition: none !important; }
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  .page { padding-top: 3rem; }
}

#email-step,
#code-step {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Controls, forms and the signed-in surface.

   Everything below reuses the tokens already defined at the top of this file:
   paper, ink, ink-soft, hairline, the 10px radius, and the single primary
   button. No new colour, radius or spacing scale is introduced here
   (DESIGN_SYSTEM.md, "What not to do").
   -------------------------------------------------------------------------- */

.field {
  display: block;
  width: 100%;
  margin-bottom: 0.75rem;
}
textarea.field {
  line-height: 1.7;
  resize: vertical;
  min-height: 6rem;
}
.field::placeholder { color: var(--ink-soft); opacity: 0.7; }

.field-row {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  align-items: center;
}
.field-row .field { flex: 1; min-width: 0; }
.field-row .suffix {
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: nowrap;
  padding-bottom: 0.75rem;
}

/* Live or counted values use tabular monospace, matching the counter. */
.code-field, .num {
  font-family: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.code-field {
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}
.sent-to { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 1rem; }

/* A question in the onboarding conversation. Not an eyebrow label: it is the
   actual prompt the user answers. */
.q {
  display: block;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.step {
  border: 0;
  padding: 0;
  margin: 0 0 3rem;
}

.choices { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 1rem;
  line-height: 1.7;
  cursor: pointer;
}
.choice input { margin-top: 0.55rem; accent-color: var(--ink); }

/* The range input is styled explicitly rather than left to accent-color.
   The native thumb renders as little more than a hairline in several
   browsers, which gives no visible handle to grab. Track and thumb both use
   existing tokens: hairline track, ink fill, white control face with a
   hairline border and the same 10px control radius as every other control,
   so the handle reads as a small tile rather than a new shape. */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 1rem 0 0.9rem;
  background: transparent;
  cursor: pointer;
}

/* Track. --fill is the percentage travelled, set by app.js on input, so the
   selected portion is ink and the rest is hairline. Without it the whole bar
   is one pale colour and there is no way to see where the handle sits in
   relation to the range. */
.slider {
  --fill: 50%;
}
.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    var(--ink) 0%,
    var(--ink) var(--fill),
    var(--hair) var(--fill),
    var(--hair) 100%
  );
}
.slider::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--hair);
}
.slider::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--ink);
}

/* Thumb. Deliberately generous: it is dragged with a thumb on a phone. */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 30px;
  height: 30px;
  margin-top: -12px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 15, 0.12);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease;
}
.slider::-moz-range-thumb {
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 22, 15, 0.12);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease;
}

.slider:hover::-webkit-slider-thumb { border-color: #c9c9bf; }
.slider:hover::-moz-range-thumb { border-color: #c9c9bf; }
.slider:active::-webkit-slider-thumb { transform: scale(0.96); }
.slider:active::-moz-range-thumb { transform: scale(0.96); }

.slider:focus { outline: none; }
.slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.gauge { font-size: 0.95rem; color: var(--ink-soft); margin: 0.8rem 0 0; }

/* Secondary action. Deliberately quieter than .start-btn so nothing competes
   with the single primary button style. */
.ghost-btn {
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), border-color 200ms ease;
}
.ghost-btn:hover:not(:disabled) { border-color: #c9c9bf; }
.ghost-btn:active:not(:disabled) { transform: scale(0.98); }
.ghost-btn:disabled { color: var(--ink-soft); cursor: default; }

.channels { display: flex; flex-direction: column; gap: 0.75rem; margin: 2rem 0; }
.channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
}
#qr { margin: 1.5rem 0; }
#qr img { border-radius: 10px; }

main .rule {
  border: 0;
  border-top: 1px solid var(--hair);
  margin: 3rem 0;
}

/* Secure cards (SPEC 7.3). A constrained-width instance of this same system,
   not a separate design language. */
.card-wrap {
  max-width: 24rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}
.card-wrap .mark { display: inline-flex; margin-bottom: 3rem; }
.card-wrap h1 { font-size: 1.2rem; margin-bottom: 1.25rem; }
.card-wrap p { margin-bottom: 2rem; }
.card-wrap form { margin-bottom: 0; }

/* A remembered note, with the means to forget it. Same hairline card as a
   channel row, so the two read as the same kind of thing. */
.memory {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  line-height: 1.7;
}
.memory span { flex: 1; min-width: 0; }
.memory .ghost-btn { flex: 0 0 auto; }

/* Settings stacks several questions; give each one room without the
   fieldset spacing the onboarding form uses. */
#settings .q:not(:first-child),
main > .q { margin-top: 2.5rem; }

/* Selects share the control styling, with room for the native chevron so a
   long country name never runs underneath it. */
select.field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.field.dial { flex: 0 0 8.5rem; }

/* --- Tasks and Decisions (SPEC 10.5/10.6) ---
   Same hairline card as a channel row: one visual family across the
   product, not a new component set for this surface. */
.task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 200ms ease;
}
.task-row:hover { border-color: #c9c9bf; }
.task-row .task-title { font-weight: 600; }
.task-row .task-state {
  font-family: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.task-detail-back { margin-bottom: 1.5rem; display: inline-block; }

.option-card {
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: #fff;
}
.option-card .price {
  font-family: "SF Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.option-card .badge {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.decision-actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.decision-actions .field { flex: 1 1 100%; margin-bottom: 0.75rem; }

/* --------------------------------------------------------------------------
   Capability index (/what-it-can-do).

   A dense, scannable list of example requests grouped by area, plus an FAQ.
   Reuses the same tokens as everything above: hairline rules, ink-soft for
   secondary text, the 10px control radius and the single ink button. The
   only page-specific addition is the docked call to action.
   -------------------------------------------------------------------------- */
.uses { padding-bottom: 2rem; }
.uses section { margin-bottom: 2.25rem; }
.uses h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.4rem;
}
/* The one H2 outside a section: a keyword-rich subtitle directly under the
   H1, styled like the .lead intro lines rather than a category heading, so
   it reads as supporting text, not a 15th section. */
.uses h2.subtitle {
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-soft);
  margin: -0.5rem 0 1rem;
}
.uses .lead { color: var(--ink-soft); margin-bottom: 1rem; }
.uses ul { list-style: none; margin: 0; padding: 0; }
.uses li {
  padding: 0.45rem 0 0.45rem 1rem;
  margin-bottom: 0.4rem;
  border-left: 1px solid var(--hair);
  line-height: 1.65;
}
.uses .faq { margin-top: 3.5rem; }
.uses .faq h2 { font-size: 1.2rem; margin-bottom: 1.5rem; }
.uses .qa { margin-bottom: 1.6rem; }
.uses .qa .q { display: block; font-weight: 600; margin-bottom: 0.3rem; }
.uses .qa p { margin: 0; color: var(--ink-soft); }

/* Docked call to action. Same fill, weight and radius as the Start button, so
   the two read as one control; wider and more generous padding here, and
   pinned to the bottom of the viewport for the length of this long page. The
   paper backing and hairline keep it legible over the list scrolling behind. */
.cta-dock {
  position: sticky;
  bottom: 0;
  margin-top: 3rem;
  padding: 1rem 0 1.1rem;
  background: var(--paper);
  border-top: 1px solid var(--hair);
}
.cta-dock a {
  display: block;
  width: 100%;
  text-align: center;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 1.1rem 2.5rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.cta-dock a:hover { opacity: 0.9; }
.cta-dock a:active { transform: scale(0.98); }