/* ==========================================================================
   Readybet.co — Terms & Conditions page
   Desktop: hero-banner (305) + main-reading-pane (rail 240 | prose 760 | status 160)
   Mobile:  hero-banner (243) + jump-to-clause (354) + main-reading-pane-mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero banner
   -------------------------------------------------------------------------- */
.tc-hero {
  background: var(--sand);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 79px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
}
.tc-hero__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tc-hero__tag { display: flex; align-items: center; gap: 8px; }
.tc-hero__badge {
  background: var(--orange); color: var(--white); border-radius: 4px; padding: 2px 6px;
  font-family: var(--f-body); font-weight: 900; font-size: 11px; line-height: 14px; white-space: nowrap;
}
.tc-hero__kicker { font-family: var(--f-body); font-weight: 700; font-size: 13px; line-height: 17px; letter-spacing: 1.5px; color: var(--muted); white-space: nowrap; }
.tc-hero__title { font-family: var(--f-head); font-weight: 700; font-size: 64px; line-height: 61px; letter-spacing: -2px; color: var(--ink); }
.tc-hero__meta { display: flex; align-items: center; gap: 16px; font-family: var(--f-body); font-size: 14px; line-height: 18px; color: var(--muted); }
.tc-hero__published { font-weight: 700; color: var(--ink); white-space: nowrap; }
.tc-hero__count { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; }
.tc-hero__range { font-family: var(--f-head); font-weight: 700; font-size: 96px; line-height: 77px; color: var(--orange); opacity: .15; white-space: nowrap; }
.tc-hero__divisions { font-family: var(--f-body); font-weight: 700; font-size: 14px; line-height: 18px; color: var(--ink); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Main reading pane (desktop: 3 columns)
   -------------------------------------------------------------------------- */
.tc-main { display: flex; align-items: flex-start; gap: 48px; padding: 64px var(--gutter) 80px; }

/* Navigation rail --------------------------------------------------------- */
.tc-rail {
  flex: 0 0 240px; width: 240px;
  position: sticky; top: 24px;
  display: flex; flex-direction: column; gap: 8px;
  transition: top .25s ease;
}
.tc-rail__title { font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.tc-rail__list { display: flex; flex-direction: column; gap: 4px; }
.tc-rail__item {
  display: flex; align-items: center; gap: 12px; height: 35px; padding: 8px 12px; border-radius: 6px;
  transition: background-color .15s ease;
}
.tc-rail__item:hover { background: rgba(245, 229, 211, .55); }
.tc-rail__num { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; color: var(--muted); white-space: nowrap; }
.tc-rail__label { font-family: var(--f-head); font-weight: 500; font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-rail__item.is-active { background: var(--sand); }
.tc-rail__item.is-active .tc-rail__num { color: var(--orange); }
.tc-rail__item.is-active .tc-rail__label { color: var(--ink); font-weight: 700; }

/* Prose lane ---------------------------------------------------------------- */
/* Figma draws the clause separators as zero-height LINE nodes with an inside stroke, which render
   invisibly in the design export. The <hr>s keep the spacing; set --tc-rule: var(--line) to show them. */
.page-terms { --tc-rule: transparent; }
.tc-prose { flex: 0 1 760px; width: 760px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; }
.tc-group { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: 1.5px; color: var(--orange); padding-bottom: 16px; }
.tc-section { display: flex; flex-direction: column; scroll-margin-top: 24px; }
.tc-section__head { display: flex; align-items: center; gap: 8px; height: 43px; }
.tc-section__num { font-family: var(--f-head); font-weight: 700; font-size: 32px; line-height: 43px; color: var(--orange); }
.tc-section__kicker { font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 16px; color: var(--muted); }
.tc-section__title { font-family: var(--f-head); font-weight: 700; font-size: 28px; line-height: 38px; color: var(--ink); }
.tc-section__body { display: flex; flex-direction: column; gap: 12px; }
.tc-section__body p { font-family: var(--f-body); font-size: 16px; line-height: 28px; color: var(--ink); }
.tc-section__body--defs p { line-height: 27px; }
.tc-section__body strong { font-weight: 700; }
.tc-section--intro .tc-section__body { gap: 0; }
.tc-section--rg { background: var(--sky); border-radius: 16px; padding: 24px; }
.tc-section--rg .tc-section__kicker { color: var(--ink); }
.tc-divider { border: 0; margin: 0; height: 80px; background: linear-gradient(var(--tc-rule), var(--tc-rule)) 0 39px / 100% 1px no-repeat; }

/* Reading status column ------------------------------------------------------ */
.tc-status { flex: 0 0 160px; width: 160px; position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
.tc-status__block { display: flex; flex-direction: column; gap: 4px; }
.tc-status__label { font-family: var(--f-head); font-weight: 700; font-size: 11px; line-height: 15px; letter-spacing: 1.5px; color: var(--muted); }
.tc-status__value { font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 22px; color: var(--ink); }
.tc-status__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tc-status__links a { font-family: var(--f-body); font-weight: 700; font-size: 13px; line-height: 17px; white-space: nowrap; transition: opacity .15s ease; }
.tc-status__links a:hover { opacity: .75; }
.tc-status__prev { color: var(--muted); }
.tc-status__next { color: var(--orange); }
.tc-status__top { color: var(--ink); }
.tc-status__prev.is-disabled, .tc-status__next.is-disabled { cursor: default; }

/* Mobile jump block is desktop-hidden via .only-m */

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  .tc-hero { padding: 31px var(--mobile-gutter); flex-direction: column; align-items: stretch; gap: 0; }
  .tc-hero__main, .tc-hero__count { display: contents; }
  .tc-hero__tag { order: 1; gap: 8px; }
  .tc-hero__badge { font-size: 10px; line-height: 13px; }
  .tc-hero__kicker { font-size: 10px; line-height: 13px; letter-spacing: 1px; }
  .tc-hero__range { order: 2; margin-top: 16px; font-size: 36px; line-height: 48px; opacity: 1; }
  .tc-hero__title { order: 3; margin-top: 4px; font-size: 38px; line-height: 42px; letter-spacing: 0; }
  .tc-hero__divisions { order: 4; margin-top: 16px; font-size: 12px; line-height: 16px; }
  .tc-hero__meta { order: 5; margin-top: 4px; display: block; font-size: 12px; line-height: 16px; }
  .tc-hero__published { font-weight: 400; color: var(--muted); }

  /* Jump to clause */
  .tc-jump { flex-direction: column; gap: 16px; padding: 24px var(--mobile-gutter) 23px; background: var(--bg); border-bottom: 1px solid var(--tc-rule); }
  .tc-jump__title { font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; color: var(--muted); }
  .tc-jump__card { background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 11px; display: flex; flex-direction: column; gap: 8px; }
  .tc-jump__heading { font-family: var(--f-head); font-weight: 700; font-size: 13px; line-height: 18px; text-transform: uppercase; color: var(--muted); }
  .tc-jump__chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .tc-jump__chips li { display: flex; }
  .tc-jump__chip { font-family: var(--f-head); font-weight: 400; font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; }
  .tc-jump__chip.is-active { font-weight: 700; color: var(--orange); }
  .tc-jump__line { border: 0; margin: -1px 0 0; height: 1px; background: var(--tc-rule); }
  .tc-jump__note { font-family: var(--f-body); font-size: 12px; line-height: 16px; color: var(--muted); }
  .tc-jump__status { padding-top: 8px; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 16px; }
  .tc-jump__status-label { color: var(--muted); }
  .tc-jump__status-value { color: var(--ink); }
  .tc-jump__links { display: flex; align-items: center; gap: 12px; font-family: var(--f-body); font-weight: 700; font-size: 12px; line-height: 16px; }
  .tc-jump__prev { color: var(--muted); }
  .tc-jump__next { color: var(--orange); }
  .tc-jump__top { color: var(--ink); }
  .tc-jump__prev.is-disabled, .tc-jump__next.is-disabled { cursor: default; }

  /* Reading pane */
  .tc-main { display: block; padding: 24px var(--mobile-gutter) 40px; }
  .tc-prose { width: auto; gap: 32px; }
  .tc-group { line-height: 19px; padding-bottom: 0; }
  .tc-section { gap: 12px; scroll-margin-top: 16px; }
  .tc-section__head { height: 38px; }
  .tc-section__num { font-size: 28px; line-height: 38px; }
  .tc-section__kicker { letter-spacing: 1.5px; }
  .tc-section__title { font-size: 20px; line-height: 24px; }
  .tc-section__body { gap: 12px; }
  .tc-section__body p { font-size: 14px; line-height: 22px; }
  .tc-section__body--defs { gap: 10px; }
  .tc-section__body--defs p { line-height: 22px; }
  .tc-section--intro .tc-section__body { gap: 12px; }
  .tc-section--rg { border-radius: 12px; padding: 16px; }
  /* 0-height Figma line sits 12px under the last paragraph, 32px above the next section */
  .tc-divider { height: 1px; background: var(--tc-rule); margin-top: -21px; }
  .tc-section--rg + .tc-divider { margin-top: -1px; }
}