/* Marketiism OS public site theme (WP-4S). Loaded after site.css, only by ui/shells/site.html.
   Light lavender page, floating pill nav, big tight display type, 24px cards, violet accent.
   Every value comes from tokens.css (--site-* live there, scoped to body.site, light + dark).
   No colour literals here: ui/tests.py enforces it. */

/* ============================================================ Core token mapping inside the site */
.site {
  --font: var(--site-font);
  --mono: var(--site-mono);   /* WP-9D: system mono; the site loads one font family only */
  --bg: var(--site-bg);
  --surface: var(--site-surface);
  --surface-2: var(--site-surface-2);
  --surface-3: var(--site-violet-soft);
  --surface-sel: var(--site-violet-soft);
  --line: var(--site-line);
  --line-strong: var(--site-line-strong);
  --ink: var(--site-ink);
  --ink-2: var(--site-ink-2);
  --muted: var(--site-muted);
  --brand-ink: var(--site-violet-ink);
  --brand-soft: var(--site-violet-soft);
  --brand-btn: var(--site-btn);
  --brand-btn-hover: var(--site-btn-hover);
  --brand-btn-ink: var(--site-btn-ink);
  --link: var(--site-violet-ink);
  --link-hover: var(--site-btn-hover);
  --focus: var(--site-violet);
  --chrome: var(--site-chrome);
  --chrome-2: var(--site-chrome-2);
  --chrome-3: var(--site-chrome-3);
  --chrome-line: var(--site-chrome-line);
  --chrome-ink: var(--site-chrome-ink);
  --chrome-ink-2: var(--site-chrome-ink-2);
  --chrome-muted: var(--site-chrome-muted);
  --r-lg: var(--site-r-card);
  --shadow-pop: var(--site-shadow-nav);
  font-family: var(--site-font);
  background-color: var(--site-bg);
  background-image:
    radial-gradient(60% 70% at 85% 0%, var(--site-hero-3) 0%, transparent 70%),
    radial-gradient(50% 60% at 5% 10%, var(--site-hero-4) 0%, transparent 70%),
    linear-gradient(180deg, var(--site-hero-2) 0%, var(--site-hero-1) 75%, var(--site-bg) 100%);
  background-size: 100% var(--site-hero-wash);
  background-repeat: no-repeat;
  color: var(--ink);
}

/* Buttons: pills on the public site */
.site .btn { border-radius: var(--r-pill); font-weight: var(--fw-semibold); }
.site .btn--primary { transition: background var(--t) var(--ease), transform var(--site-t-lift) var(--ease), box-shadow var(--site-t-lift) var(--ease); }
.site .btn--primary:hover { transform: translateY(-1px); box-shadow: var(--site-shadow-card); }
.site .btn:not(.btn--primary):not(.btn--ghost):not(.btn--icon) { background: var(--site-surface); border-color: var(--site-line-strong); color: var(--ink); }
.site .btn:not(.btn--primary):not(.btn--ghost):not(.btn--icon):hover { border-color: var(--site-violet); color: var(--site-violet-ink); }

/* Eyebrows: small violet label with a sparkle */
.eyebrow__spark { flex: none; }
.site .eyebrow, .site .hero__eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--site-violet-ink); font-family: var(--mono); font-size: var(--fs-12); font-weight: var(--fw-medium); letter-spacing: var(--track-caps); text-transform: uppercase; }
.site .band--chrome .eyebrow { color: var(--site-chrome-accent); }

/* ============================================================ Utility strip + pill nav */
.site .s-util { background: transparent; color: var(--muted); }
.site .s-util a { color: var(--ink-2); }
.site .s-util a:hover { color: var(--site-violet-ink); }
.site .s-util__note { color: var(--muted); }

.site .s-hdr { background: transparent; border-bottom: 0; padding-top: var(--s-2); pointer-events: none; }
.s-hdr__wrap { position: relative; pointer-events: auto; }
.s-hdr__wrap .wrap { padding-left: 0; padding-right: 0; max-width: none; }
.site .s-pill { height: var(--site-pill-h); padding: 0 var(--s-3) 0 var(--s-6); background: var(--site-pill-bg); border: 1px solid var(--site-line); border-radius: var(--r-pill); box-shadow: var(--site-shadow-nav); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.site .s-nav { justify-content: center; }
.site .s-nav__btn, .site .s-nav__link { border-radius: var(--r-pill); padding: 0 var(--s-4); font-size: var(--fs-14); }
.site .s-nav__btn:hover, .site .s-nav__link:hover, .site .s-nav__btn[aria-expanded="true"] { background: var(--site-violet-soft); color: var(--site-violet-ink); }
.site .s-nav__link[aria-current="page"] { color: var(--site-violet-ink); }
.site .s-brand { font-size: var(--fs-18); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); }

/* Dropdown panels (mega menus) hang under the pill */
.site .mega { top: calc(100% + var(--s-2)); left: 0; right: 0; border: 1px solid var(--site-line); border-radius: var(--site-r-panel); box-shadow: var(--site-shadow-lift); background: var(--site-surface); overflow: hidden; }
.site .mega__in { padding: var(--s-6); }
.site .mega__group h3 { font-family: var(--mono); border-bottom: 0; color: var(--muted); }
.site .mega__item { border-radius: var(--r); transition: background var(--t) var(--ease); }
.site .mega__item:hover, .site .mega__item:focus-visible { background: var(--site-violet-soft); }
.site .mega__item .i { color: var(--site-violet-ink); }
.site .mega__aside { border-left: 0; padding: var(--s-5); border-radius: var(--site-r-panel); background: var(--site-surface-2); }

/* ============================================================ Hero */
.site .hero { position: relative; overflow: hidden; background: transparent; padding: var(--s-10) 0 var(--site-space-band); isolation: isolate; }
.site .hero--page { background: transparent; border-bottom: 0; padding: var(--s-10) 0 var(--s-10); }
.site .hero__grid { position: relative; z-index: 1; }
.site .hero__title { font-family: var(--site-font); font-size: var(--site-fs-display); line-height: var(--site-lh-display); letter-spacing: var(--site-track-display); font-weight: var(--fw-bold); max-width: 16ch; }
.site .hero--page .hero__title { font-size: var(--site-fs-display-page); }
.site .hero__lead { font-size: var(--fs-18); color: var(--ink-2); }
.site .hero__fine { color: var(--muted); }
.hero--center .hero__grid { text-align: center; justify-items: center; }
.hero--center .hero__title, .hero--center .hero__lead { margin-left: auto; margin-right: auto; }
.hero--center .hero__actions { justify-content: center; }
.site .hero__media .mock { border-radius: var(--site-r-card); border-color: var(--site-glass-line); box-shadow: var(--site-shadow-lift); }

/* Frosted abstract shapes: pure CSS gradients, decorative only (aria-hidden) */
.hero__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.glass { position: absolute; display: block; border: 1px solid var(--site-glass-line); background: linear-gradient(140deg, var(--site-glass) 0%, var(--site-glass-2) 60%, var(--site-glass-tint) 100%); box-shadow: inset 0 1px 0 var(--site-glass-line), var(--site-shadow-card); animation: site-float var(--site-t-float) var(--ease) infinite alternate; }
.glass--ring { width: 340px; height: 340px; right: -60px; top: 40px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, transparent 0 38%, var(--site-glass-line) 38.5%, var(--site-glass) 44%, var(--site-glass-tint) 62%, var(--site-glass-2) 70%, transparent 70.5%); border: 0; box-shadow: none; }
.glass--orb { width: 180px; height: 180px; right: 22%; top: 58%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--site-glass-line) 0%, var(--site-glass) 25%, var(--site-glass-tint-2) 70%, var(--site-glass-shade) 100%); animation-delay: -3s; }
.glass--slab { width: 220px; height: 130px; right: 6%; bottom: 8%; border-radius: var(--site-r-card); transform: rotate(-14deg); animation-delay: -6s; }
.glass--chip { width: 96px; height: 96px; left: 4%; top: 18%; border-radius: var(--site-r-panel); transform: rotate(18deg); background: linear-gradient(140deg, var(--site-glass) 0%, var(--site-glass-tint-2) 100%); animation-delay: -1.5s; }
@keyframes site-float { from { translate: 0 0; } to { translate: 0 -14px; } }
.hero:has(.hero__media) .glass--slab { display: none; }

/* ============================================================ Bands */
.site .band { background: var(--site-surface); padding: var(--site-space-band) 0; }
.site .band--grey { background: var(--site-bg); }
.site .band--tight { padding: var(--site-space-band-sm) 0; }
/* band--lift: big rounded top corners that overlap the hero wash above it */
.band--lift { position: relative; z-index: 1; margin-top: calc(var(--site-r-section) * -1); border-radius: var(--site-r-section) var(--site-r-section) 0 0; box-shadow: 0 -1px 0 var(--site-line); }
.site .band--chrome { background: var(--site-chrome); }
.site .sec-head { max-width: 760px; margin-bottom: var(--s-9); }
.site .sec-head__title { font-size: var(--site-fs-h2); line-height: 1.06; letter-spacing: var(--site-track-display); }
.site .sec-head__text { color: var(--ink-2); }
.site .sec-head--center .sec-head__eyebrow { justify-content: center; }

/* ============================================================ Cards */
.site .pcard, .site .plan, .site .compare-wrap, .site .suite { border-radius: var(--site-r-card); border-color: var(--site-line); }
.site .pcard, .site .plan { padding: var(--s-7); box-shadow: var(--site-shadow-card); transition: transform var(--site-t-lift) var(--ease), box-shadow var(--site-t-lift) var(--ease), border-color var(--t) var(--ease); }
.site .pcard:hover { transform: translateY(-4px); box-shadow: var(--site-shadow-lift); border-color: var(--site-line-strong); }
.site .pcard__icon { border-radius: var(--r-pill); }
.site .pcard__group { font-family: var(--mono); }

.fcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); }
.fcard { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-7); background: var(--surface); border: 1px solid var(--line); border-radius: var(--site-r-card, var(--r-lg)); box-shadow: var(--site-shadow-card, none); transition: transform var(--site-t-lift, var(--t)) var(--ease), box-shadow var(--site-t-lift, var(--t)) var(--ease); }
.fcard:hover { transform: translateY(-4px); box-shadow: var(--site-shadow-lift, var(--shadow-pop)); }
.fcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; margin-bottom: var(--s-2); }
.fcard__icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-ink); }
.fcard__tags { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0; padding: 0; list-style: none; }
.pill-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-family: var(--mono); font-size: 11px; font-weight: var(--fw-medium); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.fcard__title { font-size: var(--site-fs-h3, var(--fs-20)); line-height: var(--lh-snug); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); }
.fcard__text { color: var(--ink-2); line-height: var(--lh-loose); }
.fcard__rows { margin: var(--s-2) 0 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.fcard__row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); }
.fcard__row dt { display: inline-flex; align-items: center; gap: var(--s-1); font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.fcard__row dd { margin: 0; color: var(--ink-2); }
.fcard__row--result dt, .fcard__row--result dd { color: var(--brand-ink); font-weight: var(--fw-semibold); }
.fcard__link { margin-top: auto; padding-top: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-1); font-weight: var(--fw-semibold); }
.fcard__link .i { transition: transform var(--t) var(--ease); }
.fcard:hover .fcard__link .i { transform: translateX(3px); }

/* Logo strip */
.logos { text-align: center; }
.logos__label { font-family: var(--mono); font-size: var(--fs-12); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-5); }
.logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4) var(--s-9); margin: 0; padding: 0; list-style: none; }
.logos__item { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-18); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); color: var(--muted); transition: color var(--t) var(--ease); }
.logos__item:hover { color: var(--ink); }

/* Pricing */
.site .plan--featured { border-color: var(--site-violet); box-shadow: 0 0 0 1px var(--site-violet), var(--site-shadow-lift); }
.site .plan__amount { font-size: var(--fs-56); letter-spacing: var(--site-track-display); }
.site .plan__features .i, .site .pcard__points .i, .site .feature__points .i { color: var(--site-violet-ink); }
.site .plan__features { border-top-style: dashed; }

/* FAQ: rounded cards */
.site .faq { border-top: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.site .faq__item { border: 1px solid var(--site-line); border-radius: var(--site-r-panel); background: var(--site-surface); padding: 0 var(--s-6); transition: border-color var(--t) var(--ease), box-shadow var(--site-t-lift) var(--ease); }
.site .faq__item[open] { border-color: var(--site-line-strong); box-shadow: var(--site-shadow-card); }
.site .faq__q { font-size: var(--fs-18); }
.site .faq__q:hover { color: var(--site-violet-ink); }
.site .faq__item[open] .faq__q .i { color: var(--site-violet-ink); }

/* CTA bands */
.cta-band--soft { background: transparent; }
.cta-band--soft .cta-band__in { padding: var(--s-10) var(--s-9); border-radius: var(--site-r-section, var(--r-lg)); border: 1px solid var(--line); background-color: var(--surface); background-image: radial-gradient(70% 120% at 100% 0%, var(--site-hero-3, var(--surface-3)) 0%, transparent 65%), linear-gradient(120deg, var(--site-hero-2, var(--surface-2)) 0%, var(--site-hero-1, var(--surface)) 100%); }
.site .cta-band__title { font-size: var(--site-fs-h2); line-height: 1.06; letter-spacing: var(--site-track-display); }

/* Proof + compare */
.site .proof { border-color: var(--site-line); }
.site .proof__figure { font-size: var(--fs-44); letter-spacing: var(--site-track-display); color: var(--ink); }
.site .compare thead .compare__us { box-shadow: inset 0 3px 0 var(--site-violet); }

/* ============================================================ Footer: dark, rounded top */
.site .s-foot { background: var(--site-chrome); border-radius: var(--site-r-section) var(--site-r-section) 0 0; padding: var(--s-10) 0 var(--s-6); margin-top: var(--s-6); border-top: 0; }
.s-foot__top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; padding-bottom: var(--s-9); margin-bottom: var(--s-9); border-bottom: 1px solid var(--chrome-line); }
.s-foot__line { max-width: 18ch; font-size: var(--site-fs-h2, var(--fs-32)); line-height: 1.06; letter-spacing: var(--site-track-display, var(--track-tight)); font-weight: var(--fw-bold); color: var(--chrome-ink); }
.s-foot__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.site .s-foot .s-foot__ghost { background: transparent; border-color: var(--chrome-muted); color: var(--chrome-ink); }
.site .s-foot .s-foot__ghost:hover { border-color: var(--chrome-ink); color: var(--chrome-ink); }
.site .s-foot__col h2 { font-family: var(--mono); }
.site .s-foot__brand .s-brand b { color: var(--site-chrome-accent); }
.site .band--chrome + .s-foot, .site .cta-band + .s-foot { border-top: 0; }

/* ============================================================ Mobile: pill keeps the burger, drawer is a rounded panel */
@media (max-width: 960px) {
  .site .s-pill { padding: 0 var(--s-2) 0 var(--s-4); }
  .site .s-drawer { top: calc(100% + var(--s-2)); left: 0; right: 0; height: auto; max-height: calc(100dvh - var(--site-pill-h) - var(--s-9)); border: 1px solid var(--site-line); border-radius: var(--site-r-panel); box-shadow: var(--site-shadow-lift); padding: var(--s-2) var(--s-5) var(--s-6); }
  .glass--ring { width: 220px; height: 220px; right: -80px; }
  .glass--orb, .glass--slab { display: none; }
}
@media (max-width: 760px) {
  .site .band { padding: var(--site-space-band-sm) 0; }
  .site .hero { padding: var(--s-8) 0 var(--s-10); }
  .site .hero__title { font-size: var(--site-fs-display); }
  .site .sec-head__title, .site .cta-band__title { font-size: var(--site-fs-h2); }
  .cta-band--soft .cta-band__in { padding: var(--s-8) var(--s-5); }
  .fcard, .site .pcard, .site .plan { padding: var(--s-6); }
  .fcard__row { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .site .plan__amount { font-size: var(--fs-44); }
  .site .faq__item { padding: 0 var(--s-4); }
  .site .s-foot { border-radius: var(--site-r-card) var(--site-r-card) 0 0; }
}

/* ============================================================ Motion */
@media (prefers-reduced-motion: reduce) {
  .glass { animation: none; }
  .site .pcard:hover, .fcard:hover, .site .btn--primary:hover { transform: none; }
}