
/* =========================================================
   TNOW-003 Pricing v2.1 — Refined
   Less information, clearer choice
   ========================================================= */

.tnpricing{
  position:relative;
  overflow:hidden;
  padding:112px 0;
  color:#181713;
  background:
    radial-gradient(circle at 10% 8%,rgba(189,143,69,.12),transparent 28%),
    radial-gradient(circle at 93% 88%,rgba(189,143,69,.08),transparent 30%),
    linear-gradient(180deg,#f6f1e8 0%,#efe8dc 100%);
}

.tnpricing::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(63,52,34,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,52,34,.035) 1px,transparent 1px);
  background-size:84px 84px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 94%);
}

.tnpricing::after{
  content:"¥";
  position:absolute;
  right:-1%;
  top:18%;
  color:rgba(113,82,34,.028);
  font-family:Georgia,serif;
  font-size:clamp(20rem,34vw,42rem);
  line-height:.8;
  pointer-events:none;
}

.tnpricing__inner{
  position:relative;
  z-index:1;
}

.tnpricing__header{
  padding-bottom:42px;
  border-bottom:1px solid rgba(67,55,37,.14);
}

.tnpricing__eyebrow,
.tnpricing__next-kicker,
.tnpricing__common-kicker{
  margin:0 0 16px;
  color:#9c6f2d;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.tnpricing__title{
  max-width:1080px;
  margin:0;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(3rem,5vw,5.5rem);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.045em;
}

.tnpricing__title span{
  display:block;
}

.tnpricing__title-accent{
  color:transparent;
  background:linear-gradient(110deg,#2b241a,#9b6a27,#4a3822);
  -webkit-background-clip:text;
  background-clip:text;
}

.tnpricing__intro{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(430px,620px);
  gap:32px;
  align-items:start;
  margin-top:31px;
}

.tnpricing__intro-line{
  height:1px;
  margin-top:15px;
  background:linear-gradient(90deg,rgba(151,106,42,.58),rgba(67,55,37,.10),transparent);
}

.tnpricing__intro p{
  margin:0;
}

.tnpricing__intro-main{
  color:#2e261c;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(1.22rem,1.9vw,1.75rem);
  line-height:1.6;
}

.tnpricing__intro-sub{
  margin-top:8px !important;
  color:#6f675e;
  font-size:.9rem;
  line-height:1.85;
}

.tnpricing__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  align-items:stretch;
  margin-top:34px;
}

.tnpricing__card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:445px;
  padding:28px;
  overflow:hidden;
  border:1px solid rgba(83,64,36,.14);
  border-radius:24px;
  background:
    radial-gradient(circle at 88% 10%,rgba(184,132,54,.11),transparent 30%),
    rgba(255,255,255,.64);
  box-shadow:0 24px 60px rgba(83,64,36,.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .35s ease;
}

.tnpricing__card::after{
  content:"T&N";
  position:absolute;
  right:-14px;
  bottom:-18px;
  color:rgba(107,73,25,.022);
  font-family:Georgia,serif;
  font-size:7rem;
  font-weight:700;
  letter-spacing:-.08em;
  pointer-events:none;
}

.tnpricing__card--featured{
  transform:translateY(-10px);
  border-color:rgba(147,100,34,.34);
  background:
    radial-gradient(circle at 88% 10%,rgba(184,132,54,.18),transparent 32%),
    linear-gradient(155deg,rgba(255,255,255,.90),rgba(247,239,226,.82));
  box-shadow:0 34px 80px rgba(91,65,26,.18);
}

@media (hover:hover) and (pointer:fine){
  .tnpricing__card:hover{
    transform:translateY(-7px);
    border-color:rgba(147,100,34,.34);
    box-shadow:0 34px 78px rgba(83,64,36,.16);
  }

  .tnpricing__card--featured:hover{
    transform:translateY(-16px);
  }
}

.tnpricing__badge{
  position:absolute;
  right:22px;
  top:20px;
  padding:7px 10px;
  border-radius:999px;
  color:#f7eddd;
  background:#241c13;
  font-size:.52rem;
  font-weight:900;
  letter-spacing:.14em;
}

.tnpricing__card-head{
  min-height:51px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-right:80px;
}

.tnpricing__plan{
  margin:0;
  color:#1f1a14;
  font-family:Georgia,serif;
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:.05em;
}

.tnpricing__fit{
  color:#8b8175;
  font-size:.63rem;
}

.tnpricing__price{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:4px;
  margin-top:28px;
  padding-bottom:20px;
  border-bottom:1px solid rgba(65,52,34,.11);
}

.tnpricing__currency{
  margin-top:12px;
  color:#8e6327;
  font-family:Georgia,serif;
  font-size:1.3rem;
}

.tnpricing__price strong{
  color:#211a12;
  font-family:Georgia,serif;
  font-size:clamp(3.1rem,4vw,4.35rem);
  font-weight:500;
  line-height:1;
  letter-spacing:-.055em;
}

.tnpricing__tax{
  align-self:flex-end;
  margin-bottom:7px;
  color:#857b6f;
  font-size:.58rem;
}

.tnpricing__scope{
  margin:22px 0 0;
  color:#8d6328;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.04em;
}

.tnpricing__summary{
  max-width:35ch;
  margin:12px 0 0;
  color:#6e655b;
  font-size:.84rem;
  line-height:1.78;
}

.tnpricing__cta{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
  padding:15px 16px;
  border:1px solid rgba(76,58,31,.16);
  border-radius:999px;
  color:#2d241a;
  background:rgba(255,255,255,.50);
  font-size:.73rem;
  font-weight:900;
}

.tnpricing__cta span{
  transition:transform .25s ease;
}

.tnpricing__cta--featured{
  color:#f7efe2;
  border-color:#241c13;
  background:#241c13;
}

@media (hover:hover) and (pointer:fine){
  .tnpricing__cta:hover span{
    transform:translateX(4px);
  }
}

.tnpricing__common{
  display:grid;
  grid-template-columns:minmax(260px,.75fr) minmax(0,1.25fr);
  gap:30px;
  align-items:start;
  margin-top:25px;
  padding:27px 29px;
  border:1px solid rgba(83,64,36,.12);
  border-radius:20px;
  background:rgba(255,255,255,.43);
}

.tnpricing__common-head h3{
  margin:0;
  color:#2c241b;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(1.2rem,1.8vw,1.65rem);
  font-weight:500;
  line-height:1.5;
}

.tnpricing__common-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 22px;
  margin:0;
  padding:0;
  list-style:none;
}

.tnpricing__common-grid li{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:10px;
  align-items:center;
  min-height:44px;
  border-bottom:1px solid rgba(65,52,34,.10);
  color:#4f473e;
  font-size:.72rem;
}

.tnpricing__common-grid span{
  color:#9c6f2d;
  font-family:Georgia,serif;
  font-size:.64rem;
}

.tnpricing__next{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:36px;
  margin-top:25px;
  padding:30px;
  border-radius:20px;
  color:#f3ede4;
  background:
    radial-gradient(circle at 88% 14%,rgba(198,150,75,.18),transparent 30%),
    linear-gradient(145deg,#121317,#1a1712);
}

.tnpricing__next h3{
  margin:0;
  font-family:Georgia,"Yu Mincho","Hiragino Mincho ProN",serif;
  font-size:clamp(1.45rem,2vw,2rem);
  font-weight:500;
  line-height:1.45;
}

.tnpricing__next p:not(.tnpricing__next-kicker){
  max-width:760px;
  margin:10px 0 0;
  color:#a49b90;
  font-size:.82rem;
  line-height:1.8;
}

.tnpricing__next a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#d6b474;
  font-size:.74rem;
  font-weight:900;
  white-space:nowrap;
}

.tnpricing--js .tnpricing__header,
.tnpricing--js .tnpricing__card,
.tnpricing--js .tnpricing__common,
.tnpricing--js .tnpricing__next{
  opacity:0;
  transform:translateY(22px);
  transition:
    opacity .66s cubic-bezier(.2,.8,.2,1),
    transform .66s cubic-bezier(.2,.8,.2,1);
}

.tnpricing--js .is-visible{
  opacity:1;
  transform:none;
}

@media (min-width:768px) and (max-width:1199px){
  .tnpricing{
    padding:96px 0;
  }

  .tnpricing__intro{
    grid-template-columns:1fr;
    gap:18px;
  }

  .tnpricing__intro-line{
    width:130px;
    margin-top:0;
  }

  .tnpricing__grid{
    grid-template-columns:1fr;
  }

  .tnpricing__card,
  .tnpricing__card--featured{
    min-height:auto;
    transform:none;
  }

  .tnpricing__common{
    grid-template-columns:1fr;
  }
}

@media (max-width:767px){
  .tnpricing{
    padding:76px 0;
  }

  .tnpricing .container{
    width:min(var(--max),calc(100% - 28px));
  }

  .tnpricing__header{
    padding-bottom:30px;
  }

  .tnpricing__title{
    font-size:clamp(2.15rem,10vw,3.05rem);
    line-height:1.16;
  }

  .tnpricing__intro{
    grid-template-columns:1fr;
    gap:15px;
    margin-top:23px;
  }

  .tnpricing__intro-line{
    width:92px;
    margin-top:0;
  }

  .tnpricing__intro-main{
    font-size:1.08rem;
  }

  .tnpricing__intro-sub{
    font-size:.84rem;
    line-height:1.78;
  }

  .tnpricing__grid{
    grid-template-columns:1fr;
    gap:13px;
    margin-top:23px;
  }

  .tnpricing__card,
  .tnpricing__card--featured{
    min-height:360px;
    padding:21px;
    border-radius:20px;
    transform:none;
  }

  .tnpricing__card-head{
    padding-right:74px;
  }

  .tnpricing__price{
    margin-top:22px;
  }

  .tnpricing__price strong{
    font-size:clamp(3rem,14vw,4rem);
  }

  .tnpricing__common{
    grid-template-columns:1fr;
    gap:18px;
    padding:22px;
  }

  .tnpricing__common-grid{
    grid-template-columns:1fr;
  }

  .tnpricing__common-grid li{
    min-height:42px;
  }

  .tnpricing__next{
    grid-template-columns:1fr;
    gap:16px;
    padding:23px;
  }

  .tnpricing__next a{
    white-space:normal;
  }
}

@media (prefers-reduced-motion:reduce){
  .tnpricing__card,
  .tnpricing__cta span,
  .tnpricing--js .tnpricing__header,
  .tnpricing--js .tnpricing__card,
  .tnpricing--js .tnpricing__common,
  .tnpricing--js .tnpricing__next{
    transition:none !important;
  }

  .tnpricing--js .tnpricing__header,
  .tnpricing--js .tnpricing__card,
  .tnpricing--js .tnpricing__common,
  .tnpricing--js .tnpricing__next{
    opacity:1;
    transform:none;
  }
}
