/* 首屏與四個特點：版面、文字照搬 tephra-site（saas-revamp）的 Hero 與安心列，
   顏色、字、按鈕、Tephra 視窗換成這一版的（淺灰舞台、系統黑體、深色便利貼、黑色鍵帽）。 */

/* ── 首屏 ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(16px, 3.6vh, 44px));
  padding-bottom: clamp(56px, 9vh, 112px);
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 4vh, 44px);
  min-width: 0;
}

.hero__copy {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-inline: var(--gutter);
  text-align: center;
}

.hero__eyebrow {
  margin: 0;
  color: var(--link-light);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.hero__title {
  margin: 0;
  font-size: clamp(2.5rem, 4.7vw, 4.25rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.16;
}

.ph {
  display: inline-block;
}

.hero__lede {
  max-width: 33em;
  margin: 0 auto;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.85;
}

.hero__lede kbd,
.hero__actions kbd {
  display: inline-grid;
  min-width: 1.7em;
  height: 1.6em;
  place-items: center;
  margin: 0 0.06em;
  padding: 0 0.38em;
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 0.32em;
  background: #151517;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 1px 2px rgb(0 0 0 / 0.3);
  color: #f7f7f8;
  font-size: 0.82em;
  font-weight: 560;
  line-height: 1;
  vertical-align: 0.08em;
  white-space: nowrap;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 4px;
}

.hero__note {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}

.button--ghost {
  border-color: rgb(46 46 49 / 0.24);
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.button--ghost:hover {
  border-color: rgb(46 46 49 / 0.46);
  background: rgb(46 46 49 / 0.04);
}

.cta__in {
  align-items: center;
  gap: 8px;
}

.icon--cta {
  width: 20px;
  height: 20px;
}

/* 指標裝置：桌機顯示「按」，觸控顯示「點」與「傳到我的 Mac」 */
.only-coarse {
  display: none;
}

.only-fine.cta__in {
  display: inline-flex;
}

@media (hover: none), (pointer: coarse) {
  .only-fine,
  .only-fine.cta__in {
    display: none;
  }

  .only-coarse {
    display: inline;
  }

  .only-coarse.cta__in {
    display: inline-flex;
  }
}

/* ── 舞台：一整片 Mac 桌面（試算表在後、Tephra 在前）；寬度同時受畫面高度限制 ── */
.hstage-wrap {
  position: relative;
  width: min(1120px, calc(100% - var(--gutter) * 2), calc((100svh - 170px) * 1.6));
  perspective: 1800px;
  perspective-origin: 50% 30%;
}

.hstage-intro {
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
}

.hstage {
  position: relative;
  aspect-ratio: 16 / 10;
  transform-origin: 50% 100%;
  container: hstage / size;
  cursor: pointer;
}

/* 一進來先斜放（GSAP 接手後從這裡落定；捲動時再轉正、抬起來） */
.js-motion .hstage-intro {
  transform: translateY(40px) rotateX(20deg);
}

.js-motion .hstage {
  transform: rotateX(10deg) scale(0.94);
}

.js-motion [data-hero-tw] {
  opacity: 0;
  visibility: hidden;
}

.hstage__screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(110% 80% at 88% 4%, rgb(255 190 160 / 0.8) 0%, transparent 56%),
    radial-gradient(90% 90% at 0% 100%, rgb(196 202 214 / 0.95) 0%, transparent 60%),
    linear-gradient(160deg, #ebe6e2 0%, #dedce0 45%, #cfd1d7 100%);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.06), 0 50px 110px -46px rgb(30 30 40 / 0.5);
}

.menubar {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 26px;
  padding: 0 14px;
  background: rgb(255 255 255 / 0.55);
  color: #1d1d1f;
  font-size: 12px;
  line-height: 1;
}

.menubar__app {
  font-weight: 700;
}

.menubar__items {
  display: flex;
  gap: 14px;
}

.menubar__items i {
  font-style: normal;
  opacity: 0.86;
}

.menubar__clock {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.sheet {
  position: absolute;
  top: 9%;
  left: 4.5%;
  width: 64%;
  height: 80%;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.16), 0 18px 40px -18px rgb(30 30 40 / 0.35);
}

.sheet__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid #e6e6ea;
  background: #f6f6f7;
  color: #3a3a3f;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.sheet__bar .lights i {
  width: 11px;
  height: 11px;
}

.sheet__grid {
  display: grid;
  grid-template-columns: 30px repeat(5, minmax(0, 1fr));
  color: #3a3a3f;
  font-size: 11.5px;
  line-height: 1;
}

.sheet__grid span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 27px;
  padding: 0 8px;
  overflow: hidden;
  border-right: 1px solid #ececf0;
  border-bottom: 1px solid #ececf0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sheet__grid .h,
.sheet__grid .n {
  justify-content: center;
  padding: 0;
  background: #f7f7f9;
  color: #8a8a90;
  font-size: 10.5px;
}

.sheet__grid .t {
  justify-content: flex-start;
  font-weight: 600;
}

/* 叫出 Tephra 之前，試算表的作用中儲存格是亮的 */
.sheet__grid .is-cell {
  box-shadow: inset 0 0 0 2px transparent;
}

.sheet.is-focused .is-cell {
  box-shadow: inset 0 0 0 2px #2f7cf6;
}

/* Tephra 視窗：置中用 left／top 算，不用 translate（GSAP 動 transform 時會把 CSS 的 translate 清掉） */
.hx {
  --hx-w: min(440px, 40cqw);
  --hx-h: min(548px, 84cqh);
  --hx-cx: 52%;
  --hx-cy: 45%;
  position: absolute;
  z-index: 3;
  top: calc(var(--hx-cy) - var(--hx-h) / 2);
  left: calc(var(--hx-cx) - var(--hx-w) / 2);
  width: var(--hx-w);
  height: var(--hx-h);
}

.hx__pop {
  position: absolute;
  inset: 0;
}

.app--hx {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.app--hx .app__bar {
  flex: 0 0 auto;
}

.hx__top {
  flex: 0 0 34%;
  overflow: hidden;
  padding: 18px 26px 14px;
  background: var(--note);
}

.hx__divider {
  position: relative;
  flex: 0 0 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--note-raised);
}

.hx__divider::after {
  position: absolute;
  top: 2px;
  left: calc(50% - 15px);
  width: 30px;
  height: 2px;
  border-radius: 999px;
  background: var(--line-strong);
  content: "";
}

.hx__bottom {
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0 26px 18px;
}

.hx__bottom .app__pane-title {
  padding: 12px 0 14px;
}

.hx__typing {
  min-height: 1.6em;
}

.hx__typing [data-hero-type] {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.hx__typing .lm {
  color: var(--muted);
}

/* ⌥ Space 鍵帽：桌面左下角 */
.keys--hero {
  position: absolute;
  z-index: 4;
  bottom: 6%;
  left: 4%;
}

.hero__status {
  min-height: 1.7em;
  margin: 14px 0 0;
  color: var(--ink-2);
  font-size: 0.875rem;
  text-align: center;
}

@media (max-width: 960px) {
  .hstage {
    aspect-ratio: 4 / 5;
  }

  .hstage-wrap {
    width: min(100% - var(--gutter) * 2, 560px, calc((100svh - 190px) * 0.8));
  }

  .sheet {
    top: 10%;
    left: -18%;
    width: 100%;
    height: 82%;
  }

  .hx {
    --hx-w: min(440px, 80cqw);
    --hx-h: min(548px, 80cqh);
    --hx-cx: 55%;
  }
}

@media (min-width: 961px) and (max-width: 1180px) {
  .hstage {
    aspect-ratio: 16 / 11;
  }

  .hx {
    --hx-w: min(440px, 44cqw);
  }
}

@container hstage (max-width: 560px) {
  .keys--hero {
    bottom: 3%;
    left: 5%;
    transform: scale(0.7);
    transform-origin: left bottom;
  }

  .menubar__items {
    display: none;
  }

  .app--hx .app__bar {
    gap: 10px;
    padding: 0 10px 0 12px;
  }

  .app--hx .app__tools {
    gap: 9px;
  }

  .hx__top,
  .hx__bottom {
    padding-inline: 18px;
  }

  .app--hx .note-list {
    gap: 9px;
    font-size: 14px;
  }
}

/* ── 四個特點（安心列）：白底、上下細線、橘色線條圖示 ───────────────── */
.trustbar {
  padding: clamp(28px, 5vh, 44px) var(--gutter);
  border-top: 1px solid var(--stage-line);
  border-bottom: 1px solid var(--stage-line);
  background: #ffffff;
}

.trustbar__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.trustbar__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.trustbar__item .ic {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trustbar__item b {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-size: 1.0625rem;
}

@media (max-width: 960px) {
  .trustbar__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .trustbar__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    font-size: 0.875rem;
  }

  .trustbar__item b {
    font-size: 1rem;
  }
}

/* 觸控裝置按下載鍵、複製連結後的提示 */
.share-toast {
  position: fixed;
  z-index: 120;
  bottom: calc(28px + env(safe-area-inset-bottom));
  left: 50%;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 10px 14px;
  border-radius: 12px;
  background: #1e1d1b;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.share-toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}