/* Homepage. Tokens, header and footer come from site.css. */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
main h2 { font-weight:500; letter-spacing:-.02em; }

.hero { padding-top:112px; padding-bottom:64px; }
.hero h1 { max-width:940px; margin:0; font-size:clamp(42px,6.4vw,76px); line-height:1.02; letter-spacing:-.035em; font-weight:500; }
:lang(zh) .hero h1 { line-height:1.18; letter-spacing:-.01em; }
.hero .lede { max-width:580px; margin:32px 0 0; color:var(--sub); font-size:19px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px; margin-top:40px; }
.hero-note { color:var(--muted); font:13px/1.5 var(--mono); }

.compare { padding-bottom:112px; }
.compare-card { border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden; }
.compare-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px; padding:18px 28px; border-bottom:1px solid var(--line); }
.compare-head h2 { margin:0; font-size:16px; letter-spacing:0; }
.compare-head .mono { color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.compare-scroll { position:relative; overflow-x:auto; }
.compare table { width:100%; min-width:680px; border-collapse:collapse; font-size:15px; }
.compare thead th { padding:14px 12px; color:var(--muted); font:400 12px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; text-align:left; white-space:nowrap; }
.compare th:first-child, .compare td:first-child { padding-left:28px; }
.compare th:last-child, .compare td:last-child { padding-right:28px; }
.compare tbody tr { border-top:1px solid var(--line-soft); }
.compare tbody th { padding:16px 12px; text-align:left; font-weight:500; white-space:nowrap; }
.compare tbody td { padding:16px 12px; font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.compare .r { text-align:right; }
.compare .bar-col { width:30%; }
.compare .bar { display:block; height:10px; border-radius:3px; background:var(--accent); }
.compare .profit { color:var(--accent-text); }
.compare .dim { color:var(--muted); }

.feature { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; padding-top:64px; padding-bottom:64px;
  /* Hairlines aligned with the content column, not the padded box. */
  background:linear-gradient(var(--line-soft),var(--line-soft)) no-repeat left var(--gutter) bottom / calc(100% - 2 * var(--gutter)) 1px; }
.feature:first-child { background:linear-gradient(var(--line-soft),var(--line-soft)) no-repeat left var(--gutter) top / calc(100% - 2 * var(--gutter)) 1px, linear-gradient(var(--line-soft),var(--line-soft)) no-repeat left var(--gutter) bottom / calc(100% - 2 * var(--gutter)) 1px; }
.features > .feature { max-width:var(--wrap); }
.feature-label { display:flex; gap:16px; align-items:baseline; margin:0; font-size:22px; font-weight:500; }
.feature-label .mono { color:var(--faint); font-size:14px; }
.feature h2 { margin:0; font-size:30px; line-height:1.2; }
:lang(zh) .feature h2 { line-height:1.4; letter-spacing:0; }
.feature p { max-width:580px; margin:16px 0 0; color:var(--sub); }
.feature .feature-link { margin-top:20px; font-size:15px; }
.feature .feature-link a { color:var(--accent-text); text-decoration:none; }
.feature .feature-link a:hover { text-decoration:underline; }
.feature-split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; align-items:start; }
.brief-shot { margin:0; }
.brief-shot img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:14px; }

.shot { padding-top:112px; padding-bottom:112px; }
.shot img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:14px; }

.section-title { margin:0 0 32px; font-size:36px; line-height:1.15; }
.section-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:12px 24px; margin-bottom:28px; }
.section-head .section-title { margin:0; }
.section-head p { margin:0; color:var(--muted); font-size:15px; }
.split-section { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px; padding-bottom:112px; }
.split-section .section-title { margin:0; }
.split-section h2 { margin:0; font-size:36px; line-height:1.15; }
.fact-list { margin:0; padding:0; list-style:none; border-top:1px solid var(--line); }
.fact-list li { display:flex; justify-content:space-between; gap:24px; padding:18px 0; border-bottom:1px solid var(--line); }
.fact-list li span + span { color:var(--muted); text-align:right; }

#pricing { padding-bottom:112px; }
.plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line); }
.plan { padding:32px; background:var(--bg); }
.plan.pro { background:var(--surface); }
.plan .eyebrow { margin:0; }
.plan .price { margin:8px 0 18px; font-size:44px; font-weight:500; letter-spacing:-.02em; }
.plan .price small { color:var(--muted); font-size:17px; font-weight:400; letter-spacing:0; }
.plan p:last-child { margin:0; color:var(--sub); }
.fine { margin:16px 0 0; color:var(--muted); font-size:14px; }

#tools { padding-bottom:112px; }
.tool-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--line); }
.tool-cards a { display:flex; flex-direction:column; gap:10px; min-height:180px; padding:28px; background:var(--bg); text-decoration:none; }
.tool-cards a:hover { background:var(--surface); color:var(--text); }
.tool-cards strong { font-size:20px; font-weight:500; line-height:1.3; }
.tool-cards span { color:var(--sub); font-size:15px; }
.tool-cards em { margin-top:auto; color:var(--accent-text); font:normal 13px/1.4 var(--mono); }

.closing { padding-top:24px; padding-bottom:120px; text-align:center; }
.closing h2 { margin:0 0 28px; font-size:clamp(32px,4.4vw,52px); line-height:1.1; }

@media (max-width:860px) {
  .hero { padding-top:64px; padding-bottom:48px; }
  .hero .lede { font-size:17px; }
  .compare { padding-bottom:72px; }
  .compare-head { padding:16px 20px; }
  .compare th:first-child, .compare td:first-child { padding-left:20px; }
  .feature, .split-section { grid-template-columns:minmax(0,1fr); gap:16px; }
  .feature { padding-top:44px; padding-bottom:44px; }
  .feature h2 { font-size:25px; }
  .feature-split { grid-template-columns:minmax(0,1fr); }
  .compare .bar-col { display:none; }
  .compare table { min-width:0; }
  .compare tbody th, .compare tbody td, .compare thead th { padding-left:8px; padding-right:8px; }
  .brief-shot { max-width:320px; }
  .shot { padding-top:72px; padding-bottom:72px; }
  .split-section, #pricing, #tools { padding-bottom:72px; }
  .section-title, .split-section h2 { font-size:29px; }
  .plans, .tool-cards { grid-template-columns:minmax(0,1fr); }
  .fact-list li { flex-direction:column; gap:2px; }
  .fact-list li span + span { text-align:left; }
}