/* ==========================================================================
   SALONI — Sections
   ========================================================================== */

/* =========================================================== 1. HERO ==== */
.hero {
  position: relative;
  background: var(--field);
  color: var(--on-field);
  overflow: hidden;
  isolation: isolate;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  min-block-size: min(94svh, 54rem);
}

.hero__copy {
  position: relative;
  z-index: 2;
  padding-block: clamp(7rem, 12vw, 9rem) clamp(2.5rem, 5vw, 4rem);
}

.hero__label { color: var(--on-field-line); }
.hero__label .label__mark { color: var(--on-field-line); }

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-display);
  font-weight: 700;
  margin-block-start: var(--s-5);
  color: #fff;
}
.hero__title em {
  font-style: normal;
  color: var(--on-field-line);
  position: relative;
  display: inline-block;
}
/* the underline is a drawn stroke, not a border */
.hero__title em::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -.08em;
  block-size: 2px;
  background: var(--on-field-line);
  transform-origin: var(--origin, right);
  transform: scaleX(var(--u, 1));
}

.hero__lead {
  margin-block-start: var(--s-5);
  font-size: var(--fs-lead);
  color: var(--on-field-dim);
  max-inline-size: 46ch;
  line-height: 1.85;
}
.hero__lead b { color: var(--on-field); font-weight: 700; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-7); }

.hero__proof {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid color-mix(in srgb, var(--on-field) 18%, transparent);
}
.hero__proof .medallion { border-color: var(--field); }
.hero__proof-text { font-size: var(--fs-sm); color: var(--on-field-dim); line-height: 1.5; }
.hero__proof-text b { color: var(--on-field); display: block; font-weight: 700; }
.hero__proof .rating__marks { color: var(--on-field-line); }
.hero__proof .rating__value { color: var(--on-field); }

/* --- the photograph, bleeding to the viewport edge, top to bottom --- */
.hero__figure {
  position: relative;
  align-self: stretch;
  margin-inline-end: calc(50% - 50vw);
  z-index: 1;
}
.hero__figure .shot {
  position: absolute;
  inset: 0;
  background: none;
}
.hero__figure .shot > img { object-position: 62% 26%; }
[dir="ltr"] .hero__figure .shot > img { object-position: 38% 26%; }

/* the photograph dissolves into the field rather than sitting on it as a
   pasted rectangle — it fades on the edge facing the copy, and at the top
   where it passes beneath the header */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--field) 0%, transparent 22%),
    linear-gradient(to var(--scrim-to, right), transparent 58%, var(--field) 100%);
}

/* the naqsh line continuing off her hand into the page */
.hero__trace {
  position: absolute;
  inset: 0;
  inline-size: 100%; block-size: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}
.hero__trace path { fill: none; stroke: var(--peony); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.hero__trace circle { fill: var(--peony); }

/* --- the dense band under the hero (the quality-bar move) --- */
.hero__band {
  position: relative;
  z-index: 2;
  border-block-start: var(--hair) solid color-mix(in srgb, var(--on-field) 20%, transparent);
  background: var(--field);
}
.hero__band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.hero__band-cell {
  padding: var(--s-6) clamp(1rem, 2.4vw, 2rem);
  border-inline-start: var(--hair) solid color-mix(in srgb, var(--on-field) 14%, transparent);
  display: grid;
  gap: var(--s-2);
  align-content: start;
}
.hero__band-cell:first-child { border-inline-start: 0; }
.hero__band-cell .icon { color: var(--on-field-line); inline-size: 1.35rem; block-size: 1.35rem; }
/* the band sits ON the field, so its figures take the on-field roles —
   the default --accent would be the very colour it is printed on */
.hero__band-cell .stat__value { color: #fff; }
.hero__band-cell .stat__label { color: var(--on-field-dim); }

.scroll-cue {
  position: absolute;
  inset-block-end: var(--s-5);
  inset-inline: 0;
  margin-inline: auto;
  inline-size: fit-content;
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--on-field-dim);
  z-index: 4;
}
html[lang="ar"] .scroll-cue { letter-spacing: 0; }
.scroll-cue__line { inline-size: 1px; block-size: 2.5rem; background: linear-gradient(var(--on-field-line), transparent); }

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
    gap: 0;
    min-block-size: 0;
  }
  .hero__figure {
    margin-inline: calc(50% - 50vw);
    /* capped: an unbounded svh gives a landscape phone or tablet a screen of
       bare wall instead of the drawing */
    block-size: clamp(17rem, 52svh, 28rem);
    order: 2;
  }
  /* the hand, not the wall, on a portrait crop */
  .hero__figure .shot > img,
  [dir="ltr"] .hero__figure .shot > img { object-position: 52% 34%; }
  /* on one column the photo sits below the copy, so the fade moves to its top */
  .hero__figure::after {
    background: linear-gradient(to bottom, var(--field) 0%, transparent 26%);
  }
  .hero__copy { order: 1; padding-block: 7rem var(--s-8); }
  .hero__band-grid { grid-template-columns: 1fr 1fr; }
  .hero__band-cell:nth-child(3) { border-inline-start: 0; }
  .hero__band-cell:nth-child(-n+2) { border-block-end: var(--hair) solid color-mix(in srgb, var(--on-field) 14%, transparent); }
  .scroll-cue { display: none; }
}

/* ==================================================== 2. THE LEDGER ===== */
/* "From the notebook to the system" — the visual argument.               */
.ledger__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: stretch;
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
}
.ledger__side { display: grid; gap: var(--s-5); align-content: start; }

.ledger__card {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  min-block-size: 100%;
}
.ledger__card--old {
  background: var(--bg-sunk);
  border-style: dashed;
  color: var(--fg-2);
}
.ledger__card--new { border-color: var(--accent); background: var(--accent-wash); }
[data-theme="dark"] .ledger__card--new { background: var(--bg-2); }

.ledger__card h3 { font-size: var(--fs-h3); margin-block-end: var(--s-4); display: flex; align-items: center; gap: var(--s-3); }
.ledger__card--old h3 { color: var(--fg-2); }
.ledger__card--new h3 { color: var(--accent); }

.ledger__list { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.ledger__item { display: flex; gap: var(--s-3); align-items: flex-start; line-height: 1.6; }
.ledger__item .icon { inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: .28rem; }
.ledger__card--old .ledger__item .icon { color: var(--fg-3); }
.ledger__card--new .ledger__item .icon { color: var(--leaf); }
.ledger__card--old .ledger__item { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }

.ledger__arrow { display: grid; place-items: center; color: var(--accent); }
.ledger__arrow svg { inline-size: clamp(2.5rem, 5vw, 4rem); block-size: auto; fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }

/* The closing banner. It used to lead with a clock face (19:45) — an hour is
   not the promise, the single press is, so the mark is now the tap and its
   ripple and the headline says so outright. */
.ledger__close {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--field);
  color: var(--on-field);
}
.ledger__close-mark {
  inline-size: clamp(3.5rem, 7vw, 5rem);
  block-size: clamp(3.5rem, 7vw, 5rem);
  display: grid;
  place-items: center;
  border: var(--hair) solid color-mix(in srgb, var(--on-field) 34%, transparent);
  border-radius: 50%;
  color: var(--on-field-line);
}
.ledger__close-mark .icon { inline-size: 55%; block-size: 55%; }
.ledger__close-title {
  font-size: var(--fs-h3);
  color: #fff;
  margin-block-end: var(--s-2);
}
.ledger__close-body { max-inline-size: 62ch; }
.ledger__close p { color: var(--on-field-dim); font-size: var(--fs-body); line-height: 1.7; }
.ledger__close b { color: #fff; }

/* the three assurances, set as drawn chips rather than a second paragraph */
.ledger__close-chips {
  display: grid;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--on-field-dim);
}
.ledger__close-chips li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
}
.ledger__close-chips li::before {
  content: "";
  inline-size: 5px; block-size: 5px;
  border-radius: 50%;
  background: var(--on-field-line);
  flex: none;
}

@media (max-width: 820px) {
  .ledger__compare { grid-template-columns: 1fr; }
  .ledger__arrow { transform: rotate(90deg); justify-self: center; padding-block: var(--s-2); }
  [dir="rtl"] .ledger__arrow { transform: rotate(-90deg); }
  .ledger__close { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--s-4); }
  .ledger__close-chips { justify-items: center; }
}
@media (max-width: 1100px) and (min-width: 821px) {
  .ledger__close { grid-template-columns: auto minmax(0, 1fr); }
  .ledger__close-chips { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; gap: var(--s-5); }
}

/* ==================================================== 3. FEATURES ======= */
/* Eight features, and the count is the point: two rows of four. auto-fit was
   fitting five across on a wide screen and leaving a row of three, which read
   as a grid that had run out rather than as a set. The columns are counted. */
.features__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hair);
  background: var(--line);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
}
/* hairline mortar grid — the panels share drawn edges rather than floating */
.feature {
  position: relative;
  background: var(--bg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--s-4);
  align-content: start;
  transition: background-color 320ms var(--e-out);
  overflow: hidden;
}
.feature:hover { background: var(--bg-2); }
.feature__icon { color: var(--accent); }
.feature__icon .icon { inline-size: 2.6rem; block-size: 2.6rem; stroke-width: 1.15; }
.feature h3 { font-size: 1.16rem; font-weight: 700; }
.feature p { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.75; }
.feature__n {
  position: absolute;
  inset-block-start: clamp(1.25rem, 2.4vw, 1.85rem);
  inset-inline-end: clamp(1.25rem, 2.4vw, 1.85rem);
  font-family: var(--ff-display-en);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  opacity: .55;
}
@media (max-width: 1180px) { .features__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .features__grid { grid-template-columns: 1fr; } }

/* the vine passes behind the tiles */
.feature__trace {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  opacity: .16;
  color: var(--leaf);
}

/* ==================================================== 4. THE DEMO ======= */
.demo { background: var(--bg-sunk); }

.demo__frame {
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg);
  overflow: hidden;
}
.demo__chrome {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-block-end: var(--hair) solid var(--line);
  background: var(--bg-2);
  flex-wrap: wrap;
}
.demo__dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--line-2); }
.demo__dots { display: flex; gap: 5px; }
.demo__title { font-size: var(--fs-xs); color: var(--fg-3); font-weight: 600; }

.tabs { display: flex; gap: var(--s-1); margin-inline-start: auto; background: var(--bg-sunk); padding: 3px; border-radius: 999px; border: var(--hair) solid var(--line); }
.tab {
  padding: .5rem var(--s-4);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: all var(--t-micro) var(--e-out);
}
.tab[aria-selected="true"] { background: var(--accent); color: var(--accent-on); }
.tab .icon { inline-size: 1rem; block-size: 1rem; }

.demo__body { padding: clamp(1rem, 2.4vw, 1.75rem); }
.demo__panel[hidden] { display: none; }

/* --- POS --- */
.pos { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.75rem); align-items: start; }

.pos__col-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  margin-block-end: var(--s-4);
}
.pos__col-title { font-size: var(--fs-xs); font-weight: 700; color: var(--fg-3); letter-spacing: .04em; }

.pos__cats { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block-end: var(--s-4); }
.chip {
  padding: .42rem var(--s-3);
  border: var(--hair) solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-2);
  transition: all var(--t-micro) var(--e-out);
}
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.chip:hover { border-color: var(--fg-3); }

.pos__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--s-3); }
.svc {
  position: relative;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-4);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  text-align: start;
  transition: all var(--t-micro) var(--e-out);
  min-block-size: 7.25rem;
}
.svc:hover { border-color: var(--accent); transform: translateY(-2px); }
.svc:active { transform: translateY(0) scale(.985); }
.svc .icon { inline-size: 1.85rem; block-size: 1.85rem; color: var(--accent); }
.svc__name { font-size: var(--fs-sm); font-weight: 700; line-height: 1.35; }
.svc__price { font-size: var(--fs-xs); color: var(--fg-3); margin-block-start: auto; }
.svc__badge {
  position: absolute;
  inset-block-start: -.5rem; inset-inline-end: -.5rem;
  min-inline-size: 1.4rem; block-size: 1.4rem;
  padding-inline: .3rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-on);
  font-size: .68rem;
  font-weight: 700;
  display: grid; place-items: center;
  transform: scale(0);
  transition: transform 260ms var(--e-out);
}
.svc[data-count]:not([data-count="0"]) .svc__badge { transform: scale(1); }

/* --- the ticket --- */
.ticket {
  border: var(--hair) solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  display: grid;
  align-content: start;
  position: sticky;
  inset-block-start: 5.5rem;
}
.ticket__head {
  padding: var(--s-4);
  border-block-end: var(--hair) dashed var(--line-2);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.ticket__brand { display: flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--fs-sm); }
.ticket__brand .icon { color: var(--accent); inline-size: 1.2rem; block-size: 1.2rem; }
.ticket__no { font-size: var(--fs-xs); color: var(--fg-3); }

.ticket__lines { padding: var(--s-3) var(--s-4); display: grid; gap: var(--s-1); min-block-size: 8rem; align-content: start; }
.ticket__empty { color: var(--fg-3); font-size: var(--fs-xs); text-align: center; padding-block: var(--s-6); line-height: 1.7; }
.ticket__empty .icon { inline-size: 1.8rem; block-size: 1.8rem; margin: 0 auto var(--s-3); color: var(--line-2); }

.line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-2);
  font-size: var(--fs-sm);
  border-block-end: var(--hair) solid color-mix(in srgb, var(--line) 55%, transparent);
}
.line:last-child { border-block-end: 0; }
.line__name { line-height: 1.4; }
.line__meta { font-size: var(--fs-xs); color: var(--fg-3); }
.line__amt { font-weight: 700; }
.line__del { color: var(--fg-3); inline-size: 1.75rem; block-size: 1.75rem; display: grid; place-items: center; border-radius: 50%; }
.line__del:hover { color: var(--err); background: var(--accent-wash); }
.line__del .icon { inline-size: .9rem; block-size: .9rem; }

.ticket__totals { padding: var(--s-4); border-block-start: var(--hair) dashed var(--line-2); display: grid; gap: var(--s-2); }
.trow { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-sm); color: var(--fg-2); }
.trow--grand {
  padding-block-start: var(--s-3);
  margin-block-start: var(--s-2);
  border-block-start: var(--hair) solid var(--line-2);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--fg);
  font-family: var(--ff-display);
}
.trow--grand .nums { color: var(--accent); }
/* commission is the salon's cost, not the client's — set apart from the sum */
.trow--aside {
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-3);
  border-block-start: var(--hair) dashed var(--line);
  font-size: var(--fs-xs);
  color: var(--fg-3);
  gap: var(--s-3);
}

.ticket__staff { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-2); }
.staff-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.staff {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: .35rem .7rem .35rem .35rem;
  border: var(--hair) solid var(--line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--fg-2);
  transition: all var(--t-micro) var(--e-out);
}
[dir="rtl"] .staff { padding: .35rem .35rem .35rem .7rem; }
.staff__dot {
  inline-size: 1.5rem; block-size: 1.5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  font-family: var(--ff-display-ar);
  font-size: .72rem;
}
.staff[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }

.ticket__act { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-2); }
.ticket__note { font-size: var(--fs-xs); color: var(--fg-3); text-align: center; }

/* --- printed invoice overlay --- */
.receipt {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 5;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms var(--e-out), visibility 320ms;
}
.receipt[data-open="true"] { opacity: 1; visibility: visible; }
.receipt__paper {
  inline-size: min(100%, 22rem);
  background: var(--bg-2);
  border: var(--hair) solid var(--line-2);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-4);
  max-block-size: 100%;
  overflow-y: auto;
}
.receipt__logo { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.receipt__logo .icon { color: var(--accent); inline-size: 2rem; block-size: 2rem; }
.receipt__salon { font-family: var(--ff-display); font-size: 1.2rem; font-weight: 700; }
.receipt__meta { font-size: var(--fs-xs); color: var(--fg-3); text-align: center; line-height: 1.6; }
.receipt__lines { display: grid; gap: var(--s-2); font-size: var(--fs-xs); border-block: var(--hair) dashed var(--line-2); padding-block: var(--s-3); }
.receipt__row { display: flex; justify-content: space-between; gap: var(--s-3); }
.receipt__total { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--fs-h3); font-family: var(--ff-display); }
.receipt__thanks { text-align: center; font-size: var(--fs-xs); color: var(--fg-3); }

/* --- reports --- */
.rep { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: clamp(1rem, 2.4vw, 1.75rem); }
.rep__card { border: var(--hair) solid var(--line); border-radius: var(--r-sm); padding: var(--s-5); background: var(--bg-2); display: grid; gap: var(--s-4); align-content: start; }
.rep__card h4 { font-size: var(--fs-xs); font-weight: 700; color: var(--fg-3); }
.rep__big { font-family: var(--ff-display); font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--accent); }
.rep__delta { font-size: var(--fs-xs); color: var(--ok); display: flex; align-items: center; gap: var(--s-2); }
.rep__delta .icon { inline-size: .9rem; block-size: .9rem; }

.bars { display: grid; gap: var(--s-3); }
.bar__row { display: grid; gap: var(--s-2); }
.bar__top { display: flex; justify-content: space-between; font-size: var(--fs-xs); }
.bar__track { block-size: 6px; background: var(--bg-sunk); border-radius: 999px; overflow: hidden; }
.bar__fill { block-size: 100%; inline-size: 0; background: var(--accent); border-radius: 999px; transition: inline-size 900ms var(--e-out); }
.bar__row:nth-child(2n) .bar__fill { background: var(--leaf); }
.bar__row:nth-child(3n) .bar__fill { background: var(--peony-3); }

.spark { display: flex; align-items: flex-end; gap: 4px; block-size: 4.5rem; }
.spark__col { flex: 1; background: var(--accent-wash); border-radius: 2px 2px 0 0; position: relative; min-block-size: 4px; transition: block-size 700ms var(--e-out); }
.spark__col[data-peak="true"] { background: var(--accent); }

@media (max-width: 880px) {
  .pos { grid-template-columns: 1fr; }
  .ticket { position: static; }
  .tabs { margin-inline-start: 0; inline-size: 100%; justify-content: center; }
}

/* ==================================================== 5. PRICING ======== */
.pricing { position: relative; }
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
  max-inline-size: 74rem;
  margin-inline: auto;
}
/* the palm/mihrab crown, as DESIGN.md §4 reserves it: hero-scale panels only,
   which is the pricing plans and the consultation form */
.plan {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--s-5);
  padding: clamp(3rem, 5.5vw, 4.25rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.5rem);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  border-start-start-radius: 50% 3rem;
  border-start-end-radius: 50% 3rem;
  background: var(--bg-2);
  transition: border-color 320ms var(--e-out), transform 320ms var(--e-out);
}
.plan:hover { border-color: var(--line-2); }
.plan--best {
  border-color: var(--accent);
  border-width: 1.5px;
  background: var(--bg);
}
.plan--best::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: var(--r-sm);
  border-start-start-radius: 50% 3.2rem;
  border-start-end-radius: 50% 3.2rem;
  border: var(--hair) solid var(--accent);
  opacity: .34;
  pointer-events: none;
}
/* centred without direction maths: let the inset pair do the centring */
.plan__flag {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  inline-size: fit-content;
  margin-inline: auto;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--accent);
  color: var(--accent-on);
  border-color: var(--accent);
}

.plan__mark { color: var(--accent); }
.plan__mark .icon { inline-size: 2.4rem; block-size: 2.4rem; }
.plan__name { font-size: var(--fs-h3); font-weight: 700; }
.plan__desc { font-size: var(--fs-sm); color: var(--fg-2); }
.plan__price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.plan__amount { font-family: var(--ff-display); font-size: clamp(2.6rem, 6vw, 3.85rem); font-weight: 700; line-height: 1; color: var(--fg); }
.plan__per { font-size: var(--fs-sm); color: var(--fg-3); }
.plan__sub { font-size: var(--fs-xs); color: var(--leaf); font-weight: 700; }

.plan__list { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.plan__li { display: flex; gap: var(--s-3); align-items: flex-start; line-height: 1.6; }
.plan__li .icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--leaf); flex: none; margin-block-start: .26rem; }
.plan__li--star .icon { color: var(--accent); }
.plan__cta { margin-block-start: auto; }

/* Three plans do not survive an auto-fit drop to two columns: the third
   lands alone under the first and the ladder stops reading as a ladder.
   Below the width that holds three, go straight to one. */
@media (max-width: 1000px) {
  .plans { grid-template-columns: 1fr; max-inline-size: 28rem; }
}

.plans__foot { text-align: center; margin-block-start: var(--s-7); font-size: var(--fs-sm); color: var(--fg-3); }

/* ==================================================== 6. TALK (CTA) ===== */
/* A committed field carrying one ask. It replaced a discount-coupon band —
   the ticket graphic went with it, because a call to action that dresses
   itself as a voucher is asking to be discounted rather than answered. */
.talk {
  background: var(--field);
  color: var(--on-field);
  position: relative;
  overflow: hidden;
}
.talk__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.talk h2 { color: #fff; max-inline-size: 20ch; }
.talk p {
  color: var(--on-field-dim);
  margin-block-start: var(--s-4);
  font-size: var(--fs-lead);
  max-inline-size: 52ch;
}
.talk__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-6); }

.talk__points {
  display: grid;
  gap: var(--s-4);
  padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
  border-inline-start: var(--hair) solid color-mix(in srgb, var(--on-field) 28%, transparent);
}
.talk__points li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--on-field);
  white-space: nowrap;
}
.talk__points .icon { inline-size: 1.35rem; block-size: 1.35rem; color: var(--on-field-line); }

@media (max-width: 880px) {
  .talk__inner { grid-template-columns: 1fr; }
  .talk__points {
    padding-inline-start: 0;
    border-inline-start: 0;
    padding-block-start: var(--s-5);
    border-block-start: var(--hair) solid color-mix(in srgb, var(--on-field) 28%, transparent);
  }
}

/* ==================================================== 7. CONSULTATION === */
.consult { background: var(--bg-sunk); }
.consult__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.consult__aside { position: sticky; inset-block-start: 6.5rem; display: grid; gap: var(--s-6); }
.consult__points { display: grid; gap: var(--s-4); }
.consult__point { display: flex; gap: var(--s-4); align-items: flex-start; }
.consult__point .icon { color: var(--accent); inline-size: 1.6rem; block-size: 1.6rem; flex: none; margin-block-start: .1rem; }
.consult__point h4 { font-size: var(--fs-body); font-weight: 700; margin-block-end: .2rem; }
.consult__point p { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.65; }

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form__foot { display: grid; gap: var(--s-4); }

.form__success {
  display: none;
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) var(--s-5);
  gap: var(--s-4);
  justify-items: center;
}
.form[data-sent="true"] .form__body { display: none; }
.form[data-sent="true"] .form__success { display: grid; }
.form__success .bloom { inline-size: 4.5rem; block-size: 4.5rem; color: var(--leaf); }
.form__success h3 { font-size: var(--fs-h3); }
.form__success p { color: var(--fg-2); font-size: var(--fs-sm); max-inline-size: 34ch; }

@media (max-width: 900px) {
  .consult__grid { grid-template-columns: 1fr; }
  .consult__aside { position: static; }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: 1fr; }
  .phone-row { grid-template-columns: 7rem 1fr; }
}

/* ==================================================== 8. FINAL CTA ====== */
.final {
  position: relative;
  background: var(--field);
  color: var(--on-field);
  text-align: center;
  overflow: hidden;
}
.final__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: var(--s-5); }
.final h2 { color: #fff; font-size: var(--fs-h1); }
.final p { color: var(--on-field-dim); font-size: var(--fs-lead); max-inline-size: 44ch; }
.final__note { font-size: var(--fs-xs); color: var(--on-field-dim); }
/* centred via the inset pair, not inline-start + translate: under RTL
   `inset-inline-start: 50%` resolves to `right: 50%` and the negative
   translate then pushes the ornament clean off the section */
.final__bloom {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  margin-inline: auto;
  transform: translateY(-50%);
  inline-size: min(46rem, 130%);
  block-size: auto;
  opacity: .13;
  color: var(--on-field-line);
  z-index: 1;
  pointer-events: none;
}

/* ==================================================== 9. FOOTER ========= */
.footer { background: var(--bg); border-block-start: var(--hair) solid var(--line); padding-block: clamp(3rem, 6vw, 5rem) var(--s-6); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}
.footer__about p { color: var(--fg-2); font-size: var(--fs-sm); margin-block-start: var(--s-4); max-inline-size: 34ch; line-height: 1.8; }
.footer__contact { margin-block-start: var(--s-5); display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.footer__contact a, .footer__contact span { display: flex; align-items: center; gap: var(--s-3); color: var(--fg-2); }
.footer__contact a:hover { color: var(--accent); }
.footer__contact .icon { inline-size: 1.1rem; block-size: 1.1rem; color: var(--accent); }

.footer h4 { font-size: var(--fs-xs); font-weight: 700; color: var(--fg-3); letter-spacing: var(--tracking-label); text-transform: uppercase; margin-block-end: var(--s-4); }
html[lang="ar"] .footer h4 { letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); }
.footer__links { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.footer__links a { color: var(--fg-2); display: inline-flex; align-items: center; gap: var(--s-2); }
.footer__links a:hover { color: var(--accent); }
.footer__links a .cone { inline-size: .7rem; block-size: .7rem; opacity: 0; transition: opacity var(--t-micro) var(--e-out); }
.footer__links a:hover .cone { opacity: 1; }

.footer__bar {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  padding-block-start: var(--s-5);
  border-block-start: var(--hair) solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  color: var(--fg-3);
}

@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__about { grid-column: 1 / -1; }
}

/* ============================================== responsive: header ====== */
@media (max-width: 1060px) {
  .nav { display: none; }
  .burger { display: grid; }
  .header__actions .btn--solidfield { display: none; }
}
@media (max-width: 520px) {
  .header__actions .seg { display: none; }
}

/* ===================================================== 10. SCREENS ====== */
/* The proof that this is a till and not a brochure. Everything here is
   markup in the palette, so it stays correct in both themes and both
   languages — a screenshot would be wrong in three of those four states. */
.screens__grid {
  display: grid;
  grid-template-columns: 1.3fr .82fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: end;
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}
.screens__item { display: grid; gap: var(--s-4); justify-items: center; align-content: end; }
.screens__item figcaption {
  font-size: var(--fs-xs);
  color: var(--fg-3);
  text-align: center;
  line-height: 1.6;
  max-inline-size: 30ch;
}

/* --- the device shells: a stroke, like everything else --- */
.device {
  inline-size: 100%;
  border: var(--stroke) solid var(--line-strong);
  background: var(--bg-2);
  position: relative;
}
/* tall enough for head + four lines + totals + the pay row; at 4/3.05 the
   pay buttons fell outside the screen's overflow:hidden */
.device--tablet { border-radius: 14px; padding: 10px; aspect-ratio: 4 / 3.6; }
.device--phone  { border-radius: 22px; padding: 8px; aspect-ratio: 9 / 17; max-inline-size: 14rem; }
.device--phone::before {
  content: "";
  position: absolute;
  inset-block-start: 15px; inset-inline: 0;
  margin-inline: auto;
  inline-size: 3.2rem; block-size: 4px;
  border-radius: 999px;
  background: var(--line-2);
  z-index: 2;
}
.device__screen {
  block-size: 100%;
  border-radius: 6px;
  background: var(--bg);
  overflow: hidden;
  display: flex;
}

/* --- the till --- */
.till { display: grid; grid-template-rows: auto 1fr auto auto; inline-size: 100%; font-size: var(--fs-xs); }
.till__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-block-end: var(--hair) solid var(--line);
}
.till__title { font-weight: 700; font-size: var(--fs-sm); }
.till__chip {
  font-size: var(--fs-label); font-weight: 700;
  padding: .2rem .55rem;
  border: var(--hair) solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  white-space: nowrap;
}
/* the 1fr track must be allowed to shrink below its content, or a long
   service name pushes the pay row out through the screen's overflow */
.till__lines { display: grid; align-content: start; padding: var(--s-2) 0; min-block-size: 0; overflow: hidden; }
.till__lines li {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: .44rem var(--s-4);
  border-block-end: var(--hair) dashed var(--line);
}
.till__lines li:last-child { border-block-end: 0; }
.till__line--prod { color: var(--leaf-ink); }
.till__foot { padding: var(--s-3) var(--s-4); border-block-start: var(--hair) solid var(--line); display: grid; gap: .3rem; }
.till__row { display: flex; justify-content: space-between; color: var(--fg-3); }
.till__row--total { color: var(--fg); font-weight: 700; font-size: var(--fs-sm); padding-block-start: .3rem; }
.till__pay { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4); }
.till__btn {
  text-align: center; padding: .5rem; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-on); font-weight: 700;
}
.till__btn--ghost { background: none; border: var(--hair) solid var(--line-2); color: var(--fg-2); }

/* --- the thermal receipt: paper, not a panel --- */
.paper {
  inline-size: 100%;
  max-inline-size: 14rem;
  background: var(--bg-2);
  border: var(--hair) solid var(--line);
  border-block-end: 0;
  padding-block-end: 12px;
  position: relative;
}
/* the torn edge, cut with a repeating gradient rather than an image */
.paper::after {
  content: "";
  position: absolute;
  inset-block-end: 0; inset-inline: 0;
  block-size: 12px;
  background: repeating-linear-gradient(-45deg, var(--bg) 0 6px, var(--bg-2) 6px 12px);
}
.paper__body { padding: var(--s-5) var(--s-4) var(--s-3); display: grid; gap: var(--s-2); font-size: var(--fs-label); }
.paper__brand {
  font-family: var(--ff-display-en);
  font-size: 1.15rem; letter-spacing: .1em; text-align: center; color: var(--fg);
}
.paper__sub { text-align: center; color: var(--fg-3); }
.paper__rule { block-size: 0; border-block-start: var(--hair) dashed var(--line-2); }
.paper__lines { display: grid; gap: .35rem; }
.paper__lines li { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--fg-2); }
.paper__total { display: flex; justify-content: space-between; font-weight: 700; font-size: var(--fs-sm); color: var(--fg); }
.paper__meta { text-align: center; color: var(--fg-3); }
/* a barcode drawn as bars — no font, no image */
.paper__code { display: flex; gap: 2px; justify-content: center; block-size: 1.8rem; margin-block-start: var(--s-2); }
.paper__code span { inline-size: 2px; background: var(--fg); }
.paper__code span:nth-child(3n) { inline-size: 4px; }
.paper__code span:nth-child(4n) { opacity: .5; }
.paper__code span:nth-child(5n) { inline-size: 1px; }
.paper__thanks { text-align: center; color: var(--fg-3); }

/* --- the closing report --- */
.close { inline-size: 100%; padding: var(--s-5) var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.close__label { font-size: var(--fs-label); letter-spacing: var(--tracking-label); color: var(--fg-3); }
html[lang="ar"] .close__label { letter-spacing: 0; }
.close__big { font-family: var(--ff-display-en); font-size: 2.35rem; font-weight: 700; line-height: 1; color: var(--accent); }
.close__cur { font-size: var(--fs-label); color: var(--fg-3); }
.close__bars { display: flex; align-items: flex-end; gap: 5px; block-size: 4.25rem; margin-block: var(--s-4); }
.close__bars span {
  flex: 1;
  block-size: var(--h);
  background: var(--accent-wash);
  border-block-start: var(--stroke) solid var(--accent);
}
.close__bars span:last-child { background: var(--accent); }
.close__rows { display: grid; gap: .45rem; font-size: var(--fs-label); }
.close__rows li {
  display: flex; justify-content: space-between; gap: var(--s-3);
  color: var(--fg-3);
  padding-block-start: .45rem;
  border-block-start: var(--hair) solid var(--line);
}
.close__rows b { color: var(--fg); }

@media (max-width: 980px) {
  .screens__grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .screens__item--receipt { order: 3; }
  /* Below this width a fixed tablet proportion is shorter than the till's
     own content, so the 1fr lines track collapses to nothing and the
     invoice loses its line items entirely. Let the content set the height
     and keep the shell honest. */
  .device--tablet { aspect-ratio: auto; }
  .till__lines { min-block-size: auto; }
}
@media (max-width: 620px) {
  .screens__grid { grid-template-columns: 1fr; justify-items: center; }
  .device--tablet { max-inline-size: 23rem; }
}

/* ======================================================= 11. STEPS ====== */
/* The vine made structural: the four steps hang off one ruled line, run
   horizontally so the section occupies its own width instead of leaving
   half of it as wall.                                                    */
.start__head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: end;
}
.start__intro .sec-head__title { margin-block-start: var(--s-4); }
.start__aside { display: grid; gap: var(--s-5); }
.start__aside .sec-head__lead { margin-block-start: 0; max-inline-size: 44ch; }
.start__total {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: var(--hair) solid var(--line);
  font-size: var(--fs-sm);
  color: var(--fg-2);
}
.start__total .icon { inline-size: 1.25rem; block-size: 1.25rem; color: var(--accent); }
.start__total b { color: var(--fg); }

@media (max-width: 860px) {
  .start__head { grid-template-columns: 1fr; align-items: start; }
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
}
.step { display: grid; grid-template-rows: auto 1fr; gap: var(--s-5); }

/* the rule the four stops sit on: one hairline, drawn from each disc's
   centre to the next one's, so the row reads as a single continuous line */
.step__rail { position: relative; block-size: 3rem; }
.step__rail::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 1.5rem;
  inset-inline-end: -1.5rem;
  block-size: var(--hair);
  background: var(--line);
}
.step:last-child .step__rail::before { display: none; }
.step__n {
  position: relative;
  z-index: 1;
  font-family: var(--ff-display-en);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
  inline-size: 3rem; block-size: 3rem;
  display: grid; place-items: center;
  border: var(--hair) solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
}
.step__body {
  display: grid; gap: var(--s-3); align-content: start; justify-items: start;
  padding-inline-end: clamp(1.25rem, 3vw, 2.5rem);
}
.step__icon { color: var(--accent); }
.step__icon .icon { inline-size: 1.9rem; block-size: 1.9rem; stroke-width: 1.2; }
.step__body h3 { font-size: 1.16rem; font-weight: 700; }
.step__body p { color: var(--fg-2); font-size: var(--fs-sm); line-height: 1.75; }
.step__time {
  margin-block-start: var(--s-2);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  color: var(--leaf-ink);
  border: var(--hair) solid color-mix(in srgb, var(--leaf) 45%, transparent);
  border-radius: 999px;
  padding: .28rem .7rem;
}
html[lang="ar"] .step__time { letter-spacing: 0; }

@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: clamp(2rem, 4vw, 3rem); }
  .step:nth-child(2n) .step__rail::before { display: none; }
}
@media (max-width: 620px) {
  /* one column: the rail turns back into a plain separator, because a line
     drawn between two stacked discs would run straight through the copy */
  .steps { grid-template-columns: 1fr; row-gap: 0; }
  .step {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: none;
    gap: var(--s-4);
    align-items: start;
    padding-block: var(--s-5);
  }
  .step + .step { border-block-start: var(--hair) solid var(--line); }
  .step__rail { block-size: auto; }
  .step__rail::before { display: none; }
  .step__n { inline-size: 2.5rem; block-size: 2.5rem; }
  .step__body { padding-inline-end: 0; }
}

/* ==================================================== 12. HARDWARE ====== */
.hw {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hw__copy { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.hw__list { display: grid; gap: var(--s-4); margin-block-start: var(--s-3); }
.hw__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: start; }
.hw__list .icon { inline-size: 1.15rem; block-size: 1.15rem; color: var(--leaf); margin-block-start: .3rem; }
.hw__list b { display: block; font-size: var(--fs-sm); margin-block-end: .2rem; }
.hw__list span { font-size: var(--fs-sm); color: var(--fg-2); line-height: 1.65; }

/* two frames, the second overlapping the first — the one place on the page
   a photograph sits on a photograph, and it earns it by being the section
   whose whole subject is "two objects on one counter" */
.hw__art { position: relative; }
.hw__shot--main .shot {
  aspect-ratio: 3 / 2;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
}
.hw__shot--inset {
  position: absolute;
  inset-block-end: -9%;
  inset-inline-start: -5%;
  inline-size: 36%;
  max-inline-size: 12rem;
}
.hw__shot--inset .shot {
  aspect-ratio: 3 / 4;
  border: 6px solid var(--bg);
  border-radius: var(--r-sm);
  outline: var(--hair) solid var(--line);
}

@media (max-width: 900px) {
  .hw { grid-template-columns: 1fr; }
  .hw__art { margin-block-start: var(--s-6); }
  .hw__shot--inset { inset-block-end: -6%; inline-size: 30%; }
}
@media (max-width: 520px) { .hw__shot--inset { display: none; } }

/* ====================================================== 13. VOICES ====== */
.voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-block-start: clamp(2rem, 4vw, 3.5rem);
}
.voice {
  position: relative;
  isolation: isolate;
  border: var(--hair) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-2);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-5);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  transition: border-color 260ms var(--e-out), background-color 260ms var(--e-out);
}
.voice:hover { border-color: var(--accent); }

/* The ornament behind the quote. It is a <use> of the connector library, and
   a <use> renders into a shadow tree that no selector reaches — the clone
   gets NO class rules at all, only the inherited properties handed down from
   the <use> element itself. fill and stroke are both inherited in SVG, so
   both are named here: without the explicit `fill: none` the clone falls back
   to the initial black and the hairline rosette paints as a solid disc. This
   is the same trap documented in components.css for the connector vines. */
.voice__orn {
  fill: none;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 12.5rem;
  block-size: 10rem;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
  color: var(--accent);
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: .14;
  transition: opacity 420ms var(--e-out);
}
.voice:hover .voice__orn { opacity: .22; }

.voice__mark { color: var(--accent); }
.voice__mark .icon { inline-size: 1.6rem; block-size: 1.6rem; }

.voice__quote p { font-size: var(--fs-sm); line-height: 1.85; color: var(--fg); max-inline-size: 56ch; }

.voice__by {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block-start: var(--s-4);
  border-block-start: var(--hair) solid var(--line);
  font-size: var(--fs-xs);
}
.voice__medallion {
  inline-size: 2.5rem; block-size: 2.5rem;
  margin-inline-end: 0;
  border-color: var(--bg-2);
  font-size: 1rem;
  flex: none;
}
.voice:nth-child(2) .voice__medallion { background: var(--leaf); color: #fff; }
.voice:nth-child(3) .voice__medallion { background: var(--peony); color: var(--mauve-5); }
.voice__id { display: grid; gap: .1rem; min-inline-size: 0; }
.voice__id b { color: var(--fg); font-weight: 700; font-size: var(--fs-sm); }
.voice__id span { color: var(--fg-3); }

/* One column rather than 2+1: three testimonials are peers, and a half-empty
   second row reads as a card that failed to load. The quote keeps its own
   measure so a full-width card is still a readable line length. */
@media (max-width: 900px) { .voices__grid { grid-template-columns: 1fr; } }

/* ========================================================= 14. FAQ ====== */
.faq__list { margin-block-start: clamp(2rem, 4vw, 3rem); border-block-start: var(--hair) solid var(--line); }
.faq__item { border-block-end: var(--hair) solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
  cursor: pointer;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  transition: color var(--t-micro) var(--e-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ""; }
.faq__item summary:hover { color: var(--accent); }

/* the sign is two strokes and the vertical one retracts as the item opens —
   drawn, never a rotated glyph (DESIGN.md §1) */
.faq__sign {
  position: relative;
  inline-size: 1rem; block-size: 1rem;
  flex: none;
}
.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 0;
  inline-size: 100%; block-size: var(--stroke);
  background: var(--accent);
  translate: 0 -50%;
}
.faq__sign::after { rotate: 90deg; transition: scale 260ms var(--e-out); }
.faq__item[open] .faq__sign::after { scale: 0 1; }

.faq__a { padding-block-end: clamp(1.1rem, 2.2vw, 1.5rem); }
.faq__a p { color: var(--fg-2); max-inline-size: var(--measure-ar); line-height: var(--lh-body); }
html[lang="en"] .faq__a p { max-inline-size: var(--measure); }