/* Marker: a research notebook. Off-white and charcoal with a lime highlighter on key words;
   Bricolage Grotesque headlines; topographic contour lines; the featured plan flips to a dark card. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

html.skin-marker {
  --k-paper: #fafaf7;
  --k-surface: #ffffff;
  --k-ink: #18181b;
  --k-text: #3f3f46;
  --k-muted: #71717a;
  --k-line: #e7e5df;
  --k-accent: #4d7c0f;
  --k-accent-soft: #ecfccb;
  --k-fill: #bef264;
  --k-fill-ink: #18181b;
  --k-on-dark: #bef264;
  --k-head: 'Bricolage Grotesque', -apple-system, sans-serif;
  --k-body: 'DM Sans', -apple-system, sans-serif;
  --k-head-weight: 800;
  --k-head-track: -0.04em;
  --k-mark: color-mix(in srgb, var(--k-fill) 55%, #fff);   /* highlighter stroke */
  --k-r: 18px;
  --k-btn-r: 12px;
}

html.skin-marker .bg-grid {
  background-image: url('../../img/skins/contour.svg') !important;
  background-size: 900px auto !important;
  background-position: center !important;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 80%) !important;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 80%) !important;
}
/* Highlighter stroke behind the rotating word and the plans heading */
html.skin-marker :is(.aurora-highlight, .text-gold-gradient) {
  color: var(--k-ink) !important; -webkit-text-fill-color: var(--k-ink) !important;
  background: linear-gradient(transparent 58%, var(--k-mark) 58%, var(--k-mark) 92%, transparent 92%) !important;
  -webkit-background-clip: border-box !important; background-clip: border-box !important;
  padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
html.skin-marker .editorial-title .indent { color: var(--k-ink) !important; background: linear-gradient(transparent 60%, var(--k-mark) 60%, var(--k-mark) 92%, transparent 92%); }
html.skin-marker .hero-title { font-size: clamp(2.8rem, 6vw, 4.8rem) !important; line-height: 1.02 !important; }
html.skin-marker .nav-link.pill-active { color: var(--k-ink) !important; }
html.skin-marker .btn-secondary-glass { background: var(--k-fill) !important; border-color: var(--k-ink) !important; color: var(--k-ink) !important; box-shadow: 3px 3px 0 var(--k-ink) !important; }
html.skin-marker .btn-secondary-glass:hover { background: var(--k-mark) !important; border-color: var(--k-ink) !important; }
html.skin-marker .hero-feature-list svg { color: var(--k-ink) !important; background: var(--k-mark); border-radius: 8px; padding: 4px; width: 28px !important; height: 28px !important; }
html.skin-marker .item-number { background: var(--k-mark); color: var(--k-ink) !important; border-radius: 6px; padding: 0 6px; font-style: normal !important; }

/* Featured plan as an inverted card */
html.skin-marker .card-gold.featured { background: var(--k-ink) !important; border-color: var(--k-ink) !important; }
html.skin-marker .card-gold.featured :is(.plan-name, .price-value, .price-period, .features-heading, .features-list li, .card-desc, .billing-note, .compliance-tag) { color: #e4e4e7 !important; }
html.skin-marker .card-gold.featured :is(.plan-name, .price-value) { color: #fff !important; }
html.skin-marker .card-gold.featured :is(.card-target, .text-emerald, .text-amber) { color: var(--k-fill) !important; }
html.skin-marker .card-gold.featured .check-icon { stroke: var(--k-fill) !important; }
html.skin-marker .card-gold.featured :is(.card-header, .card-footer) { background: transparent !important; border-color: #ffffff1f !important; }
html.skin-marker .card-gold.featured .compliance-tag svg { color: var(--k-fill) !important; }
html.skin-marker :is(.featured-th, .featured-td) { background: color-mix(in srgb, var(--k-fill) 16%, #fff) !important; }