/* ============================================================================
   ZERO LINES — Skin Analyser
   Palette v3. Depends on the tokens in zl.css and never redefines them.

   Rules observed here:
     · --signal is a MARK. It appears as rules, ticks, the scan sweep and the
       progress spine. It is never used to set type — the score numeral, the
       small caps and every label resolve to --house.
     · --champagne is a hairline only (2.14:1 as text on bone).
     · Nothing is left at opacity:0. Panels are switched with [hidden], which is
       display:none, so hidden steps cannot be stranded invisible-but-present.
   ========================================================================= */

/* A panel is a whole screen of the consultation; several carry display:grid,
   which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

.zl-a { position: relative; }

/* First section of any panel clears the fixed header. */
.zl-a-section {
  padding-block: calc(var(--header-h) + clamp(2.25rem, 6vh, 4rem)) var(--section-y);
}
.zl-a-stage { max-width: 780px; margin-inline: auto; }
.zl-a-meta {
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mist-2); line-height: 1.7;
}
.zl-a-fine { font-size: .8125rem; line-height: 1.75; color: var(--mist-2); max-width: 62ch; }
.zl-brand-field .zl-a-fine { color: rgba(255,255,255,.8); }

/* ---------- 1. OPENING --------------------------------------------------- */

.zl-a-hero {
  padding-top: calc(var(--header-h) + clamp(2rem, 6vh, 4.5rem));
  padding-bottom: clamp(3rem, 8vh, 5.5rem);
  position: relative;
}
.zl-a-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, var(--champagne), transparent 62%);
}
.zl-a-open__item { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.zl-a-open__item h3 { margin: .75rem 0 .625rem; }
.zl-a-open__item p { font-size: .9375rem; line-height: 1.75; color: var(--ink-3); max-width: 34ch; }
/* Cormorant sets old-style figures by default, which renders "10" as something
   very close to "IO" and "1" as a small-cap I. Lining figures for the counts. */
.zl-a-open__item .zl-num { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.zl-a-open__unit { font-family: var(--font-display); font-size: 1.25rem; color: var(--mist-2); margin-left: .375rem; }

.zl-a-pledge { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.zl-a-pledge li {
  position: relative; padding-left: 1.875rem;
  font-size: .9375rem; line-height: 1.75;
}
.zl-a-pledge li::before {
  content: ""; position: absolute; left: 0; top: .82em;
  width: 14px; height: 1px; background: var(--signal);
}

/* ---------- 2. THE CONSULTATION ------------------------------------------ */

.zl-a-consult {
  display: grid; align-items: start;
  grid-template-columns: minmax(178px, 210px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 940px) { .zl-a-consult { grid-template-columns: 1fr; gap: 2.25rem; } }

.zl-a-rail { position: sticky; top: calc(var(--header-h) + 2rem); }
.zl-a-rail__label {
  display: block; font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: .28em; text-transform: uppercase; color: var(--mist-2);
  padding-bottom: .875rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.125rem;
}
.zl-a-rail__list {
  position: relative; list-style: none; margin: 0; padding: 0 0 0 1.25rem;
}
.zl-a-rail__list::before,
.zl-a-rail__list::after {
  content: ""; position: absolute; left: 0; top: 0; width: 1px;
}
.zl-a-rail__list::before { bottom: 0; background: var(--rule); }
.zl-a-rail__list::after  { height: var(--rail-p, 0%); background: var(--signal); transition: height 760ms var(--ease); }

.zl-a-rail__item {
  position: relative; display: flex; align-items: baseline; gap: .75rem;
  width: 100%; text-align: left; padding: .5rem 0;
  font-size: .8125rem; line-height: 1.5; color: var(--mist-2);
  transition: color 420ms var(--ease);
}
.zl-a-rail__item::before {
  content: ""; position: absolute; left: -1.25rem; top: .92em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--stone);
  transform: translateX(-2px);
  transition: background-color 420ms var(--ease), transform 420ms var(--ease);
}
.zl-a-rail__item[data-state="done"] { color: var(--ink-3); }
.zl-a-rail__item[data-state="done"]::before { background: var(--signal); }
.zl-a-rail__item[data-state="current"] { color: var(--ink); }
.zl-a-rail__item[data-state="current"]::before {
  background: var(--house); transform: translateX(-2px) scale(1.45);
}
.zl-a-rail__item:not(:disabled):hover { color: var(--ink); }
.zl-a-rail__item:disabled { cursor: default; }
.zl-a-rail__n { font-size: .625rem; letter-spacing: .2em; flex: none; }

@media (max-width: 940px) {
  .zl-a-rail { position: static; }
  .zl-a-rail__label { display: none; }
  .zl-a-rail__list { display: flex; gap: .3125rem; padding: 0; }
  .zl-a-rail__list::before, .zl-a-rail__list::after { display: none; }
  .zl-a-rail__list li { flex: 1; }
  .zl-a-rail__item {
    display: block; height: 2px; padding: 0; background: var(--rule);
    transition: background-color 520ms var(--ease);
  }
  .zl-a-rail__item::before { display: none; }
  .zl-a-rail__n, .zl-a-rail__t { display: none; }
  .zl-a-rail__item[data-state="done"] { background: var(--signal); }
  .zl-a-rail__item[data-state="current"] { background: var(--house); }
}

/* progress readout */
.zl-a-meter {
  position: relative; display: flex; align-items: baseline;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: .9375rem; border-bottom: 1px solid var(--rule);
}
.zl-a-meter::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px;
  width: var(--p, 0%); background: var(--signal); transition: width 760ms var(--ease);
}
.zl-a-meter__count,
.zl-a-meter__name {
  font-size: var(--t-eyebrow); font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
}
.zl-a-meter__count { color: var(--house); }
.zl-a-meter__name  { color: var(--mist-2); }

/* the question itself */
.zl-a-q { animation: zl-a-in 720ms var(--ease) both; }
@keyframes zl-a-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.zl-a-q__title { margin: clamp(1.75rem, 4vh, 2.5rem) 0 0; max-width: 20ch; }
.zl-a-q__hint { margin-top: .875rem; font-size: .8125rem; color: var(--mist-2); }

.zl-a-options { margin-top: clamp(1.75rem, 4vh, 2.5rem); display: grid; }
.zl-a-option {
  display: flex; align-items: flex-start; gap: 1rem;
  width: 100%; text-align: left;
  padding: 1.0625rem .875rem 1.0625rem .25rem;
  border: 0; border-top: 1px solid var(--rule);
  background: transparent; color: var(--ink-3);
  font-size: 1rem; line-height: 1.5;
  transition: color 360ms var(--ease), background-color 360ms var(--ease),
              padding-left 480ms var(--ease), box-shadow 360ms var(--ease);
}
.zl-a-option:last-child { border-bottom: 1px solid var(--rule); }
.zl-a-option:hover { color: var(--ink); padding-left: .75rem; }
.zl-a-option__mark {
  flex: none; width: 15px; height: 15px; margin-top: .34em;
  border: 1px solid var(--stone); border-radius: 50%;
  transition: border-color 360ms var(--ease), background-color 360ms var(--ease),
              box-shadow 360ms var(--ease);
}
.zl-a-options[data-multi="true"] .zl-a-option__mark { border-radius: 0; }
.zl-a-option[data-selected="true"] {
  color: var(--ink); background: var(--sage-wash);
  padding-left: .75rem; box-shadow: inset 2px 0 0 var(--signal);
}
.zl-a-option[data-selected="true"] .zl-a-option__mark {
  border-color: var(--house); background: var(--house);
  box-shadow: inset 0 0 0 3px var(--bone);
}

.zl-a-nav { display: flex; gap: 1rem; align-items: center; margin-top: clamp(2rem, 5vh, 3rem); flex-wrap: wrap; }
.zl-a-nav .zl-btn:disabled { opacity: .3; cursor: not-allowed; }
.zl-a-nav .zl-btn:disabled::before { transform: scaleY(0); }
.zl-a-nav__hint { font-size: .75rem; color: var(--mist-2); }

/* ---------- 3. THE PHOTOGRAPH -------------------------------------------- */

/* Two by two rather than four across: inside a 780px reading column, four
   columns squeezed every heading onto two lines. */
.zl-a-guide {
  display: grid; gap: 1.75rem 2.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: clamp(2rem, 5vh, 3rem) 0;
}
@media (max-width: 520px) { .zl-a-guide { grid-template-columns: 1fr; } }
.zl-a-guide__item { border-top: 1px solid var(--rule); padding-top: 1.125rem; }
.zl-a-guide__icon { color: var(--house); margin-bottom: .875rem; }
.zl-a-guide__t { font-family: var(--font-display); font-weight: 400; font-size: 1.1875rem; line-height: 1.25; }
.zl-a-guide__d { margin-top: .5rem; font-size: .875rem; line-height: 1.7; color: var(--ink-3); }

.zl-a-avoid {
  padding: 1.125rem 0 1.25rem; margin-bottom: clamp(2rem, 5vh, 2.75rem);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font-size: .875rem; line-height: 1.7; color: var(--ink-3);
}

.zl-a-drop {
  display: grid; place-items: center; gap: .75rem; text-align: center;
  padding: clamp(2.5rem, 8vw, 4.5rem) 1.5rem;
  border: 1px dashed var(--stone); background: var(--bone-2);
  cursor: pointer;
  transition: border-color 320ms var(--ease), background-color 320ms var(--ease);
}
.zl-a-drop:hover, .zl-a-drop[data-drag="true"] { border-color: var(--house); background: var(--sage-wash); }
.zl-a-drop__icon { color: var(--house); }
.zl-a-drop__label { font-size: 1rem; color: var(--ink); }
.zl-a-drop__hint { font-size: .8125rem; color: var(--mist-2); }

.zl-a-preview {
  display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start;
}
@media (max-width: 620px) { .zl-a-preview { grid-template-columns: 1fr; } }
.zl-a-frame { position: relative; background: var(--bone-2); }
.zl-a-frame img { width: 100%; display: block; }
.zl-a-frame::after {
  content: ""; position: absolute; inset: .5rem; pointer-events: none;
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 0 0 1px rgba(11,13,13,.06);
}
.zl-a-preview__t { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.3; }
.zl-a-preview__d { margin: .75rem 0 1.25rem; font-size: .875rem; line-height: 1.7; color: var(--ink-3); max-width: 40ch; }

/* ---------- 4. THE WAIT --------------------------------------------------- */

.zl-a-work {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 760px) { .zl-a-work { grid-template-columns: 1fr; } }

.zl-a-scan { position: relative; overflow: hidden; background: var(--bone-2); }
.zl-a-scan img { width: 100%; display: block; }
.zl-a-scan__sweep {
  position: absolute; left: 0; right: 0; top: 0; height: 34%;
  background: linear-gradient(to bottom,
    rgba(79,179,172,0) 0%, rgba(79,179,172,.16) 42%,
    rgba(79,179,172,.85) 50%, rgba(79,179,172,.16) 58%, rgba(79,179,172,0) 100%);
  animation: zl-a-sweep 3.6s var(--ease-io) infinite;
}
.zl-a-scan__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.28) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 25% 25%;
  mix-blend-mode: overlay;
}
.zl-a-scan__frame { position: absolute; inset: .625rem; border: 1px solid rgba(255,255,255,.55); }
@keyframes zl-a-sweep { 0% { transform: translateY(-110%); } 100% { transform: translateY(320%); } }
@media (prefers-reduced-motion: reduce) { .zl-a-scan__sweep { animation: none; top: 33%; } }

.zl-a-markers { display: grid; gap: .8125rem; list-style: none; margin: clamp(2.5rem, 6vh, 3.25rem) 0 0; padding: 0; }
.zl-a-marker {
  position: relative; display: flex; align-items: baseline; gap: .875rem;
  padding-left: 1.75rem; font-size: .9375rem; color: var(--mist-2);
  transition: color 620ms var(--ease);
}
.zl-a-marker::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--stone);
  transition: background-color 620ms var(--ease), transform 620ms var(--ease);
}
.zl-a-marker[data-state="done"] { color: var(--ink-3); }
.zl-a-marker[data-state="done"]::before { background: var(--signal); }
.zl-a-marker[data-state="active"] { color: var(--ink); }
.zl-a-marker[data-state="active"]::before { background: var(--house); transform: scale(1.4); }
.zl-a-marker__n { font-size: .625rem; letter-spacing: .2em; color: var(--mist-2); }

.zl-a-working__status {
  margin-top: clamp(2rem, 5vh, 2.5rem); padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem; color: var(--ink-3);
}

/* ---------- 5. THE ASSESSMENT -------------------------------------------- */

.zl-a-report { max-width: 1040px; }
.zl-a-rhead { padding-bottom: clamp(2rem, 5vh, 3rem); }

/* The reader's own photograph, set beside their assessment. Portrait crop, a
   champagne hairline above it so it reads as part of the report rather than a
   thumbnail bolted on, and it simply is not there when no photo was given. */
.zl-a-rhead__row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.zl-a-rhead__text { min-width: 0; }
.zl-a-rshot { flex: 0 0 auto; width: clamp(120px, 15vw, 184px); margin: 0; }
.zl-a-rshot img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  border-top: 2px solid var(--champagne);
  background: var(--bone-2);
}
.zl-a-rshot figcaption {
  margin-top: .75rem;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1.5; color: var(--mist);
}
@media (max-width: 620px) {
  .zl-a-rhead__row { flex-direction: column-reverse; align-items: stretch; }
  .zl-a-rshot { width: 132px; }
}
.zl-a-rmeta {
  margin-top: 1.25rem; font-size: .6875rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--mist-2);
}
.zl-a-report__body > * { animation: zl-a-in 800ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }

.zl-a-score {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.75rem, 4vh, 2.5rem) 0;
  border-top: 1px solid var(--champagne); border-bottom: 1px solid var(--rule);
}
@media (max-width: 620px) { .zl-a-score { grid-template-columns: 1fr; gap: 1.25rem; } }
.zl-a-score__fig { display: flex; align-items: baseline; gap: .375rem; }
.zl-a-score__num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(4rem, 10vw, 7rem); line-height: .88; color: var(--house);
}
.zl-a-score__of { font-family: var(--font-display); font-size: 1.5rem; color: var(--mist-2); }
.zl-a-score__label { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.zl-a-scale { position: relative; height: 2px; background: var(--rule); margin: 1.5rem 0 1rem; }
.zl-a-scale__fill { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--signal); transition: width 1500ms var(--ease); }
.zl-a-scale__dot {
  position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--house); transform: translateX(-50%); transition: left 1500ms var(--ease);
}
.zl-a-score__note { font-size: .8125rem; line-height: 1.7; color: var(--mist-2); max-width: 52ch; }

.zl-a-sec { margin-top: clamp(2.75rem, 6vh, 4rem); }
.zl-a-sec__head { display: flex; align-items: baseline; gap: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); margin-bottom: clamp(1.5rem, 4vh, 2.25rem); }
.zl-a-sec__n { font-size: .625rem; letter-spacing: .24em; color: var(--house); }
.zl-a-sec__t { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.zl-a-sec p { color: var(--ink-3); }

.zl-a-lede { font-size: var(--t-lead); line-height: 1.75; color: var(--ink-2); max-width: var(--measure); font-weight: 300; }

.zl-a-mks { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 3rem; }
@media (max-width: 760px) { .zl-a-mks { grid-template-columns: 1fr; } }
.zl-a-mk { border-top: 1px solid var(--rule); padding-top: 1.125rem; }
.zl-a-mk__t {
  display: flex; align-items: baseline; gap: .75rem;
  font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: .22em;
  text-transform: uppercase; color: var(--house); margin-bottom: .625rem;
}
.zl-a-mk__n { color: var(--mist-2); }
.zl-a-mk__d { font-size: .9375rem; line-height: 1.75; color: var(--ink-3); }

.zl-a-cause { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0 .5rem; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.zl-a-cause__n { font-size: .625rem; letter-spacing: .2em; color: var(--house); padding-top: .45em; }
.zl-a-cause__t { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.3; }
.zl-a-cause__d { grid-column: 2; margin-top: .5rem; font-size: .9375rem; line-height: 1.75; color: var(--ink-3); }

.zl-a-do { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.zl-a-do li { position: relative; padding-left: 1.875rem; font-size: .9375rem; line-height: 1.75; color: var(--ink-3); }
.zl-a-do li::before { content: ""; position: absolute; left: 0; top: .82em; width: 14px; height: 1px; background: var(--signal); }

.zl-a-rx { display: grid; gap: 1.5rem; }
.zl-a-rx__item {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 1rem; padding: 1.5rem 0; border-top: 1px solid var(--rule);
}
@media (max-width: 560px) { .zl-a-rx__item { grid-template-columns: 1fr; gap: .75rem; } }
.zl-a-rx__step { font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--house); padding-top: .5em; }
.zl-a-rx__name { font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; line-height: 1.25; }
.zl-a-rx__role { display: block; margin-top: .3125rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mist-2); }
.zl-a-rx__why { margin-top: .875rem; font-size: .9375rem; line-height: 1.75; color: var(--ink-3); }
.zl-a-rx__links { margin-top: 1.125rem; display: flex; flex-wrap: wrap; gap: .875rem 2rem; }
.zl-a-rx__links .zl-link { color: var(--house); font-size: .6875rem; }

.zl-a-note { margin-top: clamp(2.5rem, 6vh, 3.5rem); padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--sage-wash); }
.zl-a-note p { color: var(--ink-2); font-size: .9375rem; line-height: 1.75; }
.zl-a-note p + p { margin-top: 1rem; }

.zl-a-close { margin-top: clamp(2.5rem, 6vh, 3.5rem); padding-top: clamp(2rem, 5vh, 2.5rem); border-top: 1px solid var(--rule); }

/* The ask, at the moment the assessment is on screen. It sits on the tint so it
   reads as the one thing being offered rather than a fourth link in a row, and
   the champagne hairline above it is the only place that metal appears on this
   page — it marks this as the close. */
.zl-a-keep {
  background: var(--sage-wash);
  border-top: 2px solid var(--champagne);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vh, 2.75rem);
}
.zl-a-keep__form { max-width: 46ch; }
.zl-a-keep__t {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15;
  letter-spacing: -0.015em; color: var(--ink); margin: 0;
}
.zl-a-keep__d { margin-top: .75rem; font-size: .9375rem; line-height: 1.7; color: var(--ink-3); }
.zl-a-keep__row { display: flex; gap: .75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.zl-a-keep__row .zl-input { flex: 1 1 16rem; min-width: 0; }
.zl-a-keep__row .zl-btn { flex: 0 0 auto; }
.zl-a-keep__note { margin-top: 1rem; }
@media (max-width: 520px) {
  .zl-a-keep__row .zl-btn { width: 100%; }
}

.zl-a-close__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.zl-a-close__row { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-top: 2.25rem; }
.zl-a-close__row .zl-link { color: var(--ink-3); }

/* ---------- 6. WHEN IT FAILS --------------------------------------------- */
/* No fabricated report, ever. An earlier build served a hard-coded analysis
   behind a "Demo Mode" banner, which means people were handed a made-up
   assessment of their own face. This panel is what honesty looks like. */

.zl-a-err__detail {
  margin-top: 1.5rem; padding: 1rem 1.25rem; background: var(--bone-2);
  font-size: .8125rem; line-height: 1.7; color: var(--ink-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-word;
}

/* ---------- 7. PRINT ------------------------------------------------------ */

@media print {
  .zl-header, .zl-menu, .zl-footer, .zl-wa, .zl-cookie, .zl-progress,
  .zl-skip, .zl-a-close, .zl-a-scan { display: none !important; }
  .zl-a-section { padding-block: 0; }
  body { background: #fff; }
  .zl-a-report__body > * { animation: none; }
  .zl-a-sec { break-inside: avoid; }
  /* Keep the photograph in the printed and saved-as-PDF copy — it is the
     reader's own record, and the assessment reads better against the face it
     was written about. Browsers drop background images when printing, but this
     is an <img>, so it survives. */
  .zl-a-rhead__row { break-inside: avoid; }
  .zl-a-rshot { width: 140px; }
  .zl-a-rshot img { border-top: 2px solid #C2A878; }
}