/* Shared by the Japanese and English bedtime landing pages. */
:root { color-scheme: dark; --bg:#0a0a0f; --card:#13151a; --text:#f5f6f4; --muted:#b0b6bc; --green:#4ade80; --line:#2a3035; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,'Noto Sans JP',sans-serif; line-height:1.8; overflow-wrap:anywhere; }
a { color:inherit; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--green); outline-offset:6px; }
.skip-link { position:fixed; top:8px; left:8px; z-index:20; padding:8px 16px; background:var(--green); color:#07140c; transform:translateY(-150%); }
.skip-link:focus { transform:none; }
nav { position:sticky; top:0; z-index:10; background:rgba(10,10,15,.95); border-bottom:1px solid var(--line); }
.nav-container { max-width:1180px; margin:auto; padding:18px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:2px; text-decoration:none; }
.logo img { width:34px; height:34px; border-radius:9px; }
.nav-right,.lang-switch { display:flex; align-items:center; gap:18px; }
.lang-switch { gap:8px; font-size:13px; white-space:nowrap; }
.lang-switch a { padding:5px; text-decoration:none; color:var(--muted); }
.lang-switch a[aria-current] { color:var(--green); }
.nav-cta { border:1px solid var(--line); border-radius:8px; padding:7px 15px; text-decoration:none; font-size:13px; font-weight:700; white-space:nowrap; }
main { overflow:hidden; }
.hero,section,.closing { max-width:1124px; margin:auto; padding:96px 28px; }
.hero { display:grid; grid-template-columns:1.35fr 1fr; align-items:center; gap:70px; padding-top:84px; padding-bottom:96px; }
.eyebrow { margin:0 0 22px; color:var(--green); font-size:12px; font-weight:700; letter-spacing:2px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(38px,4.7vw,62px); line-height:1.3; letter-spacing:-.04em; margin-bottom:26px; font-weight:900; }
h1 span { color:var(--green); }
.lead { color:var(--muted); font-size:17px; line-height:1.9; max-width:540px; margin-bottom:28px; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px; }
.button { display:inline-flex; align-items:center; justify-content:center; padding:15px 24px; background:var(--green); color:#07140c; font-weight:700; border:1px solid var(--green); border-radius:10px; text-decoration:none; text-align:center; min-height:52px; line-height:1.5; }
.button:hover { background:#80eea8; border-color:#80eea8; }
.button.secondary { background:transparent; color:var(--text); border-color:var(--line); }
.text-link { text-underline-offset:5px; font-size:14px; }
.micro { font-size:12px; color:var(--muted); margin-top:15px; line-height:1.8; }
.night-card { position:relative; padding:34px; border:1px solid #365141; border-radius:28px; background:radial-gradient(ellipse at 85% 0%,#1e3528 0%,#111a17 45%,#111417 100%); }
.night-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:36px; font-size:12px; color:var(--muted); }
.night-top img { width:58px; height:58px; border-radius:16px; }
.night-time { font-size:clamp(52px,6vw,72px); font-weight:300; letter-spacing:-3px; line-height:1.15; margin:0 0 18px; }
.night-title { font-size:21px; font-weight:700; margin-bottom:8px; }
.night-description { color:var(--muted); font-size:14px; margin-bottom:28px; }
.app-tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 30px; }
.app-tags li { background:#ffffff08; border:1px solid #ffffff20; padding:6px 13px; border-radius:8px; font-size:13px; }
.night-rule { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:18px; border-top:1px solid #ffffff20; font-size:12px; color:var(--muted); }
.night-rule strong { color:var(--green); }
.band { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#101215; }
h2 { font-size:clamp(27px,3.4vw,41px); line-height:1.5; letter-spacing:-.025em; margin-bottom:20px; }
.intro { color:var(--muted); max-width:730px; margin-bottom:40px; font-size:16px; }
.grid { display:grid; gap:20px; }
.three { grid-template-columns:repeat(3,1fr); }
.two { grid-template-columns:repeat(2,1fr); }
.card { border:1px solid var(--line); background:var(--card); border-radius:18px; padding:30px; }
.card h3 { font-size:19px; line-height:1.6; margin-bottom:14px; }
.card p { color:var(--muted); font-size:14px; margin-bottom:0; }
.card .number { display:block; margin-bottom:24px; color:var(--green); font-size:14px; letter-spacing:2px; }
.promise { max-width:780px; margin:42px 0 0; font-size:19px; }
.promise strong { color:var(--green); }
.inline-cta { margin-top:32px; }
.feature-list { padding-left:20px; margin:18px 0 0; color:var(--muted); font-size:14px; }
.feature-list li { margin-bottom:8px; }
.badge { display:inline-block; padding:2px 9px; border:1px solid #43614e; color:var(--green); border-radius:5px; font-size:11px; vertical-align:middle; white-space:nowrap; }
.pricing .card { padding:36px; display:flex; flex-direction:column; }
.pricing .free { border-color:#4ade80; }
.plan-label { color:var(--green); font-size:13px; font-weight:700; letter-spacing:2px; }
.plan-price { font-size:36px; font-weight:700; margin-bottom:8px; }
.pricing .feature-list { flex:1; margin-bottom:28px; }
.pricing .plan-note { font-size:13px; color:var(--muted); margin:14px 0 0; }
.faq { max-width:850px; }
details { border-bottom:1px solid var(--line); padding:22px 0; }
summary { cursor:pointer; font-weight:700; padding-right:20px; font-size:17px; }
details p { color:var(--muted); font-size:15px; margin:16px 0 0; }
.other { padding-top:0; }
.other details { border:1px solid var(--line); border-radius:18px; padding:24px 28px; }
.closing { text-align:center; padding-top:72px; padding-bottom:90px; }
.closing .intro { margin-left:auto; margin-right:auto; }
.closing .actions { justify-content:center; }
footer { border-top:1px solid var(--line); padding:35px 24px; text-align:center; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:center; gap:16px 28px; font-size:13px; color:var(--muted); }
.footer-copy { font-size:12px; color:var(--muted); margin:20px 0 0; }
@media (max-width:800px) { .hero { grid-template-columns:1fr; gap:38px; padding-top:54px; } .hero-copy { max-width:620px; } .night-card { max-width:480px; width:100%; } .three { grid-template-columns:1fr; } .hero,section,.closing { padding-left:24px; padding-right:24px; } section { padding-top:64px; padding-bottom:64px; } .other { padding-top:0; } }
@media (max-width:540px) { .nav-container { padding:12px 16px; gap:10px; } .nav-right { gap:8px; } .logo { font-size:14px; gap:7px; } .logo img { width:28px; height:28px; } .nav-cta { padding:7px 9px; font-size:12px; } .lang-switch { font-size:12px; gap:2px; } .hero { padding-bottom:60px; } .two { grid-template-columns:1fr; } .night-card,.card,.pricing .card { padding:26px; } .hero .button { width:100%; } .actions { gap:16px; } .eyebrow { letter-spacing:1px; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }