/* Marketiism OS public site theme (WP-4S). Loaded after site.css, only by ui/shells/site.html.
   Warm paper page (marketiism.com brand, 15 Oct), floating pill nav, Space Grotesk display type, 24px cards, orange 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);
  --font-display: var(--site-font-display);   /* brand headings (marketiism.com) */
  --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, .site .s-nav__btn, .site .s-nav__link, .site .flist__num { font-family: var(--site-label); }   /* marketiism.com: Space Grotesk on nav + buttons */
.site .btn { letter-spacing: 0.01em; }
.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(--site-label); 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(--site-label); 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-display); 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(--site-label); }

.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(--site-label); 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(--site-label); 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(--site-label); }
.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; }
}

/* Logo plate in the pill header on phones (marketiism.com brand, 15 Oct): smaller wordmark so logo + Start free + menu
   fit at 375px; at 360px and below the plate shows the "ii" mark only. */
@media (max-width: 480px) {
  .site .s-hdr .brand-plate { height: 32px; padding: 0 var(--s-2); gap: 4px; }
  .site .s-hdr .brand__img { height: 11px; }
}
@media (max-width: 360px) {
  .site .s-hdr .brand-plate { padding: 0 2px; }
  .site .s-hdr .brand__img { display: none; }
  .site .s-hdr .brand__glyph { display: block; }
}

/* Plain black header (owner, 15 Oct): the pill is solid --logo-bg, with no translucent tint, blur or border glow. */
.site .s-pill { background: var(--logo-bg); border-color: var(--logo-bg); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.site .s-pill .s-nav__link, .site .s-pill .s-nav__btn, .site .s-pill .btn--ghost { color: var(--chrome-ink); }

/* ============================================================ Glow homepage (16 Oct concept): orange glow on black
   Reusable bits: .text-glow, .glow-frame, .glow-card, .band--glow, .band--glow-top, .glow-grid. */
.text-glow { background: linear-gradient(100deg, var(--site-glow-ink-1) 0%, var(--site-glow-ink-2) 60%, var(--site-glow-ink-1) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.glow-frame { position: relative; border-radius: calc(var(--site-r-card) + 6px); padding: 6px; background: linear-gradient(180deg, var(--site-glow-line), var(--site-glass-2) 40%, transparent); box-shadow: 0 -20px 120px -20px var(--site-glow), var(--site-shadow-lift); }
.glow-frame .mock { margin: 0; border-radius: var(--site-r-card); }
.glow-card { position: relative; border: 1px solid var(--site-line); border-radius: var(--site-r-card); background: radial-gradient(120% 80% at 50% 0%, var(--site-glow-soft), transparent 60%), var(--site-surface); transition: border-color var(--site-t-lift) var(--ease), transform var(--site-t-lift) var(--ease), box-shadow var(--site-t-lift) var(--ease); }
.glow-card:hover { border-color: var(--site-glow-line); transform: translateY(-2px); box-shadow: 0 24px 60px -30px var(--site-glow); }

.home-v2 .hero--glow { padding: var(--s-10) 0 var(--s-9); background: radial-gradient(55% 45% at 50% 0%, var(--site-glow) 0%, transparent 70%); }
.hero-glow__in { display: grid; justify-items: center; text-align: center; gap: var(--s-5); }
.hero-glow__badge { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; padding: 4px 14px 4px 4px; border: 1px solid var(--site-glow-line); border-radius: var(--r-pill); background: var(--site-glow-soft); color: var(--ink-2); font-size: var(--fs-13, 13px); }
.hero-glow__tag { padding: 2px 10px; border-radius: var(--r-pill); background: var(--site-violet); color: var(--site-btn-ink); font-weight: var(--fw-semibold); font-size: var(--fs-12); }
.hero-glow__title { max-width: 18ch; margin: 0 auto; }
.hero-glow__lead { max-width: 60ch; margin: 0 auto; }
.hero-glow__actions { justify-content: center; }
.hero-glow__shot { width: 100%; max-width: 1080px; margin-top: var(--s-7); text-align: left; }
.home-v2 .logos { margin-top: var(--s-8); width: 100%; }
.home-v2 .logos__row { justify-content: center; }
.home-v2 .logos__item { padding: var(--s-2) var(--s-4); border: 1px solid var(--site-line); border-radius: var(--r-pill); background: var(--site-surface); }

.bento { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-5); }
.bento__card { display: flex; flex-direction: column; overflow: hidden; grid-column: span 2; }
.bento__card--wide { grid-column: span 3; }
.bento__shot { position: relative; height: 260px; overflow: hidden; padding: var(--s-5) var(--s-5) 0; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, black 60%, transparent); mask-image: linear-gradient(180deg, black 60%, transparent); }
.bento__shot .mock { margin: 0; transform-origin: top left; }
.bento__shot .mock__caption { display: none; }
.bento__text { padding: var(--s-5) var(--s-6) var(--s-6); display: grid; gap: var(--s-2); }
.bento__text h3 { margin: 0; font-family: var(--site-font-display); font-size: var(--fs-18); }
.bento__text p { margin: 0; color: var(--muted); }
.bento__more { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: var(--s-2); font-weight: var(--fw-semibold); color: var(--ink); }
.bento__more:hover { color: var(--site-violet-ink); }

.band--glow { background: radial-gradient(70% 60% at 50% 0%, var(--site-glow) 0%, transparent 70%), linear-gradient(180deg, var(--site-violet-soft), var(--site-bg)); border-block: 1px solid var(--site-line); }
.home-v2__apps { margin-top: var(--site-space-band-sm); }
.band--glow-top { background: radial-gradient(50% 40% at 50% 0%, var(--site-glow-soft) 0%, transparent 70%); }
.home-v2 #pricing .plan--featured { border-color: var(--site-glow-line); box-shadow: 0 30px 80px -30px var(--site-glow); background: radial-gradient(120% 60% at 50% 0%, var(--site-glow-soft), transparent 70%), var(--site-surface); }
.glow-grid { padding: var(--s-6); border-radius: var(--site-r-section); background-image: linear-gradient(var(--site-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--site-grid-line) 1px, transparent 1px), radial-gradient(50% 70% at 30% 50%, var(--site-glow-soft), transparent 70%); background-size: 48px 48px, 48px 48px, 100% 100%; }
.home-v2__final .cta-band--soft .cta-band__in { background-image: radial-gradient(60% 120% at 50% 100%, var(--site-glow) 0%, transparent 70%); border-color: var(--site-glow-line); text-align: center; }

@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr; }
  .bento__card, .bento__card--wide { grid-column: auto; }
  .bento__shot { height: 220px; }
}
@media (prefers-reduced-motion: reduce) { .glow-card, .glow-card:hover { transition: none; transform: none; } }

/* Homepage interactivity (web/home.js): hero tabs, scroll reveal, cursor glow */
.hero-tabs { width: 100%; max-width: 1080px; margin-top: var(--s-7); display: grid; gap: var(--s-4); justify-items: center; }
.hero-tabs .hero-glow__shot { margin-top: 0; }
.hero-tabs__list { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: var(--s-1); padding: 4px; border: 1px solid var(--site-line); border-radius: var(--r-pill); background: var(--site-surface); }
.hero-tabs__tab { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: var(--s-2); height: 38px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: inherit; font-weight: var(--fw-semibold); cursor: pointer; transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.hero-tabs__tab:hover { color: var(--ink); }
.hero-tabs__tab[aria-selected="true"] { background: var(--site-glow-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--site-glow-line); }
.hero-tabs__tab:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
.hero-tabs__bar { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--site-violet); transform: scaleX(0); transform-origin: left; }
.is-auto .hero-tabs__tab[aria-selected="true"] .hero-tabs__bar { animation: hero-tab-progress 6s linear forwards; }
@keyframes hero-tab-progress { to { transform: scaleX(1); } }
.hero-tabs__panel:not([hidden]) { animation: hero-panel-in 420ms var(--ease) both; }
@keyframes hero-panel-in { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.hero-tabs__caption { margin: 0; text-align: center; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.bento__card.reveal:nth-child(2) { transition-delay: 80ms; } .bento__card.reveal:nth-child(3) { transition-delay: 140ms; } .bento__card.reveal:nth-child(4) { transition-delay: 200ms; }

.glow-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--site-glow-soft), transparent 70%); transition: opacity var(--site-t-lift) var(--ease); z-index: 0; }
.glow-card:hover::before { opacity: 1; }
.glow-card > * { position: relative; z-index: 1; }
.hero-glow__badge { animation: badge-pulse 3s var(--ease) infinite; }
@keyframes badge-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--site-glow-soft); } 50% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-tabs__panel:not([hidden]), .hero-glow__badge { animation: none; }
}
/* Final CTA on the homepage: one centred column (text and buttons together) */
.home-v2__final .cta-band__in { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.home-v2__final .cta-band__actions { justify-content: center; }

/* Soft CTA cards keep the page gutter (the card is also the .wrap, so it filled the width under 1200px) */
.cta-band--soft .cta-band__in { width: calc(100% - 2 * var(--s-6)); }
@media (max-width: 640px) { .cta-band--soft .cta-band__in { width: calc(100% - 2 * var(--s-4)); } }

/* Feature lists on the public site: glow cards with an icon chip, so short lists don't float in empty space */
.site .flist { gap: var(--s-4); }
.site .flist__item { position: relative; padding: var(--s-6); border: 1px solid var(--site-line); border-radius: var(--site-r-panel); background: radial-gradient(120% 90% at 0% 0%, var(--site-glow-soft), transparent 55%), var(--site-surface); transition: border-color var(--site-t-lift) var(--ease), transform var(--site-t-lift) var(--ease), box-shadow var(--site-t-lift) var(--ease); }
.site .flist__item:hover { border-color: var(--site-glow-line); transform: translateY(-2px); box-shadow: 0 24px 60px -34px var(--site-glow); }
.site .flist__icon { box-sizing: content-box; width: 22px; height: 22px; padding: 10px; margin-bottom: var(--s-2); border-radius: 12px; background: var(--site-glow-soft); box-shadow: inset 0 0 0 1px var(--site-glow-line); color: var(--site-violet-ink); }
.site .flist__num { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: var(--s-2); border-radius: 12px; background: var(--site-glow-soft); box-shadow: inset 0 0 0 1px var(--site-glow-line); }
.site .flist__title { font-family: var(--site-font-display); font-size: var(--fs-18); margin: 0; }
.site .flist__text { margin: 0; color: var(--muted); }
.site .flist__text:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .site .flist__item, .site .flist__item:hover { transition: none; transform: none; } }

/* ============================================================ Homepage upgrade 2: numbers, marquee, animated borders */
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.home-v2 .hero--glow { background-image: radial-gradient(55% 45% at 50% 0%, var(--site-glow) 0%, transparent 70%), linear-gradient(var(--site-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--site-grid-line) 1px, transparent 1px); background-size: 100% 100%, 56px 56px, 56px 56px; background-position: 0 0, center top, center top; -webkit-mask-image: none; }
/* Hero showcase frame: static soft border. The rotating orange arc made an orange streak jump around the frame
   (and across its corners) every time the tab changed the frame's height, so it no longer spins. */
.hero-glow__shot { background: linear-gradient(180deg, var(--site-glow-line), var(--site-glass-2) 40%, transparent); animation: none; }
/* Keep the frame the height of its tallest tab so switching tabs does not make the page jump: panels share one grid
   cell and the hidden ones stay laid out but invisible (visibility:hidden also removes them from focus and screen readers). */
.hero-glow__shot { display: grid; }
.hero-glow__shot > .hero-tabs__panel { grid-area: 1 / 1; min-width: 0; }
.hero-glow__shot > .hero-tabs__panel[hidden] { display: block !important; visibility: hidden; } /* base.css has [hidden]{display:none !important} */
.home-v2 #pricing .plan--featured { background: radial-gradient(120% 60% at 50% 0%, var(--site-glow-soft), transparent 70%) padding-box, var(--site-surface) padding-box, conic-gradient(from var(--spin), var(--site-line) 0deg, var(--site-glow-ink-2) 60deg, var(--site-line) 140deg, var(--site-line) 360deg) border-box; border: 1px solid transparent; animation: spin-border 6s linear infinite; }
@keyframes spin-border { to { --spin: 360deg; } }

.logos--marquee { overflow: hidden; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.home-v2 .marquee__track { flex: none; display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: var(--s-3); margin: 0; padding: 0 var(--s-3) 0 0; list-style: none; animation: marquee 32s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); width: 100%; max-width: 1080px; margin: var(--s-6) 0 0; }
.numbers__item { padding: var(--s-5) var(--s-4); text-align: center; border-radius: var(--site-r-panel); }
.numbers__value { margin: 0; font-family: var(--site-font-display); font-size: clamp(28px, 3.4vw, 44px); font-weight: var(--fw-bold); letter-spacing: -0.03em; line-height: 1.1; background: linear-gradient(180deg, var(--site-ink), var(--site-glow-ink-1)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.numbers__label { margin: var(--s-1) 0 0; color: var(--muted); font-size: var(--fs-14); }

/* App and trade grids: separate glow panels with icon chips instead of one flat table */
.site .suite { gap: var(--s-4); border: 0; background: transparent; overflow: visible; }
.site .suite__group { padding: var(--s-5); border: 1px solid var(--site-line); border-radius: var(--site-r-panel); background: radial-gradient(120% 70% at 0% 0%, var(--site-glow-soft), transparent 55%), var(--site-surface); }
.site .suite__group + .suite__group { border-left: 1px solid var(--site-line); }
.site .suite__label { color: var(--site-violet-ink); }
.site .suite__item { align-items: center; transition: background var(--t) var(--ease), transform var(--t) var(--ease); }
.site .suite__item:hover { background: var(--site-glow-soft); transform: translateX(2px); }
.site .suite__item .i { box-sizing: content-box; padding: 7px; margin-top: 0; border-radius: 10px; background: var(--site-glow-soft); box-shadow: inset 0 0 0 1px var(--site-glow-line); flex: none; }

@media (max-width: 900px) { .numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .hero-glow__shot, .home-v2 #pricing .plan--featured, .home-v2 .marquee__track { animation: none; }
  .marquee { flex-wrap: wrap; justify-content: center; -webkit-mask-image: none; mask-image: none; }
  .marquee__track[aria-hidden] { display: none; }
  .home-v2 .marquee__track { flex-wrap: wrap; justify-content: center; }
}
/* Feature cards: two columns down to phone width, one column only on phones */
@media (max-width: 760px) { .site .flist { --flist-cols: 2 !important; } .site .suite { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .site .flist { --flist-cols: 1 !important; } .site .suite { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) and (min-width: 561px) { .site .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site .fcard { background: radial-gradient(120% 90% at 0% 0%, var(--site-glow-soft), transparent 55%), var(--site-surface); transition: border-color var(--site-t-lift) var(--ease), transform var(--site-t-lift) var(--ease); }
.site .fcard:hover { border-color: var(--site-glow-line); transform: translateY(-2px); }

/* Footer (16 Oct): brand blurb, solutions in two columns, legal links only in the bottom row, soft glow */
.site .s-foot { position: relative; overflow: hidden; background-image: radial-gradient(50% 300px at 50% 0%, var(--site-glow-soft), transparent 70%); }
.site .s-foot__grid { grid-template-columns: minmax(220px, 1.4fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row; gap: var(--s-7); }
.s-foot__col--wide ul { display: block !important; columns: 2; column-gap: var(--s-6); }
.s-foot__col--wide li { break-inside: avoid; margin-bottom: var(--s-2); }
.site .s-foot__col a:not(.btn) { transition: color var(--t) var(--ease), padding var(--t) var(--ease); }
.site .s-foot__col a:not(.btn):hover { color: var(--site-chrome-accent); }
.s-foot__tag { margin: var(--s-4) 0 0; color: var(--chrome-muted); max-width: 30ch; line-height: 1.5; }
.s-foot__made { display: inline-flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 6px 12px; border: 1px solid var(--site-glow-line); border-radius: var(--r-pill); background: var(--site-glow-soft); color: var(--chrome-ink-2); font-size: var(--fs-12); }
.s-foot__made .i { color: var(--site-chrome-accent); }
.site .s-foot__legal a:not(.btn):hover { color: var(--site-chrome-accent); }
@media (max-width: 1100px) { .site .s-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site .s-foot__brand { grid-column: 1 / -1; } .s-foot__col--wide { grid-column: span 2; } }
@media (max-width: 760px) { .site .s-foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-foot__col--wide { grid-column: 1 / -1; } }
@media (max-width: 420px) { .s-foot__col--wide ul { columns: 1; } }

/* One content width on the public site (16 Oct). Every section block is as wide as the page content (.wrap minus its
   gutter, the same width as the header pill): FAQ lists, the hero showcase and its tabs, the number strip and the
   soft CTA card no longer sit at their own 860 / 1080 / 1200 px. Text measures (.sec-head, .prose, lead copy) stay
   narrow on purpose; they are line lengths, not section widths. */
.site .faq { max-width: none; }
.hero-glow__shot, .hero-tabs, .numbers { max-width: none; }
.cta-band--soft .cta-band__in { max-width: calc(var(--wrap) - 2 * var(--s-6)); }
@media (max-width: 760px) { .cta-band--soft .cta-band__in { width: calc(100% - 2 * var(--s-4)); } } /* same breakpoint as .wrap's gutter */

/* 17 Oct (owner): Solutions mega menu fits one screen without scrolling: 4 columns, tighter rows, 2-line blurbs. */
.site #mega-solutions .mega__in { grid-template-columns: minmax(0, 1fr) 220px; gap: var(--s-5); padding-block: var(--s-4); }
.site #mega-solutions .mega__grid--list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-1) var(--s-3); }
.site #mega-solutions .mega__item { padding: var(--s-2) var(--s-2); }
.site #mega-solutions .mega__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.site #mega-solutions .mega__aside { align-self: start; }
.site .mega { max-height: calc(100vh - 150px); overflow-y: auto; }
@media (max-width: 1200px) { .site #mega-solutions .mega__grid--list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 17 Oct (owner): wider public site. One content width for every page and section: 1440px (was 1200px). */
.site { --wrap: 1440px; }

/* 17 Oct (owner): header in the Mailgun style. A thin utility strip (tools, partners, about, contact, language), then a
   flat full-width bar: logo, menu next to it, Log in link, outline and filled buttons on the right. */
.site .s-util { background: var(--site-chrome-2); border-bottom: 1px solid var(--site-line); }
.site .s-util__in { height: 38px; }
.site .s-util__links { gap: var(--s-5); font-size: var(--fs-13, 13px); }
.site .s-util .s-lang--util { display: inline-flex; align-items: center; }
.site .s-hdr__actions > .s-lang { display: none; }
.site .s-hdr { background: var(--site-chrome); border-bottom: 1px solid var(--site-line); padding: 0; pointer-events: auto; }
.site .s-hdr__wrap { position: static; }
.site .s-hdr .s-hdr__in.s-pill { height: 72px; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; -webkit-backdrop-filter: none; backdrop-filter: none; gap: var(--s-5); }
.site .s-hdr .s-nav { justify-content: flex-start; margin-left: var(--s-2); }
.site .s-hdr .s-nav__btn, .site .s-hdr .s-nav__link { border-radius: var(--r-sm); padding: 0 var(--s-3); color: var(--site-ink); font-weight: 500; }
.site .s-hdr .s-hdr__actions { gap: var(--s-4); }
.site .s-login { color: var(--site-violet-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; font-family: var(--site-label); }
.site .s-login:hover { color: var(--site-ink); }
.site .s-btn-outline { border: 1px solid var(--site-line-strong); color: var(--site-ink); background: transparent; border-radius: var(--r-pill); }
.site .s-btn-outline:hover { border-color: var(--site-violet); color: var(--site-violet-ink); background: transparent; }
.site .mega { top: 100%; left: 0; right: 0; border-radius: 0 0 var(--site-r-panel) var(--site-r-panel); border-width: 0 0 1px; box-shadow: var(--site-shadow-lift); }
@media (max-width: 1100px) { .site .s-hdr .s-hdr__in.s-pill { height: 60px; } }
@media (max-width: 760px) {
  .site .s-util__in { height: 34px; }
  .site .s-util__links { gap: var(--s-4); white-space: nowrap; }
  .site .s-util__links > a:nth-of-type(-n+2) { display: none; }  /* phones: only Contact sales and language in the strip */
}