:root{
  --ink:#16181d; --muted:#5a6270; --line:#e4e2de;
  --bg:#fffdfa; --soft:#f7f4ef; --accent:#b8430f; --accent-soft:#fdeee6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:12px;background:var(--accent);color:#fff}

header{border-bottom:1px solid var(--line);background:var(--bg)}
nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px}
.logo{font-weight:800;font-size:21px;letter-spacing:-.4px;text-decoration:none;color:var(--ink)}
.logo span{color:var(--accent)}
.tagline{color:var(--muted);font-size:14px}

h1{font-size:clamp(31px,5vw,52px);line-height:1.1;letter-spacing:-1.2px;margin:0 0 20px;max-width:19ch}
h2{font-size:clamp(23px,3vw,31px);letter-spacing:-.6px;margin:0 0 14px}
h3{font-size:17px;margin:0 0 7px}
.lede{font-size:20px;color:var(--muted);max-width:56ch;margin:0 0 28px}
.sub{color:var(--muted);margin:0 0 32px;max-width:62ch}
section{padding:66px 0;border-top:1px solid var(--line)}
.hero{padding:78px 0 66px;border-top:0}
.tag{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:6px 12px;border-radius:99px;margin-bottom:18px}
.band{background:var(--soft)}

.numberplate{display:inline-block;background:var(--ink);color:#fffdfa;border-radius:12px;
  padding:20px 28px;font-size:clamp(26px,4vw,38px);font-weight:700;letter-spacing:.13em;
  font-variant-numeric:tabular-nums;margin:6px 0 12px}
.plate-note{color:var(--muted);font-size:14px;margin:0}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:26px}
.card{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:26px}
.band .card{background:var(--bg)}
.card p{margin:0;color:var(--muted);font-size:15.5px}

/* Scoped to .steps on 2026-09-25. These three rules are the HOME PAGE's
   numbered explainer - a counter circle and a 52px indent - and they were
   written as bare .step, so every page that reused the class name for its own
   panels inherited an orange numeral and an indent nobody asked for. /join had
   it on all four screens of signup (renamed to .jstep before I understood the
   real cause); /c/, /me and /r/ still had it. Scoping to the list they belong
   to fixes all of them at once and is what the rule actually means. */
.steps{counter-reset:s;max-width:66ch}
.steps .step{counter-increment:s;position:relative;padding-left:52px;margin-bottom:28px}
.steps .step::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:grid;
  place-items:center;font-size:15px}
.steps .step p{margin:0;color:var(--muted);font-size:15.5px}

.split{display:grid;grid-template-columns:1fr 1fr;gap:44px}
@media(max-width:740px){.split{grid-template-columns:1fr;gap:32px}}

.quote{border-left:3px solid var(--accent);padding:4px 0 4px 22px;margin:0 0 26px;
  max-width:54ch;font-size:18px}
.quote p{margin:0 0 6px}
.quote p:last-child{margin:0}
.quote .said{color:var(--muted);font-size:15px}

.trades{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.trades li{border:1px solid var(--line);background:var(--bg);border-radius:99px;
  padding:8px 15px;font-size:15px}

.nots{list-style:none;margin:0;padding:0;max-width:70ch}
.nots li{padding:18px 0;border-bottom:1px solid var(--line)}
.nots li:last-child{border-bottom:0}
.nots b{display:block;margin-bottom:4px}
.nots span{color:var(--muted);font-size:15.5px}

.status{background:var(--ink);color:#fffdfa;border-radius:14px;padding:32px}
.status h2{margin:0 0 10px;color:#fffdfa}
.status p{margin:0;color:#c9c6c0;max-width:56ch}

footer{border-top:1px solid var(--line);padding:34px 0;color:var(--muted);font-size:14px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* cookie consent bar — Accept and Reject deliberately identical in weight */
#cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--ink);
  color:#fffdfa;border-top:3px solid var(--accent);box-shadow:0 -6px 28px rgba(0,0,0,.22)}
.cookiebar-in{max-width:1040px;margin:0 auto;padding:20px 24px;display:flex;gap:26px;
  align-items:center;justify-content:space-between;flex-wrap:wrap}
#cookiebar h2{font-size:17px;margin:0 0 5px;color:#fffdfa;letter-spacing:0}
#cookiebar p{margin:0;font-size:14.5px;color:#d7d4ce;max-width:62ch;line-height:1.55}
#cookiebar a{color:#ffb894}
.cookiebar-btns{display:flex;gap:11px;flex-shrink:0}
.ck-btn{font:inherit;font-size:15px;font-weight:600;padding:12px 22px;border-radius:8px;
  border:1px solid #fffdfa;background:transparent;color:#fffdfa;cursor:pointer;white-space:nowrap}
.ck-btn:hover{background:#fffdfa;color:var(--ink)}
#cookiebar :focus-visible{outline:3px solid #ffb894;outline-offset:3px}
@media(max-width:700px){.cookiebar-in{flex-direction:column;align-items:flex-start;gap:16px}
  .cookiebar-btns{width:100%}.ck-btn{flex:1}}

/* Nothing about cookie consent belongs on paper. A bartender printing her card
   to hand across the bar was getting "We would like to use Google Analytics to
   count visits... Accept analytics / Reject" printed on it, and the card a
   customer prints to hand her had the whole site footer as well. Put here rather
   than in each card so the next printable page cannot inherit the bug. */
@media print {
  #cookiebar, #cookie-settings { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Touch targets, added 2026-09-25.

   Read /join, /me and /my in a real browser at iPhone size (390x844) instead of
   from a desktop, and measured every control: 38 of 47 were rendering at
   Chrome's default 13.3px and 32 were under 44px tall. The form controls had
   simply never been styled. Everything around them had been - headings, cards,
   the cookie bar - so it looked finished on a laptop and was unusable on the
   only device this product is ever used on: standing up, one-handed, mid-shift.

   Two separate faults:

   1. iOS Safari ZOOMS THE PAGE IN when you focus a field whose text is under
      16px, and does not zoom back out. 16px is the exact threshold. Every text
      field in WIFFO was 13.3px, so tapping "Your mobile number" - the very
      first thing a bartender does here - left her panning a zoomed page
      sideways to find the button she had just been told to press.
   2. A 21px-tall button is under every target-size floor there is. WIFFO's own
      accessibility page commits the site to WCAG 2.2 Level AA, whose criterion
      2.5.8 Target Size (Minimum) is 24px - so "Post it", "Add it", "Follow" and
      "Delete my account" were breaking a promise the site publishes, not merely
      feeling small. The floor set here is 44px: Apple's HIG, and WCAG 2.5.5 at
      AAA. The radios on /my were 13px dots.

   Element selectors, in the SHARED stylesheet, so a page written tomorrow
   inherits the floor rather than copying the fault. Each page's own <style>
   loads after this file and can still override any of it on purpose.
   --------------------------------------------------------------------------- */
input, select, textarea, button { font-family: inherit; }

/* The zoom threshold: anything you can type into is at least 16px. */
input:not([type=radio]):not([type=checkbox]), select, textarea { font-size: 16px; }

input:not([type=radio]):not([type=checkbox]):not([type=file]), select, textarea {
  min-height: 44px; padding: 10px 12px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 8px;
  background: #fff; color: var(--ink);
}
textarea { line-height: 1.5; padding-top: 11px; }

button, input[type=submit] {
  min-height: 44px; font-size: 16px; padding: 11px 18px;
  border-radius: 8px; cursor: pointer;
}

/* A file input's own button is a separate box and inherits none of the above. */
input[type=file] { min-height: 44px; }
input[type=file]::file-selector-button {
  font: inherit; font-size: 16px; min-height: 40px; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--soft); color: var(--ink); cursor: pointer; margin-right: 10px;
}

/* A radio is not its own tap target - the label is, and tapping the words
   already selects it. So enlarge the dot, and give the label a floor. Only a
   floor: the .choice labels on /my are already 78-101px tall and must not be
   re-laid-out, and min-height leaves them exactly as they are. */
input[type=radio], input[type=checkbox] {
  width: 20px; height: 20px; accent-color: var(--accent);
}
label:has(> input[type=radio]), label:has(> input[type=checkbox]) { min-height: 44px; }

/* ---------------------------------------------------------------------------
   Buttons, added 2026-09-25.

   `class="btn btn-primary"` and `class="btn btn-secondary"` appear 44 times
   across WIFFO's pages and were defined NOWHERE. Somebody wrote the intention
   into every template - this is the main action, that one is the way out - and
   the stylesheet never delivered it, so every button in the product looked
   identical. "Post it" and "Cancel" carried the same weight. "Give me my
   number" and "Call me instead" carried the same weight.

   Same shape as the touch-target fault: the markup said what it meant and the
   CSS said nothing. Defined here, in the shared stylesheet, on the class rather
   than per page, so the next template that writes btn-primary gets it.

   Contrast: #b8430f on #fffdfa is 5.4:1, above the 4.5:1 that WCAG AA needs for
   normal text, and above the 4.8:1 the accessibility page names as the site's
   current lowest. This does not lower that floor.
   --------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:11px 20px; border-radius:8px;
  border:1px solid transparent; font:inherit; font-size:16px; font-weight:600;
  line-height:1.2; text-decoration:none; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#fffdfa; border-color:var(--accent); }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-secondary:hover{ background:var(--soft); }
.btn:disabled, .btn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }

/* Two actions side by side wrap instead of overflowing a phone. */
.cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* ---------------------------------------------------------------------------
   `hidden` has to win. Added 2026-09-25, same day it was broken.

   Defining .btn{display:inline-flex} the tick before quietly un-hid every
   `<button class="btn" hidden>` in the product: an author rule beats the
   browser's own [hidden]{display:none}, so the attribute stopped doing
   anything. Three buttons came back from the dead -

     claim.html  #redeem        "Add them as my follower", offered to people
                                with no account at all, who get a 401 for it
     me.html     #b-emailtoggle a button with NO TEXT, because its label is
                                filled in by script only when it is meant to show
     mycard.html #b-print       offered before the card has finished loading

   - and every check I own still passed, because none of them asked whether a
   thing marked hidden was actually hidden. That check exists now.

   !important is right here and not laziness: `hidden` means "not relevant yet",
   and no layout rule should ever be able to out-argue it.
   --------------------------------------------------------------------------- */
[hidden]{ display:none !important; }