:root { color-scheme: light; --paper:#f7f6f2; --ink:#29372f; --muted:#59655d; --line:#d9ded5; --accent:#b94730; --green:#e6ebdf; --serif:Georgia,"Noto Serif CJK SC",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.75; overflow-wrap:anywhere; }
a { color:var(--accent); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
button,select { font:inherit; }
:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
::selection { background:#f2cebd; color:var(--ink); }
.wrap { width:min(1120px,calc(100% - 64px)); margin-inline:auto; }
.masthead { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:25px; border-bottom:1px solid var(--line); }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:750; font-size:23px; letter-spacing:-.8px; text-decoration:none; color:var(--ink); }
.brand img { width:30px; height:30px; }
.brand-dot { color:var(--accent); }
.masthead nav { margin-left:auto; }
.masthead nav a { color:var(--ink); text-decoration:none; font-size:14px; }
.language-control { display:flex; align-items:center; gap:8px; font-size:13px; }
.language-control select { max-width:180px; padding:7px 10px; background:transparent; color:var(--ink); border:1px solid var(--line); border-radius:6px; }
.skip-link { position:absolute; left:12px; top:-120px; padding:10px 20px; background:white; z-index:5; }
.skip-link:focus { top:12px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.breadcrumb { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:30px 0 0; font-size:13px; color:var(--muted); }
.breadcrumb a { color:var(--muted); }
.hero { padding:56px 0 48px; display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:64px; align-items:center; }
.eyebrow { margin:0 0 20px; font-size:12px; font-weight:650; letter-spacing:1.8px; text-transform:uppercase; color:var(--accent); }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:var(--serif); font-size:clamp(35px,4.8vw,62px); font-weight:500; line-height:1.17; letter-spacing:-1.5px; margin-bottom:24px; overflow-wrap:anywhere; }
h2 { font-family:var(--serif); font-size:clamp(25px,3vw,35px); font-weight:500; line-height:1.35; margin-bottom:20px; }
h3 { font-size:18px; line-height:1.5; }
.lead { color:var(--muted); font-size:17px; line-height:1.9; max-width:740px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:28px; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:12px; padding:12px 20px; background:var(--accent); border:1px solid var(--accent); border-radius:7px; color:#fff; text-decoration:none; font-weight:600; font-size:14px; text-align:center; }
.button.secondary { background:transparent; border-color:var(--line); color:var(--ink); }
.hero-illustration { background:var(--green); border-radius:50% 50% 18px 18px; min-height:285px; padding:42px 26px; display:grid; align-content:center; position:relative; }
.illustration-card { background:#fffdf9; padding:26px; border:1px solid #d0d7c9; border-radius:10px; box-shadow:9px 11px 0 #d2daca; transform:rotate(-3deg); }
.illustration-card svg { width:45px; height:45px; display:block; color:var(--accent); margin-bottom:14px; }
.illustration-line { display:block; height:7px; border-radius:4px; margin-top:12px; background:#d9dfd2; }
.illustration-line.short { width:60%; background:#e8bb9c; }
.illustration-label { margin:18px 0 0; font-size:12px; letter-spacing:1.3px; text-align:center; }
.section { padding:45px 0; border-top:1px solid var(--line); }
.feature-grid,.steps,.pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.feature { padding:25px; background:#fffdf9; border:1px solid var(--line); border-radius:10px; }
.feature p { margin:10px 0 0; color:var(--muted); }
.number { font-family:var(--serif); color:var(--accent); font-size:25px; }
.steps { padding:0; list-style:none; counter-reset:step; }
.steps li { counter-increment:step; padding-right:22px; color:var(--muted); }
.steps li::before { content:"0" counter(step); display:block; font-family:var(--serif); font-size:33px; color:var(--accent); margin-bottom:14px; }
.notice { background:var(--green); border-left:3px solid #627258; border-radius:0 8px 8px 0; padding:23px 27px; }
.notice p:last-child { margin-bottom:0; }
.notice a { color:#344630; }
.faq details { border-bottom:1px solid var(--line); padding:20px 0; }
.faq summary { cursor:pointer; font-weight:600; }
.faq details p { margin:14px 0 0; color:var(--muted); max-width:850px; }
.pricing-hero { padding:54px 0 30px; max-width:850px; }
.status { display:inline-block; border:1px solid #bdc9b3; border-radius:30px; padding:3px 12px; color:#43543c; font-size:12px; }
.pricing-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.model-catalog { color:var(--muted); font-size:14px; margin-bottom:26px; }
.model-catalog p { margin-bottom:8px; }
.model-catalog strong { margin-right:12px; }
.proxy-note { margin:0 0 26px; }
.plan { display:flex; flex-direction:column; padding:27px; border:1px solid var(--line); border-radius:12px; background:#fffdf9; }
.plan h3 { font-family:var(--serif); font-size:26px; font-weight:500; margin-bottom:12px; }
.plan.featured { border-color:#c67760; background:#fbefe8; }
/* Fixed tier colours shared with the extensions: Free grey, Pro blue, Max purple, Ultra amber. Each card gets a
   top colour bar, a coloured title with a marker and a tinted status pill. These pages are light-only
   (color-scheme: light) and every card sets its own background, so a dark system theme cannot lower contrast;
   titles reach at least 6:1 and the bars at least 3:1 against their background. */
.plan[data-plan] { --tier:#6b7280; --tier-ink:#4b5563; --tier-tint:#f7f7f6; border-top:5px solid var(--tier); background:var(--tier-tint); color:var(--ink); }
.plan[data-plan="free"] { --tier:#6b7280; --tier-ink:#4b5563; --tier-tint:#f7f7f6; }
.plan[data-plan="pro"] { --tier:#2563eb; --tier-ink:#1d4ed8; --tier-tint:#eff4ff; }
.plan[data-plan="max"] { --tier:#7c3aed; --tier-ink:#6d28d9; --tier-tint:#f5f0ff; }
.plan[data-plan="ultra"] { --tier:#b45309; --tier-ink:#92400e; --tier-tint:#fff7e6; }
.plan[data-plan] h3 { color:var(--tier-ink); display:flex; align-items:center; gap:10px; }
.plan[data-plan] h3::before { content:""; flex:none; width:12px; height:12px; border-radius:50%; background:var(--tier); }
.plan[data-plan] .status { border-color:var(--tier); color:var(--tier-ink); background:#fff; }
.plan[data-plan].featured { border-color:var(--tier); border-width:2px 2px 2px; border-top-width:5px; background:var(--tier-tint); box-shadow:0 6px 18px rgba(37,99,235,.12); }
.plan .price { font-family:var(--serif); font-size:28px; line-height:1.3; margin:5px 0 20px; }
.price-amount { color:var(--ink); white-space:nowrap; }
.price-amount.dual { white-space:normal; }
.price-currency { white-space:nowrap; }
.purchase-section .feature h3 { font-size:19px; margin-bottom:0; }
.promo-banner { background:#fbefe8; border:1px solid #e3b7a6; border-left:4px solid var(--accent); border-radius:0 8px 8px 0; padding:20px 24px; margin:0 0 10px; overflow-wrap:anywhere; }
.notice + .promo-banner { margin:18px 0 0; }
.promo-banner .promo-title { font-size:19px; margin-bottom:8px; color:var(--ink); }
.promo-banner p { color:var(--ink); }
.promo-banner p:last-child { margin-bottom:0; }
.price-period { display:block; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:13px; line-height:1.6; margin-top:5px; }
.plan p,.plan ul { color:var(--muted); }
.plan ul { padding:0; list-style:none; font-size:14px; margin:0 0 26px; }
.plan li + li { margin-top:14px; }
.plan li strong { display:block; color:var(--ink); font-weight:600; }
.plan .status { margin-top:auto; align-self:flex-start; }
.note { color:var(--muted); font-size:14px; margin:24px 0; }
.legal-header { padding:52px 0 32px; max-width:820px; }
.legal-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:58px; padding-bottom:50px; align-items:start; }
.legal-menu { position:sticky; top:24px; display:grid; gap:5px; padding-top:14px; border-top:1px solid var(--line); }
.legal-menu a { color:var(--muted); text-decoration:none; padding:8px 0; font-size:14px; }
.legal-menu a[aria-current="page"] { color:var(--accent); font-weight:700; }
.legal-body section { border-top:1px solid var(--line); padding:28px 0 12px; }
.legal-body p { color:var(--muted); }
.legal-body h2 { font-size:26px; }
.product-list { display:flex; flex-wrap:wrap; gap:10px 24px; padding:0; list-style:none; }
.site-footer { margin-top:38px; border-top:1px solid var(--line); padding:35px 0; }
.footer-top { display:flex; gap:30px; justify-content:space-between; align-items:start; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 22px; max-width:690px; }
.footer-nav a { color:var(--ink); font-size:13px; }
.footer-note { font-size:12px; color:var(--muted); max-width:730px; margin:24px 0 12px; }
.credit { font-size:11px; color:var(--muted); }
@media(max-width:1050px) {
  .pricing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:800px) {
  .wrap { width:calc(100% - 40px); }
  .hero { gap:25px; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
  .hero-illustration { min-height:225px; padding:30px 15px; }
  .legal-layout { grid-template-columns:1fr; gap:20px; }
  .legal-menu { position:static; display:flex; flex-wrap:wrap; gap:5px 20px; }
}
@media(max-width:560px) {
  .wrap { width:calc(100% - 36px); }
  .masthead { gap:12px; flex-wrap:wrap; padding-block:18px; }
  .masthead nav { order:3; width:100%; margin:0; }
  .brand { font-size:20px; }
  .language-control { margin-left:auto; }
  .language-control select { max-width:150px; padding:6px; }
  .hero { padding:34px 0; grid-template-columns:1fr; gap:30px; }
  .hero-illustration { min-height:180px; border-radius:18px; padding:28px 50px; }
  .illustration-card { padding:20px; }
  .illustration-card svg { width:30px; height:30px; margin:0; }
  .illustration-label { display:none; }
  .feature-grid,.steps { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; }
  .steps li { padding:0; }
  .steps li::before { margin-bottom:5px; }
  .section { padding:30px 0; }
  .footer-top { flex-direction:column; gap:22px; }
  .footer-nav { justify-content:flex-start; }
  .legal-header,.pricing-hero { padding-top:34px; }
  h1 { font-size:38px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }