:root{
    --paper:#f7f1e7;
    --paper-2:#efe5cf;
    --card:#fffdf6;
    --ink:#1f2523;
    --ink-2:#3a4140;
    --muted:#7a7166;
    --orange:#e8793e;
    --orange-deep:#b85323;
    --green:#4f7d5a;
    --green-deep:#365840;
    --red:#9e3f35;
    --yellow:#f5c518;
    --yellow-deep:#d4a90c;
    --line:#ded2c2;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
    background:var(--paper);
    color:var(--ink);
    font-size:17px; line-height:1.7;
    -webkit-font-smoothing:antialiased;
    background-image:
      radial-gradient(rgba(31,37,35,.06) 1.2px, transparent 1.4px);
    background-size:8px 8px;
  }
  .display{font-family:"Anton","Bebas Neue","Noto Sans TC",sans-serif; font-weight:400; letter-spacing:.01em;}
  .marker{font-family:"Permanent Marker",cursive;}
  .script{font-family:"Caveat",cursive;}
  a{color:inherit}

  /* tiny stars */
  .stars{display:inline-flex; gap:5px; color:var(--orange);}
  .stars b{font-size:.9em; line-height:1;}

  /* ============ TOP NAV ============ */
  .topnav{
    position:sticky; top:0; z-index:50;
    background:var(--ink); color:var(--paper);
    border-bottom:4px solid var(--yellow);
  }
  .topnav-inner{
    max-width:1240px; margin:0 auto;
    padding:14px 28px;
    display:flex; align-items:center; gap:18px;
    flex-wrap:wrap;
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:22px; letter-spacing:.06em; text-transform:uppercase;
  }
  .brand .badge{
    background:var(--yellow); color:var(--ink);
    width:38px; height:38px; border-radius:50%;
    display:grid; place-items:center;
    font-weight:900; font-size:18px;
    border:2px solid var(--paper);
    font-family:"Noto Sans TC",sans-serif;
  }
  .brand small{
    font-family:"Noto Sans TC",sans-serif;
    font-size:12px; color:var(--yellow);
    letter-spacing:.18em; font-weight:700;
    margin-left:2px;
  }
  .nav-links{
    display:flex; gap:4px; flex-wrap:wrap;
    margin-left:auto;
    font-size:13px; font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
  }
  .nav-links a{
    text-decoration:none;
    padding:8px 14px; border-radius:0;
    color:var(--paper);
    transition: background .15s, color .15s;
    font-family:"Anton","Noto Sans TC",sans-serif;
    letter-spacing:.08em;
  }
  .nav-links a:hover{ background:var(--yellow); color:var(--ink); }

  /* ============ LAYOUT ============ */
  main{max-width:1240px; margin:0 auto; padding:0 28px 120px;}
  section{padding:96px 0 48px; scroll-margin-top:88px;}

  /* Banner ribbon section title */
  .ribbon-title{
    display:flex; align-items:center; gap:0;
    margin:0 0 14px;
    flex-wrap:wrap;
  }
  .ribbon-title .label{
    background:var(--ink); color:var(--yellow);
    padding:10px 22px 10px 28px;
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:18px; letter-spacing:.22em;
    text-transform:uppercase;
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
    padding-right:32px;
  }
  .ribbon-title .step{
    background:var(--yellow); color:var(--ink);
    padding:10px 18px;
    font-family:"Anton",sans-serif;
    font-size:18px; letter-spacing:.06em;
    margin-left:-2px;
    clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 14px 100%, 0 50%);
    padding-left:24px; padding-right:24px;
  }
  h2.section-title{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900;
    font-size:clamp(38px,5vw,64px);
    line-height:1.05;
    margin:8px 0 14px;
    letter-spacing:-.015em;
  }
  h2.section-title .pop{
    background:var(--yellow);
    padding:0 8px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  h2.section-title .o{ color:var(--orange); }
  .section-sub{
    color:var(--ink-2); max-width:780px;
    font-size:18px; line-height:1.65;
    margin:0 0 40px;
  }

  /* ============ HERO ============ */
  .hero{
    padding:60px 0 56px;
    position:relative;
    border-bottom:4px solid var(--ink);
  }
  .hero-top{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    gap:24px; align-items:center;
    margin-bottom:32px;
  }
  .hero-banner{
    background:var(--ink); color:var(--paper);
    padding:14px 28px;
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:20px; letter-spacing:.16em;
    text-transform:uppercase;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    line-height:1.1;
    text-decoration:none;
    transition: transform .2s;
  }
  .hero-banner:hover{ transform: translateY(-3px); }
  .hero-banner.left{
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%, 22px 50%);
    padding-left:48px; padding-right:48px;
    justify-self:end;
  }
  .hero-banner.right{
    clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 50%, 100% 100%, 0 100%, 22px 50%);
    padding-left:48px; padding-right:48px;
    justify-self:start;
  }
  .hero-banner small{
    display:block; font-size:13px;
    color:var(--yellow); letter-spacing:.32em;
    margin-bottom:4px;
  }
  .hero-badge{
    width:104px; height:104px; border-radius:50%;
    background:var(--yellow);
    border:4px solid var(--ink);
    display:grid; place-items:center;
    font-family:"Anton",sans-serif;
    color:var(--ink);
    text-align:center; line-height:1;
    box-shadow: 0 8px 0 rgba(31,37,35,.18);
    position:relative;
  }
  .hero-badge:before{
    content:""; position:absolute; inset:6px;
    border:2px dashed rgba(31,37,35,.45);
    border-radius:50%;
  }
  .hero-badge .b1{ font-size:14px; letter-spacing:.2em;}
  .hero-badge .b2{ font-size:30px; line-height:1; margin:2px 0 0; font-family:"Anton",sans-serif;}
  .hero-badge .b3{ font-family:"Noto Sans TC",sans-serif; font-size:11px; font-weight:900; letter-spacing:.18em; margin-top:3px;}

  .hero-center{
    text-align:center;
    padding:8px 0 32px;
    position:relative;
  }
  .hero-eyebrow{
    font-family:"Anton","Noto Sans TC",sans-serif;
    color:var(--orange-deep);
    font-size:18px; letter-spacing:.5em;
    text-transform:uppercase;
    margin-bottom:14px;
  }
  h1.hero-title{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900;
    font-size:clamp(68px, 11vw, 168px);
    line-height:.92;
    margin:0;
    letter-spacing:-.04em;
    color:var(--ink);
    text-shadow: 6px 6px 0 var(--yellow);
  }
  h1.hero-title .row2{
    display:inline-block;
    margin-top:6px;
  }
  .hero-pennant{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--ink); color:var(--paper);
    padding:14px 56px 24px;
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:22px; letter-spacing:.18em;
    margin-top:18px;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    position:relative;
  }
  .hero-pennant .star{
    color:var(--yellow); margin:0 8px; font-size:18px;
  }
  .hero-sub{
    max-width:760px; margin:32px auto 28px;
    font-size:20px; color:var(--ink-2); line-height:1.55;
  }
  .hero-quote{
    display:inline-block;
    background:var(--yellow); color:var(--ink);
    padding:14px 28px;
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900; font-size:22px;
    border:3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    transform: rotate(-1.2deg);
  }
  .hero-cta{
    margin:36px 0 8px;
    display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  }
  .btn{
    text-decoration:none;
    display:inline-flex; align-items:center; gap:10px;
    padding:16px 32px;
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:18px; letter-spacing:.16em;
    text-transform:uppercase;
    border:3px solid var(--ink);
    background:var(--paper); color:var(--ink);
    transition: transform .15s, box-shadow .15s;
    box-shadow: 4px 4px 0 var(--ink);
  }
  .btn:hover{ transform:translate(-2px,-2px); box-shadow: 6px 6px 0 var(--orange); }
  .btn.primary{ background:var(--yellow); }
  .btn.secondary{ background:var(--orange); color:var(--paper); }

  /* Info strip — meeting info */
  .info-strip{
    background:var(--ink); color:var(--paper);
    padding:20px 28px;
    margin-top:48px;
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    gap:18px;
    border:3px solid var(--ink);
    position:relative;
  }
  .info-strip:before, .info-strip:after{
    content:""; position:absolute; top:50%;
    width:18px; height:18px; background:var(--yellow);
    border:3px solid var(--ink); border-radius:50%;
    transform:translateY(-50%);
  }
  .info-strip:before{ left:-12px;}
  .info-strip:after{ right:-12px;}
  .info-strip .ic{
    font-family:"Anton",sans-serif;
    font-size:12px; color:var(--yellow);
    letter-spacing:.24em; margin-bottom:4px;
  }
  .info-strip .v{
    font-weight:900; font-size:15px; line-height:1.3;
  }

  /* ============ WHY ============ */
  .why-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .why-card{
    background:var(--card);
    border:3px solid var(--ink);
    padding:28px;
    position:relative;
    box-shadow: 6px 6px 0 var(--ink);
    transition: transform .2s, box-shadow .2s;
  }
  .why-card:hover{ transform:translate(-3px,-3px); box-shadow: 9px 9px 0 var(--orange);}
  .why-card .num{
    font-family:"Anton",sans-serif;
    font-size:90px; line-height:.8;
    color:var(--yellow);
    -webkit-text-stroke: 2px var(--ink);
    text-stroke: 2px var(--ink);
  }
  .why-card h3{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900; font-size:26px;
    margin:14px 0 10px;
  }
  .why-card p{ margin:0; color:var(--ink-2);}
  .why-card .tag{
    position:absolute; top:18px; right:18px;
    background:var(--red); color:white;
    padding:4px 12px;
    font-family:"Anton",sans-serif;
    font-size:13px; letter-spacing:.16em;
    text-transform:uppercase;
    border:2px solid var(--ink);
  }

  /* ============ TARGET ============ */
  .target{
    display:grid; grid-template-columns: 1fr 1fr; gap:0;
    border:3px solid var(--ink);
    background:var(--card);
    box-shadow: 8px 8px 0 var(--ink);
  }
  .target > div{ padding:32px;}
  .target .yes{
    background:var(--green);
    color:var(--paper);
    border-right:3px solid var(--ink);
  }
  .target .yes h3, .target .no h3{
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:34px; letter-spacing:.04em;
    margin:0 0 6px;
    display:flex; align-items:center; gap:14px;
    text-transform:uppercase;
  }
  .target .yes .mark, .target .no .mark{
    display:inline-grid; place-items:center;
    width:46px;height:46px; border-radius:50%;
    background:var(--yellow); color:var(--ink);
    border:3px solid var(--ink);
    font-weight:900; font-size:22px;
    font-family:"Noto Sans TC",sans-serif;
  }
  .target .no{ background:var(--ink); color:var(--paper);}
  .target .no .mark{ background:var(--red); color:white;}
  .target ul{ list-style:none; padding:0; margin:18px 0 0;}
  .target li{
    padding:9px 0;
    border-bottom:1px dashed rgba(255,255,255,.2);
    display:flex; gap:12px; align-items:flex-start;
    font-size:16px;
  }
  .target li:before{
    content:"★"; color:var(--yellow); font-size:14px; line-height:1.8;
  }
  .target .note{
    margin-top:18px; padding:14px;
    background:rgba(245,197,24,.18);
    border-left:5px solid var(--yellow);
    font-size:14px; color:var(--paper);
  }

  /* ============ FEATURE CHIPS ============ */
  .feature-chips{ display:flex; gap:10px; flex-wrap:wrap;}
  .chip{
    background:var(--card);
    border:3px solid var(--ink);
    padding:10px 18px;
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:15px; letter-spacing:.08em;
    display:inline-flex; align-items:center; gap:10px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .chip .ic{
    width:24px;height:24px;
    background:var(--ink); color:var(--yellow);
    border-radius:50%;
    display:grid; place-items:center;
    font-size:13px; font-weight:900;
    font-family:"Anton",sans-serif;
  }

  /* ============ PLANS ============ */
  .plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .plan{
    background:var(--card);
    border:3px solid var(--ink);
    padding:0;
    position:relative;
    display:flex; flex-direction:column;
    box-shadow: 6px 6px 0 var(--ink);
    transition: transform .2s, box-shadow .2s;
  }
  .plan:hover{ transform:translate(-3px,-3px); box-shadow: 9px 9px 0 var(--orange);}
  .plan-head{
    padding:18px 24px;
    background:var(--ink); color:var(--paper);
    border-bottom:3px solid var(--ink);
    display:flex; justify-content:space-between; align-items:center;
  }
  .plan-head .letter{
    font-family:"Anton",sans-serif;
    background:var(--yellow); color:var(--ink);
    width:42px; height:42px; border-radius:50%;
    display:grid; place-items:center;
    font-size:24px;
    border:2px solid var(--ink);
  }
  .plan-head .tier{
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:22px; letter-spacing:.12em;
    text-transform:uppercase;
  }
  .plan-body{ padding:24px 26px; flex:1; display:flex; flex-direction:column;}
  .plan h3{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900; font-size:28px;
    margin:0 0 4px;
  }
  .plan .tagline{
    color:var(--orange-deep); font-weight:700;
    margin-bottom:18px;
  }
  .plan .price{
    font-family:"Anton",sans-serif;
    font-size:54px; line-height:1;
    color:var(--ink);
  }
  .plan .price .cur{ font-size:24px; color:var(--orange-deep); margin-right:4px;}
  .plan .price small{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:500; font-size:14px;
    color:var(--muted);
    margin-left:8px;
  }
  .plan-bullets{ list-style:none; padding:0; margin:18px 0; flex:1;}
  .plan-bullets li{
    padding:8px 0;
    border-bottom:1px dashed var(--line);
    font-size:15px;
    display:flex; gap:10px; align-items:flex-start;
  }
  .plan-bullets li:before{
    content:"★"; color:var(--orange); font-size:13px; line-height:1.8;
  }
  .plan.featured{ background:var(--yellow); }
  .plan.featured .plan-head{ background:var(--ink); }
  .plan.featured .plan-head .letter{ background:var(--orange); color:var(--paper); border-color:var(--paper);}
  .plan.featured .recommend{
    position:absolute; top:-18px; left:50%;
    transform: translateX(-50%) rotate(-2deg);
    background:var(--orange); color:white;
    padding:8px 24px;
    font-family:"Anton",sans-serif;
    font-size:17px; letter-spacing:.18em;
    border:3px solid var(--ink);
    text-transform:uppercase;
    box-shadow: 3px 3px 0 var(--ink);
    z-index:2;
  }
  .plan .domain{
    margin-top:14px; padding:12px 14px;
    background:var(--ink); color:var(--yellow);
    font-family:"Anton",sans-serif;
    font-size:15px; letter-spacing:.06em;
    word-break:break-all;
  }
  .plan .domain span{ color:var(--paper); font-size:11px; letter-spacing:.24em; display:block; margin-bottom:4px;}

  /* ============ ROLES ============ */
  .roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .role{
    background:var(--card);
    border:3px solid var(--ink);
    box-shadow: 6px 6px 0 var(--ink);
    position:relative;
    overflow:hidden;
  }
  .role .head{
    padding:24px 26px;
    color:var(--paper);
    position:relative;
    border-bottom:3px solid var(--ink);
  }
  .role.dad .head{ background:var(--ink); }
  .role.bro .head{ background:var(--green); }
  .role.lil .head{ background:var(--orange); }
  .role .head .who{
    font-family:"Anton",sans-serif;
    font-size:14px; letter-spacing:.4em;
    color:var(--yellow);
    margin-bottom:4px;
  }
  .role.lil .head .who{ color:var(--ink); }
  .role .head h3{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900; font-size:30px;
    margin:0;
  }
  .role .head .age{
    position:absolute; top:20px; right:22px;
    background:var(--yellow); color:var(--ink);
    padding:6px 14px;
    font-family:"Anton",sans-serif;
    font-size:14px; letter-spacing:.16em;
    border:2px solid var(--ink);
  }
  .role .body{ padding:22px 26px;}
  .role .body h4{
    margin:18px 0 8px;
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:14px; color:var(--orange-deep);
    font-weight:700; letter-spacing:.24em;
    text-transform:uppercase;
    display:flex; align-items:center; gap:8px;
  }
  .role .body h4:before{
    content:"★"; color:var(--orange); font-size:12px;
  }
  .role .body h4:first-child{ margin-top:0;}
  .role .body ul{ list-style:none; padding:0; margin:0;}
  .role .body li{
    padding:6px 0;
    font-size:14.5px;
    display:flex; gap:10px;
  }
  .role .body li:before{
    content:"›"; color:var(--orange-deep); font-weight:900;
  }
  .role .deliverable{
    margin-top:18px;
    background:var(--ink); color:var(--paper);
    padding:14px 16px;
    border-left:5px solid var(--yellow);
    font-size:14px;
  }
  .role .deliverable b{ color:var(--yellow); display:block; font-family:"Anton",sans-serif; letter-spacing:.18em; font-size:13px; margin-bottom:2px;}

  /* ============ TIMELINE ============ */
  .week{ position:relative; padding-left:48px;}
  .week:before{
    content:""; position:absolute;
    left:20px; top:6px; bottom:6px;
    width:5px; background:var(--ink);
  }
  .day{
    position:relative;
    padding:22px 26px;
    margin-bottom:16px;
    background:var(--card);
    border:3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    transition: transform .15s;
  }
  .day:hover{ transform:translateX(4px);}
  .day:before{
    content:""; position:absolute;
    left:-38px; top:24px;
    width:24px; height:24px;
    background:var(--yellow);
    border:4px solid var(--ink);
    border-radius:50%;
    box-shadow: 0 0 0 4px var(--paper);
  }
  .day .dnum{
    font-family:"Anton",sans-serif;
    background:var(--orange); color:white;
    display:inline-block;
    padding:4px 14px;
    font-size:18px; letter-spacing:.18em;
    margin-bottom:8px;
    border:2px solid var(--ink);
  }
  .day h4{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900; font-size:26px;
    margin:4px 0 8px;
  }
  .day p{ margin:0; color:var(--ink-2); font-size:15.5px;}
  .day .tags{ margin-top:12px; display:flex; gap:6px; flex-wrap:wrap;}
  .day .tag{
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:13px; letter-spacing:.12em;
    padding:4px 12px;
    border:2px solid var(--ink);
    background:var(--paper);
  }
  .day .tag.dad{ background:var(--ink); color:var(--yellow);}
  .day .tag.bro{ background:var(--green); color:white;}
  .day .tag.lil{ background:var(--orange); color:white;}
  .day .tag.yel{ background:var(--yellow); color:var(--ink);}

  /* ============ CASES ============ */
  .filter-bar{
    display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;
    align-items:center;
  }
  .filter-bar .label{
    font-family:"Anton",sans-serif;
    font-size:14px; color:var(--ink); letter-spacing:.24em;
    margin-right:8px; text-transform:uppercase;
  }
  .fbtn{
    border:3px solid var(--ink);
    background:var(--paper);
    padding:8px 18px;
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:15px; letter-spacing:.14em;
    cursor:pointer;
    color:var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform .12s, box-shadow .12s;
    text-transform:uppercase;
  }
  .fbtn:hover{ transform:translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink);}
  .fbtn.active{ background:var(--yellow);}
  .fbtn[data-f="entry"].active{ background:var(--green); color:white; border-color:var(--ink);}
  .fbtn[data-f="pro"].active{ background:var(--orange); color:white;}
  .fbtn[data-f="check"].active{ background:var(--yellow);}

  .cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .case{
    background:var(--card);
    border:3px solid var(--ink);
    padding:0;
    position:relative;
    box-shadow: 5px 5px 0 var(--ink);
    overflow:hidden;
    transition: transform .15s, box-shadow .15s;
    display:flex; flex-direction:column;
  }
  .case:hover{ transform:translate(-3px,-3px); box-shadow: 8px 8px 0 var(--orange);}
  .case.hidden{ display:none;}
  .case .head{
    padding:14px 18px;
    border-bottom:3px solid var(--ink);
    background:var(--paper-2);
    display:flex; justify-content:space-between; align-items:center;
    gap:10px;
  }
  .case .cat{
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:13px; color:var(--ink-2); letter-spacing:.18em;
    text-transform:uppercase;
  }
  .case .pill{
    font-family:"Anton",sans-serif;
    font-size:12px; padding:4px 11px;
    letter-spacing:.16em; text-transform:uppercase;
    background:var(--ink); color:var(--paper);
    border:2px solid var(--ink);
  }
  .case .pill.entry{ background:var(--green);}
  .case .pill.pro{ background:var(--orange);}
  .case .pill.check{ background:var(--yellow); color:var(--ink);}
  .case .body{ padding:20px 22px; flex:1; display:flex; flex-direction:column;}
  .case h4{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900; font-size:24px;
    margin:0 0 4px;
  }
  .case .addr{
    font-size:13px; color:var(--ink-2); margin-bottom:12px;
  }
  .case .why{ font-size:14.5px; margin:0 0 12px; color:var(--ink-2);}
  .case .why b{ color:var(--ink);}
  .case ul.bullets{ list-style:none; padding:0; margin:8px 0; flex:1;}
  .case ul.bullets li{
    font-size:13.5px; padding:3px 0; color:var(--ink-2);
    display:flex; gap:8px;
  }
  .case ul.bullets li:before{ content:"★"; color:var(--orange); font-size:11px; line-height:1.7;}
  .case .reco{
    margin-top:14px;
    background:var(--ink); color:var(--paper);
    padding:12px 16px;
    font-size:13px;
  }
  .case .reco .lab{
    font-family:"Anton",sans-serif;
    color:var(--yellow); font-size:11px; letter-spacing:.24em;
  }
  .case .reco b{
    color:var(--paper); display:block; margin-top:4px;
    font-family:"Noto Sans TC",sans-serif; font-weight:900; font-size:15px;
  }
  .case .reco .price-tag{
    font-family:"Anton",sans-serif;
    color:var(--yellow); font-size:18px; letter-spacing:.04em;
  }

  /* ============ SCRIPTS ============ */
  .scripts{ display:grid; grid-template-columns: 1fr 1fr; gap:24px;}
  .script-card{
    background:var(--card);
    border:3px solid var(--ink);
    padding:0;
    box-shadow: 5px 5px 0 var(--ink);
  }
  .script-card .top{
    background:var(--ink); color:var(--paper);
    padding:14px 22px;
    display:flex; align-items:center; justify-content:space-between;
    gap:12px;
  }
  .script-card .top .ver{
    font-family:"Anton",sans-serif;
    background:var(--yellow); color:var(--ink);
    padding:4px 12px;
    font-size:13px; letter-spacing:.16em;
    border:2px solid var(--ink);
  }
  .script-card .top h4{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900; font-size:18px; margin:0;
  }
  .script-card .bubble{
    padding:20px 24px;
    font-size:15.5px; line-height:1.8;
    color:var(--ink);
    background:var(--card);
    position:relative;
  }
  .script-card .bubble .marker{
    background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%);
    padding:0 2px;
  }

  /* ============ SAFETY ============ */
  .safety{
    border:3px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
    background:var(--card);
    display:grid; grid-template-columns: 1fr 1fr; gap:0;
  }
  .safety > div{ padding:32px;}
  .safety .ok{ background:var(--green); color:var(--paper); border-right:3px solid var(--ink);}
  .safety .no{ background:var(--ink); color:var(--paper);}
  .safety h3{
    font-family:"Anton","Noto Sans TC",sans-serif;
    font-size:30px; margin:0 0 10px;
    letter-spacing:.06em; text-transform:uppercase;
    display:flex; align-items:center; gap:14px;
  }
  .safety .mark{
    width:44px;height:44px; border-radius:50%;
    display:grid; place-items:center;
    background:var(--yellow); color:var(--ink);
    font-weight:900; font-size:22px;
    border:3px solid var(--paper);
    font-family:"Noto Sans TC",sans-serif;
  }
  .safety .no .mark{ background:var(--red); color:white;}
  .safety ul{ list-style:none; padding:0; margin:14px 0 0;}
  .safety li{
    padding:8px 0;
    display:flex; gap:12px; align-items:flex-start;
    font-size:16px;
    border-bottom:1px dashed rgba(255,255,255,.18);
  }
  .safety .ok li:before{ content:"✓"; color:var(--yellow); font-weight:900; font-size:18px;}
  .safety .no li:before{ content:"✕"; color:var(--red); font-weight:900; font-size:18px;}

  /* ============ SUCCESS ============ */
  .success{
    background:var(--yellow);
    border:5px solid var(--ink);
    padding:56px 48px;
    position:relative;
    overflow:hidden;
    box-shadow: 12px 12px 0 var(--ink);
  }
  .success:before{
    content:""; position:absolute;
    inset:14px;
    border:3px dashed var(--ink);
    pointer-events:none;
  }
  .success-eye{
    font-family:"Anton","Noto Sans TC",sans-serif;
    color:var(--orange-deep);
    font-size:16px; letter-spacing:.4em;
    margin-bottom:14px;
    text-transform:uppercase;
  }
  .success h2{
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900;
    font-size:clamp(40px,5.5vw,68px); line-height:1.05;
    margin:0 0 32px;
    color:var(--ink);
  }
  .success h2 .o{ color:var(--red);}
  .success h2 .black-box{
    background:var(--ink); color:var(--yellow);
    padding:0 14px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  .success ol{
    counter-reset: s;
    list-style:none; padding:0; margin:0 0 28px;
    display:grid; grid-template-columns: 1fr 1fr; gap:0 36px;
  }
  .success ol li{
    counter-increment:s;
    padding:16px 0;
    border-bottom:2px dashed rgba(31,37,35,.35);
    font-size:19px; font-weight:700;
    display:flex; gap:18px; align-items:baseline;
    color:var(--ink);
  }
  .success ol li:before{
    content: counter(s,decimal-leading-zero);
    font-family:"Anton",sans-serif;
    color:var(--red); font-size:38px;
    line-height:1;
  }
  .success .closing{
    margin-top:24px;
    font-family:"Noto Sans TC",sans-serif;
    font-weight:900;
    font-size:clamp(22px,2.6vw,30px); line-height:1.5;
    padding:18px 24px;
    background:var(--ink); color:var(--paper);
    display:inline-block;
    transform: rotate(-1deg);
    border:3px solid var(--ink);
  }
  .success .closing em{ color:var(--yellow); font-style:normal;}

  /* ============ FOOTER ============ */
  footer{
    margin-top:80px;
    padding:32px 28px 24px;
    background:var(--ink); color:var(--paper);
    border-top:5px solid var(--yellow);
    display:flex; justify-content:space-between;
    align-items:center; gap:16px; flex-wrap:wrap;
    font-size:14px;
  }
  footer .left b{ font-family:"Anton",sans-serif; letter-spacing:.12em; font-size:18px; color:var(--yellow);}
  footer .right{ text-align:right; color:var(--paper); opacity:.7;}

  /* ============ Back to top ============ */
  .totop{
    position:fixed; right:24px; bottom:24px;
    width:56px; height:56px;
    background:var(--yellow); color:var(--ink);
    border:3px solid var(--ink);
    border-radius:50%;
    display:grid; place-items:center;
    text-decoration:none;
    font-family:"Anton",sans-serif;
    font-size:22px;
    box-shadow: 4px 4px 0 var(--ink);
    opacity:0; pointer-events:none;
    transition: opacity .2s, transform .15s, box-shadow .15s;
    z-index:40;
  }
  .totop.visible{ opacity:1; pointer-events:auto;}
  .totop:hover{ transform:translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink);}

  /* ============ Print ============ */
  @media print{
    body{background:white;}
    .topnav, .totop{ display:none;}
    section{ page-break-inside:avoid; padding:24px 0;}
    .plan, .role, .case, .day, .script-card, .why-card, .target, .safety, .success{
      box-shadow:none !important; transform:none !important;
    }
  }

  /* ============ Responsive ============ */
  @media (max-width: 980px){
    .hero-top{ grid-template-columns:1fr; gap:14px;}
    .hero-banner.left, .hero-banner.right{ justify-self:center; clip-path:none; padding:14px 24px;}
    .info-strip{ grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width: 800px){
    .why-cards, .plans, .roles, .cases{ grid-template-columns:1fr;}
    .target, .safety{ grid-template-columns:1fr;}
    .target .yes, .safety .ok{ border-right:none; border-bottom:3px solid var(--ink);}
    .scripts{ grid-template-columns:1fr;}
    .success ol{ grid-template-columns:1fr;}
    .success{ padding:36px 24px;}
    main{ padding:0 18px 80px;}
    .info-strip{ grid-template-columns:1fr;}
    h1.hero-title{ font-size:clamp(56px,16vw,90px); text-shadow:4px 4px 0 var(--yellow);}
    .ribbon-title .label{ clip-path:none; padding-right:22px;}
    .ribbon-title .step{ clip-path:none; padding-left:18px; margin-left:0;}
  }