/* BHC Signaalikone 5.6.2 · Mobile Typo Surgery
   Surgical fixes only: market cards, education/about cards, Why cards and bottom nav. */

@media (max-width: 760px){
  /* The mobile canvas gets a consistent breathing rhythm. */
  .shell{padding-left:14px!important;padding-right:14px!important;padding-bottom:calc(100px + env(safe-area-inset-bottom))!important}
  .hero,.page-head{padding-top:30px!important}
  .section-head{margin-top:34px!important}

  /* Market cards: no squeezing desktop geometry into a phone. */
  .market-grid,.stock-grid{align-items:stretch!important}
  .market-card,.stock-grid .market-card{
    height:auto!important;
    min-height:178px!important;
    padding:14px!important;
    border-radius:22px!important;
    display:grid!important;
    grid-template-rows:auto auto auto auto!important;
    gap:9px!important;
    overflow:hidden!important;
  }
  .market-top{min-height:48px!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:start!important}
  .market-name{min-width:0!important}
  .market-name strong{font-size:16px!important;line-height:1.08!important;max-height:none!important;overflow:visible!important}
  .market-name small{font-size:9px!important;line-height:1.25!important;margin-top:5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .market-price{min-width:0!important;text-align:right!important}
  .market-price strong{font-size:16px!important;line-height:1.05!important}
  .market-price small{font-size:9px!important;line-height:1.25!important;margin-top:5px!important}
  .signal-word{font-size:18px!important;line-height:1.1!important;margin:0!important;min-height:20px!important;align-self:start!important;overflow:visible!important;text-overflow:clip!important}
  .market-meta,.market-meta.triple{margin:0!important;gap:7px!important;align-self:start!important}
  .market-meta.triple{grid-template-columns:1fr 1fr!important}
  .market-meta.triple>div:last-child{grid-column:1/-1!important}
  .market-meta div{padding:8px 10px!important;min-height:52px!important;display:grid!important;align-content:center!important;border-radius:14px!important}
  .market-meta span{font-size:7px!important;line-height:1.1!important;letter-spacing:.08em!important}
  .market-meta strong{font-size:11px!important;line-height:1.15!important;margin-top:5px!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .market-more{font-size:8px!important;line-height:1.2!important;letter-spacing:.04em!important;margin:0!important;align-self:end!important;opacity:.72!important}
  .market-fold{border-radius:22px!important}
  .market-fold>summary{padding:17px!important}

  /* Why cards: text gets its own rows, not a fixed-height cage. */
  .why-grid{grid-auto-rows:auto!important;gap:10px!important}
  .why-card{
    height:auto!important;
    min-height:0!important;
    padding:18px!important;
    border-radius:21px!important;
    overflow:visible!important;
    contain:layout paint!important;
  }
  .why-card h2{font-size:24px!important;line-height:1.06!important;min-height:0!important;height:auto!important;margin:8px 0 10px!important;overflow-wrap:anywhere!important}
  .why-card>p{font-size:12px!important;line-height:1.55!important;height:auto!important;min-height:0!important;margin:0 0 12px!important;overflow:visible!important}
  .why-card .reason-list{max-height:none!important;overflow:visible!important}

  /* Education/about page: kicker, title and copy are explicit rows. */
  .education-head{max-width:100%!important}
  .education-mission,.education-sources{border-radius:22px!important}
  .education-section{margin-top:42px!important}
  .education-section .section-head.compact{margin:0 0 16px!important}
  .education-section h2,.education-mission h2,.education-sources h2{
    font-size:clamp(30px,8.2vw,38px)!important;
    line-height:.98!important;
    letter-spacing:-.05em!important;
    margin:8px 0 18px!important;
    text-wrap:balance;
  }
  .mission-grid,.compare-simple,.brand-guide,.wallet-guide,.guide-items{grid-template-columns:1fr!important;gap:12px!important}
  .mission-grid article,.compare-simple article,.brand-guide article,.wallet-guide article{
    padding:20px!important;
    border-radius:21px!important;
    min-width:0!important;
  }
  .compare-simple article,.wallet-guide article{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-content:start!important;
    gap:11px!important;
  }
  .compare-simple>article>span,.wallet-guide article>b{
    display:block!important;
    width:100%!important;
    margin:0!important;
    color:#9d91a4!important;
    font-size:11px!important;
    line-height:1.25!important;
    letter-spacing:.12em!important;
    font-weight:800!important;
    overflow-wrap:anywhere!important;
  }
  .compare-simple article>strong,.wallet-guide article>strong{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:clamp(24px,6.3vw,31px)!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
    overflow-wrap:anywhere!important;
  }
  .compare-simple article>p,.wallet-guide article>p{
    display:block!important;
    width:100%!important;
    margin:3px 0 0!important;
    font-size:15px!important;
    line-height:1.58!important;
    color:#b8afb9!important;
    overflow-wrap:anywhere!important;
  }
  .wallet-guide article>b{font-size:10.5px!important}
  .safety-callout{padding:20px!important;border-radius:21px!important;gap:9px!important}
  .safety-callout strong{font-size:clamp(22px,6vw,29px)!important;line-height:1.08!important;letter-spacing:-.035em!important}
  .safety-callout span{font-size:14px!important;line-height:1.58!important}

  /* Bottom navigation: stable hit areas and safe-area room without getting bulky. */
  .nav{
    min-height:72px!important;
    padding:7px 8px max(8px,env(safe-area-inset-bottom))!important;
    box-shadow:0 -14px 34px rgba(0,0,0,.24)!important;
  }
  .nav-btn{min-height:50px!important;padding:8px 2px!important;font-size:10px!important;line-height:1!important;border-radius:14px!important}

  /* Avoid giant headings touching the viewport edge after hash navigation. */
  .education-section,.why-card{scroll-margin-top:76px!important}
}

@media (max-width: 420px){
  /* One calm full-width market card on small phones, with enough vertical room for all data. */
  .market-grid,.stock-grid{grid-template-columns:1fr!important;grid-auto-rows:auto!important;gap:9px!important}
  .market-card,.stock-grid .market-card{height:auto!important;min-height:184px!important;padding:14px!important}
  .market-top{min-height:50px!important}
  .market-name strong,.market-price strong{font-size:17px!important}
  .signal-word{font-size:19px!important}
  .market-meta div{min-height:54px!important}

  .education-section h2,.education-mission h2,.education-sources h2{font-size:clamp(29px,8.8vw,36px)!important}
  .compare-simple article>strong,.wallet-guide article>strong{font-size:clamp(23px,6.6vw,29px)!important}
  .compare-simple article>p,.wallet-guide article>p{font-size:14px!important}

  .nav-btn{font-size:9.6px!important}
}

@media (max-width: 360px){
  .market-card,.stock-grid .market-card{min-height:188px!important}
  .market-meta div{padding:7px 8px!important}
  .nav{padding-left:5px!important;padding-right:5px!important}
  .nav-btn{font-size:9px!important}
}