/* ============================================================
   Keeper Collect — shared stylesheet

   Black and white only. No colour anywhere: hierarchy is carried by
   weight, size and space instead.

   The homepage is the hero and nothing else. Everything that used to be a
   section on one long page now has its own page and shares this file:
     /                 the hero, the offer, the stock reel
     /how-it-works/    the three steps, why Keeper, what we buy, brands
     /about/           who we are
     /locations/       where to find us, book an appointment
     /shop/            the eBay store and the outlets
   ============================================================ */

:root{
  --ink:      #0A0A0A;
  --ink-2:    #4A4A4A;
  --ink-3:    #8A8A8A;
  --line:     #E4E4E4;
  --line-2:   #F0F0F0;

  --paper:    #FAFAFA;
  --white:    #FFFFFF;

  /* the one colour on the site: SELL is the money button */
  --money:    #1B7A4B;
  --money-2:  #14603A;

  --sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* the small tracked-out labels: same family as everything else, held
     apart by weight, letter-spacing and size rather than a second face. */
  --mono: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* the nav is sticky, so the hero has to subtract it to fill a screen
     exactly rather than pushing its own foot below the fold */
  --nav-h: 84px;

  /* One shelf height drives the whole reel. Bound to vh, not vw: a short
     laptop window has to shrink the stock rather than push the buttons off
     screen, and a tall desktop should spend its extra height on the stock
     instead of on a void between the copy and the shelf. */
  --card-h: clamp(124px, 24.5vh, 272px);

  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 12'%3E%3Cpath d='M0 6h10M7 2.5 10.5 6 7 9.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* the same arrow at the weight the step row needs: thicker stroke, wider
     head, so it reads as movement between cards rather than a hairline. */
  --arrow-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h17M13 5 20 12l-7 7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");


  /* One easing curve for the whole site. Movement that shares a curve reads
     as one system; a page where every transition picks its own reads busy
     however smooth each part is on its own. */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, .84, .28, 1);

  --wrap: 1180px;
  --pad:  clamp(20px, 5vw, 64px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* Cross-document view transitions.

   Two things were wrong with the cross-fade this replaces.

   The first is that it faded the whole page, the bar included. The bar is
   the same object on every page and is translucent with a blur behind it,
   so cross-fading it with itself under the UA's additive plus-lighter blend
   pulsed it brighter for a beat on every navigation — the one element the
   eye is fixed on during a page change was the one element flickering.
   Naming it lifts it out of the root snapshot into its own group, which the
   browser matches across the two documents, and it simply holds still.

   Naming it was tried before and abandoned, for a real reason: three pages
   shipped `is-stuck` hardcoded in the markup and two did not, so the two
   sides of the navigation were genuinely different and the named bar morphed
   between two states instead of holding. The markup is generated now and
   kc.js owns that class off the scroll position, so both sides match and the
   objection is gone. Same for the footer, which had nothing to pair with
   when the home page had none — though it stays unnamed regardless, because
   pages differ in height and a named footer would fly across the screen
   whenever the two pages disagree about where the bottom is.

   The second is that a symmetric fade is all the motion there was, over
   260ms, which reads as a flicker rather than as a change of place. The
   content now arrives: up a little, from a hair small, over 400ms on a
   decelerating curve. */

@view-transition{ navigation:auto; }

.nav{ view-transition-name:kc-nav; }

::view-transition-old(root),
::view-transition-new(root){
  /* plus-lighter is the UA default and is the right blend for a symmetric
     cross-fade, where the two half-transparent frames are meant to sum back
     to one. It is the wrong blend the moment anything moves, because the two
     frames no longer line up and the additive overlap blows out bright.
     Normal blending, over an outgoing frame that never leaves full opacity,
     is seamless without either failure: nothing to blow out, and no dip
     through the page background at the halfway point. */
  mix-blend-mode:normal;
}

/* The outgoing page holds, opaque and still. It is not scenery, it is the
   floor the incoming page lands on — it is what stops the moving frame from
   ever showing bare background at an edge. */
::view-transition-old(root){
  animation:kc-page-out 400ms var(--ease-out) both;
}
::view-transition-new(root){
  animation:kc-page-in 400ms var(--ease-out) both;
}
@keyframes kc-page-out{
  from{ opacity:1; }
  to  { opacity:1; }
}
@keyframes kc-page-in{
  from{ opacity:0; transform:translateY(18px) scale(.994); }
  to  { opacity:1; transform:none; }
}

/* Nothing about the bar changes between pages, so it is given nothing to do.
   Both frames are identical and the new one paints over the old. */
::view-transition-old(kc-nav),
::view-transition-new(kc-nav){
  animation:none;
  mix-blend-mode:normal;
}

/* The arrival, for browsers with no cross-document transition — which is
   most of them that are not Chrome. It animates main and not body, so it is
   the same gesture as the real one above: the bar stays put and the content
   arrives, rather than the whole window dimming up from nothing. Where a
   real transition does run, the pagereveal handler in the page head marks
   the document and this is skipped, so the two can never stack. */
html:not(.has-vt) main{
  animation:kc-enter 400ms var(--ease-out) both;
}
@keyframes kc-enter{
  from{ opacity:0; transform:translateY(18px) scale(.994); }
  to  { opacity:1; transform:none; }
}
/* Safety net. The animation starts at opacity 0, so an environment where it
   never advances would leave the page blank — far worse than no transition.
   The head script sets this well after the animation should have landed, so
   normally it changes nothing. */
html.kc-shown main{ animation:none; }

html{
  overflow-x:clip;
  scroll-behavior:smooth;
  scroll-padding-top:86px;
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; }
a{ color:inherit; }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.wrap--narrow{ max-width:760px; }

/* ---------------------------------------------------------------- type */

.eyebrow{
  margin:0 0 14px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}

.h2{
  margin:0 0 18px;
  font-size:clamp(30px, 5.2vw, 62px);
  line-height:1.02;
  font-weight:800;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.h2--sm{ font-size:clamp(24px, 3.4vw, 38px); }
.muted{ color:var(--ink-3); }

.lede{
  margin:0 0 30px;
  max-width:54ch;
  font-size:clamp(15px, 1.5vw, 18px);
  color:var(--ink-2);
}
.big{
  font-size:clamp(17px, 1.9vw, 22px);
  line-height:1.5;
  letter-spacing:-.012em;
  color:var(--ink);
}

/* ---------------------------------------------------------------- buttons */

.btn{
  --bh: 52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55em;
  height:var(--bh);
  padding-inline:26px;
  border:1px solid transparent;
  border-radius:999px;
  font-family:var(--sans);
  font-size:15px;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.16,.84,.28,1),
             background-color .22s ease, color .22s ease,
             border-color .22s ease, box-shadow .22s ease;
}
.btn--sm{ --bh:40px; padding-inline:18px; font-size:14px; }
.btn--block{ width:100%; }

.btn--dark{
  background:var(--ink);
  color:var(--white);
  box-shadow:0 1px 2px rgba(0,0,0,.16), 0 10px 24px rgba(0,0,0,.12);
}
.btn--dark:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(0,0,0,.2), 0 16px 34px rgba(0,0,0,.18); }

.btn--sell{
  background:var(--money);
  color:#F2FBF6;
  box-shadow:0 1px 2px rgba(12,60,36,.28), 0 10px 24px rgba(20,96,58,.26);
}
.btn--sell:hover{
  background:var(--money-2);
  transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(12,60,36,.3), 0 16px 34px rgba(20,96,58,.32);
}

.btn--light{ background:var(--white); color:var(--ink); }
.btn--light:hover{ transform:translateY(-2px); }

.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--ink); background:var(--white); }

.btn:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

/* ---------------------------------------------------------------- nav */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,250,250,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, background-color .3s ease;
}
.nav.is-stuck{ border-bottom-color:var(--line); background:rgba(250,250,250,.95); }

/* Three tracks, not a flex row with an auto margin: the wordmark is ~232px
   and the Sell pill ~78px, so centring the links in the space *between* them
   pushed the whole group left of the page centre. Equal 1fr rails on either
   side of an auto middle put the links on the true centre line whatever the
   brand and the button measure. */
.nav__in{
  max-width:var(--wrap);
  margin-inline:auto;
  padding:16px var(--pad);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:clamp(16px, 3vw, 40px);
}

.nav__brand{ flex:0 0 auto; display:block; line-height:0; }
/* The wordmark runs ~6:1, and its KEEPER COLLECT cap band is only the top
   53% of the file — the tagline and rule take the rest. So it needs more
   width than the old mast to land at the same optical weight in the bar.
   The floor matters: below ~165px the hairline COLLECT strokes and the
   tagline stop resolving and the whole lockup reads grey. */
.nav__brand img{ width:clamp(168px, 17vw, 232px); height:auto; display:block; }

.nav__links{
  display:flex;
  justify-content:center;
  gap:clamp(20px, 2.6vw, 38px);
  white-space:nowrap;
}
.nav__links a{
  font-size:16.5px;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--ink);
  text-decoration:none;
  padding:8px 0;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav__links a:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.nav__links a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }

.nav__cta{ display:flex; justify-content:flex-end; gap:10px; }

.nav__burger{
  display:none;
  flex:0 0 auto;
  width:42px; height:42px;
  margin-left:auto;
  padding:0;
  background:none;
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav__burger span{
  display:block;
  width:16px; height:1.5px;
  background:var(--ink);
  transition:transform .28s cubic-bezier(.16,.84,.28,1), opacity .2s ease;
}
.nav__burger[aria-expanded="true"] span:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.nav__mobile{
  border-top:1px solid var(--line);
  padding:10px var(--pad) 20px;
  display:flex;
  flex-direction:column;
}
.nav__mobile[hidden]{ display:none; }
.nav__mobile a{
  padding:13px 0;
  font-size:16px;
  font-weight:500;
  text-decoration:none;
  border-bottom:1px solid var(--line-2);
}
.nav__mobile a:last-child{ border-bottom:0; }
.nav__mobile a.is-cta{
  margin-top:14px;
  background:var(--ink);
  color:var(--white);
  border-radius:999px;
  text-align:center;
  padding:15px 0;
  border-bottom:0;
}

/* ---------------------------------------------------------------- hero */

/* ================================================================ hero

   Two stacked bands inside one full-height section: the copy, centred and
   vertically flexible, then the reel pinned to the foot. The old ring made
   the headline's width a function of a circle's inner clearance; nothing
   here depends on geometry any more, so the copy is sized off the viewport
   and the reel takes whatever height is left. */

.hero{
  position:relative;
  isolation:isolate;
  min-height:calc(100svh - var(--nav-h));
  display:grid;
  grid-template-rows:1fr auto;
  overflow:hidden;
  background:
    radial-gradient(120% 78% at 50% 34%,
      var(--white) 0%,
      var(--white) 26%,
      var(--paper) 62%,
      #EDEDED 100%);
}

.hero__mid{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  /* wide enough that "Sell Your Collectibles" holds one line at full size —
     at the old 760px it broke after "Sell", which read as a mistake */
  max-width:min(1120px, 94vw);
  margin-inline:auto;
  padding:clamp(28px, 5vh, 72px) var(--pad) clamp(18px, 3vh, 40px);
  text-align:center;
}

.hero__h1{
  margin:0;
  /* Sized off the viewport's short edge as much as its width: the third
     term is the brake that matters on a laptop, where a purely vw-driven
     headline pushes the reel off the bottom of the screen. */
  font-size:min(clamp(36px, 6.6vw, 92px), 10.6vh);
  line-height:1.0;
  font-weight:800;
  letter-spacing:-.045em;
  text-wrap:balance;
  margin-bottom:clamp(24px, 4vh, 46px);
}

/* ---- the payoff line -----------------------------------------------

   "Get cash." is supplied as artwork, letterforms cut from banknotes, so it
   ships as an image rather than type. Height is set in em so it tracks the
   headline and the two lines stay in proportion at every viewport. */

.hero__cash{
  display:inline-block;
  /* deliberately over-scaled against the line above: at matching cap height
     an eight-character phrase reads as an afterthought, and this is the
     payoff line. 1.72em lands it a little narrower than the line above. */
  height:1.72em;
  width:auto;
  max-width:100%;
  vertical-align:-.28em;
  margin-top:.1em;
  /* the artwork already carries its own soft shadow, so this only adds the
     small amount of lift needed to sit it off the hero gradient */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.14))
         drop-shadow(0 10px 22px rgba(0,0,0,.10));
}

.hero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  /* the buttons and the bullets under them are one unit — held close so the
     break above the pair reads as the real division */
  margin-bottom:clamp(14px, 2vh, 22px);
}

.ticks{
  display:flex;
  flex-wrap:wrap;
  gap:10px clamp(20px, 2.6vw, 34px);
  justify-content:center;
  margin:0;
  padding:0;
  list-style:none;
  font-size:clamp(12.5px, 1.05vw, 14px);
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.ticks li{ display:flex; align-items:center; gap:9px; }
.ticks li::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--ink);
}

/* ================================================================ reel

   A real carousel rather than a spinning ring: one row of stock running
   edge to edge, advancing on its own and draggable by hand. It is a native
   scroll container, so touch momentum, trackpad swipes and arrow keys all
   work for free; the script only nudges scrollLeft and wraps it.

   Bleeding past .wrap is deliberate — a carousel that stops at a content
   margin reads as a widget, and this is meant to read as the shop window. */

.reel{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  -ms-overflow-style:none;
  /* let the browser drive horizontal panning; the pointer handler only
     takes over for a mouse, so touch keeps its momentum */
  touch-action:pan-x pan-y;
  overscroll-behavior-x:contain;
  cursor:grab;
  /* the strip has no ends: fade it into the hero instead of cutting it */
  -webkit-mask-image:linear-gradient(to right,
     transparent 0, #000 clamp(28px, 7vw, 130px),
     #000 calc(100% - clamp(28px, 7vw, 130px)), transparent 100%);
  mask-image:linear-gradient(to right,
     transparent 0, #000 clamp(28px, 7vw, 130px),
     #000 calc(100% - clamp(28px, 7vw, 130px)), transparent 100%);
}
.reel::-webkit-scrollbar{ display:none; }
.reel.is-drag{ cursor:grabbing; }
.reel:focus-visible{ outline:2px solid var(--ink); outline-offset:-4px; }

.reel__track{
  display:flex;
  align-items:flex-end;      /* a shelf: uneven stock sits on one baseline */
  gap:clamp(18px, 2.6vw, 44px);
  width:max-content;
  /* room for the hover lift above and the caption below, both of which live
     inside the scroll box and would otherwise be clipped */
  padding:14px clamp(20px, 5vw, 64px) 46px;
}

.reel__item{
  position:relative;
  flex:0 0 auto;
  /* every second piece rides a little high, so 28 items on one baseline
     read as a shelf rather than a printed rule */
  margin-bottom:var(--lift, 0px);
}

/* --h is shared with the <img>: the image needs a definite height rather
   than height:100%, or it shrink-to-fits inside the flex item. */
.card{
  position:relative;
  display:block;
  --h: calc(var(--card-h) * var(--s, 1));
  height:var(--h);
  width:max-content;
  border-radius:4px;
  overflow:hidden;
  background:#E8E8E8;
  box-shadow:
    0 1px 2px rgba(0,0,0,.16),
    0 8px 18px rgba(0,0,0,.13),
    0 20px 40px rgba(0,0,0,.08);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.card img{
  display:block;
  height:var(--h);
  width:auto;
  -webkit-user-drag:none;
  user-select:none;
}

/* knocked-out figures carry their own silhouette shadow, no frame */
.card--cut{
  border-radius:0;
  overflow:visible;
  background:none;
  box-shadow:none;
}
.card--cut img{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))
         drop-shadow(0 10px 18px rgba(0,0,0,.18));
}

@media (hover:hover){
  .reel__item:hover .card{ transform:translateY(-10px) scale(1.05); }
  .reel__item:hover .card--cut img{
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.24))
           drop-shadow(0 18px 32px rgba(0,0,0,.24));
  }
  .reel__item:hover{ z-index:3; }
}

.cap{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  translate:-50% 0;
  width:max-content;
  max-width:min(240px, 46vw);
  padding:5px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 2px rgba(0,0,0,.1), 0 8px 20px rgba(0,0,0,.1);
  font-size:10.5px;
  font-weight:600;
  line-height:1.4;
  letter-spacing:.02em;
  color:var(--ink-2);
  text-align:center;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
@media (hover:hover){
  .reel__item:hover .cap{ opacity:1; transform:translateY(0); }
}
@media (hover:none){ .cap{ display:none; } }

/* ---------------------------------------------------------------- page head
   Every page other than the homepage opens with this. */

.phead{
  padding-block:clamp(44px, 7vw, 92px) clamp(30px, 4vw, 52px);
  border-bottom:1px solid var(--line);
  background:var(--white);
}
.phead__h1{
  margin:0 0 18px;
  font-size:clamp(34px, 6vw, 72px);
  line-height:.99;
  font-weight:800;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.phead .lede{ margin-bottom:0; }
.phead__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* ---------------------------------------------------------------- bands */

.band{
  position:relative;
  /* asymmetric on purpose: a centred heading already carries air above it in
     its own leading, so the top pad was reading as a gap between sections
     rather than as room around one. The bottom keeps the full measure — that
     is the space that separates a section from the next rule. */
  padding-block:clamp(40px, 5.2vw, 70px) clamp(44px, 6vw, 80px);
}
.band + .band{ border-top:1px solid var(--line); }
.band--paper{ background:var(--white); }
.band--ink{ background:var(--ink); color:#EDEDED; border-top-color:var(--ink); }
.band--ink .eyebrow{ color:#9A9A9A; }
.band--ink .lede{ color:#A8A8A8; }
.band--ink .h2{ color:var(--white); }

.wrap--split{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px, 5vw, 76px);
  align-items:start;
}
.split__r > p{ margin:0 0 16px; color:var(--ink-2); }
.band--ink .split__r > p{ color:#A8A8A8; }

/* ---- icons ---- */

.ic{
  display:grid;
  place-items:center;
  width:48px; height:48px;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  color:var(--ink);
  flex:0 0 auto;
}
.ic svg{ width:23px; height:23px; display:block; }
.band--paper .ic{ background:var(--paper); }
.band--ink .ic{ background:#161616; border-color:#2A2A2A; color:var(--white); }

/* ------------------------------------------------- centred page content

   The sub-pages no longer open with a .phead banner — the content itself is
   the top of the page. These carry that: a centred column that starts right
   under the nav, so nothing sits in a left rail with dead space beside it.
   The <h1> each page still needs for its outline is present but visually
   removed via .sr-only. */

.sr-only{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* first band on a headless page: it butts against the nav, so it needs less
   top padding than a band arriving after other content */
.band--top{ padding-block:clamp(38px, 5.5vw, 74px) clamp(44px, 6vw, 80px); }

.centre{
  max-width:660px;
  margin-inline:auto;
  text-align:center;
}
.centre .lede{ margin-inline:auto; }
.centre .h2{ margin-bottom:14px; }
.centre .phead__cta{ justify-content:center; margin-top:36px; }
.stats--centre{ text-align:center; }

/* Q&A reads as a single centred column of questions rather than a left
   label with the answers stacked beside it. */
.qa{ margin-top:34px; }
.qa p{
  margin:0 0 20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
  color:var(--ink-2);
}
.qa p:last-child{ margin-bottom:0; padding-bottom:0; border-bottom:0; }
.qa strong{ color:var(--ink); font-weight:650; }

/* ------------------------------------------------------------------ shop */

.shop{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 2.4vw, 28px);
  margin:clamp(34px, 5vw, 56px) 0 0;
  padding:0;
  list-style:none;
}
.shopcard{
  display:flex;
  flex-direction:column;
  height:100%;
  padding:30px 28px 32px;
  border-radius:20px;
  background:var(--white);
  text-decoration:none;
  box-shadow:0 1px 2px rgba(10,10,10,.05),
             0 10px 26px rgba(10,10,10,.06);
  transition:transform .38s var(--ease-out), box-shadow .38s var(--ease);
}
.shopcard:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(10,10,10,.07),
             0 18px 40px rgba(10,10,10,.1);
}
.shopcard__ic{
  display:block;
  width:44px; height:44px;
  color:var(--ink);
}
.shopcard__ic svg{ width:100%; height:100%; display:block; }

/* icon and title on one row, in a band the same height as the eBay mark
   opposite it, so the two cards start on the same line however differently
   they are titled */
.shopcard__head{
  display:flex;
  align-items:center;
  gap:14px;
  height:clamp(58px, 6vw, 74px);
  margin-bottom:26px;
}
.shopcard__head .shopcard__ic{ flex:0 0 auto; }
.shopcard__head h3{ margin:0; }

/* the eBay card is titled by the logo itself, so the mark stands in for both
   the icon and the heading and is given the height of the two together */
.shopcard__logo{
  display:flex;
  align-items:center;
  height:clamp(58px, 6vw, 74px);
  margin-bottom:26px;
}
.shopcard__logo svg{
  display:block;
  width:auto;
  height:clamp(34px, 3.8vw, 47px);
}
.shopcard h3{
  margin:0 0 8px;
  font-size:clamp(22px, 2.6vw, 30px);
  font-weight:800;
  letter-spacing:-.032em;
}
.shopcard p{ margin:0 0 22px; font-size:clamp(15px, 1.3vw, 16.5px); line-height:1.62; color:var(--ink-2); }

/* A card that tells you to come in person should say where in person is,
   rather than making the reader open the map to find out. */
.shopcard__addr{
  margin:0 0 22px;
  font-style:normal;
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  font-weight:650;
  color:var(--ink);
}

/* The call to action is a real button now. It used to be a small tracked-out
   label set in the same ink as the copy above it, which read as a caption —
   on a card whose only other marks are text, nothing said it was the thing to
   click. It wears the site's dark button so the affordance is the same one
   used everywhere else, and it is the only solid mark on a white card. */
.shopcard__go{
  align-self:flex-start;
  margin-top:auto;
}
/* the whole card is the link, so the pill takes its hover cue from the card
   rather than from the pointer happening to be over the pill — otherwise the
   button lifts a second time inside a card that has already lifted */
.shopcard__go.btn:hover{ transform:none; }
.shopcard:hover .shopcard__go.btn--dark{
  box-shadow:0 2px 4px rgba(0,0,0,.2), 0 16px 34px rgba(0,0,0,.18);
}

/* ---------------------------------------------------------------- photos

   Product shots are knocked out to transparency, so they sit straight on
   the page: no white plate, no rounded frame, no box. The only thing under
   them is their own drop shadow. */

/* ------------------------------------------------------- how it works

   Four cards, each carrying a chip icon and its step label on one row, the
   piece it refers to underneath, then the heading and a single line. The
   arrows live in the grid gaps rather than inside the cards, so they read as
   movement between steps instead of decoration on them. */

.steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(20px, 3.2vw, 46px);
  margin:clamp(34px, 5vw, 56px) 0 0;
  padding:0;
  list-style:none;
}

.step{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:clamp(28px, 3.4vw, 42px) clamp(24px, 3vw, 36px) clamp(32px, 3.8vw, 46px);
  border-radius:24px;
  background:var(--white);
  box-shadow:0 1px 2px rgba(10,10,10,.05),
             0 10px 26px rgba(10,10,10,.06),
             0 26px 60px rgba(10,10,10,.05);
  transition:transform .38s var(--ease-out), box-shadow .38s var(--ease);
}
.step:hover{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(10,10,10,.07),
             0 16px 34px rgba(10,10,10,.09),
             0 34px 74px rgba(10,10,10,.07);
}

/* the arrow between one card and the next, centred in the gap */
.step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  left:100%;
  translate:0 -50%;
  width:clamp(20px, 3.2vw, 46px);
  height:22px;
  background:var(--ink);
  opacity:.9;
  -webkit-mask:var(--arrow-bold) center / 22px 22px no-repeat;
  mask:var(--arrow-bold) center / 22px 22px no-repeat;
}

.step__top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom:22px;
}
/* the icon replaced the photo, so it takes the photo's weight rather than
   sitting in a small chip in the corner. No plate behind it: the glyph sits
   centred on the card itself. */
.step__ic{
  display:block;
  width:clamp(60px, 6.4vw, 82px);
  height:clamp(60px, 6.4vw, 82px);
  margin:0 auto clamp(28px, 3.2vw, 36px);
  /* the one colour on the site is the money green, and these three are the
     money path — the same green the Sell button carries */
  color:var(--money);
}
.step__ic svg{ width:100%; height:100%; display:block; }

/* set D of the step artwork: a real cut-out shot in place of the glyph. The
   height is the icon's plus the room a photograph needs to read at all. */
.step__photo{
  display:block;
  height:clamp(120px, 12vw, 158px);
  margin:0 auto clamp(24px, 2.8vw, 32px);
}
.step__photo img{
  display:block;
  height:100%;
  width:auto;
  margin:0 auto;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.16))
         drop-shadow(0 12px 22px rgba(0,0,0,.14));
}
.step__n{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
}

.step__h{
  margin:0 0 10px;
  font-size:clamp(24px, 3vw, 34px);
  font-weight:800;
  letter-spacing:-.032em;
}
.step__p{ margin:0; font-size:clamp(15px, 1.3vw, 16.5px); line-height:1.62; color:var(--ink-2); }

.facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
  margin:clamp(34px, 5vw, 60px) 0 0;
  padding:30px 0 0;
  border-top:1px solid var(--line);
  list-style:none;
}
.facts li{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.facts b{ font-size:21px; font-weight:700; letter-spacing:-.025em; }
.facts span{
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  letter-spacing:0;
  color:var(--ink-2);
}

.card-flat--soon{ display:flex; flex-direction:column; justify-content:center; }
.soon{
  margin:0;
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  color:var(--ink-2);
}
.band--ink .soon{ color:#9A9A9A; }
.card-flat .btn{ margin-top:16px; align-self:flex-start; }

.footnote{
  margin:clamp(28px, 4vw, 44px) auto 0;
  max-width:62ch;
  text-align:center;
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  color:var(--ink-2);
}

.cutline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:clamp(28px, 4vw, 48px);
  padding:26px clamp(22px, 3vw, 34px);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
}
.band--paper .cutline{ background:var(--paper); }
.cutline p{ margin:0; max-width:56ch; font-size:clamp(15px, 1.3vw, 16.5px); line-height:1.62; color:var(--ink-2); }
.cutline strong{ color:var(--ink); font-weight:650; }

/* ---- stats ---- */

.stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  margin:36px 0 0;
  padding-top:28px;
  border-top:1px solid var(--line);
}
.stats div{ margin:0; }
.stats dt{
  font-size:clamp(20px, 2.4vw, 28px);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
}
.stats dd{
  margin:7px 0 0;
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  letter-spacing:0;
  color:var(--ink-2);
}

/* ---- visit ---- */

.card-flat{
  padding:24px 26px 26px;
  border:1px solid #2A2A2A;
  border-radius:16px;
  background:#151515;
}
.card-flat + .card-flat{ margin-top:16px; }
.card-flat__h{
  margin:0 0 14px;
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#8A8A8A;
}
.addr{
  display:flex;
  flex-direction:column;
  gap:2px;
  font-style:normal;
  font-size:clamp(17px, 1.9vw, 21px);
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--white);
}
.hours{
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
.hours th,
.hours td{
  padding:9px 0;
  text-align:left;
  border-bottom:1px solid #262626;
  font-weight:500;
}
.hours tr:last-child th,
.hours tr:last-child td{ border-bottom:0; }
.hours th{ color:#A8A8A8; font-weight:500; }
.hours td{ text-align:right; color:var(--white); }
.fineprint{
  margin:14px 0 0;
  font-size:12.5px;
  color:#6E6E6E;
}

/* ---- form ---- */

.form{ margin-top:34px; }
.field{ margin-bottom:16px; }
.field-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}
.field label{
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.005em;
}
.field .opt{ font-weight:400; color:var(--ink-3); }

.field input,
.field select,
.field textarea{
  width:100%;
  padding:13px 15px;
  font-family:var(--sans);
  font-size:15px;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.field textarea{ resize:vertical; min-height:88px; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238A8A8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px;
  padding-right:38px;
}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  background:var(--white);
  border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(0,0,0,.08);
}
.field.is-bad input,
.field.is-bad select,
.field.is-bad textarea{ border-color:var(--ink); box-shadow:0 0 0 3px rgba(0,0,0,.06); }
.field__err{
  margin:6px 0 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
}

.field label.upload{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:88px;
  margin:0;
  padding:13px 15px;
  font-size:15px;
  font-weight:400;
  color:var(--ink-3);
  background:var(--paper);
  border:1.5px dashed var(--line);
  border-radius:12px;
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.field label.upload:hover,
.field label.upload:focus-within{
  color:var(--ink);
  background:var(--white);
  border-color:var(--ink);
}
.upload svg{ width:20px; height:20px; flex:none; }
.upload input[type=file]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.upload__thumbs{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.upload__thumbs img{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid var(--line);
}

#bookSubmit{ margin-top:10px; }

.form__say{
  margin:16px 0 0;
  min-height:1.4em;
  font-size:14.5px;
  text-align:center;
  color:var(--ink-2);
}
.form__say.is-good{ color:var(--ink); font-weight:600; }
.form__say.is-bad{ color:var(--ink); font-weight:600; }

/* ------------------------------------------------------------- locations

   One page, one job: what the place is, where it is, and a map to it. The
   giant address headline and the full-bleed map it sat on are gone — see
   .visit below for what replaced them. */

/* The map used to run full bleed under the address, which gave a page with
   one address on it a whole screen of street names and none of the answer.
   It is a column now: what the place is and where it is on the left, the map
   beside it on the right, both the same height on a wide screen. */
.visit{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(26px, 4vw, 62px);
  align-items:start;
}
.visit__copy .lede{ margin:0 0 clamp(26px, 3.2vw, 38px); }
.visit__copy .eyebrow{ margin-bottom:0; }

.loclist{
  display:grid;
  gap:clamp(18px, 2.2vw, 26px);
  margin:16px 0 0;
  padding:0;
  list-style:none;
}
.loclist li{
  padding-top:16px;
  border-top:1px solid var(--line);
}
.loclist h3{
  margin:0 0 6px;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.022em;
}
.loclist address{
  margin:0 0 12px;
  font-style:normal;
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  color:var(--ink-2);
}
.loclist__go{
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:border-color .2s ease;
}
.loclist__go:hover{ border-color:var(--ink); }

.visit__map{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--white);
  line-height:0;
}
.visit__map iframe{
  width:100%;
  height:clamp(320px, 48vh, 500px);
  border:0;
  filter:grayscale(1) contrast(1.04);
  transition:filter .6s ease;
}
.visit__map:hover iframe,
.visit__map:focus-within iframe{ filter:none; }

/* ---------------------------------------------------------------- cards row
   The homepage's three ways in. */

.ways{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px, 1.6vw, 20px);
  margin:0;
  padding:0;
  list-style:none;
}
.way{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:28px 26px 30px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  text-decoration:none;
  transition:transform .3s cubic-bezier(.16,.84,.28,1), box-shadow .3s ease, border-color .3s ease;
}
.way:hover{ transform:translateY(-4px); border-color:var(--ink); box-shadow:0 14px 36px rgba(0,0,0,.07); }
.way h3{
  margin:0 0 8px;
  font-size:21px;
  font-weight:750;
  letter-spacing:-.025em;
}
.way p{ margin:0 0 18px; font-size:clamp(15px, 1.3vw, 16.5px); line-height:1.62; color:var(--ink-2); }
.way__go{
  margin-top:auto;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.way:hover .way__go svg{ transform:translateX(4px); }
.way__go svg{ width:15px; height:15px; transition:transform .3s cubic-bezier(.16,.84,.28,1); }

/* ---------------------------------------------------------------- club strip */

.club-strip{ background:var(--white); }
.club-strip__in{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.club-strip .lede{ margin-bottom:0; }

/* ---------------------------------------------------------------- footer */

.foot{
  background:var(--paper);
  border-top:1px solid var(--line);
  padding-top:clamp(44px, 6vw, 72px);
}
.foot__in{
  display:flex;
  flex-wrap:wrap;
  gap:32px;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:clamp(32px, 4vw, 52px);
}
.foot__brand{ max-width:34ch; }
.foot__brand img{ width:200px; height:auto; display:block; margin-bottom:18px; }
.foot__brand p{ margin:0; font-size:14px; color:var(--ink-3); }

.foot__nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  max-width:520px;
}
.foot__nav a{
  font-size:14px;
  color:var(--ink-2);
  text-decoration:none;
  transition:color .2s ease;
}
.foot__nav a:hover{ color:var(--ink); }

.foot__base{
  padding-block:20px;
  border-top:1px solid var(--line);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  color:var(--ink-3);
}

/* ---------------------------------------------------------------- reveal */

/* The hidden state carries NO transition. .rise is added by script, which
   can land after the browser has already painted the element — and a
   transition on the hidden state means the browser animates from what it
   just painted down to nothing, so the content fades OUT and then back in.
   Arming the transition in a second class, one frame later, means the jump
   to hidden is instant and only the reveal is ever animated. */
.rise{
  opacity:0;
  transform:translateY(12px);
}
.rise.is-armed{
  /* opacity leads, movement trails: fading in slightly ahead of the travel
     is what stops a reveal reading as a slide */
  transition:opacity .55s var(--ease), transform .8s var(--ease-out);
  will-change:opacity, transform;
}
.rise.is-in{ opacity:1; transform:none; will-change:auto; }

@media (prefers-reduced-motion:reduce){
  .rise{ opacity:1; transform:none; transition:none; }
  .card{ transition:none !important; }
  /* A view transition is motion too. Killing the animations is enough and is
     the safe way to say so: a second @view-transition rule nested in here
     was suppressing the transition site-wide even with reduced motion off,
     because the opt-in resolves from the last such rule in the sheet rather
     than from the one whose media condition currently matches. With the
     animations neutralised the transition still runs, it just completes on
     the same frame, so there is no motion and no flash. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
  html:not(.has-vt) main{ animation:none; }
}

/* ------------------------------------------------------------- pillars

   The three things the business does, on the about page. Same numbered
   treatment as the reasons list so the two pages read as one voice. */

.pillars{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(26px, 3.2vw, 46px);
  margin:0;
  padding:0;
  list-style:none;
}
.pillar{ margin:0; }
.pillar__n{
  display:block;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-size:12px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--ink);
}
.pillar h3{
  margin:0 0 10px;
  font-size:clamp(20px, 2.2vw, 25px);
  font-weight:700;
  letter-spacing:-.028em;
}
.pillar p{
  margin:0 0 12px;
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  color:var(--ink-2);
}
/* a named thing inside body copy — the programme, not emphasis — so it takes
   the full ink the way the other bolded terms on the site do */
.pillar p strong{ color:var(--ink); font-weight:700; }
.pillar p:last-child{ margin-bottom:0; }

.big--flush{ margin-top:0; }
.split__r p + p{ margin-top:14px; }

/* ----------------------------------------------------------- why keeper

   Ten reasons, each one heading and one sentence. No numerals: these are
   reasons, not a sequence, and numbering them implied an order that isn't
   there. A hairline over each keeps the columns aligned without boxing
   them — the step row above already carries the page's cards. */

.why{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(26px, 3vw, 40px) clamp(24px, 3vw, 44px);
  margin:clamp(34px, 5vw, 54px) 0 0;
  padding:0;
  list-style:none;
}
.why__item{ margin:0; }
.why__item{
  padding-top:16px;
  border-top:1px solid var(--line);
}
.why__item h3{
  margin:0 0 6px;
  font-size:18.5px;
  font-weight:700;
  letter-spacing:-.022em;
}
.why__item p{
  margin:0;
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  color:var(--ink-2);
}

/* ------------------------------------------------------- what we buy

   A plain list in columns: the category, and the one line that answers "do
   you take mine". This was sixteen bordered cards, which spent most of a
   screen to say less — a grid of boxes reads as a menu of things to choose
   between, and this is a reference list nobody chooses from. */

.buylist{
  columns:2;
  column-gap:clamp(34px, 5vw, 76px);
  margin:clamp(34px, 5vw, 54px) 0 0;
  padding:0;
  list-style:none;
}
.buylist li{
  break-inside:avoid;
  margin:0 0 clamp(20px, 2.4vw, 28px);
}
.buylist h3{
  margin:0 0 5px;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink);
}
.buylist p{
  margin:0;
  max-width:46ch;
  font-size:clamp(15px, 1.3vw, 16.5px);
  line-height:1.62;
  color:var(--ink-2);
}

/* ---------------------------------------------------------- brands list

   One flat alphabetical list in columns, the way Oliver's runs theirs. The
   pills this replaced turned a reference list into fifty-six buttons: every
   name looked pressable and not one of them was. Alphabetical rather than
   grouped by category because the only question anyone asks of this list is
   "is mine on here", and that is answered by looking — not by first knowing
   which bucket a brand belongs to. */

.brandlist{
  columns:3;
  column-gap:clamp(34px, 5vw, 76px);
  margin:clamp(30px, 4vw, 48px) 0 0;
  padding:0;
  list-style:none;
}
.brandlist li{
  break-inside:avoid;
  margin:0 0 9px;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--ink-2);
}

.cutline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:clamp(26px, 3.4vw, 40px);
  padding:clamp(22px, 2.6vw, 30px);
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--white);
}
.band--paper .cutline{ background:var(--paper); }
.cutline p{ margin:0; max-width:62ch; font-size:clamp(15px, 1.3vw, 16.5px); line-height:1.62; color:var(--ink-2); }

/* the note that closes the brand list. It was a bordered strip with a Book
   button on the right — a third call to the same page, a screen after the
   one at the top and a screen before the one at the bottom. The copy is the
   part that was doing work, so it stays, centred and a size up: the question
   on its own line, the answer under it. */
.brandnote{
  margin:clamp(30px, 4vw, 48px) auto 0;
  max-width:60ch;
  text-align:center;
}
.brandnote__q{
  margin:0 0 8px;
  font-size:clamp(17px, 1.6vw, 19.5px);
  font-weight:700;
  letter-spacing:-.022em;
}
.brandnote__a{
  margin:0;
  font-size:clamp(16px, 1.45vw, 18px);
  line-height:1.62;
  color:var(--ink-2);
}
.cutline strong{ color:var(--ink); font-weight:700; }

/* ---------------------------------------------------------------- narrow */

@media (max-width:1080px){
  .brandlist{ columns:2; }
  .why{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .brands{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .pillars{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  /* on two columns the arrow only belongs between the pair that shares a row */
  .steps .step:nth-child(2n)::after{ display:none; }
  .facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .flow{ grid-template-columns:1fr; gap:0; }
  .flow__step{ padding:26px 0 30px; }
  .flow__step + .flow__step{ border-top:1px solid var(--line); }
  .flow__step::before{ display:none; }
  .flow__n{ margin-bottom:12px; font-size:clamp(30px, 9vw, 44px); color:var(--ink); }
  .flow p{ max-width:44ch; }
  .facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:900px){
  .visit{ grid-template-columns:1fr; }
  .nav__in{ display:flex; justify-content:space-between; }
  .nav__links,
  .nav__cta{ display:none; }
  .nav__burger{ display:flex; }

  .wrap--split{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .ways{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; gap:16px; }
  .stats div{ display:flex; align-items:baseline; gap:12px; }
  .stats dd{ margin:0; }

}

/* A laptop is the tight case now: 1440x800 leaves ~716px once the sticky nav
   is out, and the copy block alone (headline, cash artwork, two buttons, the
   tick row) wants most of it. Trade the tick row and some breathing room for
   the reel rather than letting the stock fall off the bottom. */
/* A laptop is the tight case. The three bullets are brand copy now, so the
   room comes out of the gaps and the payoff artwork rather than out of them. */
@media (min-width:700px) and (max-height:860px){
  .hero__h1{ margin-bottom:clamp(20px, 3.2vh, 30px); }
  .hero__cta{ margin-bottom:clamp(12px, 1.8vh, 18px); }
  .hero__cash{ height:1.6em; }
}
@media (min-width:700px) and (max-height:720px){
  .hero__h1{ margin-bottom:18px; }
  .hero__cta{ margin-bottom:12px; }
  .hero__cash{ height:1.5em; }
}

@media (max-width:620px){
  :root{
    /* the wordmark steps down to its 168px floor here, so the bar is shorter */
    --nav-h: 76px;
  }
  .hero{
    /* still a full screen, but the foot padding keeps the shelf off the very
       bottom edge rather than letting it run into it */
    padding-bottom:26px;
    background:
      radial-gradient(130% 62% at 50% 24%,
        var(--white) 0%,
        var(--white) 30%,
        var(--paper) 64%,
        #EDEDED 100%);
  }
  .hero__mid{
    padding:clamp(24px, 5vh, 44px) var(--pad) 10px;
  }
  .hero__h1{
    font-size:clamp(38px, 11vw, 54px);
    margin-bottom:clamp(18px, 2.8vh, 26px);
  }
  .hero__cta{ margin-bottom:clamp(12px, 1.8vh, 18px); }
  .hero__cash{ height:1.68em; }
  .reel__track{ padding:10px var(--pad) 20px; gap:16px; }
  .ticks{ gap:8px 16px; font-size:11.5px; letter-spacing:.11em; }

  .field-row{ grid-template-columns:1fr; gap:0; }
  .cutline{ flex-direction:column; align-items:flex-start; }
  .cutline .btn,
  .club-strip__in .btn{ width:100%; }
  .foot__in{ flex-direction:column; gap:26px; }
  .buylist{ columns:1; }
  .why{ grid-template-columns:1fr; }
  .brands{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; gap:14px; }
  .steps{ grid-template-columns:1fr; }
  .step:not(:last-child)::after{
    top:100%; left:50%;
    translate:-50% 0;
    width:22px;
    height:clamp(20px, 4vw, 34px);
    rotate:90deg;
  }
  .shop{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .brandlist{ columns:1; }
}