/* 太乙 AI 官网 — 苹果产品站气质：大字号、分区铺底、少描边。
   静态页，无构建。Light / Dark 跟系统。 */

:root {
  --page: #f5f5f7;
  --elevated: #ffffff;
  --sunken: #e8e8ed;
  --ink: #1d1d1f;
  --muted: #515154;
  --line: rgb(0 0 0 / 0.08);
  --chip: rgb(0 0 0 / 0.06);
  --header-bg: rgb(245 245 247 / 0.72);
  --focus: #417CDD;
  --closer: #1d1d1f;
  --closer-fg: #f5f5f7;
  --closer-muted: #a1a1a6;
  --btn-bg: #1d1d1f;
  --btn-fg: #f5f5f7;
  --btn-on-ink-bg: #f5f5f7;
  --btn-on-ink-fg: #1d1d1f;
  /* 唯一品牌色：Logo 石板蓝。只给「下载太乙 AI」。 */
  --accent: #404850;
  --accent-fg: #f5f5f7;
  --accent-on-ink: #889090;
  --accent-on-ink-fg: #1d1d1f;
  --tint: #5b7c99;
  --save: #2f6f5e;
  --radius: 22px;
  --radius-sm: 12px;
  --pill: 980px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --header-h: 56px;
  --shadow: 0 8px 40px rgb(29 29 31 / 0.06);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #101012;
    --elevated: #1c1c1e;
    --sunken: #2c2c2e;
    --ink: #f5f5f7;
    --muted: #a1a1a6;
    --line: rgb(255 255 255 / 0.1);
    --chip: rgb(255 255 255 / 0.08);
    --header-bg: rgb(16 16 18 / 0.72);
    --closer: #f5f5f7;
    --closer-fg: #1d1d1f;
    --closer-muted: #6e6e73;
    --btn-bg: #f5f5f7;
    --btn-fg: #1d1d1f;
    --btn-on-ink-bg: #1d1d1f;
    --btn-on-ink-fg: #f5f5f7;
    --accent: #889090;
    --accent-fg: #1d1d1f;
    --accent-on-ink: #404850;
    --accent-on-ink-fg: #f5f5f7;
    --tint: #8aa4bb;
    --save: #7ec9b0;
    --shadow: 0 8px 40px rgb(0 0 0 / 0.35);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, "SF Pro Text", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, "Segoe UI", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--ink);
}
p { margin: 0 0 12px; }
a { color: var(--ink); }
code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--chip);
  border-radius: 6px;
  padding: 1px 6px;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1120px; margin: 0 auto; padding: 0 28px; }

.page-stack { padding-bottom: 80px; }
.prose-narrow { max-width: 680px; margin-inline: auto; }

::selection {
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: 8px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
#main:focus,
#main:focus-visible { outline: none; }

@media (forced-colors: active) {
  :focus-visible, .skip-link:focus { outline: 2px solid CanvasText; }
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--header-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap-wide {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 16px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex: none;
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  .brand-mark {
    filter: invert(1);
    mix-blend-mode: screen;
  }
}
.site-nav {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--pill);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition-property: color, background-color;
  transition-duration: 150ms;
  transition-timing-function: var(--ease);
}
.site-nav a.active {
  color: var(--ink);
  background: var(--chip);
}

@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--page);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: var(--pill);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition-property: transform, opacity;
  transition-duration: 150ms;
  transition-timing-function: var(--ease);
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-on-ink { background: var(--btn-on-ink-bg); color: var(--btn-on-ink-fg); }
.btn-accent { background: var(--accent); color: var(--accent-fg); }
.closer .btn-accent {
  background: var(--accent-on-ink);
  color: var(--accent-on-ink-fg);
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.link-arrow::after {
  content: " →";
  display: inline-block;
  transition: transform 180ms var(--ease);
}

@media (hover: hover) {
  .site-nav a:hover { color: var(--ink); }
  .btn-primary:hover,
  .btn-on-ink:hover,
  .btn-accent:hover { opacity: 0.88; }
  .btn-secondary:hover { background: var(--chip); }
  .link-arrow:hover::after { transform: translateX(4px); }
  .notice-link:hover { color: var(--ink); }
  .tile:hover { transform: translateY(-2px); }
  .site-footer a:hover { color: var(--ink); }
}

/* Hero */
.hero {
  padding: 72px 0 24px;
  background:
    radial-gradient(720px 280px at 50% 0%, rgb(91 124 153 / 0.16), transparent 70%),
    var(--page);
  text-align: center;
}
.hero h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.25;
  letter-spacing: -0.035em;
  margin: 0;
  white-space: nowrap;
}

/* Notice */
.notice-band {
  border-block: 1px solid var(--line);
  padding: 14px 0;
}
.notice-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}
.notice-link::after {
  content: " →";
}

/* Bands */
.band { padding: 64px 0; }
.band-elevated {
  background: linear-gradient(180deg, var(--elevated), color-mix(in srgb, var(--tint) 8%, var(--elevated)));
}
.section-head {
  max-width: 28em;
  margin: 0 0 48px;
}
.section-head h2,
.list-title {
  font-size: clamp(32px, 4.6vw, 48px);
  line-height: 1.12;
  letter-spacing: -0.035em;
  margin-bottom: 12px;
}
.section-head h2::after,
.list-title::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 14px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--tint), transparent);
}
.section-head p {
  margin: 0;
  font-size: 19px;
  color: var(--muted);
  text-wrap: pretty;
}

/* Bento — compact equal cards, no empty vertical fill */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.bento-3 { grid-template-columns: repeat(3, 1fr); }
.bento-2 { grid-template-columns: repeat(2, 1fr); }
.bento-cell {
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}
.bento-cell b {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 6px;
}
.bento-cell span {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.bento-lead {
  background: linear-gradient(160deg, #2c3640 0%, #5b7c99 100%);
  color: var(--page);
  box-shadow: var(--shadow);
}
.bento-lead span { color: var(--page); opacity: 0.78; }
.bento-tint { background: var(--sunken); }
.bento-plain { background: var(--elevated); box-shadow: var(--shadow); }
.bento-wide { justify-content: flex-start; }
@media (prefers-color-scheme: dark) {
  .hero {
    background:
      radial-gradient(720px 280px at 50% 0%, rgb(138 164 187 / 0.14), transparent 70%),
      var(--page);
  }
  .bento-lead {
    background: linear-gradient(160deg, #1c2228 0%, #4a6278 100%);
    color: var(--closer-fg);
  }
  .bento-lead span { color: var(--closer-fg); opacity: 0.7; }
}

/* Flow */
.flow {
  list-style: none;
  margin: 0;
  padding: 0;
}
.flow-item {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 8px 28px;
  align-items: baseline;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.flow-item:last-child { border-bottom: 1px solid var(--line); }
.flow-num {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.9;
  color: var(--tint);
  opacity: 0.55;
}
.flow-item h3 {
  font-size: 28px;
  margin-bottom: 8px;
}
.flow-item p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

/* Agents */
.agent-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.agent-col h3 {
  font-size: clamp(32px, 4vw, 44px);
  margin-bottom: 14px;
}
.agent-col p {
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  max-width: 18em;
  text-wrap: pretty;
}
.billing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-top: 0;
}
.billing-card {
  background: var(--elevated);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--tint);
}
.billing p {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  white-space: nowrap;
}
.billing strong {
  color: var(--ink);
  font-weight: 600;
  margin-inline-end: 0.35em;
}
@media (max-width: 640px) {
  .billing p { white-space: normal; }
}

/* Feature rows */
.list-title { margin-bottom: 36px; }
.feature-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.feature-rows li {
  display: grid;
  grid-template-columns: minmax(8rem, 0.4fr) 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.feature-rows li:last-child { border-bottom: 1px solid var(--line); }
.feature-rows b {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.feature-rows span {
  color: var(--muted);
  font-size: 17px;
}

/* Stats */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0;
}
.stats div { margin: 0; }
.stats dt {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.stats dd {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* Closer: one color-block, opposite of the page */
.closer {
  background: linear-gradient(165deg, #1d1d1f 0%, #2a3642 100%);
  color: var(--closer-fg);
  padding: 72px 0;
  text-align: center;
}
.closer-inner { max-width: 640px; }
.closer h2 {
  color: var(--closer-fg);
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: -0.04em;
  margin-bottom: 12px;
}
.closer p {
  color: var(--closer-muted);
  font-size: 19px;
  margin: 0 0 32px;
}
.closer .platforms {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--closer-muted);
}

/* Inner pages */
.page-head {
  padding: 88px 0 20px;
  text-align: center;
}
.page-head h1 {
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.04em;
  line-height: 1.08;
  margin-bottom: 14px;
}
.page-head .lede {
  color: var(--muted);
  font-size: 19px;
  max-width: 22em;
  margin: 0 auto;
  text-wrap: pretty;
}

.section { padding: 40px 0; }
.section-tight { padding-top: 16px; }

/* Download */
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tile {
  background: var(--elevated);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  transition: transform 200ms var(--ease);
}
.tile h3 {
  font-size: 17px;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.tile p {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 14px;
}
.dl-card { display: flex; flex-direction: column; min-height: 0; }
.dl-card .dl-btn { margin-top: auto; align-self: flex-start; }
.dl-card.recommended {
  background: var(--ink);
  color: var(--page);
}
.dl-card.recommended h3,
.dl-card.recommended .meta,
.dl-card.recommended p,
.dl-card.recommended .dl-updated { color: var(--page); }
.dl-card.recommended p,
.dl-card.recommended .meta,
.dl-card.recommended .dl-updated { opacity: 0.72; }
.dl-card.recommended .btn-primary,
.dl-card.recommended .btn-secondary {
  background: var(--page);
  color: var(--ink);
  box-shadow: none;
}
.dl-card.recommended .tag {
  background: rgb(255 255 255 / 0.16);
  color: var(--page);
}
@media (prefers-color-scheme: dark) {
  .dl-card.recommended {
    background: var(--closer);
    color: var(--closer-fg);
  }
  .dl-card.recommended h3,
  .dl-card.recommended .meta,
  .dl-card.recommended p,
  .dl-card.recommended .dl-updated { color: var(--closer-fg); }
  .dl-card.recommended .btn-primary,
  .dl-card.recommended .btn-secondary {
    background: var(--closer-fg);
    color: var(--closer);
    box-shadow: none;
  }
}
.dl-card .meta {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.dl-card .dl-updated {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dl-latest {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-top: 22px;
  font-variant-numeric: tabular-nums;
}
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--chip);
  border-radius: var(--pill);
  padding: 2px 8px;
  margin-inline-start: 8px;
  vertical-align: middle;
}

/* Entries / prose */
.entry {
  border-top: 1px solid var(--line);
  padding: 36px 0;
}
.entry:first-of-type { border-top: none; }
.entry .entry-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.entry h3 {
  font-size: 24px;
  letter-spacing: -0.03em;
}
.entry .entry-date {
  font-size: 14px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.entry p { color: var(--muted); }
.entry ul {
  margin: 10px 0 0;
  padding-inline-start: 18px;
  color: var(--muted);
}
.entry li { margin-bottom: 6px; }
.entry a,
.prose a {
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
  text-decoration-skip-ink: auto;
}

.prose h2 {
  font-size: 28px;
  letter-spacing: -0.03em;
  margin: 48px 0 14px;
}
.prose ul {
  color: var(--muted);
  padding-inline-start: 18px;
}
.prose li { margin-bottom: 8px; }

/* Price comparison — cell stacks our price over official */
.price-note {
  margin: 8px auto 0;
  max-width: 32em;
  color: var(--muted);
  font-size: 14px;
  text-wrap: pretty;
}
.price-board {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.price-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.price-table th {
  text-align: left;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.price-table th:last-child,
.price-table td:last-child { padding-right: 0; text-align: right; }
.price-table td {
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.price-table .model {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.price-table .amt-us {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.price-table .amt-off {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}
.price-table .amt-empty .amt-us {
  font-weight: 400;
  color: var(--muted);
}
.price-table .save {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--save);
}
.price-foot {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 14px;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .price-table { min-width: 0; }
  .price-table thead { display: none; }
  .price-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
  }
  .price-table td {
    padding: 0;
    border: 0;
    text-align: left;
  }
  .price-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
  }
  .price-table .model-cell { grid-column: 1 / -1; }
  .price-table .save-cell { grid-column: 1 / -1; }
  .price-table th:last-child,
  .price-table td:last-child { text-align: left; padding-right: 0; }
  .price-table .model { font-size: 20px; }
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 48px 0 56px;
  font-size: 13px;
  color: var(--muted);
  background: var(--page);
}
.site-footer .foot-cols {
  display: flex;
  gap: 56px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.foot-brand { margin-inline-end: auto; }
.site-footer .foot-col b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 10px;
}
.site-footer .foot-col a {
  display: flex;
  align-items: center;
  min-height: 32px;
  color: var(--muted);
  text-decoration: none;
}
.site-footer .foot-legal {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer .foot-legal a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-position: from-font;
  text-decoration-thickness: from-font;
}

/* Reveal */
html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: var(--ease);
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .btn:active,
  .tile:hover { transform: none; }
}

main { min-height: 50vh; }

@media (max-width: 860px) {
  .hero {
    padding: 48px 0 16px;
  }
  .hero h1 { white-space: normal; }
  .bento {
    grid-template-columns: 1fr 1fr;
  }
  .bento-3,
  .bento-2 {
    grid-template-columns: 1fr;
  }
  .agent-split,
  .billing,
  .stats,
  .dl-grid {
    grid-template-columns: 1fr;
  }
  .flow-item {
    grid-template-columns: 3.2rem 1fr;
  }
  .flow-num { font-size: 40px; }
  .feature-rows li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .band { padding: 48px 0; }
  .closer { padding: 56px 0; }
}

@media (max-width: 760px) {
  .site-header { height: auto; }
  .site-header .wrap-wide {
    flex-wrap: wrap;
    padding-block: 8px;
    row-gap: 4px;
  }
  .site-nav {
    margin-inline-start: 0;
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  .hero h1 { font-size: 26px; }
  .dl-card .dl-btn { align-self: stretch; text-align: center; }
}