/* ===== TENSU LP — The Palette IS the Page ===== */

:root {
  --bg: #FEFCF9;
  --surface: #FFF;
  --ink: #1A1612;
  --ink-soft: #9A9080;
  --ink-on-color: #FFF8EE;
  --line: rgba(26,22,18,.07);
  --ease: cubic-bezier(.22,1,.36,1);
  --max-w: 1040px;
  --score-color: transparent;
}
[data-theme="dark"] {
  --bg: #0E0D0C;
  --surface: #181716;
  --ink: #EFEBE3;
  --ink-soft: #7A7265;
  --ink-on-color: #EFEBE3;
  --line: rgba(239,235,227,.06);
}

*,*::before,*::after { box-sizing:border-box }
html,body { margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family: "Noto Sans JP",system-ui,sans-serif;
  color: var(--ink); background: var(--bg);
  line-height: 1.75; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .5s var(--ease);
}
body.scored { background: var(--score-color) }
a { color: var(--ink) }
img { max-width:100%; height:auto; display:block }

/* grain */
.grain {
  position: fixed; inset: 0; z-index: 999;
  pointer-events: none; opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 200px;
}
[data-theme="dark"] .grain { opacity: 0.04 }

.skip-link { position:fixed; left:8px; top:-100px; z-index:10000; padding:8px 16px; border-radius:8px; text-decoration:none; color:#fff; background:var(--ink) }
.skip-link:focus { top:8px }

/* ===== Header ===== */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  transition: background .3s, backdrop-filter .3s, -webkit-backdrop-filter .3s;
}
body.scored .header {
  background: color-mix(in srgb, var(--score-color) 80%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.header-inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 12px 40px; display: flex; align-items: center; justify-content: space-between;
}
.logo { text-decoration:none; font-size:15px; font-weight:800; letter-spacing:.18em; color:var(--ink); transition: color .3s }
body.scored.dark-text .logo { color: var(--ink) }
body.scored.light-text .logo { color: var(--ink-on-color) }
.header-nav { display:flex; gap:24px; align-items:center }
.header-nav a { font-size:13px; font-weight:500; color:var(--ink-soft); text-decoration:none; transition:color .15s }
.header-nav a:hover { color:var(--ink) }
body.scored.light-text .header-nav a { color: rgba(255,255,255,.4) }
body.scored.light-text .header-nav a:hover { color: rgba(255,255,255,.8) }
body.scored.dark-text .header-nav a { color: rgba(0,0,0,.35) }
body.scored.dark-text .header-nav a:hover { color: var(--ink) }
.header-controls { display:flex; gap:6px; align-items:center }
.toggle-btn {
  display:flex; gap:2px; padding:2px;
  border:1px solid var(--line); border-radius:7px;
  background:transparent; cursor:pointer; font-size:11px;
}
.toggle-option { padding:3px 7px; border-radius:5px; color:var(--ink-soft); transition:all .15s; line-height:1 }
.toggle-option.active { background:var(--ink); color:var(--bg); font-weight:600 }

/* ===== Hero = Full-screen palette ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
}
/* palette fills hero completely */
.hero-palette {
  position: absolute; inset: 0;
  display: flex;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.color-stripe {
  flex: 1; background: var(--c);
  cursor: pointer;
  transition: flex .2s var(--ease), filter .2s;
  position: relative;
  overflow: hidden;
}
.color-stripe:hover,
.color-stripe.selected { flex: 3 }
.color-stripe::after {
  content: attr(data-score);
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; font-weight: 700; color: var(--ink);
  opacity: .25;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .15s, font-size .2s var(--ease), bottom .2s var(--ease);
}
.color-stripe:hover::after { opacity: .9; font-size: 20px; bottom: 40px }
/* after selection — hide palette, hero becomes score color */
body.scored .hero { background: var(--score-color) }
body.scored .hero-palette { opacity: 0; pointer-events: none; transition: opacity .4s var(--ease) }

/* overlay text on top of palette */
.hero-overlay {
  position: relative; z-index: 2;
  text-align: center; padding: 0 40px;
  pointer-events: none;
}
.hero-overlay > * { pointer-events: auto }

.hero-question {
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.04em;
  margin: 0 0 20px;
  color: var(--ink);
  transition: font-size .4s var(--ease), color .3s, margin .3s;
}
[data-theme="dark"] .hero-question { color: var(--ink-on-color) }
body.scored .hero-question {
  font-size: clamp(14px, 2vw, 18px); font-weight: 600;
  letter-spacing: 0; margin: 0 0 8px;
}
body.scored.light-text .hero-question { color: #fff }
body.scored.dark-text .hero-question { color: var(--ink) }

/* hint */
.hero-hint {
  font-size: clamp(14px, 2vw, 18px); font-weight: 500;
  color: var(--ink-soft); margin: 0;
  transition: opacity .3s var(--ease);
}
[data-theme="dark"] .hero-hint { color: var(--ink-soft) }
body.scored .hero-hint { opacity: 0; pointer-events: none; max-height: 0; overflow: hidden }

/* response */
.hero-response { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease), opacity .3s }
body.scored .hero-response { max-height: 400px; opacity: 1; padding-top: 24px }
.hero-score-num {
  font-size: clamp(80px, 20vw, 160px);
  font-weight: 800; line-height: 1; letter-spacing: -0.04em;
  margin: 0 0 8px;
}
body.scored.light-text .hero-score-num { color: #fff }
body.scored.dark-text .hero-score-num { color: var(--ink) }
.hero-message {
  font-size: clamp(20px, 3.5vw, 30px);
  font-weight: 600; line-height: 1.5; margin: 0;
}
body.scored.light-text .hero-message { color: #fff }
body.scored.dark-text .hero-message { color: var(--ink) }

/* after = tagline + cta */
.hero-after { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s var(--ease) .15s, opacity .3s var(--ease) .25s }
body.scored .hero-after { max-height: 200px; opacity: 1; padding-top: 40px }
.hero-tagline { font-size: clamp(13px, 1.8vw, 16px); margin: 0 0 20px }
body.scored.light-text .hero-tagline { color: rgba(255,255,255,.95) }
body.scored.dark-text .hero-tagline { color: var(--ink) }
body.scored.light-text .hero-after .cta-btn {
  background: rgba(255,255,255,.15); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.2);
}
body.scored.dark-text .hero-after .cta-btn { background: var(--ink); color: var(--bg); border: none }

/* anim */
.anim-up { opacity:0; transform:translateY(24px); animation:animUp .5s var(--ease) forwards }
.d1 { animation-delay:.1s } .d2 { animation-delay:.25s } .d3 { animation-delay:.4s }
@keyframes animUp { to { opacity:1; transform:translateY(0) } }

/* ===== CTA ===== */
.cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 36px; background:var(--ink); color:var(--bg);
  border:none; border-radius:100px;
  font-size:14px; font-weight:700; text-decoration:none; cursor:pointer;
  transition: transform .2s var(--ease), background .3s, color .3s;
}
.cta-btn:hover { transform:translateY(-3px) }
.cta-btn svg { width:17px; height:17px; fill:currentColor }

/* ===== Showcase ===== */
.showcase { padding:160px 40px; transition: background-color .5s }
.showcase-inner {
  max-width:var(--max-w); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
}
.showcase-text h2 { font-size:clamp(26px,4.5vw,40px); font-weight:800; line-height:1.15; margin:0 0 16px }
.showcase-text p { font-size:15px; color:var(--ink-soft); margin:0 0 32px; line-height:1.9 }
.shot-tabs { display:flex; gap:4px; flex-wrap:wrap }
.shot-tab {
  padding:7px 16px; border:1px solid var(--line); border-radius:100px;
  background:transparent; color:var(--ink-soft); font-size:12px; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.shot-tab:hover { border-color:var(--ink-soft); color:var(--ink) }
.shot-tab.active { background:var(--ink); border-color:var(--ink); color:var(--bg) }

.showcase-device { display:flex; justify-content:center; perspective:1000px }
.reveal-device .device-frame { opacity:0; transform:translateY(60px) rotateX(6deg); transition:opacity .5s var(--ease),transform .5s var(--ease) }
.reveal-device.in-view .device-frame { opacity:1; transform:translateY(0) rotateX(0) }
.device-frame {
  width:260px; aspect-ratio:9/19.5;
  background:#000; border-radius:48px; padding:8px;
}
.device-screen { width:100%; height:100%; border-radius:40px; overflow:hidden; background:var(--bg) }
.device-screen img { width:100%; height:100%; object-fit:cover }

/* ===== Concept ===== */
.concept { padding:140px 40px; text-align:center }
.concept-quote {
  font-size:clamp(20px,3.8vw,34px); font-weight:700; line-height:1.9;
  margin:0 auto; max-width:680px; color:var(--ink);
}

/* ===== Features ===== */
.features { display:flex; flex-direction:column }
.feature-section { border-bottom:1px solid var(--line) }
.feature-section:last-child { border-bottom:none }
body.scored .feature-section { border-bottom-color: rgba(255,255,255,.1) }
body.scored.dark-text .feature-section { border-bottom-color: rgba(0,0,0,.07) }
.feature-text-row {
  padding:80px 40px; max-width:640px; margin:0 auto; text-align:center;
}
.feature-text-row h3 { font-size:clamp(22px,3.5vw,30px); font-weight:800; margin:0 0 10px; line-height:1.3 }
.feature-text-row p { font-size:15px; color:var(--ink-soft); margin:0; line-height:1.9 }

/* ===== Reveal ===== */
.reveal-stagger { opacity:0; transform:translateY(20px); transition:opacity .4s var(--ease),transform .4s var(--ease) }
.reveal-stagger.in-view { opacity:1; transform:translateY(0) }
.reveal-stagger-group > * { opacity:0; transform:translateY(20px); transition:opacity .4s var(--ease),transform .4s var(--ease) }
.reveal-stagger-group.in-view > *:nth-child(1){opacity:1;transform:translateY(0);transition-delay:0s}
.reveal-stagger-group.in-view > *:nth-child(2){opacity:1;transform:translateY(0);transition-delay:.08s}
.reveal-stagger-group.in-view > *:nth-child(3){opacity:1;transform:translateY(0);transition-delay:.16s}
.reveal-scale { opacity:0; transform:scale(.95); transition:opacity .5s var(--ease),transform .5s var(--ease) }
.reveal-scale.in-view { opacity:1; transform:scale(1) }

/* ===== How to Use ===== */
.how { padding:100px 40px; max-width:640px; margin:0 auto }
.how h2 { font-size:clamp(24px,4vw,32px); font-weight:800; margin:0 0 48px }
.steps { display:flex; flex-direction:column; gap:40px }
.step { display:flex; gap:20px; align-items:flex-start }
.step-num { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--ink); color:var(--bg); font-size:15px; font-weight:800; line-height:1 }
body.scored.light-text .step-num { background:rgba(255,255,255,.9); color:var(--score-color) }
body.scored.dark-text .step-num { background:var(--ink); color:var(--score-color) }
.step h3 { font-size:17px; font-weight:700; margin:0 0 4px; line-height:1.3 }
.step p { font-size:14px; color:var(--ink-soft); margin:0; line-height:1.8 }

/* ===== Premium ===== */
.premium { padding:120px 40px; text-align:center }
.premium-inner { max-width:560px; margin:0 auto }
.premium h2 { font-size:clamp(26px,4.5vw,36px); font-weight:800; line-height:1.3; margin:0 0 12px }
.premium-lead { font-size:15px; color:var(--ink-soft); margin:0 0 48px; line-height:1.8 }
.price-row { display:flex; justify-content:center; gap:14px; margin-bottom:28px }
.price-card {
  padding:28px 36px; background:var(--surface); border:1px solid var(--line);
  border-radius:20px; min-width:160px; position:relative;
  transition:transform .2s var(--ease), background .5s, border-color .5s;
}
.price-card:hover { transform:translateY(-4px) }
.price-card--accent { border-color:var(--ink) }
body.scored .price-card { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.15) }
body.scored.dark-text .price-card { background:rgba(0,0,0,.06); border-color:rgba(0,0,0,.1) }
body.scored .price-card--accent { border-color:rgba(255,255,255,.4) }
body.scored.dark-text .price-card--accent { border-color:rgba(0,0,0,.25) }
.price-badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); padding:3px 12px; background:var(--ink); color:var(--bg); font-size:11px; font-weight:700; border-radius:100px; white-space:nowrap }
.price-amount { font-size:32px; font-weight:800; line-height:1.2 }
.price-period { font-size:13px; color:var(--ink-soft); margin-top:4px }
.premium-note { font-size:13px; color:var(--ink-soft); margin:0; line-height:1.6 }

/* ===== FAQ ===== */
.faq { padding:100px 40px; max-width:640px; margin:0 auto }
.faq h2 { font-size:clamp(24px,4vw,32px); font-weight:800; margin:0 0 36px }
.faq-list { display:flex; flex-direction:column }
.faq-item { border-bottom:1px solid var(--line) }
.faq-item:last-child { border-bottom:none }
.faq-item summary { padding:20px 0; font-size:15px; font-weight:600; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between }
.faq-item summary:hover { color:var(--ink) }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; font-size:18px; font-weight:400; color:var(--ink-soft); transition:transform .3s var(--ease); flex-shrink:0; margin-left:16px }
.faq-item[open] summary::after { transform:rotate(45deg) }
.faq-answer { padding:0 0 20px; font-size:14px; color:var(--ink-soft); line-height:1.8 }

/* ===== Bottom CTA ===== */
.bottom-cta { padding:160px 40px 180px; text-align:center }
.bottom-cta h2 { font-size:clamp(28px,6vw,52px); font-weight:800; margin:0 0 32px; line-height:1.12 }

/* ===== Footer ===== */
.footer { padding:28px 40px 40px; text-align:center }
.footer-links { display:flex; justify-content:center; gap:28px; margin-bottom:12px }
.footer-links a { font-size:12px; color:var(--ink-soft); text-decoration:none; transition:color .15s }
.footer-links a:hover { color:var(--ink) }
.footer-copy { font-size:11px; color:var(--ink-soft); margin:0 }

/* ===== Policy ===== */
.policy-main { max-width:680px; margin:0 auto; padding:48px 40px 120px }
.policy-topbar { display:flex; align-items:center; margin-bottom:48px; padding-bottom:16px; border-bottom:1px solid var(--line) }
.back-link { font-size:14px; color:var(--ink-soft); text-decoration:none }
.back-link:hover { color:var(--ink) }
.policy-main h1 { font-size:28px; font-weight:800; margin:0 0 8px }
.policy-meta { font-size:13px; color:var(--ink-soft); margin:0 0 48px }
.policy-main h2 { font-size:20px; font-weight:700; margin:48px 0 12px }
.policy-main h3 { font-size:17px; font-weight:600; margin:32px 0 8px }
.policy-main p { font-size:15px; line-height:1.9; margin:0 0 16px }
.policy-main ul { padding-left:24px; margin:0 0 16px }
.policy-main li { font-size:15px; line-height:1.9; margin-bottom:4px }
.policy-main a { color:#EA941C; text-underline-offset:3px }

/* ===== Scored state — global text/border adaptation ===== */
body.scored.light-text { color: rgba(255,255,255,.9) }
body.scored.light-text a { color: rgba(255,255,255,.9) }
body.scored.light-text .showcase-text p,
body.scored.light-text .feature-content p,
body.scored.light-text .premium-lead,
body.scored.light-text .premium-note,
body.scored.light-text .price-period,
body.scored.light-text .faq-answer,
body.scored.light-text .faq-item summary::after,
body.scored.light-text .footer-links a,
body.scored.light-text .footer-copy { color: rgba(255,255,255,.5) }
body.scored.light-text .shot-tab { border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.5) }
body.scored.light-text .shot-tab:hover { border-color: rgba(255,255,255,.4); color: rgba(255,255,255,.8) }
body.scored.light-text .shot-tab.active { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.9); color: var(--score-color) }
body.scored.light-text .faq-item { border-bottom-color: rgba(255,255,255,.1) }
body.scored.light-text .price-badge { background: rgba(255,255,255,.9); color: var(--score-color) }
body.scored.light-text .toggle-btn { border-color: rgba(255,255,255,.15) }
body.scored.light-text .toggle-option { color: rgba(255,255,255,.4) }
body.scored.light-text .toggle-option.active { background: rgba(255,255,255,.9); color: var(--score-color) }

body.scored.dark-text .showcase-text p,
body.scored.dark-text .feature-content p,
body.scored.dark-text .premium-lead,
body.scored.dark-text .premium-note,
body.scored.dark-text .price-period,
body.scored.dark-text .faq-answer,
body.scored.dark-text .faq-item summary::after,
body.scored.dark-text .footer-links a,
body.scored.dark-text .footer-copy { color: rgba(0,0,0,.4) }
body.scored.dark-text .shot-tab { border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.4) }
body.scored.dark-text .shot-tab:hover { border-color: rgba(0,0,0,.25); color: var(--ink) }
body.scored.dark-text .shot-tab.active { background: var(--ink); border-color: var(--ink); color: var(--score-color) }
body.scored.dark-text .faq-item { border-bottom-color: rgba(0,0,0,.07) }

/* ===== Responsive ===== */
@media(max-width:768px){
  .header-nav { display:none }
  .hero-overlay { padding:0 24px }
  .showcase { padding:80px 24px }
  .showcase-inner { grid-template-columns:1fr; gap:48px; text-align:center }
  .showcase-device { order:-1 }
  .device-frame { width:220px }
  .shot-tabs { justify-content:center }
  .how { padding:60px 24px }
  .concept { padding:100px 24px }
  .feature-text-row { padding:48px 24px }
  .premium { padding:80px 24px }
  .price-row { flex-direction:column; align-items:center; gap:16px }
  .price-card { width:100%; max-width:260px }
  .faq { padding:60px 24px }
  .bottom-cta { padding:80px 24px 100px }
  .header-inner { padding:12px 24px }
  .footer { padding:24px 24px 32px }
}
@media(max-width:480px){
  .hero-question { font-size:32px!important }
  .device-frame { width:200px }
}