/* FXCIPI responsive enhancement — desktop, tablet and mobile */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;
}
body{
  min-width:0;
  overflow-x:clip;
}
main,section,header,footer,nav,article,aside,div{
  min-width:0;
}
img,svg,video,canvas,iframe{
  max-width:100%;
}
iframe{
  width:100%;
  border:0;
}
input,select,textarea,button{
  max-width:100%;
}
.table-wrap,
.symbol-buttons,
.panel-tabs,
.tabs{
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.notice-title,
.notice-copy-v14,
.notice-body,
.card,
.strength-card,
.guide-card,
.guide-detail,
.callout,
.warning-banner{
  overflow-wrap:anywhere;
  word-break:keep-all;
}

/* Wide desktop */
@media (min-width:1440px){
  .container{width:min(1380px,calc(100% - 64px))}
  .page{padding-bottom:76px}
  .hero{padding-top:62px}
  .header-inner{gap:22px}
  .nav{gap:20px}
  .card{padding:23px}
}

/* Desktop and smaller laptops */
@media (max-width:1280px){
  .container{width:min(1180px,calc(100% - 32px))}
  .header-inner{gap:10px}
  .nav{gap:10px}
  .nav a{font-size:11px}
  .strength-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .strength-card{min-height:270px}
  .grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Tablet */
@media (max-width:1024px){
  .page{padding-top:34px}
  .hero{padding:40px 0 22px}
  .hero-grid,.two-col,.visual-hero-grid,.calendar-layout{gap:22px}
  .title{font-size:clamp(38px,6.8vw,62px)}
  .lead{font-size:15px}
  .market-cards{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-box{grid-template-columns:repeat(3,minmax(0,1fr))}
  .trade-shell{grid-template-columns:190px minmax(0,1fr)}
  .order-panel{grid-column:1/-1;grid-row:auto;position:static}
  .trade-bottom{grid-column:2}
  .home-market-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notice-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quick-menu{display:none!important}
}

/* Mobile navigation and single-column content */
@media (max-width:850px){
  .container{width:calc(100% - 28px)}
  .header-inner{height:68px}
  .header .nav,
  .nav{
    position:absolute;
    left:12px;
    right:12px;
    top:68px;
    max-height:calc(100dvh - 88px);
    overflow-y:auto;
    padding:12px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    border-radius:17px;
    background:rgba(8,25,32,.98);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
  }
  .nav.open{display:flex}
  .nav a{padding:12px 11px;font-size:13px;border-radius:10px}
  .nav a:hover,.nav a.active{background:rgba(43,231,202,.07)}
  .nav a:after{display:none}
  .mobile-toggle{display:inline-flex;min-width:44px;min-height:44px}
  .head-actions .desktop-only,.head-actions .login-btn{display:none!important}
  .hero-grid,.two-col,.visual-hero-grid,.calendar-layout,.account-layout,.guide-detail{
    grid-template-columns:1fr!important;
  }
  .hero-grid,.two-col{align-items:start}
  .media{border-radius:22px}
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2{grid-template-columns:1fr}
  .strength-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section-head{align-items:flex-start}
  .account-box{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side-menu{position:static;display:flex;gap:6px;overflow-x:auto;padding:8px}
  .side-menu a{white-space:nowrap;flex:0 0 auto}
  .trade-shell{grid-template-columns:1fr;gap:10px}
  .watchlist,.order-panel,.trade-bottom{grid-column:1;grid-row:auto}
  .trade-bottom{grid-template-columns:1fr}
  .tv-chart{height:min(54dvh,460px);min-height:360px}
  .calendar-side{position:static}
  .calendar-widget{min-height:650px}
  .economic-widget{height:600px}
  .notice-row{grid-template-columns:52px minmax(0,1fr) auto}
  .notice-views{display:none}
  .notice-nav{grid-template-columns:1fr}
  .warning-banner{grid-template-columns:auto minmax(0,1fr)}
  .warning-banner .btn{grid-column:1/-1}
  .mobile-quick{padding-bottom:max(7px,env(safe-area-inset-bottom))}
  .footer{padding-bottom:calc(94px + env(safe-area-inset-bottom))}
}

/* Phones */
@media (max-width:600px){
  :root{--shadow:0 18px 44px rgba(0,0,0,.30)}
  .container{width:calc(100% - 22px)}
  .header-inner{height:64px;gap:8px}
  .header .nav,.nav{top:64px;left:8px;right:8px}
  .logo img{height:32px;max-width:150px}
  .head-actions{gap:5px}
  .demo-pill{padding:7px 9px;font-size:9px}
  .page{padding:27px 0 46px}
  .hero{padding:28px 0 17px}
  .title{font-size:clamp(31px,10vw,43px);line-height:1.08;letter-spacing:-.045em;margin:14px 0}
  .lead{font-size:14px;line-height:1.72}
  .eyebrow{font-size:9px;padding:7px 10px}
  .section{padding:18px 0}
  .section-head{display:block;margin-bottom:14px}
  .section-head h2{font-size:clamp(25px,7vw,32px);line-height:1.18}
  .section-head p{margin-top:9px;font-size:13px;line-height:1.65}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .hero-actions .btn{width:100%;min-height:48px}
  .chip-row{gap:7px;margin-top:14px}
  .chip{font-size:10px}
  .card{padding:17px;border-radius:19px}
  .card h3{font-size:18px}
  .grid4,.grid3,.grid2,.footer-grid,.account-box,.steps,
  .strength-grid,.home-market-grid,.notice-guide-grid,.guide-card-grid,
  .explain-grid,.compare-box,.pip-live-grid{
    grid-template-columns:1fr!important;
  }
  .strength-card{min-height:230px;padding:18px 16px}
  .strength-card>a{left:16px;bottom:15px}
  .home-market-card{min-height:74px}
  .media{border-radius:18px}
  .table-wrap{margin-left:-4px;margin-right:-4px;padding-bottom:5px}
  .table{min-width:680px}
  .table th,.table td{padding:11px 8px;font-size:11px}
  .notice-tools{grid-template-columns:1fr}
  .search{width:100%;height:46px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .tab{flex:0 0 auto}
  .notice-row{grid-template-columns:38px minmax(0,1fr);gap:10px;padding:14px 7px}
  .notice-date,.notice-views{display:none}
  .notice-title b{font-size:13px;line-height:1.5}
  .notice-title small{font-size:11px;line-height:1.45}
  .notice-detail>.card{padding:18px}
  .notice-detail h1{font-size:clamp(27px,8.2vw,38px);line-height:1.18}
  .notice-body{font-size:14px;line-height:1.78}
  .notice-body ul,.notice-body ol{padding-left:20px}
  .meta-grid{grid-template-columns:1fr 1fr}
  .symbol-head{padding:15px;gap:10px}
  .symbol-meta{padding:0 15px 16px}
  .symbol-name b{font-size:18px!important}
  .symbol-head .btn.small{min-width:auto;padding:0 10px}
  .account-box{gap:7px;padding:10px}
  .metric{padding:9px}
  .metric strong{font-size:14px}
  .balance-hero{padding:20px;border-radius:19px}
  .balance-hero strong{font-size:30px}
  .chart-card,.watchlist,.order-panel,.orderbook,.recent{padding:11px}
  .chart-toolbar{display:block}
  .chart-toolbar h1{font-size:18px}
  .symbol-buttons{margin-top:9px}
  .tv-chart{height:min(50dvh,390px);min-height:330px}
  .demo-watermark{font-size:30px;right:10px;bottom:88px}
  .mode-tabs{grid-template-columns:1fr 1fr}
  .side-buttons button{min-height:46px}
  .form-grid input,.form-grid select,.form-card input,.form-card select,.form-card textarea{
    font-size:16px; /* prevents iOS form zoom */
  }
  .calendar-widget{padding:8px;min-height:560px}
  .economic-widget{height:520px}
  .home-calendar-widget{min-height:390px}
  .home-calendar-widget .tradingview-widget-container{height:370px}
  .warning-banner{grid-template-columns:1fr}
  .warning-banner .btn{grid-column:auto;width:100%}
  .callout{padding:18px}
  .callout .btn{width:100%;margin-top:12px}
  .guide-detail{padding:18px}
  .guide-detail h2{font-size:26px}
  .guide-orbit{width:min(230px,72vw);height:min(230px,72vw)}
  .promo-popup{padding:8px}
  .promo-popup-dialog{width:min(340px,calc(100vw - 16px));max-height:78dvh;border-radius:17px}
  .promo-popup-link img{max-height:calc(78dvh - 52px)}
  .popup-options{height:52px;flex-basis:52px;padding:0 10px;gap:8px}
  .popup-options label{font-size:10px}
  .popup-options button{padding:0 11px;font-size:11px}
  .promo-popup-close{width:36px;height:36px;right:8px;top:8px;font-size:23px}
  .mobile-quick{left:7px;right:7px;bottom:max(7px,env(safe-area-inset-bottom));gap:4px;padding:5px;border-radius:15px}
  .mobile-quick a{min-height:42px;padding:4px 2px;font-size:9px;line-height:1.2;text-align:center}
  .legal-strip{display:block}
  .legal-strip>*{margin-top:7px}
}

/* Small phones */
@media (max-width:390px){
  .container{width:calc(100% - 18px)}
  .logo img{height:29px;max-width:132px}
  .demo-pill{display:none}
  .title{font-size:clamp(29px,10.5vw,38px)}
  .btn{padding:0 13px}
  .meta-grid{grid-template-columns:1fr}
  .symbol-head{align-items:flex-start!important}
  .symbol-badge{width:50px!important;height:50px!important;flex-basis:50px!important}
  .tv-chart{height:350px;min-height:310px}
  .calendar-widget{min-height:520px}
  .economic-widget{height:480px}
  .mobile-quick a{font-size:8px}
  .popup-options label{max-width:155px}
}

/* Short landscape screens */
@media (max-height:520px) and (orientation:landscape){
  .header{position:relative}
  .promo-popup-dialog{max-height:94dvh;width:min(500px,calc(100vw - 24px))}
  .promo-popup-link img{max-height:calc(94dvh - 48px)}
  .popup-options{height:48px;flex-basis:48px}
  .mobile-quick{display:none!important}
  .footer{padding-bottom:40px}
}

@media (hover:none){
  .card:hover,.strength-card:hover,.home-market-card:hover,.btn:hover{transform:none}
}