/* app.css: the Insure MB app chrome (header, footer), the product picker, the 404 page and the shared components
   the flow screens (flow.css) and the portal (admin.css) build on. Load order on every page:
   /css/site.css (tokens and base, generated from the theme) -> /css/app.css -> the page's own sheet.
   Rules: tokens only, no hex colours here (CLAUDE.md rule 7; new shades are color-mix() of tokens, defined in
   site.css); no style= attributes in markup (the CSP); every state is visible without colour alone.

   CLASS REFERENCE (markup patterns other builders can rely on)

   Layout
     .wrap                 page-width container (1180px, 16px side gutters on phones)
     .stage                centred single column, 720px wide with vertical padding (.stage-narrow: 640px)
     .card                 white panel: border, radius 14px, shadow, padding 20 to 36px (.card-flat: no shadow)
     .stack                vertical rhythm: 16px between direct children
     .muted  .small        --soft text; 14px text
     .visually-hidden      hidden on screen, read by screen readers (.screen-reader-text from the theme also works)
     [hidden]              always display:none, even on elements with their own display rule

   Text
     h1 h2 h3              Montserrat 800 scale (h1 30 to 46px, h2 20 to 24px, h3 17px); add your own size class
     .sub                  lead paragraph (theme, --soft 17px)
     .acc                  the theme's accent word: <h1>Let's quote your <span class="acc">vehicle.</span></h1>
     .pill + .pill-mark    small badge: <span class="pill"><svg class="pill-mark" viewBox="0 0 100 100"
                           aria-hidden="true"><use href="/assets/icons.svg#mbmark-sm"></use></svg>Start here</span>
     .link                 inline text link (blue, underlined). Plain <a> has no styling (theme reset)
     .icon                 any sprite icon (ui.icon(id) adds it); 1em square, colour = currentColor

   Buttons                 <button class="btn btn-blue">Next</button>
     .btn-blue             primary (hover --blue-hover keeps white text at 6.3:1)
     .btn-ghost            secondary, outlined          .btn-white   on dark or blue surfaces
     .btn-text             text-only button (for example "Back" or "Start over" on phones)
     .btn-lg .btn-sm       sizes (48px minimum height by default)      .btn-block   full width
     :disabled, [aria-disabled="true"]   grey, not clickable
     [aria-busy="true"]    a spinner before the label, clicks ignored (set the label to "Sending" yourself)
     .actions              Back/Next row under the answer: <div class="actions"><button class="btn btn-ghost">Back
                           </button><button class="btn btn-blue">Next</button></div>. The first ghost or text button
                           sits left, the primary right; on phones the primary fills the rest of the row

   Fields
     .field                one question field: <div class="field"><label for="postal">Postal code</label>
                           <p class="hint" id="postal-hint">...</p><input id="postal" aria-describedby="postal-hint
                           postal-error"><p class="field-error" id="postal-error"></p></div>
     .field-label          the label style for a <legend> or <span>; .hint helper text under the label
     input select textarea themed (edge 3.58:1, 48px tall, 16px text under 1024px so iOS never zooms)
     [aria-invalid="true"] red edge and ring on input, select, textarea
     .field-error          red message with an alert icon; hidden while empty
     .check                checkbox or radio row: <label class="check"><input type="checkbox"> <span>text</span></label>
     .consent              the theme's consent row (copied in site.css)
     .f-row                two fields side by side, stacked under 561px (theme)
     .input-affix          $ prefix: <div class="input-affix"><span class="affix" aria-hidden="true">$</span><input></div>

   Tiles (whole tile is the hit target)
     .tiles                grid: 1 column under 561px, 2 columns above; .tiles-3 adds a third column from 861px;
                           .tiles-pair = always 2 columns (yes/no); .tiles-list = always 1 column
     .tile                 <button type="button" class="tile" role="radio" aria-checked="false">
                             <span class="tile-ic"><svg class="icon">...</svg></span>      (optional icon)
                             <span class="tile-body"><span class="tile-label">Owned</span>
                               <span class="tile-sub">Paid off</span></span>                (sub optional)
                             <span class="tile-mark" aria-hidden="true"></span></button>
                           Put role="radiogroup" (or role="group" for multi) and aria-labelledby on the .tiles parent.
                           Multi-select: role="checkbox" on the tile (the mark becomes a square with a check).
                           Selected = [aria-checked="true"] or [aria-pressed="true"] or .is-selected or a checked
                           <input> inside: blue border, tint fill, filled mark (3:1 or better against the rest state).
                           Link tiles (the picker): <a class="tile"> with <span class="tile-go"> (a chevron) instead
                           of the mark. .tile-stack = icon on top, centred text.

   Messages
     .notice               inline box: .notice-info | .notice-ok | .notice-error, optional <svg class="notice-ic">
     .toast                ui.toast(message, "info"|"ok"|"error") creates and drives it; never add the markup
     .loading + .spinner   quiet loading row: <p class="loading"><span class="spinner" aria-hidden="true"></span>Loading</p>

   People
     .avatars              overlapping round broker photos: <span class="avatars"><img ...><img ...></span>

   Chrome (static markup copied into every public page; tests/unit/foundation.test.mjs checks it stays identical)
     .skip-link  .site-header  .logo  .nav-phone  .site-footer  .foot-*
     Contact details are filled by ui.js from config.js: data-contact="phone|tel|email|mailto|languages|office". */

/* ---------- base, for the app ---------- */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
.wrap{width:min(1180px,100% - 32px)}
h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
h2{font-size:clamp(20px,2.2vw,24px);font-weight:800;letter-spacing:-.01em}
h3{font-size:17px;font-weight:800}
.icon{display:inline-block;width:1em;height:1em;flex:none;fill:currentColor;vertical-align:middle}
:where(h1,h2,h3,h4,p,div,section,main,legend)[tabindex="-1"]:focus{outline:none}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.link{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.link:hover{color:var(--blue-hover);text-decoration-thickness:2px}
.muted{color:var(--soft)}
.small{font-size:14px}
.stack > * + *{margin-top:16px}
::selection{background:var(--tint);color:var(--ink)}

/* ---------- header ---------- */
.site-header{position:relative;z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.site-header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:74px}
.logo{display:inline-flex;align-items:center;border-radius:var(--rs)}
.logo img{height:40px;width:auto}
.nav-phone{display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:4px 4px 4px 14px;color:var(--ink)}
.nav-phone-text{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25}
.nav-phone-label{font-size:13px;font-weight:700;color:var(--soft)}
.nav-phone-num{font-family:var(--fh);font-size:16px;font-weight:800;color:var(--blue);white-space:nowrap}
.nav-phone-num:empty{display:none}
.nav-phone-ic{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:50%;background:var(--blue);color:var(--white);transition:background .2s}
.nav-phone-ic .icon{width:19px;height:19px}
.nav-phone:hover .nav-phone-ic{background:var(--blue-hover)}
.nav-phone:hover .nav-phone-num{text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){
  .site-header-in{min-height:64px}
  .nav-phone{padding:0}
  .nav-phone-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .nav-phone-ic{width:44px;height:44px}
}
@media(max-width:420px){.logo img{height:32px}}

/* ---------- footer ---------- */
.site-footer{margin-top:auto;background:var(--deep);color:var(--foot-text);font-size:14.5px}
.site-footer :focus-visible{outline-color:var(--white)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px 56px;padding:clamp(36px,5vw,52px) 0 28px}
.foot-brand img{height:38px;width:auto}
.foot-brand p{margin-top:14px;line-height:1.65;max-width:60ch}
.foot-h{font-family:var(--fh);font-size:14.5px;font-weight:800;color:var(--white);margin-bottom:10px}
.foot-list{display:grid;gap:4px;line-height:1.55}
.foot-list a{color:var(--foot-link);font-weight:700}
.foot-list a:hover,.foot-legal a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;padding:18px 0 26px;border-top:1px solid color-mix(in srgb,var(--foot-text) 18%,transparent);font-size:13px;color:var(--foot-muted)}
.foot-legal{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-legal a{color:var(--foot-link)}
@media(max-width:860px){.foot-top{grid-template-columns:1fr}}
@media(max-width:1023px){.foot-list a,.foot-legal a{display:inline-block;padding:6px 0}}

/* ---------- layout ---------- */
.stage{width:min(720px,100% - 32px);margin:0 auto;padding:clamp(24px,5vw,56px) 0 clamp(40px,6vw,72px)}
.stage-narrow{width:min(640px,100% - 32px)}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:clamp(20px,4vw,36px)}
.card-flat{box-shadow:none}
.card + .card{margin-top:16px}

/* ---------- buttons (extends the theme's .btn) ---------- */
.btn{position:relative;min-height:48px;line-height:1.25;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent}
.btn .icon{width:14px;height:14px}
.btn-blue{color:var(--white)}
.btn-blue:hover{background:var(--blue-hover)}
.btn-ghost:hover{color:var(--blue-hover);border-color:var(--blue-hover)}
.btn-white:hover{color:var(--blue-hover)}
.btn-text{background:none;border:0;box-shadow:none;padding:12px 8px;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.btn-text:hover{color:var(--blue-hover);text-decoration-thickness:2px}
.btn-lg{min-height:54px}
.btn-sm{min-height:40px;padding:8px 16px;font-size:14px}
.btn-block{display:flex;width:100%}
.btn:active{transform:none}
.btn:disabled,.btn[aria-disabled="true"]{cursor:not-allowed;background:var(--line);color:var(--soft);border-color:var(--line);box-shadow:none;transform:none}
.btn-ghost:disabled,.btn-ghost[aria-disabled="true"],.btn-text:disabled,.btn-text[aria-disabled="true"]{background:var(--white);color:var(--soft)}
.btn-text:disabled,.btn-text[aria-disabled="true"]{background:none}
.btn[aria-busy="true"]{cursor:progress;pointer-events:none}
.btn[aria-busy="true"]::before{content:"";width:16px;height:16px;flex:none;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:app-spin .8s linear infinite}
.actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;margin-top:28px}
.actions > .btn-ghost:first-child,.actions > .btn-text:first-child{margin-right:auto}
@media(max-width:560px){.actions > .btn-blue{flex:1 1 auto}}

/* ---------- fields (extends the theme's inputs) ---------- */
.field{margin-bottom:18px}
.field > label,.field-label{display:block;margin-bottom:6px;font-weight:800;font-size:14.5px;color:var(--ink)}
.hint{display:block;margin:-2px 0 8px;color:var(--soft);font-size:14px;line-height:1.5}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),select,textarea{min-height:48px;border-color:var(--edge)}
input::placeholder,textarea::placeholder{color:var(--soft);opacity:1}
@media(hover:hover){input:not([type=checkbox]):not([type=radio]):hover,select:hover,textarea:hover{border-color:var(--soft)}}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--red-text);box-shadow:0 0 0 3px color-mix(in srgb,var(--red-text) 16%,transparent)}
input:disabled,select:disabled,textarea:disabled{cursor:not-allowed;background:var(--tint-2);color:var(--soft);border-color:var(--line)}
input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0;flex:none;margin:0;padding:0;border:0;accent-color:var(--blue);cursor:pointer}
.field-error{display:flex;align-items:flex-start;gap:8px;margin-top:8px;color:var(--red-text);font-size:14.5px;font-weight:700;line-height:1.45}
.field-error:empty{display:none}
.field-error::before{content:"";flex:none;width:18px;height:18px;margin-top:1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.6' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.6' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat}
.check{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;line-height:1.5;cursor:pointer}
.check input{margin-top:2px}
.input-affix{position:relative;display:flex;align-items:center}
.input-affix .affix{position:absolute;left:14px;font-weight:800;color:var(--soft);pointer-events:none}
.input-affix input{padding-left:30px}

/* ---------- tiles ---------- */
.tiles{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:561px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:861px){.tiles.tiles-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tiles.tiles-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.tiles.tiles-list{grid-template-columns:minmax(0,1fr)}
.tiles > li{display:flex;min-width:0}
.tile{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:14px 16px;
  font:inherit;text-align:left;color:var(--ink);text-decoration:none;cursor:pointer;
  background:var(--white);border:2px solid var(--line);border-radius:12px;box-shadow:var(--sh);
  transition:border-color .18s,background-color .18s,box-shadow .18s,transform .18s var(--ease);-webkit-tap-highlight-color:transparent}
@media(hover:hover){.tile:hover{border-color:var(--blue-3);background:var(--tint-2);box-shadow:var(--shh);transform:translateY(-2px)}}
.tile:focus-visible,.tile:has(> input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.tile:active{transform:none}
.tile > input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tile-ic{display:grid;place-items:center;width:52px;height:52px;flex:none;border-radius:12px;background:var(--tint);color:var(--blue)}
.tile-ic .icon{width:32px;height:32px}
.tile-ic .icon[viewBox="0 0 24 28"]{width:24px;height:28px}
.tile-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;overflow-wrap:break-word;hyphens:auto}
.tile-label{font-family:var(--fh);font-size:16.5px;font-weight:800;line-height:1.25}
.tile-sub{color:var(--soft);font-size:14px;line-height:1.4}
.tile-go{display:grid;place-items:center;flex:none;color:var(--blue)}
.tile-go .icon{width:14px;height:14px;transition:transform .2s var(--ease)}
@media(hover:hover){.tile:hover .tile-go .icon{transform:translateX(3px)}}
.tile-mark{position:relative;display:grid;place-items:center;width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--edge);background:var(--white);transition:border-color .18s,background-color .18s}
.tile[role="checkbox"] .tile-mark{border-radius:6px}
.tile[aria-checked="true"],.tile[aria-pressed="true"],.tile.is-selected,.tile:has(> input:checked){border-color:var(--blue);background:var(--tint);box-shadow:inset 0 0 0 1px var(--blue)}
.tile[aria-checked="true"] .tile-mark,.tile[aria-pressed="true"] .tile-mark,.tile.is-selected .tile-mark,.tile:has(> input:checked) .tile-mark{border-color:var(--blue);background:var(--blue)}
.tile[aria-checked="true"] .tile-mark::after,.tile[aria-pressed="true"] .tile-mark::after,.tile.is-selected .tile-mark::after,.tile:has(> input:checked) .tile-mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--white)}
.tile[role="checkbox"][aria-checked="true"] .tile-mark::after{width:14px;height:14px;border-radius:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.tile:disabled,.tile[aria-disabled="true"]{cursor:not-allowed;opacity:.55;box-shadow:none;transform:none}
.tile-stack{flex-direction:column;justify-content:center;text-align:center;gap:10px;padding:20px 14px}
.tile-stack .tile-body{align-items:center;flex:none}
.tile-stack .tile-mark{position:absolute;top:10px;right:10px}

/* ---------- messages ---------- */
.notice{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-left-width:4px;border-radius:10px;background:var(--tint-2);color:var(--ink);font-size:15px;line-height:1.55}
.notice-ic{width:20px;height:20px;flex:none;margin-top:2px;color:var(--blue)}
.notice-info{border-left-color:var(--blue)}
.notice-ok{border-left-color:var(--green)}
.notice-ok .notice-ic{color:var(--green-text)}
.notice-error{background:var(--white);border-color:var(--red-text)}
.notice-error .notice-ic{color:var(--red-text)}
.notice p + p{margin-top:6px}
.notice b{font-weight:800}
.toast{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:1000;width:max-content;max-width:min(460px,calc(100% - 32px));
  padding:12px 18px 12px 46px;border-radius:10px;background:var(--navy);color:var(--white);box-shadow:var(--shh);
  font-size:15px;font-weight:700;line-height:1.45;opacity:0;pointer-events:none;transform:translate(-50%,16px);
  transition:opacity .2s,transform .25s var(--ease)}
.toast.is-shown{opacity:1;transform:translate(-50%,0)}
.toast::before{content:"";position:absolute;left:16px;top:50%;width:20px;height:20px;margin-top:-10px;background:var(--blue-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.4' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='7.4' r='1.3'/%3E%3C/svg%3E") center/contain no-repeat}
.toast[data-kind="ok"]::before{background:var(--green);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.toast[data-kind="error"]::before{background:var(--red);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.6' r='1.3'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 7v6' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='16.6' r='1.3'/%3E%3C/svg%3E")}
.spinner{display:inline-block;width:20px;height:20px;flex:none;border-radius:50%;border:2.5px solid var(--tint);border-top-color:var(--blue);animation:app-spin .8s linear infinite}
.loading{display:flex;align-items:center;gap:12px;color:var(--soft);font-weight:700}
@keyframes app-spin{to{transform:rotate(360deg)}}
@keyframes app-fade-in{from{opacity:0}to{opacity:1}}

/* ---------- people ---------- */
.avatars{display:inline-flex;flex:none}
.avatars img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:center 18%;border:2px solid var(--white);box-shadow:var(--sh);background:var(--tint)}
.avatars img + img{margin-left:-12px}

/* ---------- pill mark (the theme's pill draws it with a data URI; the app uses the sprite) ---------- */
.pill-mark{width:22px;height:22px;flex:none;color:var(--navy)}

/* ---------- product picker (/) ---------- */
.picker{background:linear-gradient(180deg,var(--tint) 0,var(--tint-2) 380px,var(--white) 760px)}
.picker-in{padding:clamp(32px,6vw,72px) 0 clamp(44px,6vw,84px)}
.picker-head{max-width:760px;margin:0 auto clamp(26px,4vw,40px);text-align:center}
.picker-head .sub{margin-left:auto;margin-right:auto}
.picker-grid{max-width:1000px;margin:0 auto}
.picker-grid:empty{min-height:280px}
@media(min-width:561px) and (max-width:860px){.picker-grid > li:last-child:nth-child(odd){grid-column:1 / -1}}
.tile-product{min-height:88px;padding:18px}
.picker-line{display:block;max-width:1000px;margin:0 auto 16px}
.assure{max-width:1000px;margin:30px auto 0;color:var(--ink);font-size:15px;font-weight:700;text-align:center}
.assure .icon{width:15px;height:17px;margin:-3px 8px 0 0;color:var(--green)}
.picker-call{display:flex;align-items:center;justify-content:center;gap:14px;max-width:640px;margin:16px auto 0;color:var(--soft);font-size:15px}
.picker-call p{max-width:52ch}
.picker-call .avatars:empty{display:none}
.picker-noscript{max-width:1000px;margin:0 auto}
.picker-in:has(noscript > *) .picker-grid{display:none}

/* ---------- flow shells: the quiet loading state page-flow.js replaces ---------- */
.flow-root{background:linear-gradient(180deg,var(--tint-2) 0,var(--white) 480px)}
.boot-card{animation:app-fade-in .3s ease .4s both}
.boot-slow{max-height:0;margin-top:0;overflow:hidden;visibility:hidden;color:var(--soft);font-size:15px;animation:app-boot-slow 0s linear 12s forwards}
@keyframes app-boot-slow{to{max-height:none;margin-top:14px;overflow:visible;visibility:visible}}
.flow-root:has(noscript > *) .boot-card{display:none}
/* safety net: page-flow.js should replace everything inside #flow, but if it only appends, the boot card still goes */
.flow-root:has(> :not(.stage):not(noscript)) .boot-card,.flow-root .stage:has(> :not(.boot-card):not(noscript)) .boot-card{display:none}
.noscript-card h1{font-size:clamp(24px,3vw,30px)}
.noscript-card p{margin-top:10px;color:var(--soft)}

/* ---------- 404 ---------- */
.notfound{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--tint) 0,var(--tint-2) 100%)}
.notfound-in{position:relative;padding:clamp(56px,9vw,120px) 0}
.notfound h1{max-width:16ch}
.notfound .sub{font-size:17.5px;max-width:56ch}
.notfound-wm{position:absolute;right:-60px;top:30px;width:min(440px,46vw);color:var(--blue);opacity:.07;pointer-events:none}
.notfound-wm svg{display:block;width:100%;height:auto}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
@media(max-width:560px){.cta-row .btn{width:100%}.notfound-wm{width:150px;right:-44px;top:14px}}

/* ---------- less movement, print ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .tile:hover,.btn:hover,.btn-blue:hover,.btn-white:hover{transform:none}
}
@media print{
  .skip-link,.nav-phone,.toast{display:none!important}
  .site-footer{background:none;color:var(--ink)}
  .foot-list a,.foot-legal a{color:var(--ink)}
}