@font-face {
  font-family:SBALT Display;
  src:url('fonts/display-black.woff2') format('woff2');
  font-weight:900;
  font-display:swap;
}
@font-face {
  font-family:SBALT Mono;
  src:url('fonts/mono-regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap;
}
:root {
  color-scheme:light;
  --cream:#F9F6F0;
  --ink:#2E3138;
  --sage:#9FAF90;
  --mustard:#DCAE6C;
  --terra:#D39E82;
  --slate:#7A8B99;
  --surface:#FFFDF9;
  --muted:#5C6068;
  --line:#E2DACE;
  --soft:#F1ECE3;
  --sage-tint:#e7ebdf;
  --club-tint:#f2e7d6;
  --people-tint:#f2e4da;
  --chat-tint:#e2e7ea;
  --body:-apple-system,BlinkMacSystemFont,'PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;
  --display:'SBALT Display',var(--body);
  --mono:'SBALT Mono',monospace;
  --max:1264px;
  --gutter:clamp(24px,4.6vw,72px);
  --section:112px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:40px;
  --space-5:64px;
  --radius-sm:8px;
  --radius:18px;
  --radius-lg:28px;
  --pill:999px;
  --duration:180ms;
  --ease:cubic-bezier(.2,.7,.2,1);
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:98px;
  -webkit-text-size-adjust:100%;
}
body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font:16px/1.75 var(--body);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,figure {
  margin:0;
}
button,a,summary {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
button {
  font:inherit;
  cursor:pointer;
}
a {
  color:inherit;
  text-underline-offset:5px;
}
img,svg {
  max-width:100%;
}
button,input {
  color:inherit;
}
::selection {
  background:var(--mustard);
  color:var(--ink);
}
:focus-visible {
  outline:3px solid var(--ink);
  outline-offset:5px;
}
.shell {
  max-width:var(--max);
  width:calc(100% - 2*var(--gutter));
  margin-inline:auto;
}
.mono {
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
}
.eyebrow {
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}
.eyebrow .dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--ink);
  border-radius:50%;
  margin-right:10px;
}
.muted {
  color:var(--muted);
}
.skip {
  position:fixed;
  z-index:90;
  top:12px;
  left:20px;
  background:var(--ink);
  color:var(--cream);
  padding:10px 18px;
  transform:translateY(-160%);
}
.skip:focus {
  transform:none;
}
.site-header {
  position:sticky;
  top:0;
  z-index:40;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.header-inner {
  display:flex;
  align-items:center;
  min-height:86px;
  gap:30px;
}
.brand {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.brand img,.footer-brand img {
  width:122px;
  height:auto;
  display:block;
  filter:invert(1) brightness(1.1);
  mix-blend-mode:multiply;
}
.brand-note {
  font-size:11px;
  color:var(--muted);
  border-left:1px solid var(--line);
  padding-left:24px;
}
.site-menu {
  margin-left:auto;
  display:flex;
  gap:32px;
  align-items:center;
}
.site-menu a {
  text-decoration:none;
  font-size:13px;
  min-height:44px;
  display:flex;
  align-items:center;
}
.site-menu a:hover {
  text-decoration:underline;
}
.site-menu .nav-download {
  border:1px solid var(--ink);
  border-radius:var(--pill);
  padding:8px 20px;
  gap:15px;
}
.menu-toggle {
  display:none;
  min-height:44px;
  background:none;
  border:1px solid var(--line);
  border-radius:var(--pill);
  padding:8px 16px;
}
.quiet-link {
  font-size:13px;
  text-decoration:none;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.quiet-link:hover {
  text-decoration:underline;
}
.product-link {
  font-weight:700;
  text-decoration:underline;
}
.section {
  padding-block:var(--section);
}
.section-title {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
  margin-bottom:48px;
}
.chapter {
  font-size:11px;
  font-family:var(--mono);
  color:var(--muted);
}
.chapter span {
  margin-right:18px;
}
.section-title h2,.display-title {
  font-size:clamp(32px,3.2vw,44px);
  font-weight:700;
  line-height:1.45;
  letter-spacing:0;
}
.section-title .sub {
  font-size:15px;
  color:var(--muted);
  margin-top:18px;
  max-width:600px;
}
.problem-list {
  list-style:none;
  margin:0;
  padding:0;
  border-top:1px solid var(--line);
}
.problem-list li {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px;
  align-items:start;
  padding:30px 0;
  border-bottom:1px solid var(--line);
}
.problem-list .problem {
  font-size:22px;
  line-height:1.6;
  font-weight:600;
}
.problem-list h3 {
  font-size:17px;
  line-height:1.5;
  margin-bottom:9px;
}
.problem-list p:not(.problem) {
  font-size:14px;
  color:var(--muted);
  line-height:1.9;
}
.label-list {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:5px;
}
.tag {
  font-size:11px;
  padding:5px 12px;
  border-radius:var(--pill);
  background:var(--soft);
  color:var(--ink);
  white-space:nowrap;
}
.tag.people {
  background:var(--people-tint);
}
.tag.activity {
  background:var(--sage-tint);
}
.tag.club {
  background:var(--club-tint);
}
.tag.chat {
  background:var(--chat-tint);
}
.product-section {
  background:var(--soft);
}
.product-head {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:46px;
}
.product-head h2 {
  margin-top:20px;
}
.product-head>p {
  max-width:350px;
  font-size:14px;
  color:var(--muted);
}
.demo-stage {
  border-radius:var(--radius-lg);
  padding:30px 34px;
  background:var(--people-tint);
  min-height:476px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.demo-stage.activity-stage {
  background:var(--sage-tint);
}
.demo-stage.discover-stage {
  background:var(--club-tint);
}
.diagram {
  background:var(--cream);
  border:1px solid #2e313826;
  border-radius:20px;
  padding:26px 24px;
  width:100%;
  max-width:386px;
  box-shadow:0 8px 0 #2e313808;
  min-height:380px;
}
.diagram-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:20px;
  font-weight:700;
  margin-bottom:22px;
}
.diagram-title span {
  font-size:18px;
}
.diagram-context {
  font-size:12px;
  color:var(--muted);
  margin-bottom:20px;
}
.diagram-section-label {
  font-size:11px;
  color:var(--muted);
  margin:15px 0 8px;
}
.diagram-row {
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:16px;
  border:1px solid var(--line);
  border-bottom:0;
  min-height:76px;
}
.diagram-row+.diagram-row {
  border-radius:0;
}
.diagram-row:last-child {
  border-bottom:1px solid var(--line);
  border-radius:0 0 12px 12px;
}
.diagram-row strong {
  font-size:15px;
  display:block;
}
.diagram-row small {
  font-size:11px;
  color:var(--muted);
  display:block;
  margin-top:3px;
}
.diagram-group {
  border-radius:12px;
  overflow:hidden;
}
.diagram-group .diagram-row:last-child {
  border-radius:0 0 12px 12px;
}
.diagram-row>span {
  font-size:22px;
  color:var(--muted);
}
.diagram-event {
  background:var(--sage);
  padding:19px;
  border-radius:12px;
  margin-bottom:22px;
}
.diagram-event strong {
  display:block;
  font-size:21px;
  margin-top:7px;
}
.diagram-event small {
  font-size:10px;
}
.diagram-event .tag {
  display:inline-block;
  padding:3px 9px;
  margin-top:10px;
  background:#ffffff60;
  font-size:10px;
}
.diagram-members {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  font-size:11px;
  color:var(--muted);
}
.avatar {
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--terra);
  border:2px solid var(--cream);
  border-radius:50%;
  font-family:var(--mono);
  font-size:10px;
  color:var(--ink);
  flex-shrink:0;
}
.avatar+.avatar {
  margin-left:-14px;
}
.diagram-members .avatar+span:not(.avatar) {
  margin-left:5px;
}
.diagram-pills {
  display:flex;
  gap:6px;
  font-size:10px;
  margin-bottom:15px;
}
.diagram-pills span {
  padding:4px 9px;
  border:1px solid var(--line);
  border-radius:var(--pill);
}
.diagram-pills .selected {
  background:var(--club-tint);
  border-color:transparent;
  font-weight:700;
}
.discover-card {
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  padding:22px;
}
.discover-card strong {
  font-size:20px;
  display:block;
}
.discover-card p {
  font-size:12px;
  color:var(--muted);
  margin-top:10px;
}
.discover-card .tag {
  margin-bottom:12px;
  display:inline-block;
}
.diagram-note {
  font-size:10px;
  color:var(--muted);
  margin-top:20px;
  line-height:1.8;
}
.demo-caption {
  font-size:11px;
  color:var(--muted);
  margin-top:16px;
  line-height:1.8;
}
.demo-caption strong {
  color:var(--ink);
  font-weight:600;
}
.product-footnote {
  font-size:11px;
  color:var(--muted);
  max-width:620px;
  margin-top:30px;
}
.relationship {
  display:grid;
  grid-template-columns:1.08fr 1fr;
  gap:13%;
  align-items:start;
}
.relationship h2 {
  margin-top:22px;
}
.relationship .intro {
  font-size:15px;
  color:var(--muted);
  max-width:450px;
  margin-top:25px;
  line-height:1.95;
}
.relationship-lines {
  border-top:1px solid var(--line);
}
.relationship-line {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  padding:25px 0;
  border-bottom:1px solid var(--line);
}
.relationship-symbol {
  height:42px;
  width:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--slate);
}
.relationship-symbol svg {
  width:20px;
  height:20px;
  stroke:var(--ink);
  fill:none;
  stroke-width:1.7;
}
.relationship-line:nth-child(2) .relationship-symbol {
  background:var(--sage);
}
.relationship-line:nth-child(3) .relationship-symbol {
  background:var(--terra);
}
.relationship-line h3 {
  font-size:18px;
  margin-bottom:8px;
}
.relationship-line p {
  font-size:14px;
  color:var(--muted);
}
.download-section {
  padding-block:80px;
  border-block:1px solid var(--line);
}
.download-layout {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:11%;
}
.download-section h2 {
  font-family:var(--display);
  font-size:clamp(35px,3.6vw,48px);
  line-height:1.45;
  font-weight:900;
  margin-top:22px;
}
.download-section .intro {
  font-size:15px;
  color:var(--muted);
  max-width:395px;
  margin-top:23px;
}
.store-links {
  display:flex;
  flex-direction:column;
  gap:12px;
  max-width:350px;
  margin-top:30px;
}
.store-link {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:var(--ink);
  color:var(--cream);
  border:1px solid var(--ink);
  border-radius:12px;
  padding:13px 20px;
  min-height:70px;
  text-decoration:none;
  transition:background var(--duration);
}
.store-link:last-child {
  background:transparent;
  color:var(--ink);
}
.store-link:hover {
  background:#444850;
}
.store-link:last-child:hover {
  background:var(--soft);
}
.store-link small {
  font-size:10px;
  font-family:var(--mono);
  display:block;
}
.store-link strong {
  font-size:17px;
}
.store-note {
  font-size:11px;
  color:var(--muted);
  margin-top:14px;
}
.steps {
  list-style:none;
  padding:0;
  margin:0;
  counter-reset:steps;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 30px;
}
.steps li {
  border-top:1px solid var(--line);
  padding:24px 0;
  counter-increment:steps;
  min-width:0;
}
.steps li:before {
  content:'0' counter(steps);
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
}
.steps h3 {
  font-size:18px;
  margin:13px 0 7px;
}
.steps p {
  font-size:13px;
  color:var(--muted);
  line-height:1.85;
}
.faq {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:60px;
  padding-block:74px;
}
.faq h2 {
  font-size:27px;
  margin-top:20px;
}
.faq details {
  border-top:1px solid var(--line);
}
.faq details:last-child {
  border-bottom:1px solid var(--line);
}
summary {
  padding:22px 32px 22px 0;
  cursor:pointer;
  list-style:none;
  position:relative;
  font-size:16px;
  font-weight:600;
}
summary::-webkit-details-marker {
  display:none;
}
summary:after {
  content:'+';
  position:absolute;
  right:2px;
  top:17px;
  font-size:23px;
  font-weight:400;
}
details[open] summary:after {
  content:'−';
}
details>p {
  font-size:14px;
  color:var(--muted);
  padding:0 30px 24px 0;
  line-height:1.9;
}
.site-footer {
  padding:36px 0 30px;
  border-top:1px solid var(--line);
}
.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.footer-brand img {
  width:106px;
}
.footer-brand p {
  font-size:11px;
  color:var(--muted);
  margin-top:10px;
}
.footer-links {
  display:flex;
  gap:25px;
  flex-wrap:wrap;
}
.footer-links a {
  font-size:12px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.footer-links a:hover {
  text-decoration:underline;
}
.no-js-note {
  font-size:13px;
  color:var(--muted);
}
@media(max-width:1080px) {
  :root {
    --section:86px;
  }
  .brand-note {
    display:none;
  }
  .problem-list li {
    grid-template-columns:1fr 1.45fr;
    gap:20px 40px;
  }
  .label-list {
    grid-column:2;
    padding-top:0;
    margin-top:-10px;
  }
  .demo-stage {
    padding:25px 20px;
    min-height:460px;
  }
  .diagram {
    padding:22px 18px;
  }
  .relationship {
    gap:7%;
  }
  .download-layout {
    gap:7%;
  }
  .steps {
    gap:0 22px;
  }
  .product-head>p {
    max-width:280px;
  }
}
@media(max-width:700px) {
  :root {
    --gutter:24px;
    --section:64px;
  }
  .header-inner {
    min-height:70px;
    justify-content:space-between;
    gap:15px;
  }
  .brand img {
    width:106px;
  }
  .menu-toggle {
    display:block;
  }
  .js .site-menu {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:70px;
    background:var(--cream);
    padding:16px 24px 25px;
    box-shadow:0 10px 16px #2e313810;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .js .site-menu.is-open {
    display:flex;
  }
  .site-menu a {
    font-size:14px;
  }
  .site-menu .nav-download {
    justify-content:space-between;
    margin-top:8px;
  }
  .eyebrow {
    font-size:11px;
  }
  .quiet-link {
    font-size:12px;
  }
  .section-title {
    display:block;
    margin-bottom:30px;
  }
  .section-title h2 {
    font-size:30px;
    margin-top:20px;
  }
  .section-title .sub {
    font-size:14px;
    margin-top:17px;
  }
  .chapter {
    font-size:10px;
  }
  .problem-list li {
    display:block;
    padding:25px 0;
  }
  .problem-list .problem {
    font-size:22px;
    margin-bottom:18px;
  }
  .problem-list h3 {
    font-size:16px;
    margin-bottom:9px;
  }
  .problem-list p:not(.problem) {
    font-size:14px;
  }
  .label-list {
    margin-top:17px;
    gap:7px;
  }
  .tag {
    font-size:10px;
  }
  .product-head {
    display:block;
    margin-bottom:30px;
  }
  .product-head h2 {
    font-size:31px;
    margin-top:20px;
  }
  .product-head>p {
    font-size:13px;
    max-width:none;
    margin-top:20px;
  }
  .demo-stage {
    min-height:440px;
    padding:24px 18px;
    border-radius:20px;
  }
  .diagram {
    padding:22px 19px;
    min-height:367px;
  }
  .diagram-title {
    font-size:18px;
  }
  .diagram-row {
    padding:14px;
    min-height:74px;
  }
  .diagram-row strong {
    font-size:14px;
  }
  .diagram-row small {
    font-size:10px;
  }
  .diagram-note {
    font-size:10px;
  }
  .demo-caption {
    font-size:11px;
    margin-top:17px;
  }
  .product-footnote {
    font-size:10px;
    margin-top:20px;
  }
  .relationship {
    display:block;
  }
  .relationship h2 {
    font-size:31px;
  }
  .relationship .intro {
    font-size:14px;
    margin-top:21px;
    margin-bottom:28px;
  }
  .relationship-line {
    grid-template-columns:38px 1fr;
    gap:16px;
    padding:23px 0;
  }
  .relationship-symbol {
    width:36px;
    height:36px;
  }
  .relationship-line h3 {
    font-size:17px;
  }
  .relationship-line p {
    font-size:13px;
  }
  .download-section {
    padding-block:60px;
  }
  .download-layout {
    display:block;
  }
  .download-section h2 {
    font-size:35px;
    margin-top:20px;
  }
  .download-section .intro {
    font-size:14px;
    margin-top:20px;
  }
  .store-links {
    max-width:none;
    margin-top:26px;
  }
  .steps {
    margin-top:40px;
    gap:0 24px;
  }
  .steps li {
    padding:21px 0;
  }
  .steps h3 {
    font-size:16px;
    margin-top:10px;
  }
  .steps p {
    font-size:12px;
  }
  .faq {
    display:block;
    padding-block:60px;
  }
  .faq>div:first-child {
    margin-bottom:28px;
  }
  .faq h2 {
    font-size:27px;
    margin-top:14px;
  }
  .faq summary {
    font-size:15px;
  }
  .footer-inner {
    display:block;
  }
  .footer-links {
    margin-top:21px;
    gap:0 24px;
  }
  .footer-links a {
    font-size:11px;
  }
  .site-footer {
    padding-block:30px;
  }
  html:not(.js) .header-inner {
    flex-wrap:wrap;
    padding:14px 0;
  }
  html:not(.js) .menu-toggle {
    display:none;
  }
  html:not(.js) .site-menu {
    margin:0;
    gap:14px;
    flex-wrap:wrap;
  }
  html:not(.js) .site-menu a {
    font-size:12px;
  }
  html:not(.js) .site-menu .nav-download {
    border:0;
    padding:0;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    transition:none!important;
    animation:none!important;
  }
}
/* Narrow hero: recompose the illustration instead of covering its content. */
/* Without JavaScript, keep every product explanation available and hide tab controls. */
/* Show illustration status before the visual, including within a small viewport. */
.demo-stage {
  flex-direction: column;
  gap: 16px;
}
.demo-label {
  align-self: flex-start;
  font-size: 10px;
  color: var(--muted);
}

/* ── 03 你的樣子：自製頁三種版型 ───────────────────────────────
   骨架沿用 .section／.section-title／.chapter，只新增畫廊本身。
   ⚠️ 手機不是把桌機等比縮小：桌機三欄並排（比較用），
      手機改成可橫捲的卡列，每張仍保持完整長寬比、不裁切。 */
.identity {
  background: var(--soft);
}
.identity .section-title .sub {
  max-width: 46ch;
}
.identity-grid {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}
.identity-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* 底色與陰影只給圖，卡片本身不再畫一個框——
   一個畫面已經自帶邊界，外面再包一層框會變成「框中框」。 */
.identity-shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -28px rgba(46, 49, 56, .45);
}
.identity-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.identity-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.identity-card figcaption strong {
  font-size: 17px;
  letter-spacing: .01em;
}
.identity-card figcaption span {
  font: 400 13px/1.6 var(--mono);
  color: var(--muted);
  letter-spacing: .04em;
}
.identity-note {
  margin: var(--space-4) 0 0;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 60ch;
}
@media (max-width: 900px) {
  .identity-grid {
    grid-template-columns: repeat(3, 76vw);
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* 讓卡列出血到版心之外，捲動時看得出右邊還有 */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }
  .identity-grid::-webkit-scrollbar { display: none; }
  .identity-card { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .identity-grid { scroll-behavior: auto; }
}

/* 「2.0 即將推出」標記（2.0 上架後整個拿掉）：刻意不是腳註 —— 它必須和標題一起被看到。
   一個放在圖說裡的免責聲明，讀者會在看完標題與圖之後才讀到，那時判斷已經形成。 */
.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-3);
  padding: 6px 14px;
  border-radius: var(--pill);
  background: var(--club-tint);
  color: var(--ink);
  font: 400 12px/1.5 var(--mono);
  letter-spacing: .08em;
}
.badge-soon::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mustard);
}

/* 產品頁籤裡的真機截圖。與 .identity-shot 同一套處理：
   邊界由畫面自帶，外面不再包第二層框。 */
.shot-stage {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px -30px rgba(46, 49, 56, .5);
  max-width: 340px;
}
.shot-stage img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .shot-stage { max-width: 100%; margin-inline: auto; }
}