/* static/dash/offer_about_terms.css
   SEO pages content (Offer / About / Terms) — CONTENT ONLY
   Goals:
   ✅ Keep TreeSelector.css as design system (single source of truth) for NAV
   ✅ Do NOT touch :root tokens here
   ✅ No topbar / pinned tiles / chess-tile rules here
   ✅ Only page content styling: Offer carousel + SEO page blocks
*/

/* ==========================================================================
   0) Safety scope (NO global resets!)
   ========================================================================== */
.shell-root{
  /* no global resets */
}

/* ==========================================================================
   1) SEO scroll model (Dash-like) — WITHOUT shifting pinned tiles
   Fix: always reserve scrollbar space to prevent layout jumps.
   ========================================================================== */

/* root occupies viewport (no outer scroll) */
.shell-root.shell-seo-root{
  height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

/* 3-column grid must fill viewport */
.shell-root.shell-seo-root .shell-grid-3{
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
}

/* ONLY main scrolls (like in Dash) — stable gutter prevents "pushing" */
.shell-root.shell-seo-root .shell-main.shell-seo-main{
  height: 100% !important;
  min-height: 0 !important;

  /* critical: main scroll only */
  overflow-x: hidden !important;
  overflow-y: scroll !important;               /* force scrollbar always */
  scrollbar-gutter: stable both-edges !important;

  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

/* ==========================================================================
   2) Offer page — carousel of rectangular cards
   ========================================================================== */

.offer-root{
  width: 100%;
  box-sizing: border-box;
}

.offer-carousel-wrap{
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* horizontal carousel */
.offer-carousel{
  display: flex;
  flex-direction: row;
  gap: 10px;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 8px 2px 14px;
  box-sizing: border-box;

  scrollbar-width: thin;
}
.offer-carousel::-webkit-scrollbar{ height: 9px; }
.offer-carousel::-webkit-scrollbar-track{ background: transparent; }
.offer-carousel::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 0;
}

/* cards — rectangular, Tree vibe */
.offer-card{
  flex: 0 0 auto;
  width: min(420px, 86vw);
  min-height: 520px;

  display: flex;
  flex-direction: column;

  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;

  box-shadow: 0 10px 22px rgba(0,0,0,0.55);

  transition:
    background-color .12s ease,
    border-color .12s ease,
    box-shadow .12s ease,
    transform .12s ease;
}
.offer-card:hover{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 14px 30px rgba(0,0,0,0.65);
  transform: translateY(-1px);
}
.offer-card.is-featured{
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 16px 34px rgba(0,0,0,0.70);
}

/* top area */
.offer-card-top{ padding: 12px 12px 8px; }

.offer-card-title-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.offer-card-title{
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}

.offer-tagline{
  margin-top: 8px;
  color: rgba(255,255,255,0.80);
}
.offer-desc{
  margin-top: 8px;
  color: rgba(255,255,255,0.66);
  font-size: 13px;
  line-height: 1.45;
}

/* badge */
.offer-badge{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;

  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.20);
  color: rgba(255,255,255,0.80);

  border-radius: 0;
}
.offer-badge.is-active{ border-color: rgba(255,255,255,0.22); }
.offer-badge.is-soon{ opacity: .85; }
.offer-badge.is-muted{ opacity: .70; }

/* pills */
.offer-pills{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.offer-pill{
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;

  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.78);

  border-radius: 0;
}

/* price */
.offer-price{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}
.offer-price-main{
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,255,255,0.92);
}
.offer-price-sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.58);
}

/* body sections */
.offer-card-body{
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offer-sec-title{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
  margin-bottom: 6px;
}
.offer-list{
  margin: 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.68);
  font-size: 13px;
  line-height: 1.45;
}
.offer-list li{ margin: 4px 0; }

/* bottom */
.offer-card-bottom{
  margin-top: auto;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,0.10);

  display: flex;
  flex-direction: column;
  gap: 10px;
}
.offer-disclaimer{
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

/* CTA button */
.offer-cta{
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px 10px;

  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: 12px;

  background: rgba(255,255,255,0.92);
  color: rgba(0,0,0,0.92);

  border: 1px solid rgba(0,0,0,0.22);
  box-shadow: 0 12px 26px rgba(0,0,0,0.70);

  border-radius: 0;

  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.offer-cta:hover{
  background: rgba(255,255,255,0.98);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.60);
}
.offer-cta:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0,0,0,0.50);
}
.offer-cta.is-disabled{
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.10);
  box-shadow: none;
  pointer-events: none;
}

/* ==========================================================================
   3) About / Terms — classic article fallback (.seo-article)
   ========================================================================== */

.seo-article{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 2px 18px;
  color: rgba(255,255,255,0.90);
  box-sizing: border-box;
}

.seo-article h1,
.seo-article h2,
.seo-article h3{
  margin: 0 0 10px;
  letter-spacing: .02em;
  font-weight: 800;
}
.seo-article h1{
  font-size: 26px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.seo-article h2{
  margin-top: 16px;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.84);
}
.seo-article p{
  margin: 10px 0;
  color: rgba(255,255,255,0.74);
  line-height: 1.55;
  font-size: 13px;
}
.seo-article ul{
  margin: 10px 0;
  padding-left: 18px;
  color: rgba(255,255,255,0.74);
  line-height: 1.55;
  font-size: 13px;
}
.seo-article li{ margin: 5px 0; }

.seo-hr{
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin: 14px 0;
}

/* ==========================================================================
   4) JSON renderer output (.seo-page / .seo-sec)
   ========================================================================== */

.shell-root .shell-main .seo-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 2px 18px;
  box-sizing: border-box;
  color: rgba(255,255,255,0.90);
}

/* HERO */
.shell-root .shell-main .seo-page .seo-hero{
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.shell-root .shell-main .seo-page .seo-hero-title{
  font-size: 26px;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 8px;
}
.shell-root .shell-main .seo-page .seo-hero-lead{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.74);
  margin: 0;
}

/* SECTIONS */
.shell-root .shell-main .seo-page .seo-sec{
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.shell-root .shell-main .seo-page .seo-sec:last-child{ border-bottom: 0; }

.shell-root .shell-main .seo-page .seo-sec-title{
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.84);
}

.shell-root .shell-main .seo-page .seo-sec-body{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.74);
}
.shell-root .shell-main .seo-page .seo-sec-body p{ margin: 10px 0; }

/* bullets */
.shell-root .shell-main .seo-page .page-list,
.shell-root .shell-main .seo-page .seo-sec-body ul{
  margin: 10px 0;
  padding-left: 18px;
}
.shell-root .shell-main .seo-page .seo-sec-body li{ margin: 5px 0; }

/* STEPS */
.shell-root .shell-main .seo-page .page-steps{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.shell-root .shell-main .seo-page .page-step{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.55);
  padding: 10px 12px;
  border-radius: 0;
}
.shell-root .shell-main .seo-page .page-step-title{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  margin-bottom: 6px;
}
.shell-root .shell-main .seo-page .page-step-text{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}

/* CALLOUTS */
.shell-root .shell-main .seo-page .page-callouts{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.shell-root .shell-main .seo-page .page-callout{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 22px rgba(0,0,0,0.55);
  padding: 10px 12px;
  border-radius: 0;
}
.shell-root .shell-main .seo-page .page-callout-label{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  margin-bottom: 6px;
}
.shell-root .shell-main .seo-page .page-callout-text{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
}


/* SEO: no inset — flush to viewport edges */
.shell-root.shell-seo-root{
  --seo-edge-pad: 0px !important;
}


/* =========================================================
   SEO FIX: stop "side pushing" (no slug rail + no x-overflow)
   ========================================================= */

/* 1) Never allow horizontal page growth */
html, body{
  width:100% !important;
  overflow-x:hidden !important;
}

/* 2) SEO shell must not create horizontal overflow */
.shell-root.shell-seo-root,
.shell-root.shell-seo-root .shell-grid-3,
.shell-root.shell-seo-root .shell-main.shell-seo-main{
  max-width:100vw !important;
  overflow-x:hidden !important;
}

/* 3) SEO pages do NOT use the right slug rail — remove it entirely */
.shell-root.shell-seo-root .slug-shell.subsidebar{
  display:none !important;
}

/* 4) Remove reserved right padding that was meant for slug rail */
.shell-root.shell-seo-root .shell-main.shell-seo-main{
  padding-right: var(--shell-safe-pad) !important;
}

/* (Optional) keep left padding for the vertical ROW1 rail; do NOT touch. */
/* If you ever want more content width: uncomment below (but usually keep it):
.shell-root.shell-seo-root .shell-main.shell-seo-main{
  padding-left: var(--shell-safe-pad) !important;
}
*/