/* GLASS-SITE-1 (2026-09-30): the Liquid Glass skin for every page of levelupgrowth.io (Owner: "continue working on all
   other pages in accordance to my guidelines"). Loaded after site.css on every page; the whole page sits inside
   .lg.lg-site (layout.php) so lug-glass.css's tokens apply, and this file re-skins site.css's own classes: the aurora
   ground, a floating glass header, glass cards and panels, capsule buttons, Plus Jakarta Sans for reading text, Manrope
   for headlines (the brand hero face). Nothing here changes a page's structure, only its material. */

/* 0. ground: the page paints the gradient ground; the aurora is fixed behind everything */
html.lg-glass, html.lg-glass body { background: #F3F4F9; }
html.lg-glass[data-theme="dark"], html.lg-glass[data-theme="dark"] body { background: #0A0B16; }
html .lg-site { position: static; overflow: visible; isolation: auto; background: transparent; color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.7; }
html .lg-site > .lg-aurora { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html .lg-site .lg-aurora i { animation: none !important; }
html .lg-site .lg.mk > .lg-aurora { display: none; }   /* the home brings its own; the page one serves it */
html .lg-site #mk-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; background: var(--brand-grad); transform-origin: left; transform: scaleX(0); z-index: 70; pointer-events: none; }

/* 1. the site's tokens take glass values (site.css reads these everywhere) */
html .lg-site {
  --bg: var(--ground); --bg-2: transparent; --card: var(--glass); --card-2: var(--glass-thick);
  --border: var(--hairline); --border-2: var(--rim);
  --white: var(--ink); --text: var(--ink-2); --muted: var(--ink-3); --faint: var(--ink-3); --dim: var(--ink-3);
  --violet: var(--accent-text); --purple: var(--action); --grad: var(--brand-grad);
  --ff-b: var(--font); --r: 20px; --r-lg: 24px;
  --shadow: var(--shadow-2); --paper: var(--ground); --surface: var(--glass); --rule: var(--hairline); --rule-2: var(--hairline);
  --accent-ink: var(--accent-text); --accent-soft: var(--tint);
}
html .lg-site p, html .lg-site .lede, html .lg-site .prose { color: var(--ink-2); }
html .lg-site h1, html .lg-site h2, html .lg-site h3, html .lg-site h4 { color: var(--ink); }
html .lg-site .fine, html .lg-site .mono { color: var(--ink-3); }
html .lg-site .eyebrow { color: var(--accent-text); }
html .lg-site .eyebrow-badge { background: var(--tint); border-color: var(--tint-rim); color: var(--accent-text); }
/* plain links take the accent; :where() keeps this at link-level specificity so nav, brand, footer and buttons keep their own colours */
html .lg-site :where(a:not(.btn, .btn-glow, .lg-btn, .brand, .nav-primary a, .site-footer a, .mega-item, .nav-dd-item, .nav-mobile a)) { color: var(--accent-text); }
/* buttons keep their own text colour whatever the link colour is (Owner: the $49 and closing CTAs lost contrast) */
html .lg-site a.lg-btn, html .lg-site .lg-btn { color: var(--ink); }
html .lg-site a.lg-btn--primary, html .lg-site .lg-btn--primary, html .lg-site a.btn-primary, html .lg-site a.btn-glow { color: #fff; }
html .lg-site a.lg-btn--primary:hover, html .lg-site a.btn-primary:hover { color: #fff; }

/* 2. header: a floating glass bar (the same bar the home has); pages keep clear of it */
html .lg-site .site-header { position: fixed; left: 16px; right: 16px; top: 12px; z-index: 50; border-radius: 18px; border: 1px solid var(--rim);
  background: var(--glass-thick); -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--blur-3)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .site-header .nav-row { height: 60px; }
html:not(.mk-home) .lg-site main { padding-top: 96px; }
html .lg-site .brand { color: var(--ink); }
html .lg-site .nav-primary a, html .lg-site .nav-trigger { color: var(--ink-2); border-radius: 999px; font-family: var(--font); }
html .lg-site .nav-primary a:hover, html .lg-site .nav-primary a[aria-current="page"], html .lg-site .nav-trigger:hover, html .lg-site .nav-trigger[aria-expanded="true"] { color: var(--ink); background: var(--fill-hover); }
html .lg-site .nav-toggle { border-color: var(--rim); color: var(--ink); border-radius: 12px; background: var(--glass); }
html .lg-site .mega, html .lg-site .nav-dd { background: var(--glass-thick); -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--blur-3)) saturate(var(--glass-sat));
  border: 1px solid var(--rim); border-radius: 24px; box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .mega-item:hover, html .lg-site .nav-dd-item:hover { background: var(--fill-hover); border-radius: 14px; }
html .lg-site .mega-col-title { color: var(--ink-3); }
html .lg-site .mega-name { color: var(--ink); } html .lg-site .mega-desc { color: var(--ink-3); }
html .lg-site .nav-mobile { background: var(--glass-thick); -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--blur-3)) saturate(var(--glass-sat)); border-color: var(--hairline); }
html .lg-site .nav-mobile a, html .lg-site .m-item, html .lg-site .m-link, html .lg-site .m-group summary { color: var(--ink); }
html .lg-site .nav-backdrop { background: var(--scrim); }
@media (max-width: 900px) {
  html .lg-site .site-header { position: sticky; left: auto; right: auto; top: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--hairline); box-shadow: none; }
  html .lg-site .site-header .nav-row { height: 64px; }
  html:not(.mk-home) .lg-site main { padding-top: 0; }
}

/* 3. buttons: capsules, lit from above */
html .lg-site .btn { border-radius: 999px; font-family: var(--font); font-weight: 600; transition: transform 200ms var(--ease-spring), box-shadow var(--d-base) var(--ease-out), background var(--d-fast); }
html .lg-site .btn:hover { transform: translateY(-1px); text-decoration: none; }
html .lg-site .btn-primary { background: var(--action-grad); color: #fff; border-color: transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(30,8,80,.22), var(--glow); }
html .lg-site .btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 12px 28px -8px rgba(107,59,223,.62); color: #fff; }
html .lg-site .btn-secondary, html .lg-site .btn-ghost { background: var(--glass); border-color: var(--rim); color: var(--ink); -webkit-backdrop-filter: blur(var(--blur-1)); backdrop-filter: blur(var(--blur-1)); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-1); }
html .lg-site .btn-secondary:hover, html .lg-site .btn-ghost:hover { background: var(--glass-thick); border-color: var(--rim); color: var(--ink); }
html .lg-site .btn-glow { font-family: var(--ff-h); }

/* 4. surfaces: cards, plans, frames, panels become glass (same size, same place) */
html .lg-site :is(.card, .plan, .price-card, .frame, .crop, .chip, .avail-item, .log, .door, .os-item, .toc, .form-success, .peek, .tpl-card, .gal-card, .team-fig, .roster-col, .rep-counts, .sim-result, .sim-brief, .matrix-wrap, .legend, .post-card.card) {
  background: var(--glass); border: 1px solid var(--rim); border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--blur-2)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-2); color: var(--ink); }
html .lg-site .chip { border-radius: 999px; padding: 6px 12px; color: var(--ink-2); box-shadow: none; }
html .lg-site .card:hover { transform: translateY(-4px); border-color: var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .card > .icon, html .lg-site .products .product > .icon { background: var(--tint); color: var(--accent-text); border-radius: 12px; }
html .lg-site .plan { border-radius: var(--r-lg); }
html .lg-site .plan.featured { background: var(--glass-thick); border-color: var(--tint-rim); box-shadow: inset 0 0 0 1.5px var(--accent-text), 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .frame, html .lg-site .frame-dark { background: var(--glass-thick); border-color: var(--rim); box-shadow: 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .frame-bar { background: var(--glass-thick); border-color: var(--hairline); }
html .lg-site .frame-body { background: var(--fill-hover); }
html .lg-site .crop { background: var(--glass-thick); box-shadow: 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .faq-item, html .lg-site .faq-item:last-child { border-color: var(--hairline); }
html .lg-site .faq-item summary { color: var(--ink); font-family: var(--font); }
html .lg-site .faq-item summary::after { color: var(--accent-text); font-family: var(--font); }
html .lg-site .faq-item p { color: var(--ink-2); }
html .lg-site .matrix th, html .lg-site .matrix td { border-color: var(--hairline); color: var(--ink-2); }
html .lg-site .matrix th { color: var(--ink); }
html .lg-site .feature-list li, html .lg-site .lead-list li { color: var(--ink-2); }
html .lg-site .feature-list .icon, html .lg-site .hero-facts .icon, html .lg-site .matrix td.mark .icon { color: var(--success); }

/* 5. bands and sections sit on the aurora; the dark "night" bands become thick glass slabs that read in both themes */
html .lg-site .section-alt, html .lg-site .section-dark, html .lg-site .hero-sarah, html .lg-site .page-head, html .lg-site .hero { background: transparent; border-color: var(--hairline); }
html .lg-site .night { background: var(--glass-thick); color: var(--ink); border-top: 1px solid var(--rim); border-bottom: 1px solid var(--rim);
  -webkit-backdrop-filter: blur(var(--blur-2)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--blur-2)) saturate(var(--glass-sat)); }
html .lg-site .night h2, html .lg-site .night h3, html .lg-site .night .display { color: var(--ink); }
html .lg-site .night p, html .lg-site .night .say, html .lg-site .night .say-light { color: var(--ink-2); }
html .lg-site .night .eyebrow { color: var(--accent-text); }
html .lg-site .night .btn-ghost-light { background: var(--glass); border: 1px solid var(--rim); color: var(--ink); }
html .lg-site .hero::before, html .lg-site .hero::after, html .lg-site .page-head::before { display: none; }   /* the aurora is the glow now */

/* 6. forms and fields */
html .lg-site .form label { color: var(--ink); }
html .lg-site .form input[type=text], html .lg-site .form input[type=email], html .lg-site .form input[type=password], html .lg-site .form select, html .lg-site .form textarea,
html .lg-site input[type=text], html .lg-site input[type=email], html .lg-site input[type=password], html .lg-site select, html .lg-site textarea {
  background: var(--glass-thick); border: 1px solid var(--rim); color: var(--ink); border-radius: 14px; font-family: var(--font);
  box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge); }
html .lg-site .form input:focus, html .lg-site .form select:focus, html .lg-site .form textarea:focus, html .lg-site input:focus, html .lg-site textarea:focus { border-color: var(--action); box-shadow: var(--focus); outline: none; }
html .lg-site ::placeholder { color: var(--ink-3); }

/* 7. footer */
html .lg-site .site-footer { background: transparent; border-top: 1px solid var(--hairline); }
html .lg-site .site-footer a { color: var(--ink-2); } html .lg-site .site-footer a:hover { color: var(--ink); }
html .lg-site .footer-h { color: var(--ink); font-family: var(--font); }
html .lg-site .footer-brand p, html .lg-site .footer-fine, html .lg-site .footer-bottom { color: var(--ink-3); }
html .lg-site .footer-bottom { border-color: var(--hairline); }

/* 8. reveals: hidden by the script only, never by CSS (no-JS readers see everything) */
html .lg-site [data-lg-rv] { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { html .lg-site .lg-aurora { display: none; } }

/* 9. rhythm: lug-glass zeroes every margin for the app; the site's reading rhythm comes back here (the home and the live panels keep theirs) */
html .lg-site h1, html .lg-site h2, html .lg-site h3, html .lg-site h4 { margin: 0 0 .5em; }
html .lg-site p { margin: 0 0 1em; }
html .lg-site .lede { margin: 0 0 1.4em; }
html .lg-site .lg.mk :is(h1, h2, h3, h4, p), html .lg-site .lv :is(h1, h2, h3, h4, p) { margin: 0; }
html .lg-site .section { padding: 84px 0; }
html .lg-site .section-tight { padding: 56px 0; }
html .lg-site .page-head { padding-top: 48px; }
html .lg-site .matrix thead th { position: static; background: var(--glass-thick); }
html .lg-site .tbl, html .lg-site .matrix-wrap { border-radius: var(--r-lg); }
html .lg-site input[type=password] { padding-right: 68px; }
html .lg-site input::-ms-reveal, html .lg-site input::-webkit-credentials-auto-fill-button { display: none; }

/* 10. what is read over busy content is never see-through (Owner 09-30: mega menu text unreadable): menus are solid */
html .lg-site .mega, html .lg-site .nav-dd, html .lg-site .nav-mobile { background: #FCFCFE; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="dark"] .lg-site .mega, html[data-theme="dark"] .lg-site .nav-dd, html[data-theme="dark"] .lg-site .nav-mobile { background: #15172A; }
html .lg-site .mega-name, html .lg-site .nav-dd-item, html .lg-site .mega-col-title { color: var(--ink); }
html .lg-site .mega-desc { color: var(--ink-3); }
html .lg-site .mega-item:hover .mega-name, html .lg-site .nav-dd-item:hover { color: var(--ink); }

/* 11. Owner 09-30 'text on pricing has contrast issue': site.css paints feature spans a fixed dark-theme grey (#D3DAE5); in glass every span reads its list item's ink */
html .lg-site .feature-list span, html .lg-site .night .feature-list span, html .lg-site .feature-list-light span { color: inherit; }
html .lg-site .feature-list li.no { color: var(--ink-3); }

/* 12. domain search (Owner 09-30: field not recognisable, white text in light): the widget was dark-only in site.css; every part reads the glass tokens */
html .lg-site .dsearch { background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-2); }
html .lg-site .dsearch-h { color: var(--ink); }
html .lg-site .dsearch-bar input, html .lg-site input[type=search] { background: var(--glass-thick); border: 1px solid var(--rim); color: var(--ink); border-radius: 14px; font-family: var(--font);
  box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge); -webkit-appearance: none; appearance: none; }
html[data-theme="light"] .lg-site .dsearch-bar input { background: #FFFFFF; border-color: rgba(13, 15, 28, .16); }
html .lg-site .dsearch-bar input:focus { border-color: var(--action); box-shadow: var(--focus); }
html .lg-site .dsearch-bar input::placeholder { color: var(--ink-3); }
html .lg-site .dsearch-bar input::-webkit-search-cancel-button, html .lg-site .dsearch-bar input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
html .lg-site .dsearch-note, html .lg-site .dsearch-sub { color: var(--ink-3); }
html .lg-site .dsearch-msg { color: var(--danger, #D0335A); }
html .lg-site .dsearch-results li { background: var(--glass); border: 1px solid var(--hairline); }
html .lg-site .dsearch-name { color: var(--ink); }
html .lg-site .dsearch-price { color: var(--ink-2); }
html .lg-site .dsearch-tag.no { color: var(--ink-3); background: var(--tint); border: 1px solid var(--tint-rim); }
html .lg-site .dsearch-exact { background: var(--tint); border: 1px solid var(--tint-rim); }
html .lg-site .dsearch-exact.taken { background: var(--glass); border-color: var(--hairline); }
html .lg-site .dsearch-recs-h { color: var(--ink); }
html .lg-site [hidden] { display: none !important; }

/* 13. prose links (legal and help bodies) carried a fixed blue */
html .lg-site .prose a:not(.btn) { color: var(--accent-text); }

/* 14. Owner 09-30 'home page has no gradient background at all, only on hero and footer': the home's own .lg.mk wrapper painted an opaque ground over the fixed aurora; nested .lg scopes are see-through, the page paints the ground once */
html .lg-site .lg.mk, html .lg-site .lg .lg { background: transparent; }
/* phones: the light aurora widens like the dark one so the wash fills a narrow screen (Owner 09-30, phone showed no gradient) */
@media (max-width: 979px) {
  html .lg-site > .lg-aurora i { filter: blur(60px); }
  html .lg-site > .lg-aurora i:nth-child(1) { width: 130%; left: -50%; top: -18%; }
  html .lg-site > .lg-aurora i:nth-child(2) { width: 140%; right: -75%; top: 28%; }
  html .lg-site > .lg-aurora i:nth-child(3) { width: 150%; left: -35%; bottom: -36%; }
}

/* 15. phones (Owner 09-30 'getting glitches on fast scrolling', Android): a phone GPU cannot re-blur three viewport-size blobs and a backdrop blur on every card while it scrolls fast, and leaves tiles unpainted.
   On phones the aurora is one static gradient (no filter, no layers) and only the header, the menus and the hero frost keep a backdrop blur; cards use the thick glass so they still read as glass. */
@media (max-width: 979px) {
  html .lg-site > .lg-aurora { background:
      radial-gradient(90% 55% at 8% 4%, var(--blob-violet), transparent 70%),
      radial-gradient(90% 55% at 100% 42%, var(--blob-blue), transparent 70%),
      radial-gradient(100% 60% at 20% 100%, var(--blob-aqua), transparent 70%);
    will-change: auto; transform: none; }
  html .lg-site > .lg-aurora i { display: none; }
  html .lg-site > .lg-aurora::after { display: none; }
  html .lg-site * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: auto !important; }
  html .lg-site header, html .lg-site .site-header, html .lg-site .nav-mobile, html .lg-site .hx-frost { -webkit-backdrop-filter: blur(var(--blur-3)) saturate(var(--glass-sat)) !important; backdrop-filter: blur(var(--blur-3)) saturate(var(--glass-sat)) !important; }
  html .lg-site .lg-glass, html .lg-site .card, html .lg-site .plan, html .lg-site .post-card, html .lg-site .lv { background: var(--glass-thick); }
}

/* 16. Owner 09-30 phone shots: the mobile nav's Dashboard/Start button kept the link ink; buttons in the mobile nav read white. Remaining light contrast: legal "Other policies" links, the SEO report Pass tag. */
html .lg-site .nav-mobile a.btn, html .lg-site .nav-mobile .btn-primary, html .lg-site .nav-mobile .btn-glow { color: #FFFFFF; }
html .lg-site .legal a, html .lg-site .fine a, html .lg-site .notice a { color: var(--accent-text); }
html .lg-site .rep-pass .rep-tag { color: var(--success); }

/* 17. Owner 09-30 phone shots: blocks that became glass cards get their inner padding (.log, .toc); the blog card image bleeds to both edges again (lug-glass caps img at 100%); the comparison table's long cells get a floor width so a row is not six lines tall; the table of contents is static on phones, never sticky over the article */
html .lg-site .log { padding: 22px 24px; }
html .lg-site .log + .log { margin-top: 14px; }
html .lg-site .toc { padding: 18px 22px; }
html .lg-site .toc a { color: var(--accent-text); }
html .lg-site .post-card-img { max-width: none; }
html .lg-site .matrix td { min-width: 150px; }
html .lg-site .matrix tbody th { min-width: 150px; }
@media (max-width: 900px) {
  html .lg-site .toc { position: static; top: auto; }
  html .lg-site .post-grid { gap: 24px; }
}
html .lg-site .post-grid { padding-left: var(--gutter, 24px); padding-right: var(--gutter, 24px); }   /* .post-grid's own padding zeroed the container's sides; the article kept no gutter on phones */
html .lg-site .matrix td { min-width: 190px; }

/* 18. Owner 09-30 ('contrast issue on animation', /product/website-builder/): the replayed conversations (.sim, .sim2) were hard-coded dark blocks and the bridge's ink rules painted dark text inside them in light. They are glass cards on the tokens now, in both themes. On phones a message or the result takes no space before it arrives. */
html .lg-site .sim-chat, html .lg-site .sim2 { background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-2); color: var(--ink); }
html .lg-site .sim-head, html .lg-site .sim2-head { color: var(--ink-3); border-bottom-color: var(--hairline); }
html .lg-site .sim-dot, html .lg-site .sim2-head .sim-dot { background: var(--success); box-shadow: 0 0 10px var(--success-soft); }
html .lg-site .sim-arthur { background: var(--glass-thick); border: 1px solid var(--hairline); color: var(--ink); }
html .lg-site .sim-arthur p, html .lg-site .sim-msg p { color: inherit; }
html .lg-site .sim-you, html .lg-site .sim-you p { color: #FFFFFF; }
html .lg-site .sim-who { color: var(--accent-text); }
html .lg-site .sim-priya .sim-who { color: var(--success); }
html .lg-site .sim-build, html .lg-site .sim2-out { background: var(--glass-thick); border: 1px solid var(--hairline); color: var(--ink-2); }
html .lg-site .sim-steps li { color: var(--ink-2); }
html .lg-site .sim-steps .icon { color: var(--success); }
html .lg-site .sim2-out h4 { color: var(--ink); }
html .lg-site .sim2-meta li { color: var(--ink-2); } html .lg-site .sim2-meta b { color: var(--ink-3); }
html .lg-site .sim-note, html .lg-site .sim2-note { color: var(--ink-3); }
/* phones (Owner 09-30: "section appears and disappears like it is gonna explode"): the replay never animates on a phone; every message, the build list and the result sit at rest, the section keeps one height */
@media (max-width: 979px) {
  html .lg-site .sim-armed .sim-msg, html .lg-site .sim-armed .sim-build, html .lg-site .sim-armed .sim-result, html .lg-site .sim-armed .sim-steps li { opacity: 1 !important; transform: none !important; transition: none !important; }
  html .lg-site .sim-play { display: none !important; }
}

/* 19. Owner 09-30 phone shot (a screen of empty ground between sections): the 84 px section rhythm overrode site.css's phone value; phones breathe 52/40 */
@media (max-width: 760px) { html .lg-site .section { padding: 52px 0; } html .lg-site .section-tight { padding: 40px 0; } html .lg-site .page-head { padding-top: 32px; } }

/* 20. a product card is a link: hovering it never underlines its whole text */
html .lg-site a.card:hover, html .lg-site a.card:hover * { text-decoration: none; }

/* 21. ARTHUR-ON-PAGE (Owner 09-30): the app's own wizard in #ax on /product/website-builder/. Its surface tokens follow the theme; the host is a glass card. */
html .lg-site #build-with-arthur .hero-panel { margin-top: 22px; }
html .lg-site #ax { background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-2); }
html[data-theme="light"] .lg-site #ax { --s1: #FFFFFF; --s2: #F3F4F9; --bd: rgba(13, 15, 28, .10); --t1: #0D0F1C; --t2: #454A61; --t3: #62677F; }
html[data-theme="light"] .lg-site #ax #ax-signup-card ::placeholder { color: #8A90A6; }
html .lg-site #ax .ax-fallback a { color: var(--accent-text); }
/* the legacy legal bodies carry inline link colours; only !important reaches past an inline style */
html .lg-site .legal a:not(.btn) { color: var(--accent-text) !important; }
/* two password toggles overlapped (the site's own "Show" and the injected eye): when the eye is there, the text toggle goes */
html .lg-site .pw-wrap:has(.lu-eye) .pw-toggle { display: none; }
html .lg-site .lu-eye { color: var(--ink-3); }
/* the custom select (LUSelect, injected styles) was a fixed dark pill in light */
html .lg-site .lu-sel-btn { background: var(--glass-thick); color: var(--ink); border: 1px solid var(--rim); border-radius: 14px; box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge); font-family: var(--font); }
html[data-theme="light"] .lg-site .lu-sel-btn { background: #FFFFFF; border-color: rgba(13, 15, 28, .16); }
html .lg-site .lu-sel-list { background: #FCFCFE; color: var(--ink); border: 1px solid var(--rim); border-radius: 14px; box-shadow: var(--shadow-2); }
html[data-theme="dark"] .lg-site .lu-sel-list { background: #15172A; }
html .lg-site .lu-sel-list li { color: var(--ink); }
html .lg-site .lu-sel-list li:hover, html .lg-site .lu-sel-list li.is-active { background: var(--tint); color: var(--ink); }
html[data-theme="light"] .lg-site .rep-pass .rep-tag { color: #0E7A50; }   /* the SEO report's Pass tag: 4.1:1 was the last light-theme node under 4.5 */

/* 19. PRICING-2 (Owner 2026-10-03: "The pricing page is not enterprise"; "group them into 4"): the pricing page's own layout
   on the glass tokens. Group 1 Free/Starter/AI Lite in three cards; group 2 Growth/Pro as two wide cards (price and button
   left, capacity and what it adds right); Agency and Custom each a full row that sells (copy and benefits left, a plan
   panel right); a grouped comparison that fits a laptop and keeps its first column on phones; two-column questions. */
html .lg-site .pr-hero { padding: 56px 0 12px; text-align: center; }
html .lg-site .pr-hero h1 { font-family: var(--ff-h); font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; letter-spacing: -.025em; margin: 0 auto 16px; max-width: 18ch; }
html .lg-site .pr-hero .lede { margin: 0 auto; max-width: 56ch; font-size: 1.08rem; }
html .lg-site .pr-facts { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; }
html .lg-site .pr-facts li { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--ink-2); }
html .lg-site .pr-facts .icon { color: var(--success); }

html .lg-site .pr-group { padding: 56px 0 0; }
html .lg-site .pr-group-head { max-width: 680px; margin: 0 0 24px; }
html .lg-site .pr-group-head .eyebrow { margin-bottom: 8px; }
html .lg-site .pr-group-head h2, html .lg-site .pr-feature h2, html .lg-site .pr-compare h2, html .lg-site .pr-faq h2, html .lg-site .pr-close h2 { font-family: var(--ff-h); font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 10px; }
html .lg-site .pr-group-head > p:last-child { margin: 0; color: var(--ink-2); }

html .lg-site .pr-grid { display: grid; gap: 18px; align-items: stretch; }
html .lg-site .pr-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html .lg-site .pr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html .lg-site .pr-card { display: flex; flex-direction: column; gap: 0; padding: 26px 24px 22px; }
html .lg-site .pr-card:hover { transform: none; }
html .lg-site .pr-card-main, html .lg-site .pr-card-detail { display: flex; flex-direction: column; }
html .lg-site .pr-card-detail { flex: 1 1 auto; }
html .lg-site .pr-tag { align-self: flex-start; white-space: nowrap; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: 4px 10px; margin: -4px 0 10px; border-radius: 999px; background: var(--tint); color: var(--accent-text); border: 1px solid var(--tint-rim); }
html .lg-site .pr-name { font-family: var(--ff-h); font-weight: 800; font-size: 1.25rem; margin: 0; color: var(--ink); letter-spacing: -.01em; }
html .lg-site .pr-desc { margin: 8px 0 0; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
html .lg-site .pr-std .pr-desc { min-height: 2.9em; }
html .lg-site .pr-price { display: flex; align-items: baseline; gap: 4px; margin: 18px 0 0; font-family: var(--ff-h); color: var(--ink); line-height: 1; }
html .lg-site .pr-price .amount { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
html .lg-site .pr-price small { font-family: var(--font); font-size: .9rem; font-weight: 500; color: var(--ink-3); }
html .lg-site .pr-cta { width: 100%; justify-content: center; margin: 18px 0 0; }
html .lg-site .pr-specs { margin: 20px 0 0; padding: 2px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
html .lg-site .pr-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; }
html .lg-site .pr-specs > div + div { border-top: 1px dashed var(--hairline); }
html .lg-site .pr-specs dt { font-size: .85rem; color: var(--ink-3); margin: 0; }
html .lg-site .pr-specs dd { margin: 0; font-weight: 700; font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
html .lg-site .pr-specs .is-chat dd { color: var(--accent-text); }
html .lg-site .pr-specs .is-off dd { color: var(--ink-3); font-weight: 500; }
html .lg-site .pr-list-head { margin: 18px 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html .lg-site .pr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
html .lg-site .pr-list li { display: flex; gap: 9px; align-items: flex-start; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
html .lg-site .pr-list .icon { flex: 0 0 auto; margin-top: 2px; color: var(--success); }
html .lg-site .pr-addon { margin: auto 0 0; padding-top: 18px; font-size: .82rem; color: var(--ink-3); }

/* group 2: a wide card in two columns */
html .lg-site .pr-wide { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; padding: 28px; }
html .lg-site .pr-wide .pr-specs { margin-top: 0; }
html .lg-site .pr-wide .pr-cta { margin-top: auto; }
html .lg-site .pr-wide .pr-price { margin-bottom: 22px; }

/* groups 3 and 4: a full row that sells */
html .lg-site .pr-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: center; padding: 40px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-2); }
/* Custom (Owner: "super sophisticated and luxury"): a midnight panel in both themes, its own ink, a hairline gradient edge */
html .lg-site .pr-custom {
  --ink: #F5F6FC; --ink-2: #C4C8DA; --ink-3: #9CA1BA; --accent-text: #D9C8FF; --tint: rgba(205, 184, 255, .12); --tint-rim: rgba(205, 184, 255, .26);
  --hairline: rgba(255, 255, 255, .09); --rim: rgba(255, 255, 255, .12); --success: #7EE0C0;
  position: relative; isolation: isolate; color: var(--ink); border: 0; padding: 52px 48px;
  background: radial-gradient(70% 90% at 0% 0%, rgba(140, 37, 210, .38), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(63, 223, 223, .16), transparent 60%), linear-gradient(160deg, #120E2A 0%, #0A0918 55%, #0B1222 100%);
  box-shadow: 0 30px 80px -30px rgba(20, 8, 60, .65), 0 0 0 .5px rgba(255, 255, 255, .06); }
html .lg-site .pr-custom::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(205, 184, 255, .55), rgba(255, 255, 255, .06) 40%, rgba(63, 223, 223, .4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
html .lg-site .pr-custom .eyebrow { color: var(--accent-text); letter-spacing: .14em; }
html .lg-site .pr-custom h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); letter-spacing: -.025em; color: #FFFFFF; }
html .lg-site .pr-custom .pr-feature-lede { color: var(--ink-2); }
html .lg-site .pr-custom .pr-benefits .icon { background: rgba(255, 255, 255, .06); border: 1px solid rgba(205, 184, 255, .22); color: var(--accent-text); }
html .lg-site .pr-custom .pr-benefits b { color: #FFFFFF; }
html .lg-site .pr-custom .pr-side { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); -webkit-backdrop-filter: none; backdrop-filter: none; }
html .lg-site .pr-custom .pr-name, html .lg-site .pr-custom .pr-price { color: #FFFFFF; }
html .lg-site .pr-price-word .amount { font-size: 2rem; letter-spacing: -.02em; }
html .lg-site .pr-feature-copy .eyebrow { margin-bottom: 8px; }
html .lg-site .pr-feature-lede { margin: 0 0 26px; color: var(--ink-2); font-size: 1.02rem; max-width: 60ch; }
html .lg-site .pr-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
html .lg-site .pr-benefits li { display: flex; gap: 12px; align-items: flex-start; }
html .lg-site .pr-benefits .icon { flex: 0 0 auto; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--tint); color: var(--accent-text); }
html .lg-site .pr-benefits b { display: block; font-size: .95rem; color: var(--ink); margin-bottom: 2px; }
html .lg-site .pr-benefits span { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
html .lg-site .pr-side { background: var(--glass-thick); }
html .lg-site .pr-side .pr-price { margin-top: 12px; }
html .lg-site .pr-more { display: inline-flex; align-self: center; text-align: center; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; font-size: .9rem; font-weight: 600; }
html .lg-site .pr-ent { border-style: solid; }
html .lg-site .pr-steps { list-style: none; counter-reset: s; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
html .lg-site .pr-steps li { counter-increment: s; position: relative; padding-left: 36px; font-size: .875rem; line-height: 1.45; color: var(--ink-2); }
html .lg-site .pr-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: var(--tint); color: var(--accent-text); }
html .lg-site .pr-steps b { display: block; color: var(--ink); font-size: .9rem; }

html .lg-site .pr-compare { padding: 72px 0 0; }
html .lg-site .pr-compare h2 { margin-bottom: 20px; }
html .lg-site .pr-swipe { display: none; }
html .lg-site .pr-tbl { overflow-x: auto; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-2); }
html .lg-site .pr-matrix { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: .9rem; }
html .lg-site .pr-matrix th, html .lg-site .pr-matrix td { min-width: 0; padding: 12px 14px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--hairline); color: var(--ink-2); font-variant-numeric: tabular-nums; }
html .lg-site .pr-matrix thead th { padding: 18px 10px 16px; background: var(--glass-thick); border-bottom: 1px solid var(--rim); vertical-align: bottom; }
html .lg-site .pr-matrix .pr-corner { width: 25%; }
html .lg-site .pr-th-name { display: block; font-family: var(--ff-h); font-weight: 800; font-size: 1rem; color: var(--ink); }
html .lg-site .pr-th-price { display: block; margin-top: 2px; font-size: .82rem; font-weight: 500; color: var(--ink-3); }
html .lg-site .pr-matrix tbody th[scope="row"] { text-align: left; font-weight: 500; color: var(--ink); }
html .lg-site .pr-matrix .pr-group-row th { text-align: left; padding: 22px 14px 8px; font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); background: transparent; }
html .lg-site .pr-matrix tbody:first-of-type .pr-group-row th { padding-top: 16px; }
html .lg-site .pr-matrix .is-f { background: var(--tint); }
html .lg-site .pr-matrix td .icon { display: block; margin: 0 auto; color: var(--success); }
html .lg-site .pr-dash { color: var(--ink-3); opacity: .7; }
html .lg-site .pr-matrix tbody:last-of-type tr:last-child > * { border-bottom: 0; }

html .lg-site .pr-faq { padding: 72px 0 0; }
html .lg-site .pr-faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; align-items: start; }
html .lg-site .pr-faq-side p { color: var(--ink-2); margin: 0; }
html .lg-site .pr-faq .faq { max-width: none; }

html .lg-site .pr-close { padding: 72px 0 88px; }
html .lg-site .pr-close-in { text-align: center; padding: 48px 28px; border-radius: var(--r-lg); background: var(--glass-thick); border: 1px solid var(--tint-rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .pr-close-in h2 { margin: 0 auto 10px; max-width: 22ch; }
html .lg-site .pr-close-in > p { margin: 0 auto; color: var(--ink-2); }
html .lg-site .pr-close-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px !important; }

@media (max-width: 1100px) {
  html .lg-site .pr-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .lg-site .pr-grid-2 { grid-template-columns: 1fr; }
  html .lg-site .pr-feature { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
  html .lg-site .pr-faq-in { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 900px) {
  html .lg-site .pr-hero { padding-top: 40px; }
  html .lg-site .pr-swipe { display: block; margin: -8px 0 12px; font-size: .85rem; color: var(--ink-3); }
  html .lg-site .pr-matrix { min-width: 760px; }
  html .lg-site .pr-matrix .pr-corner, html .lg-site .pr-matrix tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 150px; background: var(--glass-thick); box-shadow: 1px 0 0 var(--hairline); }
  html .lg-site .pr-matrix tbody th[scope="row"] { font-size: .85rem; }
}
@media (max-width: 720px) {
  html .lg-site .pr-grid-3 { grid-template-columns: 1fr; }
  html .lg-site .pr-std .pr-desc { min-height: 0; }
  html .lg-site .pr-wide { grid-template-columns: 1fr; gap: 0; padding: 26px 24px 22px; }
  html .lg-site .pr-wide .pr-price { margin-bottom: 0; }
  html .lg-site .pr-wide .pr-specs { margin-top: 20px; }
  html .lg-site .pr-feature { padding: 24px 20px; }
  html .lg-site .pr-benefits { grid-template-columns: 1fr; }
  html .lg-site .pr-close-cta .btn { width: 100%; justify-content: center; }
}

/* Enterprise (Owner 2026-10-03: "like the services oracle would give to a top 1% corp"): top = copy + engagement panel; then the
   department grid; all inside the midnight panel */
html .lg-site .pr-ent-wrap { display: block; padding: 60px 56px 56px; }
html .lg-site .pr-ent-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: start; }
html .lg-site .pr-ent-wrap h2 { font-size: clamp(2rem, 3.8vw, 2.85rem); line-height: 1.08; max-width: 16ch; margin-bottom: 18px; }
html .lg-site .pr-ent-proof { list-style: none; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
html .lg-site .pr-ent-proof li { font-size: .875rem; line-height: 1.5; color: var(--ink-2); }
html .lg-site .pr-ent-proof b { display: block; margin-bottom: 4px; font-family: var(--ff-h); font-size: 1rem; color: #FFFFFF; letter-spacing: -.01em; }
html .lg-site .pr-depts-head { margin: 56px 0 22px; padding-top: 40px; border-top: 1px solid var(--hairline); }
html .lg-site .pr-depts-head .eyebrow { margin-bottom: 8px; }
html .lg-site .pr-depts-head h3 { font-family: var(--ff-h); font-size: clamp(1.3rem, 2.4vw, 1.65rem); letter-spacing: -.02em; line-height: 1.2; color: #FFFFFF; margin: 0; max-width: 30ch; }
html .lg-site .pr-depts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: 18px; overflow: hidden; background: var(--hairline); border: 1px solid var(--hairline); }
html .lg-site .pr-depts li { display: flex; flex-direction: column; gap: 8px; padding: 24px 22px 26px; background: rgba(10, 9, 24, .72); transition: background var(--d-base, 200ms) ease; }
html .lg-site .pr-depts li:hover { background: rgba(28, 20, 60, .78); }
html .lg-site .pr-depts .icon { width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(205, 184, 255, .22); color: var(--accent-text); margin-bottom: 6px; }
html .lg-site .pr-depts b { font-family: var(--ff-h); font-size: 1rem; color: #FFFFFF; letter-spacing: -.01em; }
html .lg-site .pr-depts span { font-size: .85rem; line-height: 1.55; color: var(--ink-2); }
html .lg-site .pr-ent-wrap .pr-steps li { padding-left: 38px; }
@media (max-width: 1100px) {
  html .lg-site .pr-ent-top { grid-template-columns: 1fr; gap: 32px; }
  html .lg-site .pr-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .lg-site .pr-ent-wrap { padding: 44px 36px; }
}
@media (max-width: 720px) {
  html .lg-site .pr-ent-wrap { padding: 32px 20px; }
  html .lg-site .pr-ent-proof { grid-template-columns: 1fr; gap: 16px; }
  html .lg-site .pr-depts { grid-template-columns: 1fr; }
}

/* 20. SOLUTIONS-2 (Owner 2026-10-03: "Solutions ... scored 2/10, make it enterprise level per industry"): the solutions index
   and every industry page, on the glass tokens (pricing's pr-* blocks are reused for heads, questions and the closing band). */
html .lg-site .pr-custom .btn-secondary { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); color: #FFFFFF; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
html .lg-site .pr-custom .btn-secondary:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }

/* index: the industry grid */
html .lg-site .sol-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
html .lg-site .sol-card { display: flex; flex-direction: column; padding: 24px 22px 22px; color: var(--ink); text-decoration: none; transition: transform 240ms var(--ease-out, ease), box-shadow 240ms ease; }
html .lg-site .sol-card:hover { transform: translateY(-4px); text-decoration: none; box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .sol-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
html .lg-site .sol-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--tint); color: var(--accent-text); }
html .lg-site .sol-faces { display: flex; }
html .lg-site .sol-faces img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid var(--glass-thick); margin-left: -8px; background: var(--tint); }
html .lg-site .sol-card h2 { font-family: var(--ff-h); font-size: 1.15rem; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 8px; color: var(--ink); }
html .lg-site .sol-card > p { margin: 0 0 14px; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
html .lg-site .sol-card ul { list-style: none; margin: 0 0 18px; padding: 14px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 8px; }
html .lg-site .sol-card li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; line-height: 1.4; color: var(--ink-2); }
html .lg-site .sol-card li .icon { flex: 0 0 auto; margin-top: 2px; color: var(--success); }
html .lg-site .sol-fit-go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: .9rem; font-weight: 600; color: var(--accent-text); }
html .lg-site .sol-common { list-style: none; padding: 0; }
html .lg-site .sol-ent { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; }
html .lg-site .sol-ent h2 { max-width: 20ch; }
html .lg-site .sol-ent .pr-feature-lede { margin-bottom: 0; }
html .lg-site .sol-ent-cta { display: flex; flex-direction: column; gap: 12px; }
html .lg-site .sol-ent-cta .btn { justify-content: center; }

/* industry page: hero with the example dashboard */
html .lg-site .sol-hero { padding: 40px 0 8px; }
html .lg-site .sol-hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; }
html .lg-site .sol-hero h1 { font-family: var(--ff-h); font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.07; letter-spacing: -.025em; margin: 0 0 18px; }
html .lg-site .sol-hero .lede { max-width: 58ch; }
html .lg-site .sol-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
html .lg-site .sol-facts { justify-content: flex-start; flex-direction: column; gap: 8px; margin-top: 24px; }
html .lg-site .sol-dash { padding: 22px; border-radius: var(--r-lg); background: var(--glass-thick); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-3); }
html .lg-site .sol-dash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
html .lg-site .sol-dash-who { display: flex; align-items: center; gap: 10px; }
html .lg-site .sol-dash-who img, html .lg-site .sol-tasks img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--tint); }
html .lg-site .sol-dash-who b, html .lg-site .sol-tasks b { display: block; font-size: .92rem; color: var(--ink); line-height: 1.25; }
html .lg-site .sol-dash-who small, html .lg-site .sol-tasks small { display: block; font-size: .78rem; color: var(--ink-3); line-height: 1.3; }
html .lg-site .sol-chip { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; color: var(--ink-3); border: 1px solid var(--hairline); }
html .lg-site .sol-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
html .lg-site .sol-kpis > div { padding: 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--hairline); }
html .lg-site .sol-kpis small { display: block; font-size: .76rem; color: var(--ink-3); }
html .lg-site .sol-kpis b { display: block; margin-top: 4px; font-family: var(--ff-h); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
html .lg-site .sol-dash-sub { margin: 18px 0 8px; font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
html .lg-site .sol-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html .lg-site .sol-tasks li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--hairline); }
html .lg-site .sol-tasks img { width: 30px; height: 30px; }
html .lg-site .sol-tasks em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
html .lg-site .sol-tasks em.is-wait { background: var(--warning-soft, rgba(255, 200, 87, .16)); color: var(--warning-ink, #8A5A00); }
html .lg-site .sol-tasks em.is-ok { background: var(--tint); color: var(--accent-text); }
html .lg-site .sol-tasks em.is-live { background: var(--success-soft); color: var(--success); }
html[data-theme="dark"] .lg-site .sol-tasks em.is-wait { color: #FFC857; }

/* the challenge: problem then answer */
html .lg-site .sol-pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html .lg-site .sol-pain { display: flex; flex-direction: column; padding: 26px 24px; }
html .lg-site .sol-pain:hover { transform: none; }
html .lg-site .sol-num { font-family: var(--ff-h); font-size: .85rem; font-weight: 800; color: var(--accent-text); letter-spacing: .04em; }
html .lg-site .sol-pain h3 { font-family: var(--ff-h); font-size: 1.15rem; letter-spacing: -.01em; margin: 10px 0 8px; color: var(--ink); }
html .lg-site .sol-problem { margin: 0 0 18px; font-size: .9rem; line-height: 1.55; color: var(--ink-3); }
html .lg-site .sol-answer { display: flex; gap: 10px; align-items: flex-start; margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: .9rem; line-height: 1.55; color: var(--ink); }
html .lg-site .sol-answer .icon { flex: 0 0 auto; margin-top: 3px; color: var(--success); }

/* the system */
html .lg-site .sol-pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border-radius: var(--r-lg); overflow: hidden; background: var(--hairline); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-2); margin: 0; }
html .lg-site .sol-pillar { display: flex; flex-direction: column; padding: 26px 24px; background: var(--glass-thick); }
html .lg-site .sol-pillar .icon { width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: var(--tint); color: var(--accent-text); margin-bottom: 14px; }
html .lg-site .sol-pillar h3 { font-family: var(--ff-h); font-size: 1.05rem; margin: 0 0 6px; color: var(--ink); }
html .lg-site .sol-pillar p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }
html .lg-site .sol-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto !important; padding-top: 14px; }
html .lg-site .sol-links a { font-size: .76rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-2); text-decoration: none; }
html .lg-site .sol-links a:hover { border-color: var(--tint-rim); color: var(--accent-text); }

/* the team */
html .lg-site .sol-team { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: center; padding: 40px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-2); }
html .lg-site .sol-team h2 { font-family: var(--ff-h); font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 12px; }
html .lg-site .sol-team-lead > p { margin: 0; color: var(--ink-2); }
html .lg-site .sol-sarah { display: flex; gap: 16px; align-items: center; margin-top: 24px; padding: 18px; border-radius: 18px; background: var(--glass-thick); border: 1px solid var(--tint-rim); }
html .lg-site .sol-sarah img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--tint); }
html .lg-site .sol-sarah b, html .lg-site .sol-roster b { display: block; font-size: 1rem; color: var(--ink); }
html .lg-site .sol-sarah small, html .lg-site .sol-roster small { display: block; font-size: .8rem; color: var(--accent-text); font-weight: 600; }
html .lg-site .sol-sarah em, html .lg-site .sol-roster em { display: block; margin-top: 4px; font-style: normal; font-size: .86rem; line-height: 1.45; color: var(--ink-2); }
html .lg-site .sol-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
html .lg-site .sol-roster li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: var(--glass-thick); border: 1px solid var(--hairline); }
html .lg-site .sol-roster img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: var(--tint); }

/* thirty days */
html .lg-site .sol-weeks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: w; }
html .lg-site .sol-weeks li { position: relative; padding: 24px 22px; border-radius: var(--r-lg); background: var(--glass); border: 1px solid var(--rim); box-shadow: inset 0 1px 0 var(--rim-top), 0 0 0 .5px var(--edge), var(--shadow-1, none); }
html .lg-site .sol-weeks li::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-grad); opacity: .85; }
html .lg-site .sol-week { font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-text); }
html .lg-site .sol-weeks h3 { font-family: var(--ff-h); font-size: 1.05rem; margin: 8px 0 6px; color: var(--ink); }
html .lg-site .sol-weeks p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-2); }

/* plan fit */
html .lg-site .sol-fit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
html .lg-site .sol-fit-card { display: flex; flex-direction: column; padding: 24px; color: var(--ink); text-decoration: none; }
html .lg-site .sol-fit-card:hover { text-decoration: none; transform: translateY(-3px); }
html .lg-site .sol-fit-card small { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
html .lg-site .sol-fit-card b { display: block; margin: 10px 0 8px; font-family: var(--ff-h); font-size: 1.4rem; letter-spacing: -.02em; color: var(--ink); }
html .lg-site .sol-fit-card b span { font-family: var(--font); font-size: .9rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
html .lg-site .sol-fit-card p { margin: 0 0 16px; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
html .lg-site .sol-fit-card.is-ent { color: #FFFFFF; border: 0; background: radial-gradient(80% 100% at 0% 0%, rgba(140, 37, 210, .4), transparent 60%), linear-gradient(160deg, #120E2A, #0A0918 60%, #0B1222); }
html .lg-site .sol-fit-card.is-ent small, html .lg-site .sol-fit-card.is-ent b span { color: #9CA1BA; }
html .lg-site .sol-fit-card.is-ent b { color: #FFFFFF; }
html .lg-site .sol-fit-card.is-ent p { color: #C4C8DA; }
html .lg-site .sol-fit-card.is-ent .sol-fit-go { color: #D9C8FF; }

@media (max-width: 1100px) {
  html .lg-site .sol-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .lg-site .sol-hero-grid, html .lg-site .sol-team { grid-template-columns: 1fr; gap: 32px; }
  html .lg-site .sol-pillars, html .lg-site .sol-weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .lg-site .sol-ent { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  html .lg-site .sol-grid, html .lg-site .sol-pains, html .lg-site .sol-pillars, html .lg-site .sol-weeks, html .lg-site .sol-fit { grid-template-columns: 1fr; }
  html .lg-site .sol-team { padding: 24px 20px; }
  html .lg-site .sol-actions .btn { flex: 1 1 auto; justify-content: center; }
  html .lg-site .sol-tasks li { grid-template-columns: 30px minmax(0, 1fr); }
  html .lg-site .sol-tasks em { grid-column: 2; justify-self: start; }
}