/* ============================================================
   Viewsetter — the blind builder, branded.

   Its own stylesheet on purpose. site.css and build.css are shared
   with curtains, awnings and shutters and are under the design lock,
   so nothing here touches them. This file owns one page.

   The palette is not invented. Every value is either sampled from the
   mark itself — the brass of the frame, the navy of the slats — or
   lifted straight out of site.css so this page sits on the same warm
   ground as the rest of the site.

   Rebuilt 26 August 2026: the builder used to be navy end to end,
   which read as heavy next to every other page. It now stands on the
   site's own bone, and the navy does what navy is for — the ink, the
   button, and the mark against a chosen thing.
   ============================================================ */

.lx {
  /* --- the ground, the same bone as index.html --- */
  --bone:       #F4EEE5;   /* the page */
  --bone-2:     #EBE2D4;   /* a step back, for a recessed strip */
  --paper:      #FBF7F0;   /* a card lifted off it */
  --sand:       #D9C7B2;

  /* --- the ink, and the accent, straight off the logo's slats --- */
  --navy:       #12283F;
  --navy-hi:    #1D3C5A;   /* one step up, for a lit edge */
  --navy-deep:  #081524;   /* the footer */
  --ink:        #12283F;
  --ink-2:      #51606F;   /* the second voice */

  /* --- the frame. -deep is the only one safe under small text --- */
  --brass:      #A87028;
  --brass-hi:   #C89040;
  --brass-deep: #8A5F1E;

  --hair:       rgba(18,40,63,.13);
  --hair-2:     rgba(18,40,63,.22);
  --hair-lit:   rgba(168,112,40,.42);

  /* a chosen thing is washed navy, not brass: brass on bone is a
     highlight and goes muddy the moment it becomes a surface. */
  --pick:       rgba(18,40,63,.035);
  --pick-2:     rgba(18,40,63,.065);

  /* Emil's curves. The built-in easings are too weak to read as
     intentional at these durations. */
  --out:   cubic-bezier(.23,1,.32,1);
  --inout: cubic-bezier(.77,0,.175,1);

  --step: clamp(20px,4.4vw,46px);
}

/* ---------- ground ---------- */
.lx-body { background: var(--bone); color: var(--ink); }
.lx-main { padding: 0 0 120px; }
/* clear the bar that sits over the bottom of the page on a phone */
@media (max-width: 1040px) { .lx-main { padding-bottom: 148px; } }

.lx-wrap { width: min(1220px, 100% - clamp(20px,5vw,72px)); margin-inline: auto; }

/* the brass hairline that runs under everything, as on the mark */
.lx-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass-deep) 50%, var(--brass) 78%, transparent);
  opacity: .4;
}

/* ---------- opening ---------- */
.lx-open { padding: calc(clamp(84px,9vw,104px) + var(--tb, 0px)) 0 clamp(18px,2.4vw,26px); position: relative; }
.lx-open::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% -12%, rgba(168,112,40,.09), transparent 60%);
}
.lx-eyebrow {
  font-family: "DM Mono", ui-monospace, Menlo, monospace;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--brass-deep); margin: 0 0 12px;
}
.lx-open h1 {
  font-family: Fraunces, Georgia, serif; font-weight: 300;
  font-size: clamp(2rem,4.2vw,3.05rem); line-height: 1.05;
  letter-spacing: -.022em; margin: 0; max-width: 20ch;
}
.lx-open h1 em { font-style: normal; color: var(--brass-deep); }
.lx-open p {
  margin: 13px 0 0; max-width: 64ch; font-size: .98rem; line-height: 1.55;
  color: var(--ink-2);
}
/* Once the build is under way the opening has done its job. Folding it
   away is worth roughly one screenful of scrolling on each of the five
   screens that follow, and the step strip below carries the orientation
   it used to. */
.lx-body:not([data-step="1"]) .lx-open,
.lx-body:not([data-step="1"]) .lx-rule { display: none; }

/* ---------- the two columns ---------- */
.lx-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 344px;
  gap: clamp(28px,4vw,60px); align-items: start;
  padding-top: clamp(16px,2vw,24px);
}
.lx-body:not([data-step="1"]) .lx-grid { padding-top: calc(clamp(84px,8vw,96px) + var(--tb, 0px)); }
@media (max-width: 1040px) { .lx-grid { grid-template-columns: 1fr; } }

/* ---------- progress ---------- */
.lx-step {
  position: sticky; top: calc(78px + var(--tb, 0px)); z-index: 40;
  margin-bottom: clamp(18px,2.6vw,26px);
  padding: 12px 0 11px;
  background: linear-gradient(180deg, var(--bone) 74%, rgba(244,238,229,0));
}
@media (max-width: 1040px) { .lx-step { top: calc(66px + var(--tb, 0px)); background: linear-gradient(180deg, var(--bone) calc(100% - 12px), rgba(244,238,229,0)); } }
.lx-stepline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 10px 0 0;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
}
.lx-stepline b { font-weight: 400; color: var(--brass-deep); }
.lx-stepline span { color: var(--ink-2); letter-spacing: .12em; }

.lx-prog { display: flex; gap: 2px; }
.lx-prog span {
  flex: 1; height: 2px; background: var(--hair-2); position: relative; overflow: hidden;
}
.lx-prog span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--navy-hi), var(--navy));
  transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--out);
}
.lx-prog span[data-done]::after { transform: scaleX(1); }

/* ---------- a screen ---------- */
.lx-screen { display: none; }
.lx-screen[data-on] { display: block; }

.lx-q { margin: 0 0 clamp(28px,3.4vw,38px); }
.lx-q:last-of-type { margin-bottom: 0; }

.lx-q > h2 {
  font-family: Fraunces, Georgia, serif; font-weight: 300;
  font-size: clamp(1.56rem,2.6vw,2rem); line-height: 1.12;
  letter-spacing: -.018em; margin: 0 0 8px; max-width: 26ch;
}
.lx-q > p {
  margin: 0 0 18px; max-width: 54ch; color: var(--ink-2);
  font-size: .99rem; line-height: 1.62;
}
#lx-lightq > h3, .lx-q > h3 {
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-deep); margin: 38px 0 14px;
}

/* the entrance. Screens are seen a handful of times, so they may animate;
   40ms of stagger, and nothing is blocked while it plays. */
.lx-screen[data-on] .lx-q {
  animation: lxRise .26s var(--out) both;
}
.lx-screen[data-on] .lx-q:nth-child(2) { animation-delay: .04s; }
.lx-screen[data-on] .lx-q:nth-child(3) { animation-delay: .08s; }
.lx-screen[data-on] .lx-q:nth-child(4) { animation-delay: .12s; }
@keyframes lxRise { from { opacity: 0; transform: translateY(9px); } }

/* ---------- options ---------- */
.lx-opts { display: grid; gap: 10px; }
.lx-opts--2 { grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); }
.lx-opts--3 { grid-template-columns: repeat(auto-fit, minmax(196px,1fr)); }
.lx-opts--4 { grid-template-columns: repeat(auto-fit, minmax(148px,1fr)); }

/* a compact row: the answer, with its explanation kept but quietened */
.lx-opts--tight { grid-template-columns: repeat(auto-fit, minmax(176px,1fr)); gap: 8px; }
.lx-opts--tight .lx-opt { padding: 12px 14px; }
.lx-opts--tight .lx-opt .t { font-size: .92rem; }
.lx-opts--tight .lx-opt .d { margin-top: 3px; font-size: .78rem; line-height: 1.4; }

.lx-opt {
  position: relative; display: flex; gap: 14px; align-items: flex-start;
  padding: 17px 18px; text-align: left; cursor: pointer;
  background: var(--paper); color: inherit;
  border: 1px solid var(--hair); border-radius: 2px;
  font: inherit;
  transition: border-color .18s var(--out), background .18s var(--out),
              transform .14s var(--out);
}
.lx-opt:active { transform: scale(.985); }
.lx-opt .ic { flex: 0 0 auto; width: 26px; height: 26px; color: var(--brass); margin-top: 1px; }
.lx-opt .tx { min-width: 0; }
.lx-opt .t { display: block; font-weight: 500; font-size: .99rem; letter-spacing: -.005em; }
.lx-opt .d { display: block; margin-top: 5px; font-size: .855rem; line-height: 1.5; color: var(--ink-2); }
.lx-opt .d-full { display: inline; }
.lx-opt .cost {
  display: block; margin-top: 9px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .76rem;
  letter-spacing: .04em; color: var(--brass-deep);
}
.lx-opt .cost[data-free] { color: var(--navy-hi); }

@media (hover: hover) and (pointer: fine) {
  .lx-opt:hover { border-color: var(--hair-2); background: #FFFDF9; box-shadow: 0 2px 10px rgba(18,40,63,.07); }
}

.lx-opt[aria-pressed="true"] {
  border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy);
  background: linear-gradient(180deg, var(--pick-2), var(--pick));
}
.lx-opt[aria-pressed="true"] .ic { color: var(--brass-deep); }

/* the corner ticks. A selected thing gets bracketed by the brass rather
   than filled in with it — the frame of the mark, in miniature. */
.lx-opt[aria-pressed="true"]::before,
.lx-opt[aria-pressed="true"]::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--brass); pointer-events: none;
  animation: lxTick .2s var(--out) both;
}
.lx-opt[aria-pressed="true"]::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.lx-opt[aria-pressed="true"]::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
@keyframes lxTick { from { opacity: 0; transform: scale(.72); } }

/* ---------- room tiles, with their stepper ---------- */
.lx-rooms { display: grid; grid-template-columns: repeat(auto-fit, minmax(154px,1fr)); gap: 10px; }
.lx-room { display: flex; flex-direction: column; gap: 0; }
.lx-room .lx-opt { flex-direction: column; gap: 10px; padding: 18px 16px 16px; }
.lx-room .ic { width: 30px; height: 30px; }

.lx-count {
  display: grid; grid-template-columns: 40px 1fr 40px; align-items: center;
  border: 1px solid var(--navy); border-top: 0; background: var(--pick);
  overflow: hidden;
}
.lx-count[hidden] { display: none; }
.lx-count button {
  height: 42px; border: 0; background: transparent; color: var(--brass-deep);
  font: inherit; font-size: 1.16rem; cursor: pointer; line-height: 1;
  transition: background .16s var(--out), color .16s var(--out);
}
.lx-count button:active { background: var(--pick-2); }
@media (hover: hover) and (pointer: fine) {
  .lx-count button:hover { background: var(--pick); color: var(--navy); }
}
.lx-count button:disabled { opacity: .3; cursor: default; }
.lx-count .n {
  text-align: center; font-family: "DM Mono", ui-monospace, monospace;
  font-size: .82rem; letter-spacing: .06em; color: var(--ink);
}
.lx-count .n small { display: block; font-size: .58rem; letter-spacing: .18em; color: var(--ink-2); text-transform: uppercase; margin-top: 2px; }

/* ---------- swatches ---------- */
.lx-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px,1fr)); gap: 8px; }
.lx-sw {
  position: relative; padding: 0; border: 1px solid var(--hair); border-radius: 2px;
  background: var(--paper); cursor: pointer; overflow: hidden; font: inherit;
  color: inherit; text-align: left;
  transition: border-color .18s var(--out), transform .14s var(--out);
}
.lx-sw:active { transform: scale(.985); }
.lx-sw i {
  display: block; height: 58px; background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(18,40,63,.07);
}
.lx-sw b { display: block; padding: 8px 9px 2px; font-weight: 500; font-size: .82rem; line-height: 1.25; }
/* the range name, on one line. A range long enough to need two is
   truncated rather than allowed to drop its last word onto a line of
   its own, which is how the blockouts came to read as "Out". */
.lx-sw s {
  display: block; padding: 0 9px 9px; font-size: .68rem;
  color: var(--ink-2); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Hovering a swatch shows the weave bigger. The tile is 58px of a 320px
   photograph, which is far too small to judge a cloth by; lifting it to
   200px is the difference between a colour and a fabric. It grows out of
   its own tile rather than appearing elsewhere, so the eye never loses
   which one it is looking at. */
@media (hover: hover) and (pointer: fine) {
  .lx-sw:hover { border-color: var(--hair-2); box-shadow: 0 2px 10px rgba(18,40,63,.07); }
  .lx-sw i { transition: transform .22s var(--out), box-shadow .22s var(--out); }
  .lx-sw:hover i, .lx-sw:focus-visible i {
    position: relative; z-index: 30;
    transform: scale(2.6); transform-origin: center 30%;
    box-shadow: 0 10px 30px -8px rgba(8,21,36,.45), inset 0 0 0 1px rgba(18,40,63,.12);
  }
  /* the tile has to stop clipping for the moment it is magnified, and it
     has to sit above its neighbours while it is */
  .lx-sw:hover, .lx-sw:focus-visible { overflow: visible; z-index: 30; }
  .lx-swatches { position: relative; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-sw i { transition: none; }
}
.lx-sw[aria-pressed="true"] { border-color: var(--navy); }
.lx-sw[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 0; border: 2px solid var(--navy);
  pointer-events: none;
}

.lx-more {
  margin-top: 13px; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: .88rem; color: var(--brass-deep);
  border-bottom: 1px solid var(--hair-lit); padding-bottom: 2px;
  transition: color .16s var(--out), border-color .16s var(--out);
}
@media (hover: hover) and (pointer: fine) { .lx-more:hover { color: var(--navy); border-color: var(--navy); } }

.lx-all { margin-top: 20px; }
.lx-all[hidden] { display: none; }
.lx-fam {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .6rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass-deep);
  margin: 22px 0 10px;
}

/* ---------- the levels ---------- */
.lx-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px,1fr)); gap: 12px; align-items: stretch; }

/* On a phone the three levels stacked came to about 1350px of scrolling to
   compare three things that only make sense side by side. They snap across
   instead: the next card peeks in at the edge so it is obvious there is
   one, and comparing is a swipe with all three in the same place rather
   than a scroll with them a screen apart. */
@media (max-width: 700px) {
  .lx-tiers {
    display: flex; gap: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    /* bleed towards the edges so the row reads as a row */
    margin-inline: calc(clamp(20px,5vw,72px) / -2);
    padding: 2px clamp(10px,2.5vw,36px) 6px;
    scrollbar-width: none;
  }
  .lx-tiers::-webkit-scrollbar { display: none; }
  .lx-tier {
    flex: 0 0 78%; scroll-snap-align: center;
    padding: 18px 17px 17px;
  }
  .lx-tier .lx-art { max-width: 92px; margin-bottom: 10px; }
}
.lx-tier {
  position: relative; display: flex; flex-direction: column; text-align: left;
  padding: 20px 19px 19px; cursor: pointer; font: inherit; color: inherit;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 2px;
  transition: border-color .18s var(--out), background .18s var(--out), transform .14s var(--out);
}
.lx-tier:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .lx-tier:hover { border-color: var(--hair-2); box-shadow: 0 3px 14px rgba(18,40,63,.07); } }

/* the recommendation, wearing the mark's brass */
.lx-tier[data-pick] {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(168,112,40,.09), rgba(168,112,40,.025)) padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(155deg, var(--brass-hi), var(--brass-deep) 46%, var(--brass-hi)) border-box;
}
.lx-flag {
  position: absolute; top: -1px; right: 18px;
  padding: 5px 11px 4px;
  /* flat, not a gradient: the dark end of the brass ramp put this label at
     3.1:1, and it is 8.8px of uppercase mono. */
  background: var(--brass-hi);
  color: var(--navy-deep);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
}
.lx-tier h4 {
  font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 1.42rem;
  margin: 4px 0 5px; letter-spacing: -.01em;
}
.lx-tier .blurb { font-size: .88rem; color: var(--ink-2); line-height: 1.5; margin: 0 0 14px; }
.lx-tier ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.lx-tier li { font-size: .855rem; color: var(--ink-2); padding-left: 17px; position: relative; line-height: 1.45; }
.lx-tier li::before {
  content: ""; position: absolute; left: 0; top: .48em;
  width: 7px; height: 1px; background: var(--brass);
}
.lx-tier .amt {
  margin-top: auto; font-family: Fraunces, Georgia, serif; font-weight: 300;
  font-size: 1.68rem; letter-spacing: -.02em; color: var(--ink);
}
/* "from", because the real sizes are still two screens away. Set small and
   above the number so it is read as part of the price, not as a caption. */
.lx-tier .amt em {
  display: block; font-style: normal;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 2px;
}

/* a discount the customer is not getting yet, and would be if they moved up */
.lx-unlock {
  display: block; margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--hair-lit); border-radius: 2px;
  background: rgba(168,112,40,.07);
  font-size: .76rem; line-height: 1.4; color: var(--brass-deep);
}
.lx-tier .rel {
  margin-top: 5px; font-family: "DM Mono", ui-monospace, monospace;
  font-size: .72rem; letter-spacing: .04em; color: var(--brass-deep);
}
.lx-tier[aria-pressed="true"] { background: linear-gradient(180deg, var(--pick-2), var(--pick)); }
.lx-tier[aria-pressed="true"][data-pick] {
  background:
    linear-gradient(180deg, rgba(168,112,40,.14), rgba(18,40,63,.05)) padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(155deg, var(--brass-hi), var(--brass-deep) 46%, var(--brass-hi)) border-box;
}
.lx-tier[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--navy);
}

/* the anchor line above the ladder */
.lx-anchor {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  padding: 15px 18px; margin: 0 0 16px;
  border: 1px solid var(--hair); border-left: 2px solid var(--brass);
  background: var(--paper); border-radius: 2px;
  font-size: .89rem; color: var(--ink-2); line-height: 1.5;
}
.lx-anchor b { color: var(--ink); font-weight: 500; }
/* the second line is the caveat, not the argument, so it steps back */
.lx-anchor-note { flex: 1 1 100%; font-size: .82rem; color: var(--ink-2); opacity: .82; }

/* ---------- the rail ---------- */
.lx-rail { position: sticky; top: 96px; }
@media (max-width: 1040px) {
  .lx-rail {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: 60;
    background: rgba(251,247,240,.95);
    backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-top: 1px solid var(--hair-lit);
    padding: 12px clamp(20px,5vw,32px) calc(12px + env(safe-area-inset-bottom));
    /* its first height, held before the script fills it, so the page does not jump (14 October 2026) */
    min-height: calc(82px + env(safe-area-inset-bottom));
  }
}

.lx-card {
  border: 1px solid var(--hair); border-radius: 2px;
  background: var(--paper);
  padding: 22px 20px;
}
@media (max-width: 1040px) { .lx-card { border: 0; background: none; padding: 0; } }

.lx-card h3 {
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-deep); margin: 0 0 16px;
}
@media (max-width: 1040px) { .lx-card h3 { display: none; } }

.lx-lines { display: grid; gap: 9px; margin: 0 0 16px; font-size: .85rem; }
@media (max-width: 1040px) { .lx-lines { display: none; } }
.lx-line { display: flex; justify-content: space-between; gap: 14px; color: var(--ink-2); }
.lx-line b { color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }

.lx-price { position: relative; padding-top: 15px; border-top: 1px solid var(--hair); }
/* On a phone the rail becomes a bar across the bottom, so the price has
   one line to say itself in. The label shortens, the reassurance drops —
   it is already on the button they are about to press. */
@media (max-width: 1040px) {
  .lx-price { border: 0; padding: 0; min-width: 0; }
  .lx-price .lab {
    display: block; font-size: .52rem; letter-spacing: .16em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .lx-price .big {
    margin: 2px 0 0; white-space: nowrap;
    font-size: clamp(1.02rem, 4.6vw, 1.42rem); line-height: 1.1;
    overflow: hidden; text-overflow: ellipsis;
  }
  .lx-price .sub { display: none; }
}
.lx-price .lab {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
}
.lx-price .big {
  font-family: Fraunces, Georgia, serif; font-weight: 300;
  font-size: clamp(1.9rem,4.6vw,2.3rem); letter-spacing: -.025em;
  line-height: 1.12; margin-top: 4px; font-variant-numeric: tabular-nums;
}
.lx-price .sub { margin-top: 5px; font-size: .78rem; color: var(--ink-2); line-height: 1.45; }

/* what they are saving, in dollars. Never a percentage — a percentage is
   a maths problem, an amount is a feeling. */
.lx-save {
  margin-top: 14px; padding: 11px 13px; border-radius: 2px;
  border: 1px solid var(--hair-lit); background: rgba(168,112,40,.07);
}
.lx-save[hidden] { display: none; }
@media (max-width: 1040px) { .lx-save { display: none; } }
.lx-save .tot {
  font-family: Fraunces, Georgia, serif; font-size: 1.06rem; font-weight: 300;
  color: var(--brass-deep); letter-spacing: -.01em;
}
.lx-save ul { list-style: none; margin: 7px 0 0; padding: 0; display: grid; gap: 4px; }
.lx-save li { font-size: .76rem; color: var(--ink-2); display: flex; justify-content: space-between; gap: 10px; }
.lx-save li span:last-child { color: var(--navy-hi); font-variant-numeric: tabular-nums; }

/* the delta. State indication: the number moved, and this says by how much. */
.lx-delta {
  position: absolute; right: 0; top: 12px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .74rem;
  letter-spacing: .04em; color: var(--brass-deep);
  opacity: 0; transform: translateY(5px);
  transition: opacity .2s var(--out), transform .2s var(--out);
  pointer-events: none;
}
.lx-delta[data-show] { opacity: 1; transform: translateY(0); }
/* on the bar there is nowhere for it to sit that is not clipped, and the
   price is an inch from the thumb anyway — the movement is its own signal */
@media (max-width: 1040px) { .lx-delta { display: none; } }

/* ---------- the action, kept beside the price ----------
   The button at the foot of a screen is the right place for it once you
   have read the screen. It is the wrong place if you decided three
   questions ago, which on the cloth and upgrade screens is most people.
   So the rail carries the same action: on a desktop it sits under the
   running total, on a phone it is half of the bar across the bottom. */
.lx-go { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); }
.lx-go .lx-back { display: block; margin: 10px auto 0; }
.lx-btn--full { width: 100%; justify-content: center; }
.lx-tight { display: none; }
@media (max-width: 1040px) {
  .lx-full { display: none; }
  .lx-tight { display: inline; }
}

@media (max-width: 1040px) {
  .lx-go { margin: 0; padding: 0; border: 0; flex: 0 0 auto; }
  .lx-go .lx-back { display: none; }
  .lx-btn--full { width: auto; padding: 13px 18px; font-size: .9rem; }
  /* price left, action right, on the one line the bar has */
  .lx-card { display: flex; align-items: center; gap: 14px; }
  .lx-card .lx-price { flex: 1 1 auto; min-width: 0; }
}

/* Below about 400px there is not a line wide enough for a price range and
   a button both. Rather than shrink the number until it is undignified or
   clip it, the bar becomes two rows. */
@media (max-width: 400px) {
  .lx-card { display: block; }
  .lx-card .lx-price {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 9px;
  }
  /* the number never gives way; the label beside it does */
  .lx-price .lab {
    flex: 0 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .lx-price .big { margin: 0; flex: 0 0 auto; }
  .lx-go .lx-btn--full { width: 100%; }
}

/* ---------- buttons ---------- */
.lx-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: clamp(24px,3vw,34px); }
@media (max-width: 1040px) { .lx-nav { margin-bottom: 12px; } }

.lx-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 2px; cursor: pointer;
  border: 1px solid var(--navy);
  background: linear-gradient(170deg, var(--navy-hi), var(--navy) 62%, var(--navy-deep));
  color: #F6F1E8; font: inherit; font-weight: 500; font-size: .96rem;
  letter-spacing: .005em;
  transition: transform .14s var(--out), filter .18s var(--out), box-shadow .18s var(--out);
}
.lx-btn:active { transform: scale(.975); }
@media (hover: hover) and (pointer: fine) {
  .lx-btn:hover { filter: brightness(1.16); box-shadow: 0 6px 20px rgba(18,40,63,.20); }
}
.lx-btn:disabled {
  background: none; border-color: var(--hair-2); color: var(--ink-2);
  opacity: .75; cursor: default; box-shadow: none;
}
.lx-btn:disabled .arw { opacity: .5; }
.lx-btn:disabled:active { transform: none; }
.lx-btn .arw { transition: transform .18s var(--out); }
@media (hover: hover) and (pointer: fine) { .lx-btn:hover .arw { transform: translateX(3px); } }

.lx-back {
  background: none; border: 0; padding: 6px 2px; cursor: pointer; font: inherit;
  font-size: .89rem; color: var(--ink-2);
  border-bottom: 1px solid transparent;
  transition: color .16s var(--out), border-color .16s var(--out);
}
@media (hover: hover) and (pointer: fine) { .lx-back:hover { color: var(--ink); border-color: var(--hair-2); } }

.lx-hint { margin: 14px 0 0; font-size: .8rem; color: var(--ink-2); }

/* ---------- two layers, or one ----------
   A double is what we would fit, not what the customer has to have. The
   way out sits directly under the recommendation that suggested it. */
.lx-layers { margin: 14px 0 0; }
.lx-layers-q {
  margin: 0 0 10px;
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-deep);
}
.lx-layers .lx-opt .d { font-size: .8rem; }
/* the "We would" badge sits inline after the title here, so the title needs
   the same flex row the upgrade rows give it — without it the two ran
   together as "Double rollerWe would". */
.lx-layers .lx-opt .t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }

/* the same choice, for one room, in that room's own header */
.lx-room-layers { margin-left: auto; align-self: center; }
.lx-roomcard > header .lx-room-layers + .lx-fold-shut { margin-left: 8px; }

/* ---------- the recommendation card ---------- */
.lx-rec {
  border: 1px solid transparent; border-radius: 2px; padding: 26px 24px;
  background:
    linear-gradient(180deg, rgba(168,112,40,.10), rgba(168,112,40,.03)) padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(155deg, var(--brass-hi), var(--brass-deep) 50%, var(--brass-hi)) border-box;
  margin-bottom: 12px;
}
.lx-rec .who {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .58rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--brass-deep); margin: 0 0 10px;
}
.lx-rec h4 {
  font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 1.45rem;
  margin: 0 0 8px; letter-spacing: -.012em;
}
.lx-rec p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2); max-width: 56ch; }
.lx-rec .tag {
  display: inline-block; margin-top: 14px; padding: 5px 11px;
  border: 1px solid var(--hair-lit); border-radius: 2px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .66rem;
  letter-spacing: .1em; color: var(--navy-hi);
}

/* ---------- the form ---------- */
.lx-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px,1fr)); gap: 14px; }
.lx-field label {
  display: block; font-family: "DM Mono", ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 7px;
}
.lx-field input, .lx-field textarea {
  width: 100%; padding: 13px 14px; font: inherit; font-size: .96rem;
  color: var(--ink); background: #FFFFFF;
  border: 1px solid var(--hair-2); border-radius: 2px;
  transition: border-color .18s var(--out), background .18s var(--out);
}
.lx-field textarea { min-height: 96px; resize: vertical; }
.lx-field input:focus, .lx-field textarea:focus {
  outline: 0; border-color: var(--brass); background: #FFFDF9;
}
.lx-field input::placeholder, .lx-field textarea::placeholder { color: rgba(81,96,111,.55); }
.lx-field .err { display: none; margin-top: 6px; font-size: .78rem; color: #A03412; }
.lx-field[data-bad] input, .lx-field[data-bad] textarea { border-color: #A03412; }
.lx-field[data-bad] .err { display: block; }

/* ---------- the summary on the last screen ---------- */
.lx-sum { border: 1px solid var(--hair); border-radius: 2px; padding: 20px 22px; margin-bottom: 26px; }
.lx-sum dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; font-size: .9rem; }
.lx-sum dt { color: var(--ink-2); }
.lx-sum dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.lx-sum .tot { border-top: 1px solid var(--hair); margin-top: 14px; padding-top: 14px; }
.lx-sum .tot dd, .lx-sum .tot dt { font-family: Fraunces, Georgia, serif; font-size: 1.2rem; font-weight: 300; color: var(--ink); }

/* ---------- done ---------- */
.lx-done { text-align: center; padding: clamp(48px,8vw,90px) 0; }
.lx-done .tick {
  width: 54px; height: 54px; margin: 0 auto 24px; border-radius: 50%;
  border: 1px solid var(--brass); display: grid; place-items: center; color: var(--brass-deep);
  animation: lxTickIn .34s var(--out) both;
}
@keyframes lxTickIn { from { opacity: 0; transform: scale(.9); } }
.lx-done h2 { font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: clamp(1.9rem,4.6vw,2.8rem); margin: 0 0 14px; }
.lx-done p { margin: 0 auto; max-width: 46ch; color: var(--ink-2); line-height: 1.62; }

/* ---------- reduced motion ----------
   Fewer and gentler, not none. Colour and opacity stay, because they are
   what tells you the thing you tapped registered. Movement goes. */
@media (prefers-reduced-motion: reduce) {
  .lx-screen[data-on] .lx-q { animation: lxFade .2s ease both; }
  @keyframes lxFade { from { opacity: 0; } }
  .lx-opt, .lx-tier, .lx-sw, .lx-btn { transition-property: border-color, background, filter; }
  .lx-opt:active, .lx-tier:active, .lx-sw:active, .lx-btn:active { transform: none; }
  .lx-opt[aria-pressed="true"]::before,
  .lx-opt[aria-pressed="true"]::after { animation: none; }
  .lx-delta { transition: opacity .2s ease; transform: none; }
  .lx-delta[data-show] { transform: none; }
  .lx-done .tick { animation: lxFade .2s ease both; }
  .lx-prog span::after { transition: none; }
}

/* ============================================================
   Living without site.js.

   site.css fades the body in only once site.js adds .lit, and it
   toggles the nav's solid state on scroll. Both of those files are
   under the design lock and this page does not load the script, so
   the two states it would have set are declared here instead.
   ============================================================ */
.lx-body { opacity: 1; }

.lx-body .nav {
  background: rgba(244,238,229,.90);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--hair);
}
.lx-body .nav::before { opacity: 0; }
.lx-body .nav-links a { color: var(--ink); }
.lx-body .nav-links a[aria-current] { color: var(--brass-deep); }

/* the footer is a bone coloured block on every other page. Here it sits
   on navy, so it gets the ground it was drawn for. */
.lx-body .foot { background: var(--navy-deep); border-top: 1px solid var(--hair); }
/* the running bar is fixed over the bottom of the page on a phone, so the
   footer keeps a bar's worth of clearance under its last line */
@media (max-width: 1040px) {
  .lx-body .foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   Room by room motorising.
   ============================================================ */

/* what we suggested, and what it is costing. Said in the open, above the
   list, rather than slipped quietly into the total. */
.lx-lead {
  margin: 0 0 18px; padding: 13px 16px;
  border: 1px solid var(--hair-lit); border-left: 2px solid var(--brass);
  background: var(--paper); border-radius: 2px;
  font-size: .9rem; line-height: 1.55; color: var(--ink-2);
}
.lx-lead strong { color: var(--ink); font-weight: 500; }

/* one row per room: what it is, why we would or would not, what it costs */
.lx-opt--row { align-items: center; }
.lx-opt--row .tx { flex: 1 1 auto; }
.lx-opt--row .t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.lx-opt--row .qty {
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
}
.lx-opt .rec {
  padding: 3px 8px 2px; border: 1px solid var(--brass);
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: .56rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brass-deep);
}
.lx-opt--row .pill {
  flex: 0 0 auto; align-self: center; white-space: nowrap;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .8rem;
  letter-spacing: .03em; color: var(--brass-deep); font-variant-numeric: tabular-nums;
}
.lx-opt--row[aria-pressed="true"] .pill { color: var(--navy-hi); }
@media (max-width: 560px) {
  .lx-opt--row { align-items: flex-start; flex-wrap: wrap; }
  .lx-opt--row .pill { width: 100%; padding-left: 40px; margin-top: 4px; }
}
/* in a two-up cell the row is a column, so the price joins the title
   line rather than squeezing the description into a ribbon */
@media (min-width: 900px) {
  .lx-roomcard--tight .lx-opt--row { align-items: flex-start; flex-wrap: wrap; row-gap: 0; }
  .lx-roomcard--tight .lx-opt--row .pill { width: 100%; padding-left: 40px; margin-top: 5px; }
}

/* the three shortcuts under the list */
.lx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
#lx-detail { margin: 0 0 14px; }
.lx-chip[aria-pressed="true"] { border-color: var(--navy); color: var(--ink); background: var(--pick); }
.lx-chip {
  padding: 9px 15px; border-radius: 2px; cursor: pointer; font: inherit;
  font-size: .84rem; color: var(--ink-2);
  background: transparent; border: 1px solid var(--hair);
  transition: border-color .16s var(--out), color .16s var(--out), transform .14s var(--out);
}
.lx-chip:active { transform: scale(.975); }
.lx-chip:disabled { opacity: .35; cursor: default; }
.lx-chip:disabled:active { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .lx-chip:not(:disabled):hover { border-color: var(--brass); color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .lx-chip { transition-property: border-color, color; }
  .lx-chip:active { transform: none; }
}

/* ============================================================
   Room cards — the cloth, the upgrades and the measure all group
   under the room they belong to.
   ============================================================ */
.lx-roomcard {
  border: 1px solid var(--hair); border-radius: 2px;
  padding: 18px 18px 20px; margin-bottom: 10px;
  background: var(--paper);
}
.lx-roomcard--tight { padding: 16px 16px 16px; }
@media (min-width: 900px) {
  .lx-roomcard--tight > .lx-opts { grid-template-columns: repeat(auto-fit, minmax(288px,1fr)); }
}
.lx-roomcard--tight .lx-opt { padding: 14px 15px; }
.lx-roomcard--tight .lx-opt .d { font-size: .82rem; line-height: 1.45; }
.lx-roomcard > header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding-bottom: 11px; margin-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}
.lx-roomcard > header .lx-fold-shut { margin-left: auto; align-self: center; }
.lx-roomcard > header h3 {
  font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 1.24rem;
  margin: 0; letter-spacing: -.012em; text-transform: none;
  color: var(--ink);
}
.lx-roomcard > header span {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .64rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep);
}

/* ---------- a settled room, folded ----------
   The cloth for a room is a decision, and a decision that has been made
   should take one line, not a wall. The swatch stays visible so it is
   still an answer you can see rather than one you have to trust. */
.lx-roomcard--done { padding: 12px 14px; }
.lx-fold { display: flex; align-items: center; gap: 13px; }
.lx-fold-sw { display: flex; flex: 0 0 auto; }
.lx-dot {
  display: block; width: 30px; height: 30px; border-radius: 2px;
  background-size: cover; background-position: center;
  box-shadow: inset 0 0 0 1px rgba(18,40,63,.12);
}
.lx-fold-sw .lx-dot + .lx-dot { margin-left: -9px; box-shadow: inset 0 0 0 1px rgba(18,40,63,.12), -2px 0 0 var(--paper); }
.lx-fold-tx { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.lx-fold-tx b { display: block; font-weight: 500; font-size: .94rem; }
.lx-fold-tx span {
  display: block; font-size: .8rem; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lx-chip--sm { flex: 0 0 auto; padding: 6px 12px; font-size: .78rem; }

/* a room whose turn has not come yet: present, named, and quiet */
.lx-roomcard--wait { background: none; border-style: dashed; }
.lx-roomcard--wait .lx-fold-tx b { color: var(--ink-2); font-weight: 400; }
.lx-dot--empty { background: var(--bone-2); box-shadow: inset 0 0 0 1px var(--hair-2); }

/* ============================================================
   The visualiser.

   A port of the roller half of the one in build.js, which is under the
   design lock and drives four other pages. The scene, the glass
   rectangle and the mirrored weave tile are the same; the curtain,
   shutter and awning modes are not here because this page cannot
   produce them.

   It sits at the top of whichever room's cloth is open — the only
   moment it answers a question the customer is actually asking. One
   instance, for the open room, so it costs one scene and not four.
   ============================================================ */
.lx-vis {
  position: relative; width: 100%; max-width: 620px;
  /* shorter than the photograph, which is 4:3. The scene inside keeps the
     picture's own proportions and is centred, so cropping the ceiling and
     the floorboards never moves the window out from under the blind. */
  aspect-ratio: 2400 / 1500;
  overflow: hidden; margin: 0 0 18px;
  background: var(--sand);
  border: 1px solid var(--hair-2); border-radius: 2px;
}
.lx-vis-scene {
  position: absolute; left: 0; width: 100%; aspect-ratio: 2400 / 1792;
  top: 50%; transform: translateY(-50%);
  /* 130%, not cover. The glass rectangle in blind.js is scaled about the
     centre by the same 1.30, and the two have to agree or the blind hangs
     off the window — which is exactly what happened when this was cover. */
  background-size: 130%; background-position: center;
}
.lx-vis-night {
  position: absolute; inset: 0; background-size: 130%; background-position: center;
  opacity: 0; transition: opacity .8s var(--out);
}
.lx-vis[data-time="night"] .lx-vis-night { opacity: 1; }
.lx-vis-glass { position: absolute; overflow: hidden; }

/* the blind itself */
.lx-vis-sheet {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(var(--drop, 66) * 1%);
  transition: height .5s var(--out);
  box-shadow: 0 10px 22px -10px rgba(14,35,56,.55);
}
.lx-vis-head {
  position: absolute; left: 0; right: 0; top: 0; height: 4.5%; min-height: 4px;
  background: linear-gradient(to bottom, #C9A96F, #9C7F4E); z-index: 2;
}
.lx-vis-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5%; min-height: 4px;
  background: var(--bar, #B49B78); z-index: 2; transition: background .5s var(--out);
}

/* the cloth: its sampled colour, with the supplier's photograph of the
   weave tiled over it at a size that reads as weave rather than as a
   blown-up macro */
.lx-vis-face {
  position: absolute; inset: 0;
  background-color: var(--fab, #D3C7B3);
  background-image: var(--fabimg, none);
  background-size: 300px;
  opacity: var(--fabop, 1);
}
.lx-vis-face i {
  position: absolute; inset: 0; pointer-events: none; display: block;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 2px),
    linear-gradient(to bottom, rgba(255,255,255,.2), rgba(0,0,0,.08));
}

/* behind a double: the blockout that comes down at night, sitting full
   height so the front layer reads as being in front of something */
.lx-vis-back { position: absolute; inset: 0; display: none; }
.lx-vis[data-double="1"] .lx-vis-back {
  display: block;
  background-color: var(--fab2, transparent);
  background-image: var(--fabimg2, none);
  background-size: 300px;
}

/* The caption sits over a photograph, and a photograph is not a colour you
   can check against. A gradient scrim left it at 1.5:1 on the bright half
   of the scene, so it gets a solid bar of its own. */
.lx-vis-cap {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: 9px 14px;
  background: rgba(8,21,36,.86);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #F6F1E8; font-size: .8rem; letter-spacing: .01em;
}
.lx-vis-tools {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px;
}
.lx-vis-tools .lx-chip {
  background: rgba(251,247,240,.92); border-color: var(--hair-2); color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lx-vis-drop {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 11px; border-radius: 2px;
  background: rgba(251,247,240,.92); border: 1px solid var(--hair-2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.lx-vis-drop input { width: 92px; accent-color: var(--navy); }
/* on a phone the controls come off the picture rather than sitting on top
   of it, where they cover the very window they are adjusting */
@media (max-width: 560px) {
  .lx-vis { aspect-ratio: 2400 / 1650; }
  .lx-vis-tools {
    position: absolute; top: auto; bottom: 8px; left: 10px; right: 10px;
    justify-content: space-between; gap: 6px;
  }
  .lx-vis-cap { padding-bottom: 44px; }
  .lx-vis-drop input { width: 78px; }
}

/* ---------- the way into the visualiser ----------
   The scene used to sit on the page above every swatch wall: 390px of
   picture for something most people look at once, on a builder we spent
   two passes shortening. It is one line now, and opens over the page. */
.lx-visopen {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 16px; padding: 9px 15px 9px 12px;
  background: var(--bone-2); border: 1px solid var(--hair-2); border-radius: 2px;
  cursor: pointer; font: inherit; font-size: .86rem; color: var(--ink);
  transition: border-color .16s var(--out), background .16s var(--out), transform .14s var(--out);
}
.lx-visopen svg { width: 19px; height: 19px; color: var(--brass-deep); flex: 0 0 auto; }
.lx-visopen:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .lx-visopen:hover { border-color: var(--navy); background: var(--paper); }
}

/* ---------- the panel ---------- */
.lx-visback {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8,21,36,.44);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: lxFadeIn .2s var(--out) both;
}
@keyframes lxFadeIn { from { opacity: 0; } }
.lx-vispanel {
  position: fixed; z-index: 91;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(780px, calc(100vw - 32px)); max-height: min(90vh, 900px);
  display: flex; flex-direction: column;
  background: var(--bone); border: 1px solid var(--hair-2); border-radius: 3px;
  box-shadow: 0 24px 70px -20px rgba(8,21,36,.5);
  animation: lxPanelIn .26s var(--out) both;
}
@keyframes lxPanelIn { from { opacity: 0; transform: translate(-50%, -46%); } }
.lx-vispanel > header {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px 13px; border-bottom: 1px solid var(--hair);
}
.lx-vispanel > header h3 {
  font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 1.24rem;
  margin: 0; letter-spacing: -.012em; color: var(--ink);
}
.lx-visx {
  flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center;
  background: none; border: 1px solid var(--hair-2); border-radius: 2px;
  cursor: pointer; color: var(--ink-2);
}
.lx-visx svg { width: 17px; height: 17px; }
@media (hover: hover) and (pointer: fine) {
  .lx-visx:hover { border-color: var(--navy); color: var(--ink); }
}
.lx-vispanel-body {
  overflow-y: auto; padding: 18px; -webkit-overflow-scrolling: touch;
  /* a fade at the foot, so a swatch row sliced by the fold reads as
     "there is more" rather than as the end of the list */
  --fade: 26px;
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent 100%);
}
.lx-vispanel-body .lx-vis { max-width: none; }
/* On a short screen the scene would take the room the swatches need, so it
   gives way — the point of the panel is choosing, not the photograph. */
@media (max-height: 900px) {
  .lx-vispanel-body .lx-vis { max-width: 520px; margin-inline: auto; }
}
@media (max-height: 740px) {
  .lx-vispanel-body .lx-vis { max-width: 420px; }
}
.lx-vispanel > footer {
  padding: 13px 18px; border-top: 1px solid var(--hair);
  display: flex; justify-content: flex-end;
}
/* the page behind must not scroll under the panel */
body.lx-locked { overflow: hidden; }

@media (max-width: 620px) {
  .lx-vispanel {
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: auto; max-height: 92vh; border-radius: 3px 3px 0 0;
    animation: lxSheetIn .28s var(--out) both;
  }
  @keyframes lxSheetIn { from { transform: translateY(14px); opacity: 0; } }
  .lx-vispanel-body { padding: 14px; }
}

/* one cloth slot */
.lx-fabrow + .lx-fabrow { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hair); }
.lx-fablab {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0 0 4px; font-size: .95rem; font-weight: 500; color: var(--ink);
}
.lx-fablab em { font-style: normal; font-size: .84rem; font-weight: 400; color: var(--brass-deep); }
.lx-fablab em.lx-need { color: var(--ink-2); }
.lx-fabhint { margin: 0 0 11px; font-size: .84rem; line-height: 1.45; color: var(--ink-2); max-width: 60ch; }
.lx-fabrow .lx-swatches { margin-top: 10px; }
.lx-fabrow .lx-all { max-height: 420px; overflow-y: auto; padding-right: 6px; }

/* A cloth still to be chosen, asked for inside the room's own upgrade card.
   Set apart from the switches above it so it reads as a question rather
   than as another thing to turn on. */
.lx-needcloth {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px dashed var(--hair-2);
}

/* ---------- the measure ---------- */
.lx-sizes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px,1fr)); gap: 0 26px; }
.lx-size {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--hair);
}
.lx-size:last-child { border-bottom: 0; }
/* in two columns the last row of each column loses its rule, not just
   the last of the lot */
@media (min-width: 700px) { .lx-sizes-grid .lx-size:nth-last-child(-n+2) { border-bottom: 0; } }
.lx-size-n {
  flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--hair-lit); border-radius: 50%;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .72rem; color: var(--brass-deep);
}
.lx-size label {
  display: flex; align-items: center; gap: 8px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .62rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.lx-size input {
  width: 88px; padding: 10px 11px; font: inherit; font-size: .95rem;
  color: var(--ink); background: #FFFFFF;
  border: 1px solid var(--hair-2); border-radius: 2px;
  font-variant-numeric: tabular-nums;
  transition: border-color .18s var(--out), background .18s var(--out);
}
.lx-size input:focus { outline: 0; border-color: var(--brass); background: #FFFDF9; }
.lx-size label em {
  font-style: normal; font-size: .62rem; letter-spacing: .12em; color: var(--ink-2);
}

/* the automatic second-roller discount, called out where it is earned */
.lx-disc { display: block; margin-top: 6px; color: var(--brass-deep); font-weight: 400; }

/* the quote summary carries a second line per room now */
.lx-dd2 {
  display: block; margin-top: 3px; font-size: .78rem; color: var(--ink-2);
  text-transform: none; letter-spacing: 0;
}
.lx-sum .tot dl { grid-template-columns: 1fr auto; }

/* ============================================================
   The three level animations.

   One per level, and each says the thing that level is actually
   about rather than being decoration:

     Architectural  the chain you pull, and the blind answering it
     Atelier        cloth on the tube with a running stitch going
                    along it. Made, not assembled
     Sanctuary      the house that runs itself

   Seen once in a session, so they are allowed to be charming. All
   three animate transform, opacity or stroke-dashoffset only, run off
   the main thread, and stop entirely under reduced motion.
   ============================================================ */
.lx-art {
  display: block; width: 100%; max-width: 112px; margin: 0 0 12px;
  color: var(--brass);
}
.lx-art svg { width: 100%; height: auto; display: block; overflow: visible; }
.lx-art .a-tube { fill: currentColor; opacity: .85; }
.lx-art .a-bar { stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.lx-tier[aria-pressed="true"] .lx-art { color: var(--brass-deep); }

/* Architectural — the chain you pull, and the blind answering it. */
.lx-art .a-sheet { fill: rgba(217,199,178,.34); stroke: currentColor; stroke-width: 1; }
.lx-art--chain .a-chain {
  stroke: currentColor; stroke-width: 2; stroke-dasharray: 3 5;
  animation: lxChain 1.6s linear infinite;
}
@keyframes lxChain { to { stroke-dashoffset: -16; } }
.lx-art--chain .a-sheet, .lx-art--chain .a-bar {
  transform-origin: 50% 14px;
  animation: lxRoll 4.4s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes lxRoll {
  0%, 42%  { transform: scaleY(1); }
  58%, 92% { transform: scaleY(.46); }
  100%     { transform: scaleY(1); }
}

/* Atelier — the cloth breathes on the tube and a running stitch
   travels the width of it. */
.lx-art--made .a-cloth {
  fill: rgba(217,199,178,.34); stroke: currentColor; stroke-width: 1;
  transform-origin: 50% 14px;
  animation: lxBreathe 5s cubic-bezier(.5,0,.5,1) infinite;
}
.lx-art--made .a-stitch {
  stroke: currentColor; stroke-width: 1.3; stroke-linecap: round;
  stroke-dasharray: 5 6; opacity: .8;
  animation: lxStitch 2.4s linear infinite;
}
.lx-art--made .a-stitch:nth-of-type(2) { animation-duration: 3.1s; opacity: .5; }
@keyframes lxStitch  { to { stroke-dashoffset: -22; } }
@keyframes lxBreathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.92); }
}
.lx-art--made .a-bar {
  transform-origin: 50% 14px;
  animation: lxBreathe 5s cubic-bezier(.5,0,.5,1) infinite;
}

/* Sanctuary — the house that runs itself. */
.lx-art--smart .a-house { fill: rgba(217,199,178,.26); stroke: currentColor; stroke-width: 1.3; }
.lx-art--smart .a-win { fill: currentColor; opacity: .5; animation: lxDim 4s ease-in-out infinite; }
@keyframes lxDim { 0%, 100% { opacity: .5; } 50% { opacity: .12; } }
.lx-art--smart .a-signal path {
  stroke: currentColor; stroke-width: 1.4; fill: none; opacity: 0;
  animation: lxPing 2.4s ease-out infinite;
}
.lx-art--smart .a-signal path:nth-child(2) { animation-delay: .24s; }
.lx-art--smart .a-signal path:nth-child(3) { animation-delay: .48s; }
@keyframes lxPing { 0% { opacity: 0; } 22% { opacity: .95; } 70%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .lx-art--chain .a-chain, .lx-art--chain .a-sheet, .lx-art--chain .a-bar,
  .lx-art--made .a-cloth, .lx-art--made .a-stitch, .lx-art--made .a-bar,
  .lx-art--smart .a-win, .lx-art--smart .a-signal path { animation: none; }
  .lx-art--smart .a-signal path { opacity: .5; }
}

/* ============================================================
   29 September 2026 — the seven-screen flow.

   The light chosen room by room, the levels drawn as a comparison,
   upgrades as pictures rather than paragraphs, the details checked
   before they move on, the consultation by distance, and the product
   details for a home beyond the installation area. The total is held
   back to the last screen.
   ============================================================ */

/* ---------- the rail, before there is a total ---------- */
.lx-railnote { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }
.lx-price--wait .lx-waitline { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .84rem; }
.lx-waitic { width: 18px; height: 18px; color: var(--brass-deep); flex: 0 0 auto; }
@media (max-width: 1040px) { .lx-price--wait .lx-waitline { display: none; } }
.lx-btn[data-wait] { filter: saturate(.7); opacity: .82; }

/* ---------- a segmented choice ---------- */
.lx-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--hair-2); border-radius: 2px; background: var(--paper); }
.lx-seg button {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 15px; font: inherit; font-size: .88rem; color: var(--ink-2); cursor: pointer;
  background: transparent; border: 0; border-right: 1px solid var(--hair);
  transition: background .16s var(--out), color .16s var(--out);
}
.lx-seg button:last-child { border-right: 0; }
.lx-seg button[aria-pressed="true"] { background: var(--navy); color: #F6F1E8; }
@media (hover: hover) and (pointer: fine) { .lx-seg button:not([aria-pressed="true"]):hover { background: var(--pick-2); color: var(--ink); } }
.lx-seg--sm button { padding: 7px 12px; font-size: .8rem; }
.lx-star { color: var(--brass); font-size: .8em; }
.lx-seg button[aria-pressed="true"] .lx-star { color: var(--brass-hi); }
.lx-swatchdot { display: inline-block; width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18,40,63,.25); }

/* ---------- the three cloths, drawn ---------- */
.lx-kinds { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 700px) {
  .lx-kinds { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; scrollbar-width: none;
    margin-inline: calc(clamp(20px,5vw,72px) / -2); padding: 2px clamp(10px,2.5vw,36px) 6px; }
  .lx-kinds::-webkit-scrollbar { display: none; }
  .lx-kind { flex: 0 0 74%; scroll-snap-align: center; }
}
.lx-kind { padding: 14px 14px 13px; background: var(--paper); border: 1px solid var(--hair); border-radius: 2px; }
.lx-kart { display: block; width: 100%; height: auto; margin: 0 0 10px; border-radius: 2px; }
.lx-kart .k-cloth { transform-box: view-box; transform-origin: 50% 8px; animation: lxKindDrop 5.6s cubic-bezier(.5,0,.5,1) infinite; }
.lx-kart .k-sun { animation: lxSunDrift 5.6s ease-in-out infinite; }
.lx-kart .k-glow { animation: lxGlow 5.6s ease-in-out infinite; }
@keyframes lxKindDrop { 0%, 12% { transform: scaleY(.18); } 38%, 88% { transform: scaleY(1); } 100% { transform: scaleY(.18); } }
@keyframes lxSunDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes lxGlow { 0%, 20% { opacity: 0; } 45%, 85% { opacity: 1; } 100% { opacity: 0; } }
.lx-kind h4 { font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 1.22rem; margin: 0 0 2px; letter-spacing: -.01em; }
.lx-kind > p { margin: 0 0 10px; font-size: .84rem; color: var(--ink-2); }
.lx-meters { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; margin: 0; font-size: .74rem; }
.lx-meters dt { color: var(--ink-2); }
.lx-meters dd { margin: 0; display: flex; gap: 3px; align-items: center; }
.lx-meters i { width: 12px; height: 5px; border-radius: 1px; background: var(--hair); }
.lx-meters i[data-on] { background: var(--brass); }
.lx-best { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--hair); font-size: .76rem; color: var(--ink-2); }
.lx-best .ic { width: 15px; height: 15px; color: var(--brass-deep); margin: 0; }

.lx-lightrooms { display: grid; gap: 8px; }
.lx-lightrow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding: 10px 12px 10px 16px; background: var(--paper); border: 1px solid var(--hair); border-radius: 2px;
}
.lx-lightroom { font-weight: 500; font-size: .95rem; }
.lx-lightroom small {
  display: block; margin-top: 1px; font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep);
}
@media (max-width: 560px) { .lx-lightrow .lx-seg { width: 100%; } .lx-lightrow .lx-seg button { flex: 1; justify-content: center; padding-inline: 6px; } }

/* ---------- the levels ---------- */
.lx-tier { animation: lxTierIn .5s var(--out) both; animation-delay: calc(var(--i, 0) * 90ms); }
/* only a "from": the card ends on its own transform, which for Atelier is
   the lift. A "to" of none held it flat for good. */
@keyframes lxTierIn { from { opacity: 0; translate: 0 14px; } }
/* the entrance plays once; after that a click repaints without replaying it */
.lx-tiers[data-seen] .lx-tier, .lx-tiers[data-seen] .lx-meter i { animation: none; }
.lx-tiers[data-seen] .lx-tier[data-pick] { animation: lxSheen 4.8s linear infinite; }
@media (hover: hover) and (pointer: fine) {
  .lx-tier { transition: border-color .18s var(--out), background .18s var(--out), transform .28s var(--out), box-shadow .28s var(--out); }
  .lx-tier:hover { transform: translateY(-4px); box-shadow: 0 14px 34px -16px rgba(18,40,63,.32); }
}
.lx-kick {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .56rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass-deep);
}
.lx-tier--essential .lx-kick { color: var(--ink-2); }
.lx-feats { gap: 5px !important; margin-bottom: 14px !important; }
.lx-feats li { display: flex; gap: 7px; align-items: flex-start; padding-left: 0 !important; font-size: .8rem !important; }
.lx-feats li::before { display: none; }
.lx-feats svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; fill: none; stroke: var(--navy-hi); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lx-feats li[data-off] { color: rgba(81,96,111,.55); text-decoration: line-through; text-decoration-color: rgba(81,96,111,.3); }
.lx-feats li[data-off] svg { stroke: rgba(81,96,111,.4); }
.lx-meter { display: block; height: 4px; background: var(--hair); border-radius: 2px; overflow: hidden; margin-top: auto; }
.lx-meter i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--brass-deep), var(--brass-hi));
  transform-origin: left; animation: lxMeter .9s var(--out) both; animation-delay: calc(var(--i, 0) * 90ms + .25s); }
@keyframes lxMeter { from { transform: scaleX(0); } }
.lx-meterlab { margin: 5px 0 10px; font-family: "DM Mono", ui-monospace, monospace; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.lx-tier .amt { margin-top: 0; font-size: 1.42rem; }
.lx-tier .amt small { font-family: "DM Mono", ui-monospace, monospace; font-size: .6rem; letter-spacing: .1em; color: var(--ink-2); }
.lx-tier--essential .amt { font-size: 1.05rem; color: var(--ink-2); }
.lx-apply {
  display: block; margin-top: 12px; padding: 9px 10px; text-align: center; border: 1px solid var(--hair-2);
  font-size: .8rem; color: var(--ink-2); border-radius: 2px; transition: background .18s var(--out), color .18s var(--out);
}
.lx-tier[aria-pressed="true"] .lx-apply { background: var(--navy); border-color: var(--navy); color: #F6F1E8; }
.lx-tier[data-pick] .lx-apply { border-color: var(--brass); color: var(--brass-deep); }
.lx-tier[data-pick][aria-pressed="true"] .lx-apply { color: #F6F1E8; border-color: var(--navy); }

/* Atelier: lifted, and lit. A light travels round its brass frame and the
   card sits a step forward of the other two. */
@media (min-width: 701px) {
  .lx-tiers { align-items: center; }
  .lx-tier[data-pick] { transform: scale(1.035); z-index: 2; box-shadow: 0 18px 44px -20px rgba(138,95,30,.55); padding-block: 26px 24px; }
  @media (hover: hover) and (pointer: fine) { .lx-tier[data-pick]:hover { transform: scale(1.035) translateY(-4px); } }
}
.lx-tier[data-pick] {
  background:
    linear-gradient(180deg, rgba(168,112,40,.09), rgba(168,112,40,.025)) padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(115deg, var(--brass-deep) 0%, var(--brass-hi) 30%, #F4DDA6 45%, var(--brass-hi) 60%, var(--brass-deep) 100%) border-box;
  background-size: 100% 100%, 100% 100%, 300% 100%;
  animation: lxTierIn .5s var(--out) both, lxSheen 4.8s linear 1s infinite;
  animation-delay: calc(var(--i, 0) * 90ms), 1s;
}
@keyframes lxSheen { from { background-position: 0 0, 0 0, 0% 0; } to { background-position: 0 0, 0 0, 300% 0; } }
.lx-tier[data-pick] .lx-flag { animation: lxFlag .5s var(--out) .6s both; }
@keyframes lxFlag { from { opacity: 0; transform: translateY(-6px); } }
.lx-tier[data-pick] h4 { font-size: 1.62rem; }
.lx-tier--signature .amt { color: var(--ink); }
.lx-tiers:has(.lx-tier[aria-pressed="true"]) .lx-tier:not([aria-pressed="true"]) { opacity: .88; }

.lx-roomlevel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -2px 0 14px; }
.lx-roomlevel > span {
  font-family: "DM Mono", ui-monospace, monospace; font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-2);
}

/* ---------- upgrades as pictures ---------- */
.lx-upguide { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 0 0 18px; }
@media (max-width: 560px) { .lx-upguide { grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .lx-upg em { display: none; } }
.lx-upg { padding: 12px 12px 11px; background: var(--paper); border: 1px solid var(--hair); border-radius: 2px; text-align: center; }
.lx-upg > span { display: block; }
.lx-upg b { display: block; margin-top: 6px; font-weight: 500; font-size: .86rem; }
.lx-upg em { display: block; margin-top: 2px; font-style: normal; font-size: .74rem; color: var(--ink-2); line-height: 1.35; }
.lx-upart { display: block; width: 100%; max-width: 110px; height: auto; margin: 0 auto; overflow: visible; }
.lx-upart .u-tube { fill: var(--brass); }
.lx-upart .u-day { fill: rgba(217,199,178,.55); stroke: var(--brass-deep); stroke-width: .8; }
.lx-upart .u-night { fill: var(--navy); opacity: .85; transform-origin: 50% 16px; animation: lxNight 5s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes lxNight { 0%, 30% { transform: scaleY(.05); } 50%, 85% { transform: scaleY(1.85); } 100% { transform: scaleY(.05); } }
.lx-upart .u-sun { fill: var(--brass-hi); }
.lx-upart .u-moon { fill: var(--navy); }
.lx-upart .u-line, .lx-upart .u-wave { fill: none; stroke: var(--brass-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lx-upart .u-wave { animation: lxPing 2.4s ease-out infinite; }
.lx-upart .u-dev { fill: var(--paper); stroke: var(--navy-hi); stroke-width: 1.4; }
.lx-upart .u-roll { transform-origin: 50% 10px; animation: lxRoll 4.4s cubic-bezier(.5,0,.5,1) infinite; }
.lx-upart .u-pel { fill: var(--navy-hi); }
.lx-upart .u-bar { stroke: var(--brass-deep); stroke-width: 3; }
.lx-upchips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.lx-upchips i {
  font-style: normal; padding: 3px 8px; border-radius: 20px; background: var(--bone-2);
  font-size: .72rem; color: var(--ink); white-space: nowrap;
}
.lx-upmini { flex: 0 0 auto; width: 44px; }
.lx-upmini .lx-upart { max-width: 44px; }
.lx-daykind { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.lx-daykind > span { font-family: "DM Mono", ui-monospace, monospace; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- details ---------- */
.lx-field select {
  width: 100%; padding: 13px 14px; font: inherit; font-size: .96rem; color: var(--ink);
  background: #FFFFFF; border: 1px solid var(--hair-2); border-radius: 2px;
}
.lx-field select:disabled { color: var(--ink-2); background: var(--bone-2); }
.lx-field select:focus { outline: 0; border-color: var(--brass); }
.lx-field[data-bad] select { border-color: #A03412; }
.lx-field { position: relative; }
.lx-field[data-ok] input, .lx-field[data-ok] select { border-color: rgba(44,82,51,.55); }
.lx-field[data-ok] label::after { content: " \2713"; color: #2C5233; letter-spacing: 0; }
.lx-where {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 13px 16px;
  border: 1px solid var(--hair-lit); border-left: 2px solid var(--brass); background: var(--paper);
  font-size: .9rem; line-height: 1.5; color: var(--ink-2); animation: lxRise .26s var(--out) both;
}
.lx-where b { color: var(--ink); font-weight: 500; }
.lx-where .ic { width: 20px; height: 20px; color: var(--brass-deep); margin: 0; }
.lx-where[data-band="free"] { border-left-color: #2C5233; }

/* ---------- the consultation ---------- */
.lx-offer {
  padding: 24px 24px 22px; margin: 0 0 14px; border-radius: 2px; border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(168,112,40,.10), rgba(168,112,40,.03)) padding-box,
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(155deg, var(--brass-hi), var(--brass-deep) 50%, var(--brass-hi)) border-box;
}
.lx-offer .lx-eyebrow { margin-bottom: 10px; }
.lx-offer h3 { font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: clamp(1.35rem,2.4vw,1.7rem); line-height: 1.18; margin: 0 0 10px; letter-spacing: -.012em; max-width: 30ch; }
.lx-offer p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.lx-offer p b { color: var(--ink); font-weight: 500; }

.lx-proof {
  display: grid; grid-template-columns: auto auto auto 1fr; align-items: center; gap: 6px 18px;
  padding: 18px 20px; margin: 0 0 26px; border-radius: 2px;
  background: linear-gradient(135deg, var(--navy-hi), var(--navy) 60%, var(--navy-deep)); color: #F6F1E8;
}
.lx-proof-fig b { display: block; font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: clamp(2rem,4.4vw,2.6rem); line-height: 1; color: var(--brass-hi); letter-spacing: -.02em; }
.lx-proof-fig span { display: block; margin-top: 4px; font-family: "DM Mono", ui-monospace, monospace; font-size: .56rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(246,241,232,.78); }
.lx-proof-arrow .ic { width: 22px; height: 22px; color: var(--brass-hi); margin: 0; }
.lx-proof p { margin: 0; font-size: .86rem; line-height: 1.55; color: rgba(246,241,232,.88); }
@media (max-width: 620px) { .lx-proof { grid-template-columns: auto auto auto; } .lx-proof p { grid-column: 1 / -1; } }

.lx-subh { font-family: "DM Mono", ui-monospace, monospace; font-weight: 400; font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--brass-deep); margin: 0 0 12px; }
.lx-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.lx-days button {
  flex: 0 0 64px; padding: 9px 4px 8px; text-align: center; font: inherit; cursor: pointer;
  background: var(--paper); border: 1px solid var(--hair); border-radius: 2px; color: var(--ink);
  transition: border-color .16s var(--out), background .16s var(--out);
}
.lx-days small { display: block; font-family: "DM Mono", ui-monospace, monospace; font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.lx-days b { display: block; font-family: Fraunces, Georgia, serif; font-weight: 300; font-size: 1.4rem; line-height: 1.1; margin: 2px 0; }
.lx-days button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #F6F1E8; }
.lx-days button[aria-pressed="true"] small { color: rgba(246,241,232,.75); }
.lx-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px,1fr)); gap: 8px; margin-top: 10px; }
.lx-times button {
  padding: 11px 8px; font: inherit; font-size: .9rem; cursor: pointer; background: var(--paper);
  border: 1px solid var(--hair-2); border-radius: 2px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.lx-times button[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--pick-2); }
@media (hover: hover) and (pointer: fine) { .lx-days button:hover, .lx-times button:hover { border-color: var(--brass); } }
.lx-chosen { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: .92rem; color: var(--ink); }
.lx-chosen .ic { width: 18px; height: 18px; color: #2C5233; margin: 0; }
.lx-agree {
  display: flex; gap: 11px; align-items: flex-start; margin: 22px 0 0; padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--hair-2); border-radius: 2px; background: var(--paper); font-size: .87rem; line-height: 1.55; color: var(--ink-2);
}
.lx-agree input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--navy); flex: 0 0 auto; }
.lx-agree b { color: var(--ink); font-weight: 500; }
.lx-lead--warn { border-left-color: #A03412; color: #7A2A10; }

/* ---------- product only ---------- */
.lx-speccard > header .lx-ok { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #2C5233; }
.lx-speccard > header .lx-ok .ic { width: 15px; height: 15px; color: #2C5233; margin: 0; }
.lx-speccard[data-done] { border-color: rgba(44,82,51,.35); }
.lx-spech {
  display: flex; align-items: center; gap: 8px; margin: 20px 0 10px;
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400; font-size: .62rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brass-deep);
}
.lx-speccard > header + .lx-spech { margin-top: 4px; }
.lx-help {
  display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid var(--brass); background: var(--paper); color: var(--brass-deep); cursor: pointer;
  font: 600 .72rem/1 "Instrument Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none;
  transition: background .16s var(--out), color .16s var(--out);
}
.lx-help[aria-expanded="true"] { background: var(--brass-deep); color: #F6F1E8; border-color: var(--brass-deep); }
.lx-helpbox {
  margin: 0 0 12px; padding: 14px 16px; background: var(--bone); border: 1px solid var(--hair-lit);
  border-radius: 2px; font-size: .86rem; line-height: 1.55; color: var(--ink-2); animation: lxRise .22s var(--out) both;
}
.lx-helpbox[hidden] { display: none; }
.lx-helpbox p { margin: 0; }
.lx-helpbox b { color: var(--ink); font-weight: 500; }
.lx-helpgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lx-helpgrid--one { grid-template-columns: 1fr; }
@media (max-width: 560px) { .lx-helpgrid { grid-template-columns: 1fr; } }
.lx-helpgrid figure { margin: 0; display: flex; gap: 12px; align-items: flex-start; }
.lx-helpgrid figure > svg { flex: 0 0 76px; width: 76px; color: var(--navy-hi); }
.lx-helpgrid--one figure { flex-direction: column; }
.lx-helpgrid--one figure > svg { flex: none; width: 100%; max-width: 280px; }
.lx-helpgrid figcaption { font-size: .82rem; }
.lx-helpnote { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid var(--hair); font-size: .8rem; }
.lx-measure .m-frame { fill: none; stroke: var(--navy-hi); stroke-width: 3; }
.lx-measure .m-glass { fill: rgba(191,211,226,.5); }
.lx-measure .m-dim { stroke: var(--brass-deep); stroke-width: 1.5; fill: none; }
.lx-measure .m-soft { stroke-dasharray: 3 4; opacity: .7; }
.lx-measure .m-t { font: 9px "DM Mono", ui-monospace, monospace; letter-spacing: .14em; fill: var(--brass-deep); text-anchor: middle; }
.lx-measure .m-v { writing-mode: vertical-rl; }

.lx-opt--art { align-items: center; }
.lx-opt--art > svg { flex: 0 0 58px; width: 58px; color: var(--navy-hi); }
.lx-fitopts { margin-bottom: 4px; }
.lx-winrows { display: grid; gap: 0; }
.lx-winrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 10px 0; border-bottom: 1px solid var(--hair);
}
.lx-winrow:last-child { border-bottom: 0; }
.lx-winrow[data-bad] input:placeholder-shown, .lx-winrow[data-bad] input[value=""] { border-color: #A03412; }
.lx-winrow label {
  display: flex; align-items: center; gap: 8px; font-family: "DM Mono", ui-monospace, monospace;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
.lx-winrow input {
  width: 96px; padding: 10px 11px; font: inherit; font-size: .95rem; color: var(--ink); background: #fff;
  border: 1px solid var(--hair-2); border-radius: 2px; font-variant-numeric: tabular-nums;
}
.lx-winrow input:focus { outline: 0; border-color: var(--brass); }
/* a size given at step 4, shown as set on a posted order (13 October 2026) */
.lx-sizeset { min-width: 206px; padding: 10px 0; font-size: .95rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lx-sizeset b { color: var(--ink); font-weight: 500; }
.lx-winrow--set .lx-linkbtn { margin-left: -4px; }
.lx-sure { margin-top: 18px; }
.lx-sidelab {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}
@media (max-width: 560px) { .lx-sidelab { margin-left: 36px; } }
.lx-colrow { margin-top: 8px; }
.lx-seg--sw button { padding-inline: 12px; }
.lx-bars { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px,1fr)); gap: 8px; }
.lx-barbtn {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 9px; cursor: pointer;
  font: inherit; background: var(--paper); border: 1px solid var(--hair); border-radius: 2px; color: var(--ink);
}
.lx-barbtn svg { width: 60px; height: 52px; }
.lx-barbtn b { font-weight: 500; font-size: .78rem; text-align: center; line-height: 1.3; }
.lx-barbtn[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--pick-2); }
.lx-copyspec { margin-top: 18px; }

/* ---------- the estimate ---------- */
.lx-approx {
  display: flex; gap: 12px; align-items: flex-start; margin: -8px 0 24px; padding: 15px 18px;
  border: 1px solid var(--brass); border-radius: 2px; background: rgba(168,112,40,.08);
}
.lx-approx .ic { width: 22px; height: 22px; color: var(--brass-deep); margin: 0; flex: 0 0 auto; }
.lx-approx b { display: block; font-weight: 500; color: var(--ink); font-size: .95rem; }
.lx-approx span { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }

@media (prefers-reduced-motion: reduce) {
  .lx-tier, .lx-tier[data-pick], .lx-meter i, .lx-tier[data-pick] .lx-flag { animation: none; opacity: 1; }
  .lx-kart .k-cloth, .lx-kart .k-sun, .lx-kart .k-glow,
  .lx-upart .u-night, .lx-upart .u-wave, .lx-upart .u-roll { animation: none; }
  .lx-where, .lx-helpbox { animation: none; }
  .lx-tier:hover, .lx-tier[data-pick]:hover { transform: none; }
}
/* the lifted Atelier card reaches below the row; the note makes room for it */
#lx-tiernote { margin-top: 22px; }
/* A grid column will not shrink below its widest child unless told it may.
   The level cards scroll sideways on a phone, and without this their full
   width pushed the whole column past the screen. */
.lx-grid > div { min-width: 0; }

/* ---------- swatches, square and at true scale (30 Sept 2026) ----------
   The tile used to be a fixed 58px strip across whatever width the grid gave
   it, so a square photograph was cropped to a letterbox, and a fine mesh such
   as Ice Duo, squeezed from 200px to about 100, broke into a moiré grid. The
   tile is square now and the photograph is drawn at its own size, never
   scaled down, so the weave reads as the weave. */
.lx-sw i { height: auto; aspect-ratio: 1 / 1; background-size: auto; background-position: center; }
@media (hover: hover) and (pointer: fine) {
  .lx-sw:hover i, .lx-sw:focus-visible i { transform: scale(1.9); }
}
.lx-dot { background-size: auto; }

/* ============================================================
   1 October 2026: what is required, and what is still missing.
   Every required question carries a quiet "Required" tag from the
   start. Press on without answering and the question that is missing
   is marked in the error red the details form already uses, with a
   line saying exactly what to do; the mark clears the moment it is
   answered. Nothing is greyed out without saying why.
   ============================================================ */
.lx-req {
  display: inline-block; margin-left: 10px; padding: 3px 6px 2px; vertical-align: middle;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .54rem; font-weight: 400; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep);
  border: 1px solid rgba(138,95,30,.38); border-radius: 2px;
}
.lx-field label .lx-req { margin-left: 8px; letter-spacing: .12em; }
.lx-q[data-missing] .lx-req, [data-need][data-missing] .lx-req, .lx-field[data-bad] .lx-req,
.lx-speccard[data-need]:not([data-done]) .lx-req.lx-req--on { color: #A03412; border-color: #A03412; }
.lx-q[data-missing] { position: relative; }
.lx-q[data-missing]::before {
  content: ""; position: absolute; left: -14px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: #A03412;
}
@media (max-width: 720px) { .lx-q[data-missing]::before { left: -9px; } }
.lx-missing { margin: 12px 0 0; font-size: .86rem; line-height: 1.5; color: #7A2A10; }
.lx-missing::before { content: "\2192\00a0"; }
.lx-roomcard[data-missing], .lx-agree[data-missing], .lx-times[data-missing] { border-color: #A03412; box-shadow: inset 0 0 0 1px #A03412; }
.lx-lightrooms[hidden] { display: none; }
#lx-lightall { margin-bottom: 4px; }
.lx-linkbtn {
  padding: 0; font: inherit; font-size: inherit; color: var(--ink); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(18,40,63,.35);
}
@media (hover: hover) and (pointer: fine) { .lx-linkbtn:hover { text-decoration-color: var(--ink); } }
.lx-btn[data-wait] { cursor: pointer; }

/* ============================================================
   2 October 2026: uniform swatches, free samples, a full-screen viewer.

   "See all" used auto-fit, so a family with two colours stretched them to
   fill the row: tiles of 226, 304, 460 and 929px side by side. auto-fill
   keeps the empty columns, so every tile in every family is the same
   width, and the name sits in a fixed two-line slot so every tile is the
   same height. The photograph stays at its own scale (30 Sept), so the
   weave is never scaled down: a uniform tile shows a uniform crop.
   ============================================================ */
.lx-swatches { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.lx-swcell { display: flex; flex-direction: column; min-width: 0; }
.lx-swcell .lx-sw { flex: 1 1 auto; display: flex; flex-direction: column; }
.lx-sw b {
  min-height: calc(1.25em * 2 + 10px);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.lx-samp {
  margin-top: 4px; padding: 6px 6px 5px; font: inherit; font-size: .7rem; letter-spacing: .02em; cursor: pointer;
  color: var(--ink-2); background: transparent; border: 1px dashed var(--hair-2); border-radius: 2px;
  transition: border-color .16s var(--out), color .16s var(--out), background .16s var(--out);
}
.lx-samp[aria-pressed="true"] { color: var(--ink); border-style: solid; border-color: var(--navy); background: var(--pick-2, #EFE7DA); }
.lx-samp:disabled { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .lx-samp:not(:disabled):hover { border-color: var(--navy); color: var(--ink); } }

/* where the samples go */
.lx-sampaddr { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hair); }
.lx-sampaddr > h3 {
  font-family: "DM Mono", ui-monospace, monospace; font-weight: 400; font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass-deep); margin: 0 0 10px;
}
.lx-sampaddr .lx-field input { width: 100%; }

/* ---------- the viewer, full screen ---------- */
.lx-vispanel--full {
  left: 0; top: 0; right: 0; bottom: 0; transform: none;
  width: auto; max-height: none; height: 100vh; height: 100dvh;
  border: 0; border-radius: 0; box-shadow: none;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0E1C2B; animation: lxFadeIn .2s var(--out) both;
}
.lx-vispanel--full > header {
  border-bottom: 1px solid rgba(255,255,255,.08); background: #0E1C2B; padding: 10px 16px;
}
.lx-vispanel--full > header h3 { color: #F6F1E8; }
.lx-vishint { margin-right: auto; margin-left: 4px; font-size: .82rem; color: #A7B6C6; }
.lx-vispanel--full .lx-visx { color: #F6F1E8; border-color: rgba(255,255,255,.22); }
.lx-btn--sm { padding: 9px 16px; font-size: .86rem; }
.lx-visstage { display: grid; place-items: center; min-height: 0; padding: 12px; }
/* as large as the stage allows, at the scene's own proportions: the
   glass rectangle is a percentage of the picture, so the picture must
   never be squashed */
.lx-visstage .lx-vis {
  margin: 0; max-width: none; border: 0;
  width: min(100%, calc((100dvh - var(--vischrome, 300px)) * 1.6));
}
.lx-visdrawer { background: var(--bone); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair-2); }
.lx-strip + .lx-strip { margin-top: 10px; }
.lx-striplab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 8px; font-size: .9rem; color: var(--ink); }
.lx-striplab em { font-style: normal; color: var(--ink-2); }
.lx-striplab small { margin-left: auto; font-size: .74rem; color: var(--ink-2); }
.lx-stripwall {
  display: grid; grid-auto-flow: column; grid-auto-columns: 96px; gap: 8px;
  overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; overscroll-behavior-x: contain;
}
.lx-stripwall .lx-sw b { font-size: .76rem; padding: 6px 7px 1px; }
.lx-stripwall .lx-sw s { font-size: .64rem; padding: 0 7px 7px; }
/* no hover magnifier in the strip: it would be clipped by the scroller,
   and the window above is the big picture */
.lx-stripwall .lx-sw:hover i, .lx-stripwall .lx-sw:focus-visible i { transform: none; box-shadow: inset 0 0 0 1px rgba(18,40,63,.07); }
.lx-stripwall .lx-sw:hover, .lx-stripwall .lx-sw:focus-visible { overflow: hidden; }
.lx-vispanel--full .lx-vis-cap { font-size: .86rem; }
@media (max-width: 620px) {
  .lx-vispanel--full { animation: lxFadeIn .2s var(--out) both; }
  .lx-vishint { display: none; }
  .lx-visstage { padding: 8px 0; }
  .lx-visstage .lx-vis { width: min(100%, calc((100dvh - var(--vischrome, 280px)) * 1.6)); }
  .lx-stripwall { grid-auto-columns: 84px; }
}
/* "See all" opens out on the page rather than into a 420px box of its
   own: with square tiles that box showed a row and a half and hid the
   rest behind a second scroll bar */
.lx-all { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* the strip scrolls sideways inside its own box; without these the grid
   column grew to its full width and pushed the close button off screen */
.lx-vispanel--full { grid-template-columns: minmax(0, 1fr); }
.lx-vispanel--full > * { min-width: 0; }

/* Engine 2.0's chain length, in the posted-order details */
.lx-select { padding: 9px 12px; font: inherit; font-size: .9rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hair-2); border-radius: 2px; }
.lx-select:focus { outline: 0; border-color: var(--brass); }

/* ============================================================
   The levels, as the owner's brief of 7 October 2026 asks:
   Sanctuary, Atelier, Architectural, left to right; Atelier in the
   middle and larger; Sanctuary the deep navy dream; Architectural
   complete but quieter. Each tile carries its own slow motion.
   ============================================================ */
.lx-tiers.lx-tiers--v3 { display: grid; grid-template-columns: 1fr 1.14fr 1fr; gap: 16px; align-items: center; padding: 18px 0 6px; }
.lx-tier.lx-tier--v3 {
  padding: 0; display: flex; flex-direction: column; cursor: pointer; border-radius: 3px;
  transition: transform .45s var(--out), box-shadow .45s var(--out), border-color .25s var(--out);
}
.lx-tier--v3 .lx-tstage { position: relative; display: grid; place-items: center; padding: 22px 22px 4px; }
.lx-tier--v3 .lx-tart { display: block; width: 100%; max-width: 230px; height: auto; overflow: visible; }
.lx-tier--v3 .lx-tbody { display: flex; flex-direction: column; flex: 1 1 auto; padding: 12px 22px 22px; }
.lx-tier--v3 h4 { font-size: 1.62rem; margin: 4px 0 4px; }
.lx-tier--v3 .blurb { margin-bottom: 14px; }
.lx-tier--v3 .lx-feats { margin-bottom: 18px !important; }
.lx-tier--v3 .lx-apply {
  margin-top: auto; width: 100%; font: inherit; font-size: .82rem; cursor: pointer; background: transparent;
  letter-spacing: .01em; padding: 11px 12px;
}
.lx-tier--v3[data-on="true"] .lx-apply { background: var(--navy); border-color: var(--navy); color: #F6F1E8; }
.lx-tier--v3[data-on="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--navy); }
.lx-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 2; white-space: nowrap;
  padding: 6px 14px 5px; border-radius: 20px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
}
.lx-more2 { display: none; margin: -8px 0 16px; padding: 0; background: none; border: 0; font: inherit; font-size: .8rem;
  color: var(--brass-deep); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start; }

/* Atelier: the recommendation, in the middle, a size up */
.lx-tier--v3.lx-tier--comfort { padding-block: 10px; box-shadow: 0 26px 50px -30px rgba(18,40,63,.45); }
.lx-tier--v3.lx-tier--comfort h4 { font-size: 1.86rem; }
.lx-tier--comfort .lx-badge { background: var(--brass-hi); color: var(--navy-deep); }
@media (min-width: 701px) { .lx-tier--v3.lx-tier--comfort { transform: translateY(-6px); } }

/* Sanctuary: the deep navy dream, with brass light passing over it */
.lx-tier.lx-tier--v3.lx-tier--signature {
  color: #F4EEE5; border: 1px solid rgba(200,144,64,.45); overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #1D3C5A 0%, #12283F 46%, #081524 100%);
}
.lx-tier--signature h4 { color: #F7F1E7; }
.lx-tier--signature .blurb, .lx-tier--signature .lx-feats li { color: rgba(244,238,229,.78) !important; }
.lx-tier--signature .lx-kick { color: #D8A858; }
.lx-tier--signature .lx-feats svg { stroke: #D8A858; }
.lx-tier--signature .lx-badge { position: static; transform: none; align-self: center; margin: 18px auto -6px;
  background: transparent; color: #D8A858; border: 1px solid rgba(216,168,88,.6); }
.lx-tier--signature .lx-apply { color: #F4EEE5; border-color: rgba(244,238,229,.38); }
.lx-tier--signature[data-on="true"] .lx-apply { background: #C89040; border-color: #C89040; color: #081524; }
.lx-tier--signature[data-on="true"]::after { background: #C89040; }
.lx-tier--signature .lx-more2 { color: #D8A858; }
.lx-tier--signature::before {
  content: ""; position: absolute; inset: -40% -60%; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(216,168,88,.13) 50%, transparent 58%);
  transform: translateX(-60%); opacity: 0;
}
.lx-tiers.is-live .lx-tier--signature::before { animation: lxBrassPass 9s var(--inout) infinite; animation-delay: -2s; }
@keyframes lxBrassPass { 0%, 62% { transform: translateX(-60%); opacity: 0; } 66% { opacity: 1; } 88% { transform: translateX(60%); opacity: 1; } 92%, 100% { transform: translateX(60%); opacity: 0; } }

/* Architectural: complete, professional, quieter */
.lx-tier.lx-tier--v3.lx-tier--essential { background: rgba(251,247,240,.55); border-color: var(--hair); box-shadow: none; }
.lx-tier--essential .lx-kick { color: var(--ink-2); }

@media (hover: hover) and (pointer: fine) {
  .lx-tier.lx-tier--v3:hover { transform: translateY(-4px); }
  .lx-tier.lx-tier--v3.lx-tier--comfort:hover { transform: translateY(-10px); }
}

/* ---------- the drawings ---------- */
.lx-tart .a-win { fill: none; stroke: rgba(18,40,63,.22); stroke-width: 1; }
.lx-tart .a-roll { fill: #12283F; }
.lx-tart .a-bar { fill: #12283F; }
.lx-tier--signature .lx-tart .a-win { stroke: rgba(244,238,229,.22); }
.lx-tier--signature .lx-tart .a-roll { fill: none; stroke: #C89040; stroke-width: 1.4; }
.lx-tier--signature .lx-tart .a-bar { fill: #C89040; }
.lx-tart .a-coil { fill: none; stroke: #D8A858; stroke-width: 1.2; stroke-linecap: round; opacity: .9; transform-origin: 66px 16px; }
.lx-tart .a-tip { fill: #F4EEE5; opacity: 0; }
.lx-tart .a-ring { fill: none; stroke: #F4EEE5; stroke-width: 1; opacity: 0; transform-origin: 120px 124px; }
.lx-tart .a-plain { fill: #ECE3D5; stroke: rgba(18,40,63,.18); stroke-width: .8; }
.lx-tart .a-dim { fill: none; stroke: #8A5F1E; stroke-width: 1; opacity: .55; stroke-dasharray: 100; stroke-dashoffset: 0; }
.lx-tart .a-fall { transform-origin: 120px 18px; }

/* the resting pose, also what anyone with motion turned off sees */
.lx-tart--lift .a-fall { transform: translateY(-46px); }
.lx-tart--lower .a-fall, .lx-tart--drop .a-fall { transform: none; }

/* Sanctuary: a fingertip touches the bar, the blind lifts itself and
   settles on its spring; then it is drawn down again */
.lx-tiers.is-live .lx-tart--lift .a-fall { animation: lxLift 7.2s infinite; animation-delay: -1.4s; }
.lx-tiers.is-live .lx-tart--lift .a-coil { animation: lxCoil 7.2s infinite; animation-delay: -1.4s; }
.lx-tiers.is-live .lx-tart--lift .a-tip { animation: lxTip 7.2s infinite; animation-delay: -1.4s; }
.lx-tiers.is-live .lx-tart--lift .a-ring { animation: lxRing 7.2s infinite; animation-delay: -1.4s; }
.lx-tiers.is-live .lx-tart--lift .a-sheen { animation: lxSheenMove 7.2s infinite; animation-delay: -1.4s; }
@keyframes lxLift {
  0%, 12% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,0,.2,1); }
  30% { transform: translateY(-52px); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  36% { transform: translateY(-44px); }
  41% { transform: translateY(-47px); }
  46%, 74% { transform: translateY(-46px); animation-timing-function: cubic-bezier(.6,0,.4,1); }
  96%, 100% { transform: translateY(0); }
}
@keyframes lxCoil { 0%, 12% { transform: scaleX(1); } 30% { transform: scaleX(.62); } 36% { transform: scaleX(.86); } 41% { transform: scaleX(.74); } 46%, 74% { transform: scaleX(.78); } 96%, 100% { transform: scaleX(1); } }
@keyframes lxTip { 0%, 2% { opacity: 0; transform: translateY(8px); } 8% { opacity: .95; transform: translateY(0); } 13% { opacity: .95; transform: translateY(-3px); } 20%, 100% { opacity: 0; transform: translateY(-3px); } }
@keyframes lxRing { 0%, 10% { opacity: 0; transform: scale(1); } 12% { opacity: .8; transform: scale(1); } 24%, 100% { opacity: 0; transform: scale(3.2); } }
@keyframes lxSheenMove { 0%, 14% { transform: translateX(0); } 44%, 100% { transform: translateX(180px); } }

/* Atelier: the blind comes down as the weave catches the light, and its
   bar lands with a soft bounce */
.lx-tiers.is-live .lx-tart--lower .a-fall { animation: lxLower 7.6s infinite; animation-delay: -0.6s; }
.lx-tiers.is-live .lx-tart--lower .a-glint { animation: lxGlint 7.6s infinite; animation-delay: -0.6s; }
@keyframes lxLower {
  0%, 8% { transform: translateY(-78px); animation-timing-function: cubic-bezier(.5,0,.3,1); }
  34% { transform: translateY(3px); animation-timing-function: cubic-bezier(.4,0,.6,1); }
  40% { transform: translateY(-1.5px); }
  45%, 76% { transform: translateY(0); animation-timing-function: cubic-bezier(.6,0,.4,1); }
  96%, 100% { transform: translateY(-78px); }
}
@keyframes lxGlint { 0%, 30% { transform: translateX(0); opacity: 0; } 36% { opacity: 1; } 70% { transform: translateX(240px); opacity: 0; } 100% { opacity: 0; } }

/* Architectural: one clean, precise drop, a square stop, a measured line */
.lx-tiers.is-live .lx-tart--drop .a-fall { animation: lxDrop 8.4s infinite; animation-delay: -0.2s; }
.lx-tiers.is-live .lx-tart--drop .a-dim { animation: lxDim2 8.4s infinite; animation-delay: -0.2s; }
@keyframes lxDrop { 0%, 10% { transform: translateY(-84px); animation-timing-function: cubic-bezier(.65,0,.35,1); } 34%, 80% { transform: translateY(0); animation-timing-function: cubic-bezier(.65,0,.35,1); } 98%, 100% { transform: translateY(-84px); } }
@keyframes lxDim2 { 0%, 34% { stroke-dashoffset: 100; opacity: 0; } 38% { opacity: .55; } 52%, 80% { stroke-dashoffset: 0; opacity: .55; } 90%, 100% { opacity: 0; } }

/* ---------- the comparison table ---------- */
.lx-compare { width: 100%; margin: 26px 0 6px; border-collapse: collapse; font-size: .86rem; }
.lx-compare th, .lx-compare td { padding: 11px 10px; border-bottom: 1px solid var(--hair); text-align: center; }
.lx-compare thead th { font-family: "DM Mono", ui-monospace, monospace; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--ink-2); }
.lx-compare tbody th { text-align: left; font-weight: 400; color: var(--ink); }
.lx-compare .lx-c-comfort { background: rgba(168,112,40,.06); }
.lx-compare thead .lx-c-comfort { color: var(--brass-deep); }
.lx-tick { width: 16px; height: 16px; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.lx-dash { color: rgba(81,96,111,.38); }

/* ---------- on a phone: Sanctuary, Atelier, Architectural, as on a computer
   (owner, 9 October 2026), swiped through ---------- */
@media (max-width: 700px) {
  .lx-tiers.lx-tiers--v3 { display: flex; gap: 12px; align-items: stretch; padding: 18px clamp(14px,4vw,36px) 10px; scroll-padding-inline: clamp(14px,4vw,36px); }
  .lx-tier.lx-tier--v3 { flex: 0 0 82%; padding: 0; }
  .lx-tier--v3 .lx-tstage { padding: 18px 16px 0; }
  .lx-tier--v3 .lx-tbody { padding: 10px 18px 18px; }
  .lx-tier--v3[data-compact] .lx-feats li:nth-child(n+4) { display: none; }
  .lx-tier--v3 .lx-more2 { display: inline-block; }
  .lx-compare { font-size: .8rem; }
  .lx-compare th, .lx-compare td { padding: 9px 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-tiers.is-live .lx-tart *, .lx-tiers.is-live .lx-tier--signature::before { animation: none !important; }
  .lx-tier.lx-tier--v3 { transition: none; }
}

/* ============================================================
   8 October 2026 (owner): the blind, built in 3D in the rail; bottom-bar
   photo cards; a "?" guide at every step; any cloth front and back.
   ============================================================ */

/* ---------- the stage ---------- */
.lx-card--stage { padding-top: 0; overflow: hidden; }
.lx-stage {
  position: relative; margin: 0 -20px 18px; height: clamp(250px, 44vh, 400px);
  background: #EFE9E0; border-bottom: 1px solid var(--hair); overflow: hidden;
}
.lx-stage-gl, .lx-stage-gl canvas.lx-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lx-stage-gl canvas.lx-3d { cursor: grab; touch-action: pan-y; }
.lx-stage-gl canvas.lx-3d:active { cursor: grabbing; }
.lx-stage-cap {
  position: absolute; left: 12px; bottom: 12px; right: 12px; margin: 0; pointer-events: none;
  font: 400 .58rem/1.5 "DM Mono", ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; color: var(--navy);
  opacity: 0; transform: translateY(6px);
  transition: opacity .26s var(--out), transform .26s var(--out);
}
.lx-stage-cap.on { opacity: 1; transform: none; }
.lx-stage-cap:not(:empty)::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%;
  background: var(--brass); vertical-align: 1px;
}
.lx-stage-cap[data-keep]::before { background: var(--navy); }
.lx-stage-rooms { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 2px; }
.lx-stage-rooms:empty { display: none; }
.lx-stage-rooms span {
  padding: 0 6px; font: 400 .58rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
}
.lx-stage-rooms small { color: var(--ink-2); letter-spacing: .1em; }
.lx-stage-rooms button {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  border: 1px solid var(--hair-2); background: rgba(251,247,240,.82); color: var(--navy); cursor: pointer;
  transition: background-color .16s var(--out), transform .16s var(--out);
}
.lx-stage-rooms button:active { transform: scale(.94); }
.lx-stage-rooms .ic { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .lx-stage-rooms button:hover { background: var(--paper); } }
.lx-stage-hint {
  position: absolute; top: 14px; right: 12px; margin: 0; pointer-events: none;
  font: 400 .54rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  animation: lxRise .3s var(--out) both;
}
.lx-stage-open, .lx-stage-close { display: none; }
.lx-stage--flat .lx-flat { position: absolute; inset: 0; background: #EFE9E0 center / 160px repeat; }
.lx-stage--lost .lx-stage-gl { opacity: .35; }
.lx-railsum { margin: 0 0 14px; font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.lx-railbody .lx-railnote { margin-bottom: 16px; }

/* on a phone (9 October 2026): pinned at the top, in the sticky step bar,
   foldable; the whole screen when tapped */
@media (max-width: 1040px) {
  .lx-card--stage { display: block !important; overflow: visible; }
  .lx-stage { height: 150px; margin: 0; border: 1px solid var(--hair); border-radius: 2px; }
  .lx-stage[data-mode="strip"] .lx-stage-rooms, .lx-stage[data-mode="strip"] .lx-stage-hint { display: none; }
  .lx-stage[data-mode="strip"] .lx-stage-cap { left: 10px; bottom: 8px; right: 120px; font-size: .5rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lx-stage[data-mode="strip"] .lx-stage-gl canvas.lx-3d { pointer-events: none; }
  .lx-stage[data-mode="strip"] .lx-stage-open {
    display: flex; align-items: flex-end; justify-content: flex-end; gap: 6px;
    position: absolute; inset: 0; padding: 8px 10px; border: 0; background: none; cursor: pointer;
    font: 400 .5rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
  }
  .lx-stage-open .ic { width: 14px; height: 14px; color: var(--brass-deep); }
  .lx-stage-open:active { background: rgba(18,40,63,.04); }
  .lx-railbody { display: flex; align-items: center; gap: 14px; }
  .lx-railbody .lx-price { flex: 1 1 auto; min-width: 0; }
  .lx-railsum { display: none; }
  .lx-railbody .lx-railnote { display: none; }
  .lx-main { padding-bottom: 148px; }
}
@media (max-width: 400px) { .lx-railbody { display: block; } }
.lx-stage--full {
  position: fixed !important; inset: 0; z-index: 90; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  animation: lxStageIn .28s var(--out) both;
}
@keyframes lxStageIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.lx-stage--full .lx-stage-close {
  display: grid; place-items: center; position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--hair-2); background: rgba(251,247,240,.9); color: var(--navy); cursor: pointer;
}
.lx-stage--full .lx-stage-close .ic { width: 18px; height: 18px; }
.lx-stage--full .lx-stage-rooms { top: calc(14px + env(safe-area-inset-top)); left: 12px; }
.lx-stage--full .lx-stage-cap { bottom: calc(18px + env(safe-area-inset-bottom)); left: 16px; font-size: .62rem; }
.lx-stage--full .lx-stage-gl canvas.lx-3d { touch-action: none; }
@media (prefers-reduced-motion: reduce) {
  .lx-stage-cap { transition: opacity .2s linear; transform: none; }
  .lx-stage--full { animation: none; }
}

/* ---------- step 2: the bottom bar, as photo cards ---------- */
.lx-barpick { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }
.lx-barcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.lx-barcard {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 6px 6px 9px; text-align: left;
  border: 1px solid var(--hair); border-radius: 2px; background: var(--paper); color: var(--ink); cursor: pointer;
  font: inherit; transition: border-color .16s var(--out), box-shadow .16s var(--out), transform .16s var(--out);
}
.lx-barcard:active { transform: scale(.98); }
.lx-barcard[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
@media (hover: hover) and (pointer: fine) { .lx-barcard:hover { border-color: var(--hair-2); } .lx-barcard[aria-pressed="true"]:hover { border-color: var(--navy); } }
.lx-barcard-pic { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 1px; background: var(--bone-2); }
.lx-barcard-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lx-barcard-pic svg { display: block; width: 100%; height: 100%; padding: 18%; }
.lx-barcard b { font-weight: 500; font-size: .86rem; padding: 0 3px; }
.lx-barcard small {
  padding: 0 3px; font: 400 .52rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--brass-deep);
}
.lx-barsum { display: flex; align-items: center; gap: 14px; font-size: .9rem; }
.lx-barsum .lx-barcard-pic { flex: 0 0 64px; width: 64px; }

/* ---------- a "?" beside every option ---------- */
.lx-optwrap { display: grid; gap: 8px; min-width: 0; }
.lx-optwrap .lx-helpbox { margin: 0; }
.lx-optline { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lx-optline > .lx-opt { flex: 1 1 auto; min-width: 0; }
.lx-optline > .lx-help { flex: 0 0 auto; width: 26px; height: 26px; }
.lx-layers2 { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair); }
.lx-layers2 .lx-fablab { margin-bottom: 4px; }

/* ---------- the guide's pictures ---------- */
.lx-gfig { margin: 0 0 12px; }
.lx-gfig img { display: block; width: 100%; max-width: 520px; height: auto; border-radius: 2px; border: 1px solid var(--hair); background: var(--paper); }
.lx-gfig figcaption { margin-top: 8px; font-size: .82rem; }
.lx-helpbox .lx-gfig + p, .lx-helpbox p + p { margin-top: 10px; }
.lx-glist { margin: 10px 0 12px; padding-left: 18px; display: grid; gap: 6px; }
.lx-helpbox h2 .lx-help, h2 .lx-help { vertical-align: 3px; margin-left: 4px; }
/* the larger view sits over everything, the nav and the step bar included */
.lx-stagefull .lx-rail { z-index: 200 !important; }
.lx-stagefull .lx-stage--full { z-index: 200; }
.lx-barpick--compact { margin-top: 14px; padding-top: 12px; }
.lx-barpick--compact .lx-barcards { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.lx-barpick--compact .lx-barcard { padding: 4px 4px 7px; gap: 4px; }
.lx-barpick--compact .lx-barcard b { font-size: .78rem; }
.lx-barpick--compact .lx-barcard-pic { aspect-ratio: 1; }
/* a backdrop filter makes the bar the box a fixed child fills, so it goes while the view is large */
.lx-stagefull .lx-rail { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transform: none !important; }

/* the stage at the top on a phone (owner, 9 October 2026) */
.lx-stagetop { margin-top: 10px; }
.lx-stagetop[hidden] { display: none; }
.lx-stagetop .lx-stage { margin: 0; }
.lx-stagetop[data-folded] .lx-stage { display: none; }
.lx-stagetab { display: none; }
.lx-stagetop[data-folded] .lx-stagetab {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--hair-2); border-radius: 999px;
  background: var(--paper); color: var(--navy); cursor: pointer;
  font: 400 .54rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase;
}
.lx-stagetab .ic { width: 14px; height: 14px; color: var(--brass-deep); }
.lx-stage-fold { display: none; }
.lx-stage[data-mode="strip"] .lx-stage-fold {
  display: grid; place-items: center; position: absolute; top: 8px; right: 8px; z-index: 3; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid var(--hair-2); background: rgba(251,247,240,.88); color: var(--navy); cursor: pointer;
}
.lx-stage[data-mode="strip"] .lx-stage-fold .ic { width: 15px; height: 15px; }
.lx-stage[data-mode="strip"] .lx-stage-open { z-index: 2; }
.lx-stagefull .lx-step { z-index: 200 !important; background: none; }

/* one bottom bar for the whole home (9 October 2026) */
.lx-barpick--home { margin-top: 26px; padding: 18px 18px 16px; border: 1px solid var(--hair); border-radius: 2px; background: var(--paper); }
.lx-barnote { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; }
.lx-barnote .ic { flex: 0 0 auto; width: 17px; height: 17px; color: var(--brass-deep); margin-top: 1px; }
.lx-optional { font: 400 .54rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--hair-2); border-radius: 2px; padding: 3px 6px; vertical-align: 3px; }

/* ============================================================
   9 October 2026: the 3D view does the visualiser's work. Day or night,
   the coast or the city lights outside, how far down, the colours, and a
   zoom right up to the weave in the full view.
   ============================================================ */
.lx-stage-tools { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lx-stage-tools .lx-seg { background: rgba(251,247,240,.86); border-radius: 2px; }
.lx-stage-tools .lx-seg button { padding: 5px 9px; font-size: .74rem; }
.lx-stage-viewseg[hidden] { display: none !important; }
.lx-stage-drop, .lx-stage-zoomhint, .lx-stage-drawer { display: none; }
.lx-stage-hint { top: auto; bottom: 34px; right: 12px; }
.lx-stage[data-mode="strip"] .lx-stage-tools { display: none; }
/* the full view: the tools labelled, the slider, the hint, and the colours under it */
.lx-stage--full .lx-stage-tools { top: calc(14px + env(safe-area-inset-top)); right: 66px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
.lx-stage--full .lx-stage-tools .lx-seg button { padding: 7px 12px; font-size: .82rem; }
.lx-stage--full .lx-stage-drop { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 2px; background: rgba(251,247,240,.86);
  font: 400 .58rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.lx-stage--full .lx-stage-drop input { width: 120px; accent-color: var(--brass-deep); }
.lx-stage--full .lx-stage-gl { bottom: 196px; }
.lx-stage--full .lx-stage-cap { bottom: 208px; }
.lx-stage--full .lx-stage-hint { bottom: 232px; }
.lx-stage--full .lx-stage-zoomhint { display: block; position: absolute; left: 50%; bottom: 206px; transform: translateX(-50%); margin: 0; pointer-events: none;
  font: 400 .56rem/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(251,247,240,.82); padding: 5px 9px; border-radius: 2px; white-space: nowrap; }
.lx-stage--full .lx-stage-drawer { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 196px; overflow-y: auto;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--bone); border-top: 1px solid var(--hair-2); }
.lx-stage--full .lx-stage-drawer:empty { display: none; }
.lx-stage--full:has(.lx-stage-drawer:empty) .lx-stage-gl { bottom: 0; }
@media (max-width: 640px) {
  .lx-stage--full .lx-stage-tools { right: 62px; left: 12px; justify-content: flex-start; }
  .lx-stage--full .lx-stage-zoomhint { white-space: normal; width: 80%; text-align: center; }
}

/* the step bar goes while the view is large on a phone, where the stage is not inside it */
.lx-stagefull .lx-rail:not(:has(.lx-stage--full)) { visibility: hidden; }
.lx-stage-zoomhint .lx-touch { display: none; }
@media (hover: none) { .lx-stage-zoomhint .lx-touch { display: inline; } .lx-stage-zoomhint .lx-ptr { display: none; } }
@media (max-width: 640px) {
  /* under the tools, clear of the room's name */
  .lx-stage--full .lx-stage-zoomhint { top: calc(108px + env(safe-area-inset-top)); bottom: auto; }
}
/* waiting for the price book (10 October 2026) */
.lx-loadnote { margin: 28px 0; color: var(--ink-2); }
/* holds the first step's room while the prices arrive, so the footer does not jump (14 October 2026) */
.lx-loadnote:not([hidden]) { min-height: 60vh; }
.lx-loadnote[hidden] { display: none; }

/* Enlarge it, and change the colour, from the view itself (owner, 10 October
   2026). On a desktop the 3D view had no way to be made larger once the
   room's colour was chosen; now it says so in its corner, and a tap on the
   blind does the same. */
.lx-stage-colours { display: none; }
.lx-ptronly { display: none; }
@media (hover: hover) and (pointer: fine) { .lx-touchonly { display: none; } .lx-ptronly { display: inline; } }
.lx-stage[data-mode="rail"] .lx-stage-open,
.lx-stage[data-mode="rail"] .lx-stage-colours {
  display: inline-flex; align-items: center; gap: 6px; position: absolute; top: 10px; z-index: 2;
  padding: 6px 10px; border: 1px solid var(--hair-2); border-radius: 999px; background: rgba(251,247,240,.9); cursor: pointer;
  font: 400 .54rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--navy);
  transition: background-color .2s var(--out), border-color .2s var(--out);
}
.lx-stage[data-mode="rail"] .lx-stage-open { left: 10px; }
.lx-stage[data-mode="rail"] .lx-stage-colours { left: 10px; top: 42px; }
/* the room arrows sit under the two buttons in the rail, not on top of them */
.lx-stage[data-mode="rail"] .lx-stage-rooms { top: 76px; }
.lx-stage[data-mode="rail"] .lx-stage-open .ic, .lx-stage[data-mode="rail"] .lx-stage-colours .ic { width: 13px; height: 13px; color: var(--brass-deep); }
@media (hover: hover) and (pointer: fine) {
  .lx-stage[data-mode="rail"] .lx-stage-open:hover, .lx-stage[data-mode="rail"] .lx-stage-colours:hover { background: #fff; border-color: var(--navy); }
  .lx-stage[data-mode="rail"] .lx-stage-gl canvas { cursor: zoom-in; }
}
/* the colours under the larger view: what they are, and a moment's light when pointed at */
.lx-drawerhint { margin: 0 0 8px; font-size: .82rem; color: var(--ink-2); }
.lx-stage-drawer.lx-pulse { animation: lx-drawerpulse 1.1s var(--out) 1; }
@keyframes lx-drawerpulse { 0% { box-shadow: inset 0 3px 0 var(--brass-deep); } 100% { box-shadow: inset 0 3px 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .lx-stage-drawer.lx-pulse { animation: none; } }

/* Remotes at the last step (owner, 11 October 2026): for each motor brand,
   its remotes to pick one of, each with the owner's description behind a
   "?", and "No remote, I already have one" */
.lx-remotes { margin: 0 0 26px; }
.lx-remgroup { margin-top: 14px; padding: 14px 16px 12px; border: 1px solid var(--hair); border-radius: 2px; background: var(--paper); }
.lx-remgroup.is-missing { border-color: #B4532F; }
.lx-remlevel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; }
.lx-remlevel b { font: 600 1rem/1.2 inherit; color: var(--navy); }
.lx-remlevel span { font-size: .82rem; color: var(--ink-2); }
.lx-remote { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 10px; margin-top: 8px; }
.lx-remote-pick { display: grid; grid-template-columns: 56px 1fr 20px; align-items: center; gap: 14px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--hair-2); border-radius: 2px; background: #fff; color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .15s var(--out), box-shadow .15s var(--out); }
.lx-remote-pick::after { content: ""; width: 18px; height: 18px; border: 1.5px solid var(--hair-2); border-radius: 50%; box-sizing: border-box; }
.lx-remote.is-on .lx-remote-pick { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.lx-remote.is-on .lx-remote-pick::after { border: 5px solid var(--navy); }
@media (hover: hover) and (pointer: fine) { .lx-remote-pick:hover { border-color: var(--navy); } }
.lx-remote-pic { width: 56px; height: 56px; object-fit: cover; border-radius: 2px; background: #fff; border: 1px solid var(--hair); }
.lx-remote-pic--ic { display: grid; place-items: center; color: var(--brass-deep); }
.lx-remote-pic--ic .ic { width: 26px; height: 26px; }
.lx-remote-tx b { display: block; font-weight: 600; color: var(--ink); }
.lx-remote-price { font: 400 .62rem/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.lx-remq { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--hair-2); border-radius: 50%; background: #fff;
  color: var(--navy); font: 600 .9rem/1 inherit; cursor: pointer; }
.lx-remq[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (hover: hover) and (pointer: fine) { .lx-remq:hover { border-color: var(--navy); } }
.lx-remote-about { grid-column: 1 / -1; margin: 6px 0 2px; padding: 10px 12px; border-left: 2px solid var(--navy); background: rgba(18,40,63,.04);
  font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
.lx-remote--own .lx-remote-pick { grid-column: 1; }
@media (max-width: 520px) {
  .lx-remote-pick { grid-template-columns: 44px 1fr 18px; gap: 10px; padding: 8px 10px; }
  .lx-remote-pic { width: 44px; height: 44px; }
}
}
/* a choice for one level's rooms, when the build has more than one level (12 October 2026) */
.lx-barfor, .lx-hubfor { margin-left: 8px; font: 400 .6rem/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.lx-barpick--home + .lx-barpick--home { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hair); }
.lx-saving { display: block; margin-top: 4px; font-size: .8rem; color: #2C5233; }

/* ============================================================
   The tiles' starting price (owner, 12 October 2026)
   ============================================================ */
.lx-from { margin: 0 0 10px; font: 400 .62rem/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.lx-from b { font: 500 1.02rem/1 "Fraunces", Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--navy); margin-left: 4px; }
.lx-tier--signature .lx-from { color: rgba(244,238,229,.7); }
.lx-tier--signature .lx-from b { color: #D8A858; }

/* ============================================================
   VIEWSETTER EXCLUSIVE (owner, 12 October 2026): another world of
   Viewsetter. Last after Architectural; across the whole row on a
   desktop, the last card on a phone. Near-black, the light wordmark in
   a slow brass halo, motes of light drifting, a sweep of light; a tap
   opens it, and its button books the in-home consultation. Still for
   anyone who has asked for less motion.
   ============================================================ */
.lx-tier.lx-tier--x {
  grid-column: 1 / -1; position: relative; overflow: hidden; cursor: pointer; isolation: isolate;
  margin-top: 10px; padding: 0; border: 1px solid rgba(216,168,88,.35); border-radius: 3px; color: #F4EEE5;
  background: radial-gradient(90% 140% at 50% 0%, #10161F 0%, #070A0F 55%, #030405 100%);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.02);
}
.lx-x-world { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lx-x-aura {
  position: absolute; left: 50%; top: 38%; width: 140%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 18%, rgba(200,144,64,.16) 26%, transparent 34% 62%, rgba(216,168,88,.12) 72%, transparent 80% 100%);
  filter: blur(40px); opacity: .9;
}
.lx-x-sweep {
  position: absolute; inset: -20% -40%;
  background: linear-gradient(100deg, transparent 44%, rgba(244,238,229,.07) 50%, transparent 56%);
  transform: translateX(-70%);
}
.lx-x-motes i {
  position: absolute; left: var(--x); top: var(--y); width: 2px; height: 2px; border-radius: 50%;
  background: #E8C27A; box-shadow: 0 0 6px 1px rgba(232,194,122,.6); opacity: 0;
}
.lx-x-in { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 42px 28px 36px; }
.lx-x-halo {
  position: absolute; top: 18px; left: 50%; width: 300px; height: 150px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(216,168,88,.22), transparent 70%); filter: blur(6px);
}
.lx-x-logo { position: relative; width: min(260px, 70%); height: auto; margin: 0 0 6px; filter: drop-shadow(0 0 18px rgba(216,168,88,.25)); }
.lx-x-kick { font: 400 .58rem/1.4 "DM Mono", ui-monospace, monospace; letter-spacing: .32em; text-transform: uppercase; color: #D8A858; margin: 4px 0 10px; }
.lx-x-title { margin: 0; font: 300 clamp(1.7rem, 3.4vw, 2.5rem)/1.04 "Fraunces", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #F7F1E7; }
.lx-x-title span { display: inline-block; margin-top: 4px; font-style: italic; letter-spacing: .08em; color: #E3BE7C;
  background: linear-gradient(100deg, #C89040 0%, #F2D9A6 45%, #C89040 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 220% 100%; }
.lx-x-line { margin: 14px 0 0; font-size: .92rem; color: rgba(244,238,229,.66); letter-spacing: .02em; }
.lx-x-reveal { max-width: 460px; margin-top: 16px; }
.lx-x-reveal p { margin: 0 0 18px; font-size: .95rem; line-height: 1.6; color: rgba(244,238,229,.86); }
.lx-x-open, .lx-x-book {
  margin-top: 22px; padding: 12px 26px; border-radius: 999px; cursor: pointer; font: 500 .84rem/1 inherit; letter-spacing: .06em;
  transition: background-color .3s var(--out), color .3s var(--out), border-color .3s var(--out), transform .3s var(--out);
}
.lx-x-open { background: transparent; color: #F4EEE5; border: 1px solid rgba(216,168,88,.6); }
.lx-x-book { margin-top: 0; background: linear-gradient(100deg, #B9822F, #E1BC74 50%, #B9822F); background-size: 200% 100%; color: #0A0D12; border: 0; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .lx-x-open:hover { background: rgba(216,168,88,.14); border-color: #D8A858; }
  .lx-x-book:hover { transform: translateY(-1px); background-position: 100% 0; }
  .lx-tier--x:hover .lx-x-logo { filter: drop-shadow(0 0 26px rgba(216,168,88,.4)); }
}
.lx-tier--x.is-open { cursor: default; border-color: rgba(216,168,88,.6); }
.lx-tier--x.is-open .lx-x-reveal { animation: lxXReveal .9s var(--out) both; }
@keyframes lxXReveal { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: no-preference) {
  .lx-tiers.is-live .lx-x-aura { animation: lxXTurn 28s linear infinite; }
  .lx-tiers.is-live .lx-x-sweep { animation: lxXSweep 7s var(--inout) infinite; animation-delay: 1.5s; }
  .lx-tiers.is-live .lx-x-motes i { animation: lxXMote 7s ease-in-out infinite; animation-delay: var(--d); }
  .lx-tiers.is-live .lx-x-title span { animation: lxXShine 6s ease-in-out infinite; }
  .lx-tiers.is-live .lx-x-halo { animation: lxXBreathe 5.5s ease-in-out infinite; }
}
@keyframes lxXTurn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes lxXSweep { 0%, 55% { transform: translateX(-70%); } 85%, 100% { transform: translateX(70%); } }
@keyframes lxXMote { 0%, 100% { opacity: 0; transform: translateY(6px); } 40%, 60% { opacity: .9; } 50% { transform: translateY(-8px); } }
@keyframes lxXShine { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
@keyframes lxXBreathe { 0%, 100% { opacity: .65; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } }
@media (max-width: 700px) {
  .lx-tier.lx-tier--x { flex: 0 0 82%; margin-top: 0; scroll-snap-align: center; }
  .lx-x-in { padding: 34px 20px 28px; justify-content: center; min-height: 100%; }
}
/* the rail and the booking step on the Exclusive path */
.lx-price--x .big { font-size: 1.5rem; }
.lx-xnote { display: flex; gap: 14px; align-items: center; margin: 0 0 22px; padding: 16px 18px; border-radius: 3px; background: #0B0F15; color: #F4EEE5; }
.lx-xnote img { flex: 0 0 auto; width: 40px; height: auto; }
.lx-xnote b { display: block; font-weight: 600; color: #E3BE7C; }
.lx-xnote span { display: block; margin-top: 2px; font-size: .88rem; color: rgba(244,238,229,.78); }

/* the 3D picture's caption on phones sits under the picture, not across it,
   and the enlarge label has its own backing (design audit D5, 13 October 2026) */
@media (max-width: 1040px) {
  .lx-stage[data-mode="strip"] { overflow: visible; margin-bottom: 22px; }
  /* inside the sticky bar the room is padding, so the bar's own background sits behind the caption */
  .lx-stagetop .lx-stage[data-mode="strip"] { margin-bottom: 0; }
  .lx-stagetop:not([data-folded]) { padding-bottom: 22px; }
  .lx-stage[data-mode="strip"] .lx-stage-cap { top: calc(100% + 6px); bottom: auto; left: 0; right: 0; font-size: .52rem; }
  .lx-stage[data-mode="strip"] .lx-stage-open > span { padding: 4px 6px; border-radius: 2px; background: rgba(251,247,240,.9); }
}

/* small round buttons keep their look but take a thumb-sized tap: the
   invisible area round each is 44 px (design audit D9, 13 October 2026) */
.lx-help { position: relative; }
.lx-help::after, .lx-stage[data-mode="strip"] .lx-stage-fold::after, .lx-remq::after, .lx-stage-rooms button::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.lx-remq, .lx-stage-rooms button { position: relative; }

/* a window over 3000 mm: checked by hand before it is priced (13 October 2026) */
.lx-wide { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--hair-2); border-left: 3px solid var(--brass); border-radius: 2px; background: var(--paper); font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.lx-wide b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.lx-wide p { margin: 0; }
.lx-wide .lx-wide-list { margin-top: 8px; font: 400 .7rem/1.5 "DM Mono", ui-monospace, monospace; letter-spacing: .08em; color: var(--brass-deep); }
.lx-size[data-wide] input[data-size$=":w"], .lx-winrow[data-wide] input[data-ssize$=":w"] { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.lx-wide-est .lx-wide { margin-top: 0; }
.lx-wide-est .lx-linkbtn { margin-top: 10px; }

/* the motor, remote and hub guides (owner, 13 October 2026) */
.lx-mguide { display: grid; gap: 8px; margin-top: 10px; }
.lx-mcard { padding: 10px 12px; border: 1px solid var(--hair-2); border-radius: 2px; background: var(--paper); }
.lx-mcard.is-on { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.lx-mcard p { margin: 4px 0 0; }
.lx-mcard-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 !important; }
.lx-mcard-h b { color: var(--ink); font-weight: 600; }
.lx-mtag { font: 400 .6rem/1 "DM Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep); padding: 3px 6px; border: 1px solid var(--hair-2); border-radius: 2px; }
.lx-feat { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.lx-feat li { padding: 3px 8px; border-radius: 999px; background: rgba(18,40,63,.06); color: var(--ink); font-size: .78rem; }
.lx-remote-about p { margin: 0; }

/* Phones (14 October 2026, "optimise for mobile browsing"): the smallest
   labels are kept at 10px or more, so they can be read at arm's length.
   Same face, case and spacing; only the size floor moves. */
@media (max-width: 720px) {
  .lx-req { font-size: .625rem; }
  .lx-stage-cap, .lx-stage[data-mode="strip"] .lx-stage-cap { font-size: .625rem; letter-spacing: .14em; }
  .lx-stage-open .lx-touchonly { font-size: .625rem; }
}

/* standard sizes on a posted order, confirmed at the last step (14 October 2026) */
.lx-stdcard { border-left: 3px solid var(--brass); }
.lx-stdlist { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; font-size: .92rem; color: var(--ink-2); }
.lx-stdlist b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Exclusive: shown in homes within 100 km (14 October 2026) */
.lx-x-reveal .lx-x-where { margin: -6px 0 18px; font: 400 .66rem/1.5 "DM Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: #D9B26C; }