@media(max-width:767px){
/* Mobile pass (loaded last, only for viewports <= 767px via media attribute).
   Goals: compact spacing, readable type (no text under 11px), 44px tap targets, desktop-level detail kept. */

/* ---------- Header ---------- */
.ok-site-header{position:sticky;top:0;z-index:50;background:#fff}
.ok-header-shell{min-height:56px;margin:0;padding:8px 14px;align-items:center}
.ok-site-brand{flex:1;min-width:0;font-size:22px;line-height:1}
.ok-site-brand .custom-logo-link{display:block;line-height:0}
.custom-logo{width:auto;max-width:170px;height:auto;max-height:38px}
.ok-menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:54px;height:44px;padding:0;border-radius:4px}
.ok-menu-toggle span{display:block;width:22px;height:2px;margin:0;background:#fff}
.ok-menu-toggle b{display:block;margin:0;font-size:10px;line-height:1;letter-spacing:0;white-space:nowrap}
.ok-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ok-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.ok-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.ok-menu-toggle span{transition:transform .2s,opacity .2s}
.ok-mobile-nav{top:100%;right:0;left:0;width:100%;max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);padding:10px 16px 16px;overflow-y:auto;overscroll-behavior:contain;border-top:3px solid #94bd9a}
.ok-mobile-nav .ok-menu a{display:block;padding:13px 4px;font-size:15px;line-height:1.4}
.ok-mobile-nav .ok-search--mobile{margin-bottom:6px}

/* ---------- Global type & spacing ---------- */
body{-webkit-text-size-adjust:100%;line-break:strict;overflow-wrap:break-word}
input,textarea,select{font-size:16px}
img{max-width:100%;height:auto}
.ok-category,.ok-card time,.ok-item time,.ok-feature time,.ok-community-card time,.ok-news-breadcrumb,.ok-news-breadcrumb a{font-size:11px}
.ok-title h1,.ok-title h2{font-size:22px;line-height:1.35}
.ok-title small{font-size:12px}

/* ---------- Home ---------- */
.ok-hero{height:auto}
.ok-hero-slider{height:auto}
.ok-hero-track{height:348px;margin-top:10px}
.ok-hero-card{display:flex;flex-direction:column;width:90vw;height:auto;background:#fff}
.ok-hero-card__image{flex:0 0 auto;aspect-ratio:16/9;height:auto!important}
.ok-hero-card__image img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:contain!important}
.ok-hero-card__content{position:static;flex:0 0 auto;max-height:none;padding:12px 14px;overflow:hidden;background:#fff}
.ok-hero-card h2{margin:6px 0 4px;font-size:17px;line-height:1.4}
.ok-hero-card p{display:-webkit-box;margin:0;font-size:12px;line-height:1.55;-webkit-line-clamp:2}
.ok-slider-arrow{top:92px}
.ok-slider-dots{margin:12px 0 16px}
.ok-slider-dots button{position:relative;width:11px;height:11px}
.ok-slider-dots button::after{position:absolute;inset:-14px -7px;content:""}
.ok-pickup{padding:30px 0 24px}
.ok-pickup-grid{width:auto;max-width:100%;margin:28px 0 0;padding:0 16px 14px;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:16px;scrollbar-width:none}
.ok-pickup-grid::-webkit-scrollbar{display:none}
.ok-pickup-grid .ok-card{flex:0 0 min(74vw,300px);width:auto;scroll-snap-align:start}
.ok-pickup-grid .ok-card:last-child{margin-right:4px}
.ok-pickup-grid .ok-card__image{aspect-ratio:16/10}
.ok-pickup-grid .ok-card h3{display:-webkit-box;margin:8px 0 4px;overflow:hidden;font-size:15px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.ok-pickup-grid .ok-card time{display:block;font-size:12px}
.ok-pickup .ok-title h2{font-size:26px}
.ok-pickup .ok-title:before{top:-14px;width:88px;height:88px}
.ok-news{padding:30px 0}
.ok-news .ok-title,.ok-news-lead{margin-bottom:20px}
.ok-rule-title{margin-bottom:16px}
.ok-community{padding:32px 0 12px}
.ok-community-button{margin:16px auto}
.ok-experts{padding:30px 0 28px}
.ok-site-footer{padding:30px 20px}

.ok-feature__body{margin-top:0}
.ok-category-list{gap:8px}
.ok-category-list a{display:flex;align-items:center;justify-content:space-between;min-height:0;height:auto;padding:12px 14px;font-size:14px;letter-spacing:.04em}
.ok-item-grid{grid-template-columns:1fr;gap:14px}
.ok-item{grid-template-columns:128px 1fr;gap:12px;align-items:start}
.ok-item h3{font-size:14px;line-height:1.5}

/* ---------- /news/ ---------- */
.ok-news-pickup{padding:22px 0 14px}
.ok-news-category-section{padding:28px 0}
.ok-news-hero{height:auto}
.ok-news-hero .ok-news-page-title{height:auto;padding-bottom:8px}
.ok-news-hero .ok-hero-slider{height:auto}
.ok-news-hero .ok-hero-track{height:auto;align-items:stretch}
.ok-news-hero .ok-hero-card{height:auto!important}
.ok-news-hero .ok-hero-card__content{height:auto;max-height:none!important;padding:12px 14px 14px;overflow:visible}
.ok-news-hero .ok-hero-card__content h2{font-size:17px;line-height:1.45}
.ok-news-hero .ok-hero-card__content p{display:-webkit-box;margin:6px 0 0;font-size:12px;line-height:1.6;-webkit-line-clamp:2}
.ok-news-hero .ok-slider-arrow{top:88px}
.ok-news-hero .ok-slider-dots{margin:12px 0 14px}
.ok-news-category-menu{justify-content:flex-start;gap:8px;padding:10px 12px 0;overflow-x:auto;scrollbar-width:none}
.ok-news-category-menu::-webkit-scrollbar{display:none}
.ok-news-category-menu a{flex:0 0 auto;width:auto;padding:10px 14px 9px;font-size:12px;letter-spacing:.04em;white-space:nowrap}
.ok-news-breadcrumb{margin-top:10px!important;font-size:11px!important}

/* ---------- Article ---------- */
.ok-single-category-menu{justify-content:flex-start;gap:6px;padding:8px 12px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.ok-single-category-menu::-webkit-scrollbar{display:none}
.ok-single-category-menu a{flex:0 0 auto;width:auto;padding:9px 12px;font-size:12px;line-height:1.2}
.ok-single-breadcrumb{padding:8px 16px;overflow-x:auto;font-size:11px;white-space:nowrap}
.ok-single-breadcrumb span{padding:0 6px}
.ok-single-header{padding-top:8px}
.ok-single-header h1{font-size:22px;line-height:1.5;text-wrap:balance}
.ok-single-content{font-size:16px;line-height:1.95;overflow-wrap:anywhere;word-break:auto-phrase}
.ok-single-content h2{margin:28px 0 12px;font-size:19px;line-height:1.5}
.ok-single-content h3{margin:22px 0 10px;font-size:17px;line-height:1.5}
.ok-single-content table{display:block;max-width:100%;overflow-x:auto}
.ok-single-content a{text-underline-offset:3px}
.ok-single-related{margin-top:28px}
.ok-community-slider{width:min(300px,100%)}
.ok-community-track{height:424px}
.ok-community-card{display:flex;flex-direction:column;height:100%!important}
.ok-community-card__body{display:flex;flex:1;flex-direction:column}
.ok-community-more{margin-top:auto}
.ok-community-more{font-size:12px}

/* ---------- Article extras: readable meta, share, sidebar, related ---------- */
.ok-single-meta time{font-size:12px!important}
.ok-single-tools{gap:8px}
.ok-single-tools span{font-size:11px!important}
.ok-single-tools a{display:inline-grid;min-width:36px;min-height:36px;place-items:center;font-size:14px!important}
.ok-single-sidebar .ok-sidebar-panel p{font-size:13px!important;line-height:1.7!important}
.ok-sidebar-posts time,.ok-single-related-grid time{font-size:11px!important}
.ok-sidebar-posts span,.ok-single-related-grid strong{font-size:13px!important;line-height:1.5}
.ok-single-sidebar{display:block;width:auto;margin:24px 0 0;padding:0}

/* ---------- Static pages / forms: no text under 11px, 16px inputs (prevents iOS zoom) ---------- */
[class*="eyebrow"],[class*="-label"],[class*="kicker"],.ok-about-topic span,.ok-about-guidance__heading p,.ok-contact-introduction span,.ok-contact-form-card__heading span,.ok-contact-form em{font-size:11px!important}
.ok-contact-form input,.ok-contact-form textarea,.ok-contact-form select,form input[type="text"],form input[type="email"],form textarea{font-size:16px!important}

/* ---------- Category / tag / author / search lists: tighter rhythm ---------- */
.ok-editorial-archive{padding:26px 0 34px}
.ok-editorial-archive-header{margin-bottom:18px;padding-bottom:18px}
.ok-editorial-feed{gap:16px}
.ok-editorial-row{padding-bottom:16px}
.ok-archive{padding-top:26px;padding-bottom:34px}
.ok-page-heading{margin-bottom:18px}

/* ---------- Community slider arrows stay inside the viewport (was overflowing at 320px) ---------- */
.ok-community-prev{left:-34px}
.ok-community-next{right:-34px}
.ok-community-arrow{width:32px;height:44px}
html,body{overflow-x:clip}
.ok-title h1,.ok-title h2{letter-spacing:.06em}
.ok-title small{letter-spacing:.04em}

}

/* Tablet + phone: keep slider arrows inside the viewport and never scroll sideways */
.ok-community-prev{left:-34px}
.ok-community-next{right:-34px}
html,body{overflow-x:clip}