/* 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}
.nb{white-space:nowrap}
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;display:inline-flex;align-items:center;gap:7px}
.brand-ic{width:22px;height:22px;border-radius:6px;display:inline-block;vertical-align:-4px}
.brand-sm .brand-ic{width:19px;height:19px;margin-right:6px}
.brand b{color:#CC9200}   /* ロゴposは白地なので var(--gold)#E8B800 だと薄い→濃いめの金に */
.nav{display:flex;align-items:center;gap:12px}
.nav a.lnk{color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:600;opacity:.8;white-space:nowrap}
.site-header .btn-sm{white-space:nowrap}

/* 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:30px 0 0;overflow:hidden}   /* 帯色=hero.png実測色(#E8B800でなくGPT出力の実ピクセル)。画像を差し替えたら測り直す */
/* A3(2026-07-15): パッと見の層=見出し+ฟรีだけ／支える文は余白と弱色で沈める＋ティール相棒＋区切り線で"抜け" */
.hero-proof{display:inline-block;background:rgba(47,138,128,.16);color:#0F6E56;font-size:13px;font-weight:700;border-radius:20px;padding:6px 15px;margin-bottom:25px}
.hero h1{font-size:33px;font-weight:900;color:#2b2412;margin-top:2px;line-height:1.22}
.hero-free{font-size:76px;font-weight:900;color:#fff;line-height:1;margin-top:24px;text-shadow:0 3px 0 rgba(120,90,0,.25)}
.hero-free small{display:block;font-size:14.5px;font-weight:700;color:#6a5620;text-shadow:none;margin-top:25px}
.hero-free-note{margin-top:7px;font-size:12.5px;font-weight:500;color:#6a5620;line-height:1.55}
.hero-free-note .en{margin-top:2px}
.hero-emo{margin-top:28px;font-size:16.5px;font-weight:800;color:#0F6E56}
.hero-emo::before{content:"";display:block;width:60px;height:1px;background:rgba(47,138,128,.45);margin:0 auto 18px}
.hero-emo .en{color:#5d4a10}
.hero-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:23px}
.hero-chips .chip{color:#2F8A80;font-size:12.5px;padding:5px 13px}
.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:#FDF8E9;text-align:center}   /* 帯色=compare.webp実測色 */
.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}

/* ②.5 rescue: มือถือพัง ร้านไม่หยุด (帯色=rescue_*.webp実測色・3コマはhow-steps流用) */
.rescue{background:#EAF6F2;text-align:center}
.rescue-note{font-size:14px;font-weight:700;margin-top:18px}
.rescue-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.rescue .chip{border:1px solid #cde8de}
.rescue-final{margin-top:16px;font-size:15.5px;font-weight:900;color:#0f3d38}
.rescue-final .en{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}

/* ③ how (white = step_*.png bg) */
.how{background:#fff;text-align:center}
.how-checks{max-width:340px;margin:14px auto 4px;text-align:left;display:flex;flex-direction:column;gap:8px}
.how-checks div{display:flex;gap:9px;font-size:14.5px;font-weight:700}
.how-checks svg{width:19px;height:19px;color:var(--teal-deep);flex-shrink:0;margin-top:3px}
.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}

/* ③.5 proof: real numbers from our own restaurants (hidden until stats.json loads) */
.proof{background:#EAF6F2;text-align:center}
.proof-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.ps-cell{background:#fff;border:1px solid #cde8de;border-radius:16px;padding:16px 12px;width:170px;display:flex;flex-direction:column;align-items:center}
.ps-num{font-size:32px;font-weight:900;color:var(--teal-deep);line-height:1.1}
.ps-unit{font-size:12.5px;font-weight:700;color:var(--teal-deep);margin-top:2px}
.ps-lbl{font-size:12px;font-weight:600;color:#5d5648;margin-top:6px;line-height:1.4}

/* "under development" badge for features that are not usable yet */
.badge-dev{display:inline-block;background:#f0ece0;color:#7a6f55;font-size:10.5px;font-weight:800;border-radius:20px;padding:2px 9px;vertical-align:middle;white-space:nowrap}
.ai .badge-dev{background:#16554c;color:#9ec8bf}

/* ④ growth ladder (cream = growth.png bg) */
.growth{background:#FEF9EA;text-align:center}   /* 帯色=growth.webp実測色 */
.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-for{font-size:12.5px;font-weight:700;color:var(--teal-deep);margin-top:6px}
.rung-h{font-size:15px;font-weight:800;margin-top:7px;line-height:1.4}   /* 有料段の「得られる結果」見出し */
.rung-h .en{font-weight:600}
.rung-s{font-size:13px;color:#5d5648;margin-top:4px;line-height:1.55}
/* Free rung = the star of the ladder: bigger, gold frame, one feature per line */
.rung.free{border:3px solid var(--gold);background:#fffdf4;padding:16px 16px 14px;box-shadow:0 4px 14px rgba(180,140,0,.12)}
.rung.free .rung-t{font-size:17px}
.rung.free .rung-price{font-size:24px;font-weight:900}
.free-list{list-style:none;margin:10px 0 2px;padding:0}
.free-list li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:#4a4335;line-height:1.5;padding:4px 0;border-bottom:1px dashed #f0e6c8}
.free-list li:last-child{border-bottom:0}
.free-list li::before{content:"✓";color:var(--teal-deep);font-weight:900;flex-shrink:0}
.free-list b{color:var(--ink)}
.li-note{font-size:11.5px;color:var(--muted);font-weight:400}
.free-line{display:flex;gap:9px;align-items:flex-start;margin-top:10px;background:#eafaf1;border:1px solid #bfe8cf;border-left:3px solid #06C755;border-radius:12px;padding:10px 12px;font-size:13.5px;line-height:1.5;color:#3a4a40}
.free-line svg{width:20px;height:20px;color:#06C755;flex-shrink:0;margin-top:1px}
.free-line b{color:var(--ink)}
.free-line .lword{color:#06C755}
.free-forever{margin-top:8px;text-align:center;background:var(--gold);color:#4a3a00;border-radius:10px;padding:7px 10px;font-weight:800;font-size:13.5px}
.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:#07362E;color:#fff;text-align:center}   /* 帯色=ai.webp実測色 */
.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}
.wf-close{margin-top:14px;padding-top:14px;border-top:1px dashed #d8cba0;font-size:14px}

/* ⑦ CTA (light gold = cta.png bg) */
.cta{background:#FDCD22;text-align:center}   /* 帯色=cta.webp実測色 */
.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}
/* 最終CTA=ページで一番押されるボタン。ヘッダーの btn-sm に影響させないよう .dl-wrap にスコープ */
.dl-wrap{margin-top:16px;display:flex;justify-content:center}
.dl-wrap .btn{width:min(100%,330px);font-size:21px;padding:19px 28px;border-radius:18px;
  box-shadow:0 6px 20px rgba(15,61,56,.32)}
.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}
}