/* Pricing page (apps/site/drafts/pricing/). Loaded only by that page, after site.css and home.css,
   and only when the build publishes it (drafts/pricing/README.md). The pages take the home page's
   look (owner 2026-10-19: 「价钱的页面，统一下设计风格，保持和落地页一致」): home.css supplies the header,
   the pill buttons, the eyebrow and lead type and the --apple-grey / --hush / --ink-strong tokens;
   this file only lays out the cards and the table in the same quiet system (grey ground, white
   cards with large radii, no rules or accent bars).
   The Monthly / Annual switch is two radio inputs and the sibling selectors below, so the page
   needs no script and no inline style (the site's CSP allows neither). Annual is the default. */

main#main>section.pricing{background:var(--apple-grey)}
/* The small print sits on white below the grey, as the home page alternates its grounds. */
main#main>section.pricing-notes{padding-block:56px 80px;background:#fff}
.pricing-notes .pricing-note:first-child{margin-top:0}
.pricing-body{border:0;margin:0;padding:0;min-width:0}

/* The head, centred like the home page's section heads; the page's one h1 takes their h2 type. */
.pricing-head h1{margin:0 0 18px;font-size:clamp(34px,3.8vw,54px);line-height:1.08;letter-spacing:-.035em;color:var(--ink-strong);font-weight:700;text-wrap:balance}
.pricing-head .section-lead{margin:0 auto;max-width:640px}
:lang(zh-Hans) .pricing-head h1,:lang(zh-Hant) .pricing-head h1,:lang(ja) .pricing-head h1{letter-spacing:0}
:lang(ja) .pricing-head h1{word-break:auto-phrase}

/* The two radios stay in the tab order and are read out, but are not drawn: their labels are. */
.term-input{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;pointer-events:none}
.term-switch{display:flex;width:max-content;max-width:100%;margin:0 auto 48px;padding:4px;background:rgba(0,0,0,.05);border-radius:980px}
.term-switch label{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 22px;border-radius:980px;font-size:15px;font-weight:700;color:#6e6e73;cursor:pointer}
.term-switch .save{padding:1px 10px;border-radius:980px;background:#e3f1e3;color:#1f5d28;font-size:12px;font-weight:700;line-height:1.7}

#term-annual:checked~.term-switch label[for="term-annual"],
#term-monthly:checked~.term-switch label[for="term-monthly"]{background:#fff;color:var(--ink-strong);box-shadow:0 1px 3px rgba(0,0,0,.12)}
#term-annual:focus-visible~.term-switch label[for="term-annual"],
#term-monthly:focus-visible~.term-switch label[for="term-monthly"]{outline:3px solid #72baff;outline-offset:2px}

/* One term shows at a time. */
#term-annual:checked~.plans .monthly{display:none}
#term-monthly:checked~.plans .annual{display:none}

/* The cards: the home page's white cards on grey, 22px radii, no borders. */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:38px 34px 32px;border:0;border-radius:22px;background:#fff}
.plan.popular{box-shadow:0 0 0 2px var(--blue)}
.plan h2{margin:0 0 10px;font-size:26px;letter-spacing:-.025em;color:var(--ink-strong)}
.plan .badge{position:absolute;top:-13px;left:34px;margin:0;padding:2px 14px;border-radius:980px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.8;text-transform:uppercase}
.plan-for{min-height:3.4em;margin:0 0 24px;color:#6e6e73;font-size:15px;line-height:1.6}

.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 12px}
.price .amount{font-size:46px;font-weight:700;line-height:1.05;letter-spacing:-.04em;color:var(--ink-strong)}
.price .unit{color:var(--hush);font-size:14px}
/* Option A (owner 2026-10-18): the per-month figure leads; the yearly total is the line under it. */
.billed{margin:0;color:#6e6e73;font-size:14px}
.ref-price{margin:-6px 0 10px;color:var(--ink-strong);font-size:15px;font-weight:700}
/* Starter's "3 users included": noticeable, never louder than the price (owner 2026-10-18). */
.seats{display:flex;align-items:center;gap:6px;margin:8px 0 0;color:#6e6e73;font-size:15px;font-weight:700}
.seats-icon{flex:none}
.example{margin:2px 0 0;color:#6e6e73;font-size:14px}
.ai-band{margin:22px 0 24px;padding:16px 18px;border-radius:14px;background:var(--apple-grey)}
.ai-band p{margin:0}
.ai-label{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.ai-points{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink-strong)}
.ai-model{font-size:14px;color:#6e6e73}
.plan .button{justify-content:center;margin-bottom:28px}

.plan ul{margin:0;padding:24px 0 0;border-top:1px solid rgba(0,0,0,.06);list-style:none}
.plan li{position:relative;margin:0 0 12px;padding-left:24px;font-size:15px;line-height:1.6;color:var(--ink-strong)}
.plan li::before{content:'';position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg)}

/* "Compare all features": a white pill on the grey, the home page's button shape. */
.compare-link{margin:48px 0 0;text-align:center}
.compare-link a{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:980px;background:#fff;color:var(--blue);font-size:16px;font-weight:700;text-decoration:none}
.compare-link a:hover{color:var(--hover)}

.pricing-note{max-width:760px;margin:36px auto 0;color:#6e6e73;font-size:14px;line-height:1.6;text-align:center}
.pricing-note+.pricing-note{margin-top:8px}
.enterprise{margin:36px auto 0;text-align:center;font-weight:700;color:var(--ink-strong)}
.enterprise a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* The comparison page (drafts/pricing/compare/). Desktop: one white table card, plan headers sticky.
   Phone: the plan tabs (radio inputs, no script) show one plan's column. */
.back-link{margin:0 0 18px;font-size:15px}
.back-link a{color:var(--blue)}
.cmp-input{position:absolute;width:1px;height:1px;margin:-1px;opacity:0;pointer-events:none}
.cmp-tabs{display:none}
.cmp{width:100%;max-width:1180px;margin:0 auto;border-collapse:separate;border-spacing:0;border:0;border-radius:22px;background:#fff;font-size:15px}
.cmp th,.cmp td{padding:14px 22px;text-align:left;vertical-align:middle;border-bottom:1px solid rgba(0,0,0,.06);font-weight:400;color:var(--ink-strong)}
.cmp thead th{position:sticky;top:0;z-index:1;background:#fff;border-bottom:1px solid rgba(0,0,0,.12);vertical-align:bottom;padding-top:22px}
.cmp thead th:first-child{border-top-left-radius:22px}
.cmp thead th:last-child{border-top-right-radius:22px}
.cmp tbody:last-child tr:last-child>*{border-bottom:0}
.cmp tbody:last-child tr:last-child>:first-child{border-bottom-left-radius:22px}
.cmp tbody:last-child tr:last-child>:last-child{border-bottom-right-radius:22px}
.cmp thead th.popular{box-shadow:inset 0 3px 0 var(--blue)}
.cmp-corner{color:var(--hush);font-size:13px}
.cmp-name{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink-strong)}
.cmp-price,.cmp-unit{display:block;color:#6e6e73;font-size:13px}
.cmp-group th{padding-top:24px;background:#fafafb;color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.cmp tbody th[scope="row"]{color:var(--ink-strong)}
.cmp tbody.ai tr:not(.cmp-group) th,.cmp tbody.ai td{background:#f3f8fc;font-weight:700}
.cmp .yes{color:var(--blue);font-weight:700;font-size:18px}
.cmp .no{color:#a1a1a6}
.compare-cta{margin:40px 0 0;text-align:center}

@media(max-width:1000px){
  .plans{grid-template-columns:1fr;max-width:520px;margin-inline:auto;gap:36px}
  .plan-for{min-height:0}
}
@media(max-width:760px){
  .term-switch{margin-bottom:40px}
  .term-switch label{padding-inline:14px;font-size:14px}
  .plan{padding:34px 24px 28px}
  .plan .badge{left:24px}
  .price .amount{font-size:40px}
}

/* Phone: one plan column at a time, picked by the tabs. */
@media(max-width:760px){
  .cmp-tabs{position:sticky;top:0;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 0;margin:0 0 12px;background:var(--apple-grey)}
  .cmp-tabs label{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:980px;background:#fff;font-size:14px;font-weight:700;color:var(--ink-strong);cursor:pointer}
  #cmp-starter:checked~.cmp-tabs label[for="cmp-starter"],
  #cmp-professional:checked~.cmp-tabs label[for="cmp-professional"],
  #cmp-business:checked~.cmp-tabs label[for="cmp-business"]{background:var(--ink-strong);color:#fff}
  #cmp-starter:focus-visible~.cmp-tabs label[for="cmp-starter"],
  #cmp-professional:focus-visible~.cmp-tabs label[for="cmp-professional"],
  #cmp-business:focus-visible~.cmp-tabs label[for="cmp-business"]{outline:3px solid #72baff;outline-offset:2px}
  #cmp-starter:checked~.cmp .c-professional,#cmp-starter:checked~.cmp .c-business,
  #cmp-professional:checked~.cmp .c-starter,#cmp-professional:checked~.cmp .c-business,
  #cmp-business:checked~.cmp .c-starter,#cmp-business:checked~.cmp .c-professional{display:none}
  .cmp thead th{position:static}
  .cmp th,.cmp td{padding:12px 14px}
  .cmp tbody td{text-align:right}
}