/* SKIN5-SHOWCASE-RENDER-2026-09-07 — COMPLETE REPLACEMENT.

   Business-site frame only. Never load this file into a demonstration theme.

   Current DOM, copy, route targets, asset dimensions and site.js are retained.

   Do not append the retired paper/ink/violet or earlier image layers.

   Subsequent integration changes are append-only below a dated header. */

:root {

  /* Render-01 family: cream + deep navy + yellow-marigold + pale blue. */

  --skin-cream: #FCF8F1;

  --skin-white: #FFFFFF;

  --skin-navy: #0C2034;

  --skin-navy-rgb: 12 32 52;

  --skin-action: #FFD447;

  --skin-action-hover: #FFE17D;

  --skin-blue: #E9F3FA;

  --skin-link: #234D6B;

  --skin-muted: #526272;

  --skin-control: #697B8D;

  --skin-line: #CCD7E0;

  --skin-gradient-end: #49637A;

  --skin-hero-scrim: .68;

  --skin-font-display: "Noto Serif", serif;

  --skin-font-interface: "Inter", sans-serif;

  /* IMG9 integration point: leave none until the local photograph exists. */

  --show-hero-photo: none;

  --show-hero-focal: 70% 45%;



  /* Every previously defined --show-* token remains available. Accent is

     an accessible LINK color; primary actions use --skin-action explicitly. */

  --show-paper: var(--skin-cream);

  --show-surface: var(--skin-white);

  --show-ink: var(--skin-navy);

  --show-muted: var(--skin-muted);

  --show-accent: var(--skin-link);

  --show-accent-hover: var(--skin-navy);

  --show-accent-soft: var(--skin-blue);

  --show-line: var(--skin-line);

  --show-control: var(--skin-control);

  --show-clear: transparent;

  --show-font-heading: var(--skin-font-display);

  --show-font-body: var(--skin-font-interface);

  --show-text-small: .875rem;

  --show-text-body: 1rem;

  --show-text-lead: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);

  --show-text-h3: 1.25rem;

  --show-text-h2: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);

  --show-text-h1: clamp(2rem, 1.35rem + 2.8vw, 3.875rem);

  --show-text-price: clamp(2rem, 1.4rem + 2.2vw, 3.5rem);

  --show-space-1: .25rem;

  --show-space-2: .5rem;

  --show-space-3: .75rem;

  --show-space-4: 1rem;

  --show-space-5: 1.25rem;

  --show-space-6: 1.5rem;

  --show-space-8: 2rem;

  --show-space-10: 2.5rem;

  --show-space-12: 3rem;

  --show-space-16: 4rem;

  --show-space-20: 5rem;

  --show-gutter: clamp(1rem, 3vw, 2.5rem);

  --show-container: 76rem;

  --show-prose: 65ch;

  --show-form: 48rem;

  --show-radius-none: 0;

  --show-radius-control: .625rem;

  --show-radius-media: .75rem;

  --show-shadow-none: none;

  --show-shadow-raised: 0 .25rem 1rem rgb(var(--skin-navy-rgb) / .08);

  --show-z-menu: 20;

  --show-z-demo-notice: 40;

  --show-forced-focus: Highlight;

  --show-forced-button: ButtonFace;

  --show-forced-button-text: ButtonText;

}

.showcase, .showcase *, .showcase *::before, .showcase *::after {

  box-sizing: border-box;

}

.showcase {

  margin: 0;

  min-height: 100vh;

  min-height: 100svh;

  display: flex;

  flex-direction: column;

  background: var(--show-paper);

  color: var(--show-ink);

  font: 400 var(--show-text-body)/1.6 var(--show-font-body);

  -webkit-text-size-adjust: 100%;

  text-size-adjust: 100%;

  overflow-wrap: anywhere;

}

.showcase > main { flex: 1 0 auto; min-width: 0; }

.showcase > :is(header, footer) { flex-shrink: 0; }

.showcase [hidden] { display: none !important; }

.showcase :is(main, section, article, aside, nav, div, figure, fieldset, details) {

  min-width: 0;

}

.showcase :is(h1, h2, h3, p, ul, ol, dl, figure) { margin: 0; }

.showcase :is(h1, h2, h3) {

  color: inherit;

  font-family: var(--show-font-heading);

  font-weight: 700;

  font-stretch: normal;

  text-wrap: pretty;

  overflow-wrap: anywhere;

}

.showcase h1 { font-size: var(--show-text-h1); line-height: 1.12; letter-spacing: -.035em; }

.showcase h2 { font-size: var(--show-text-h2); line-height: 1.2; letter-spacing: -.025em; }

.showcase h3 { font-size: var(--show-text-h3); line-height: 1.3; letter-spacing: -.018em; }

.showcase strong { font-weight: 700; }

.showcase :is(p, li) { max-width: var(--show-prose); }

.showcase :is(p, ul, ol, dl) + :is(p, ul, ol, dl) { margin-block-start: 1rem; }

.showcase :is(h1, h2, h3) + :is(p, ul, ol, dl, div) { margin-block-start: 1rem; }

.showcase :is(p, ul, ol, dl, div) + h3 { margin-block-start: 1.5rem; }

.showcase a {

  color: var(--show-accent);

  text-decoration: underline;

  text-underline-offset: .22em;

  text-decoration-thickness: .08em;

  overflow-wrap: anywhere;

}

.showcase a[href] {

  display: inline-flex;

  align-items: center;

  min-height: 3rem;

  max-width: 100%;

}

.showcase a:hover { color: var(--show-accent-hover); text-decoration-thickness: .13em; }

/* Two-color focus: white band on photography/navy, navy outer band on light

   surfaces. Do not replace this with a gold-only ring or clip link containers. */

.showcase :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {

  outline: 3px solid var(--skin-white);

  outline-offset: 2px;

  box-shadow: 0 0 0 7px var(--skin-navy);

}

.showcase :where([id]) { scroll-margin-block-start: 1.5rem; }

.showcase img {

  display: block;

  width: 100%;

  max-width: 100%;

  height: auto;

}

.showcase img:not([src]), .showcase img[data-asset-pending] { display: none; }

.showcase :is(button, input, select, textarea) { font: inherit; color: inherit; }

.showcase :is(button, summary) { cursor: pointer; }

.showcase button { min-height: 3rem; max-width: 100%; overflow-wrap: anywhere; }

.showcase :is(button:disabled, input:disabled) { cursor: not-allowed; }

.showcase .container {

  width: min(100% - var(--show-gutter) * 2, var(--show-container));

  margin-inline: auto;

}

.showcase .section { padding-block: 2.5rem; }

.showcase .lead { font-size: var(--show-text-lead); line-height: 1.55; }

.showcase .skip-link {

  position: absolute;

  top: .5rem;

  left: var(--show-gutter);

  z-index: 50;

  min-height: 3rem;

  max-width: calc(100% - 2 * var(--show-gutter));

  padding: .75rem 1rem;

  background: var(--show-paper);

  color: var(--show-ink);

  clip-path: inset(50%);

  pointer-events: none;

}

.showcase .skip-link:focus { clip-path: none; pointer-events: auto; }

.showcase .button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: .5rem;

  min-height: 3rem;

  max-width: 100%;

  padding: .75rem 1.25rem;

  border: 1px solid var(--show-ink);

  border-radius: var(--show-radius-control);

  background: var(--skin-action);

  color: var(--show-ink);

  font-size: 1rem;

  font-weight: 700;

  line-height: 1.5;

  text-decoration: none;

  text-align: center;

  overflow-wrap: anywhere;

}

.showcase .button:hover, .showcase .button:active {

  background: var(--skin-action-hover);

  color: var(--show-ink);

  border-color: var(--show-ink);

}

.showcase .button:disabled {

  background: var(--show-paper);

  color: var(--show-muted);

  border: 1px dashed var(--show-control);

}

.showcase .secondary-button {

  min-height: 3rem;

  max-width: 100%;

  padding: .75rem 1rem;

  border: 1px solid var(--show-control);

  border-radius: var(--show-radius-control);

  background: var(--show-paper);

  color: var(--show-accent);

  line-height: 1.5;

  text-decoration: underline;

  text-underline-offset: .2em;

}

.showcase .secondary-button:hover { background: var(--show-accent-soft); color: var(--show-ink); }

.showcase .text-link { min-height: 3rem; padding-block: .625rem; }

.showcase .brand-link[href] {

  display: inline-flex;

  align-items: flex-start;

  justify-content: center;

  flex-direction: column;

  gap: .125rem;

  min-width: 0;

  min-height: 3rem;

  max-width: 100%;

  padding: 0;

  color: var(--show-ink);

  font-family: var(--show-font-body);

  font-size: 1.375rem;

  font-weight: 800;

  line-height: 1.25;

  letter-spacing: -.04em;

  text-decoration: none;

}

.showcase .brand-link:hover { color: var(--show-accent); }

.showcase .brand-name { overflow-wrap: anywhere; }

/* The added descriptor duplicates the existing local-language footer text.

   At narrow widths it remains accessible, but is not a tiny seven-line column. */

.showcase .brand-descriptor {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: 0;

  border: 0;

  overflow: hidden;

  clip-path: inset(50%);

  font-size: .75rem;

  font-weight: 400;

  line-height: 1.45;

  letter-spacing: 0;

}

.showcase .site-header {

  position: relative;

  z-index: var(--show-z-menu);

  background: var(--show-paper);

  border-bottom: 1px solid var(--show-line);

}

.showcase .header-inner {

  display: grid;

  /* Percentage tracks also shrink when text alone is enlarged. No fixed

     minimum for a bilingual word is allowed to force viewport overflow. */

  grid-template-columns: minmax(0, 1fr) minmax(0, 16.5%) minmax(0, 33%) minmax(0, 16.5%);

  align-items: center;

  gap: .25rem clamp(.125rem, .8vw, .375rem);

  width: min(100% - var(--show-gutter) * 2, var(--show-container));

  margin-inline: auto;

  padding-block: .5rem;

}

.showcase .header-identity-row { display: contents; }

.showcase .header-identity-row > .brand-link {

  grid-column: 1;

  grid-row: 1;

  font-size: clamp(.875rem, 3.65vw, 1.375rem);

}

.showcase .header-price {

  grid-column: 2;

  grid-row: 1;

  align-items: center;

  justify-content: center;

  min-width: 0;

  min-height: 3rem;

  padding: .25rem 0;

  color: var(--show-ink);

  font-size: .8125rem;

  font-weight: 600;

  text-align: center;

}

.showcase .language-switch {

  display: flex;

  align-items: stretch;

  flex-wrap: wrap;

  min-width: 0;

  gap: 0;

}

.showcase .header-inner > .language-switch { grid-column: 3; grid-row: 1; }

.showcase .language-switch > * {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex: 1 1 0;

  min-width: 0;

  min-height: 3rem;

  max-width: 100%;

  padding: .25rem 0;

  font-size: .75rem;

  line-height: 1.4;

  text-align: center;

  overflow-wrap: anywhere;

}

.showcase .language-current { color: var(--show-ink); font-weight: 700; }

.showcase .site-menu { display: contents; }

.showcase .site-menu summary {

  grid-column: 4;

  grid-row: 1;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 0;

  min-height: 3rem;

  width: 100%;

  padding: .25rem;

  color: var(--show-ink);

  list-style: none;

  border-radius: var(--show-radius-control);

}

.showcase .site-menu summary::-webkit-details-marker { display: none; }

.showcase .menu-open, .showcase .menu-close {

  position: absolute;

  width: 1px;

  height: 1px;

  overflow: hidden;

  clip-path: inset(50%);

}

.showcase .menu-close { display: none; }

.showcase .site-menu[open] .menu-open { display: none; }

.showcase .site-menu[open] .menu-close { display: inline; }

.showcase .menu-symbol {

  position: relative;

  display: block;

  width: 1.25rem;

  max-width: 100%;

  height: 1rem;

  flex: 0 1 1.25rem;

  border-block: 2px solid currentColor;

}

.showcase .menu-symbol::before {

  content: "";

  position: absolute;

  inset-inline: 0;

  top: calc(50% - 1px);

  border-top: 2px solid currentColor;

}

.showcase .site-menu[open] .menu-symbol { border-bottom: 0; height: 0; transform: rotate(45deg); }

.showcase .site-menu[open] .menu-symbol::before { top: -2px; transform: rotate(90deg); }

.showcase .menu-links {

  grid-column: 1 / -1;

  grid-row: 2;

  display: flex;

  flex-direction: column;

  gap: .25rem;

  min-width: 0;

  padding-block: .75rem;

  border-top: 1px solid var(--show-line);

}

.showcase .site-menu:not([open]) .menu-links { display: none; }

.showcase .menu-links a { min-height: 3rem; padding: .5rem .25rem; }

.showcase .desktop-menu { display: none; }



/* Full-bleed honest gradient until IMG9 is installed. The sole photo layer is

   decorative CSS background; every existing foreground capture stays intact. */

.showcase .hero {

  position: relative;

  isolation: isolate;

  overflow-x: clip;

  padding-block: 2rem 2.5rem;

  background-color: var(--skin-navy);

  background-image: var(--show-hero-photo), linear-gradient(115deg, var(--skin-navy), var(--skin-gradient-end));

  background-position: var(--show-hero-focal), center;

  background-size: cover, cover;

  background-repeat: no-repeat;

  color: var(--skin-white);

}

.showcase .hero::before {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background: rgb(var(--skin-navy-rgb) / var(--skin-hero-scrim));

  pointer-events: none;

}

.showcase .hero-layout {

  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  align-items: center;

  gap: 2rem;

}

.showcase .hero-copy { min-width: 0; padding: 0; color: var(--skin-white); }

.showcase .hero-copy h1 { max-width: 20ch; color: var(--skin-white); }

.showcase .hero-copy .lead { margin-block-start: 1.25rem; max-width: 55ch; }

.showcase .offer-price {

  max-width: 100%;

  margin-block: 1.5rem;

  padding: 1.25rem;

  border: 1px solid var(--show-line);

  border-radius: var(--show-radius-media);

  background: var(--skin-blue);

  color: var(--skin-navy);

}

.showcase .offer-name { max-width: none; font-size: 1.0625rem; font-weight: 700; }

.showcase .offer-price .price-line {

  max-width: none;

  margin-block-start: .5rem;

  font-size: 1rem;

  line-height: 1.8;

  font-variant-numeric: tabular-nums;

  overflow-wrap: anywhere;

}

.showcase .price-build {

  font-family: var(--show-font-heading);

  font-size: var(--show-text-price);

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -.04em;

}

.showcase .price-monthly { font-size: 1.5rem; font-weight: 700; line-height: 1.4; }

.showcase .price-tax { font-size: 1rem; }

/* All three paragraphs stay whole and in their original order, BEFORE the

   actions. SVGs add no words and have no accessible name. */

.showcase .hero-copy [data-block="H-02"] {

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  gap: 1rem;

}

.showcase .hero-copy [data-block="H-02"] > p {

  position: relative;

  max-width: none;

  margin: 0;

  padding-inline-start: 2.75rem;

  font-size: .9375rem;

  line-height: 1.6;

}

.showcase .hero-benefit-icon {

  position: absolute;

  inset-inline-start: 0;

  top: .15rem;

  display: block;

  width: 2rem;

  height: 2rem;

  fill: none;

  stroke: currentColor;

  stroke-width: 1.65;

  stroke-linecap: round;

  stroke-linejoin: round;

}

.showcase .hero-actions {

  grid-column: 1 / -1;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: .75rem 1.25rem;

  margin-block-start: .25rem;

}

.showcase .hero-copy a { color: var(--skin-white); }

.showcase .hero-copy a:hover { color: var(--skin-white); }

.showcase .hero-copy .button, .showcase .hero-copy .button-inverse {

  background: var(--skin-action);

  border-color: var(--skin-action);

  color: var(--skin-navy);

}

.showcase .hero-copy .button:hover, .showcase .hero-copy .button-inverse:hover {

  background: var(--skin-action-hover);

  border-color: var(--skin-action-hover);

  color: var(--skin-navy);

}

.showcase .hero-figure {

  width: 100%;

  max-width: 100%;

  min-width: 0;

  margin: 0 auto;

  padding-block: 1rem;

}

.showcase .media-slot {

  position: relative;

  width: 100%;

  max-width: 100%;

  min-width: 0;

  background: var(--show-paper);

  border: 1px solid var(--show-line);

  overflow-x: clip;

}

.showcase .hero-slot { aspect-ratio: 960 / 1060; }

.showcase .card-slot { aspect-ratio: 4 / 3; }

.showcase .slot-ornament {

  display: block;

  width: 100%;

  height: auto;

  stroke: var(--show-control);

  stroke-width: 1.25;

}

.showcase .media-slot:has(img[src]:not([data-asset-pending])) { aspect-ratio: auto; }

.showcase .media-slot:has(img[src]:not([data-asset-pending])) .slot-ornament { display: none; }

.showcase .media-slot:has(img[data-asset-pending]) .slot-ornament { display: block; }

.showcase .hero-slot:has(img[data-asset-pending]) { aspect-ratio: 960 / 1060; }

.showcase .card-slot:has(img[data-asset-pending]) { aspect-ratio: 4 / 3; }

/* No notch, glass overlay or fixed-height screen. A 1rem safety allowance on

   each side contains the transformed box, not merely its overflow painting. */

.showcase .hero-figure .hero-slot {

  width: calc(100% - 2rem);

  max-width: 25rem;

  margin-inline: auto;

  padding: 1.5rem .5rem;

  border: .5rem solid var(--skin-navy);

  border-radius: 2rem;

  background: var(--show-paper);

  overflow: visible;

  outline: 1px solid var(--skin-control);

  box-shadow: 0 1rem 2rem rgb(var(--skin-navy-rgb) / .3);

  transform: rotate(-3deg);

  transform-origin: center;

}

.showcase .hero-figure img { width: 100%; height: auto; border-radius: 0; }

.showcase .media-disclosure {

  padding: .75rem 1rem;

  background: var(--skin-navy);

  color: var(--skin-white);

  font-size: 1rem;

  line-height: 1.5;

}



/* Four equal photographed cards; the neutral grouping DIV uses contents, not

   DOM movement. No content-bearing element is removed or reordered. */

.showcase .demos-section > .container {

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  gap: 1.5rem;

}

.showcase .copy-block > * + * { margin-block-start: 1rem; }

.showcase .copy-block > h2:not(:first-child) { margin-block-start: 2rem; }

.showcase .copy-block .text-link { margin-block-start: .5rem; }

.showcase .demo-intro { grid-column: 1 / -1; text-align: center; }

.showcase .demo-intro h2 { max-width: 30ch; margin-inline: auto; }

.showcase .demo-intro p { max-width: 70ch; margin-inline: auto; }

.showcase .fiction-legend {

  grid-column: 1 / -1;

  padding: 0;

  border: 0;

  margin: 0 0 .25rem;

  background: transparent;

  box-shadow: none;

}

.showcase .fiction-legend p {

  max-width: 78ch;

  margin: .25rem auto;

  font-size: .875rem;

  line-height: 1.6;

  color: var(--show-muted);

}

.showcase .secondary-demos { display: contents; }

.showcase .demo-card, .showcase .demo-card-featured {

  position: relative;

  display: flex;

  flex-direction: column;

  min-width: 0;

  border: 1px solid var(--show-line);

  border-radius: var(--show-radius-media);

  background: var(--show-surface);

}

/* A shallow media rail accommodates the quiet top-right badge without putting

   a badge over menu content in the unchanged captures. Its text remains in

   the original DOM location, after the name. */

.showcase .demo-figure {

  width: 100%;

  margin: 0;

  padding-block-start: 3rem;

  background: var(--show-paper);

  border-radius: var(--show-radius-media) var(--show-radius-media) 0 0;

}

.showcase .demo-figure .media-slot { border: 0; }

.showcase .demo-figure img { display: block; width: 100%; height: auto; }

.showcase .demo-copy {

  display: flex;

  flex-direction: column;

  flex: 1;

  min-width: 0;

  padding: 1.25rem;

}

.showcase .demo-copy h3 { margin-block-start: 0; }

.showcase .demo-meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; margin-block-end: .5rem; }

.showcase .category { color: var(--show-accent); font-size: .875rem; font-weight: 700; line-height: 1.5; }

.showcase .fictional-badge {

  display: inline-block;

  padding: 0;

  color: var(--show-muted);

  background: transparent;

  border-radius: 0;

  font-size: .75rem;

  font-weight: 500;

  line-height: 1.5;

  letter-spacing: .04em;

  text-transform: uppercase;

}

.showcase .demo-copy > .fictional-badge {

  position: absolute;

  inset-block-start: .625rem;

  inset-inline-end: .75rem;

  max-width: calc(100% - 1.5rem);

  align-self: flex-start;

  margin: 0;

  text-align: end;

}

.showcase .demo-question { margin-block-start: 1rem; font-size: 1.0625rem; line-height: 1.55; }

.showcase .notice-label { margin-block-start: 1rem; font-weight: 700; }

.showcase .observations { margin-block-start: .5rem; margin-block-end: 1rem; padding-inline-start: 1.25rem; }

.showcase .observations li + li { margin-block-start: .5rem; }

.showcase .demo-link { align-self: flex-start; margin-block-start: auto; padding-block-start: 1rem; font-weight: 600; }



.showcase .process-section { background: var(--show-paper); border-block: 1px solid var(--show-line); }

.showcase .process-layout { display: grid; gap: 1.75rem; }

.showcase .process-list {

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  gap: 1.75rem;

  list-style: none;

  counter-reset: process;

  padding: 0;

}

.showcase .process-list li { counter-increment: process; position: relative; max-width: none; padding: 0; }

.showcase .process-list li::before {

  content: counter(process);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 2.75rem;

  height: 2.75rem;

  margin-block-end: .875rem;

  border-radius: 50%;

  background: var(--skin-navy);

  color: var(--skin-white);

  font: 700 1rem/1 var(--show-font-body);

}

.showcase .process-list h3 { font-size: 1.125rem; }

.showcase .process-list li > p { margin-block-start: .625rem; font-size: .9375rem; line-height: 1.65; }

.showcase .process-list + .text-link { margin-block-start: 1.25rem; }

.showcase .identity-section h2 { max-width: 32ch; }

.showcase .identity-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-block-start: 1.75rem; }

.showcase .identity-grid section { padding: 0; }

.showcase .identity-note { margin-block-start: 1.5rem; }

.showcase .next-step { background: var(--skin-navy); color: var(--skin-white); }

.showcase .next-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; }

.showcase .next-layout > div > p { margin-block-start: 1rem; }

.showcase .next-actions > * + * { margin-block-start: 1rem; }

.showcase .next-step a { color: var(--skin-white); }

.showcase .next-actions > .text-link {

  align-items: center;

  justify-content: center;

  min-height: 3rem;

  padding: .875rem 1.25rem;

  border: 1px solid var(--skin-action);

  border-radius: var(--show-radius-control);

  background: var(--skin-action);

  color: var(--skin-navy);

  font-weight: 700;

  line-height: 1.5;

  text-align: center;

  text-decoration: none;

}

.showcase .next-actions > .text-link:hover {

  background: var(--skin-action-hover);

  border-color: var(--skin-action-hover);

  color: var(--skin-navy);

}

.showcase .pending {

  padding: 1rem;

  border: 1px dashed var(--show-control);

  border-radius: var(--show-radius-control);

  background: var(--show-surface);

  color: var(--show-ink);

  font-size: 1rem;

  line-height: 1.6;

  overflow-wrap: anywhere;

}

.showcase .pending p + p { margin-block-start: .5rem; }

.showcase .next-step .pending, .showcase .site-footer .pending { background: var(--skin-blue); color: var(--skin-navy); }

.showcase .pending-inline {

  display: block;

  margin-block-start: .5rem;

  padding: .75rem;

  border-inline-start: 3px solid var(--show-control);

  background: var(--show-surface);

  color: var(--show-ink);

}

.showcase .detail-label { font-weight: 600; }

.showcase .site-footer {

  padding-block: 2rem;

  border-top: 1px solid var(--show-control);

  background: var(--skin-navy);

  color: var(--skin-white);

}

.showcase .footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }

.showcase .site-footer a, .showcase .site-footer .brand-link { color: var(--skin-white); }

.showcase .site-footer a:hover { color: var(--skin-white); }

.showcase .footer-identity p { max-width: 43ch; margin-block-start: .75rem; }

.showcase .footer-links, .showcase .footer-legal { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; }

.showcase .footer-links a, .showcase .footer-legal a { min-height: 3rem; padding-block: .5rem; font-size: .9375rem; }

.showcase .contact-pending { font-size: 1rem; }



/* Pricing, care, terms, privacy and reference pages share the same frame. */

.showcase .page-intro { padding-block: 2.5rem 2rem; }

.showcase .page-intro h1 { max-width: 25ch; }

.showcase .page-intro .offer-price { max-width: 43rem; margin-block: 1.5rem 0; }

.showcase .page-intro > .copy-block > .pending { max-width: var(--show-prose); }

.showcase .document-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 0 3rem; }

.showcase .document-body { width: 100%; max-width: var(--show-prose); }

.showcase .document-body > .copy-block { padding-block: 2rem; border-bottom: 1px solid var(--show-line); }

.showcase .document-body > .copy-block:first-child { padding-block-start: 0; }

.showcase .document-body > .offer-price { margin-block: 2rem; }

.showcase .document-body > div[id] { padding-block: 2rem; border-bottom: 1px solid var(--show-line); }

.showcase .section-navigation {

  display: flex;

  flex-wrap: wrap;

  align-items: flex-start;

  gap: .25rem 1.25rem;

  padding: .75rem 0;

  border-block: 1px solid var(--show-line);

}

.showcase .section-navigation a { min-height: 3rem; max-width: 100%; padding-block: .5rem; }

.showcase .scope-list { padding: 0; list-style: none; }

.showcase .scope-list li { position: relative; max-width: none; padding: .875rem 0 .875rem 1.625rem; border-bottom: 1px solid var(--show-line); }

.showcase .scope-list li::before {

  content: "";

  position: absolute;

  inset-inline-start: .125rem;

  top: 1.3rem;

  width: .375rem;

  height: .7rem;

  border-inline-end: 2px solid var(--show-accent);

  border-bottom: 2px solid var(--show-accent);

  transform: rotate(45deg);

}

.showcase .ledger { margin: 0; }

.showcase .ledger-row {

  display: grid;

  grid-template-columns: minmax(0, 1fr);

  gap: .5rem 1.5rem;

  align-items: baseline;

  border-bottom: 1px solid var(--show-line);

  padding-block: 1rem;

}

.showcase .ledger-row dt { min-width: 0; font-weight: 600; }

.showcase .ledger-row dd { min-width: 0; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.showcase .ledger-row dd.ledger-condition { grid-column: 1 / -1; text-align: left; }

.showcase .question-list { counter-reset: question; }

.showcase .question { position: relative; border-top: 1px solid var(--show-line); padding-block: 1.5rem; }

.showcase .question:first-child { margin-block-start: 1.5rem; }

.showcase .question h3 { font-size: 1.375rem; }

.showcase .closing-block { padding-block-end: 0; }

.showcase .closing-block .button { margin-block: .5rem; }

.showcase .closing-block .text-link { display: flex; width: fit-content; }

.showcase .narrow-page { max-width: 48rem; padding-block-end: 3rem; }

.showcase .reference-row { padding-block: 1.5rem; border-top: 1px solid var(--show-line); }

.showcase .reference-title { font-size: 1.25rem; }

.showcase .reference-label { color: var(--show-muted); }

.showcase .reference-row .pending { margin-block-start: 1rem; }

.showcase .reference-list + .copy-block { margin-block-start: 1.5rem; }



/* Intake presentation only. No data policy, state machine, endpoint, disabled

   attribute, input name, HTML confirmation or script is changed by this skin. */

.showcase .intake-page { max-width: var(--show-form); padding-block-end: 3rem; }

.showcase .intake-page .page-intro { padding-block-end: 1.5rem; }

.showcase .intake-page .page-intro a { display: flex; width: fit-content; }

.showcase .form-index { margin-block-end: 2rem; }

.showcase .intake-form { margin: 0; }

.showcase .form-section {

  margin-block: 1.5rem;

  padding: 1rem;

  border: 1px solid var(--show-line);

  border-radius: var(--show-radius-media);

  background: var(--show-surface);

}

.showcase .form-section h2 { margin-block: 0 1.5rem; font-size: 1.5rem; }

.showcase .form-section > p { margin-block: 1rem; }

.showcase .form-section > .pending { margin-block-end: 1.5rem; border: 1px dashed var(--show-control); }

.showcase .field { min-width: 0; margin-block: 1.25rem; }

.showcase .field > label { display: block; font-weight: 600; }

.showcase .required-mark { font-size: 1rem; font-weight: 400; color: var(--show-muted); }

.showcase .field-help { margin-block: .5rem; color: var(--show-muted); font-size: 1rem; }

.showcase :is(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), textarea, select) {

  width: 100%;

  min-width: 0;

  max-width: 100%;

  min-height: 3rem;

  margin-block-start: .5rem;

  border: 1px solid var(--show-control);

  border-radius: var(--show-radius-control);

  padding: .75rem;

  background: var(--show-surface);

  color: var(--show-ink);

  font-size: 1rem;

  line-height: 1.5;

}

.showcase textarea { resize: vertical; }

.showcase :is(input[type="date"], input[type="time"], select) {

  -webkit-appearance: none;

  appearance: none;

  width: 100%;

  min-width: 0;

}

.showcase .select-wrap { position: relative; }

.showcase .select-wrap select { padding-inline-end: 2.75rem; }

.showcase .select-wrap::after {

  content: "";

  position: absolute;

  pointer-events: none;

  width: .65rem;

  height: .65rem;

  inset-inline-end: 1rem;

  top: 1.75rem;

  border-inline-end: 2px solid var(--show-ink);

  border-bottom: 2px solid var(--show-ink);

  transform: rotate(45deg);

}

.showcase .option-group { min-width: 0; padding: 0; border: 0; margin: 1.5rem 0; }

.showcase .option-group > legend { max-width: 100%; padding: 0; margin-block-end: .75rem; font-weight: 600; }

.showcase .option-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }

.showcase .option { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: start; gap: .625rem; }

/* Native input semantics, with a 48px input hit box and a smaller drawn mark.

   No label is removed, no extra pseudo text, and forced-colors restores native

   rendering. The line check is CSS, not an SVG with lettering. */

.showcase .option input {

  -webkit-appearance: none;

  appearance: none;

  display: grid;

  place-content: center;

  width: 3rem;

  height: 3rem;

  min-height: 3rem;

  max-width: 100%;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: .375rem;

  background: var(--show-surface);

  color: var(--show-ink);

  accent-color: var(--show-accent);

  cursor: pointer;

}

.showcase .option input::before, .showcase .option input::after { content: ""; grid-area: 1 / 1; align-self: center; justify-self: center; }

.showcase .option input::before { width: 1.375rem; height: 1.375rem; border: 2px solid var(--show-control); border-radius: .25rem; background: var(--show-surface); }

.showcase .option input[type="radio"]::before { border-radius: 50%; }

.showcase .option input[type="radio"]::after { width: .625rem; height: .625rem; border-radius: 50%; background: var(--show-ink); visibility: hidden; }

.showcase .option input[type="checkbox"]:checked::before { border-color: var(--show-ink); background: var(--show-ink); }

.showcase .option input[type="checkbox"]::after { width: .35rem; height: .65rem; border-inline-end: 2px solid var(--skin-white); border-bottom: 2px solid var(--skin-white); transform: translateY(-.06rem) rotate(45deg); visibility: hidden; }

.showcase .option input:checked::after { visibility: visible; }

.showcase .option input:disabled { cursor: not-allowed; }

.showcase .option input:disabled::before { border-style: dashed; background: var(--show-paper); }

.showcase .option label { display: block; min-height: 3rem; padding-block: .625rem; }

.showcase .option .field-help { margin-block-start: 0; }

.showcase .declaration + .declaration { margin-block-start: 1rem; }

.showcase input[data-policy-locked] { border-style: dashed; background: var(--show-paper); color: var(--show-muted); }

.showcase input[type="file"] { overflow-wrap: anywhere; }

.showcase input[type="file"]::file-selector-button {

  min-height: 3rem;

  max-width: 100%;

  margin: 0 .5rem .25rem 0;

  border: 1px solid var(--show-control);

  border-radius: .375rem;

  background: var(--show-paper);

  color: var(--show-ink);

  font: inherit;

  padding: .5rem;

  white-space: normal;

}

.showcase .conditional-fields { min-width: 0; border-inline-start: 2px solid var(--show-line); padding-inline-start: .75rem; }

.showcase .field-error {

  margin-block-start: .5rem;

  padding-inline-start: .75rem;

  border-inline-start: 3px solid var(--show-ink);

  color: var(--show-ink);

  font-weight: 600;

}

.showcase [aria-invalid="true"] { border: 2px solid var(--show-ink); }

.showcase .submit-section { padding: 1.5rem 0; border-top: 1px solid var(--show-ink); }

.showcase .submit-section .button { margin-block: 1rem; }

.showcase .form-states > :is(.error-summary, .receipt-notice) {

  padding: 1.25rem;

  margin-block: 1.5rem;

  border: 2px solid var(--show-ink);

  border-radius: var(--show-radius-control);

  background: var(--show-accent-soft);

  color: var(--show-ink);

}

.showcase .error-summary h2, .showcase .receipt-notice h2 { font-size: 1.5rem; }

.showcase .error-summary ul { padding-inline-start: 1.25rem; }

.showcase .error-summary a { min-height: 3rem; padding-block: .5rem; }

.showcase .receipt-notice button { margin-block-start: 1rem; }

.showcase #intake-status:empty { display: none; }

.showcase #intake-status { padding: 1rem 0; }

.showcase [data-submission-reference], .showcase .file-name { overflow-wrap: anywhere; }

.showcase .selected-files ul { padding-inline-start: 1.25rem; }

.showcase .selected-files button { margin: .5rem 0; }

.showcase .unsent-dialog {

  width: min(32rem, calc(100% - 2rem));

  max-height: calc(100% - 2rem);

  max-height: calc(100dvh - 2rem);

  margin: auto;

  padding: 1.5rem;

  border: 2px solid var(--show-ink);

  border-radius: var(--show-radius-control);

  background: var(--show-paper);

  color: var(--show-ink);

  overflow: auto;

  overscroll-behavior: contain;

}

.showcase .unsent-dialog::backdrop { background: rgb(var(--skin-navy-rgb) / .6); }

.showcase .dialog-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.5rem; }

.showcase .not-found { padding-block: 3rem 4rem; }

.showcase .not-found h1 { max-width: 23ch; }

.showcase .error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 1.5rem; }



@media (max-width: 23.749rem) {

  .showcase .hero-actions > *, .showcase .error-actions > .button { width: 100%; }

  .showcase .hero-actions > .text-link { justify-content: center; text-align: center; }

  .showcase .form-section { padding: .875rem; }

  .showcase .offer-price { padding: 1rem; }

  .showcase .ledger-row { grid-template-columns: minmax(0, 1fr); }

  .showcase :is(.form-section h2, .legal-layout h2) { hyphens: auto; }

}

@media (min-width: 23.75rem) {

  .showcase .ledger-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

}

@media (min-width: 40rem) {

  .showcase .header-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 12%) minmax(0, 26%) minmax(0, 9%); }

  .showcase .header-price, .showcase .language-switch > * { font-size: 1rem; }

  .showcase .hero { padding-block: 2.5rem; }

  .showcase .hero-copy [data-block="H-02"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .showcase .offer-price { padding: 1.5rem; }

  .showcase .demos-section > .container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

  .showcase .identity-grid, .showcase .short-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }

  .showcase .short-field-grid .field { margin: 0; display: flex; flex-direction: column; }

  /* FORM-ALIGN 2026-09-12: two fields side by side keep their boxes level even when one help line wraps

     and the other does not (operator: "Can you align these two boxes") — the box sits at the row's foot. */

  .showcase .short-field-grid .field > input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) { margin-block-start: auto; }

  /* the :not() chain matches the general input rule's specificity (0,4,1) and beats it — R-77 again: a lower-specificity class rule lost silently */

  .showcase .form-section { padding: 1.5rem; }

  .showcase .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .showcase .process-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .showcase .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .showcase .footer-identity { grid-column: 1 / -1; }

  .showcase .form-index { column-gap: 1.5rem; }

}

@media (min-width: 64rem) {

  .showcase .section { padding-block: 4rem; }

  .showcase .header-inner {

    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.8fr) minmax(0, .3fr) minmax(0, .7fr);

    gap: 1rem;

    padding-block: .875rem;

  }

  .showcase .header-identity-row > .brand-link { grid-column: 1; grid-row: 1; font-size: 1.5rem; }

  .showcase .brand-descriptor { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }

  .showcase .header-price { grid-column: 3; grid-row: 1; font-size: .875rem; }

  .showcase .header-inner > .language-switch { grid-column: 4; grid-row: 1; }

  .showcase .language-switch > * { font-size: .875rem; padding-inline: .125rem; }

  .showcase .site-menu { display: none; }

  .showcase .desktop-menu {

    grid-column: 2;

    grid-row: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: .25rem 1rem;

  }

  .showcase .desktop-menu a { min-width: 0; min-height: 3rem; padding-block: .5rem; font-size: .875rem; }

  .showcase .hero { padding-block: 3rem; }

  .showcase .hero-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }

  .showcase .hero-figure { align-self: center; }

  .showcase .demos-section > .container { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .showcase .demo-copy { padding: 1.25rem; }

  .showcase .demo-card h3 { font-size: 1.25rem; }

  .showcase .process-list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; }

  .showcase .process-list li:last-child:nth-child(odd) { grid-column: auto; }

  .showcase .identity-grid { gap: 3rem; }

  .showcase .next-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; }

  .showcase .footer-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr); gap: 3rem; }

  .showcase .footer-identity { grid-column: auto; }

  .showcase .site-footer { padding-block: 3rem; }

  .showcase .page-intro { padding-block: 3rem 2.5rem; }

  .showcase.page-pricing .page-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }

  .showcase.page-pricing .page-intro .offer-price { margin: 0; }

  .showcase .document-layout { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: 3rem; padding-block-end: 4rem; }

  .showcase .section-navigation { flex-direction: column; }

  .showcase .form-index { flex-direction: row; }

  .showcase .document-body > .copy-block { padding-block: 2.5rem; }

  .showcase .document-body > .copy-block:first-child { padding-block-start: 0; }

  .showcase .document-body > div[id] { padding-block: 2.5rem; }

  .showcase .included-scope .scope-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }

}

@media (forced-colors: active) {

  :root {

    --skin-cream: Canvas;

    --skin-white: Canvas;

    --skin-navy: CanvasText;

    --skin-action: ButtonFace;

    --skin-action-hover: ButtonFace;

    --skin-blue: Canvas;

    --skin-link: LinkText;

    --skin-muted: CanvasText;

    --skin-control: CanvasText;

    --skin-line: CanvasText;

    --skin-gradient-end: Canvas;

    --show-forced-focus: Highlight;

    --show-forced-button: ButtonFace;

    --show-forced-button-text: ButtonText;

  }

  .showcase :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--show-forced-focus); outline-offset: 3px; box-shadow: none; }

  .showcase .hero, .showcase .next-step, .showcase .site-footer { background: Canvas; color: CanvasText; }

  .showcase .hero::before { display: none; }

  .showcase .hero-copy, .showcase .hero-copy h1 { color: CanvasText; }

  .showcase .hero-copy a, .showcase .next-step a, .showcase .site-footer a, .showcase .site-footer .brand-link { color: LinkText; }

  .showcase .button, .showcase .hero-copy .button, .showcase .next-actions > .text-link { background: ButtonFace; color: ButtonText; border-color: ButtonText; }

  .showcase .button:hover, .showcase .hero-copy .button:hover, .showcase .next-actions > .text-link:hover { background: ButtonFace; color: ButtonText; border-color: ButtonText; }

  .showcase .slot-ornament { stroke: CanvasText; }

  .showcase .process-list li::before { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }

  .showcase .option input { -webkit-appearance: auto; appearance: auto; accent-color: auto; }

  .showcase .option input::before, .showcase .option input::after { display: none; }

}

@media (prefers-reduced-motion: reduce) {

  .showcase { scroll-behavior: auto; }

}

@media print {

  .showcase { display: block; background: var(--show-surface); color: var(--show-ink); }

  .showcase .site-menu, .showcase .desktop-menu, .showcase .language-switch, .showcase .site-footer, .showcase .skip-link { display: none; }

  .showcase .hero, .showcase .hero-copy, .showcase .next-step, .showcase .media-disclosure { background: var(--show-surface); color: var(--show-ink); }

  .showcase .hero { overflow: visible; }

  .showcase .hero::before { display: none; }

  .showcase .hero-copy h1, .showcase .hero-copy a, .showcase .next-step a { color: var(--show-ink); }

  .showcase .hero-layout, .showcase .document-layout { display: block; }

  .showcase .hero-figure { display: none; }

  .showcase .form-section, .showcase .ledger-row, .showcase .demo-card { break-inside: avoid; }

}



/* SHOWCASE integration — 2026-09-07: the IMG9 hero photograph (blue-hour taquería, no lettering, fictional; R-06 checked

   region by region before placement). Append-only under a dated header; the SKIN5 replacement stylesheet above is untouched.

   The scrim stays at 68% navy: white hero text clears 5.76:1 against a fully white pixel and 18.29:1 against black, so no

   contrast recalculation is needed. --show-hero-focal keeps the SKIN5 default. */

.showcase .hero { --show-hero-photo: url("/img/showcase-hero-blue-hour.jpg"); }

@media (max-width: 47.999rem) {

  .showcase .hero { --show-hero-photo: url("/img/showcase-hero-blue-hour-mobile.jpg"); --show-hero-focal: 60% 40%; }

}



/* SHOWCASE integration - 2026-09-07: ERR-1c, errors carry their own colour.

   Operator ballot ERR-1, word verbatim: "C" (panel C of the comparison, crimson #A02334).

   Append-only under a dated header; the SKIN5 replacement stylesheet above is untouched and

   every legacy token alias is preserved. Ratios: crimson on cream 7.12:1, on white 7.54:1,

   on its own surface 6.25:1; navy body copy on that surface 13.69:1; the 2px invalid-field

   edge is 7.54:1 against the white input, well over the 3:1 required for a non-text boundary.

   The SUCCESS receipt is deliberately NOT recoloured: .receipt-notice shares a rule with

   .error-summary above, so the error treatment is applied to .error-summary ALONE. */

:root {

  --skin-error: #A02334;

  --skin-error-surface: #F5E7E2;

  --show-error: var(--skin-error);

  --show-error-surface: var(--skin-error-surface);

}

.showcase .field-error { border-inline-start-color: var(--show-error); color: var(--show-error); }

/* The SKIN5 rule `.showcase [aria-invalid="true"] { border: 2px solid var(--show-ink) }`

   above is DEAD CSS: at (0,2,0) it loses to the field rule at (0,4,1), so an invalid field has

   been rendering identically to a valid one (1px solid #697B8D) since SKIN5. Verified in the

   browser 2026-09-07. Repaired here by matching the field selector and adding the attribute,

   which reaches (0,5,1). Crimson on the white field is 7.54:1, over the 3:1 a non-text

   boundary needs. The generic rule is kept for any non-field element carrying aria-invalid. */

.showcase [aria-invalid="true"] { border-color: var(--show-error); }

.showcase :is(input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]), textarea, select)[aria-invalid="true"] {

  border: 2px solid var(--show-error);

}

.showcase .form-states > .error-summary {

  border-color: var(--show-error);

  background: var(--show-error-surface);

}

.showcase .error-summary h2 { color: var(--show-error); }

.showcase .error-summary a { color: var(--show-error); }

@media (forced-colors: active) {

  :root { --skin-error: CanvasText; --skin-error-surface: Canvas; }

  .showcase .form-states > .error-summary { border-color: CanvasText; background: Canvas; }

  .showcase .error-summary h2, .showcase .error-summary a { color: LinkText; }

}



/* SHOWCASE integration - 2026-09-07: BP-5b, Prompt 07 completion proposal P05 (restrained motion).

   Operator button verbatim: "Do them now". Append-only under a dated header; the SKIN5 replacement

   stylesheet above is untouched. Source: consults/brand-program-2026-09-07/VISUAL_SYSTEM.md section 6.

   What this adds: four motion tokens and ONE opt-in transition on interactive controls, limited to

   background-color, color and border-color at 120ms, and only when the visitor has not asked for

   reduced motion. It adds no entrance animation, no parallax, no hero panning, no animated numerals,

   no on-scroll reveals. Focus indication is NOT transitioned: outline and box-shadow are absent from

   the property list, so the ring appears immediately in every mode (P02 requirement). Under

   prefers-reduced-motion: reduce the durations are 0ms and the transition block does not apply at all.

   The 180ms "reveal" token is reserved, as the proposal states; nothing here uses it. */

:root {

  --motion-duration-instant: 0ms;

  --motion-duration-state: 120ms;

  --motion-duration-reveal: 180ms;

  --motion-easing: cubic-bezier(.2, 0, 0, 1);

}

@media (prefers-reduced-motion: reduce) {

  :root {

    --motion-duration-state: 0ms;

    --motion-duration-reveal: 0ms;

  }

}

@media (prefers-reduced-motion: no-preference) {

  .showcase :where(a, .button, .text-link, button, input, select, textarea, summary) {

    transition:

      background-color var(--motion-duration-state) var(--motion-easing),

      color var(--motion-duration-state) var(--motion-easing),

      border-color var(--motion-duration-state) var(--motion-easing);

  }

}



/* SHOWCASE integration - 2026-09-08: BUILD6, the homepage rebuilt to render 01's composition (DECISIONS § REBUILD-1, R-47).

   Append-only under a dated header; everything above is untouched. Every rule is scoped to .page-home and to new b6- classes,

   so the other fifteen pages keep the SKIN5 frame exactly. Section order and proportions follow the render: a photo hero with a

   tall hand-held phone on the right (IMG9 + a CSS device until IMG10 lands), four photographed demonstration cards with each name

   as live type in that demonstration's face, a pale-blue price panel beside a three-column inclusions grid, four numbered steps,

   a navy call-to-action band. Locked tokens only; the four demonstration faces and colours appear only inside their own cards. */

.page-home .b6-hero {

  position: relative; isolation: isolate; color: var(--skin-white);

  background: var(--skin-navy) url("/img/showcase-hero-blue-hour.jpg") 70% 45% / cover no-repeat;

  padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.75rem);

}

.page-home .b6-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;

  background: linear-gradient(90deg, rgb(var(--skin-navy-rgb) / .86) 0%, rgb(var(--skin-navy-rgb) / .66) 46%, rgb(var(--skin-navy-rgb) / .18) 100%); }

.page-home .b6-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }

.page-home .b6-hero h1 { font-family: var(--skin-font-display); font-weight: 700; font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 1rem; color: var(--skin-white); }

.page-home .b6-hero-lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); line-height: 1.5; max-width: 34rem; margin: 0 0 1.5rem; color: var(--skin-white); }

.page-home .b6-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-bottom: 2rem; }

.page-home .b6-hero-actions .button { background: var(--skin-action); border-color: var(--skin-action); color: var(--skin-navy); font-weight: 700; padding: .9rem 1.6rem; border-radius: 999px; }

.page-home .b6-hero-actions .button:hover { background: var(--skin-action-hover); border-color: var(--skin-action-hover); color: var(--skin-navy); }

.page-home .b6-arrow-link { font-weight: 600; text-decoration: underline; text-underline-offset: .2em; color: inherit; }

.page-home .b6-hero .b6-arrow-link { color: var(--skin-white); }

.page-home .b6-benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; }

.page-home .b6-benefits li { display: flex; align-items: center; gap: .6rem; font-size: .9375rem; font-weight: 600; line-height: 1.3; }

.page-home .b6-benefits svg { flex: none; width: 2.25rem; height: 2.25rem; padding: .45rem; border-radius: 50%; background: var(--skin-white); fill: none; stroke: var(--skin-navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.page-home .b6-hero-figure { margin: 0; position: relative; display: grid; grid-template-columns: auto minmax(7rem, 9rem); gap: 1.5rem; justify-content: center; align-items: center; }

.page-home .b6-phone { position: relative; width: clamp(12rem, 16.5vw, 15rem); aspect-ratio: 9 / 19; border-radius: 2.2rem; background: #0a0d12; padding: .55rem; box-shadow: 0 1.5rem 3rem rgb(0 0 0 / .45), inset 0 0 0 .12rem #2b323c; transform: rotate(-4deg); }

.page-home .b6-phone::before { content: ""; position: absolute; top: .8rem; left: 50%; width: 5rem; height: .9rem; transform: translateX(-50%); border-radius: 999px; background: #0a0d12; z-index: 2; }

.page-home .b6-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 1.7rem; background: #fff; }

.page-home .b6-hero-caption { position: static; max-width: 9rem; font-weight: 700; font-size: 1.0625rem; line-height: 1.35; color: var(--skin-white); text-align: left; }



.page-home .b6-demos { background: var(--skin-cream); padding-block: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.25rem); }

.page-home .b6-section-head { text-align: center; max-width: 44rem; margin: 0 auto 1.5rem; }

.page-home .b6-section-head h2 { font-family: var(--skin-font-display); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); margin: 0 0 .75rem; color: var(--skin-navy); }

.page-home .b6-legend { margin: 0; color: var(--skin-navy); line-height: 1.5; }

.page-home .b6-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }

.page-home .b6-card h3 { font-family: var(--skin-font-display); font-size: 1.25rem; margin: .9rem 0 .35rem; color: var(--skin-navy); }

.page-home .b6-card-label { margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--skin-link); }

.page-home .b6-card-text { margin: 0 0 .5rem; font-size: .9375rem; line-height: 1.45; color: var(--skin-navy); }

.page-home .b6-card .b6-arrow-link { color: var(--skin-link); font-size: .9375rem; }

.page-home .b6-card > a.b6-card-media[href] { position: relative; display: block; width: 100%; min-height: 0; padding: 0; margin: 0; line-height: 0; aspect-ratio: 4 / 3; border-radius: .75rem; overflow: hidden; background: var(--skin-navy); box-shadow: var(--show-shadow-raised); text-decoration: none; }

.page-home .b6-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.page-home .b6-card-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0B1626 0%, #0B1626 55%, rgb(11 22 38 / .15) 72%, rgb(0 0 0 / 0) 100%); }

.page-home .b6-card-brasa .b6-card-media::after { background: linear-gradient(180deg, #111315 0%, #111315 55%, rgb(17 19 21 / .2) 72%, rgb(0 0 0 / 0) 100%); }

.page-home .b6-card-mark { position: absolute; left: 1rem; top: .9rem; right: 30%; z-index: 2; display: grid; gap: .3rem; color: #F5EBD8; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }

.page-home .b6-mark-name { display: block; line-height: .98; }

.page-home .b6-mark-tag { display: block; font-family: var(--skin-font-interface); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .92; line-height: 1.3; }

.page-home .b6-mark-glyph { font-size: .7em; vertical-align: .35em; margin-right: .1em; }

.page-home .b6-card-cometa .b6-mark-name { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 1.75rem; }

.page-home .b6-card-brujula .b6-card-media::after { background: linear-gradient(180deg, #063B8F 0%, #063B8F 56%, #C83A24 56%, #C83A24 61%, rgb(0 0 0 / 0) 61%); }

.page-home .b6-card-brujula .b6-mark-name { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 800; font-size: 2.2rem; text-transform: uppercase; letter-spacing: .01em; color: #FFFFFF; }

.page-home .b6-card-brujula .b6-card-media img { object-position: center 78%; }

.page-home .b6-card-brasa .b6-mark-name { font-family: "Oswald", "Arial Narrow", sans-serif; font-weight: 700; font-size: 2.1rem; text-transform: uppercase; letter-spacing: .02em; color: #D9542B; }

.page-home .b6-card-brasa .b6-mark-tag { color: #F5EBD8; }

.page-home .b6-card-luna .b6-card-media::after { background: linear-gradient(180deg, #276749 0%, #276749 58%, rgb(0 0 0 / 0) 58%); }

.page-home .b6-card-luna .b6-mark-name { font-family: "Lora", Georgia, serif; font-weight: 700; font-size: 1.75rem; color: #F5EBD8; }

.page-home .b6-card-luna .b6-card-media img { object-position: center 88%; }

.page-home .b6-card-media .fictional-badge { position: absolute; top: .7rem; right: .7rem; z-index: 3; margin: 0; padding: .3rem .6rem; border-radius: .4rem; background: var(--skin-action); color: var(--skin-navy); font-size: .7rem; font-weight: 700; letter-spacing: .02em; text-transform: none; border: 0; }



.page-home .b6-plan { background: var(--skin-cream); padding-block: clamp(1rem, 2vw, 1.5rem) clamp(2rem, 4vw, 3rem); }

.page-home .b6-plan-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }

.page-home .b6-plan-panel { background: var(--skin-blue); border-radius: 1rem; padding: 1.75rem 1.5rem; }

.page-home .b6-plan-panel h2 { font-family: var(--skin-font-display); font-size: 1.5rem; margin: 0 0 .5rem; color: var(--skin-navy); }

.page-home .b6-plan-price { margin: 0; display: grid; color: var(--skin-navy); }

.page-home .b6-plan-build { font-family: var(--skin-font-display); font-weight: 700; font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem); line-height: 1; }

.page-home .b6-plan-month { font-family: var(--skin-font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.2; }

.page-home .b6-plan-tax { margin: .4rem 0 .6rem; font-size: .9rem; color: var(--skin-navy); }

.page-home .b6-plan-care { margin: 0 0 1.25rem; font-size: .875rem; line-height: 1.45; color: var(--skin-muted); }

.page-home .b6-plan-panel .button { background: var(--skin-action); border-color: var(--skin-action); color: var(--skin-navy); font-weight: 700; border-radius: 999px; padding: .85rem 1.4rem; }

.page-home .b6-plan-panel .button:hover { background: var(--skin-action-hover); border-color: var(--skin-action-hover); color: var(--skin-navy); }

.page-home .b6-includes h2 { font-family: var(--skin-font-display); font-size: 1.5rem; margin: .5rem 0 1.25rem; color: var(--skin-navy); }

.page-home .b6-includes-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.5rem; }

.page-home .b6-includes-grid li { display: flex; align-items: flex-start; gap: .7rem; font-size: .9375rem; line-height: 1.35; color: var(--skin-navy); }

.page-home .b6-includes-grid svg { flex: none; width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--skin-navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }



.page-home .b6-steps { background: #F4EEE4; border-top: 1px solid var(--skin-line); padding-block: clamp(1.75rem, 3vw, 2.25rem); }

.page-home .b6-steps h2 { font-family: var(--skin-font-display); font-size: 1.5rem; margin: 0 0 1.25rem; color: var(--skin-navy); }

.page-home .b6-steps-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; counter-reset: none; }

.page-home .b6-steps-grid li { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-items: start; }

.page-home .b6-step-num { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--skin-navy); color: var(--skin-white); font-weight: 700; grid-row: span 2; }

.page-home .b6-steps-grid h3 { margin: .2rem 0 .3rem; font-size: 1.0625rem; font-family: var(--skin-font-display); color: var(--skin-navy); }

.page-home .b6-steps-grid p { margin: 0; font-size: .9375rem; line-height: 1.45; color: var(--skin-navy); }



.page-home .b6-cta { background: var(--skin-navy); color: var(--skin-white); padding-block: clamp(1.75rem, 3vw, 2.25rem); }

.page-home .b6-cta-grid { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

.page-home .b6-cta h2 { font-family: var(--skin-font-display); font-size: 1.5rem; margin: 0 0 .3rem; color: var(--skin-white); }

.page-home .b6-cta p { margin: 0; color: var(--skin-white); }

.page-home .b6-cta .button { background: var(--skin-action); border-color: var(--skin-action); color: var(--skin-navy); font-weight: 700; border-radius: 999px; padding: .9rem 1.6rem; }

.page-home .b6-cta .button:hover { background: var(--skin-action-hover); border-color: var(--skin-action-hover); color: var(--skin-navy); }



@media (max-width: 64rem) {

  .page-home .b6-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .page-home .b6-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .page-home .b6-includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .page-home .b6-plan-grid { grid-template-columns: 1fr; }

}

@media (max-width: 47.999rem) {

  .page-home .b6-hero { background-image: url("/img/showcase-hero-blue-hour-mobile.jpg"); background-position: 60% 40%; }

  .page-home .b6-hero::before { background: linear-gradient(180deg, rgb(var(--skin-navy-rgb) / .84) 0%, rgb(var(--skin-navy-rgb) / .7) 60%, rgb(var(--skin-navy-rgb) / .45) 100%); }

  .page-home .b6-hero-grid { grid-template-columns: 1fr; }

  .page-home .b6-hero h1 { max-width: none; }

  .page-home .b6-hero-figure { padding-top: 1rem; }

  .page-home .b6-phone { width: min(60vw, 14rem); transform: rotate(-3deg); }

  .page-home .b6-hero-figure { grid-template-columns: 1fr; }

  .page-home .b6-hero-caption { max-width: none; text-align: center; margin-top: 1rem; }

  .page-home .b6-card-grid { grid-template-columns: 1fr; }

  .page-home .b6-steps-grid { grid-template-columns: 1fr; }

  .page-home .b6-includes-grid { grid-template-columns: 1fr; }

  .page-home .b6-cta-grid > .button { width: 100%; text-align: center; }

}

@media (forced-colors: active) {

  .page-home .b6-card-media::after { display: none; }

  .page-home .b6-card-mark, .page-home .b6-mark-name { color: CanvasText; text-shadow: none; }

  .page-home .b6-benefits svg, .page-home .b6-includes-grid svg { stroke: CanvasText; background: Canvas; }

  .page-home .b6-step-num { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }

}



/* BUILD6 - home header and footer to the render's layout (this page only; the other pages keep the SKIN5 header/footer) */

.page-home .b6-header .header-inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 1.5rem 2rem; }

.page-home .b6-header .header-identity-row { display: block; }

.page-home .b6-header .brand-descriptor { display: block; max-width: 24rem; font-size: .75rem; line-height: 1.35; color: var(--skin-navy); }

.page-home .b6-nav { display: flex; justify-content: center; gap: 1.5rem; }

.page-home .b6-nav a { color: var(--skin-navy); font-weight: 500; font-size: .9375rem; text-decoration: none; }

.page-home .b6-nav a[aria-current="page"] { font-weight: 600; }

.page-home .b6-nav a:hover { text-decoration: underline; }

.page-home .b6-lang { display: flex; align-items: center; gap: .5rem; font-size: .9375rem; font-weight: 600; }

.page-home .b6-lang a { color: var(--skin-navy); text-decoration: none; }

.page-home .b6-lang-sep { color: var(--skin-muted); }

.page-home .b6-footer { background: var(--skin-navy); color: var(--skin-white); padding-block: 2.25rem 2rem; }

.page-home .b6-footer-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto; gap: 2rem; align-items: start; }

.page-home .b6-footer .brand-name { font-size: 1.375rem; font-weight: 800; letter-spacing: -.04em; color: var(--skin-white); }

.page-home .b6-footer .footer-identity p { margin: .5rem 0 0; font-size: .9375rem; color: var(--skin-white); }

.page-home .b6-footer .contact-pending { font-size: .8125rem; opacity: .85; }

.page-home .b6-footer-links div { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: .75rem; }

.page-home .b6-footer-links a { color: var(--skin-white); font-size: .9375rem; text-decoration: none; }

.page-home .b6-footer-links a:hover { text-decoration: underline; }

.page-home .b6-footer .b6-lang, .page-home .b6-footer .b6-lang a { color: var(--skin-white); }

@media (max-width: 64rem) {

  .page-home .b6-header .header-inner { grid-template-columns: 1fr auto auto; }

  .page-home .b6-footer-grid { grid-template-columns: 1fr; }

}



/* BUILD6 v3 - type scale raised to the render's (operator: "the fonts ... are too small, the pricing panel and font is too small.

   The panel to the right of it is too small"). Measured from render 01 scaled to 1440: headline ~88px, section titles ~42px,

   card names ~25px, card text ~18px, price figure ~62px on a ~350px panel, grid text ~18px with ~30px icons. */

.page-home .b6-hero h1 { font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem); line-height: 1; }

.page-home .b6-hero-lead { font-size: clamp(1.125rem, 1rem + .55vw, 1.45rem); max-width: 36rem; }

.page-home .b6-hero-actions .button { font-size: 1.0625rem; padding: 1rem 1.9rem; }

.page-home .b6-hero .b6-arrow-link { font-size: 1.0625rem; }

.page-home .b6-benefits li { font-size: 1.0625rem; }

.page-home .b6-benefits svg { width: 2.6rem; height: 2.6rem; padding: .55rem; }

.page-home .b6-hero-caption { font-size: 1.1875rem; max-width: 10rem; }

.page-home .b6-phone { width: clamp(12.5rem, 17.5vw, 16rem); }

.page-home .b6-section-head h2 { font-size: clamp(2rem, 1.3rem + 2vw, 2.75rem); }

.page-home .b6-legend { font-size: 1.0625rem; }

.page-home .b6-card h3 { font-size: 1.5rem; margin: 1rem 0 .4rem; }

.page-home .b6-card-label { font-size: .8125rem; }

.page-home .b6-card-text { font-size: 1.0625rem; line-height: 1.45; }

.page-home .b6-card .b6-arrow-link { font-size: 1.0625rem; }

.page-home .b6-mark-tag { font-size: .7rem; }

.page-home .b6-card-cometa .b6-mark-name, .page-home .b6-card-luna .b6-mark-name { font-size: 2rem; }

.page-home .b6-card-brujula .b6-mark-name { font-size: 2.5rem; }

.page-home .b6-card-brasa .b6-mark-name { font-size: 2.4rem; }

.page-home .b6-plan-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 4vw, 3.5rem); }

.page-home .b6-plan-panel { padding: 2.25rem 2rem; border-radius: 1.25rem; }

.page-home .b6-plan-panel h2 { font-size: 1.75rem; margin-bottom: .75rem; }

.page-home .b6-plan-build { font-size: clamp(3.25rem, 2.4rem + 2.4vw, 4.5rem); }

.page-home .b6-plan-month { font-size: 1.875rem; margin-top: .15rem; }

.page-home .b6-plan-tax { font-size: 1.0625rem; margin: .6rem 0 .8rem; }

.page-home .b6-plan-care { font-size: .9375rem; }

.page-home .b6-plan-panel .button { font-size: 1.0625rem; padding: 1rem 1.7rem; }

.page-home .b6-includes h2 { font-size: 1.75rem; margin: .6rem 0 1.5rem; }

.page-home .b6-includes-grid { gap: 1.15rem 1.75rem; }

.page-home .b6-includes-grid li { font-size: 1.0625rem; line-height: 1.4; gap: .85rem; }

.page-home .b6-includes-grid svg { width: 1.875rem; height: 1.875rem; stroke-width: 1.6; }

.page-home .b6-steps h2 { font-size: 1.75rem; margin-bottom: 1.5rem; }

.page-home .b6-step-num { width: 2.5rem; height: 2.5rem; font-size: 1.0625rem; }

.page-home .b6-steps-grid h3 { font-size: 1.25rem; }

.page-home .b6-steps-grid p { font-size: 1.0625rem; }

.page-home .b6-cta h2 { font-size: 1.875rem; }

.page-home .b6-cta p { font-size: 1.0625rem; }

.page-home .b6-cta .button { font-size: 1.0625rem; padding: 1rem 1.9rem; }

.page-home .b6-nav a { font-size: 1rem; }



/* BUILD6 v4 - four faults from the v2/v3 passes, fixed after the captures: the language switch wrapped letter by letter; the desktop

   nav leaked into the phone layout; the phone-width price panel collapsed to one digit per line (v3's two-column rule outranked the

   earlier mobile rule by source order); the footer's pending-contact box inherited white text. And the headline back to two lines. */

.page-home .b6-lang, .page-home .b6-lang > * { white-space: nowrap; }

.page-home .b6-lang { min-width: max-content; }

.page-home .b6-header .header-inner { grid-template-columns: auto minmax(0, 1fr) auto; }

.page-home .b6-header .site-menu { grid-column: 3; }

.page-home .b6-nav { display: none; }

@media (min-width: 64rem) {

  .page-home .b6-header .header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; }

  .page-home .b6-nav { display: flex; }

}

.page-home .b6-hero-grid { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }

.page-home .b6-hero h1 { font-size: clamp(2.75rem, 1.5rem + 3.9vw, 5.125rem); }

.page-home .b6-footer .contact-pending { color: var(--skin-navy); }

@media (max-width: 64rem) {

  .page-home .b6-plan-grid { grid-template-columns: minmax(0, 1fr); }

  .page-home .b6-plan-panel { max-width: 28rem; }

  .page-home .b6-includes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 47.999rem) {

  .page-home .b6-hero-grid { grid-template-columns: minmax(0, 1fr); }

  .page-home .b6-plan-panel { max-width: none; }

  .page-home .b6-includes-grid { grid-template-columns: minmax(0, 1fr); }

  .page-home .b6-plan-build { font-size: clamp(2.75rem, 12vw, 3.5rem); }

  .page-home .b6-footer-grid { grid-template-columns: minmax(0, 1fr); }

}

/* BUILD6 v5 - footer: the pending-contact note keeps its own navy text inside its light box; the current language reads on navy */

.page-home .b6-footer .footer-identity p.contact-pending { color: var(--skin-navy); }

.page-home .b6-footer .b6-lang .language-current { color: var(--skin-white); }

/* BUILD6 v6 - toward the render's proportions (operator: "make the page look EXACTLY like the reference image"): the section title on

   one line as the render; the hero scrim warmer and lighter on the right so the photograph's lit side shows; card text and the price

   band tightened to the render's rhythm; the steps band shorter; the pending-contact marker off the HOME footer only (it stays on the

   other fifteen pages, where the record wants it visible). */

.page-home .b6-section-head { max-width: none; }

.page-home .b6-section-head h2 { white-space: nowrap; font-size: clamp(1.75rem, 1.1rem + 1.9vw, 2.625rem); }

.page-home .b6-hero::before { background: linear-gradient(90deg, rgb(var(--skin-navy-rgb) / .82) 0%, rgb(var(--skin-navy-rgb) / .6) 44%, rgb(var(--skin-navy-rgb) / .08) 100%); }

.page-home .b6-hero { padding-block: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.25rem); }

.page-home .b6-card h3 { margin: .85rem 0 .3rem; font-size: 1.375rem; }

.page-home .b6-card-text { font-size: 1rem; line-height: 1.4; margin-bottom: .4rem; }

.page-home .b6-card .b6-arrow-link { font-size: 1rem; }

.page-home .b6-demos { padding-block: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 2.5vw, 1.75rem); }

.page-home .b6-plan { padding-block: clamp(.75rem, 1.5vw, 1.25rem) clamp(1.75rem, 3.5vw, 2.5rem); }

.page-home .b6-plan-panel { padding: 1.75rem 1.75rem; }

.page-home .b6-plan-panel h2 { margin-bottom: .5rem; }

.page-home .b6-plan-care { margin-bottom: 1rem; }

.page-home .b6-includes h2 { margin: .4rem 0 1.1rem; }

.page-home .b6-includes-grid { gap: .95rem 1.5rem; }

.page-home .b6-steps { padding-block: clamp(1.5rem, 2.5vw, 2rem); }

.page-home .b6-steps h2 { margin-bottom: 1.1rem; }

.page-home .b6-cta { padding-block: clamp(1.5rem, 2.5vw, 2rem); }

.page-home .b6-footer { padding-block: 1.9rem 1.6rem; }

.page-home .b6-footer .footer-identity p.contact-pending { display: none; }



/* BUILD6 v6b - the one-line section title only where it fits */

@media (max-width: 63.999rem) { .page-home .b6-section-head h2 { white-space: normal; } }

/* BUILD6 v7 - on the operator's side-by-side judgement (2026-09-08), limited to what was named or MEASURED against the render:

   the hero lighter; the content width the render's (its content spans x=22..1000 of 1024 = 95.5%; the build's container was 84% at

   1440); the card name fields a fade, not a block, and smaller (less dead black) - and the demo screenshots under them blurred into

   colour fields so no page text bleeds through the fade until the photographs (IMG11) land; the inclusions grid reading DOWN each

   column as the render; the footer a second, deeper-navy panel under the band (render footer samples #07162x, band #10243x).

   Spacing is NOT guessed here: it waits for the DIFF-1/DIFF-3 measurements. */

.page-home .container { max-width: min(1368px, 100% - 3rem); }

.page-home .b6-hero::before { background: linear-gradient(90deg, rgb(var(--skin-navy-rgb) / .70) 0%, rgb(var(--skin-navy-rgb) / .48) 42%, rgb(var(--skin-navy-rgb) / .04) 100%); }

.page-home .b6-card-media img { object-position: center 40%; filter: blur(3px) saturate(1.15) brightness(.85); transform: scale(1.06); }

.page-home .b6-card-media::after { background: linear-gradient(180deg, rgb(11 22 38 / .92) 0%, rgb(11 22 38 / .72) 34%, rgb(11 22 38 / .18) 58%, rgb(0 0 0 / 0) 78%); }

.page-home .b6-card-brasa .b6-card-media::after { background: linear-gradient(180deg, rgb(17 19 21 / .94) 0%, rgb(17 19 21 / .74) 34%, rgb(17 19 21 / .2) 58%, rgb(0 0 0 / 0) 78%); }

.page-home .b6-card-brujula .b6-card-media::after { background: linear-gradient(180deg, #063B8F 0%, #063B8F 44%, #C83A24 44%, #C83A24 48%, rgb(6 59 143 / .25) 60%, rgb(0 0 0 / 0) 80%); }

.page-home .b6-card-luna .b6-card-media::after { background: linear-gradient(180deg, #276749 0%, #276749 46%, rgb(39 103 73 / .3) 62%, rgb(0 0 0 / 0) 82%); }

.page-home .b6-card-mark { top: .8rem; left: .9rem; right: 34%; }

.page-home .b6-card-cometa .b6-mark-name, .page-home .b6-card-luna .b6-mark-name { font-size: 1.8rem; }

.page-home .b6-card-brujula .b6-mark-name { font-size: 2.25rem; }

.page-home .b6-card-brasa .b6-mark-name { font-size: 2.15rem; }

.page-home .b6-includes-grid { grid-auto-flow: column; grid-template-rows: repeat(5, auto); grid-template-columns: repeat(3, minmax(0, 1fr)); }

.page-home .b6-footer { background: #081626; }

@media (max-width: 64rem) {

  .page-home .b6-includes-grid { grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 47.999rem) {

  .page-home .b6-includes-grid { grid-template-columns: minmax(0, 1fr); }

}

.page-home .b6-card-cometa .b6-card-media img, .page-home .b6-card-brujula .b6-card-media img, .page-home .b6-card-brasa .b6-card-media img, .page-home .b6-card-luna .b6-card-media img { object-position: center 12%; }

/* BUILD6 v8 - 2026-09-08: the three DIFF audits applied (consults/RETURN_DIFF-1/2/3_2026-09-08.md; DECISIONS § DIFF ADOPTED).

   Every number below is a target the audits measured from render 01 at 1440, or a deliberate deviation recorded in DECISIONS:

   the locked token colours (marigold, navy, pale blue) stay where the audits sampled near-equivalents from the raster; the faces

   stay Noto Serif / Inter (operator "A") and each demonstration's own face (DEMO-ID) at the audits' lighter weights and split line

   sizes, instead of the audits' metric substitutes (Times / Roboto / EB Garamond). Desktop geometry applies from 1400px; the

   fluid rules above keep the page sound between the phone layouts and that width. */



/* --- the content width the audits measured (1320-1363 at 1440): v7 set max-width, which .showcase .container's `width` ignored --- */

.page-home .container { width: min(100% - var(--show-gutter) * 2, 1368px); max-width: none; }



/* --- whole page (DIFF-3 § D): 79 / 582 / 644 / 390 / 232 / 112 / 121 -> 2160 at 1440 --- */

.page-home .b6-hero { padding-block: 24px 16px; }

.page-home .b6-demos { padding-block: 40px 28px; }

.page-home .b6-plan { padding-block: 14px 27px; background: #FDFCFC; }

.page-home .b6-steps { padding-block: 22px 38px; background: #FBF7F1; border-top: 0; }

.page-home .b6-cta { padding-block: 26px 25px; background: linear-gradient(90deg, #102337 0%, #112438 50%, #102337 100%); }

.page-home .b6-footer { padding-block: 24px 31px; background: #081624; border-top: 0; }



/* --- hero (DIFF-1 § B): grid 640 / 97 / 588 from x=79, top 24, height 544; copy stack 40 + 160 + 24 + 104 + 24 + 60 + 56 + 51 --- */

.page-home .b6-hero-grid { align-items: start; }

.page-home .b6-hero h1 { line-height: 1; letter-spacing: 0; margin: 0 0 24px; }

.page-home .b6-hero-lead { font-size: 25px; line-height: 35px; max-width: 610px; margin: 0 0 24px; }

.page-home .b6-hero-actions { gap: 16px 48px; margin-bottom: 56px; }

.page-home .b6-hero-actions .button { min-width: 270px; min-height: 60px; padding: 14px 38px; border-radius: 18px; font-size: 20px; line-height: 30px; justify-content: center; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .35); }

.page-home .b6-hero .b6-arrow-link { font-size: 20px; line-height: 28px; text-underline-offset: 3px; }

.page-home .b6-arrow-link > span { display: inline-block; margin-left: 10px; text-decoration: none; }

.page-home .b6-benefits { gap: 16px 48px; margin-left: -11px; }

.page-home .b6-benefits li { gap: 16px; font-size: 18px; line-height: 25.3px; }

.page-home .b6-benefits svg { width: 41px; height: 41px; padding: 9px; stroke-width: 2; }

.page-home .b6-hero-caption { font-size: 21px; line-height: 31.5px; }

@media (min-width: 1440px) {

  .page-home .b6-hero-grid { grid-template-columns: 640px 588px; gap: 97px; padding-left: 43px; justify-content: start; min-height: 544px; }

  .page-home .b6-hero-copy { padding-top: 40px; }

  .page-home .b6-hero-figure { display: block; position: relative; width: 588px; height: 544px; }

  .page-home .b6-phone { position: absolute; left: 37px; top: 15px; width: 233px; aspect-ratio: 9 / 19.9; transform: rotate(-8.5deg); }

  .page-home .b6-hero-caption { position: absolute; left: 432px; top: 224px; width: 156px; max-width: none; margin: 0; }

}



/* --- examples (DIFF-2): heading and intro to the render's optical size, copy inset, links on one baseline --- */

@media (min-width: 64rem) {

  .page-home .b6-section-head h2 { font-size: 32px; line-height: 38.4px; letter-spacing: -.8px; margin-bottom: 12px; }

}

.page-home .b6-legend { margin-inline: auto; max-width: 697px; }

.page-home .b6-card { display: flex; flex-direction: column; min-height: 410px; }

.page-home .b6-card h3, .page-home .b6-card-label, .page-home .b6-card-text, .page-home .b6-card > .b6-arrow-link { margin-inline: 9px; }

.page-home .b6-card > .b6-arrow-link { margin-top: auto; align-self: flex-start; }

.page-home .b6-card > a.b6-card-media[href] { border-radius: 8px; box-shadow: none; border: 0; }

/* the badge (DIFF-2 shared B), scaled from the 286 frame to the 324 card: 127 x 32 at top 8 / right 5, regular weight, no tracking */

.page-home .b6-card-media .fictional-badge { top: 8px; right: 5px; min-width: 127px; height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 4px 7px; border-radius: 9px; font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: 0; border: 1px solid rgb(255 244 180 / .65); }

/* name blocks: explicit line spans, no automatic wrapping; each demonstration's face at the audits' weights and split sizes */

.page-home .b6-card-mark { display: block; right: auto; text-shadow: none; }

.page-home .b6-mark-name { display: block; }

.page-home .b6-mark-l1, .page-home .b6-mark-l2 { display: block; white-space: nowrap; }

.page-home .b6-card-cometa .b6-card-mark { top: 27px; left: 27px; width: 181px; }

.page-home .b6-card-cometa .b6-mark-name { font-family: "Lora", Georgia, serif; font-weight: 400; font-size: 36px; line-height: 40px; color: #F9F7F2; }

.page-home .b6-card-cometa .b6-mark-glyph { font-size: .5em; vertical-align: .45em; margin-right: 3px; }

.page-home .b6-card-cometa .b6-mark-tag { margin-top: 4px; font-size: 11px; line-height: 15px; font-weight: 500; letter-spacing: .3px; color: #F1EBDE; opacity: 1; }

.page-home .b6-card-cometa .b6-card-media::after { background: linear-gradient(180deg, rgb(7 22 37 / .84) 0%, rgb(7 22 37 / .68) 32%, rgb(7 22 37 / .22) 50%, rgb(7 22 37 / 0) 72%, rgb(7 22 37 / 0) 100%); }

.page-home .b6-card-brujula .b6-card-mark { top: 32px; left: 52px; width: 199px; transform: scaleX(.88); transform-origin: left top; }

.page-home .b6-card-brujula .b6-mark-name { font-weight: 700; letter-spacing: .2px; color: #FFFFFF; }

.page-home .b6-card-brujula .b6-mark-l1 { font-size: 45px; line-height: 44px; }

.page-home .b6-card-brujula .b6-mark-l2 { font-size: 54px; line-height: 53px; }

.page-home .b6-card-brujula .b6-card-media::after { inset: 0 auto auto 18px; width: 218px; height: 171px; background: linear-gradient(180deg, #021E4A 0px, #063680 154px, #C43A27 154px, #C43A27 171px); -webkit-mask-image: linear-gradient(135deg, #000 0%, #000 73%, transparent 92%, transparent 100%); mask-image: linear-gradient(135deg, #000 0%, #000 73%, transparent 92%, transparent 100%); }

.page-home .b6-card-brasa .b6-card-mark { top: 39px; left: 32px; width: 161px; }

.page-home .b6-card-brasa .b6-mark-name { font-weight: 500; letter-spacing: .5px; color: #A43D21; }

.page-home .b6-card-brasa .b6-mark-l1 { font-size: 42px; line-height: 43px; }

.page-home .b6-card-brasa .b6-mark-l2 { font-size: 39px; line-height: 41px; }

.page-home .b6-card-brasa .b6-mark-tag { margin-top: 9px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .6px; color: #F3D16E; opacity: 1; }

.page-home .b6-card-brasa .b6-card-media::after { background: linear-gradient(90deg, rgb(18 13 5 / .94) 0%, rgb(18 13 5 / .85) 42%, rgb(18 13 5 / .30) 60%, rgb(18 13 5 / 0) 76%, rgb(18 13 5 / 0) 100%); }

.page-home .b6-card-luna .b6-card-mark { top: 28px; left: 32px; width: 202px; }

.page-home .b6-card-luna .b6-mark-name { font-family: "Lora", Georgia, serif; font-weight: 400; color: #F5E8BE; }

.page-home .b6-card-luna .b6-mark-l1 { font-size: 35px; line-height: 40px; }

.page-home .b6-card-luna .b6-mark-l2 { font-size: 42px; line-height: 42px; }

.page-home .b6-card-luna .b6-mark-tag { margin-top: 6px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .7px; color: #EEE2B7; opacity: 1; }

.page-home .b6-card-luna .b6-card-media::after { background: linear-gradient(180deg, rgb(16 50 26 / .96) 0%, rgb(16 50 26 / .94) 63%, rgb(16 50 26 / 0) 64%, rgb(16 50 26 / 0) 100%); }



/* --- price band (DIFF-3 § A): card 364 x 349 beside a 956 grid, gap 40; numeral 76/84 800; grid 260/322/310 reading down --- */

.page-home .b6-plan-panel { padding: 24px 36px 32px; border-radius: 8px; min-height: 349px; box-sizing: border-box; }

.page-home .b6-plan-panel h2 { font-size: 32px; line-height: 38px; margin: 0 0 8px; }

.page-home .b6-plan-build { font-size: 76px; line-height: 84px; font-weight: 800; }

.page-home .b6-plan-month { font-size: 34px; line-height: 41px; margin-top: 2px; }

.page-home .b6-plan-tax { font-size: 17px; line-height: 24px; margin: 14px 0 26px; }

.page-home .b6-plan-panel .button { min-width: 278px; min-height: 55px; padding: 14px 40px; border-radius: 17px; font-size: 20px; line-height: 27px; justify-content: center; }

.page-home .b6-includes h2 { font-size: 28px; line-height: 33.6px; margin: 13px 0 14px; }

.page-home .b6-includes-grid { gap: 22px 32px; align-content: start; }

.page-home .b6-includes-grid li { gap: 20px; font-size: 18px; line-height: 26px; }

@media (min-width: 1440px) {

  .page-home .b6-plan-grid { grid-template-columns: 364px minmax(0, 1fr); gap: 40px; }

  .page-home .b6-includes-grid { grid-template-columns: 260px 322px 310px; }

}



/* --- how it works (DIFF-3 § B): 22 + 36 + 12 + 124 + 38; circles 50, titles one line, body 18/26 --- */

.page-home .b6-steps h2 { font-size: 30px; line-height: 36px; margin: 0 0 12px; }

.page-home .b6-steps-grid { gap: 28px; }

.page-home .b6-steps-grid li { column-gap: 16px; }

.page-home .b6-step-num { width: 50px; height: 50px; background: #061525; font-size: 20px; line-height: 28px; }

.page-home .b6-steps-grid h3 { font-size: 20px; line-height: 28px; margin: 6px 0 12px; }

.page-home .b6-steps-grid p { font-size: 18px; line-height: 26px; }

@media (min-width: 1440px) {

  .page-home .b6-steps-grid { grid-template-columns: 1.09fr 1.08fr 1fr 1.01fr; }

  .page-home .b6-steps-grid h3 { white-space: nowrap; }

}



/* --- call-to-action band (DIFF-3 § C): 26 + 61 + 25; button 262 x 51, radius 14 --- */

.page-home .b6-cta h2 { font-size: 26px; line-height: 31px; margin: 0 0 5px; }

.page-home .b6-cta p { font-size: 18px; line-height: 25px; }

.page-home .b6-cta .button { min-width: 262px; min-height: 51px; padding: 13px 28px; border-radius: 14px; font-size: 18px; line-height: 25px; justify-content: center; }



/* --- footer (DIFF-3 § C): 24 + 66 + 31 with two link rows; the third row (FOOT-1, operator's call) stays until decided --- */

.page-home .b6-footer-grid { grid-template-columns: 420px minmax(0, 1fr) auto; gap: 52px; align-items: start; }

.page-home .b6-footer .brand-name { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -.02em; }

.page-home .b6-footer .footer-identity p { margin-top: 8px; font-size: 17px; line-height: 24px; }

.page-home .b6-footer-links div { gap: 6px 30px; margin-bottom: 12px; }

.page-home .b6-footer-links div:first-child a { font-size: 18px; line-height: 26px; }

.page-home .b6-footer-links a { display: inline; min-height: 0; padding: 0; font-size: 16px; line-height: 22px; }

.page-home .b6-footer-links div:first-child { margin-top: 6px; }

.page-home .b6-footer .b6-lang { align-self: center; font-size: 18px; line-height: 24px; font-weight: 400; gap: 12px; }

@media (max-width: 64rem) {

  .page-home .b6-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }

  .page-home .b6-plan-panel { min-height: 0; }

}

@media (max-width: 47.999rem) {

  .page-home .b6-hero-actions .button { min-width: 0; width: 100%; }

  .page-home .b6-plan-build { font-size: clamp(2.75rem, 12vw, 3.5rem); line-height: 1; }

  .page-home .b6-plan-panel .button { min-width: 0; width: 100%; }

}

/* BUILD6 v8b - after measuring v8 on the served page: the headline back to two lines inside the 640 column (Noto is wider than the

   render serif, so the ink width governs: 76px), the benefit row on one line, the caption four lines unwrapped, the long inclusion

   on one line (tracks refit 248 / 346 / 298), and the desktop sizes kept off the phone layout, which is not what the audits measured. */

@media (min-width: 1440px) {

  .page-home .b6-hero h1 { font-size: 76px; line-height: 80px; letter-spacing: -.01em; }

  .page-home .b6-benefits { flex-wrap: nowrap; gap: 16px 40px; }

  .page-home .b6-benefits li { font-size: 17px; line-height: 24px; gap: 14px; }

  .page-home .b6-hero-caption { white-space: nowrap; width: auto; }

  .page-home .b6-includes-grid { grid-template-columns: 248px 346px 298px; }

}

@media (max-width: 63.999rem) {

  .page-home .b6-hero-lead { font-size: clamp(1.125rem, 1rem + .55vw, 1.45rem); line-height: 1.5; max-width: 36rem; }

  .page-home .b6-benefits li { font-size: 1.0625rem; line-height: 1.3; }

  .page-home .b6-hero-caption { font-size: 1.1875rem; line-height: 1.35; white-space: normal; }

  .page-home .b6-includes-grid li { font-size: 1.0625rem; line-height: 1.4; }

  .page-home .b6-steps-grid h3 { font-size: 1.25rem; white-space: normal; }

  .page-home .b6-steps-grid p, .page-home .b6-cta p { font-size: 1.0625rem; }

  .page-home .b6-footer .brand-name { font-size: 1.375rem; }

  .page-home .b6-footer-links a, .page-home .b6-footer-links div:first-child a { font-size: .9375rem; }

  .page-home .b6-footer .footer-identity p { font-size: .9375rem; }

}

/* BUILD6 v8c - the one long inclusion ("Adaptación de hasta 1,500 palabras") on one line as the render, so the shared grid rows

   come to the audit's 254-258 (the two two-line items in column 3 are the render's own). */

@media (min-width: 1440px) { .page-home .b6-includes-grid li:nth-child(6) { white-space: nowrap; } }

/* BUILD6 v8d - the English mirror measured after v8c: its longer headline wrapped to three lines at 76 px and a long inclusion to two.

   The English page is not the reference; it takes the sizes that keep the Spanish page's line counts (two-line headline, one-line

   inclusions where the render has them). */

@media (min-width: 1440px) {

  html[lang="en"] .page-home .b6-hero h1 { font-size: 62px; line-height: 70px; }

  html[lang="en"] .page-home .b6-includes-grid { grid-template-columns: 236px 340px 316px; }

  html[lang="en"] .page-home .b6-includes-grid li { font-size: 17px; }

}

/* BUILD6 v9 - 2026-09-08: the photographs land (IMG10 hero, IMG11 cards; DECISIONS § IMG10 + IMG11 RETURNED). The hero is now

   ChatGPT's photograph of a hand holding a phone in front of the warm taquería, and the live demonstration page is composited onto

   the phone's screen: the screen's four corners were fitted from the glass pixels (landscape: TL 1152,165 · TR 1470,162 · BR 1567,853

   · BL 1225,869 of 1920x1080 - a level top edge with the sides leaning 6 deg, so a skew; portrait: TL 438,599 · TR 685,572 · BR ~731,1125 ·

   BL 485,1152 of 1080x1350 - a 5.5 deg counter-clockwise rotation). Desktop: the photo is the hero's own background, width-driven

   (100% auto) and anchored at 39% of its overflow, so the screen's place is pure geometry of the viewport width and the hero height;

   the CSS phone retires above 48rem. Phone: the CSS-phone box becomes the lower band of the portrait photo with the screen inside it.

   The four cards take the photographs (the v7 blur was only ever for screenshots). The footer links keep a 44 px tap height on phones

   (gate 07-16 caught the v8 rows falling under it). Scrim: the audit's warm trial for this plate. */



/* --- cards on the photographs --- */

.page-home .b6-card-cometa .b6-card-media img, .page-home .b6-card-brujula .b6-card-media img,

.page-home .b6-card-brasa .b6-card-media img, .page-home .b6-card-luna .b6-card-media img { filter: none; transform: none; object-position: center center; }



/* --- footer tap targets on phones (desktop keeps the audit's 26 px rows) --- */

@media (max-width: 63.999rem) {

  .page-home .b6-footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; margin: 0 -6px; }

}



/* --- hero, desktop and tablet: the photograph full-bleed, the live page on its screen --- */

@media (min-width: 48rem) {

  .page-home .b6-hero { background: #1b120b url("/img/showcase-hero-hand-phone.jpg") 0 39% / 100% auto no-repeat; }

  .page-home .b6-hero::before { background: linear-gradient(90deg, rgb(16 12 8 / .62) 0%, rgb(16 12 8 / .38) 44%, rgb(16 12 8 / .04) 100%); }

  .page-home .b6-phone { display: none; }

  .page-home .b6-hero-figure { grid-template-columns: minmax(0, 1fr); justify-items: end; align-content: center; }

  /* the screen: box at the glass's top-left, sized to the glass, sheared 6 deg so its sides follow the phone; inset 1% so a hair of

     dark glass reads as the bezel. top = (photo y fraction x image height) - (image overflow x anchor); 100% here is the hero height. */

  .page-home .b6-hero::after {

    content: ""; position: absolute; z-index: 0; pointer-events: none;

    left: 60.16vw; top: calc(56.25vw * .1556 - (56.25vw - 100%) * .39); width: 16.25vw; height: calc(56.25vw * .646);

    transform: skewX(-6deg); transform-origin: 0 0; border-radius: 1.2vw / 1.6vw; overflow: hidden;

    background: linear-gradient(115deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / 0) 45%), #fff url("/img/demo-brujula-phone-390.png") top center / 100% auto no-repeat;

    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .45), inset 0 0 14px rgb(0 0 0 / .25);

  }

}

@media (min-width: 48rem) and (max-width: 87.499rem) {

  .page-home .b6-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); }

}

@media (min-width: 1440px) {

  .page-home .b6-hero { min-height: 40.56vw; }

}



/* --- hero, phones: the copy on a warm dark ground, then the portrait photograph's lower band with the live page on its screen --- */

@media (max-width: 47.999rem) {

  .page-home .b6-hero { background: #1b120b; }

  .page-home .b6-hero::before { background: none; }

  .page-home .b6-hero-figure { display: block; padding-top: .5rem; }

  .page-home .b6-phone {

    display: block; position: relative; width: 100%; aspect-ratio: 1080 / 880; margin: 0; padding: 0; border-radius: .75rem; box-shadow: none; transform: none;

    background: #1b120b url("/img/showcase-hero-hand-phone-mobile.jpg") 0 100% / 100% auto no-repeat; overflow: hidden;

  }

  .page-home .b6-phone::before { display: none; }

  .page-home .b6-phone img {

    position: absolute; left: 40.6%; top: 14.9%; width: 22.8%; height: 62.6%; border-radius: 7% / 3.2%;

    transform: rotate(-5.5deg); transform-origin: 0 0; object-fit: cover; object-position: top center; background: #fff;

    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .45);

  }

  .page-home .b6-hero-caption { margin-top: .9rem; }

}

/* BUILD6 v10 - Image Feedback 1 (2026-09-08, DECISIONS § IMAGE FEEDBACK 1): the screen overlay is a true perspective mapping onto the

   phone BODY (corners = the fitted glass grown 10 px on top and sides, 22 px at the bottom), with the page covering the box, so it runs

   edge to edge; the Brujula panel is masked by the tacos own silhouette (alpha mask segmented from the photograph); the Cometa name a

   step smaller and the photograph scaled from its top edge so the food starts lower. The matrix is exact at 1440; its two perspective

   terms drift a few px at other desktop widths. */

@media (min-width: 48rem) {

  .page-home .b6-hero::after {

    left: 59.479vw; top: calc(56.25vw * .14352 - (56.25vw - 100%) * .39); width: 17.604vw; height: calc(56.25vw * .68148);

    transform: matrix3d(1.016302, -0.009020, 0, 0.00006431, 0.091660, 0.924138, 0, -0.00013743, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0 0;

    border-radius: 1.6vw / 2.2vw; box-shadow: none;

    background: linear-gradient(115deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / 0) 45%), #0b1626 url("/img/demo-brujula-phone-390.png") top center / cover no-repeat;

  }

}

@media (max-width: 47.999rem) {

  .page-home .b6-phone img { left: 40%; top: 14.3%; width: 23.9%; height: 64.2%; border-radius: 8% / 3.6%; box-shadow: none; }

}

.page-home .b6-card-brujula .b6-card-media::after { -webkit-mask-image: url("/img/card-brujula-panel-mask.png"); mask-image: url("/img/card-brujula-panel-mask.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

.page-home .b6-card-cometa .b6-card-mark { top: 22px; left: 26px; }

.page-home .b6-card-cometa .b6-mark-name { font-size: 33px; line-height: 36px; }

.page-home .b6-card-cometa .b6-mark-tag { margin-top: 3px; }

.page-home .b6-card-cometa .b6-card-media img { transform: scale(1.1); transform-origin: 50% 0; }

/* BUILD6 v11 - Image Feedback 2 (2026-09-08, DECISIONS § IMAGE FEEDBACK 2): the screen overlay fitted to the EXACT glass corners

   (TL 1152,165 · TR 1470,162 · BR 1567,853 · BL 1225,869 of 1920x1080), page covering the glass, the frame left to the photograph.

   Phone layout: the exact glass quad of the portrait (TL 438,599 · TR 685,572 · BL 485,1152 of 1080x1350; rows 470-1350 shown). */

@media (min-width: 48rem) {

  .page-home .b6-hero::after {

    left: 60vw; top: calc(56.25vw * .15278 - (56.25vw - 100%) * .39); width: 16.562vw; height: calc(56.25vw * .65185);

    transform: matrix3d(1.017076, -0.009595, 0, 0.00007160, 0.095914, 0.924981, 0, -0.00014208, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0 0;

    border-radius: 1.3vw / 1.7vw;

  }

}

@media (max-width: 47.999rem) {

  .page-home .b6-phone img { left: 40.56%; top: 14.66%; width: 23.0%; height: 63.1%; border-radius: 7% / 3.2%; }

}

/* BUILD6 v12 - gate 15-54 FLAG (2026-09-08): the Cometa card photograph was pushed down with transform: scale(1.1), and a transformed

   image reports a box 10% wider than the card (clipped, nothing scrolls, but the device gate flags any element wider than the phone

   on 412 and 430 px screens). Same effect by sizing instead: the image box 110% tall, anchored at its top, object-fit cover. */

.page-home .b6-card-cometa .b6-card-media img { transform: none; height: 110%; bottom: auto; object-position: center top; }

/* BUILD6 v13 - Image Feedback 3 (2026-09-08, DECISIONS § IMAGE FEEDBACK 3): Luna Llena - the food in front of the green field as

   the Brujula tacos are in front of the blue panel. The photograph sized 118% tall and anchored at the bottom (the food larger, rising

   into the field); the field masked by the backdrop only (alpha mask segmented from the photograph at the visible crop), so the

   pupusas, the curtido glass and the pot stand in front of the green. */

.page-home .b6-card-luna .b6-card-media img { top: auto; bottom: 0; height: 118%; object-position: center bottom; }

.page-home .b6-card-luna .b6-card-media::after { -webkit-mask-image: url("/img/card-luna-field-mask.png"); mask-image: url("/img/card-luna-field-mask.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

/* the hero screen: an even 1% inset so a hair of bezel shows all round, and the corners rounded like the glass (about 45 px on the

   1920 photograph, 2.3vw). Fit re-measured on the served page with the overlay hidden: within 3 px of the glass at 1280-1920. */

@media (min-width: 48rem) {

  .page-home .b6-hero::after { left: 60.17vw; top: calc(56.25vw * .1593 - (56.25vw - 100%) * .39); width: 16.23vw; height: calc(56.25vw * .6388); border-radius: 2.3vw / 2.9vw; }

}

@media (max-width: 47.999rem) {

  .page-home .b6-phone img { left: 40.8%; top: 15.3%; width: 22.5%; height: 61.8%; border-radius: 9% / 4.2%; }

}

/* BUILD6 v14 - Image Feedback 3 (docx), 2026-09-08 (DECISIONS § IMAGE FEEDBACK 3 (docx); R-52): the card compositions made size-proof.

   Every name block, line size, tagline, badge, panel box, gradient stop and mask was set in px for the 324-px card at 1440; at any other

   card width the composition drifted against the photograph. The card picture is now a size container and every measure is in cqw

   (1cqw = 1% of the picture width), so the composition keeps its shape at every width the page serves. Values are the v8-v13 px

   values divided by 3.24. The Brújula mask rebuilt as one clean food blob (largest connected component, holes filled). */

.page-home .b6-card > a.b6-card-media[href] { container-type: inline-size; border-radius: 2.5cqw; }

.page-home .b6-card-media .fictional-badge { top: 2.5cqw; right: 1.5cqw; min-width: 39cqw; height: 9.9cqw; padding: 1.2cqw 2.2cqw; border-radius: 2.8cqw; font-size: 4cqw; line-height: 6.2cqw; }

/* Cometa */

.page-home .b6-card-cometa .b6-card-mark { top: 6.8cqw; left: 8cqw; width: 56cqw; }

.page-home .b6-card-cometa .b6-mark-name { font-size: 10.2cqw; line-height: 11.1cqw; }

.page-home .b6-card-cometa .b6-mark-tag { margin-top: 1cqw; font-size: 3.4cqw; line-height: 4.6cqw; letter-spacing: .1cqw; }

/* Brújula */

.page-home .b6-card-brujula .b6-card-mark { top: 9.9cqw; left: 16cqw; width: 61.4cqw; }

.page-home .b6-card-brujula .b6-mark-name { letter-spacing: .06cqw; }

.page-home .b6-card-brujula .b6-mark-l1 { font-size: 13.9cqw; line-height: 13.6cqw; }

.page-home .b6-card-brujula .b6-mark-l2 { font-size: 16.7cqw; line-height: 16.4cqw; }

.page-home .b6-card-brujula .b6-card-media::after { inset: 0 auto auto 5.6cqw; width: 67.3cqw; height: 52.8cqw; background: linear-gradient(180deg, #021E4A 0, #063680 47.5cqw, #C43A27 47.5cqw, #C43A27 52.8cqw); }

/* Brasa */

.page-home .b6-card-brasa .b6-card-mark { top: 12cqw; left: 9.9cqw; width: 49.7cqw; }

.page-home .b6-card-brasa .b6-mark-name { letter-spacing: .15cqw; }

.page-home .b6-card-brasa .b6-mark-l1 { font-size: 13cqw; line-height: 13.3cqw; }

.page-home .b6-card-brasa .b6-mark-l2 { font-size: 12cqw; line-height: 12.7cqw; }

.page-home .b6-card-brasa .b6-mark-tag { margin-top: 2.8cqw; font-size: 3.7cqw; line-height: 4.9cqw; letter-spacing: .19cqw; }

/* Luna */

.page-home .b6-card-luna .b6-card-mark { top: 8.6cqw; left: 9.9cqw; width: 62.3cqw; }

.page-home .b6-card-luna .b6-mark-l1 { font-size: 10.8cqw; line-height: 12.3cqw; }

.page-home .b6-card-luna .b6-mark-l2 { font-size: 13cqw; line-height: 13cqw; }

.page-home .b6-card-luna .b6-mark-tag { margin-top: 1.9cqw; font-size: 3.7cqw; line-height: 4.9cqw; letter-spacing: .22cqw; }

/* BUILD6 v14 (hero) - Image Feedback 3, the phone: the operator's browser has a real scrollbar, so 100vw runs ~17 px past the hero

   while the photograph is sized to the hero; the vw-based overlay landed right of the screen and slightly large (the black wedge on

   the left, the overflow on the right). No viewport units anywhere now: the photograph is an element (.b6-hero-plate > .b6-plate-box

   > img), the box is anchored with percentages of the hero (top 39% of the hero height, minus 39% of the box height expressed as

   margin-top in percent of the width), and the screen is a child of that box placed in percentages of the box - the photo's own

   geometry, exact at any width with or without a scrollbar. The old ::after overlay retires. Below 64rem the hero is the phone

   layout (copy above, the portrait photograph's band below) - the tablet band had no room for a full-bleed phone beside the copy. */

@media (min-width: 64rem) {

  .page-home .b6-hero { background-image: none; }

  .page-home .b6-hero::after { display: none; }

  .page-home .b6-phone { display: none; }

  .page-home .b6-hero-plate { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

  .page-home .b6-plate-box { position: absolute; left: 0; width: 100%; aspect-ratio: 1920 / 1080; top: 39%; margin-top: -21.94%; }

  .page-home .b6-plate-box > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: -2; }

  .page-home .b6-screen {

    position: absolute; z-index: 0; left: 60.08%; top: 15.6%; width: 16.4%; height: 64.5%;

    transform: matrix3d(1.017076, -0.009595, 0, 0.00007160, 0.095914, 0.924981, 0, -0.00014208, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0 0;

    border-radius: 9% / 4%; overflow: hidden;

    background: linear-gradient(115deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / 0) 45%), #0b1626 url("/img/demo-brujula-phone-390.png") top center / cover no-repeat;

    box-shadow: inset 0 0 0 1px rgb(0 0 0 / .45);

  }

}

@media (min-width: 64rem) and (max-width: 74.999rem) {

  /* the hero is taller than the photograph at 100% width here: fit the photograph by height, keep the phone side */

  .page-home .b6-plate-box { left: auto; right: 0; width: auto; height: 100%; top: 0; margin-top: 0; }

}

@media (max-width: 63.999rem) {

  .page-home .b6-hero-plate { display: none; }

  .page-home .b6-hero { background: #1b120b; }

  .page-home .b6-hero::before { background: none; }

  .page-home .b6-hero::after { display: none; }

  .page-home .b6-hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-left: 0; }

  .page-home .b6-hero-copy { padding-top: 0; }

  .page-home .b6-hero-figure { display: block; position: static; width: auto; height: auto; padding-top: .5rem; }

  .page-home .b6-phone {

    display: block; position: relative; width: 100%; aspect-ratio: 1080 / 880; margin: 0; padding: 0; border-radius: .75rem; box-shadow: none; transform: none;

    background: #1b120b url("/img/showcase-hero-hand-phone-mobile.jpg") 0 100% / 100% auto no-repeat; overflow: hidden;

  }

  .page-home .b6-phone::before { display: none; }

  .page-home .b6-phone img {

    position: absolute; left: 40.8%; top: 15.3%; width: 22.5%; height: 61.8%; border-radius: 9% / 4.2%;

    transform: rotate(-5.5deg); transform-origin: 0 0; object-fit: cover; object-position: top center; background: #fff; box-shadow: none;

  }

  .page-home .b6-hero-caption { position: static; width: auto; max-width: none; margin: .9rem 0 0; text-align: center; white-space: normal; }

}

/* BUILD6 v15 - the phone screen refitted (operator: black space in the upper-right corner; "the corners are rounded"). The earlier

   glass fit took the top edge as level: a rounded-corner point had flattened the line. Measured again with each edge fitted inside

   its own window and the corners excluded, the phone is ROTATED about 6 degrees (top edge -6.5, left lean 5.2, right lean 8.3 -

   the right side nearer the camera), its top-right corner 36 px higher than the old fit placed the page - the black wedge.

   New quad on the 1920 x 1080 photograph: TL (1155,180) TR (1468,144) BR (1572,857) BL (1220,891); corner radius 39 px (12.4% of

   the glass width, 5.5% of its height); no inset. Same for the portrait photograph on the phone layout. */

@media (min-width: 64rem) {

  .page-home .b6-screen {

    left: 60.168%; top: 16.622%; width: 16.373%; height: 66.124%;

    transform: matrix3d(0.985709, -0.112012, 0, -0.00003371, 0.080618, 0.886801, 0, -0.00020452, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0 0;

    border-radius: 12.4% / 5.5%;

  }

}

@media (max-width: 63.999rem) {

  .page-home .b6-phone img {

    left: 39.707%; top: 9.261%; width: 23.795%; height: 69.322%;

    transform: matrix3d(1.036256, 0, 0, 0.00042560, 0.086241, 0.890695, 0, -0.00051994, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0 0;

    border-radius: 12.4% / 5.5%;

  }

}

/* BUILD6 v17 - LAYOUT-1 (Gemini consult, consults/RETURN_LAYOUT-1-BRUJULA-NAME-CLEARANCE_2026-09-08.md; operator: space between the

   last A of BRUJULA and the taco shell, better visual symmetry). The name block scaled by 0.9 and anchored with equal 10 cqw margins

   from the panel's left and top edges; expected clearance to the food's diagonal 4.1 cqw against a 2.0 cqw minimum. */

.page-home .b6-card-brujula .b6-card-mark { top: 10cqw; left: 15.6cqw; width: 48.6cqw; }

.page-home .b6-card-brujula .b6-mark-l1 { font-size: 12.5cqw; line-height: 12.2cqw; }

.page-home .b6-card-brujula .b6-mark-l2 { font-size: 15cqw; line-height: 14.8cqw; }

/* BUILD6 v18 - the four cards on ONE rule (operator: "a minimum symmetrical visual proportionality that the other three ... maintain ... find a

   balance of symmetry between all four"; LAYOUT-1 consult generalised): every name block sits 10 cqw from its field's left and top edges

   (Brujula's field is its inset panel, the others' the card), every text line keeps at least 4 cqw of clear space from the foregrounded food

   and 2 cqw from the badge, all in cqw so it holds from the phone to the widest desktop. Cometa and Luna: the photograph 5 / 4 cqw lower so

   the food starts lower under the block (the Luna mask re-cut for that crop); Brujula line 2 a step smaller; Luna line 1 clears the badge. */

.page-home .b6-card-cometa .b6-card-mark { top: 10cqw; left: 10cqw; }

.page-home .b6-card-cometa .b6-mark-name { font-size: 9.4cqw; line-height: 10.2cqw; }

.page-home .b6-card-cometa .b6-mark-tag { font-size: 3.2cqw; line-height: 4.3cqw; }

.page-home .b6-card-cometa .b6-card-media img { bottom: -5cqw; }

.page-home .b6-card-brujula .b6-mark-l1 { font-size: 11.7cqw; line-height: 11.4cqw; }

.page-home .b6-card-brujula .b6-mark-l2 { font-size: 14cqw; line-height: 13.8cqw; }

.page-home .b6-card-brasa .b6-card-mark { top: 10cqw; left: 10cqw; }

.page-home .b6-card-luna .b6-card-mark { top: 10cqw; left: 10cqw; }

.page-home .b6-card-luna .b6-mark-l1 { font-size: 9.9cqw; line-height: 11.3cqw; }

.page-home .b6-card-luna .b6-mark-l2 { font-size: 12cqw; line-height: 12cqw; }

.page-home .b6-card-luna .b6-mark-tag { font-size: 3.4cqw; line-height: 4.5cqw; }

.page-home .b6-card-luna .b6-card-media img { bottom: -4cqw; }

/* BUILD6 v18b - the Cometa photograph is top-anchored (top 0, height 110%), so the shift is written on top, not bottom */

.page-home .b6-card-cometa .b6-card-media img { top: 5cqw; bottom: auto; }

/* BUILD6 v18c - Luna: the photograph 6 cqw lower (mask re-cut) and the name a step smaller so the tagline keeps 4 cqw from the glass */

.page-home .b6-card-luna .b6-card-media img { bottom: -6cqw; }

.page-home .b6-card-luna .b6-mark-l1 { font-size: 9.5cqw; line-height: 10.8cqw; }

.page-home .b6-card-luna .b6-mark-l2 { font-size: 11.5cqw; line-height: 11.5cqw; }

/* BUILD6 v19 - walk-through item 1 (R-58): the English home's phone shows the English demonstration. The desktop composite's screen

   picture is switched by the page language; the phone-layout <img> on the English page points at the English capture in the markup. */

html[lang="en"] .page-home .b6-screen { background-image: linear-gradient(115deg, rgb(255 255 255 / .10) 0%, rgb(255 255 255 / 0) 45%), url("/img/demo-brujula-phone-390-en.png"); }

/* walk-through item 4: the phone-layout composite re-fitted from the portrait photograph's own dark screen region (the first fit sat

   20-40 px too high and 8 px too far left, and read as too small and thin): box and perspective in the band's own units. */

@media (max-width: 63.999rem) {

  .page-home .b6-phone img { left: 40.431%; top: 14.354%; width: 23.163%; height: 63.615%; transform: matrix3d(0.981059, -0.093434, 0, -0.00017489, 0.086244, 0.887081, 0, -0.00058597, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0 0; border-radius: 12% / 5.5%; }

}

/* BUILD6 v20 - walk-through 5 (operator: "The bezel of the phone cuts off in the hand ... the geometry of how that looks in real life is

   not depicted"): in the phone layout the thumb crosses the glass on the right and the fingers wrap the bottom-left corner. The page

   image lives in a wrapper that spans the band and is masked by a hand mask cut from the photograph, so the page sits behind the hand. */

@media (max-width: 63.999rem) {

  .page-home .b6-phone-screen { position: absolute; inset: 0; display: block; -webkit-mask-image: url("/img/hero-phone-hand-mask.png"); mask-image: url("/img/hero-phone-hand-mask.png"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

}

/* BUILD6 v21 - operator, wide screen: "the callout language that says websites made for real Houston businesses overlaps with the phone and

   isn't readable against the white background". The caption was placed off the grid figure, so on a 1920 screen it drifted into the phone.

   From 64rem it is placed as a percentage of the hero, whose photograph spans the hero at those widths (right of the phone at every width),

   with a soft dark glow so the white letters read over the bright hand and bottles. */

@media (min-width: 64rem) {

  .page-home .b6-hero-figure { position: static; }

  .page-home .b6-hero-caption { position: absolute; left: 84%; top: 43%; width: max-content; max-width: 13%; margin: 0; white-space: nowrap; text-shadow: 0 1px 3px rgb(0 0 0 / .65), 0 0 14px rgb(0 0 0 / .45); }

}



/* BUILD6 v22 - 2026-09-09, Prompt 15 audit I5 verified on the served page (1400 px: scrollWidth 1408 > clientWidth 1385): the render-exact

   hero geometry (640 + 97 + 588 px tracks, 43 px pad, inside a 40 px gutter = 1408) was keyed to min-width 1400px and overflowed a

   viewport with a scrollbar until 1424 px. All six "min-width: 1400px" blocks above encode the 1440 render (hero tracks, plan grid,

   includes grid, steps grid, 76 px headline, the English sizes); each now reads "min-width: 1440px" (changed in place, this note is the

   record). Between 1024 and 1439 the fluid v9 tracks apply, as they already did at 1399. R-61. */



/* BUILD6 v23 - 2026-09-09, Prompt 15 audit I3, measured on the served page with the text hidden (scratch p15-contrast): from 64rem the

   caption sits over the bright hand and bottles - white 21 px bold reads 2.3:1 at its 5th-percentile pixel, 29-35% of its pixels under

   3:1, at 1024-1920; the v21 glow is a shadow, not a bound. No position right of the phone is dark enough at 1440 (best 2.8:1), so the

   caption keeps its place and gets a bounded plate: a feathered dark rounded plate behind the lines (rgb(16 12 8 / .62), blurred 10 px,

   16/22 px beyond the text) that lifts the brightest pixel under any letter past 3:1 and the 95th-percentile pixel past 4.5:1. The

   headline and lead measured 4:1+ at their 5th-percentile pixel over the dark interior and keep the v9 scrim. */

@media (min-width: 64rem) {

  .page-home .b6-hero-caption { z-index: 1; }

  .page-home .b6-hero-caption::before { content: ""; position: absolute; z-index: -1; inset: -16px -22px; border-radius: 28px; background: rgb(16 12 8 / .62); filter: blur(10px); pointer-events: none; }

}



/* BUILD6 v24 - 2026-09-09, PRICE-1 signed "apply all as per reccomend" (2.1a-2.12a): one line of bare figures under the three hero

   benefits, linked whole to /precio/, on every screen - "$1,750 por la creación + $59 al mes, más impuestos aplicables." White on the

   hero's dark ground, the size of the benefits, underlined as a link. COPY-1 (3.1a-3.9a) changed three facts in the copy; the includes

   grid columns are re-measured in v24b below. */

.page-home .b6-hero-price { margin: 22px 0 0; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--skin-white); letter-spacing: 0; }

.page-home .b6-hero-price a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.page-home .b6-hero-price a:hover, .page-home .b6-hero-price a:focus-visible { text-decoration-thickness: 2px; }

@media (max-width: 63.999rem) { .page-home .b6-hero-price { margin-top: 18px; font-size: 17px; line-height: 25px; } }



/* BUILD6 v24b - measured at 1440 after v24: the price line wrapped to two lines in the 640 column (about 650 px of ink at 18 px) and

   the hero grew 584 -> 627, which moves the caption against the phone (both are percentages of the hero). At 1440+: the line at 17 px

   (the benefits' size) on one line; the actions' bottom margin 56 -> 40 so the copy column ends where it did and the hero stays 584.

   The includes grid: the signed "Adaptación de alrededor de 1,500 palabras" is 69 px wider than its 346 px column and the three

   columns cannot grow (the plan row is 900 px of columns); the v8c nowrap on that item is lifted and it wraps to two lines - row one

   of the grid is two lines high, the section 26 px taller. Measured, not chosen. */

@media (min-width: 1440px) {

  .page-home .b6-hero-price { font-size: 17px; line-height: 25px; margin-top: 18px; letter-spacing: -.005em; }

  .page-home .b6-hero-actions { margin-bottom: 40px; }

  .page-home .b6-includes-grid li:nth-child(6) { white-space: normal; }

}



/* BUILD6 v24c - measured again at 1440: the price line is one line of 512 px ink but its link box was 48 px tall (an inherited link

   box), so the copy column ran 23 px past the figure and the hero read 607. The link is a plain inline run at the line's height;

   on phones it keeps a 45 px tap box through padding that does not move the text. Copy column 544 = the figure = the render's hero. */

.page-home .b6-hero-price a { display: inline; padding: 0; margin: 0; min-height: 0; line-height: inherit; }

@media (max-width: 63.999rem) { .page-home .b6-hero-price a { display: inline-block; padding: 10px 0; margin: -10px 0; } }



/* BUILD6 v25 - 2026-09-09, walk-through 7 (operator, two phone screenshots): "The screen, bottom the image and boundary of the bezel,

   separating the boundary of the screen from the boundary of the [bezel] from the boundary of the hand, holding it is too constricted

   ... the edge of the phone needs to be interior of the screen. The boundary of the screen needs to be clean and there needs to be

   enough spacing for it to look like a real phone in someone’s hand". Measured on the portrait photograph: the composited quad’s

   bottom edge overshot the phone’s rim by 8-12 px on the left half; the phone’s front is black in the picture, so glass and bezel

   share one tone and the v19 fit found the body, not the display. Two things: the quad refitted to the rim (bottom-left up 11 px,

   right 4; bottom-right up 3, left 3, photo px), and a bezel drawn as a border on the composited page - 4.6 % of the body width,

   the proportion of a real phone, uniform, in container units of the phone box so it scales with the photograph; the display

   corners tighten by the same amount inside the body’s radius. Phone layout only (below 64rem); the desktop plate was passed. */

@media (max-width: 63.999rem) {

  .page-home .b6-phone { container-type: inline-size; }

  .page-home .b6-phone img {

    left: 40.463%; top: 14.318%; width: 23.154%; height: 63.186%;

    transform: matrix3d(0.969655, -0.089567, 0, -0.00029033, 0.094285, 0.898957, 0, -0.00047867, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0 0;

    box-sizing: border-box; border: 1.07cqw solid #08080a; border-radius: 12% / 5.5%; background: #08080a;

  }

}



/* BUILD6 v25b - 2026-09-09, walk-through 7, second look (operator, zoomed screenshot): "The screen is too small within the [bezel]

   and it’s at the wrong angle if you look at it at the bottom". Re-read of the photograph: the v19 quad already sat on the body

   outline (the dark front IS the body); the bright line 8-12 px above its bottom edge is the photographed display’s own edge -

   the bezel is about 4 % of the body width. v25 moved the bottom-left corner up 11 px AND drew a 4.6 % border, so the bottom band

   doubled and tilted against the body. Here the v19 quad returns and the bezel is the inset alone: 4 % of the body width, uniform,

   parallel to the body on every edge, corners tightened by it. */

@media (max-width: 63.999rem) {

  .page-home .b6-phone img {

    left: 40.431%; top: 14.354%; width: 23.163%; height: 63.615%;

    transform: matrix3d(0.981059, -0.093434, 0, -0.00017489, 0.086244, 0.887081, 0, -0.00058597, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: 0 0;

    border-width: 0.93cqw;

  }

}



/* BUILD6 v25c - 2026-09-09, walk-through 7, the operator’s reference ("Bezel example,": a printed phone mockup). Measured on it: the

   display sits about 5.5 % of the body width inside the body on every side, uniform, its corners tighter than the body’s. v25b drew

   4 %; this matches the reference at 5.2 % (1.2cqw of the phone box). The outer radius stays the body’s (12 % / 5.5 %), so the black

   frame fills the body’s rounded corner and the display corner is the same radius less the bezel. */

@media (max-width: 63.999rem) {

  .page-home .b6-phone img { border-width: 1.2cqw; }

}





/* CODEX-HERO-PHONE 2026-09-09 — mobile composite baked in photograph coordinates.

   Regenerate ES/EN with tools/bake-hero-phone.py. Retain the existing 1080/880

   bottom crop, hero height and caption anchor. Desktop rules are untouched. */

@media (max-width: 63.999rem) {

  .page-home .b6-phone {

    background-image: url("/img/showcase-hero-hand-phone-mobile-es-corners-20260910-v1.jpg");

    container-type: normal;

  }

  html[lang="en"] .page-home .b6-phone {

    background-image: url("/img/showcase-hero-hand-phone-mobile-en-corners-20260910-v1.jpg");

  }

  .page-home .b6-phone-screen {

    display: none;

    -webkit-mask-image: none;

    mask-image: none;

  }

  .page-home .b6-phone img {

    display: none;

    transform: none;

    border: 0;

  }

}



/* HERO-PHONE-DESKTOP 2026-09-09 - the desktop composite baked in photograph coordinates like the mobile one (operator, on the

   integrated mobile bake: "It's much better but on desktop screen the bezel and hand are too close it makes the screen look like

   it's not contained by the screen the phone"). The old .b6-screen quad coincided with the phone's whole black front, so the page

   ran to the rim with no bezel. The plate image is now the baked photograph per language (markup: -es.jpg / -en.jpg, made by

   tools/bake-hero-phone-desktop.py from the same body fit, display inset 4.1 %, corners tightened, glass edge, dark-pixel matte),

   and the runtime screen layer is off. Plate box, hero height and caption anchor unchanged. */

@media (min-width: 64rem) {

  .page-home .b6-screen { display: none; }

}



/* PHOTO-BRAND-SERVICE 2026-09-10 — optional proposal; existing palette and type. */

.page-home .photo-service-summary { display: grid; gap: 2rem; }

.page-home .photo-service-summary > * { min-width: 0; }

.page-home .photo-service-summary h2 { white-space: normal; }

@media (min-width: 48rem) {

  .page-home .photo-service-summary { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: center; }

}



/* LOGO-3a 2026-09-11 — the firm’s logo (operator: "Logo three a."): Codex’s vector lockup of the chosen concept 3 replaces the

   provisional bracket wordmark in the header (the lockup box 15 px tall on the phone and 18 px from 64rem — the ink heights of Codex’s 20/24 px em mocks; 13 px under 340 px so it clears the language switch); the sun-alone favicon

   replaces FAV-1’s brackets; footers and legal lines carry the plain name. The bracket device is retired. */

.showcase .brand-link .brand-logo, .brand-logo { display: block; height: 15px; width: auto; max-width: none; min-width: 0; }

@media (max-width: 21.24rem) { .showcase .brand-link .brand-logo, .brand-logo { height: 13px; } }

@media (min-width: 64rem) { .showcase .brand-link .brand-logo, .brand-logo { height: 18px; } }

.header-identity-row .brand-link { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }



/* =====================================================================================================================================

   B7 2026-09-11 — the LOGO-4 family in the header and the bright home top (BG-1a). Operator: "all recommended" (DECISIONS § SIGNED

   2026-09-11). Built from LOGO-4 picture 5 (R-47): sizes measured on the render and scaled to real screens — header logo 64 px at

   desktop, 44 px on phones; headline about 86 / 49 px; subtitle 28 / 22; button about 83 / 67 px tall; benefit circles 79 / 57.

   The header logo is a PREVIEW-ONLY raster cut from LOGO-4 picture 1 until LOGO-5's vectors land: never gated, never sealed.

   This block supersedes LOGO-3a's 15 / 13 / 18 px sizes (REV-103; R-75's ink-height sizing withdrawn for logos).

   ===================================================================================================================================== */

:root { --b7-ground: #FEFBF6; --b7-ray: #FFC93C; --b7-circle: #F8EEE3; --b7-rule: #E7DFD2; }



/* --- the header, every page: the main logo at the render's size, the descriptor gone, the yellow button from 64rem --- */

.showcase .site-header { background: var(--b7-ground); }

.showcase .brand-link .brand-logo, .brand-logo { height: 34px; width: auto; max-width: none; }

.page-home .brand-link .brand-logo { height: 44px; }

@media (max-width: 23.4rem) { .page-home .brand-link .brand-logo { height: 40px; } }

@media (max-width: 21.24rem) { .showcase .brand-link .brand-logo, .brand-logo { height: 30px; } .page-home .brand-link .brand-logo { height: 32px; } }

@media (max-width: 63.99rem) {

  /* inner pages: the logo takes its own width; the empty price column no longer squeezes it */

  .showcase .header-inner { grid-template-columns: auto minmax(0, 1fr) minmax(0, 33%) minmax(0, 16.5%); }

  .page-home .b6-header .header-inner { gap: .75rem; }

}

@media (min-width: 40rem) and (max-width: 63.99rem) {

  .showcase .header-inner { grid-template-columns: auto minmax(0, 1fr) minmax(0, 26%) minmax(0, 9%); }

}

/* `a.` in these selectors: the base `.showcase a[href]` (inline-flex, 48 px minimum) outranks a bare class.

   The home header gains `a.header-cta`; the inner pages already carry `a.header-price`, which takes the same pill from 64rem and moves into

   the menu on phones (the render's phone header shows only the logo, the language switch and the menu). */

.showcase a.header-cta { display: none; }

@media (max-width: 63.99rem) { .showcase .site-header a.header-price { display: none; } }

@media (min-width: 64rem) {

  .showcase .brand-link .brand-logo, .brand-logo, .page-home .brand-link .brand-logo { height: 64px; }

  .showcase .header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; padding-block: 1.125rem; }

  .showcase .header-inner > .desktop-menu { grid-column: 2; }

  .showcase .header-inner > .language-switch { grid-column: 3; }

  .showcase .header-inner > .header-cta, .showcase .site-header .header-price { grid-column: 4; }

  .showcase a.header-cta, .showcase .site-header a.header-price {

    display: inline-flex; align-items: center; justify-content: center; justify-self: end;

    min-height: 3.25rem; padding: 0 1.75rem; border-radius: 999px;

    background: var(--skin-action); color: var(--skin-navy); font-weight: 600; font-size: 1rem; line-height: 1.2;

    text-decoration: none; white-space: nowrap;

  }

  .showcase a.header-cta:hover, .showcase .site-header a.header-price:hover { background: var(--skin-action-hover); color: var(--skin-navy); }

  .showcase .site-header:not(.b6-header) .header-inner > .language-switch { flex-wrap: nowrap; }

  .showcase .site-header:not(.b6-header) .header-inner > .language-switch > * { flex: 0 0 auto; padding-inline: .375rem; white-space: nowrap; }

}

/* 64-80rem: the logo, the full menu and the button cannot share one row at the render's sizes - a compact header (NAV-1 closed with it) */

@media (min-width: 64rem) and (max-width: 79.99rem) {

  .showcase .brand-link .brand-logo, .brand-logo, .page-home .brand-link .brand-logo { height: 44px; }

  .showcase .header-inner { column-gap: .75rem; }

  .page-home .b6-header .header-inner { column-gap: 1rem; }

  .page-home .b6-nav { gap: 1rem; }

  .page-home a.header-cta { display: none; }

  .showcase .site-header a.header-price { padding: 0 1.125rem; min-height: 2.75rem; }

}

@media (min-width: 64rem) {

  .page-home .b6-nav a[aria-current="page"] {

    text-decoration: underline; text-decoration-color: var(--b7-ray); text-decoration-thickness: 3px; text-underline-offset: .55em;

  }

}



/* the home header shares the home content's width, so the logo lines up with the headline as in picture 5 (it sat 72 px inside at 1440) */

.page-home .b6-header .header-inner { width: min(100% - var(--show-gutter) * 2, 1368px); max-width: none; }



/* --- the home top: a bright ground, the headline with its sun rays, one button, the benefits, the price --- */

.page-home .b7-hero { position: relative; overflow: hidden; background: var(--b7-ground); color: var(--skin-navy); }

.page-home .b7-hero-inner { position: relative; z-index: 1; padding-block: 2.25rem 1.75rem; }

.page-home .b7-hero-copy { max-width: 46rem; }

.page-home .b7-title {

  margin: 0; color: var(--skin-navy); font-family: var(--skin-font-display); font-weight: 800;

  font-size: clamp(3rem, 1.1rem + 5.2vw, 5.375rem); line-height: 1.04; letter-spacing: -.02em;

}

.page-home .b7-ray-word { position: relative; white-space: nowrap; }

.page-home .b7-rays { position: absolute; left: calc(100% + .05em); bottom: .3em; width: 1.3em; height: 1.35em; fill: var(--b7-ray); overflow: visible; pointer-events: none; }

.page-home .b7-sub { margin: clamp(.75rem, .5rem + .6vw, 1rem) 0 0; font-size: clamp(1.375rem, .95rem + 1.15vw, 1.95rem); line-height: 1.3; color: var(--skin-navy); }

@media (max-width: 21.24rem) { .page-home .b7-title { font-size: 2.7rem; } }

.page-home .b7-actions { margin: clamp(1.5rem, 1rem + 1.4vw, 2.25rem) 0 0; }

.page-home a.b7-button {

  display: flex; align-items: center; justify-content: center; gap: .55em; width: 100%; max-width: none;

  min-height: clamp(4.1rem, 3.3rem + 2.2vw, 5.4rem); padding: 0 clamp(1.75rem, 1rem + 3.2vw, 4.4rem); border-radius: 999px;

  background: var(--skin-action); color: var(--skin-navy); font-weight: 700; font-size: clamp(1.375rem, 1.15rem + .5vw, 1.625rem);

  text-decoration: none; box-shadow: 0 2px 0 rgb(12 32 52 / .06);

}

.page-home a.b7-button:hover { background: var(--skin-action-hover); color: var(--skin-navy); }

.page-home .b7-benefits { list-style: none; margin: clamp(1.75rem, 1rem + 2.6vw, 4.25rem) 0 0; padding: 0; display: grid; gap: .85rem; }

.page-home .b7-benefits li { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; font-size: 1.125rem; line-height: 1.3; font-weight: 600; color: var(--skin-navy); }

.page-home .b7-benefits svg {

  width: 3.5rem; height: 3.5rem; padding: .95rem; box-sizing: border-box; border-radius: 50%; background: var(--b7-circle);

  fill: none; stroke: var(--skin-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;

}

.page-home .b7-price { margin: 1.5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--b7-rule); font-size: 1rem; line-height: 1.45; }

.page-home .b7-price a { color: var(--skin-navy); text-decoration: none; }

.page-home .b7-price a:hover { text-decoration: underline; }

/* 2026-09-14: mobile hero follows content height in either language.
   The exact approved desktop photograph is shown in full, without a portrait
   crop, a veil, or fixed offsets tying the copy to image coordinates. */
.page-home .b7-mobile-photo { display: none; }
@media (max-width: 47.999rem) {
  .page-home .b7-hero { background: var(--b7-ground); }
  .page-home .b7-hero-inner {
    --b7-mobile-gutter: clamp(1rem, 3.8vw, 1.75rem);
    width: 100%; max-width: none; padding: 2rem 0 2.5rem;
  }
  .page-home .b7-hero-copy { max-width: none; }
  .page-home .b7-hero-copy > :not(.b7-mobile-photo) {
    margin-inline: var(--b7-mobile-gutter);
  }
  .page-home .b7-title { margin-bottom: 1.25rem; }
  .page-home .b7-mobile-photo {
    display: block; width: 100%; max-width: none; height: auto;
    aspect-ratio: 1672 / 941; object-fit: contain; margin: 0;
  }
  .page-home .b7-sub { margin-top: 1.25rem; }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {

  .page-home .b7-hero {

    background:

      linear-gradient(90deg, rgb(254 251 246 / 1) 0%, rgb(254 251 246 / .94) 34%, rgb(254 251 246 / .6) 50%, rgb(254 251 246 / .15) 62%, rgb(254 251 246 / 0) 70%),

      url("/review/assets/main-hero-houston-natural-v6.png") 75% 30% / cover no-repeat,

      var(--b7-ground);

  }

  .page-home .b7-hero-copy { max-width: 56%; }

  .page-home .b7-hero-inner { padding-block: 3rem 3.5rem; }

  .page-home a.b7-button { font-size: 1.25rem; padding-inline: 1.25rem; }

}

/* the button's label on one line at the narrowest phones */

@media (max-width: 21.24rem) { .page-home a.b7-button { font-size: 1.25rem; padding-inline: 1rem; } }



/* desktop: the daylight photograph is the hero's ground, fading into cream behind the copy */

@media (min-width: 64rem) {

  .page-home .b7-hero {

    background:

      linear-gradient(90deg, rgb(254 251 246 / 1) 0%, rgb(254 251 246 / .95) 30%, rgb(254 251 246 / .7) 44%, rgb(254 251 246 / .3) 54%, rgb(254 251 246 / 0) 62%),

      url("/review/assets/main-hero-houston-natural-v6.png") 72% 28% / auto 124% no-repeat,

      var(--b7-ground);

  }

  .page-home .b7-hero-inner { padding-block: clamp(4rem, 1rem + 6vw, 9rem) clamp(4rem, 1rem + 5vw, 7.5rem); }

  .page-home a.b7-button { display: inline-flex; width: auto; }

  .page-home .b7-benefits { grid-template-columns: repeat(3, max-content); column-gap: clamp(2.5rem, 1rem + 3vw, 4.5rem); }

  .page-home .b7-benefits li { grid-template-columns: 1fr; justify-items: start; gap: 1rem; font-size: 1.375rem; }

  .page-home .b7-benefits svg { width: 4.9rem; height: 4.9rem; padding: 1.35rem; }

  .page-home .b7-price { max-width: 38rem; font-size: 1.1rem; }

}



/* --- the phone menu (REV-111 → REV-112). Operator: "It's visually uninteresting" · "The mobile menu in the upper right hand corner is also

   buggy" · "Copy the menu from this one: https://www.vinewoven.com/" · "No the aesthetics aren't what you copy, the mechanics of it are"

   · "Keep the style on brand".

   MECHANICS taken from the reference, measured on it:

   - a fixed full-screen layer, invisible when closed, fading in over 0.3 s on cubic-bezier(.16, 0, .28, .99), with no slide;

   - only the close ✕, in the corner where the ☰ was — the header underneath is covered;

   - the links centred on the screen, spaced evenly.

   Added here: the page behind does not scroll; a tap on a link or Escape closes it.

   The LOOK is this site's own: the navy cover, cream Noto Serif links with the current page in yellow, "Hablemos de su sitio" as the

   yellow pill, and the logo family's reverse symbol — the sun rising over the skyline — at the foot. Nothing of the reference's look,

   font, words or code is used. --- */

@media (max-width: 63.99rem) {

  .showcase .site-menu[open] .menu-links {

    position: fixed; inset: 0; z-index: 60;

    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(.25rem, 1.4vh, .8rem);

    margin: 0; padding: 5rem 1.5rem calc(clamp(4.75rem, 12vh, 6.5rem) + 3.25rem);

    overflow-y: auto; overscroll-behavior: contain; border: 0; box-shadow: none;

    background:

      url("/img/logo/wcs-symbol-reverse.svg?v=logo5") center bottom 1.75rem / auto clamp(4.75rem, 12vh, 6.5rem) no-repeat,

      radial-gradient(110% 55% at 50% 100%, rgb(255 212 71 / .12), transparent 70%),

      var(--skin-navy);

    animation: wcs-menu-in .3s cubic-bezier(.16, 0, .28, .99) both;

  }

  .showcase .site-menu[open] .menu-links a {

    display: block; min-height: 0; max-width: 100%; padding: .5rem .75rem; border: 0; border-radius: 0; background: none;

    color: var(--skin-cream); font-family: var(--skin-font-display); font-weight: 700;

    font-size: clamp(1.5rem, 1.05rem + 2.2vw, 2rem); line-height: 1.15; letter-spacing: -.01em;

    text-align: center; text-decoration: none; overflow-wrap: normal;

  }

  .showcase .site-menu[open] .menu-links a:hover, .showcase .site-menu[open] .menu-links a[aria-current="page"] { color: var(--skin-action); }

  .showcase .site-menu[open] .menu-links a:last-child {

    margin-top: .9rem; padding: .85rem 1.9rem; border-radius: 999px; background: var(--skin-action); color: var(--skin-navy);

    font-family: var(--skin-font-interface); font-size: 1.125rem; letter-spacing: 0;

  }

  .showcase .site-menu[open] .menu-links a:last-child:hover { background: var(--skin-action-hover); color: var(--skin-navy); }

  .showcase .site-menu[open] .menu-links a:focus-visible { outline: 3px solid var(--skin-action); outline-offset: 4px; box-shadow: none; }

  /* the ✕ stays above the cover, in the corner where the ☰ was, in cream on the navy */

  .showcase .site-menu[open] summary { z-index: 70; color: var(--skin-cream); }

  /* the page behind does not scroll while the menu is open (site.js sets the class on the details' toggle) */

  html.wcs-menu-open, html.wcs-menu-open body { overflow: hidden; }

}

@keyframes wcs-menu-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) { .showcase .site-menu[open] .menu-links { animation: none; } }

/* REV-112 fix, found on the landscape capture (844 x 390): a centred flex column that does not fit shrank its links until they overlapped.

   The links no longer shrink. The list is centred by auto margins, so when it does not fit it starts at the top and scrolls instead of

   hiding its first items. Short screens get a compact list without the symbol. */

@media (max-width: 63.99rem) {

  .showcase .site-menu[open] .menu-links { justify-content: flex-start; }

  .showcase .site-menu[open] .menu-links > * { flex-shrink: 0; }

  .showcase .site-menu[open] .menu-links > :first-child { margin-top: auto; }

  .showcase .site-menu[open] .menu-links > :last-child { margin-bottom: auto; }

}

@media (max-width: 63.99rem) and (max-height: 30rem) {

  .showcase .site-menu[open] .menu-links { padding: 3.75rem 1.5rem 1.5rem; gap: .15rem; background: var(--skin-navy); }

  .showcase .site-menu[open] .menu-links a { font-size: 1.3rem; padding-block: .3rem; }

  .showcase .site-menu[open] .menu-links a:last-child { margin-top: .6rem; padding-block: .6rem; }

}


/* Match headline space so translated copy does not rescale the hero.
   Both headlines reserve three lines; phone photos keep their full composition. */
.page-home .b7-title { min-block-size: 3.12em; }
/* Equal share-image frames; preserve each QR graphic without distortion or cropping. */
.page-home .wcs-share-section .wcs-share-qr img { aspect-ratio: 37 / 44; object-fit: contain; }

/* Homepage plan: aligned price and inclusions, with readable translated text. */
html[lang] .page-home .b6-plan-grid { grid-template-columns: minmax(0,1fr); gap: 2rem; }
html[lang] .page-home .b6-plan-panel { max-width: none; min-width: 0; }
html[lang] .page-home .b6-plan-panel .button { min-width: 0; max-width: 100%; }
html[lang] .page-home .b6-includes { min-width: 0; }
html[lang] .page-home .b6-includes h2 { margin: 0 0 1.5rem; }
html[lang] .page-home .b6-includes-grid { grid-template-columns: minmax(0,1fr); gap: 1.25rem 2rem; }
html[lang] .page-home .b6-includes-grid li { gap: .875rem; line-height: 1.5; }
html[lang] .page-home .b6-includes-grid svg { width: 1.5rem; height: 1.5rem; margin-top: .1rem; }
@media (min-width: 40rem) {
 html[lang] .page-home .b6-includes-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (min-width: 56.25rem) {
 html[lang] .page-home .b6-plan-grid { grid-template-columns: 20rem minmax(0,1fr); gap: clamp(2rem,3vw,3rem); }
 html[lang] .page-home .b6-plan-panel { padding: 1.5rem; }
 html[lang] .page-home .b6-plan-panel .button { padding-inline: 1rem; }
}
@media (min-width: 75rem) {
 html[lang] .page-home .b6-plan-grid { grid-template-columns: 22.75rem minmax(0,1fr); }
 html[lang] .page-home .b6-plan-panel { padding: 1.5rem 2.25rem 2rem; }
}
@media (min-width: 90rem) {
 html[lang] .page-home .b6-includes-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

html[lang] .page-home .b6-includes-grid { grid-auto-flow: row; grid-template-rows: none; }