/* KEY INFORMATION, PICKED OUT — batch SIGNIN-PINK (Admin PIN, 2026-10-09).
   Admin: "sign up page ... writing is so boring. No pink accents highlighting key stuff or bold style some key info
   etc that's have site wide". He picked LEVEL C blind ("more pink") on pick test signin-1009; the spec and its contrast
   measurements are /root/Leslie/_scratch/signin/levels.md.
   ONE HOME for the treatment on the website (base.html) AND the ordering app (app.html), loaded LAST on both, so a page
   only ever WRAPS the words it already has in one of these classes. The words themselves never change here.
   Colours are the Brand Studio variables (--pink, --navy, --muted), never hex, so a Put live moves these too.
   ⛔ PINK SMALL TEXT ONLY ON WHITE. Brand pink on white is 4.57:1 (passes); on the cream #FFF8F3 it is 4.34:1 (fails).
      On cream a key word is .k (bold navy), never .kp or .klabel. Large Bebas headings (.hp) may be pink on white or
      cream, never on navy, a photo or a dark card (pink on navy is 2.7:1) - there a key word is .kw (bold white). */

.k{font-weight:700;color:var(--navy)}                 /* a key fact: bold navy, safe on white and cream */
.kp{font-weight:700;color:var(--pink)}                /* a money or benefit word: bold pink - WHITE surfaces only */
.kw{font-weight:700;color:#fff}                       /* a key fact on a dark card or photo: bold white */
.klabel{display:block;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink);margin:0 0 4px}
.hp{color:var(--pink)}                                /* the pink word in a big heading */
.rule{display:block;width:44px;height:3px;background:var(--pink);border-radius:2px;margin:8px 0 12px}
.rule.c{margin-left:auto;margin-right:auto}           /* under a centred heading */

/* THE SIGN-IN SHEETS — website account page (#loginSheet in account.html), order page (#loginSheet in order.html)
   and the app (.login-sheet in app.html). All three are white. */
#lgLead{font-weight:500;color:var(--navy)}            /* the lead: medium navy instead of thin grey */
#loginSheet .sub{font-weight:500;color:var(--navy)}     /* order page: the opening line matches the app sheet (polish pass 2026-10-10) */
#lgLead .k-hint{color:var(--muted)}                   /* "Bermuda numbers..." stays the quieter line */
#lgId{border:1.5px solid var(--pink)}                 /* the box you type in */
#loginSheet .center.muted,#loginSheet .divider-or,.k-or{font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink)}
#login-wa-lead{font-weight:500}
.login-sheet #email-input{border-color:var(--pink)}
.login-sheet #otp-input{border-color:var(--pink)}      /* the 6-digit code box, same line as the email box (FIX-3, W-38afd7, 2026-10-13): the 2px light-blue .input-field line is 1.95:1 on the white sheet and reads as no border */
/* FIX-5 (W-80ba92, Admin PIN 2026-10-13): EVERY box on the sign-in sheets takes that same line. The name boxes and the
   code box on the website sheets sat at 1px --line (#E6DDD2, 1.3:1 on white) or #d9cec2 (1.5:1), and the app's other
   .input-field boxes at 2px light blue (1.95:1) - all under the 3:1 a control's edge needs. Brand pink on white is 4.57:1. */
.login-sheet .input-field{border-color:var(--pink)}
#loginSheet #lgCode,#loginSheet #lgFirst,#loginSheet #lgLast{border-color:var(--pink)}
#loginSheet .divider-or{text-align:center;margin:16px 0}   /* the "or" between the social buttons and the box, both website sheets */

/* JOIN PAGE (join.html) */
.rw-offer p{font-weight:500}
.rw-scratch p,.rw-scratch li{font-weight:500}
.rw-scratch .tag{background:var(--pink)}                                   /* the NEW tag */
.rw-scratch li::before{content:"\2713";color:var(--pink);font-weight:800}  /* pink ticks instead of the ticket emoji */
.rw-scratch .card{border-left:4px solid var(--pink)}

/* ACCOUNT PAGE signed out (account.html) and the app's How It Works list (both white cards) */
#loggedOut .acard p.muted{font-weight:500}
.acard .perk > div:nth-child(2) b{color:var(--pink)}
#screen-rewards .perk-list li > div > strong{color:var(--pink)}

/* WALLET BADGES (2026-10-10, Admin PIN, batch WALLET-BADGES). Apple's and Google's own
   artwork, shown as they made it: no colour or shape changes, kept at 48px tall (Google's
   minimum) with clear space around it, and a visible focus ring for keyboards. */
.wallet-badge{display:block;margin:14px auto 0;padding:0;border:0;background:none;cursor:pointer;line-height:0}
.wallet-badge img{display:block;height:48px;width:auto;max-width:100%}
.wallet-badge:focus-visible{outline:2px solid var(--navy,#1C3554);outline-offset:4px;border-radius:26px}
.wallet-badge[disabled]{opacity:.5;cursor:default}