/* YoMiE website. The role colours (S V O C) come from the product (core.css) and stay the
   only strong colours on the page; everything else is ink on a cool paper. The type is a
   geometric gothic (Zen Kaku Gothic New) with a geometric sans for English (Space Grotesk):
   straight lines and corners, like the boxes of the diagram. */
:root {
  --paper: #f5f6f8;
  --sheet: #ffffff;
  --ink: #1c2330;
  --muted: #5b6472;
  --rule: #dde1e7;
  --S: #2563eb;
  --V: #dc2626;
  --O: #16a34a;
  --C: #d97706;
  --M: #6b7280;
  --J: #0f766e;
  --display: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --en: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --wrap: min(1040px, 100% - 32px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t: 0.7s;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  overflow-x: clip; /* the hero card overhangs the right edge on wide screens */
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px / 1.8 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--S);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- top bar ---------- */
.bar {
  width: var(--wrap);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 900 20px / 1 var(--display);
  letter-spacing: 0.02em;
  text-decoration: none;
}
.bar nav {
  display: flex;
  gap: 22px;
  font-size: 14px;
}
.bar nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 6px 0;
}
.bar nav a:hover {
  color: var(--ink);
}

/* ---------- shared ---------- */
main > section {
  width: var(--wrap);
  margin: 0 auto;
  padding: 72px 0;
}
main > section + section {
  border-top: 1px solid var(--rule);
}
h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
  word-break: auto-phrase;
}
h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-bottom: 28px;
}
h3 {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}
p {
  margin: 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  font: 700 15px / 1.4 var(--body);
  text-decoration: none;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.btn.primary {
  background: var(--ink);
  color: #fff;
}
.btn:disabled {
  cursor: default;
  opacity: 0.88;
}

/* ---------- hero ---------- */
.hero {
  padding-top: 40px;
}
.hero h1 {
  font-size: clamp(44px, 8vw, 96px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.lead {
  max-width: 38em;
  margin-top: 22px;
  font-size: 17px;
  color: var(--muted);
}
.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
/* The one bold spot: on wide screens the hero sits beside its card, and the card overhangs the
   right edge of the viewport (html clips it). */
@media (min-width: 1000px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    align-items: center;
    padding-top: 56px;
  }
  .hero h1 {
    font-size: clamp(44px, 5.6vw, 76px);
  }
  .hero-fig {
    margin: 0;
    /* the wrap's right margin plus 8px: the card's edge is just past the viewport at every
       width, and the text inside stays within the card's 28px padding */
    width: calc(100% + (100vw - min(1040px, 100vw - 32px)) / 2 + 8px);
  }
}

/* ---------- the reading card: a page excerpt with the live diagram ---------- */
.reading {
  margin: 48px 0 0;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0 28px 26px;
  box-shadow:
    0 1px 0 var(--rule),
    0 24px 48px -32px rgba(28, 35, 48, 0.28);
}
.page-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 -28px 22px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  color: var(--muted);
}
.page-chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rule);
}
.page-chrome em {
  margin-left: 10px;
  font-style: normal;
}
.source {
  font: 500 clamp(21px, 2.6vw, 28px) / 1.7 var(--en);
  letter-spacing: -0.01em;
}
.chunk {
  padding-bottom: 2px;
  border-bottom: 2.5px solid var(--M);
  transition: background-color 0.15s;
}
.chunk.sub {
  border-bottom-style: dashed;
  border-bottom-width: 1.5px;
}
.chunk.r-S {
  border-color: var(--S);
}
.chunk.r-V {
  border-color: var(--V);
}
.chunk.r-O {
  border-color: var(--O);
}
.chunk.r-C {
  border-color: var(--C);
}
.chunk.r-J {
  border-color: var(--J);
}
.chunk.r-M {
  border-color: color-mix(in srgb, var(--M) 55%, transparent);
}
.chunk.lit {
  background: color-mix(in srgb, #facc15 38%, transparent);
  border-radius: 3px;
}
.ja {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}
.diagram-host {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--rule);
}
/* The English in the diagram's boxes is set in the site's English face, so the card reads as
   one piece with the sentence above it (the panel keeps core's serif). */
.reading .diagram .box .en {
  font-family: var(--en);
  font-weight: 600;
}
.reading figcaption {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
}
.points {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

/* ---------- how ---------- */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.steps li {
  counter-increment: step;
  border-top: 2px solid var(--ink);
  padding-top: 16px;
  min-width: 0;
}
.steps li::before {
  content: counter(step);
  display: block;
  font: 900 34px / 1 var(--display);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.steps p {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- long sentences ---------- */
.long {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* the card's diagram scrolls inside it, never widens the column */
  gap: 8px;
}
.long-copy p {
  max-width: 40em;
  color: var(--muted);
}
.long .reading {
  margin-top: 28px;
}

/* ---------- features ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.grid article {
  background: var(--sheet);
  padding: 26px 28px;
  min-width: 0;
}
.grid p {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- price ---------- */
.plan {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 30px 32px;
}
.amount {
  font: 900 64px / 1 var(--display);
  letter-spacing: -0.04em;
}
.amount .tier {
  display: block;
  margin-bottom: 8px;
  font: 700 13px / 1.4 var(--body);
  letter-spacing: 0.04em;
  color: var(--muted);
}
.plan ul {
  margin: 0;
  padding-left: 1.1em;
  color: var(--muted);
}

/* ---------- faq ---------- */
.faq details {
  border-top: 1px solid var(--rule);
  padding: 16px 0;
}
.faq details:last-child {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  cursor: pointer;
  font-weight: 500;
}
.faq details p {
  margin-top: 10px;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- footer ---------- */
.foot {
  width: var(--wrap);
  margin: 0 auto;
  padding: 36px 0 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
}
.foot a {
  padding: 4px 0;
}

/* ---------- legal pages ---------- */
.legal {
  width: min(760px, 100% - 32px);
  margin: 0 auto;
  padding: 24px 0 72px;
}
.legal h1 {
  font-size: clamp(28px, 4vw, 38px);
  margin-bottom: 24px;
}
.legal h2 {
  font-size: 21px;
  font-weight: 700;
  margin: 40px 0 12px;
}
.legal p,
.legal li {
  margin: 10px 0;
}
.legal blockquote {
  margin: 0 0 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--C);
  background: color-mix(in srgb, var(--C) 8%, var(--sheet));
  color: var(--muted);
  font-size: 14px;
}
.legal table {
  display: block;
  overflow-x: auto; /* wide tables scroll on phones instead of widening the page */
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 12px 0;
}
.legal th,
.legal td {
  border: 1px solid var(--rule);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.legal th {
  background: var(--paper);
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  main > section {
    padding: 52px 0;
  }
  .bar nav {
    display: none;
  }
  .reading {
    padding: 0 16px 20px;
  }
  .page-chrome {
    margin: 0 -16px 18px;
  }
  .steps,
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .plan {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

/* ---------- motion ----------
   Blocks arrive from the side as they scroll into view, left and right alternating; inside a
   card the diagram's boxes line up from the left one after another, then the lines between them
   follow. Only hidden while the script runs (html.js, set in index.html) and only when motion is
   welcome, so without JavaScript or with reduced motion everything is there from the start. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transition:
      opacity var(--t) var(--ease),
      transform var(--t) var(--ease);
  }
  .js [data-reveal="left"] {
    transform: translateX(-56px);
  }
  .js [data-reveal="right"] {
    transform: translateX(72px);
  }
  .js [data-reveal="up"] {
    transform: translateY(20px);
  }
  .js [data-reveal].in {
    opacity: 1;
    transform: none;
  }
  .js .diagram-host .box {
    transition:
      opacity 0.5s var(--ease),
      transform 0.5s var(--ease);
    transition-delay: calc(var(--d, 0ms) + 0.25s);
  }
  .js .diagram-host .diagram svg {
    transition: opacity 0.5s var(--ease);
    transition-delay: calc(var(--d, 0ms) + 0.4s);
  }
  /* hidden until the card is in view and the diagram has been drawn (.pending, main.ts) */
  .js :is(.reading:not(.in), .diagram-host.pending) .box {
    opacity: 0;
    transform: translateX(-28px);
  }
  .js :is(.reading:not(.in), .diagram-host.pending) .diagram svg {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}