/* ══════════════════════════════════════════════════════════════════════════
   MINEERS 2.0 — DIGITAL SMILE DESIGN
   smile-design.html only. Loaded after treatment.css, whose tokens, chapter
   bar, hero, "in brief", chapters, shared blocks, final moment and booking
   drawer this page uses as they are. Only what this page adds lives here:
     · the six steps (one screen that stays, six steps that scroll past it)
     · the two ruled columns, the treatment links, the quote
     · the rating strip (the same block as the other pages)
   Everything is scoped to .tx; no other page loads this file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── In brief / chapter heads ────────────────────────────────────────────── */
.tx .txi--who .txi__statement { grid-column: 4 / 12; text-wrap: balance; }
.tx .txi--who .txi__answer { grid-column: 4 / 10; }
.tx [data-tone="light"] .txc__sub { color: var(--tx-champ); }
.tx .txc__head .tx-h2 .ln > span { text-wrap: balance; }
.tx .txc__sub { max-width: 720px; }

/* ══ THE SIX STEPS ══════════════════════════════════════════════════════════
   The screen is sticky and the steps scroll past it; design.js marks the step
   crossing the probe line and crossfades its film in. Five steps are films;
   step 06 is a photograph. Without JavaScript nothing is sticky and the six
   frames stand in a column beside their steps.                              */
.tx .txsix { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.tx .txsix__stage { grid-column: 1 / 7; }
.tx .txsix__steps { grid-column: 8 / 13; }
.tx .txsix__sticky { position: sticky; top: calc(var(--nav-h, 92px) + var(--tx-bar) + 40px); }

.tx .txsix__screen { margin: 0; }
.tx .txsix__win { position: relative; aspect-ratio: 16 / 9; background: #0f0c0a; }
.tx .txsix__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.tx .txsix__meta {
  display: flex; align-items: baseline; gap: 16px; margin-top: 16px;
  font: 400 10.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-od-soft);
}
.tx .txsix__count { flex: none; }
.tx .txsix__count b { font-weight: 500; color: var(--tx-champ-lt); }
.tx .txsix__what { color: var(--tx-od); }

.tx .txsix__dots { display: flex; gap: 6px; margin-top: 26px; }
.tx .txsix__dots li {
  flex: 1; padding-top: 10px; border-top: 1px solid var(--tx-od-line);
  font: 500 9px/1 var(--mono); letter-spacing: .18em; color: transparent;
  transition: border-color .7s var(--tx-ease), color .7s var(--tx-ease);
}
.tx .txsix__dots li.is-done { border-top-color: rgba(217, 193, 154, .5); }
.tx .txsix__dots li.is-on { border-top-color: var(--tx-champ-lt); color: var(--tx-champ-lt); }

.tx .txsix__step { position: relative; padding: clamp(58px, 9vh, 110px) 0; }
.tx .txsix__step:first-child { padding-top: 0; }
.tx .txsix__step:last-child { padding-bottom: 0; }
.tx .txsix__no {
  display: block; font: 400 clamp(64px, 6vw, 104px)/.8 var(--serif); letter-spacing: -.045em;
  color: transparent; -webkit-text-stroke: 1px rgba(217, 193, 154, .38);
  transition: -webkit-text-stroke-color .8s var(--tx-ease), color .8s var(--tx-ease);
}
.tx .txsix__name { margin-top: 22px; font: 500 clamp(30px, 2.9vw, 48px)/1 var(--serif); letter-spacing: -.025em; }
.tx .txsix__text { margin-top: 18px; max-width: 420px; font-size: 15.5px; line-height: 1.75; color: var(--tx-od-soft); }
.tx .txsix__note {
  margin-top: 20px; max-width: 400px; font: italic 400 clamp(17px, 1.3vw, 21px)/1.45 var(--serif);
  color: var(--tx-od-soft); opacity: .8;
}
.js .tx .txsix__step { opacity: .34; transition: opacity 1s var(--tx-ease); }
.js .tx .txsix__step.is-on { opacity: 1; }
.js .tx .txsix__step.is-on .txsix__no { -webkit-text-stroke-color: var(--tx-champ-lt); }
.js .tx .txsix__step.is-on .txsix__note { color: var(--tx-champ-lt); opacity: 1; }
.js .tx .txsix__vid { opacity: 0; transition: opacity .9s var(--tx-ease); }
.js .tx .txsix__vid.is-on { opacity: 1; }

/* No JavaScript: nothing is sticky and the six films stand in a column. */
html:not(.js) .tx .txsix__sticky { position: static; }
html:not(.js) .tx .txsix__win { aspect-ratio: auto; display: grid; gap: 4px; background: none; }
html:not(.js) .tx .txsix__win::before { display: none; }
html:not(.js) .tx .txsix__vid { position: static; aspect-ratio: 16 / 9; transform: none; }
html:not(.js) .tx .txsix__dots, html:not(.js) .tx .txsix__meta { display: none; }

/* ── The two ruled columns ───────────────────────────────────────────────── */
.tx .txdes__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 110px); }

/* ── Where a design can go ───────────────────────────────────────────────── */
.tx .txdes__more { display: block; gap: 0; font-size: inherit; text-transform: none; letter-spacing: normal; }
.tx .txdes__more ul {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px;
  margin-top: 24px; border-top: 1px solid var(--tx-line);
}
.tx .txdes__more li { border-bottom: 1px solid var(--tx-line); }
.tx .txdes__more a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 0;
  font: 500 clamp(19px, 1.5vw, 25px)/1.2 var(--serif); letter-spacing: -.015em; color: var(--tx-ink);
  transition: color .5s var(--tx-ease);
}
.tx .txdes__more a::after { content: "→"; font: 400 15px/1 Inter, sans-serif; transition: transform .6s var(--tx-ease); }
.tx .txdes__more a:hover { opacity: 1; color: var(--tx-champ); }
.tx .txdes__more a:hover::after { transform: translateX(6px); }

/* ── The quote ───────────────────────────────────────────────────────────── */
.tx .txdes__quote { max-width: 1100px; }
.tx .txdes__quote p { font: 400 clamp(34px, 4.6vw, 82px)/1.02 var(--serif); letter-spacing: -.035em; text-indent: -.4em; }
.tx .txdes__quote em { font-style: italic; color: var(--tx-champ); }
.tx .txdes__quote cite {
  display: block; margin-top: 28px; font: 500 10.5px/1 var(--mono); letter-spacing: .2em;
  text-transform: uppercase; font-style: normal; color: var(--tx-soft);
}

/* ── The rating strip ────────────────────────────────────────────────────── */
.tx .txrate { background: var(--tx-ivory); padding: clamp(80px, 9vw, 150px) var(--tx-g); }
.tx .txrate .tx-label { margin-bottom: 26px; }
.tx .txrate__in {
  position: relative; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center;
  gap: clamp(24px, 4vw, 70px); padding: clamp(30px, 4vw, 54px) 0; border-top: 1px solid var(--tx-line);
}
.tx .txrate__in::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tx-champ);
  transform: scaleX(0); transform-origin: left; transition: transform .9s var(--tx-ease);
}
.tx .txrate__in:hover::after { transform: scaleX(1); }
.tx .txrate__score { font: 500 clamp(72px, 8vw, 132px)/.8 var(--serif); letter-spacing: -.045em; transition: color .6s var(--tx-ease); }
.tx .txrate__in:hover .txrate__score { color: var(--tx-champ); }
.tx .txrate__stars { display: grid; gap: 12px; }
.tx .txrate__row { font-size: 17px; line-height: 1; letter-spacing: .3em; color: var(--tx-champ); }
.tx .txrate__src { font: 500 9.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--tx-soft); }
.tx .txrate__text { font: 400 clamp(19px, 1.6vw, 26px)/1.3 var(--serif); color: var(--tx-soft); }

/* ── How each film sits in its window ────────────────────────────────────── */
.tx .txvid--v1 { object-position: 50% 34%; }                                  /* the photographer */
.tx .txvid--v2 { object-position: 50% 42%; transform: scale(1.06); }          /* the face scan */
.tx .txvid--v3 { transform: scale(1.35); transform-origin: 40% 44%; }         /* out of the scanner's toolbars */
.tx .txvid--v6 { object-position: 50% 30%; }                                  /* the microscope */
.tx .txvid--v4 { object-position: 50% 46%; }                                  /* the design, drawn */
.tx .txvid--v5 { object-position: 50% 52%; transform: scale(1.04); }          /* the mock-up, worn */

/* ══ Tablet ════════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  /* The stage is the sticky one here: it is the child that spans the strip,
     so it can travel while the steps scroll under it. */
  .tx .txsix { display: block; }
  .tx .txsix__sticky { position: static; }
  .tx .txsix__stage {
    position: sticky; top: calc(var(--nav-h, 92px) + var(--tx-bar)); z-index: 3;
    margin: 0 calc(var(--tx-g) * -1); padding: 14px var(--tx-g) 12px;
    background: var(--tx-esp); box-shadow: 0 26px 34px -18px rgba(12, 9, 7, .92);
  }
  .tx .txsix__steps { margin-top: clamp(40px, 7vw, 70px); }
  .tx .txsix__step { padding: clamp(42px, 8vh, 80px) 0; }
  .tx .txsix__dots { margin-top: 18px; }
  .tx .txdes__more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tx .txrate__in { grid-template-columns: auto 1fr; row-gap: 22px; }
  .tx .txrate__text { grid-column: 1 / 3; }
}

/* ══ Phone ════════════════════════════════════════════════════════════════ */
@media (max-width: 800px) {
  .tx .txdes__cols { grid-template-columns: 1fr; gap: 56px; }
  .tx .txdes__more ul { grid-template-columns: 1fr; }
  /* the chapter bar docks at the bottom here, so only the header is above */
  .tx .txsix__stage { top: var(--nav-h, 76px); padding-top: 16px; }
  .tx .txsix__win { aspect-ratio: 3 / 2; }
  .tx .txsix__name { margin-top: 16px; }
  .tx .txsix__no { font-size: clamp(56px, 16vw, 76px); }
  .tx .txrate__in { grid-template-columns: 1fr; gap: 20px; }
  .tx .txrate__text { grid-column: auto; }
}

/* ══ Reduced motion ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .js .tx .txsix__step { opacity: 1; }
  .tx .txsix__vid, .tx .txsix__step, .tx .txsix__no, .tx .txsix__dots li { transition: none; }
}