/* ============================================================
   The Classic Method — subscribe.css
   Страница подписки (кинофлоу B, светлый). Полноэкранный takeover
   БЕЗ скролла. Грузится ТОЛЬКО на шаблоне page-subscribe.php.
   Весь funnel заскоплен под .page-subscribe. anime.js — отдельно.
   ============================================================ */

.page-subscribe{
  --bone:#FBFBF9; --cream:#F0EBE0; --paper:#F4F1EA;
  --burgundy:#732239; --deep:#7A1535; --ink:#181818;
  --navy:#1F3349; --steel:#3C5A74; --gold:#C9A24E; --gold2:#b8884a;
  --ease:cubic-bezier(.22,1,.36,1);
  position:relative; z-index:0;
  background:var(--bone); color:var(--ink);
  font-family:'Manrope',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased;
}
html.tcm-subscribe, body.tcm-subscribe{height:100%; overflow:hidden;}
.page-subscribe *{margin:0; padding:0; box-sizing:border-box;}
.page-subscribe .bod{font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-weight:500;}
body.lang-ja .page-subscribe{font-family:'Noto Sans JP',sans-serif;}
body.lang-ja .page-subscribe .bod:not(.tcm){font-family:'Noto Serif JP',serif;}

/* ===== TRAVELLING LOGO (burgundy on light) ===== */
.page-subscribe #bg{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:1;}
.page-subscribe .lock{display:flex; flex-direction:column; align-items:center; transform:scale(.12); opacity:0; will-change:transform,opacity,filter; filter:blur(18px);}
.page-subscribe .lock .barre svg{height:15vh; width:auto; display:block; stroke:var(--burgundy);}
.page-subscribe .lock .tcm{font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-weight:600; font-size:30vh; line-height:.86; letter-spacing:.04em; color:var(--burgundy); margin-top:.5vh;}
.page-subscribe .lock .slogan{font-weight:600; font-size:1.5vh; letter-spacing:.5em; text-transform:uppercase; color:var(--burgundy); opacity:.8; margin-top:2.4vh;}

.page-subscribe #veil{position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 120% at 50% 45%, rgba(244,241,234,0) 46%, rgba(225,218,205,.6) 100%);}

/* ===== PRICING ===== */
.page-subscribe #pricing{position:fixed; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4vh; padding:3vh 4vw; pointer-events:none;}
.page-subscribe #pricing .head{text-align:center; opacity:0;}
.page-subscribe #pricing .head .ey{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--burgundy); font-weight:600;}
.page-subscribe #pricing .head h1{font-size:clamp(20px,3.1vh,36px); margin-top:8px; color:var(--ink);}
.page-subscribe .panels{display:flex; gap:2vw; align-items:stretch; justify-content:center; width:100%; max-width:1120px;}
.page-subscribe .panel{position:relative; flex:1; max-width:330px; background:var(--bg); color:#F3ECE0; border:4px solid var(--edge); padding:3vh 28px 2.7vh; display:flex; flex-direction:column; text-align:center; opacity:0; pointer-events:auto; will-change:transform,opacity; transition:box-shadow .4s var(--ease), transform .4s var(--ease);}
.page-subscribe .panel::before{content:""; position:absolute; inset:9px; border:1px solid rgba(201,162,78,.55); pointer-events:none;}
.page-subscribe .panel::after{content:""; position:absolute; inset:13px; border:1px solid rgba(201,162,78,.28); pointer-events:none;}
.page-subscribe .panel:hover{box-shadow:0 28px 64px -30px rgba(24,24,24,.6); transform:translateY(-3px);}

/* programme header */
.page-subscribe .p-eye{font-size:9.5px; letter-spacing:.32em; text-transform:uppercase; color:rgba(243,236,224,.6); font-weight:600;}
.page-subscribe .feat-mark{font-size:9px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-top:6px;}
.page-subscribe .panel .gem{height:30px; margin:1.3vh 0 .9vh;}
.page-subscribe .panel .gem svg{height:30px; stroke:var(--gold);}
.page-subscribe .panel .stone{font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-weight:500; font-size:28px; color:#F6F0E6; line-height:1.04;}
body.lang-ja .page-subscribe .panel .stone{font-family:'Noto Serif JP',serif;}
.page-subscribe .panel .term{font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-style:italic; font-weight:400; font-size:14px; color:rgba(243,236,224,.66); margin-top:4px;}
.page-subscribe .fleuron{display:flex; align-items:center; justify-content:center; gap:9px; color:var(--gold); margin:1.3vh 0;}
.page-subscribe .fleuron::before,.page-subscribe .fleuron::after{content:""; height:1px; width:34px; background:var(--gold); opacity:.7;}
.page-subscribe .fleuron span{font-size:10px;}
.page-subscribe .panel .price{font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-weight:500; font-size:31px; color:#FBF7EF; display:flex; align-items:baseline; justify-content:center; gap:.4em; flex-wrap:wrap;}
.page-subscribe .panel .price .old{font-size:.5em; text-decoration:line-through; opacity:.5;}
.page-subscribe .panel .price .launch{font-family:'Manrope'; font-size:8.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(201,162,78,.6); padding:2px 7px; align-self:center;}
.page-subscribe .panel .orient{font-size:10px; color:rgba(243,236,224,.5); font-style:italic; margin-top:5px;}

/* section label with side rules */
.page-subscribe .sec-label{display:flex; align-items:center; gap:10px; font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(243,236,224,.55); font-weight:700; margin:1.5vh 0 .9vh;}
.page-subscribe .sec-label::before,.page-subscribe .sec-label::after{content:""; flex:1; height:1px; background:rgba(201,162,78,.32);}
.page-subscribe .sec-label.gold{color:var(--gold);}
.page-subscribe .sec-label.gold::before,.page-subscribe .sec-label.gold::after{background:rgba(201,162,78,.55);}

/* highlighted "what differs" plaque */
.page-subscribe .special-box{background:rgba(201,162,78,.09); border:1px solid rgba(201,162,78,.42); padding:.3vh 13px 1vh; margin:1.4vh 0 1.2vh;}
.page-subscribe .special-box .sec-label{margin:.9vh 0 .7vh;}

/* differentiators — dotted leaders */
.page-subscribe .diff{text-align:left;}
.page-subscribe .drow{display:flex; align-items:baseline; gap:6px; font-size:11px; padding:.42vh 0;}
.page-subscribe .drow .dl{color:rgba(243,236,224,.62); white-space:nowrap;}
.page-subscribe .drow .lead{flex:1; border-bottom:1px dotted rgba(243,236,224,.3); transform:translateY(-3px);}
.page-subscribe .drow .dv{color:#F6F0E6; font-weight:700; white-space:nowrap;}
.page-subscribe .drow .dv.hot{color:var(--gold);}
.page-subscribe .dline{font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-style:italic; font-size:12px; color:var(--gold); text-align:center; padding:.5vh 0 0;}

/* shared base */
.page-subscribe .shared{flex-grow:1;}
.page-subscribe .shared ul{list-style:none; text-align:left; display:inline-block;}
.page-subscribe .shared li{position:relative; padding:.4vh 0 .4vh 16px; font-size:11px; color:rgba(243,236,224,.66); line-height:1.34;}
.page-subscribe .shared li::before{content:"✦"; position:absolute; left:0; top:.5vh; font-size:7px; color:var(--gold);}

.page-subscribe .panel .btn{display:block; margin-top:1.6vh; text-align:center; padding:12px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; background:none; color:var(--gold); border:1px solid var(--gold); cursor:pointer; transition:all .35s var(--ease);}
.page-subscribe .panel .btn:hover{background:var(--gold); color:var(--ink);}
.page-subscribe .scar{margin-top:1vh; font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-style:italic; font-size:11px; color:rgba(243,236,224,.6); text-align:center;}

/* stone identities — deep jewel folios */
.page-subscribe .s-emerald{--bg:linear-gradient(180deg,#155340,#0B3325); --edge:#0A2A20;}
.page-subscribe .s-ruby{--bg:linear-gradient(180deg,#6E1A31,#46101F); --edge:#380B18;}
.page-subscribe .s-diamond{--bg:linear-gradient(180deg,#26425E,#142839); --edge:#101F2D;}

.page-subscribe .foot-note{font-size:11px; color:#9a958c; letter-spacing:.02em; opacity:0;}

/* ===== REGISTER ===== */
.page-subscribe #register{position:fixed; inset:0; z-index:4; display:flex; align-items:center; justify-content:center; padding:4vh 5vw; pointer-events:none; opacity:0;}
.page-subscribe #register *{pointer-events:inherit;} /* fix: Рубин — потомки скрытого оверлея не перехватывают клики */
.page-subscribe .reg-card{width:100%; max-width:432px; background:var(--bg,var(--burgundy)); color:#F3ECE0; padding:44px 40px 34px; pointer-events:auto; border:4px solid var(--edge,#380B18); box-shadow:0 54px 116px -40px rgba(24,24,24,.72); position:relative; text-align:center;}
.page-subscribe .reg-card::before{content:""; position:absolute; inset:9px; border:1px solid rgba(201,162,78,.55); pointer-events:none;}
.page-subscribe .reg-card::after{content:""; position:absolute; inset:13px; border:1px solid rgba(201,162,78,.28); pointer-events:none;}
.page-subscribe .reg-card .ey{font-size:10px; letter-spacing:.36em; text-transform:uppercase; color:var(--gold); font-weight:700;}
.page-subscribe .reg-card h2{font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-weight:500; font-size:31px; margin:9px 0 0; color:#F6F0E6;}
body.lang-ja .page-subscribe .reg-card h2{font-family:'Noto Serif JP',serif;}
.page-subscribe .reg-fleuron{display:flex; align-items:center; justify-content:center; gap:9px; color:var(--gold); margin:12px 0 10px;}
.page-subscribe .reg-fleuron::before,.page-subscribe .reg-fleuron::after{content:""; height:1px; width:34px; background:var(--gold); opacity:.7;}
.page-subscribe .reg-fleuron span{font-size:10px;}
.page-subscribe .reg-card .chosen{font-size:12.5px; color:rgba(243,236,224,.72); margin-bottom:22px; font-style:italic; font-family:'Bodoni Moda',serif; font-optical-sizing:none;}
.page-subscribe .reg-card .chosen b{color:var(--gold); font-weight:600; font-style:normal; font-family:'Manrope';}
.page-subscribe .field{margin-bottom:15px; text-align:left;}
.page-subscribe .field label{display:block; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:rgba(243,236,224,.6); margin-bottom:4px; font-weight:600;}
.page-subscribe .field input{width:100%; padding:8px 2px; border:none; border-bottom:1px solid rgba(243,236,224,.3); background:transparent; font-family:inherit; font-size:14px; color:#F6F0E6; outline:none; transition:border-color .3s var(--ease);}
.page-subscribe .field input::placeholder{color:rgba(243,236,224,.35);}
.page-subscribe .field input:focus{border-bottom-color:var(--gold);}
.page-subscribe .row2{display:flex; gap:18px;} .page-subscribe .row2 .field{flex:1;}
.page-subscribe .reg-card .submit{width:100%; margin-top:14px; padding:14px; background:var(--gold); color:var(--ink); border:none; font-family:'Manrope'; font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; transition:background .35s var(--ease);}
.page-subscribe .reg-card .submit:hover{background:#e0c07e;}
.page-subscribe .reg-card .back{position:absolute; top:14px; right:16px; background:none; border:none; font-size:12px; color:rgba(243,236,224,.6); cursor:pointer; letter-spacing:.03em; z-index:2;}
.page-subscribe .reg-card .back:hover{color:var(--gold);}
.page-subscribe .reg-card .fine{font-size:10px; color:rgba(243,236,224,.5); text-align:center; margin-top:14px;}

/* ===== FINAL ===== */
.page-subscribe #final{position:fixed; inset:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; opacity:0; pointer-events:none; text-align:center;}
.page-subscribe #final .ey{font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--burgundy); font-weight:600; margin-bottom:13px;}
.page-subscribe #final h2{font-family:'Bodoni Moda',serif; font-optical-sizing:none; font-weight:500; font-size:clamp(28px,5vw,52px); color:var(--ink);}
body.lang-ja .page-subscribe #final h2{font-family:'Noto Serif JP',serif;}
.page-subscribe #final h2 em{font-style:italic; color:var(--burgundy);}

/* ===== controls (только переключатель языка) ===== */
.page-subscribe #lang{position:fixed; top:18px; right:20px; z-index:9; display:flex; gap:0;}
.page-subscribe #lang button{font-family:'Manrope'; font-size:11px; letter-spacing:.06em; color:#8a857c; background:none; border:1px solid rgba(115,34,57,.3); border-left:none; padding:7px 13px; cursor:pointer; transition:.25s var(--ease);}
.page-subscribe #lang button:first-child{border-left:1px solid rgba(115,34,57,.3);}
.page-subscribe #lang button.on{color:var(--bone); background:var(--burgundy); border-color:var(--burgundy);}

@media(max-height:700px){ .page-subscribe .lock .tcm{font-size:23vh;} .page-subscribe .panel li{font-size:11.5px; padding:.6vh 0 .6vh 20px;} }
@media(max-width:860px){
  .page-subscribe .panels{flex-direction:column; max-width:360px; overflow-y:auto; max-height:84vh;}
  .page-subscribe #pricing{justify-content:flex-start; padding-top:9vh;}
  .page-subscribe .lock .tcm{font-size:20vh;}
}
@media(prefers-reduced-motion:reduce){
  .page-subscribe *{transition-duration:.001s !important;}
}

/* ===== Мобильная карусель планов (свайп + стрелки) ===== */
.panels-nav{display:none}
@media(max-width:768px){
  /* разблокировать прокрутку */
  html,body{overflow-y:auto!important;height:auto!important;min-height:0!important}
  .page-subscribe{height:auto!important;min-height:0!important;overflow:visible!important}
  /* активный шаг цен: фикс остаётся, но со своей вертикальной прокруткой и без сжатия */
  #pricing{overflow-y:auto!important;-webkit-overflow-scrolling:touch;justify-content:flex-start!important;padding:80px 16px 40px!important;pointer-events:auto!important}
  #pricing>*{flex:0 0 auto!important}
  /* скрытые шаги кинофлоу не перехватывают тапы */
  .page-subscribe section[style*="opacity: 0"] *{pointer-events:none!important}
  /* плашки — горизонтальная карусель полной высоты */
  #pricing .panels{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:flex-start!important;overflow-x:auto;overflow-y:visible;scroll-snap-type:x mandatory;gap:14px;max-width:100%;height:auto!important;padding:4px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none;pointer-events:auto!important}
  #pricing .panels::-webkit-scrollbar{display:none}
  #pricing .panel{flex:0 0 88%!important;max-width:88%!important;height:auto!important;max-height:none!important;transform:none!important;scroll-snap-align:center;pointer-events:auto!important}
  /* убрать подпись про промокод */
  #pricing .foot-note{display:none!important}
  /* стрелки — по сторонам плашки, фиксированные, полупрозрачные */
  .panels-nav{display:block!important;pointer-events:none}
  .panels-nav button{position:fixed;top:46%;transform:translateY(-50%);width:46px;height:46px;border:1px solid var(--gold,#C9A24E);background:rgba(251,251,249,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:var(--burgundy,#732239);font-size:22px;line-height:1;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto!important;z-index:7}
  .panels-nav button:first-of-type{left:8px}
  .panels-nav button:last-of-type{right:8px}
  .panels-nav button[disabled]{opacity:.22}
  .panels-nav .pn-dots{position:fixed;left:0;right:0;bottom:18px;display:flex;justify-content:center;gap:8px;pointer-events:none;z-index:7}
  .panels-nav .pn-dots i{width:7px;height:7px;border-radius:50%;background:rgba(115,34,57,.32);transition:all .25s}
  .panels-nav .pn-dots i.on{background:var(--burgundy,#732239);transform:scale(1.4)}
  /* прятать стрелки, когда шаг цен не активен */
  #pricing[style*="opacity: 0"] .panels-nav{display:none!important}
}


/* ===== Подписка: равная высота плашек + компактный контент (моб) ===== */
@media(max-width:768px){
  #pricing .panels{align-items:stretch!important}
  #pricing .panel{padding:16px 20px 14px!important;justify-content:flex-start}
  #pricing .panel .gem{margin:4px 0 2px!important}
  #pricing .panel .gem svg{height:26px!important;width:auto!important}
  #pricing .panel .stone{font-size:23px!important}
  #pricing .panel .term{font-size:12.5px!important;margin-top:2px!important}
  #pricing .panel .fleuron{margin:5px 0!important}
  #pricing .panel .price{font-size:26px!important}
  #pricing .panel .orient{margin-top:3px!important}
  #pricing .panel .special-box{margin:7px 0 6px!important;padding:3px 12px 6px!important}
  #pricing .panel .sec-label{margin:4px 0 3px!important}
  #pricing .panel .shared{margin-top:2px!important}
  #pricing .panel .shared li{margin-bottom:3px!important;line-height:1.25!important}
  #pricing .panel .btn{margin-top:auto!important}
}


/* TCM: показать/скрыть пароль (глаз) */
.page-subscribe .pw-wrap{position:relative;display:block}
.page-subscribe .pw-wrap input{width:100%;padding-right:46px}
.page-subscribe .pw-eye{position:absolute;top:50%;right:8px;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;color:#9a7d88;cursor:pointer;padding:0;border-radius:8px;transition:color .15s ease,background .15s ease}
.page-subscribe .pw-eye:hover{color:#732239;background:rgba(115,34,57,.06)}
.page-subscribe .pw-eye.on{color:#732239}
.page-subscribe .pw-eye svg{display:block;pointer-events:none}
@media(max-width:480px){.page-subscribe .pw-eye{width:40px;height:40px;right:6px}.page-subscribe .pw-wrap input{padding-right:50px}}