/* ─────────────────────────────────────────────────────────────
   toshi · waitlist site
   Palette: kinari #F5F0E8 · sumi #1A1A1A · kuri #8B6F47
   Origin: colombia #1B4332 · tanzania #6B2737 · bali #1B3A5C
   Type: DM Sans (display + body) · JetBrains Mono (meta)
   ───────────────────────────────────────────────────────────── */

:root {
  --kinari: #F5F0E8;
  --kinari-soft: #EFE8DC;
  --sumi: #1A1A1A;
  --sumi-70: rgba(26, 26, 26, 0.72);
  --sumi-55: rgba(26, 26, 26, 0.62);
  --sumi-line: rgba(26, 26, 26, 0.10);
  --sumi-faint: rgba(26, 26, 26, 0.62);
  --kuri: #8B6F47;
  --kuri-text: #6E5636;        /* darkened for AA on kinari */
  --colombia: #1B4332;
  --tanzania: #6B2737;
  --bali: #1B3A5C;
  --kinari-on-dark: rgba(245, 240, 232, 0.92);
  --kinari-on-dark-70: rgba(245, 240, 232, 0.75);
  --kinari-on-dark-line: rgba(245, 240, 232, 0.16);
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --measure: 34rem;
  --pad-x: clamp(1.15rem, 3vw, 2.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--kinari);
  color: var(--sumi);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--sumi); color: var(--kinari); }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

/* Focus visibility, WCAG 2.4.7 */
:focus-visible {
  outline: 2px solid var(--sumi);
  outline-offset: 3px;
}
.on-dark :focus-visible,
.section-dark :focus-visible {
  outline-color: var(--kinari);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sumi);
  color: var(--kinari);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.skip-link:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── Layout primitives ─────────────────────────────────────── */

.wrap {
  max-width: 86rem;
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kuri-text);
  margin-bottom: 1.35rem;
}

.section-dark .eyebrow { color: var(--kinari-on-dark-70); }

/* ── Nav ───────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 240, 232, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.is-scrolled { border-bottom-color: var(--sumi-line); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.35rem;
  padding-bottom: 1.35rem;
}

.nav-logo {
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.nav-cta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid rgba(26, 26, 26, 0.3);
  padding: 0.7rem 1.3rem;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.nav-cta:hover {
  background: var(--sumi);
  color: var(--kinari);
  border-color: var(--sumi);
}

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  padding-top: clamp(2.25rem, 5vh, 4rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 4fr 6fr; gap: 2.5rem; }
}

.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.1rem;
}

.hero-status p,
.hero-kanji {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kuri-text);
}

.hero-kanji { margin-bottom: 1.9rem; }

.hero h1 {
  font-size: clamp(2.5rem, 4.6vw, 4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.025em;
  margin-bottom: 1.4rem;
}

.hero-sub {
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--sumi-70);
  max-width: var(--measure);
  margin-bottom: 1.8rem;
}

.offer-chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--tanzania);
  border: 1px solid var(--tanzania);
  padding: 0.55rem 1rem;
  margin-bottom: 1.5rem;
}

.section-dark .offer-chip {
  color: #FFFFFF;
  background: var(--tanzania);
  border-color: var(--tanzania);
}

/* ── Waitlist form ─────────────────────────────────────────── */

.waitlist-form { max-width: 30rem; }

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sumi-55);
  margin-bottom: 0.45rem;
}

.section-dark .form-field label { color: var(--kinari-on-dark-70); }

.form-field input[type="email"],
.form-field input[type="text"],
.form-field select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--sumi);
  background: transparent;
  border: 1px solid rgba(26, 26, 26, 0.28);
  border-radius: 0;
  padding: 0.85rem 1rem;
  transition: border-color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231A1A1A' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.4rem;
  cursor: pointer;
}

.form-field input:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--sumi);
}

.section-dark .form-field input[type="email"],
.section-dark .form-field input[type="text"],
.section-dark .form-field select {
  color: var(--kinari);
  border-color: rgba(245, 240, 232, 0.35);
  background-color: transparent;
}
.section-dark .form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23F5F0E8' stroke-width='1.4'/%3E%3C/svg%3E");
}
.section-dark .form-field select option {
  color: var(--sumi);
  background: var(--kinari);
}
.section-dark .form-field input:focus,
.section-dark .form-field select:focus {
  border-color: var(--kinari);
}

.form-field input::placeholder { color: var(--sumi-faint); }
.section-dark .form-field input::placeholder { color: rgba(245, 240, 232, 0.55); }

.form-submit {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--sumi);
  color: var(--kinari);
  border: 1px solid var(--sumi);
  padding: 0.95rem 1.5rem;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s var(--ease-out);
  width: 100%;
}
.form-submit:hover { opacity: 0.88; }
.form-submit:active { transform: scale(0.99); }
.form-submit[disabled] { opacity: 0.55; cursor: wait; }

.section-dark .form-submit {
  background: var(--kinari);
  color: var(--sumi);
  border-color: var(--kinari);
}

.form-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--sumi-55);
  margin-top: 0.9rem;
}
.section-dark .form-note { color: var(--kinari-on-dark-70); }

.form-status {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  margin-top: 1rem;
}
.form-status[data-state="success"] { color: var(--colombia); }
.section-dark .form-status[data-state="success"] { color: #C4D9B8; }
.form-status[data-state="error"] { color: #8C2B2B; }
.section-dark .form-status[data-state="error"] { color: #E8C4C4; }

/* ── Hero packet carousel ──────────────────────────────────
   Three packets in 3D: one front and centre, two angled back
   on either side. Arrows rotate the stack. */

.carousel {
  position: relative;
  height: clamp(17rem, 34vw, 26rem);
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel .packet {
  position: absolute;
  width: clamp(9rem, 21vw, 18rem);
  aspect-ratio: 4 / 5.4;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 8% 8% 0;
  color: var(--kinari-on-dark);
  box-shadow: 0 22px 46px -20px rgba(26, 26, 26, 0.42);
  transition: transform 0.65s var(--ease-out), opacity 0.65s var(--ease-out);
  will-change: transform;
  font-size: clamp(0.5rem, 1.25vw, 1.125rem);
}

.packet-colombia { background: var(--colombia); }
.packet-tanzania { background: var(--tanzania); }
.packet-bali     { background: var(--bali); }

.packet.pos-center { transform: translateX(0) translateZ(0) rotateY(0deg) scale(1); z-index: 3; opacity: 1; }
.packet.pos-left   { transform: translateX(-80%) translateZ(-150px) rotateY(26deg) scale(0.88); z-index: 1; opacity: 0.62; }
.packet.pos-right  { transform: translateX(80%) translateZ(-150px) rotateY(-26deg) scale(0.88); z-index: 1; opacity: 0.62; }

/* label anatomy, sized against the packet width so it holds at any scale */
.pk-brand {
  display: block;
  font-weight: 700;
  font-size: 1.44em;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pk-tagline {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.54em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
  margin-top: 0.4em;
}
.pk-rule {
  display: block;
  height: 1px;
  background: rgba(245, 240, 232, 0.32);
  margin: 1.12em 0 1.28em;
}
.pk-region {
  display: block;
  font-weight: 700;
  font-size: 1.76em;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.pk-country {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-top: 0.32em;
}
.pk-notes { margin-top: 1.12em; }
.pk-notes-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.48em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.32em;
}
.pk-notes-body {
  display: block;
  font-size: 0.67em;
  line-height: 1.45;
  opacity: 0.95;
}
.pk-bottom {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.48em;
  padding-bottom: 1.12em;
}
.pk-meta {
  font-family: var(--font-mono);
  font-size: 0.47em;
  line-height: 1.75;
  opacity: 0.62;
}
.pk-weight {
  font-weight: 700;
  font-size: 1.04em;
  opacity: 0.85;
  line-height: 1;
}
.pk-accent {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.3em;
}
.packet-colombia .pk-accent { background: #4CAF50; }
.packet-tanzania .pk-accent { background: #E8A87C; }
.packet-bali     .pk-accent { background: #7BA7CC; }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.5rem;
}
.car-btn {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: 1px solid rgba(26, 26, 26, 0.28);
  background: transparent;
  color: var(--sumi);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.car-btn:hover { background: var(--sumi); color: var(--kinari); border-color: var(--sumi); }

.packet-caption {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--sumi-55);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .carousel .packet { transition: none; }
}

/* ── Sections ──────────────────────────────────────────────── */

.section {
  padding-top: clamp(3rem, 7vh, 5.5rem);
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
}

.section + .section { border-top: 1px solid var(--sumi-line); }

.section h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.3rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.section .lede {
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--sumi-70);
  max-width: var(--measure);
}

/* format comparison */
.format-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 3.5rem;
  border-top: 1px solid var(--sumi-line);
}
@media (min-width: 720px) {
  .format-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .format-grid { grid-template-columns: repeat(4, 1fr); }
}

.format-cell {
  padding: 2rem 1.75rem 2.25rem 0;
  border-bottom: 1px solid var(--sumi-line);
}
@media (min-width: 720px) {
  .format-cell { border-bottom: none; border-top: none; }
  .format-cell + .format-cell { border-left: 1px solid var(--sumi-line); padding-left: 1.75rem; }
  .format-grid { border-bottom: 1px solid var(--sumi-line); }
}
@media (min-width: 720px) and (max-width: 1079px) {
  .format-cell:nth-child(3) { border-left: none; padding-left: 0; }
  .format-cell:nth-child(-n+2) { border-bottom: 1px solid var(--sumi-line); }
}

.format-cell h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.format-cell p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--sumi-55);
}
.format-cell.is-toshi h3::after {
  content: "toshi";
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--kuri-text);
  margin-left: 0.6rem;
  vertical-align: middle;
}

/* steps */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 820px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
}

.step {
  padding: 0 0 2.5rem 0;
}
@media (min-width: 820px) {
  .step { padding: 0 2.5rem 0 0; }
  .step + .step { border-left: 1px solid var(--sumi-line); padding-left: 2.5rem; }
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--sumi-faint);
  display: block;
  margin-bottom: 1.4rem;
}

.step h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.8rem;
}

.step p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sumi-55);
  max-width: 22rem;
}

/* story, centered statement */
.story-center {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.story-quote {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--sumi);
  margin-bottom: 1.5rem;
}

.story-body {
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--sumi-70);
  max-width: 34rem;
  margin: 0 auto;
}

/* origins */
.origins-head { margin-bottom: 3rem; }

.origin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 820px) {
  .origin-grid { grid-template-columns: repeat(3, 1fr); }
}

.origin-card {
  color: var(--kinari-on-dark);
  padding: 2.5rem 2.25rem;
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 2px;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .origin-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -24px rgba(26, 26, 26, 0.45);
  }
}

.origin-card.colombia { background: var(--colombia); }
.origin-card.tanzania { background: var(--tanzania); }
.origin-card.bali { background: var(--bali); }

.origin-card .country {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 1.75rem;
}

.origin-card h3 {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}

.origin-card .farm {
  font-size: 1rem;
  opacity: 0.85;
  margin-bottom: 1.5rem;
}

.origin-card .desc {
  font-size: 0.98rem;
  line-height: 1.7;
  opacity: 0.82;
  max-width: 20rem;
}

.origin-card .meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 2;
  opacity: 0.78;
  border-top: 1px solid var(--kinari-on-dark-line);
  padding-top: 1.5rem;
  margin-top: 2rem;
}

.origins-note {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--sumi-70);
  max-width: var(--measure);
  margin-top: 2.5rem;
}

/* pricing */
.price-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .price-grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

.price-list { list-style: none; margin-top: 2rem; }
.price-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--sumi-70);
  margin-bottom: 1rem;
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--kuri);
}

.price-card {
  border: 1px solid rgba(26, 26, 26, 0.15);
  padding: clamp(2rem, 4vw, 3rem);
}

.price-amount {
  font-size: clamp(3.2rem, 6vw, 4.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.price-per {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--sumi-55);
  margin-top: 0.7rem;
}

.price-compare {
  border-top: 1px solid var(--sumi-line);
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 2;
  color: var(--sumi-55);
}

.price-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--sumi);
  color: var(--kinari);
  padding: 1rem 1.5rem;
  margin-top: 1.9rem;
  transition: opacity 0.2s ease;
}
.price-cta:hover { opacity: 0.88; }

.price-fineprint {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--sumi-55);
  text-align: center;
  margin-top: 0.9rem;
}

/* FAQ */
.faq-list {
  margin-top: 2.5rem;
  border-top: 1px solid var(--sumi-line);
  max-width: 46rem;
}

.faq-item {
  border-bottom: 1px solid var(--sumi-line);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  padding: 1.4rem 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .faq-mark {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--kuri-text);
  transition: transform 0.3s var(--ease-out);
  flex-shrink: 0;
}
.faq-item[open] summary .faq-mark { transform: rotate(45deg); }

.faq-item .faq-body {
  padding: 0 0 1.6rem 0;
  font-size: 0.93rem;
  line-height: 1.75;
  color: var(--sumi-70);
  max-width: 38rem;
}

/* dark CTA */
.section-dark {
  background: var(--sumi);
  color: var(--kinari-on-dark);
  border-top: none;
}

.section-dark h2 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.section-dark .lede {
  color: var(--kinari-on-dark-70);
  margin-bottom: 2.25rem;
}

.footer {
  border-top: 1px solid var(--sumi-line);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .footer-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

.footer-logo { font-weight: 700; font-size: 1rem; text-decoration: none; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--sumi-55);
}
.footer-links a { text-decoration: none; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--sumi); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rm-bar span { width: var(--w); transition: none; }
  .packet { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* ── Privacy page ──────────────────────────────────────────── */

.prose {
  max-width: 44rem;
  padding-top: 3rem;
  padding-bottom: 6rem;
}
.prose h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}
.prose .updated {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--sumi-55);
  margin-bottom: 3rem;
}
.prose h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 2.5rem 0 0.9rem;
}
.prose p, .prose li {
  font-size: 0.94rem;
  line-height: 1.75;
  color: var(--sumi-70);
}
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.6rem; }
.prose a { text-decoration: underline; }
.prose a:hover { color: var(--sumi); }

/* thanks page */
.thanks-main {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.thanks-main h1 {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.thanks-main p {
  font-size: 1rem;
  color: var(--sumi-70);
  max-width: 30rem;
  margin-bottom: 2rem;
}
.thanks-main a.back {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Build log ─────────────────────────────────────────────
   A deliberately unstyled surface. Monospace, dense, no polish.
   The gear change from the hero is the point: this reads as a
   working document, not a designed page. */

.buildlog {
  background: var(--kinari-soft);
  border-top: 1px solid rgba(26, 26, 26, 0.8);
  border-bottom: 1px solid rgba(26, 26, 26, 0.8);
  padding-top: clamp(2.5rem, 6vh, 4rem);
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  font-family: var(--font-mono);
}

.bl-inner { max-width: none; }

.bl-label {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kuri-text);
  margin-bottom: 0.9rem;
}

.buildlog h2 {
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.bl-note {
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--sumi-70);
  max-width: 40rem;
  padding-bottom: 1.6rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.32);
}

.bl-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.45rem;
  padding: 1.4rem 0;
  border-bottom: 1px dashed rgba(26, 26, 26, 0.22);
}
@media (min-width: 700px) {
  .bl-entry { grid-template-columns: 8.5rem 1fr; gap: 1.5rem; }
}

.bl-date {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--kuri-text);
}

.bl-body h3 {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 0.55rem;
}

.bl-body p {
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--sumi-70);
  max-width: 38rem;
}
.bl-body p + p { margin-top: 0.7rem; }

.bl-body .bl-aside {
  color: var(--sumi-55);
  border-left: 2px solid rgba(139, 111, 71, 0.45);
  padding-left: 0.8rem;
}

.bl-open {
  margin-top: 2.2rem;
  border: 1px dashed rgba(26, 26, 26, 0.4);
  padding: 1.4rem 1.5rem;
}
.bl-open h3 {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kuri-text);
  margin-bottom: 0.9rem;
}
.bl-open ul { list-style: none; }
.bl-open li {
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--sumi-70);
  padding-left: 2.2rem;
  position: relative;
  margin-bottom: 0.6rem;
}
.bl-open li:last-child { margin-bottom: 0; }
.bl-open li::before {
  content: "[ ]";
  position: absolute;
  left: 0;
  color: var(--kuri-text);
}

.bl-cta {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.bl-cta a {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  background: var(--sumi);
  color: var(--kinari);
  border: 1px solid var(--sumi);
  padding: 0.85rem 1.4rem;
  transition: opacity 0.2s ease;
}
.bl-cta a:hover { opacity: 0.88; }
.bl-cta span {
  font-size: 0.78rem;
  color: var(--sumi-55);
}

/* ── Waitlist counter: the cup fills as founder spots go ───
   Update the number in data-count on each .wl-counter in
   index.html. The fill animates once, on scroll into view. */

.wl-counter {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin: 0 0 1.6rem;
}

.wl-cup {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  overflow: visible;
}
.wl-cup .cup-line {
  fill: none;
  stroke: var(--sumi);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wl-cup .cup-liquid {
  fill: var(--kuri);
  transform: translateY(69px);            /* starts empty */
  transition: transform 2.4s cubic-bezier(0.45, 0.05, 0.25, 1);
}

.wl-count-text {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--sumi);
}
.wl-count-text b {
  display: block;
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--sumi);
  line-height: 1.1;
}

.section-dark .wl-cup .cup-line { stroke: var(--kinari-on-dark); }
.section-dark .wl-cup .cup-liquid { fill: #C2A176; }
.section-dark .wl-count-text { color: var(--kinari); }
.section-dark .wl-count-text b { color: var(--kinari); }

@media (prefers-reduced-motion: reduce) {
  .wl-cup .cup-liquid { transition: none; }
}

/* ── Teardown credibility band ─────────────────────────────
   The competitor teardown promoted out of the build log.
   Competitors are described by category, never named. */

.teardown {
  margin-top: 3.5rem;
  border: 1px solid var(--sumi-line);
  padding: clamp(1.75rem, 4vw, 2.5rem);
}
.td-head {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kuri-text);
  margin-bottom: 1rem;
}
.td-lede {
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 40rem;
  margin-bottom: 1.75rem;
}
.td-findings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--sumi-line);
  padding-top: 1.75rem;
}
@media (min-width: 760px) {
  .td-findings { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}
.td-find .n {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 0.6rem;
}
.td-find p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--sumi-70);
}
.td-so {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sumi-line);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--sumi);
  max-width: 42rem;
}

/* ── Batch 001 chain (supply chain spec sheet) ─────────────── */

.chain { background: var(--kinari-soft); }
.chain-grid {
  margin-top: 2.5rem;
  border-top: 1px solid rgba(26, 26, 26, 0.16);
  max-width: 52rem;
}
.chain-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
@media (min-width: 680px) {
  .chain-row { grid-template-columns: 11rem 1fr; gap: 1.5rem; align-items: start; }
}
.chain-key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kuri-text);
}
.chain-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--kuri);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.chain-val {
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--sumi);
}
.chain-val .sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--sumi-55);
  margin-top: 0.25rem;
}
.chain-note {
  margin-top: 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  line-height: 1.8;
  color: var(--sumi-55);
  max-width: 42rem;
}

/* ── Origin card status chip ───────────────────────────────── */

.origin-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--kinari-on-dark-line);
  padding: 0.3rem 0.6rem;
  margin-bottom: 1.1rem;
  opacity: 0.9;
}
.origin-status.is-live { background: var(--kinari-on-dark); color: var(--sumi); border-color: transparent; }

/* ── Nav section links ─────────────────────────────────────
   Hidden below 900px, where the page is short enough to scroll
   and a hamburger would add more weight than it removes. */

.nav-links {
  display: none;
  gap: 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (min-width: 900px) {
  .nav-links { display: flex; }
}
.nav-links a {
  text-decoration: none;
  color: var(--sumi-55);
  padding: 0.3rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav-links a:hover,
.nav-links a.is-current {
  color: var(--sumi);
  border-bottom-color: var(--sumi);
}

/* anchor targets clear the sticky nav when jumped to */
#format, #development, #origins, #chain, #pricing { scroll-margin-top: 5rem; }

/* ── Line diagrams ─────────────────────────────────────────
   Shared drawing language: sumi stroke, kuri fill for coffee.
   Used by the how-it-works steps and the supply flow. */

.diagram {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin-bottom: 1.6rem;
  display: block;
}
.d-line {
  fill: none;
  stroke: var(--sumi);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.d-fill { fill: var(--kuri); }

/* ── Format comparison matrix ──────────────────────────────── */

.matrix-scroll { margin-top: 3rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.matrix {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  text-align: left;
}
.matrix th,
.matrix td {
  padding: 0.95rem 0.8rem;
  border-bottom: 1px solid var(--sumi-line);
  vertical-align: middle;
}
.matrix thead th {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kuri-text);
  border-bottom-color: rgba(26, 26, 26, 0.28);
  text-align: center;
}
.matrix thead th:first-child { text-align: left; }
.matrix tbody th {
  font-size: 1.02rem;
  font-weight: 400;
  color: var(--sumi);
  white-space: nowrap;
  padding-left: 0;
}
.matrix td { text-align: center; }

/* the toshi column, marked without shouting */
.matrix .is-toshi { background: rgba(139, 111, 71, 0.09); }
.matrix thead th.is-toshi {
  color: var(--sumi);
  font-weight: 400;
  border-bottom-color: var(--sumi);
}

/* marks */
.mk {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid rgba(26, 26, 26, 0.3);
}
.mk.is-yes { background: var(--sumi); border-color: var(--sumi); }
.mnum {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--sumi);
}

.matrix-note {
  margin-top: 1.6rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--sumi-70);
  max-width: 38rem;
}

/* ── Build log, horizontal timeline ───────────────────────
   Nodes run left to right along a rule. The card nearest the
   middle of the track goes black, the rest recede. Scrolls
   sideways on every screen size. */

/* vertical build log */
.vtl {
  list-style: none;
  position: relative;
  margin-top: 2.25rem;
  max-width: 36rem;
}
.vtl-item {
  position: relative;
  padding-left: 2.1rem;
  padding-bottom: 1.5rem;
}
.vtl-item:last-child { padding-bottom: 0; }
.vtl-item::before {
  content: "";
  position: absolute;
  left: 0.36rem;
  top: 0.45rem;
  bottom: -0.45rem;
  width: 1px;
  background: rgba(26, 26, 26, 0.35);
}
.vtl-item:last-child::before { display: none; }
.vtl-node {
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  border: 2px solid var(--sumi);
  background: var(--kinari-soft);
  box-sizing: border-box;
}
.vtl-item:last-child .vtl-node { background: var(--sumi); }
.vtl-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--kuri-text);
  margin-bottom: 0.15rem;
}
.vtl-text {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--sumi-70);
  max-width: 32rem;
}

/* ── Teardown dot chart ────────────────────────────────────
   Five products plotted on two scored criteria. Dots are
   jittered vertically so overlapping scores stay countable. */

.chart { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--sumi-line); }

.chart-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.35rem;
  margin-bottom: 1.4rem;
}
@media (min-width: 640px) {
  .chart-row {
    grid-template-columns: 10rem 1fr 4.5rem;
    gap: 1.2rem;
    align-items: center;
  }
}

.chart-label {
  font-size: 0.9rem;
  color: var(--sumi);
}
.chart-val {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kuri-text);
}
@media (min-width: 640px) { .chart-val { text-align: right; } }

.chart-track {
  position: relative;
  height: 38px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.18);
}
.chart-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(26, 26, 26, 0.09);
}

.cdot {
  position: absolute;
  bottom: 0;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--sumi);
}
.cdot:nth-child(1) { transform: translateY(-26px); }
.cdot:nth-child(2) { transform: translateY(-20px); }
.cdot:nth-child(3) { transform: translateY(-14px); }
.cdot:nth-child(4) { transform: translateY(-8px); }
.cdot:nth-child(5) { transform: translateY(-2px); }

.chart-scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--sumi-55);
}
@media (min-width: 640px) {
  .chart-scale { margin-left: 11.2rem; margin-right: 5.7rem; }
}
.chart-key {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--sumi-55);
  margin-top: 0.9rem;
}

/* ── Coffee run math ─────────────────────────────────────── */

.runmath {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2.5rem;
  border-top: 1px solid var(--sumi-line);
}
.rm-head {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kuri-text);
  margin-bottom: 1.6rem;
}
.rm-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
}
@media (min-width: 640px) {
  .rm-row {
    grid-template-columns: 11rem 1fr 4rem;
    gap: 1.2rem;
    align-items: center;
  }
}
.rm-label { font-size: 1.02rem; color: var(--sumi); }
.rm-bar {
  height: 26px;
  background: rgba(26, 26, 26, 0.07);
  overflow: hidden;
}
.rm-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(26, 26, 26, 0.3);
  transition: width 1.4s var(--ease-out) 0.15s;
}
.runmath.bars-in .rm-bar span { width: var(--w); }
.rm-row.is-toshi .rm-bar span { background: var(--kuri); }
.rm-val {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--sumi);
}
@media (min-width: 640px) { .rm-val { text-align: right; } }
.rm-note {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.8;
  color: var(--sumi-55);
  max-width: 34rem;
}
@media (prefers-reduced-motion: reduce) {
  .rm-bar span { transition: none; }
}

/* ── Supply flow ───────────────────────────────────────────
   Horizontal on desktop, vertical on mobile. The unbooked
   step is drawn hollow, because the chain is not closed yet. */

.flow {
  list-style: none;
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  position: relative;
}
.flow-step { position: relative; padding-left: 1.9rem; }
.flow::before {
  content: "";
  position: absolute;
  left: 0.31rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 1px;
  background: rgba(26, 26, 26, 0.2);
}
.flow-node {
  position: absolute;
  left: 0;
  top: 0.28rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--sumi);
  border: 2px solid var(--sumi);
}
.flow-step.is-open .flow-node { background: var(--kinari-soft); }

@media (min-width: 800px) {
  .flow { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .flow::before {
    left: 0;
    right: 0;
    top: 0.32rem;
    bottom: auto;
    width: auto;
    height: 1px;
  }
  .flow-step { padding-left: 0; padding-right: 1rem; padding-top: 1.7rem; }
  .flow-node { top: 0; left: 0; }
}

.flow-label {
  font-size: 1.02rem;
  color: var(--sumi);
  line-height: 1.3;
}
.flow-sub {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sumi-55);
  margin-top: 0.25rem;
}
.flow-step.is-open .flow-label,
.flow-step.is-open .flow-sub { color: var(--sumi-55); }

/* ── Early tasters tape ────────────────────────────────────
   Sits at the foot of the development section, not a section
   of its own. Two identical tracks scroll as one continuous
   loop; the second is aria-hidden so quotes are read once. */

.tape-block {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px dashed rgba(26, 26, 26, 0.28);
}
.tape-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kuri-text);
  margin-bottom: 0.9rem;
}

.tape {
  display: flex;
  gap: 1.25rem;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4rem, #000 calc(100% - 4rem), transparent);
}
.tape-track {
  list-style: none;
  display: flex;
  gap: 1.25rem;
  flex-shrink: 0;
  animation: tape-scroll 90s linear infinite;
}
.tape:hover .tape-track,
.tape:focus-within .tape-track { animation-play-state: paused; }

@keyframes tape-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% - 1.25rem)); }
}

.tape-item {
  flex: 0 0 clamp(16rem, 24vw, 21rem);
  background: var(--kinari);
  border: 1px solid rgba(26, 26, 26, 0.12);
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.1rem;
}
.tape-item blockquote {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--sumi);
}
.tape-item cite {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  font-style: normal;
  color: var(--kuri-text);
}

@media (prefers-reduced-motion: reduce) {
  .tape { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .tape-track { animation: none; }
  .tape-track[aria-hidden="true"] { display: none; }
}