/* fripos.app landing v2 — 漏斗設計(警戒→興味→比較→欲望→決定→満足)。
   デザインの主役はGPT生成画像(lp/*.png・背景ベタ塗り)。CSSは帯の色と文字組みだけの最小構成。
   帯の背景色は画像の背景色と1:1で一致させること（継ぎ目を消す）。 */
:root{
  --gold:#E8B800; --gold-hi:#FFD54F; --gold-ink:#4a3a00;
  --teal:#4DB6AC; --teal-deep:#2F8A80; --dark:#0F3D38;
  --cream:#FFF8E7; --ink:#2B2B28; --muted:#8a8272; --line:#eadfc2;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Prompt','Noto Sans Thai',-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:660px;margin:0 auto;padding:0 20px}
img{max-width:100%;height:auto;display:block}
.en{display:block;font-size:.68em;font-weight:500;opacity:.62;letter-spacing:.3px}
h2{font-size:24px;font-weight:800;line-height:1.3}
section{padding:44px 0}

/* header */
.site-header{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:54px}
.brand{font-weight:900;font-size:20px;color:var(--ink);text-decoration:none}
.brand b{color:var(--gold)}
.nav{display:flex;align-items:center;gap:14px}
.nav a.lnk{color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600;opacity:.8}

/* buttons */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  padding:12px 22px;border-radius:14px;text-decoration:none;font-weight:800;font-size:15.5px;
  border:none;cursor:pointer;text-align:center}
.btn-sub{font-size:10.5px;font-weight:600;opacity:.65;letter-spacing:.4px}
.btn-primary{background:var(--gold);color:var(--gold-ink);box-shadow:0 3px 12px rgba(180,140,0,.25)}
.btn-ghost{background:transparent;color:var(--gold-ink);border:1.5px solid rgba(74,58,0,.35)}
.btn-teal{background:var(--teal-deep);color:#fff;box-shadow:0 3px 12px rgba(15,61,56,.25)}
.btn-line{background:#06C755;color:#fff;flex-direction:row;gap:8px}
.btn-locked{background:#e9e4d4;color:#9a927c;flex-direction:row;gap:8px;cursor:default}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:11px}
.cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}

/* ① hero (gold band = hero.png bg) */
.hero{background:#F3B506;text-align:center;padding:34px 0 0;overflow:hidden}   /* 帯色=hero.png実測色(#E8B800でなくGPT出力の実ピクセル)。画像を差し替えたら測り直す */
.hero-proof{display:inline-block;background:rgba(43,36,18,.14);color:#3a2f10;font-size:12px;font-weight:700;border-radius:20px;padding:4px 14px}
.hero h1{font-size:30px;font-weight:900;color:#2b2412;margin-top:14px;line-height:1.25}
.hero-free{font-size:64px;font-weight:900;color:#fff;line-height:1;margin-top:6px;text-shadow:0 3px 0 rgba(120,90,0,.25)}
.hero-free small{display:block;font-size:15px;font-weight:800;color:#3a2f10;text-shadow:none;margin-top:4px}
.hero-emo{margin-top:12px;font-size:16px;font-weight:800;color:#2b2412}
.hero-emo .en{color:#5d4a10}
.hero-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}
.chip{background:#fff;color:#4a3a00;font-size:12px;font-weight:700;border-radius:20px;padding:5px 12px}
.hero .cta-row{margin-bottom:6px}
.hero-img{width:min(76%,330px);margin:10px auto -4px}
.hero-tag{padding:12px 0 26px;font-size:13px;color:#5d4a10;font-weight:600}
.hero-tag b{color:#2b2412}

/* ② compare (cream = compare.png bg) */
.compare{background:var(--cream);text-align:center}
.cmp-img{width:min(94%,520px);margin:6px auto 2px}
.cmp-table{max-width:440px;margin:14px auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;text-align:left}
.cmp-row{display:flex;justify-content:space-between;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);font-size:14px}
.cmp-row:last-child{border-bottom:none}
.cmp-row .old{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(200,60,60,.6)}
.cmp-row .zero{font-weight:900;color:var(--teal-deep);font-size:17px}
.cmp-row.total{background:var(--gold-hi)}
.cmp-row.total .zero{color:#2b2412;font-size:20px}
.cmp-note{font-size:11.5px;color:var(--muted);margin-top:8px}
.cmp-checks{max-width:440px;margin:18px auto 0;text-align:left;display:flex;flex-direction:column;gap:9px}
.cmp-checks div{display:flex;gap:9px;font-size:14px;font-weight:600}
.cmp-checks svg{width:19px;height:19px;color:var(--teal-deep);flex-shrink:0;margin-top:3px}

/* ③ how (white = step_*.png bg) */
.how{background:#fff;text-align:center}
.how-steps{display:flex;flex-direction:column;gap:26px;margin-top:22px}
.how-step{max-width:420px;margin:0 auto}
.hs-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#2b2412;font-weight:900;font-size:15px}
.hs-t{font-size:17.5px;font-weight:800;margin-top:8px}
.hs-s{font-size:13.5px;color:var(--muted);margin-top:2px}
.hs-img{width:min(64%,250px);margin:10px auto 0}
.how-note{font-size:12px;color:var(--muted);margin-top:20px}
.switch-line{margin-top:24px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:16px;max-width:440px;margin-left:auto;margin-right:auto}
.switch-line p{font-size:14px;font-weight:700}
.switch-line .en{margin-bottom:10px}

/* ④ growth ladder (cream = growth.png bg) */
.growth{background:var(--cream);text-align:center}
.gr-img{width:min(94%,520px);margin:6px auto 8px}
.ladder{max-width:460px;margin:10px auto 0;display:flex;flex-direction:column;gap:10px;text-align:left}
.rung{background:#fff;border:1px solid var(--line);border-radius:16px;padding:13px 15px}
.rung-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rung-emoji{font-size:20px}
.rung-t{font-weight:800;font-size:15.5px}
.rung-price{margin-left:auto;font-weight:900;font-size:17px;color:var(--ink)}
.rung-price small{font-size:10.5px;font-weight:600;color:var(--muted)}
.rung-s{font-size:13px;color:#5d5648;margin-top:4px;line-height:1.55}
.rung.free{border-left:5px solid var(--gold)}
.rung.pop{border:2px solid var(--teal)}
.rung .pop-badge{background:var(--teal);color:#fff;font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 9px}
.rung.top{background:var(--dark);border-color:var(--dark);color:#fff}
.rung.top .rung-s{color:#cfe8e2}
.rung.top .rung-price{color:var(--gold-hi)}
.ladder-note{font-size:12.5px;color:var(--muted);margin-top:14px}

/* ⑤ AI (dark = ai.png bg) */
.ai{background:var(--dark);color:#fff;text-align:center}
.ai .en{color:#9ec8bf;opacity:1}
.ai-img{width:min(62%,250px);margin:8px auto 0}
.ai-bubble{max-width:400px;margin:16px auto 0;background:#16554c;border-radius:18px 18px 18px 4px;padding:14px 17px;text-align:left}
.ai-bubble .lbl{font-size:10.5px;font-weight:700;color:#8fc4b9;letter-spacing:.5px;margin-bottom:4px}
.ai-bubble p{font-size:14.5px;font-weight:600;line-height:1.65}
.ai-sub{font-size:13px;color:#bfe0d8;margin-top:14px}
.ai-sub b{color:var(--gold-hi)}

/* ⑥ why free (white) */
.whyfree{background:#fff}
.wf-card{max-width:480px;margin:0 auto;background:var(--cream);border:1px solid var(--line);border-radius:20px;padding:24px 22px}
.wf-card h2{margin-bottom:12px}
.wf-card p{font-size:14px;margin-bottom:10px}
.wf-proof{display:flex;gap:11px;margin-top:14px;padding-top:14px;border-top:1px dashed #d8cba0;font-size:13px}
.wf-proof svg{width:26px;height:26px;color:var(--teal-deep);flex-shrink:0}
.wf-proof b{display:block}

/* ⑦ CTA (light gold = cta.png bg) */
.cta{background:var(--gold-hi);text-align:center}
.cta h2{color:#2b2412}
.cta-lead{font-size:14.5px;font-weight:700;color:#5d4a10;margin-top:6px}
.cta-img{width:min(60%,240px);margin:10px auto 0}
.countdown{display:flex;gap:8px;justify-content:center;margin:18px 0 14px}
.cd-cell{background:#fff;border-radius:12px;padding:9px 0;width:70px}
.cd-num{display:block;font-size:23px;font-weight:900;color:#2b2412}
.cd-lbl{display:block;font-size:9.5px;font-weight:600;color:var(--muted)}
.cd-open{font-size:17px;font-weight:800;color:#2b2412}
.dl-wrap{margin-top:6px}
.soon{font-size:12px;color:#7a6410;margin-top:9px}
.cta-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.cta-chips .chip{background:rgba(255,255,255,.75)}

/* footer */
.site-footer{background:var(--dark);color:#cfe8e2;text-align:center;padding:30px 0}
.brand-sm{font-weight:900;font-size:19px;color:#fff}
.brand-sm b{color:var(--gold-hi)}
.foot-tag{font-size:13px;margin-top:3px}
.foot-tag span{color:var(--gold-hi)}
.dom{font-size:12px;opacity:.6;margin-top:8px}
.foot-links{margin-top:12px;font-size:12.5px}
.foot-links a{color:#9ec8bf}
.fine{font-size:11px;opacity:.5;margin-top:12px}

/* section headers */
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--teal-deep);margin-bottom:6px}
.ai .eyebrow{color:var(--gold-hi)}
.cta .eyebrow,.hero .eyebrow{color:#7a6410}
.section-head{margin-bottom:8px}
.section-sub{font-size:14px;color:var(--muted);margin-top:4px}
.ai .section-sub{color:#bfe0d8}

@media(min-width:560px){
  .hero h1{font-size:36px}
  .hero-free{font-size:76px}
  .how-steps{flex-direction:row;align-items:flex-start;gap:14px}
  .how-step{flex:1}
}