/* ==========================================================================
   TIOO marketing — the glass look (owner 2026-10-27), shared by every page
   rebuilt after the home page. A page opts in with the body class
   "mkt-glass" and links this sheet LAST (after its own page sheet). It only
   re-skins the page kit (tokens / base / components / pages.css): soft
   moon-blue light behind the sections, frosted cards with a bright inner
   edge, mono section labels without numbers, the night glass for the
   highlighted card and the final call to action. Markup is unchanged, so a
   page reads the same without it. No blur where the phone asks for less
   see-through (prefers-reduced-transparency).
   ========================================================================== */
.mkt-glass {
  --gl-night: #06080f;
  --gl-fill: rgba(255,255,255,.6);
  --gl-fill-2: rgba(255,255,255,.78);
  --gl-ring: inset 0 0 0 1px rgba(255,255,255,.95), 0 0 0 1px rgba(20,32,80,.07);
  --gl-shadow: 0 30px 60px -34px rgba(20,32,90,.35), 0 2px 6px -2px rgba(20,32,90,.08);
  --gl-blur: blur(20px) saturate(170%);
  --gl-glow-a: rgba(79,123,255,.20);
  --gl-glow-b: rgba(125,107,255,.14);
  --gl-night-card: radial-gradient(120% 80% at 20% 0%, #2a3a7a 0%, #111a45 45%, #070b1c 100%);
}

/* ---- bands: calm light with one soft glow of the moon blue ------------- */
.mkt-glass :is(.band-price, .band-warm, .band-blue):not(.cta-section) { background: var(--bg-2); }
.mkt-glass :is(.page-hero, .section):not(.dark):not(.cta-section) { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }  /* clip, not hidden: hidden makes a scroll box and stops sticky table headers */
.mkt-glass :is(.page-hero, .section):not(.dark):not(.cta-section)::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(42% 40% at 84% 22%, var(--gl-glow-a), transparent 70%), radial-gradient(34% 34% at 10% 86%, var(--gl-glow-b), transparent 70%);
}
.mkt-glass .page-hero::before { background: radial-gradient(46% 60% at 78% 8%, rgba(79,123,255,.26), transparent 70%), radial-gradient(34% 40% at 6% 70%, var(--gl-glow-b), transparent 70%) !important; }
.mkt-glass .section + .section { border-top: 0 !important; }

/* ---- section labels: mono, no numbers ---------------------------------- */
.mkt-glass .eyebrow { font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); gap: 0; }
.mkt-glass .eyebrow::before, .mkt-glass .eyebrow .num { display: none; }
.mkt-glass .spread h2, .mkt-glass .faq-head h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: .98; letter-spacing: -.045em; }
.mkt-glass .page-hero h1 { letter-spacing: -.05em; line-height: .96; }

/* ---- plan cards (.price-grid / .price) -------------------------------- */
.mkt-glass .price-grid { border: 0; background: none; overflow: visible; gap: 16px; }
.mkt-glass .price-grid > .price { border: 0 !important; border-radius: 26px; background: var(--gl-fill); box-shadow: var(--gl-ring), var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.mkt-glass .price-grid > .price:hover { transform: translateY(-4px); }
.mkt-glass .price.hi { background: var(--gl-night-card); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.3), 0 40px 80px -30px rgba(43,92,255,.55) !important; }
.mkt-glass .price.hi :is(.name, .amt, .amt .price-amount, li, .pr-inherit) { color: #fff; }
.mkt-glass .price.hi :is(.desc, .amt > span:not(.price-amount)) { color: rgba(255,255,255,.72); }
.mkt-glass .price.hi li { border-color: rgba(255,255,255,.12); }
.mkt-glass .price.hi li svg { color: #a9c0ff; }
.mkt-glass .price.hi .tagp { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); border-radius: 999px; }
.mkt-glass .price.hi .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.mkt-glass .price .btn-secondary { background: rgba(255,255,255,.7); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(20,32,80,.12); }
@media (max-width: 639px) {
  .mkt-glass .price-grid[data-swipe] > .price { border: 0 !important; border-radius: 22px; }
  /* Phones: the plan cards are a swipe row; the overflow: visible above
     switched the sideways scroll off. */
  .mkt-glass .price-grid[data-swipe] { overflow-x: auto; overflow-y: hidden; }
}

/* ---- questions: one frosted panel --------------------------------------- */
.mkt-glass .faq { padding: 8px 28px; border-radius: 28px; background: var(--gl-fill); box-shadow: var(--gl-ring), var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.mkt-glass .faq details:last-child { border-bottom: 0; }
.mkt-glass .faq summary svg { box-sizing: content-box; padding: 6px; border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1px rgba(20,32,80,.1); }
.mkt-glass .faq details[open] summary svg { background: var(--accent); color: #fff; box-shadow: none; }
@media (max-width: 599px) { .mkt-glass .faq { padding: 4px 18px; border-radius: 22px; } }

/* ---- final call to action: night with the moon glow ------------------- */
.mkt-glass .cta-section { position: relative; isolation: isolate; overflow: hidden; background: var(--gl-night); color: #fff; }
.mkt-glass .cta-section::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(44% 70% at 18% 30%, rgba(43,92,255,.34), transparent 70%), radial-gradient(30% 50% at 88% 80%, rgba(125,107,255,.2), transparent 70%); }
.mkt-glass .cta-section :is(h2, .note-row) { color: #fff; }
.mkt-glass .cta-section .cta-band p { color: rgba(255,255,255,.76); }
.mkt-glass .cta-section .note-row span { color: rgba(255,255,255,.7); }
.mkt-glass .cta-section :is(.btn-primary, .pcta-btn--primary) { background: #fff; color: var(--ink); border-color: #fff; }
.mkt-glass .cta-section .btn-secondary { color: #fff; background: rgba(255,255,255,.12); border-color: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.mkt-glass .cta-section .btn-secondary:hover { background: rgba(255,255,255,.2); color: #fff; }

/* ---- footer: the glow carries on ---------------------------------------- */
.mkt-glass .mkt-footer { position: relative; isolation: isolate; overflow: hidden; }
.mkt-glass .mkt-footer::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(40% 60% at 12% 0%, rgba(43,92,255,.22), transparent 70%); }

/* ---- pricing page (payments/pricing.html) ------------------------------ */
.mkt-glass .pr-cycle, .mkt-glass .pr-currency__btn { border: 0; background: var(--gl-fill-2); box-shadow: var(--gl-ring); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.mkt-glass .pr-cycle { border-radius: 999px; }
.mkt-glass .pr-cycle__btn { border-radius: 999px; }
.mkt-glass .pr-currency__btn { border-radius: 999px; }
.mkt-glass .pr-currency__btn.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.mkt-glass .pr-enterprise, .mkt-glass .pr-rooms-math { padding: 16px 20px; border-radius: 20px; background: var(--gl-fill); box-shadow: var(--gl-ring); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.mkt-glass .pr-compare-wrap { padding: 6px; border-radius: 26px; background: var(--gl-fill); box-shadow: var(--gl-ring), var(--gl-shadow); }
.mkt-glass .pr-compare thead th { background: rgba(247,248,252,.94); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.mkt-glass .pr-compare thead th:first-child { border-top-left-radius: 20px; }
.mkt-glass .pr-compare thead th:last-child { border-top-right-radius: 20px; }
.mkt-glass .pr-compare th.compare-highlight { background: rgba(43,92,255,.1); color: var(--accent-ink); }
.mkt-glass .pr-compare .pr-group th { background: transparent; }
.mkt-glass .pr-compare .pr-group button { background: rgba(43,92,255,.06); border-radius: 14px; }
.mkt-glass .pr-addons { border-top: 0; gap: 12px; }
.mkt-glass .pr-addons li { padding: 20px; border: 0; border-radius: 22px; background: var(--gl-fill); box-shadow: var(--gl-ring), 0 20px 40px -30px rgba(20,32,90,.3); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.mkt-glass .pr-addons .ic { border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #dfe7ff 60%, #b7c9fb); color: var(--accent-ink); box-shadow: inset 0 0 0 1px rgba(95,127,232,.35), 0 6px 14px -6px rgba(43,92,255,.5); }
@media (max-width: 767px) { .mkt-glass .pr-compare-wrap { padding: 0; border-radius: 18px; } }

/* ---- feature pages: frames and small cards on glass ----------------------
   Only the outer frames are frosted; the drawn product screens inside them
   stay white like the real app. */
.mkt-glass :is(.fb1-card, .fb1-why > *, .related-card, .fb-stage, .mock-stage, .stat-band, .fb1-plans, .fb1-block) {
  border: 0 !important; border-radius: 24px; background: var(--gl-fill); box-shadow: var(--gl-ring), var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur);
}
.mkt-glass :is(.fb1-card, .related-card) { transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; }
.mkt-glass :is(.fb1-card, .related-card):hover { transform: translateY(-3px); box-shadow: var(--gl-ring), 0 40px 70px -34px rgba(20,32,90,.45); }
.mkt-glass .fb1-why > * { padding: 22px; }
.mkt-glass :is(.fb1-card, .fb1-why, .related-card, .sec-point) .ic,
.mkt-glass .fb1-why .ic {
  border: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #dfe7ff 60%, #b7c9fb); color: var(--accent-ink); box-shadow: inset 0 0 0 1px rgba(95,127,232,.35), 0 6px 14px -6px rgba(43,92,255,.5);
}
.mkt-glass :is(.fb1-chips li, .fb1-chips span.chip, .feat-chip, .chip) { border: 0; border-radius: 999px; background: var(--gl-fill-2); box-shadow: var(--gl-ring); }
.mkt-glass :is(.fb1-editor, .fb1-inbox, .fb1-pin, .fb1-template, .ui-frame, .mock-card, .mock-phone) { box-shadow: 0 0 0 1px rgba(20,32,80,.08), 0 40px 80px -36px rgba(20,32,90,.45); }
.mkt-glass .kit-step { border-bottom-color: rgba(20,32,80,.08); }
.mkt-glass .kit-step .n { background: linear-gradient(180deg, var(--ink) 30%, #4f7bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mkt-glass .kit-step .n::before { color: rgba(79,123,255,.35); -webkit-text-fill-color: rgba(79,123,255,.35); }
.mkt-glass .section.dark, .mkt-glass .proof-block--dark { background: var(--gl-night); }

/* ---- "who it's for" landing pages (landing.html + local/*.html) -------- */
.mkt-glass :is(.lp-plan__card, .lp-saving, .lp-plan__not, .lc-plan) { border: 0 !important; border-radius: 24px; box-shadow: var(--gl-ring), var(--gl-shadow); }
.mkt-glass :is(.lp-plan__not, .lc-plan:not(.lc-plan--hi)) { background: var(--gl-fill); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.mkt-glass .lc-plan--hi { background: var(--gl-night-card); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 40px 80px -30px rgba(43,92,255,.55) !important; }
.mkt-glass .lc-plan--hi :is(.lc-plan__name, .lc-plan__price, li) { color: #fff; }
.mkt-glass .lc-plan--hi :is(.lc-plan__line, .lc-plan__price span) { color: rgba(255,255,255,.74); }
.mkt-glass .lp-photo { border: 0; border-radius: 28px; box-shadow: 0 40px 80px -40px rgba(20,32,90,.5); }
.mkt-glass .who-card { border-radius: 24px; }

/* ---- account pages (sign in, sign up, codes, password: accounts/_v3) --- */
body.au.mkt-glass { background: var(--bg-2); position: relative; isolation: isolate; }
body.au.mkt-glass::before { content: ""; position: fixed; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 20% 20%, rgba(79,123,255,.18), transparent 70%), radial-gradient(34% 44% at 80% 85%, var(--gl-glow-b), transparent 70%); }
.mkt-glass .au-header { background: rgba(255,255,255,.7); border-bottom-color: rgba(20,32,80,.06); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.mkt-glass .au-card { padding: 28px; border-radius: 28px; background: var(--gl-fill-2); box-shadow: var(--gl-ring), var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
@media (max-width: 539px) { .mkt-glass .au-card { padding: 20px 18px; border-radius: 22px; } }
.mkt-glass .au-side { background: transparent; border-color: rgba(20,32,80,.06); }
.mkt-glass .au-choice .pt-card-inner { border: 0; background: rgba(255,255,255,.7); box-shadow: var(--gl-ring); }
.mkt-glass .au-lang__menu { border: 0; border-radius: 18px; background: rgba(255,255,255,.92); box-shadow: var(--gl-ring), var(--gl-shadow); -webkit-backdrop-filter: var(--gl-blur); backdrop-filter: var(--gl-blur); }
.mkt-glass.au--app .au-card { background: none; box-shadow: none; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (prefers-reduced-transparency: reduce) {
  .mkt-glass { --gl-fill: #fff; --gl-fill-2: #fff; }
}