/* Aonau components — direction A. Requires tokens.css first. No external fonts. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--ao-font);font-size:var(--ao-fs-md);line-height:var(--ao-lh);color:var(--ao-ink);background:var(--ao-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:var(--ao-accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ao-accent-hover)}
:focus-visible{outline:2px solid var(--ao-accent);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.ao-wrap{max-width:var(--ao-max);margin:0 auto;padding:0 var(--ao-s5)}
@media (max-width:480px){.ao-wrap{padding:0 1.125rem}}
.ao-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.ao-header{border-bottom:1px solid var(--ao-line);background:var(--ao-bg)}
.ao-header .ao-wrap{display:flex;align-items:center;gap:var(--ao-s3);min-height:3.75rem}
.ao-brand{display:inline-flex;align-items:center;gap:.6rem;color:var(--ao-ink);text-decoration:none;font-weight:700;letter-spacing:-.01em}
.ao-brand:hover{color:var(--ao-ink)}
.ao-brand img{width:28px;height:28px;border-radius:7px}
.ao-wordmark{font-size:1.0625rem;white-space:nowrap}
.ao-wordmark .dot{color:var(--ao-ink-3);font-weight:400;margin:0 .32em}
.ao-wordmark .zh{font-weight:500}
.ao-header-end{margin-left:auto;display:flex;align-items:center;gap:var(--ao-s2)}
.ao-btn-quiet{font:inherit;font-size:var(--ao-fs-xs);color:var(--ao-ink-2);background:transparent;border:1px solid var(--ao-line-strong);border-radius:var(--ao-radius-pill);padding:.35rem .85rem;cursor:pointer;line-height:1.2}
.ao-btn-quiet:hover{color:var(--ao-ink);border-color:var(--ao-ink-3)}

/* ---------- tags / eyebrow ---------- */
.ao-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--ao-s4);padding:0;list-style:none}
.ao-tag{font-size:var(--ao-fs-xs);color:var(--ao-ink-2);background:var(--ao-bg-subtle);border:1px solid var(--ao-line);border-radius:var(--ao-radius-pill);padding:.2rem .7rem;line-height:1.5}

/* ---------- buttons ---------- */
.ao-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font:inherit;font-size:var(--ao-fs-sm);font-weight:600;line-height:1.2;border-radius:var(--ao-radius);padding:.85rem 1.25rem;text-decoration:none;cursor:pointer;border:1px solid transparent;min-height:44px;transition:background-color .15s ease}
.ao-btn-primary{background:var(--ao-accent);color:var(--ao-on-accent)}
.ao-btn-primary:hover{background:var(--ao-accent-hover);color:var(--ao-on-accent)}
.ao-btn-secondary{background:transparent;color:var(--ao-ink);border-color:var(--ao-line-strong)}
.ao-btn-secondary:hover{color:var(--ao-ink);border-color:var(--ao-ink-3)}
.ao-btn-block{width:100%}
.ao-actions{display:flex;flex-wrap:wrap;gap:var(--ao-s3);margin-top:var(--ao-s5)}
@media (max-width:480px){.ao-actions .ao-btn{flex:1 1 100%}}

/* ---------- hero ---------- */
.ao-hero{padding:var(--ao-s6) 0 var(--ao-s7)}
.ao-hero .ao-wrap{display:grid;gap:var(--ao-s6);align-items:center}
@media (min-width:920px){.ao-hero{padding:var(--ao-s8) 0}.ao-hero .ao-wrap{grid-template-columns:1fr 1.02fr;gap:var(--ao-s7)}}
.ao-h1{font-size:var(--ao-fs-h1);line-height:var(--ao-lh-tight);letter-spacing:-.025em;font-weight:700;margin:0 0 var(--ao-s4);text-wrap:balance}
.ao-lead{font-size:var(--ao-fs-md);color:var(--ao-ink-2);margin:0;max-width:var(--ao-max-text)}
@media (min-width:920px){.ao-lead{font-size:1.125rem}}

/* ---------- product mock (illustrative) ---------- */
.ao-mock{margin:0}
.ao-window{background:var(--ao-surface);border:1px solid var(--ao-line);border-radius:var(--ao-radius-lg);box-shadow:var(--ao-shadow);overflow:hidden}
.ao-window-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border-bottom:1px solid var(--ao-line);background:var(--ao-bg-subtle)}
.ao-window-bar i{width:10px;height:10px;border-radius:50%;background:var(--ao-line-strong);display:block}
.ao-url{flex:1;margin-left:.4rem;font-size:.75rem;color:var(--ao-ink-3);background:var(--ao-bg);border:1px solid var(--ao-line);border-radius:6px;padding:.2rem .6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ao-ext{width:20px;height:20px;border-radius:5px;flex:none}
.ao-window-body{padding:1.4rem 1.5rem 1.6rem;position:relative}
.ao-mock figcaption{font-size:.75rem;color:var(--ao-ink-3);margin-top:.6rem;text-align:center}
.ao-toolbar{display:inline-flex;gap:2px;padding:3px;background:var(--ao-ink);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ao-toolbar span{font-size:.72rem;font-weight:600;color:var(--ao-bg);padding:.28rem .55rem;border-radius:5px;white-space:nowrap}
.ao-toolbar span.on{background:rgba(255,255,255,.16)}
@media (prefers-color-scheme:dark){.ao-toolbar span.on{background:rgba(0,0,0,.12)}}
.ao-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--ao-ink-2);background:var(--ao-surface);border:1px solid var(--ao-line);border-radius:var(--ao-radius-pill);padding:.25rem .65rem;box-shadow:var(--ao-shadow)}
.ao-chip b{width:6px;height:6px;border-radius:50%;background:var(--ao-ink-3);display:block}
/* text skeleton for mock articles */
.ao-mock-h{font-weight:700;font-size:1.05rem;margin:0 0 .7rem;line-height:1.3}
.ao-mock-p{font-size:.86rem;color:var(--ao-ink-2);line-height:1.75;margin:0 0 .7rem}
.ao-mock-p mark{background:var(--ao-accent-tint);color:var(--ao-ink);border-radius:3px;padding:.05em .1em;box-shadow:inset 0 -2px 0 rgba(0,0,0,0)}
.ao-skel{height:.55rem;border-radius:4px;background:var(--ao-line);margin:.55rem 0}

/* ---------- sections ---------- */
.ao-section{padding:var(--ao-s7) 0;border-top:1px solid var(--ao-line)}
.ao-section.subtle{background:var(--ao-bg-subtle)}
.ao-h2{font-size:var(--ao-fs-h2);line-height:1.25;letter-spacing:-.015em;margin:0 0 var(--ao-s5);font-weight:700}
.ao-grid-2{display:grid;gap:var(--ao-s6)}
@media (min-width:920px){.ao-grid-2{grid-template-columns:1fr 1fr;gap:var(--ao-s7)}.ao-grid-2.form{grid-template-columns:1.35fr 1fr}}

/* feature list */
.ao-features{list-style:none;margin:0;padding:0;counter-reset:f;display:grid;gap:var(--ao-s4)}
.ao-features li{counter-increment:f;display:grid;grid-template-columns:2.25rem 1fr;gap:.25rem;color:var(--ao-ink-2);padding-bottom:var(--ao-s4);border-bottom:1px solid var(--ao-line)}
.ao-features li:last-child{border-bottom:0;padding-bottom:0}
.ao-features li::before{content:counter(f,decimal-leading-zero);font-family:var(--ao-mono);font-size:.8rem;color:var(--ao-ink-3);padding-top:.2rem}

/* compare table */
.ao-table{width:100%;border-collapse:collapse;font-size:var(--ao-fs-sm)}
.ao-table th,.ao-table td{text-align:left;vertical-align:top;padding:.7rem .6rem;border-bottom:1px solid var(--ao-line)}
.ao-table th{font-size:.75rem;font-weight:600;color:var(--ao-ink-3);text-transform:uppercase;letter-spacing:.04em}
.ao-table td{color:var(--ao-ink-2)}
.ao-table td:first-child{color:var(--ao-ink);font-weight:600}
.ao-table tr.ours td{background:var(--ao-surface)}
.ao-table tr.ours td:first-child{box-shadow:inset 3px 0 0 var(--ao-ink)}
.ao-table tbody tr:last-child td{border-bottom:0}
@media (max-width:640px){
  .ao-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ao-table,.ao-table tbody,.ao-table tr,.ao-table td{display:block;width:100%}
  .ao-table tr{padding:.8rem 0;border-bottom:1px solid var(--ao-line)}
  .ao-table tr.ours{padding:.8rem .9rem;border:1px solid var(--ao-line-strong);border-radius:var(--ao-radius);background:var(--ao-surface);margin-top:.6rem}
  .ao-table tr.ours td{background:none}.ao-table tr.ours td:first-child{box-shadow:none}
  .ao-table td{border:0;padding:.1rem 0}
  .ao-table td[data-label]:not(:first-child)::before{content:attr(data-label) " · ";color:var(--ao-ink-3);font-size:.75rem;text-transform:uppercase;letter-spacing:.04em}
}

/* stop / kill-criteria note (no accent colour) */
.ao-stop{margin-top:var(--ao-s6);border:1px solid var(--ao-line-strong);border-left:3px solid var(--ao-ink);border-radius:var(--ao-radius);padding:var(--ao-s4) var(--ao-s5);background:var(--ao-surface)}
.ao-stop h3{font-size:var(--ao-fs-sm);margin:0 0 .35rem}
.ao-stop p{margin:0;font-size:var(--ao-fs-sm);color:var(--ao-ink-2)}
.ao-stop strong{color:var(--ao-ink)}

/* ---------- card / form ---------- */
.ao-card{background:var(--ao-surface);border:1px solid var(--ao-line);border-radius:var(--ao-radius-lg);padding:var(--ao-s5)}
@media (min-width:640px){.ao-card{padding:var(--ao-s6)}}
.ao-card .ao-h2{margin-bottom:var(--ao-s4)}
.ao-form label{display:block;font-size:var(--ao-fs-sm);font-weight:600;margin:var(--ao-s4) 0 .4rem}
.ao-form label:first-of-type{margin-top:0}
.ao-form input,.ao-form select,.ao-form textarea{width:100%;font:inherit;font-size:1rem;color:var(--ao-ink);background:var(--ao-bg);border:1px solid var(--ao-line-strong);border-radius:var(--ao-radius);padding:.7rem .8rem;min-height:44px}
.ao-form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ao-ink-3) 50%),linear-gradient(135deg,var(--ao-ink-3) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.2rem}
.ao-form textarea{min-height:6rem;resize:vertical}
.ao-form input:focus,.ao-form select:focus,.ao-form textarea:focus{outline:none;border-color:var(--ao-accent);box-shadow:0 0 0 3px var(--ao-accent-tint)}
.ao-form button[type=submit]{margin-top:var(--ao-s5)}
.ao-hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.ao-note{font-size:var(--ao-fs-xs);color:var(--ao-ink-3);margin:var(--ao-s3) 0 0}

/* ---------- pricing / pay card ---------- */
.ao-pay{position:relative}
@media (min-width:920px){.ao-pay{position:sticky;top:var(--ao-s5)}}
.ao-price{display:flex;align-items:baseline;gap:.4rem;margin:0 0 var(--ao-s3)}
.ao-price strong{font-size:2.75rem;line-height:1;letter-spacing:-.03em}
.ao-price span{color:var(--ao-ink-3);font-size:var(--ao-fs-sm)}
.ao-pay p.body{font-size:var(--ao-fs-sm);color:var(--ao-ink-2);margin:0 0 var(--ao-s5)}

/* ---------- FAQ ---------- */
.ao-faq{border-top:1px solid var(--ao-line)}
.ao-faq details{border-bottom:1px solid var(--ao-line);padding:var(--ao-s4) 0}
.ao-faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:var(--ao-s4)}
.ao-faq summary::-webkit-details-marker{display:none}
.ao-faq summary::after{content:"+";color:var(--ao-ink-3);font-weight:400}
.ao-faq details[open] summary::after{content:"–"}
.ao-faq details p{margin:.6rem 0 0;color:var(--ao-ink-2);font-size:var(--ao-fs-sm)}

/* ---------- footer ---------- */
.ao-footer{border-top:1px solid var(--ao-line);padding:var(--ao-s6) 0 var(--ao-s7);font-size:var(--ao-fs-xs);color:var(--ao-ink-3);background:var(--ao-bg)}
.ao-footer .ao-brand{margin-bottom:var(--ao-s4)}
.ao-footer .ao-brand img{width:22px;height:22px;border-radius:6px}
.ao-footer .ao-wordmark{font-size:.95rem}
.ao-footer p{margin:0 0 .5rem;max-width:46rem}
.ao-footer .legal{margin-top:var(--ao-s4);padding-top:var(--ao-s4);border-top:1px solid var(--ao-line);display:flex;flex-wrap:wrap;gap:.25rem 1rem}
.ao-footer a{word-break:break-all}

/* ---------- thanks page ---------- */
.ao-thanks{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--ao-s5);background:var(--ao-bg-subtle)}
.ao-thanks .ao-card{max-width:30rem;text-align:center}
.ao-thanks .mark{width:56px;height:56px;margin:0 auto var(--ao-s4);border-radius:14px}
.ao-thanks h1{font-size:1.6rem;letter-spacing:-.02em;margin:0 0 var(--ao-s3);line-height:1.25}
.ao-thanks p{color:var(--ao-ink-2);font-size:var(--ao-fs-sm);margin:0 0 var(--ao-s4)}
.ao-thanks .sig{font-size:var(--ao-fs-xs);color:var(--ao-ink-3);margin:var(--ao-s5) 0 0}