:root{
  --ground:#F3F0EA; --paper:#FDFCF7; --white:#FFFFFF;
  --ink:#1E1C1A; --ink-2:#4A453F; --muted:#6B655C;
  --line:#E4DFD5; --line-2:#D6D0C4;
  --pink:#E0004D; --pink-text:#C80044;
  --forest:#0D2B22; --forest-2:#1C4035; --forest-3:#2A4A3F; --forest-line:#3A5F52; --mint:#9DB5AB;
  --mustard:#F4C94A;
  --display:"Bricolage Grotesque",sans-serif;
  --pad:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px)}
h1,h2,p{margin:0}
a{color:var(--pink-text)}
a:hover{color:#8F0031}
a:focus-visible,summary:focus-visible{outline:3px solid var(--forest-2);outline-offset:3px}
img,svg{max-width:100%}

.wrap{width:100%;max-width:1200px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

/* 登入狀態：body 的 data-auth="guest"（未登入）或 "member"（已登入） */
body[data-auth="member"] .guest-only{display:none !important}
body:not([data-auth="member"]) .member-only{display:none !important}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;text-decoration:none;font-size:15px;font-weight:700;white-space:nowrap}
.btn-lg{height:52px;padding:0 28px;font-size:16px}
.btn-primary{background:var(--pink);color:var(--white)}
.btn-primary:hover{background:#B8003F;color:var(--white)}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink);font-weight:500}
.btn-outline:hover{background:var(--ink);color:var(--white)}
.btn-outline-light{border:1.5px solid var(--white);color:var(--white);font-weight:500}
.btn-outline-light:hover{background:var(--white);color:var(--forest)}

/* 導覽列 */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top,0px)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:18px;padding-bottom:18px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand-mark{width:40px;height:40px;border-radius:50%;background:var(--pink);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{font-weight:700;font-size:16px;letter-spacing:-0.01em}
.brand-sub{font-size:12px;color:var(--muted)}
.site-nav{display:flex;align-items:center;gap:12px}

/* Hero */
.hero{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center;padding-top:88px;padding-bottom:48px}
.hero h1{font-size:56px;line-height:1.18;font-weight:900;letter-spacing:-0.02em}
.hero-lead{margin-top:28px;font-size:18px;line-height:1.8;color:var(--ink-2);max-width:30em}
.scroll-hint{grid-column:1 / -1;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:44px;padding:4px 16px;color:var(--ink-2);text-decoration:none;font-size:14px}
.scroll-hint:hover{color:var(--ink)}
.scroll-hint svg{animation:scrollHint 1.6s ease-in-out infinite}
@keyframes scrollHint{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(8px);opacity:.55}}
@media (prefers-reduced-motion: reduce){.scroll-hint svg{animation:none}}

/* 對話示意 */
.chat{background:var(--forest);border-radius:28px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px -30px rgba(13,43,34,.55)}
.chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.chat-title{display:flex;flex-direction:column;gap:4px}
.chat-title strong{color:var(--white);font-size:16px}
.chat-title span{color:#7FD1A8;font-size:12px}
.chat-pct{background:var(--forest-2);color:var(--white);font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px}
.chat-bar{height:6px;background:var(--forest-2);border-radius:999px;display:flex}
.chat-bar span{width:45%;background:var(--mustard);border-radius:999px}
.bubble{max-width:82%;font-size:14px;line-height:1.7;padding:14px 16px;border-radius:16px}
.bubble-ai{align-self:flex-start;background:var(--forest-2);color:#F2F5F3}
.bubble-user{align-self:flex-end;background:var(--mustard);color:var(--ink);max-width:78%}
.chips{display:grid;gap:8px}
.chips-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.chips-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.chip{border:1px solid var(--forest-line);color:#F2F5F3;font-size:13px;padding:10px 12px;border-radius:10px}
.chip.is-on{border:1.5px solid var(--mustard);background:var(--forest-3);color:var(--white)}
.chat-input{display:flex;gap:10px;align-items:center}
.chat-input div{flex-grow:1;background:var(--forest-2);border:1px solid var(--forest-line);color:var(--mint);font-size:13px;padding:14px 16px;border-radius:12px}
.chat-send{width:48px;height:48px;border-radius:12px;background:#8A7A2E;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-hint{color:var(--mint);font-size:12px}
.chat-confirm{height:46px;background:var(--mustard);color:var(--ink);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;border-radius:12px}

/* 流程總覽 */
.flow{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.flow .wrap{padding-top:72px;padding-bottom:72px;display:flex;flex-direction:column;gap:40px}
.section-title{font-size:34px;font-weight:900;letter-spacing:-0.01em;line-height:1.3}
.flow-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.flow-list li{display:flex;flex-direction:column;gap:12px;padding:0 28px 0 0;border-top:3px solid var(--ink)}
.flow-num{font-family:var(--display);font-weight:800;font-size:64px;line-height:1;color:var(--pink);margin-top:20px}
.flow-list strong{font-size:20px}
.flow-list span{font-size:15px;line-height:1.7;color:var(--ink-2)}

/* 步驟區塊 */
.step{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:center;scroll-margin-top:96px}
.step-1{padding-top:104px}
.step-2{padding-top:160px}
.step-3{padding-top:140px;display:flex;flex-direction:column;gap:48px}
.step-3 .step-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:72px;align-items:center}
.step-4{padding-top:140px}
.step-4-copy{display:flex;flex-direction:column;gap:22px}
.step-4-copy > p{font-size:17px;line-height:1.8;color:var(--ink-2)}
.step-text{display:flex;flex-direction:column;gap:22px}
.step-label{font-family:var(--display);font-weight:800;font-size:20px;color:var(--pink)}
.step-text h2{font-size:38px;font-weight:900;line-height:1.3}
.step-text > p{font-size:17px;line-height:1.8;color:var(--ink-2)}

.checks{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px;font-size:15px;line-height:1.6}
.checks li{display:flex;gap:12px}
.checks svg{flex-shrink:0}

.tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tip{background:var(--paper);border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:8px}
.tip strong{font-size:16px}
.tip span{font-size:14px;line-height:1.7;color:var(--ink-2)}

/* 註冊示意 */
.mock-form{position:relative;background:var(--paper);border:1px solid var(--line);padding:36px;display:flex;flex-direction:column;gap:16px;box-shadow:0 24px 48px -32px rgba(30,28,26,.35);margin-bottom:40px}
.mock-kicker{font-size:13px;color:var(--pink-text)}
.mock-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mock-field{display:flex;flex-direction:column;gap:6px;font-size:13px}
.mock-field em{font-style:normal;color:var(--pink-text)}
.mock-input{height:40px;border:1px solid var(--line-2);background:var(--white);font-size:13px;padding:0 12px;display:flex;align-items:center}
.mock-btn{height:44px;background:var(--pink);color:var(--white);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mock-otp{position:absolute;right:-28px;bottom:-40px;width:300px;background:var(--white);border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 24px 48px -24px rgba(30,28,26,.45)}
.mock-otp .mock-kicker{font-size:12px}
.mock-otp strong{font-size:18px}
.otp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.otp span{height:40px;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600}
.otp span.is-active{border:1.5px solid var(--ink)}
.otp-foot{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.otp-foot span:first-child{text-decoration:underline}

/* 提案卡片示意 */
.mock-card{background:var(--paper);border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 24px 48px -32px rgba(30,28,26,.35)}
.mock-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.mock-card-title{display:flex;flex-direction:column;gap:4px}
.mock-card-title strong{font-size:20px;font-weight:500}
.mock-card-title span{font-size:12px;color:var(--muted)}
.mock-card hr{border:0;height:1px;background:var(--line);margin:0}
.mock-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;font-size:13px}
.mock-meta div{display:flex;flex-direction:column;gap:4px}
.mock-meta span:first-child{color:var(--muted)}

.pill{align-self:flex-start;font-size:13px;font-weight:500;padding:6px 12px;border-radius:999px;white-space:nowrap}
.s-collecting{background:#ECE9E3;color:#4A453F}
.s-collected{background:#FBEFC8;color:#7A4E00}
.s-analyzing{background:#EEE8FD;color:#6236C9}
.s-analyzed{background:#DFF1FB;color:#1C6696}
.s-reviewing{background:#E3ECFD;color:#2D52B8}
.s-closed{background:#D8F5E6;color:#16774A}

/* 狀態時間軸 */
.status-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.status-list li{display:flex;flex-direction:column;gap:14px}
.status-track{display:flex;align-items:center;gap:8px}
.status-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.status-line{flex-grow:1;height:2px;background:var(--line-2)}
.status-desc{font-size:14px;line-height:1.7;color:var(--ink-2)}
.status-act{font-size:13px;font-weight:700;color:var(--forest-2)}

/* 報告示意 */
.mock-report-card{background:var(--paper);border:1px solid var(--line);padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.mock-report-card div{display:flex;flex-direction:column;gap:10px}
.mock-report-card strong{font-size:18px;font-weight:500}
.mock-report-card u{font-size:14px}
.mock-cover{margin:20px 0 0 48px;background:#111827;border-radius:20px;aspect-ratio:16 / 9;padding:32px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;position:relative}
.mock-cover::before{content:"";position:absolute;right:-40px;top:-30px;width:220px;height:220px;border-radius:50%;background:#6A5FD0}
.mock-cover::after{content:"";position:absolute;right:120px;bottom:-90px;width:150px;height:150px;border-radius:50%;background:#C4E36A}
.mock-cover > *{position:relative;z-index:1}
.mock-cover small{color:#C4E36A;font-size:11px;font-weight:700;letter-spacing:.08em}
.mock-cover strong{display:block;color:var(--white);font-size:30px;font-weight:900;line-height:1.2}
.mock-cover span{display:block;margin-top:8px;color:#B8BDC8;font-size:13px}
.note-box{background:var(--paper);border:1px solid var(--line);padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
.note-box svg{flex-shrink:0}
.note-box div{display:flex;flex-direction:column;gap:6px}
.note-box strong{font-size:16px}
.note-box span{font-size:14px;line-height:1.7;color:var(--ink-2)}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px;padding-top:150px;padding-bottom:120px;scroll-margin-top:96px}
.faq-intro{display:flex;flex-direction:column;gap:16px}
.faq-intro p{font-size:15px;line-height:1.8;color:var(--ink-2)}
.faq-list{grid-column:span 2;border-top:2px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line-2)}
.faq-list summary{list-style:none;cursor:pointer;min-height:64px;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:17px;font-weight:500}
.faq-list summary::-webkit-details-marker{display:none}
.faq-icon{width:20px;height:20px;flex-shrink:0;position:relative}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;left:3px;right:3px;top:9px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s ease}
.faq-icon::after{transform:rotate(90deg)}
.faq-list details[open] .faq-icon::after{transform:rotate(0deg)}
@media (prefers-reduced-motion: reduce){.faq-icon::before,.faq-icon::after{transition:none}}
.faq-list details p{padding:0 40px 22px 0;font-size:15px;line-height:1.8;color:var(--ink-2)}

/* Footer */
.site-footer{background:var(--forest)}
.site-footer .wrap{padding-top:48px;padding-bottom:48px;display:flex;justify-content:space-between;align-items:center;gap:24px}
.footer-text{display:flex;flex-direction:column;gap:6px}
.footer-text strong{color:var(--white);font-size:18px}
.footer-text span{color:var(--mint);font-size:14px}
.footer-actions{display:flex;gap:12px;align-items:center}

/* ---------- 平板 ≤ 1024px ---------- */
@media (max-width:1024px){
  .hero,.step,.step-3 .step-row{grid-template-columns:minmax(0,1fr);gap:48px}
  .hero{padding-top:64px}
  .hero-lead{max-width:none}
  .flow-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .step-2 .step-text,.step-4 .step-text{order:-1}
  .step-1,.step-2,.step-3,.step-4{padding-top:96px}
  .mock-form{max-width:560px}
  .mock-otp{right:-16px}
  .status-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
  .faq{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:104px;padding-bottom:88px}
  .faq-list{grid-column:auto}
}

/* ---------- 手機 ≤ 640px ---------- */
@media (max-width:640px){
  :root{--pad:20px}
  .site-header .wrap{padding-top:12px;padding-bottom:12px}
  .brand-mark{width:34px;height:34px;font-size:13px}
  .brand-name{font-size:15px}
  .site-nav{gap:8px}
  .site-nav .btn{height:40px;padding:0 12px;font-size:13px}
  .hero{padding-top:44px;padding-bottom:32px;gap:36px}
  .hero h1{font-size:34px}
  .hero-lead{margin-top:18px;font-size:16px}
  .chat{padding:20px 16px 18px;border-radius:22px}
  .bubble{max-width:90%;font-size:13px}
  .bubble-user{max-width:88%}
  .chip{font-size:12px;padding:10px 8px}
  .flow .wrap{padding-top:52px;padding-bottom:52px;gap:28px}
  .section-title{font-size:26px}
  .flow-list{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .flow-list li{padding:0}
  .flow-num{font-size:48px;margin-top:16px}
  .step-1,.step-2,.step-3,.step-4{padding-top:72px}
  .step,.step-3 .step-row{gap:32px}
  .step-3{gap:40px}
  .step-text{gap:16px}
  .step-text h2{font-size:28px}
  .step-text > p{font-size:16px}
  .step-4 .step-text{display:contents}
  .step-4-copy{order:-1;gap:16px}
  .step-4-copy > p{font-size:16px}
  .tips{grid-template-columns:minmax(0,1fr);gap:12px}
  .mock-form{padding:24px 20px;margin-bottom:0}
  .mock-grid{grid-template-columns:minmax(0,1fr)}
  .mock-otp{position:static;width:auto;margin-top:8px}
  .mock-meta{grid-template-columns:minmax(0,1fr);gap:10px}
  .mock-card{padding:22px 20px}
  .mock-card-title strong{font-size:17px}
  .status-list{grid-template-columns:minmax(0,1fr);gap:0}
  .status-list li{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:16px;row-gap:8px;padding-bottom:24px;position:relative}
  .status-list li:not(:last-child)::before{content:"";position:absolute;left:6px;top:18px;bottom:0;width:2px;background:var(--line-2)}
  .status-track{grid-row:1 / span 3;align-items:flex-start;padding-top:6px}
  .status-line{display:none}
  .mock-report-card{padding:20px}
  .mock-cover{margin:16px 0 0;padding:22px;border-radius:16px}
  .mock-cover strong{font-size:22px}
  .faq{padding-top:80px;padding-bottom:64px}
  .faq-list summary{font-size:16px;min-height:56px}
  .faq-list details p{padding-right:0}
  .site-footer .wrap{flex-direction:column;align-items:stretch;padding-top:36px;padding-bottom:36px}
  .footer-actions{flex-direction:column;align-items:stretch}
  .footer-actions .btn{width:100%}
}