/* Members-area layout, on top of the shared roadside sheet. */
.topbar{display:flex;justify-content:flex-end;align-items:center;margin:0 0 10px}
.topbar img{height:38px;width:auto;aspect-ratio:600/183;display:block}
@media (max-width:420px){ .topbar img{height:30px} }

/* One row, scrollable sideways rather than wrapping into an unreadable block.
   Targets are 44px tall: this audience taps with a thumb, not a mouse. */
.menu{display:flex;gap:6px;overflow-x:auto;border-bottom:2px solid #e6eaee;margin:0 0 20px}
.menu a{flex:0 0 auto;padding:12px 16px;min-height:44px;box-sizing:border-box;
        text-decoration:none;color:#5b6672;font-weight:600;border-bottom:3px solid transparent}
.menu a.on{color:#14181d;border-bottom-color:#f76a35}

.hero{background:#14181d;color:#fff;border-radius:14px;padding:22px 20px;margin:0 0 18px}
.hero h1{color:#fff;margin:0 0 6px;font-size:1.55rem}
.hero .status{margin:0;color:#cfd6de}
.idbox{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0 0}
.idbox div{background:#1f252c;border-radius:10px;padding:10px 14px;min-width:132px}
.idbox span{display:block;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:#9aa6b2}
.idbox b{font-size:1.16rem;color:#fff;letter-spacing:.02em}
.callnow{display:inline-block;background:#f76a35;color:#fff;font-weight:700;font-size:1.3rem;
         padding:14px 24px;border-radius:10px;text-decoration:none;margin:14px 0 4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.tile{border:1px solid #dfe4ea;border-radius:12px;padding:14px;background:#fff}
.tile h3{margin:0 0 4px;font-size:1.04rem}
.tile p{margin:0 0 10px;color:#5b6672;font-size:.94rem}
.tile .meta{font-size:.8rem;color:#8a949f;text-transform:uppercase;letter-spacing:.04em}
.tile a{font-weight:700}
.acct li{margin:0 0 10px}
.hide{display:none}

/* Form fields. Big targets and 16px minimum: anything smaller makes iOS zoom
   the page on focus, which this audience reads as the page breaking. */
.field{width:100%;max-width:400px;padding:13px;font-size:1.05rem;box-sizing:border-box;
       border:1px solid #c9d1d9;border-radius:8px;margin:4px 0 2px}
.field:focus{outline:3px solid #f76a35;outline-offset:1px;border-color:#f76a35}
label.label{display:block;font-weight:600;margin:0 0 2px}
.code{font-size:1.9rem;letter-spacing:.32em;text-align:center;width:100%;max-width:320px;
      padding:14px;border:1px solid #c9d1d9;border-radius:10px}

/* The address block reads as a postal address: one line per line, and the note
   underneath kept clear of it so it is not mistaken for part of the address. */
#addr div{line-height:1.55}
#addrNote{margin-top:12px}

/* Buttons: white, bigger, bolder.
   The brand orange #f76a35 with white text measures 2.9:1, which is below the
   3:1 floor even for large text, and worse than the near-black it replaces.
   So the fill drops to #e2551f, where white reaches 3.7:1 and clears the bar
   at this size. It still reads as the same orange. */
.qp-road .btn,
.qp-road .btn--block{
  background:#e2551f;
  color:#fff;
  font-weight:700;
  font-size:20px;
  padding:18px 28px;
}
.qp-road .btn:hover{background:#c2410c;color:#fff}
.callnow{background:#e2551f;font-size:1.45rem;padding:16px 26px}

/* Narrow screens: the four tabs must all be visible at 375px.
   The row scrolls sideways as a fallback, but a tab that is merely reachable by
   a scroll nobody can see is a tab that does not exist, and "My details" is
   where the address and the cancellation live. Tightening the padding is enough
   to fit all four without shrinking the tap target below 44px. */
@media (max-width:430px){
  .menu{gap:2px}
  .menu a{padding:12px 9px;font-size:.97rem}
}

/* The benefits, as a list you can scan while standing at the roadside, not as a
   sentence buried under the phone number. Each line is one thing that can go
   wrong with a car, in the words a person would use for it. */
.benefits{list-style:none;padding:0;margin:14px 0 4px}
.benefits li{padding:9px 0 9px 30px;position:relative;font-size:1.06rem;line-height:1.45;
           border-bottom:1px solid #eef1f4}
.benefits li:last-child{border-bottom:0}
.benefits li::before{content:"\2713";position:absolute;left:2px;top:9px;
                   color:#e2551f;font-weight:700}

/* Other benefits: one block each, the code big enough to read aloud to someone
   on the phone, and a copy button because retyping a code is where it goes wrong. */
.perk{padding:14px 0;border-bottom:1px solid #eef1f4}
.perk:last-child{border-bottom:0}
.perk h3{margin:0 0 4px;font-size:1.06rem}
.perk p{margin:0 0 8px;color:#5b6672}
.perk-code{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.code-txt{font-family:Menlo,Consolas,monospace;font-size:1.15rem;font-weight:700;
          letter-spacing:.06em;background:#f4f6f8;border:1px dashed #b9c2cc;
          border-radius:8px;padding:8px 12px}
.copy{min-height:44px;padding:0 16px;border-radius:8px;border:1px solid #c9d1d9;
      background:#fff;font-weight:600;font-size:1rem;cursor:pointer}