/* Nordalight · design system, version 3: the house at blue hour
   Every page stands in front of one house at dusk (.world): a live scene with depth, drawn by
   world.js, with the still of it underneath. What a visitor reads and buys sits on opaque white
   panels that float in front of it, the way the nav does. Neutrals are the cool blue-black of
   that dusk; the one color is its sky. Warm light appears only where a light is on. */
/* Arial sized to Hanken Grotesk (its width, ascent and descent, measured), for the moment before the face arrives:
   the text then takes the same room, and nothing moves when it swaps in */
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial"),local("ArialMT");font-weight:400 500;size-adjust:100.9%;ascent-override:99.1%;descent-override:29.7%;line-gap-override:0%}
@font-face{font-family:"Hanken Grotesk Fallback";src:local("Arial Bold"),local("Arial-BoldMT");font-weight:600 800;size-adjust:94.8%;ascent-override:105.5%;descent-override:31.6%;line-gap-override:0%}
:root{
  /* panels, cards, wells */
  --bg:#FFFFFF; --bg-2:#F2F4F7; --bg-3:#E3E7EE; --surface:#FFFFFF;
  /* ink: the shade side of the house at dusk */
  --ink:#0F1622; --ink-2:#3D4657; --ink-3:#5C6577;
  --line:rgba(15,22,34,.09); --line-2:rgba(15,22,34,.16); --line-3:rgba(15,22,34,.34);
  --edge:rgba(15,22,34,.46);
  /* dark oak: the one color that acts (buttons, the cart, the chat); the footer's warm black is the night behind the pages */
  --dusk:#6E4B2E; --dusk-2:#80593A; --sky:#80593A; --haze:#EEEAE4;
  --light:#FFD28A;                      /* a lit window: only where a light is on */
  --star:#FBBC04; --star-0:#DADCE0;     /* a rating's stars: filled, and not yet */
  --action:var(--dusk); --action-2:var(--dusk-2);
  --accent:var(--ink); --accent-2:#8B94A5; --heart:var(--ink); --glow:var(--light);
  --danger:#B23A2A;
  --night:#1B1A18; --on-dark:#F4F6FA; --on-dark-2:rgba(244,246,250,.84); --on-dark-line:rgba(244,246,250,.3);
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.45,.05,.2,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1);
  --f-display:'Hanken Grotesk','Hanken Grotesk Fallback','Helvetica Neue',Arial,sans-serif;
  --f-body:'Hanken Grotesk','Hanken Grotesk Fallback','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(16px,4vw,64px);
  --wrap:1360px;
  /* panels: the gap the scene shows through, the room inside, the widest a panel grows */
  --gap:12px; --pad:clamp(20px,3.6vw,56px); --panel:1480px;
  /* type roles: 400 reads, 500 names, 600 leads and counts */
  --t-title:600 17px/1.35 var(--f-body);
  --t-small:400 14.5px/1.5 var(--f-body);
  --t-caption:400 13px/1.45 var(--f-body);
  --t-label:500 13.5px/1.3 var(--f-body); --ls-label:0;
  --t-ui:600 15px/1 var(--f-body);
  --t-ui-sm:500 14.5px/1 var(--f-body);
  --t-data:600 15px/1.2 var(--f-body);
  --t-readout:600 clamp(21px,1.8vw,25px)/1.12 var(--f-display);
  /* corners by role */
  --r-xs:8px; --r-field:14px; --r-media:20px; --r-pop:18px; --r-panel:24px; --r-sheet:32px; --r-pill:999px;
  --radius:var(--r-media);
  /* depth: only what floats over the scene casts a shadow */
  --shadow-float:0 1px 2px rgba(6,12,24,.1),0 22px 54px -22px rgba(6,12,24,.46);
  --shadow-pop:0 0 0 1px var(--line),0 18px 44px -18px rgba(6,12,24,.3);
  --shadow-1:none; --shadow-2:0 18px 44px -22px rgba(6,12,24,.28);
  --shadow-knob:0 1px 3px rgba(6,12,24,.22);
  --ring:0 0 0 2px var(--ink);
}
/* the same roles on a dark block */
[data-theme="night"]{
  --bg:#1B1A18; --bg-2:#26241F; --bg-3:#33302B; --surface:#26241F;
  --ink:#F4F6FA; --ink-2:rgba(244,246,250,.82); --ink-3:rgba(244,246,250,.64);
  --line:rgba(244,246,250,.1); --line-2:rgba(244,246,250,.2); --line-3:rgba(244,246,250,.42); --edge:rgba(244,246,250,.5);
  --action:#F4F6FA; --action-2:#FFFFFF;
  --accent:#F4F6FA; --accent-2:rgba(244,246,250,.55); --heart:#F4F6FA; --danger:#FF9C8A;
  --shadow-pop:0 0 0 1px var(--line-2),0 24px 48px -20px rgba(0,0,0,.7);
  --shadow-knob:0 1px 3px rgba(0,0,0,.5);
  --ring:0 0 0 2px #F4F6FA;
  color:var(--ink);
}
*{box-sizing:border-box}
html{overflow-x:hidden;overflow-x:clip;background:var(--night);-webkit-text-size-adjust:100%;scrollbar-color:var(--line-3) transparent}
body{overflow-x:hidden;overflow-x:clip;margin:0;min-height:100vh;color:var(--ink);font:400 16px/1.6 var(--f-body);
  background:var(--night);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-dark :focus-visible,.page-head :focus-visible{outline-color:var(--on-dark)}
[hidden]{display:none!important}
::selection{background:var(--dusk);color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;transition:top .3s var(--ease-out)}
.skip:focus{top:16px}

/* ============ the scene and the panels ============ */
/* one house at dusk stands behind every page: the still, and over it the live scene with depth */
.world{position:fixed;left:0;top:0;z-index:0;width:100%;height:100vh;height:100lvh;overflow:hidden;background:var(--night);pointer-events:none}
.world > img,.world > canvas,.world > picture,.world > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.world > canvas{opacity:0;transition:opacity .7s var(--ease-soft)}
.world.live > canvas{opacity:1}
/* dusk settles over the still where reading happens; the live scene dims itself */
.world::after{content:"";position:absolute;inset:0;background:rgb(20 19 17);opacity:var(--veil,.34)}
.world.live::after{opacity:0;transition:opacity .7s var(--ease-soft)}
/* a light that stands in the house opens its page on that place: the place's still, known before anything is drawn */
.has-place{--veil:.12}
.has-place .world{background:var(--night) var(--place) var(--place-x,50%) 50%/cover no-repeat}
.has-place .world > img,.has-place .world > picture{display:none}
.page{position:relative;z-index:2}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
/* where reading and buying happen: an opaque panel in front of the scene */
.panel{position:relative;width:calc(100% - 2 * var(--gap));max-width:var(--panel);margin:0 auto var(--gap);padding:clamp(30px,4.2vw,60px) var(--pad);border-radius:var(--r-sheet);background:var(--bg);color:var(--ink)}
.panel .wrap{max-width:none;margin:0;padding:0}
.panel-row{display:grid;gap:var(--gap);width:calc(100% - 2 * var(--gap));max-width:var(--panel);margin:0 auto var(--gap)}
.panel-row > .panel{width:auto;max-width:none;margin:0}
/* the same box without the paper: for words that stand on the scene itself */
.inset{width:calc(100% - 2 * var(--gap));max-width:var(--panel);margin:0 auto;padding:0 var(--pad)}
main{display:block;min-height:70vh}
section{position:relative}

/* ============ type: one family; 600 leads, 500 names, 400 reads ============ */
.display{margin:0;font:600 clamp(40px,5.4vw,84px)/1 var(--f-display);letter-spacing:-.04em;text-wrap:balance}
.h1{margin:0;font:600 clamp(30px,3.3vw,48px)/1.06 var(--f-display);letter-spacing:-.034em;text-wrap:balance}
.h2{margin:0;font:600 clamp(26px,2.7vw,40px)/1.08 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.h3{margin:0;font:600 clamp(19px,1.5vw,22px)/1.22 var(--f-display);letter-spacing:-.018em}
.display em,.h1 em,.h2 em,.h3 em{font-style:normal;color:inherit}
.lede{margin:0;max-width:52ch;color:var(--ink-2);font-size:clamp(16px,1.15vw,17.5px);line-height:1.55}
/* a small name for a group of things: plain words, no capitals */
.kicker,.label{display:block;margin:0;font:var(--t-label);letter-spacing:0;text-transform:none;color:var(--ink-3)}
.lamp-dot{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ pictograms: the store's own set, solid ink (tools/icons.py) ============ */
.ic{flex:none;width:22px;height:22px}

/* what sits on the scene or on a photo */
.on-dark{color:var(--on-dark)}
.on-dark .kicker,.on-dark .label{color:var(--on-dark-2)}

/* ============ nav: a bar that floats in front of the scene ============ */
.nav{position:fixed;top:var(--gap);left:var(--gap);right:var(--gap);z-index:50;display:flex;align-items:center;gap:20px;height:60px;max-width:var(--panel);margin:0 auto;padding:0 9px 0 22px;
  border-radius:20px;background:var(--bg);color:var(--ink);box-shadow:var(--shadow-float)}
.brand{position:relative;display:block;flex:none;height:22px}
.brand::after{content:"";position:absolute;inset:-6px -4px}                    /* a 34px target around the 22px logo */
.brand img{height:22px;width:auto}
.brand .logo-light{display:none}
.links{display:flex;align-self:stretch;gap:2px;margin:0 auto;padding:0;list-style:none}
.links > li{display:flex;align-items:center}
.links > li > a{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 13px;border-radius:var(--r-pill);font:500 15px/1 var(--f-body);color:var(--ink);transition:background-color .16s var(--ease-soft)}
.links > li > a:hover,.has-menu.open > a{background:var(--bg-2)}
.has-menu .chev{width:10px;height:7px;color:var(--ink-3);transition:transform .25s var(--ease-out)}
.has-menu.open .chev{transform:rotate(180deg)}

/* menus: a card that opens under the bar */
.mega{position:absolute;left:0;right:0;top:calc(100% + 8px);padding:26px 26px 28px;border-radius:var(--r-panel);background:var(--bg);box-shadow:var(--shadow-float);color:var(--ink);opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .14s var(--ease-out),transform .14s var(--ease-out),visibility 0s linear .14s}
.has-menu.open .mega{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .2s var(--ease-out),transform .24s var(--ease-out)}
/* the bar's own gap would close a menu on the way down to it */
.mega::before,.drop::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.mega-in{position:relative;display:grid;grid-template-columns:minmax(0,1.35fr) repeat(2,minmax(0,.62fr));gap:clamp(18px,2vw,28px)}
.mega-links{padding:6px 0 0 6px}
.mega-links ul{columns:2;column-gap:36px;margin:14px 0 22px;padding:0;list-style:none}
.mega-links li{break-inside:avoid}
/* the name under the pointer comes forward and its neighbours in the column follow a little, so
   moving down the list sends a wave along it (shell.js sets --w); the link itself stays put */
.mega-links li a{display:block;padding:7px 0;font:500 18px/1.3 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.mega-links li a span{display:inline-block;transform-origin:0 50%;transform:translateX(calc(var(--w,0) * 14px)) scale(calc(1 + var(--w,0) * .07));transition:transform .26s var(--ease-out)}
.mega-links ul.kb a span{transition:none}             /* from the keyboard the wave is simply there */
.mega-links li a:focus-visible{outline:none}
.mega-links li a:focus-visible span{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .mega-links li a span{transform:none;transition:none}
  .mega-links li a:hover{color:var(--ink-3)}            /* without motion, the name under the pointer only pales */
}
.mega-card{position:relative;display:block;height:clamp(230px,24vw,310px);border-radius:var(--r-media);overflow:hidden;background:var(--bg-2);isolation:isolate}
.mega-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.mega-card::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(180deg,rgba(8,14,26,0),rgba(8,14,26,.62));pointer-events:none}
.mega-card > span{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;color:#fff;font:600 15px/1.25 var(--f-body);transition:opacity .2s var(--ease-soft) .1s}
@media (hover:hover) and (pointer:fine){.mega-card:hover img{transform:scale(1.04)}}
/* with the pointer or the keyboard on a name, each card shows one of its lights (shell.js, from tools/menu_picks.py):
   it comes in over what the card showed once its photo is in, and the house returns when the pointer leaves the names.
   The photos are rooms of their own, so they fill the card like the house does, under the same shade */
.mc-face{position:absolute;inset:0;z-index:2;opacity:0;transform:scale(1.02);transition:opacity .2s var(--ease-soft),transform .32s var(--ease-out)}
.mc-face.on{opacity:1;transform:none}
.mc-face::after{content:"";position:absolute;inset:36% 0 0;background:linear-gradient(180deg,rgba(8,14,26,0),rgba(8,14,26,.46) 50%,rgba(8,14,26,.74));pointer-events:none}
.mc-cap{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:grid;gap:3px;color:#fff}
.mc-face.out .mc-cap,.mega-card.picked > span{opacity:0;transition:opacity .1s var(--ease-soft)}   /* the words going out leave first, so two captions never cross */
.mc-kick{font:var(--t-caption);color:var(--on-dark-2)}
.mc-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font:600 15px/1.3 var(--f-body)}
.mc-price{display:flex;gap:6px;align-items:baseline;font:500 15px/1.2 var(--f-body);font-variant-numeric:tabular-nums}
.mc-price span{color:var(--on-dark-2);font-weight:400}
@media (prefers-reduced-motion:reduce){.mc-face{transform:none}.mc-face,.mc-face.out .mc-cap,.mega-card > span,.mega-card.picked > span{transition:none}}
.links > li.has-menu:last-child{position:relative}
.drop{position:absolute;top:calc(100% + 8px);left:50%;min-width:250px;padding:10px 10px 12px;border-radius:var(--r-pop);background:var(--bg);box-shadow:var(--shadow-float);color:var(--ink);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);pointer-events:none;transition:opacity .14s var(--ease-out),transform .14s var(--ease-out),visibility 0s linear .14s}
.has-menu.open .drop{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto;transition:opacity .2s var(--ease-out),transform .24s var(--ease-out)}
.drop ul{margin:0;padding:0;list-style:none}
.drop li a{display:block;padding:9px 12px;border-radius:10px;font:500 15px/1.3 var(--f-body);color:var(--ink);transition:background-color .16s var(--ease-soft)}
.drop li a:hover{background:var(--bg-2)}
.drop-note{margin:8px 0 0;padding:12px 12px 2px;border-top:1px solid var(--line);font:var(--t-caption);color:var(--ink-3)}
.drop-note a{color:var(--ink-2)}
.tools{display:flex;align-items:center;gap:2px;flex:none}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:none;color:inherit;cursor:pointer;transition:background-color .16s var(--ease-soft),transform .16s var(--ease-out)}
.icon-btn:hover{background:var(--bg-2)}
.icon-btn:active{transform:scale(.94)}
.icon-btn svg{width:22px;height:22px}
.cart-pill{display:inline-flex;align-items:center;gap:8px;height:42px;margin-left:6px;padding:0 8px 0 16px;border-radius:var(--r-pill);background:var(--action);color:#fff;font:600 14.5px/1 var(--f-body);
  transition:background-color .16s var(--ease-soft),transform .16s var(--ease-out)}
.cart-pill:hover{background:var(--action-2)}
.cart-pill:active{transform:scale(.97)}
.cart-pill .ic{width:18px;height:18px}
.cart-pill .count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);font:600 13px/1 var(--f-body);font-variant-numeric:tabular-nums}
.menu-btn{display:none}

/* search: a sheet over everything */
.search{position:fixed;inset:0;z-index:80;display:grid;place-items:start center;padding:18vh var(--gutter) 0;background:var(--bg);
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease-out),visibility 0s linear .16s}
.search.open{opacity:1;visibility:visible;transition:opacity .2s var(--ease-out)}
.search form{width:min(760px,100%)}
.search label{display:flex;margin-bottom:12px}
.search input[type=search]{width:100%;padding:12px 0 16px;border:0;border-bottom:2px solid var(--line-2);background:none;color:var(--ink);font:600 clamp(28px,3.8vw,46px)/1.15 var(--f-display);letter-spacing:-.03em;outline:none;border-radius:0}
.search input[type=search]:focus{border-color:var(--ink)}
.search input::placeholder{color:var(--line-3)}
.search .hints{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.search .close{position:absolute;top:21px;right:max(21px,calc(var(--gutter) - 10px))}

/* phone menu */
.drawer{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;gap:2px;padding:0 var(--gutter) 40px;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transition:opacity .16s var(--ease-out),visibility 0s linear .16s}
.drawer.open{opacity:1;visibility:visible;transition:opacity .2s var(--ease-out)}
.dr-top{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;height:76px;margin:0 calc(-1 * var(--gutter)) 12px;padding:0 calc(var(--gutter) - 8px) 0 var(--gutter);background:var(--bg)}
.dr-top .brand img{height:22px}
.drawer > a,.dr-group > summary{padding:6px 0;font:600 28px/1.3 var(--f-display);letter-spacing:-.025em;color:var(--ink)}
.dr-group > summary{display:flex;align-items:center;justify-content:space-between;list-style:none;cursor:pointer}
.dr-group > summary::-webkit-details-marker{display:none}
.dr-group .chev{width:14px;height:9px;color:var(--ink-3);transition:transform .25s var(--ease-out)}
.dr-group[open] .chev{transform:rotate(180deg)}
.dr-sub{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:2px 0 14px}
.drawer .dr-sub a{padding:10px 0;font:500 16px/1.35 var(--f-body);color:var(--ink-2)}
.drawer .small{margin-top:auto;padding-top:24px;font:var(--t-small);color:var(--ink-3)}

/* ============ the walk: the home page opens on the house at dusk, and walks through it light by light ============ */
/* the opening is a photograph of the house: its words stand white on a shade laid over the picture. At each stop the
   words stand on paper beside the picture, with the light's own card under them */
.walk{position:relative;--ground:#DCC5B2;--paper:rgba(251,248,243,.95)}
.world[data-scene="house"]{background:#DCC5B2}
.world[data-scene="house"]::after{opacity:var(--veil,0)}                 /* the house is lit: its still is not dimmed at the top */
.walk-stage{position:relative;color:var(--ink)}
.walk .band{color:var(--on-dark)}
.walk .band .kicker{margin:0 0 16px;color:var(--on-dark-2)}
.walk .band .sub{color:var(--on-dark-2)}
.walk .band .link-arrow{color:var(--on-dark)}
.walk .band .display{margin:0;font-size:clamp(44px,5vw,84px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.walk .sub{margin:20px 0 0;max-width:36ch;font:400 clamp(17px,1.3vw,20px)/1.5 var(--f-body);color:var(--ink-2)}
.band .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.stops{margin:0;padding:0;list-style:none}
/* the place, numbered, then the words for its light */
.stop-at{display:flex;align-items:center;gap:10px;margin:0 0 12px;color:var(--ink-3);font:var(--t-label)}
.stop-at .num{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 8px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font:600 12px/1 var(--f-body);letter-spacing:.02em}
.stop-say .display{margin:0}
.stop-also{margin:12px 0 0;color:var(--ink-2);font:var(--t-small)}
.stop-also a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.stop-also a:hover{text-decoration-color:currentColor}}
.stop-say .link-arrow{margin-top:16px}
/* a light of the catalogue, as the card that comes up at its stop: the real photo, the name, the price */
.stop-card{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:start;padding:12px;border-radius:var(--r-panel);background:var(--bg);color:var(--ink);box-shadow:var(--shadow-float)}
.sc-ph{display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--bg-2)}
.sc-ph img{width:100%;height:100%;object-fit:cover}
.sc-b{display:grid;gap:9px;min-width:0;padding:2px 6px 2px 0}
.sc-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0}
.sc-rate{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:-3px 0 0}
.sc-rate .rating{--rt:16px}
.sc-rate .rated{gap:6px}
.sc-rate .rated a{position:relative;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.sc-rate .rated a::after{content:"";position:absolute;inset:-14px -8px}   /* a finger-sized target around the short line */
@media (hover:hover) and (pointer:fine){.sc-rate .rated a:hover{color:var(--ink);text-decoration-color:currentColor}}
/* one buyer's words, along the foot of the card: the face, the headline, the name */
.sc-say{grid-column:1/-1;display:grid;grid-template-columns:30px minmax(0,1fr);gap:1px 10px;align-items:center;margin:0;padding:12px 6px 2px;border-top:1px solid var(--line)}
.sc-say .av{grid-row:span 2}
.sc-say blockquote{min-width:0;margin:0;overflow:hidden;color:var(--ink);font:600 14.5px/1.35 var(--f-body);text-overflow:ellipsis;white-space:nowrap}
.sc-say figcaption{min-width:0;color:var(--ink-3);font:var(--t-caption)}
.sc-n{margin:0;font:600 19px/1.2 var(--f-display);letter-spacing:-.018em}
.sc-n a{position:relative}
.sc-n a::after{content:"";position:absolute;inset:-4px -2px}
.sc-p{display:flex;align-items:baseline;gap:6px;margin:0;font:600 17px/1 var(--f-body)}
.sc-p span{color:var(--ink-3);font:400 14px/1 var(--f-body)}
.sc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:2px}
.stop-card .link-arrow{font-size:14px}
.pin,.walk-rail,.cue{display:none}

/* walking: the stage stays on screen, the words and the cards change over the moving picture */
.walk.walking .walk-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
/* at the opening the words stand on a shade laid over the left of the picture, deep enough to read them on a narrower screen */
.walk.walking .walk-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,12,20,.68),rgba(8,12,20,.44) 30%,rgba(8,12,20,0) 56%);opacity:0;pointer-events:none;transition:opacity .5s var(--ease-soft)}
.walk.at-open .walk-stage::before{opacity:1}
.walk.walking .way-title,.walk.walking .stop-view{display:none}
.walk.walking .band{position:absolute;left:calc(var(--gap) + var(--pad));top:50%;max-width:min(560px,36vw);opacity:0;transform:translateY(calc(-44% + 22px));pointer-events:none;
  transition:opacity .3s var(--ease-soft),transform .45s var(--ease-out)}
.walk.walking .band.live{opacity:1;transform:translateY(-44%);pointer-events:auto;transition:opacity .6s var(--ease-soft) .1s,transform .9s var(--ease-out) .1s}
/* a stop: the words on paper and the light's card under them, one column on the side the light is not on */
.walk.walking .stop{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;gap:10px;
  padding:calc(var(--gap) + 92px) calc(var(--gap) + var(--pad)) clamp(84px,11.5vh,116px);pointer-events:none}
.walk.walking .stop[data-side="left"]{align-items:flex-start}
.walk.walking .stop-say,.walk.walking .stop-card{width:min(420px,34vw);opacity:0;transform:translateY(28px);transition:opacity .25s var(--ease-soft),transform .4s var(--ease-out)}
.walk.walking .stop-say{padding:20px 24px 22px;border-radius:var(--r-panel);background:var(--paper);box-shadow:var(--shadow-float)}
.walk.walking .stop-say .display{font-size:clamp(28px,2.5vw,38px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.walk.walking .stop-say .sub{margin-top:10px;font-size:15.5px}
.walk.walking .stop.live .stop-say{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s var(--ease-soft) .1s,transform .8s var(--ease-out) .1s}
.walk.walking .stop.live .stop-card{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s var(--ease-soft) .22s,transform .8s var(--ease-out) .22s}
/* on a shorter screen the column keeps what sells: the buyer's line goes first, then the small facts and the extra links */
@media (max-height:860px){.walk.walking .stop-card .sc-say{display:none}}
@media (max-height:760px){
  .walk.walking .stop{padding-bottom:76px}
  .walk.walking .stop-card .dtags,.walk.walking .stop-also{display:none}
  .walk.walking .stop-say{padding:16px 20px 18px}
  .walk.walking .stop-say .display{font-size:clamp(24px,2.2vw,32px)}
}
/* the mark on the light: a ring, so the light itself stays in view */
.walk.walking .pin{position:absolute;left:0;top:0;z-index:3;display:block;width:0;height:0;opacity:0;pointer-events:none;transition:opacity .35s var(--ease-soft)}
.walk.walking .pin.on{opacity:1}
.pin::before,.place-pin::before{content:"";position:absolute;left:-21px;top:-21px;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 2px #fff,0 0 0 1px rgba(8,14,26,.3)}
.pin::after,.place-pin::after{content:"";position:absolute;left:-21px;top:-21px;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);animation:ping 2.6s var(--ease-soft) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}
/* the rail: one mark for each place, the long one is where the camera stands, on a strip of paper so it reads on any picture */
.walk.walking .walk-rail{position:absolute;left:50%;bottom:24px;z-index:4;display:flex;gap:0;padding:6px 12px;border-radius:var(--r-pill);background:rgba(251,248,243,.86);box-shadow:0 8px 24px -12px rgba(40,26,12,.4);transform:translateX(-50%);transition:opacity .4s var(--ease-soft)}
.walk:not(.moved) .walk-rail{opacity:0;pointer-events:none}
.walk-rail button{position:relative;display:block;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;transition:width .3s var(--ease-out)}   /* each mark a 24px target */
.walk-rail i{position:absolute;left:3px;right:3px;top:10px;height:4px;border-radius:4px;background:rgba(15,22,34,.2);transition:background-color .3s var(--ease-soft)}
.walk-rail button[aria-current="true"]{width:46px}
.walk-rail button[aria-current="true"] i,.walk-rail button:hover i{background:var(--ink)}
.walk-rail span{position:absolute;left:50%;bottom:30px;padding:7px 10px;border-radius:var(--r-xs);background:var(--ink);color:#fff;font:500 12.5px/1 var(--f-body);white-space:nowrap;opacity:0;transform:translateX(-50%);pointer-events:none;transition:opacity .16s var(--ease-soft)}
.walk-rail button:hover span,.walk-rail button:focus-visible span{opacity:1}
.walk.walking .cue{position:absolute;left:50%;bottom:26px;display:flex;align-items:center;gap:12px;margin:0;transform:translateX(-50%);color:var(--on-dark-2);text-shadow:0 1px 8px rgba(8,12,20,.6);font:500 13.5px/1 var(--f-body);white-space:nowrap;transition:opacity .4s var(--ease-soft)}
.cue i{position:relative;display:block;width:1.5px;height:36px;background:rgba(15,22,34,.16);overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:0;width:100%;height:14px;background:var(--ink);animation:cue 2.2s var(--ease-in-out) infinite}
@keyframes cue{from{transform:translateY(-14px)}to{transform:translateY(36px)}}
.walk.moved .cue{opacity:0}
/* the first reel arriving: an honest ring, gone when the reel is in */
.walk-load{display:none}
.walk.walking .walk-load{position:absolute;right:calc(var(--gap) + var(--pad));top:calc(var(--gap) + 84px);display:flex;align-items:center;gap:10px;margin:0;color:var(--ink-2);font:500 13px/1 var(--f-body)}
.walk-load svg{width:22px;height:22px;transform:rotate(-90deg);color:var(--ink)}
.walk-load circle{transition:stroke-dashoffset .2s linear}
/* the reels themselves are never seen: their frames are drawn into the scene */
.reels{position:absolute;left:0;top:0;width:2px;height:2px;overflow:hidden;opacity:0;pointer-events:none}
.reels video{width:2px;height:2px}
/* said once, where the pictures are: the rooms are drawn, the pieces on the cards are photographed */
.walk-note{margin:0;color:var(--ink-2);font:var(--t-caption)}
.walk.walking .walk-note{position:absolute;left:calc(var(--gap) + var(--pad));bottom:24px;max-width:40ch;padding:7px 12px;border-radius:var(--r-pill);background:rgba(251,248,243,.82);opacity:0;transition:opacity .4s var(--ease-soft)}
.walk.walking.moved .walk-note{opacity:1}
/* for anyone who would rather not walk: straight to what comes after, beside the chat at the foot of the screen */
.walk-skip{display:none}
.walk.walking .walk-skip{position:absolute;right:calc(max(var(--gap),calc(var(--gutter) - 8px)) + 182px);bottom:calc(20px + env(safe-area-inset-bottom));z-index:5;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 18px;border:0;border-radius:var(--r-pill);
  background:var(--bg);color:var(--ink);font:600 14.5px/1 var(--f-body);cursor:pointer;box-shadow:var(--shadow-float);transition:transform .16s var(--ease-out)}
.walk-skip .ic{width:17px;height:17px;transform:rotate(90deg)}
.walk.ending .walk-rail,.walk.ending .walk-skip,.walk.ending .walk-note,.walk.ending .cue{opacity:0;pointer-events:none;transition:opacity .3s var(--ease-soft)}
.walk-skip:active{transform:scale(.97)}

/* standing still (phones, portrait tablets, reduced motion): the house first, its words white on a shade at its foot, then
   the lights as a row of cards on paper, each with its place */
.walk:not(.walking) .band{display:flex;flex-direction:column;justify-content:flex-end;min-height:100vh;min-height:100svh;padding:120px calc(var(--gap) + var(--pad)) clamp(40px,8vh,72px);
  background:linear-gradient(180deg,rgba(8,12,20,0) 34%,rgba(8,12,20,.5) 55%,rgba(8,12,20,.8) 78%)}
@media (max-width:720px){.walk:not(.walking) .band .kicker{display:none}}
@media (max-width:720px) and (max-height:700px){
  .walk:not(.walking) .band .display{font-size:36px}
  .walk:not(.walking) .band .sub{margin-top:12px;font-size:16px}
  .walk:not(.walking) .band .actions{margin-top:20px;gap:12px 18px}
  .walk:not(.walking) .band .actions .link-arrow{display:none}                 /* the menu has Indoor and Outdoor */
}
.walk:not(.walking) .way-title,.walk:not(.walking) .stops,.walk:not(.walking) .walk-note{background:#F6F0E9}
.walk:not(.walking) .way-title{margin:0 var(--gap);padding:clamp(28px,5vh,56px) var(--pad) 18px;border-radius:var(--r-sheet) var(--r-sheet) 0 0;font:600 clamp(26px,2.7vw,40px)/1.08 var(--f-display);letter-spacing:-.03em}
.walk:not(.walking) .stops{display:flex;gap:10px;margin:0 var(--gap);padding:2px var(--pad) 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
.walk:not(.walking) .stops::-webkit-scrollbar{display:none}
.walk:not(.walking) .stop{flex:0 0 min(84vw,430px);display:grid;gap:14px;align-content:start;scroll-snap-align:start;scroll-margin-top:96px}
.stop-view{display:block;width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--r-panel);object-fit:cover;background:var(--ground,#DCC5B2)}
.walk:not(.walking) .stop-say .display{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em}
.walk:not(.walking) .stop-say .sub{margin-top:8px;font-size:15.5px}
.walk:not(.walking) .stop-card{box-shadow:none;border:1px solid var(--line)}
.walk:not(.walking) .walk-note{margin:0 var(--gap) var(--gap);padding:6px var(--pad) 22px;border-radius:0 0 var(--r-sheet) var(--r-sheet)}

/* ============ after the walk ============ */
/* rows that move sideways: cards in a line, the arrows a screen at a time, a finger or a trackpad anywhere */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:var(--rail-w,280px);gap:12px;margin:0 calc(-1 * var(--pad));padding:4px var(--pad) 14px;list-style:none;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail > li{min-width:0;scroll-snap-align:start}
.rail-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:0 0 20px}
.rail-nav{display:flex;gap:8px;margin-left:auto}
.rail-btn{display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:50%;background:var(--bg-2);color:var(--ink);cursor:pointer;
  transition:background-color .16s var(--ease-soft),opacity .16s var(--ease-soft),transform .16s var(--ease-out)}
.rail-btn .ic{width:20px;height:20px}
.rail-btn.prev .ic{transform:rotate(90deg)}
.rail-btn.next .ic{transform:rotate(-90deg)}
.rail-btn:active{transform:scale(.94)}
.rail-btn:disabled{opacity:.3;cursor:default;transform:none}
@media (hover:hover) and (pointer:fine){.rail-btn:not(:disabled):hover{background:var(--bg-3)}}
@media (pointer:coarse){.rail-nav:not([data-auto]){display:none}.rail-nav[data-auto] .prev,.rail-nav[data-auto] .next{display:none}}   /* a finger moves the rows; a row that plays keeps its Pause */
.rail-note{margin:4px 0 0;color:var(--ink-3);font:var(--t-caption)}
.top-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.top-title .count{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:var(--r-pill);background:var(--bg-2);color:var(--ink-2);font:600 13.5px/1 var(--f-body)}

/* two ways in, one at a time: indoor or outdoor */
.seg{display:inline-flex;gap:2px;padding:4px;border-radius:var(--r-pill);background:var(--bg-2)}
.seg button{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);font:var(--t-ui);cursor:pointer;
  transition:background-color .2s var(--ease-soft),color .2s var(--ease-soft)}
.seg button .num{color:var(--ink-3);font:500 13px/1 var(--f-body)}
.seg button[aria-selected="true"]{background:var(--dusk);color:#fff}
.seg button[aria-selected="true"] .num{color:rgba(255,255,255,.72)}
@media (hover:hover) and (pointer:fine){.seg button[aria-selected="false"]:hover{color:var(--ink)}}

/* the catalogue by category: each category is one of its lights in a room of the house */
.cats{--rail-w:clamp(236px,21.5vw,318px)}
.cat a{display:grid;gap:13px;color:var(--ink)}
.cat-ph{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-media);overflow:hidden;background:var(--bg-2)}
.cat-ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.cat-b{display:grid;gap:3px;padding:0 4px}
.cat-b b{font:600 17px/1.25 var(--f-display);letter-spacing:-.012em}
.cat-b span{color:var(--ink-3);font:var(--t-small)}
@media (hover:hover) and (pointer:fine){.cat a:hover .cat-ph img{transform:scale(1.04)}}
.cats-sec .cats[hidden]{display:none}

/* the lights buyers rate highest, each with one buyer's words and name */
.top-rail{--rail-w:clamp(244px,20.5vw,300px)}
.top-rail .card{height:100%}
.card-quote{display:grid;grid-template-columns:30px minmax(0,1fr);gap:1px 10px;align-items:center;margin:10px 0 0;padding:12px 0 0;border-top:1px solid var(--line)}
.card-quote .av{grid-row:span 2}
.card-quote blockquote{margin:0;overflow:hidden;color:var(--ink);font:500 14px/1.35 var(--f-body);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card-quote figcaption{color:var(--ink-3);font:var(--t-caption)}

/* what the customers say: the store's own figures beside a row of their reviews */
.voices-in{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:var(--gap);align-items:stretch}
.voices-figs{display:grid;align-content:space-between;gap:24px;padding:clamp(22px,2.4vw,32px);border-radius:var(--r-panel);background:var(--dusk);color:var(--on-dark);--star-0:rgba(255,255,255,.3)}
.voices-figs .label{color:var(--on-dark-2)}
.voices-figs .score{margin:6px 0 0;color:var(--on-dark)}
.voices-figs .score b{font-size:clamp(56px,5.6vw,84px);letter-spacing:-.055em;line-height:.9}
.voices-figs .score span{color:var(--on-dark-2);font-size:18px}
.voices-figs .rated{margin:10px 0 0;color:var(--on-dark-2)}
.voices-figs .rated b{color:var(--on-dark)}
.voices-figs .dist li,.voices-figs .dist li span:last-child{color:var(--on-dark-2)}
.vf-ph{margin:0;color:var(--on-dark-2);font:var(--t-small)}
.vf-ph b{display:block;margin-bottom:4px;color:var(--on-dark);font:600 clamp(26px,2.2vw,32px)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.voices-figs .dist i{background:linear-gradient(90deg,var(--on-dark) var(--v,0%),rgba(244,246,250,.22) var(--v,0%))}
.voices-main{display:grid;align-content:start;gap:14px;min-width:0}
.voices .aside .rail-nav{justify-content:flex-end;margin-top:16px}   /* in the heading, clear of the row and of the chat in the corner */
.voices-in.solo{grid-template-columns:minmax(0,1fr)}
.voices-rail{--rail-w:clamp(252px,19vw,300px);margin:0;padding:0 0 6px;scroll-padding-inline:0}
/* a review card: the buyer's room first, then their words, who and where they are, and the light with one tap to the cart */
.voice{display:grid;grid-template-rows:auto 1fr;height:100%;border-radius:var(--r-panel);overflow:hidden;background:var(--bg-2)}
.voice-ph{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--bg-3)}
.voice-ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.voice-ph .mark{position:absolute;left:10px;top:10px}
@media (hover:hover) and (pointer:fine){.voice-ph:hover img{transform:scale(1.03)}}
.voice-b{display:flex;flex-direction:column;gap:11px;padding:18px 18px 16px}
.voice-t{margin:0;color:var(--ink);font:600 17px/1.35 var(--f-display);letter-spacing:-.012em;text-wrap:pretty}
.voice-q{margin:0;color:var(--ink-2);font:var(--t-small);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.voice-who{display:grid;grid-template-columns:34px minmax(0,1fr);gap:1px 10px;align-items:center;margin:2px 0 0}
.voice-who .av{grid-row:span 2;width:34px;height:34px;font-size:14px}
.voice-who b{font:600 14px/1.25 var(--f-body)}
.voice-who span{color:var(--ink-3);font:var(--t-caption)}
.voice-buy{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.voice-buy a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;min-width:0;color:var(--ink)}
.voice-buy img{width:44px;height:44px;border-radius:10px;object-fit:cover;background:var(--bg-3)}
.voice-buy a > span{display:grid;gap:2px;min-width:0}
.voice-buy b{overflow:hidden;font:600 13.5px/1.3 var(--f-body);text-overflow:ellipsis;white-space:nowrap}
.voice-buy .num{color:var(--ink-3);font:var(--t-caption)}
@media (hover:hover) and (pointer:fine){.voice-buy a:hover b{text-decoration:underline;text-underline-offset:3px}}
.voice-add{display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:var(--action);color:#fff;cursor:pointer;transition:transform .16s var(--ease-out),background .16s var(--ease-soft)}
.voice-add .ic{width:18px;height:18px}
.voice-add:hover{background:var(--action-2)}
.voice-add:active{transform:scale(.94)}
.rail-play .ic{width:16px;height:16px}
.rail-play .ic:last-child,.rail-play.paused .ic:first-child{display:none}
.rail-play.paused .ic:last-child{display:block}

/* lights in 3D: the stage on the night of the footer, the controls beside it */
.s3{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr);gap:var(--gap);align-items:stretch}
.s3-stage{position:relative;min-height:clamp(440px,64vh,660px);border-radius:var(--r-panel);overflow:hidden;background:#1B1A18;touch-action:pan-y}
.s3-stage model-viewer{position:absolute;inset:7% 3% 8%;width:auto;height:auto;opacity:1;pointer-events:auto;--poster-color:transparent;--progress-bar-color:transparent}
.s3-wait{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:10px;transform:translate(-50%,-50%);color:rgba(247,243,236,.72);font:var(--t-small);transition:opacity .4s var(--ease-soft)}
.s3-wait i{width:16px;height:16px;border:2px solid rgba(247,243,236,.24);border-top-color:rgba(247,243,236,.8);border-radius:50%;animation:spin .8s linear infinite}
.s3-stage.ready .s3-wait{opacity:0}
.s3-hint{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 11px;border-radius:var(--r-pill);background:rgba(247,243,236,.12);color:rgba(247,243,236,.86);font:500 13px/1 var(--f-body);pointer-events:none;transition:opacity .4s var(--ease-soft)}
.s3-hint .ic{width:16px;height:16px}
.s3-stage.touched .s3-hint{opacity:0}
.s3-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
/* a light in a room: the room painted with the light the lamp throws (under the model), and what stands in front of
   the lamp painted again over it; the photo itself stands in only until the first painting */
.s3-room{position:absolute;z-index:0;max-width:none;pointer-events:none;user-select:none}
.s3-stage.lit .s3-room{visibility:hidden}
.s3-lit,.s3-lit-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.s3-lit{z-index:1}
.s3-lit-front{z-index:3}
.s3-halo{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
.s3-stage:not(.room) .s3-halo,.s3-stage:not(.lit) .s3-halo,.s3-stage.placing .s3-halo{visibility:hidden}
.s3-stage:not(.room) .s3-lit,.s3-stage:not(.room) .s3-lit-front,.s3-stage:not(.lit) .s3-lit,.s3-stage:not(.lit) .s3-lit-front{visibility:hidden}
.s3-stage model-viewer{z-index:2}
.s3-stage.placing model-viewer,.s3-stage.placing .s3-room{opacity:0}
.s3-wait,.s3-hint{z-index:4}
.s3-mark{display:block;width:0;height:0;pointer-events:none}
.s3-stage.room .s3-hint{background:rgba(27,26,24,.62);color:#F4F6FA}
.s3-rooms{display:flex;flex-wrap:wrap;gap:6px}
.s3-rooms button{flex:0 0 auto;width:58px}
.s3-rooms button{position:relative;display:grid;place-items:center;aspect-ratio:1;padding:0;border:0;border-radius:var(--r-xs);overflow:hidden;background:var(--bg);color:var(--ink);cursor:pointer;transition:transform .16s var(--ease-out)}
.s3-rooms button img{width:100%;height:100%;object-fit:cover}
.s3-rooms button::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .16s var(--ease-soft)}
.s3-rooms button[aria-checked="true"]::after{box-shadow:inset 0 0 0 2px var(--ink)}
.s3-rooms button:active{transform:scale(.96)}
.s3-rooms .studio{background:#1B1A18;color:#F4F6FA;font:600 12px/1 var(--f-body);letter-spacing:.01em}
.s3-stage.no-3d .s3-hint{display:none}
.s3-side{display:flex;flex-direction:column;gap:22px;padding:clamp(20px,2.2vw,30px);border-radius:var(--r-panel);background:var(--bg-2)}
/* every light that has a model, six to a row, all in view at once */
.s3-picks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.s3-picks button{position:relative;display:block;aspect-ratio:1;padding:0;border:0;border-radius:var(--r-field);overflow:hidden;background:var(--bg);cursor:pointer;transition:transform .16s var(--ease-out)}
.s3-picks button img{width:100%;height:100%;object-fit:cover}
.s3-picks button::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .16s var(--ease-soft)}
.s3-picks button[aria-checked="true"]::after{box-shadow:inset 0 0 0 2px var(--ink)}
.s3-picks button:active{transform:scale(.96)}
.s3-what{display:grid;gap:4px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.s3-name{margin:0;color:var(--ink);font:600 18px/1.3 var(--f-display);letter-spacing:-.012em;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:text-decoration-color .16s var(--ease-soft)}
.s3-name:hover{text-decoration-color:currentColor}
.s3-price{margin:0;color:var(--ink-2);font:var(--t-small)}
.s3-go{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.s3.one .s3-side{align-self:start}
.s3-colors{grid-template-columns:repeat(2,minmax(0,1fr))}

/* lights sold in sets */
.sets-row{--rail-w:clamp(228px,18.5vw,268px)}
.set a{display:grid;grid-template-rows:auto 1fr;gap:14px;height:100%;padding:10px 10px 18px;border-radius:var(--r-panel);background:var(--bg-2);color:var(--ink);transition:transform .2s var(--ease-out)}
.set a:active{transform:scale(.98)}
.set-ph{display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--bg-3)}
.set-ph img{width:100%;height:100%;object-fit:cover}
.set-b{display:grid;gap:7px;align-content:start;justify-items:start;padding:0 6px}
.set-b b{font:600 15.5px/1.3 var(--f-body)}
.set-b > span:not(.mark){color:var(--ink-2);font:var(--t-small)}
.set-b .set-p{color:var(--ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.set a:hover{transform:translateY(-3px)}}

/* the last words, standing on the scene: the promise and the list */
/* the close of the home page: one white panel after a last look at the house. The statement and the two ways
   in (indoor, outdoor) on top; the store's four promises in a row; the sign-up on one line */
.outro{margin-top:clamp(64px,16vh,180px);display:grid;gap:clamp(28px,4.2vh,44px)}
.outro-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,72px);align-items:end}
.outro-say{display:grid;gap:18px;align-self:center}
.outro .display{font-size:clamp(40px,4.6vw,72px)}
.outro .sub{margin:0;max-width:34ch;color:var(--ink-2);font:400 clamp(17px,1.3vw,19px)/1.5 var(--f-body)}
.outro-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);margin:0;padding:0;list-style:none}
.outro-doors a{position:relative;display:grid;gap:14px;color:var(--ink)}
.door-ph{display:block;aspect-ratio:5/4;border-radius:var(--r-media);overflow:hidden;background:var(--bg-2)}
.door-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transition:transform .9s var(--ease-out)}
.door-b{display:grid;gap:3px;padding:0 44px 0 4px}
.door-b b{font:600 19px/1.2 var(--f-display);letter-spacing:-.015em}
.door-b span{color:var(--ink-3);font:var(--t-small)}
.outro-doors a > .ic{position:absolute;right:4px;bottom:6px;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--bg-2);transition:background .16s var(--ease-soft),color .16s var(--ease-soft),transform .16s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.outro-doors a:hover .door-ph img{transform:scale(1.04)}.outro-doors a:hover > .ic{background:var(--action);color:#fff}}
.outro-doors a:active > .ic{transform:scale(.94)}
.outro-promise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,32px);margin:0;padding:clamp(24px,3.4vh,32px) 0 0;border-top:1px solid var(--line);list-style:none}
.outro-promise li{display:flex;align-items:flex-start;gap:14px}
.outro-promise .ic{flex:none;width:40px;height:40px;padding:10px;border-radius:50%;background:var(--bg-2);color:var(--ink)}
.outro-promise span{display:grid;gap:3px;color:var(--ink-3);font:var(--t-small)}
.outro-promise b{color:var(--ink);font:600 16px/1.3 var(--f-body);font-variant-numeric:tabular-nums}
.closing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,72px);align-items:center;padding-top:clamp(24px,3.4vh,32px);border-top:1px solid var(--line)}
.closing-t{margin:0;font:600 clamp(20px,1.8vw,26px)/1.25 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.closing .fine{margin-top:10px}
.outro-rate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(20px,4vw,72px);align-items:center;padding-top:clamp(24px,3.4vh,32px);border-top:1px solid var(--line)}
.outro-rate[hidden]{display:none}
.outro-rate-b{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.outro-rate .score{margin:0}
.outro-rate .score b{font-size:clamp(40px,3.6vw,52px)}
.outro-rate-s{display:grid;gap:6px}
.outro-rate .rated{margin:0;color:var(--ink-3);font:var(--t-small)}
.outro-rate .rated b{color:var(--ink);font-weight:600}
.outro-rate .link-arrow{margin-left:auto}
.signup{display:flex;flex-wrap:wrap;gap:10px;max-width:560px}
.signup input{flex:1 1 220px;min-height:54px;padding:0 22px;border:0;border-radius:var(--r-pill);background:var(--bg-2);color:var(--ink);font:400 16px/1 var(--f-body)}
.signup input::placeholder{color:var(--ink-3)}
.signup input:focus{outline:2px solid var(--ink);outline-offset:3px}
.fine{margin:14px 0 0;font:var(--t-caption);color:var(--ink-3)}
.fine a{text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.signup-done{display:none;max-width:52ch;margin:0;color:var(--ink-2);font:var(--t-small)}
.signup-done b{display:block;margin-bottom:6px;color:var(--ink);font:600 clamp(19px,1.5vw,22px)/1.3 var(--f-display)}
.signup input[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--danger)}
.closing.sent .signup{display:none}
.closing.sent .signup-done{display:block}

/* ============ sections inside a panel ============ */
/* a heading on the left; what it needs said, or the way on, at the right end of the same line */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 56px;margin-bottom:clamp(26px,3.6vh,44px)}
.sec-head .aside{display:grid;gap:14px;justify-items:start;max-width:46ch}

/* ============ product cards (shared by every page) ============ */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,2.8vw,38px) clamp(12px,1.4vw,20px);align-items:start}
/* what buyers gave it, under the price */
.card-rate{display:flex;align-items:center;gap:8px;margin:3px 0 0}
.card-rate .rating{--rt:15px}
.card-rate .rated{font-size:13.5px}
.card{position:relative;display:flex;flex-direction:column}
/* a card is the top print of a small stack: under the pointer it is lifted off, and the next photo comes up from behind */
.win{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;background:var(--bg-2);isolation:isolate;perspective:900px}
.win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;backface-visibility:hidden;transition:transform .7s var(--ease-in-out),opacity .45s var(--ease-soft)}
.win img.alt{opacity:0;transform:translate3d(0,-4%,-90px) rotateX(7deg)}
.win .glare{display:none}
@media (hover:hover) and (pointer:fine){
  .card:hover .win img:not(.alt):not(:only-of-type){opacity:0;transform:translate3d(0,9%,40px) rotateX(-12deg)}
  .card:hover .win img.alt{opacity:1;transform:none}
  .card:hover .win img:only-of-type{transform:scale(1.035)}
}
/* one tap to the cart, on the photo: shown under the pointer, always there on touch */
/* the picture stands over the card's link, letting presses through to it, so its Add button can be pressed and a press anywhere else still opens the light */
.card .win{z-index:4;pointer-events:none}
.card .win .card-add{pointer-events:auto}
.card-add{position:absolute;right:10px;bottom:10px;z-index:5;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 15px 0 11px;border:0;border-radius:var(--r-pill);
  background:var(--bg);color:var(--ink);font:600 13.5px/1 var(--f-body);cursor:pointer;box-shadow:0 1px 2px rgba(6,12,24,.12);transition:opacity .2s var(--ease-soft),transform .2s var(--ease-out),background-color .16s var(--ease-soft)}
.card-add .ic{width:17px;height:17px}
.card-add:active{transform:scale(.95)}
.card-add[aria-busy="true"]{cursor:progress;opacity:.7}
@media (hover:hover) and (pointer:fine){
  .card-add{opacity:0;transform:translateY(6px)}
  .card:hover .card-add,.card-add:focus-visible{opacity:1;transform:none}
  .card-add:hover{background:var(--dusk);color:#fff}
}
.info{padding:14px 2px 0;display:grid;gap:4px}
.tag{margin:0;font:var(--t-caption);color:var(--ink-3)}
.name{margin:0;font:600 15.5px/1.3 var(--f-body);color:var(--ink)}
.price{margin:2px 0 0;font:500 15px/1.2 var(--f-body);color:var(--ink);display:flex;gap:6px;align-items:baseline;font-variant-numeric:tabular-nums}
.price span{color:var(--ink-3);font-weight:400}
.badge{position:absolute;left:12px;top:12px;z-index:4;display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 13px 0 10px;border-radius:var(--r-pill);background:var(--bg);color:var(--ink);font:600 13px/1 var(--f-body)}
.badge .ic{width:17px;height:17px}
/* a light the store cannot sell now (live.js): it says so, and has no Add */
.card.sold .badge:not(.out),.card.sold .card-add{display:none}
.card.sold .win img{opacity:.7}

/* ============ showroom ============ */
.showroom{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,.9fr);gap:var(--gap);align-items:stretch}
.sr-main{display:grid;gap:12px;align-content:start}
.sr-stage{position:relative;min-height:clamp(440px,66vh,700px);border-radius:var(--r-panel);overflow:hidden;background:#D9D1C4;cursor:grab;touch-action:pan-y}
.sr-stage.grabbing{cursor:grabbing}
.sr-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.sr-stage .hint{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;min-height:36px;padding:0 14px;border-radius:var(--r-pill);background:var(--bg);font:500 13px/1 var(--f-body);color:var(--ink-2);pointer-events:none;transition:opacity .4s var(--ease-soft)}
.sr-stage .hint svg{width:20px;height:13px}
.sr-stage.touched .hint{opacity:0}
.sr-stage .scale{position:absolute;right:14px;top:14px;display:flex;align-items:center;min-height:34px;padding:0 13px;border-radius:var(--r-pill);background:var(--bg);font:500 13px/1 var(--f-body);color:var(--ink-2);pointer-events:none}
.sr-wait{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;font:var(--t-small);color:var(--ink-2);pointer-events:none;transition:opacity .4s var(--ease-soft)}
.sr-wait i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-2);border-top-color:var(--ink-2);animation:spin .8s linear infinite}
.sr-stage.ready .sr-wait,.sr-stage.no-webgl .sr-wait{opacity:0}
.sr-stage.no-webgl{background:#D9D1C4 url(https://cdn.shopify.com/s/files/1/0695/5899/3007/files/3-ring-flush-mount-modern-living-room.jpg?width=1400) center/cover}
.sr-stage .real{position:absolute;inset:0;z-index:3;background:var(--bg-2);opacity:0;visibility:hidden;transition:opacity .3s var(--ease-soft),visibility 0s linear .3s}
.sr-stage .real img{width:100%;height:100%;object-fit:cover}
.sr-stage.showing-real .real{opacity:1;visibility:visible;transition:opacity .3s var(--ease-soft)}
.sr-stage .back3d{position:absolute;left:14px;top:14px;z-index:4;display:none;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:var(--r-pill);border:0;background:var(--bg);color:var(--ink);font:600 13px/1 var(--f-body);cursor:pointer}
.sr-stage.showing-real .back3d{display:inline-flex}
.sr-photos{display:flex;align-items:center;gap:8px}
.sr-photos .lbl{margin-right:6px;font:var(--t-label);color:var(--ink-3)}
.sr-photos button{position:relative;flex:none;width:64px;height:64px;padding:0;border-radius:var(--r-field);overflow:hidden;border:0;background:var(--bg-2);cursor:pointer;transition:transform .16s var(--ease-out)}
.sr-photos button::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .16s var(--ease-soft)}
.sr-photos button:active{transform:scale(.96)}
.sr-photos button[aria-pressed="true"]::after{box-shadow:inset 0 0 0 2px var(--ink)}
.sr-photos img{width:100%;height:100%;object-fit:cover}
.sr-panel{display:flex;flex-direction:column;gap:26px;padding:clamp(22px,2.4vw,34px);border-radius:var(--r-panel);background:var(--bg-2)}
.ctrl-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.ctrl-top label,.ctrl-top span{font:var(--t-label);color:var(--ink-2)}
.ctrl-top output{min-width:0;font:600 clamp(22px,1.9vw,27px)/1 var(--f-display);letter-spacing:-.03em;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
/* a dimmer: a solid track, a white knob, the number above */
.range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:0;background:transparent;cursor:pointer;--p:50%}
.range::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--ink) 0 var(--p),var(--bg-3) var(--p) 100%)}
.range::-moz-range-track{height:6px;border-radius:6px;background:var(--bg-3)}
.range::-moz-range-progress{height:6px;border-radius:6px;background:var(--ink)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-10px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line-2),var(--shadow-knob);transition:transform .16s var(--ease-out)}
.range::-moz-range-thumb{width:26px;height:26px;border:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line-2),var(--shadow-knob)}
.range:active::-webkit-slider-thumb{transform:scale(1.1)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.ticks{display:flex;justify-content:space-between;margin-top:4px;font:400 12.5px/1 var(--f-body);color:var(--ink-3)}
/* warmth: three tiles, each wearing the color of light it names */
.swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.swatches button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:0 8px;border:0;border-radius:var(--r-field);background:var(--bg);color:var(--ink);font:var(--t-ui-sm);font-variant-numeric:tabular-nums;cursor:pointer;transition:box-shadow .16s var(--ease-soft),transform .16s var(--ease-out)}
.swatches i{flex:none;display:block;width:16px;height:16px;border-radius:5px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(15,22,34,.16)}
.swatches button:active{transform:scale(.97)}
.swatches button[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--ink);font-weight:600}
.k-name{margin:12px 0 0;font:var(--t-small);color:var(--ink-2)}
.product-box{margin-top:auto;display:grid;gap:8px;padding-top:24px;border-top:1px solid var(--line-2)}
.product-box .spec{margin:0;font:var(--t-small);color:var(--ink-3)}
.product-box p{margin:0;color:var(--ink-2)}
.product-box .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:10px}
.product-box .amount{font:600 22px/1 var(--f-body);color:var(--ink);font-variant-numeric:tabular-nums}
.product-box .amount span{font-weight:400;color:var(--ink-3);font-size:15px;margin-right:6px}
model-viewer{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ar-btn{display:none}
.ar-ready .ar-btn{display:inline-flex}

/* ============ three checks before buying ============ */
.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.tool{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.2vw,32px);border-radius:var(--r-panel);background:var(--bg-2)}
.tool p{margin:0;color:var(--ink-2)}
.tool .link-arrow{margin-top:auto;padding-top:8px;align-self:flex-start}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px}
.calc label{display:grid;gap:8px;font:var(--t-label);color:var(--ink-2)}
.calc input{width:100%;min-height:52px;padding:0 16px;border:0;border-radius:var(--r-field);background:var(--bg);color:var(--ink);font:600 20px/1 var(--f-body);font-variant-numeric:tabular-nums;transition:box-shadow .16s var(--ease-soft)}
.calc input:focus{outline:none;box-shadow:var(--ring)}
/* the warmth preview: one room, three light colors */
.kroom{position:relative;aspect-ratio:16/10;border-radius:var(--r-field);overflow:hidden;background:var(--bg-3)}
.kroom img{width:100%;height:100%;object-fit:cover}
.kroom .tint{position:absolute;inset:0;mix-blend-mode:soft-light;background:var(--kt,#FF9C47);opacity:var(--ko,.7);transition:background-color .4s var(--ease-soft),opacity .4s var(--ease-soft)}
.kroom .cool{position:absolute;inset:0;mix-blend-mode:color;background:#B9CCF2;opacity:var(--kc,0);transition:opacity .4s var(--ease-soft)}
.kpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpick button{display:grid;gap:5px;justify-items:start;padding:11px 12px;border:0;border-radius:var(--r-field);background:var(--bg);cursor:pointer;text-align:left;transition:box-shadow .16s var(--ease-soft),transform .16s var(--ease-out)}
.kpick button:active{transform:scale(.97)}
.kpick button b{display:flex;align-items:center;gap:8px;font:600 14.5px/1 var(--f-body);font-variant-numeric:tabular-nums}
.kpick button b i{width:14px;height:14px;border-radius:4px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(15,22,34,.16)}
.kpick button span{font:400 12.5px/1.3 var(--f-body);color:var(--ink-3)}
.kpick button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
/* weather ratings, plainly */
.ip{display:grid;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.ip li{display:grid;grid-template-columns:62px minmax(0,1fr);gap:2px 14px;align-items:center;padding:13px 16px;border-radius:var(--r-field);background:var(--bg)}
.ip b{grid-row:span 2;font:600 20px/1 var(--f-display);letter-spacing:-.02em;color:var(--ink)}
.ip strong{font:600 15px/1.3 var(--f-body)}
.ip span{font:var(--t-caption);color:var(--ink-3)}

/* ============ journal ============ */
.journal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(26px,3vw,40px) clamp(12px,1.4vw,20px)}
.post{display:flex;flex-direction:column;gap:10px}
.post .ph{aspect-ratio:3/2;border-radius:var(--r-media);overflow:hidden;background:var(--bg-2)}
.post .ph img{width:100%;height:100%;object-fit:contain;transition:transform .9s var(--ease-out)}   /* the covers carry text: show them whole */
@media (hover:hover) and (pointer:fine){.post:hover .ph img{transform:scale(1.03)}}
.post time{margin-top:6px;font:var(--t-caption);color:var(--ink-3)}
.post h3{margin:0;font:600 clamp(18px,1.4vw,20px)/1.28 var(--f-display);letter-spacing:-.015em}
.post p{margin:0;color:var(--ink-2);font:var(--t-small)}

/* ============ questions ============ */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,96px);align-items:start}
.faq .sec-head{display:block;margin:0}
.faq .sec-head .lede{margin-top:18px}
.faq .sec-head .lede a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}
.qa{border-top:1px solid var(--line-2)}
.qa details{border-bottom:1px solid var(--line-2)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:21px 0;cursor:pointer;font:600 clamp(16px,1.25vw,17.5px)/1.4 var(--f-body)}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg-2)}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease-out)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0)}
.qa .a p{margin:0;padding:0 48px 24px 0;max-width:62ch;color:var(--ink-2)}
.qa .a a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-3);text-underline-offset:3px}

/* ============ footer: night, the name lit by a passing lamp ============ */
.foot{position:relative;margin-top:clamp(90px,11vh,150px);background:#1B1A18;color:rgba(247,243,236,.86);border-radius:28px 28px 0 0;overflow:hidden;isolation:isolate;
  --f-display:'Jost','Helvetica Neue',Arial,sans-serif;--f-body:'Jost','Helvetica Neue',Arial,sans-serif;font-family:var(--f-body);font-size:17px;line-height:1.65}   /* approved as it is: it keeps the face and the measure it was drawn in */
.foot a{transition:color .3s var(--ease-soft)}
.foot a:hover{color:#fff}
.foot-top{display:grid;grid-template-columns:1.35fr repeat(3,minmax(0,1fr)) 1.1fr;gap:40px;padding-top:92px;padding-bottom:30px}
.foot-about img{height:24px;width:auto;margin-bottom:20px}
.foot-about p{margin:0;max-width:34ch;color:rgba(247,243,236,.62);font-size:15px;line-height:1.7}
.foot-col h4{margin:2px 0 18px;font:500 12px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:rgba(247,243,236,.46)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col li a{font-size:15px;color:rgba(247,243,236,.84)}
.foot-contact address{font-style:normal;color:rgba(247,243,236,.84);font-size:15px;line-height:1.7}
.foot-contact p{margin:14px 0 0;font-size:15px;line-height:1.7}
.foot-contact .muted{color:rgba(247,243,236,.54);font-size:14px}
.foot-contact .muted a{border-bottom:1px solid rgba(247,243,236,.3)}
.foot-word{position:relative;margin:18px 0 22px;padding:0 var(--gutter);font:400 clamp(80px,19vw,330px)/1.02 var(--f-display);letter-spacing:-.045em;text-align:center;white-space:nowrap;user-select:none;--lx:50%;--ly:45%}
.foot-word span{display:block}
.foot-word .dim{color:rgba(247,243,236,.055)}
.foot-word .lit{position:absolute;inset:0;padding:0 var(--gutter);color:transparent;
  background:radial-gradient(circle clamp(130px,15vw,280px) at var(--lx) var(--ly),#FFE9C8 0%,#EDB56B 32%,rgba(237,181,107,.16) 62%,rgba(237,181,107,0) 76%);-webkit-background-clip:text;background-clip:text}
.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 30px;padding-top:24px;padding-bottom:30px;font-size:13.5px;color:rgba(247,243,236,.5);position:relative}
.foot-bottom::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:rgba(247,243,236,.1)}
.foot-bottom p{margin:0}
.region{display:flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(247,243,236,.18);border-radius:999px;color:rgba(247,243,236,.8)}
.region svg{width:16px;height:16px}
.pay{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pay .pay-ico{display:block;width:38px;height:24px}
/* the store's marble bollard stands in the footer's corner: touch it and it lights, and the page goes back up */
.foot{--pull-w:40px;--pull-top:64px;--pull-ar:8.345;--pull-r:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)))}
.foot-top{padding-right:calc(var(--gutter) + var(--pull-w) + 60px)}
.pull{position:absolute;top:var(--pull-top);right:var(--pull-r);z-index:3;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px;width:var(--pull-w);padding:0;border:0;background:none;cursor:pointer;color:rgba(247,243,236,.8)}
.pull-lamp{position:relative;display:block;width:100%;transition:transform .4s var(--ease-out)}
.pull-lamp img{position:relative;z-index:1;display:block;width:100%;height:auto;filter:brightness(.42) saturate(.55) contrast(1.05);transition:filter 1.1s cubic-bezier(.3,.6,.2,1)}
/* its own soft shadow on the ground, and the warm pool the marble throws down when it is on */
.pull-lamp::before{content:"";position:absolute;left:50%;bottom:-7px;width:260%;height:14px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.55),rgba(0,0,0,0))}
.pull-lamp::after{content:"";position:absolute;left:50%;bottom:-26px;width:900%;height:52px;transform:translateX(-50%);border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,rgba(255,200,130,.26),rgba(255,180,100,.08) 55%,rgba(255,180,100,0));transition:opacity 1.2s cubic-bezier(.3,.6,.2,1)}
.pull-label{justify-self:center;margin-top:8px;font:500 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;opacity:0;transform:translateY(-4px);transition:opacity .5s var(--ease-soft) .25s,transform .5s var(--ease-out) .25s}
/* the light itself, behind everything in the footer: a warm core round the marble, a faint halo, and a soft spill downward */
.pull-glow{position:absolute;z-index:-1;width:560px;height:760px;right:calc(var(--pull-r) + var(--pull-w) / 2 - 280px);top:calc(var(--pull-top) + var(--pull-w) * var(--pull-ar) * .26 - 380px);pointer-events:none;opacity:0;transform:scale(.86);
  background:radial-gradient(closest-side,rgba(255,212,156,.3),rgba(255,188,118,.12) 30%,rgba(255,176,100,.035) 62%,rgba(255,176,100,0));
  transition:opacity 1.4s cubic-bezier(.3,.6,.2,1),transform 1.8s cubic-bezier(.3,.6,.2,1)}
.pull-glow::after{content:"";position:absolute;left:50%;top:44%;width:700px;height:860px;transform:translateX(-50%);
  background:radial-gradient(50% 56% at 50% 12%,rgba(255,196,130,.08),rgba(255,186,116,.03) 55%,rgba(255,186,116,0) 82%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
.pull:hover + .pull-glow,.pull:focus-visible + .pull-glow,.pull.on + .pull-glow{opacity:1;transform:none}
.pull:hover .pull-lamp img,.pull:focus-visible .pull-lamp img,.pull.on .pull-lamp img{filter:brightness(1.08) saturate(1.05) drop-shadow(0 0 10px rgba(255,190,110,.45))}
.pull:hover .pull-lamp::after,.pull:focus-visible .pull-lamp::after,.pull.on .pull-lamp::after{opacity:1}
.pull:hover .pull-label,.pull:focus-visible .pull-label{opacity:.8;transform:none}
.pull:focus-visible{outline:none}
.pull:focus-visible .pull-label{text-decoration:underline;text-underline-offset:4px}
.pull.tug .pull-lamp{transform:scale(.97)}

/* ============ reveals ============ */
.rv .ri{opacity:0;transform:translateY(18px)}
.rv.in .ri{opacity:1;transform:none;transition:opacity .6s var(--ease-soft),transform .8s var(--ease-out)}
.rv.in .ri:nth-child(2){transition-delay:.05s}.rv.in .ri:nth-child(3){transition-delay:.1s}.rv.in .ri:nth-child(4){transition-delay:.15s}
.rv.in .ri:nth-child(5){transition-delay:.2s}.rv.in .ri:nth-child(6){transition-delay:.25s}.rv.in .ri:nth-child(7){transition-delay:.3s}
.rv.in .ri:nth-child(8){transition-delay:.35s}.rv.in .ri:nth-child(9){transition-delay:.4s}
.rv.in.settled .ri:nth-child(n){transition-delay:0s}

/* from one page to the next the scene dissolves instead of blinking, in browsers that can */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:cubic-bezier(.45,.05,.2,1)}
  .nav{view-transition-name:nav}
}

/* the smallest phones (320 to 360 px wide): the bar tightens so the menu button still fits */
@media (max-width:360px){
  .nav{gap:4px;padding:0 6px 0 14px}
  .brand,.brand img{height:18px}
  .tools{gap:0}
  .tools .icon-btn{width:35px;height:40px}
  .tools .icon-btn svg{width:20px;height:20px}
  .cart-pill{gap:6px;margin-left:2px;padding:0 6px 0 11px}
  .voices-figs,.rv-figs{grid-template-columns:minmax(0,1fr)}
  .voices-figs .dist,.rv-figs .dist{grid-row:auto;grid-column:auto;padding-top:0}
  .voices-figs .rated,.rv-who .rated{max-width:none}
}
/* pause every loop on hidden tabs */
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============ responsive ============ */
@media (max-width:1100px){
  .links{display:none}
  .menu-btn{display:inline-grid}
  .tools{margin-left:auto}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .showroom{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr 1fr}
  .tools-grid .tool:first-child{grid-column:1/-1}
  .voices-in,.s3{grid-template-columns:minmax(0,1fr)}
  .outro-top,.closing,.outro-rate{grid-template-columns:minmax(0,1fr)}
  .outro-say{align-self:start}
  .outro-promise{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .voices-figs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
  .vf-ph{order:3;grid-column:1/-1}
  .s3-stage{min-height:min(70vh,520px)}
  .foot-top{grid-template-columns:1fr 1fr 1fr}
  .foot-about{grid-column:1/-1}
}
@media (max-width:720px){
  :root{--gap:8px;--r-sheet:24px;--r-panel:20px;--r-media:16px}
  .foot{font-size:16px}
  .nav{height:56px;gap:10px;padding:0 7px 0 16px;border-radius:18px}
  .tools .acct{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 10px}
  .info{padding-top:10px;gap:3px}
  .name{font-size:14.5px}
  .price{font-size:14.5px}
  .tools-grid{grid-template-columns:1fr}
  .journal{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  /* the score and its bars side by side on a phone; the photo count runs under both */
  .voices-figs{grid-template-columns:auto minmax(0,1fr);gap:14px 18px;align-items:start;padding:20px 18px}
  .voices-figs > div{display:grid;gap:4px}
  .voices-figs .score b{font-size:52px}
  .voices-figs .score span{font-size:15px}
  .voices-figs > div > span[style]{--rt:15px !important}
  .voices-figs .rated{display:block;margin:4px 0 0;max-width:15ch;font-size:12.5px;line-height:1.35}
  .voices-figs .dist{grid-row:1;grid-column:2;gap:7px;padding-top:24px}
  .voices-figs .dist li{grid-template-columns:10px minmax(0,1fr) 34px;gap:8px;font-size:12px}
  .voices-figs .vf-ph{grid-column:1/-1;margin:0;font-size:13px}
  .outro-promise{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .outro-promise .ic{width:36px;height:36px;padding:9px}
  .outro-rate .link-arrow{flex-basis:100%;margin-left:0}
  .door-b{padding-right:40px}
  .door-b b{font-size:17px}
  .rail{gap:8px}
  .cats{--rail-w:68vw}
  .top-rail,.voices-rail,.sets-row{--rail-w:64vw}
  .seg button{padding:0 16px}
  .stop-card{grid-template-columns:104px minmax(0,1fr);gap:12px}
  /* the walk as cards on a phone: the light's card stays short, its facts on one line, one wide button */
  .walk:not(.walking) .stop-card{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:10px}
  .walk:not(.walking) .sc-b{gap:7px;padding-right:2px}
  .walk:not(.walking) .sc-n{font-size:17px}
  .walk:not(.walking) .stop-card .dtags{gap:4px}
  .walk:not(.walking) .stop-card .dtag{height:24px;padding:0 8px 0 7px;gap:4px;font-size:12px}
  .walk:not(.walking) .stop-card .dtag svg{width:12px;height:12px}
  .walk:not(.walking) .sc-cta .btn{width:100%;justify-content:center}
  .walk:not(.walking) .stop-say .display{font-size:26px}
  .walk:not(.walking) .stop-say .sub{font-size:15px}
  .walk:not(.walking) .stop{flex-basis:86vw}

  .qa .a p{padding-right:0}
  .foot-top{grid-template-columns:1fr 1fr;gap:34px 20px;padding-top:120px}
  .foot-contact{grid-column:1/-1}
  .foot{border-radius:22px 22px 0 0}
  .foot{--pull-w:30px;--pull-top:44px}
  .sr-stage{min-height:420px}
  .sr-photos{flex-wrap:wrap}
  .sr-photos .lbl{flex-basis:100%}
  .cart-pill{padding:0 8px 0 13px}
  .cart-pill .word{display:none}
}
@media (pointer:coarse){
  .btn,.chip,.link-arrow,.cart-pill,.icon-btn,.kpick button{min-height:44px}
  .chip,.link-arrow,.cart-pill{display:inline-flex;align-items:center}
  .icon-btn{width:44px;height:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rv .ri{opacity:1;transform:none}
  .product-box > *{opacity:1;transform:none}
}

/* ============ journal page ============ */
.journal-all{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.journal-all{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.journal-all{grid-template-columns:1fr}}

/* chat: a pill in the dusk blue whose full stop is bright while the team is in, and a concierge panel */
.chat-fab{--r:max(var(--gap),calc(var(--gutter) - 8px));position:fixed;right:var(--r);bottom:calc(20px + env(safe-area-inset-bottom));z-index:60;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 17px;border-radius:999px;border:0;cursor:pointer;isolation:isolate;overflow:hidden;
  color:var(--on-dark);font:500 15px/1 var(--f-body);
  background:var(--dusk);
  box-shadow:inset 0 0 0 1px rgba(244,246,250,.14),var(--shadow-float);
  opacity:0;transform:translateY(12px) scale(.96);transition:opacity .28s var(--ease-out),transform .28s var(--ease-out),background-color .16s var(--ease-soft)}
.chat-fab.shown{opacity:1;transform:none}
/* a panel over the page (the menu, search, favorites, the cart, the filters on a phone) has the corner to itself */
html:has(:is(#search,#drawer,#favs,#cart,.filters).open) .chat-fab:not(.open){opacity:0;pointer-events:none;transform:translateY(14px)}
@media (hover:hover) and (pointer:fine){.chat-fab:hover{background:var(--dusk-2)}}
.chat-fab:active{transform:scale(.97)}
/* a light ring and a dark one, so the focus shows over the scene and over a white panel alike */
.chat-fab:focus-visible{outline:2px solid var(--ink);outline-offset:2px;box-shadow:inset 0 0 0 1px rgba(244,246,250,.14),0 0 0 2px var(--on-dark),var(--shadow-float)}
/* the wordmark scales with its font size, and its full stop with it */
.chat-logo{position:relative;display:flex;align-items:flex-start;height:1em;font-size:14px}
.chat-logo img{display:block;width:auto;height:1em;opacity:.96}
/* the logo's full stop: dim when the team is out, bright when it is in */
.chat-led{flex:none;width:.23em;height:.23em;margin:.58em 0 0 .053em;border-radius:50%;background:rgba(244,246,250,.45)}
.chat-fab.is-on .chat-led{background:var(--on-dark)}
.chat-sep{flex:none;width:1px;height:16px;margin:0 2px;background:rgba(244,246,250,.24)}
.chat-ico{display:none}
.chat-word{display:grid;height:18px;overflow:hidden;line-height:18px}
.chat-word span{grid-area:1/1;transition:transform .26s var(--ease-out),opacity .2s}
.chat-word span+span{transform:translateY(100%);opacity:0}
.chat-fab.open .chat-word span:first-child{transform:translateY(-100%);opacity:0}
.chat-fab.open .chat-word span+span{transform:none;opacity:1}
@media (max-width:1280px){body:has(.sticky-buy.on) .chat-fab{bottom:calc(92px + env(safe-area-inset-bottom))}}
/* the store's check against bots (hCaptcha, on its sign-up and contact forms) puts its badge in the corner the chat
   stands in: it stands above the chat, so neither covers the other */
#shop-hcaptcha-badge-container{bottom:calc(76px + env(safe-area-inset-bottom))!important}
/* while the store's cookie banner is open across the foot of the screen (shell.js): what sits there stands above it */
.consent .favs-panel{bottom:calc(var(--gap) + var(--consent))}
.consent .sticky-buy,.consent .chat-fab,.consent .toasts,.consent .chat{translate:0 calc(-1 * var(--consent))}

/* the panel is as tall as the conversation, up to a limit, and never reaches the bar at the top */
.chat{position:fixed;right:max(var(--gap),calc(var(--gutter) - 8px));bottom:calc(76px + env(safe-area-inset-bottom));z-index:61;display:flex;flex-direction:column;width:min(360px,calc(100vw - 32px));
  max-height:min(540px,calc(100vh - 160px));max-height:min(540px,calc(100dvh - 160px));border-radius:var(--r-panel);overflow:hidden;
  background:var(--surface);color:var(--ink);box-shadow:var(--shadow-float);
  opacity:0;transform:translateY(10px) scale(.97);transform-origin:100% 100%;transition:opacity .2s var(--ease-soft),transform .26s var(--ease-out)}
.chat.in{opacity:1;transform:none}
@media (max-width:1280px){body:has(.sticky-buy.on) .chat{bottom:calc(148px + env(safe-area-inset-bottom));max-height:min(540px,calc(100dvh - 232px))}}
/* the head, on one line: our name, whether the team is in, clear and close */
.chat-head{display:flex;flex:none;align-items:center;gap:10px;min-height:52px;padding:8px 9px 8px 16px;color:var(--on-dark);background:var(--dusk)}
.chat-brand{flex:none;display:block;width:auto;height:15px}
.chat-status{display:flex;flex:1;min-width:0;align-items:center;gap:7px;margin:0;padding-left:10px;border-left:1px solid rgba(244,246,250,.24);font:400 12px/16px var(--f-body);color:var(--on-dark-2);white-space:nowrap}
.chat-status span{overflow:hidden;text-overflow:ellipsis}
.chat-status i{flex:none;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--on-dark-line)}
.chat-status.is-on i{background:var(--on-dark);box-shadow:none}
.chat-head button{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:var(--on-dark-2);cursor:pointer;transition:background-color .16s var(--ease-soft),color .16s var(--ease-soft),transform .16s var(--ease-out)}
.chat-head button:hover{background:rgba(244,246,250,.12);color:var(--on-dark)}
.chat-head button:active{transform:scale(.97)}
.chat-head button:focus-visible{outline:2px solid var(--on-dark);outline-offset:1px}
.chat-head .chat-x{margin-left:-6px;background:rgba(244,246,250,.12);color:var(--on-dark)}
.chat-head .chat-x:hover{background:rgba(244,246,250,.22)}
.chat-x svg{width:12px;height:12px}
.chat-clear svg{width:15px;height:15px}
.chat-log{flex:1 1 auto;min-height:88px;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:14px 12px 10px;background:var(--bg)}
.msg{max-width:88%;animation:msg-in .26s var(--ease-out) both}
@keyframes msg-in{from{opacity:0;transform:translateY(6px)}}
.msg p{margin:0;padding:9px 13px;border-radius:16px;font:400 14px/1.45 var(--f-body)}
.msg.us p{background:var(--bg-2);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end}
.msg.me p{background:var(--dusk);color:var(--on-dark);border-bottom-right-radius:6px}
.msg-pts{display:grid;gap:5px;margin:4px 0 0;padding:10px 13px 10px 30px;border-radius:16px;background:var(--bg-2);color:var(--ink-2);font:400 13.5px/1.45 var(--f-body)}
.msg-pts li::marker{color:var(--action)}
.msg-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.msg-links a{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 11px;border-radius:999px;font:500 12.5px/1 var(--f-body);color:var(--ink);background:var(--bg-2);transition:background-color .16s var(--ease-soft)}
.msg-links a:hover{background:var(--bg-3)}
.msg-links svg{width:11px;height:8px}
.typing p{display:flex;gap:4px;padding:13px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);opacity:.35;animation:dot 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{30%{opacity:1;transform:translateY(-2px)}}
/* answers we offer inside the conversation */
.msg-opts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msg-opts button{min-height:34px;padding:0 13px;border:0;border-radius:999px;background:var(--dusk);color:var(--on-dark);font:500 13px/1.2 var(--f-body);cursor:pointer;transition:background-color .16s var(--ease-soft),transform .16s var(--ease-out)}
.msg-opts button:hover{background:var(--dusk-2)}
.msg-opts button:active{transform:scale(.97)}
.msg-opts button.soft{background:var(--bg-2);color:var(--ink)}
.msg-opts button.soft:hover{background:var(--bg-3)}
/* lights we suggest, as small cards */
.msg.has-prods{max-width:100%;width:100%}
.msg-prods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
.msg-prod{display:flex;flex-direction:column;gap:5px;padding:5px 5px 8px;border-radius:12px;background:var(--bg-2);transition:background-color .16s var(--ease-soft),transform .16s var(--ease-out)}
.msg-prod:hover{background:var(--bg-3)}
.msg-prod:active{transform:scale(.97)}
.msg-prod .ph{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--bg-3)}
.msg-prod img{display:block;width:100%;height:100%;object-fit:cover}
.msg-prod .nm{padding:0 3px;font:500 12px/1.3 var(--f-body);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg-prod .pr{padding:0 3px;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* the common questions, under the conversation: one line to swipe along, or all of them */
.chat-faq{display:flex;flex:none;align-items:flex-start;gap:4px;padding:6px 8px 6px 7px;border-top:1px solid var(--line);background:var(--bg)}
/* the row keeps a little room around the questions, so a focus ring is not cut off */
.chat-faq-list{--fl:0px;--fr:0px;flex:1;min-width:0;display:flex;gap:6px;padding:5px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-inline:28px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fl),#000 calc(100% - var(--fr)),transparent)}
.chat-faq-list::-webkit-scrollbar{display:none}
.chat-faq-list.fade-l{--fl:28px}
.chat-faq-list.fade-r{--fr:28px}
.chat-faq.open .chat-faq-list{flex-wrap:wrap;max-height:min(312px,40vh);overflow:hidden auto;overscroll-behavior:contain;animation:faq-in .22s var(--ease-out)}
@keyframes faq-in{from{opacity:0;transform:translateY(4px)}}
.chat-faq-list button{flex:none;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border:0;border-radius:999px;background:var(--bg-2);color:var(--ink);font:500 12.5px/1 var(--f-body);white-space:nowrap;cursor:pointer;transition:background-color .16s var(--ease-soft),transform .16s var(--ease-out)}
.chat-faq-list button:hover{background:var(--bg-3)}
.chat-faq-list button:active{transform:scale(.97)}
.chat-faq-list button.lead{background:var(--dusk);color:var(--on-dark)}
.chat-faq-list button.lead:hover{background:var(--dusk-2)}
.chat-faq-list button.lead svg{width:14px;height:14px}
.chat-faq-more{display:grid;place-items:center;flex:none;width:32px;height:32px;margin-top:5px;padding:0;border:0;border-radius:50%;background:var(--bg-2);color:var(--ink);cursor:pointer;transition:background-color .16s var(--ease-soft),transform .16s var(--ease-out)}
.chat-faq-more:hover{background:var(--bg-3)}
.chat-faq-more:active{transform:scale(.97)}
.chat-faq-more svg{width:12px;height:12px;transition:transform .22s var(--ease-out)}
.chat-faq.open .chat-faq-more svg{transform:rotate(180deg)}
.chat-form{display:flex;flex:none;align-items:flex-end;gap:8px;margin:2px 10px 0;padding:4px 4px 4px 14px;border-radius:22px;background:var(--bg-2);transition:box-shadow .16s var(--ease-soft)}
.chat-form:focus-within{box-shadow:var(--ring)}
.chat-form.bad{box-shadow:0 0 0 2px var(--danger)}
.chat-form textarea{flex:1;min-height:34px;max-height:120px;padding:8px 0;border:0;resize:none;background:none;color:var(--ink);font:400 15px/18px var(--f-body);outline:none}
.chat-form textarea::placeholder{color:var(--ink-3);opacity:1}
.chat-send{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:0;background:var(--bg-3);color:var(--ink-3);cursor:pointer;transition:background-color .16s var(--ease-soft),color .16s var(--ease-soft),transform .16s var(--ease-out)}
.chat-send.ready{background:var(--dusk);color:var(--on-dark)}
.chat-send.ready:active{transform:scale(.97)}
.chat-send svg{width:14px;height:10px}
.chat-foot{flex:none;margin:0;padding:7px 14px 10px;text-align:center;font:400 11.5px/1.4 var(--f-body);color:var(--ink-3)}
.chat-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:720px){
  /* on a phone the pill is a round button with a speech mark, so it covers as little of the page as it can */
  .chat-fab{width:50px;height:50px;padding:0;justify-content:center;bottom:calc(16px + env(safe-area-inset-bottom))}
  .chat-logo,.chat-sep,.chat-word{display:none}
  .chat-ico{display:block;width:22px;height:22px}
  .chat-fab.is-on::after{content:"";position:absolute;top:13px;right:12px;width:7px;height:7px;border-radius:50%;background:#FFD28A;box-shadow:0 0 0 2px var(--dusk)}
  .chat-fab.shown.tucked:not(.open){opacity:0;pointer-events:none;transform:translateY(16px) scale(.96)}
  body:has(.sticky-buy.on) .chat-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
  /* on a phone: a sheet at the foot of the screen, never taller than about three quarters of it */
  .chat{right:8px;left:8px;bottom:calc(8px + env(safe-area-inset-bottom));width:auto;max-height:72vh;max-height:72dvh}
  html.chat-open .chat-fab{opacity:0;pointer-events:none}
  body:has(.sticky-buy.on) .chat{bottom:calc(8px + env(safe-area-inset-bottom));max-height:72dvh}
  .chat-head button{width:36px;height:36px}
  .chat-status{padding-left:0;border-left:0}           /* the dot alone parts the name from the status, so it fits a narrow phone */
  .msg-opts button{min-height:38px}
  .chat-form textarea{font-size:16px}                   /* 16px, so a phone does not zoom in when it is tapped */
}
@media (prefers-reduced-motion:reduce){.chat-fab,.chat,.msg,.chat-word span,.chat-faq-list,.chat-faq-more svg{transition:none;animation:none}.typing i{animation:none}}