/* P20 R44: shared website VI. Load last on main, fees and portable exports.
   The custom wordmark, Hanyi hero lettering and portfolio artwork are excluded. */
:root {
  --vi-ink: #1d1d1f;
  --vi-secondary: #6e6e73;
  --vi-heading-muted: #86868b;
  --vi-paper: #fff;
  --vi-surface: #f5f5f7;
  --vi-border: #e3e3e8;
  --vi-accent: #5064fa;
  --vi-link: #465be6;
  --vi-accent-hover: #4256e5;
  --vi-dark: #161820;
  --vi-on-dark: #f2f4ff;
  --vi-on-dark-secondary: #b8bbcb;
  --vi-dark-border: #353846;
  --vi-focus-dark: #a5bbff;
  --vi-page-title: 64px;
  --vi-section-title: 56px;
  --vi-subsection-title: 36px;
  --vi-card-title: 24px;
  --vi-body: 16px;
  --vi-copy: 14px;
  --vi-meta: 12px;
  --vi-control: 14px;
  --vi-price: 44px;
  --vi-leading-title: 1.25;
  --vi-leading-card: 1.35;
  --vi-leading-body: 1.8;
  --vi-leading-meta: 1.6;
  --vi-leading-control: 1.5;
  --vi-weight-body: 400;
  --vi-weight-medium: 500;
  --vi-weight-title: 600;
  --vi-space-1: 4px;
  --vi-space-2: 8px;
  --vi-space-3: 12px;
  --vi-space-4: 16px;
  --vi-space-6: 24px;
  --vi-space-8: 32px;
  --vi-space-10: 40px;
  --vi-space-12: 48px;
  --vi-space-16: 64px;
  --vi-space-20: 80px;
  --vi-space-24: 96px;
  --vi-section-space: var(--vi-space-24);
  --vi-heading-gap: var(--vi-space-12);
  --vi-column-gap: var(--vi-space-20);
  --vi-radius-card: 20px;
  --vi-hit-area: 44px;
}

/* Equal semantic levels share a size, weight, line height and tracking.
   R46: the standalone work catalog is a primary chapter, like services and pricing. */
:root[data-release] :is(.work-chapter .collection-intro h2, .browse-heading h2, .service-section-head h2, .plans-heading h2, .creator-section h2, .contact-heading h2) {
  font-size: var(--vi-section-title); font-weight: var(--vi-weight-title);
  line-height: var(--vi-leading-title); letter-spacing: -.035em; color: var(--vi-ink);
}
:root[data-release] .pricing-hero h1 {
  font-size: var(--vi-page-title); font-weight: var(--vi-weight-title);
  line-height: var(--vi-leading-title); letter-spacing: -.035em; color: var(--vi-ink);
}
:root[data-release] :is(.compare-heading h2, .pricing-faq h2) {
  font-size: var(--vi-subsection-title); font-weight: var(--vi-weight-title);
  line-height: var(--vi-leading-title); letter-spacing: -.035em; color: var(--vi-ink);
}
:root[data-release] :is(.collection-intro h2, .service-section-head h2, .plans-heading h2, .creator-section h2, .contact-heading h2, .pricing-hero h1, .browse-heading h2) > span {
  color: var(--vi-heading-muted);
}
:root[data-release] :is(.feature-caption h3, .card-caption h3, .service-grid h3, .plan-card h3) {
  font-size: var(--vi-card-title); font-weight: var(--vi-weight-title);
  line-height: var(--vi-leading-card); letter-spacing: -.025em;
}
:root[data-release] :is(.intro-aside > p, .section-description, .plans-heading > p, .creator-bio, .contact-heading > p, .pricing-hero > p:not(.collection-eyebrow), .pricing-faq > div > p:not(.collection-eyebrow)) {
  font-size: var(--vi-body); font-weight: var(--vi-weight-body);
  line-height: var(--vi-leading-body); color: var(--vi-secondary); letter-spacing: 0;
}
:root[data-release] :is(.service-grid p, .plan-audience, .plan-card li, .feature-caption p, .card-caption p, .pricing-questions details > p) {
  font-size: var(--vi-copy); font-weight: var(--vi-weight-body);
  line-height: var(--vi-leading-body); color: var(--vi-secondary); letter-spacing: 0;
}
:root[data-release] :is(.service-detail, .service-number, .plan-label, .plan-scope, .plan-common li, .pricing-footnote p, .plans-scope-note, .plans-section-line > span, .table-hint, .creator-stat dt, .creator-activity figcaption, .creator-activity-head > span, .contact-channel > span, .footer-fine, .pricing-breadcrumb) {
  font-size: var(--vi-meta); line-height: var(--vi-leading-meta);
  color: var(--vi-secondary); letter-spacing: 0;
}
:root[data-release] :is(.plans-section-line h2, .creator-activity-head h3, .plan-common > p, .pricing-questions summary) {
  font-size: var(--vi-body); font-weight: var(--vi-weight-medium);
  line-height: var(--vi-leading-control); letter-spacing: 0; color: var(--vi-ink);
}
:root[data-release] :is(.section-kicker, .section-kicker > span:last-child) { font-size: var(--vi-meta); line-height: var(--vi-leading-meta); letter-spacing: 0; color: var(--vi-secondary); }
:root[data-release] .hero-description { font-size: var(--vi-body); line-height: var(--vi-leading-body); color: var(--vi-on-dark-secondary); }

/* Controls retain text-only CTAs and the existing rounded SVG icon system. */
:root[data-release] :is(.desktop-nav a, .header-cta, .language-trigger, .language-option, .language-select, .button-primary, .plan-action, .under-link, .quiet-button, .filter-group button, .footer-navigation a, .selection-actions button, .scroll-cue) {
  font-size: var(--vi-control); line-height: var(--vi-leading-control);
  min-height: var(--vi-hit-area);
}
:root[data-release] :is(.button-primary, .plan-action, .under-link, .selection-actions button) { font-weight: var(--vi-weight-medium); }
:root[data-release] .under-link { color: var(--vi-link); align-items: center; }
:root[data-release] .contact-channel .quiet-button { color: var(--vi-link); }
:root[data-release] .button-primary { background: var(--vi-accent); padding: var(--vi-space-3) var(--vi-space-6); }
:root[data-release] .button-primary:hover { background: var(--vi-accent-hover); }
:root[data-release] .filter-group { gap: var(--vi-space-1); }
:root[data-release] .filter-group button { padding: 10px 16px; color: var(--vi-secondary); }
:root[data-release] .filter-group button[aria-pressed="true"] { color: var(--vi-paper); background: var(--vi-ink); }
:root[data-release] .footer-navigation a { color: var(--vi-secondary); }
:root[data-release] .footer-navigation a:hover { color: var(--vi-ink); }
:root[data-release] .site-header .header-language { --language-panel: var(--vi-dark); --language-text: var(--vi-on-dark); --language-focus: var(--vi-focus-dark); }
:root[data-release] .pricing-page .site-header .header-language { --language-panel: var(--vi-paper); --language-text: var(--vi-ink); --language-border: var(--vi-border); --language-focus: var(--vi-link); }
:root[data-release] :is(.gallery-paper, .pricing-page) :is(a, button, input, textarea, select, summary):focus-visible,
:root[data-release] .comparison-scroll:focus-visible { outline: 2px solid var(--vi-link); outline-offset: 4px; }
:root[data-release] .site-header :is(a, button, select):focus-visible { outline-color: var(--vi-focus-dark); }
:root[data-release] .pricing-page .site-header :is(a, button, select):focus-visible { outline-color: var(--vi-link); }
:root[data-release] .site-header .desktop-nav { color: var(--vi-on-dark-secondary); }
:root[data-release] .pricing-page .site-header .desktop-nav { color: var(--vi-secondary); }

/* R101: desktop header labels gain one pixel and a little more contrast. */
@media (min-width: 1101px) {
  :root[data-release] .site-header :is(.desktop-nav a, .language-trigger, .language-select) {
    font-size: 15px;
  }
  :root[data-release] .site-header .desktop-nav {
    color: color-mix(in srgb, var(--vi-on-dark-secondary) 70%, var(--vi-on-dark));
  }
  :root[data-release] .pricing-page .site-header .desktop-nav {
    color: color-mix(in srgb, var(--vi-secondary) 70%, var(--vi-ink));
  }
}

/* Preserve container widths, column counts and alignment; normalize internal rhythm. */
:root[data-release] .work-chapter .collection-intro { padding-block: var(--vi-section-space) var(--vi-heading-gap); }
:root[data-release] .work-chapter .featured-section { padding-bottom: var(--vi-section-space); }
:root[data-release] :is(.services-section, .pricing-overview, .creator-section) { padding-block: var(--vi-section-space); }
:root[data-release] .browse-section { padding-block: var(--vi-section-space); }
:root[data-release] .contact-section { padding-block: var(--vi-space-20); }
:root[data-release] .plan-compare { padding-block: var(--vi-section-space); }
:root[data-release] .pricing-faq { padding-bottom: var(--vi-section-space); }
:root[data-release] .pricing-hero { padding-block: var(--vi-space-12); }
:root[data-release] .plans-heading { margin-bottom: var(--vi-heading-gap); }
:root[data-release] :is(.browse-heading, .compare-heading) { margin-bottom: var(--vi-space-8); }
:root[data-release] :is(.section-description, .contact-heading > p, .pricing-hero > p:not(.collection-eyebrow)) { margin-top: var(--vi-space-6); }
:root[data-release] .work-chapter .intro-aside { margin-top: var(--vi-space-6); gap: var(--vi-space-4); }
:root[data-release] .service-grid { margin-top: var(--vi-heading-gap); }
:root[data-release] .service-grid { gap: var(--vi-space-8); }
:root[data-release] :is(.creator-intro, .contact-section) { gap: var(--vi-column-gap); }
:root[data-release] .collection-footer.site-footer { column-gap: var(--vi-column-gap); }
:root[data-release] .service-grid article { padding-top: var(--vi-space-6); border-color: var(--vi-border); }
:root[data-release] .service-grid h3 { margin: var(--vi-space-6) 0 var(--vi-space-3); }
:root[data-release] .service-grid p { margin-bottom: var(--vi-space-6); }
:root[data-release] :is(.feature-caption h3, .card-caption h3) { margin-bottom: var(--vi-space-2); }
:root[data-release] .feature-caption { padding: var(--vi-space-8) var(--vi-space-10); background: var(--vi-surface); border-color: var(--vi-border); }
:root[data-release] .card-caption { padding: var(--vi-space-6) 0 0; }
:root[data-release] .browse-toolbar { padding-bottom: var(--vi-space-6); margin-bottom: var(--vi-space-8); border-color: var(--vi-border); }
:root[data-release] .creator-stats { margin-block: var(--vi-heading-gap); padding-top: var(--vi-space-8); border-color: var(--vi-border); }
:root[data-release] .creator-stat { border-color: var(--vi-border); }
:root[data-release] .creator-stat dt { margin-top: var(--vi-space-3); }
:root[data-release] .creator-stat dd { color: var(--vi-ink); font-weight: var(--vi-weight-medium); }
:root[data-release] .creator-stat dd small { font-size: var(--vi-meta); }
:root[data-release] .creator-activity { padding: var(--vi-space-8); border-radius: var(--vi-radius-card); }
:root[data-release] .creator-activity-head { margin-bottom: var(--vi-space-6); }
:root[data-release] .creator-activity figcaption { margin-top: var(--vi-space-6); }
:root[data-release] .creator-months { font-size: 10px; color: var(--vi-secondary); }
:root[data-release] .contact-channel { padding-bottom: var(--vi-space-6); margin-bottom: var(--vi-space-6); gap: var(--vi-space-4); border-color: var(--vi-border); }
:root[data-release] .contact-channel strong { font-size: 22px; line-height: 1.5; font-weight: var(--vi-weight-medium); color: var(--vi-ink); letter-spacing: -.02em; }

/* Shared price cards across homepage and fees, with measured responsive numeric sizes. */
:root[data-release] .plan-grid { gap: var(--vi-space-4); }
:root[data-release] .plan-card { padding: var(--vi-space-6); border-color: var(--vi-border); border-radius: var(--vi-radius-card); color: var(--vi-ink); }
:root[data-release] .plan-card h3 { margin: var(--vi-space-6) 0 var(--vi-space-3); }
:root[data-release] .plan-label { padding: 4px 8px; border-color: var(--vi-border); }
:root[data-release] .plan-price { font-size: var(--vi-price); font-weight: var(--vi-weight-medium); line-height: 1.15; letter-spacing: -.04em; margin-block: var(--vi-space-8); gap: var(--vi-space-1); }
:root[data-release] .plan-price > span { font-size: 20px; }
:root[data-release] .plan-price small { font-size: var(--vi-meta); color: var(--vi-secondary); }
:root[data-release][lang="en"] .plan-price > span { font-size: var(--vi-meta); }
:root[data-release] .plan-audience { min-height: 3.6em; }
:root[data-release] .plan-scope { min-height: calc(3.2em + 24px); padding-bottom: var(--vi-space-6); border-color: var(--vi-border); }
:root[data-release] .plan-card ul { margin: var(--vi-space-6) 0 var(--vi-space-8); gap: var(--vi-space-3); }
:root[data-release] .plan-action { padding: 12px 16px; background: var(--vi-surface); color: var(--vi-ink); }
:root[data-release] .plan-action.is-selected { outline-color: var(--vi-link); }
/* Shared rows align titles, prices and actions even when English wraps. */
@supports (grid-template-rows: subgrid) {
  :root[data-release] .plan-card { display: grid; grid-template-rows: subgrid; grid-row: span 7; row-gap: 0; }
  :root[data-release] .plan-card :is(h3, .plan-audience, .plan-scope, ul) { min-height: 0; }
  :root[data-release] .plan-card :is(h3, .plan-audience, .plan-price) { align-self: start; }
  :root[data-release] .plan-card ul { align-content: start; }
  :root[data-release] .plan-action { align-self: stretch; margin-top: 0; }
}
:root[data-release] #plan-product { background: var(--vi-dark); border-color: var(--vi-dark); color: var(--vi-on-dark); }
:root[data-release] #plan-product :is(.plan-audience, .plan-scope, li, .plan-price small, .plan-label) { color: var(--vi-on-dark-secondary); border-color: var(--vi-dark-border); }
:root[data-release] #plan-product .plan-action { background: #e8ecff; color: var(--vi-ink); }
:root[data-release] #plan-product .plan-action:hover { background: var(--vi-paper); }
:root[data-release] .plan-common { padding-block: var(--vi-space-6); border-color: var(--vi-border); }
:root[data-release] .plan-common ul { gap: var(--vi-space-3) var(--vi-space-6); }
:root[data-release] .pricing-footnote { margin-top: var(--vi-space-6); }

/* Dense comparison, FAQ and consultation controls use the same text roles. */
:root[data-release] :is(.comparison-scroll th, .comparison-scroll td) { font-size: var(--vi-copy); line-height: var(--vi-leading-body); color: var(--vi-secondary); border-color: var(--vi-border); }
:root[data-release] :is(.comparison-scroll thead th, .comparison-scroll tbody th) { font-weight: var(--vi-weight-medium); color: var(--vi-ink); }
:root[data-release] .comparison-scroll thead th small { font-size: var(--vi-meta); line-height: var(--vi-leading-meta); color: var(--vi-secondary); }
:root[data-release] .pricing-questions details { border-color: var(--vi-border); }
:root[data-release] .pricing-questions summary { padding-block: var(--vi-space-6); }
:root[data-release] .plan-selection { padding: var(--vi-space-6); background: var(--vi-surface); border-color: var(--vi-border); }
:root[data-release] .plan-selection #selected-plan-name { font-size: 20px; line-height: var(--vi-leading-card); font-weight: var(--vi-weight-medium); color: var(--vi-ink); }
:root[data-release] .plan-selection :is(.selection-label, #selected-plan-scope, #plan-copy-status) { font-size: var(--vi-meta); line-height: var(--vi-leading-meta); color: var(--vi-secondary); }
:root[data-release] .selection-actions button { color: var(--vi-link); }
:root[data-release] .selection-actions #clear-plan { color: var(--vi-secondary); }
:root[data-release] .plan-selection textarea { font-size: 16px; line-height: var(--vi-leading-body); color: var(--vi-ink); border-color: var(--vi-border); }

@media (max-width: 1280px) and (min-width: 1051px) {
  :root { --vi-price: 32px; }
  :root[data-release] .plan-card { padding-inline: 20px; }
}
@media (max-width: 1100px) {
  :root { --vi-section-title: 44px; --vi-page-title: 56px; --vi-column-gap: 48px; }
  :root[data-release] .service-grid { gap: var(--vi-space-12) var(--vi-space-10); }
}
@media (max-width: 760px) {
  :root { --vi-page-title: 40px; --vi-section-title: 36px; --vi-subsection-title: 28px; --vi-card-title: 22px; --vi-body: 14px; --vi-copy: 13px; --vi-control: 13px; --vi-price: 36px; --vi-section-space: 64px; --vi-heading-gap: 32px; --vi-radius-card: 16px; }
  :root[data-release] .contact-section { padding-block: 56px; }
  :root[data-release] .pricing-hero { padding-block: var(--vi-space-8); }
  :root[data-release] .plans-heading > p { margin-top: var(--vi-space-6); }
  :root[data-release] .filter-group button { padding-inline: var(--vi-space-3); }
  :root[data-release] .service-grid { gap: var(--vi-space-8) var(--vi-space-6); }
  :root[data-release] .feature-caption { padding: var(--vi-space-6) 20px; }
  :root[data-release] .creator-intro { gap: var(--vi-space-6); }
  :root[data-release] .creator-stats { row-gap: var(--vi-space-8); }
  :root[data-release] .creator-stat dt { margin-top: var(--vi-space-2); }
  :root[data-release] .creator-activity { padding: var(--vi-space-6) var(--vi-space-4); }
  :root[data-release] .contact-channel strong { font-size: 20px; }
  :root[data-release] .plan-common ul { gap: var(--vi-space-3) var(--vi-space-4); }
}
@media (min-width: 521px) and (max-width: 600px) {
  :root { --vi-price: 32px; }
}
@media (max-width: 520px) {
  :root { --vi-price: 44px; }
  :root[data-release] :is(.plan-audience, .plan-scope, .plan-card ul) { min-height: 0; }
}
@media (max-width: 480px) {
  :root { --vi-section-title: 32px; --vi-page-title: 36px; }
}
@media (max-width: 390px) {
  :root[data-release] .creator-stat .creator-time { font-size: 24px; letter-spacing: -1.4px; }
  :root[data-release] .creator-stat .creator-time small { font-size: 10px; margin-inline: 1px; }
}
@media (forced-colors: active) {
  :root[data-release] :is(.site-header, .gallery-paper, .pricing-page) :is(a, button, input, textarea, select, summary):focus-visible { outline-color: Highlight !important; }
}