/* Responsive layer: phones, tablets and notebooks. Loaded after style.css and pages.css. */

/* Media never wider than its container */
img,video,canvas{max-width:100%}
img,video{height:auto}
.brand-mark{height:54px}
.brand-mark-footer{height:34px}

/* Grid children may shrink below their content width (prevents horizontal page scroll) */
.hero>*,.about-grid>*,.account-shell>*,.forecast-example>*,.research-layout>*,.lead-research>*,
.subscribe-layout>*,.auth-layout>*,.account-grid>*,.footer-top>*,.admin-columns>*{min-width:0}
.about-grid{grid-template-columns:minmax(0,1fr) 330px}
.account-shell{grid-template-columns:220px minmax(0,1fr)}
.table-panel,.admin-panel,.forecast-example-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.data-table{min-width:100%}

/* Header: actions never wrap; the main menu stays on one line and scrolls sideways if needed */
.mast-actions>a,.mast-actions>.btn,.account-menu-trigger{white-space:nowrap}
.nav-inner{overflow-x:auto;scrollbar-width:none}
.nav-inner::-webkit-scrollbar{display:none}
.nav-inner>a{white-space:nowrap;flex-shrink:0}
.nav-pricing{display:none!important}
.country-inner{scrollbar-width:none}
.country-inner::-webkit-scrollbar{display:none}

/* Hero buttons wrap as a group instead of breaking their labels */
.hero-buttons{flex-wrap:wrap}
.hero-buttons .btn{white-space:nowrap}

/* Notebooks (1151–1440px): tighter menu so all items fit on one line */
@media(max-width:1440px){.nav-inner{gap:24px}.nav-inner>a{font-size:11.5px}}
@media(max-width:1280px){.nav-inner{gap:20px}.nav-inner>a{font-size:11px}.mast-actions{gap:16px}}

/* Small laptops and tablets in landscape (≤1150px) */
@media(max-width:1150px){.nav-inner{gap:18px}.hero-copy h1{font-size:46px}.about-grid{grid-template-columns:minmax(0,1fr) 280px;gap:40px}
 .forecast-example{gap:28px;padding:34px 30px}}

/* Tablets (≤960px) */
@media(max-width:960px){.hero{grid-template-columns:1fr}.hero-copy>p,.hero-focus{max-width:620px}
 .pulse-card,.pulse-video{max-width:640px}.account-shell{gap:28px}}

/* Tablets in portrait (≤850px) */
@media(max-width:850px){.about-grid{grid-template-columns:minmax(0,1fr)}.brand-mark{height:44px;margin-right:10px}
 .hero-copy>p{font-size:14px}.hero .eyebrow{font-size:9px}}

@media(max-width:800px){.account-shell{grid-template-columns:minmax(0,1fr)}.account-nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
 .account-nav a{white-space:nowrap;flex-shrink:0}.account-nav-workspace{margin-top:0;border-top:0;padding-top:10px!important}}

/* Phones (≤620px) */
@media(max-width:620px){
 .brand-mark{height:34px;margin-right:8px}
 .brand{font-size:21px}
 .mast-actions{gap:10px}
 .mast-actions>.btn-outline{display:none}           /* Pricing moves into the main menu */
 .nav-pricing{display:flex!important}
 .mast-actions>.text-link{font-size:11px}
 .hero-copy h1{font-size:40px;letter-spacing:-1.5px}
 .hero-copy>p,.hero-focus{font-size:14px;max-width:none}
 .hero .eyebrow{font-size:9px}
 .hero-buttons{gap:12px}
 .hero-buttons .btn:not(.btn-plain){flex:1 1 auto;justify-content:space-between;font-size:12px;padding:13px 16px}
 .page-top h1,.about-content h1,.article-detail h1{font-size:34px}
 .pulse-card h2{font-size:26px}
 .forecast-example{padding:24px 16px;margin-block:36px}
 .forecast-example-table{padding:12px}
 .forecast-example-table td,.forecast-example-table th{font-size:12px;padding:6px 7px}
 .forecast-example-actions .btn{flex:1 1 100%;justify-content:space-between}
 .account-panel{padding:18px}
 .cookie-banner{padding:14px 18px}
 .cookie-banner-actions,.cookie-banner-actions .btn{width:100%}
 /* Text inputs at 16px stop iOS from zooming the page when a field is focused */
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}
 .data-table th{font-size:9px}
 .data-table td{font-size:12px}
 .demo-bar>.container{font-size:10px}
 .footer-bottom{font-size:10px}
}

/* Very narrow phones (≤380px) */
@media(max-width:380px){
 .container{width:calc(100% - 28px)}
 .brand{font-size:19px}
 .brand-mark{height:30px;margin-right:6px}
 .mast-actions{gap:8px}
 .mast-actions>.btn{padding:8px 9px}
 .hero-copy h1{font-size:35px}
 .footer-top{grid-template-columns:1fr}
}

/* Scrollable menus show a soft fade on the right as a hint that more items follow */
@media(max-width:1150px){.nav-inner,.country-inner,.account-nav,.admin-sidebar nav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent)}}
@media(min-width:621px){.admin-sidebar nav{-webkit-mask-image:none;mask-image:none}}
@media(min-width:801px){.account-nav{-webkit-mask-image:none;mask-image:none}}

/* Hero video keeps a sensible shape once it drops below the text */
@media(max-width:960px){.pulse-video{min-height:0;aspect-ratio:16/9}}

/* Legal-page tables (cookie list) become stacked cards on phones */
@media(max-width:620px){
 .about-content .table-panel{border:0;background:none;overflow:visible}
 .about-content .data-table,.about-content .data-table tbody,.about-content .data-table tr,.about-content .data-table td{display:block;width:100%}
 .about-content .data-table thead{display:none}
 .about-content .data-table tr{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px 14px;margin-bottom:10px}
 .about-content .data-table td{padding:4px 0!important;border:0!important;font-size:13px!important;white-space:normal!important;min-width:0!important;max-width:100%}
 .about-content .data-table td *{white-space:normal;word-break:break-word}
 .about-content .data-table td[data-label]:before{content:attr(data-label);display:block;font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
}