/* Sent in Stone site styles.
   Colors come only from tokens.css, type only from type.css. No hex values here. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  overflow-wrap: break-word;
}
::selection { background: var(--slate-900); color: var(--slate-100); }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1 { font-size: var(--text-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-h3); line-height: var(--leading-h3); }

a { color: var(--slate-300); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--slate-100); }
a:active { color: var(--slate-500); }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--focus-halo);
  border-radius: 4px;
}
strong { font-weight: var(--weight-semibold); }
svg { display: block; }

.wrap { width: 100%; max-width: 68rem; margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 48rem) { .wrap { padding-inline: 2rem; } }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: 0.5rem 0.875rem; border-radius: 8px;
  background: var(--surface-raised); color: var(--text);
}
.skip:focus { top: 1rem; }

/* Mono label: eyebrows, step numbers, the tagline */
.label {
  font-family: var(--font-mono);
  font-variation-settings: var(--mono-axes);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.muted { color: var(--text-muted); }
.small { font-size: var(--text-small); line-height: var(--leading-small); }

/* Unresolved decisions stay loud until they are settled */
mark.confirm {
  background: var(--warning-bg); color: var(--warning);
  font-family: var(--font-mono); font-variation-settings: var(--mono-axes);
  font-size: var(--text-code);
  padding: 0.1em 0.4em; border-radius: 4px;
}

/* ---------- logo ----------
   The numbers below come from the lockup assembly in build.mjs: the cairn box is
   placed so the bottom of the lowest stone sits on the wordmark's baseline. */
.lockup { position: relative; aspect-ratio: 1350 / 214; }
.lockup__word { width: 100%; height: 100%; overflow: visible; }
.lockup__stone { fill: var(--text); }
.lockup__in { fill: var(--cairn-300); }
.lockup .cairn { position: absolute; left: -0.9421%; top: -8.122%; width: 12.621%; }

.cairn { position: relative; aspect-ratio: 593.47 / 852.54; }
.cairn svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 0 0; }
.cairn--flat path { fill: var(--cairn-300); }
.cairn-flap-fill { fill: var(--bg); }
.cairn.cairn-pending svg,
.cairn-will-play .cairn svg { opacity: 0; }
.cairn.cairn-live svg { will-change: transform, opacity; }

/* ---------- header and footer ---------- */
.site-header { padding-block: 1.25rem; }
.site-header__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.page-index .site-header__in { justify-content: flex-end; }
.brand { display: block; width: 13.5rem; max-width: 100%; border-radius: 6px; }
.brand:focus-visible { outline-offset: 6px; }

.nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.nav a {
  display: inline-block; padding-block: 0.375rem;
  font-size: var(--text-small); font-weight: var(--weight-medium);
  color: var(--text-muted); text-decoration: none;
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-color: var(--cairn-300); text-decoration-thickness: 2px; text-underline-offset: 0.5em; }

.site-footer { margin-top: 6rem; padding-block: 2.5rem 3rem; background: var(--bg-deep); }
.site-footer__in { display: grid; gap: 0.75rem; }
.site-footer .nav { margin-bottom: 0.75rem; }
.site-footer__line { font-size: var(--text-small); line-height: var(--leading-small); color: var(--text-muted); }

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.75rem; padding: 0.625rem 1.25rem;
  border: 1px solid transparent; border-radius: 10px;
  font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: 1.2;
  text-decoration: none;
}
.btn--primary { background: var(--cairn-300); color: var(--bg); }
.btn--primary:hover { background: var(--cairn-100); color: var(--bg); }
.btn--primary:active { background: var(--cairn-500); color: var(--bg); }
.btn--secondary { border-color: var(--border-strong); color: var(--text); }
.btn--secondary:hover { background: var(--surface); color: var(--text); }
.btn--secondary:active { background: var(--surface-raised); color: var(--text); }

.tag {
  display: inline-block; padding: 0.2rem 0.625rem; border-radius: 999px;
  background: var(--clay-900); color: var(--clay-300);
  font-family: var(--font-mono); font-variation-settings: var(--mono-axes);
  font-size: var(--text-label); line-height: var(--leading-label);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
}

/* ---------- sections ---------- */
.section { padding-block: 4rem; }
@media (min-width: 48rem) { .section { padding-block: 5.5rem; } }
.section__head { max-width: 44rem; margin-bottom: 2.5rem; }
.section__head .label { display: block; margin-bottom: 0.75rem; }
.section__head p { margin-top: 1rem; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-muted); }
.prose-lg { max-width: 44rem; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.prose-lg p + p { margin-top: 1rem; }

/* Light section: text and accents use the dark and 700 steps */
.section--light { background: var(--light-surface); color: var(--bg); }
.section--light .label { color: var(--clay-700); }
.section--light .section__head p { color: var(--bg); }
.section--light a { color: var(--slate-700); }
.section--light ::selection { background: var(--slate-100); color: var(--bg); }
.section--light :focus-visible { outline-color: var(--slate-700); box-shadow: 0 0 0 5px var(--slate-100); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: 3.5rem 4.5rem; }
@media (min-width: 48rem) { .hero { padding-block: 5rem 6.5rem; } }
.hero .wrap { position: relative; }
/* Headroom above and to the sides is left free for the stones to fall in */
.lockup--hero { width: min(100%, 47rem); margin-left: 0.5%; }
.tagline {
  margin-top: 1.5rem;
  font-family: var(--font-mono); font-variation-settings: var(--mono-axes-tagline);
  font-size: var(--text-body-lg); line-height: var(--leading-body-lg);
  color: var(--cairn-300);
}
.hero h1 { margin-top: 3rem; max-width: 20ch; font-size: var(--text-display); line-height: var(--leading-display); }
.hero__lead { margin-top: 1.5rem; max-width: 40rem; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-muted); }
.hero .actions { margin-top: 2rem; }
.hero__launch { margin-top: 1.5rem; }

/* Decorative stones behind the hero and the closing section (parallax, see below) */
.ghost { position: absolute; z-index: 0; pointer-events: none; }
.ghost path { fill: var(--surface); }
.hero .ghost { right: -6rem; top: 3rem; width: 26rem; }
.closing .ghost { left: -5rem; bottom: -6rem; width: 20rem; }
@media (max-width: 47.99rem) { .ghost { display: none; } }

/* ---------- home: steps, differences, privacy, pricing teaser ---------- */
.steps { list-style: none; padding: 0; display: grid; gap: 1.25rem; counter-reset: step; }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.card { padding: 1.5rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.card h3 { margin-block: 0.75rem 0.5rem; }
.card p { color: var(--text-muted); }
.card .label { color: var(--cairn-300); }

.diffs { list-style: none; padding: 0; display: grid; gap: 0; max-width: 52rem; counter-reset: diff; }
.diffs li {
  counter-increment: diff;
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem;
  padding-block: 1.125rem; border-top: 1px solid var(--border-input-light);
  font-size: var(--text-body-lg); line-height: var(--leading-body-lg);
}
.diffs li:last-child { border-bottom: 1px solid var(--border-input-light); }
.diffs li::before {
  content: counter(diff, decimal-leading-zero);
  font-family: var(--font-mono); font-variation-settings: var(--mono-axes);
  font-size: var(--text-code); line-height: var(--leading-code);
  color: var(--clay-700); padding-top: 0.3em;
}
.diffs__note { margin-top: 2rem; max-width: 44rem; }

.points { list-style: none; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .points { grid-template-columns: repeat(3, 1fr); } }
.points li { padding-top: 1.25rem; border-top: 2px solid var(--border-strong); }
.points h3 { margin-bottom: 0.5rem; }
.points p { color: var(--text-muted); }
.after { margin-top: 2rem; }

.plans { display: grid; gap: 1.25rem; max-width: 46rem; }
@media (min-width: 40rem) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { position: relative; padding: 1.75rem 1.5rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.plan--featured { border-color: var(--clay-500); }
.plan h2, .plan h3 { font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: 0; }
.plan .tag { position: absolute; top: 1.75rem; right: 1.5rem; }
.plan__price { margin-top: 1rem; font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.plan__price span { font-size: var(--text-body); font-weight: var(--weight-regular); letter-spacing: 0; color: var(--text-muted); }
.plan__note { margin-top: 0.5rem; color: var(--text-muted); font-size: var(--text-small); line-height: var(--leading-small); }

.guarantee {
  display: flex; gap: 0.875rem; align-items: flex-start;
  max-width: 46rem; margin-top: 1.25rem; padding: 1.25rem 1.5rem;
  border: 1px solid var(--border-strong); border-radius: 14px;
}
.guarantee svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; fill: none; stroke: var(--cairn-300); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.guarantee strong { display: block; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.guarantee span { color: var(--text-muted); }

.closing { position: relative; overflow: hidden; }
.closing .wrap { position: relative; }

/* ---------- inner pages ---------- */
.page-head { padding-block: 3rem 2rem; }
.page-head .label { display: block; margin-bottom: 0.75rem; }
.page-head p { margin-top: 1rem; max-width: 44rem; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); color: var(--text-muted); }
.page-body { padding-bottom: 2rem; }

.prose { max-width: 44rem; }
.prose > * + * { margin-top: 1rem; }
.prose h2 { margin-top: 3rem; font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: 0; }
.prose h3 { margin-top: 2rem; font-size: var(--text-body-lg); line-height: var(--leading-body-lg); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: 0.5rem; }
.prose li::marker { color: var(--text-muted); }
.prose address { font-style: normal; }
.prose code { color: var(--text-muted); overflow-wrap: anywhere; }
.prose .updated { color: var(--text-muted); font-size: var(--text-small); line-height: var(--leading-small); }
.prose .quote { padding-left: 1rem; border-left: 2px solid var(--border-strong); }

.checks { list-style: none; padding: 0; display: grid; gap: 0.75rem; max-width: 44rem; }
.checks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.625rem; }
.checks li::before { content: "\2713"; color: var(--cairn-300); font-weight: var(--weight-semibold); }

.faq { max-width: 44rem; }
.faq h3 { margin-top: 2rem; }
.faq h3 + p { margin-top: 0.5rem; }
.faq p + p, .faq ol { margin-top: 0.75rem; }
.faq p, .faq li { color: var(--text-muted); }
.faq ol { padding-left: 1.25rem; }
.faq li + li { margin-top: 0.375rem; }

/* ---------- motion (second pass) ----------
   Only opacity and transform. Nothing here runs with "reduce motion" on,
   and nothing hides content unless the script has confirmed it will reveal it. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0; transform: translateY(1rem);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
  .js-reveal .steps [data-reveal]:nth-child(2),
  .js-reveal .points [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
  .js-reveal .steps [data-reveal]:nth-child(3),
  .js-reveal .points [data-reveal]:nth-child(3) { transition-delay: 0.16s; }

  /* Subtle parallax: the faint stones drift a little slower than the page.
     Tied to the normal scroll position; the scroll itself is never altered. */
  @supports (animation-timeline: view()) {
    .ghost { animation: ghost-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .hero .ghost { animation-name: ghost-drift-hero; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes ghost-drift { from { transform: translateY(3.5rem); } to { transform: translateY(-3.5rem); } }
@keyframes ghost-drift-hero { from { transform: translateY(0); } to { transform: translateY(7rem); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media print {
  .site-header .nav, .site-footer .nav, .ghost, .skip { display: none; }
  body { background: none; color: inherit; }
}

/* Inner pages: tighter rhythm between sections than the homepage */
main > .wrap > .section { padding-block: 2.5rem; }