:root{
  --navy:#071E3D;
  --navy2:#0B2C5A;
  --blue:#1B6FE8;
  --glow:#3EA2FF;
  --paper:#F3F6FA;
  --muted:#8AA0B8;
  --ink:#0B2C5A;
  --safe-t:env(safe-area-inset-top);
  --safe-b:env(safe-area-inset-bottom);
  --header:calc(56px + var(--safe-t));
  --tab:calc(64px + var(--safe-b));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--navy);color:#fff;font-family:Inter,system-ui,-apple-system,sans-serif;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}

.app{min-height:100dvh;display:flex;flex-direction:column;background:var(--navy)}
.top{
  padding:var(--safe-t) 16px 0;
  height:var(--header);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding-bottom:10px;
}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:28px;width:auto;display:block}
.brand b{font-size:18px;letter-spacing:-.02em}
.brand small{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.icon-btn{
  width:40px;height:40px;border-radius:12px;
  border:1px solid #1B3A66;display:grid;place-items:center;color:#fff;
}

.stage{flex:1;padding:8px 16px 12px;display:flex;flex-direction:column;gap:12px}
.grid{
  flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:12px;min-height:0;
}
.tile{
  background:var(--paper);color:var(--ink);border-radius:26px;
  padding:18px 16px 16px;display:flex;flex-direction:column;justify-content:space-between;
  min-height:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.tile svg{width:36px;height:36px;stroke:var(--navy2);fill:none;stroke-width:1.8}
.tile h2{font-size:clamp(22px,4.2vw,28px);letter-spacing:-.03em;margin-top:auto;padding-top:12px}
.tile p{display:none}
.pill{
  align-self:flex-start;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:5px 9px;
}
.pill.ship{background:#DCEBFF;color:#1B6FE8}
.pill.now{background:#E8FBF1;color:#0B7A45}
.pill.mix{background:#F1E9FF;color:#5B3FA8}

.tabs{
  height:var(--tab);padding:8px 8px var(--safe-b);
  /* Not four equal columns any more. The call button carries twelve digits and
     the other three carry one short word each, so the number gets half again
     the width rather than being shrunk to fit a quarter. Home, Keys and Help
     lose ~10px each and have room to spare. */
  display:grid;grid-template-columns:1fr 1fr 1.5fr 1fr;
  background:#06182F;border-top:1px solid #1B3A66;
}
/* justify-content:center rather than the old padding-top: the labels used to
   sit at the top of their cells, which was invisible while all four were
   plain text and became a 17px mismatch the moment one of them was a filled
   button. Centred, the button and the three labels share one line. */
.tabs a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:11px;font-weight:600;color:var(--muted);
}
.tabs a.on{color:var(--glow)}

.menu{
  display:none;position:fixed;inset:0;background:rgba(4,12,24,.72);z-index:20;
  justify-content:flex-end;
}
.menu.open{display:flex}
.menu nav{
  width:min(320px,86vw);height:100%;background:#0B2C5A;padding:calc(var(--safe-t) + 20px) 22px 24px;
  display:flex;flex-direction:column;gap:18px;
}
.menu a{font-size:18px;font-weight:600}

.list{display:flex;flex-direction:column;gap:8px}
.row{
  background:var(--paper);color:var(--ink);border-radius:18px;min-height:64px;
  padding:12px 14px;display:flex;align-items:center;gap:12px;
}
.row strong{flex:1;font-size:16px}
.row .price{font-weight:800}
.row .chev{color:var(--muted)}

.sheet{
  display:none;position:fixed;inset:0;background:rgba(4,12,24,.55);z-index:30;
  align-items:flex-end;
}
.sheet.open{display:flex}
.panel{
  width:100%;background:var(--paper);color:var(--ink);
  border-radius:28px 28px 0 0;padding:22px 20px calc(22px + var(--safe-b));
}
.panel .pill{margin:0 0 10px}
.panel h1{font-size:28px;letter-spacing:-.03em;line-height:1.1}
.panel .type{color:#5B6B82;margin:6px 0 14px;font-size:16px}
.panel .amt{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1}
.panel .amt span{font-size:16px;font-weight:600;color:#5B6B82;margin-left:8px}
.panel .note{color:#5B6B82;margin:14px 0 18px;font-size:14px}
.primary{
  display:block;width:100%;height:56px;border-radius:16px;background:var(--blue);color:#fff;
  font-size:17px;font-weight:700;
}
.ghost{display:block;width:100%;height:48px;margin-top:6px;color:var(--ink);font-weight:600}

.flow-top{padding:8px 4px 4px;font-size:13px;color:var(--muted)}
h1.screen{font-size:28px;letter-spacing:-.03em;margin:4px 0 12px}

@media(min-width:900px){
  .app{max-width:430px;margin:0 auto;border-left:1px solid #1B3A66;border-right:1px solid #1B3A66}
}

/* ---- added for the remaining pages. Same navy shell, same tokens. ---- */

/* keep the tab bar pinned and scroll the stage instead of the page */
.app{height:100vh;height:100dvh}
.stage{overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch}

.row{width:100%;text-align:left}
.row strong em{display:block;font-style:normal;font-weight:500;font-size:13px;color:#5B6B82;margin-top:2px}

.card{background:var(--paper);color:var(--ink);border-radius:18px;padding:16px;margin-bottom:10px}
.card h2{font-size:18px;letter-spacing:-.02em;margin-bottom:6px}
.card h3{font-size:15px;margin:12px 0 4px}
.card p{font-size:15px;color:#5B6B82}
.card p+p{margin-top:8px}
.card ul{margin:8px 0 0 18px;font-size:15px;color:#5B6B82}
.card li{margin-bottom:6px}
.card .primary,.card .ghost{margin-top:12px}
.card a{color:var(--blue);font-weight:600}

.dim{color:var(--muted);font-size:13px;margin:10px 0}
.lede{color:var(--muted);font-size:15px;margin:-4px 0 12px}

.steps{counter-reset:s}
.stepr{display:flex;gap:12px;padding:12px 0;border-top:1px solid #E3E9F1}
.stepr:first-child{border-top:0;padding-top:0}
.stepr b{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--navy2);color:#fff;font-size:13px}
.stepr h3{margin:0 0 2px;font-size:15px}
.stepr p{font-size:14px}

.deny{margin:0;padding:0;list-style:none}
.deny li{display:flex;gap:8px;font-size:14px;color:#5B6B82;margin-bottom:8px}
.deny li:before{content:"✕";color:#9AA7B8;flex:none}

.qa{border-top:1px solid #E3E9F1}
.qa:first-child{border-top:0}
.qa summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-weight:700;font-size:15px;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";color:var(--blue);font-weight:400;font-size:20px}
.qa[open] summary{color:var(--blue)}
.qa[open] summary:after{content:"–"}
.qa p{font-size:15px;color:#5B6B82;padding-bottom:12px}
.qa p+p{margin-top:-6px;padding-bottom:12px}

.bar{height:10px;border-radius:999px;background:#DFE7F1;overflow:hidden;margin-bottom:12px}
.fill{display:block;height:100%;width:8%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--glow));animation:fill 3.2s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fill{to{width:100%}}
@media(prefers-reduced-motion:reduce){.fill{animation:none;width:100%}}

fieldset{border:0}
.field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.field label{font-size:13px;font-weight:600;color:#5B6B82}
.field input{height:48px;border-radius:12px;border:1px solid #D7E0EC;padding:0 12px;font:inherit;background:#fff;color:var(--ink)}
.field input:disabled{background:#E9EEF5;color:#8AA0B8}
.choice{display:flex;align-items:center;gap:10px;min-height:48px;border:1px solid #D7E0EC;border-radius:12px;padding:0 12px;margin-bottom:8px;font-weight:600;font-size:15px}
.choice input{width:18px;height:18px;accent-color:var(--blue)}
fieldset:disabled .choice{background:#E9EEF5;color:#8AA0B8}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* dropdown car picker + progress screen, per the kiosk mockup */
.field select{height:48px;border-radius:12px;border:1px solid #D7E0EC;padding:0 12px;font:inherit;background:#fff;color:var(--ink)}
.field select:disabled{background:#E9EEF5;color:#8AA0B8}
.card .primary:disabled{background:#B9CBE4}
.made{text-align:center}
.made h2{margin-top:14px}
.made .bar{margin-top:16px}
.made .small{font-size:13px;margin-top:10px}
.tick{width:72px;height:72px;margin:4px auto 0;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center}
.tick svg{width:36px;height:36px}

/* home tiles: the photo is the tile. White is a trim, not a box, and the
   grid fills the stage so the four fill the screen on any device. */
.home .grid{flex:1;grid-template-rows:1fr 1fr}
.home .tile{
  position:relative;padding:0;overflow:hidden;min-height:0;
  border:2px solid rgba(255,255,255,.92);box-shadow:0 10px 26px rgba(2,10,24,.38);
  justify-content:flex-end;
}
.home .tile>*{position:relative;z-index:2}
/* scrim so the label stays readable whatever the photo is doing underneath */
.home .tile:after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(3,12,28,.92) 0%,rgba(3,12,28,.55) 34%,rgba(3,12,28,0) 62%);
}
.home .tile h2{color:#fff;margin:0;padding:0 14px 0;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.home .tile .pill{margin:8px 14px 14px}
.pill.find{background:#FFF0C2;color:#8A6200}

/* The fourth square (Fire, 12 Oct): the slogan and what we do, no link and no
   button. It is the only tile without a photo, so it carries the navy itself
   rather than the white trim the photo tiles use — "keep the dark blue look,
   no white background". It is a div, so it is inert and out of the tab order
   without needing anything turned off. */
.home .tile--note{
  background:linear-gradient(155deg,#12386B 0%,#0B2C5A 48%,#071E3D 100%);
  border-color:rgba(255,255,255,.34);
  justify-content:center;cursor:default;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  padding:14px;
}
.home .tile--note:after{display:none}        /* no photo, so no scrim */
.home .tile--note b{
  display:block;color:#fff;font-size:clamp(13px,3.6vw,16px);line-height:1.15;
  letter-spacing:-.02em;margin-bottom:10px;
}
.home .tile--note ul{list-style:none;margin:0;padding:0}
.home .tile--note li{
  color:#CFE0F7;font-size:clamp(11px,3vw,13px);font-weight:600;line-height:1.5;
  padding-left:12px;position:relative;
}
.home .tile--note li:before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:#FFC531;
}
.tile .art{width:auto;height:44%;max-width:78%;object-fit:contain;align-self:flex-start}
.tile h2{padding-top:8px}
@media(min-height:900px){.home .tile{border-width:3px}}

/* the confirm flow owns the screen — tab bar steps out of the way */
body.flow .tabs{display:none}
/* the photo fills the whole tile behind the label */
.home .tile .art{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0;max-width:none}

/* kiosk hero — the machine itself, on internal pages */
.khero{flex:none;border-radius:18px;overflow:hidden;margin-bottom:10px;background:#0B2C5A}
.hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero-cap{padding:12px 14px;color:#C8D6E8;font-size:13px}

/* the 430px frame above is right for a desktop browser, but a portrait kiosk
   is the primary target and should not render as a narrow strip */
@media(min-width:900px) and (orientation:portrait){.app{max-width:760px}}

/* every image is fluid by default, whatever else does or does not match */
img{max-width:100%;height:auto}

/* segmented control, so a comparison is two taps instead of two long stacks */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:#0B2C5A;border-radius:14px;padding:4px;margin-bottom:12px}
.seg-b{min-height:44px;border-radius:10px;font-weight:700;font-size:14px;color:var(--muted)}
.seg-b.on{background:var(--paper);color:var(--ink)}
.card>.pill{margin:0 0 8px}
.hero-cap{margin:0}

/* welcoming face above the grid, then the finder below it */
.face{padding:4px 2px 2px}
.face h1{font-size:clamp(24px,6.4vw,32px);letter-spacing:-.03em;line-height:1.1}
.face p{color:var(--muted);font-size:14px;margin-top:6px}
.home .grid{min-height:min(58vh,520px)}
.finder-row{display:flex;gap:8px;margin-top:10px}
.finder-row input{flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid #D7E0EC;padding:0 12px;font:inherit;background:#fff;color:var(--ink)}
.finder-row .primary{width:auto;padding:0 20px;height:48px;min-height:0;font-size:15px}
.finder-out{margin-top:10px;font-size:14px;color:var(--ink);font-weight:600}
.finder-out:empty{display:none}

/* push-to-open section: the copy stays in the HTML for crawlers, folded away
   so it does not push the app UI down the page */
.slider summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;list-style:none}
.slider summary::-webkit-details-marker{display:none}
.enter{display:inline-flex;align-items:center;gap:6px;flex:none;background:var(--blue);color:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700}
.enter:after{content:"\203a";font-size:16px;line-height:1}
.slider[open] .enter{background:#5B6B82}
.slider[open] .enter:after{content:"\2013"}
.lsi h3{font-size:15px;color:var(--ink);margin:16px 0 4px}
.lsi h3:first-child{margin-top:8px}
.lsi p{font-size:15px;color:#5B6B82}
.lsi p+p{margin-top:8px}


/* The stage is a flex column, so any child with overflow:hidden gets its
   min-height:auto resolved to zero and can be shrunk to nothing. That has now
   collapsed a hero twice. Nothing in the stage shrinks; only the home grid
   grows to fill. */
.stage>*{flex:none}
.home .grid{flex:1 1 auto}

/* Find a kiosk. The machine is a real object standing in front of the card:
   it starts above the top edge, overlapping the tile grid, and lands inside.
   The overlap is (top offset - margin-top - the stage's 12px gap), so those
   three numbers have to move together. They were retuned when the grid went
   from two rows to one: the same overhang covers far more of a shorter tile. The left edge is masked so the photo
   melts into the card colour instead of sitting on it as a rectangle, and the
   search bar is pushed to the card floor so the art has full height to use. */
.kfind{
  position:relative;margin-top:18px;padding:18px;
  display:flex;flex-direction:column;
  border-radius:24px;border:1px solid #1B3A66;
  background:linear-gradient(155deg,#12386B 0%,#0B2C5A 45%,#071E3D 100%);
  box-shadow:0 18px 40px rgba(2,10,24,.45);
}
.kfind__body{position:relative;z-index:2;max-width:none;margin-bottom:auto}
.kfind__body h2{font-size:clamp(22px,6vw,30px);letter-spacing:-.03em;color:#fff;line-height:1.1}
.kfind__body p{color:#C3D2E6;font-size:15px;margin-top:6px}

.kfind__search{
  position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin-top:20px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:16px;padding:6px 6px 6px 16px;
}
.kfind__search input{
  flex:1;min-width:0;height:48px;border:0;background:transparent;color:#fff;
  font:inherit;font-size:15px;
}
.kfind__search input::placeholder{color:#B7C7DC}
.kfind__search input:focus{outline:none}
.kfind__go{
  flex:none;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;color:#fff;
}
.kfind__go svg{width:22px;height:22px}
.kfind .finder-out{position:relative;z-index:2;color:#fff;margin-top:10px}
.kfind .finder-out:empty{display:none}
.kfind__all{position:relative;z-index:2;display:inline-block;margin-top:12px;color:var(--glow);font-weight:700;font-size:14px}

@media(min-width:560px){
  .kfind{padding:26px;margin-top:24px}
    .kfind__body{max-width:none}
  /* A search bar the width of a desktop card reads as a form, not a control.
     Above 560px the photo occupies the right half, so the field stops at
     the same line the heading does instead of sliding under it. */
  .kfind__search{max-width:calc(50% - 20px)}
}

/* The squares take a fixed slice of the viewport rather than eating whatever
   height is left over. Growing to fill was what pushed the kiosk's head under
   the fold: the tiles are a little smaller now so the machine's sign clears
   them and the whole finder lands on the first screen. */
/* Four tiles in a 2x2: car and business on top, house and the machine below.
   Every cell is filled — the finder card underneath is a plain card now, so
   nothing rises into the grid and no cell is left deliberately empty. Earlier
   comments here described a two-tile row and then a three-tile grid with an
   empty fourth cell; both layouts are gone. */
/* Four equal squares in a 2x2 (Fire, 12 Oct): car, business, find a kiosk,
   and a filler panel. --gh is the whole grid, so each row is half of it. */
.home{--gh:min(50vh,420px);--ggap:12px}
.home .grid{flex:0 0 auto;min-height:0;grid-template-rows:1fr 1fr;height:var(--gh);gap:var(--ggap)}
/* The single number that tunes the overhang: how far the photo drops past its
   cell and over the finder card. It doubles as the length of the fade, so the
   photo is solid inside the cell and gone by its bottom edge. It has to stop
   clear of the ZIP field. 96px is the largest value that does at every width
   in WIDTHS; 104px grazes the field by a pixel at 430. Measured, not guessed,
   and audit.js fails if a future change pushes it back over. */
.home{--machine-drop:96px}  /* how far the photo carries on over the card */

/* ---------- kiosk pins and the location sub-page ----------------------
   A pin is the list row; tapping one opens a wrapper that behaves like a
   sub-page of the locations page rather than a dialog: its own bar, its own
   scroll, and a footer that stays put while the body scrolls. */
.pins{display:flex;flex-direction:column;gap:8px}
.pin{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:66px;
  background:#fff;border:1px solid #E3EAF3;border-radius:14px;padding:12px 14px;
}
.pin__dot{flex:none;width:36px;height:36px;border-radius:50%;background:#E8F0FB;color:var(--blue);display:grid;place-items:center}
.pin__dot svg{width:20px;height:20px}
.pin__body{flex:1;min-width:0}
.pin__body strong{display:block;color:var(--ink);font-size:15px}
.pin__body em{display:block;font-style:normal;color:var(--muted);font-size:13px;margin-top:2px}
.pin .chev{flex:none;color:var(--muted);font-size:22px;line-height:1}

.subpage{
  position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(3,10,24,.55);
}
.subpage__panel{
  width:100%;max-width:430px;max-height:94dvh;background:var(--paper);
  border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 -12px 40px rgba(2,10,24,.5);animation:subup .22s ease-out;
}
@keyframes subup{from{transform:translateY(20px);opacity:.5}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.subpage__panel{animation:none}}
.subpage__bar{
  flex:none;display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-bottom:1px solid #E3EAF3;
}
.subpage__bar b{font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subpage__close{flex:none;width:40px;height:40px;border-radius:12px;background:#E8EEF7;color:var(--ink);font-size:26px;line-height:1}
.subpage__body{flex:1;min-height:0;overflow-y:auto;padding:14px 16px 20px;-webkit-overflow-scrolling:touch}
.subpage__body h2{font-size:20px;letter-spacing:-.02em;color:var(--ink)}
.subpage__body h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:20px 0 8px}
.subpage__body .lede{color:var(--ink);opacity:.75;font-size:14px;margin-top:4px}
.subpage__body .dim{color:var(--muted);font-size:13px;margin-top:8px}
.subpage__photo{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:14px}
.addr{color:var(--ink);font-weight:700;margin-top:8px;font-size:15px}
.mapbox{margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid #E3EAF3;background:#E8EEF7}
.mapbox iframe{display:block;width:100%;height:220px;border:0}
.hours{width:100%;border-collapse:collapse;font-size:14px}
.hours th,.hours td{padding:8px 0;border-bottom:1px solid #E7ECF4;color:var(--ink);font-weight:500;text-align:left}
.hours td{text-align:right;color:var(--muted)}
.hours tr.today th,.hours tr.today td{font-weight:800;color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:#E8F0FB;color:var(--blue);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700}
.subpage__actions{flex:none;display:flex;gap:8px;padding:12px 16px calc(12px + var(--safe-b));border-top:1px solid #E3EAF3}
.subpage__actions .primary,.subpage__actions .ghost{
  flex:1;min-height:50px;margin:0;border-radius:14px;font-size:15px;display:grid;place-items:center;
}
.subpage__actions .ghost{background:#E8EEF7;color:var(--ink);font-weight:700}
body.locked{overflow:hidden}

@media(min-width:560px){
  .subpage{align-items:center}
  .subpage__panel{border-radius:22px;max-height:88dvh}
  .mapbox iframe{height:280px}
}

/* a slot in verification: the frame is real, the values are not there yet */
.pin--pending{border-style:dashed;background:#FAFCFF}
.pin--pending .pin__dot{background:#EEF1F6;color:var(--muted)}
.pin--pending .pin__body strong{color:var(--muted)}
.waiting{
  border:1px dashed #C6D3E4;border-radius:12px;background:#EDF2F9;
  color:var(--muted);font-size:13px;padding:14px;margin-top:10px;
}
.subpage__photo+.waiting,.subpage__body>.waiting:first-child{margin-top:0;margin-bottom:12px;min-height:96px;display:grid;place-items:center;text-align:center}
.tag{
  margin-left:auto;flex:none;background:#E8F0FB;color:var(--blue);
  border-radius:999px;padding:4px 10px;font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ---------- corporate footer -------------------------------------------
   Sits at the end of .stage so it scrolls with the page rather than fighting
   the fixed tab bar. Dark on the navy shell, with a hairline to separate it
   from whatever card ends the page. */
.foot{
  margin-top:26px;padding:22px 2px calc(18px + var(--safe-b));
  border-top:1px solid #163358;color:#B7C7DC;font-size:14px;
}
.foot__top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.foot__mark{display:block;height:32px;width:auto}
.foot__top b{display:block;color:#fff;font-size:16px;letter-spacing:-.01em}
.foot__top span{display:block;color:var(--muted);font-size:12px;letter-spacing:.04em}
.foot__cols{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
.foot__col h3{
  font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  margin-bottom:8px;font-weight:800;
}
.foot__col ul{list-style:none}
.foot__col li{margin-bottom:7px}
.foot__col a{color:#CFDCEC;font-size:14px}
.foot__col a:hover,.foot__legal a:hover{color:#fff;text-decoration:underline}
.foot__note{margin-top:20px;color:var(--muted);font-size:12px;line-height:1.6}
.foot__legal{
  display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:16px;
  padding-top:14px;border-top:1px solid #163358;
}
.foot__legal a{color:#CFDCEC;font-size:13px}
.foot__copy{margin-top:10px;color:var(--muted);font-size:12px}

/* on a white page the footer keeps the navy so it reads as one band */
@media(min-width:560px){
  .foot__cols{grid-template-columns:repeat(4,1fr);gap:22px}
  .foot{padding-left:0;padding-right:0}
}

/* blog post prose — an article reads open, not folded behind a summary */
.post h2{font-size:17px;letter-spacing:-.01em;color:var(--ink);margin:18px 0 6px}
.post h2:first-child{margin-top:0}
.post p{color:var(--ink);opacity:.86;font-size:15px;line-height:1.62;margin-bottom:10px}
.post p:last-child{margin-bottom:0}
.post b{font-weight:800;opacity:1}
.list .row em{display:block;font-style:normal;color:var(--muted);font-size:13px;margin-top:2px;font-weight:500}

/* ---------- LSI terms block ------------------------------------------
   Four related terms on every page, explained rather than listed. Rendered
   open as a definition list: a crawler and a language model both read it
   without running anything, and a person can skim it. */
.terms__list{margin-top:4px}
.terms__list dt{
  color:var(--ink);font-weight:800;font-size:14px;margin-top:14px;
}
.terms__list dt:first-child{margin-top:0}
.terms__list dd{color:var(--ink);opacity:.78;font-size:14px;line-height:1.55;margin-top:3px}

/* ---------- starting price panel ---------- */
.price__amt{
  font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--ink);
  margin-top:4px;display:flex;align-items:baseline;gap:8px;
}
.price__amt span{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:0}
.price__what{color:var(--ink);opacity:.8;font-size:14px;margin-top:2px}
.price .dim{margin-top:10px}

/* ---------- GetKey Assist + schedule ---------------------------------- */
.assist .subpage__panel{max-height:88dvh}
.ass__log{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.ass__msg{border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.55}
.ass__msg p+p{margin-top:8px}
.ass__msg--bot{background:#fff;border:1px solid #E3EAF3;color:var(--ink)}
.ass__msg--you{background:var(--blue);color:#fff;align-self:flex-end;max-width:85%}
.ass__msg a{color:var(--blue);font-weight:700}
.ass__msg--you a{color:#fff}
.ass__rows{list-style:none;margin-top:8px;display:flex;flex-direction:column;gap:8px}
.ass__rows li{border-top:1px solid #EDF1F7;padding-top:8px}
.ass__rows li:first-child{border-top:0;padding-top:0}
.ass__tag{background:#E8F0FB;color:var(--blue);border-radius:999px;padding:2px 8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.ass__fine{color:var(--muted);font-size:12px;line-height:1.5;margin-top:8px}
.ass__form{display:flex;gap:8px;align-items:center}
.ass__form input{
  flex:1;min-width:0;height:48px;border-radius:12px;border:1px solid #D7E0EC;
  padding:0 12px;font:inherit;background:#fff;color:var(--ink);
}
.ass__form .primary{width:auto;padding:0 18px;height:48px;min-height:0;font-size:15px;margin:0}

/* the floating assist button, above the tab bar */
.assist-fab{
  position:fixed;right:14px;bottom:calc(var(--tab) + 12px);z-index:40;
  height:46px;padding:0 16px;border-radius:999px;background:var(--blue);color:#fff;
  font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;
  box-shadow:0 10px 26px rgba(2,10,24,.45);
}
.assist-fab svg{width:18px;height:18px}
body.locked .assist-fab,body.flow .assist-fab{display:none}
@media(min-width:560px){.assist-fab{right:calc(50% - 215px + 14px)}}

/* schedule call to action on service pages */
.cta-schedule{
  display:grid;place-items:center;min-height:52px;border-radius:14px;margin-top:10px;
  background:var(--blue);color:#fff;font-weight:800;font-size:15px;width:100%;
}
.mapout{margin-top:8px}
.mapout a{color:var(--blue);font-weight:700;font-size:14px}
/* the assist button floats over the page bottom, so the footer ends above it */
.foot{padding-bottom:calc(74px + var(--safe-b))}

/* A link styled as a button is still a button. `.card a` is more specific than
   `.primary` and comes after it, so it was repainting the label in link blue on
   top of the blue fill — an invisible label on 19 pages. These put it back. */
.card a.primary,.card a.cta-schedule{color:#fff}
.card a.ghost{color:var(--ink)}

/* Jump links at the top of the Assist window. How it works lives here now
   that the tab bar carries the phone number instead. */
.ass__jump{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.ass__jump a{
  display:inline-flex;align-items:center;border:1px solid #2A4E80;border-radius:999px;
  padding:8px 14px;font-size:14px;font-weight:700;color:#CFE0F7;background:#0E2F5C;
}
.ass__jump a:hover{color:#fff;text-decoration:none}

/* The phone number in the app chrome. It took How's slot in the tab bar so
   that calling is one tap from any page, and it takes the empty space beside
   the close button at the head of the menu. Yellow in both places, the same
   #FFC531 the footer's call button and the kiosk's service button already
   use, so the number reads as one thing wherever it appears.

   The tab bar was already a flex column with a gap, sized for an icon over a
   label, so the icon costs no height: 18 + 4 + ~13 + 4 of padding fits inside
   the 56px of content the 64px bar leaves. */
/* The ways to reach a person, wherever a page used to hold a form that could
   not send anything. Written by tools/build_contact.py into the HTML pages and
   by assist.js into its own panels, from the same contact.json. */
.reach{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px}
.reach__call{
  display:inline-flex;align-items:center;gap:8px;
  background:#FFC531;color:#10243F;border-radius:999px;
  padding:11px 18px;font-weight:800;font-size:16px;letter-spacing:-.01em;
}
.reach__call svg{width:17px;height:17px}
.reach__call:hover{color:#10243F;text-decoration:none}
.reach__mail{font-weight:700;font-size:15px;word-break:break-all}
.reach .dim{flex:1 0 100%;margin:2px 0 0}
/* inside a dark panel the address has to pick up the panel's own link colour */
.subpage__body .reach__mail{color:var(--glow)}

/* The "not on the list" panel inside the car picker. Separated from the
   dropdowns above it by a rule rather than a second card, because it is part
   of the same question, not a new one. */
.notlisted{margin-top:18px;padding-top:16px;border-top:1px solid #E3E9F1}
.notlisted[hidden]{display:none}
.notlisted h2{font-size:16px;letter-spacing:-.01em;margin-bottom:4px}
.notlisted>p{font-size:14px;color:#5B6B82}
.notlisted .primary{margin-top:12px}
.notlisted .dim:empty{display:none}

/* The number is the only action in the bar; the other three are destinations.
   So it is a filled button rather than a fourth label — same #FFC531 as the
   menu pill, the footer's call button and the kiosk's service button. Solid
   yellow against the navy bar is what makes it pop; there is no animation,
   because a nav element that shimmers on every page would be a distraction
   rather than an emphasis.

   No phone icon. Stacked over the digits it read as two things rather than
   one button, and removing it is half of what buys the number its width; the
   wider grid column above is the other half. The icon is still on the menu
   pill and the footer button, where there is room for it beside the number. */
.tabs a.call{
  flex-direction:row;justify-content:center;align-self:center;
  margin:0 4px;padding:9px 6px;border-radius:999px;
  background:#FFC531;color:#10243F;
}
.tabs a.call span{
  font-size:clamp(10px,3.1vw,14px);font-weight:800;
  letter-spacing:-.02em;white-space:nowrap;
}

.menu__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu__call{
  display:inline-flex;align-items:center;gap:8px;
  background:#FFC531;color:#10243F;border-radius:999px;
  padding:10px 16px;font-size:15px;font-weight:800;letter-spacing:-.01em;
}
.menu__call svg{width:16px;height:16px}
/* .menu a sets 18px for the drawer's links; the pill is not one of those */
.menu__call:hover{color:#10243F;text-decoration:none}

/* the number, above the footer columns, on every page */
.foot__call{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
  background:#FFC531;color:#10243F;border-radius:999px;
  padding:12px 20px;font-weight:800;font-size:17px;letter-spacing:-.01em;
}
.foot__call svg{width:18px;height:18px}
.foot__call:hover{color:#10243F;text-decoration:none}

/* The slim cabinet on the right of the finder card, headline beside it on the
   left (Fire, 12 Oct: never stretched or squashed).

   The box is driven by HEIGHT, not width: top, bottom and right are set and
   width is auto, so the height comes from the card and aspect-ratio gives the
   width from the photo's own 288x692. Sizing by width was right for the last
   photo at 0.79 and is wrong for this one at 0.416 — 36% of the card would
   be 307px tall on a phone, taller than the card itself. Driven by height it
   lands near 90px wide, which is what a slim cabinet should look like.

   Either way the ratio is the photo's own, so it is never stretched and never
   squashed; audit.js fails the build if the rendered box drifts from the
   file's ratio by more than 0.06. */
.kfind__art{
  position:absolute;z-index:1;pointer-events:none;
  top:12px;bottom:12px;right:16px;
  width:auto;height:auto;aspect-ratio:288 / 692;
  margin:0;border-radius:10px;overflow:hidden;
}
.kfind__art img{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  border-radius:0;max-width:none;
}


/* The finder card no longer carries the machine, so it is a plain card again.
   margin-top is zeroed so the only space above it is main's own 12px flex gap
   — the identical gutter that sits between the two tile rows. That is what
   makes the finder read as part of the same block as the four squares
   instead of a separate section floating below them. */
.kfind{min-height:0;padding:18px;margin-top:0}
/* The photo owns the right column, so the text keeps to the left one. 50% is
   not a round number picked by eye: at 52% the text overlaps the photo at
   430px, and at 48% "Need a key?" wraps to two lines at 360px. 50% is the
   only width that clears the photo at every size and still holds the heading
   on one line from 360 up. audit.js asserts both ends of that. */
/* The cabinet occupies the right of the card at every width, so everything in
   the left column is capped short of it. These come later in the file than the
   .kfind__art rules and would otherwise win. */
.kfind__body,.kfind__search,.kfind .finder-out,.kfind__all{max-width:68%}
@media(min-width:560px){
  .kfind{min-height:0;padding:26px;margin-top:0}
}

/* =====================================================================
   WEBSITE LAYER — added 27 Oct 2026

   Owner: "I need to redesign the website to this design … it has to be
   like a regular website … leave the kiosk.php as is … the main site
   needs to be desktop able." The design is the physical kiosk's own
   livery: navy, one bright yellow, heavy uppercase display type, a
   yellow pill behind the words that matter.

   Everything above this line was built as a phone app, and on a desktop
   it behaved like one: the whole site was capped at 430px in a bordered
   column, the document itself could not scroll (the app box was locked
   to the viewport and .stage scrolled inside it), navigation was a BACK
   ARROW, and a tab bar sat across the bottom of a 27-inch monitor.
   This layer undoes exactly those things and leaves the phone alone.

   css/kiosk.css is untouched: the machine screen stays an app.
   ===================================================================== */

:root{
  --yellow:#FFC20E;        /* the kiosk's yellow, off its panel and buttons */
  --yellow-dk:#E6A900;
  --yellow-ink:#071E3D;    /* navy on yellow: 10.4:1, reads at kiosk distance */
  --line:#1B3A66;          /* hairline on navy */
  --wrap:1180px;           /* the page's measure on a desktop */
}

/* ---- the document scrolls, like a document ------------------------- */
html,body{height:auto}
.app{height:auto;min-height:100dvh;display:block}
.stage{display:block;overflow:visible;min-height:0}
/* .stage was a flex column with a 12px gap; sections now space themselves,
   so anything that relied on that gap gets it back here. */
.stage>*+*{margin-top:12px}

/* ---- header: a navigation bar, not an app bar ---------------------- */
.top{
  position:sticky;top:0;z-index:40;
  height:auto;min-height:var(--header);
  display:flex;align-items:center;gap:18px;
  padding:var(--safe-t) 16px 0;padding-bottom:0;
  background:var(--navy);border-bottom:1px solid var(--line);
}
.top .brand{display:flex;align-items:center;padding:12px 0;flex:none}
.top .brand img{height:30px;width:auto;display:block}
.mainnav{display:none}
.headcall{display:none}
.top .icon-btn{margin-left:auto}

/* ---- mobile drawer: now on every page, so it carries the sections --- */
.menu__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.menu__call{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--yellow);color:var(--yellow-ink);
  font-weight:800;font-size:15px;padding:10px 14px;border-radius:999px;
}
.menu__call svg{width:16px;height:16px}

/* ---- the call button in the tab bar takes the kiosk's yellow -------- */
.tabs .call{
  background:var(--yellow);color:var(--yellow-ink);
  font-size:15px;font-weight:800;letter-spacing:-.01em;
  margin:6px 6px;border-radius:999px;
}

/* ---- display type: the kiosk's voice -------------------------------- */
.display{
  font-size:clamp(30px,6.4vw,58px);line-height:1.02;
  font-weight:900;letter-spacing:-.02em;text-transform:uppercase;
}
/* The yellow bar behind the words that matter, as on the machine's panel.
   box-decoration-break keeps the pill whole when the line wraps on a phone. */
.hl{
  background:var(--yellow);color:var(--yellow-ink);
  padding:.06em .28em;border-radius:.14em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}

/* ---- buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:52px;padding:0 22px;border-radius:999px;
  font-weight:800;font-size:16px;white-space:nowrap;
}
.btn--yellow{background:var(--yellow);color:var(--yellow-ink)}
.btn--yellow:hover{background:var(--yellow-dk)}
.btn--ghost{border:2px solid var(--line);color:#fff}
.btn--ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn svg{width:18px;height:18px}

/* ---- the hero: the kiosk's front panel, as a page ------------------- */
.khero{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0A2A55 0%,var(--navy) 58%);
  border:1px solid var(--line);border-radius:20px;
  padding:26px 20px 86px;
}
/* The yellow sweep across the machine's body. Decorative only. */
.khero{
  background:
    linear-gradient(178.2deg, rgba(0,0,0,0) calc(100% - 42px), var(--yellow) calc(100% - 42px)),
    linear-gradient(160deg,#0A2A55 0%,var(--navy) 58%);
}
.khero>*{position:relative}
.khero p.lede{color:#C7D6E8;font-size:clamp(15px,2.2vw,18px);margin:14px 0 0;max-width:46ch}
.khero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.khero__art{display:none}
.khero__marks{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;
  padding-top:18px;border-top:1px solid var(--line);
  color:#C7D6E8;font-size:14px;font-weight:600;
}
.khero__marks span{display:inline-flex;align-items:center;gap:8px}
.khero__marks svg{width:18px;height:18px;color:var(--yellow)}

/* ---- section rhythm -------------------------------------------------- */
.sec{margin-top:34px}
.sec__head{margin-bottom:14px}
.sec h2{
  font-size:clamp(21px,3.2vw,30px);line-height:1.1;
  font-weight:900;letter-spacing:-.02em;text-transform:uppercase;
}
.sec__head p{color:var(--muted);margin-top:6px;font-size:15px}

/* ---- the two things the machine does, as cards ---------------------- */
.pair{display:grid;gap:12px}
.pair__card{
  position:relative;overflow:hidden;display:block;
  background:var(--paper);color:var(--ink);border-radius:18px;
}
.pair__card img{display:block;width:100%;height:190px;object-fit:cover}
.pair__body{padding:16px 18px 18px}
.pair__body h3{font-size:22px;font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.pair__body p{color:#5B6B82;font-size:15px;margin-top:6px}
.pair__body .go{display:inline-block;margin-top:12px;font-weight:800;color:var(--blue)}
.pair__card:hover .go{text-decoration:underline}

/* ---- numbered steps, side by side on a desktop ---------------------- */
.steps3{display:grid;gap:12px;counter-reset:n}
.steps3 li{
  list-style:none;background:var(--paper);color:var(--ink);
  border-radius:16px;padding:18px;
}
.steps3 li:before{
  counter-increment:n;content:counter(n);
  display:grid;place-items:center;width:34px;height:34px;margin-bottom:10px;
  border-radius:50%;background:var(--yellow);color:var(--yellow-ink);
  font-weight:900;font-size:16px;
}
.steps3 h3{font-size:17px;font-weight:800;letter-spacing:-.01em}
.steps3 p{color:#5B6B82;font-size:15px;margin-top:4px}

/* ---- the call band -------------------------------------------------- */
.band{
  background:var(--yellow);color:var(--yellow-ink);
  border-radius:20px;padding:24px 20px;text-align:center;
}
.band h2{font-size:clamp(22px,3.4vw,32px);font-weight:900;letter-spacing:-.02em;text-transform:uppercase}
.band p{margin-top:8px;font-weight:600;opacity:.82}
.band .btn{margin-top:16px;background:var(--navy);color:#fff}
.band .btn:hover{background:var(--navy2)}

/* =====================================================================
   DESKTOP — from 900px up this stops being a phone
   ===================================================================== */
@media(min-width:820px){
  /* the 430px cage, undone */
  .app{max-width:none;border-left:0;border-right:0}

  .stage{
    max-width:var(--wrap);margin:0 auto;
    padding:28px 32px 72px;
  }
  .stage>*+*{margin-top:0}

  /* header: sections visible, hamburger gone */
  .top{padding:0 32px;min-height:72px;gap:28px}
  .top .brand img{height:38px}
  .mainnav{
    display:flex;align-items:center;gap:26px;margin-left:8px;
    font-size:15px;font-weight:700;color:#C7D6E8;
  }
  .mainnav a{padding:6px 0;border-bottom:2px solid transparent}
  .mainnav a:hover{color:#fff}
  .mainnav a.on{color:var(--yellow);border-bottom-color:var(--yellow)}
  .headcall{
    display:inline-flex;align-items:center;gap:8px;margin-left:auto;
    background:var(--yellow);color:var(--yellow-ink);
    font-weight:800;font-size:16px;padding:11px 18px;border-radius:999px;
  }
  .headcall:hover{background:var(--yellow-dk)}
  .headcall svg{width:17px;height:17px}
  .top .icon-btn{display:none}

  /* the tab bar is a phone pattern; a desktop has the header */
  .tabs{display:none}

  /* hero becomes two columns: words left, the machine right */
  .khero{
    display:grid;grid-template-columns:minmax(0,1fr) 300px;
    align-items:center;gap:40px;padding:52px 48px 92px;
  }
  .khero__art{
    display:block;justify-self:end;
  }
  .khero__art img{display:block;width:auto;height:auto;max-height:520px;
    max-width:100%;border-radius:12px}

  .pair{grid-template-columns:1fr 1fr;gap:20px}
  .pair__card img{height:230px}
  .steps3{grid-template-columns:repeat(3,1fr);gap:20px}
  .sec{margin-top:56px}
  .band{padding:44px}

  /* the homepage's phone tiles make a four-across strip on a desktop */
  .home .grid{grid-template-columns:repeat(4,1fr);gap:20px}

  /* An inner page is prose and a form, not a dashboard: the homepage gets
     the full 1180px, everything else a measure you can read across. */
  .stage:not(.home){max-width:980px}

  /* footer: columns, like every other website's */
  .foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
}

@media(min-width:1180px){
  .khero{grid-template-columns:minmax(0,1fr) 340px;padding:64px 56px 104px}
}

/* ---- the call-to-action is the phone, so it wears the phone's colour --- */
.cta-schedule{
  background:var(--yellow);color:var(--yellow-ink);
  border-radius:999px;font-size:16px;
}
.card a.cta-schedule{color:var(--yellow-ink)}
.cta-schedule:hover{background:var(--yellow-dk)}

/* ---- section headings in the kiosk's voice ---------------------------- */
.card h2{
  font-size:clamp(18px,2.6vw,24px);font-weight:900;
  letter-spacing:-.02em;text-transform:uppercase;
}

/* ---- the chat button was pinned to the edge of the 430px column -------
   `right:calc(50% - 215px + 14px)` put it 201px left of centre, which on a
   phone-width page is the right margin and on a 1440px monitor is the middle
   of the page, floating over the content. It belongs in the corner. */
@media(min-width:560px){
  .assist-fab{right:calc(50% - 215px + 14px)}
}
@media(min-width:900px){
  .assist-fab{right:24px;bottom:24px}
  .foot{padding-bottom:28px}
  /* the finder is a page section now, not a card squeezed beside a cabinet */
  .kfind__body,.kfind__search,.kfind .finder-out,.kfind__all{max-width:none}
  .kfind{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:32px;align-items:center;padding:36px 40px}
  .kfind__art{position:static;grid-column:2;grid-row:1 / span 4;align-self:center;width:100%;height:auto;aspect-ratio:auto;inset:auto}
  .kfind__art img{width:100%;height:auto}
  .kfind__body{grid-column:1}
  .kfind__search,.kfind .finder-out,.kfind__all{grid-column:1}
}

/* ---- location pages: hours table and the kiosk list ------------------- */
.hours{width:100%;border-collapse:collapse;font-size:15px}
.hours th,.hours td{padding:8px 0;border-top:1px solid #E3E9F1;text-align:left}
.hours tr:first-child th,.hours tr:first-child td{border-top:0}
.hours th{font-weight:600;color:#5B6B82;width:46%}
.hours td{font-weight:700}

.kiosklist{list-style:none;margin:8px 0 0;padding:0}
.kiosklist li{border-top:1px solid #E3E9F1}
.kiosklist li:first-child{border-top:0}
.kiosklist a{display:flex;flex-direction:column;gap:2px;padding:12px 0;color:var(--ink)}
.kiosklist b{font-size:16px}
.kiosklist span{font-size:14px;color:#5B6B82}
.kiosklist a:hover b{color:var(--blue)}
@media(min-width:820px){
  .kiosklist{display:grid;grid-template-columns:repeat(3,1fr);gap:0 28px}
  .kiosklist li:nth-child(-n+3){border-top:0}
}

/* ---- a photo of the machine, which stands up ------------------------- */
/* `.hero img` forces 16:9 and covers, which is right for a room and wrong
   for a kiosk: the owner's render is 0.44:1, so cover would show a band of
   its middle. These three pages show the whole machine instead. */
.hero--machine{display:flex;flex-direction:column;align-items:center;padding:14px 0 0}
.hero--machine img{
  aspect-ratio:auto;object-fit:contain;
  width:auto;height:auto;max-height:360px;max-width:100%;
  border-radius:12px;
}
.hero--machine .hero-cap{text-align:center}
@media(min-width:820px){
  .hero--machine img{max-height:440px}
}