/* ============================================================
   KIBO Subscriptions page (src/pages/platform/subscription-new.astro), loaded
   only on that page, after public/home/tokens.css, public/home/home.css
   (buttons, analyst rows, closing band) and public/search/search.css (hero,
   customer strip, tab rails, platform cards, resource tiles, section bands).
   This file holds only what the Subscriptions design adds or changes.
   Brand colors: src/styles/tokens.css. Sections in page order; each group
   names its component in src/components/sections/subscription/.
   Breakpoints: 880 (rails become accordions, in search.css), 640.
   ============================================================ */

/* This design's content column is 1216px (Search's is 1280px) */
.ksub-page .ks-wrap { max-width: 1216px; }

/* Outlined button on dark ground (SubHero, SubFinalCta); the homepage's
   .kh-psec-btn shape, hover fills white */
.ksub-btns { gap: 14px; }
.ksub-btn-ghost { background: transparent; border-color: rgba(255,255,255,.45); color: var(--kibo-white); text-decoration: none; }
.ksub-btn-ghost--soft { border-color: rgba(255,255,255,.32); }
.ksub-btn-ghost:hover, .ksub-btn-ghost:focus-visible { background: var(--kibo-white); border-color: var(--kibo-white); color: var(--kibo-dark-grey); }
.ksub-btn-ghost:focus-visible, .ksub-page .kh-psec-btn--primary:focus-visible { outline: 2px solid var(--kibo-yellow); outline-offset: 3px; }

/* Intro lines (SubProblem, SubRail) */
.ksub-lede { margin: 0; font-size: 19px; line-height: 1.42; color: var(--kibo-white); text-wrap: pretty; }
.ksub-lede strong { font-weight: 600; }

/* ==== Proof rows (SubProof.astro): the homepage's analyst-row look ==== */
.ksub-proof { padding-top: 92px; padding-bottom: 92px; }
.ksub-proof__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgba(46,52,62,.92) 0%, rgba(46,52,62,.72) 32%, rgba(46,52,62,0) 64%); }
.ksub-proof__list { position: relative; z-index: 1; list-style: none; margin: 0 auto; padding: 0; display: grid; grid-auto-rows: 1fr; width: fit-content; max-width: min(100%, 1100px); border-bottom: 1.5px solid var(--kibo-yellow); }
.ksub-proof .ksub-proof__row { grid-template-columns: minmax(0, 280px) auto; gap: 20px 72px; min-height: 0; padding: 28px 0; border-bottom: 0; border-top: 1.5px solid var(--kibo-yellow); }
.ksub-proof .kh-anl__brand img { height: 29px; }
.ksub-proof__wordmark { display: block; font-size: 29px; line-height: 1; font-weight: 600; letter-spacing: -.01em; color: var(--kibo-white); }
.ksub-proof .ksub-proof__line { gap: 16px; font-size: 23px; max-width: 660px; text-wrap: balance; }
.ksub-proof .ksub-proof__line b { font-weight: 600; }
.ksub-proof .kh-anl__arrow { width: 30px; height: 44px; }

/* ==== Problem statement (SubProblem.astro) ==== */
.ksub-problem { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.ksub-problem .ksub-lede { max-width: 820px; }

/* ==== Tab rails (SubRail.astro): Search's rail plus intro line and list ==== */
.ksub-head__text { display: flex; flex-direction: column; gap: 14px; min-width: 0; flex: 1 1 560px; }
.ksub-head__text .ksub-lede { max-width: 640px; line-height: 1.35; }
.ksub-head__text .ksub-lede--sm { font-size: 18px; line-height: 1.38; max-width: 720px; }
.ksub-h2 span { font-weight: 400; }
.ks-head.ksub-head--tight { gap: 14px 24px; margin-bottom: 32px; }
.ks-rail__panel.ksub-rail__panel--pillars { min-height: 400px; }
.ks-rail__panel.ksub-rail__panel--caps { min-height: 520px; }
.ksub-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 62ch; color: var(--kibo-white); }
.ksub-list li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.ksub-list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 10px; height: 1.5px; background: var(--kibo-yellow); }

/* ==== Platform cards (SubPlatform.astro): Search's cards, four across ==== */
.ks-plat.ksub-plat { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

/* ==== FAQ (SubFaq.astro): two columns, one row open in each ==== */
.ksub-faq { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 4px 20px; align-items: start; }
.ksub-faq__col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ksub-faq__item { position: relative; overflow: hidden; cursor: pointer; color: var(--kibo-white); background: var(--kibo-dark-grey); border: 1px solid rgba(255,255,255,.18); border-radius: 4px; transition: background .5s var(--ks-ease-faq), border-color .5s var(--ks-ease-faq); }
.ksub-faq__item.is-open { background: var(--kibo-link); border-color: var(--kibo-link); cursor: default; }
.ksub-faq__toggle { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 1; display: flex; align-items: center; padding: 0 22px; text-align: left; background: none; border: 0; color: var(--kibo-white); font-family: var(--font-base); font-size: 14px; line-height: 21px; font-weight: 500; cursor: pointer; transition: opacity .35s var(--ks-ease-faq); }
.ksub-faq__toggle span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ksub-faq__toggle:focus-visible { outline: 2px solid var(--kibo-yellow); outline-offset: -2px; }
.ksub-faq__item.is-open .ksub-faq__toggle { opacity: 0; cursor: default; }
.ksub-faq__item.is-open .ksub-faq__toggle:focus-visible { opacity: 1; }
.ksub-faq__item.is-open .ksub-faq__toggle:focus-visible span { visibility: hidden; }
.ksub-faq__body { display: grid; grid-template-rows: 0fr; min-height: 54px; transition: grid-template-rows .6s var(--ks-ease-faq); }
.ksub-faq__item.is-open .ksub-faq__body { grid-template-rows: 1fr; }
.ksub-faq__clip { overflow: hidden; min-height: 0; }
.ksub-faq__inner { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transition: opacity .45s var(--ks-ease-faq) .15s; }
.ksub-faq__item.is-open .ksub-faq__inner { opacity: 1; }
.ksub-faq__item:not(.is-open) .ksub-faq__inner { visibility: hidden; }
.ksub-faq__q { margin: 0; font-size: 19px; line-height: 25px; font-weight: 400; text-wrap: balance; }
.ksub-faq__a { margin: 0; font-size: 14px; line-height: 21px; color: var(--kibo-white); text-wrap: pretty; }

/* ==== Resource tiles (SubResources.astro): Search's tiles ==== */
.ksub-res__mark { fill: var(--kibo-yellow); stroke: none; }

/* ==== Closing band (SubFinalCta.astro): the homepage's FinalCTA ==== */
.ksub-page .kh-finalcta { padding: 96px 0; }
.ksub-page .kh-finalcta h2 { max-width: 24ch; }
.ksub-page .kh-finalcta p { max-width: 680px; margin-bottom: 28px; }

/* =================== Responsive =================== */
@media (max-width: 640px) {
  .ksub-lede, .ksub-head__text .ksub-lede--sm { font-size: 17px; }
  .ksub-proof { padding-top: 64px; padding-bottom: 64px; }
  .ksub-proof .ksub-proof__row { grid-template-columns: 1fr; gap: 16px; padding: 24px 0; }
  .ksub-proof .ksub-proof__line { font-size: 19px; }
  .ksub-faq__q { font-size: 17px; line-height: 23px; }
  .ksub-page .kh-finalcta { padding: 72px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ksub-faq__item, .ksub-faq__toggle, .ksub-faq__body, .ksub-faq__inner { transition: none !important; }
}