/* ============================================================
   BUYARY PLATFORM — sub-page layer (docs, guides, access)
   Loads after platform.css; reuses its tokens, nav, footer,
   buttons, code blocks, and eyebrows.
   ============================================================ */

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(7rem, 14vw, 10rem) var(--pad) clamp(4rem, 8vw, 6rem);
}
.page--wide { max-width: 56rem; }

.page__header { margin-bottom: clamp(2.2rem, 5vw, 3.4rem); }
.page__title {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 500; line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 0.9rem;
}
.page__title em { font-style: italic; color: var(--orange-soft); }
.page__lede {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--cream-dim);
  max-width: 40rem;
}

.page h2, .docs-main h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 500;
  margin: clamp(2.4rem, 5vw, 3.2rem) 0 1rem;
  scroll-margin-top: 96px;
}
.page h3, .docs-main h3 {
  font-family: var(--sans);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--cream);
  margin: 1.8rem 0 0.7rem;
}
.page p, .page li, .docs-main p, .docs-main li {
  color: var(--cream-dim);
  font-size: 1rem;
  line-height: 1.75;
}
.page p, .docs-main p { margin-bottom: 1.1rem; }
/* the eyebrow is a <p>: keep its label styling out of the prose cascade */
.page .eyebrow, .docs-main .eyebrow { color: var(--orange-soft); font-size: 0.7rem; line-height: 1.6; margin-bottom: 1.6rem; }
.page ul, .page ol, .docs-main ul, .docs-main ol { padding-left: 1.3rem; margin-bottom: 1.1rem; }
.page a:not(.btn):not(.card-link), .docs-main a:not(.btn):not(.card-link) {
  color: var(--cream);
  border-bottom: 1px solid rgba(224,138,100,0.45);
  padding-bottom: 1px;
  transition: border-color 0.3s;
}
.page a:not(.btn):not(.card-link):hover, .docs-main a:not(.btn):not(.card-link):hover { border-color: var(--orange); }
.page .codeblock, .docs-main .codeblock { margin: 1.2rem 0 1.6rem; }
.page .score-word, .docs-main .score-word { color: var(--green-bright); font-family: var(--data); font-weight: 600; }

/* breadcrumb */
.crumbs {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 600;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--cream-faint);
  display: flex; gap: 0.7rem; align-items: center;
  margin-bottom: 1.6rem;
}
.crumbs a { color: var(--cream-faint); transition: color 0.3s; border: none !important; }
.crumbs a:hover { color: var(--cream); }
.crumbs i { font-style: normal; color: rgba(243,241,236,0.25); }

/* card grid (docs "where to go next") */
.card-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin: 1.4rem 0;
}
@media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; } }
.card-link {
  display: block;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.15rem 1.3rem 1.05rem;
  background: linear-gradient(160deg, rgba(36,33,30,0.5), rgba(28,26,24,0.25));
  transition: border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.card-link:hover { border-color: rgba(217,98,60,0.45); transform: translateY(-2px); }
.card-link b {
  display: block;
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream); margin-bottom: 0.35rem;
}
.card-link b span { color: var(--orange-soft); }
.card-link p { font-family: var(--data); font-size: 0.84rem; color: var(--cream-dim); margin: 0; line-height: 1.5; }

/* callout */
.callout {
  border: 1px solid rgba(59,170,63,0.3);
  border-left: 2px solid var(--green);
  border-radius: 8px;
  background: rgba(59,170,63,0.05);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.callout--warn { border-color: rgba(217,98,60,0.35); border-left-color: var(--orange); background: rgba(217,98,60,0.05); }
.callout p { margin: 0; font-size: 0.94rem; }

/* editorial steps (getting started) */
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 1.4rem; margin: 2rem 0; }
.step {
  display: flex; gap: clamp(1.2rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(36,33,30,0.5), rgba(28,26,24,0.25));
  padding: clamp(1.4rem, 3vw, 2rem);
}
@media (max-width: 560px) { .step { flex-direction: column; gap: 0.8rem; } }
.step__num {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1; color: var(--orange-soft);
  opacity: 0.85; user-select: none; flex-shrink: 0;
}
.step__body { min-width: 0; flex: 1; }
.step__title {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  color: var(--cream); margin-bottom: 0.6rem;
}
.step__outcome {
  border-left: 2px solid rgba(59,170,63,0.6);
  padding-left: 1rem; margin-top: 1.1rem;
}
.step__outcome i {
  display: block; font-style: normal;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-faint); margin-bottom: 0.3rem;
}
.step__outcome p { margin: 0; font-size: 0.92rem; }

/* status table (REST) */
.status-table {
  border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; margin: 1.4rem 0;
}
.status-table > div {
  display: grid; grid-template-columns: 4rem 1fr;
  gap: 1rem; padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
}
.status-table > div:last-child { border-bottom: none; }
.status-table b {
  font-family: var(--mono); font-size: 0.9rem; font-weight: 600;
  color: var(--green-bright);
}
.status-table b.warn { color: var(--orange-soft); }
.status-table p { margin: 0; font-size: 0.9rem; }

/* forms (request access) */
.form { display: flex; flex-direction: column; gap: 1.9rem; margin-top: 2.6rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 540px) { .form__row { grid-template-columns: 1fr; gap: 1.9rem; } }
.form label {
  font-family: var(--sans); font-size: 0.64rem; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--orange-soft);
  display: block; margin-bottom: 0.6rem;
}
.form input, .form textarea {
  width: 100%;
  font-family: var(--data); font-size: 0.95rem;
  color: var(--cream);
  background: rgba(28,26,24,0.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  transition: border-color 0.3s;
}
.form input:focus, .form textarea:focus { outline: none; border-color: rgba(217,98,60,0.6); }
.form textarea { min-height: 120px; resize: vertical; }
.form button.btn { align-self: flex-start; border: none; margin-top: 0.4rem; }
.form__done {
  display: none;
  border: 1px solid rgba(59,170,63,0.35);
  border-radius: 10px;
  background: rgba(59,170,63,0.06);
  padding: 1.4rem 1.6rem;
  margin-top: 2rem;
}
.form__done b { font-family: var(--serif); font-size: 1.3rem; color: var(--cream); display: block; margin-bottom: 0.4rem; }
.form__done p { margin: 0; }
.is-submitted .form { display: none; }
.is-submitted .form__done { display: block; }

/* dashboard gate */
.gate {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(165deg, #2A2521 0%, var(--navy-deep) 45%, #1A1815 100%);
  padding: clamp(2rem, 5vw, 3rem);
  text-align: center;
  margin-top: 2.4rem;
}
.gate__icon { width: 44px; height: 44px; margin: 0 auto 1.2rem; opacity: 0.85; }
.gate p { max-width: 30rem; margin-left: auto; margin-right: auto; }
.gate .btn { margin-top: 1rem; }
.gate__hint { font-size: 0.9rem; color: var(--cream-faint); margin-top: 1.4rem !important; }

/* key-row mock (dashboard preview) */
.keys-mock { margin-top: 2.6rem; text-align: left; }
.keys-mock__head {
  font-family: var(--sans); font-size: 0.64rem; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--cream-faint); margin-bottom: 0.8rem;
}
.key-row {
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0.8rem 1.1rem; margin-bottom: 0.6rem;
  font-family: var(--mono); font-size: 0.8rem;
  color: var(--cream-dim);
  filter: blur(0.4px); opacity: 0.6;
}
.key-row b { color: var(--green-bright); font-weight: 500; margin-left: auto; }

/* simple entrance */
@media (prefers-reduced-motion: no-preference) {
  .page__header, .page > *:not(.page__header) { animation: page-in 0.7s var(--ease-out) both; }
  .page > *:nth-child(2) { animation-delay: 0.08s; }
  .page > *:nth-child(3) { animation-delay: 0.14s; }
  @keyframes page-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
}

/* ============ DOCS SHELL (sidebar + article) ============ */
.docs-shell {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(7rem, 13vw, 9rem) var(--pad) clamp(4rem, 8vw, 6rem);
}
@media (max-width: 900px) { .docs-shell { grid-template-columns: 1fr; } }
.docs-side { position: sticky; top: 96px; align-self: start; }
.docs-side__toggle { display: none; }
@media (max-width: 900px) {
  .docs-side { position: static; display: flex; flex-wrap: wrap; gap: 0 2.4rem; border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; }
  /* the toggle only exists once JS runs — its presence collapses the
     sidebar, so no-JS visitors keep the always-visible menu */
  .docs-side__toggle + .docs-side { display: none; }
  .docs-side__toggle + .docs-side.is-open { display: flex; }
  .docs-side__toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%;
    margin-bottom: 1.1rem;
    padding: 0.75rem 0.9rem;
    background: none;
    border: 1px solid var(--line); border-radius: 10px;
    font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--cream-dim);
    cursor: pointer;
  }
  .docs-side__toggle svg { transition: transform 0.25s var(--ease-out); }
  .docs-side__toggle.is-open svg { transform: rotate(180deg); }
  .docs-side__toggle:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
}
.docs-side__group { margin-bottom: 1.8rem; }
.docs-side__head {
  font-family: var(--sans); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--cream-faint);
  margin-bottom: 0.7rem;
}
.docs-side__items { border-left: 1px solid var(--line); }
.docs-side__items a {
  display: block;
  font-family: var(--data); font-size: 0.88rem;
  color: var(--cream-dim);
  padding: 0.34rem 0 0.34rem 1.1rem;
  border-left: 2px solid transparent;
  margin-left: -1.5px;
  transition: color 0.25s, border-color 0.25s;
}
.docs-side__items a:hover { color: var(--cream); }
.docs-side__items a.is-active {
  color: var(--cream); font-weight: 600;
  border-left-color: var(--orange);
}
.docs-side__items a code { font-family: var(--mono); font-size: 0.82em; }
/* Marks a doc that describes work in progress, so the nav does not read as a
   list of things you can use today. */
.nav__soon {
  display: inline-block; margin-left: 0.45rem; vertical-align: 1px;
  font-family: var(--sans); font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--orange); border: 1px solid rgba(217, 98, 60, 0.45);
  border-radius: 99px; padding: 0.1rem 0.36rem; line-height: 1.4;
}
.docs-main { min-width: 0; max-width: 46rem; }
.docs-main > h2:first-of-type { margin-top: 0; }
.docs-main .page__header { margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }

/* field tables (data model) */
.field-table { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 1.2rem 0 1.8rem; }
.field-table > div {
  display: grid; grid-template-columns: minmax(130px, 200px) 6.5rem 1fr;
  gap: 1rem; padding: 0.7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.field-table > div:last-child { border-bottom: none; }
.field-table b { font-family: var(--mono); font-size: 0.8rem; font-weight: 500; color: var(--cream); word-break: break-all; }
.field-table i { font-family: var(--mono); font-style: normal; font-size: 0.72rem; color: var(--orange-soft); }
.field-table p { margin: 0; font-size: 0.86rem; }
@media (max-width: 620px) { .field-table > div { grid-template-columns: 1fr; gap: 0.15rem; } }

/* changelog */
.log { border-left: 1px solid var(--line); padding-left: 1.6rem; margin-top: 2rem; }
.log__entry { position: relative; margin-bottom: 2rem; }
.log__entry::before {
  content: ""; position: absolute; left: calc(-1.6rem - 3.5px);
  top: 0.5em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange);
}
.log__date { font-family: var(--mono); font-size: 0.7rem; color: var(--cream-faint); letter-spacing: 0.06em; }
.log__title { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--cream); margin: 0.2rem 0 0.35rem; }
.log__entry p { margin: 0; font-size: 0.92rem; }

/* form option groups (request access) */
.form fieldset { border: none; margin: 0; padding: 0; }
.form legend {
  font-family: var(--sans); font-size: 0.64rem; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--orange-soft); margin-bottom: 0.95rem; padding: 0;
}
.opt-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.form .opt, .opt {
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0;
  font-family: var(--data); font-size: 0.9rem; font-weight: 500;
  text-transform: none; letter-spacing: 0; /* not a label — reads as a value */
  color: var(--cream-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.52rem 1.05rem;
  cursor: pointer; user-select: none;
  transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.opt:hover { color: var(--cream); border-color: var(--line-strong); }
.form .opt input, .opt input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; border: none;
}
.opt::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--cream-faint);
  transition: background 0.25s, border-color 0.25s;
}
.opt:has(input:checked) { color: var(--orange-soft); border-color: var(--orange); background: rgba(217,98,60,0.08); }
.opt:has(input:checked)::before { background: var(--orange); border-color: var(--orange); }
.opt:has(input:focus-visible) { outline: 2px solid var(--orange-soft); outline-offset: 2px; }

/* ============ MARKETING PAGES (audience/product) ============ */
.mk { max-width: 62rem; margin: 0 auto; padding: clamp(7rem, 13vw, 9.5rem) var(--pad) clamp(3rem, 6vw, 4rem); }
.mk__hero { max-width: 46rem; margin-bottom: clamp(2.6rem, 6vw, 4rem); }
.mk__hero .page__title { font-size: clamp(2.4rem, 5.6vw, 3.8rem); }
.mk__ctas { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.mk section { margin-bottom: clamp(3rem, 7vw, 4.6rem); }
.mk h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 500; line-height: 1.2;
  margin-bottom: 1rem;
}
.mk h2 em { font-style: italic; color: var(--orange-soft); }
.mk .lead { font-size: clamp(1.02rem, 1.7vw, 1.18rem); color: var(--cream-dim); max-width: 42rem; }
.mk p, .mk li { color: var(--cream-dim); line-height: 1.7; }
.mk p { margin-bottom: 1rem; }
/* the * { padding:0 } reset strips list indent; give bullets a home and
   space the items so short single-line lists don't read as a solid block */
.mk ul, .mk ol { padding-left: 1.5rem; margin: 0.4rem 0 1.4rem; }
.mk li { margin-bottom: 0.6rem; padding-left: 0.2rem; }
.mk li:last-child { margin-bottom: 0; }
.mk li::marker { color: var(--orange-soft); }
.mk a:not(.btn):not(.card-link) {
  color: var(--cream); border-bottom: 1px solid rgba(224,138,100,0.45);
  padding-bottom: 1px; transition: border-color 0.3s;
}
.mk a:not(.btn):not(.card-link):hover { border-color: var(--orange); }
.mk .codeblock { margin: 1.2rem 0; }

/* vertical flow diagram */
.flow { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin: 2rem auto; max-width: 24rem; }
.flow__node {
  width: 100%; text-align: center;
  font-family: var(--data); font-size: 0.9rem; font-weight: 500;
  color: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(36,33,30,0.6), rgba(28,26,24,0.3));
  padding: 0.85rem 1rem;
}
.flow__node--hot { border-color: rgba(217,98,60,0.5); color: var(--orange-soft); }
.flow__arrow { color: var(--orange); font-size: 0.9rem; line-height: 1; opacity: 0.8; }

/* three-column feature grid */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 1.6rem 0; }
@media (max-width: 900px) { .grid3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid3 { grid-template-columns: 1fr; } }
.grid3 .card-link { cursor: default; }
.grid3 .card-link:hover { transform: none; border-color: var(--line-strong); }

/* tag rows (compatibility, SDKs, platforms) */
.tag-row { display: flex; flex-wrap: wrap; gap: 0.55rem; margin: 1.2rem 0; }
.tag {
  font-family: var(--data); font-size: 0.85rem; color: var(--cream-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.5rem 1.05rem 0.45rem;
}

/* Statement block — Buyary's philosophy + technical readiness. Each
   heading and its pills read as one unit (tight coupling); the two units
   are pushed apart with generous space and a hairline divider so they
   feel like distinct sections. */
.stmt { max-width: 52rem; }
.stmt__title {
  font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  font-weight: 500; line-height: 1.12; color: var(--cream);
  margin: 0 0 1.1rem;
}
.stmt__title em { font-style: italic; color: var(--orange-soft); }
.stmt__pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.stmt__pill {
  font-family: var(--data); font-size: 0.85rem; color: var(--cream-dim);
  border: 1px solid rgba(243,241,236,0.18); border-radius: 999px;
  padding: 0.52rem 1.1rem 0.46rem;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.stmt__pill:hover { border-color: rgba(224,138,100,0.55); color: var(--cream); }
.stmt__group + .stmt__group {
  margin-top: clamp(3rem, 6vw, 4.8rem);
  padding-top: clamp(3rem, 6vw, 4.8rem);
  border-top: 1px solid rgba(243,241,236,0.08);
}

/* big stat words */
.bigstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem 2.4rem; margin: 1.6rem 0; }
@media (max-width: 700px) { .bigstats { grid-template-columns: 1fr; } }
.bigstats b {
  display: block;
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--cream); line-height: 1.2;
}
.bigstats span { font-family: var(--data); font-size: 0.9rem; color: var(--cream-faint); }

/* comparison table */
.compare { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1.6rem 0; }
.compare > div {
  display: grid; grid-template-columns: 1fr 6rem 6rem;
  align-items: center;
  padding: 0.85rem 1.3rem;
  border-bottom: 1px solid var(--line);
}
.compare > div:last-child { border-bottom: none; }
.compare__head { background: rgba(243,241,236,0.03); }
.compare__head span {
  font-family: var(--sans); font-size: 0.66rem; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--cream-dim); text-align: center;
}
.compare__head span:first-child { text-align: left; }
.compare p { margin: 0; font-family: var(--data); font-size: 0.92rem; color: var(--cream); }
.compare i {
  font-style: normal; text-align: center;
  font-family: var(--data); font-size: 0.8rem;
}
.compare .no { color: rgba(243,241,236,0.35); }
.compare .part { color: var(--orange-soft); }
.compare .yes { color: var(--green-bright); font-size: 1rem; }

/* end-of-page CTA band */
.cta-band {
  text-align: center;
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 4.5rem) var(--pad) clamp(4rem, 8vw, 5.5rem);
  max-width: 62rem; margin: 0 auto;
}
.cta-band h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.15; margin-bottom: 1.6rem;
}
.cta-band h2 em { font-style: italic; color: var(--orange-soft); }
.cta-band .mk__ctas { justify-content: center; margin-top: 0; }
.cta-band p.note { color: var(--cream-dim); max-width: 34rem; margin: 0 auto 1.6rem; }

/* widget showcase (Apple-ish alternating) */
.wshow { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; padding: clamp(1.8rem, 4vw, 2.6rem) 0; border-bottom: 1px dashed rgba(243,241,236,0.09); }
@media (max-width: 800px) { .wshow { grid-template-columns: 1fr; } }
.wshow:nth-child(even) .wshow__visual { order: -1; }
@media (max-width: 800px) { .wshow:nth-child(even) .wshow__visual { order: 0; } }
.wshow__name { font-family: var(--serif); font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 500; color: var(--cream); margin-bottom: 0.5rem; }
.wshow__purpose { color: var(--cream-dim); margin-bottom: 0.9rem; }
.wshow__meta { font-family: var(--data); font-size: 0.8rem; color: var(--cream-faint); }
.wshow__meta b { color: var(--cream-dim); font-weight: 600; }
.wshow__visual {
  border: 1px solid var(--line); border-radius: 14px;
  background: linear-gradient(165deg, #2A2521, #1A1815);
  padding: 1.6rem; min-height: 180px;
  display: flex; align-items: center; justify-content: center;
}
.wmock { width: 100%; max-width: 300px; font-family: var(--data); }
.wmock__ring { display: flex; align-items: center; gap: 1rem; }
.wmock__circle {
  width: 74px; height: 74px; border-radius: 50%;
  border: 4px solid var(--green);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.5rem; color: var(--green-bright);
  flex-shrink: 0;
}
.wmock__lines i { display: block; height: 7px; border-radius: 4px; background: rgba(243,241,236,0.14); margin: 7px 0; }
.wmock__lines i:nth-child(1) { width: 120px; } .wmock__lines i:nth-child(2) { width: 90px; } .wmock__lines i:nth-child(3) { width: 105px; }
.wmock__bubble {
  border: 1px solid var(--line); border-radius: 12px 12px 12px 3px;
  background: rgba(19,18,17,0.6); padding: 0.8rem 1rem;
  font-size: 0.82rem; color: var(--cream-dim); margin-bottom: 0.6rem;
}
.wmock__bubble--user { border-radius: 12px 12px 3px 12px; background: rgba(217,98,60,0.12); border-color: rgba(217,98,60,0.3); color: var(--cream); }
.wmock__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.wmock__chips span { font-size: 0.72rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.3rem 0.7rem; color: var(--cream-dim); }
.wmock__bars > div { display: grid; grid-template-columns: 5.4rem 1fr 1.6rem; gap: 0.6rem; align-items: center; margin: 0.5rem 0; font-size: 0.72rem; color: var(--cream-dim); }
.wmock__bars .bar { height: 4px; border-radius: 2px; background: rgba(243,241,236,0.1); position: relative; }
.wmock__bars .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--green); }
.wmock__bars b { color: var(--green-bright); font-size: 0.78rem; text-align: right; }
.wmock__quote { font-family: var(--serif); font-style: italic; font-size: 0.98rem; color: var(--cream); line-height: 1.5; }
.wmock__quote footer { font-family: var(--data); font-style: normal; font-size: 0.72rem; color: var(--cream-faint); margin-top: 0.6rem; }
.wmock__pm { font-size: 0.8rem; }
.wmock__pm p { margin: 0.35rem 0 !important; padding-left: 1.1rem; position: relative; font-size: 0.8rem; }
.wmock__pm p::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.wmock__pm p.neg::before { background: var(--red); }
.wmock__vs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; font-size: 0.72rem; text-align: center; }
.wmock__vs > div { border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.4rem; color: var(--cream-dim); }
.wmock__vs b { display: block; color: var(--green-bright); font-size: 1.05rem; margin-top: 0.2rem; }
.wmock__play { width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; margin: 0 auto; }
.wmock__play::after { content: ""; border-left: 14px solid var(--cream-dim); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }

/* Ask Ari — answer provenance: the experiential sources behind a reply */
.wmock__cite { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.wmock__cite b { font-family: var(--data); font-weight: 500; font-size: 0.64rem; letter-spacing: 0.01em; color: var(--orange-soft); border: 1px solid rgba(224,138,100,0.28); background: rgba(217,98,60,0.08); border-radius: 999px; padding: 0.18rem 0.5rem; }
.wmock__grounded { font-family: var(--data); font-size: 0.68rem; color: var(--cream-faint); margin: 0.55rem 0 0 !important; display: flex; align-items: center; gap: 0.4rem; }
.wmock__grounded::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }

/* Social proof — the range of real sources behind every widget */
.proof__top { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,0.95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
@media (max-width: 860px) { .proof__top { grid-template-columns: 1fr; } }
.proof__art { width: 100%; max-width: 400px; margin: 0 auto; text-align: center; }
@media (max-width: 860px) { .proof__art { max-width: 320px; order: -1; } }
.proof__art canvas { display: block; width: 100%; aspect-ratio: 1 / 1; }
/* label sits below the canvas (never over the morphing shape) */
.proof__art-label { margin: 0.4rem 0 0; font-family: var(--data); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); }
.proof__intro { max-width: 40rem; }
.proof__intro h2 { font-family: var(--serif); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 500; color: var(--cream); line-height: 1.12; margin: 0.5rem 0 1rem; }
.proof__intro h2 em { font-style: italic; color: var(--orange-soft); }
.proof__lede { color: var(--cream-dim); max-width: 40rem; line-height: 1.6; }
/* One-line source ticker — creators, retailers, and expert publications
   across every category, scrolling as a single marquee (no separate
   sections). Two identical sets translate -50% for a seamless loop. */
.proof__note { border-top: 1px dashed rgba(243,241,236,0.09); padding-top: 1.6rem; margin: 0 0 1.3rem; font-family: var(--data); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); }
.proof__ticker { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker-scroll 60s linear infinite; }
.proof__ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__set { display: flex; align-items: center; flex: none; gap: clamp(2.2rem, 4vw, 3.4rem); padding-right: clamp(2.2rem, 4vw, 3.4rem); }
.tick { display: inline-flex; align-items: center; flex: none; }
/* actual brand logos (real SVGs), tinted to a uniform cream monochrome so
   the wall reads as one system on the dark band; brighten on hover */
/* uniform optical size: cap height + width so no wordmark dominates and
   no icon looks lost; object-fit keeps aspect within that box */
.tick__logo { display: block; width: auto; height: 21px; max-width: 116px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.5; transition: opacity 0.25s ease; }
.tick__logo--icon { height: 27px; }  /* compact square marks get a touch more */
.tick:hover .tick__logo { opacity: 0.92; }
@keyframes ticker-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .proof__ticker { -webkit-mask-image: none; mask-image: none; }
  .ticker__track { animation: none; flex-wrap: wrap; width: 100%; }
  .ticker__set { flex-wrap: wrap; }
  .ticker__set + .ticker__set { display: none; }
}

/* deep-link anchors on docs headings */
.h-anchor {
  margin-left: 0.5em;
  display: inline-flex; align-items: center;
  vertical-align: middle;
  transform: translateY(-1px);
  color: var(--orange-soft) !important;
  border: none !important;
  opacity: 0;
  transition: opacity 0.25s;
}
h2:hover .h-anchor, .h-anchor:focus-visible, .h-anchor.is-copied { opacity: 1; }
/* no hover on touch devices — keep the anchor quietly visible so the
   copy affordance is discoverable at all */
@media (hover: none) {
  .h-anchor { opacity: 0.5; }
}
.h-anchor.is-copied { color: var(--green-light) !important; }

/* prev/next pager */
.docs-pager {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--line);
  margin-top: clamp(2.6rem, 5vw, 3.6rem);
  padding-top: 1.4rem;
}
.docs-pager__link {
  display: block; max-width: 46%;
  border: none !important;
}
.docs-pager__link--next { text-align: right; margin-left: auto; }
.docs-pager__link i {
  display: block; font-style: normal;
  font-family: var(--sans); font-size: 0.6rem; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--cream-faint); margin-bottom: 0.3rem;
  transition: color 0.25s;
}
.docs-pager__link b {
  font-family: var(--data); font-size: 0.92rem; font-weight: 600;
  color: var(--cream-dim); transition: color 0.25s;
  overflow-wrap: anywhere;
}
.docs-pager__link:hover i { color: var(--orange-soft); }
.docs-pager__link:hover b { color: var(--cream); }

/* docs search */
.docs-search { position: relative; margin-bottom: 1.6rem; }
@media (max-width: 900px) { .docs-search { width: 100%; } }
.docs-search input {
  width: 100%;
  font-family: var(--data); font-size: 0.84rem;
  color: var(--cream);
  background: rgba(28,26,24,0.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  transition: border-color 0.3s;
}
.docs-search input:focus { outline: none; border-color: rgba(217,98,60,0.6); }
.docs-search__results {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: min(340px, 84vw);
  background: #1E1C19;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  box-shadow: 0 18px 50px -12px rgba(0,0,0,0.6);
  overflow: hidden;
}
.docs-search__results a {
  display: block; padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line);
  border-radius: 0 !important;
}
.docs-search__results a:last-child { border-bottom: none; }
.docs-search__results a:hover { background: rgba(243,241,236,0.04); }
.docs-search__results b {
  display: block;
  font-family: var(--data); font-size: 0.8rem; font-weight: 600;
  color: var(--cream);
}
.docs-search__results span {
  display: block;
  font-family: var(--data); font-size: 0.72rem;
  color: var(--cream-faint); margin-top: 0.15rem; line-height: 1.4;
}
.docs-search__none { margin: 0; padding: 0.7rem 0.95rem; font-family: var(--data); font-size: 0.8rem; color: var(--cream-faint); }

/* skip link */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 10001;
  transform: translateY(-260%);
  font-family: var(--sans, sans-serif); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--orange, #D9623C); color: #F3F1EC;
  padding: 0.8rem 1.2rem; border-radius: 6px;
  transition: transform 0.25s;
}
.skip-link:focus { transform: none; }

/* playground */
.pg { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: start; }
@media (max-width: 880px) { .pg { grid-template-columns: 1fr; } }
.pg__panel {
  border: 1px solid var(--line); border-radius: 12px;
  background: linear-gradient(160deg, rgba(36,33,30,0.5), rgba(28,26,24,0.25));
  padding: 1.4rem;
}
.pg__label {
  font-family: var(--sans); font-size: 0.62rem; font-weight: 700;
  letter-spacing: var(--track); text-transform: uppercase;
  color: var(--cream-dim); margin: 1.2rem 0 0.55rem;
}
.pg__label:first-child { margin-top: 0; }
.pg input[type="text"] {
  width: 100%;
  font-family: var(--mono); font-size: 0.84rem;
  color: var(--cream);
  background: rgba(19,18,17,0.7);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0.75rem 0.95rem;
}
.pg input[type="text"]:focus { outline: none; border-color: rgba(217,98,60,0.6); }
/* Visible menu of catalog examples — the datalist alone is a hidden typeahead,
   so clicking a prefilled field looked broken; these make the options plain. */
.pg-examples { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.pg-chip {
  font-family: var(--mono); font-size: 0.72rem; line-height: 1;
  color: var(--cream-dim);
  background: rgba(19,18,17,0.55);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.4rem 0.72rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.pg-chip:hover { color: var(--cream); border-color: var(--line-strong); }
.pg-chip.is-active {
  color: var(--orange-soft); border-color: var(--orange);
  background: rgba(217,98,60,0.1);
}
.pg-chip:focus-visible { outline: 2px solid var(--orange-soft); outline-offset: 2px; }
.pg__run { margin-top: 1.4rem; border: none; width: 100%; }
.pg__hint { font-family: var(--data); font-size: 0.74rem; color: var(--cream-faint); margin-top: 0.9rem; line-height: 1.5; }
.pg__meta {
  display: none;
  font-family: var(--mono); font-size: 0.72rem; color: var(--cream-faint);
  margin-bottom: 0.7rem;
}
.pg__meta b { color: var(--green-bright); font-weight: 500; }
.pg__out .codeblock pre { max-height: 560px; overflow: auto; }
.pg__out .codeblock { margin: 0; }
.pg--ran .pg__meta { display: block; }
.pg__spinner {
  display: none;
  font-family: var(--mono); font-size: 0.74rem; color: var(--orange-soft);
}
.pg--busy .pg__spinner { display: block; }


/* long code tokens (tool names) wrap at their <wbr> points; anywhere is the
   fallback so no future token can overflow its card on narrow screens */
.card-link b, .page__title em { overflow-wrap: anywhere; }