/* Round 26 — H5 adaptation pass: tables, inputs, small type, tap targets.
   Everything here is scoped to phones so the desktop layout is untouched. */

@media (max-width:767.98px){
  /* ---- 1. data tables become stacked cards instead of a clipped strip ---- */
  .table-wrap:not(.points-wrap){
    overflow:visible;
    background:transparent;
    border:0;
    box-shadow:none;
    border-radius:0;
  }
  .table-wrap:not(.points-wrap) table,
  .table-wrap:not(.points-wrap) tbody{display:block}
  .table-wrap:not(.points-wrap) caption{
    display:block;
    padding:0 2px 10px;
    border:0;
    font-size:13px;
  }
  .table-wrap:not(.points-wrap) thead{display:none}
  .table-wrap:not(.points-wrap) tbody{display:grid;gap:10px}
  .table-wrap:not(.points-wrap) tr{
    display:block;
    background:#fff;
    border:1px solid var(--border);
    border-radius:12px;
    padding:13px 14px 11px;
    box-shadow:0 10px 24px -22px rgba(14,17,22,.5);
  }
  .table-wrap:not(.points-wrap) td{
    display:block;
    padding:0 0 8px;
    border:0;
    font-size:14px;
    line-height:1.45;
  }
  .table-wrap:not(.points-wrap) td:last-child{padding-bottom:0}
  .table-wrap:not(.points-wrap) td[data-label]::before{
    content:attr(data-label);
    display:block;
    font:600 10.5px/1.2 var(--font);
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:2px;
  }
  .table-wrap:not(.points-wrap) tbody td:first-child{
    font-size:15.5px;
    font-weight:700;
    color:var(--ink);
    padding-bottom:9px;
  }
  .table-wrap:not(.points-wrap) tbody td:first-child::before{display:none}
  .table-wrap:not(.points-wrap) td.n{white-space:normal;text-align:left}

  /* ---- 2. form controls: 16px stops iOS from zooming the page on focus ---- */
  .fld input, .fld select, .fld textarea, form input, form select, form textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input:not([type]),
  select,
  textarea{
    font-size:16px;
    line-height:1.3;
    min-height:46px;
  }
  .fld select, form select, select{height:46px}
  .fld label{font-size:12.5px}
  .fld .hint{font-size:12.5px}

  /* ---- 3. no body copy under 12px on a phone ---- */
  .scard small, .card small, article small, .tf-card .tf-tag, .tf-tag, .feature small,
  .out-foot,.desk-label,.foot-legal,.brand-sub,.brand-panel .foot,
  .tf-tag,.settle-m,.bl,.kicker,.mini,.hero-trust,.manifesto-note,
  .table-wrap caption,.drawer-lang-title,.drawer-tag,.drawer-foot,
  .sec-head .kicker,.crumbs,.verify-foot,.points-notes p{font-size:12px}
  .points-table th{font-size:10.5px}
  .table-wrap:not(.points-wrap) td[data-label]::before{font-size:10.5px}

  /* ---- 4. tap targets: every standalone control is at least 40px tall ---- */
  .btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center;padding-block:0}
  .lang-btn{min-height:40px}
  .header-apply{min-height:36px}
  .menu-btn{min-height:44px}
  .tf-chip{min-height:40px}
  .chat-icons a{min-height:40px;min-width:40px}
  .drawer-nav a{min-height:44px}
  .drawer-contact a{min-height:44px}
  .verify-list .vitem{min-height:44px}
  .trust-items li{min-height:24px}
}


/* ---- tablet pass (768–1023): same functional guarantees, without the phone type ramp ---- */
@media (max-width:1023.98px){
  /* the decorative card stack collides with the page title once the panel narrows */
  .brand-panel .stack{display:none}
  .brand-panel .wordmark-bg{opacity:.28}
  select,input,textarea{font-size:16px!important}
  .fld input,.fld select,.fld textarea{min-height:46px}
  .btn{min-height:40px}
  .lang-btn{min-height:40px}
  .tf-chip{min-height:40px}
  .chat-icons a{min-height:40px;min-width:40px}
  .drawer-nav a,.drawer-contact a{min-height:44px}
  /* tablet prose floor: captions and legal lines stay at 12px */
  .out-foot,.scard small,.foot-legal,.foot-bottom,.tf-tag,.settle-m,.bl,
  .manifesto-note,.points-notes p,.table-wrap caption,.crumbs,.brand-sub{font-size:12px}
  .brand-sub{font-size:10.5px}
  .crumbs{font-size:11.5px}
  .eyebrow{font-size:11.5px}
}


/* ---- small phones (≤360): the step row must wrap instead of pushing the page wide ---- */
@media (max-width:479.98px){
  .steps{flex-wrap:wrap;gap:8px 12px;row-gap:8px}
  .steps .bar{display:none}
  .steps .s{min-width:0}
  .steps .s .lbl{font-size:12.5px;white-space:nowrap}
  .steps .s .n{width:26px;height:26px;font-size:12px}
  .form-panel,.auth-col,.inner{min-width:0}
  .points-table{font-size:11.5px}
  .points-table th,.points-table td{padding:9px 6px}
  .points-table th{font-size:9.5px;letter-spacing:.02em}
  .points-wrap{overflow-x:auto}
}