/* Liquid Glass for MK Business OS, "Daylight glass" (the owner's pick, 28 Oct 2026; concept boards in
   ui-reimagination-skill mk-business-os/2026-10-28-liquid-glass): light-first white frosted glass over a soft aurora,
   navy ink and pills, plan-coloured tiles; the dark set follows the boards' dark design system. First used by the MK
   Cloud screens (billing, invite); the rest of the app moves to it in its own redesign. Solid fallbacks without
   backdrop blur or with reduced transparency. */

@font-face { font-family: "Manrope"; src: url(/vendor/fonts/Manrope-Variable.ttf) format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url(/vendor/fonts/readex-pro-arabic.woff2) format("woff2"); font-weight: 160 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }

:root, :root[data-theme="light"] {
  color-scheme: light;
  --g-bg: #eef1fa; --g-bg-2: #f6f8fd;
  --g-ink: #0f1730; --g-ink-2: #4d5566; --g-ink-3: #636b7d;
  --g-glass: rgba(255, 255, 255, .74); --g-glass-2: rgba(255, 255, 255, .88); --g-glass-solid: #ffffff; --g-glass-solid-2: #f7f8fc;
  --g-hair: rgba(15, 23, 48, .08); --g-hair-2: rgba(15, 23, 48, .14); --g-edge: rgba(255, 255, 255, .95); --g-shine: rgba(255, 255, 255, .9);
  --g-input: #ffffff; --g-track: rgba(15, 23, 48, .08);
  --g-shadow: 0 20px 50px rgba(36, 48, 98, .1), 0 2px 6px rgba(36, 48, 98, .05);
  --g-pill: #121a33; --g-pill-ink: #ffffff; --g-pill-shadow: 0 10px 24px rgba(18, 26, 51, .24);
  --g-capsule: rgba(255, 255, 255, .92); --g-capsule-hover: #ffffff; --g-capsule-shadow: 0 2px 10px rgba(36, 48, 98, .07);
  --g-accent: #5e5ce6; --g-accent-ink: #4644c8; --g-accent-soft: rgba(94, 92, 230, .1); --g-accent-line: rgba(94, 92, 230, .32);
  --g-link: #0066cc; --g-focus: #007aff;
  --g-good: #1f8f47; --g-good-soft: rgba(48, 209, 88, .16);
  --g-warn: #c25e00; --g-warn-icon: #f08a00; --g-warn-soft: rgba(255, 159, 10, .14); --g-warn-line: rgba(255, 159, 10, .42);
  --g-bad: #d70015; --g-bad-soft: rgba(255, 59, 48, .1); --g-bad-line: rgba(215, 0, 21, .26);
  --g-avatar: #1d2647;
  --g-glow-1: rgba(160, 206, 255, .62); --g-glow-2: rgba(206, 196, 255, .6); --g-glow-3: rgba(255, 226, 202, .42);
}
:root[data-theme="dark"] {
  /* The boards' dark set: a navy-blue room, bluish glass, white ink and a white main pill. */
  color-scheme: dark;
  --g-bg: #121a3a; --g-bg-2: #19274f;
  --g-ink: #f7f8fc; --g-ink-2: #bcc5dc; --g-ink-3: #9aa5c0;
  --g-glass: rgba(120, 146, 225, .13); --g-glass-2: rgba(130, 156, 232, .17); --g-glass-solid: #1c2750; --g-glass-solid-2: #22305e;
  --g-hair: rgba(255, 255, 255, .14); --g-hair-2: rgba(255, 255, 255, .22); --g-edge: rgba(255, 255, 255, .2); --g-shine: rgba(255, 255, 255, .14);
  --g-input: rgba(255, 255, 255, .07); --g-track: rgba(255, 255, 255, .14);
  --g-shadow: 0 24px 70px rgba(4, 8, 30, .45), 0 2px 8px rgba(4, 8, 30, .25);
  --g-pill: #ffffff; --g-pill-ink: #121a3a; --g-pill-shadow: 0 10px 26px rgba(4, 8, 30, .35);
  --g-capsule: rgba(255, 255, 255, .1); --g-capsule-hover: rgba(255, 255, 255, .16); --g-capsule-shadow: none;
  --g-accent: #8b8af0; --g-accent-ink: #b9b8ff; --g-accent-soft: rgba(94, 92, 230, .22); --g-accent-line: rgba(139, 138, 240, .5);
  --g-link: #4ea1ff; --g-focus: #0a84ff;
  --g-good: #30d158; --g-good-soft: rgba(48, 209, 88, .16);
  --g-warn: #ffb340; --g-warn-icon: #ff9f0a; --g-warn-soft: rgba(255, 159, 10, .16); --g-warn-line: rgba(255, 159, 10, .45);
  --g-bad: #ff6961; --g-bad-soft: rgba(255, 69, 58, .15); --g-bad-line: rgba(255, 69, 58, .4);
  --g-avatar: linear-gradient(135deg, #5e5ce6, #8a63e8);
  --g-glow-1: rgba(70, 112, 225, .55); --g-glow-2: rgba(108, 82, 214, .42); --g-glow-3: rgba(42, 130, 196, .38);
}

/* Plan colours: the letter tiles, the meters and a tint in the ambient light (body data-plan). */
body.g-page, [data-plan="trial"], [data-plan="none"] { --t1: #a9bdf6; --t2: #6f8be6; }
[data-plan="starter"] { --t1: #7fdcff; --t2: #2aa7e2; }
[data-plan="team"] { --t1: #8f8dff; --t2: #5e5ce6; }
[data-plan="business"] { --t1: #ffd84a; --t2: #f0a400; }
[data-plan="internal"] { --t1: #6be08f; --t2: #1fb45a; }
[data-plan="locked"] { --t1: #b4bfd2; --t2: #7c889e; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--g-bg); }
.g-page [hidden] { display: none !important; }  /* the components below set display; hidden still wins */
/* No cross-document view transition (see atelier.css). */
::view-transition-old(root) { animation: g-out .18s ease-in both; }
::view-transition-new(root) { animation: g-in .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes g-out { to { opacity: 0; } }
@keyframes g-in { from { opacity: 0; transform: translateY(10px); filter: blur(6px); } }

body.g-page {
  margin: 0; min-height: 100vh; color: var(--g-ink); background: var(--g-bg);
  font: 400 16px/1.5 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
}
:root[dir="rtl"] body.g-page { font-family: "Readex Pro", "Manrope", system-ui, sans-serif; }
.g-light {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 60vh at 88% -4%, color-mix(in srgb, var(--t1) 28%, var(--g-glow-1)), transparent 70%),
    radial-gradient(55vw 60vh at -6% 104%, color-mix(in srgb, var(--t2) 22%, var(--g-glow-2)), transparent 70%),
    radial-gradient(40vw 40vh at 104% 100%, var(--g-glow-3), transparent 70%),
    linear-gradient(180deg, var(--g-bg-2), var(--g-bg));
}
.g-main { position: relative; z-index: 1; width: min(1400px, 100%); margin: 0 auto; padding: 112px 32px 64px; }
body.g-narrow .g-main { width: min(980px, 100%); padding-top: 132px; }

/* Glass */
.g-bar, .g-card, .g-side, .g-banner, .g-offer, .g-capsule, .g-switch, .g-sheet-body, .g-invite, .g-role, .g-status {
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
}
.g-card, .g-side, .g-offer, .g-sheet-body {
  background: var(--g-glass); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow), inset 0 1px 0 var(--g-shine);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g-bar, .g-card, .g-side, .g-offer, .g-sheet-body, .g-banner { background: var(--g-glass-solid) !important; }
  .g-invite, .g-capsule, .g-switch, .g-role, .g-status { background: var(--g-glass-solid-2) !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .g-bar, .g-card, .g-side, .g-offer, .g-sheet-body, .g-banner { background: var(--g-glass-solid) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .g-invite, .g-capsule, .g-switch, .g-role, .g-status { background: var(--g-glass-solid-2) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Top bar */
.g-bar {
  position: fixed; z-index: 20; top: 16px; inset-inline: 0; margin: 0 auto; width: min(1336px, calc(100% - 32px)); height: 66px;
  display: flex; align-items: center; gap: 10px; padding-inline: 22px 12px; border-radius: 22px;
  background: var(--g-glass-2); border: 1px solid var(--g-edge); box-shadow: 0 12px 34px rgba(36, 48, 98, .1), inset 0 1px 0 var(--g-shine);
}
body.g-narrow .g-bar { width: min(1336px, calc(100% - 32px)); }
.g-mark { display: flex; align-items: center; gap: 12px; color: var(--g-ink); text-decoration: none; min-height: 44px; flex: none; }
.g-mark-mk { font: 500 28px/1 "Didot", "Bodoni 72", "Playfair Display", Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.g-mark-name { font: 700 11.5px/1 "Manrope", system-ui, sans-serif; letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; }
/* Back into the app (standalone pages, signed in): a quiet capsule next to the mark; the arrow mirrors in Arabic. */
.g-bar-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-inline: 12px 16px; margin-inline-start: 8px; border-radius: 999px;
  color: var(--g-ink-2); font-size: 14px; font-weight: 650; text-decoration: none; white-space: nowrap; }
:root[dir="rtl"] .g-bar-back .g-icon { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .g-bar-back:hover { background: var(--g-accent-soft); color: var(--g-ink); } }
/* Signed-out stage (sign-in, sign-up): no glass, the wordmark centred above the card, the tools at the far end. */
.g-bar.g-bar-stage { position: absolute; background: none; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; height: 88px; }
.g-bar-stage .g-mark { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); gap: 14px; }
:root[dir="rtl"] .g-bar-stage .g-mark { transform: translateX(50%); }
.g-bar-stage .g-mark-name { font-size: 13px; letter-spacing: .28em; }
.g-bar-stage .g-bar-tools { margin-inline-start: auto; }
.g-bar-stage .g-tool { background: var(--g-capsule); }
/* Standalone pages under the bar; the side panel (People & Access) floats under it at the inline start. */
body.g-standalone { min-height: 100vh; }
body.g-standalone > main { position: relative; z-index: 1; }
body.g-sided .g-bar { width: calc(100% - 32px); max-width: none; }
.g-side-fixed { display: none; }
@media (min-width: 1100px) {
  .g-side.g-side-fixed { display: flex; position: fixed; z-index: 10; top: 98px; bottom: 16px; inset-inline-start: 16px; width: 232px; min-height: 0; overflow-y: auto; border-radius: 24px; }
  body.g-sided > main { margin-inline-start: 264px; max-inline-size: calc(100% - 264px); }
}
/* 320 px: the bar keeps back, language and theme; the person shows on the page itself. */
@media (max-width: 359px) { body.g-standalone .g-avatar { display: none; } }
.g-bar-company { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; height: 42px; max-width: 34vw; padding: 0 14px;
  border-radius: 999px; background: var(--g-capsule); border: 1px solid var(--g-hair); color: var(--g-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
.g-bar-company span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-bar-company i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--t1), var(--t2)); }
.g-bar-company .g-icon { flex: none; color: var(--g-ink-3); }
.g-bar-company[hidden] + .g-bar-tools { margin-inline-start: auto; }
.g-bar-tools { display: flex; align-items: center; gap: 8px; }
.g-tool { min-width: 44px; height: 42px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--g-hair); background: var(--g-capsule);
  color: var(--g-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.g-tool.g-lang:lang(ar) { font-family: "Readex Pro", system-ui, sans-serif; }
.g-theme { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--g-track); }
.g-theme button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--g-ink-3); cursor: pointer; }
.g-theme button[aria-pressed="true"] { background: var(--g-glass-solid); color: var(--g-ink); box-shadow: 0 2px 8px rgba(15, 23, 48, .16); }
.g-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: #fff; background: var(--g-avatar);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }

/* Side navigation (desktop) and page head */
.g-frame { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.g-side { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; border-radius: 28px; min-height: min(740px, calc(100vh - 136px)); }
.g-side a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 1px solid transparent; border-radius: 14px;
  color: var(--g-ink-2); font-size: 15px; font-weight: 650; text-decoration: none; transition: background .2s ease, color .2s ease; }
.g-side a:hover { background: var(--g-accent-soft); color: var(--g-ink); }
.g-side a[aria-current="page"] { background: var(--g-accent-soft); border-color: var(--g-accent-line); color: var(--g-ink); font-weight: 750; }
.g-side hr { width: calc(100% - 24px); margin: 10px 12px; border: 0; height: 1px; background: var(--g-hair); }
.g-side-who { margin: auto 0 0; padding: 16px 14px 6px; border-top: 1px solid var(--g-hair); color: var(--g-ink-3); font-size: 13px; overflow-wrap: anywhere; }
.g-content { min-width: 0; }
.g-back { display: none; align-items: center; gap: 6px; min-height: 44px; color: var(--g-ink-2); text-decoration: none; font-size: 14px; font-weight: 650; }
:root[dir="rtl"] .g-back .g-icon, :root[dir="rtl"] .g-pill .g-icon:last-child, :root[dir="rtl"] .g-capsule .g-icon:last-child, :root[dir="rtl"] .g-round .g-icon { transform: scaleX(-1); }
.g-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 22px; }
.g-title { margin: 0; font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -.025em; }
:root[dir="rtl"] .g-title { letter-spacing: 0; }
.g-sub { margin: 6px 0 0; color: var(--g-ink-2); font-size: 15px; }
.g-role { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--g-capsule);
  border: 1px solid var(--g-hair); color: var(--g-ink-2); font-size: 14px; font-weight: 650; white-space: nowrap; }

/* Type helpers */
.g-kicker { margin: 0; font-size: 12px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: var(--g-ink-3); }
:root[dir="rtl"] .g-kicker { letter-spacing: 0; }
.g-line { margin: 0; color: var(--g-ink-2); font-size: 15px; }
.g-tone { font-weight: 750; }
.g-tone[data-tone="warn"] { color: var(--g-warn); }
.g-tone[data-tone="bad"] { color: var(--g-bad); }
.g-tone[data-tone="good"] { color: var(--g-good); }
.g-explain { margin: 18px 0 0; max-width: 70ch; font-size: 15px; line-height: 1.55; }
.g-fine { margin: 10px 0 0; color: var(--g-ink-3); font-size: 13px; line-height: 1.5; }
.g-center { text-align: center; justify-self: center; }
.g-icon { flex: none; }

/* Buttons */
.g-pill, .g-capsule {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: 999px;
  font: inherit; font-size: 15px; font-weight: 750; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.g-pill { border: 0; background: var(--g-pill); color: var(--g-pill-ink); box-shadow: var(--g-pill-shadow); }
.g-capsule { border: 1px solid var(--g-hair); background: var(--g-capsule); color: var(--g-ink); box-shadow: var(--g-capsule-shadow); }
.g-capsule:hover:not(:disabled) { background: var(--g-capsule-hover); }
.g-pill:hover:not(:disabled) { transform: translateY(-1px); }
.g-pill:active:not(:disabled), .g-capsule:active:not(:disabled) { transform: scale(.98); }
.g-pill:disabled, .g-capsule:disabled { opacity: .5; cursor: default; box-shadow: none; }
.g-link { min-height: 44px; padding: 0 6px; border: 0; background: none; color: var(--g-link); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.g-link:hover { text-decoration: underline; }
.g-round { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--g-hair); background: var(--g-capsule); color: var(--g-ink); cursor: pointer; }
.g-wide { width: 100%; }
:where(.g-page) :focus-visible { outline: 2px solid var(--g-focus); outline-offset: 3px; }

/* Tiles, badges, status */
.g-tile { flex: none; width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; color: #fff; font-size: 24px; font-weight: 800;
  background: linear-gradient(145deg, var(--t1), var(--t2)); box-shadow: 0 10px 22px color-mix(in srgb, var(--t2) 34%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.g-tile-sm { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45); }
.g-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 750; white-space: nowrap;
  color: var(--g-accent-ink); background: var(--g-accent-soft); border: 1px solid var(--g-accent-line); }
.g-badge-strong { color: #fff; background: var(--g-accent); border-color: transparent; }
:root[data-theme="dark"] .g-badge-strong { background: #5e5ce6; }
.g-status { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 10px; padding-inline: 10px 16px; border-radius: 999px;
  background: var(--g-capsule); border: 1px solid var(--g-hair); font-size: 14px; font-weight: 700; color: var(--g-ink); }
.g-status .g-icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: var(--g-good); background: var(--g-good-soft); }
.g-status[data-tone="warn"] .g-icon { color: var(--g-warn-icon); background: var(--g-warn-soft); }
.g-status[data-tone="bad"] .g-icon { color: var(--g-bad); background: var(--g-bad-soft); }
/* Icon tiles: the invite screen's violet-blue tile, and the tinted tiles of a payment's wait and confirmation. */
.g-orb { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, #7d8dff, #9a6cf0); box-shadow: 0 14px 30px rgba(110, 100, 240, .32), inset 0 1px 0 rgba(255, 255, 255, .45); }
.g-orb-good { background: linear-gradient(145deg, #4ade80, #16a34a); box-shadow: 0 14px 30px rgba(22, 163, 74, .3), inset 0 1px 0 rgba(255, 255, 255, .45); }
.g-mark-tile { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center; color: #0a84ff; background: rgba(10, 132, 255, .13); }
.g-mark-tile[data-tone="good"] { color: #1fae4f; background: var(--g-good-soft); }

/* Banners */
.g-banner { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; min-height: 72px; padding: 14px; padding-inline-start: 18px; border-radius: 22px;
  background: var(--g-glass-2); border: 1px solid var(--g-hair); box-shadow: 0 10px 30px rgba(36, 48, 98, .07); }
.g-banner p { flex: 1; min-width: 0; margin: 0; font-size: 16px; color: var(--g-ink-2); }
.g-banner strong { color: var(--g-ink); font-weight: 800; }
.g-banner-icon { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--g-link); background: var(--g-accent-soft); }
.g-banner[data-tone="warn"] .g-banner-icon { color: var(--g-warn-icon); background: var(--g-warn-soft); }
.g-banner[data-tone="good"] .g-banner-icon { color: var(--g-good); background: var(--g-good-soft); }
.g-banner[data-tone="bad"] .g-banner-icon { color: var(--g-bad); background: var(--g-bad-soft); }
.g-banner[data-tone="bad"] { border-color: var(--g-bad-line); }
.g-banner[data-tone="warn"] { border-color: var(--g-warn-line); background: color-mix(in srgb, var(--g-warn-soft) 55%, var(--g-glass-2)); }
.g-renew { background: linear-gradient(90deg, color-mix(in srgb, #ffe8cf 70%, var(--g-glass-2)), var(--g-glass-2)) !important; }
:root[data-theme="dark"] .g-renew { background: linear-gradient(90deg, rgba(255, 159, 10, .16), var(--g-glass-2)) !important; }

/* Plan card */
.g-card { border-radius: 28px; padding: 26px 28px; }
.g-plan-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.g-plan-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.g-plan-title h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
:root[dir="rtl"] .g-plan-title h2 { letter-spacing: 0; }
.g-plan-title .g-line { flex-basis: 100%; }
.g-plan .g-kicker { display: none; }
.g-plan-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.g-meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--g-hair); }
.g-meter { padding: 0 24px; border-inline-start: 1px solid var(--g-hair); }
.g-meter:first-child { padding-inline-start: 0; border-inline-start: 0; }
.g-meter:last-child { padding-inline-end: 0; }
.g-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: 14px; color: var(--g-ink-2); }
.g-meter-top span { display: inline-flex; align-items: center; gap: 8px; }
.g-meter-top .g-icon { color: var(--g-ink-3); }
.g-meter-top strong { color: var(--g-ink); font-size: 16px; font-weight: 800; white-space: nowrap; }
.g-meter-bar { height: 6px; border-radius: 999px; background: var(--g-track); overflow: hidden; }
.g-meter-bar i { display: block; height: 100%; width: var(--fill); min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, var(--t1), var(--t2)); }
.g-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.g-stack { flex-direction: column; flex-wrap: nowrap; width: 100%; margin-top: 6px; }
.g-stack > .g-center { align-self: center; }
.g-center-row { justify-content: center; }

/* Info card and payment result */
.g-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 22px; padding: 20px 22px; }
.g-info p { margin: 0; }
.g-info p + p { margin-top: 4px; }
.g-info-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--g-link); background: var(--g-accent-soft); }
.g-result { display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 380px; margin: 0 0 18px; padding: 48px 28px; text-align: center; }
.g-result h2 { margin: 12px 0 0; font-size: 28px; font-weight: 800; letter-spacing: -.015em; }
.g-result p { margin: 0; color: var(--g-ink-2); }
.g-result .g-progress { margin-top: 18px; max-width: 360px; }
.g-result .g-status { margin-top: 12px; }

/* Choosing a plan */
.g-change { margin-top: 34px; }
.g-change-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.g-change h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.015em; }
.g-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--g-glass); border: 1px solid var(--g-hair); }
.g-switch button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent;
  color: var(--g-ink-2); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.g-switch button[aria-checked="true"] { background: var(--g-glass-solid); color: var(--g-ink); box-shadow: 0 4px 14px rgba(36, 48, 98, .14); }
:root[data-theme="dark"] .g-switch button[aria-checked="true"] { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px var(--g-accent-line); }
.g-switch button:disabled { opacity: .45; cursor: default; }
.g-short { display: none; }
.g-flag { flex: none; border-radius: 50%; box-shadow: 0 0 0 1px var(--g-hair); }
.g-why { text-align: end; }
.g-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-offer { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px 18px; border-radius: 24px; }
.g-offer[data-current="true"], .g-offer[data-recommended="true"] { border-color: var(--g-accent-line); box-shadow: var(--g-shadow), 0 0 0 1px var(--g-accent-line), inset 0 1px 0 var(--g-shine); }
.g-offer header { display: flex; justify-content: space-between; align-items: center; min-height: 34px; }
.g-offer h3 { margin: 8px 0 0; font-size: 21px; font-weight: 800; }
.g-feats { margin: 0; color: var(--g-ink-2); font-size: 13.5px; line-height: 1.6; }
.g-price { margin: 14px 0 8px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--g-ink-2); font-size: 13px; font-weight: 650; }
.g-price strong { color: var(--g-ink); font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.g-offer button { width: 100%; margin-top: auto; }
.g-offer .g-capsule { background: var(--g-glass-solid); }
:root[data-theme="dark"] .g-offer .g-capsule { background: var(--g-capsule); }
.g-note { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; color: var(--g-ink-2); font-size: 13.5px; }
.g-note strong { color: var(--g-ink); }
.g-note .g-icon { margin-top: 2px; color: var(--g-ink-3); }

/* Egypt pay sheet */
dialog.g-sheet { width: min(520px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; background: transparent; color: var(--g-ink); overflow: visible; }
dialog.g-sheet::backdrop { background: rgba(15, 23, 48, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.g-sheet-body { display: grid; gap: 16px; padding: 24px; border-radius: 28px; background: var(--g-glass-2); }
.g-sheet-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 14px; }
.g-sheet-head h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.015em; }
.g-sheet-what { margin: 6px 0 0; font-size: 15px; font-weight: 750; }
.g-field em.g-need { color: var(--g-warn-icon); font-weight: 700; }
.g-close { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--g-hair); background: var(--g-capsule); color: var(--g-ink-2); cursor: pointer; }
.g-field { display: grid; gap: 7px; text-align: start; }
.g-field > span:first-child { font-size: 13px; font-weight: 700; color: var(--g-ink-2); }
.g-field em { font-style: normal; font-weight: 500; color: var(--g-ink-3); }
.g-field input, .g-phone { min-height: 50px; border-radius: 15px; border: 1px solid var(--g-hair-2); background: var(--g-input); color: var(--g-ink); }
.g-field input { width: 100%; padding: 0 15px; font: inherit; font-size: 16px; }
.g-field input::placeholder { color: var(--g-ink-3); }
.g-phone { display: flex; align-items: stretch; overflow: hidden; }
.g-prefix { display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; color: var(--g-ink); font-weight: 700; border-inline-end: 1px solid var(--g-hair-2); }
.g-phone input { flex: 1; min-width: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; }
.g-phone:focus-within { outline: 2px solid var(--g-focus); outline-offset: 2px; }
.g-phone input:focus-visible { outline: none; }
.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.g-error { margin: 0; color: var(--g-bad); font-size: 14px; font-weight: 700; }
.g-dock { display: none; }

/* Loading, problems, progress */
.g-skeleton { display: grid; gap: 18px; width: min(1100px, 100%); margin: 0 auto; }
.g-skeleton i, .g-sk-plans i { display: block; border-radius: 26px; border: 1px solid var(--g-edge);
  background: linear-gradient(100deg, var(--g-glass) 30%, color-mix(in srgb, var(--g-ink) 8%, var(--g-glass)) 50%, var(--g-glass) 70%); background-size: 220% 100%;
  animation: g-shimmer 1.4s ease-in-out infinite; }
.g-sk-title { height: 44px; width: min(360px, 70%); border-radius: 14px !important; }
.g-sk-card { height: 220px; }
.g-sk-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.g-sk-plans i { height: 260px; }
.g-skeleton-join { width: min(480px, 100%); }
.g-skeleton-join .g-sk-card { height: 420px; }
@keyframes g-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.g-problem { max-width: 520px; margin: 48px auto 0; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 44px 30px; }
.g-problem h1 { margin: 8px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.015em; }
.g-problem p { margin: 0 0 12px; color: var(--g-ink-2); }
.g-progress { position: relative; display: block; width: 100%; max-width: 280px; height: 5px; border-radius: 999px; overflow: hidden; background: var(--g-track); }
.g-progress::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 38%; border-radius: inherit;
  background: linear-gradient(90deg, #5ac8fa, #0a6cff); animation: g-progress 1.3s ease-in-out infinite; }
@keyframes g-progress { from { transform: translateX(-110%); } to { transform: translateX(280%); } }
:root[dir="rtl"] .g-progress::after { animation-name: g-progress-rtl; }
@keyframes g-progress-rtl { from { transform: translateX(110%); } to { transform: translateX(-280%); } }

/* Invite screen */
.g-join { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 36px 32px; }
.g-join-narrow { max-width: 540px; margin: 0 auto; padding: 40px 42px; }
.g-join h1 { margin: 0; font-size: 30px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; text-wrap: balance; }
:root[dir="rtl"] .g-join h1 { letter-spacing: 0; }
.g-join > .g-banner { width: 100%; margin: 0; text-align: start; }
.g-google { height: 52px; background: var(--g-glass-solid); }
:root[data-theme="dark"] .g-google { background: var(--g-capsule); }
.g-or { width: 100%; margin: 0; display: flex; align-items: center; gap: 12px; color: var(--g-ink-3); font-size: 12px; font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
:root[dir="rtl"] .g-or { letter-spacing: 0; }
.g-or::before, .g-or::after { content: ""; flex: 1; height: 1px; background: var(--g-hair-2); }
.g-email { width: 100%; display: grid; gap: 12px; }
.g-join-list { justify-items: stretch; text-align: start; max-width: 770px; margin: 0 auto; padding: 40px 42px; gap: 18px; }
.g-join-head { display: grid; justify-items: start; gap: 12px; }
.g-join-head h1 { margin-top: 8px; }
.g-who { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; color: var(--g-ink-2); font-size: 15px; }
.g-who strong { color: var(--g-ink); font-weight: 750; }
.g-who .g-link { padding: 0; min-height: 0; font-size: 15px; }
.g-who .g-link::before { content: "· "; color: var(--g-ink-3); }
.g-invites { display: grid; gap: 14px; }
.g-invite { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 22px 24px; border-radius: 22px;
  background: var(--g-glass-solid); border: 1px solid var(--g-hair); box-shadow: 0 8px 24px rgba(36, 48, 98, .06); }
:root[data-theme="dark"] .g-invite { background: var(--g-glass-2); }
.g-invite-text h2 { margin: 0; font-size: 18px; line-height: 1.35; font-weight: 800; }
.g-invite .g-line { margin-top: 6px; font-size: 14px; }
.g-quiet { color: var(--g-ink-2); }
.g-joined-name { margin: 0; font-size: 18px; font-weight: 750; }
.g-join-agree { max-width: 640px; }

/* MK Cloud's agreements: the one box (a real checkbox, unticked until the person ticks it) and the texts it opens. */
.g-agree { display: grid; gap: 10px; padding: 18px 20px; border-radius: 20px; text-align: start;
  background: var(--g-glass-solid); border: 1px solid var(--g-accent-line); box-shadow: 0 8px 24px rgba(36, 48, 98, .06); }
:root[data-theme="dark"] .g-agree { background: var(--g-glass-2); }
.g-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; color: var(--g-ink); font-size: 15px; line-height: 1.55; cursor: pointer; }
.g-check input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 1px 0 0;
  border-radius: 8px; border: 1.5px solid var(--g-hair-2); background: var(--g-input); cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.g-check input::before { content: ""; width: 12px; height: 12px; background: var(--g-pill-ink); transform: scale(0); transition: transform .14s ease;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.g-check input:checked { background: var(--g-pill); border-color: var(--g-pill); }
.g-check input:checked::before { transform: scale(1); }
.g-check input:disabled { opacity: .55; cursor: default; }
.g-check a { color: var(--g-link); font-weight: 750; text-decoration: none; }
.g-check a:hover { text-decoration: underline; }
.g-agree .g-fine { margin: 0; padding-inline-start: 38px; }
.g-doc { max-width: 820px; margin: 0 auto; padding: 38px 44px 42px; font-size: 15.5px; line-height: 1.65; overflow-wrap: anywhere; }
.g-doc h1 { margin: 0 0 6px; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.g-doc h2 { margin: 32px 0 10px; font-size: 21px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; }
.g-doc h3 { margin: 24px 0 8px; font-size: 17px; line-height: 1.35; font-weight: 800; }
:root[dir="rtl"] .g-doc h1, :root[dir="rtl"] .g-doc h2 { letter-spacing: 0; }
.g-doc p, .g-doc ul, .g-doc ol { margin: 0 0 12px; color: var(--g-ink-2); }
.g-doc ul, .g-doc ol { padding-inline-start: 22px; }
.g-doc li + li { margin-top: 6px; }
.g-doc strong { color: var(--g-ink); font-weight: 750; }
.g-doc code { padding: 1px 6px; border-radius: 6px; background: var(--g-track); font-size: .92em; }
.g-doc blockquote { margin: 18px 0; padding: 14px 18px; border-radius: 16px; background: var(--g-warn-soft); border: 1px solid var(--g-warn-line); }
.g-doc blockquote p:last-child { margin-bottom: 0; }
.g-table { margin: 0 0 16px; overflow-x: auto; }
.g-doc table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.g-doc th, .g-doc td { padding: 10px 12px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--g-hair); }
.g-doc th { color: var(--g-ink); font-weight: 750; white-space: nowrap; }
.g-doc td { color: var(--g-ink-2); overflow-wrap: normal; }

/* Tablet and phone */
@media (max-width: 1099px) {
  .g-frame { grid-template-columns: minmax(0, 1fr); }
  .g-side { display: none; }
  .g-back { display: inline-flex; }
  .g-main { padding-inline: 24px; }
}
@media (max-width: 860px) {
  .g-plans, .g-sk-plans { grid-template-columns: 1fr; }
  .g-sk-plans i:nth-child(n + 2) { display: none; }
}
@media (max-width: 760px) {
  .g-main { padding: 90px 16px 48px; }
  body.g-narrow .g-main { padding-top: 104px; }
  body:has(.g-dock) .g-main { padding-bottom: 120px; }
  .g-bar { top: 10px; width: calc(100% - 20px); height: 58px; gap: 6px; padding-inline: 14px 8px; border-radius: 18px; }
  .g-mark-name { display: none; }
  .g-mark-mk { font-size: 26px; }
  .g-bar-back span { display: none; }
  .g-bar-back { padding-inline: 10px; margin-inline-start: 2px; }
  .g-bar.g-bar-stage { position: absolute; height: 64px; }
  .g-bar-stage .g-mark { position: static; transform: none; }
  :root[dir="rtl"] .g-bar-stage .g-mark { transform: none; }
  .g-bar-stage .g-mark-name { display: inline; font-size: 11px; }
  .g-bar-company { display: none !important; }  /* the phone concept keeps only the mark, language, theme and avatar */
  .g-bar-tools { margin-inline-start: auto; }
  .g-tool { height: 40px; padding: 0 10px; }
  .g-theme button { width: 32px; height: 32px; }
  .g-avatar { width: 38px; height: 38px; }
  .g-head { margin-bottom: 16px; }
  .g-title { font-size: 28px; }
  .g-role { display: none; }
  .g-card { padding: 20px; border-radius: 24px; }
  .g-plan-head { grid-template-columns: auto minmax(0, 1fr); }
  .g-plan-side { grid-column: 1 / -1; justify-content: flex-start; }
  .g-tile { width: 50px; height: 50px; font-size: 21px; }
  .g-plan-title h2 { font-size: 24px; }
  .g-meters { grid-template-columns: 1fr; gap: 16px; }
  .g-meter { padding: 0; border: 0; }
  .g-banner { flex-wrap: wrap; }
  .g-banner p { min-width: 180px; }
  .g-renew .g-pill { display: none; }
  .g-switch { width: 100%; }
  .g-switch button { flex: 1; justify-content: center; padding: 0 8px; font-size: 14px; }
  .g-switch .g-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* still read aloud */
  .g-switch .g-short { display: inline; }
  .g-why { text-align: start; }
  .g-actions .g-pill, .g-actions .g-capsule { flex: 1 1 100%; }
  .g-stack .g-pill, .g-stack .g-capsule { flex: 0 0 auto; }  /* a column: 100% would be a height and wrap Cancel off the sheet */
  .g-two { grid-template-columns: 1fr; }
  .g-info { grid-template-columns: auto minmax(0, 1fr); }
  .g-info .g-round { grid-column: 1 / -1; justify-self: end; }
  .g-dock { display: block; position: fixed; z-index: 15; inset-inline: 0; bottom: 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, var(--g-bg) 55%, transparent); }
  .g-dock .g-pill { width: 100%; min-height: 56px; font-size: 17px; }
  .g-join, .g-join-list, .g-join-narrow { padding: 28px 20px; }
  .g-join h1 { font-size: 25px; }
  .g-invite { grid-template-columns: 1fr; padding: 18px; }
  .g-invite button { width: 100%; }
  .g-agree { padding: 16px; }
  .g-agree .g-fine { padding-inline-start: 0; }
  .g-doc { padding: 26px 20px 28px; font-size: 15px; }
  .g-doc h1 { font-size: 26px; }
  .g-doc h2 { font-size: 19px; }
  .g-result { min-height: 300px; }
  dialog.g-sheet { width: 100vw; margin: auto 0 0; }
  dialog.g-sheet .g-sheet-body { border-radius: 28px 28px 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
@media (min-width: 1900px) {
  .g-main, .g-bar { width: min(1480px, calc(100% - 32px)); }
  body.g-narrow .g-main { width: min(980px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .g-skeleton i, .g-sk-plans i, .g-progress::after { animation: none; }
  .g-progress::after { width: 100%; opacity: .6; }
  .g-pill, .g-capsule, .g-switch button, .g-side a, .g-check input, .g-check input::before { transition: none; }
  .g-pill:hover:not(:disabled), .g-pill:active:not(:disabled), .g-capsule:active:not(:disabled) { transform: none; }
}