/* Layout and page-specific patterns for the website kit.
   Everything the design system owns — buttons, links, nav, pills, pricing tiers, hero, CTA,
   footer, badges, icons — comes from the component layer and its interactions.css.
   Only patterns with no component counterpart live here. */

/* The page ground is gray and carries the continuous line field (see components/backdrop.css).
   Section COPY sits directly on that ground — headings, eyebrows and lead paragraphs are set on
   the gray, unwrapped. White is reserved for things that are genuinely objects: cards, tables,
   the hero artifact, the nav island. Wrapping every band in a white sheet was wrong: it buried
   the line field under a continuous white column and turned the real cards into gray boxes
   nested inside white ones, which is the inverse of the reference. */
.lx-app{color:var(--text-body);min-height:100%}
.lx-section{padding-block:var(--space-section)}
.lx-section--tight{padding-block:var(--space-xxl)}
.lx-container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--page-pad)}
.lx-stack{display:flex;flex-direction:column;gap:var(--space-lg);align-items:flex-start}
.lx-hero-note{display:inline-flex;align-items:center;gap:7px}

/* trust strip — text on the open ground, bracketed by a crossed rule top and bottom, exactly
   the treatment the reference gives its "trusted by" strip */
.lx-trust-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-lg) var(--space-xl);padding-block:26px}
.lx-trust-item{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--text-body)}

/* grids */
.lx-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.lx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}

/* local card shells — page-specific shapes the system's Card does not cover */
.lx-card{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-card--outline{background:var(--canvas);border:1px solid var(--hairline);padding:var(--card-pad-tight)}
.lx-card--dark{background:var(--surface-dark);color:var(--on-dark)}
.lx-card--dark h3{color:var(--on-dark)}
.lx-card h3{font-size:var(--title-lg-size);font-weight:var(--title-lg-weight);line-height:1.3;letter-spacing:-0.3px;font-family:var(--font-ui)}
[dir="rtl"] .lx-card h3{letter-spacing:0}
.lx-card p{color:var(--text-muted);line-height:1.6;text-wrap:pretty}
.lx-ibox{width:40px;height:40px;border-radius:var(--radius-md);background:var(--surface-card);display:flex;align-items:center;justify-content:center}

/* audience door cards */
.lx-door{display:flex;flex-direction:column;gap:var(--space-md);align-items:flex-start;min-height:230px}
.lx-door h3{font-family:var(--font-display);font-size:26px;letter-spacing:-0.6px;font-weight:700}
[dir="rtl"] .lx-door h3{letter-spacing:0}
.lx-door a{margin-block-start:auto}

/* signature band */
.lx-sig{display:grid;grid-template-columns:220px 1fr;gap:var(--space-xl);align-items:start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-sig h3{font-family:var(--font-display);font-size:28px;letter-spacing:-0.5px;font-weight:700}
[dir="rtl"] .lx-sig h3{letter-spacing:0}

/* compatibility table */
.lx-table{width:100%;border-collapse:collapse;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.lx-table th,.lx-table td{padding:14px 20px;text-align:start;font-size:14px;border-bottom:1px solid var(--hairline-soft)}
.lx-table thead th{background:var(--surface-soft);font-weight:600;color:var(--ink);font-size:13px}
.lx-table tbody tr:last-child td{border-bottom:0}
.lx-table td:first-child{font-weight:500;color:var(--ink)}
/* Status dots are a design-system concern now — see .lxc-dot in components/interactions.css. */
.lx-meta{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text-muted)}

/* project cards */
.lx-proj{border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;background:var(--canvas);display:flex;flex-direction:column}
.lx-proj-body{padding:var(--card-pad-tight);display:flex;flex-direction:column;gap:8px}
.lx-proj-body h3{font-family:var(--font-ui);font-size:var(--title-sm-size);font-weight:600}
.lx-proj-r{font-size:14px;color:var(--brass-strong);font-weight:500}

/* developer stats */
/* No borders of its own: a container-width rule stops short of the rails and contradicts the
   sheet's full-width crossed boundaries. The band gets its rules from .lx-crossrule like every
   other band; this grid only spaces itself. */
.lx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);padding-block:var(--space-xl)}
.lx-stat-k{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-0.8px;color:var(--ink);line-height:1.1}
[dir="rtl"] .lx-stat-k{letter-spacing:0}
.lx-stat-v{font-size:14px;color:var(--text-muted);margin-block-start:8px;line-height:1.5}

/* downloadable file rows */
.lx-files{border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;background:var(--canvas)}
.lx-file{display:flex;align-items:center;gap:var(--space-md);padding:16px 20px;border-bottom:1px solid var(--hairline-soft);cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}
.lx-file:last-child{border-bottom:0}
.lx-file:hover{background:var(--surface-soft)}
.lx-file-n{font-size:15px;font-weight:500;color:var(--ink)}
.lx-file-m{font-size:13px;color:var(--text-fine);margin-inline-start:auto}

/* numbered process */
.lx-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.lx-step{display:flex;flex-direction:column;gap:12px;padding-block-start:var(--space-md);border-block-start:2px solid var(--ink)}
.lx-step-n{font-family:var(--font-mono);font-size:12px;color:var(--brass-strong);font-weight:600}
.lx-step h3{font-family:var(--font-ui);font-size:var(--title-sm-size);font-weight:600;color:var(--ink)}
.lx-step p{font-size:14px;color:var(--text-muted);line-height:1.55}

@media(max-width:1000px){
  .lx-grid-3,.lx-steps,.lx-stats{grid-template-columns:1fr 1fr}
  .lx-sig{grid-template-columns:1fr}
}

/* ---- phase-1 page patterns ---- */

.lx-eyebrow-sm{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-strong)}
.lx-fine{font-size:14px;color:var(--text-fine);max-width:62em;line-height:1.6;margin:0}
.lx-rule{height:1px;border:0;margin:0;background:var(--hairline)}

/* honest / exclusion lists */
.lx-honest{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 32px}
.lx-honest li{display:flex;gap:12px;font-size:15px;line-height:1.55;color:var(--text-body)}
.lx-honest img{flex:none;margin-block-start:3px;opacity:.55}
.lx-honest--dark{grid-template-columns:1fr;gap:12px}
.lx-honest--dark li{color:var(--on-dark-soft);font-size:15px}
.lx-honest--dark img{opacity:.9}
.lx-excl{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-notin{border-block-start:1px solid var(--hairline);padding-block-start:16px}
.lx-notin .lx-honest{grid-template-columns:1fr;gap:10px}
.lx-notin .lx-honest li{font-size:14px;color:var(--text-muted)}

/* the "why there is no price" band */
.lx-honesty{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl);background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad);align-items:start}
.lx-honesty-h{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-0.9px;color:var(--on-dark);margin:0;line-height:1.15}
[dir="rtl"] .lx-honesty-h{letter-spacing:0}
.lx-honesty-p{font-size:16px;line-height:1.65;color:var(--on-dark-soft);margin:0;text-wrap:pretty}

/* price calculator */
.lx-calc{display:grid;grid-template-columns:1.35fr 1fr;gap:var(--space-xl);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-calc-controls{display:flex;flex-direction:column;gap:var(--space-lg)}
.lx-calc-row{display:flex;flex-direction:column;gap:10px}
.lx-calc-label{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-soft)}
.lx-chips{display:flex;flex-wrap:wrap;gap:8px}
.lx-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:13px;font-weight:500;color:var(--text-muted);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-pill);padding:7px 14px;cursor:pointer;transition:all var(--duration-fast) var(--ease-standard)}
.lx-chip:hover{border-color:var(--brass-hairline)}
.lx-chip[aria-pressed="true"]{background:var(--brass-soft);border-color:var(--brass-hairline);color:var(--brass-strong)}
.lx-chip img{opacity:.7}
.lx-calc-out{background:var(--surface-card);border-radius:var(--radius-md);padding:var(--card-pad-tight);display:flex;flex-direction:column;gap:10px;justify-content:center}
.lx-calc-out-k{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-soft)}
.lx-calc-price{font-family:var(--font-display);font-size:40px;font-weight:700;letter-spacing:-1.4px;color:var(--ink);line-height:1.05}
[dir="rtl"] .lx-calc-price{letter-spacing:0}
.lx-calc-fine{font-size:13px;line-height:1.55;color:var(--text-fine);margin:0}

/* kit detail cards */
.lx-kitcard{display:flex;flex-direction:column;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.lx-kitcard-body{display:flex;flex-direction:column;gap:14px;padding:var(--card-pad-tight);flex:1}
.lx-kit-price{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-0.8px;color:var(--ink);line-height:1.1}
[dir="rtl"] .lx-kit-price{letter-spacing:0}
.lx-kit-name{font-family:var(--font-ui);font-size:var(--title-lg-size);font-weight:600;letter-spacing:-0.3px;color:var(--ink)}
[dir="rtl"] .lx-kit-name{letter-spacing:0}
.lx-feat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lx-feat li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:var(--text-body)}
.lx-feat img{flex:none;margin-block-start:2px}

/* products factory band */
.lx-factory{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xxl);align-items:center}

/* compatibility verification stamp */
.lx-stamp{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--card-pad);display:flex;flex-direction:column;gap:12px}
.lx-stamp-k{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-soft)}
.lx-stamp-date{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-1.1px;color:var(--ink);line-height:1.05}
[dir="rtl"] .lx-stamp-date{letter-spacing:0}
.lx-stamp-on{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--text-muted);line-height:1.5}
.lx-stamp-legend{display:flex;flex-wrap:wrap;gap:12px 20px}

/* projects */
.lx-filterbar{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}
.lx-proj-more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;margin-block-start:4px;align-self:flex-start}
.lx-proj-more:hover{color:var(--brass-strong)}
.lx-spec{margin:0;padding-block-start:14px;border-block-start:1px solid var(--hairline);display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:13px}
.lx-spec dt{color:var(--muted-soft);font-weight:600;white-space:nowrap}
.lx-spec dd{margin:0;color:var(--text-body);line-height:1.5}

@media(max-width:1000px){
  .lx-honesty,.lx-calc,.lx-factory,.lx-honest{grid-template-columns:1fr}
}

/* ---- functional scope ---- */
/* The role chain keeps its own numbered treatment — a plate there would compete. */
.lx-cap-i{width:38px;height:38px;border-radius:var(--radius-md);background:var(--surface-card);display:flex;align-items:center;justify-content:center;flex:none}

/* ---- manufacturer + integrator chain ---- */
.lx-roles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.lx-role{display:flex;flex-direction:column;gap:10px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-role-n{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--brass-strong)}
.lx-role h3{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);margin:0}
.lx-role p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0;text-wrap:pretty}
.lx-third{display:grid;grid-template-columns:260px 1fr;gap:var(--space-xl);align-items:start;background:var(--canvas);border:1px solid var(--brass-hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-third h3{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-0.6px;color:var(--ink);margin:0;line-height:1.2}
[dir="rtl"] .lx-third h3{letter-spacing:0}
.lx-third p{font-size:16px;line-height:1.65;color:var(--text-body);margin:0;text-wrap:pretty}

@media(max-width:1000px){
  .lx-roles{grid-template-columns:1fr 1fr}
  .lx-third{grid-template-columns:1fr}
}

/* ---- closing CTA ----
   One rule instead of seven inline overrides. The card needs air above it: it used to sit on
   paddingBlockStart:0 and butted straight into the previous coloured band. */
.lx-closing{padding-block:var(--space-xxl) var(--space-section)}
.lx-closing .lx-container{position:relative;z-index:1}
/* CtaBand paints its own white card on the ground. */
.lx-closing .lxc-cta-title{letter-spacing:-1px}

/* ---- media plates ----
   One treatment for every image area: warm ground, the same drawing-sheet grid as the hero,
   and a warm currentColor so image-slot's own dashed ring and caption inherit brand tone
   rather than a cool gray. Filled or empty, all plates read as one family. */
.lx-slot{position:relative;overflow:hidden;background:var(--surface-card);color:var(--muted);
  background-image:linear-gradient(to bottom,var(--hairline-soft) 1px,transparent 1px),linear-gradient(to right,var(--hairline-soft) 1px,transparent 1px);
  background-size:32px 32px;background-position:center center}
.lx-slot image-slot{position:absolute;inset:0;width:100%;height:100%}
.lx-slot-tag{position:absolute;inset-block-start:10px;inset-inline-start:10px;z-index:3;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brass-strong);background:var(--canvas);border:1px solid var(--brass-hairline);
  border-radius:var(--radius-xs);padding:3px 7px;pointer-events:none}

/* ---- orbital diagram wrapper ---- */
.lx-orbitwrap{display:flex;flex-direction:column;align-items:stretch}

/* The language select, shown instead of pills once there are more than two languages. Built on a
   real <select> so it inherits the platform picker on a phone, with the native control laid over
   the visible one at zero opacity \u2014 that keeps keyboard and screen-reader behaviour for free.
   Metrics match a ghost Button (40px, radius-md, --button-size) so the nav bar keeps one rhythm. */
.lx-langsel{position:relative;display:inline-flex;align-items:center;gap:6px;height:40px;padding-inline:14px;border-radius:var(--radius-md);background:var(--surface-soft);border:1px solid var(--hairline);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard)}
.lx-langsel:hover{border-color:var(--brass-hairline)}
.lx-langsel:focus-within{outline:2px solid var(--brass-strong);outline-offset:2px}
.lx-langsel-v{font-family:var(--font-ui);font-size:var(--button-size);font-weight:var(--button-weight);line-height:1;color:var(--ink)}
.lx-langsel img{opacity:.55}
.lx-langsel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-family:var(--font-ui);font-size:16px;border:0;-webkit-appearance:none;appearance:none}

/* WhatsApp in the nav bar. Ghost-button metrics, but an <a> rather than a Button because it has
   to be a real link \u2014 on a phone that is what opens the app. The logo keeps its own colour: it is
   a vendor mark, so it is neither tinted to the palette nor inverted on dark. */
.lx-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding-inline:16px;border-radius:var(--radius-md);background:transparent;border:1px solid transparent;font-family:var(--font-ui);font-size:var(--button-size);font-weight:var(--button-weight);line-height:1;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background var(--duration-fast) var(--ease-standard)}
.lx-wa:hover{background:var(--surface-soft);color:var(--ink)}
.lx-wa:focus-visible{outline:2px solid var(--brass-strong);outline-offset:2px}
.lx-wa img{display:block;flex:none}
@media(max-width:900px){.lx-wa span,.lx-wa{padding-inline:12px}}

/* ---- the day band ----
   A dark CARD inside a normal section, not a full-bleed stripe — every other dark moment on this
   site (.lx-night, .lx-legend, .lx-standard, .lx-askcard) is a contained block on the light sheet,
   and a band that bleeds to the viewport edge breaks that rhythm and reads as a different site.
   The five columns are STAGGERED on a shallow curve (low at dawn, peak mid-morning, falling into
   night) so the row itself draws the day rather than reading as five equal cards. The stagger
   drops below 1100px, where the columns stack anyway. */
.lx-day{display:flex;flex-direction:column;gap:30px;background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad);color:var(--on-dark)}
.lx-day-h{display:flex;flex-direction:column;gap:12px;max-width:44em}
.lx-day-h h2{margin:0;font-family:var(--font-display);font-size:40px;font-weight:700;letter-spacing:-1.3px;line-height:1.1;color:var(--on-dark);text-wrap:balance}
[dir="rtl"] .lx-day-h h2{letter-spacing:0}
.lx-day-lede{margin:0;font-family:var(--font-ui);font-size:18px;line-height:1.65;color:var(--on-dark-soft);text-wrap:pretty}
/* --brass-strong is the light-ground variant; inverted surfaces take --brass, same as the legend
   and marker bands. */
.lx-day .lx-eyebrow-sm{color:var(--brass)}
.lx-daygrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;width:100%;align-items:start}
.lx-daycol{display:flex;flex-direction:column;gap:10px}
.lx-daycol:nth-child(1){margin-block-start:40px}
.lx-daycol:nth-child(2){margin-block-start:0}
.lx-daycol:nth-child(3){margin-block-start:18px}
.lx-daycol:nth-child(4){margin-block-start:52px}
.lx-daycol:nth-child(5){margin-block-start:76px}
/* The slot is authored for light grounds — its graticule is drawn in --hairline-soft, which on
   near-black reads as a bright grid. Repaint the fill and redraw the lines in the dark hairline. */
.lx-daycol .lx-slot{background:rgba(255,255,255,0.04);border-color:var(--hairline-dark);color:var(--on-dark-soft);
  background-image:linear-gradient(to bottom,var(--hairline-dark) 1px,transparent 1px),linear-gradient(to right,var(--hairline-dark) 1px,transparent 1px)}
.lx-daycol .lx-slot *{color:var(--on-dark-soft)}
.lx-day-time{font-family:var(--font-mono);font-size:22px;letter-spacing:0.02em;color:var(--brass);line-height:1;margin-block-start:4px}
.lx-daycol h3{margin:0;font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1.35;color:var(--on-dark)}
.lx-daycol p{margin:0;font-family:var(--font-ui);font-size:13.5px;line-height:1.6;color:var(--on-dark-soft);text-wrap:pretty}
.lx-day-f{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-lg) var(--space-xxl);width:100%;padding-block-start:var(--space-lg);border-block-start:1px solid var(--hairline-dark)}
.lx-day-f p{margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.6;color:var(--on-dark);max-width:38em;text-wrap:pretty}
@media(max-width:1100px){
  .lx-daygrid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .lx-daycol{margin-block-start:0!important}
}
@media(max-width:1000px){.lx-day-h h2{font-size:30px;letter-spacing:-0.9px}}

/* Per-function moments. The day band proves the idea on a whole house; this proves it one function
   at a time, because a visitor reading about shading wants shading's own hour and not the hall's.
   Same grammar — hour, then the thing that happens — kept deliberately terse so eight of them in
   a row still scan. Sits under the orbit, which names the functions but cannot make them concrete. */
.lx-fnmoments{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-md);width:100%}
@media(max-width:1100px){.lx-fnmoments{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lx-fnmoments{grid-template-columns:1fr}}
.lx-fnmoment{display:flex;flex-direction:column;gap:8px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:16px 18px}
.lx-fnmoment-h{display:flex;align-items:center;gap:10px}
.lx-fnmoment-t{font-family:var(--font-mono);font-size:15px;color:var(--brass-strong);line-height:1}
.lx-fnmoment-n{font-family:var(--font-ui);font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted-soft);margin-inline-start:auto}
.lx-fnmoment h4{margin:0;font-family:var(--font-ui);font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.lx-fnmoment p{margin:0;font-family:var(--font-ui);font-size:13.5px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}

/* The range strip. OWN product photography — our mechanisms and keys, including the parts built
   under contract for Centrsvet, whose catalogue the shots come from. Plain grounds, so each sits
   in a white box; the `em` line carries the model code, which is a spec, not a credit. */
.lx-integrated{display:flex;flex-direction:column;gap:16px;padding:var(--card-pad-tight);background:var(--surface-soft);border:1px solid var(--hairline);border-radius:var(--radius-lg)}
.lx-integrated-h{display:flex;flex-direction:column;gap:4px}
.lx-integrated-h b{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-0.4px;color:var(--ink)}
[dir="rtl"] .lx-integrated-h b{letter-spacing:0}
.lx-integrated-h span{font-family:var(--font-ui);font-size:14px;line-height:1.55;color:var(--text-muted)}
.lx-integrated-g{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-md)}
@media(max-width:1000px){.lx-integrated-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.lx-integrated-g{grid-template-columns:1fr}}
.lx-intcard{margin:0;display:flex;flex-direction:column;gap:12px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:14px}
.lx-intcard-m{aspect-ratio:16 / 9;background:#fff;border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center}
.lx-intcard-m img{width:100%;height:100%;object-fit:contain;display:block}
/* The failed-shot state. Reads as a deliberate empty frame rather than a broken image: same box,
   soft ground, the model code so the gap names what belongs in it. */
.lx-intcard-m--empty{flex-direction:column;gap:7px;background:var(--surface-soft);border:1px dashed var(--plate-screw);color:var(--muted-soft)}
.lx-intcard-m--empty em{font-family:var(--font-mono);font-size:11px;font-style:normal;letter-spacing:.04em;color:var(--muted-soft)}
.lx-intcard figcaption{display:flex;flex-direction:column;gap:4px}
.lx-intcard b{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.lx-intcard span{font-family:var(--font-ui);font-size:13.5px;line-height:1.55;color:var(--text-muted);text-wrap:pretty}
.lx-intcard em{font-family:var(--font-mono);font-size:11px;font-style:normal;letter-spacing:0.04em;color:var(--muted-soft);margin-block-start:2px}

/* ---- platform orbit ----
   Our hardware at the centre, the two buses on the inner ring, the platforms those buses reach on
   the outer ring. Square by aspect-ratio so the rings stay circles at any width; nodes are placed
   by percentage from the component, so the geometry survives a resize with no JS.

   The marks are the REAL vendor logos, copied from home-assistant/brands into
   assets/platforms/ — never hand-drawn approximations, which are both a legal problem and worse
   design than none. `PlatformMark` falls back to a monogram if a file fails to load. */
.lx-orbit2{position:relative;width:100%;max-width:460px;aspect-ratio:1;margin:0 auto}
.lx-orbit2-ring{position:absolute;border-radius:50%;border:1px solid var(--hairline);background:radial-gradient(circle at 50% 0%,var(--surface-soft),transparent 62%)}
.lx-orbit2-ring--out{inset:5%}
.lx-orbit2-ring--in{inset:25%}
.lx-orbit2-n{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;width:112px;text-align:center;z-index:2}
.lx-orbit2-n>span{font-family:var(--font-ui);font-size:12.5px;font-weight:600;line-height:1.25;color:var(--ink);text-wrap:balance}
.lx-orbit2-n--bus>span{font-family:var(--font-mono);font-weight:400;font-size:11.5px;letter-spacing:.06em;color:var(--text-muted)}
.lx-pmark{display:flex;align-items:center;justify-content:center;background:var(--canvas);border:1px solid var(--hairline);box-shadow:var(--shadow-sm);overflow:hidden;flex:none;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.lx-pmark img{width:72%;height:72%;object-fit:contain;display:block}
.lx-pmark b{font-family:var(--font-display);font-weight:700;letter-spacing:-0.5px;color:var(--ink)}
.lx-orbit2-n:hover .lx-pmark{border-color:var(--brass-hairline);box-shadow:var(--shadow-md)}
.lx-orbit2-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--surface-dark);color:var(--on-dark);border-radius:var(--radius-lg);padding:16px 22px;box-shadow:var(--shadow-lg)}
.lx-orbit2-c-m{font-family:var(--font-display);font-size:13px;color:var(--brass);line-height:1}
.lx-orbit2-c b{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:.10em;line-height:1.2}
.lx-orbit2-c-s{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--on-dark-soft);text-align:center}
@media(max-width:560px){
  .lx-orbit2{max-width:340px}
  .lx-orbit2-n{width:86px;gap:5px}
  .lx-orbit2-n>span{font-size:11px}
}
/* Platform column headers: the mark above the name, so the header reads at a glance. */
.lx-th-p{display:inline-flex;flex-direction:column;align-items:flex-start;gap:7px}

/* The orbit paired with the sentence that explains it. Centred rails, per the site's two-rail
   rule; the diagram leads because it is the thing a visitor understands without reading. */
.lx-cmporbit{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:center;width:100%}
@media(max-width:900px){.lx-cmporbit{grid-template-columns:1fr}}
.lx-cmporbit-t{display:flex;flex-direction:column;gap:10px}
.lx-cmporbit-t p{margin:0;font-family:var(--font-ui);font-size:17px;line-height:1.65;color:var(--text-body);text-wrap:pretty;max-width:34em}

/* ---- the region bar ----
   Dark, full-width, above the nav — the one element on the site allowed to sit outside the sheet,
   because it is chrome rather than content and it disappears for good after one answer. Small and
   quiet on purpose: this is an offer, not an announcement. */
.lx-suggest{background:var(--surface-dark);color:var(--on-dark)}
.lx-suggest-in{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);padding-block:10px}
.lx-suggest-t{font-family:var(--font-ui);font-size:13.5px;line-height:1.4;color:var(--on-dark)}
.lx-suggest-y,.lx-suggest-n{font-family:var(--font-ui);font-size:13.5px;font-weight:600;background:none;border:0;padding:5px 0;cursor:pointer}
.lx-suggest-y{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.lx-suggest-y:hover{color:var(--on-dark)}
.lx-suggest-n{color:var(--on-dark-soft);font-weight:400;margin-inline-start:auto}
.lx-suggest-n:hover{color:var(--on-dark)}
.lx-suggest-y:focus-visible,.lx-suggest-n:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:var(--radius-xs)}
@media(max-width:700px){.lx-suggest-n{margin-inline-start:0}}

/* ---- function pages ---- */
/* The fact-band frame. It held a false-colour section (contain, so the sheet stayed visible) and
   now holds a photograph, which must fill the frame — object-fit:cover, or a 4:3 photo in a 4:3
   box still letterboxes on a rounding difference. */
.lx-slot--plan{aspect-ratio:4 / 3;background:var(--surface-soft);background-image:none;display:block;overflow:hidden}
.lx-slot--plan img{display:block;width:100%;height:100%;object-fit:cover}
/* A drawing, not a photograph: show the whole sheet on its own ground rather than cropping it. */
.lx-slot--fit{background:var(--canvas)}
.lx-slot--fit img{object-fit:contain}
/* Spec rows: a two-column definition list, the plainest honest way to show four facts. */
.lx-specs{margin:0;width:100%;display:grid;grid-template-columns:auto 1fr;gap:0;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.lx-specs dt{padding:14px 20px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink);background:var(--surface-soft);border-bottom:1px solid var(--hairline-soft);white-space:nowrap}
.lx-specs dd{margin:0;padding:14px 20px;font-size:14px;color:var(--text-body);border-bottom:1px solid var(--hairline-soft)}
/* Six short facts read better as three pairs across than as one six-row ladder. */
.lx-specs--3{grid-template-columns:auto 1fr auto 1fr auto 1fr}
@media(max-width:1000px){.lx-specs--3{grid-template-columns:auto 1fr auto 1fr}}
@media(max-width:700px){.lx-specs--3{grid-template-columns:auto 1fr}}
/* The one place prose is allowed to run as prose: the positioning paragraphs on the company
   page. Measure held near 60 characters, which is where this face stops being comfortable. */
.lx-prose{display:flex;flex-direction:column;gap:var(--space-md);max-width:40em}
.lx-prose p{margin:0;font-family:var(--font-ui);font-size:17px;line-height:1.65;color:var(--text-body);text-wrap:pretty}
.lx-specs dt:last-of-type,.lx-specs dd:last-of-type{border-bottom:0}

/* Sibling-function links at the foot of a function page. */
.lx-solcard{display:flex;align-items:center;gap:var(--space-md);width:100%;text-align:start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:18px 20px;cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.lx-solcard:hover{border-color:var(--brass-hairline);box-shadow:var(--shadow-md)}
.lx-solcard:focus-visible{outline:2px solid var(--brass-strong);outline-offset:2px}
/* The icon box is gone — these cards carry an IconPlate, which brings its own surface. */
.lx-solcard-b{display:flex;flex-direction:column;gap:3px;min-width:0}
.lx-solcard-t{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.lx-solcard-d{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--brass-strong)}
/* Direct child only. As a descendant selector this also matched the glyph inside the card's
   IconPlate — the plate's img is the last element child there, after the four screws — and pushed
   it off-centre with margin-inline-start:auto. */
.lx-solcard > img{margin-inline-start:auto;flex:none}

/* ---- the function index ----
   Same card as everywhere else at rest; hover is where colour arrives. The hue map and the plate
   treatment live in components/interactions.css under data-fn-color, shared with the orbit and the
   integration map — all that is added here is the card's own border tint, glow and lift. */
.lx-fnindex .lx-solcard{transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.lx-fnindex .lx-solcard:hover,.lx-fnindex .lx-solcard:focus-visible{
  border-color:color-mix(in oklch,var(--fn,var(--brass)) 42%,transparent);
  box-shadow:0 14px 34px -14px color-mix(in oklch,var(--fn,var(--brass)) 55%,transparent),var(--shadow-sm);
  transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.lx-fnindex .lx-solcard:hover{transform:none}}


/* ---- assurance plate ----
   The one sentence that answers "what happens if you disappear". It was set as loose fine print
   on the ground, which is the treatment for a footnote — this is the opposite of a footnote, so
   it gets a real card: the documented canvas + 1px hairline treatment, with the brass-soft icon
   box carrying the emphasis. NOT an accent left border — that is a banned motif here, and brass
   is rationed to the closed list in readme.md. */
.lx-assurance{display:flex;align-items:center;gap:var(--space-lg);width:100%;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:22px var(--card-pad-tight)}
.lx-assurance-i{width:44px;height:44px;flex:none;border-radius:var(--radius-md);background:var(--brass-soft);display:flex;align-items:center;justify-content:center}
.lx-assurance p{margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.55;color:var(--text-body);text-wrap:pretty}
@media(max-width:700px){.lx-assurance{align-items:flex-start;gap:var(--space-md)}}

/* Product page. A split band is prose on one rail and a photo plate on the other; the flip
   modifier puts the plate first for the one band that reads better opened from the image.
   The two rails are CENTRED against each other: a three-row stack of cards beside a 4:3 plate
   leaves one rail short, and top-aligning them hangs the short rail off the top edge with a hole
   beneath it. Every text-and-photo split on this site centres. */
.lx-prodsplit{display:grid;grid-template-columns:1.05fr 1fr;gap:var(--gutter);align-items:center}
/* .lx-stack is flex-start by default so short blocks keep their natural width; inside a split
   rail the cards are the rail, so they stretch. */
.lx-prodsplit>.lx-stack{align-self:stretch;align-items:stretch}
.lx-prodsplit>.lx-stack>*{width:100%}
/* One rail is half a page wide — the two-up honest list would be two words per line there. */
.lx-prodsplit .lx-honest{grid-template-columns:1fr;gap:12px}
@media(max-width:960px){.lx-prodsplit{grid-template-columns:1fr}.lx-prodsplit--flip>*:first-child{order:2}}
.lx-objidx{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media(max-width:960px){.lx-objidx{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lx-objidx{grid-template-columns:1fr}}
.lx-obj{display:flex;flex-direction:column;gap:12px;align-items:flex-start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight);position:relative}
.lx-obj-n{font-family:var(--font-mono,var(--font-ui));font-size:11px;letter-spacing:.14em;color:var(--muted-soft)}
.lx-obj h3{margin:0;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-0.3px;color:var(--ink);line-height:1.2}
.lx-obj p{margin:0;font-family:var(--font-ui);font-size:14px;line-height:1.55;color:var(--text-muted);flex:1}
.lx-obj-tag{font-family:var(--font-ui);font-size:12.5px;font-weight:600;color:var(--brass-strong);border-block-start:1px solid var(--hairline);padding-block-start:10px;width:100%}
.lx-fins{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
@media(max-width:860px){.lx-fins{grid-template-columns:repeat(2,1fr)}}
.lx-fin{display:flex;flex-direction:column;gap:14px}
.lx-fin-sw{display:block;height:120px;border-radius:var(--radius-lg);border:1px solid var(--hairline)}
.lx-fin h4{margin:0 0 6px;font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-0.2px}
.lx-fin p{margin:0;font-family:var(--font-ui);font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.lx-fam{display:flex;align-items:center;gap:var(--space-md);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:18px var(--card-pad-tight)}
.lx-fam-b{flex:1;min-width:0}
.lx-fam h4{margin:0 0 4px;font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-0.2px}
.lx-fam p{margin:0;font-family:var(--font-ui);font-size:13.5px;line-height:1.5;color:var(--text-muted)}
.lx-fam-u{font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.4px;flex:none}
.lx-specgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;background:var(--canvas)}
@media(max-width:860px){.lx-specgrid{grid-template-columns:1fr}}
.lx-specrow{display:flex;flex-direction:column;gap:6px;padding:22px var(--card-pad-tight);border-block-end:1px solid var(--hairline);border-inline-end:1px solid var(--hairline)}
.lx-specrow-k{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-soft)}
.lx-specrow-v{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-0.6px;color:var(--ink);line-height:1.15}
.lx-specrow p{margin:0;font-family:var(--font-ui);font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.lx-inside{display:flex;gap:var(--space-md);align-items:flex-start;padding-block-end:14px;border-block-end:1px solid var(--hairline)}
.lx-inside:last-child{border-block-end:0;padding-block-end:0}
.lx-inside-n{font-family:var(--font-ui);font-size:12px;font-weight:600;letter-spacing:.12em;color:var(--brass-strong);padding-block-start:3px;flex:none}
.lx-inside h4{margin:0 0 4px;font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-0.2px}
.lx-inside p{margin:0;font-family:var(--font-ui);font-size:14px;line-height:1.55;color:var(--text-muted)}

.lx-cmpkey{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-lg);padding:14px var(--card-pad-tight);background:var(--surface-soft);border:1px solid var(--hairline);border-radius:var(--radius-md)}
.lx-cmpkey-d{display:inline-flex;align-items:center;gap:7px;margin-inline-start:auto;font-family:var(--font-ui);font-size:12.5px;color:var(--muted-soft)}

/* The closing capture band. Two rails: the argument for writing on one, the three fields on the
   other. A button alone never converted — the page has to hold the place where the name goes. */
/* The closing capture band. Two rails: the argument for writing on one, the three fields on the
   other. A button alone never converted — the page has to hold the place where the name goes.
   The form rail is CENTRED against the argument rail, not top-aligned: the left rail runs three
   steps plus an email line and the form is half that height, so aligning their top edges left the
   panel hanging in the top corner with a void under it and the band read as two loose halves. */
.lx-capture{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--space-xl);align-items:center;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
@media(max-width:900px){.lx-capture{grid-template-columns:1fr;gap:var(--space-xl);padding:var(--card-pad-tight)}}
.lx-capture-l{display:flex;flex-direction:column;gap:14px}
.lx-capture-l h2{margin:0;font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-0.9px;line-height:1.12;color:var(--ink);text-wrap:pretty}
[dir="rtl"] .lx-capture-l h2{letter-spacing:0}
@media(max-width:640px){.lx-capture-l h2{font-size:27px;letter-spacing:-0.5px}}
.lx-capture-l>p{margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.6;color:var(--text-muted);max-width:34em;text-wrap:pretty}
.lx-capture-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:0}
.lx-capture-steps li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;padding-block:14px;border-block-start:1px solid var(--hairline-soft)}
.lx-capture-steps li span{grid-row:1 / span 2;font-family:var(--font-mono,var(--font-ui));font-size:11px;letter-spacing:.12em;color:var(--brass-strong);padding-block-start:4px}
.lx-capture-steps li b{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-0.2px}
.lx-capture-steps li em{font-family:var(--font-ui);font-style:normal;font-size:14px;line-height:1.55;color:var(--text-muted)}
.lx-capture-alt{font-family:var(--font-ui);font-size:14px;color:var(--text-muted);padding-block-start:4px}
.lx-capture-alt a{color:var(--brass-strong);text-decoration:none;font-weight:600}
.lx-capture-alt a:hover{text-decoration:underline}
/* Contact channels. A single email address in the corner of the band was the only way to reach a
   person without filling a form — and for a house being built, most people would rather send one
   WhatsApp message than type their name into anything. Three real channels, WhatsApp first
   because it is the one that gets answered fastest. */
.lx-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;width:100%;max-width:640px}
@media(max-width:760px){.lx-channels{grid-template-columns:1fr}}
/* In the capture band the channels sit on a half-width rail, where three fixed columns broke a
   phone number across three lines. Auto-fit instead: three across when the rail allows it, two or
   one when it does not. */
.lx-capture-l .lx-channels{grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
.lx-chan{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md);padding:13px 14px;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.lx-chan:hover{border-color:var(--brass-hairline);box-shadow:var(--shadow-sm)}
.lx-chan:focus-visible{outline:2px solid var(--brass-strong);outline-offset:2px}
.lx-chan-i{width:34px;height:34px;flex:none;border-radius:var(--radius-sm);background:var(--surface-soft);display:flex;align-items:center;justify-content:center}
/* WhatsApp keeps its green because that is how the app is recognised, but not its own green:
   #25D366 is the loudest colour anyone would ever put on this site. Pulled to the same lightness
   and restraint as the brass, it reads as ours and still reads as WhatsApp. */
.lx-chan--wa .lx-chan-i{background:oklch(0.95 0.03 150);color:oklch(0.5 0.08 150)}
.lx-chan-b{display:flex;flex-direction:column;gap:1px;min-width:0}
.lx-chan-t{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.lx-chan-v{font-family:var(--font-ui);font-size:12.5px;color:var(--text-muted);line-height:1.35;direction:ltr}
[dir="rtl"] .lx-chan-v{text-align:start}
.lx-capture-r{background:var(--surface-soft);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
/* The panel opens with a line of its own. Three unlabelled fields under a heading that lives in
   the other rail read as a stray widget; one line naming what the panel is for ties it back to
   step 01 and makes the two rails one statement. */
.lx-capture-r-h{display:flex;flex-direction:column;gap:3px;margin-block-end:var(--space-md)}
.lx-capture-r-h b{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-0.3px;color:var(--ink)}
[dir="rtl"] .lx-capture-r-h b{letter-spacing:0}
.lx-capture-r-h span{font-family:var(--font-ui);font-size:13.5px;line-height:1.5;color:var(--text-muted);text-wrap:pretty}
/* Step 01 promises "a PDF, a photo of the drawing" — without somewhere to put it that promise was
   a sentence with no door. Optional by construction: the hint says a room count is enough. */
.lx-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-align:center;box-sizing:border-box;min-height:96px;padding:14px 16px;background:var(--canvas);border:1px dashed var(--plate-screw);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.lx-drop:hover{border-color:var(--brass)}
.lx-drop:focus-visible{outline:2px solid var(--brass-strong);outline-offset:2px}
.lx-drop[data-over="true"]{border-color:var(--brass);border-style:solid;background:var(--brass-soft)}
.lx-drop img{opacity:.5}
.lx-drop b{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--ink)}
.lx-drop b u{color:var(--brass-strong);text-underline-offset:3px}
.lx-drop span{font-family:var(--font-ui);font-size:12.5px;line-height:1.45;color:var(--muted-soft);text-wrap:pretty}
.lx-drop-file{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:12px 14px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md)}
.lx-drop-file b{flex:1;min-width:0;font-family:var(--font-ui);font-size:13.5px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lx-drop-file button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;background:none;border:0;border-radius:var(--radius-sm);color:var(--muted-soft);cursor:pointer}
.lx-drop-file button:hover{background:var(--surface-soft);color:var(--ink)}
.lx-capture-form{display:flex;flex-direction:column;gap:var(--space-md)}
.lx-capture-fields{display:flex;flex-direction:column;gap:10px}
.lx-capture-fields input,.lx-capture-fields select{width:100%;box-sizing:border-box;height:48px;padding-inline:14px;font-family:var(--font-ui);font-size:15px;color:var(--ink);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-md);outline:none;transition:border-color var(--duration-fast) var(--ease-standard)}
.lx-capture-fields input:focus,.lx-capture-fields select:focus{border-color:var(--brass)}
.lx-capture-fields input::placeholder{color:var(--muted-soft)}
.lx-capture-form>button,.lx-capture-form .lxc-btn{width:100%;justify-content:center}
.lx-capture-fine{margin:0;font-family:var(--font-ui);font-size:12.5px;line-height:1.5;color:var(--muted-soft);text-wrap:pretty}
.lx-capture-done{display:flex;gap:var(--space-md);align-items:flex-start}
.lx-capture-done h4{margin:0 0 6px;font-family:var(--font-display);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-0.3px}
.lx-capture-done p{margin:0;font-family:var(--font-ui);font-size:14px;line-height:1.55;color:var(--text-muted)}

/* Kinds-of-service cards: a module plate beside two lines of prose. Wider than a feature card
   because each one carries a real caveat, not a slogan. */
.lx-kindcard{display:flex;gap:var(--space-md);align-items:flex-start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-kindcard h3{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}
.lx-kindcard p{font-size:14px;line-height:1.6;color:var(--text-muted);margin:0;text-wrap:pretty}

/* ---- lighting-design bands ---- */
/* Layers: a numbered ladder, one row per layer, with its photometric target held to the end so the
   four targets line up and can be read as a column. */
.lx-layers{display:flex;flex-direction:column;gap:var(--space-md)}
.lx-layer{display:flex;gap:var(--space-md);align-items:flex-start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-layer h3{font-family:var(--font-ui);font-size:17px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}
.lx-layer p{font-size:14px;line-height:1.6;color:var(--text-muted);margin:0;max-width:58em;text-wrap:pretty}
.lx-layer-spec{margin-inline-start:auto;flex:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:var(--brass-strong);background:var(--brass-soft);border-radius:var(--radius-pill);padding:6px 12px;white-space:nowrap}

/* Design rules: two columns of numbered notes. No card — these are read as a list, not compared.
   Named -designrule, not -rule: .lx-rule is the horizontal hairline divider used inside cards, and
   reusing it here would have meant fighting a height:1px background rule. */
.lx-rules{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl) var(--space-xxl)}
.lx-designrule{display:flex;gap:var(--space-md);align-items:flex-start}
.lx-designrule-n{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--brass-strong);flex:none;padding-block-start:2px}
.lx-rules h3{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}
.lx-rules p{font-size:14px;line-height:1.6;color:var(--text-muted);margin:0;text-wrap:pretty}

@media(max-width:1000px){
  .lx-rules{grid-template-columns:1fr}
  .lx-layer{flex-wrap:wrap}
  .lx-layer-spec{margin-inline-start:0}
}

/* ---- the five questions ----
   Our answer is the last line of each card, on the brass rule, because the question is the useful
   part and the answer has to look like a consequence of it rather than the point of it. */
.lx-qa{display:flex;flex-direction:column;gap:var(--space-md)}
.lx-qacard{display:flex;gap:var(--space-md);align-items:flex-start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-qacard-n{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--brass-strong);flex:none;padding-block-start:3px}
.lx-qacard h3{font-family:var(--font-ui);font-size:18px;font-weight:600;color:var(--ink);margin:0;line-height:1.35;letter-spacing:-0.2px}
[dir="rtl"] .lx-qacard h3{letter-spacing:0}
.lx-qacard p{font-size:14px;line-height:1.6;color:var(--text-muted);margin:0;max-width:62em;text-wrap:pretty}
.lx-qacard-ours{display:flex;gap:9px;align-items:flex-start;border-block-start:1px solid var(--brass-hairline);padding-block-start:12px;color:var(--text-body)!important;font-weight:500}
.lx-qacard-ours img{flex:none;margin-block-start:3px}
/* Drop-down version of the question cards (QaAccordion in pieces.jsx). The card keeps its border and radius;
   the padding moves onto the button and the answer so the whole question row is the click target. */
.lx-qacard--acc{display:block;padding:0;overflow:hidden;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.lx-qacard--acc.is-open{border-color:var(--brass-hairline)}
.lx-qacard--acc .lx-qaq{margin:0;font:inherit}
.lx-qaq-btn{display:flex;align-items:flex-start;gap:var(--space-md);width:100%;margin:0;padding:var(--card-pad-tight);background:none;border:0;border-radius:inherit;font:inherit;color:inherit;text-align:start;cursor:pointer}
.lx-qaq-btn .lx-qacard-n{width:24px}
.lx-qaq-t{flex:1 1 auto;min-width:0;font-family:var(--font-ui);font-size:18px;font-weight:600;line-height:1.35;letter-spacing:-0.2px;color:var(--ink);text-wrap:pretty}
[dir="rtl"] .lx-qaq-t{letter-spacing:0}
.lx-qaq-chev{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin-block-start:-3px;margin-inline-start:auto;border-radius:50%;color:var(--text-muted);transition:transform var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.lx-qaq-btn:hover .lx-qaq-chev{background:var(--surface-card)}
.lx-qacard--acc.is-open .lx-qaq-chev{transform:rotate(180deg)}
.lx-qaq-btn:focus-visible{outline:2px solid var(--brass-strong);outline-offset:-2px}
.lx-qaa{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .26s var(--ease-standard),visibility 0s linear .26s}
.lx-qacard--acc.is-open .lx-qaa{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .26s var(--ease-standard),visibility 0s}
.lx-qaa-in{min-height:0;overflow:hidden}
.lx-qaa-body{display:flex;flex-direction:column;gap:12px;padding-block:0 var(--card-pad-tight);padding-inline:calc(var(--card-pad-tight) + 24px + var(--space-md)) var(--card-pad-tight)}
.lx-qacard--acc .lx-qacard-ours{margin-block-start:4px}
@media(max-width:600px){.lx-qaq-t{font-size:16px}.lx-qaa-body{padding-inline:var(--card-pad-tight)}}
@media(prefers-reduced-motion:reduce){.lx-qaa,.lx-qacard--acc.is-open .lx-qaa,.lx-qaq-chev{transition:none}}

/* ---- lighting-design evidence blocks ----
   Every one of these carries a number the client can verify. The graphics are geometry, not
   decoration: a bar's width IS the figure beside it, so the block can be read without being read. */

/* Field of view against reflectance. Two bars on one scale per row: the floor row is the argument,
   because its view bar and its return bar are both short while the wall row's are both long. */
.lx-fov{display:flex;flex-direction:column;gap:2px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight);margin-block-end:var(--space-lg)}
.lx-fov-h,.lx-fov-r{display:grid;grid-template-columns:92px 1fr 1fr;gap:var(--space-lg);align-items:center}
.lx-fov-h{padding-block-end:10px;border-block-end:1px solid var(--hairline-soft);margin-block-end:8px}
.lx-fov-h span{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-soft)}
.lx-fov-r{padding-block:9px}
.lx-fov-n{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--ink)}
.lx-fov-r--weak .lx-fov-n{color:var(--text-muted)}
.lx-fov-bar{position:relative;display:block;height:26px;background:var(--surface-soft);border-radius:var(--radius-xs);overflow:hidden}
.lx-fov-bar i{display:block;height:100%;background:var(--brass);opacity:.9}
.lx-fov-bar--refl i{background:var(--brass-strong);opacity:.75}
.lx-fov-r--weak .lx-fov-bar i{background:var(--surface-strong)}
.lx-fov-bar em{position:absolute;inset-block:0;inset-inline-end:9px;display:flex;align-items:center;font-family:var(--font-mono);font-size:11px;font-style:normal;color:var(--ink)}

/* Three room sections. The light is painted where it lands, so a dark wall is dark on screen and a
   luminous wall is luminous — the point is seen, not read. Unlit surfaces sit at a mid grey so both
   brass light and near-white light have something to be brighter than; on a white panel they would
   have nothing to register against. */
.lx-phys{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.lx-phys-c{display:flex;flex-direction:column;gap:14px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-phys-c--key{border-color:var(--brass-hairline);box-shadow:var(--shadow-md)}
.lx-phys-head h3{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}
.lx-phys-head p{font-size:14px;line-height:1.5;color:var(--text-muted);margin:4px 0 0}

.lx-room{position:relative;display:block;height:150px;border-radius:var(--radius-sm);overflow:hidden;background:#4a4a4a}
.lx-room i{position:absolute;display:block}
/* the two wall planes and the floor, in perspective-free elevation */
.lx-room-wl{inset-block:14px 26px;inset-inline-start:0;width:26%;background:#3d3d3d}
.lx-room-wr{inset-block:14px 26px;inset-inline-end:0;width:26%;background:#3d3d3d}
.lx-room-fl{inset-inline:0;bottom:0;height:26px;background:#333}
/* ceiling line */
.lx-room::before{content:"";position:absolute;inset-inline:0;top:14px;height:1px;background:rgba(255,255,255,.22)}
/* eye-level marker: the height the argument is made from */
.lx-room-eye{position:absolute;inset-inline-start:50%;top:52%;width:7px;height:7px;margin-inline-start:-3.5px;border-radius:var(--radius-full);border:1px solid rgba(255,255,255,.5)}

/* 0 — downlights: pools on the floor, walls stay dark */
.lx-room--0 .lx-room-lt{inset-inline:0;bottom:0;height:26px;background:
  radial-gradient(ellipse 13% 78% at 22% 62%,var(--brass) 0 34%,transparent 74%),
  radial-gradient(ellipse 13% 78% at 50% 62%,var(--brass) 0 34%,transparent 74%),
  radial-gradient(ellipse 13% 78% at 78% 62%,var(--brass) 0 34%,transparent 74%)}
.lx-room--0 .lx-room-fl{background:#4d4238}
/* The downlight cones, drawn only over the floor's own width so they read as light arriving rather
   than as a wash on the walls. Kept faint: the point of this card is that the walls stay dark. */
.lx-room--0::after{content:"";position:absolute;inset:14px 0 26px;pointer-events:none;background:
  radial-gradient(ellipse 7% 62% at 22% 100%,rgba(180,136,74,.28) 0 40%,transparent 78%),
  radial-gradient(ellipse 7% 62% at 50% 100%,rgba(180,136,74,.28) 0 40%,transparent 78%),
  radial-gradient(ellipse 7% 62% at 78% 100%,rgba(180,136,74,.28) 0 40%,transparent 78%)}

/* 1 — wall wash: both wall planes become the source, floor drops back */
.lx-room--1 .lx-room-wl,.lx-room--1 .lx-room-wr{background:linear-gradient(to bottom,#f0dcb8,#c9a878 62%,#8a7355)}
.lx-room--1 .lx-room-lt{inset:14px 0 26px;background:
  linear-gradient(to right,rgba(180,136,74,.5) 0,transparent 34%),
  linear-gradient(to left,rgba(180,136,74,.5) 0,transparent 34%)}

/* 2 — layers: lit walls, plus one accent pool on the floor */
.lx-room--2 .lx-room-wl,.lx-room--2 .lx-room-wr{background:linear-gradient(to bottom,#e8d3ae,#bfa070 62%,#826c50)}
.lx-room--2 .lx-room-lt{inset:14px 0 0;background:
  linear-gradient(to right,rgba(180,136,74,.42) 0,transparent 30%),
  linear-gradient(to left,rgba(180,136,74,.42) 0,transparent 30%),
  radial-gradient(ellipse 11% 15% at 50% 92%,var(--brass) 0 40%,transparent 74%)}

/* one figure per card, big enough to be the thing you read */
.lx-phys-fig{display:flex;flex-direction:column;gap:2px;padding-block-start:12px;border-block-start:1px solid var(--hairline-soft)}
.lx-phys-num{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-1.1px;line-height:1;color:var(--ink)}
[dir="rtl"] .lx-phys-num{letter-spacing:0}
.lx-phys-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-soft)}
.lx-phys-v{margin-block-start:auto;font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--brass-strong);background:var(--brass-soft);border-radius:var(--radius-pill);padding:7px 13px;width:max-content}

/* Beam angle: the bar width is the spot diameter, scaled against the widest row. */
.lx-beam{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.lx-beam-r{display:grid;grid-template-columns:52px 1fr 74px 1.5fr;gap:var(--space-md);align-items:center;padding:12px 20px;border-bottom:1px solid var(--hairline-soft)}
.lx-beam-r:last-child{border-bottom:0}
.lx-beam-a{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-0.4px;color:var(--ink)}
[dir="rtl"] .lx-beam-a{letter-spacing:0}
.lx-beam-bar{display:block;height:8px;border-radius:var(--radius-pill);background:var(--surface-soft);overflow:hidden}
.lx-beam-bar i{display:block;height:100%;background:var(--brass);opacity:.75;border-radius:var(--radius-pill)}
.lx-beam-d{font-family:var(--font-mono);font-size:13px;color:var(--ink);text-align:end}
.lx-beam-u{font-size:13px;color:var(--text-muted);line-height:1.45}

/* Wall wash: the number table beside the mistake it prevents. */
.lx-wash{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start}
.lx-wash-warn{display:flex;gap:var(--space-md);align-items:flex-start;background:var(--canvas);border:1px solid var(--brass-hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-wash-warn img{flex:none;margin-block-start:2px}
.lx-wash-warn p{margin:0;font-size:15px;line-height:1.6;color:var(--text-body);text-wrap:pretty}

/* Three heights: stacked so the page reads top-to-bottom the way the room does. */
.lx-heights{display:flex;flex-direction:column;gap:var(--space-md)}
.lx-height{display:flex;gap:var(--space-md);align-items:flex-start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-height h3{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}
.lx-height p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0;max-width:58em}
.lx-height-z{margin-inline-start:auto;order:3;flex:none;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--brass-strong);background:var(--brass-soft);border-radius:var(--radius-pill);padding:5px 11px;white-space:nowrap}

/* Four phone tests. Deliberately the plainest block on the page — it is an instruction, not a pitch. */
.lx-tests{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.lx-test{display:flex;flex-direction:column;gap:10px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-test-n{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--brass-strong)}
.lx-test-i{width:34px;height:34px;border-radius:var(--radius-md);background:var(--surface-card);display:flex;align-items:center;justify-content:center}
.lx-test h3{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);margin:0}
.lx-test p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0;text-wrap:pretty}

/* The window of opportunity: the bar shortens as the options close. */
.lx-owin{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
/* Base first, inverted variant last. Declaring the --shut overrides ABOVE these at equal
   specificity (0,2,0) let the later base rule win, and the dark card rendered #111 text on #101010
   — 1.01:1, literally unreadable. Order is the fix; raising specificity would only hide it. */
.lx-owin-s{display:flex;flex-direction:column;gap:10px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-owin-s h3{font-family:var(--font-ui);font-size:17px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}
.lx-owin-s p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0}
.lx-owin-bar{display:block;height:6px;border-radius:var(--radius-pill);background:var(--surface-soft)}
.lx-owin-bar i{display:block;height:100%;border-radius:var(--radius-pill);background:var(--brass)}
.lx-owin-c{margin-block-start:auto;padding-block-start:12px;border-block-start:1px solid var(--hairline-soft);font-family:var(--font-mono);font-size:12px;color:var(--brass-strong)}
.lx-owin-s--shut{background:var(--surface-dark);border-color:var(--surface-dark)}
.lx-owin-s--shut h3{color:var(--on-dark)}
.lx-owin-s--shut p{color:var(--on-dark-soft)}
.lx-owin-s--shut .lx-owin-c{color:var(--on-dark);border-block-start-color:var(--hairline-dark)}
.lx-owin-s--shut .lx-owin-bar{background:var(--surface-dark-elevated)}

@media(max-width:1000px){
  .lx-phys,.lx-tests,.lx-owin{grid-template-columns:1fr 1fr}
  .lx-fov-h,.lx-fov-r{grid-template-columns:76px 1fr 1fr;gap:var(--space-md)}
  .lx-wash{grid-template-columns:1fr}
  .lx-beam-r{grid-template-columns:44px 1fr 68px;row-gap:4px}
  .lx-beam-u{grid-column:1 / -1}
  .lx-height{flex-wrap:wrap}
  .lx-height-z{margin-inline-start:0;order:0}
}

/* ---- strategy v2 blocks ---- */

/* The legend. Dark, two columns, with the Greek word set large and quiet behind the heading — the
   etymology is the proof, so it is shown rather than described. */
.lx-legend{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--space-xxl);background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-legend-l{display:flex;flex-direction:column;gap:14px;position:relative}
.lx-legend-h{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.15;color:var(--on-dark);margin:0}
[dir="rtl"] .lx-legend-h{letter-spacing:0}
.lx-legend-gr{font-family:var(--font-display);font-size:76px;font-weight:700;line-height:1;color:var(--brass);opacity:.32;margin-block-start:auto;letter-spacing:-2px}
[dir="rtl"] .lx-legend-gr{letter-spacing:0}
/* The legend is the one place the word is glossed. Everywhere else it appears unexplained, which
   only works because this block taught it once. */
.lx-legend-tr{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;color:var(--on-dark-soft);margin-block-start:-4px}

/* ---- the provenance mark ----
   RULE, and the whole reason it means anything: sigma-kappa-eta-nu-eta marks a surface where
   Skenara states it makes the thing itself. It never appears on "we integrate" or "we do not
   touch", never in navigation, never as page furniture. Its absence carries as much as its
   presence, so adding it anywhere decorative destroys both. Closed list of uses in readme.md. */
.lx-skene-host{position:relative;overflow:hidden;isolation:isolate}
.lx-skene-host>*{position:relative;z-index:1}
.lx-skene-wm{position:absolute;z-index:0;inset-block-end:-16px;inset-inline-end:-6px;
  font-family:var(--font-display);font-size:78px;font-weight:700;line-height:1;letter-spacing:-2px;
  color:var(--brass);opacity:.16;pointer-events:none;user-select:none}
[dir="rtl"] .lx-skene-wm{letter-spacing:0}
/* Inline form: the word plus its transliteration, read as a caption rather than a graphic. */
.lx-skene-tag{display:inline-flex;align-items:baseline;gap:7px;margin-inline-start:auto;flex:none;white-space:nowrap}
.lx-skene-tag i{font-family:var(--font-display);font-style:normal;font-size:19px;font-weight:700;line-height:1;color:var(--brass)}
.lx-skene-tag span{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-dark-soft)}
@media(max-width:700px){.lx-skene-tag{margin-inline-start:0;width:100%;padding-block-start:10px}.lx-skene-wm{font-size:58px}}
.lx-legend-r{display:flex;flex-direction:column;gap:16px}
.lx-legend-r p{margin:0;font-size:16px;line-height:1.7;color:var(--on-dark-soft);text-wrap:pretty}
.lx-legend-pull{font-family:var(--font-display);font-size:20px!important;font-weight:700;line-height:1.35!important;color:var(--on-dark)!important;letter-spacing:-0.4px;border-block-start:1px solid var(--hairline-dark);padding-block-start:16px}
[dir="rtl"] .lx-legend-pull{letter-spacing:0}
/* --brass-strong is the light-ground variant — 3.12:1 on this fill. Inverted surfaces take --brass. */
.lx-legend .lx-eyebrow-sm{color:var(--brass)}

/* Three circles. The "we do not touch" card is deliberately as prominent as the other two.
   Base rules first, inverted variant last — declaring --own above these at equal specificity (0,2,0)
   let the later base rule win and rendered --ink on --surface-dark, 1.01:1. Same trap as the
   window-of-opportunity card; ordering is the fix, not specificity. */
.lx-circles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.lx-circle{display:flex;flex-direction:column;gap:12px;border-radius:var(--radius-lg);padding:var(--card-pad-tight);background:var(--canvas);border:1px solid var(--hairline)}
.lx-circle-i{width:42px;height:42px;border-radius:var(--radius-md);background:var(--surface-card);display:flex;align-items:center;justify-content:center;flex:none}
.lx-circle h3{font-family:var(--font-ui);font-size:18px;font-weight:600;color:var(--ink);margin:0;line-height:1.3}
.lx-circle p{font-size:15px;line-height:1.6;color:var(--text-muted);margin:0;text-wrap:pretty}
.lx-circle-n{margin-block-start:auto;padding-block-start:14px;border-block-start:1px solid var(--hairline);font-size:13px;line-height:1.5;color:var(--brass-strong);font-weight:500}
.lx-circle--int{border-color:var(--brass-hairline)}
.lx-circle--no{background:var(--surface-soft)}
.lx-circle--own{background:var(--surface-dark);border-color:var(--surface-dark)}
.lx-circle--own h3{color:var(--on-dark)}
.lx-circle--own p{color:var(--on-dark-soft)}
.lx-circle--own .lx-circle-i{background:var(--surface-dark-elevated)}
.lx-circle--own .lx-circle-n{color:var(--brass);border-block-start-color:var(--hairline-dark)}

/* Keys: the product photograph beside its requirement list. Numbered, because these are commitments
   rather than features. */
.lx-keys{display:grid;grid-template-columns:0.8fr 1.2fr;gap:var(--space-xxl);align-items:start}
.lx-keys-art{border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;background:var(--canvas)}
.lx-keys-l{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg) var(--space-xl)}
.lx-keyreq{display:flex;gap:12px;align-items:flex-start}
.lx-keyreq-n{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--brass-strong);flex:none;padding-block-start:3px}
.lx-keyreq h3{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--ink);margin:0;line-height:1.35}
.lx-keyreq p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0;text-wrap:pretty}

/* The eight-product line, 4-up. */
.lx-line{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.lx-lineitem{display:flex;flex-direction:column;gap:12px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-lineitem h3{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--ink);margin:0}
.lx-lineitem p{font-size:14px;line-height:1.55;color:var(--text-muted);margin:0;text-wrap:pretty}

/* The developer case. One table, and the share-of-budget row is the climax. */
.lx-case{display:flex;flex-direction:column;gap:var(--space-lg)}
.lx-case-t{background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.lx-case-r{display:grid;grid-template-columns:1fr auto 1.1fr;gap:var(--space-lg);align-items:center;padding:18px 24px;border-bottom:1px solid var(--hairline-soft)}
.lx-case-r:last-child{border-bottom:0}
.lx-case-r--key{background:var(--surface-dark)}
.lx-case-r--key .lx-case-k{color:var(--on-dark)}
.lx-case-r--key .lx-case-v{color:var(--brass);font-size:38px}
.lx-case-r--key .lx-case-n{color:var(--on-dark-soft)}
.lx-case-k{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink)}
.lx-case-v{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-0.8px;color:var(--ink);line-height:1;white-space:nowrap}
[dir="rtl"] .lx-case-v{letter-spacing:0}
.lx-case-n{font-size:14px;color:var(--text-muted);line-height:1.5}
.lx-case-ret{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.lx-case-c{display:flex;flex-direction:column;gap:8px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-case-cv{font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:-1px;color:var(--brass-strong);line-height:1}
[dir="rtl"] .lx-case-cv{letter-spacing:0}
.lx-case-c p{margin:0;font-size:14px;line-height:1.55;color:var(--text-body);text-wrap:pretty}
.lx-case-src{margin-block-start:auto;padding-block-start:12px;border-block-start:1px solid var(--hairline-soft);font-family:var(--font-mono);font-size:11px;color:var(--text-fine);line-height:1.45}
.lx-case-verdict{margin:0;font-size:17px;line-height:1.65;color:var(--ink);font-weight:500;max-width:62em;text-wrap:pretty}

/* Package roles: one line each under the price cards, so the recommendation is stated in words. */
.lx-pkgroles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter);width:100%}
.lx-pkgroles span{font-size:13px;line-height:1.5;color:var(--text-muted)}
.lx-pkgroles b{color:var(--ink);font-weight:600}

/* The ten questions. A numbered list, plainly set — it is a document, not a pitch. */
.lx-tenq{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px var(--space-xxl);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-tenq li{display:flex;gap:12px;font-size:15px;line-height:1.55;color:var(--text-body);text-wrap:pretty}
.lx-tenq-n{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--brass-strong);flex:none;padding-block-start:3px}

@media(max-width:1000px){
  .lx-legend,.lx-keys{grid-template-columns:1fr}
  .lx-circles,.lx-case-ret,.lx-pkgroles{grid-template-columns:1fr}
  .lx-line{grid-template-columns:1fr 1fr}
  .lx-keys-l,.lx-tenq{grid-template-columns:1fr}
  .lx-case-r{grid-template-columns:1fr auto;row-gap:6px}
  .lx-case-n{grid-column:1 / -1}
}

/* ---- ownership marker on a function page ----
   One strip, three states. It is a strip rather than a badge because the sentence matters: "we
   integrate this" without "we answer for compatibility, not for the badge on it" is just a hedge. */
.lx-own{display:flex;align-items:center;gap:var(--space-md);padding:16px 20px;border-radius:var(--radius-lg);background:var(--canvas);border:1px solid var(--hairline);margin-block:var(--space-lg)}
.lx-own--own{background:var(--surface-dark);border-color:var(--surface-dark)}
.lx-own--own b{color:var(--on-dark)}
.lx-own--own p{color:var(--on-dark-soft)}
.lx-own--own .lx-own-i{background:var(--surface-dark-elevated)}
.lx-own--int{border-color:var(--brass-hairline)}
.lx-own--none{background:var(--surface-soft)}
.lx-own-i{width:34px;height:34px;flex:none;border-radius:var(--radius-md);background:var(--surface-card);display:flex;align-items:center;justify-content:center}
.lx-own b{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.lx-own p{margin:0;font-size:14px;line-height:1.5;color:var(--text-muted);text-wrap:pretty}
@media(max-width:700px){.lx-own{flex-wrap:wrap}.lx-own p{width:100%}}

/* ---- private-client page ----
   Five patterns, all specific to the B2C door. They live here rather than in the component layer
   because each one carries an argument that only this page makes. */

/* "What brought you here": three arrivals as a pressed-state selector, one answer panel beneath.
   A selector rather than three stacked cards because the strategy's point is that these are
   alternatives — you are one of them, not all three, and reading the other two is optional. */
.lx-arrivals{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gutter)}
.lx-arrival{display:flex;flex-direction:column;gap:10px;text-align:start;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight);cursor:pointer;font:inherit;transition:border-color .16s ease,box-shadow .16s ease,background .16s ease}
.lx-arrival:hover{border-color:var(--brass-hairline)}
.lx-arrival:focus-visible{outline:2px solid var(--brass-strong);outline-offset:2px}
.lx-arrival-i{width:38px;height:38px;flex:none;border-radius:var(--radius-md);background:var(--surface-card);display:flex;align-items:center;justify-content:center}
.lx-arrival-k{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.lx-arrival-s{font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}
/* Selected state is the dark surface, so the chosen arrival reads as the one the page is now
   talking to. Ordered after the base rules for the same reason the circles are: a later base
   declaration would otherwise repaint ink on near-black. */
.lx-arrival--on{background:var(--surface-dark);border-color:var(--surface-dark)}
.lx-arrival--on .lx-arrival-i{background:var(--surface-dark-elevated)}
.lx-arrival--on .lx-arrival-k{color:var(--on-dark)}
.lx-arrival--on .lx-arrival-s{color:var(--on-dark-soft)}
.lx-arrivalpanel{display:grid;grid-template-columns:1fr 240px;gap:var(--space-xl);align-items:start;background:var(--canvas);border:1px solid var(--brass-hairline);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-arrivalpanel-m{display:flex;flex-direction:column;gap:12px}
.lx-arrivalpanel-a{margin:0;font-family:var(--font-ui);font-size:18px;line-height:1.6;color:var(--text-body);max-width:46em;text-wrap:pretty}
.lx-arrivalpanel-d{margin:0;font-size:15px;line-height:1.65;color:var(--text-muted);max-width:46em;text-wrap:pretty}
.lx-arrivalpanel-r{display:flex;flex-direction:column;gap:6px;padding-inline-start:var(--space-lg);border-inline-start:1px solid var(--hairline)}
.lx-arrivalpanel-rl{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-soft)}
.lx-arrivalpanel-rv{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--brass-strong);line-height:1.45}
@media(max-width:1000px){.lx-arrivals{grid-template-columns:1fr}.lx-arrivalpanel{grid-template-columns:1fr}.lx-arrivalpanel-r{padding-inline-start:0;border-inline-start:0;padding-block-start:var(--space-md);border-block-start:1px solid var(--hairline)}}

/* The two half-competences. Both headings are set at display size because the pair IS the
   argument — demoting either one to body copy turns a symmetry into a claim and a caveat. */
.lx-stitch{display:flex;flex-direction:column;gap:var(--space-xl);background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-stitch-h{display:flex;flex-direction:column;gap:10px}
.lx-stitch-h h2{margin:0;font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:-0.8px;line-height:1.2;color:var(--on-dark);max-width:22em;text-wrap:pretty}
[dir="rtl"] .lx-stitch-h h2{letter-spacing:0}
.lx-stitch-h h2:last-child{color:var(--on-dark-soft)}
.lx-stitch-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.lx-stitch-c{display:flex;flex-direction:column;gap:14px;background:var(--surface-dark-elevated);border-radius:var(--radius-md);padding:var(--card-pad-tight)}
.lx-stitch-c h3{margin:0;font-family:var(--font-ui);font-size:17px;font-weight:600;color:var(--on-dark);line-height:1.3}
.lx-stitch-r{display:flex;flex-direction:column;gap:4px}
.lx-stitch-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--brass)}
.lx-stitch-r--no .lx-stitch-l{color:var(--on-dark-soft)}
.lx-stitch-r p{margin:0;font-size:14px;line-height:1.6;color:var(--on-dark-soft);text-wrap:pretty}
.lx-stitch-pull{margin:0;font-family:var(--font-display);font-size:22px;font-weight:700;line-height:1.35;letter-spacing:-0.4px;color:var(--on-dark);max-width:30em;padding-block-start:var(--space-lg);border-block-start:1px solid var(--hairline-dark);text-wrap:pretty}
[dir="rtl"] .lx-stitch-pull{letter-spacing:0}
.lx-stitch-note{margin:0;font-size:14px;line-height:1.7;color:var(--on-dark-soft);max-width:58em;text-wrap:pretty}
@media(max-width:1000px){.lx-stitch-g{grid-template-columns:1fr}.lx-stitch-h h2{font-size:24px}}

/* The design-fee credit. Left column is the offer, right is the arithmetic that makes it
   uncopyable — and the right card is the one surface on this page that claims manufacture,
   which is why it carries the provenance mark. */
.lx-credit{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);align-items:start}
.lx-credit-b{margin:0;font-family:var(--font-ui);font-size:18px;line-height:1.65;color:var(--text-body);text-wrap:pretty}
.lx-credit-w{display:flex;flex-direction:column;gap:10px;background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-credit-w h3{margin:0;font-family:var(--font-ui);font-size:17px;font-weight:600;color:var(--on-dark);line-height:1.35}
.lx-credit-w p{margin:0;font-size:14px;line-height:1.65;color:var(--on-dark-soft);text-wrap:pretty}
@media(max-width:1000px){.lx-credit{grid-template-columns:1fr}}

/* Four packages. Not PricingTier — none of these carry a price, and a tier card with an empty
   price slot reads as a number withheld rather than a number that does not exist yet. */
.lx-pkgs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gutter)}
.lx-pkg{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-pkg h3{margin:0;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-0.3px;color:var(--ink);line-height:1.25}
[dir="rtl"] .lx-pkg h3{letter-spacing:0}
.lx-pkg-w{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}
.lx-pkg-f{margin:0;font-size:14px;line-height:1.6;color:var(--brass-strong);font-weight:500;text-wrap:pretty}
.lx-pkg-who{margin-block-start:auto;padding-block-start:14px;border-block-start:1px solid var(--hairline);display:flex;flex-direction:column;gap:3px}
.lx-pkg-who span{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-soft)}
.lx-pkg-who b{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--ink)}
.lx-pkg--key{background:var(--surface-dark);border-color:var(--surface-dark);box-shadow:var(--shadow-md)}
.lx-pkg--key h3{color:var(--on-dark)}
.lx-pkg--key .lx-pkg-w{color:var(--on-dark-soft)}
.lx-pkg--key .lx-pkg-f{color:var(--brass)}
.lx-pkg--key .lx-pkg-who{border-block-start-color:var(--hairline-dark)}
.lx-pkg--key .lx-pkg-who b{color:var(--on-dark)}
.lx-pkg-flag{align-self:flex-start;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--surface-dark);background:var(--brass);border-radius:var(--radius-xs);padding:3px 7px}
@media(max-width:1000px){.lx-pkgs{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.lx-pkgs{grid-template-columns:1fr}}

/* Skenara Night. Dark, and the only band on the page where the photograph carries equal weight
   to the copy — the whole point is that this happens in a room after dark. */
.lx-night{display:grid;grid-template-columns:1.1fr 0.9fr;gap:var(--space-xxl);align-items:center;background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-night-m{display:flex;flex-direction:column;gap:16px}
.lx-night-m h2{margin:0;font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:-0.9px;line-height:1.18;color:var(--on-dark);text-wrap:pretty}
[dir="rtl"] .lx-night-m h2{letter-spacing:0}
.lx-night-m p{margin:0;font-size:16px;line-height:1.7;color:var(--on-dark-soft);max-width:44em;text-wrap:pretty}
.lx-night-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;padding-block-start:16px;border-block-start:1px solid var(--hairline-dark)}
.lx-night-l li{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.6;color:var(--on-dark)}
.lx-night-l li img{flex:none;margin-block-start:3px}
@media(max-width:1000px){.lx-night{grid-template-columns:1fr;gap:var(--space-xl)}.lx-night-m h2{font-size:26px}}

/* The demo room's four pairs. A two-term row rather than a card, because the comparison is the
   content and a card around it would imply each half is a thing you can buy. */
.lx-pairs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg) var(--space-xxl)}
.lx-pair{display:flex;flex-direction:column;gap:7px;padding-block-start:14px;border-block-start:2px solid var(--ink)}
.lx-pair-t{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.lx-pair-a{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--muted-soft)}
.lx-pair-v{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-soft)}
.lx-pair-b{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink)}
.lx-pair p{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}
.lx-demo-cta{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}
.lx-demo-cta span{font-size:14px;line-height:1.55;color:var(--text-muted)}
@media(max-width:700px){.lx-pairs{grid-template-columns:1fr}}

/* ---- the client's vocabulary ----
   Two columns of term + one line. No cards, no accordion: this is a list somebody scans once and
   quotes later, so anything that hides a definition behind a click defeats the point. The term
   carries the weight; the definition is quiet. */
.lx-gloss{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-lg) var(--space-xxl);margin:0;width:100%}
.lx-gloss-t{display:flex;flex-direction:column;gap:5px;padding-block-end:var(--space-lg);border-block-end:1px solid var(--hairline-soft)}
.lx-gloss dt{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-0.1px}
[dir="rtl"] .lx-gloss dt{letter-spacing:0}
.lx-gloss dd{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}

/* In the reference band the two number tables stack, so the wall-wash pair needs its own top gap. */
.lx-beam + .lx-fine + .lx-wash{margin-block-start:var(--space-md)}

@media(max-width:1000px){.lx-gloss{grid-template-columns:1fr}}


/* ---- model-v3 home and designer patterns ----
   These carry the dosing rule (§3.6): fact, object, question. Each is a band that has to be
   readable on its own, because a visitor who reads only one of them should still have got the
   argument. */

/* THE FACT. Set at display size and given the whole band width: this is the sentence the visitor
   repeats to somebody else, and it is the only place on the site where a claim is allowed to be
   this big before it has been proved. The kicker column carries the proof. */
.lx-fact{display:grid;grid-template-columns:1.15fr 0.85fr;gap:var(--space-xxl);align-items:start;width:100%}
.lx-fact-m{display:flex;flex-direction:column;gap:14px}
.lx-fact-m h2{margin:0;font-family:var(--font-display);font-size:40px;font-weight:700;letter-spacing:-1.4px;line-height:1.1;color:var(--ink);max-width:22em;text-wrap:balance}
[dir="rtl"] .lx-fact-m h2{letter-spacing:0}
.lx-fact-b{margin:0;font-family:var(--font-ui);font-size:18px;line-height:1.65;color:var(--text-body);max-width:40em;text-wrap:pretty}
.lx-fact-k{margin:0;font-size:15px;line-height:1.7;color:var(--text-muted);padding-inline-start:var(--space-lg);border-inline-start:2px solid var(--brass);text-wrap:pretty}
@media(max-width:1000px){.lx-fact{grid-template-columns:1fr;gap:var(--space-lg)}.lx-fact-m h2{font-size:30px;letter-spacing:-0.9px}.lx-fact-k{padding-inline-start:var(--space-md)}}

/* The two frames. The image IS the argument here, so the plate gets the room and the caption sits
   under it as a specimen label rather than a card body. The "after" frame is the one with the
   brass rule, because that is the state we are arguing for. */
.lx-frames{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.lx-frame{margin:0;display:flex;flex-direction:column;gap:0;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden}
.lx-frame figcaption{display:flex;flex-direction:column;gap:8px;padding:var(--card-pad-tight);border-block-start:2px solid var(--hairline)}
.lx-frame--after figcaption{border-block-start-color:var(--brass)}
.lx-frame-t{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
/* The measured figures. They used to be drawn into the false-colour PNGs; once the frames became
   photographs they had to live in the caption, or swapping to photography would have dropped the
   proof and left only an impression. Mono, because it is a reading off an instrument. */
.lx-frame-m{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--muted-soft);display:block}
.lx-frame--after .lx-frame-m{color:var(--brass-strong)}
.lx-frame-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-soft)}
.lx-frame--after .lx-frame-tag{color:var(--brass-strong)}
.lx-frame-t b{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-0.5px;color:var(--ink);line-height:1}
[dir="rtl"] .lx-frame-t b{letter-spacing:0}
.lx-frame figcaption p{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}
@media(max-width:800px){.lx-frames{grid-template-columns:1fr}}

/* THE OBJECT. Photograph on one side at full height, the two lines stacked beside it. Prices live
   here rather than only on the price page, because a person decides about a key by holding it and
   then wants the number in the same breath. */
.lx-keylines{display:grid;grid-template-columns:0.85fr 1.15fr;gap:var(--space-xxl);align-items:start}
.lx-keylines-art{position:sticky;top:var(--space-xl)}
.lx-keylines-l{display:flex;flex-direction:column;gap:var(--gutter)}
.lx-keyline{display:flex;flex-direction:column;gap:9px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-keyline-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap}
.lx-keyline h3{margin:0;font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-0.4px;color:var(--ink);line-height:1.2}
[dir="rtl"] .lx-keyline h3{letter-spacing:0}
.lx-keyline-p{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-0.4px;color:var(--ink);line-height:1;white-space:nowrap}
[dir="rtl"] .lx-keyline-p{letter-spacing:0}
.lx-keyline-m{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-soft)}
.lx-keyline p{margin:0;font-size:15px;line-height:1.65;color:var(--text-body);text-wrap:pretty}
.lx-keyline-vs{font-size:14px;line-height:1.6;color:var(--brass-strong);padding-block-start:10px;border-block-start:1px solid var(--hairline-soft)}
.lx-keyline--key{background:var(--surface-dark);border-color:var(--surface-dark);box-shadow:var(--shadow-md)}
.lx-keyline--key h3,.lx-keyline--key .lx-keyline-p{color:var(--on-dark)}
.lx-keyline--key .lx-keyline-m{color:var(--on-dark-soft)}
.lx-keyline--key p{color:var(--on-dark-soft)}
.lx-keyline--key .lx-keyline-vs{color:var(--brass);border-block-start-color:var(--hairline-dark)}
.lx-keyline-cmp{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding-block-start:var(--space-md);border-block-start:1px solid var(--hairline)}
.lx-keyline-cmp p{margin:0;font-family:var(--font-ui);font-size:16px;line-height:1.65;color:var(--text-body);text-wrap:pretty}
@media(max-width:1000px){.lx-keylines{grid-template-columns:1fr}.lx-keylines-art{position:static}}

/* THE QUESTION. The question itself is the heading — set in display type and in quotation marks,
   because it is a thing the visitor is meant to say out loud to somebody else. */
.lx-asks{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.lx-askcard{display:flex;flex-direction:column;gap:12px;background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-askcard h3{margin:0;font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-0.6px;line-height:1.25;color:var(--on-dark);text-wrap:pretty}
[dir="rtl"] .lx-askcard h3{letter-spacing:0}
.lx-askcard p{margin:0;font-size:15px;line-height:1.7;color:var(--on-dark-soft);text-wrap:pretty}
.lx-askcard-ours{display:flex;align-items:flex-start;gap:10px;margin-block-start:auto;padding-block-start:16px;border-block-start:1px solid var(--hairline-dark)}
.lx-askcard-ours img{flex:none;margin-block-start:2px}
.lx-askcard-ours span{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--brass);line-height:1.5}
@media(max-width:900px){.lx-asks{grid-template-columns:1fr}.lx-askcard h3{font-size:20px}}

/* Economics. A worked example reads as arithmetic, so it is set as a ledger: rows, a rule, a
   total. Deliberately NOT a pricing card — a card implies a package you can buy today. */
.lx-econ{display:grid;grid-template-columns:1.4fr 0.6fr;gap:var(--space-xxl);align-items:start}
.lx-econ-t{width:100%;border-collapse:collapse}
.lx-econ-t td{padding:15px 0;border-bottom:1px solid var(--hairline-soft);font-size:15px;line-height:1.5;color:var(--text-body);vertical-align:top}
.lx-econ-t tr:last-child td{border-bottom:1px solid var(--ink)}
.lx-econ-q{font-family:var(--font-mono);font-size:12px;color:var(--text-fine);white-space:nowrap;padding-inline:var(--space-lg) !important}
.lx-econ-v{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);text-align:end;white-space:nowrap}
.lx-econ-sum{display:flex;flex-direction:column;gap:5px;background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-econ-suml{font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--on-dark-soft)}
.lx-econ-sumv{font-family:var(--font-display);font-size:38px;font-weight:700;letter-spacing:-1.4px;color:var(--on-dark);line-height:1.05}
[dir="rtl"] .lx-econ-sumv{letter-spacing:0}
.lx-econ-sumn{font-size:14px;color:var(--brass);line-height:1.5}
.lx-econ-notes{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.lx-econ-warn,.lx-econ-credit{margin:0;display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.65;color:var(--text-body);background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight);text-wrap:pretty}
.lx-econ-warn img,.lx-econ-credit img{flex:none;margin-block-start:4px;opacity:.6}
.lx-econ-credit{border-color:var(--brass-hairline)}
@media(max-width:1000px){.lx-econ{grid-template-columns:1fr;gap:var(--space-lg)}.lx-econ-notes{grid-template-columns:1fr}}

/* The published standard. Dark, one action, and the note under the button is the whole point:
   no form. */
.lx-standard{display:grid;grid-template-columns:1.2fr 0.8fr;gap:var(--space-xxl);align-items:center;background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-standard-h{margin:0;font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1.15;color:var(--on-dark);text-wrap:balance}
[dir="rtl"] .lx-standard-h{letter-spacing:0}
.lx-standard-p{margin:0;font-size:16px;line-height:1.7;color:var(--on-dark-soft);max-width:44em;text-wrap:pretty}
.lx-standard-a{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.lx-standard-a span{font-size:14px;line-height:1.55;color:var(--on-dark-soft)}
@media(max-width:1000px){.lx-standard{grid-template-columns:1fr;gap:var(--space-lg)}.lx-standard-h{font-size:26px}}

/* Developers as a note rather than a door. Outline, not a card: it must read as an aside on the
   two real doors above it, which is exactly its weight in the plan. */
.lx-devnote{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xl);border:1px dashed var(--hairline);border-radius:var(--radius-lg);padding:22px var(--card-pad-tight);background:transparent}
.lx-devnote b{font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink)}
.lx-devnote p{margin:0;font-size:14px;line-height:1.65;color:var(--text-muted);max-width:64em;text-wrap:pretty}
@media(max-width:900px){.lx-devnote{flex-direction:column;align-items:flex-start;gap:var(--space-md)}}

/* The designer offer. The only conversion on that page, so it gets the dark list beside it and
   sits above everything that argues for it. */
.lx-offer{display:grid;grid-template-columns:1.15fr 0.85fr;gap:var(--space-xxl);align-items:start;width:100%}
.lx-offer-m{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.lx-offer-m h2{margin:0;font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-1.1px;line-height:1.15;color:var(--ink);max-width:24em;text-wrap:balance}
[dir="rtl"] .lx-offer-m h2{letter-spacing:0}
.lx-offer-m p{margin:0;font-size:16px;line-height:1.7;color:var(--text-body);max-width:46em;text-wrap:pretty}
@media(max-width:1000px){.lx-offer{grid-template-columns:1fr;gap:var(--space-lg)}.lx-offer-m h2{font-size:26px}}

/* Numbered flow, five or four steps in a row. Numbers are the structure; no connecting line,
   because a drawn arrow chain is the one shape that always breaks at the wrap. */
.lx-flow{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gutter)}
.lx-flow:has(>:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}
.lx-flowstep{display:flex;flex-direction:column;gap:8px;padding-block-start:16px;border-block-start:2px solid var(--ink)}
.lx-flowstep-n{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;color:var(--brass-strong)}
.lx-flowstep h3{margin:0;font-family:var(--font-ui);font-size:16px;font-weight:600;color:var(--ink);line-height:1.3}
.lx-flowstep p{margin:0;font-size:14px;line-height:1.6;color:var(--text-muted);text-wrap:pretty}
@media(max-width:1100px){.lx-flow,.lx-flow:has(>:nth-child(4):last-child){grid-template-columns:1fr 1fr}}
@media(max-width:700px){.lx-flow,.lx-flow:has(>:nth-child(4):last-child){grid-template-columns:1fr}}

/* Joint case study: two plates, day and evening, captioned. */
.lx-case-b{margin:0;font-family:var(--font-ui);font-size:18px;line-height:1.65;color:var(--text-body);max-width:52em;text-wrap:pretty}
.lx-case-g{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.lx-case-f{margin:0;display:flex;flex-direction:column;gap:10px}
.lx-case-f figcaption{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-soft)}
@media(max-width:800px){.lx-case-g{grid-template-columns:1fr}}

/* Developer capacity statements, and the tender question. */
.lx-honestcard{display:flex;flex-direction:column;gap:8px;background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--radius-lg);padding:var(--card-pad-tight)}
.lx-honestcard-i{width:38px;height:38px;flex:none;border-radius:var(--radius-md);background:var(--surface-card);display:flex;align-items:center;justify-content:center;margin-block-end:4px}
.lx-honestcard h3{margin:0;font-family:var(--font-ui);font-size:17px;font-weight:600;color:var(--ink);line-height:1.3}
.lx-honestcard p{margin:0;font-size:15px;line-height:1.65;color:var(--text-muted);text-wrap:pretty}
.lx-marker{display:flex;flex-direction:column;gap:14px;background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-marker h2{margin:0;font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:-1px;line-height:1.2;color:var(--on-dark);max-width:26em;text-wrap:pretty}
[dir="rtl"] .lx-marker h2{letter-spacing:0}
.lx-marker p{margin:0;font-size:16px;line-height:1.7;color:var(--on-dark-soft);max-width:52em;text-wrap:pretty}
.lx-marker .lx-eyebrow-sm{color:var(--brass)}
@media(max-width:1000px){.lx-marker h2{font-size:25px}}

/* Three headline figures in the trust strip on the developer page. */
.lx-stat{display:flex;flex-direction:column;gap:4px}
.lx-stat b{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-0.7px;color:var(--ink);line-height:1}
[dir="rtl"] .lx-stat b{letter-spacing:0}
.lx-stat span{font-size:13px;line-height:1.5;color:var(--text-muted)}

.lx-lead{margin:0;font-family:var(--font-ui);font-size:18px;line-height:1.7;color:var(--text-body);text-wrap:pretty}


/* The two figures the prices page is built out of. Key cards reuse .lx-keyline from the home
   page's object band so the same two lines cannot drift apart visually; the fitting price gets
   the dark panel because it is the number that needs the standard behind it. */
.lx-twoprice{display:grid;grid-template-columns:1fr 0.8fr;gap:var(--gutter);align-items:start}
.lx-twoprice-keys{display:flex;flex-direction:column;gap:var(--gutter)}
.lx-fitprice{display:flex;flex-direction:column;gap:6px;background:var(--surface-dark);border-radius:var(--radius-lg);padding:var(--card-pad)}
.lx-fitprice .lx-keyline-m{color:var(--on-dark-soft)}
.lx-fitprice-v{font-family:var(--font-display);font-size:52px;font-weight:700;letter-spacing:-1.8px;color:var(--on-dark);line-height:1}
[dir="rtl"] .lx-fitprice-v{letter-spacing:0}
.lx-fitprice-u{font-size:13px;color:var(--brass);line-height:1.5}
.lx-fitprice p{margin:14px 0 0;padding-block-start:14px;border-block-start:1px solid var(--hairline-dark);font-size:14px;line-height:1.7;color:var(--on-dark-soft);text-wrap:pretty}
@media(max-width:1000px){.lx-twoprice{grid-template-columns:1fr}.lx-fitprice-v{font-size:40px}}