/* Spend crypto (for-consumers.html): THE FORM YOU WON'T FILL IN. Page owner: consumers.
   The homepage is shot from behind the till; this page stands in front of it.
   Reuses core, chrome and page read-only. Scoped under .cs-* and #reel #bring #private #find.
   Regions: #reel set · #bring paper · #private paper (the stamps) · #find paper (map + directory) · .cs-next paper. */

/* ================================================================ S1 #reel: the customer's side, captioned live by the display */
/* the header keeps the shell's first-region spacing and its full .pg-h1 size, as on every other subpage (the gold tab
   at y 188 and an 89px headline at 1440): the copy takes seven columns so the headline sets in two lines beside the footage */
#reel{min-height:100vh;min-height:100svh;padding-bottom:clamp(64px,7vw,104px)}
/* the footage's height: what the screen leaves under the standard header spacing (bar, nav, the shell's clamp(56px,8vw,112px)),
   less the frame's caption and padding (49px) and a 23px margin: min(720px, 100svh - clamp(56px,8vw,112px) - 148px), floored at
   480px; its width is 9/16 of that (360 x 640 at 1440x900). The frame's foot stays on the first screen, and the frame stays
   at least as tall as the copy and the captions beside it, so the tape's track still runs level with its bottom edge. */
.cs-reel-g{--fh:max(480px,min(720px,calc(100vh - clamp(56px,8vw,112px) - 148px)));grid-template-rows:auto 1fr auto auto}
@supports (height:100svh){ .cs-reel-g{--fh:max(480px,min(720px,calc(100svh - clamp(56px,8vw,112px) - 148px)))} }
/* short laptop screens (up to 820px tall): the captions close up a little and the frame keeps at least 550px, so it is still
   as tall as the copy beside it (at 768px tall its foot and the tape's toggle row sit just under the fold, level) */
@media (min-width:980px) and (max-height:820px){
  .cs-reel-g{--fh:max(550px,calc(100vh - clamp(56px,8vw,112px) - 148px))}
  @supports (height:100svh){ .cs-reel-g{--fh:max(550px,calc(100svh - clamp(56px,8vw,112px) - 148px))} }
  .cs-ctl{margin-top:16px}
  .cs-cap{min-height:46px;padding:11px 0 10px}
}
.cs-head{grid-column:1/8;grid-row:1}
.cs-head .pg-h1{margin-top:clamp(20px,2.4vw,32px)}
.cs-head .pg-lead{margin-top:clamp(24px,3vw,40px)}

/* captions: four keys of the same tape, each a seek point. The block sits on the frame's foot: the tape's 1px track runs
   level with the frame's bottom edge (the toggle row is 44px, so the block hangs 22px below its row) */
.cs-ctl{grid-column:1/7;grid-row:3;align-self:end;margin:40px 0 -22px;max-width:600px}
.cs-caps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cs-caps>li{border-bottom:1px solid var(--line)}
.cs-cap{position:relative;display:flex;align-items:baseline;gap:18px;width:100%;min-height:52px;padding:14px 0 13px;text-align:left;
  color:var(--ink-2);transition:color .24s linear;-webkit-tap-highlight-color:transparent}
.cs-cap::before{content:"";position:absolute;left:-14px;top:50%;width:2px;height:16px;margin-top:-8px;background:#d9ad12;
  transform:scaleY(0);transition:transform .2s var(--out)}
.cs-cap[aria-current=step]{color:var(--ink)}
.cs-cap[aria-current=step]::before{transform:none}
/* the ring sits outside the row (core's 3px), so it never cuts through the timecode that starts at the row's left edge */
.cs-tc{flex:none;width:5ch;font-family:var(--mono);font-size:11px;line-height:1;letter-spacing:.04em;color:var(--ink-3);
  font-variant-numeric:tabular-nums;transition:color .24s linear}
.cs-cap[aria-current=step] .cs-tc{color:var(--ink-2)}
.cs-ct{font-family:var(--sans);font-weight:400;font-size:19px;line-height:1.3;letter-spacing:-.005em}
@media (hover:hover){ .cs-cap:hover{color:var(--ink)} }

/* the toggle row: a mono text key, then the tape's progress (1px), ticked where captions 02-04 begin */
.cs-tgrow{display:flex;align-items:center;gap:18px}
.cs-tg{gap:0;min-width:5ch;font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em}
.cs-tg::before{content:none}
/* the label box holds PAUSE (5 mono characters and their tracking), so Play never pulls the tape 4px left; both words start
   on the timecodes' left edge (a button centres its text by default, which put Play 4px in) */
.cs-tg .pg-tg-l{min-width:calc(5ch + .4em);text-align:left}
.cs-bar{flex:1;min-width:0;color:var(--ink)}
.cs-bar::before{opacity:.16}
.cs-bar>b{position:absolute;top:-2px;width:1px;height:5px;background:currentColor;opacity:.32}

/* the footage, framed like a screen held up at the counter */
.cs-fig{grid-column:8/13;grid-row:1/4;justify-self:center;align-self:start;width:calc(var(--fh) * 9 / 16 + 22px);margin:0}
.cs-ui{display:block;margin:0 0 11px;font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.06em;color:var(--ink-2);
  text-transform:uppercase;white-space:nowrap}
.cs-frame{position:relative;padding:10px;border:1px solid var(--ink);scroll-margin:calc(var(--nav-h) + 16px) 0 16px}
.cs-frame .pg-reel-v{width:100%;height:var(--fh);max-width:540px;max-height:960px}
.cs-more{grid-column:8/13;grid-row:4;justify-self:center;width:calc(var(--fh) * 9 / 16 + 22px);margin-top:6px}

/* reduced motion (and a blocked autoplay): the key poster with a play key on the frame */
.cs-play{position:absolute;left:22px;bottom:22px;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px;
  background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);font-family:var(--cond);font-weight:600;font-size:12.5px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.cs-play[hidden]{display:none}
.cs-play-g{flex:none;width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cs-play-t{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.04em;color:var(--ink-2)}
@media (hover:hover){ .cs-play:hover{background:var(--ink);color:var(--paper)} .cs-play:hover .cs-play-t{color:inherit} }

/* ================================================================ S2 #bring: a ruled table, not cards */
/* the paper stretch: three regions one after another, closer together than the shell's 144px + 144px */
@media (min-width:980px){
  #bring{padding-bottom:clamp(72px,8vw,116px)}
  #private{padding-top:clamp(72px,8vw,116px);padding-bottom:clamp(72px,8vw,116px)}
  #find{padding-top:clamp(72px,8vw,116px)}
}
.cs-bring h2{grid-column:1/10}
.cs-tbl{grid-column:1/-1;margin:clamp(40px,4.4vw,64px) 0 0}
.cs-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,32px);padding:20px 0 24px;border-top:1px solid var(--line)}
.cs-row:last-child{border-bottom:1px solid var(--line)}
/* 9px puts the key's baseline on the first line of the 20px content */
.cs-row dt{grid-column:1/4;padding-top:9px;color:var(--ink-2)}
.cs-row dd{grid-column:4/11;margin:0;font-family:var(--sans);font-weight:400;font-size:20px;line-height:1.45;letter-spacing:-.005em}
.cs-row dd p+p{margin-top:2px}
.cs-row dd .cs-go{margin-top:10px;font-size:.85em;color:var(--ink-2)}

/* ================================================================ S3 #private: the ghost form and its six stamps */
.cs-priv-c{grid-column:1/6}
.cs-priv-c .pg-lead{margin-top:clamp(20px,2.4vw,32px)}
.cs-ghost{grid-column:7/13;align-self:start;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:10px}
.cs-gf{display:flex;flex-direction:column;gap:8px;min-width:0}
.cs-gf>.lab{color:var(--ink-3)}
.cs-box{position:relative;display:block;height:48px;border:1px dashed rgba(14,23,38,.35)}
/* closed: once the last stamp lands (and from the start under reduced motion or without script) */
.cs-ghost.cs-done .cs-box,html.reduce .cs-box,html:not(.js) .cs-box{border-style:solid;border-color:rgba(14,23,38,.16)}
.cs-stamp{position:absolute;right:12px;top:50%;margin-top:-11.5px;transform:rotate(-2deg)}
.cs-ghost.cs-pre .cs-stamp:not(.cs-hit){opacity:0}

/* ================================================================ S4 #find: the dot map and the directory */
.cs-find-g{align-items:start}
.cs-find h2{grid-column:1/7;grid-row:1;align-self:end}
.cs-search{grid-column:7/13;grid-row:1;align-self:end}
.cs-map{grid-column:1/7;grid-row:2;position:sticky;top:calc(var(--nav-h) + 40px);margin-top:clamp(40px,4vw,64px)}
.cs-dir{grid-column:7/13;grid-row:2;margin-top:clamp(40px,4vw,64px)}

.cs-map-box{position:relative;aspect-ratio:210/118}
.cs-map-box>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cs-map-box path{fill:none;stroke:var(--ink);stroke-opacity:.28;stroke-width:1.6;stroke-linecap:round}
.cs-legend{display:flex;align-items:center;gap:10px;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
.cs-legend .cs-sq{position:relative;left:auto;top:auto;margin:0 0 0 1px;flex:none}
.cs-legend-n{margin-left:auto;white-space:nowrap}

/* pins: a gold square outlined in ink; on desktop a 28px key with its tab, on phones the count only */
.cs-pin{position:absolute;width:0;height:0}
.cs-sq{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:#d9ad12;box-shadow:0 0 0 1px var(--ink)}
.cs-pin-b{position:absolute;left:-14px;top:-14px;display:block;width:28px;height:28px;-webkit-tap-highlight-color:transparent}
.cs-pin-b:focus-visible{outline-offset:0}
.cs-pin-t{position:absolute;transition:background-color .2s linear,color .2s linear}
.cs-pin[data-side=nw] .cs-pin-t{right:calc(50% + 7px);bottom:calc(50% + 7px)}
.cs-pin[data-side=sw] .cs-pin-t{right:calc(50% + 7px);top:calc(50% + 7px)}
.cs-pin[data-side=e] .cs-pin-t{left:calc(50% + 11px);top:50%;margin-top:-11.5px}
.cs-pin[data-side=w] .cs-pin-t{right:calc(50% + 11px);top:50%;margin-top:-11.5px}
.cs-pin[data-side=se] .cs-pin-t{left:calc(50% + 7px);top:calc(50% + 7px)}
.cs-pin.cs-sel .cs-pin-t,.cs-pin.cs-hot .cs-pin-t{background:var(--ink);color:var(--paper)}
@media (hover:hover){ .cs-pin-b:hover .cs-pin-t{background:var(--ink);color:var(--paper)} }
/* a city the search has ruled out steps back: gold at 30% on paper, opaque, so the dots never show through its tab */
.cs-sq,.cs-pin-n{transition:background-color .2s linear,box-shadow .2s linear,color .2s linear}
.cs-pin.cs-off .cs-pin-t{background:#e6d3a8;color:rgba(26,18,0,.5)}
.cs-pin.cs-off .cs-sq{background:#e6d3a8;box-shadow:0 0 0 1px rgba(14,23,38,.3)}
.cs-pin.cs-off .cs-pin-n{color:var(--ink-3)}
.cs-pin-s{display:none}

/* the directory: a search field over ruled city groups */
.cs-q{position:relative}
.cs-q .pg-input{padding-right:76px}
.cs-q .pg-input::-webkit-search-cancel-button,.cs-q .pg-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.cs-clear{position:absolute;right:0;top:2px;display:flex;align-items:center;height:44px;padding:0 0 0 14px;font-family:var(--cond);font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.cs-clear[hidden]{display:none}
@media (hover:hover){ .cs-clear:hover{color:var(--ink)} }

.cs-city{scroll-margin-top:calc(var(--nav-h) + 40px)}
.cs-city+.cs-city{margin-top:clamp(40px,4vw,56px)}
.cs-city[hidden],.cs-v[hidden],.cs-loc[hidden],.cs-empty[hidden]{display:none}
.cs-city-hd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:14px}
.cs-city-hd h3{font-family:var(--sans);font-weight:400;font-size:32px;line-height:1.1;letter-spacing:-.025em}
.cs-cc{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase;white-space:nowrap}
.cs-venues{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line)}
.cs-v{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:24px;padding:18px 0 12px;border-top:1px solid var(--line)}
/* the name's baseline sits on the first line of the right column: the address, or the location label above it */
.cs-who{padding-top:8px}
.cs-mk{display:flex;align-items:center;height:36px;margin-top:14px}
.cs-mark{width:auto;height:auto;max-width:140px;max-height:36px}
.cs-name{margin:0;font-family:var(--sans);font-weight:500;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.cs-note{margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
.cs-loc+.cs-loc{margin-top:10px}
.cs-ll{padding-top:12px;font-family:var(--mono);font-size:11px;line-height:16px;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
@media (min-width:980px){ .cs-v>.cs-where>.cs-loc:first-child>.cs-ll{padding-top:15px} }
.cs-addr{display:inline-block;padding:11px 0;font-family:var(--sans);font-size:16px;line-height:22px}
/* the last word travels with its arrow, so a wrapped address never leaves the arrow alone on a line */
.cs-nw{white-space:nowrap}
.cs-addr .cs-ne{display:inline-block;margin:0 0 1px 8px;vertical-align:baseline}
.cs-at{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(14,23,38,.3);
  transition:text-decoration-color .24s linear}
.cs-ne{flex:none;width:10px;height:10px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .38s var(--out)}
.cs-line{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px}
.cs-tel{display:inline-flex;align-items:center;min-height:44px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.cs-lk{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase}
.cs-addr,.cs-tel,.cs-lk{transition:color .24s linear;-webkit-tap-highlight-color:transparent}
@media (hover:hover){
  .cs-addr:hover,.cs-tel:hover,.cs-lk:hover{color:var(--blue)}
  .cs-addr:hover .cs-at{text-decoration-color:currentColor}
  .cs-addr:hover .cs-ne,.cs-lk:hover .cs-ne{transform:translate(2px,-2px)}
}
.cs-empty{padding:24px 0 8px;border-top:1px solid var(--line)}
.cs-empty p{font-family:var(--sans);font-size:20px;line-height:1.4;letter-spacing:-.005em}
.cs-empty .pg-link{margin-top:6px}

/* ================================================================ S5: the old site's closing line and the next step */
.cs-next{padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(72px,8vw,112px);border-top:1px solid var(--line)}
.cs-next .pg-grid>*{grid-column:1/-1}
.cs-next-p{margin-top:16px;max-width:44ch;font-family:var(--sans);font-size:18px;line-height:1.5;color:var(--ink-2)}
.cs-next-b{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px;margin-top:28px}
.cs-next .cs-tell[hidden]{display:none}

/* long link labels may wrap on narrow screens; the arrow rides on the last word */
.cs-empty .pg-link,.cs-next .pg-link{display:inline-block;padding:13px 0;line-height:18px;white-space:normal}
.cs-empty .pg-arr,.cs-next .pg-arr{display:inline-block;margin-left:9px;vertical-align:0}

/* ================================================================ phones and small tablets */
@media (max-width:979.98px){
  .cs-reel-g{--fh:480px;grid-template-rows:none}
  .cs-head .pg-h1{font-size:clamp(40px,calc(4.2vw + 24px),56px)}
  .cs-fig{justify-self:center;margin-top:40px}
  .cs-ctl{margin:32px 0 0;max-width:none}
  .cs-cap{min-height:44px;gap:14px;padding:11px 0 10px}
  .cs-cap::before{left:-10px}
  .cs-ct{font-size:15px;line-height:1.4}
  .cs-more{justify-self:start;width:auto;margin-top:12px}

  .cs-row{display:block;padding:16px 0 18px}
  .cs-row dt{padding-top:0}
  .cs-row dd{margin-top:8px;font-size:17px}

  .cs-ghost{margin-top:36px;gap:20px 16px}

  .cs-map{position:relative;top:auto;margin-top:32px}
  .cs-search{margin-top:36px;scroll-margin-top:calc(var(--nav-h) + 20px)}
  .cs-dir{margin-top:28px}
  .cs-pin-b{display:none}
  .cs-pin-s{display:block;position:absolute;left:0;top:0}
  .cs-pin-s .cs-sq{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;left:0;top:0}
  /* the count is knocked out of the dot grid (paper behind it), as the desktop tabs are opaque: no dot runs through a digit */
  .cs-pin-n{position:absolute;top:-7px;left:5px;padding:0 2px;background:var(--paper);font-family:var(--mono);font-weight:500;font-size:10px;
    line-height:14px;color:var(--ink)}
  .cs-pin[data-city=Toronto] .cs-pin-n{left:auto;right:5px}
  .cs-legend{margin-top:14px}
  .cs-city-hd h3{font-size:28px}
  .cs-v{display:block;padding:16px 0 10px}
  /* the mark sits at the right of the name, like the logo on a card */
  .cs-who{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;align-items:center;padding-top:0}
  .cs-who .cs-name,.cs-who .cs-note{grid-column:1}
  .cs-who .cs-mk{grid-column:2;grid-row:1/3;margin-top:0;max-width:120px}
  .cs-who .cs-mark{max-width:min(120px,100%)}
  .cs-where{margin-top:4px}
  .cs-next-b{flex-direction:column;align-items:stretch}
  .cs-next-b .btn{display:flex;width:100%;height:52px}
}

/* ================================================================ phones: the footage subtitled where you are looking,
   the stamps on one screen, and the map's cities as keys under it (its pins are too small to press on a phone) */
.cs-live,.cs-chips{display:none}
@media (max-width:979.98px){
  /* the subtitle (two lines held, so the frame never jumps) + the frame fit one screen under the nav: 432px on an SE, 480 above */
  .cs-reel-g{--fh:clamp(360px,calc(100vh - var(--nav-h) - 92px),480px)}
  @supports (height:100svh){ .cs-reel-g{--fh:clamp(360px,calc(100svh - var(--nav-h) - 92px),480px)} }
  .cs-fig{scroll-margin-top:calc(var(--nav-h) + 8px)}
  .cs-ui{white-space:normal;margin-bottom:10px}
  .cs-ui-t{display:none}
  .cs-live{display:flex;align-items:baseline;gap:12px;min-height:40px;text-transform:none;letter-spacing:0}
  .cs-live-tc{flex:none;font-size:11px;letter-spacing:.04em;color:var(--ink-3);font-variant-numeric:tabular-nums}
  .cs-live-ct{position:relative;padding-left:12px;font-family:var(--sans);font-size:15px;line-height:20px;letter-spacing:-.005em;color:var(--ink)}
  .cs-live-ct::before{content:"";position:absolute;left:0;top:2px;width:2px;height:16px;background:#d9ad12}

  .cs-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
  .cs-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;box-shadow:inset 0 0 0 1px var(--line-2,rgba(14,23,38,.3));
    font-family:var(--cond);font-weight:600;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
    -webkit-tap-highlight-color:transparent;transition:background-color .2s linear,color .2s linear,box-shadow .2s linear}
  .cs-chip-n{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.02em;color:var(--ink-2);transition:color .2s linear}
  .cs-chip[aria-pressed=true]{background:var(--ink);color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
  .cs-chip[aria-pressed=true] .cs-chip-n{color:#d9ad12}
  .cs-chip.cs-off{color:var(--ink-3)}
  .cs-chip:active{background:rgba(14,23,38,.06)}
}
@media (max-width:560px){
  /* six fields in two columns: the closed form reads as one page, not two screens of empty boxes */
  .cs-ghost{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;margin-top:32px}
  .cs-gf{gap:6px}
  .cs-box{height:40px}
  .cs-stamp{right:8px;margin-top:-11.5px}
}
@media (max-width:340px){
  .cs-stamp{right:6px;transform:rotate(-2deg) scale(.92);transform-origin:right center}
}

/* ================================================================ reduced motion */
html.reduce .cs-cap,html.reduce .cs-tc,html.reduce .cs-cap::before,html.reduce .cs-sq,html.reduce .cs-pin-n,html.reduce .cs-pin-t,
html.reduce .cs-ne,html.reduce .cs-at,html.reduce .cs-chip,html.reduce .cs-chip-n,html.reduce .cs-addr,html.reduce .cs-tel,html.reduce .cs-lk{transition:none}
html.reduce .cs-addr:hover .cs-ne,html.reduce .cs-lk:hover .cs-ne{transform:none}

/* ================================================================ print: the directory is the useful part */
@media print{
  .cs-ghost.cs-pre .cs-stamp{opacity:1!important}
  .cs-map{position:static}
  .cs-play,.cs-tgrow{display:none!important}
}