/* ============================================================
   Aceptionist — components (loads after site.css)
   ============================================================ */

/* ---------- split ---------- */
.split {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: clamp(30px, 4.4vw, 72px);
  align-items: center;
}
.split--flip {
  grid-template-columns: 1.16fr 0.84fr;
}
@media (max-width: 960px) {
  .split,
  .split--flip {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   WILTO
   ============================================================ */
.wilto {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(30px, 4.6vw, 76px);
  margin-top: 40px;
}
.beat {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 26px;
}
.beat:first-child {
  min-height: 54vh;
}
.beat:last-child {
  min-height: 46vh;
  padding-bottom: 0;
}
.beat h3 {
  color: rgba(42, 26, 46, 0.3);
  transition: color 0.4s var(--e-quick);
}
.beat.is-live h3 {
  color: var(--ink);
}
.beat p {
  margin-top: 12px;
  color: rgba(42, 26, 46, 0.3);
  max-width: 40ch;
  transition: color 0.4s var(--e-quick);
}
.beat.is-live p {
  color: var(--body);
}
.beat.is-live .open-num {
  color: var(--clay);
}
.wilto__sticky {
  position: relative;
}
.wilto__inner {
  position: sticky;
  top: 50vh;
}
.stage {
  position: relative;
  transform: translateY(-50%);
}
.panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--e-quick);
}
.panel.is-live {
  position: relative;
  inset: auto;
  opacity: 1;
  pointer-events: auto;
}
@media (max-width: 960px) {
  .wilto {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .wilto__inner {
    position: static;
  }
  .stage {
    transform: none;
  }
  .beat,
  .beat:first-child,
  .beat:last-child {
    min-height: 0;
    padding-block: 16px;
  }
  .beat h3 {
    color: var(--ink);
  }
  .beat p {
    color: var(--body);
  }
  .panel {
    position: relative;
    inset: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .panel + .panel {
    margin-top: 18px;
  }
}

/* ---------- the call console ---------- */
.console {
  background: var(--bone);
  border: 1px solid var(--rule-hair);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: 0 30px 70px -46px rgba(42, 26, 46, 0.5);
}
.console--lost {
  border-color: rgba(200, 90, 53, 0.3);
}
.console--won {
  border-color: rgba(30, 107, 94, 0.3);
}
.console__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule-hair);
  background: var(--sand);
}
.console__t {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.025em;
}
.console__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--rule-hair);
}
.console__meta > div {
  padding: 13px 18px;
  border-inline-start: 1px solid var(--rule-hair);
}
.console__meta > div:last-child {
  border-inline-end: 1px solid var(--rule-hair);
}
.console__meta .k {
  display: block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.07em;
  color: var(--faint);
}
.console__meta .v {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-top: 3px;
}
.console__body {
  padding: 20px 22px;
}
.console__foot {
  padding: 14px 22px;
  border-top: 1px solid var(--rule-hair);
  background: var(--sand);
}
@media (max-width: 520px) {
  .console__meta {
    grid-template-columns: 1fr 1fr;
  }
}

.rings {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
}
.rings i {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: var(--rule-hair);
  display: block;
}
.rings i.on {
  background: var(--clay);
}
.rings .t-micro {
  margin-inline-start: 8px;
}

.chat {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.bub {
  max-width: 86%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.5;
}
.bub--them {
  background: var(--rose);
  align-self: flex-start;
  border-end-start-radius: 5px;
}
.bub--us {
  background: var(--teal);
  color: #fff;
  align-self: flex-end;
  border-end-end-radius: 5px;
}
.bub--sys {
  align-self: center;
  background: none;
  color: var(--faint);
  font-family: var(--f-mono);
  font-size: 12.5px;
  text-align: center;
  padding: 2px;
}

/* ---------- loss receipt ---------- */
.receipt__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 13px 22px;
  border-bottom: 1px solid var(--rule-hair);
  font-size: 16px;
}
.receipt__row span {
  color: var(--soft);
}
.receipt__row b {
  font-weight: 700;
  color: var(--body);
}
.receipt__row--big {
  background: rgba(200, 90, 53, 0.09);
  border-bottom: 0;
  padding-block: 18px;
}
.receipt__row--big span {
  color: var(--clay-deep);
  font-weight: 600;
}
.receipt__row--big b {
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.6rem);
  color: var(--clay-deep);
  letter-spacing: -0.04em;
}

.booked {
  margin-top: 18px;
  background: var(--teal-wash);
  border-radius: var(--r-xs);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.booked__w {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal-deep);
}
.booked__s {
  font-size: 14.5px;
  color: var(--teal);
  margin-top: 2px;
}
.booked__b {
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--teal-deep);
}

/* ============================================================
   VERTICAL CARDS — photo is the card, not a strip on top
   ============================================================ */
.verts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 34px;
}
@media (max-width: 880px) {
  .verts {
    grid-template-columns: 1fr;
  }
}
.vert {
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  min-height: 470px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s var(--e-out);
}
.vert:hover {
  transform: translateY(-4px);
}
.vert__img {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.vert__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.vert::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.vert--teal::after {
  background: linear-gradient(
    to top,
    var(--teal-deep) 4%,
    rgba(17, 74, 64, 0.88) 44%,
    rgba(17, 74, 64, 0.18) 90%
  );
}
.vert--clay::after {
  background: linear-gradient(
    to top,
    var(--clay-deep) 4%,
    rgba(165, 67, 31, 0.88) 44%,
    rgba(165, 67, 31, 0.18) 90%
  );
}
.vert__in {
  padding: clamp(22px, 2.6vw, 34px);
  color: #fff;
}
.vert__in h3 {
  color: #fff;
}
.vert__in p {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 34ch;
}
.vert__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  padding-bottom: 3px;
}
.vert__go svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--e-out);
}
.vert:hover .vert__go svg {
  transform: translateX(-5px);
}

/* ============================================================
   PLAYER
   ============================================================ */
.player {
  background: rgba(251, 241, 232, 0.07);
  border: 1px solid var(--d-rule);
  border-radius: var(--r-sm);
  padding: clamp(20px, 2.4vw, 30px);
}
.player__top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.player__t {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.player__s {
  font-size: 14.5px;
  color: var(--d-soft);
}
.player__time {
  margin-inline-start: auto;
  font-family: var(--f-mono);
  font-size: 14.5px;
  color: var(--d-soft);
  direction: ltr;
  flex: none;
}
.ico-pause {
  display: none;
}
.player.is-playing .ico-play {
  display: none;
}
.player.is-playing .ico-pause {
  display: block;
}
.wave {
  margin-top: 22px;
  width: 100%;
  height: clamp(96px, 11vw, 140px);
  display: block;
  cursor: pointer;
  touch-action: none;
}
.wave rect {
  fill: rgba(251, 241, 232, 0.3);
  transition: fill 0.1s linear;
}
.wave rect.is-done {
  fill: var(--ochre);
}
.player__foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--d-rule);
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.player__foot span {
  font-size: 14.5px;
  color: var(--d-soft);
}
.player__foot b {
  color: var(--d-text);
  font-weight: 600;
}

/* ============================================================
   CALCULATOR
   ============================================================ */
.ctrl {
  margin-top: 26px;
}
.ctrl__l {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 11px;
}
.ctrl__l span {
  font-size: 16px;
  color: var(--body);
}
.ctrl__v {
  font-family: var(--f-mono);
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  direction: ltr;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 3px;
  background: rgba(42, 26, 46, 0.18);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clay);
  cursor: grab;
  border: 4px solid var(--rose);
  box-shadow: 0 2px 10px -2px rgba(200, 90, 53, 0.6);
  transition: transform 0.2s var(--e-quick);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.14);
}
input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--clay);
  border: 4px solid var(--rose);
}
.out {
  background: var(--plum);
  color: var(--d-text);
  border-radius: var(--r-sm);
  padding: clamp(24px, 3vw, 36px);
}
.out__r {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-block: 15px;
  border-bottom: 1px solid var(--d-rule);
}
.out__k {
  font-size: 16px;
  color: var(--d-soft);
}
.out__v {
  font-family: var(--f-mono);
  font-size: 19px;
  font-weight: 700;
  direction: ltr;
}
.out__v--bad {
  color: #f2a085;
}
.out__big {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--d-rule);
}
.out__big .out__k {
  font-size: 17px;
  color: var(--d-text);
  font-weight: 600;
}
.out__fig {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 1.8rem + 2.8vw, 3.8rem);
  letter-spacing: -0.05em;
  color: var(--ochre);
  line-height: 1.05;
  margin-top: 8px;
}
.out__note {
  margin-top: 18px;
  font-size: 14px;
  color: var(--d-soft);
  line-height: 1.55;
}

/* ---------- CTA row ---------- */
.ctarow {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) {
  .ctarow {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PRODUCT MOCK
   ============================================================ */
.showcase { width: min(1180px,100%); margin-inline: auto; border-radius: var(--r-md) var(--r-md) 0 0; overflow: hidden; box-shadow: 0 -1px 0 rgba(42,26,46,.1), 0 44px 90px -44px rgba(42,26,46,.45); }
.app { background: var(--bone); }
.app__bar { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--rule-hair); background: var(--sand); }
.app__dots { display:flex; gap:6px; }
.app__dots i { width:9px; height:9px; border-radius:50%; background: var(--rule-mid); display:block; }
.app__title { font-size:13px; color: var(--soft); margin-inline:auto; font-family: var(--f-mono); }
.app__body { display:grid; grid-template-columns:212px 1fr; min-height:330px; }
.app__side { border-inline-start:1px solid var(--rule-hair); padding:14px 10px; background: var(--sand); }
.app__nav { display:flex; flex-direction:column; gap:2px; }
.app__nav span { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius: var(--r-xs); font-size:14.5px; color: var(--body); font-weight:500; }
.app__nav span.on { background: var(--clay-wash); color: var(--clay-deep); font-weight:700; }
.app__nav i { width:6px; height:6px; background: currentColor; opacity:.55; flex:none; transform: rotate(45deg); }
.app__main { padding:18px 20px; min-width:0; }
.app__head { display:flex; align-items:baseline; gap:12px; margin-bottom:12px; }
.app__h { font-size:17px; font-weight:800; letter-spacing:-.025em; }
.app__count { font-size:13px; color: var(--soft); font-family: var(--f-mono); }
.call { display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:12px 0; border-top:1px solid var(--rule-hair); }
.call__who { display:flex; align-items:center; gap:11px; min-width:0; }
.call__av { width:32px; height:32px; border-radius: var(--r-xs); background: var(--rose); flex:none; display:grid; place-items:center; font-size:13px; font-weight:700; color: var(--clay-deep); }
.call__n { font-weight:600; font-size:15px; }
.call__m { font-size:13.5px; color: var(--soft); }
.call__t { font-size:12.5px; color: var(--faint); font-family: var(--f-mono); white-space:nowrap; }
.chip { font-size:13px; font-weight:600; padding:5px 11px; border-radius: var(--r-xs); white-space:nowrap; }
.chip--won { background: var(--teal-wash); color: var(--teal-deep); }
.chip--live { background: var(--clay-wash); color: var(--clay-deep); }
.chip--wait { background: var(--ochre-wash); color: #7A5A16; }
.chip--lost { background: rgba(200,90,53,.16); color: var(--clay-deep); }
@media (max-width:800px){ .app__body{grid-template-columns:1fr} .app__side{display:none} .call{grid-template-columns:1fr auto} .call__t{display:none} }

/* ---- Wilto: give every panel the same generous height so the sticky
     card fills the viewport band instead of floating in a void, and so
     the card does not jump size when panels swap ---- */
@media (min-width: 961px) {
  .stage { min-height: 580px; }
  .panel.is-live { min-height: 580px; display: flex; }
  .panel.is-live > .console { flex: 1; display: flex; flex-direction: column; }
  .console__body { flex: 1; }
  .receipt { flex: 1; display: flex; flex-direction: column; justify-content: center; }
}

/* extra detail inside the sparse "no answer" panel */
.meanwhile { margin-top: 18px; border-top: 1px solid var(--rule-hair); }
.meanwhile > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding-block: 10px; border-bottom: 1px solid var(--rule-hair); }
.meanwhile .k { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--faint); }
.meanwhile .v { font-size: 15.5px; font-weight: 600; color: var(--body); }