/* Adapton - offer.css
   Loads on the MED-SPA offer page ONLY, after core.css and page.css.

   WHAT BELONGS HERE AND WHAT DOES NOT. page.css carries the shape every offer page shares --
   the hero, the numbered track, the included rows, the price block, the delivery grid, the
   booking section. This file carries the three objects only the med-spa page has: the phone
   thread, the calculator, and the night-shift figure. Anything a second offer page would also
   want belongs in page.css, not here; that split is what stopped the generated pages shipping
   with an unstyled Replay button and a booking section with no panel behind it.

   No tokens, no font-face - every colour below is a var() defined in core.css. */

/* ══ The phone thread — the signature object of the page ═════════════════════
   The product playing itself out: a call is missed, and eight seconds later the caller has an
   answer. Orange is Adapton speaking, navy is the caller, dashed grey is what was lost. */

/* The third line of the headline is what was LOST, so it is grey -- the same grey the missed
   call and the "not included" column carry. Orange is only ever what Adapton catches. */
.hero__h1 .lost { color: var(--text-dim); font-weight: 480; }

.hero__demo { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.phone {
  width: 100%; max-width: 372px;
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 26px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.phone__bar {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--navy) 12%, transparent);
}
.phone__title { font-weight: 600; font-size: .98rem; color: var(--text-head); }
.phone__meta {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-faint);
}
/* min-height holds the box at its FINISHED size from first paint. The beats arrive over ten
   seconds and without it every one of them shoves the page down. It was 468px while the
   finished thread measured 612 -- so the box grew by 144px while a visitor was reading it.
   Measure the real height before changing this number; do not guess it.

   The thread is also set tight on purpose. It sits beside the hero copy, and every row it
   gains is a row of empty space opening up in the column next to it. */
.phone__screen { display: flex; flex-direction: column; gap: .42rem; padding: .9rem; min-height: 524px; }
.phone__screen > [data-beat] { opacity: 0; transform: translateY(9px); }
.phone__screen > [data-beat].is-on {
  opacity: 1; transform: none;
  transition: opacity .42s ease, transform .42s var(--spring);
}
.ev {
  display: flex; align-items: center; gap: .7rem;
  padding: .58rem .8rem; border-radius: 11px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
[data-theme="light"] .ev { background: var(--bg-panel); }
.ev__body { display: flex; flex-direction: column; }
.ev__label { font-size: .84rem; font-weight: 500; color: var(--text-head); }
.ev__num { font-family: var(--mono); font-size: .66rem; color: var(--text-faint); }
.ev--call .ev__ring {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--navy); flex: none;
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(24, 80, 136, .45); }
  50%      { box-shadow: 0 0 0 7px rgba(24, 80, 136, 0); }
}
.ev--missed { background: transparent; border: 1px dashed var(--text-faint); }
.ev--missed .ev__label { color: var(--text-dim); }
.timer { display: flex; align-items: baseline; gap: .5rem; padding: .1rem .3rem .25rem; }
.timer__count {
  font-family: var(--mono); font-size: 1.32rem; font-weight: 500;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.timer__label {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint);
}
.msg { max-width: 86%; padding: .52rem .82rem; border-radius: 14px; font-size: .855rem; line-height: 1.4; }
.msg--out {                               /* Adapton speaks in orange */
  align-self: flex-start;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-bottom-left-radius: 5px;
  color: #FFD9AC;
}
[data-theme="light"] .msg--out { color: #7A3F03; }
.msg--in {                                /* the caller is navy */
  align-self: flex-end;
  background: var(--navy);
  border-bottom-right-radius: 5px;
  color: #EAF3FC;
}
.booked {                                 /* the payoff: solid orange */
  display: flex; align-items: center; gap: .6rem;
  margin-top: auto;
  padding: .66rem .85rem; border-radius: 11px;
  background: var(--orange); color: var(--on-orange);
  font-size: .83rem;
}
.booked strong { font-weight: 640; }
.booked__tick {
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(22, 16, 10, .18); position: relative; flex: none;
}
.booked__tick::after {
  content: ""; position: absolute; left: 5.5px; top: 3px;
  width: 4px; height: 8px;
  border: solid var(--on-orange); border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg);
}

/* ══ The calculator ══════════════════════════════════════════════════════════
   The one place on the site that computes rather than claims. Every input is the buyer's own
   number, and the two constants behind it are pessimistic on purpose -- see js/offer.js. */

.calc {
  display: grid; grid-template-columns: 1fr .84fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
  margin-top: 2.8rem;
}
.calc__inputs { display: flex; flex-direction: column; gap: 2rem; }
.field { display: block; }
.field__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.field__name { font-size: .95rem; font-weight: 500; color: var(--text-head); }
.field__val {
  font-family: var(--mono); font-size: 1.1rem; font-weight: 500;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2px;
  background: var(--trace); border-radius: 2px; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange);
  border: 4px solid var(--bg);
  box-shadow: 0 0 0 1px var(--orange);
  cursor: grab; transition: transform .15s var(--spring);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--orange); border: 4px solid var(--bg);
  box-shadow: 0 0 0 1px var(--orange); cursor: grab;
}
input[type="range"]:focus-visible { outline: 2px solid var(--orange); outline-offset: 6px; }
.calc__result {
  padding: 2.1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(140% 120% at 100% 0%, var(--card-glow), transparent 55%),
    var(--bg-card);
}
.calc__kicker {
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim);
}
.calc__figure {
  font-size: clamp(2.3rem, 1.7rem + 2.8vw, 3.4rem);
  font-weight: 640; line-height: 1; letter-spacing: -.03em;
  color: var(--text); margin: .55rem 0 .2rem;
  font-variant-numeric: tabular-nums;
}
.calc__unit { font-size: .95rem; color: var(--text-dim); }
.calc__rule { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }
.calc__detail { font-size: .85rem; color: var(--text-dim); line-height: 1.55; }
.calc__detail strong { color: var(--text-head); font-weight: 560; }
.calc__against { margin-top: .9rem; font-size: .98rem; color: var(--text-head); }
.calc__against b { color: var(--accent); font-weight: 600; }

/* ══ The night-shift figure ══════════════════════════════════════════════════ */

.nightshift {
  display: grid; grid-template-columns: 1fr .92fr;
  gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
  margin-top: 3.2rem; padding-top: 2.8rem;
  border-top: 1px solid var(--line);
}
.section--panel:has(.nightshift) { padding-bottom: calc(var(--gap) * .55); }
.nightshift__h {
  font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);
  font-weight: 640; line-height: 1.12; letter-spacing: -.02em;
  color: var(--text-head);
}
.nightshift__copy p { margin-top: 1rem; color: var(--text-dim); max-width: 44ch; }
.nightshift__copy b { color: var(--text-head); }
.nightshift__fig { position: relative; margin: 0; }
.nightshift__fig img {
  width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  will-change: transform;
}
.nightshift__fig figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: #E8ECF2;
  background: rgba(12, 15, 23, .82);
  border: 1px solid rgba(200, 205, 212, .18);
  border-radius: 7px; padding: .45rem .7rem;
  backdrop-filter: blur(6px);
}
.nightshift__fig figcaption em { font-style: normal; color: var(--orange); }

@media (max-width: 900px) {
  .phone { max-width: 340px; }
  .phone__screen { min-height: 0; }
  .booked { margin-top: .4rem; }
  .calc { grid-template-columns: 1fr; }
  .nightshift { grid-template-columns: 1fr; }
  .nightshift__fig { order: -1; }
}

@media (max-width: 560px) {
  .calc__result { padding: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .phone__screen > [data-beat] { opacity: 1; transform: none; }
}