/* Clear app typography and responsive layouts for the public prototype. */
html { -webkit-text-size-adjust: 100%; }
h1, h2, h3, .s-title, .card-title, .feat-title, .brand-name { font-weight: 700; }
h1 em, h2 em, h3 em, .wiz-title em, .hero h1 em, .cap-hero h1 em, .lb-hero h1 em, .ol-hero h1 em, .fx-h em, .onboard-title em, .alogin-title em { font-style: normal; font-weight: inherit; }
button:focus-visible, [tabindex]:focus-visible, a:focus-visible { outline: 3px solid var(--tide-light); outline-offset: 3px; }
.table-scroll { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 600px; }

@media (max-width: 980px) {
  .view, .view > *, .hero-content > *, .cap-hero-content > *, .fx-wrap > *, .detail-body > *, .grid-2 > *, .grid-3 > * { min-width: 0; }
  .cap-hero-content, .how-strip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lb-grid { grid-template-columns: minmax(0, 1fr); }
  .ol-grid-2 { grid-template-columns: minmax(0, 1fr) !important; }
  .lb-grid > *, .ol-grid-2 > *, .ol-section-h > * { min-width: 0; }
  .cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
  .portal, .admin, .grid-2, .grid-3, .detail-body { grid-template-columns: minmax(0, 1fr); }
  .p-main, .a-main { min-width: 0; overflow: auto; }
  .p-side { display: block; position: static; height: auto; padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .p-user { padding: 0 16px 10px; margin-bottom: 10px; }
  .p-av { display: none; }
  .p-nav { display: flex; gap: 6px; padding: 0 16px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .p-item { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
  .nav-links, .nav-tools, .p-nav, .cats, .cap-tabs, .detail-tabs, .profile-tabs, .lb-tabs, .composer-tabs, .quick-replies { scrollbar-width: none; overscroll-behavior-x: contain; }
  .nav-links::-webkit-scrollbar, .nav-tools::-webkit-scrollbar, .p-nav::-webkit-scrollbar, .cats::-webkit-scrollbar, .cap-tabs::-webkit-scrollbar, .detail-tabs::-webkit-scrollbar, .profile-tabs::-webkit-scrollbar, .lb-tabs::-webkit-scrollbar, .composer-tabs::-webkit-scrollbar, .quick-replies::-webkit-scrollbar { display: none; }
  .modal { max-height: calc(100dvh - 32px); overflow: auto; }
}

@media (max-width: 600px) {
  body { overflow-x: auto; }
  .nav { position: relative; padding: 10px 16px 4px; }
  .brand-name { font-size: 21px; }
  .brand-sub { font-size: 9px; }
  .nav-tools { gap: 8px; }
  .nav-tools { flex-wrap: wrap; overflow: visible; }
  .nav-tools .search { flex: 1 1 140px; width: auto; min-width: 0; }
  .nav-tools .search input { width: 100%; box-sizing: border-box; }
  .nav-tools input { font-size: 16px; min-height: 44px; }
  .nav-tools .btn, .nav-tools .theme-btn, .nav-tools .bell-btn { min-height: 44px; }
  .nav-tools .theme-btn, .nav-tools .bell-btn { min-width: 44px; }
  .lang-opt { padding: 10px 12px; }
  .hero { padding: 34px 16px 46px; }
  .hero-content { gap: 28px; }
  .hero h1, .cap-hero h1 { font-size: clamp(28px, 8vw, 36px); line-height: 1.16; letter-spacing: -.025em; margin-bottom: 16px; }
  .hero p, .cap-hero p, .fx-sub { font-size: 15px; line-height: 1.65; }
  .hero-eyebrow { font-size: 10px; letter-spacing: .025em; padding: 6px 10px; margin-bottom: 16px; max-width: 100%; }
  .hero-cta { flex-wrap: wrap; gap: 10px; }
  .hero-cta > button { flex: 1 1 145px; justify-content: center; min-height: 48px; }
  .hero-meta, .cap-hero-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 22px; }
  .hero-meta strong, .cap-hero-meta strong { font-size: 21px; }
  .hero-card { width: 100%; }
  .trust { justify-content: flex-start; gap: 12px; padding: 16px; }
  .trust-item { flex: 1 1 240px; }
  .section, .how-strip, .detail-body { padding: 28px 16px; }
  .s-head { gap: 12px; margin-bottom: 18px; }
  .s-title { font-size: 25px; line-height: 1.2; }
  .s-sub, .card-loc, .card-meta, .feat-desc, .how-d, .explainer-d { font-size: 14px; line-height: 1.6; }
  .cards { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .card-body, .feat-body, .how-step, .cap-stat-card { padding: 18px; }
  .card-title { font-size: 19px; line-height: 1.4; }
  .card-meta, .card-foot, .feat-amounts, .cap-stat-row { gap: 10px; flex-wrap: wrap; }
  .card-meta > *, .feat-amounts > * { min-width: 0; }
  .btn-donate, .btn-lend, .btn-invest, .cat, .cap-tab, .detail-tab, .profile-tab, .lb-tab, .composer-tab { min-height: 44px; }
  .cats, .cap-tabs, .detail-tabs, .profile-tabs, .lb-tabs, .composer-tabs, .quick-replies { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .cats > *, .cap-tabs > *, .detail-tabs > *, .profile-tabs > *, .lb-tabs > *, .composer-tabs > *, .quick-replies > * { flex: 0 0 auto; white-space: nowrap; }
  .cap-tabs { width: 100%; border-radius: 16px; gap: 4px; }
  .cap-tab { padding: 9px 13px; }
  .cap-hero, .lb-hero, .ol-hero { padding: 30px 16px; }
  .feat-title, .fx-h, .onboard-title, .wiz-title, .lb-hero h1, .ol-hero h1 { font-size: 27px; line-height: 1.25; }
  .feat-amounts strong { font-size: 20px; }
  .feat-cta { padding: 12px 16px; min-height: 48px; }
  .fin-row { gap: 6px; }
  .fin-val { font-size: 14px; }
  .fx-section { padding: 28px 16px; }
  .fx-card { padding: 16px; }
  .fx-input { min-width: 0; width: 100%; }
  .fx-break-row { gap: 12px; flex-wrap: wrap; }
  .map-head, .map-legend { padding: 16px; gap: 12px; }
  .map-scroll { max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
  .map-canvas { height: 340px; min-width: 540px; }
  .islands { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .island { padding: 12px; }
  .island-amt { font-size: 18px; }
  .phones { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .phone { max-width: 100%; }
  .phone-screen, .m-content { overflow: auto; }
  .p-main, .a-main { padding: 24px 16px; }
  .metrics, .port-grid, .profile-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .metric, .port-card { padding: 14px 12px; }
  .metric-val, .port-val { font-size: 21px; overflow-wrap: anywhere; }
  .block-h { gap: 10px; flex-wrap: wrap; }
  .block-b { padding: 14px; }
  .alloc { flex-direction: column; align-items: stretch; }
  .alloc-ring { align-self: center; }
  .row { flex-wrap: wrap; gap: 8px; }
  .row-info { flex-basis: 140px; }
  .row-name { white-space: normal; }
  .row-prog { flex: 1 1 90px; }
  .act { flex-wrap: wrap; }
  .act-text { min-width: 150px; }
  .bar-lbl { flex-basis: 85px; }
  .bar-val { min-width: 65px; }
  .form-card, .onboard-card, .kyc-card { padding: 20px 16px; }
  .onboard { min-height: 0; padding: 24px 16px; align-items: flex-start; }
  .onboard-sub, .wiz-sub, .form-card-s, .s-sub { color: var(--ink2); }
  .otp-grid { gap: 6px; }
  .otp { flex: 1 1 0; min-width: 0; width: 100%; height: 48px; }
  .form-row { grid-template-columns: minmax(0,1fr); }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; max-width: 100%; }
  .fx-card .fx-input { font-size: 26px; }
  .form-in, .btn { min-height: 44px; }
  .modal-bg { padding: 12px; align-items: center; overflow: auto; }
  .modal { max-height: calc(100dvh - 24px); border-radius: 18px; }
  .modal-h, .modal-b, .modal-f { padding: 16px; }
  .modal-x { min-width: 44px; min-height: 44px; }
  .amt-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .notif-pop { position: fixed; top: 12px; right: 12px; width: calc(100% - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
  .toast { max-width: calc(100% - 24px); white-space: normal; }
  .detail-hero { height: 360px; }
  .detail-hero-content { padding: 0 16px; bottom: 20px; }
  .detail-title { font-size: 26px; line-height: 1.2; }
  .detail-meta-bar { gap: 10px; }
  .detail-amt-big { font-size: 28px; }
  .detail-side { min-width: 0; }
  .rep-row { flex-wrap: wrap; }
  .lb-stats, .ol-stats { flex-wrap: wrap; gap: 18px; }
  .podium { grid-template-columns: repeat(3,minmax(120px,1fr)); overflow-x: auto; padding-top: 20px; padding-bottom: 8px; scrollbar-width: thin; }
  .ol-compare { flex-wrap: wrap; gap: 12px; }
  .ol-compare-text { min-width: 0; }
  .ol-disputes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ol-section-h { flex-wrap: wrap; gap: 12px; }
  .impact-stats { grid-template-columns: minmax(0,1fr); }
  .wiz-nav { gap: 12px; flex-wrap: wrap; }
  .step-labels { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}