:root{
  --paper:#FBF8F1;          /* 紙底 */
  --paper-2:#F5F1E8;         /* 次層 */
  --paper-3:#EFE9DB;         /* 更深一層 */
  --ink:#3A3633;             /* 墨字（非純黑） */
  --ink-2:#5C564E;           /* 次墨 */
  --ink-3:#8A8378;           /* 淡墨／提示 */
  --line:#E0D8C8;            /* 筆記本橫線 */
  --line-soft:#EAE3D3;
  --hl-yellow:#FFF07A;       /* 螢光黃 */
  --hl-pink:#FFB3C7;         /* 螢光粉 */
  --hl-green:#C7F0A4;        /* 螢光綠 */
  --cta:#FF8A65;             /* 珊瑚橘 CTA */
  --cta-deep:#E96F4A;
  --cta-ink:#5A2415;         /* CTA 上的深字 */
  --blue:#4A6FA5;            /* focus 可見色 */
  --tape:rgba(255,240,122,.55);
  --radius:14px;
  --hand:"Iansui","LXGW WenKai","Klee One",cursive;     /* 中文手寫楷 */
  --sans:"Iansui","Quicksand","LXGW WenKai",system-ui,sans-serif;
  --script:"Iansui","Caveat",cursive;                    /* 英數手寫 */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.85;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  /* 極輕紙質紋理：兩層細微點 + 一層暖光 */
  background-image:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.5),transparent 45%),
    radial-gradient(circle at 82% 88%,rgba(232,222,200,.35),transparent 50%);
  background-attachment:fixed;
}
::selection{background:var(--hl-yellow);color:var(--ink)}
a{color:inherit;text-decoration:none}
.cn{font-family:var(--hand)}
.script{font-family:var(--script)}

/* 紙質顆粒覆蓋（SVG noise，極淡） */
.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
main{position:relative;z-index:2}

/* ── 閱讀進度（手繪鉛筆書脊） ── */
.progress-rail{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;background:transparent;pointer-events:none}
.progress-rail i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--hl-yellow),var(--hl-pink) 55%,var(--cta));
  border-bottom-right-radius:4px;transition:width .12s linear}

/* 章節書籤（右側） */
.bookmarks{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:55;
  display:flex;flex-direction:column;gap:13px}
.bookmarks a{width:11px;height:11px;border-radius:50%;border:1.6px solid var(--ink-3);
  background:transparent;transition:all .25s;cursor:pointer;position:relative}
.bookmarks a:hover{transform:scale(1.25);border-color:var(--cta)}
.bookmarks a.active{background:var(--cta);border-color:var(--cta);transform:scale(1.2)}
.bookmarks a::after{content:attr(data-label);position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--hand);font-size:.82rem;color:var(--ink-2);white-space:nowrap;
  background:var(--paper);padding:3px 10px;border-radius:8px;border:1px dashed var(--line);
  opacity:0;pointer-events:none;transition:opacity .2s}
.bookmarks a:hover::after{opacity:1}
@media(max-width:920px){.bookmarks{display:none}}

/* ── 導覽 ── */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:15px clamp(18px,4vw,52px);
  background:rgba(251,248,241,.82);backdrop-filter:blur(8px);
  border-bottom:1.5px dashed var(--line)}
/* 只留中間 6 項選單：左上品牌與右側 CTA 收起（HTML 保留方便還原） */
.brand{display:none!important}
.nav-cta{display:none!important}
.brand .logo-round{width:44px;height:44px;flex-shrink:0;display:block;
  filter:drop-shadow(0 2px 4px rgba(90,70,50,.12));transition:transform .25s}
.brand:hover .logo-round{transform:rotate(-5deg) scale(1.05)}
.brand .zh{font-family:var(--hand);font-size:1.22rem;font-weight:600;color:var(--ink);letter-spacing:0}
.brand .en{font-family:var(--script);font-size:1.15rem;color:var(--ink-3);transform:rotate(-3deg)}
/* 視覺隱藏（給螢幕閱讀器，畫面不顯示） */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:560px){.brand .zh{display:none}}
.nav-links{display:flex;gap:24px;font-size:.92rem;color:var(--ink-2);font-weight:500;justify-self:center}
.nav-links a{position:relative;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:'';position:absolute;left:-2px;right:-2px;bottom:1px;height:7px;
  background:var(--hl-yellow);border-radius:3px;z-index:-1;transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{font-family:var(--hand);font-size:1rem;font-weight:600;padding:8px 20px;border-radius:99px;
  background:var(--cta);color:var(--cta-ink);border:2px solid var(--cta);transition:all .2s;cursor:pointer;
  white-space:nowrap;flex-shrink:0;justify-self:end;box-shadow:2px 3px 0 rgba(233,111,74,.35)}
.nav-cta:hover{transform:translate(-1px,-1px);box-shadow:3px 4px 0 rgba(233,111,74,.4)}
@media(max-width:780px){.nav-links{display:none}}

/* ── 通用區段 ── */
.band{position:relative;padding:clamp(70px,11vh,128px) clamp(20px,5vw,56px)}
.inner{max-width:1080px;margin:0 auto}
.inner-narrow{max-width:760px;margin:0 auto}
.chapter-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--script);
  font-size:1.5rem;color:var(--cta-deep);transform:rotate(-2deg);margin-bottom:14px}
.chapter-tag svg{width:30px;height:30px;flex-shrink:0}
.sec-title{font-family:var(--hand);font-weight:600;font-size:clamp(1.7rem,4.2vw,2.7rem);
  line-height:1.55;color:var(--ink);margin-bottom:18px}
.sec-lead{font-size:clamp(1rem,1.6vw,1.1rem);color:var(--ink-2);max-width:600px;line-height:1.9}

/* 螢光筆劃重點（只劃半截、歪歪的） */
.hl{position:relative;white-space:nowrap;z-index:0}
.hl::before{content:'';position:absolute;left:-3px;right:-1px;bottom:.04em;height:.62em;z-index:-1;
  background:var(--hl-yellow);border-radius:4px 7px 5px 8px;
  transform:rotate(-1.2deg) skewX(-4deg);opacity:.85;
  width:100%;transition:width .5s ease}
.hl.pink::before{background:var(--hl-pink)}
.hl.green::before{background:var(--hl-green)}
.hl.half::before{width:72%}     /* 只劃半截 */
.hl.half2::before{width:84%;left:8%}

/* reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.on{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
/* no-js / 無 IntersectionObserver fallback：內容一定顯示，不會整片空白 */
.no-js .reveal{opacity:1;transform:none}

/* 紙膠帶 */
.tape{position:absolute;width:96px;height:30px;background:var(--tape);
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 6px,#000 calc(100% - 6px),transparent 100%);
  opacity:.8}
.tape.pink{background:rgba(255,179,199,.55)}
.tape.green{background:rgba(199,240,164,.55)}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:grid;
  grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(28px,4vw,60px);
  max-width:1180px;margin:0 auto;padding:128px clamp(20px,5vw,56px) 80px}
.hero-copy{position:relative;z-index:3}
.hero-doodle-sun{position:absolute;top:-18px;left:-6px;width:62px;height:62px;opacity:0;animation:popIn .8s .2s forwards}
.hero-hello{font-family:var(--script);font-size:1.7rem;color:var(--cta-deep);transform:rotate(-2deg);
  display:inline-block;margin-bottom:10px;opacity:0;animation:rise .8s .15s forwards}
.hero h1{font-family:var(--hand);font-weight:600;font-size:clamp(2.1rem,5.6vw,3.7rem);line-height:1.5;
  color:var(--ink);margin-bottom:24px;opacity:0;animation:rise .9s .3s forwards}
.hero-sub{max-width:440px;color:var(--ink-2);font-size:clamp(1rem,1.7vw,1.14rem);line-height:1.95;
  margin-bottom:34px;opacity:0;animation:rise .9s .45s forwards}
.hero-cta-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;opacity:0;animation:rise .9s .6s forwards}
.btn-cta{font-family:var(--hand);font-size:1.22rem;font-weight:600;color:var(--cta-ink);background:var(--cta);
  border:2.5px solid var(--cta-deep);border-radius:16px;padding:15px 30px;cursor:pointer;
  display:inline-flex;align-items:center;gap:11px;transition:transform .18s,box-shadow .2s;
  box-shadow:3px 4px 0 rgba(233,111,74,.4)}
.btn-cta:hover{transform:translate(-2px,-2px);box-shadow:5px 6px 0 rgba(233,111,74,.45)}
.btn-cta:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(233,111,74,.4)}
.btn-cta svg{width:22px;height:22px}
.btn-cta.lg{font-size:1.4rem;padding:18px 38px}
.cta-note{font-size:.86rem;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.cta-note svg{width:16px;height:16px;flex-shrink:0}

/* hero 視覺：翻開的手帳本 */
.hero-art{position:relative;z-index:2}
.notebook{position:relative;background:var(--paper-2);border-radius:6px 16px 16px 6px;
  padding:40px 36px 44px;
  box-shadow:0 24px 50px -22px rgba(90,70,50,.4),0 2px 0 rgba(0,0,0,.04);
  border:1px solid var(--line);transform:rotate(1.4deg);
  background-image:repeating-linear-gradient(transparent,transparent 37px,var(--line) 37px,var(--line) 38px);
  background-position:0 24px}
.notebook::before{content:'';position:absolute;left:30px;top:0;bottom:0;width:1.5px;background:rgba(255,140,120,.32)}
.notebook::after{content:'';position:absolute;left:-2px;top:0;bottom:0;width:18px;
  background:linear-gradient(90deg,rgba(0,0,0,.06),transparent);border-radius:6px 0 0 6px}
.nb-spiral{position:absolute;left:-9px;top:36px;bottom:36px;width:18px;display:flex;flex-direction:column;justify-content:space-between}
.nb-spiral span{width:18px;height:9px;border:2px solid var(--ink-3);border-radius:50%;opacity:.45;background:var(--paper)}
.nb-date{font-family:var(--script);font-size:1.25rem;color:var(--ink-3);text-align:right;margin-bottom:14px}
.nb-title{font-family:var(--hand);font-size:1.5rem;font-weight:600;color:var(--ink);margin-bottom:6px;padding-left:14px}
.nb-line{font-family:var(--hand);font-size:1.06rem;color:var(--ink-2);padding-left:14px;line-height:2.05;
  display:flex;align-items:baseline;gap:8px}
.nb-line svg{width:18px;height:18px;flex-shrink:0;margin-top:3px}
.nb-blur{filter:blur(4.5px);opacity:.6;user-select:none}
.nb-stamp{position:absolute;right:-14px;bottom:-16px;width:104px;height:104px;
  display:flex;align-items:center;justify-content:center;transform:rotate(-9deg);
  font-family:var(--hand);font-size:.92rem;font-weight:600;color:var(--cta-deep);text-align:center;line-height:1.3}
.nb-stamp svg{position:absolute;inset:0;width:100%;height:100%}
.hero-doodle-cloud{position:absolute;right:-8px;top:-30px;width:84px;opacity:0;animation:popIn .8s .5s forwards}
.hero-doodle-plant{position:absolute;left:-34px;bottom:-22px;width:60px;opacity:0;animation:popIn .8s .7s forwards}
/* hero 小招牌：人生閱歷書 emo-less 主視覺貼在手帳左上，當點綴不搶主視覺 */
.hero-badge{position:absolute;left:-30px;top:-44px;width:108px;height:auto;z-index:4;
  transform:rotate(-7deg);filter:drop-shadow(0 4px 8px rgba(90,70,50,.18));
  opacity:0;animation:popIn .8s .9s forwards}
@media(max-width:880px){.hero-badge{left:auto;right:-10px;top:-40px;width:88px}}
@media(max-width:430px){.hero-badge{width:66px;top:-30px;right:-2px}}

/* hero 翻書示範（poster 起手，點擊才載入＋播放，不拖慢首屏） */
.flip-demo{position:relative;margin:22px auto 0;max-width:300px;border-radius:14px;overflow:hidden;
  border:1.5px solid var(--line);box-shadow:0 14px 30px -18px rgba(90,70,50,.4);
  transform:rotate(-1.2deg);cursor:pointer;background:var(--paper-2)}
.flip-demo video,.flip-demo img.flip-poster{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.flip-demo .flip-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;background:rgba(58,54,51,.18);transition:background .2s;border:none;width:100%;cursor:pointer;color:#fff;font-family:var(--hand)}
.flip-demo:hover .flip-play{background:rgba(58,54,51,.08)}
.flip-demo .flip-play .pp{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.flip-demo .flip-play .pp svg{width:22px;height:22px;margin-left:3px}
.flip-demo .flip-play .lbl{font-size:1.02rem;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.flip-demo.playing .flip-play{display:none}
@media(max-width:880px){.flip-demo{display:none}}  /* 手機首屏只留手帳本主視覺，翻書示範不顯示 */

@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@media(max-width:880px){
  .hero{grid-template-columns:1fr;padding-top:112px;text-align:center}
  .hero-copy{order:2}.hero-art{order:1;margin:0 auto;max-width:420px}
  .hero-sub{margin-left:auto;margin-right:auto}
  .hero-cta-row{justify-content:center}
  .hero-doodle-sun{display:none}
}
/* 375px：手帳本不溢出，縮字級＋收 padding＋藏會頂出去的塗鴉 */
@media(max-width:430px){
  .hero{padding-left:16px;padding-right:16px;gap:20px}
  .hero-art{max-width:300px}
  .notebook{padding:30px 22px 34px;transform:rotate(.8deg)}
  .nb-title{font-size:1.28rem}
  .nb-line{font-size:.96rem;line-height:1.9}
  .nb-date{font-size:1.05rem}
  .nb-stamp{width:84px;height:84px;font-size:.8rem;right:-6px;bottom:-10px}
  .hero-doodle-cloud{width:60px;right:-2px;top:-20px}
  .hero-doodle-plant{display:none}
  .btn-cta.lg{font-size:1.18rem;padding:15px 26px}
}

/* ============ 痛點共鳴 ============ */
.band-pain{background:var(--paper-2);border-top:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line)}
.pain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.sticky-note{position:relative;background:#FFF9D6;padding:28px 24px 30px;border-radius:3px;
  box-shadow:2px 6px 16px -6px rgba(90,70,50,.3);font-family:var(--hand);color:var(--ink-2);
  transition:transform .25s,box-shadow .25s}
.sticky-note:nth-child(1){transform:rotate(-1.8deg);background:#FFF6CF}
.sticky-note:nth-child(2){transform:rotate(1.2deg);background:#FFE9EE}
.sticky-note:nth-child(3){transform:rotate(-.8deg);background:#EAF7D8}
.sticky-note:hover{transform:rotate(0) translateY(-5px);box-shadow:3px 10px 22px -6px rgba(90,70,50,.34)}
.sticky-note .pin{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:18px;height:18px}
.sticky-note h3{font-size:1.28rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.sticky-note p{font-size:1.02rem;line-height:1.85}
.pain-after{margin-top:52px;text-align:center;font-family:var(--hand);font-size:clamp(1.2rem,2.6vw,1.7rem);
  color:var(--ink);line-height:1.7}
@media(max-width:820px){.pain-grid{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}}

/* ============ 這是什麼 ============ */
.what-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(34px,5vw,72px);align-items:center;margin-top:40px}
.what-card{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:38px 34px;box-shadow:0 14px 34px -20px rgba(90,70,50,.4);transform:rotate(-1deg)}
.what-card .corner{position:absolute;bottom:0;right:0;width:42px;height:42px;
  background:linear-gradient(135deg,transparent 50%,var(--paper-3) 50%);border-radius:0 0 var(--radius) 0}
.what-card h3{font-family:var(--hand);font-size:1.5rem;font-weight:600;margin-bottom:18px;color:var(--ink)}
.eq{display:flex;flex-direction:column;gap:14px}
.eq-row{display:flex;align-items:flex-start;gap:13px;font-size:1.02rem;color:var(--ink-2);line-height:1.7}
.eq-row .ic{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center}
.eq-row .ic svg{width:21px;height:21px}
.what-body p{font-size:1.06rem;color:var(--ink-2);line-height:1.95;margin-bottom:18px}
.what-body p b{color:var(--ink);font-weight:600}
.what-body .nope{display:inline-block;font-family:var(--hand);font-size:1.05rem;color:var(--ink-3);
  text-decoration:line-through;text-decoration-color:var(--cta);text-decoration-thickness:2px;margin-right:6px}
@media(max-width:820px){.what-wrap{grid-template-columns:1fr}.what-card{max-width:440px;margin:0 auto}}

/* ============ 三步驟 ============ */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px);margin-top:52px;position:relative}
.step{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:34px 26px 30px;text-align:center;transition:transform .25s,box-shadow .25s}
.step:hover{transform:translateY(-5px);box-shadow:0 16px 34px -18px rgba(90,70,50,.4)}
.step .num{font-family:var(--script);font-size:3.4rem;font-weight:700;color:var(--cta);line-height:1;
  margin-bottom:6px;transform:rotate(-4deg)}
.step .draw{width:74px;height:74px;margin:6px auto 16px}
.step h3{font-family:var(--hand);font-size:1.3rem;font-weight:600;color:var(--ink);margin-bottom:8px}
.step p{font-size:.96rem;color:var(--ink-2);line-height:1.8}
.step-arrow{position:absolute;top:46%;width:46px;height:30px;z-index:3}
.step-arrow.a1{left:31.5%}.step-arrow.a2{left:64.5%}
@media(max-width:820px){.steps{grid-template-columns:1fr;max-width:380px;margin-left:auto;margin-right:auto}.step-arrow{display:none}}

/* ============ 裡面有什麼 ============ */
.feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:48px}
.feat{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}
.feat:hover{transform:translateY(-4px);box-shadow:0 16px 34px -20px rgba(90,70,50,.4);border-color:var(--ink-3)}
.feat.star{border:2px solid var(--cta);background:linear-gradient(180deg,#FFF4EE,var(--paper))}
.feat-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.feat-ic{width:48px;height:48px;flex-shrink:0;border-radius:13px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center}
.feat.star .feat-ic{background:#FFE3D7}
.feat-ic svg{width:27px;height:27px}
.feat h3{font-family:var(--hand);font-size:1.34rem;font-weight:600;color:var(--ink)}
.feat .ribbon{font-family:var(--hand);font-size:.86rem;font-weight:600;color:#fff;background:var(--cta);
  padding:2px 12px;border-radius:99px;transform:rotate(-2deg);margin-left:auto}
.feat p{font-size:.99rem;color:var(--ink-2);line-height:1.85}
.feat p b{color:var(--ink);font-weight:600}
/* 能量打分迷你示意 */
.spark{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:16px}
.spark i{flex:1;background:var(--hl-green);border-radius:3px 3px 0 0;opacity:.9;transition:height 1s cubic-bezier(.2,.7,.3,1);height:8px}
.feat.on .spark i{height:var(--h)}
.no-js .feat .spark i{height:var(--h)}
.spark i:nth-child(even){background:var(--hl-yellow)}
.spark i.low{background:var(--hl-pink)}
/* 月曆迷你示意 */
.minical{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:16px}
.minical span{aspect-ratio:1;border-radius:5px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;
  font-family:var(--script);font-size:.82rem;color:var(--ink-3)}
.minical span.g{background:var(--hl-green);color:#3c5a1e}
.minical span.y{background:var(--hl-yellow);color:#6a5b0a}
.minical span.p{background:var(--hl-pink);color:#7a2540}
@media(max-width:760px){.feat-grid{grid-template-columns:1fr}}

/* ============ 免費 vs 686 ============ */
.band-plans{background:var(--paper-2);border-top:1.5px dashed var(--line);border-bottom:1.5px dashed var(--line)}
.plans{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;margin-top:48px;align-items:stretch}
.plan{position:relative;background:var(--paper);border:1.5px solid var(--line);border-radius:18px;
  padding:38px 34px;display:flex;flex-direction:column}
.plan.free{transform:rotate(-.8deg)}
.plan.full{transform:rotate(.6deg);border:2.5px solid var(--cta);
  box-shadow:0 26px 50px -24px rgba(233,111,74,.5)}
.plan-tape{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-2deg)}
.plan h3{font-family:var(--hand);font-size:1.6rem;font-weight:600;color:var(--ink);margin-bottom:4px}
.plan .for{font-size:.92rem;color:var(--ink-3);margin-bottom:20px}
.plan .price{font-family:var(--script);font-weight:700;color:var(--ink);line-height:1;margin-bottom:6px}
.plan.free .price{font-size:2.8rem}
.plan.full .price{font-size:3.6rem;color:var(--cta-deep)}
.plan .price small{font-family:var(--sans);font-size:1rem;font-weight:500;color:var(--ink-3)}
.plan ul{list-style:none;margin:22px 0 26px;flex:1;display:flex;flex-direction:column;gap:12px}
.plan li{font-size:1rem;color:var(--ink-2);padding-left:30px;position:relative;line-height:1.6}
.plan li svg{position:absolute;left:0;top:4px;width:19px;height:19px}
.plan li.hl-li{color:var(--ink);font-weight:500}
.plan li.locked{color:var(--ink-3)}
.plan-btn{font-family:var(--hand);font-size:1.22rem;font-weight:600;text-align:center;border-radius:14px;
  padding:15px;cursor:pointer;transition:transform .18s,box-shadow .2s;border:2px solid var(--ink-3);
  background:transparent;color:var(--ink)}
.plan-btn:hover{transform:translateY(-2px)}
.plan-btn.solid{background:var(--cta);color:var(--cta-ink);border-color:var(--cta-deep);box-shadow:3px 4px 0 rgba(233,111,74,.4)}
.plan-btn.solid:hover{transform:translate(-2px,-2px);box-shadow:5px 6px 0 rgba(233,111,74,.45)}
.gift-line{font-family:var(--hand);font-size:1.05rem;color:var(--cta-deep);margin-bottom:16px;
  display:flex;align-items:center;gap:8px}
.gift-line svg{width:22px;height:22px;flex-shrink:0}
/* 686 卡的半句勾子（被模糊遮住的真句） */
.blur-li{flex-wrap:wrap}
.blurline{position:relative;display:inline-block;color:transparent;user-select:none;border-radius:4px;
  background:linear-gradient(transparent 60%,rgba(58,54,51,.07) 60%);overflow:hidden;vertical-align:bottom}
.blurline::before{content:attr(data-blur);position:absolute;inset:0;color:var(--ink-2);filter:blur(4.2px);opacity:.72;white-space:nowrap}
@media(max-width:820px){.plans{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}}

/* ============ 共鳴小語 ============ */
.band-warm{text-align:center}
.warm-quote{font-family:var(--hand);font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.85;color:var(--ink);
  max-width:720px;margin:0 auto;position:relative}
.warm-quote .qmark{font-family:var(--script);font-size:5rem;color:var(--hl-pink);line-height:0;display:block;margin-bottom:30px}
.warm-sub{font-size:1.05rem;color:var(--ink-2);margin-top:34px;line-height:1.9}
.warm-doodles{display:flex;justify-content:center;gap:26px;margin-top:40px;opacity:.85}
.warm-doodles svg{width:48px;height:48px}

/* ============ 最終 CTA ============ */
.band-final{background:var(--paper-2);border-top:1.5px dashed var(--line)}
.final{position:relative;max-width:680px;margin:0 auto;text-align:center;
  background:var(--paper);border:2px solid var(--line);border-radius:20px;
  padding:clamp(44px,6vw,68px) clamp(26px,5vw,56px);
  box-shadow:0 24px 50px -26px rgba(90,70,50,.45)}
.final .tag{font-family:var(--script);font-size:1.7rem;color:var(--cta-deep);transform:rotate(-2deg);display:inline-block;margin-bottom:12px}
.final h2{font-family:var(--hand);font-size:clamp(1.8rem,4.4vw,2.7rem);font-weight:600;color:var(--ink);
  line-height:1.5;margin-bottom:18px}
.final p{font-size:1.06rem;color:var(--ink-2);line-height:1.9;margin-bottom:34px;max-width:480px;margin-left:auto;margin-right:auto}
.final-sun{position:absolute;top:-30px;right:-18px;width:80px;opacity:.9}
@media(max-width:560px){.final-sun{width:56px;top:-22px;right:8px}}

/* ============ footer ============ */
footer{padding:50px clamp(20px,5vw,56px) 40px;text-align:center;color:var(--ink-3);font-size:.86rem;
  border-top:1.5px dashed var(--line)}
.foot-logo{width:clamp(180px,40vw,240px);height:auto;display:block;margin:0 auto 14px;opacity:.92}
.foot-brand{font-family:var(--hand);font-size:1.3rem;color:var(--ink-2);margin-bottom:16px}
.foot-links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;font-size:.9rem}
.foot-links a{color:var(--ink-2);transition:color .2s;cursor:pointer}
.foot-links a:hover{color:var(--cta-deep)}
.foot-fine{max-width:560px;margin:0 auto;line-height:1.7;font-size:.8rem}

/* ============ 表單 modal（夾在手帳裡的便條） ============ */
#sheet-overlay{position:fixed;inset:0;z-index:90;background:rgba(58,54,51,.42);
  display:none;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(2px)}
#sheet-overlay.show{display:flex}
.sheet{position:relative;background:var(--paper);border:1px solid rgba(0,0,0,.1);border-radius:16px;
  width:min(460px,100%);max-height:92vh;overflow:auto;padding:clamp(26px,4vw,40px);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  background-image:repeating-linear-gradient(transparent,transparent 31px,var(--line-soft) 31px,var(--line-soft) 32px)}
.sheet .sheet-tape{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-2deg)}
.sheet-close{position:absolute;top:14px;right:16px;width:32px;height:32px;border:none;background:none;cursor:pointer;color:var(--ink-2)}
.sheet h3{font-family:var(--hand);font-weight:600;font-size:1.8rem;color:var(--ink);text-align:center;margin-bottom:2px}
.sheet .deck{font-family:var(--hand);font-size:1.15rem;color:var(--ink-3);text-align:center;margin-bottom:22px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-family:var(--hand);font-size:1.12rem;color:var(--ink-2)}
.field input,.field select{font-family:var(--sans);font-size:1rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:8px;padding:12px 13px;width:100%;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{outline:none;border-color:var(--cta);box-shadow:0 0 0 3px rgba(255,138,101,.18)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.consent{display:flex;gap:9px;align-items:flex-start;font-family:var(--sans);font-size:.82rem;color:var(--ink-3);line-height:1.65;margin:6px 0 16px}
.consent input{margin-top:4px;accent-color:var(--cta);width:auto;flex-shrink:0}
.consent a{color:var(--cta-deep);border-bottom:1px dotted var(--cta)}
.sheet .btn-cta{width:100%;justify-content:center;font-size:1.3rem;border-radius:14px}
.sheet .note-bottom{font-family:var(--hand);font-size:1.05rem;color:var(--ink-3);text-align:center;margin-top:12px}

/* focus 可見 */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
[role="button"]:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}

/* ============ 首訪品牌開場（intro overlay） ============ */
#intro-overlay{position:fixed;inset:0;z-index:120;background:var(--paper);
  display:none;align-items:center;justify-content:center;overflow:hidden}
#intro-overlay.show{display:flex}
#intro-overlay.fade-out{animation:introFade .6s ease forwards}
@keyframes introFade{from{opacity:1}to{opacity:0;visibility:hidden}}
/* 桌機：模糊同源背景填滿，影片置中直立卡片，不出現黑邊 */
.intro-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(34px) brightness(1.04);transform:scale(1.18);opacity:.9}
.intro-stage{position:relative;z-index:2;height:100svh;display:flex;align-items:center;justify-content:center}
.intro-video{height:100svh;width:auto;max-width:100vw;display:block;object-fit:contain}
/* 手機：9:16 直接填滿整個畫面 */
@media(max-width:880px){
  .intro-bg{display:none}
  .intro-video{width:100vw;height:100svh;object-fit:cover}
}
.intro-skip{position:absolute;top:max(16px,env(safe-area-inset-top));right:18px;z-index:4;
  font-family:var(--hand);font-size:1rem;font-weight:600;color:#fff;
  padding:9px 18px;border-radius:99px;border:1.5px solid rgba(255,255,255,.7);
  background:rgba(58,54,51,.34);backdrop-filter:blur(4px);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:background .2s,transform .15s}
.intro-skip:hover{background:rgba(58,54,51,.5);transform:translateY(-1px)}
.intro-skip svg{width:15px;height:15px}

/* ============ 送出後過場（翻書儀式） ============ */
#ritual{position:fixed;inset:0;z-index:99;background:rgba(251,248,241,.97);backdrop-filter:blur(6px);
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:30px;text-align:center;padding:24px}
#ritual.show{display:flex}
/* 過場影片（串場 9:16），桌機置中直立、手機填滿 */
.ritual-video-wrap{position:relative;width:min(280px,72vw);max-height:60svh;border-radius:18px;overflow:hidden;
  box-shadow:0 20px 50px -20px rgba(90,70,50,.5);background:var(--paper-2);display:none}
#ritual.has-video .ritual-video-wrap{display:block}
#ritual.has-video .ritual-book{display:none}
.ritual-video-wrap video{display:block;width:100%;height:auto;max-height:60svh;object-fit:cover}
.ritual-book{width:120px;height:120px;position:relative}
.ritual-book svg{width:100%;height:100%}
.ritual-pen{animation:write 1.4s ease-in-out infinite}
@keyframes write{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(6px,-3px) rotate(-6deg)}}
#ritual-status{font-family:var(--hand);font-size:1.3rem;color:var(--ink);min-height:1.6em}
.ritual-bar{width:min(280px,72vw);height:6px;background:var(--paper-3);border-radius:99px;overflow:hidden}
.ritual-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--hl-yellow),var(--hl-pink) 60%,var(--cta));transition:width .7s ease}
.ritual-hint{font-size:.86rem;color:var(--ink-3)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1!important;transform:none!important}
  .hero-hello,.hero h1,.hero-sub,.hero-cta-row,.hero-doodle-sun,.hero-doodle-cloud,.hero-doodle-plant,.hero-badge{opacity:1!important}
  .feat.on .spark i,.feat .spark i{height:var(--h)!important}
  /* 關動畫的人：開場 overlay 永不顯示，直接看首頁；翻書示範也不出現 */
  #intro-overlay{display:none!important}
  .flip-demo{display:none!important}
  html{scroll-behavior:auto}
}

/* ============ 多頁頁籤導覽（書本索引頁籤） ============ */
/* 桌機：選單置中（nav 為 grid，nav-links justify-self:center）；
   手機：覆蓋成可橫向滑動的頁籤列、nav 轉回 flex */
@media(max-width:780px){
  nav{display:flex}
  .nav-links{display:flex;flex:1 1 auto;min-width:0;margin:0 12px;gap:18px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{flex:0 0 auto;white-space:nowrap}
}
/* 目前所在頁：螢光底線常駐 + 加深字色 */
.nav-links a.active{color:var(--ink);font-weight:600}
.nav-links a.active::after{transform:scaleX(1)}
@media(max-width:560px){.nav-links{gap:14px;font-size:.88rem}}
/* 手機橫向滑動的左右淡出提示（fade-l / fade-r 由 JS 依捲動位置加） */
.nav-links.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.nav-links.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);
  mask-image:linear-gradient(90deg,transparent,#000 34px)}
.nav-links.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}

/* 每頁第一個區段：留白避開固定頁籤列，內容不被蓋住 */
main>.band:first-child{padding-top:clamp(104px,14vh,140px)}