/* Site restyle on top of css/ios-tokens.css.
   Loaded last (nav.js moves this sheet to the end of body) so it wins
   over per-page <style> blocks. Business / LE portal pages do not load it. */

html:root {
  --ar-page-bg: var(--ar-bg);
  --ar-page-text: var(--ar-text);
  --ar-page-muted: var(--ar-text-secondary);
  --ar-page-line: var(--ar-divider);
  --ar-page-shadow: none;
  --ar-page-shadow-sm: none;
  --ar-surface-soft: var(--ar-bg-secondary);
  --ar-surface-card: var(--ar-surface);
  --ar-surface-input: var(--ar-field-bg);
  --ar-chip-bg: var(--ar-bg-secondary);
  --ar-chip-border: var(--ar-border);
  --ar-aside-item-bg: var(--ar-bg-secondary);
  --ar-metric-bg: var(--ar-bg-secondary);
  --ar-callout-bg: var(--ar-bg-secondary);
  --ar-callout-border: var(--ar-border);
  --ar-footnote-bg: var(--ar-bg-secondary);
  --ar-footnote-border: var(--ar-border);
  --ar-post-bg: var(--ar-surface);
  --ar-tag-text: var(--ar-text);
  --ar-blockquote: var(--ar-text);
  --ar-orange: var(--ar-accent);
  --ar-muted: var(--ar-text-secondary);
  --ar-line: var(--ar-divider);
  --ar-black: var(--ar-text);
  --ar-white: var(--ar-bg);
  --ar-nav-bg: var(--ar-glass-fill);
  --ar-nav-border: var(--ar-floating-hairline);
  --ar-nav-text: var(--ar-text);
  --ar-nav-muted: var(--ar-text-secondary);
  --ar-nav-hover-bg: var(--ar-divider);
  --ar-nav-hamburger: var(--ar-text);
  --ar-drawer-bg: var(--ar-glass-fill);
  --ar-drawer-border: var(--ar-divider);
  --ar-footer-bg: var(--ar-bg-secondary);
  --ar-footer-border: var(--ar-border);
  --ar-footer-text: var(--ar-text-secondary);
}

html,
body {
  background: var(--ar-bg) !important;
  color: var(--ar-text);
  font-family: var(--ar-font-sans);
}

/* One UI face. Pages set Rethink Sans on some headlines and Plus Jakarta on body.
   iOS tokens use the system stack for every weight. */
html body,
html body :where(
  h1, h2, h3, h4, h5, h6, p, li, a, button, input, textarea, select, label,
  small, strong, em, span, summary, figcaption, blockquote, dt, dd, th, td
) {
  font-family: var(--ar-font-sans) !important;
}

body {
  font: var(--ar-text-body);
  color: var(--ar-text);
}

h1, .ar-title {
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ar-text);
}

h2, h3, .ar-section-title, .ar-card__title, .ar-card-title {
  font-weight: 700;
  color: var(--ar-text);
}

p, li, .ar-copy, .ar-hero__sub, .ar-hero__intro, .ar-section-copy {
  color: var(--ar-text-secondary);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--ar-accent);
  outline-offset: 3px;
}

/* Chrome: glass. Cards stay solid. */
.ar-nav {
  background: var(--ar-glass-fill) !important;
  backdrop-filter: var(--ar-glass-backdrop);
  -webkit-backdrop-filter: var(--ar-glass-backdrop);
  border-bottom: var(--ar-stroke-hairline) solid var(--ar-floating-hairline) !important;
}

.ar-nav__link,
.ar-footer,
.ar-footer__heading,
.ar-footer__col a,
.ar-footer__copy,
.ar-footer__logo-label {
  font-family: var(--ar-font-sans) !important;
}

.ar-nav__link {
  border-radius: var(--ar-radius-md);
  transition: color var(--ar-motion-tab), background var(--ar-motion-tab);
}

.ar-nav__link--active:not([href="/clutch"]) {
  background-image: var(--ar-gradient-brand);
  background-size: 100% var(--ar-underline-lane);
  background-repeat: no-repeat;
  background-position: left bottom;
}

/* @clutch in the nav is a mention, so it takes the clutch gradient, not orange type. */
.ar-nav__link[href="/clutch"] {
  background-image: var(--ar-gradient-clutch);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ar-nav__link--active[href="/clutch"] {
  box-shadow: inset 0 calc(-1 * var(--ar-underline-lane)) 0 var(--ar-accent);
}

.ar-nav__cta,
.ar-nav__cta--mobile {
  min-height: var(--ar-hit-min);
  height: var(--ar-hit-min);
  padding: 0 16px;
  color: var(--ar-text) !important;
  background:
    linear-gradient(var(--ar-field-bg), var(--ar-field-bg)) padding-box,
    var(--ar-gradient-brand) border-box !important;
  border: var(--ar-stroke-aura) solid transparent !important;
  border-radius: var(--ar-radius-lg) !important;
  font-family: var(--ar-font-sans) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.ar-nav__cta:hover,
.ar-nav__cta--mobile:hover {
  background:
    linear-gradient(var(--ar-field-bg), var(--ar-field-bg)) padding-box,
    var(--ar-gradient-brand) border-box !important;
  color: var(--ar-text) !important;
  opacity: var(--ar-pressed-opacity);
}

/* Keep the iOS wordmark's intrinsic ratio. A fixed height + max-width
   used to squash the letters on narrow viewports. */
.ar-wordmark {
  display: block;
  width: min(260px, 58vw);
  height: auto;
  aspect-ratio: 860 / 66;
  object-fit: contain;
  object-position: left center;
}

.ar-nav__logo .ar-wordmark {
  width: min(220px, 52vw);
}

.ar-footer__brand .ar-wordmark {
  width: min(200px, 56vw);
  object-position: left center;
}

.ar-hero__card .ar-hero__actions {
  margin-top: 18px;
}

.ar-wordmark--dark { display: none; }

html[data-theme="dark"] .ar-wordmark--light,
html[data-theme="dark"] .ar-wordmark.is-fallback-ink { display: none; }
html[data-theme="dark"] .ar-wordmark--dark { display: block; }

@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) .ar-wordmark--light,
  html:root:not([data-theme="light"]) .ar-wordmark.is-fallback-ink { display: none; }
  html:root:not([data-theme="light"]) .ar-wordmark--dark { display: block; }
}

/* If the black iOS wordmark 404s, the white fallback is inverted for light pages. */
.ar-wordmark.is-fallback-ink {
  filter: brightness(0);
}

.ar-splash {
  width: 88px;
  height: 88px;
  border-radius: var(--ar-radius-xl);
  object-fit: cover;
}

.ar-splash--dark { display: none; }

html[data-theme="dark"] .ar-splash--light { display: none; }
html[data-theme="dark"] .ar-splash--dark { display: block; }

@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) .ar-splash--light { display: none; }
  html:root:not([data-theme="light"]) .ar-splash--dark { display: block; }
}

.ar-footer {
  background: var(--ar-bg-secondary) !important;
  border-top: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  color: var(--ar-text-secondary);
}

.ar-footer__heading { color: var(--ar-text-secondary) !important; font-weight: 700 !important; }
.ar-footer__col a { color: var(--ar-text-secondary) !important; }
.ar-footer__col a:hover { color: var(--ar-text) !important; }
.ar-footer__copy,
.ar-footer__logo-label { color: var(--ar-text-secondary) !important; }
.ar-footer__socials a { color: var(--ar-text-secondary) !important; border-radius: var(--ar-radius-md); }
.ar-footer__bottom { border-top-color: var(--ar-border) !important; }

/* Surfaces */
.ar-panel,
.ar-card,
.ar-section,
.ar-hero__copy,
.ar-signup,
.ar-signup__form,
.ar-signup__chip,
.ar-feature,
.ar-latest__card,
.ar-help__card,
.ar-blog__card,
.ar-article__content,
.ar-contact__card,
.ar-contact__form,
.ar-side-panel {
  background: var(--ar-surface) !important;
  color: var(--ar-text);
  border-color: var(--ar-border) !important;
  border-radius: var(--ar-radius-xl);
  box-shadow: none !important;
}

.ar-hero.ar-panel,
.ar-article__hero-copy.ar-panel,
.ar-blog__hero.ar-panel,
.ar-contact__hero-copy.ar-panel,
.ar-hero__card {
  background: var(--ar-bg-secondary) !important;
  color: var(--ar-text) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
}

.ar-hero.ar-panel .ar-title,
.ar-hero.ar-panel h1,
.ar-hero.ar-panel h2,
.ar-article__hero-copy.ar-panel h1,
.ar-blog__hero.ar-panel h1,
.ar-contact__hero-copy.ar-panel h1,
.ar-hero__card h2 {
  color: var(--ar-text) !important;
}

.ar-hero.ar-panel .ar-hero__intro,
.ar-hero.ar-panel .ar-hero__sub,
.ar-hero.ar-panel .ar-copy,
.ar-hero.ar-panel .ar-hero__meta,
.ar-hero.ar-panel p,
.ar-article__hero-copy.ar-panel p,
.ar-blog__hero.ar-panel p,
.ar-contact__hero-copy.ar-panel p,
.ar-hero__card p {
  color: var(--ar-text-secondary) !important;
}

.ar-eyebrow {
  color: var(--ar-text-secondary) !important;
  font-weight: 700;
  letter-spacing: 0.16em;
}

input,
textarea,
select,
.ar-field input,
.ar-field select,
.ar-contact__field input,
.ar-contact__field select,
.ar-contact__field textarea {
  background: var(--ar-field-bg) !important;
  color: var(--ar-text) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  border-radius: var(--ar-radius-md) !important;
  min-height: var(--ar-hit-min);
  font-family: var(--ar-font-sans);
}

/* Primary controls: neutral fill + brand-gradient stroke. Not an orange slab. */
.ar-button--primary:not(.ar-button--hero),
.ar-btn-primary,
.ar-btn-form,
.ar-platform-card__btn,
a.ar-button--primary:not(.ar-button--hero) {
  color: var(--ar-text) !important;
  background:
    linear-gradient(var(--ar-field-bg), var(--ar-field-bg)) padding-box,
    var(--ar-gradient-brand) border-box !important;
  border: var(--ar-stroke-aura) solid transparent !important;
  border-radius: var(--ar-radius-lg) !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  font-family: var(--ar-font-sans) !important;
}

.ar-button--primary:not(.ar-button--hero):hover,
.ar-btn-primary:hover,
.ar-btn-form:hover {
  opacity: var(--ar-pressed-opacity);
}

/* The single filled brand CTA on a surface. White label, capsule, no extra glow. */
a.ar-button.ar-button--hero,
button.ar-button.ar-button--hero,
.ar-button.ar-button--hero {
  color: var(--ar-on-accent) !important;
  background: var(--ar-gradient-brand) !important;
  border: 0 !important;
  border-radius: var(--ar-radius-pill) !important;
  min-height: var(--ar-hit-min);
  padding: 0 22px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: none !important;
  font-family: var(--ar-font-sans) !important;
}

a.ar-button.ar-button--hero:hover,
.ar-button.ar-button--hero:hover { opacity: var(--ar-pressed-opacity); }

.ar-button--light,
.ar-button--ghost {
  color: var(--ar-text) !important;
  background: var(--ar-field-bg) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  border-radius: var(--ar-radius-lg) !important;
  box-shadow: none !important;
}

/* Homepage feature grid. Named apart from the older .ar-features card row. */
.ar-app-features {
  margin-top: 48px;
  padding: 32px 28px 36px;
}

.ar-app-features__title {
  margin: 0 0 8px;
  font: var(--ar-text-title);
  letter-spacing: -0.03em;
  color: var(--ar-text);
}

.ar-app-features__dek {
  margin: 0 0 24px;
  max-width: 42rem;
  color: var(--ar-text-secondary);
  font: var(--ar-text-callout);
}

.ar-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ar-space-md);
}

.ar-feature-card {
  background: var(--ar-surface);
  border: var(--ar-stroke-hairline) solid var(--ar-border);
  border-radius: var(--ar-radius-xl);
  padding: 22px 22px 20px;
  box-shadow: none;
}

.ar-feature-card h3 {
  margin: 0 0 8px;
  font: var(--ar-text-headline);
  color: var(--ar-text);
}

.ar-feature-card p {
  margin: 0;
  color: var(--ar-text-secondary);
  font: var(--ar-text-footnote);
}

.ar-feature-card a {
  color: var(--ar-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ar-feature-card__kicker {
  display: block;
  margin-bottom: 8px;
  font: var(--ar-text-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ar-text-secondary);
}

.ar-mention {
  background-image: var(--ar-gradient-clutch);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.ar-hashtag {
  background-image: var(--ar-gradient-hashtag);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.ar-vin {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: var(--ar-radius-md);
  border: var(--ar-stroke-hairline) solid var(--ar-border);
  font: var(--ar-text-caption);
  font-weight: 600;
  color: var(--ar-text);
  background: var(--ar-bg-secondary);
}

.ar-hero__copy,
.ar-hero__card {
  border-radius: var(--ar-radius-xl) !important;
}

.ar-gradient-text,
.ar-hero .ar-gradient-text {
  background-image: var(--ar-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 800px) {
  .ar-feature-grid { grid-template-columns: 1fr; }
  .ar-app-features { padding: 24px 16px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-nav__link,
  .ar-button,
  .ar-button--hero,
  .ar-nav__cta {
    transition: none !important;
  }
}

/* Cards, chips, and badges follow the surface token in both themes.
   Page styles hardcode #fff / #fafafa while labels follow --ar-text,
   which is white in dark mode. */
.ar-hero__stat,
.ar-hero.ar-panel .ar-hero__stat,
.ar-story__aside,
.ar-download,
.ar-download-reveal,
.ar-help-card,
.ar-help-related__card,
.ar-help__beta-banner,
.ar-help__cta-card,
.ar-help__list,
.ar-help__results,
.ar-help__results-empty,
.ar-help-beta,
.ar-help-callout,
.ar-suggest,
.ar-article__content blockquote,
.ar-article__stats div,
.ar-blog__stats div,
.ar-blog__empty,
.ar-beta-card,
.ar-404__card,
.ar-404__link,
.ar-event__panel,
.ar-event__tag,
.ar-pill,
.ar-mini,
.ar-note,
.ar-auth-gate,
.ar-auth-gate-card,
.ar-login__card,
.ar-feedback__card,
.ar-feedback__linkcard,
.ar-giveaway__drawer,
.ar-giveaway__form,
.ar-upload__frame,
.ar-hero__badge,
.ar-hero__beta,
.ar-feedback__form,
.ar-type,
.ar-article__callout,
.ar-rule,
.confirm-card,
.clutch-note,
.clutch-close,
.clutch-toc a,
.clutch-skip,
.audience-card,
.crew-card,
.apply-card,
.price-card,
.am-card,
.am-chip,
.am-callout,
.am-mini,
.am-tool,
.bd-chip {
  background: var(--ar-surface) !important;
  color: var(--ar-text) !important;
  border-color: var(--ar-border) !important;
}

.ar-hero.ar-panel .ar-hero__stat strong,
.ar-hero__stat strong,
.ar-article__stats span,
.ar-blog__stats span,
.ar-article__stats strong,
.ar-blog__stats strong {
  color: var(--ar-text) !important;
}

.ar-hero.ar-panel .ar-hero__stat span,
.ar-hero__stat span,
.ar-article__stats small,
.ar-blog__stats small {
  color: var(--ar-text-secondary) !important;
}

.ar-blog__hero-badge,
.ar-blog__hero-panel-badge,
.ar-article__badge,
.ar-article__hero-panel-badge,
.ar-hero__card-badge,
.ar-help__hero-badge,
.ar-help__hero-panel-badge,
.ar-contact__hero-badge,
.ar-contact__hero-panel-badge,
.ar-feedback__hero-badge,
.ar-feedback__hero-panel-badge,
.ar-article__hero-copy.ar-panel .ar-article__badge,
.ar-article__hero-copy.ar-panel .ar-blog__hero-badge {
  color: var(--ar-text) !important;
  background: var(--ar-bg) !important;
  border: 1px solid var(--ar-border) !important;
}

/* Chips that fill with --ar-text and paint #fff go white-on-white in dark mode. */
.ar-card__tag,
.ar-latest__tag,
.ar-blog__tag,
.ar-toc-num,
.ar-help__beta-tag,
.ar-contact__submit,
.ar-feedback__submit,
.ar-report-block__email,
.ar-social__icon--instagram,
.ar-social__icon--youtube,
.ar-social__icon--facebook,
.ar-article__content .ar-article__footer-cta {
  background: var(--ar-text) !important;
  color: var(--ar-bg) !important;
}

.ar-auth-gate,
.ar-auth-gate-card {
  background: var(--ar-surface) !important;
  color: var(--ar-text) !important;
  border-color: var(--ar-border) !important;
}

.ar-auth-gate-title { color: var(--ar-text) !important; }
.ar-auth-gate-copy { color: var(--ar-text-secondary) !important; }

.ar-auth-gate-btn-secondary {
  background: var(--ar-bg) !important;
  color: var(--ar-text) !important;
  border: 1px solid var(--ar-border) !important;
}

.confirm-button {
  background: var(--ar-gradient-brand) !important;
  color: var(--ar-on-accent) !important;
}

/* Solid text-colored buttons keep a page-colored label. Orange primaries keep their fill. */
.ar-btn--primary { color: var(--ar-bg) !important; }

.ar-btn--secondary {
  background: var(--ar-surface) !important;
  color: var(--ar-text) !important;
  border-color: var(--ar-border) !important;
}

/* Shared type scale from the app tokens. */
html body h1 {
  font: var(--ar-text-large-title) !important;
  letter-spacing: -0.03em !important;
}

html body h2,
html body .ar-section-title {
  font: var(--ar-text-title) !important;
  letter-spacing: -0.02em !important;
}

html body h3 {
  font: var(--ar-text-headline) !important;
}

/* One article template for help articles and blog posts. */
html body .ar-article {
  padding: 40px 0 72px !important;
}

html body .ar-article > .ar-shell {
  width: min(calc(100% - 40px), 1120px) !important;
  margin: 0 auto !important;
}

html body .ar-article__hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.7fr) !important;
  gap: var(--ar-space-md) !important;
  align-items: stretch !important;
}

html body .ar-article__hero-copy,
html body .ar-article__hero-panel,
html body .ar-blog__hero,
html body .ar-blog__hero-panel {
  background: var(--ar-surface) !important;
  color: var(--ar-text) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  border-radius: var(--ar-radius-xl) !important;
  box-shadow: none !important;
  padding: 32px !important;
}

html body .ar-article__hero-copy h1,
html body .ar-article__intro,
html body .ar-article__hero-copy p,
html body .ar-article__hero-copy .ar-eyebrow {
  color: var(--ar-text) !important;
}

html body .ar-article__intro,
html body .ar-article__hero-copy p {
  color: var(--ar-text-secondary) !important;
  font: var(--ar-text-body) !important;
  max-width: 40rem !important;
}

html body .ar-article__content {
  max-width: 720px !important;
  margin: 24px auto 0 !important;
  padding: 32px !important;
  background: var(--ar-surface) !important;
  color: var(--ar-text) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  border-radius: var(--ar-radius-xl) !important;
  box-shadow: none !important;
}

html body .ar-article__content h2 {
  margin: 32px 0 12px !important;
}

html body .ar-article__content h3 {
  margin: 24px 0 8px !important;
}

html body .ar-article__content p,
html body .ar-article__content li {
  font: var(--ar-text-body) !important;
  color: var(--ar-text-secondary) !important;
}

html body .ar-article__content a {
  color: var(--ar-text) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

html body .ar-article__content ul,
html body .ar-article__content ol {
  margin: 0 0 16px 1.25rem !important;
  padding: 0 !important;
}

html body .ar-help-beta,
html body .ar-help-callout,
html body .ar-article__content blockquote,
html body .ar-article__callout {
  background: var(--ar-bg-secondary) !important;
  color: var(--ar-text) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  border-left: 0 !important;
  border-radius: var(--ar-radius-lg) !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
}

html body .ar-article__footer,
html body .ar-article__back,
html body .ar-article__content .ar-cta {
  margin-top: 32px !important;
  padding-top: 24px !important;
  border-top: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

html body .ar-article__content .ar-article__footer-cta,
html body .ar-article__content .ar-cta a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  border-radius: 8px !important;
  background: var(--ar-text) !important;
  color: var(--ar-bg) !important;
  -webkit-text-fill-color: var(--ar-bg) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

html body .ar-article__content .ar-article__footer-cta:hover,
html body .ar-article__content .ar-cta a:hover {
  opacity: 0.85 !important;
}

@media (max-width: 800px) {
  html body .ar-article {
    padding: 24px 0 56px !important;
  }

  html body .ar-article > .ar-shell {
    width: min(calc(100% - 32px), 1120px) !important;
  }

  html body .ar-article__hero {
    grid-template-columns: 1fr !important;
  }

  html body .ar-article__hero-copy,
  html body .ar-article__hero-panel,
  html body .ar-article__content {
    padding: 24px !important;
  }
}

/* Business page uses the same shell, cards, and buttons. */
html body.ar-business {
  background: var(--ar-bg) !important;
  color: var(--ar-text) !important;
}

html body.ar-business .wrap {
  width: min(calc(100% - 40px), 1120px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

html body.ar-business .hero {
  padding: 48px 0 8px;
  text-align: left;
}

html body.ar-business .hero .eyebrow,
html body.ar-business .price-card > div:first-child {
  color: var(--ar-text-secondary) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.16em;
}

html body.ar-business section {
  padding: 40px 0;
}

html body.ar-business .crew,
html body.ar-business .audience-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ar-space-md);
}

html body.ar-business .cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  border: 0;
  background: var(--ar-text);
  color: var(--ar-bg);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}

html body.ar-business .cta:hover { opacity: 0.85; }

html body.ar-business .price-card,
html body.ar-business .apply-card {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px;
  background: var(--ar-surface);
  border: var(--ar-stroke-hairline) solid var(--ar-border);
  border-radius: var(--ar-radius-xl);
}

@media (max-width: 800px) {
  html body.ar-business .wrap { width: min(calc(100% - 32px), 1120px); }
  html body.ar-business .crew,
  html body.ar-business .audience-grid { grid-template-columns: 1fr; }
}

/* Account gates use the same type scale and 8px buttons. */
html body .ar-auth-gate {
  background: var(--ar-bg) !important;
  min-height: 0 !important;
  padding: 48px 20px 72px !important;
}

html body .ar-auth-gate-card {
  background: var(--ar-surface) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  border-radius: var(--ar-radius-xl) !important;
  box-shadow: none !important;
}

html body .ar-auth-gate-icon {
  background: var(--ar-bg-secondary) !important;
  color: var(--ar-text) !important;
  border-radius: var(--ar-radius-lg) !important;
}

html body .ar-auth-gate-eyebrow {
  color: var(--ar-text-secondary) !important;
}

html body .ar-auth-gate-title {
  font: var(--ar-text-large-title) !important;
  letter-spacing: -0.03em !important;
  color: var(--ar-text) !important;
}

html body .ar-auth-gate-btn-primary,
html body .ar-auth-gate-btn-secondary {
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transform: none !important;
  min-height: 44px !important;
}

html body .ar-auth-gate-btn-primary {
  background: var(--ar-text) !important;
  color: var(--ar-bg) !important;
}

html body .ar-auth-gate-btn-primary:hover,
html body .ar-auth-gate-btn-secondary:hover {
  opacity: 0.85 !important;
  transform: none !important;
}

/* Restore, unsubscribe, and other centered status cards. */
html body.ar-status-page {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  background: var(--ar-bg) !important;
  color: var(--ar-text) !important;
  min-height: 100dvh !important;
  padding: 0 !important;
}

html body.ar-status-page .ar-status {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 48px 20px 72px;
}

html body.ar-status-page .card {
  background: var(--ar-surface) !important;
  color: var(--ar-text) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
  border-radius: var(--ar-radius-xl) !important;
  box-shadow: none !important;
  max-width: 480px;
  width: 100%;
  padding: 40px 32px;
  text-align: center;
}

html body.ar-status-page .card p,
html body.ar-status-page .resubscribe-note,
html body.ar-status-page .contact-note {
  color: var(--ar-text-secondary) !important;
  font: var(--ar-text-body) !important;
}

html body.ar-status-page .btn,
html body.ar-status-page a.home-link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 16px;
  padding: 0 18px !important;
  border-radius: 8px !important;
  background: var(--ar-text) !important;
  color: var(--ar-bg) !important;
  -webkit-text-fill-color: var(--ar-bg) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body.ar-status-page .btn-secondary {
  background: var(--ar-surface) !important;
  color: var(--ar-text) !important;
  -webkit-text-fill-color: var(--ar-text) !important;
  border: var(--ar-stroke-hairline) solid var(--ar-border) !important;
}

html body.ar-status-page .btn:hover,
html body.ar-status-page a.home-link:hover,
html body.ar-status-page .btn-secondary:hover {
  opacity: 0.85 !important;
}

html body.ar-status-page .card a:not(.btn):not(.home-link) {
  color: var(--ar-text) !important;
  font-weight: 600;
}

html body.ar-redirect {
  background: var(--ar-bg) !important;
  color: var(--ar-text-secondary) !important;
}

html body.ar-redirect p {
  font: var(--ar-text-body) !important;
  color: var(--ar-text-secondary) !important;
  text-align: center;
  padding: 48px 24px !important;
}

html body.ar-redirect a {
  color: var(--ar-text) !important;
  font-weight: 600;
}

html body .ar-event {
  padding: 40px 0 72px !important;
}

html body .ar-event > .ar-shell {
  width: min(calc(100% - 40px), 1120px) !important;
  margin: 0 auto !important;
}

html body .ar-event__panel {
  background: var(--ar-surface) !important;
  border-radius: var(--ar-radius-xl) !important;
  box-shadow: none !important;
  padding: 32px !important;
}

html body .ar-event .ar-eyebrow {
  color: var(--ar-text-secondary) !important;
}

html body.ar-design {
  display: block !important;
  background: var(--ar-bg) !important;
  color: var(--ar-text) !important;
  padding: 0 !important;
}

html body.ar-design .shell {
  width: min(calc(100% - 40px), 920px);
  margin: 48px auto 72px;
}

html body.ar-design .title {
  font-family: var(--ar-font-sans) !important;
  color: var(--ar-text) !important;
}

html body.ar-design .copy {
  font-family: var(--ar-font-sans) !important;
  color: var(--ar-text-secondary) !important;
}

@media (max-width: 800px) {
  html body .ar-event > .ar-shell { width: min(calc(100% - 32px), 1120px) !important; }
  html body .ar-event__grid { grid-template-columns: 1fr !important; }
  html body.ar-design .shell { width: min(calc(100% - 32px), 920px); margin: 24px auto 56px; }
}