/* Lucy's Coin Wash demo. Colours are taken from the shop's own front: door trim, window vinyl, base tile. */

@font-face{font-family:'Caprasimo';src:url('../assets/fonts/Caprasimo.woff2') format('woff2');font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:'Libre Franklin';src:url('../assets/fonts/LibreFranklin.woff2') format('woff2');font-display:swap;font-weight:100 900;font-style:normal}

:root{
  /* oklch(0.79 0.135 88) door trim and loonie */
  --gold:#d9b23c;
  --gold-deep:#a9821f;
  /* oklch(0.49 0.18 25) window vinyl */
  --red:#b3161f;
  --ink:#1c1b1a;
  --ink-soft:#4d4b47;
  --panel:#fafaf9;
  --glass:#e6ecef;
  --glass-deep:#cfd9de;
  --rule:#1c1b1a29;

  --display:'Caprasimo','Cooper Black','Rockwell',Georgia,serif;
  --text:'Libre Franklin','Franklin Gothic Medium','Arial Narrow',Arial,sans-serif;

  --step-0:clamp(1rem,.96rem + .2vw,1.125rem);
  --step-1:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.25rem);
  --step-3:clamp(2.1rem,1.6rem + 2.5vw,3.5rem);
  --step-4:clamp(2.6rem,1.7rem + 4.6vw,5.5rem);

  --gutter:clamp(1rem,4vw,3.5rem);
  --wrap:78rem;

  --ease-arrive:cubic-bezier(.19,1,.22,1);
  --ease-ui:cubic-bezier(.23,1,.32,1);
  --ease-coin:cubic-bezier(.34,1.4,.64,1);

  --focus:var(--ink);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--panel);color:var(--ink);font-family:var(--text);font-size:var(--step-0);line-height:1.55;font-weight:400}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--display);font-weight:400;text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit;text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:calc(var(--wrap) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Pending facts. Everything carrying this mark waits for the owner. */
.tbc{display:inline-block;margin-inline-start:.35em;padding:.08em .5em;border:1px dashed currentColor;border-radius:99px;font-family:var(--text);font-size:.72rem;font-weight:600;line-height:1.5;letter-spacing:.01em;vertical-align:.12em;white-space:nowrap}

/* Demo notice */
.demo{background:var(--ink);color:var(--panel);font-size:.875rem;line-height:1.4;padding-block:.5rem}
.demo .wrap{display:block}
.demo strong{color:var(--gold);font-weight:700}
.demo .tbc{margin-inline-start:.15em}

/* Header: the sign board above the window */
.sign{background:var(--panel);border-bottom:6px solid var(--ink)}
.sign .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem 2rem;padding-block:.75rem}
.mark{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-size:clamp(1.5rem,1.3rem + 1vw,2.1rem);line-height:1.1;color:var(--red);text-decoration:none;letter-spacing:-.01em}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin-inline-start:-.6rem}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:.6rem;font-weight:600;font-size:.95rem;text-decoration:none;border-radius:4px;transition:background-color .14s var(--ease-ui)}
.nav .nav-call{margin-inline-start:.5rem;font-variant-numeric:tabular-nums;background:var(--ink);color:var(--panel);padding-inline:.9rem}
@media (hover:hover){
  .nav a:hover{background:var(--glass)}
  .nav .nav-call:hover{background:var(--red)}
}
@media (max-width:760px){
  .nav{margin-inline-start:-.6rem}
  .nav .nav-call{display:none}
}

/* Hero: the building front */
.front{position:relative;background-color:var(--gold);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .03 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.front-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:end;padding-block:clamp(2rem,5vw,4.5rem) 0}
.front-copy{padding-block-end:clamp(2rem,5vw,4.5rem)}
.front h1{font-size:var(--step-4);line-height:1.02;letter-spacing:-.025em}
.front-lede{margin-block-start:1.1rem;max-width:34ch;font-size:var(--step-1);line-height:1.35;font-weight:500}

.status{display:inline-flex;align-items:center;gap:.55rem;margin-block-start:1.5rem;padding:.4rem .85rem .4rem .7rem;background:var(--ink);color:var(--panel);border-radius:99px;font-weight:600;font-size:.95rem;line-height:1.35}
.status i{flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--glass-deep)}
.status[data-state="open"] i{background:#5fd38a}
.status[data-state="closing"] i{background:var(--gold)}
.status[data-state="closed"] i{background:#ff7a70}

.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-block-start:1.5rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.6rem 1.25rem;border:2px solid var(--ink);border-radius:4px;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;font-variant-numeric:tabular-nums;transition:background-color .14s var(--ease-ui),color .14s var(--ease-ui)}
.btn-solid{background:var(--ink);color:var(--panel)}
.btn-line{background:transparent;color:var(--ink)}
@media (hover:hover){
  .btn-solid:hover{background:var(--red);border-color:var(--red)}
  .btn-line:hover{background:var(--ink);color:var(--panel)}
}

/* The window. All lettering is live text. */
.window{position:relative;align-self:end;border:clamp(10px,1.2vw,16px) solid var(--ink);border-bottom:0;background-color:var(--glass);background-image:linear-gradient(112deg,var(--glass) 0%,var(--glass) 46%,#f3f6f8 46.2%,#f3f6f8 55%,var(--glass) 55.2%,var(--glass) 68%,#eef2f4 68.2%,#eef2f4 72%,var(--glass-deep) 100%)}
.vinyl{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(1.25rem,3vw,2.25rem) 1rem clamp(1rem,2.4vw,1.75rem);color:var(--red)}
.oval{display:inline-block;padding:.5rem 1.5rem .55rem;background:#3a3f44;border:5px solid #d4564f;border-radius:50%/62%;color:#f6f1e6;font-family:var(--text);font-weight:800;font-size:clamp(1.1rem,.95rem + .8vw,1.55rem);line-height:1.1;letter-spacing:.015em;text-decoration:none;text-transform:uppercase;transform:rotate(-2.5deg);transition:background-color .14s var(--ease-ui)}
.vinyl-name{margin-block-start:1rem;font-family:var(--display);font-size:clamp(2rem,1.6rem + 2vw,3.1rem);line-height:.98;letter-spacing:-.01em}
.vinyl-name span{display:block}
.vinyl-head{margin-block-start:1.1rem;padding-block-end:.1rem;border-bottom:3px solid currentColor;font-weight:800;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
.vinyl-lines{margin-block-start:.6rem;font-weight:700;font-size:var(--step-0);line-height:1.5}
.sill{height:clamp(20px,3vw,34px);background:var(--panel);border-top:2px solid var(--glass-deep)}
@media (hover:hover){.oval:hover{background:var(--ink)}}

/* Base tile */
.tile{background-color:var(--ink);background-image:repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 120px);color:var(--panel)}
.tile .wrap{display:flex;flex-wrap:wrap;gap:.1rem 1.5rem;justify-content:space-between;align-items:baseline;padding-block:.9rem}
.tile-address{font-family:var(--display);font-size:var(--step-1);color:var(--gold)}

@media (prefers-reduced-motion:no-preference){
  .vinyl>*{animation:peel .8s var(--ease-arrive) both}
  .vinyl>:nth-child(2){animation-delay:.08s}
  .vinyl>:nth-child(3){animation-delay:.16s}
  .vinyl>:nth-child(4){animation-delay:.24s}
}
@keyframes peel{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% -5% -10% 0)}}

@media (max-width:760px){
  .front-grid{grid-template-columns:1fr;gap:0}
  .front-copy{padding-block-end:2rem}
  .window{max-width:30rem;width:100%;margin-inline:auto}
}

/* Skip link */
.skip{position:absolute;left:1rem;top:-4rem;z-index:30;padding:.6rem 1rem;background:var(--panel);color:var(--ink);font-weight:700;border-radius:4px}
.skip:focus{top:.5rem}

/* Prices and the loonie counter */
.prices{position:relative;padding-block:clamp(3rem,7vw,6rem) clamp(3rem,6vw,4.5rem)}
.prices-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4.5rem);align-items:end}
.prices h2{font-size:var(--step-3);line-height:1.06;letter-spacing:-.02em;color:var(--red);max-width:17ch}
.prices-note{margin-block-start:.9rem;max-width:52ch;color:var(--ink-soft);font-size:.95rem}
.counter{margin-block-start:2rem;padding-block-start:1.25rem;border-top:3px solid var(--ink);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 1.5rem;max-width:36rem}
.counter-title{grid-column:1/-1;font-family:var(--display);font-size:var(--step-1);line-height:1.2}
.field label{display:block;font-weight:700;font-size:.95rem;margin-block-end:.35rem}
.stepper{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;border:2px solid var(--ink);border-radius:4px;overflow:hidden;background:#fff}
.stepper button{min-height:52px;border:0;background:var(--gold);color:var(--ink);font:700 1.5rem/1 var(--text);cursor:pointer;touch-action:manipulation;transition:background-color .14s var(--ease-ui)}
.stepper button:disabled{background:var(--glass);color:#6b6965;cursor:not-allowed}
.stepper input{width:100%;min-width:0;border:0;border-inline:2px solid var(--ink);background:#fff;color:var(--ink);font:700 1.35rem/1 var(--text);font-variant-numeric:tabular-nums;text-align:center;appearance:textfield;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{appearance:none;margin:0}
.stepper :focus-visible{outline-offset:-5px}
@media (hover:hover){.stepper button:not(:disabled):hover{background:var(--ink);color:var(--gold)}}
.result{grid-column:1/-1}
.result-big{display:block;font-family:var(--display);font-size:var(--step-3);line-height:1.05;letter-spacing:-.02em}
.result-how{margin-block-start:.35rem;color:var(--ink-soft);font-size:.95rem;font-variant-numeric:tabular-nums}

.stack{--coin:clamp(130px,14vw,200px);--lift:calc(var(--coin)*.135);position:relative;justify-self:center;width:calc(var(--coin)*1.12*var(--cols,1));height:calc(var(--lift)*9 + var(--coin)*.47);margin-block-end:calc(-1*clamp(3rem,6vw,4.5rem) - 3.25rem);z-index:2}
.stack[data-columns="2"]{--cols:2;--coin:clamp(120px,12vw,170px)}
.stack[data-columns="3"]{--cols:3;--coin:clamp(100px,9.5vw,130px)}
.coin{position:absolute;left:calc(var(--col,0)*var(--coin)*1.12);bottom:calc(var(--row,0)*var(--lift));width:var(--coin);height:calc(var(--coin)*.467);filter:drop-shadow(0 1px 0 #0000002e);overflow:visible}
.stack>.coin:nth-child(1){--row:0}.stack>.coin:nth-child(2){--row:1}.stack>.coin:nth-child(3){--row:2}.stack>.coin:nth-child(4){--row:3}.stack>.coin:nth-child(5){--row:4}.stack>.coin:nth-child(6){--row:5}
@media (prefers-reduced-motion:no-preference){
  .coin.drop{animation:drop .32s var(--ease-coin) var(--wait,0ms) both}
}
@keyframes drop{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}

/* How it works: the only dark room on the page */
.how{--focus:var(--gold);background:var(--ink);color:var(--panel);padding-block:clamp(4.5rem,9vw,7.5rem) clamp(3rem,6vw,5rem)}
.how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.how h2{font-size:var(--step-3);line-height:1.06;letter-spacing:-.02em;color:var(--gold);max-width:13ch}
.slide{margin-block-start:2rem;max-width:22rem}
.slide figcaption{margin-block-start:.6rem;font-size:.9rem;color:#d4d1cb}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:3.25rem minmax(0,1fr);column-gap:1rem;padding-block:1.25rem;border-top:1px solid #ffffff2e}
.steps li::before{content:counter(s);grid-row:1/3;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;background:var(--panel);color:var(--ink);font:400 1.6rem/1 var(--display)}
.steps h3{font-size:var(--step-1);line-height:1.2;color:var(--panel)}
.steps p{margin-block-start:.3rem;max-width:58ch;color:#e4e1dc}
.how-last{grid-column:1/-1;font-family:var(--display);font-size:var(--step-2);line-height:1.15;color:var(--gold);padding-block-start:clamp(.5rem,2vw,1.5rem)}

/* Inside: dryer band, then two plain lists */
.dryers{height:clamp(170px,23vw,330px);overflow:hidden;background:var(--panel)}
.dryers svg{width:100%;height:100%}
.inside{background:var(--glass);border-bottom:6px solid var(--ink)}
.inside-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(2.5rem,6vw,4.5rem)}
.inside h2{font-size:var(--step-2);line-height:1.1;letter-spacing:-.015em;max-width:18ch}
.inside-lede{margin-block-start:.9rem;max-width:44ch}
.have h3{font-family:var(--text);font-weight:800;font-size:1rem;padding-block-end:.4rem;border-bottom:3px solid var(--ink)}
.have li{padding-block:.5rem;border-bottom:1px solid var(--rule)}

/* Find us */
.find{background:var(--gold);padding-block:clamp(3rem,7vw,5.5rem)}
.find-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.find h2{font-size:clamp(2.6rem,1.6rem + 3.7vw,4.75rem);line-height:1;letter-spacing:-.025em}
.find-city{margin-block-start:.35rem;font-size:var(--step-1);font-weight:600}
.facts{margin-block-start:1.75rem;border-top:3px solid var(--ink)}
.facts>div{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:1rem;align-items:baseline;padding-block:.6rem;border-bottom:1px solid #1c1b1a40}
.facts dt{font-weight:800}
.facts a{font-weight:600;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;min-height:44px}
.tbc-first{margin-inline-start:0}
.map{align-self:center}
.map svg{width:100%;height:auto;border:clamp(8px,1vw,12px) solid var(--ink)}
.map figcaption{margin-block-start:.5rem;font-size:.9rem;font-weight:500}

/* Questions */
.faq{padding-block:clamp(3rem,7vw,5.5rem)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.25rem,4vw,3.5rem);align-items:start}
.faq h2{font-size:var(--step-2);line-height:1.1;letter-spacing:-.015em;color:var(--red)}
.faq-list{border-top:3px solid var(--ink)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:56px;padding-block:.7rem;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 1.6rem/1 var(--display);color:var(--red)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-block-end:1rem;max-width:60ch}

/* Footer */
.foot{--focus:var(--gold);background-color:var(--ink);background-image:repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 120px);color:var(--panel);padding-block:clamp(2.5rem,5vw,3.5rem) 1.5rem}
.foot-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,3fr);gap:1.5rem 2rem}
.foot-mark{font-family:var(--display);font-size:var(--step-2);line-height:1.1;color:var(--gold);margin-block-end:.4rem}
.foot a{display:inline-flex;align-items:center;min-height:44px;text-decoration-color:#ffffff66}
.foot-note{margin-block-start:1.75rem;font-size:.875rem;color:#d4d1cb}

/* Privacy page */
.legal{max-width:calc(44rem + var(--gutter)*2);padding-block:clamp(2.5rem,6vw,4.5rem)}
.legal h1{font-size:var(--step-3);line-height:1.05;letter-spacing:-.02em;color:var(--red);margin-block-end:1.25rem}
.legal p{margin-block-end:1rem}
body:has(.legal){display:flex;flex-direction:column;min-height:100vh}
body:has(.legal) .legal{width:100%}
body:has(.legal) .foot{margin-block-start:auto}

/* Machine board: tiles borrow the dryer control strip */
.board{padding-block:clamp(2.5rem,6vw,4rem) 0;scroll-margin-top:1rem}
.board-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.35rem 2rem;padding-block-end:.75rem;border-bottom:3px solid var(--ink)}
.board h2{font-size:var(--step-3);line-height:1.06;letter-spacing:-.02em}
.board-time{font-weight:600}
.board-group{margin-block-start:1.25rem}
.board-group h3{font-family:var(--text);font-weight:800;font-size:1rem;margin-block-end:.5rem}
.board-group ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.tile-machine{display:grid;grid-template-columns:2.75rem minmax(0,1fr);grid-template-rows:auto auto;gap:.2rem .65rem;align-items:center;padding:.65rem .75rem;background:var(--panel);border:2px solid var(--ink)}
.tm-number{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:2px solid var(--ink);font:400 1.35rem/1 var(--display)}
.tm-led{justify-self:start;padding:.05rem .45rem;background:#14301f;color:#7be3a2;font-weight:800;font-size:.85rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.tm-text{font-size:.9rem;font-weight:600;line-height:1.25}
.tile-machine.is-out{background:#fbe9e8;border-color:var(--red)}
.tile-machine.is-out .tm-number{border-color:var(--red);color:var(--red)}
.tile-machine.is-out .tm-led{background:#3a1412;color:#ff8f86}
.tile-machine.is-out .tm-text{color:var(--red)}
.board-note{margin-block-start:1rem;font-weight:600}

/* Five-star reviews */
.said{padding-block:clamp(3rem,7vw,5.5rem)}
.said-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.said h2{font-family:var(--text);font-weight:800;font-size:1rem;padding-block-end:.4rem;border-bottom:3px solid var(--ink)}
.said-quote{margin-block-start:1.5rem}
.said-quote blockquote{margin:0;font-family:var(--display);font-size:var(--step-4);line-height:1.04;letter-spacing:-.025em;color:var(--red)}
.said-quote figcaption{margin-block-start:.75rem;font-weight:600}
.stars{letter-spacing:.08em;color:var(--ink);font-size:1rem}
.said-more li{padding-block:.75rem;border-bottom:1px solid var(--rule)}
.said-more li p{margin-block-start:.15rem}
.said-date{font-size:.9rem;color:var(--ink-soft)}
.said-note{margin-block-start:.75rem;font-size:.9rem;color:var(--ink-soft)}
.how-links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:0 1.5rem;margin-block-start:-1rem}
.how-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--panel);text-decoration-color:var(--gold)}

/* Owner page: built for one thumb */
.owner-page{background:var(--panel);padding-block-end:2rem}
.owner{max-width:calc(30rem + var(--gutter)*2);padding-block:1.5rem}
.owner h1{font-size:var(--step-3);line-height:1.05;letter-spacing:-.02em;color:var(--red);margin-block-end:1rem}
.owner h2{font-family:var(--text);font-weight:800;font-size:1rem;margin-block:1.25rem .5rem}
.owner-login{display:grid;gap:.6rem}
.owner-login label{font-weight:700}
.owner-login input{min-height:52px;padding-inline:.8rem;border:2px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);font:700 1.25rem/1 var(--text)}
.owner-error{color:var(--red);font-weight:600;margin-block-start:.75rem}
.owner-saved{font-weight:600}
.owner-machine{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:60px;margin-block-end:.5rem;padding:.5rem 1rem;background:#e6f4ea;border:2px solid var(--ink);border-radius:4px;color:var(--ink);font:700 1.05rem/1.2 var(--text);cursor:pointer;touch-action:manipulation}
.owner-machine.is-out{background:#fbe9e8;border-color:var(--red);color:var(--red)}
.owner-all{margin-block-start:1rem;width:100%;cursor:pointer}
.owner-back{margin-block-start:1rem}
.owner-back a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* Printable in-store sign */
.sign-page{background:var(--glass)}
.sign-warning{margin:0;padding:.6rem 1rem;background:var(--red);color:#fff;font-weight:700;text-align:center}
.poster{width:min(100%,8.5in);margin:1rem auto;padding:clamp(1.5rem,5vw,.6in);background:var(--gold);color:var(--ink);text-align:center}
.poster-mark{font-family:var(--display);font-size:var(--step-2);color:var(--ink)}
.poster h1{margin-block:.5rem 1.25rem;font-size:clamp(2.4rem,1.6rem + 3vw,4rem);line-height:1.04;letter-spacing:-.025em}
.poster-qr{width:min(100%,3.6in);height:auto;margin-inline:auto;padding:.2in;background:#fff;border:6px solid var(--ink)}
.poster-list{margin-block-start:1.25rem;font-weight:700;font-size:var(--step-1);line-height:1.5}
.poster-foot{margin-block-start:1rem;padding-block:.4rem;background:var(--ink);color:var(--gold);font-family:var(--display);font-size:var(--step-2)}
@media print{
  @page{size:letter;margin:.4in}
  .sign-page{background:#fff}
  .poster{margin:0;width:100%;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Phone action bar */
.bar{display:none}
@media (max-width:760px){
  body{padding-block-end:calc(60px + env(safe-area-inset-bottom))}
  .bar{position:fixed;inset-inline:0;bottom:0;z-index:20;display:grid;grid-template-columns:1fr 1fr;background:var(--ink);padding-block-end:env(safe-area-inset-bottom)}
  .bar a{display:flex;align-items:center;justify-content:center;min-height:60px;font-weight:700;color:var(--panel);text-decoration:none}
  .bar a:first-child{background:var(--red)}
  .prices-grid,.how-grid,.find-grid,.faq-grid,.said-grid{grid-template-columns:1fr}
  .board-group ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inside-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>:first-child{grid-column:1/-1}
  .stack{--coin:120px;margin-block:1rem calc(-1*clamp(3rem,6vw,4.5rem) - 2.25rem)}
  .stack[data-columns="2"]{--coin:120px}
  .stack[data-columns="3"]{--coin:min(96px,26vw)}
  .slide{max-width:18rem}
}
@media (min-width:761px) and (max-width:1100px){
  .front h1{font-size:clamp(2.9rem,6.2vw,3.9rem);letter-spacing:-.02em}
}
@media (min-width:761px) and (max-width:1020px){
  .inside-grid{grid-template-columns:1fr 1fr}
  .inside-grid>:first-child{grid-column:1/-1}
}
@media (max-width:420px){
  .counter{grid-template-columns:1fr}
  .facts>div{grid-template-columns:1fr;gap:0}
}

/* Print: hours and phone are what people want on paper */
@media print{.demo,.bar,.nav,.stack,.dryers{display:none}.front,.how,.find,.foot{background:none;color:#000}}