/* BKKTRADER — page-specific styles (interior pages). Loaded after styles.css. */

/* ---------- Page hero / breadcrumb ---------- */
.page-hero{position:relative;overflow:hidden;padding:clamp(3rem,7vw,5rem) 0 clamp(2.5rem,5vw,3.5rem);border-bottom:1px solid var(--line-soft);}
.page-hero .hero-bg-grid{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 90%);mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 90%);}
.page-hero .wrap{position:relative;}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-family:var(--mono);font-size:.75rem;color:var(--muted-2);margin-bottom:1.2rem;flex-wrap:wrap;}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--teal);}
.breadcrumb .sep{color:var(--muted-2);}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.08;max-width:22ch;}
.page-hero .lede{color:var(--muted);font-size:1.08rem;margin-top:1.2rem;max-width:44rem;}

/* ---------- Comparison table (challenges) ---------- */
.compare-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;-webkit-overflow-scrolling:touch;}
.compare{width:100%;border-collapse:collapse;min-width:720px;}
.compare th,.compare td{padding:1.1rem 1.3rem;text-align:left;border-bottom:1px solid var(--line-soft);font-size:.92rem;}
.compare thead th{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--panel);position:sticky;top:0;}
.compare tbody th{font-weight:500;color:var(--ink);font-family:var(--mono);font-size:.8rem;letter-spacing:.03em;color:var(--muted);text-transform:uppercase;}
.compare td{font-family:var(--mono);color:var(--ink);}
.compare td.price{color:var(--teal);font-size:1.05rem;}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:none;}
.compare .col-featured{background:rgba(22,199,167,.05);}
.compare thead .col-featured{background:rgba(22,199,167,.1);color:var(--teal);}

/* mobile challenge cards */
.challenge-cards{display:none;flex-direction:column;gap:1rem;}
.ch-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);}
.ch-card .ch-head{display:flex;align-items:baseline;justify-content:space-between;padding:1.2rem 1.3rem;border-bottom:1px solid var(--line-soft);background:linear-gradient(160deg,#0c1a30,var(--panel-2));}
.ch-card .ch-size{font-family:var(--mono);font-size:1.2rem;font-weight:600;}
.ch-card .ch-price{font-family:var(--mono);color:var(--teal);font-size:1.2rem;font-weight:600;}
.ch-card dl{margin:0;padding:.4rem 1.3rem 1rem;}
.ch-card .ch-line{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line-soft);font-size:.88rem;}
.ch-card .ch-line:last-child{border-bottom:none;}
.ch-card .ch-line dt{color:var(--muted);}
.ch-card .ch-line dd{margin:0;font-family:var(--mono);color:var(--ink);}

/* ---------- Timeline (how it works) ---------- */
.timeline{position:relative;max-width:52rem;margin:0 auto;padding-left:2.4rem;}
.timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--teal),rgba(22,199,167,.15));}
.tl-item{position:relative;padding-bottom:2.6rem;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-2.4rem;top:2px;width:24px;height:24px;border-radius:50%;background:var(--bg);border:2px solid var(--teal);display:flex;}
.tl-item::after{content:"";position:absolute;left:calc(-2.4rem + 7px);top:9px;width:10px;height:10px;border-radius:50%;background:var(--teal);}
.tl-item .tl-num{font-family:var(--mono);font-size:.75rem;color:var(--teal);letter-spacing:.08em;}
.tl-item h3{font-size:1.35rem;margin:.4rem 0 0;}
.tl-item p{color:var(--muted);margin:.6rem 0 0;max-width:42rem;}
.tl-item .tl-tag{display:inline-block;margin-top:.9rem;font-family:var(--mono);font-size:.74rem;color:#c7d0dc;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:.3rem .6rem;border-radius:5px;}

/* ---------- Rules page ---------- */
.rule-block{border:1px solid var(--line);border-radius:14px;padding:clamp(1.4rem,3vw,2rem);background:var(--panel);margin-bottom:1.1rem;}
.rule-block .rb-top{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.rule-block h3{font-size:1.25rem;}
.rule-block .rb-val{font-family:var(--mono);color:var(--teal);font-size:1.1rem;}
.rule-block p{color:var(--muted);margin-top:.7rem;max-width:52rem;}
.rule-block .example{margin-top:1.1rem;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:9px;padding:1rem 1.1rem;font-family:var(--mono);font-size:.85rem;color:#c7d0dc;line-height:1.7;}
.rule-block .example .k{color:var(--muted);}
.rule-block .example .v{color:var(--teal);}
.rules-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
.prohibited{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;}
.prohibited .pcell{background:var(--bg);padding:1.3rem 1.4rem;}
.prohibited .pcell.allowed{border-left:2px solid var(--teal);}
.prohibited .pcell .plabel{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem;}
.prohibited .pcell.not .plabel{color:var(--down);}
.prohibited .pcell.allowed .plabel{color:var(--teal);}
.prohibited ul{display:flex;flex-direction:column;gap:.55rem;}
.prohibited li{color:var(--muted);font-size:.92rem;padding-left:1.2rem;position:relative;}
.prohibited li::before{content:"—";position:absolute;left:0;color:var(--muted-2);}

/* ---------- FAQ categories ---------- */
.faq-search{width:100%;max-width:34rem;background:var(--panel);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-family:inherit;font-size:.95rem;padding:.85rem 1rem;margin-bottom:2.4rem;}
.faq-search::placeholder{color:var(--muted-2);}
.faq-search:focus{outline:none;border-color:var(--teal);}
.faq-cat{margin-bottom:2.6rem;}
.faq-cat h2{font-size:1.4rem;margin-bottom:.4rem;}
.faq-cat .cat-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);}
.faq-empty{color:var(--muted);font-family:var(--mono);font-size:.9rem;padding:2rem 0;display:none;}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.2rem;}
.field label{font-size:.85rem;font-weight:500;color:var(--ink);}
.field .req{color:var(--teal);}
.field input,.field select,.field textarea{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-family:inherit;font-size:.95rem;padding:.8rem .9rem;transition:border-color .2s ease;}
.field textarea{resize:vertical;min-height:130px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--down);}
.field .err{color:var(--down);font-size:.8rem;font-family:var(--mono);min-height:1em;}
.form-status{font-size:.9rem;margin-top:.4rem;min-height:1.2em;}
.contact-aside{border:1px solid var(--line);border-radius:14px;padding:clamp(1.4rem,3vw,2rem);background:var(--panel);}
.contact-aside h3{font-size:1.1rem;margin-bottom:1rem;}
.contact-aside .ca-item{padding:.9rem 0;border-bottom:1px solid var(--line-soft);}
.contact-aside .ca-item:last-child{border-bottom:none;}
.contact-aside .ca-k{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);}
.contact-aside .ca-v{color:var(--ink);font-size:.92rem;margin-top:.3rem;}
.contact-aside address{font-style:normal;color:var(--muted);font-size:.9rem;line-height:1.6;}
.topics{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem;}
.topics span{font-family:var(--mono);font-size:.74rem;color:var(--muted);border:1px solid var(--line);padding:.35rem .6rem;border-radius:5px;}

/* ---------- About ---------- */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;}
.principles .cell h3{font-size:1.1rem;margin-top:.2rem;}
.about-lead{max-width:52rem;}
.about-lead p{color:var(--muted);font-size:1.08rem;margin-top:1.2rem;}
.about-lead p strong{color:var(--ink);font-weight:600;}

/* ---------- Legal ---------- */
.legal-body{max-width:48rem;}
.legal-body h2{font-size:1.3rem;margin:2rem 0 .6rem;}
.legal-body p,.legal-body li{color:var(--muted);margin-top:.7rem;font-size:.96rem;}
.legal-body ul{list-style:disc;padding-left:1.3rem;}
.legal-note{border:1px dashed var(--line);border-radius:10px;padding:1.2rem 1.4rem;font-family:var(--mono);font-size:.85rem;color:var(--muted);margin-bottom:2rem;}

/* ---------- CTA compact ---------- */
.cta-slim{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--panel);}
.cta-slim .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-top:2.4rem;padding-bottom:2.4rem;}
.cta-slim h2{font-size:clamp(1.4rem,2.6vw,1.9rem);}
.cta-slim p{color:var(--muted);margin-top:.4rem;}

@media (max-width:940px){
  .compare-wrap{display:none;}
  .challenge-cards{display:flex;}
  .rules-grid-2,.prohibited,.principles{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}