/* TNOW-005 Flow v1.0 Draft */
.tnflow{
  position:relative;
  overflow:hidden;
  padding:112px 0;
  color:#f5efe5;
  background:
    radial-gradient(circle at 18% 8%,rgba(207,164,91,.13),transparent 28%),
    radial-gradient(circle at 82% 82%,rgba(173,126,56,.09),transparent 30%),
    linear-gradient(150deg,#0b0c0f 0%,#14171c 58%,#1b1712 100%);
}
.tnflow::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.7),transparent 94%);
}
.tnflow__inner{position:relative;z-index:1}
.tnflow__header{
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.tnflow__eyebrow,
.tnflow__cta-kicker{
  margin:0 0 16px;
  color:#c7a260;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.tnflow__title{
  max-width:1100px;
  margin:0;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(3rem,5vw,5.7rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.04em;
}
.tnflow__title span{display:block}
.tnflow__title span:last-child{
  margin-top:.05em;
  color:transparent;
  background:linear-gradient(110deg,#efdbb3,#b98c45,#ecd09a);
  -webkit-background-clip:text;
  background-clip:text;
}
.tnflow__lead-row{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(430px,580px);
  align-items:start;
  gap:32px;
  margin-top:32px;
}
.tnflow__lead-line{
  height:1px;
  margin-top:13px;
  background:linear-gradient(90deg,rgba(220,187,125,.44),rgba(255,255,255,.06),transparent);
}
.tnflow__lead{
  margin:0;
  color:#bdb6ab;
  font-size:.98rem;
  line-height:1.95;
}

.tnflow__timeline{
  position:relative;
  margin-top:48px;
  padding:12px 0 8px;
}
.tnflow__progress{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:2px;
  transform:translateX(-50%);
}
.tnflow__progress-base,
.tnflow__progress-active{
  position:absolute;
  inset:0;
  display:block;
  border-radius:999px;
}
.tnflow__progress-base{
  background:rgba(255,255,255,.08);
}
.tnflow__progress-active{
  transform:scaleY(0);
  transform-origin:top;
  background:linear-gradient(180deg,#e0bd79,#9f7332);
  box-shadow:0 0 18px rgba(209,168,94,.18);
}
.tnflow__step{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
  align-items:center;
  min-height:260px;
}
.tnflow__marker{
  grid-column:2;
  grid-row:1;
  justify-self:center;
  z-index:3;
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border:1px solid rgba(222,190,131,.34);
  border-radius:50%;
  color:#d9bd86;
  background:#15171b;
  box-shadow:0 0 0 10px rgba(197,154,82,.045);
}
.tnflow__marker span{
  font-family:Georgia,serif;
  font-size:.78rem;
}
.tnflow__card{
  position:relative;
  max-width:500px;
  padding:28px;
  border:1px solid rgba(224,200,156,.18);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 26px 68px rgba(0,0,0,.28);
  backdrop-filter:blur(16px);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}
.tnflow__step--left .tnflow__card{
  grid-column:1;
  justify-self:end;
  margin-right:8px;
}
.tnflow__step--right .tnflow__card{
  grid-column:3;
  justify-self:start;
  margin-left:8px;
}
.tnflow__card::after{
  content:"";
  position:absolute;
  top:50%;
  width:28px;
  height:1px;
  background:linear-gradient(90deg,rgba(221,187,124,.50),transparent);
}
.tnflow__step--left .tnflow__card::after{
  right:-29px;
}
.tnflow__step--right .tnflow__card::after{
  left:-29px;
  transform:rotate(180deg);
}
@media (hover:hover) and (pointer:fine){
  .tnflow__card:hover{
    transform:translateY(-5px);
    border-color:rgba(218,180,109,.40);
    box-shadow:0 36px 84px rgba(0,0,0,.36);
  }
}
.tnflow__step-label{
  margin:0 0 8px;
  color:#a59d92;
  font-size:.57rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.tnflow__card h3{
  margin:0;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(1.45rem,2.2vw,2.2rem);
  font-weight:500;
  line-height:1.35;
}
.tnflow__card > p:last-of-type{
  margin:15px 0 0;
  color:#bbb3a8;
  font-size:.86rem;
  line-height:1.85;
}
.tnflow__note{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-top:18px;
  padding:0 10px;
  border:1px solid rgba(219,183,116,.20);
  border-radius:999px;
  color:#d3b77e;
  background:rgba(184,139,69,.075);
  font-size:.57rem;
  font-weight:900;
}
.tnflow__step.is-active .tnflow__marker{
  color:#17130d;
  background:linear-gradient(135deg,#e3c58d,#ad7f38);
  border-color:transparent;
  box-shadow:0 0 0 10px rgba(197,154,82,.08),0 0 28px rgba(208,166,91,.30);
}
.tnflow__step.is-active .tnflow__card{
  border-color:rgba(218,180,109,.35);
}

.tnflow__cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:34px;
  margin-top:42px;
  padding:34px;
  border:1px solid rgba(224,200,156,.16);
  border-radius:22px;
  background:
    radial-gradient(circle at 86% 20%,rgba(203,158,81,.17),transparent 30%),
    rgba(255,255,255,.035);
}
.tnflow__cta h3{
  margin:0;
  font-family:Georgia,"Yu Mincho",serif;
  font-size:clamp(1.45rem,2.5vw,2.6rem);
  font-weight:500;
  line-height:1.45;
}
.tnflow__cta p:last-child{
  margin:9px 0 0;
  color:#938c82;
  font-size:.75rem;
}
.tnflow__cta-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:11px;
}
.tnflow__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:48px;
  padding:0 21px;
  border:1px solid transparent;
  border-radius:999px;
  font-size:.75rem;
  font-weight:900;
}
.tnflow__button--primary{
  color:#17130d;
  background:linear-gradient(135deg,#e0c18a,#ac7f39);
}
.tnflow__button--secondary{
  color:#f4eee4;
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.035);
}

.tnflow--js .tnflow__header,
.tnflow--js .tnflow__step,
.tnflow--js .tnflow__cta{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .68s cubic-bezier(.2,.8,.2,1),
    transform .68s cubic-bezier(.2,.8,.2,1);
}
.tnflow--js .is-visible{
  opacity:1;
  transform:none;
}

@media (min-width:768px) and (max-width:1199px){
  .tnflow{padding:92px 0}
  .tnflow__lead-row{
    grid-template-columns:1fr;
    gap:18px;
  }
  .tnflow__lead-line{
    width:130px;
    margin-top:0;
  }
  .tnflow__lead{max-width:720px}
  .tnflow__step{
    grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);
    min-height:245px;
  }
}

@media (max-width:767px){
  .tnflow{padding:76px 0}
  .tnflow .container{
    width:min(var(--max),calc(100% - 28px));
  }
  .tnflow__title{
    font-size:clamp(2.3rem,10.7vw,3.25rem);
    line-height:1.16;
  }
  .tnflow__lead-row{
    grid-template-columns:1fr;
    gap:15px;
    margin-top:24px;
  }
  .tnflow__lead-line{
    width:92px;
    margin-top:0;
  }
  .tnflow__lead{
    font-size:.89rem;
    line-height:1.85;
  }
  .tnflow__timeline{
    margin-top:30px;
    padding-left:36px;
  }
  .tnflow__progress{
    left:18px;
    transform:none;
  }
  .tnflow__step{
    display:block;
    min-height:0;
    padding:0 0 22px;
  }
  .tnflow__marker{
    position:absolute;
    left:-47px;
    top:20px;
    width:42px;
    height:42px;
  }
  .tnflow__step--left .tnflow__card,
  .tnflow__step--right .tnflow__card{
    margin:0;
    max-width:none;
  }
  .tnflow__card{
    padding:21px;
    border-radius:19px;
  }
  .tnflow__card::after{
    display:none;
  }
  .tnflow__card h3{
    font-size:1.42rem;
  }
  .tnflow__card > p:last-of-type{
    font-size:.84rem;
  }
  .tnflow__cta{
    grid-template-columns:1fr;
    gap:23px;
    padding:25px 21px;
  }
  .tnflow__cta-actions{
    justify-content:flex-start;
  }
  .tnflow__button{
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .tnflow__card,
  .tnflow--js .tnflow__header,
  .tnflow--js .tnflow__step,
  .tnflow--js .tnflow__cta{
    transition:none !important;
  }
  .tnflow--js .tnflow__header,
  .tnflow--js .tnflow__step,
  .tnflow--js .tnflow__cta{
    opacity:1;
    transform:none;
  }
  .tnflow__progress-active{
    transform:scaleY(1) !important;
  }
}