/* ===========================================================
   SWAN CLUB — Wellness · Culture · Insight
   컬러 스펙 그대로: WARM WHITE 75% / SOFT IVORY 18% / WHISPER PEACH 5% / PALE BLUE 2%.
   레이아웃은 타이포를 주인공으로 두고, 프로그램은 스크롤에 따라 가로로 흐른다.
   =========================================================== */

:root{
  --warm-white:#faf8f3;
  --soft-ivory:#f7f5f0;
  --peach:#f4e6de;
  --peach-deep:#c39a86;
  --pale-blue:#e4edf1;
  --blue-deep:#7b96a4;

  --ink:#2c3134;
  --body:#4c5358;
  --muted:#8d9498;
  --line:rgba(44,49,52,.13);

  --ax-move:#7b96a4; --ax-nourish:#c39a86; --ax-rest:#93a7b0; --ax-insight:#a09aa8;

  --display:'Playfair Display', Georgia, serif;
  --ui:'Noto Sans KR', -apple-system, system-ui, sans-serif;

  --pad:clamp(20px,5vw,84px);
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body[data-theme="above"]{ --bg:var(--warm-white); --card:var(--soft-ivory); }
body[data-theme="below"]{ --bg:var(--pale-blue);  --card:#f1f6f8; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--ui); font-weight:300; line-height:1.85; letter-spacing:-.005em;
  overflow-x:hidden; transition:background-color 1.1s var(--ease);
}
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--ui); font-weight:200; color:var(--ink); line-height:1.28; letter-spacing:-.04em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
em{ font-style:normal; }
.sym-def{ display:none; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ───────── 레이어 ───────── */
.grain{
  position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite; mix-blend-mode:multiply;
}
@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-4%,3%)} 50%{transform:translate(3%,-4%)} 75%{transform:translate(-2%,-3%)} 100%{transform:translate(0,0)} }

.curtain{
  position:fixed; inset:0; z-index:100; background:var(--warm-white);
  display:grid; place-items:center; transition:opacity 1s var(--ease), visibility 1s;
}
.curtain.is-open{ opacity:0; visibility:hidden; }
.curtain__inner{ display:grid; justify-items:center; gap:26px; animation:markIn 1.4s var(--ease) both; }
.curtain__mark{ font-family:var(--display); font-size:clamp(26px,4.4vw,44px); letter-spacing:.34em; text-indent:.34em; color:var(--ink); }
.curtain__sub{ font-family:var(--display); font-style:italic; font-size:clamp(13px,1.4vw,17px); letter-spacing:.22em; color:var(--blue-deep); }
@keyframes markIn{ from{opacity:0; filter:blur(10px); transform:translateY(10px)} to{opacity:1; filter:none; transform:none} }

/* ───────── 섹션 인덱스 (오른쪽 가장자리) ───────── */
.dots{ position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:40; display:grid; gap:15px; }
.dots a{ display:block; padding:4px; position:relative; }
.dots i{ display:block; width:6px; height:6px; border-radius:50%; background:rgba(44,49,52,.2); transition:background-color .4s, transform .4s var(--ease); }
.dots a.is-on i{ background:var(--peach-deep); transform:scale(1.6); }
.dots a::after{
  content:attr(data-t); position:absolute; right:20px; top:50%; transform:translateY(-50%);
  font-family:var(--display); font-size:11px; letter-spacing:.18em; white-space:nowrap;
  color:var(--muted); opacity:0; transition:opacity .3s;
}
.dots a:hover::after{ opacity:1; }
@media (max-width:1180px){ .dots{ display:none; } }

/* ───────── 내비 ───────── */
.nav{
  position:fixed; inset:0 0 auto; z-index:50; display:flex; align-items:center;
  justify-content:space-between; gap:20px; padding:22px var(--pad);
  border-bottom:1px solid transparent;
  transition:background-color .6s var(--ease), border-color .6s, padding .5s var(--ease);
}
.nav.is-stuck{
  padding-block:13px; border-bottom-color:var(--line);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(16px) saturate(140%);
}
.nav__brand{ display:flex; align-items:center; gap:13px; }
.nav__mark{ font-family:var(--display); font-size:20px; letter-spacing:.26em; text-indent:.26em; color:var(--ink); white-space:nowrap; }
.nav__links{ display:flex; gap:clamp(15px,2.2vw,32px); font-size:13.5px; }
.nav__links a{ position:relative; color:var(--body); transition:color .3s; }
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--peach-deep);
  transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease);
}
.nav__links a:hover{ color:var(--ink); } .nav__links a:hover::after{ transform:scaleX(1); }
@media (max-width:1020px){ .nav__links{ display:none; } }
@media (max-width:720px){ .nav .nav__cta{ display:none; } }
@media (max-width:420px){ .nav__mark{ font-size:16px; letter-spacing:.18em; text-indent:.18em; } }

/* ───────── 버튼 ───────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 28px; border-radius:2px; border:1px solid transparent;
  font-size:13.5px; font-weight:400; color:var(--ink);
  transition:background-color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
  cursor:pointer;
}
.btn em{ transition:transform .45s var(--ease); }
.btn:hover{ transform:translateY(-2px); }
.btn:hover em{ transform:translateX(4px); }
.btn--solid{ background:var(--pale-blue); }
.btn--solid:hover{ background:#d6e5eb; }
.btn--line{ border-color:var(--line); background:rgba(255,255,255,.5); }
.btn--line:hover{ border-color:var(--peach-deep); background:var(--peach); }
.btn--wide{ width:100%; justify-content:center; padding:18px; }
.nav__cta{ padding:11px 20px; font-size:12.5px; }

/* ───────── 스크롤 연출 ───────── */
@keyframes rise{ from{opacity:0; transform:translateY(34px)} to{opacity:1; transform:none} }
.reveal{ animation:rise linear both; animation-timeline:view(); animation-range:entry 6% cover 24%; }
@keyframes wordLit{ from{opacity:.16} to{opacity:1} }
.word{ display:inline-block; opacity:.16; animation:wordLit linear both; animation-timeline:view(); animation-range:entry 24% cover 46%; }
@keyframes charIn{ from{ transform:translateY(115%) } to{ transform:none } }
.ch{ display:inline-block; animation:charIn .95s var(--ease) both; animation-delay:calc(.85s + var(--i) * .03s); }
html.no-sdt .reveal{ animation:none; opacity:0; transform:translateY(34px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
html.no-sdt .reveal.in{ opacity:1; transform:none; }
html.no-sdt .word{ opacity:1 !important; animation:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.word,.ch,.shot{ animation:none !important; opacity:1 !important; transform:none !important; }
  .grain,.ticker__track{ animation:none !important; }
}

/* ───────── 공통 ───────── */
section{ position:relative; z-index:2; }
.about,.rhythm,.space,.membership,.faq,.join{
  padding:clamp(96px,15vh,200px) var(--pad); max-width:var(--maxw); margin-inline:auto;
}
.label{
  font-family:var(--display); font-size:14px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--muted); margin-bottom:26px;
}
.label em{ color:var(--peach-deep); margin:0 7px; letter-spacing:0; }
.head{ margin-bottom:clamp(50px,8vh,100px); max-width:900px; }
.head__title{ font-size:clamp(30px,5vw,64px); }
.head__desc{ margin-top:24px; color:var(--body); font-size:clamp(14px,1.15vw,16px); max-width:44ch; }

/* ───────── HERO ───────── */
/* 3D 워드마크 캔버스는 히어로 안에만 있다. 페이지 전체에 깔지 않으니 다른 섹션을 가리지 않는다. */
.mark3d{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  opacity:0; transition:opacity 1.4s var(--ease); }
.mark3d.is-ready{ opacity:1; }
.hero > *:not(.mark3d):not(.hero__scroll){ position:relative; z-index:1; }
.hero__scroll{ z-index:1; }

.hero{
  position:relative; min-height:100svh; padding:150px var(--pad) 70px;
  max-width:var(--maxw); margin-inline:auto;
  display:flex; flex-direction:column; justify-content:center;
}
.hero__eyebrow{
  font-family:var(--display); font-style:italic; font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.2em; color:var(--blue-deep); margin-bottom:clamp(22px,3.5vh,42px); overflow:hidden;
}
.hero__eyebrow span{ display:inline-block; animation:markIn 1s var(--ease) .9s both; }
.hero__title{ font-size:clamp(34px,7.6vw,112px); font-weight:100; line-height:1.1; letter-spacing:-.05em; }
.hero__title .ln{ display:block; overflow:hidden; padding-bottom:.06em; }
.hero__title .ln--in{ padding-left:clamp(0px,7vw,120px); }
.hero__foot{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,70px); align-items:end;
  margin-top:clamp(30px,5vh,60px);
}
.hero__sub{ font-size:clamp(13.5px,1.1vw,15.5px); color:var(--body); max-width:46ch; animation:markIn 1.1s var(--ease) 1.7s both; }
.hero__en{
  font-family:var(--display); font-style:italic; font-size:clamp(22px,3.4vw,52px);
  line-height:1.06; color:var(--peach-deep); text-align:right; letter-spacing:-.01em;
  animation:markIn 1.1s var(--ease) 1.55s both;
}
.hero__en em{ color:var(--blue-deep); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:clamp(28px,4.5vh,50px); animation:markIn 1.1s var(--ease) 1.85s both; }
.hero__scroll{
  position:absolute; left:var(--pad); bottom:36px; display:flex; align-items:center; gap:12px;
  font-family:var(--display); font-style:italic; font-size:13px; letter-spacing:.16em; color:var(--muted);
  animation:markIn 1.1s var(--ease) 2s both;
}
.hero__scroll i{ display:block; width:58px; height:1px; background:var(--line); overflow:hidden; position:relative; }
.hero__scroll i::after{ content:''; position:absolute; inset:0; background:var(--peach-deep); animation:scrollLine 2.6s var(--ease) infinite; }
@keyframes scrollLine{ 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }
@media (max-width:760px){ .hero__foot{ grid-template-columns:1fr; align-items:start; } .hero__en{ text-align:left; } }

/* ───────── TICKER ───────── */
.ticker{ position:relative; z-index:2; overflow:hidden; background:var(--bg); border-block:1px solid var(--line); padding:clamp(14px,2vh,22px) 0; }
.ticker__track{ display:flex; align-items:center; gap:clamp(18px,2.4vw,36px); width:max-content; animation:tick 40s linear infinite; }
.ticker span{ font-family:var(--display); font-style:italic; font-size:clamp(22px,3.4vw,50px); color:var(--ink); white-space:nowrap; }
.ticker i{ font-style:normal; color:var(--peach-deep); font-size:clamp(14px,1.6vw,22px); }
@keyframes tick{ to{ transform:translateX(-50%); } }

/* ───────── ABOUT ───────── */
.bigtext{ font-size:clamp(21px,3.1vw,44px); font-weight:200; color:var(--ink); line-height:1.58; letter-spacing:-.04em; max-width:clamp(320px,64vw,960px); }
.about__en{ font-family:var(--display); font-style:italic; font-size:clamp(17px,1.9vw,27px); color:var(--peach-deep); margin-top:clamp(28px,4vh,48px); }
.about__grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(22px,3vw,50px);
  margin-top:clamp(56px,9vh,120px); padding-top:46px; border-top:1px solid var(--line);
}
.stat b{ display:block; font-family:var(--display); font-size:clamp(48px,5.6vw,84px); line-height:1; color:var(--blue-deep); margin-bottom:16px; }
.stat span{ font-size:13.5px; color:var(--body); line-height:1.8; }

/* ───────── PILLARS — 왼쪽 제목 고정, 오른쪽이 흐른다 ───────── */
.pillars{
  max-width:var(--maxw); margin-inline:auto; padding:clamp(96px,15vh,200px) var(--pad);
  display:grid; grid-template-columns:minmax(260px,32%) 1fr; gap:clamp(28px,5vw,90px);
}
.pillars__stick{ position:sticky; top:clamp(110px,22vh,220px); align-self:start; }
.pillars__title{ font-size:clamp(28px,3.6vw,50px); }
.pillars__note{ margin-top:22px; font-size:13.5px; color:var(--muted); max-width:26ch; }
.pillar{ padding:clamp(38px,7vh,86px) 0; border-top:1px solid var(--line); }
.pillar:first-child{ border-top:0; padding-top:0; }
.pillar__no{ font-family:var(--display); font-size:14px; letter-spacing:.2em; color:var(--muted); }
.pillar h3{ font-size:clamp(26px,3.4vw,46px); margin:14px 0 18px; line-height:1.18; }
.pillar h3 em{ font-family:var(--display); font-style:italic; font-weight:400; color:var(--ax); }
.pillar[data-axis="move"]{ --ax:var(--ax-move); }
.pillar[data-axis="nourish"]{ --ax:var(--ax-nourish); }
.pillar[data-axis="rest"]{ --ax:var(--ax-rest); }
.pillar[data-axis="insight"]{ --ax:var(--ax-insight); }
.pillar p{ color:var(--body); font-size:14.5px; max-width:48ch; }
.pillar__tag{ display:inline-block; margin-top:20px; font-size:11.5px; letter-spacing:.12em; color:var(--muted); }
@media (max-width:860px){
  .pillars{ grid-template-columns:1fr; }
  .pillars__stick{ position:static; margin-bottom:40px; }
  .pillar:first-child{ border-top:1px solid var(--line); padding-top:clamp(38px,7vh,86px); }
}

/* ───────── WATERLINE ───────── */
.waterline{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:clamp(80px,12vh,150px) var(--pad);
}
.waterline__en{ font-family:var(--display); font-style:italic; font-size:clamp(16px,1.8vw,24px); letter-spacing:.24em; color:var(--blue-deep); margin-bottom:32px; }
.waterline__ko{ font-size:clamp(24px,3.6vw,54px); line-height:1.44; max-width:21ch; }
.waterline__sub{ font-family:var(--display); font-style:italic; font-size:clamp(17px,1.8vw,25px); color:var(--peach-deep); margin-top:36px; }

/* ───────── PROGRAMS — 세로로 스크롤하면 가로로 흐른다 ───────── */
.rail{ height:430vh; view-timeline-name:--rail; view-timeline-axis:block; }
.rail__stage{
  position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(26px,5vh,56px);
}
.rail__head{ padding-inline:var(--pad); max-width:var(--maxw); margin-inline:auto; width:100%; }
.rail__title{ font-size:clamp(28px,4.4vw,58px); }
.rail__hint{ display:flex; align-items:center; gap:12px; margin-top:22px; font-family:var(--display); font-style:italic; font-size:14px; color:var(--muted); }
.rail__hint i{ display:block; width:44px; height:1px; background:var(--peach-deep); }
.rail__track{
  display:flex; gap:clamp(14px,1.6vw,24px); width:max-content; padding-inline:var(--pad);
  animation:railX linear both; animation-timeline:--rail; animation-range:contain 0% contain 100%;
}
@keyframes railX{ to{ transform:translateX(calc(100vw - 100%)); } }
.pcard{
  width:clamp(268px,26vw,352px); flex:none; border-radius:14px; background:var(--card);
  border:1px solid var(--line); padding:clamp(24px,2.2vw,34px);
  display:flex; flex-direction:column; min-height:clamp(286px,40vh,368px);
  transition:background-color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.pcard:hover{ background:#fff; border-color:var(--ax); transform:translateY(-6px); }
.pcard[data-axis="move"]{ --ax:var(--ax-move); }
.pcard[data-axis="nourish"]{ --ax:var(--ax-nourish); }
.pcard[data-axis="rest"]{ --ax:var(--ax-rest); }
.pcard[data-axis="insight"]{ --ax:var(--ax-insight); }
.pcard__no{ font-family:var(--display); font-size:13px; letter-spacing:.2em; color:var(--muted); }
.pcard__axis{ display:block; font-family:var(--display); font-style:italic; font-size:18px; color:var(--ax); margin-top:16px; }
.pcard h3{ font-size:clamp(19px,1.8vw,24px); font-weight:400; margin:10px 0 14px; }
.pcard p{ color:var(--body); font-size:13.5px; line-height:1.85; flex:1; }
.pcard__meta{ margin-top:24px; padding-top:16px; border-top:1px solid var(--line); font-size:12px; color:var(--body); display:flex; justify-content:space-between; gap:10px; }
.pcard__meta i{ font-style:normal; color:var(--muted); }
/* 가로 레일을 못 쓰는 환경에서는 손으로 밀 수 있는 띠가 된다 */
@media (max-width:900px){
  .rail{ height:auto; }
  .rail__stage{ position:static; height:auto; padding-block:clamp(80px,12vh,140px); overflow:visible; }
  .rail__track{ width:auto; animation:none; transform:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; }
  .pcard{ scroll-snap-align:start; }
}
html.no-sdt .rail{ height:auto; }
html.no-sdt .rail__stage{ position:static; height:auto; padding-block:clamp(80px,12vh,140px); overflow:visible; }
html.no-sdt .rail__track{ width:auto; animation:none; transform:none; overflow-x:auto; }

/* ───────── RHYTHM ───────── */
.table-wrap{ overflow-x:auto; }
.table{ width:100%; min-width:860px; border-collapse:collapse; }
.table th,.table td{ padding:24px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.table thead th{ font-family:var(--display); font-size:13px; font-weight:400; letter-spacing:.2em; color:var(--muted); padding-bottom:12px; }
.table tbody th{ font-family:var(--display); font-size:clamp(20px,2vw,30px); color:var(--blue-deep); width:104px; white-space:nowrap; }
.table td b{ display:block; font-weight:400; font-size:15px; color:var(--ink); letter-spacing:-.02em; }
.table td i{ display:block; margin-top:5px; font-family:var(--display); font-style:italic; font-size:12.5px; color:var(--ax,var(--muted)); }
.table td[data-axis="move"]{ --ax:var(--ax-move); }
.table td[data-axis="nourish"]{ --ax:var(--ax-nourish); }
.table td[data-axis="rest"]{ --ax:var(--ax-rest); }
.table td[data-axis="insight"]{ --ax:var(--ax-insight); }
.table td.off span{ font-size:12px; color:var(--muted); }
.rhythm__note{ margin-top:32px; font-size:12.5px; color:var(--muted); }

/* ───────── SPACE ───────── */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.1vw,16px); grid-auto-rows:minmax(180px,auto); }
@keyframes shotIn{ from{ transform:scale(1.07) } to{ transform:none } }
.shot{
  position:relative; margin:0; min-height:240px; overflow:hidden; display:flex; align-items:flex-end;
  border-radius:clamp(10px,1.2vw,18px);
  /* 사진 교체: .shot[data-shot="river"]{ --img:url(img/river.jpg) } */
  background-image:var(--img, var(--proc)); background-size:cover; background-position:center;
  animation:shotIn linear both; animation-timeline:view(); animation-range:entry 0% cover 55%;
}
.shot::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(28,33,36,.62), transparent 58%); }
.shot--lead{ grid-column:span 2; grid-row:span 2; }
.shot--wide{ grid-column:span 2; }
.shot[data-shot="river"]  { --proc:radial-gradient(110% 80% at 26% 16%, #ffffff, transparent 62%), linear-gradient(200deg,#e7f0f3,#cfe0e7 55%,#a8c2ce); }
.shot[data-shot="kitchen"]{ --proc:radial-gradient(100% 80% at 72% 20%, #fffdf9, transparent 64%), linear-gradient(160deg,#f7f0e6,#ecdccd 58%,#cbb49f); }
.shot[data-shot="quiet"]  { --proc:radial-gradient(100% 80% at 40% 74%, #fdfcfa, transparent 62%), linear-gradient(20deg,#f2f0f2,#e0dde3 56%,#b9b5c0); }
.shot[data-shot="lounge"] { --proc:radial-gradient(90% 110% at 60% 28%, #fffefb, transparent 60%), linear-gradient(140deg,#f6f3ec,#e6e2d7 52%,#c2beb0); }
.shot figcaption{ position:relative; z-index:1; padding:clamp(18px,1.8vw,30px); color:#fff; }
.shot figcaption b{ display:block; font-size:17px; font-weight:400; }
.shot figcaption span{ display:block; margin-top:5px; font-size:12px; color:rgba(255,255,255,.82); }
@media (max-width:880px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .shot--lead,.shot--wide{ grid-column:span 2; grid-row:auto; }
}
.quote{ margin:clamp(64px,10vh,130px) 0 0; padding-left:clamp(16px,2.2vw,34px); border-left:1px solid var(--peach-deep); max-width:clamp(300px,54vw,760px); }
.quote p{ font-size:clamp(19px,2.5vw,34px); font-weight:200; color:var(--ink); line-height:1.56; letter-spacing:-.04em; }
.quote cite{ display:block; margin-top:24px; font-style:normal; font-family:var(--display); font-size:13px; letter-spacing:.2em; color:var(--muted); }

/* ───────── MEMBERSHIP ───────── */
.plans{ display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:clamp(12px,1.4vw,20px); align-items:start; }
.plan{ position:relative; padding:clamp(30px,2.8vw,46px); background:var(--card); border:1px solid transparent; border-radius:14px; transition:border-color .5s var(--ease), background-color .5s var(--ease), transform .5s var(--ease); }
.plan:hover{ border-color:var(--peach-deep); background:#fff; transform:translateY(-5px); }
.plan--best{ background:var(--peach); }
.plan__badge{ position:absolute; top:-11px; left:clamp(30px,2.8vw,46px); padding:4px 14px; border-radius:99px; background:var(--ink); color:var(--warm-white); font-size:10.5px; letter-spacing:.06em; }
.plan h3{ font-family:var(--display); font-size:30px; font-weight:400; letter-spacing:.18em; text-indent:.18em; }
.plan__ko{ font-size:12px; letter-spacing:.14em; color:var(--muted); margin-top:8px; }
.plan__price{ font-family:var(--display); font-size:clamp(33px,3.4vw,46px); color:var(--ink); margin:22px 0 4px; }
.plan__price em{ font-family:var(--ui); font-size:12.5px; font-weight:300; color:var(--muted); margin-left:7px; }
.plan__for{ color:var(--body); font-size:13px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.plan ul{ margin:26px 0 32px; display:grid; gap:12px; }
.plan li{ position:relative; padding-left:18px; font-size:13.5px; color:var(--body); }
.plan li::before{ content:''; position:absolute; left:0; top:.7em; width:6px; height:1px; background:var(--peach-deep); }
.plan .btn{ width:100%; justify-content:center; }
.plan--best .btn--solid{ background:#fff; }
.plan--best .btn--solid:hover{ background:var(--pale-blue); }

/* ───────── FAQ ───────── */
.faq__list{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  list-style:none; cursor:pointer; position:relative; padding:30px 46px 30px 0;
  font-size:clamp(16px,1.7vw,22px); font-weight:300; color:var(--ink); letter-spacing:-.03em; transition:color .35s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after,.faq summary::before{ content:''; position:absolute; right:6px; top:50%; width:13px; height:1px; background:var(--peach-deep); transition:transform .4s var(--ease), opacity .4s; }
.faq summary::before{ transform:rotate(90deg); }
.faq details[open] summary::before{ transform:rotate(0); opacity:0; }
.faq summary:hover{ color:var(--peach-deep); }
.faq details p{ padding:0 clamp(24px,7vw,110px) 30px 0; color:var(--body); font-size:14px; line-height:1.9; }

/* ───────── JOIN ───────── */
.join{ text-align:center; }
.join__title{ font-size:clamp(26px,4.2vw,58px); max-width:18ch; margin-inline:auto; line-height:1.4; }
.join__sub{ margin-top:24px; color:var(--body); font-size:14.5px; }
.join__form{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:520px; margin:clamp(42px,6vh,66px) auto 0; text-align:left; }
.field{ display:block; } .field--wide{ grid-column:1/-1; }
.field span{ display:block; font-size:11px; letter-spacing:.12em; color:var(--muted); margin-bottom:9px; }
.field input,.field select{
  width:100%; padding:15px; border:1px solid var(--line); border-radius:4px;
  background:rgba(255,255,255,.6); font-size:15px; font-weight:300; transition:border-color .4s;
}
.field input::placeholder{ color:var(--muted); }
.field input:focus,.field select:focus{ outline:none; border-color:var(--peach-deep); }
.join__form .btn{ grid-column:1/-1; }
.join__msg{ grid-column:1/-1; min-height:22px; font-size:13px; color:var(--blue-deep); text-align:center; }
.join__msg[data-state="err"]{ color:#b5705a; }
@media (max-width:560px){ .join__form{ grid-template-columns:1fr; } }

/* ───────── FOOTER ───────── */
.footer{ position:relative; z-index:2; padding:clamp(58px,8vh,90px) var(--pad) 42px; border-top:1px solid var(--line); max-width:var(--maxw); margin-inline:auto; }
.footer__top{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 28px; margin-bottom:clamp(38px,6vh,62px); }
.footer__mark{ font-family:var(--display); font-size:clamp(26px,3.4vw,42px); letter-spacing:.28em; text-indent:.28em; color:var(--ink); }
.footer__line{ font-size:13.5px; color:var(--body); }
.footer__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:28px; }
.footer__cols b{ display:block; font-size:11px; font-weight:400; letter-spacing:.16em; color:var(--muted); margin-bottom:12px; }
.footer__cols p{ font-size:13.5px; line-height:1.85; color:var(--body); }
.footer__fine{ margin-top:clamp(42px,6vh,68px); font-size:11px; color:var(--muted); }