/* SentSee — Three stones / product-performs
   依 taste-skill 方向書：一個 ground、一個 ink、一個 accent；無漸層、無靜態陰影、無細線。 */

:root {
  --bg: #eeecea;
  --surface: #e4e1dd;
  --surface-2: #dcd8d3;
  --ink: #333231;
  --muted: #57534e;
  --accent: #5c6b54;
  --accent-ink: #ffffff;
  --field: #cdc3b6;
  --check: #2e7d4f;          /* 產品自己的顏色：已讀雙勾綠，只出現在介面片段裡 */
  --check-dim: #9aa79b;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.22vw, 1.125rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-hero: clamp(2.5rem, 8.6vw, 8.6rem);

  --margin: clamp(20px, 4vw, 56px);
  --radius: 8px;
  --nav-h: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Work Sans", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: var(--step-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--field); }

a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap { padding-left: var(--margin); padding-right: var(--margin); }

/* ---------- 導覽：wordmark、三個連結、一個動作 ---------- */
.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
}
.wordmark {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
}
.nav a.navlink {
  font-size: var(--step-small);
  text-decoration: none;
  color: var(--muted);
}
.nav a.navlink:hover { color: var(--ink); }
.nav .signin {
  font-size: var(--step-small);
  font-weight: 500;
  text-decoration: none;
  background: var(--ink);
  color: var(--bg);
  padding: 9px 16px;
  border-radius: 999px;
}
.nav .signin:hover { background: var(--accent); color: var(--accent-ink); }

/* ---------- Hero：Controls on the sentence ---------- */
.hero {
  overflow-x: clip;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-bottom: 8svh;
}
.hero-sentence {
  text-align: center;
  font-weight: 300;
  font-size: var(--step-hero);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 92%;
  margin: 0 auto;
  position: relative;
  width: fit-content;
  font-variation-settings: "wght" 300;
  transition: font-variation-settings 240ms ease, letter-spacing 240ms ease;
}
.hero-sentence .line { display: block; overflow: hidden; }
.hero-sentence .line > span {
  display: inline-block;
  transform: translateY(110%);
}
.loaded .hero-sentence .line > span {
  transform: translateY(0);
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.loaded .hero-sentence .line:nth-child(2) > span { transition-delay: 110ms; }
.hero-sentence .seen-mark {
  opacity: 0;
  transition: opacity 300ms ease;
}
.seen-mark .ck { width: 0.62em; height: 0.55em; color: var(--muted); }
.seen-mark .ck.dbl { display: none; width: 0.8em; }
.seen-on .seen-mark .ck { color: var(--check); }
.seen-on .seen-mark .ck.dbl { display: inline-block; }
.seen-on .seen-mark .ck:not(.dbl) { display: none; }
.seen-on .hero-sentence .seen-mark { opacity: 1; }

/* 介面上的控制片：真的可以動 */
.chip {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  min-width: 220px;
  font-size: 13px;
  text-align: left;
  border: 0;
}
.chip label { font-size: 13px; color: var(--muted); }
.chip .value { font-weight: 500; font-variant-numeric: tabular-nums; }
.chip-weight { top: -0.55em; left: -0.3em; transform: rotate(-2.5deg); }
.chip-track { top: 0.9em; right: 0; transform: rotate(2deg); }
.chip input[type="range"] { accent-color: var(--accent); width: 100%; }

.chip-toast {
  position: absolute;
  left: var(--margin);
  bottom: 4vh;
  z-index: 50;
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 14px 18px;
  max-width: 320px;
  transform: translateY(140%);
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}
.toast-in .chip-toast { transform: translateY(0); }
.chip-toast .t-title { font-weight: 500; display: flex; align-items: center; gap: 8px; }
.chip-toast .t-check { color: #7fd39a; font-weight: 500; }
.chip-toast .t-sub { font-size: 13px; color: #b9b5b0; margin-top: 4px; }
.chip-toast .t-count { font-variant-numeric: tabular-nums; }

.hero-support {
  text-align: center;
  max-width: 44ch;
  margin: 64px auto 0;
  font-size: var(--step-lead);
  line-height: 1.5;
}
.hero-support .demo-note { display: block; font-size: var(--step-small); color: var(--muted); margin-top: 14px; }
.hero-actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  margin-top: 34px;
}
.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: 999px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  min-height: 48px;
  transition: background 160ms ease, transform 160ms ease;
}
.btn:hover { background: var(--ink); }
.btn:active { transform: scale(0.98); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 13px 28px;
}
.btn-ghost:hover { background: var(--ink); color: var(--bg); }

/* ---------- 各節：全版田野，相鄰節不同構圖 ---------- */
section { padding: clamp(90px, 14vh, 180px) 0; }
.band { background: var(--surface); }
.band-2 { background: var(--surface-2); }

.section-head { font-size: var(--step-head); font-weight: 300; letter-spacing: -0.03em; line-height: 1.05; }
.section-lede { max-width: 52ch; margin-top: 18px; color: var(--ink); font-size: var(--step-body); }

/* Call and response 欄 */
.how { max-width: 560px; margin-left: auto; margin-right: auto; }
.how .section-head { margin-bottom: 56px; }
.exchange { margin-bottom: 88px; }
.exchange h3 { font-size: var(--step-lead); font-weight: 500; margin-bottom: 14px; }
.call {
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 20px;
  font-size: 13px;
}
.call .call-note { color: var(--muted); font-size: 13px; margin-top: 8px; }
.response { margin: 18px 0 0 56px; }

/* ---------- data-ui 產品介面片段（真實尺寸、真標籤） ---------- */
[data-ui] {
  background: #f4f4f2;
  border-radius: var(--radius);
  padding: 22px;
  min-height: 210px;
  font-size: 13px;
  line-height: 1.5;
}
[data-ui] .ui-title { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
[data-ui] .row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
}
[data-ui] .row + .row { margin-top: 2px; }
[data-ui] .row:hover { background: var(--surface); }
[data-ui] .row .subj { font-weight: 500; }
[data-ui] .row .meta { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck { width: 1.15em; height: 0.95em; stroke: currentColor; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.12em; }
[data-ui] .check { font-weight: 500; color: var(--muted); }
[data-ui] .check.read { color: var(--check); }
[data-ui] .compose-bar { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
[data-ui] .compose-subject {
  flex: 1;
  background: var(--surface);
  border-radius: 6px;
  padding: 9px 12px;
  color: var(--ink);
}
[data-ui] .send {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 500;
}
[data-ui] .toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}
[data-ui] .switch {
  width: 34px; height: 20px;
  border-radius: 999px;
  background: var(--accent);
  position: relative;
  display: inline-block;
}
[data-ui] .switch::after {
  content: "";
  position: absolute;
  right: 2px; top: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
}
[data-ui] .blocked { color: var(--check); font-weight: 500; }
[data-ui] .toast-row {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 10px;
}
[data-ui] .toast-row .t-check { color: #7fd39a; font-weight: 500; }
[data-ui] .toast-row .t-sub { font-size: 13px; color: #b9b5b0; margin-top: 4px; }
.response-breakout { margin-left: -56px; max-width: 760px; }
@media (max-width: 720px) {
  .response { margin-left: 0; }
  .response-breakout { margin-left: 0; }
}

/* 5/7 能力列 */
.cap-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  margin-bottom: clamp(72px, 10vh, 120px);
}
.cap-row:last-child { margin-bottom: 0; }
.cap-row.flip { grid-template-columns: 7fr 5fr; }
.cap-row.flip .cap-text { order: 2; }
.cap-text h3 { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 12px; }
.cap-text p { color: var(--ink); max-width: 40ch; }

/* ---------- 隱私聲明節：滿版深色田野 ---------- */
.privacy-band { background: var(--ink); color: var(--bg); }
.privacy-band .section-lede { color: var(--bg); }
.privacy-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); margin-top: 56px; }
.privacy-cols h3 { font-size: 16px; font-weight: 500; margin-bottom: 14px; }
.privacy-cols ul { list-style: none; }
.privacy-cols li { padding: 10px 0; border-bottom: 0; font-size: 16px; }
.privacy-cols li::before { content: "— "; color: #8a867f; }
.privacy-cols .cant li::before { content: "× "; color: #b9b5b0; }
@media (max-width: 720px) { .privacy-cols { grid-template-columns: 1fr; } }

/* ---------- 定價：單一寬列 ---------- */
.price-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 56px;
}
.price-cell { padding: clamp(28px, 4vw, 56px); background: var(--surface); }
.price-cell + .price-cell { background: var(--surface-2); }
.price-cell .p-name { font-size: var(--step-lead); font-weight: 500; }
.price-cell .p-price { font-size: var(--step-head); font-weight: 300; letter-spacing: -0.03em; margin: 10px 0 18px; }
.price-cell ul { list-style: none; }
.price-cell li { padding: 7px 0; font-size: 16px; }
.price-cell li::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; margin-right: 9px; }
.price-cell.later li::before { content: "· "; color: var(--muted); }
.price-cell .p-note { color: var(--muted); font-size: 13px; margin-top: 14px; }
@media (max-width: 720px) { .price-row { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin: 56px auto 0; }
.faq details { padding: 18px 0; }
.faq summary {
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 500; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--ink); max-width: 60ch; }

/* ---------- CTA ---------- */
.cta-box { text-align: center; }
.cta-box .section-head { font-size: clamp(2.4rem, 1.4rem + 5vw, 5.5rem); }

/* ---------- Footer：設計過的收尾 ---------- */
footer { padding: clamp(90px, 14vh, 160px) 0 40px; background: var(--field); }
.foot-mark {
  font-size: clamp(4rem, 14vw, 15rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 0.9;
  margin-bottom: 48px;
}
.foot-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: var(--step-small); color: var(--muted); }
.foot-meta a { text-decoration: none; color: var(--muted); }
.foot-meta a:hover { color: var(--ink); }
.foot-meta .push { margin-left: auto; }

/* ---------- 進場動效：每節的組成輪流入場 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chip-toast { display: none; }
}

/* ---------- 手機自己的構圖 ---------- */
@media (max-width: 720px) {
  .hero-sentence { font-size: clamp(2.4rem, 10.2vw, 4.6rem); }
  .chip { position: static; transform: none; min-width: 0; margin: 14px auto 0; max-width: 320px; }
  .hero-chips { display: flex; flex-direction: column; align-items: center; margin-top: 26px; }
  .cap-row, .cap-row.flip { grid-template-columns: 1fr; }
  .cap-row.flip .cap-text { order: 0; }
  .hero-support { margin-top: 40px; }
}
@media (min-width: 721px) {
  .hero-chips { position: static; }
  .hero .hero-chips-mobile-gap { display: none; }
}