/* ============================================================
   Unsui — ランディング（index.html）専用スタイル
   ------------------------------------------------------------
   色・字・寸法の定義は tokens.css が正本。ここでは var() を使うだけ。
   読み込み順は tokens.css → unsui.css（このファイルが後）。
   ============================================================ */

/* 自前ホストの Noto Serif JP サブセット。index.html の使用グリフのみを
   可変ウェイト1本に詰めたもので、収録外の字は出せない。そのため法務ページ
   （長文・語彙が広い）とはファミリー名を分け、あちらは Google Fonts の
   フルセットを使う。同名にすると法務ページ側で字が欠ける。
   url() は HTML ではなくこの CSS からの相対パスであることに注意。 */
@font-face {
  font-family: "Noto Serif JP Subset";
  src: url("fonts/NotoSerifJP-subset.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ランディングだけサブセットを最優先にする（tokens.css の --font を上書き）。 */
:root { --font: "Noto Serif JP Subset", "Noto Serif JP", serif; }

/* 下地はほぼ tokens.css。ランディング固有の分だけ足す。 */
body { overflow-x: hidden; position: relative; }

body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(72% 48% at 50% -8%, rgb(var(--gold-600) / .10), transparent 62%),
    radial-gradient(60% 50% at 50% 108%, rgb(var(--gold-700) / .06), transparent 66%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
.wrap{ position:relative; z-index:2; }
.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

.kicker{ font-size:.82rem; font-weight:500; letter-spacing:.5em; text-transform:uppercase; color:var(--gold); }

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  font-family:var(--font); font-weight:500; font-size:1.02rem; letter-spacing:.18em;
  padding:1em 2.6em; border-radius:var(--radius); text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.8em; border:1px solid transparent; white-space:nowrap;
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, background .4s ease, color .4s ease;
}
.btn .arr{ transition:transform .4s ease; }
.btn:hover .arr{ transform:translateX(6px); }
.btn-primary{ background:var(--gold); color:rgb(var(--ink-950)); box-shadow:0 10px 34px rgb(var(--gold-700) / .26); }
.btn-primary:hover{ transform:translateY(-3px); background:rgb(var(--gold-600)); box-shadow:0 18px 46px rgb(var(--gold-700) / .36); }

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.4rem var(--gutter);
  transition:background .5s ease, padding .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;
}
.nav.solid{ background:rgb(var(--ink-950) / .8); backdrop-filter:blur(14px) saturate(1.1); padding-block:.8rem; box-shadow:0 1px 0 var(--line-gold); }
/* ロゴはアプリと同じ英字ワードマーク「UNSUI」（New York / 400 / tracking .45em / ink200）。 */
.brand{ display:inline-flex; align-items:center; text-decoration:none; color:inherit; }
.brand .lat{ font-family:ui-serif, "New York", "Noto Serif JP Subset", "Noto Serif JP", serif; font-weight:400; font-size:1.18rem; letter-spacing:.45em; text-transform:uppercase; color:rgb(var(--ink-200)); }
/* ナビ右はトグル＋CTAの2点のみ。 */
.nav .links{ display:flex; gap:1rem; align-items:center; }
/* トグルは EN 表示で「日本語」(3字)になる。flex で潰れて改行されないよう nowrap＋非縮小に。 */
.lang-btn{ font-family:var(--font); font-weight:500; font-size:.82rem; letter-spacing:.1em; color:var(--text-2); background:none; border:1px solid var(--line-gold); border-radius:var(--radius); padding:.42em .9em; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:color .3s ease, border-color .3s ease; }
.lang-btn:hover{ color:var(--gold); border-color:var(--gold); }
/* ナビ右の「入手」は"主ボタン"を名乗らず、金の文字リンクとして退く。
   塗りの金ボタンはヒーローと最終CTAの2か所だけ＝金の貴さと"ボタン言語"を一本化（Ive）。 */
.nav a.dl{ padding:.4em .3em; font-size:.92rem; font-weight:600; white-space:nowrap; flex-shrink:0; background:none; border:none; box-shadow:none; color:var(--gold); }
.nav a.dl:hover{ color:rgb(var(--gold-300)); transform:none; }

/* 反・採点の宣言（ヒーロー直下で一度言い切る） */
.manifesto{ text-align:center; font-weight:500; font-size:clamp(1.15rem,2.6vw,1.6rem); letter-spacing:.1em; color:var(--text); margin-bottom:clamp(2.5rem,6vw,4rem); }

/* ── hero ────────────────────────────────────────────────── */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-rows:1fr auto 1fr; align-items:center; justify-items:center;
  text-align:center; padding:6.5rem var(--gutter) 3rem; overflow:hidden;
}
.hero-enso{ position:absolute; top:50%; left:50%; transform:translate(-50%,-52%); width:min(76vh,720px); aspect-ratio:1; z-index:0; pointer-events:none; }
.hero-enso img{ width:100%; height:100%; object-fit:contain; opacity:0; transform:scale(.92) rotate(-6deg); }
.loaded .hero-enso img{ animation:enso-in 2.4s cubic-bezier(.6,.02,.2,1) .3s forwards; }
@keyframes enso-in{ to{ opacity:.72; transform:scale(1) rotate(0); } }

/* 雲水（主＝名前）＋ UNSUI（読み・従）。ブランドの主従を一目で示す。 */
.hero-mark{ grid-row:2; position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:clamp(.15rem,.8vw,.4rem); }
.hero-title{ text-align:center; font-weight:900; font-size:clamp(3.8rem,15vh,8rem); letter-spacing:0; line-height:1.0; color:rgb(var(--ink-50)); }
.hero-romaji{ font-family:ui-serif, "New York", "Noto Serif JP Subset", "Noto Serif JP", serif; font-weight:400; font-size:clamp(.7rem,1.7vw,.86rem); letter-spacing:.5em; text-indent:.5em; text-transform:uppercase; color:rgb(var(--ink-300)); text-shadow:0 1px 14px rgb(var(--ink-950)); opacity:0; }
.hero-title .c{ display:block; opacity:0; transform:translateY(22px); text-shadow:0 0 40px rgb(var(--ink-950)),0 0 14px rgb(var(--ink-950)); }
.loaded .hero-title .c{ animation:rise 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
.loaded .hero-title .c:nth-child(1){ animation-delay:.9s; } .loaded .hero-title .c:nth-child(2){ animation-delay:1.08s; }
.loaded .hero-romaji{ animation:fade 1.2s ease 1.45s forwards; }

.hero-foot{ grid-row:3; align-self:start; position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1.5rem; }
.hero-tagline{ font-weight:500; font-size:clamp(1.15rem,2.6vw,1.55rem); letter-spacing:.1em; color:var(--text); opacity:0; text-shadow:0 1px 18px rgb(var(--ink-950)),0 0 8px rgb(var(--ink-950)); }
.hero-cta{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; opacity:0; }
/* Apple の製品名は綴り固定（iPhone/iPad）。全大文字化はブランド規約違反のため不可。 */
.hero-note{ font-size:.82rem; letter-spacing:.12em; color:var(--text-3); }
.loaded .hero-tagline{ animation:rise 1s cubic-bezier(.2,.8,.2,1) 1.35s forwards; }
.loaded .hero-cta{ animation:rise 1s cubic-bezier(.2,.8,.2,1) 1.55s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@keyframes fade{ to{ opacity:1; } }

/* ── device frame (iPhone, dark-locked, floats on washi) ──── */
.stage{ position:relative; isolation:isolate; }
.stage::before{ content:""; position:absolute; inset:-8% -6% -14%; z-index:-1; background:radial-gradient(56% 60% at 50% 56%, rgb(var(--gold-600) / .12), transparent 72%); filter:blur(44px); }
/* iPhone（縦）の額。スクショに iOS のステータスバー/ダイナミックアイランドが含まれる。 */
/* 墨地に置く端末。墨に近いベゼルが地に沈まないよう、金の細縁＋柔らかな金のハロー＋黒影で浮かせる。 */
.phone{ position:relative; width:min(290px,70vw); margin-inline:auto; border-radius:42px; padding:7px; background:#070605; border:1px solid rgb(201 168 108 / .42);
  box-shadow:
    inset 0 0 0 1px rgb(228 201 138 / .16),
    0 0 0 1px rgb(11 10 8 / .9),
    0 26px 70px -24px rgb(0 0 0 / .75),
    0 0 60px -10px rgb(201 168 108 / .10); }
/* aspect-ratio をベゼルと画像でロックし、読み込み前後とも歪み・段差を出さない。 */
.phone img, .phone video{ display:block; width:100%; height:auto; aspect-ratio:620 / 1348; border-radius:35px; filter:brightness(1.05) contrast(1.02); object-fit:cover; }
/* 特徴節の端末は、列幅に映えるよう少し大きく。 */
.feat-media .phone{ width:min(312px,80vw); }

/* ── iPad（横ベゼル）。墨地に沈まぬよう金縁＋ハロー。比率 1024:1473＝実機。 ── */
.tablet{ position:relative; width:min(560px,88vw); margin-inline:auto; border-radius:30px; padding:11px; background:#070605; border:1px solid rgb(201 168 108 / .42);
  box-shadow:
    inset 0 0 0 1px rgb(228 201 138 / .16),
    0 0 0 1px rgb(11 10 8 / .9),
    0 30px 84px -26px rgb(0 0 0 / .8),
    0 0 76px -12px rgb(201 168 108 / .12); }
.tablet img{ display:block; width:100%; height:auto; aspect-ratio:1024 / 1473; border-radius:20px; filter:brightness(1.05) contrast(1.02); }

/* ── ヒーローは iPhone 一台に集中（親密さ）。iPad は別節でそっと添える。 ── */
.reveal-app .phone.hero-phone{ width:min(322px,74vw); }
.ipad-band{ padding:clamp(2rem,5vw,4rem) 0 clamp(5rem,11vw,8rem); text-align:center; }
.ipad-note{ margin-top:clamp(2rem,4vw,3rem); font-weight:300; font-size:clamp(1.05rem,2vw,1.25rem); letter-spacing:.1em; color:var(--text-2); text-wrap:balance; }

/* ── product reveal ──────────────────────────────────────── */
.reveal-app{ position:relative; z-index:3; padding:clamp(2rem,5vw,4rem) 0 clamp(4rem,8vw,6rem); }
.reveal-app .frame{ max-width:980px; margin-inline:auto; }
.props{ display:flex; justify-content:center; align-items:center; gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap; margin-top:clamp(3.5rem,7vw,5.5rem); }
.props span{ font-size:1.02rem; font-weight:400; letter-spacing:.14em; color:var(--text-2); }
/* 中黒は光学的に中央へ（前後アキは flex gap で対称、字面だけ微調整）。 */
.props b{ color:var(--text-3); font-weight:400; opacity:.6; font-size:.92em; line-height:1; display:inline-block; transform:translateY(-.06em); }

/* ── section scaffolding (generous 間) ───────────────────── */
section{ position:relative; z-index:2; }
/* 質量を持って落ち、ほんの少し行き過ぎて、そっと落ち着く（重力に近い減速）。 */
.reveal{ opacity:0; transform:translateY(36px); transition:opacity 1.15s ease, transform 1.3s cubic-bezier(.2,.82,.24,1.04); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.14s; } .reveal.d2{ transition-delay:.28s; }
.sec-kick{ text-align:center; margin-bottom:clamp(3rem,6vw,4.5rem); }
.sec-sub{ margin-top:1.2rem; font-weight:300; font-size:1.06rem; letter-spacing:.1em; color:var(--text-2); }
.creed-note{ text-align:center; margin-top:clamp(2.5rem,5vw,3.5rem); font-weight:300; font-size:.98rem; letter-spacing:.08em; color:var(--text-2); }

/* ── features ────────────────────────────────────────────── */
.features{ padding:clamp(4.5rem,9vw,7rem) 0; }
.feat{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,6rem); align-items:center; margin-bottom:clamp(5rem,10vw,8rem); }
.feat:last-child{ margin-bottom:0; }
.feat:nth-child(even) .feat-media{ order:2; }
@media(max-width:880px){ .feat{ grid-template-columns:1fr; gap:2.5rem; } .feat:nth-child(even) .feat-media{ order:0; } }
/* 番号は索引として墨に沈め、見出しを主役に（Ive #4）。 */
.feat-no{ font-weight:300; font-size:.88rem; letter-spacing:.5em; color:var(--text-3); }
/* 無料は無印、Pro だけ金の小さな語で註す。囲い(ピル)はやめ、声を一つに（Ive #1）。 */
.feat-meta{ display:flex; align-items:baseline; gap:1.1rem; }
.feat-tag{ font-size:.7rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.feat-title{ font-weight:700; font-size:clamp(2.4rem,4.6vw,3.4rem); letter-spacing:.14em; line-height:1.1; color:var(--text); margin:1.2rem 0; }
.feat-title .en{ display:block; font-size:.36em; font-weight:400; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); margin-top:1rem; }
.feat-line{ font-weight:300; font-size:clamp(1.05rem,2vw,1.25rem); letter-spacing:.1em; color:var(--text-2); }
/* 初学者向けの平易な一言（詩的な一句の下に、普段のことばで） */
/* 説明本文は読む文章なので、淡い text-3 から一段明るい text-2 へ（暗背景でのコントラスト確保）。 */
.feat-desc{ margin-top:1.2rem; font-weight:300; font-size:1rem; line-height:1.9; letter-spacing:.04em; color:var(--text-2); max-width:25rem; }

/* ── creed 四聖句 ────────────────────────────────────────── */
.creed{ padding:clamp(5rem,10vw,8rem) 0; position:relative; overflow:hidden; }
/* 背景の「禪」透かしは撤去（"気分の装飾"を引き、四聖句の意味だけを残す）。 */
.creed-row{ display:grid; grid-template-columns:repeat(4,auto); justify-content:center; align-items:start; column-gap:clamp(1.6rem,5vw,4.5rem); }
@media(max-width:620px){ .creed-row{ grid-template-columns:repeat(2,auto); justify-items:center; column-gap:clamp(2.4rem,16vw,5rem); row-gap:clamp(2.6rem,8vw,3.5rem); } }
.phrase{ writing-mode:vertical-rl; text-orientation:upright; font-weight:600; font-size:clamp(1.6rem,2.8vw,2.2rem); letter-spacing:.26em; line-height:1.15; color:var(--text); display:flex; flex-direction:column; align-items:center; }
/* よみ/英訳は字間を詰め幅を制限し、長い英訳（"Outside the scriptures" 等）がセルからはみ出して
   見切れないよう、セル内で折り返す。日本語のよみも同じ規則で収まる。 */
.phrase .yomi{ writing-mode:horizontal-tb; text-orientation:mixed; font-size:.72rem; font-weight:300; letter-spacing:.12em; color:var(--text-3); margin-top:1.1rem; max-width:9em; text-align:center; line-height:1.45; overflow-wrap:break-word; }

/* ── lineage 系譜 ────────────────────────────────────────── */
.lineage{ padding:clamp(5rem,10vw,8rem) 0; }
.timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.4rem,3vw,2.6rem); margin-bottom:clamp(4rem,8vw,6rem); }
@media(max-width:760px){ .timeline{ grid-template-columns:1fr 1fr; gap:2rem; } }
@media(max-width:430px){ .timeline{ grid-template-columns:1fr; } }
.tl{ text-align:center; }
.tl .yr{ font-weight:300; font-size:1.6rem; color:var(--gold); letter-spacing:.04em; }
.tl .nm{ font-weight:700; font-size:1.15rem; letter-spacing:.16em; color:var(--text); margin:.8rem 0 .5rem; }
.tl .ds{ font-size:.88rem; font-weight:300; letter-spacing:.08em; color:var(--text-2); }
.lineage .close{ text-align:center; font-weight:400; font-size:clamp(1.05rem,2.2vw,1.35rem); letter-spacing:.12em; color:var(--text-2); }
.lineage .close b{ color:var(--gold); font-weight:500; }

/* ── way in 入山（料金・無料/Pro・トライアル）─────────────── */
.wayin{ padding:clamp(4.5rem,9vw,7rem) 0; }
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem); max-width:900px; margin-inline:auto; }
@media(max-width:680px){ .plans{ grid-template-columns:1fr; } }
.plan{ border:1px solid var(--line-gold); border-radius:6px; padding:clamp(1.8rem,4vw,2.6rem); background:rgb(var(--ink-900) / .4); }
/* Pro は枠や影で"大声"を出さず、同じ枠のまま淡い金の地で格だけ示す（無料先行と整合・Ive）。 */
.plan.pro{ background-image:linear-gradient(rgb(var(--gold-700) / .10), transparent 60%); }
.plan .tier{ font-weight:500; font-size:.82rem; letter-spacing:.4em; text-transform:uppercase; color:var(--gold); }
.plan .price{ font-weight:300; font-size:clamp(1.7rem,3.4vw,2.3rem); letter-spacing:.04em; color:var(--text); margin:.7rem 0 .2rem; }
.plan .price small{ font-size:.5em; letter-spacing:.1em; color:var(--text-3); margin-left:.5em; }
/* 月額はそっと退き、年額（best value）を視線の落ち着く先に。中黒はトリオと同じ光学調整。 */
.plan .price .mo{ color:var(--text-2); }
.plan .price .yr{ color:var(--text); }
.plan .price .sep{ font-style:normal; color:var(--text-3); opacity:.55; font-size:.92em; display:inline-block; transform:translateY(-.06em); margin:0 .5em; }
/* 年額への静かな導き（入口とアプリの態度を一致させる）。 */
.plan .best-note{ margin-top:.35rem; font-size:.72rem; letter-spacing:.16em; color:var(--gold); }
.plan ul{ list-style:none; margin-top:1.4rem; display:flex; flex-direction:column; gap:.7rem; }
.plan li{ font-weight:300; font-size:1.02rem; letter-spacing:.04em; color:var(--text-2); padding-left:1.3rem; position:relative; line-height:1.7; }
.plan li::before{ content:"○"; position:absolute; left:0; top:0; font-size:.78rem; color:rgb(var(--ink-400)); }
.wayin .trial{ text-align:center; margin-top:clamp(2.4rem,5vw,3.4rem); font-weight:400; font-size:clamp(1.05rem,2.2vw,1.3rem); letter-spacing:.1em; color:var(--text); }
.wayin .trial b{ color:var(--gold); font-weight:500; }
.wayin .trial-note{ text-align:center; margin-top:.9rem; font-size:.88rem; letter-spacing:.08em; color:var(--text-2); }

/* ── final CTA ───────────────────────────────────────────── */
.cta{ padding:clamp(7rem,15vw,12rem) 0; text-align:center; position:relative; overflow:hidden; }
.cta .ring{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(58vw,460px); aspect-ratio:1; opacity:.5; pointer-events:none; }
.cta .ring svg{ width:100%; height:100%; } .cta .ring path{ fill:none; stroke:rgb(var(--gold-700) / .3); stroke-width:.5; }
.cta-inner{ position:relative; z-index:2; }
.cta h2{ font-weight:600; font-size:clamp(2.4rem,6vw,3.8rem); letter-spacing:.12em; color:var(--text); margin-bottom:1.4rem; }
.cta-sub{ font-weight:300; font-size:1.08rem; letter-spacing:.1em; color:var(--text-2); margin-bottom:2.6rem; }
.cta .platforms{ margin-top:1.6rem; font-size:.82rem; letter-spacing:.12em; color:var(--text-3); }

/* ── footer ──────────────────────────────────────────────── */
footer{ border-top:1px solid var(--line-gold); padding:3rem 0 2rem; position:relative; z-index:2; }
.foot-grid{ display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap; font-size:.86rem; letter-spacing:.1em; color:var(--text-3); }
.foot-links{ display:flex; gap:1.8rem; flex-wrap:wrap; }
.foot-links a{ color:var(--text-2); text-decoration:none; font-size:.86rem; letter-spacing:.1em; transition:color .3s ease; }
.foot-links a:hover{ color:var(--gold); }
/* 注意書きは安全情報（相談窓口）を含むため、opacity による減光をやめて確実に読めるように。 */
.disclaimer{ margin-top:1.8rem; font-size:.8rem; line-height:1.9; letter-spacing:.06em; color:var(--text-2); }

/* ── テキスト描画の仕上げ（見切れ・改行位置・アンカー位置の対策）──────── */
/* 中央寄せの見出し/説明文は行を均し、孤立語（"…No / scores" のような割れ）を防ぐ。 */
.hero-tagline, .manifesto, .sec-sub, .lineage .close, .creed-note, .cta-sub, .cta .platforms, .wayin .trial, .wayin .trial-note{ text-wrap: balance; }
/* 固定ナビにアンカー先のセクション頭が隠れないよう余白を確保（#features/#plans/#lineage/#get/#creed）。 */
section[id]{ scroll-margin-top: 5.5rem; }
/* モバイルで props が縦積みになると区切りの「·」が行末に残るので隠す。 */
@media(max-width:480px){ .props b{ display:none; } }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-enso img{ opacity:.72; transform:none; }
  .hero-title .c,.hero-romaji,.hero-tagline,.hero-cta{ opacity:1 !important; transform:none !important; }
}