/* ==========================================================================
   Readybet.co — Cookie Policy page
   Desktop: 1440 (hero + main gutters 80px, sidebar 260 + gap 64 + doc 740)
   Mobile:  390 (stacked; 16px gutters)
   ========================================================================== */

.page-cookie { --cp-line: #d3c8b4; }

/* Hero ------------------------------------------------------------------- */
.cp-hero {
  background: var(--sand);
  box-shadow: inset 0 -1px 0 var(--line);
  padding: 80px 80px 64px;
}
.cp-hero__content { display: flex; flex-direction: column; gap: 16px; max-width: 740px; }
.cp-hero__eyebrow { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }
.cp-hero__title { font-family: var(--f-head); font-weight: 700; font-size: 64px; line-height: 67px; text-transform: uppercase; color: var(--ink); }
.cp-hero__meta { display: flex; align-items: center; gap: 16px; height: 18px; }
.cp-hero__org { font-family: var(--f-body); font-weight: 600; font-size: 14px; line-height: 18px; color: var(--ink); white-space: nowrap; }
.cp-hero__dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); opacity: .3; flex: 0 0 auto; }
.cp-hero__loc { font-family: var(--f-body); font-size: 14px; line-height: 18px; color: var(--ink); opacity: .6; white-space: nowrap; }

/* Main layout -------------------------------------------------------------- */
.cp-main { display: flex; align-items: flex-start; gap: 64px; padding: 64px 80px 96px; }

/* Sidebar rail ------------------------------------------------------------- */
.cp-rail { flex: 0 0 260px; width: 260px; align-self: stretch; }
.cp-rail__sticky { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 24px; }
.cp-rail__head { width: fit-content; padding-bottom: 8px; border-bottom: 1px solid var(--cp-line); }
.cp-rail__head span { display: block; font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); opacity: .4; white-space: nowrap; }
.cp-rail__links { display: flex; flex-direction: column; gap: 12px; }
.cp-rail__item { display: flex; align-items: center; gap: 12px; height: 19px; }
.cp-rail__num { flex: 0 0 auto; font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; color: var(--ink); opacity: .6; }
.cp-rail__label { flex: 1 1 auto; min-width: 0; font-family: var(--f-body); font-size: 13px; line-height: 17px; color: var(--ink); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-rail__item:hover .cp-rail__label { opacity: 1; }
.cp-rail__item.is-active .cp-rail__num { color: var(--orange); opacity: 1; }
.cp-rail__item.is-active .cp-rail__label { font-weight: 600; opacity: 1; }

.cp-search { display: flex; flex-direction: column; gap: 8px; background: #eadfc9; border: 1px solid var(--cp-line); border-radius: 6px; padding: 15px; }
.cp-search__label { font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.cp-search__field { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 9px; background: var(--bg); border: 1px solid var(--cp-line); border-radius: 4px; color: var(--ink); transition: border-color .15s ease; }
.cp-search__field svg { width: 14px; height: 14px; opacity: .4; flex: 0 0 auto; }
.cp-search__field input { flex: 1 1 auto; min-width: 0; height: 100%; font-family: var(--f-body); font-size: 12px; line-height: 16px; color: var(--ink); background: transparent; -webkit-appearance: none; appearance: none; }
.cp-search__field input::placeholder { color: var(--ink); opacity: .4; }
.cp-search__field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cp-search:focus-within .cp-search__field { border-color: var(--ink); }
.cp-search.no-results .cp-search__field { border-color: var(--orange); }
.cp-mark { background: var(--yellow); color: inherit; border-radius: 2px; }

/* Document column ------------------------------------------------------- */
.cp-doc { flex: 1 1 auto; min-width: 0; max-width: 740px; display: flex; flex-direction: column; gap: 56px; }
.cp-divider { border: 0; height: 1px; margin: 0; background: var(--cp-line); }

.cp-section { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 24px; }
.cp-section--d20 { gap: 20px; }
.cp-section--d24 { gap: 24px; }

.cp-h { display: flex; align-items: center; gap: 12px; height: 32px; }
.cp-h__num { flex: 0 0 auto; font-family: var(--f-head); font-weight: 700; font-size: 24px; line-height: 32px; color: var(--orange); }
.cp-h__title { min-width: 0; font-family: var(--f-head); font-weight: 700; font-size: 24px; line-height: 32px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }

.cp-p { font-family: var(--f-body); font-size: 15px; line-height: 24px; color: var(--ink); }

.cp-box { border-radius: 8px; padding: 23px; border: 1px solid transparent; }
.cp-box--sky { background: #e6f2f5; border-color: #a8d5e2; }
.cp-box--yellow { background: #fdf9ea; border-color: #f2c94c; }
.cp-box--sand { background: var(--sand); border-color: var(--line); }

.cp-bullets { display: flex; flex-direction: column; gap: 12px; padding-left: 12px; }
.cp-bullets li { display: flex; align-items: flex-start; gap: 12px; }
.cp-bullets__dot { flex: 0 0 auto; font-family: var(--f-body); font-weight: 700; font-size: 15px; line-height: 20px; color: var(--orange); }
.cp-bullets__text { flex: 1 1 auto; font-family: var(--f-body); font-size: 15px; line-height: 22px; color: var(--ink); }

.cp-cats { display: flex; flex-direction: column; gap: 24px; }
.cp-cat { display: flex; flex-direction: column; gap: 8px; min-height: 136px; background: var(--bg); border: 1px solid var(--cp-line); border-radius: 6px; padding: 19px; }
.cp-cat__h { display: flex; align-items: center; gap: 8px; height: 22px; }
.cp-cat__num { flex: 0 0 auto; font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; color: var(--orange); }
.cp-cat__title { font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 22px; text-transform: uppercase; color: var(--ink); }
.cp-cat__text { font-family: var(--f-body); font-size: 14px; line-height: 22px; color: var(--ink); opacity: .85; }

/* Consent settings ------------------------------------------------------- */
.cp-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.cp-panel { flex: 1 1 379px; min-width: 0; display: flex; flex-direction: column; gap: 16px; background: var(--bg); border: 1px solid var(--cp-line); border-radius: 8px; padding: 19px; }
.cp-panel__title { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: .5px; text-transform: uppercase; color: var(--ink); }
.cp-panel__divider { height: 1px; background: var(--cp-line); }
.cp-panel__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 33px; }
.cp-panel__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-panel__name { font-family: var(--f-body); font-weight: 600; font-size: 13px; line-height: 17px; color: var(--ink); white-space: nowrap; }
.cp-panel__desc { font-family: var(--f-body); font-size: 11px; line-height: 14px; color: var(--ink); opacity: .5; white-space: nowrap; }
.cp-panel__req { flex: 0 0 auto; background: #eadfc9; border-radius: 4px; padding: 4px 8px; font-family: var(--f-head); font-weight: 700; font-size: 10px; line-height: 13px; color: var(--ink); }

.cp-toggle { position: relative; flex: 0 0 auto; width: 38px; height: 20px; border-radius: 10px; background: var(--cp-line); transition: background-color .2s ease; }
.cp-toggle__handle { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); transition: transform .2s ease; }
.cp-toggle.is-on { background: var(--orange); }
.cp-toggle.is-on .cp-toggle__handle { transform: translateX(18px); }

.cp-consent__cta { flex: 1 1 337px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cp-consent__text { font-family: var(--f-body); font-size: 14px; line-height: 20px; color: var(--ink); opacity: .8; }
.cp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--orange); color: var(--bg); border-radius: 600px; padding: 12px 24px; font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: .5px; white-space: nowrap; transition: filter .15s ease; }
.cp-btn:hover { filter: brightness(.95); }

/* Prose + callouts --------------------------------------------------------- */
.cp-prose { display: flex; flex-direction: column; gap: 12px; }
.cp-callout { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--sand); border: 1px solid var(--line); border-radius: 6px; padding: 15px; }
.cp-callout__label { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; text-transform: uppercase; color: var(--ink); }
.cp-callout__link { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; color: var(--orange); white-space: nowrap; }

.cp-link { align-self: flex-start; font-family: var(--f-body); font-weight: 700; font-size: 16px; line-height: 21px; color: var(--orange); }
.cp-link:hover, .cp-callout__link:hover, .cp-alert__link:hover, .cp-contact__primary:hover { text-decoration: underline; }

.cp-alert { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: #e6f2f5; border: 1px solid #a8d5e2; border-radius: 8px; padding: 19px; }
.cp-alert__label { font-family: var(--f-head); font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ink); }
.cp-alert__text { font-family: var(--f-body); font-size: 14px; line-height: 18px; color: var(--ink); opacity: .8; }
.cp-alert__link { font-family: var(--f-head); font-weight: 700; font-size: 13px; line-height: 18px; letter-spacing: .5px; text-transform: uppercase; color: var(--orange); }

.cp-contact { display: flex; flex-direction: column; gap: 16px; background: var(--bg); border: 1px solid var(--cp-line); border-radius: 8px; padding: 23px; }
.cp-contact__label { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: 1px; text-transform: uppercase; color: var(--ink); }
.cp-contact__actions { display: flex; gap: 24px; }
.cp-contact__actions a { font-family: var(--f-head); font-weight: 700; font-size: 13px; line-height: 18px; text-transform: uppercase; white-space: nowrap; }
.cp-contact__primary { color: var(--orange); }
.cp-contact__secondary { color: var(--ink); opacity: .6; }
.cp-contact__secondary:hover { opacity: 1; }

.cp-docnav { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 32px; }
.cp-docnav__prev { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; text-transform: uppercase; color: var(--ink); opacity: .6; }
.cp-docnav__prev:hover { opacity: 1; }
.cp-docnav__end { font-family: var(--f-head); font-weight: 700; font-size: 14px; line-height: 19px; letter-spacing: 1px; text-transform: uppercase; color: var(--orange); }

/* Narrow desktop (768–1100): keep the two-column layout, tighten gutters */
@media (max-width: 1100px) and (min-width: 768px) {
  .cp-hero { padding: 64px 40px 48px; }
  .cp-main { padding: 48px 40px 64px; gap: 40px; }
  .cp-rail { flex-basis: 220px; width: 220px; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  .cp-hero { padding: 32px 16px; }
  .cp-hero__content { gap: 12px; max-width: none; }
  .cp-hero__eyebrow { font-size: 11px; line-height: 15px; letter-spacing: 1.5px; }
  .cp-hero__title { font-size: 36px; line-height: 40px; }
  .cp-hero__meta { gap: 8px; height: 17px; }
  .cp-hero__org { font-size: 13px; line-height: 17px; }
  .cp-hero__loc { font-size: 13px; line-height: 17px; }

  .cp-main { flex-direction: column; align-items: stretch; gap: 0; padding: 0; }

  .cp-rail { flex: none; width: auto; }
  .cp-rail__sticky { position: static; padding: 24px 16px; gap: 24px; }
  .cp-rail__head { width: auto; }
  .cp-rail__links { gap: 14px; }
  .cp-search { padding: 11px; }
  .cp-search__field { height: 33px; padding: 0 7px; }
  .cp-search__field input { font-size: 13px; line-height: 17px; }

  .cp-doc { max-width: none; gap: 0; }
  .cp-divider { margin: 16px 16px 24px; }
  .cp-section--m20 + .cp-divider { margin-top: 20px; }

  .cp-section, .cp-section--d20, .cp-section--d24 { gap: 16px; padding: 8px 16px 0; }
  .cp-section--m20 { gap: 20px; }
  .cp-section--first { padding-top: 24px; }
  .cp-section--last { padding-bottom: 24px; }

  .cp-h__title { font-size: 22px; line-height: 30px; }
  .cp-p { line-height: 22px; }
  .cp-box { padding: 15px; }
  .cp-bullets { padding-left: 8px; }

  .cp-cats { gap: 12px; }
  .cp-cat { min-height: 0; }

  .cp-consent { flex-direction: column; align-items: stretch; gap: 16px; }
  .cp-panel { flex: none; background: var(--sand); padding: 15px; }
  .cp-panel__title { font-size: 13px; line-height: 18px; }
  .cp-toggle__handle { background: var(--white); }
  .cp-consent__cta { flex: none; align-items: stretch; gap: 12px; }
  .cp-consent__text { font-size: 13px; line-height: 18px; }
  .cp-btn { width: 100%; padding: 12px 16px; }

  .cp-callout { flex-direction: column; align-items: stretch; gap: 8px; }
  .cp-callout__label { font-size: 12px; line-height: 16px; }

  .cp-link { font-size: 15px; line-height: 20px; }

  .cp-alert { padding: 15px; }
  .cp-alert__label { letter-spacing: 1px; }
  .cp-alert__text { font-size: 13px; line-height: 17px; }

  .cp-contact { background: var(--white); padding: 15px; gap: 12px; }
  .cp-contact__label { font-size: 13px; line-height: 18px; }
  .cp-contact__actions { gap: 16px; }

  .cp-docnav { flex-direction: column; align-items: center; gap: 12px; padding: 16px 16px 32px; text-align: center; }
  .cp-docnav__prev { width: 100%; }
  .cp-docnav__end { font-size: 13px; line-height: 18px; }
}
/* Figma fixes the consent info band at 230px on the 390 frame (text box is 9 lines tall) */
@media (max-width: 480px) {
  .cp-box--yellow { min-height: 230px; }
}