/* ═══════════════════════════════════════════════════════════
   BALI FLOW · SEO landing pages — shared component styles
   Built on the v2 design tokens defined in style.css
   (--bg, --gold, --amber, --cream, --display, --sans, --line…)
   ═══════════════════════════════════════════════════════════ */

/* ---- page scaffold ---- */
body{background:var(--bg);color:var(--cream);font-family:var(--sans);line-height:1.6}
main{display:block}
.reveal{opacity:1!important;transform:none!important}
#loader{display:none!important}
.grain{display:none!important}

.container,.wrap{max-width:var(--maxw,1280px);margin:0 auto;padding-left:var(--pad,clamp(20px,5vw,80px));padding-right:var(--pad,clamp(20px,5vw,80px))}
.container--narrow{max-width:880px}
.text--center{text-align:center}
.text-gold,.text--gold,.gold{color:var(--gold)}

/* ---- sections ---- */
.section,.section-block,.hero-section,.cta-section{padding:clamp(56px,9vw,120px) 0;position:relative}
.section--alt,.section--problem,.section--forwho{background:var(--bg-2,#1E1610)}
.section--features,.section--pricing,.section--faq{background:var(--bg)}
.section__header,.intro-block{max-width:760px;margin:0 auto clamp(36px,5vw,60px);text-align:center}
.section__header .eyebrow,.eyebrow--center{justify-content:center}
.section-title,.section__title,.section__header h2,.hero__title{
  font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.015em;
  font-size:clamp(28px,4.4vw,52px);margin:14px 0}
.section-title em,.section__title em{font-style:normal;color:var(--gold)}
.section-label,.section__sub,.subtext,.hero__sub{
  color:rgba(255,255,255,.78);font-size:clamp(15px,1.6vw,18px);line-height:1.6;max-width:62ch;margin-inline:auto}
.section__sub,.subtext{margin-top:14px}
.prose-section p,.problem-narrative p{font-size:17px;line-height:1.75;color:rgba(255,255,255,.85);max-width:68ch;margin:0 auto 18px}

/* ---- nav ---- */
.nav,.nav-sticky{position:sticky;top:0;z-index:300;background:rgba(23,16,10,.86);
  backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
.nav-inner,.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:14px;padding-bottom:14px}
.nav-logo,.nav__logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:21px;font-weight:500;letter-spacing:.012em;color:var(--cream)}
.nav-logo b,.nav__logo b{color:var(--gold);font-weight:600}
.nav-links,.nav__links{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a,.nav__links a{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);opacity:.92;transition:color .3s,opacity .3s}
.nav-links a:hover,.nav__links a:hover{color:var(--gold);opacity:1}
.nav-cta,.nav__cta{flex:0 0 auto}
.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav__burger span{width:22px;height:2px;background:var(--cream);border-radius:2px}

/* ---- buttons (extends .btn from style.css) ---- */
.btn-gold{background:var(--gold);color:#1a1206;border:1px solid transparent}
.btn-gold:hover{background:var(--amber);transform:translateY(-2px)}
.btn--full,.btn--block{display:flex;width:100%}
.btn--outline,.btn-outline{border:1px solid var(--line);color:var(--cream);background:transparent}
.btn--outline:hover,.btn-outline:hover{border-color:var(--gold);background:rgba(201,168,106,.08)}

/* ---- breadcrumb ---- */
.breadcrumb,.breadcrumb-nav{padding:88px 0 0}
.breadcrumb .container,.breadcrumb-nav .container{padding-top:0;padding-bottom:0}
.breadcrumb__list{display:flex;flex-wrap:wrap;gap:8px;align-items:center;list-style:none;margin:0;padding:0;font-size:13px;color:rgba(255,255,255,.6)}
.breadcrumb__item a{color:var(--gold)}
.breadcrumb__item--current{color:rgba(255,255,255,.6)}
.breadcrumb__item:not(:last-child)::after{content:"›";margin-left:8px;opacity:.5}
.breadcrumb__item--sep{opacity:.5}

/* ---- hero ---- */
.hero,.hero-section{padding-top:clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero__inner,.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);align-items:center;position:relative;z-index:1}
.hero--inner .hero__inner,.hero__inner--center{grid-template-columns:1fr;text-align:center;max-width:860px;margin:0 auto}
.hero__title{font-size:clamp(32px,5.2vw,62px)}
.hero__sub{margin:18px 0 28px;font-size:clamp(16px,1.8vw,20px);text-align:inherit}
.hero__actions,.hero-ctas{display:flex;flex-wrap:wrap;gap:14px}
.hero__inner .hero__actions{justify-content:flex-start}
.hero--inner .hero__actions{justify-content:center}
.hero__trust{margin-top:20px;font-size:13px;color:rgba(255,255,255,.6)}
.hero-category{display:inline-block;margin-bottom:10px}

/* hero — soft gold glow stolen from the home hero */
.hero-glow{position:absolute;top:-140px;left:50%;transform:translateX(-50%);width:min(900px,94%);height:520px;
  z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(201,168,106,.17),rgba(201,168,106,.04) 45%,transparent 72%)}

/* 2-column hero → keep the text column left-aligned and tidy */
.hero__content{text-align:left}
.hero__content .eyebrow{justify-content:flex-start;text-align:left}
.hero__content .hero__title{text-align:left;margin-inline:0}
.hero__content .hero__sub{text-align:left;margin-inline:0;max-width:54ch}
.hero__content .hero__actions{justify-content:flex-start}

/* hero trust row → inline chips with check marks */
.hero__trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;padding:0}
.hero__trust li{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.72)}

/* ---- chat / phone mock ---- */
.hero__visual{display:flex;justify-content:center}
.chat-mock,.phone-mockup{width:min(360px,100%);background:var(--panel,#221A12);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.7)}
.chat-mock__header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.chat-mock__avatar{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3d9a3,var(--gold) 55%,#7a5a2a)}
.chat-mock__name{font-weight:700;font-size:14px}
.chat-mock__status{font-size:12px;color:#54c08a}
.chat-mock__body,.phone-mockup__screen{padding:18px;display:flex;flex-direction:column;gap:12px}
.chat-bubble{max-width:82%;padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.45}
.chat-bubble--in,.chat-bubble--incoming{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.chat-bubble--out,.chat-bubble--outgoing,.chat-bubble--confirm{align-self:flex-end;background:rgba(201,168,106,.18);border:1px solid rgba(201,168,106,.3);border-bottom-right-radius:4px}
.chat-bubble__label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}

/* ---- generic card grids ---- */
.problem-grid,.problem__grid,.features-grid,.features__grid,.for-grid,.forwho__grid,
.who-grid,.related-grid,.related__grid,.pricing-grid,.pricing__grid{
  display:grid;gap:22px}
.problem-grid,.problem__grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.features-grid,.features__grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.for-grid,.forwho__grid,.who-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:980px;margin-inline:auto}
.related-grid,.related__grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.pricing-grid,.pricing__grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:780px;margin-inline:auto}

.card,.problem-card,.problem__card,.feature-card,.related-card,.for-card,.who-card,.price-card,.pricing-card,.cta-box{
  background:var(--panel,#221A12);border:1px solid var(--line);border-radius:18px;padding:28px}
.problem-card h3,.feature-card h3,.related-card h3,.related-card__title,.feature-title,.for-card__title,.who-card-title,.step-title,.step__content h3{
  font-family:var(--display);font-weight:500;font-size:20px;margin:10px 0 8px;letter-spacing:-.01em}
.problem-card p,.feature-card p,.related-card p,.feature-desc,.who-list li,.step-desc,.step__content p{
  color:rgba(255,255,255,.78);font-size:15px;line-height:1.6}
.problem-card__icon,.problem__icon,.feature-card__icon,.feature-icon,.step-icon{
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  background:rgba(201,168,106,.12);color:var(--gold);font-size:24px;margin-bottom:6px}
.related-card{transition:transform .35s,border-color .35s}
.related-card:hover{transform:translateY(-4px);border-color:rgba(201,168,106,.45)}
.related-card__link,.feature-link{display:inline-block;margin-top:14px;color:var(--gold);font-weight:600;font-size:14px}

/* ---- icon chips + inline graphics ---- */
.problem-card__icon svg,.feature-card__icon svg,.feature-icon svg,.step-icon svg,.problem__icon svg{width:24px;height:24px;stroke:currentColor;fill:none}
.icon-chip{width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;border-radius:13px;
  background:rgba(201,168,106,.12);color:var(--gold);margin-bottom:8px;border:1px solid rgba(201,168,106,.2)}
.icon-chip svg{width:22px;height:22px;stroke:currentColor;fill:none}
/* hairline gold divider between heavy sections */
.rule-glow{height:1px;border:0;max-width:980px;margin:8px auto 0;
  background:linear-gradient(90deg,transparent,rgba(201,168,106,.45),transparent)}
/* fact chips (used in comparison intros to break the prose) */
.fact-strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:26px 0 4px}
.fact-chip{display:flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--line);border-radius:14px;
  background:var(--panel,#221A12);font-size:14px;color:rgba(255,255,255,.85)}
.fact-chip svg{width:20px;height:20px;stroke:var(--gold);fill:none;flex:0 0 auto}
.fact-chip b{color:var(--gold);font-weight:600}
/* give prose headings a small leading gold mark */
.prose-section h2::before{content:"";display:inline-block;width:22px;height:2px;background:var(--gold);
  vertical-align:middle;margin-right:12px;border-radius:2px}

/* ---- who is it for ---- */
.for-card--yes,.who-card.yes{border-color:rgba(84,192,138,.4)}
.for-card--no,.who-card.no{border-color:rgba(224,106,44,.35)}
.for-card ul,.who-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.for-card li,.who-list li{position:relative;padding-left:26px;font-size:15px;color:rgba(255,255,255,.82)}
.for-card--yes li::before,.who-card.yes .who-list li::before,.check-list li::before{content:"✓";position:absolute;left:0;color:#54c08a;font-weight:700}
.for-card--no li::before,.who-card.no .who-list li::before,.cross-list li::before{content:"✗";position:absolute;left:0;color:var(--ember,#E06A2C);font-weight:700}
.check-list,.cross-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:10px}
.check-list li,.cross-list li{position:relative;padding-left:26px;font-size:15px;color:rgba(255,255,255,.82)}

/* ---- steps ---- */
.steps,.steps__body{list-style:none;margin:0 auto;padding:0;max-width:820px;display:flex;flex-direction:column;gap:8px;counter-reset:step}
.step,.steps__item{display:flex;gap:22px;padding:24px;border-bottom:1px solid var(--line)}
.step:last-child,.steps__item:last-child{border-bottom:0}
.step__number,.step-number,.steps__number{flex:0 0 auto;font-family:var(--display);font-size:26px;color:var(--gold);width:54px}
.step__content,.step .step-content{flex:1}

/* ---- pricing ---- */
.pricing-card,.price-card{text-align:left;display:flex;flex-direction:column}
.pricing-card--featured,.featured{border-color:rgba(201,168,106,.55);box-shadow:0 0 0 1px rgba(201,168,106,.25)}
.pricing-card__badge{display:inline-block;align-self:flex-start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1a1206;background:var(--gold);border-radius:100px;padding:4px 12px;margin-bottom:12px;font-weight:700}
.pricing-card__name,.price-name{font-family:var(--display);font-size:22px;margin-bottom:8px}
.pricing-card__price,.price-amount{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.pricing-card__amount,.price-amount{font-family:var(--display);font-size:40px;color:var(--gold)}
.pricing-card__period,.price-period{font-size:14px;color:rgba(255,255,255,.6)}
.pricing-card__desc,.price-desc{color:rgba(255,255,255,.72);font-size:14px;margin-bottom:16px}
.pricing-card__features{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pricing-card__features li{position:relative;padding-left:24px;font-size:14px;color:rgba(255,255,255,.82)}
.pricing-card__features li::before{content:"✓";position:absolute;left:0;color:var(--gold)}
.pricing-note,.pricing__note,.pricing-strip{text-align:center;margin-top:26px;color:rgba(255,255,255,.7);font-size:14px}
.pricing-note a,.pricing__note a{color:var(--gold)}

/* ---- comparison table ---- */
.comparison-table-wrap{overflow-x:auto;max-width:980px;margin:0 auto;border:1px solid var(--line);border-radius:16px}
.comparison-table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.comparison-table th,.comparison-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line)}
.comparison-table thead th{font-family:var(--display);font-weight:500;font-size:16px;background:rgba(255,255,255,.03)}
.comparison-table thead th:nth-child(2){color:var(--gold)}
.comparison-table tbody tr:last-child td{border-bottom:0}
.comparison-table td.yes,.comparison-table .win{color:#54c08a;font-weight:600}
.comparison-table td.no{color:var(--ember,#E06A2C)}
.comparison-table td.partial,.comparison-table .neutral{color:var(--amber)}

/* ---- FAQ ---- */
.faq,.faq-list,.faq__list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq__item,.faq-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel,#221A12)}
.faq__question,.faq-question{margin:0}
.faq__toggle,.faq-question button,.faq__question button,.faq-question{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;text-align:left;
  padding:20px 22px;background:none;border:0;cursor:pointer;color:var(--cream);font-family:var(--sans);font-size:16px;font-weight:600}
.faq__icon{flex:0 0 auto;transition:transform .3s}
.faq__item--open .faq__icon{transform:rotate(180deg)}
.faq__answer,.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s var(--expo,ease),padding .4s}
.faq__item--open .faq__answer{max-height:600px}
.faq__answer p,.faq-answer p{padding:0 22px 20px;margin:0;color:rgba(255,255,255,.8);font-size:15px;line-height:1.65}
/* fallback: if no JS, show answers */
.no-js .faq__answer{max-height:none}

/* ---- CTA final ---- */
.cta-final,.section--cta,.cta-section{text-align:center}
.cta-final__inner{max-width:760px;margin:0 auto;text-align:center}
.cta-final__sub,.cta__note{margin:16px auto 28px;color:rgba(255,255,255,.78);max-width:56ch}
.cta__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-box{max-width:680px;margin:30px auto 0;text-align:center}

/* ---- footer ---- */
.footer,.site-footer{background:var(--bg-2,#1E1610);border-top:1px solid var(--line);padding:60px 0 30px}
.footer__inner,.footer-inner{display:grid;grid-template-columns:1.4fr 2fr;gap:40px}
.footer__brand img,.footer-inner img{margin-bottom:14px}
.footer__tagline,.footer-copy{color:rgba(255,255,255,.7);font-size:14px;margin-bottom:6px}
.footer__markets{color:rgba(255,255,255,.5);font-size:13px}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.footer-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:24px}
.footer__col-title,.footer__nav-title{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.footer__col ul,.footer-links ul,.footer__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer__col a,.footer-links a,.footer__nav a{color:rgba(255,255,255,.78);font-size:14px}
.footer__col a:hover,.footer-links a:hover,.footer__nav a:hover{color:var(--gold)}
@media(max-width:720px){.footer__grid{grid-template-columns:1fr 1fr;gap:28px}.footer__brand{grid-column:1/-1}}
.footer__bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;color:rgba(255,255,255,.5);font-size:13px;text-align:center}

/* ---- responsive ---- */
@media(max-width:820px){
  .nav-links,.nav__links{display:none}
  .hero__inner,.hero__grid{grid-template-columns:1fr;text-align:center}
  .hero__inner .hero__actions,.hero-ctas{justify-content:center}
  .hero__visual{order:-1}
  .footer__inner,.footer-inner{grid-template-columns:1fr;gap:30px}
  .step,.steps__item{flex-direction:column;gap:10px}
}