/* ── HomePlay 2.0 Preview：版面與節奏 ──────────────────────────
   沿用 style.css 的 token（底色、墨色、強調藍、圓角 28、系統字）。這裡多兩樣：
   1. 亮暗交替的段落：淺段跟著系統外觀，深段（.pv-dark）永遠是夜色，像 HomeView 在暗房裡亮著。
   2. 一條「夕照」漸層（--glow）：取自示範主畫面的夕陽與 👀 的琥珀色，只用在標題第二行、Preview 標記、進度條與導覽指示。
   字級：首屏 104 → 段落大標 64 → 導言 21 → 內文 17 → 註腳 12；中文字距不壓、行距放鬆。 */
.pv{
  --glow:linear-gradient(100deg,#ff9f6b 0%,#f0708e 42%,#8f7cf7 100%);
  --pv-night:#07080a; --pv-night-2:#121418; --pv-night-ink:#f5f5f7; --pv-night-muted:#a1a6ae; --pv-night-line:rgba(255,255,255,.1);
  --pv-card:#fff; --pv-well:#e4e7ec;
  --pv-sec:clamp(96px,11vw,168px);
  /* 版面網格：12 欄（平板 8 欄、手機 4 欄），欄距 = 邊距；版心 1180（≥1800 時 1360）減兩邊邊距。
     每一段的標題、內文、卡片都從第 1 欄的左線開始；等寬多欄（2／3／4／6 欄）用同一個欄距，自然落在 12 欄的線上。
     間距只用 4 的倍數（4、8、12、16、24、32、48…）。 */
  --margin:24px; --gutter:24px; --content:calc(1180px - 2 * var(--margin));
  --screen-r:13.5%;   /* 螢幕圓角 138/1024，與機身同一個圓角 */
  --dur-gal:6s; --dur-step:4.8s;
  background:var(--bg);
}
@media (prefers-color-scheme:dark){.pv{--pv-card:#191c21;--pv-well:#121418}}
.pv .sky,.pv .day-rail{display:none}

/* ── 頁首：品牌、膠囊導覽、語言 ──
   膠囊導覽照 👀 膠囊的樣子：一條黑色玻璃膠囊，左邊是那雙眼睛；現在讀到哪一段，亮片就滑到哪裡，眼睛也朝那邊瞄一下。 */
.pv-bar{position:sticky;top:0;z-index:30;backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);background:color-mix(in srgb,var(--bg) 76%,transparent)}
.pv-bar .wrap{display:flex;align-items:center;gap:20px;height:64px}
.pv-bar .end{margin-left:auto;display:flex;align-items:center}
.pv-nav{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto;padding:4px 6px 4px 4px;border-radius:var(--pill);
  background:rgba(14,15,18,.86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 8px 24px -12px rgba(0,0,0,.45);color:rgba(255,255,255,.72);font-size:14px;
  overflow-x:auto;scrollbar-width:none;max-width:100%}
.pv-nav::-webkit-scrollbar{display:none}
.pv-nav-eyes{flex:none;display:grid;place-items:center;width:40px;height:32px;font-size:19px;line-height:1;transform:translate(calc(var(--ex,0px) + var(--glance,0px)),var(--ey,0px));transition:transform .5s var(--spring)}
.pv-nav a{position:relative;z-index:1;flex:none;padding:7px 13px;border-radius:var(--pill);text-decoration:none;white-space:nowrap;transition:color .25s}
.pv-nav a:hover{color:#fff}
.pv-nav a[aria-current="true"]{color:#fff}
.pv-nav-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--w,0);border-radius:var(--pill);background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transform:translateX(var(--x,0));opacity:var(--o,0);transition:transform .45s var(--spring),width .45s var(--spring),opacity .3s}
.pv-nav a:focus-visible{outline-offset:-2px}

.pv-hero{padding:0}   /* style.css 給每個 section 112px 上下留白；首屏自己算高度 */
/* ── 首屏：左邊一句話，右邊一台機身；往下捲，螢幕從錶面換成主畫面（兩張圖同一個相機，逐像素對齊）── */
.pv-hero-track{position:relative;height:165vh}
.pv-hero-sticky{position:sticky;top:64px;height:calc(100vh - 64px);min-height:620px;display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);grid-template-rows:1fr auto;align-items:center;
  max-width:1180px;margin:0 auto;padding:0 24px;column-gap:48px}
.pv-hero-copy{grid-column:1;grid-row:1;padding:0;max-width:none;margin:0}
.pv-kicker{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:600;color:var(--muted)}
.pv-badge{display:inline-block;padding:4px 11px;border-radius:var(--pill);font-size:13px;font-weight:650;letter-spacing:.02em;color:#fff;background:var(--glow)}
.pv h1{margin-top:24px;font-size:clamp(40px,5.6vw,82px);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.pv h1 .l,.pv-head h2 span{display:block}
/* 首屏標題：寬螢幕上每個 span 一行不折（字級算過，最長一行約 8em 放得下）；窄螢幕照常折行 */
@media (min-width:821px){.pv h1 .l{white-space:nowrap}}
.pv h1 .glow{background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.pv-hero-lede{margin-top:24px;max-width:30em;font-size:clamp(17px,1.45vw,20px);line-height:1.6;color:var(--muted)}
.pv-ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
.pv-stage{grid-column:2;grid-row:1 / span 2;position:relative;width:100%;max-width:500px;justify-self:end;aspect-ratio:1100/1280;
  transform:translateY(var(--lift,0px)) scale(var(--scale,1));transition:transform .2s linear}
.pv-prod{position:absolute;inset:0}
.pv-prod img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 40px 50px rgba(20,28,45,.22))}
.pv-prod.is-home{opacity:0;transition:opacity .7s var(--ease-in-out)}
.pv-stage[data-state="home"] .pv-prod.is-home{opacity:1}
.pv-hero-foot{grid-column:1;grid-row:2;padding-bottom:44px;display:grid;gap:16px;justify-items:start}
.pv-hero-note{font-size:13px;line-height:1.6;color:var(--muted);max-width:38em}
.pv-hero-flip{position:absolute;left:0;top:50%;bottom:0;width:1px;pointer-events:none}

/* ── 分段式按鈕：一條磨砂底，亮片（--x、--w 由 preview.js 量）滑到選中的那一格 ── */
.pv-seg{position:relative;display:inline-flex;padding:4px;border-radius:var(--pill);background:color-mix(in srgb,var(--ink) 7%,transparent);
  box-shadow:inset 0 0 0 1px var(--line)}
.pv-seg button{all:unset;box-sizing:border-box;position:relative;z-index:1;min-width:64px;height:40px;padding:0 18px;border-radius:var(--pill);
  display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer;transition:color .25s;white-space:nowrap}
.pv-seg button[aria-pressed="true"]{color:var(--ink)}
.pv-seg button:active{transform:scale(.95)}
.pv-seg button{transition:color .25s,transform .2s var(--spring)}
.pv-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pv-seg-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:0;width:var(--w,0);border-radius:var(--pill);background:var(--pv-card);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 6px 16px -6px rgba(0,0,0,.2);transform:translateX(var(--x,0));transition:transform .45s var(--spring),width .45s var(--spring)}
.pv-dark .pv-seg{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--pv-night-line)}
.pv-dark .pv-seg button{color:var(--pv-night-muted)} .pv-dark .pv-seg button[aria-pressed="true"]{color:#fff}
.pv-dark .pv-seg-thumb{background:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* ── 段落共用 ── */
.pv-sec{padding:var(--pv-sec) 0;position:relative}
.pv-dark{background:var(--pv-night);color:var(--pv-night-ink);--muted:var(--pv-night-muted);--line:var(--pv-night-line);--ink:var(--pv-night-ink);--pv-card:var(--pv-night-2);--pv-well:#0d0f12}
.pv-head{max-width:860px;margin-bottom:clamp(48px,6vw,80px)}
.pv-eyebrow{font-size:clamp(17px,1.4vw,21px);font-weight:650;color:var(--tint,var(--accent));margin-bottom:16px}
.pv-head h2,.pv-h2-solo{font-size:clamp(36px,5.2vw,68px);font-weight:700;letter-spacing:-.035em;line-height:1.06}
.pv-head h2 span{color:var(--muted)}
.pv-lede{margin-top:24px;max-width:36em;font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--muted)}
.pv-h2-solo{margin-bottom:clamp(40px,5vw,64px)}
/* 中文：大字不壓字距，行距放鬆 */
.pv :is(h1,h2):lang(zh){letter-spacing:-.01em;line-height:1.14}
.pv-screen{display:block;position:relative}
.pv-screen img,video.pv-screen{display:block;width:100%;height:auto;border-radius:var(--screen-r);
  box-shadow:0 0 0 1px rgba(0,0,0,.06),0 30px 60px -28px rgba(10,20,40,.45)}
.pv-dark .pv-screen img{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.pv sup{font-size:.6em;line-height:0;vertical-align:super;margin-left:1px}
.pv sup a{color:inherit;text-decoration:none;padding:0 2px}
.pv sup a:hover{text-decoration:underline}
.pv-note{font-size:14px;color:var(--muted)}
.pv-round{all:unset;box-sizing:border-box;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink);transition:background .2s,transform .2s var(--spring)}
.pv-round:hover{background:color-mix(in srgb,var(--ink) 15%,transparent)}
.pv-round:active{transform:scale(.92)}
.pv-round:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.pv-round svg{width:18px;height:18px;fill:currentColor}
.pv-round[disabled]{opacity:.35;cursor:default}
.pv-round .i-play{display:none} .pv-round.paused .i-play{display:inline} .pv-round.paused .i-pause{display:none}
.pv-pill{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;border-radius:var(--pill);cursor:pointer;
  font-size:15px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent);transition:background .2s,transform .2s var(--spring)}
.pv-pill::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--spring)}
.pv-pill[aria-pressed="true"]::after{transform:translateY(2px) rotate(-135deg)}
.pv-pill:hover{background:color-mix(in srgb,var(--ink) 13%,transparent)} .pv-pill:active{transform:scale(.96)}
.pv-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* 換圖：同一格裡疊幾張，換的是 .on（交叉淡入，輕微縮放，像螢幕亮起來） */
.pv-swap{position:relative;display:grid}
.pv-swap > *{grid-area:1/1;opacity:0;transform:scale(.985);transition:opacity .55s var(--ease-in-out),transform .7s var(--ease-out)}
.pv-swap > .on{opacity:1;transform:none}

/* ── 亮點：整排大卡，自動播放，捲動對齊 ── */
.pv-overview{padding-bottom:clamp(64px,7vw,104px);overflow:hidden}
.pv-gal{--tile:min(var(--content),calc(100vw - 2 * var(--margin)));--gut:calc((100vw - var(--tile)) / 2)}
.pv-gal-track{list-style:none;margin:0;padding:0 var(--gut);display:flex;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--gut);
  scrollbar-width:none;overscroll-behavior-x:contain}
.pv-gal-track::-webkit-scrollbar{display:none}
.pv-tile{flex:none;width:var(--tile);scroll-snap-align:start}
.pv-tile-in{position:relative;height:clamp(500px,46vw,640px);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:24px;
  padding:0 clamp(32px,5vw,72px);background:radial-gradient(120% 90% at 85% 50%,var(--t1,#2a2f3a),transparent 70%),linear-gradient(160deg,#16181d,#0c0d10)}
.pv-tile-cap{font-size:clamp(20px,2vw,28px);line-height:1.32;font-weight:600;color:var(--pv-night-muted);max-width:15em;letter-spacing:-.01em}
.pv-tile-cap b{color:#fff;font-weight:650}
.pv-tile-media{justify-self:center;width:min(100%,460px);transform:translateY(var(--ty,24px)) scale(var(--ts,.96));opacity:var(--to,.5);transition:transform 1s var(--ease-out),opacity .8s}
.pv-tile.is-cur .pv-tile-media{--ty:0px;--ts:1;--to:1}
.pv-tile-home-light{--t1:#6a4a2c} .pv-tile-era-1988{--t1:#3c3c3c} .pv-tile-clio-confirm{--t1:#3f3a6e}
.pv-tile-la-expanded{--t1:#5b3c2a} .pv-tile-people-greet{--t1:#6e4a30} .pv-tile-cc{--t1:#3b4250}
.pv-gal-ctl{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:28px;position:relative}
.pv-dots{display:flex;align-items:center;gap:4px;height:56px;padding:0 18px;border-radius:var(--pill);background:rgba(255,255,255,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.pv-dots button{all:unset;box-sizing:border-box;width:24px;height:44px;display:grid;place-items:center;cursor:pointer;transition:width .45s var(--spring)}
.pv-dots button i{display:block;position:relative;width:8px;height:8px;border-radius:var(--pill);background:rgba(255,255,255,.45);overflow:hidden;transition:width .45s var(--spring),background .3s}
.pv-dots button:hover i{background:rgba(255,255,255,.7)}
.pv-dots button[aria-current="true"]{width:56px}
.pv-dots button[aria-current="true"] i{width:44px;background:rgba(255,255,255,.3)}
.pv-dots button[aria-current="true"] i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#fff;transform-origin:0 50%;transform:scaleX(var(--p,1))}
.pv-gal.auto .pv-dots button[aria-current="true"] i::after{animation:pv-fill var(--dur-gal) linear forwards}
.pv-gal.held .pv-dots button[aria-current="true"] i::after{animation-play-state:paused}
.pv-dots button:focus-visible{outline:2px solid #fff;outline-offset:-6px;border-radius:var(--pill)}
.pv-dark .pv-round{background:rgba(255,255,255,.1);color:#fff}
.pv-dark .pv-round:hover{background:rgba(255,255,255,.18)}
.pv-arrows{position:absolute;right:24px;display:flex;gap:12px}
@keyframes pv-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ── 主畫面：外觀切換的大圖 + 三張卡 ── */
.pv-home{--tint:#b4532b}
.pv-feature{border-radius:calc(var(--r) + 8px);background:var(--pv-well);padding:clamp(40px,6vw,88px) 24px clamp(32px,4vw,48px);display:grid;justify-items:center;gap:32px}
.pv-feature-media{width:min(100%,520px)}
.pv-feature-ctl{display:grid;justify-items:center;gap:12px;text-align:center}
.pv-cards{list-style:none;margin:var(--gutter) 0 0;padding:0;display:grid;gap:var(--gutter)}
.pv-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pv-card{background:var(--pv-card);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 0 0 0 1px var(--line)}
.pv-card-media{padding:32px 32px 0;background:var(--pv-well);display:grid;place-items:center;overflow:hidden}
.pv-card-media .pv-screen{width:min(100%,300px);transform:translateY(10%);transition:transform .6s var(--ease-out)}
.pv-card:hover .pv-card-media .pv-screen{transform:translateY(6%)}
.pv-card > p{padding:24px 28px 32px;font-size:17px;line-height:1.55;color:var(--muted)}
.pv-card > p b,.pv-points b,.pv-b p b,.pv-panel-text b{color:var(--ink);font-weight:650}

/* ── 隨手可及：Live Activities 與控制中心 ── */
.pv-system{--tint:#1d7a55;padding-top:0}
.pv-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.pv-panel{background:var(--pv-card);border-radius:var(--r);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column}
.pv-panel-media{background:var(--pv-well);padding:clamp(28px,4vw,48px);display:grid;place-items:center}
.pv-panel-media > *{width:min(100%,400px)}
.pv-panel-text{padding:28px 32px 32px;display:grid;gap:8px;justify-items:start}
.pv-panel-text h3{font-size:24px;letter-spacing:-.02em}
.pv-panel-text p{color:var(--muted);font-size:17px;line-height:1.55}
.pv-panel-text .pv-pill{margin-top:8px}

/* ── 錶面：十張一面牆 + 島錶面的三個年代 ── */
.pv-faces{--tint:#ffb340}
.pv-wall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px var(--gutter)}
.pv-face{display:grid;gap:12px;justify-items:center;text-align:center}
.pv-face .pv-screen{width:100%;transition:transform .5s var(--spring)}
.pv-face:hover .pv-screen{transform:translateY(-6px) scale(1.02)}
.pv-face span{font-size:15px;font-weight:600;color:var(--muted)}
.pv-era{margin-top:clamp(72px,9vw,128px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;
  padding:clamp(32px,5vw,64px);border-radius:calc(var(--r) + 8px);background:linear-gradient(160deg,#15171c,#0b0c0f);box-shadow:inset 0 0 0 1px var(--pv-night-line)}
.pv-era-text{display:grid;gap:16px;justify-items:start}
.pv-era-text h3{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em}
.pv-era-text p{color:var(--muted);font-size:17px;line-height:1.6;max-width:28em}
.pv-era-media{width:min(100%,440px);justify-self:center}

/* ── App：天氣影片 + 九張卡 ── */
.pv-apps{--tint:#2459d6}
.pv-weather{margin:0;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(28px,5vw,72px);
  padding:clamp(32px,5vw,64px);border-radius:calc(var(--r) + 8px);background:linear-gradient(150deg,#5f7389,#3a4757 60%,#2a3441);color:#eef3f8}
.pv-weather-media{position:relative;width:min(100%,520px);justify-self:center}
.pv-weather-media .pv-round{position:absolute;right:14px;bottom:14px;background:rgba(0,0,0,.35);color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pv-weather figcaption{font-size:clamp(20px,2vw,26px);line-height:1.4;font-weight:600;color:rgba(238,243,248,.72)}
.pv-weather figcaption b{color:#fff}
.pv-apps .pv-cards{margin-top:var(--gutter)}

/* ── ClioTalk：三步驟 + 三個原則 ── */
.pv-clio{--tint:#b4a2ff;background:radial-gradient(60% 50% at 75% 30%,rgba(143,124,247,.22),transparent 70%),radial-gradient(50% 40% at 20% 85%,rgba(240,112,142,.14),transparent 70%),var(--pv-night)}
.pv-steps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
.pv-steps-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pv-steps-list button{all:unset;box-sizing:border-box;position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;width:100%;
  padding:20px 24px 24px;border-radius:22px;cursor:pointer;transition:background .3s;overflow:hidden}
.pv-steps-list button:hover{background:rgba(255,255,255,.04)}
.pv-steps-list button[aria-pressed="true"]{background:rgba(255,255,255,.07)}
.pv-steps-list button:focus-visible{outline:2px solid var(--tint);outline-offset:2px}
.pv-step-n{grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:650 14px/1 var(--font);color:var(--pv-night-muted);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.25);transition:background .3s,color .3s}
.pv-steps-list button[aria-pressed="true"] .pv-step-n{background:#fff;color:#111;box-shadow:none}
.pv-step-t{font-size:21px;font-weight:650;color:var(--pv-night-muted);transition:color .3s}
.pv-steps-list button[aria-pressed="true"] .pv-step-t{color:#fff}
.pv-step-b{grid-column:2;font-size:16px;line-height:1.55;color:var(--pv-night-muted);max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease-out),opacity .4s}
.pv-steps-list button[aria-pressed="true"] .pv-step-b{max-height:6em;opacity:1}
.pv-step-bar{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:2px;background:var(--glow);transform-origin:0 50%;transform:scaleX(0)}
.pv-steps.auto .pv-steps-list button[aria-pressed="true"] .pv-step-bar{animation:pv-fill var(--dur-step) linear forwards}
.pv-steps-media{width:min(100%,460px);justify-self:center}
.pv-points{list-style:none;margin:clamp(64px,8vw,104px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.pv-points li{padding-top:24px;border-top:1px solid var(--line)}
.pv-points p{font-size:17px;line-height:1.6;color:var(--muted)}

/* ── 家人與隱私 ── */
.pv-family{--tint:#b8355a}
.pv-family-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.pv-family-media{width:min(100%,520px)}
.pv-family .pv-head{margin-bottom:0}
.pv-points-col{grid-template-columns:1fr;margin-top:40px;gap:24px}
.pv-points-col li{padding-top:16px}

/* ── 還有更多：五格便當盒 ── */
.pv-more{background:var(--pv-well)}
@media (prefers-color-scheme:dark){.pv-more{background:#0b0c0f}}
.pv-bento{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--gutter)}
.pv-b{background:var(--pv-card);border-radius:var(--r);padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;justify-content:space-between;gap:28px;grid-column:span 2;min-height:340px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.pv-b p{font-size:17px;line-height:1.55;color:var(--muted)}
.pv-b-devices{grid-column:span 4}
.pv-devices{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:clamp(16px,2.4vw,28px);padding-top:8px}
/* 抽象的裝置外框：圓角深色框，不畫按鍵與鏡頭 */
.pv-ipad,.pv-iphone{background:#16181c;display:grid;place-items:center;box-shadow:0 0 0 1px rgba(0,0,0,.2),0 24px 40px -24px rgba(0,0,0,.45)}
.pv-ipad{width:min(56%,300px);aspect-ratio:3/4;border-radius:24px;padding:16px}
.pv-iphone{width:min(26%,140px);aspect-ratio:9/19;border-radius:26px;padding:8px}
.pv-ipad .pv-screen,.pv-iphone .pv-screen{width:100%}
.pv-ipad .pv-screen img,.pv-iphone .pv-screen img{box-shadow:none}
.pv-motif{width:min(100%,220px);height:auto;color:var(--ink);overflow:visible}
.pv-motif .m-body,.pv-motif .m-cable,.pv-motif .m-waves path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pv-motif .m-cable{stroke:var(--accent)}
.pv-motif .m-waves path{stroke:var(--accent);opacity:.2}
.pv-glass-demo{position:relative;flex:1;min-height:150px;border-radius:20px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(40% 60% at 25% 40%,#ff9f6b,transparent 70%),radial-gradient(45% 60% at 75% 60%,#8f7cf7,transparent 70%),radial-gradient(50% 50% at 50% 100%,#f0708e,transparent 70%),#2a2140}
.pv-glass-pill{transform:translate(var(--gx,0px),var(--gy,0px));transition:transform .5s var(--spring);display:grid;place-items:center;width:132px;height:56px;border-radius:var(--pill);font-size:28px;line-height:1;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px) saturate(1.8);-webkit-backdrop-filter:blur(10px) saturate(1.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.22),0 10px 24px -10px rgba(0,0,0,.4)}
.pv-b .pv-big{font-size:clamp(48px,6vw,80px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink);display:flex;gap:.3em}
.pv-b-langs .pv-big span:nth-child(2){color:var(--muted)} .pv-b-langs .pv-big span:nth-child(3){background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── Preview：界線、行動、註腳 ── */
.pv-limits{--tint:var(--muted)}
.pv-limit-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--gutter);counter-reset:lim}
.pv-limit-list li{position:relative;padding:24px 0 24px 48px;border-top:1px solid var(--line);font-size:17px;line-height:1.6;counter-increment:lim}
.pv-limit-list li::before{content:counter(lim,decimal-leading-zero);position:absolute;left:0;top:25px;font:600 13px/1.4 var(--mono);color:var(--muted)}
.pv-cta{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1.2fr) auto;align-items:center;gap:32px;padding:clamp(32px,5vw,56px);
  border-radius:calc(var(--r) + 8px);background:var(--pv-night);color:var(--pv-night-ink);position:relative;overflow:hidden}
.pv-cta::before{content:"";position:absolute;inset:auto -10% -60% 40%;height:120%;background:var(--glow);opacity:.35;filter:blur(60px);pointer-events:none}
.pv-cta > *{position:relative}
.pv-cta h3{font-size:clamp(26px,3vw,40px);letter-spacing:-.025em}
.pv-cta p{margin-top:12px;color:var(--pv-night-muted);font-size:17px;line-height:1.6;max-width:34em}
.pv-cta .pv-ctas{margin-top:0}
.pv-cta .btn-ghost{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.pv-fn{margin-top:clamp(48px,6vw,72px);padding-top:24px;border-top:1px solid var(--line);font-size:12px;line-height:1.7;color:var(--muted);display:grid;gap:8px}
.pv-fn ol{margin:0;padding-left:1.4em;display:grid;gap:8px}
.pv-fn li:target{color:var(--ink)}

/* ── 進場：捲到才浮上來；同一組裡依序晚一點（--i 由 preview.js 給） ── */
@media (prefers-reduced-motion:no-preference) and (scripting:enabled){
  .pv .rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-out),transform 1s var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
  .pv .rv.in{opacity:1;transform:none}
  .pv-hero-copy > *{animation:rise .7s var(--ease-out) backwards}
  .pv-hero-copy > :nth-child(2){animation-delay:.08s} .pv-hero-copy > :nth-child(3){animation-delay:.18s} .pv-hero-copy > :nth-child(4){animation-delay:.28s}
  .pv-stage{animation:pv-arrive 1.1s var(--ease-out) .1s backwards}
  .pv-glass-demo{background-size:160% 160%;animation:pv-drift 14s ease-in-out infinite alternate}
}
@keyframes pv-arrive{from{opacity:0;transform:translateY(40px) scale(.94)}}
@keyframes pv-drift{from{background-position:0% 30%}to{background-position:100% 70%}}
@media (prefers-reduced-motion:reduce){
  .pv-hero-track{height:auto}
  .pv-hero-sticky{position:relative;top:0;height:auto;min-height:0;padding-top:56px;padding-bottom:56px}
  .pv-swap > *,.pv-prod.is-home,.pv-seg-thumb,.pv-nav-thumb,.pv-tile-media,.pv-step-b,.pv-nav-eyes{transition:none}
  .pv-tile-media{--ty:0px;--ts:1;--to:1}
  .pv-gal-track{scroll-behavior:auto}
}

/* ── 寬度：1100 以下兩欄變一欄；手機 16px 邊 ── */
@media (max-width:1100px){
  .pv-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pv-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-b,.pv-b-devices{grid-column:span 1}
  .pv-b-devices{grid-column:span 2}
}
@media (max-width:820px){
  .pv{--margin:16px;--gutter:16px}
  .pv-bar .wrap{flex-wrap:wrap;height:auto;padding-top:8px;padding-bottom:8px;row-gap:8px}
  .pv-nav{order:5;flex-basis:100%;margin:0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .pv-nav.end-reached{-webkit-mask-image:none;mask-image:none}
  .pv-nav a{padding:8px 12px}
  .pv-hero-track{height:auto}
  .pv-hero-sticky{position:relative;top:0;height:auto;min-height:0;grid-template-columns:1fr;grid-template-rows:auto;padding:40px 16px 8px;row-gap:28px}
  .pv-hero-copy,.pv-stage,.pv-hero-foot{grid-column:1;grid-row:auto}
  .pv-stage{justify-self:center;width:min(100%,440px)}
  .pv-hero-foot{justify-items:center;text-align:center;padding-bottom:24px}
  .pv-hero-flip{display:none}
  .pv-ctas .btn{flex:1 1 auto;justify-content:center}
  .pv-gal{--tile:calc(100vw - 32px)}
  .pv-tile-in{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:560px;padding:32px 24px 0;align-items:start;gap:24px}
  .pv-tile-media{width:min(100%,360px);align-self:end;margin-bottom:-12%}
  .pv-tile-cap{font-size:20px}
  .pv-arrows{display:none}
  .pv-cards-3,.pv-duo,.pv-era,.pv-weather,.pv-steps,.pv-family-grid,.pv-points,.pv-limit-list,.pv-cta{grid-template-columns:1fr}
  .pv-cards-3{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:-16px;margin-right:-16px;padding:0 16px;scroll-padding:0 16px;scrollbar-width:none}
  .pv-cards-3::-webkit-scrollbar{display:none}
  .pv-cards-3 .pv-card{scroll-snap-align:start}
  .pv-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-era{padding:28px 20px}
  .pv-era-text{justify-items:stretch}
  .pv-era .pv-seg{justify-self:start}
  .pv-weather{padding:24px 20px}
  .pv-steps-media{order:-1;width:min(100%,380px)}
  .pv-family-media{justify-self:center;width:min(100%,420px)}
  .pv-b,.pv-b-devices{grid-column:span 2;min-height:0}
  .pv-cta{padding:28px 24px}
}
@media (max-width:600px){
  .pv-cards-grid{grid-template-columns:1fr}
  .pv-seg button{min-width:0;padding:0 14px}
  .pv-bento{grid-template-columns:1fr}
  .pv-b,.pv-b-devices{grid-column:span 1}
}
@media (max-width:360px){
  .pv-seg button{padding:0 10px;font-size:14px}
  .pv-kicker{font-size:15px}
}

/* ── 出站連結（另一頁）：膠囊最後一格，前面一條細分隔線 ── */
.pv .pv-nav a.pv-nav-out{margin-left:6px;color:rgba(255,255,255,.9)}
.pv .pv-nav a.pv-nav-out::before{content:"";position:absolute;left:-4px;top:9px;bottom:9px;width:1px;background:rgba(255,255,255,.18)}
.pv .pv-nav a.pv-nav-out::after{content:" ↗";opacity:.6}
/* 首頁 style.css 的手機導覽規則（膠囊外框、收起第 6 個）不套到這條膠囊上 */
@media (max-width:820px){
  .pv .pv-bar nav.pv-nav{padding:4px 6px 4px 4px;gap:2px;overflow-x:auto}
  .pv .pv-bar nav.pv-nav a{display:inline-flex;padding:8px 12px;border-radius:var(--pill);font-size:14px;color:rgba(255,255,255,.72);box-shadow:none;background:none}
  .pv .pv-bar nav.pv-nav a[aria-current="true"]{color:#fff;background:none}
  .pv .pv-bar nav.langs{order:0;flex-basis:auto;padding:0;overflow:visible}
  .pv .pv-bar nav.langs a{padding:0 4px;box-shadow:none;border-radius:0}   /* 語言切換是文字連結：不套膠囊外框（撐到 44 高後外框會變成圓圈） */
}

/* ── 便當盒最後一格：小工具往事（一排年份，接到那篇長文）── */
.pv-b-history{grid-column:1 / -1;min-height:0}
.pv-years{list-style:none;margin:0;padding:0;display:flex;gap:0;font:600 clamp(18px,2.1vw,32px)/1 var(--mono);letter-spacing:-.02em;color:var(--muted)}
.pv-years li{display:flex;align-items:center;flex:1 1 auto;white-space:nowrap}
.pv-years li:first-child{flex:0 0 auto}
.pv-years li + li::before{content:"";flex:1;min-width:10px;height:1px;margin:0 clamp(6px,1vw,14px);background:var(--line)}
@media (max-width:820px){.pv-years{flex-wrap:wrap;gap:10px 16px}.pv-years li,.pv-years li:first-child{flex:0 0 auto}.pv-years li + li::before{display:none}}
.pv-years li:last-child{background:var(--glow);-webkit-background-clip:text;background-clip:text;color:transparent}
.pv-b-row{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap}
.pv-b-row p{max-width:40em}

/* 段落小標的色調：淺段用深一階（對比 ≥ 4.5:1），系統深色外觀下淺段變暗，改用亮一階 */
@media (prefers-color-scheme:dark){
  .pv-home{--tint:#ff9a6b} .pv-system{--tint:#4fd19a} .pv-apps{--tint:#7aa7ff} .pv-family{--tint:#ff8fae}
}
/* 首屏捲出去時：機身微微後退、文字淡出（只在支援捲動時間軸的瀏覽器；其他瀏覽器保持靜止，不影響閱讀） */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:821px){
    .pv-hero-sticky{view-timeline:--hero block}
    .pv-hero-track{timeline-scope:--hero-track;view-timeline:--hero-track block}
    .pv-stage{animation:pv-arrive 1.1s var(--ease-out) .1s backwards,pv-recede linear both;animation-timeline:auto,--hero-track;animation-range:normal,exit 0% exit 60%}
  }
}
@keyframes pv-recede{to{transform:translateY(-6%) scale(.9);opacity:.2}}
/* App：重點卡片橫放、佔兩格（圖在左、字在右） */
.pv-cards-grid{grid-auto-flow:dense}
.pv-card.wide{grid-column:span 2;flex-direction:row}
.pv-card.wide .pv-card-media{flex:0 0 54%;padding:40px 40px 0;align-items:end}
.pv-card.wide .pv-card-media .pv-screen{width:min(88%,360px);transform:translateY(6%)}
.pv-card.wide:hover .pv-card-media .pv-screen{transform:translateY(3%)}
.pv-card.wide > p{align-self:center;font-size:clamp(17px,1.5vw,21px);line-height:1.5;padding:32px clamp(24px,3vw,44px)}
@media (max-width:600px){.pv-card.wide{grid-column:auto;flex-direction:column}.pv-card.wide .pv-card-media{flex:none}.pv-card.wide > p{font-size:17px;padding:24px 28px 32px}}
/* 家人段：標題在半欄裡，字級降一階，詞組不被拆開 */
.pv-family .pv-head h2{font-size:clamp(34px,3.9vw,56px)}
/* 超寬螢幕（≥ 1800）：版心放寬、字級跟著放大一點，不讓內容縮成中間一小條 */
@media (min-width:1800px){
  .pv .wrap,.pv-hero-sticky{max-width:1360px}
  .pv{--content:calc(1360px - 2 * var(--margin))}
  .pv h1{font-size:96px} .pv-stage{max-width:580px}
  .pv-head h2,.pv-h2-solo{font-size:76px}
}
/* 系統深色外觀：淺段變成石墨（#14161a），深段維持近黑，亮暗交替的節奏不消失；深色大卡加一圈細線免得融進底色 */
@media (prefers-color-scheme:dark){
  .pv{--bg:#14161a;--pv-card:#1c1f24;--pv-well:#101215}
  .pv-bar{background:color-mix(in srgb,#14161a 78%,transparent)}
  .pv-dark{--pv-night:#000}
  .pv-cta,.pv-era,.pv-tile-in{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
  .pv-more{background:#0d0e11}
}
/* 平板直式（601–820）：錶面牆三欄、主畫面卡片兩張半露、兩格面板維持並排，不讓單張圖撐滿整個寬度 */
@media (min-width:601px) and (max-width:820px){
  .pv-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pv-cards-3{grid-auto-columns:46%}
  .pv-duo{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pv-panel-text{padding:24px 24px 24px}
}
/* 寬卡整張是同一片帶色的底（訊息綠、食譜橘、家庭琥珀，取自各自 App 圖示），字和圖在同一塊上，重點一眼分得出 */
.pv-card.wide{background:var(--wt,var(--pv-well));box-shadow:none}
.pv-card.wide .pv-card-media{background:transparent}
.pv-card.wide > p{color:color-mix(in srgb,var(--ink) 62%,transparent)}
.pv-card.wide .pv-card-media .pv-screen{width:min(92%,400px)}
.pv-c-app-messages-confirm{--wt:linear-gradient(150deg,#e3f6e8,#cdeed7)}
.pv-c-app-recipe-step{--wt:linear-gradient(150deg,#fff0e3,#ffe0c7)}
.pv-c-app-home{--wt:linear-gradient(150deg,#fff5df,#ffe9b8)}
@media (prefers-color-scheme:dark){
  .pv-c-app-messages-confirm{--wt:linear-gradient(150deg,#13261b,#0f1f16)}
  .pv-c-app-recipe-step{--wt:linear-gradient(150deg,#2a1b10,#21150c)}
  .pv-c-app-home{--wt:linear-gradient(150deg,#2a2210,#211a0b)}
}

/* ── 網格落位（≥ 821）：兩欄的段落不用比例欄寬，直接佔 12 欄裡的整數欄，左右兩塊的邊都落在欄線上 ── */
@media (min-width:821px){
  .pv-hero-sticky,.pv-steps,.pv-family-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .pv-hero-copy,.pv-hero-foot{grid-column:1 / span 7}
  .pv-stage{grid-column:8 / span 5}
  .pv-steps-list{grid-column:1 / span 5;margin-left:-24px}   /* 步驟按鈕的底色往左懸出，編號和字對齊第 1 欄 */
  .pv-steps-media{grid-column:7 / span 6;justify-self:end}
  .pv-family-media{grid-column:1 / span 6}
  .pv-family-text{grid-column:7 / span 6}
}
/* 觸控目標至少 44 × 44（HIG）：品牌與語言連結把可點範圍撐到 44 高，外觀不變 */
.pv .brand,.pv .langs a{min-height:44px;display:inline-flex;align-items:center}
/* 膠囊導覽：每個連結 44 高；膠囊本身也是 44，亮片仍是內縮 4px 的 36 高 */
.pv-nav,.pv .pv-bar nav.pv-nav{padding-top:0;padding-bottom:0}
.pv-nav a{min-height:44px;display:inline-flex;align-items:center}
.pv-seg button{height:44px}
/* 頁尾連結：可點高度 44 */
.pv footer .links a{display:inline-block;padding:12px 0}