body.member-view .stage #tablet-3d,body.member-view .stage>.device,body.member-view .controls-3d{display:none!important}
.phone-shell{touch-action:none;user-select:none;cursor:grab}.phone-shell:active{cursor:grabbing}
.phone-stage{display:none;height:520px;position:relative;perspective:1300px;align-items:center;justify-content:center;isolation:isolate}
.member-view .phone-stage{display:flex}.phone-shell{width:256px;height:493px;padding:9px;border-radius:42px;background:linear-gradient(115deg,#dad5e1,#4b4654 16%,#17151d 50%,#9d97aa 85%,#d4cedb);box-shadow:5px 5px 0 #807889,9px 9px 0 #bbb4c4,24px 29px 40px #49355e2a;position:relative;transform:rotateY(-10deg) rotateX(4deg) rotateZ(-3deg);transition:transform .6s;flex-shrink:0}
.phone-shell:before{content:'';position:absolute;left:-3px;top:93px;width:3px;height:36px;background:#6e657a;border-radius:3px;box-shadow:0 46px 0 #6e657a}.phone-shell:after{content:'';position:absolute;right:-4px;top:143px;width:4px;height:55px;background:#6e657a;border-radius:3px}
.phone-glass{height:100%;border-radius:34px;background:#f7f3fc;overflow:hidden;position:relative;border:2px solid #17141e;color:#322b41;font-size:12px;text-align:left}
.phone-status{height:34px;display:flex;justify-content:space-between;padding:8px 16px 0;font-size:10px;font-weight:700}.phone-island{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:73px;height:19px;background:#15121b;border-radius:20px}.phone-island:after{content:'';display:block;width:6px;height:6px;border-radius:50%;background:#343f59;position:absolute;right:9px;top:6px}
.phone-content{padding:16px 14px 45px;line-height:1.55}.phone-content h4{font-size:23px;margin:8px 0 3px;color:#6246a2}.phone-content h5{font-size:14px;margin:0 0 8px}.phone-content p{font-size:11px;margin:0 0 12px;color:#635674}.phone-card{padding:12px;border-radius:14px;background:#fff;border:1px solid #e0d6ef;margin-bottom:10px}.phone-card strong{display:block;font-size:14px}.phone-label{font-size:10px;color:#735c98;letter-spacing:.05em}.phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.phone-cell{background:#eae1f5;padding:11px 6px;border-radius:12px;text-align:center;font-size:11px}.phone-cell b{display:block;font-size:19px;color:#6743a0}.phone-avatar{width:37px;height:37px;border-radius:50%;background:#dccff0;display:inline-grid;place-items:center;color:#6743a0;font-weight:700;float:right}.phone-action{background:#7250b5;color:white;text-align:center;border-radius:20px;padding:8px;font-size:11px;margin-top:9px}.phone-nav{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;padding:12px 4px 18px;background:#fff;border-top:1px solid #e7deef;font-size:9px;color:#614887}.phone-home{position:absolute;bottom:5px;width:75px;height:3px;background:#211b2b;border-radius:4px;left:50%;transform:translateX(-50%)}
.phone-float{position:absolute;width:236px;background:#e2f0e7;border:1px solid #cadfce;border-radius:18px;padding:16px;right:0;bottom:95px;box-shadow:6px 7px 0 #bcd5c480,14px 22px 32px #4234531f;transform:translateZ(45px) rotate(2deg);transition:transform .6s;font-size:12px;color:#304c3c;z-index:2}.phone-float b{font-size:15px;display:block;margin:5px 0}.phone-float small{font-size:10px}.phone-stage.compact .phone-float{transform:translateX(-60px) scale(.9);opacity:0;pointer-events:none}.phone-stage.compact .phone-shell{transform:rotateY(0) rotateX(0)}
.phone-controls{display:none;justify-content:center;gap:9px}.member-view .phone-controls{display:flex}.phone-controls button{border:1px solid #c8b7dd;border-radius:30px;background:#faf7ff;color:#53416c;padding:9px 18px;font-size:12px}.hero-phone{width:100%;height:490px;display:flex;align-items:center;justify-content:center;position:relative;perspective:1300px}.hero-phone .phone-shell{width:265px;height:500px}.hero-phone .phone-float{right:-8px;bottom:40px}
.ecosystem{padding:72px 8vw;background:#e3f0e9;display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.ecosystem h2{font-size:clamp(28px,3.2vw,43px);margin:12px 0 20px}.ecosystem p{max-width:530px;font-size:15px;color:#385346}.eco-label{font-size:12px;color:#486754}.eco-flow{display:flex;flex-direction:column;gap:13px}.eco-flow article{display:grid;grid-template-columns:40px 1fr;gap:15px;padding:17px 0;border-bottom:1px solid #bed4c5}.eco-flow span{width:36px;height:36px;border-radius:50%;background:white;display:grid;place-items:center;color:#486754}.eco-flow h3{font-size:17px}.eco-flow p{font-size:13px}.eco-note{margin-top:22px;font-size:12px!important}.member-view .story-heading>p{max-width:340px}
@media(max-width:850px){.phone-stage{height:350px}.phone-shell{width:184px;height:350px;padding:7px;border-radius:30px}.phone-glass{border-radius:24px;font-size:10px}.phone-status{height:27px;font-size:8px;padding:7px 13px 0}.phone-island{width:54px;height:14px;top:8px}.phone-content{padding:10px 11px 35px}.phone-content h4{font-size:18px}.phone-content h5{font-size:12px}.phone-card{padding:9px;margin-bottom:7px}.phone-card strong{font-size:12px}.phone-content p{font-size:9px;margin-bottom:8px}.phone-cell{padding:7px 4px;font-size:9px}.phone-cell b{font-size:15px}.phone-action{padding:5px;font-size:9px}.phone-nav{font-size:8px;padding-bottom:12px}.phone-float{width:180px;right:0;bottom:55px;padding:12px;font-size:10px}.phone-float b{font-size:12px}.hero-phone{height:450px}.hero-phone .phone-content{padding:16px 14px 40px}.hero-phone .phone-content h4{font-size:23px}.hero-phone .phone-cell{font-size:11px;padding:12px}.hero-phone .phone-card{padding:13px}.hero-phone .phone-content p{font-size:11px}.hero-phone .phone-float{right:0}.ecosystem{grid-template-columns:1fr;gap:26px;padding:45px 7vw}.member-view .hint-3d{display:none}.member-view .stage{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.phone-shell,.phone-float{transition:none}}
  .real-card-wrap .member-card{
    width:100%;
    max-width:400px;
    aspect-ratio:1.586/1;
    border-radius:18px;
    padding:22px 24px;
    position:relative;
    overflow:hidden;
    background:linear-gradient(155deg, var(--b-3E2A20, #3E2A20) 0%, var(--b-241811, #241811) 100%);
    border:1px solid rgba(var(--l-milk-gold-rgb, var(--milk-gold-rgb)),.4);
    box-shadow:0 20px 50px rgba(var(--l-k-rgb, 0,0,0),.5);
    display:flex;
    flex-direction:column;
  }
  .real-card-wrap .member-card::before{
    content:"";
    position:absolute;
    top:50%; left:50%;
    width:80%; height:80%;
    transform:translate(-50%,-50%);
    background-image:var(--b-wd-watermark, var(--wd-watermark));
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
    opacity:.09;
    pointer-events:none;
  }
  .real-card-wrap .member-card .card-top{
    display:flex;
    align-items:center;
    gap:8px;
    position:relative;
    flex-shrink:0;
  }
  .real-card-wrap .member-card .card-top img{ height:26px; width:auto; max-width:90px; object-fit:contain; }
  .real-card-wrap .member-card .card-top .brand-txt{
    font-size:14px;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--c-milk-gold-soft, var(--milk-gold-soft));
  }
  .real-card-wrap .member-card .tier-badge{
    margin-left:auto;
    font-size:9px;
    padding:2px 9px;
    border-radius:999px;
    background:rgba(var(--b-milk-gold-rgb, var(--milk-gold-rgb)),.18);
    border:1px solid rgba(var(--l-milk-gold-rgb, var(--milk-gold-rgb)),.4);
    color:var(--c-milk-gold-soft, var(--milk-gold-soft));
    letter-spacing:.05em;
  }
  .real-card-wrap .member-card .name{
    font-size:22px;
    font-weight:700;
    color:var(--c-cream, var(--cream));
    margin:10px 0 auto;
    position:relative;
  }
  .real-card-wrap .card-info-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    position:relative;
    flex-shrink:0;
  }
  .real-card-wrap .card-info-left{ display:flex; flex-direction:column; gap:6px; min-width:0; }
  .real-card-wrap .card-info-left .info-line{ font-size:13px; letter-spacing:.02em; white-space:nowrap; }
  .real-card-wrap .card-info-left .info-line .info-label{ color:var(--c-muted, var(--muted)); margin-right:6px; }
  .real-card-wrap .card-info-left .info-line .info-value{ color:var(--c-milk-gold-soft, var(--milk-gold-soft)); font-weight:700; font-size:14px; transition:all .25s ease; }
  .real-card-wrap .card-info-left .info-line .info-value.flash{
    color:var(--c-FFFFFF, #FFFFFF);
    text-shadow:0 0 12px rgba(var(--l-milk-gold-soft-rgb, var(--milk-gold-soft-rgb)),.9);
  }
  .real-card-wrap .card-qr{
    width:92px; height:92px;
    border-radius:9px;
    background:var(--b-FFFFFF, #FFFFFF);
    padding:6px;
    flex-shrink:0;
    margin-left:auto;
    cursor:pointer;
    transition:transform .12s ease;
    overflow:hidden; /* 保險:就算下面的尺寸規則某些情況沒吃到,QR也不會視覺上跑出卡片框外 */
  }
  .real-card-wrap .card-qr:active{ transform:scale(.96); }
  /* qrcodejs函式庫在Android上不是畫canvas,而是另外產生一個<img>(內含canvas轉出的
     base64圖片),而且會用JS直接在該元素的inline style上寫死像素寬高,蓋掉外層容器的
     實際大小,導致QR碼比92×92的框還大、視覺上「爆框」。iOS/桌機瀏覽器則是走canvas路徑
     沒有這個問題,所以只有Android手機會看到這個現象。
     這裡把canvas/img兩種可能的產出元素都用!important強制縮到跟容器一樣大,
     !important的優先權高於JS用inline style設定的px寬高,才蓋得過去。 */
  .real-card-wrap .card-qr canvas, .card-qr img{
    width:100% !important; height:100% !important;
    max-width:100%; max-height:100%;
    display:block;
  }

.phone-rig{height:100%;width:100%;display:flex;align-items:center;justify-content:center;position:relative;transform-style:preserve-3d;transform:rotateY(-10deg) rotateX(4deg) rotateZ(-3deg);touch-action:none;user-select:none;cursor:grab;transition:transform .12s ease-out}.phone-rig .phone-shell{transform:none!important}.phone-rig .phone-float{transform:translateZ(85px) rotateZ(2deg);bottom:95px}.phone-stage.compact .phone-float{transform:translateZ(0) translateX(-80px);opacity:0}.real-card-wrap{width:100%;height:133px;position:relative;margin:12px 0}.real-card-wrap .member-card{--deep-brown:#2a1d15;--milk-gold-rgb:201,162,75;--milk-gold-soft:#e4c77a;--milk-gold-soft-rgb:228,199,122;--cream:#f6efe3;--muted:#b39b7a;background:#3e2a20!important;color:#e4c77a!important;width:370px!important;max-width:none!important;transform:scale(.53);transform-origin:top left;font-family:'Noto Serif TC','Microsoft JhengHei',serif}.real-card-wrap .member-card .name{margin:10px 0 auto}.real-card-wrap .member-card img{width:65px!important}.real-card-wrap .member-card .brand-txt{white-space:nowrap}.real-card-wrap .member-card .card-qr svg{width:100%;height:100%}.phone-float .real-card-wrap{height:123px;margin:10px 0 0}.member-view #theme-demo{max-width:285px;justify-self:center;min-height:410px;border:10px solid #312b38!important;border-radius:37px!important;box-shadow:6px 7px 0 #a69caf,16px 24px 32px #44345520;transform:rotateY(-8deg) rotateZ(-3deg);padding:28px!important}.member-view #theme-demo:before{content:'';display:block;width:70px;height:14px;border-radius:15px;background:#201b26;margin:-17px auto 30px}
@media(max-width:850px){.phone-stage .real-card-wrap{height:94px}.phone-stage .real-card-wrap .member-card{transform:scale(.39)}.phone-stage .phone-float .real-card-wrap{height:91px}.phone-rig .phone-float{bottom:60px}}
/* Lavender website preview: retain the real card structure, match active theme. */
.real-card-wrap .member-card{--milk-gold-rgb:126,92,183;--milk-gold-soft:#654399;--milk-gold-soft-rgb:101,67,153;--cream:#322b41;--muted:#68557c;background:linear-gradient(155deg,#f1eafb 0%,#dfd0f3 100%)!important;color:#654399!important;border-color:#baa4d5;box-shadow:0 14px 32px #63448626}
.real-card-wrap .member-card .tier-badge{background:#e2d3f2;border-color:#b6a0d0;color:#654399}
.real-card-wrap .member-card .card-qr svg path[fill="#2a1d15"]{fill:#654399}

/* 最後一幕手機區比段落高,底部留空間讓手機維持固定,不被推出畫面(只限桌機會員端) */
@media(min-width:851px){.member-view .steps{padding-bottom:260px}}
/* 小螢幕手機置頂,段落文字放到段落底部,捲到時出現在手機下方,不被蓋住 */
@media(max-width:850px){.member-view .step{justify-content:flex-end;padding-bottom:36px}}

/* 2026-10-13 實體感:真厚度(16 層切片)、金屬側邊、玻璃反光隨角度移動、地面陰影;浮層更前移 */
.phone-rig{transform:rotateY(-18deg) rotateX(7deg) rotateZ(-3deg);--tilt:0}
.phone-shell{transform-style:preserve-3d;box-shadow:none;background:linear-gradient(115deg,#e9e5ee,#7d7787 10%,#2a2732 30%,#17151d 60%,#8f889c 92%,#e2dde8)}
.phone-shell>.phone-glass{transform:translateZ(1px)}
.phone-depth{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;pointer-events:none}
.phone-depth i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,#d9d4df,#8a8395 18%,#4a4555 50%,#9d96a8 82%,#e6e1ea);transform:translateZ(calc(var(--k) * -1.5px))}
.phone-depth i:last-child{background:linear-gradient(135deg,#3a3542,#1c1a22);box-shadow:0 30px 50px #3d2d5240}
.phone-sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,transparent calc(30% + var(--tilt) * 25%),#ffffff55 calc(38% + var(--tilt) * 25%),transparent calc(48% + var(--tilt) * 25%));mix-blend-mode:screen;transition:background .12s}
.phone-ground{position:absolute;left:50%;bottom:2%;width:230px;height:34px;border-radius:50%;background:radial-gradient(closest-side,#3d2d5250,#3d2d5200);transform:translateX(-50%);filter:blur(4px);pointer-events:none;transition:transform .12s ease-out}
.phone-rig .phone-float{transform:translateZ(120px) rotateZ(2deg);box-shadow:6px 7px 0 #bcd5c480,0 40px 50px #3423462e}
.float-records{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.float-records .rec{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;background:#ffffffa6;border-radius:10px;padding:7px 8px}
.float-records .rec-d{font-size:11px;color:#4a6b57;font-weight:700}
.float-records .rec-m{font-size:10px;line-height:1.35;color:#4c5f54}.float-records .rec-m b{display:block;font-size:12px;margin:0;color:#2f4a3a}
.float-records .rec-c{font-size:12px;font-weight:700;color:#6743a0;text-align:right;line-height:1.1}.float-records .rec-c i{display:block;font-style:normal;font-size:8px;color:#7d6a99}
@media(max-width:850px){.phone-depth i{transform:translateZ(calc(var(--k) * -1.1px))}.phone-ground{width:170px;height:24px}.phone-rig .phone-float{transform:translateZ(90px) rotateZ(2deg)}.float-records{gap:4px}.float-records .rec{padding:4px 6px;grid-template-columns:30px 1fr auto;gap:5px}.float-records .rec-m b{font-size:10px}.float-records .rec-m{font-size:8px}.float-records .rec-d,.float-records .rec-c{font-size:9px}}
.phone-depth i{transform:translateZ(calc(var(--k) * -1.8px))}
.phone-ground{bottom:6%;width:250px;height:40px;background:radial-gradient(closest-side,#2e1f4470,#2e1f4400);filter:blur(6px)}