/* ============================================================
   tea.restaurant — page styles + new tt-* components
   Inherits tokens from assets/colors_and_type.css
   ============================================================ */

/* ---------- Reset within artboard ---------- */
.tr-root { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg); }
.tr-root *, .tr-root *::before, .tr-root *::after { box-sizing: border-box; }
.tr-root a { color: inherit; text-decoration: none; border: 0; }
.tr-root h1, .tr-root h2, .tr-root h3, .tr-root h4, .tr-root p, .tr-root ul, .tr-root figure { margin: 0; padding: 0; }
.tr-root ul { list-style: none; }
.tr-root img { display: block; max-width: 100%; }
.tr-root button { font: inherit; cursor: pointer; }

/* ============================================================
   CONSTELLATION BAR — thin top strip per global brief
   ============================================================ */
.tr-constellation {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 32px;
  background: var(--ink); color: rgba(245,239,224,0.65);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(245,239,224,0.08);
}
.tr-constellation__siblings { display: flex; gap: 14px; align-items: center; flex-wrap: nowrap; overflow: hidden; }
.tr-constellation__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px;
  color: rgba(245,239,224,0.5);
  transition: color var(--d-1) var(--ease-tea);
}
.tr-constellation__pill:hover { color: var(--cream); }
.tr-constellation__pill--current { color: var(--cream); background: var(--steep); }
.tr-constellation__pill--visited { color: rgba(245,239,224,0.35); }
.tr-constellation__dot { width: 4px; height: 4px; border-radius: 999px; background: currentColor; opacity: 0.6; }
.tr-constellation__current { color: var(--cream); }
.tr-constellation__current em { color: var(--matcha); font-style: italic; font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-size: 12px; }

/* ============================================================
   HEADER — slim sub-brand header for tea.restaurant
   ============================================================ */
.tr-header {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px;
  padding: 20px 48px; background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
}
.tr-brand { display: flex; align-items: baseline; gap: 10px; }
.tr-brand__mark { width: 26px; height: 26px; display: block; align-self: center; }
.tr-brand__name { font-family: var(--font-display); font-size: 22px; letter-spacing: -0.025em; color: var(--ink); }
.tr-brand__name em { font-style: italic; color: var(--steep); }
.tr-brand__sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); padding-left: 12px; margin-left: 8px; border-left: 1px solid var(--border); align-self: center; }
.tr-nav { justify-self: center; display: flex; gap: 28px; }
.tr-nav a { font-size: 13px; color: var(--ink); transition: color var(--d-1) var(--ease-tea); position: relative; padding: 4px 0; }
.tr-nav a.is-current { color: var(--steep); }
.tr-nav a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--steep); }
.tr-nav a:hover { color: var(--steep); }
.tr-header__actions { display: flex; align-items: center; gap: 14px; }
.tr-header__phone { font-family: var(--font-mono); font-size: 11px; color: var(--stone); letter-spacing: 0.04em; }
.tr-header__cta { font-family: var(--font-sans); font-size: 13px; padding: 9px 16px; background: var(--ink); color: var(--cream); border: 0; border-radius: 999px; transition: background var(--d-2) var(--ease-tea); }
.tr-header__cta:hover { background: var(--steep); }

/* ============================================================
   HERO — editorial, restaurant-positioned
   ============================================================ */
.tr-hero { padding: 72px 48px 0; max-width: 1440px; margin: 0 auto; }
.tr-hero__eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); margin-bottom: 36px; }
.tr-hero__eyebrow .tr-rule { flex: 0 0 56px; height: 1px; background: var(--border-strong); }
.tr-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: end; }
.tr-hero__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 7.2vw, 112px); line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
.tr-hero__title em { font-style: italic; color: var(--steep); }
.tr-hero__title-zh { display: block; font-family: var(--font-cjk); font-size: 0.32em; font-style: normal; color: var(--steep); margin-top: 18px; letter-spacing: 0.04em; }
.tr-hero__lede { max-width: 44ch; font-size: 17px; line-height: 1.55; color: var(--graphite); margin-top: 28px; }
.tr-hero__lede strong { font-weight: 500; color: var(--ink); font-style: normal; }
.tr-hero__cta { display: flex; align-items: center; gap: 22px; margin-top: 36px; }
.tr-hero__btn { padding: 14px 26px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; background: var(--steep); color: var(--cream); border: 0; border-radius: 999px; transition: background var(--d-2) var(--ease-tea); }
.tr-hero__btn:hover { background: var(--steep-500); }
.tr-hero__link { font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.tr-hero__link:hover { color: var(--steep); border-color: var(--steep); }
.tr-hero__image { position: relative; aspect-ratio: 4 / 5; background: var(--paper); border: 1px solid var(--border); overflow: hidden; }
.tr-hero__image image-slot { width: 100%; height: 100%; display: block; --is-bg: var(--mist-50); --is-fg: var(--stone); }
.tr-hero__caption { position: absolute; left: 16px; bottom: 16px; background: var(--ink); color: var(--cream); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; padding: 6px 10px; }
.tr-hero__factstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--border); }
.tr-hero__fact { display: flex; flex-direction: column; gap: 6px; padding: 0 24px; border-right: 1px solid var(--border); }
.tr-hero__fact:first-child { padding-left: 0; }
.tr-hero__fact:last-child { border-right: 0; }
.tr-hero__fact-n { font-family: var(--font-display); font-size: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.tr-hero__fact-n em { font-style: italic; color: var(--steep); }
.tr-hero__fact-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }

/* ============================================================
   THREE REASONS — editorial, mono numerals
   ============================================================ */
.tr-reasons { padding: 120px 48px 0; max-width: 1440px; margin: 0 auto; }
.tr-section__head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: end; padding-bottom: 56px; }
.tr-section__eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); display: inline-flex; align-items: center; gap: 10px; }
.tr-section__eyebrow::before { content: "—"; color: var(--steep); }
.tr-section__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4vw, 64px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.tr-section__title em { font-style: italic; color: var(--steep); }
.tr-section__sub { font-family: var(--font-display); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--graphite); max-width: 44ch; }

.tr-reasons__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); }
.tr-reason { padding: 36px 28px 40px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 16px; }
.tr-reason:last-child { border-right: 0; }
.tr-reason:first-child { padding-left: 0; }
.tr-reason:last-child { padding-right: 0; }
.tr-reason__n { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--stone); }
.tr-reason__h { font-family: var(--font-display); font-size: 28px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.tr-reason__h em { font-style: italic; color: var(--steep); }
.tr-reason__body { font-size: 15px; line-height: 1.55; color: var(--graphite); }
.tr-reason__divider { margin: 12px 0 4px; height: 1px; background: var(--border); }
.tr-reason__detail { display: flex; flex-direction: column; gap: 8px; }
.tr-reason__detail-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--stone); letter-spacing: 0.02em; }
.tr-reason__detail-row b { color: var(--ink); font-weight: 500; }

/* ============================================================
   CASE STUDIES — editorial, alternating
   ============================================================ */
.tr-cases { padding: 120px 48px 0; max-width: 1440px; margin: 0 auto; }
.tr-cases__grid { display: grid; gap: 24px; margin-top: 0; }
.tr-case { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: stretch; padding: 32px 0; border-top: 1px solid var(--border); }
.tr-case:last-child { border-bottom: 1px solid var(--border); }
.tr-case--alt { grid-template-columns: 1fr 1.05fr; }
.tr-case--alt .tr-case__media { order: 2; }
.tr-case__media { aspect-ratio: 4 / 3; background: var(--paper); border: 1px solid var(--border); overflow: hidden; position: relative; }
.tr-case__media image-slot { width: 100%; height: 100%; display: block; --is-bg: var(--paper); --is-fg: var(--stone); }
.tr-case__copy { display: flex; flex-direction: column; gap: 18px; padding: 8px 0; }
.tr-case__loc { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); display: flex; align-items: center; gap: 14px; }
.tr-case__loc-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--steep); }
.tr-case__name { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.tr-case__name em { font-style: italic; color: var(--steep); }
.tr-case__pull { font-family: var(--font-display); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--graphite); max-width: 48ch; }
.tr-case__pull::before { content: "“"; font-family: var(--font-display); font-style: normal; color: var(--steep); margin-right: 4px; }
.tr-case__pull::after { content: "”"; font-family: var(--font-display); font-style: normal; color: var(--steep); }
.tr-case__attrib { font-family: var(--font-sans); font-size: 12px; color: var(--stone); letter-spacing: 0.04em; }
.tr-case__attrib em { font-style: italic; color: var(--ink); }
.tr-case__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.tr-case__metric { display: flex; flex-direction: column; gap: 4px; padding-right: 16px; }
.tr-case__metric-n { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.tr-case__metric-n em { font-style: italic; color: var(--steep); }
.tr-case__metric-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.tr-case__cta { margin-top: auto; padding-top: 14px; }
.tr-case__link { font-size: 13px; border-bottom: 1px solid var(--ink); color: var(--ink); padding-bottom: 2px; }
.tr-case__link:hover { color: var(--steep); border-color: var(--steep); }

/* ============================================================
   CTA — Quote
   ============================================================ */
.tr-cta { padding: 120px 48px 96px; max-width: 1440px; margin: 0 auto; }
.tr-cta__card { background: var(--steep); color: var(--cream); padding: 72px 64px; border-radius: 4px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; position: relative; overflow: hidden; }
.tr-cta__title { font-family: var(--font-display); font-size: clamp(36px, 4vw, 64px); line-height: 1.02; letter-spacing: -0.03em; color: var(--cream); }
.tr-cta__title em { font-style: italic; color: #E5C691; /* Saffron-warm — restaurant warmth */ }
.tr-cta__lede { font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.5; color: rgba(245,239,224,0.78); max-width: 36ch; margin-top: 18px; }
.tr-cta__steps { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(245,239,224,0.18); }
.tr-cta__step { display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(245,239,224,0.18); }
.tr-cta__step-n { font-family: var(--font-mono); font-size: 11px; color: rgba(245,239,224,0.5); letter-spacing: 0.04em; }
.tr-cta__step-l { font-family: var(--font-sans); font-size: 16px; color: var(--cream); }
.tr-cta__step-t { font-family: var(--font-mono); font-size: 11px; color: rgba(245,239,224,0.5); letter-spacing: 0.04em; }
.tr-cta__btn { margin-top: 26px; padding: 14px 26px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; background: var(--cream); color: var(--steep); border: 0; border-radius: 999px; align-self: flex-start; }
.tr-cta__btn:hover { background: #fff; }

/* ============================================================
   FOOTER (slim)
   ============================================================ */
.tr-footer { padding: 56px 48px 32px; background: var(--ink); color: rgba(245,239,224,0.75); border-top: 1px solid rgba(245,239,224,0.06); }
.tr-footer__inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 48px; }
.tr-footer__brand { display: flex; flex-direction: column; gap: 14px; }
.tr-footer__name { font-family: var(--font-display); font-size: 28px; color: var(--cream); letter-spacing: -0.025em; }
.tr-footer__name em { font-style: italic; color: #E5C691; }
.tr-footer__line { font-family: var(--font-display); font-style: italic; font-size: 17px; color: rgba(245,239,224,0.7); max-width: 28ch; }
.tr-footer h4 { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245,239,224,0.45); margin-bottom: 14px; }
.tr-footer__col a { display: block; padding: 4px 0; font-size: 13px; color: rgba(245,239,224,0.78); }
.tr-footer__col a:hover { color: var(--cream); }
.tr-footer__bot { max-width: 1440px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid rgba(245,239,224,0.08); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: rgba(245,239,224,0.4); }

/* ============================================================
   tt-case-study-card  (new component)
   ============================================================ */
.tt-case-study-card {
  display: grid; grid-template-rows: 240px auto;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 2px; overflow: hidden;
  transition: border-color var(--d-2) var(--ease-tea), transform var(--d-2) var(--ease-tea);
}
.tt-case-study-card:hover { border-color: var(--steep); }
.tt-case-study-card__media { position: relative; background: var(--mist-50); overflow: hidden; }
.tt-case-study-card__media image-slot { width: 100%; height: 100%; display: block; --is-bg: var(--mist-50); --is-fg: var(--stone); }
.tt-case-study-card__tag { position: absolute; top: 12px; left: 12px; background: var(--ink); color: var(--cream); font-family: var(--font-mono); font-size: 10px; padding: 4px 8px; letter-spacing: 0.14em; }
.tt-case-study-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.tt-case-study-card__loc { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); }
.tt-case-study-card__name { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -0.025em; color: var(--ink); }
.tt-case-study-card__name em { font-style: italic; color: var(--steep); }
.tt-case-study-card__cuisine { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--graphite); }
.tt-case-study-card__pull { font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.45; color: var(--graphite); padding-top: 12px; border-top: 1px solid var(--border); }
.tt-case-study-card__metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 4px; }
.tt-case-study-card__metric { display: flex; flex-direction: column; gap: 2px; }
.tt-case-study-card__metric-n { font-family: var(--font-display); font-size: 22px; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.tt-case-study-card__metric-n em { font-style: italic; color: var(--steep); }
.tt-case-study-card__metric-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
.tt-case-study-card__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; }
.tt-case-study-card__link { font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px; }
.tt-case-study-card__link:hover { color: var(--steep); border-color: var(--steep); }

/* ============================================================
   tt-pairing-matrix  (new component)
   Tea × cuisine library — grid of cells with intensity dots.
   ============================================================ */
.tt-pairing-matrix {
  display: grid;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.tt-pairing-matrix__corner { background: var(--mist-50); padding: 16px 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.tt-pairing-matrix__corner-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.tt-pairing-matrix__corner-sub { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--graphite); }
.tt-pairing-matrix__colhead {
  background: var(--mist-50); padding: 16px 12px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
}
.tt-pairing-matrix__colhead:last-of-type { border-right: 0; }
.tt-pairing-matrix__colhead-name { font-family: var(--font-display); font-size: 16px; line-height: 1.05; letter-spacing: -0.01em; color: var(--ink); }
.tt-pairing-matrix__colhead-zh { font-family: var(--font-cjk); font-size: 12px; color: var(--stone); }
.tt-pairing-matrix__colhead-cat { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); display: inline-flex; align-items: center; gap: 4px; }
.tt-pairing-matrix__colhead-dot { width: 6px; height: 6px; border-radius: 999px; }
.tt-pairing-matrix__rowhead {
  background: var(--cream-50); padding: 18px 16px;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.tt-pairing-matrix__rowhead-name { font-family: var(--font-display); font-style: italic; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
.tt-pairing-matrix__rowhead-sub { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); }
.tt-pairing-matrix__cell {
  padding: 16px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; transition: background var(--d-1) var(--ease-tea);
}
.tt-pairing-matrix__cell:last-of-type { border-right: 0; }
.tt-pairing-matrix__cell:hover { background: var(--steep-100); }
.tt-pairing-matrix__cell--best { background: rgba(23,66,46,0.05); }
.tt-pairing-matrix__cell--best:hover { background: var(--steep-100); }
.tt-pairing-matrix__dots { display: flex; gap: 3px; }
.tt-pairing-matrix__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--mist); }
.tt-pairing-matrix__dot.is-on { background: var(--steep); }
.tt-pairing-matrix__hint { font-family: var(--font-display); font-style: italic; font-size: 11px; line-height: 1.2; color: var(--stone); text-align: center; }
.tt-pairing-matrix__cell--best .tt-pairing-matrix__hint { color: var(--ink); }
.tt-pairing-matrix__row:last-child .tt-pairing-matrix__cell,
.tt-pairing-matrix__row:last-child .tt-pairing-matrix__rowhead { border-bottom: 0; }

/* ============================================================
   tt-pricing-tier  (new component)
   ============================================================ */
.tt-pricing-tier {
  background: var(--paper); border: 1px solid var(--border);
  border-radius: 2px; padding: 32px 28px 28px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
.tt-pricing-tier--featured {
  background: var(--steep); color: var(--cream); border-color: var(--steep);
}
.tt-pricing-tier__badge { position: absolute; top: -10px; left: 24px; background: var(--oolong); color: var(--cream); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; padding: 4px 10px; }
.tt-pricing-tier__head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.tt-pricing-tier--featured .tt-pricing-tier__head { border-color: rgba(245,239,224,0.2); }
.tt-pricing-tier__name { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: -0.025em; color: var(--ink); }
.tt-pricing-tier--featured .tt-pricing-tier__name { color: var(--cream); }
.tt-pricing-tier__name em { font-style: italic; color: var(--steep); }
.tt-pricing-tier--featured .tt-pricing-tier__name em { color: #E5C691; }
.tt-pricing-tier__forwhom { font-family: var(--font-display); font-style: italic; font-size: 14px; color: var(--graphite); }
.tt-pricing-tier--featured .tt-pricing-tier__forwhom { color: rgba(245,239,224,0.7); }
.tt-pricing-tier__price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.tt-pricing-tier__price-n { font-family: var(--font-display); font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.tt-pricing-tier--featured .tt-pricing-tier__price-n { color: var(--cream); }
.tt-pricing-tier__price-u { font-family: var(--font-mono); font-size: 11px; color: var(--stone); letter-spacing: 0.04em; }
.tt-pricing-tier--featured .tt-pricing-tier__price-u { color: rgba(245,239,224,0.6); }
.tt-pricing-tier__features { display: flex; flex-direction: column; gap: 8px; }
.tt-pricing-tier__feat { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--border); }
.tt-pricing-tier--featured .tt-pricing-tier__feat { color: var(--cream); border-color: rgba(245,239,224,0.12); }
.tt-pricing-tier__feat-mark { color: var(--steep); font-family: var(--font-mono); font-size: 14px; line-height: 1; }
.tt-pricing-tier--featured .tt-pricing-tier__feat-mark { color: #E5C691; }
.tt-pricing-tier__feat-spec { font-family: var(--font-mono); font-size: 10px; color: var(--stone); letter-spacing: 0.04em; }
.tt-pricing-tier--featured .tt-pricing-tier__feat-spec { color: rgba(245,239,224,0.55); }
.tt-pricing-tier__cta { margin-top: 12px; padding: 12px 22px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; align-self: flex-start; transition: all var(--d-2) var(--ease-tea); }
.tt-pricing-tier__cta:hover { background: var(--ink); color: var(--cream); }
.tt-pricing-tier--featured .tt-pricing-tier__cta { background: var(--cream); color: var(--steep); border: 1px solid var(--cream); }
.tt-pricing-tier--featured .tt-pricing-tier__cta:hover { background: #fff; }
.tt-pricing-tier__foot { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--stone); padding-top: 8px; border-top: 1px solid var(--border); }
.tt-pricing-tier--featured .tt-pricing-tier__foot { color: rgba(245,239,224,0.6); border-color: rgba(245,239,224,0.12); }

/* ============================================================
   PAIRINGS page header band
   ============================================================ */
.tr-pairings { padding: 56px 48px 96px; max-width: 1440px; margin: 0 auto; }
.tr-pairings__lede { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; padding-bottom: 48px; align-items: end; }
.tr-pairings__cuisine-strip { display: flex; gap: 8px; flex-wrap: wrap; padding: 16px 0 32px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 32px; }
.tr-pairings__chip { padding: 8px 14px; font-family: var(--font-sans); font-size: 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: transparent; transition: all var(--d-1) var(--ease-tea); cursor: pointer; }
.tr-pairings__chip:hover { border-color: var(--steep); color: var(--steep); }
.tr-pairings__chip.is-on { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.tr-pairings__legend { display: flex; gap: 24px; padding: 16px 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); }
.tr-pairings__legend-item { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   PRICING page
   ============================================================ */
.tr-pricing { padding: 64px 48px 96px; max-width: 1440px; margin: 0 auto; }
.tr-pricing__head { padding-bottom: 56px; max-width: 64ch; }
.tr-pricing__toggle { display: inline-flex; padding: 4px; background: var(--mist-50); border: 1px solid var(--border); border-radius: 999px; margin-top: 28px; }
.tr-pricing__toggle-btn { padding: 8px 16px; font-family: var(--font-sans); font-size: 12px; background: transparent; border: 0; border-radius: 999px; color: var(--stone); cursor: pointer; letter-spacing: 0.02em; }
.tr-pricing__toggle-btn.is-on { background: var(--ink); color: var(--cream); }
.tr-pricing__toggle-save { font-family: var(--font-mono); font-size: 9px; color: var(--matcha); margin-left: 6px; letter-spacing: 0.1em; }
.tr-pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tr-pricing__tablewrap { margin-top: 80px; }
.tr-pricing__table { width: 100%; border-collapse: collapse; }
.tr-pricing__table th, .tr-pricing__table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
.tr-pricing__table th { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); font-weight: 500; }
.tr-pricing__table th:not(:first-child), .tr-pricing__table td:not(:first-child) { text-align: center; }
.tr-pricing__table .yes { color: var(--steep); font-family: var(--font-mono); }
.tr-pricing__table .no { color: var(--stone); font-family: var(--font-mono); }

/* ============================================================
   VOICE LIBRARY
   ============================================================ */
.tr-voice { padding: 64px 48px 96px; max-width: 1280px; margin: 0 auto; }
.tr-voice__head { padding-bottom: 48px; max-width: 64ch; }
.tr-voice__legend { display: flex; gap: 16px; margin-top: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--stone); }
.tr-voice__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--border); }
.tr-voice__col { padding: 24px 28px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 18px; }
.tr-voice__col:last-child { border-right: 0; }
.tr-voice__col:first-child { padding-left: 0; }
.tr-voice__col:last-child { padding-right: 0; }
.tr-voice__cat { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--stone); padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.tr-voice__item { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
.tr-voice__item:last-child { border-bottom: 0; }
.tr-voice__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: var(--stone); text-transform: uppercase; }
.tr-voice__text { font-family: var(--font-display); font-size: 17px; line-height: 1.35; color: var(--ink); letter-spacing: -0.01em; }
.tr-voice__text em { font-style: italic; color: var(--steep); }
.tr-voice__text--alt { font-family: var(--font-sans); font-size: 14px; color: var(--graphite); font-style: italic; }

/* ============================================================
   MOBILE responsive — applied to mobile artboard
   ============================================================ */
.tr-mobile .tr-header { padding: 14px 18px; grid-template-columns: 1fr auto; gap: 12px; }
.tr-mobile .tr-nav { display: none; }
.tr-mobile .tr-header__phone { display: none; }
.tr-mobile .tr-header__cta { padding: 7px 12px; font-size: 12px; }
.tr-mobile .tr-hero { padding: 24px 18px 0; }
.tr-mobile .tr-hero__grid { grid-template-columns: 1fr; gap: 32px; }
.tr-mobile .tr-hero__title { font-size: 52px; line-height: 0.95; }
.tr-mobile .tr-hero__lede { font-size: 15px; }
.tr-mobile .tr-hero__factstrip { grid-template-columns: repeat(2, 1fr); }
.tr-mobile .tr-hero__fact { padding: 14px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.tr-mobile .tr-hero__fact:nth-child(odd) { padding-left: 0; }
.tr-mobile .tr-hero__fact:nth-child(2n) { border-right: 0; }
.tr-mobile .tr-hero__fact-n { font-size: 28px; }
.tr-mobile .tr-reasons { padding: 64px 18px 0; }
.tr-mobile .tr-section__head { grid-template-columns: 1fr; gap: 18px; }
.tr-mobile .tr-section__title { font-size: 36px; }
.tr-mobile .tr-reasons__grid { grid-template-columns: 1fr; }
.tr-mobile .tr-reason { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--border); }
.tr-mobile .tr-reason:last-child { border-bottom: 0; }
.tr-mobile .tr-cases { padding: 64px 18px 0; }
.tr-mobile .tr-case, .tr-mobile .tr-case--alt { grid-template-columns: 1fr; gap: 22px; padding: 28px 0; }
.tr-mobile .tr-case--alt .tr-case__media { order: 0; }
.tr-mobile .tr-case__name { font-size: 32px; }
.tr-mobile .tr-case__pull { font-size: 17px; }
.tr-mobile .tr-cta { padding: 64px 18px; }
.tr-mobile .tr-cta__card { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
.tr-mobile .tr-cta__title { font-size: 34px; }
.tr-mobile .tr-footer { padding: 40px 18px 24px; }
.tr-mobile .tr-footer__inner { grid-template-columns: 1fr 1fr; gap: 28px; }
.tr-mobile .tr-footer__brand { grid-column: span 2; }
.tr-mobile .tr-footer__bot { flex-direction: column; gap: 8px; }

/* tablet artboard tweaks */
.tr-tablet .tr-hero__grid { grid-template-columns: 1fr; gap: 32px; }
.tr-tablet .tr-hero__title { font-size: 80px; }
.tr-tablet .tr-reasons__grid { grid-template-columns: 1fr; }
.tr-tablet .tr-reason { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--border); }
.tr-tablet .tr-reason:last-child { border-bottom: 0; }
.tr-tablet .tr-nav { gap: 18px; }

/* Dark theme tweaks (consts override) */
[data-theme="dark"] .tr-cta__card { background: var(--steep); }
[data-theme="dark"] .tt-pairing-matrix__corner { background: var(--bg-tonal); }
[data-theme="dark"] .tt-pairing-matrix__colhead { background: var(--bg-tonal); }
[data-theme="dark"] .tt-pairing-matrix__rowhead { background: var(--bg-raised); }
[data-theme="dark"] .tt-pairing-matrix__cell--best { background: rgba(111,154,82,0.06); }
[data-theme="dark"] .tr-constellation { background: #000; }
[data-theme="dark"] .tr-footer { background: #000; }