/* TattooRemovalProcess — native to Laser Atom design system */

.trp-visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.trp-section{background:var(--bg)}
.trp-header{margin-bottom:1.25rem}
.trp-lead{
  margin:0 0 2.5rem;
  max-width:62ch;
  font-size:16px;
  line-height:1.75;
  color:var(--ink2);
}

.trp{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(260px,.7fr);
  gap:2.25rem;
  align-items:stretch;
}
.trp-card{
  background:#fff;
  border:1px solid var(--border2);
  border-radius:var(--radius-2xl);
  overflow:visible;
  box-shadow:0 1px 2px rgba(13,12,10,.04);
  min-width:0;
}
.trp-visual{
  position:relative;
  aspect-ratio:1056 / 608;
  background:#EFEDE8;
  overflow:hidden;
  cursor:ew-resize;
  touch-action:pan-y;
  user-select:none;
  -webkit-user-select:none;
  border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;
}
.trp-frame{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s linear;
}
.trp-frame img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.trp-hint{
  position:absolute;
  left:50%;
  bottom:18%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--ink);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  padding:10px 16px;
  border-radius:var(--radius-pill);
  pointer-events:none;
  z-index:2;
  opacity:0;
}
.trp-hint-finger{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 6px rgba(232,97,10,.22);
}
.trp.is-hinting .trp-hint{
  opacity:1;
  animation:trpHintPop .55s ease both;
}
.trp.is-hinting .trp-hint-finger{
  animation:trpHintNudge 1.1s ease-in-out 2;
}

.trp-controls{padding:1.35rem 1.75rem 1.6rem}
.trp-slider-wrap{
  position:relative;
  height:44px;
  display:flex;
  align-items:center;
  padding:0 14px;
}
.trp-slider-wrap::before{
  content:'';
  position:absolute;
  left:14px;
  right:14px;
  height:3px;
  background:var(--border);
  border-radius:2px;
  pointer-events:none;
}
.trp-slider-wrap::after{
  content:'';
  position:absolute;
  left:14px;
  width:calc((100% - 28px) * var(--trp-progress, 0%) / 100);
  height:3px;
  background:var(--orange);
  border-radius:2px;
  pointer-events:none;
}
.trp-slider-thumb{
  position:absolute;
  top:50%;
  left:var(--trp-thumb-x, 14px);
  width:28px;
  height:28px;
  margin-top:-14px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 8px rgba(232,97,10,.14),0 8px 18px rgba(232,97,10,.28);
  pointer-events:none;
  z-index:2;
}
.trp-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:44px;
  margin:0;
  background:transparent;
  position:relative;
  z-index:3;
  cursor:pointer;
}
.trp-slider:focus{outline:none}
.trp-slider:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:6px;
  border-radius:var(--radius-md);
}
.trp-slider::-webkit-slider-runnable-track{
  height:44px;
  background:transparent;
}
.trp-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:44px;
  height:44px;
  margin-top:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:grab;
}
.trp-slider:active::-webkit-slider-thumb{cursor:grabbing}
.trp-slider::-moz-range-track{
  height:44px;
  background:transparent;
  border:0;
}
.trp-slider::-moz-range-thumb{
  width:44px;
  height:44px;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:grab;
}

.trp-ticks{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:0;
  margin-top:.35rem;
}
.trp-tick{
  appearance:none;
  background:none;
  border:0;
  padding:10px 2px 0;
  margin:0;
  min-height:44px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color:var(--ink3);
  font:inherit;
}
.trp-tick-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--border);
  transition:background .2s,transform .2s;
}
.trp-tick-n{
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  font-family:'Unbounded',sans-serif;
}
.trp-tick:hover .trp-tick-dot,
.trp-tick.is-active .trp-tick-dot{
  background:var(--orange);
  transform:scale(1.25);
}
.trp-tick.is-active{color:var(--orange)}
.trp-tick:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:8px;
}

.trp-meta{
  background:#fff;
  border:1px solid var(--border2);
  border-radius:var(--radius-2xl);
  padding:2rem 1.85rem;
  box-shadow:0 1px 2px rgba(13,12,10,.04);
  display:flex;
  flex-direction:column;
  min-width:0;
}
.trp-stage-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange);
  margin-bottom:1rem;
}
.trp-stage-count{color:var(--ink3);letter-spacing:.12em}
.trp-stage-title{
  font-family:'Unbounded',sans-serif;
  font-size:clamp(22px,2.4vw,32px);
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.1;
  color:var(--ink);
  margin:0 0 1rem;
}
.trp-stage-text{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--ink2);
  flex:1;
}
.trp-note{
  margin:1.5rem 0 0;
  padding-top:1.25rem;
  border-top:1px solid var(--border2);
  font-size:12px;
  line-height:1.6;
  color:var(--ink3);
}

@keyframes trpHintPop{
  from{opacity:0;transform:translateX(-50%) translateY(8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
@keyframes trpHintNudge{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(10px)}
}

@media(prefers-reduced-motion:reduce){
  .trp-frame{transition:none}
  .trp-tick-dot{transition:none}
  .trp.is-hinting .trp-hint,
  .trp.is-hinting .trp-hint-finger{animation:none}
}

@media(max-width:1024px){
  .trp{grid-template-columns:1fr;gap:1.5rem}
  .trp-controls{padding:1.15rem 1.25rem 1.35rem}
  .trp-meta{padding:1.5rem 1.35rem}
}

@media(max-width:768px){
  .trp-lead{font-size:15px;margin-bottom:2rem}
  .trp-tick-n{font-size:9px}
  .trp-stage-title{font-size:clamp(20px,6.4vw,28px)}
}

@media(max-width:480px){
  .trp-section .container{padding-left:1rem;padding-right:1rem}
  .trp-card,.trp-meta{border-radius:18px}
  .trp-controls{padding:1rem .9rem 1.15rem}
  .trp-ticks{margin-left:-.25rem;margin-right:-.25rem}
  .trp-tick{padding-left:0;padding-right:0}
  .trp-hint{font-size:10px;padding:8px 12px;bottom:14%}
}

@media(max-width:360px){
  .trp-tick-n{font-size:8px}
}