/* =========================================================
   つぎいち — Waitlist LP
   Calm / Apple / Headspace inspired. White base, soft blue.
   Font: Zen Maru Gothic (rounded gothic, gentle & friendly)
   ========================================================= */

:root{
  --blue:        #3B6FD4;   /* accent / primary */
  --blue-deep:   #2F5BC0;   /* hover, strong button */
  --blue-ink:    #2A4FA8;   /* text on pale tint */
  --blue-pale:   #EAF1FC;   /* card tint */
  --blue-pale-2: #F3F7FD;   /* section tint */
  --blue-mist:   #DDE9FA;   /* borders on pale */

  --bg:    #FCFDFF;
  --white: #FFFFFF;
  --ink:   #232B3A;         /* headings */
  --body:  #4C5667;         /* body copy */
  --muted: #8A93A6;
  --line:  #E8ECF3;

  /* gentle secondary tints (used sparingly in feature icons) */
  --mint:  #E6F2EC;  --mint-ink:  #3C7A58;
  --peach: #FBEEDF;  --peach-ink: #C07A37;
  --lilac: #EEEAFB;  --lilac-ink: #6759A8;

  --r-sm: 16px;
  --r:    22px;
  --r-lg: 30px;
  --r-xl: 40px;
  --phone-r: 42px;

  --shadow-card: 0 4px 22px rgba(42,62,110,.055), 0 1px 3px rgba(42,62,110,.04);
  --shadow-soft: 0 10px 40px -12px rgba(42,62,110,.14);
  --shadow-phone: 0 40px 90px -28px rgba(40,70,140,.34), 0 8px 24px -10px rgba(40,70,140,.18);
  --shadow-cta: 0 12px 28px -8px rgba(59,111,212,.5);

  /* feel: driven by the Tweaks panel */
  --sec-pad: 120px;   /* vertical breathing room per section */
  --lh: 1.85;         /* body line-height */

  --maxw: 1120px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Tweak-driven feel properties (tone / space / soft) apply instantly —
   transitioning custom-property-derived colors & radii is unreliable under
   background throttling, and instant application reads cleanly anyway. */

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:'Zen Maru Gothic', ui-rounded, -apple-system, 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
  background:var(--bg);
  color:var(--body);
  line-height:var(--lh);
  font-weight:500;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--blue-mist); }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

h1,h2,h3{ color:var(--ink); font-weight:700; line-height:1.4; letter-spacing:.005em; text-wrap:balance; }
.lead{ text-wrap:pretty; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:inherit; font-weight:700; cursor:pointer; border:none;
  border-radius:999px; transition:transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--blue); color:#fff; padding:18px 34px; font-size:1.05rem;
  box-shadow:var(--shadow-cta);
}
.btn-primary:hover{ background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 18px 36px -8px rgba(59,111,212,.55); }
.btn-primary:active{ transform:translateY(0); }
.btn-sm{ padding:12px 22px; font-size:.95rem; box-shadow:0 6px 16px -6px rgba(59,111,212,.45); }
.btn-ghost{
  background:var(--white); color:var(--blue-ink); padding:14px 26px; font-size:1rem;
  box-shadow:inset 0 0 0 1.5px var(--blue-mist);
}
.btn-ghost:hover{ background:var(--blue-pale-2); }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(252,253,255,.78);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, background .3s;
}
.site-header.scrolled{ border-bottom-color:var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; font-weight:700; color:var(--ink); font-size:1.22rem; letter-spacing:.02em; }
.brand .mark{
  width:34px; height:34px; border-radius:11px; background:var(--blue);
  display:grid; place-items:center; box-shadow:0 4px 12px -3px rgba(59,111,212,.5);
}
.brand .mark svg{ width:20px; height:20px; }

/* ---------- reveal animation (robust under throttled compositors) ----------
   Base state is VISIBLE. Only off-screen elements get .pre (hidden) and
   animate in on scroll. A hard .force fallback guarantees eventual visibility. */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.pre{ opacity:0; transform:translateY(24px); }
.reveal.pre.d1{ transition-delay:.07s; } .reveal.pre.d2{ transition-delay:.14s; }
.reveal.pre.d3{ transition-delay:.21s; } .reveal.pre.d4{ transition-delay:.28s; }
.reveal.force{ opacity:1 !important; transform:none !important; transition:none !important; }
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; }
  .reveal.pre{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- phone mockup ---------- */
.phone{
  position:relative; border-radius:var(--phone-r); overflow:hidden;
  box-shadow:var(--shadow-phone);
  background:#fff;
  outline:1px solid rgba(40,70,140,.06);
}
.phone img{ width:100%; height:auto; }

/* generic section rhythm */
section{ position:relative; }
.sec-pad{ padding:var(--sec-pad) 0; }
.sec-tint{ background:var(--blue-pale-2); }
.eyebrow{
  display:inline-block; font-size:.82rem; font-weight:700; letter-spacing:.16em;
  color:var(--blue); text-transform:uppercase; margin-bottom:18px;
}
.sec-title{ font-size:clamp(1.8rem, 1.1rem + 2.4vw, 2.9rem); line-height:1.45; }
.sec-sub{ font-size:1.08rem; color:var(--body); margin-top:18px; max-width:34em; }
.center{ text-align:center; } .center .sec-sub{ margin-inline:auto; }

/* ================= HERO ================= */
.hero{ position:relative; overflow:hidden; padding:64px 0 90px; }
.hero::before{ /* soft sky wash */
  content:""; position:absolute; inset:-10% -20% auto -20%; height:120%;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(59,111,212,.10), transparent 70%),
    radial-gradient(50% 50% at 8% 30%, rgba(59,111,212,.07), transparent 70%);
  z-index:0; pointer-events:none;
}
.hero .wrap{ position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }
.hero-copy h1{
  font-size:clamp(2.3rem, 1.2rem + 3.6vw, 3.65rem); line-height:1.34; letter-spacing:.01em;
  margin-bottom:26px;
  text-wrap:initial;
}
.hero-copy h1 .hl-line{ white-space:nowrap; }
.hero-copy h1 .accent{ color:var(--blue); }
.hero-copy .lead{ font-size:1.16rem; max-width:30em; margin-bottom:38px; }
.hero-cta{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.hero-note{ margin-top:18px; font-size:.92rem; color:var(--muted); display:flex; align-items:center; gap:9px; }
.hero-note .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue); opacity:.55; }

.hero-visual{ position:relative; display:flex; justify-content:center; }
.hero-visual .phone{ width:min(330px, 78%); }
.hero-visual .mascot-float{
  position:absolute; width:138px; left:-6%; bottom:6%; z-index:2;
  filter:drop-shadow(0 14px 22px rgba(40,70,140,.18));
  animation:bob 6s ease-in-out infinite;
}
.mascot-cta{
  width:90px; height:auto; flex:0 0 auto;
  filter:drop-shadow(0 12px 20px rgba(40,70,140,.16));
  animation:bob 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .mascot-cta{ animation:none; } }
.hero-visual .blob-bg{
  position:absolute; width:118%; height:118%; left:-9%; top:-6%; z-index:0;
  background:radial-gradient(50% 50% at 50% 45%, var(--blue-pale), transparent 72%);
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-12px) rotate(2deg);} }
@media (prefers-reduced-motion: reduce){ .hero-visual .mascot-float{ animation:none; } }

/* trust strip */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); }
.trust .wrap{ display:flex; align-items:center; justify-content:center; gap:14px; padding:22px 28px; flex-wrap:wrap; text-align:center; }
.trust p{ color:var(--muted); font-size:.98rem; }
.trust strong{ color:var(--ink); font-weight:700; }

/* ================= PROBLEM ================= */
.problem-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.p-card{
  background:var(--white); border-radius:var(--r-lg); padding:38px 32px 36px;
  box-shadow:var(--shadow-card); border:1px solid var(--line);
}
.p-card .num{
  width:46px; height:46px; border-radius:14px; background:var(--blue-pale); color:var(--blue);
  display:grid; place-items:center; font-weight:700; font-size:1.15rem; margin-bottom:22px;
}
.p-card p{ font-size:1.12rem; color:var(--ink); line-height:1.75; font-weight:500; }

/* ================= SOLUTION (comparison) ================= */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:56px; align-items:stretch; }
.col{ border-radius:var(--r-lg); padding:40px 38px; }
.col-todo{ background:var(--white); border:1px solid var(--line); }
.col-tsugi{ background:var(--blue); color:#fff; box-shadow:var(--shadow-soft); position:relative; overflow:hidden; }
.col-tsugi::after{ content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.08); }
.col h3{ font-size:1.35rem; margin-bottom:6px; }
.col-tsugi h3{ color:#fff; }
.col .tag{ font-size:.82rem; letter-spacing:.1em; font-weight:700; text-transform:uppercase; opacity:.7; }
.col-tsugi .tag{ color:#dce8ff; opacity:.95; }
.col ul{ list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.col li{ display:flex; align-items:flex-start; gap:13px; font-size:1.05rem; }
.col-todo li{ color:var(--body); }
.col-tsugi li{ color:#fff; }
.ic{ flex:0 0 auto; width:24px; height:24px; margin-top:3px; }
.col-todo .ic{ color:var(--muted); }
.col-tsugi .ic{ color:#bcd3ff; }

/* ================= HOW IT WORKS ================= */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:64px; align-items:start; }
.step{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:44px 32px 40px; box-shadow:var(--shadow-card);
}
.step .step-num{
  width:58px; height:58px; border-radius:18px; background:var(--blue-pale); color:var(--blue);
  display:grid; place-items:center; font-size:1.55rem; font-weight:700; margin-bottom:24px;
}
.step h3{ font-size:1.3rem; margin-bottom:10px; }
.step p{ font-size:1.02rem; color:var(--body); text-wrap:pretty; }
.step .step-shot{ width:172px; margin-top:30px; }
.step .step-shot .phone{ border-radius:calc(var(--phone-r) * .66); }
.step:nth-child(odd) .step-num{ background:#eef6f0; color:var(--mint-ink); }

/* ================= FEATURES ================= */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
.f-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:34px 30px; box-shadow:var(--shadow-card); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.f-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.f-ic{ width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-bottom:22px; }
.f-ic svg{ width:27px; height:27px; }
.f-card h3{ font-size:1.18rem; margin-bottom:10px; }
.f-card p{ font-size:1rem; color:var(--body); }

/* ================= VISION ================= */
.vision{ text-align:center; }
.vision .wrap{ max-width:820px; }
.vision .mascot-sm{ width:96px; margin:0 auto 30px; filter:drop-shadow(0 12px 20px rgba(40,70,140,.16)); }
.vision h2{ font-size:clamp(2rem, 1.2rem + 3vw, 3.1rem); line-height:1.42; margin-bottom:30px; }
.vision .accent{ color:var(--blue); }
.vision p{ font-size:1.18rem; color:var(--body); text-wrap:pretty; }

/* ================= EARLY ACCESS ================= */
.early{ position:relative; }
.early-card{
  background:linear-gradient(160deg, #f5f9ff, #eaf1fc);
  border:1px solid var(--blue-mist); border-radius:var(--r-xl);
  padding:72px 64px; position:relative; overflow:hidden;
}
.early-card::before{ content:""; position:absolute; left:-60px; bottom:-60px; width:220px; height:220px; border-radius:50%; background:rgba(59,111,212,.08); }
.early-inner{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:56px; align-items:start; }
.early h2{ font-size:clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); margin-bottom:20px; }
.early .lead{ font-size:1.08rem; margin-bottom:30px; }
.early .manifesto{ font-size:1.06rem; line-height:1.95; color:var(--body); margin-bottom:36px; max-width:30em; text-wrap:pretty; }
.early .manifesto strong{ color:var(--blue-ink); font-weight:700; }
.perk-label{ font-size:.82rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:20px; }
.perks{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.perks li{ display:flex; align-items:center; gap:13px; font-size:1.05rem; color:var(--ink); font-weight:500; }
.perks .check{ width:26px; height:26px; flex:0 0 auto; border-radius:50%; background:var(--blue); display:grid; place-items:center; }
.perks .check svg{ width:14px; height:14px; color:#fff; }
/* detailed perks (title + description) */
.perks-detail{ gap:22px; }
.perks-detail li{ align-items:flex-start; }
.perks-detail .check{ margin-top:2px; }
.perk-body h4{ font-size:1.14rem; color:var(--ink); font-weight:700; margin-bottom:6px; line-height:1.5; }
.perk-body p{ font-size:.98rem; color:var(--body); line-height:1.82; font-weight:500; text-wrap:pretty; }
.perk-body em{ font-style:normal; font-weight:700; color:var(--blue-ink); }
.form-card{ position:sticky; top:96px; }

/* form */
.form-card{ background:var(--white); border-radius:var(--r-lg); padding:38px 34px; box-shadow:var(--shadow-soft); }
.form-card h3{ font-size:1.25rem; margin-bottom:8px; }
.form-card .fc-sub{ font-size:.98rem; color:var(--muted); margin-bottom:24px; }
.field{ position:relative; margin-bottom:16px; }
.field input{
  width:100%; font-family:inherit; font-size:1.02rem; font-weight:500; color:var(--ink);
  padding:17px 18px; border-radius:14px; border:1.5px solid var(--line); background:var(--blue-pale-2);
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field input::placeholder{ color:#9aa3b5; }
.field input:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(59,111,212,.12); }
.field input.invalid{ border-color:#e08a8a; background:#fdf3f3; }
.field textarea{
  width:100%; font-family:inherit; font-size:1.02rem; font-weight:500; color:var(--ink);
  line-height:1.7; padding:15px 18px; border-radius:14px; border:1.5px solid var(--line);
  background:var(--blue-pale-2); resize:vertical; min-height:84px;
  transition:border-color .2s, background .2s, box-shadow .2s;
}
.field textarea::placeholder{ color:#9aa3b5; }
.field textarea:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(59,111,212,.12); }
.form-card .btn-primary{ width:100%; margin-top:6px; }
.form-err{ color:#cf6b6b; font-size:.88rem; margin-top:-8px; margin-bottom:14px; min-height:1.1em; display:none; }
.form-err.show{ display:block; }
.form-fine{ font-size:.82rem; color:var(--muted); margin-top:16px; text-align:center; line-height:1.6; }
/* success */
.form-success{ display:none; text-align:center; padding:18px 6px; animation:pop .5s var(--ease); }
.form-success.show{ display:block; }
.form-success .tick{
  width:72px; height:72px; border-radius:50%; background:var(--blue); margin:0 auto 22px;
  display:grid; place-items:center; box-shadow:var(--shadow-cta);
}
.form-success .tick svg{ width:34px; height:34px; color:#fff; }
.form-success h3{ font-size:1.4rem; margin-bottom:12px; }
.form-success p{ font-size:1rem; color:var(--body); }
.form-success .mascot-xs{ width:80px; margin:24px auto 0; }
@keyframes pop{ 0%{ opacity:0; transform:scale(.92);} 100%{ opacity:1; transform:scale(1);} }

/* ================= FOOTER ================= */
.site-footer{ background:var(--ink); color:#cdd4e0; padding:72px 0 40px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1); }
.foot-brand{ display:flex; align-items:center; gap:12px; font-size:1.3rem; font-weight:700; color:#fff; margin-bottom:18px; }
.foot-brand .mark{ width:36px; height:36px; border-radius:12px; background:var(--blue); display:grid; place-items:center; }
.foot-brand .mark svg{ width:21px; height:21px; }
.foot-tag{ font-size:1.15rem; color:#fff; font-weight:500; line-height:1.6; }
.foot-tag .accent{ color:#9cc0ff; }
.foot-links{ display:flex; gap:48px; justify-content:flex-end; }
.foot-links a{ display:block; color:#cdd4e0; font-size:.98rem; padding:7px 0; transition:color .2s; }
.foot-links a:hover{ color:#fff; }
.foot-col h4{ color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; font-weight:700; }
.foot-bottom{ padding-top:28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.86rem; color:#8b93a6; }

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .sec-pad{ padding:84px 0; }
  .hero{ padding:40px 0 70px; }
  .hero .wrap{ grid-template-columns:1fr; gap:48px; text-align:center; }
  .hero-copy .lead{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .hero-note{ justify-content:center; }
  .hero-visual{ order:-1; }
  .problem-grid{ grid-template-columns:1fr; gap:18px; }
  .compare{ grid-template-columns:1fr; }
  .feat-grid{ grid-template-columns:1fr 1fr; }
  .steps{ grid-template-columns:1fr; gap:18px; }
  .step{ padding:36px 26px 32px; }
  .step .step-shot{ width:150px; }
  .early-card{ padding:48px 30px; }
  .early-inner{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .foot-top{ grid-template-columns:1fr; gap:32px; }
  .foot-links{ justify-content:flex-start; gap:40px; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .site-header .wrap{ height:64px; }
  .brand{ font-size:1.1rem; }
  .header-cta{ display:none; }
  .feat-grid{ grid-template-columns:1fr; }
  .btn-primary{ width:100%; }
  .hero-cta{ width:100%; flex-direction:column; align-items:stretch; }
  /* headline must never overflow: shrink to fit, allow wrap as a safety net */
  .hero-copy h1{ font-size:1.72rem; line-height:1.42; }
  .hero-copy h1 .hl-line{ white-space:normal; }
  .mascot-cta{ width:72px; align-self:center; }
  .hero-visual .phone{ width:min(280px, 84%); }
  /* tighten oversized section paddings on the early card */
  .early-card{ padding:40px 22px; }
  .perk-body p{ font-size:.95rem; }
  .form-card{ position:static; padding:30px 22px; }
  .early h2{ font-size:1.6rem; line-height:1.5; }
  .sec-title{ font-size:1.65rem; line-height:1.5; }
}

/* ============================================================
   TWEAKS — three expressive "feel" controls (set on <html>)
   ============================================================ */

/* ---- トーン (palette mood) ---- */
html[data-tone="sand"]{
  --blue:#C68B57; --blue-deep:#B0743F; --blue-ink:#955E31;
  --blue-pale:#F6EEE3; --blue-pale-2:#FAF6EF; --blue-mist:#EADDCB;
  --bg:#FDFBF7;
}
html[data-tone="mint"]{
  --blue:#3E9C83; --blue-deep:#318773; --blue-ink:#2C6E5C;
  --blue-pale:#E6F3EE; --blue-pale-2:#F1F8F4; --blue-mist:#D4E8DF;
  --bg:#FAFDFB;
}
/* keep CTA shadow tinted to the active accent */
html[data-tone="sand"]{ --shadow-cta:0 12px 28px -8px rgba(198,139,87,.5); }
html[data-tone="mint"]{ --shadow-cta:0 12px 28px -8px rgba(62,156,131,.5); }

/* ---- 余白 (breathing room) ---- */
html[data-space="cozy"]{ --sec-pad:78px;  --lh:1.7;  }
html[data-space="airy"]{ --sec-pad:176px; --lh:2.04; }
html[data-space="cozy"] .hero{ padding:48px 0 64px; }
html[data-space="airy"] .hero{ padding:96px 0 128px; }
html[data-space="cozy"] .sec-sub{ margin-top:12px; }
html[data-space="airy"] .sec-sub{ margin-top:28px; }

/* ---- やわらかさ (softness / roundness + shadow) ---- */
html[data-soft="sharp"]{
  --r-sm:8px; --r:11px; --r-lg:13px; --r-xl:16px; --phone-r:24px;
  --shadow-card:0 2px 10px rgba(42,62,110,.06);
  --shadow-soft:0 8px 26px -12px rgba(42,62,110,.16);
  --shadow-phone:0 22px 48px -22px rgba(40,70,140,.30);
}
html[data-soft="pillow"]{
  --r-sm:22px; --r:30px; --r-lg:40px; --r-xl:56px; --phone-r:56px;
  --shadow-card:0 10px 38px rgba(42,62,110,.09);
  --shadow-soft:0 24px 70px -16px rgba(42,62,110,.20);
  --shadow-phone:0 56px 120px -30px rgba(40,70,140,.38), 0 12px 30px -10px rgba(40,70,140,.18);
}
/* in sharp mode, soften the pill buttons toward rectangles so the change reads */
html[data-soft="sharp"] .btn{ border-radius:10px; }
html[data-soft="pillow"] .btn{ border-radius:999px; }