/* The glass layer over website-v2's pages: the look of style page 40 (Dasha, 17 Oct 2026).
   Loaded after site.css and v2.css on every page but the landing, which carries its own styles. */
body.glass { --bg: #f3f2f7; --paper: #ffffff; --paper2: rgba(255, 255, 255, .34); --card: rgba(255, 255, 255, .52);
  --ink: #191826; --ink2: #5e5c70; --ink3: #7a788c; --vio: #6E72F2; --accent: #6E72F2; --accent-ink: #5053D0; --accent-rgb: 110, 114, 242;
  --line: rgba(110, 114, 242, .18); --line2: rgba(255, 255, 255, .78); --r: 22px; --r-input: 12px; --line-input: #E7E7E7;
  --plate: rgba(25, 24, 38, .96); --plate-ink: #fff; --plate-ink2: rgba(255, 255, 255, .66); --plate-line: rgba(255, 255, 255, .22);
  --glass: rgba(255, 255, 255, .46); --glass2: rgba(255, 255, 255, .7); --edge: rgba(255, 255, 255, .78);
  --shadow: 0 18px 50px rgba(64, 44, 140, .12), 0 2px 6px rgba(64, 44, 140, .06);
  --serif: 'Instrument Serif', Georgia, serif; --sans: 'Sora', system-ui, sans-serif;
  background: var(--bg); color: var(--ink); font-family: var(--sans); }
body.glass .aura { position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background: radial-gradient(34vmax 30vmax at 18% 22%, rgba(186, 166, 255, .65), transparent 70%), radial-gradient(30vmax 26vmax at 84% 18%, rgba(255, 200, 178, .62), transparent 70%),
              radial-gradient(34vmax 30vmax at 76% 82%, rgba(166, 232, 214, .6), transparent 70%), radial-gradient(28vmax 26vmax at 12% 86%, rgba(176, 210, 255, .6), transparent 70%);
  filter: blur(10px); animation: aura-drift 38s ease-in-out infinite alternate; }
@keyframes aura-drift { to { transform: translate3d(2vmax, -2vmax, 0) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { body.glass .aura { animation: none; } }
/* a plain page (Dasha, 22 Oct: the moving background only on the landing and the product pages; Log in, Pricing, Support,
   Contact, Community, Partners, Terms and Privacy on one solid colour): the base colour of the others */
body.glass.plain { background: #eef0f6; }
body.glass.plain .aura { display: none; }

/* type: Sora for everything, the serif italic only for the accent words */
body.glass h1, body.glass h2, body.glass h3, body.glass .h1, body.glass .h2, body.glass .step .st, body.glass .faq dt, body.glass .ct, body.glass .plan h3, body.glass .quote { font-family: var(--sans); font-weight: 500; letter-spacing: -.03em; }
body.glass .cb, body.glass .step p { font-weight: 400; letter-spacing: 0; color: var(--ink2); }
body.glass h1 em, body.glass h2 em, body.glass .h1 em, body.glass .h2 em { font: italic 400 1.1em/1 var(--serif); letter-spacing: -.01em; color: var(--vio); }
body.glass .eyebrow, body.glass .posts .k, body.glass .plate .eyebrow, body.glass .names .eyebrow { color: var(--vio); font-weight: 500; letter-spacing: .12em; }

/* the glass surfaces */
body.glass .gl, body.glass .step, body.glass .stores li, body.glass .frame, body.glass .plan, body.glass .form, body.glass .tile, body.glass .card, body.glass .events li, body.glass .posts > *, body.glass .contact-aside, body.glass .code, body.glass .faq div {
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border: 1px solid var(--edge); box-shadow: var(--shadow); border-radius: var(--r); }
body.glass .step { padding: 26px 26px 28px; }
body.glass .faq div { padding: 20px 24px; margin-bottom: 12px; border-top: 1px solid var(--edge); }
body.glass .stores li { border-radius: 16px; }
body.glass .plan.is-rec { border-color: var(--vio); box-shadow: 0 0 0 1px var(--vio), var(--shadow); }
body.glass .form { background: rgba(255, 255, 255, .6); }
body.glass .field input, body.glass .field select, body.glass .field textarea { background: #fff; }  /* the fields as the platform's: white, 2 px #E7E7E7, radius 12, as the select (assets/select.css) */
body.glass .field input, body.glass .field select, body.glass .field textarea { border-color: var(--line-input); }

/* the bar: a floating glass pill, as on the landing */
body.glass .site-header { position: sticky; top: 14px; z-index: 60; margin: 14px auto 0; max-width: 1344px; width: calc(100% - 2 * clamp(16px, 4vw, 48px)); border-radius: 18px;
  background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border: 1px solid var(--edge); box-shadow: var(--shadow); }
body.glass .bar { min-height: 60px; padding: 0 12px 0 22px; }
body.glass .nav > ul > li > a, body.glass .nav > ul > li > button { font: 400 14px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink2); }
body.glass .nav .menu { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow); }

/* buttons: soft rectangles, ink or glass */
body.glass .btn { border-radius: 14px; font: 500 15px/1 var(--sans); letter-spacing: 0; text-transform: none; min-height: 48px; padding: 0 24px; border: 1px solid var(--edge); background: var(--glass2); color: var(--ink); box-shadow: var(--shadow); }
body.glass .btn:hover { background: rgba(255, 255, 255, .92); color: var(--ink); }
body.glass .btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 10px 30px rgba(25, 24, 38, .22); }
body.glass .btn--primary:hover { background: #2b2940; border-color: #2b2940; color: #fff; }
body.glass .link { border-bottom: 0; color: var(--vio); font-weight: 500; }
body.glass .link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* the hero and the footer */
body.glass .site-footer { background: transparent; border-top: 0; }
body.glass .site-footer > .wrap { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border: 1px solid var(--edge); box-shadow: var(--shadow); border-radius: 26px; padding: 40px 40px 28px; }
body.glass .site-footer h2 { color: var(--vio); letter-spacing: .12em; font-weight: 500; }
@media (max-width: 640px) { body.glass .site-header { top: 8px; margin-top: 8px; } body.glass .site-footer > .wrap { padding: 28px 20px 20px; } }
/* surfaces that site.css paints with the paper colour go clear; the paper stays white for ink-on-paper text (tabs, badges) */
body.glass, body.glass .sec, body.glass .nav { background: transparent; }
body.glass { background: var(--bg); }
body.glass .plan .rec { background: var(--vio); color: #fff; }
body.glass .posts a { font-family: var(--sans); font-weight: 500; letter-spacing: -.01em; }
body.glass .posts li { padding: 18px 20px; border-top: 1px solid var(--edge); }
body.glass .hero3d .ring, body.glass .ring-poster { background: transparent; }

/* Resources, the live sessions (Dasha, 20 Oct): each row an even card, its parts centred, the label in the brand blue, the title in Sora */
body.glass .events { gap: 12px; }
body.glass .events li { grid-template-columns: 132px minmax(0, 1fr) auto; padding: 18px 20px 18px 28px; border-radius: 20px; align-items: center; }
body.glass .events .when { font: 500 13px/1.3 var(--sans); letter-spacing: .04em; color: #6E72F2; }
body.glass .events .what { font: 500 17px/1.3 var(--sans); letter-spacing: -.01em; }
body.glass .events .what small { margin-top: 4px; font-size: 14px; }
@media (max-width: 700px) { body.glass .events li { grid-template-columns: 1fr; padding: 18px 20px; } }

/* audit fixes (20 Oct) */
body.glass .contact-aside { padding: 26px 28px; }
body.glass .plan { position: relative; }
body.glass .plan h3 .rec { position: absolute; top: 18px; right: 18px; margin: 0; }  /* the badge no longer pushes the price down: the four cards line up */
@media (min-width: 1001px) { body.glass .posts, body.glass .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }  /* six cards: two full rows */
body.glass .site-footer a { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  body.glass .field input, body.glass .field textarea { font-size: 16px; }  /* 16 px: iOS does not zoom the page into a field */
}
/* a phone (Dasha, 22 Oct): centred headings and lines break evenly, no word alone on the last line */
@media (max-width: 860px) { body.glass :is(h1, h2, .sub) { text-wrap: balance; } }