/* Shared base for the "kit" looks (every look except Classic and Cobalt).
   Each look file sets the --k-* variables below and adds its own layout + background pattern.
   site.css rules carry [data-astro-cid-*] attributes, so overrides use !important where they must win. */

html.skin-kit {
  --k-paper: #ffffff;          /* page background */
  --k-surface: #ffffff;        /* cards, header */
  --k-ink: #111111;            /* headings, dark buttons */
  --k-text: #3f3f46;           /* body text */
  --k-muted: #71717a;
  --k-line: #e4e4e7;
  --k-accent: #111111;         /* accent used for text, ticks, borders */
  --k-accent-soft: #f4f4f5;    /* tinted backgrounds */
  --k-fill: var(--k-accent);   /* accent used as a filled background */
  --k-fill-ink: #ffffff;       /* text on --k-fill */
  --k-on-dark: #e4e4e7;        /* accent for links inside the dark footer */
  --k-head: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --k-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --k-head-weight: 700;
  --k-head-track: -0.03em;
  --k-r: 12px;                 /* card corners */
  --k-btn-r: 10px;             /* button corners */
  --k-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --accent-gold: var(--k-accent);
  --accent-gold-rgb: 0, 0, 0;
  --bg-primary: var(--k-paper);
  --bg-secondary: var(--k-surface);
  --text-primary: var(--k-ink);
  --text-secondary: var(--k-text);
  --border: var(--k-line);
  --apple-bg: color-mix(in srgb, var(--k-surface) 88%, transparent);
  --apple-bg-scrolled: color-mix(in srgb, var(--k-surface) 96%, transparent);
  --apple-border: var(--k-line);
  --nav-pill-bg: var(--k-fill);
  --nav-pill-border: transparent;
  --nav-pill-glow: transparent;
}

/* Type */
html.skin-kit body { background: var(--k-paper) !important; color: var(--k-text); }
html.skin-kit body *:not(svg):not(svg *):not(code):not(pre):not(.bi):not([class^="bi-"]) { font-family: var(--k-body) !important; }
html.skin-kit :is(h1, h2, h3, .hero-title, .editorial-title, .section-title, .pricing-title, .compare-title, .plan-name,
  .contact-form-card h2, .modal-header h2, .stat-value, .price-value, .analyst-name, .col-title) {
  font-family: var(--k-head) !important;
  font-weight: var(--k-head-weight) !important;
  letter-spacing: var(--k-head-track) !important;
}

/* Header */
html.skin-kit .site-header { border-radius: var(--k-r) !important; }
html.skin-kit .nav-link, html.skin-kit .nav-sliding-pill { border-radius: var(--k-btn-r) !important; }
html.skin-kit .nav-link.pill-active { color: var(--k-fill-ink) !important; }
html.skin-kit .nav-sliding-pill { box-shadow: none !important; }
html.skin-kit .logo-text { color: var(--k-ink) !important; }
html.skin-kit .logo-text strong { color: var(--k-accent) !important; }
html.skin-kit :is(.btn-apple-cta, .whatsapp-btn) { background: var(--k-ink) !important; border-color: var(--k-ink) !important; color: var(--k-paper) !important; box-shadow: none !important; border-radius: var(--k-btn-r) !important; }
html.skin-kit .whatsapp-btn:hover { background: var(--k-accent) !important; border-color: var(--k-accent) !important; transform: none !important; }

/* Hero: plain paper; each look draws its own pattern on .bg-grid */
html.skin-kit .hero-section { background: var(--k-paper) !important; }
html.skin-kit :is(.aurora, .bg-grid-glow) { display: none !important; }
html.skin-kit .hero-title { color: var(--k-ink) !important; }
html.skin-kit .aurora-highlight { background: none !important; color: var(--k-accent) !important; -webkit-text-fill-color: var(--k-accent) !important; animation: none !important; }
html.skin-kit .hero-subtitle { color: var(--k-text) !important; }
html.skin-kit .hero-feature-list li { color: var(--k-ink) !important; }
html.skin-kit .hero-feature-list svg { color: var(--k-accent) !important; }
html.skin-kit .trust-badge-inner { background: var(--k-surface) !important; border-color: var(--k-line) !important; border-radius: var(--k-btn-r) !important; }
html.skin-kit .hero-trust-badge:hover .trust-badge-inner { box-shadow: none !important; border-color: var(--k-accent) !important; }
html.skin-kit .status-text { color: var(--k-accent) !important; }
html.skin-kit .analyst-name-text { color: var(--k-ink) !important; }
html.skin-kit .pulse-dot { background-color: var(--k-accent) !important; box-shadow: none !important; }
html.skin-kit .license-pill { background: var(--k-ink) !important; color: var(--k-paper) !important; border-color: transparent !important; border-radius: calc(var(--k-btn-r) - 2px) !important; box-shadow: none !important; }
html.skin-kit .license-pill svg { color: currentColor !important; }
html.skin-kit .btn-secondary-glass { background: var(--k-ink) !important; color: var(--k-paper) !important; border: 1px solid var(--k-ink) !important; border-radius: var(--k-btn-r) !important; box-shadow: none !important; backdrop-filter: none !important; }
html.skin-kit .btn-secondary-glass:hover { background: var(--k-accent) !important; border-color: var(--k-accent) !important; transform: none !important; }
html.skin-kit .btn-text-arrow { color: var(--k-ink) !important; }

/* Ticker */
html.skin-kit :is(.ticker-wrapper, .ticker-control-container) { background: var(--k-surface) !important; border-color: var(--k-line) !important; }
html.skin-kit .ticker-control-btn { border-radius: var(--k-btn-r) !important; }

/* About */
html.skin-kit .about-editorial { background: var(--k-surface) !important; border-color: var(--k-line) !important; }
html.skin-kit .editorial-title { color: var(--k-ink) !important; }
html.skin-kit .editorial-title .indent { color: var(--k-accent) !important; }
html.skin-kit .editorial-subtitle { color: var(--k-accent) !important; }
html.skin-kit .editorial-columns-wrapper { border-top-color: var(--k-ink) !important; }
html.skin-kit .item-number { color: var(--k-accent) !important; }
html.skin-kit .editorial-badge { border-radius: calc(var(--k-btn-r) - 2px) !important; }

/* Credentials strip */
html.skin-kit .credentials-divider { background: var(--k-paper) !important; border-color: var(--k-line) !important; }
html.skin-kit .stat-icon { color: var(--k-accent) !important; background: var(--k-accent-soft) !important; box-shadow: none !important; border-radius: var(--k-btn-r) !important; }
html.skin-kit .stat-value { color: var(--k-ink) !important; }

/* Plans: one accent instead of the gold / purple tiers */
html.skin-kit :is(.pricing-card, .compare-container, .contact-form-card, .accordion-item) { border-radius: var(--k-r) !important; border-color: var(--k-line) !important; background-color: var(--k-surface) !important; }
html.skin-kit .pricing-card:hover { box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .18) !important; }
html.skin-kit .card-header { background: transparent !important; border-color: var(--k-line) !important; }
html.skin-kit .card-footer { background: var(--k-paper) !important; border-color: var(--k-line) !important; }
html.skin-kit :is(.card-target, .card-gold .card-target, .card-elite .card-target, .text-emerald, .text-amber, .card-gold .price-value) { color: var(--k-accent) !important; }
html.skin-kit .plan-name, html.skin-kit .price-value { color: var(--k-ink) !important; }
html.skin-kit :is(.check-icon, .card-gold .check-icon, .card-elite .check-icon, .icon-yes, .icon-gold, .icon-purple) { stroke: var(--k-accent) !important; color: var(--k-accent) !important; }
html.skin-kit .compliance-tag svg { color: var(--k-accent) !important; }
html.skin-kit .card-gold.featured { border: 2px solid var(--k-accent) !important; box-shadow: none !important; transform: none !important; }
html.skin-kit .card-gold.featured:hover { transform: translateY(-4px) !important; }
html.skin-kit .card-elite { border-color: var(--k-line) !important; box-shadow: none !important; }
html.skin-kit .card-top-badge { border-radius: 0 0 calc(var(--k-btn-r) - 2px) calc(var(--k-btn-r) - 2px) !important; }
html.skin-kit :is(.badge-gold, .badge-elite) { background: var(--k-fill) !important; color: var(--k-fill-ink) !important; box-shadow: none !important; border: 0 !important; }
html.skin-kit :is(.badge-starter, .badge-silver) { background: var(--k-accent-soft) !important; color: var(--k-ink) !important; border-color: var(--k-line) !important; }
html.skin-kit :is(.btn-gold, .btn-silver, .btn-elite, .btn-outline-gold) { border-radius: var(--k-btn-r) !important; box-shadow: none !important; background-image: none !important; }
html.skin-kit .btn-gold { background-color: var(--k-fill) !important; border-color: var(--k-fill) !important; color: var(--k-fill-ink) !important; }
html.skin-kit :is(.btn-silver, .btn-elite) { background-color: var(--k-ink) !important; border-color: var(--k-ink) !important; color: var(--k-paper) !important; }
html.skin-kit .btn-outline-gold { background-color: var(--k-surface) !important; border-color: var(--k-line) !important; color: var(--k-ink) !important; }
html.skin-kit :is(.btn-gold, .btn-silver, .btn-elite):hover { filter: brightness(1.12); transform: none !important; }
html.skin-kit .badge-gold-pill { background: var(--k-accent-soft) !important; color: var(--k-accent) !important; border-color: transparent !important; border-radius: calc(var(--k-btn-r) - 2px) !important; }
html.skin-kit .badge-gold-pill svg { color: var(--k-accent) !important; }
html.skin-kit .text-gold-gradient { background: none !important; color: var(--k-accent) !important; -webkit-text-fill-color: var(--k-accent) !important; font-style: normal !important; }
html.skin-kit :is(.gold-pill, .purple-pill) { background: var(--k-accent-soft) !important; color: var(--k-accent) !important; }
html.skin-kit :is(.featured-th, .featured-td) { background: var(--k-accent-soft) !important; }
html.skin-kit .featured-th { color: var(--k-accent) !important; }
html.skin-kit .toggle-btn.active { background-color: var(--k-ink) !important; color: var(--k-paper) !important; box-shadow: none !important; }
html.skin-kit :is(.billing-toggle-wrapper, .billing-toggle, .toggle-btn) { border-radius: var(--k-btn-r) !important; }

/* Contact + FAQ */
html.skin-kit .callout { border-left-color: var(--k-accent) !important; }
html.skin-kit .eyebrow { color: var(--k-accent) !important; }
html.skin-kit .contact-form-card :is(input, select, textarea) { border-radius: calc(var(--k-btn-r) - 2px) !important; }
html.skin-kit .contact-form-card button[type="submit"] { background: var(--k-ink) !important; color: var(--k-paper) !important; border-radius: var(--k-btn-r) !important; }

/* Footer keeps its dark base; links pick up the look */
html.skin-kit :is(.footer-nav-list a:hover, .contact-row svg) { color: var(--k-on-dark) !important; }

/* Every pressable thing answers the press */
html.skin-kit :is(.btn-secondary-glass, .btn-apple-cta, .btn-gold, .btn-silver, .btn-elite, .btn-outline-gold, .contact-form-card button[type="submit"], .toggle-btn) {
  transition: transform 160ms var(--k-ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease !important;
}
html.skin-kit :is(.btn-secondary-glass, .btn-apple-cta, .btn-gold, .btn-silver, .btn-elite, .btn-outline-gold, .contact-form-card button[type="submit"], .toggle-btn):active { transform: scale(0.97) !important; }

/* Shared hero layouts the looks opt into */
@media (min-width: 992px) {
  /* Left-aligned single column */
  html.hero-left .hero-container { justify-content: flex-start !important; }
  html.hero-left .hero-content { text-align: left !important; align-items: flex-start !important; max-width: 1100px !important; }
  html.hero-left :is(.hero-actions, .hero-feature-list) { justify-content: flex-start !important; }

  /* Split: words left, feature list as a panel on the right */
  html.hero-split .hero-content { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 72px; text-align: left !important; align-items: start !important; max-width: 1200px !important; width: 100%; }
  html.hero-split .hero-content > * { grid-column: 1; }
  html.hero-split .hero-content > .hero-feature-list { grid-column: 2; grid-row: 1 / span 5; align-self: center; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; margin: 0 !important; }
  html.hero-split .hero-actions { justify-content: flex-start !important; }
  html.hero-split .hero-trust-badge { justify-self: start; }
}
html.skin-kit .save-pill { background: var(--k-fill) !important; color: var(--k-fill-ink) !important; border-color: transparent !important; }
html.skin-kit .pricing-section { background: color-mix(in srgb, var(--k-ink) 3%, var(--k-paper)) !important; border-color: var(--k-line) !important; }