/* Glyvo · variant «apple». Every authored class is prefixed g-. Scene motion reads --t / --u,
   written by g.js from the act's --sc-p (0..1 inside each data-t / data-u window). */
:root {
  --sc-canvas: #08090b;
  --sc-surface: #121318;
  --sc-ink: #f2f3f5;
  --sc-ink-soft: #a9aeb7;
  --sc-accent: #3fd6c3;
  --sc-accent-ink: #052421;
  --sc-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --sc-font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --g-teal: #3fd6c3;
  --g-teal-hi: #8ef0e3;
  --g-teal-fill: #2fc4b1;
  --g-line: rgba(255, 255, 255, 0.09);
  --g-edge: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --g-e2: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 10px 30px -10px rgba(0, 0, 0, 0.5);
  --g-e3: 0 60px 140px -30px rgba(0, 0, 0, 0.85), 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  --g-bar: 48px;
  --g-subh: 40px;
  /* the app's own dark tokens (src/styles.css) */
  --a-bg: #1c1c20; --a-side: #161619; --a-surface: #242429; --a-surface2: #2b2b31;
  --a-line: #34343b; --a-line2: #44444c; --a-fg: #ececf1; --a-fg2: #a6a6b2; --a-fg3: #8e8e9a;
  color-scheme: dark;
}
html { background: var(--sc-canvas); }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--g-teal); outline-offset: 3px; border-radius: 6px; }
kbd { font: inherit; }
::selection { background: rgba(63, 214, 195, 0.32); color: #fff; }
.g-light ::selection { background: rgba(11, 127, 115, 0.22); color: #1d1d1f; }
html { scrollbar-color: #2a2c31 #08090b; }

/* ================================================================ chrome */
.g-bar { position: fixed; inset: 0 0 auto; z-index: 50; pointer-events: none; }
.g-bar__row {
  pointer-events: auto; height: var(--g-bar); display: flex; align-items: center; gap: 16px;
  padding: 0 max(20px, calc((100vw - 1180px) / 2));
  background: rgba(10, 11, 13, 0.72); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: relative; z-index: 2;
}
.g-lockup { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; height: 30px; border-radius: 8px; }
.g-mark { width: 28px; height: 28px; display: block; overflow: visible; transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), filter 0.35s; }
body.is-listening .g-bar .g-mark { transform: scale(1.35); filter: drop-shadow(0 3px 8px rgba(63, 214, 195, 0.55)); }
.g-word { height: 21px; width: auto; display: block; }
.g-bar__hint { margin: 0 0 0 auto; font-size: 13px; color: #9ea4ad; letter-spacing: 0.005em; }
.g-bar__hint kbd { color: var(--sc-ink); padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
body.is-listening .g-bar__hint { color: var(--g-teal-hi); }
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px;
  border-radius: 999px; background: var(--g-teal); color: var(--sc-accent-ink); font-weight: 600; font-size: 17px;
  text-decoration: none; letter-spacing: -0.01em; transition: background-color 0.2s, transform 0.2s cubic-bezier(.2, .8, .2, 1);
  box-shadow: 0 10px 30px -10px rgba(63, 214, 195, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.g-btn:hover { background: var(--g-teal-hi); }
.g-btn:active { transform: translateY(1px); }
.g-btn--sm { min-height: 32px; padding: 0 14px; font-size: 13px; box-shadow: none; }
/* while there is no public build the header button is quieter: it only jumps to the close */
.g-btn--soon { background: transparent; color: var(--g-teal-hi); box-shadow: inset 0 0 0 1.5px rgba(63, 214, 195, 0.7); }
.g-btn--soon:hover { background: rgba(63, 214, 195, 0.14); }
.g-bar__row .g-btn--sm { margin-left: 4px; }

.g-sub {
  pointer-events: auto; height: var(--g-subh); display: flex; align-items: center; justify-content: center; gap: 4px;
  background: rgba(10, 11, 13, 0.62); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transform: translateY(calc(-100% - 1px)); opacity: 0; transition: transform 0.45s cubic-bezier(.2, .8, .2, 1), opacity 0.3s;
  overflow-x: auto; scrollbar-width: none; padding: 0 16px;
}
.g-sub::-webkit-scrollbar { display: none; }
body.g-past-hero .g-sub { transform: none; opacity: 1; }
.g-sub a { flex: none; color: #b8bdc5; font-size: 13px; text-decoration: none; padding: 6px 12px; border-radius: 999px; position: relative; transition: color 0.2s, background-color 0.2s; }
.g-sub a:hover { color: var(--sc-ink); }
.g-sub a[aria-current="true"] { color: var(--sc-ink); background: rgba(255, 255, 255, 0.08); }
.g-sub a[aria-current="true"]::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--g-teal); }

/* ================================================================ type */
.g-disp { font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; letter-spacing: -0.035em; margin: 0; text-wrap: balance; }
.g-body { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.5; color: var(--sc-ink-soft); margin: 18px 0 0; max-width: 34em; text-wrap: pretty; letter-spacing: 0.002em; }
.g-fine { font-size: 13px; line-height: 1.45; color: #959ba5; margin: 12px 0 0; }
.g-eyebrow { font-size: 17px; font-weight: 600; color: #0b7f73; margin: 0 0 14px; }
.g-kbd { display: inline-flex; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.4); color: var(--sc-ink); font-weight: 600; white-space: nowrap; }

/* stages: every pinned scene leaves room for the two-tier bar; it fades as it slides under the bar */
.g-act > [data-sc-stage] { opacity: calc(1 - var(--x, 0) * 0.7); }

.g-section { padding-block: clamp(96px, 12vw, 180px); position: relative; }
.g-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 56px); }

/* reduced motion: g.js snaps --t to 0 or 1 and the change is a fade, never travel */
@media (prefers-reduced-motion: reduce) {
  [data-t], [data-u] { transition: opacity 0.25s; }
}

/* ================================================================ the pill (Струна, sized, never scaled) */
.g-pill {
  --s: 1; position: relative; width: calc(120px * var(--s)); height: calc(34px * var(--s)); border-radius: 999px;
  background: rgba(14, 15, 18, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 calc(5px * var(--s)) calc(14px * var(--s)) rgba(0, 0, 0, 0.32);
  overflow: hidden; display: grid; place-items: center;
}
.g-pill svg { width: 100%; height: 100%; display: block; overflow: visible; }
.g-pill .g-s-main { fill: none; stroke-width: 1.7; stroke-linecap: round; }
.g-pill .g-s-echo { fill: none; stroke-width: 1.1; opacity: 0.35; }
.g-pill .g-s-spark { fill: var(--g-teal); opacity: 0; }
.g-pill.is-busy .g-s-spark { opacity: 1; }
.g-pill[data-mode="translate"]::after {
  content: "EN"; position: absolute; right: calc(9px * var(--s)); top: 50%; transform: translateY(-50%);
  font: 600 calc(9px * var(--s)) / 1 var(--sc-font-text); letter-spacing: 0.04em; color: rgba(63, 214, 195, 0.8);
}
.g-pillslot { display: grid; place-items: center; }

/* ================================================================ 1 · hero */
.g-hero { display: grid; place-items: center; overflow: clip; }
.g-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.g-hero__type {
  position: absolute; left: 0; right: 0; top: calc(var(--g-bar) + 5vh); text-align: center; z-index: 1;
  opacity: calc(1 - var(--t, 0) * 0.55);
  transform: translateY(calc(var(--t, 0) * -4vh));
}
.g-hero__name {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.055em; line-height: 0.86;
  font-size: clamp(110px, 21vw, 330px);
  color: #f4f5f7;
}
.g-hero__lede { margin: 3.4vh 0 0; font-size: clamp(20px, 2vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: #c9ced5; }
.g-hero__win {
  position: absolute; left: 50%; top: calc(var(--g-bar) + 30vh); z-index: 2;
  width: min(1040px, 86vw); margin-left: calc(min(1040px, 86vw) / -2);
  transform-origin: 50% 0;
  transform: perspective(1800px) translateY(calc((1 - var(--t, 0)) * 28vh)) rotateX(calc((1 - var(--t, 0)) * 22deg));
  opacity: calc(0.6 + var(--t, 0) * 0.4);
}

/* ================================================================ the Mac window, in the app's own tokens */
.g-mac {
  display: grid; grid-template-columns: 238px 1fr; aspect-ratio: 820 / 560; border-radius: 14px; overflow: hidden;
  background: var(--a-bg); color: var(--a-fg); font-size: 14px; line-height: 1.35;
  box-shadow: var(--g-e3), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-align: left;
}
.g-mac__side { background: var(--a-side); border-right: 1px solid var(--a-line); padding: 16px 10px 0; overflow: hidden; }
.g-mac__brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; font-size: 16px; }
.g-mac__brand img { width: 22px; height: 22px; display: block; }
.g-mac__ready { margin-left: auto; font-size: 11.5px; color: var(--a-fg2); background: rgba(255, 255, 255, 0.08); border-radius: 999px; padding: 2px 9px; }
.g-mac__nav { display: grid; gap: 1px; }
.g-mac__nav span { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 7px; font-size: 13.5px; color: var(--a-fg); white-space: nowrap; }
.g-mac__nav span svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.g-mac__nav span i { margin-left: auto; font-style: normal; color: var(--a-fg3); font-size: 12px; }
.g-mac__nav span.is-on { background: color-mix(in srgb, var(--g-teal) 18%, transparent); color: var(--g-teal-hi); }
.g-mac__nav span.is-on i { color: var(--g-teal-hi); }
.g-mac__nav em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--a-fg3); padding: 12px 10px 4px; }
.g-mac__main { padding: 26px 30px; overflow: hidden; }
.g-mac__title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }
.g-mac__tools { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.g-mac__search { flex: 1; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--a-line2); color: var(--a-fg3); font-size: 13.5px; }
.g-mac__search svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.g-mac__muted { color: var(--a-fg2); font-size: 13.5px; }
.g-mac__num { border: 1px solid var(--a-line2); border-radius: 7px; padding: 4px 12px; font-size: 13.5px; }
.g-mac__list { border: 1px solid var(--a-line); border-radius: 12px; overflow: hidden; background: var(--a-surface); }
.g-hist { padding: 13px 16px; border-top: 1px solid var(--a-line); }
.g-hist:first-child { border-top: 0; }
.g-hist__meta { margin: 0; color: var(--a-fg2); font-size: 12.5px; }
.g-hist__meta mark { background: color-mix(in srgb, var(--g-teal) 18%, transparent); color: var(--g-teal-hi); border-radius: 5px; padding: 1px 6px; font-size: 11.5px; font-weight: 600; margin-left: 4px; }
.g-hist__text { margin: 5px 0 0; font-size: 14.5px; }
.g-hist__acts { margin: 9px 0 0; display: flex; gap: 18px; align-items: center; color: var(--a-fg2); font-size: 13px; }
.g-hist__acts b { font-weight: 500; color: var(--a-fg); border: 1px solid var(--a-line2); border-radius: 7px; padding: 4px 11px; }
.g-hist__acts span { display: inline-flex; align-items: center; gap: 5px; }
.g-hist__acts svg { width: 12px; height: 12px; fill: currentColor; }

/* ================================================================ 2 · why (silence) */
.g-why { display: grid; place-items: center; padding: calc(var(--g-bar) + var(--g-subh)) clamp(20px, 6vw, 80px) 0; }
.g-why__text { margin: 0; max-width: 22em; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(32px, 4.6vw, 68px); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.g-w { opacity: clamp(0.3, calc((var(--t, 0) * var(--n) - var(--i)) * 0.9 + 0.3), 1); transition: opacity 0.12s linear; }
.g-why__turn .g-w { color: var(--g-teal); }

/* ================================================================ 3 · the peak */
.g-try {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(28px, 4vw, 72px);
  padding: calc(var(--g-bar) + var(--g-subh) + 24px) max(24px, calc((100vw - 1240px) / 2)) 24px;
}
.g-try__light { position: absolute; right: -10vw; top: 10vh; width: 70vw; height: 80vh; pointer-events: none;
  background: radial-gradient(closest-side, rgba(63, 214, 195, 0.16), rgba(63, 214, 195, 0.05) 55%, transparent 75%); opacity: calc(0.5 + var(--live, 0) * 0.5); transition: opacity 0.5s; }
.g-try.is-live { --live: 1; }
.g-try__field { opacity: 0; transition: opacity 0.6s; }
.g-try.is-live .g-try__field, .g-try.is-after .g-try__field { opacity: 1; }
.g-try__copy { position: relative; z-index: 2; opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 30px)); }
.g-try__copy .g-disp { font-size: clamp(40px, 5vw, 76px); }
.g-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin: 30px 0 0; }
.g-ctas--c { justify-content: center; }
.g-hold {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 26px 0 20px; border-radius: 999px; cursor: pointer;
  font: 600 17px/1 var(--sc-font-text); color: var(--sc-ink);
  border: 1px solid rgba(63, 214, 195, 0.65); background: rgba(63, 214, 195, 0.14);
  transition: background-color 0.2s, border-color 0.2s;
}
.g-hold:hover { background: rgba(63, 214, 195, 0.24); }
.g-hold__mic { width: 24px; height: 24px; fill: none; stroke: var(--g-teal-hi); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-hold::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 0 rgba(63, 214, 195, 0.5); animation: g-breathe 2.2s ease-out infinite; }
.g-hold.is-down { background: rgba(63, 214, 195, 0.32); }
.g-hold.is-down::after { animation: none; }
.g-hold--sm { min-height: 50px; font-size: 16px; }
@keyframes g-breathe { 70%, 100% { box-shadow: 0 0 0 14px rgba(63, 214, 195, 0); } }
.g-hold-alt { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: #b6bcc4; }
@media (pointer: coarse) { .g-hold-alt, .g-bar__hint { display: none; } }

.g-try__win { position: relative; z-index: 1; opacity: var(--t, 0); transform: translateX(calc((1 - var(--t, 0)) * 8vw)); }
.g-doc { position: relative; border-radius: 16px; background: #17181c; box-shadow: var(--g-e3), inset 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; }
.g-doc__bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: #1d1e23; }
.g-doc__bar i, .g-card__bar i { width: 12px; height: 12px; border-radius: 50%; background: #3a3b42; }
.g-doc__bar span { margin-left: 10px; font-size: 13px; color: #9aa0aa; font-weight: 500; }
.g-doc__body { padding: clamp(22px, 3vw, 40px) clamp(22px, 3vw, 44px) 130px; min-height: clamp(300px, 46vh, 460px); }
.g-doc__h { margin: 0 0 14px; font-size: clamp(24px, 2.4vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
.g-doc__text { margin: 0; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.38; letter-spacing: -0.01em; min-height: 3.3em; color: #eef0f3; }
.g-doc__note { margin: 14px 0 0; min-height: 1.4em; font-size: 14px; color: var(--g-teal-hi); opacity: 0; transition: opacity 0.4s; }
.g-doc__note.is-on { opacity: 1; }
.g-caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.15em; background: var(--g-teal); margin-left: 1px; animation: g-blink 1.1s steps(1) infinite; }
@keyframes g-blink { 50% { opacity: 0; } }
.g-ins { display: inline; }
.g-iw { display: inline-block; opacity: 0; transform: translateY(0.35em); filter: blur(4px); animation: g-land 0.5s cubic-bezier(.2, .8, .2, 1) forwards; animation-delay: calc(var(--i) * 45ms); height: auto; }
@keyframes g-land { to { opacity: 1; transform: none; filter: none; } }
.g-sw { display: inline-block; opacity: var(--o, 0); transform: translateY(calc((1 - var(--o, 0)) * 0.35em)); }
.g-filler { display: inline-block; color: #ff9d8a; text-decoration: line-through; text-decoration-thickness: 2px; transition: opacity 0.45s, transform 0.45s cubic-bezier(.5, 0, .7, .4), max-width 0.45s 0.25s, margin 0.45s 0.25s; max-width: 12em; white-space: nowrap; overflow: hidden; vertical-align: bottom; }
.g-filler.is-gone { opacity: 0; transform: translateY(-1em); max-width: 0; margin-right: -0.28em; }
.g-doc__pill { position: absolute; left: 50%; bottom: 26px; display: grid; justify-items: center; gap: 10px; transform: translate(-50%, 160%); transition: transform 0.55s cubic-bezier(.2, .9, .25, 1); }
.g-doc__pill.is-up { transform: translate(-50%, 0); }
.g-doc__status { font-size: 13px; color: #b9c0c8; }
.g-try__fine { max-width: 40em; font-size: 14px; color: #c3c8cf; }
.g-demo { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--sc-accent-ink); background: var(--g-teal); }
/* the peak's pill leaves the window and rises over the whole stage; the window recedes behind it */
.g-try__pill { position: absolute; z-index: 5; left: 50%; top: 70%; display: grid; justify-items: center; gap: 14px; pointer-events: none;
  transform: translate(-50%, 60vh); opacity: 0; transition: transform 0.6s cubic-bezier(.2, .9, .25, 1), opacity 0.35s; }
.g-try__pill.is-up { transform: translate(-50%, -50%); opacity: 1; }
.g-try__pill .g-doc__status { font-size: 15px; color: #d6dadf; }
.g-try__copy, .g-try__win { transition: filter 0.5s, translate 0.5s; }
.g-try.is-live .g-try__copy, .g-try.is-live .g-try__win { filter: brightness(0.42); translate: 0 2vh; }

/* ================================================================ 4 · apps: cards slide over cards */
.g-card__bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: #1e1f25; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.g-card__bar span { margin-left: 10px; font-size: 13px; color: #a5abb5; font-weight: 600; }
.g-card__body { padding: 26px 28px 20px; min-height: 210px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.4; }
.g-card__body p { margin: 0; }
.g-card__rule { margin: 0; padding: 14px 28px 18px; font-size: 14px; color: var(--g-teal-hi); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.g-chat { display: grid; gap: 12px; align-content: start; }
.g-bub { max-width: 78%; padding: 10px 16px; border-radius: 20px; font-size: clamp(17px, 1.4vw, 21px); }
.g-bub--them { background: #2a2b31; justify-self: start; border-bottom-left-radius: 6px; }
.g-bub--me { background: var(--g-teal-fill); color: #04201c; justify-self: end; border-bottom-right-radius: 6px; font-weight: 500; }
.g-mail__to { font-size: 14px !important; color: #9aa0aa; margin-bottom: 12px !important; }
.g-note s { color: #ff9d8a; text-decoration-thickness: 2px; }
.g-ai__q { background: #23242a; border-radius: 16px; padding: 16px 18px; }
.g-ai__send { margin-top: 12px !important; text-align: right; font-size: 13px; color: #04201c; }
.g-ai__send { display: inline-block; float: right; background: var(--g-teal); border-radius: 8px; padding: 4px 10px; font-weight: 600; }
.g-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: clamp(15px, 1.3vw, 19px); display: grid; gap: 8px; }
.g-code__ln { display: inline-block; width: 2.4em; color: #80868f; }
.g-code__c { color: #8ad6a8; }

/* ================================================================ 5 · bento */
.g-more__h { margin-bottom: clamp(36px, 5vw, 64px); max-width: 14em; }
.g-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.g-tile {
  grid-column: span 2; border-radius: 24px; padding: 28px 28px 26px; background: linear-gradient(180deg, #16171c, #111216);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.06); overflow: hidden; position: relative;
  display: flex; flex-direction: column;
}
.g-tile h3 { margin: 0; font-size: clamp(20px, 1.7vw, 26px); letter-spacing: -0.02em; font-weight: 700; }
.g-tile__p { margin: 12px 0 0; color: var(--sc-ink-soft); font-size: 16px; line-height: 1.5; }
.g-tile__fine { margin: auto 0 0; padding-top: 14px; color: #959ba5; font-size: 13.5px; }
.g-tile--clean { grid-column: span 4; min-height: 360px; }
.g-tile--ind { grid-column: span 2; }
.g-tile--hist, .g-tile--esc { grid-column: span 2; }
.g-seg { display: inline-flex; margin-top: 22px; padding: 3px; border-radius: 10px; background: #0c0d10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); align-self: start; flex-wrap: wrap; }
.g-seg span { padding: 7px 14px; border-radius: 8px; font-size: 14px; color: #a9aeb7; }
.g-seg .is-on { background: #2a2c33; color: var(--sc-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.g-diff { margin: 26px 0 0; font-size: clamp(24px, 2.6vw, 40px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.g-diff del { color: #ff9d8a; text-decoration-thickness: 3px; }
.g-diff ins { text-decoration: none; color: var(--g-teal); }
.g-inds { display: grid; gap: 16px; margin-top: 22px; }
.g-inds figure { margin: 0; display: flex; align-items: center; gap: 14px; }
.g-inds figcaption { font-size: 14px; color: #b6bcc4; }
.g-inds .sf-pill svg { width: 100%; height: 100%; }
.g-say { margin: 18px 0 0; font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--g-teal); }
.g-steps { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: s; }
.g-steps li { counter-increment: s; display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #d7dbe0; }
.g-steps li::before { content: counter(s); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: rgba(63, 214, 195, 0.14); color: var(--g-teal-hi); }
.g-pair { margin: 14px 0 0; display: flex; gap: 12px; align-items: baseline; font-size: clamp(19px, 1.6vw, 24px); }
.g-pair + .g-pair { margin-top: 6px; }
.g-pair s { color: #8d939d; }
.g-pair span { color: var(--g-teal); }
.g-pair b { font-weight: 700; }
.g-player { display: flex; align-items: center; gap: 12px; margin-top: 20px; padding: 10px 14px; border-radius: 14px; background: #0c0d10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); }
.g-player__btn { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--g-teal); }
.g-player__btn svg { width: 14px; height: 14px; fill: #04201c; margin-left: 2px; }
.g-player__wave { flex: 1; height: 26px; background: repeating-linear-gradient(90deg, rgba(63, 214, 195, 0.75) 0 2px, transparent 2px 5px); -webkit-mask: linear-gradient(transparent, #000 30% 70%, transparent), radial-gradient(60% 100% at 30% 50%, #000, rgba(0, 0, 0, .45)); mask: radial-gradient(70% 120% at 35% 50%, #000 30%, rgba(0, 0, 0, 0.35)); }
.g-player__t { font-size: 13px; color: #a9aeb7; font-variant-numeric: tabular-nums; }
.g-notice { display: inline-flex; align-self: start; align-items: center; gap: 14px; margin-top: 22px; padding: 10px 18px; border-radius: 999px; background: rgba(14, 15, 18, 0.95); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); font-size: 15px; }
.g-notice b { color: var(--g-teal); font-weight: 600; }

/* ================================================================ 6 · translate */
.g-cap--q .g-cap__g { transform: translateY(0.2em); }
.g-tr.is-live .g-cap { transform: translateY(6px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(63, 214, 195, 0.7), 0 20px 40px -20px rgba(0, 0, 0, 0.8); }
.g-tr.is-live .g-cap__g { color: var(--g-teal-hi); }
.g-tr__said .g-w { opacity: clamp(0.28, calc((var(--t, 0) * var(--n) - var(--i)) * 0.8 + 0.28), 1); }
.g-tr__got .g-w { display: inline-block; opacity: clamp(0, calc(var(--t, 0) * var(--n) - var(--i)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--t, 0) * var(--n) - var(--i)), 1)) * 0.4em)); }
.g-tr__lbl { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; color: #8d939d; margin-bottom: 6px; opacity: 1 !important; transform: none !important; }
.g-tr__got .g-tr__lbl { color: var(--g-teal); opacity: clamp(0, calc((var(--t, 0) - 0.92) * 14), 1) !important; }

/* ================================================================ 7 · meetings */
.g-ticks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 12px)); }
.g-ticks li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; color: #d4d8de; }
.g-ticks li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g-teal); transform: translateY(-1px); }
.g-mt__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--a-line); }
.g-mt__rec { width: 10px; height: 10px; border-radius: 50%; background: #ff6f66; animation: g-blink 1.6s steps(1) infinite; }
.g-mt__bar b { font-variant-numeric: tabular-nums; }
.g-mt__bar span { color: var(--a-fg2); }
.g-mt__bar em { margin-left: auto; font-style: normal; border: 1px solid var(--a-line2); border-radius: 7px; padding: 4px 10px; font-size: 13px; }
.g-mt__bar strong { background: var(--g-teal-fill); color: #04201c; border-radius: 7px; padding: 5px 11px; font-size: 13px; font-weight: 600; }
.g-mt__opts { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--a-line); font-size: 13px; color: var(--a-fg2); }
.g-mt__opts span:first-child { display: inline-flex; align-items: center; gap: 7px; color: var(--a-fg); }
.g-mt__sel { border: 1px solid var(--a-line2); border-radius: 7px; padding: 3px 10px; }
.g-chk { width: 14px; height: 14px; border-radius: 4px; background: var(--g-teal-fill); display: inline-block; position: relative; }
.g-chk::after { content: ""; position: absolute; left: 4px; top: 1.5px; width: 4px; height: 7px; border: solid #04201c; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.g-mt__lines { flex: 1; overflow: hidden; padding: 4px 0; display: flex; flex-direction: column; justify-content: flex-end; }
.g-ln { padding: 10px 14px; border-top: 1px solid var(--a-line); opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 24px)); }
.g-ln p { margin: 0; }
.g-ln__who { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; margin-bottom: 3px !important; }
.g-ln__who time { color: var(--a-fg3); font-weight: 400; font-variant-numeric: tabular-nums; }
.g-ln__tr { margin-top: 4px !important; color: var(--a-fg2); font-size: 13px; }
.g-me { color: var(--g-teal); }
.g-v1 { color: #f2b880; }
.g-v2 { color: #9fc3ff; }
.g-mt__foot { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-top: 1px solid var(--a-line); font-size: 13px; color: var(--a-fg2); }
.g-mt__foot span:first-child { border: 1px solid var(--a-line2); border-radius: 7px; padding: 4px 10px; color: var(--a-fg); }
.g-mt__foot span:last-child { display: inline-flex; gap: 7px; align-items: center; }
.g-sum p { margin: 0; }
.g-sum__h { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 6px !important; }
.g-sum__k { margin-top: 12px !important; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--g-teal); }
.g-sum__task { display: flex; gap: 8px; }
.g-sum__task i { flex: none; width: 14px; height: 14px; margin-top: 3px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #8d939d; }

/* ================================================================ 8 · phone over Mac */
.g-mac--home { grid-template-columns: 190px 1fr; aspect-ratio: 820 / 540; }
.g-mac__side--slim .g-mac__nav span { font-size: 13px; }
.g-sync { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--a-surface); border: 1px solid var(--a-line); margin-bottom: 14px; font-size: 13.5px;
  opacity: calc(0.35 + var(--t, 0) * 0.65); }
.g-sync__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-teal); box-shadow: 0 0 0 calc(var(--t, 0) * 5px) rgba(63, 214, 195, 0.18); }
.g-sync__ok { margin-left: auto; color: var(--g-teal-hi); font-size: 12.5px; opacity: var(--t, 0); }
.g-iph__frame { position: relative; aspect-ratio: 9 / 19.2; border-radius: 17% / 8%; padding: 4.2%; background: linear-gradient(145deg, #3a3c42, #17181b 40%, #2b2d32);
  box-shadow: var(--g-e3), inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #0b0c0e; }
.g-iph__btn { position: absolute; left: -3px; width: 4px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, #4a4c52, #26272b); }
.g-iph__btn--action { top: 17%; height: 4.5%; background: linear-gradient(90deg, #4a4c52, #26272b); box-shadow: 0 0 0 calc(var(--t, 0) * 3px) rgba(63, 214, 195, 0.75); }
.g-iph__btn--v1 { top: 25%; height: 8%; }
.g-iph__btn--v2 { top: 35%; height: 8%; }
.g-iph__btn--side { left: auto; right: -3px; top: 27%; height: 12%; border-radius: 0 3px 3px 0; }
.g-iph__screen { position: relative; height: 100%; border-radius: 13% / 6.2%; background: #1c1c20; overflow: hidden; display: flex; flex-direction: column; padding: 0 7%; }
.g-iph__island { position: absolute; left: 50%; top: 2.4%; height: 5.4%; min-height: 26px; width: calc(34% + var(--t, 0) * 52%); transform: translateX(-50%); border-radius: 999px; background: #000;
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px; overflow: hidden; z-index: 3; }
.g-iph__live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #f4f5f7; opacity: var(--t, 0); white-space: nowrap; }
.g-iph__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--g-teal); }
.g-iph__str { opacity: var(--t, 0); }
.g-iph__str .g-pill { background: transparent; box-shadow: none; }
.g-iph__time { margin: 4.5% 0 0 4%; font-size: 13px; font-weight: 600; }
.g-iph__h { margin: 14% 0 0; font-size: clamp(22px, 2vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.g-iph__text { margin: 6px 0 0; font-size: clamp(13px, 1vw, 15px); line-height: 1.38; min-height: 4.2em; }
.g-iph__text .g-c { opacity: calc(clamp(0, (var(--t, 0) * var(--n) - var(--i)) * 1, 1)); }
.g-kb { margin: auto -7.5% 0; padding: 10px 8px 16px; background: #2a2a2f; display: grid; gap: 7px; }
.g-kb__status { margin: 0; text-align: center; font-size: 10.5px; color: #a9aeb7; }
.g-kb__row { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.6fr; gap: 6px; align-items: center; }
.g-kb__row span { height: 30px; border-radius: 7px; background: #3a3a40; display: grid; place-items: center; font-size: 13px; color: #e8e9ec; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.g-kb__row .g-kb__mic { grid-row: span 2; height: 66px; width: 66px; justify-self: center; border-radius: 50%; background: var(--g-teal-fill); box-shadow: 0 0 0 4px rgba(63, 214, 195, 0.22); }
.g-kb__mic svg { width: 26px; height: 26px; fill: none; stroke: #04201c; stroke-width: 2; stroke-linecap: round; }
.g-kb__row:nth-child(3) { margin-top: -36px; }
.g-kb__gap { visibility: hidden; }
.g-kb__last { margin: 0; display: flex; justify-content: center; align-items: center; gap: 5px; font-size: 11px; color: var(--g-teal-hi); }
.g-kb__last svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }
.g-kb__space { margin: 0; height: 30px; border-radius: 7px; background: #3a3a40; display: grid; place-items: center; font-size: 12px; }

/* ================================================================ 9 · light chapter */
.g-light { --sc-ink: #1d1d1f; --sc-ink-soft: #55565c; color: #1d1d1f; background: #f5f5f7; }
.g-light__h { color: #1d1d1f; max-width: 13em; }
.g-path { position: relative; display: flex; align-items: center; gap: 0; margin: clamp(44px, 6vw, 80px) 0 clamp(44px, 6vw, 72px); padding-top: 56px; flex-wrap: nowrap; }
.g-path__node { flex: none; display: grid; justify-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: #1d1d1f; }
.g-path__node > svg { width: 56px; height: 56px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); fill: none; stroke: #1d1d1f; stroke-width: 1.8; stroke-linecap: round; box-sizing: border-box; }
.g-path__node--mac img { width: 84px; height: 84px; display: block; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.25)); }
.g-path__caret { height: 56px; display: grid; place-items: center; padding: 0 16px; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.25); font-size: 18px; font-weight: 500; }
.g-path__line { flex: 1; height: 2px; margin: 0 14px 28px; background: repeating-linear-gradient(90deg, #0b7f73 0 8px, transparent 8px 14px); background-size: 28px 2px; animation: g-flow 1.2s linear infinite; }
@keyframes g-flow { to { background-position: 28px 0; } }
.g-path__cloud { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #6e6e73; font-weight: 500; }
.g-path__cloud svg { width: 22px; height: 22px; fill: none; stroke: #6e6e73; stroke-width: 1.6; stroke-dasharray: 3 3; }
.g-path__cloud::after { content: ""; position: absolute; left: 2px; top: 50%; width: 22px; height: 2px; background: #6e6e73; transform: rotate(-35deg); }
.g-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); border-top: 1px solid #d2d2d7; padding-top: 36px; }
.g-cols h3 { margin: 0 0 10px; font-size: 21px; letter-spacing: -0.015em; color: #1d1d1f; }
.g-cols p { margin: 0; color: #55565c; font-size: 17px; line-height: 1.5; }
.g-light .g-eyebrow { color: #0b7f73; }

/* ================================================================ 10 · close */
.g-get { display: grid; place-items: center; align-content: center; gap: 0; text-align: center; padding: calc(var(--g-bar) + 24px) 20px 96px; }
.g-get__tile { width: min(clamp(180px, 46vh, 460px), calc(100vw - 40px)); aspect-ratio: 1; margin-bottom: -9vh; position: relative; z-index: 0; transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform 0.4s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(63, 214, 195, 0.08)); }
.g-mark--big { width: 100%; height: 100%; }
.g-get__h { font-size: clamp(44px, 6.4vw, 104px); text-shadow: 0 6px 30px rgba(8, 9, 11, 0.85); }
.g-get__copy { position: relative; z-index: 2; max-width: 100%; min-width: 0; }
.g-get__note { color: #b6bcc4; }
.g-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; padding: 18px 20px 22px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; color: #8d939d; }
.g-foot img { height: 26px; width: auto; display: block; }

/* ================================================================ the floating indicator (⌘ / anywhere) */
.g-float { position: fixed; left: 50%; bottom: 26px; z-index: 60; display: grid; justify-items: center; gap: 10px; transform: translate(-50%, 140px); transition: transform 0.45s cubic-bezier(.2, .9, .25, 1); pointer-events: none; }
.g-float.is-up { transform: translate(-50%, 0); }
.g-float__note { max-width: min(560px, 90vw); padding: 10px 18px; border-radius: 16px; background: rgba(14, 15, 18, 0.94); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 10px 30px rgba(0, 0, 0, 0.4); font-size: 14px; line-height: 1.4; color: #e7e9ec; text-align: center; display: none; }
.g-float__note.is-on { display: block; }
.g-float__note small { display: block; color: #9ea4ad; font-size: 12px; margin-top: 2px; }

/* ================================================================ phone layouts */
@media (max-width: 900px) {
  .g-bar__hint { display: none; }
  .g-bar__row .g-btn--sm { min-height: 40px; }
  .g-lockup { height: 44px; }
  :root { --g-subh: 44px; }
  .g-sub { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
  .g-sub a { padding: 12px 12px; }
  .g-bar__row .g-btn--sm { margin-left: auto; }
  .g-sub { justify-content: flex-start; }
  .g-hero__type { top: calc(var(--g-bar) + 8vh); }
  .g-hero__name { font-size: 30vw; }
  .g-hero__lede { font-size: 20px; padding: 0 20px; }
  .g-hero__win { width: 94vw; margin-left: -47vw; top: calc(var(--g-bar) + 34vh); }
  .g-mac, .g-mac--home { grid-template-columns: 1fr; font-size: 12px; aspect-ratio: 4 / 5; }
  .g-mac__side { display: none; }
  .g-mac__main { padding: 16px; }
  .g-mac__title { font-size: 20px; margin-bottom: 10px; }
  .g-mac__tools { display: none; }
  .g-hist { padding: 10px 12px; }
  .g-hist__text { font-size: 13px; }
  .g-hist__acts { display: none; }

  .g-body { font-size: 16px; margin-top: 10px; }
  .g-ctas { margin-top: 16px; }
  .g-doc__body { min-height: 0; padding: 18px 18px 104px; }
  .g-doc__text { font-size: 19px; min-height: 4.2em; }
  .g-doc__h { font-size: 20px; margin-bottom: 8px; }
  .g-why__text { font-size: clamp(28px, 8vw, 40px); }


  .g-bento { grid-template-columns: 1fr; }
  .g-tile, .g-tile--clean, .g-tile--ind, .g-tile--hist, .g-tile--esc { grid-column: auto; min-height: 0; padding: 24px 22px; }




  .g-path { flex-wrap: wrap; justify-content: center; gap: 18px; }
  .g-path__line { display: none; }
  .g-cols { grid-template-columns: 1fr; }
  .g-foot { gap: 10px 16px; font-size: 12px; }
}


/* ================================================================ BOLDER PASS: scenes 4, 6, 7, 8
   Each scene has its own camera. Depth = size + brightness + speed: --d is how fast a layer drifts with the act's
   own progress (--sc-p, published on the act by the engine), so near layers move more than far ones. 2D only:
   no plane in a 3D context, nothing scaled down, every layer smaller than the viewport. */
.g-stage { --dp: calc(0.5 - var(--sc-p, 0.5)); }

/* ---- 4 · a desktop of windows converging */
.g-apps { overflow: clip; }
.g-apps__copy { position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--g-bar) + var(--g-subh) + 4vh); text-align: center; padding: 0 24px;
  opacity: calc(1 - var(--u, 0)); transform: translateY(calc(var(--u, 0) * -6vh)); }
.g-apps__copy .g-body { margin-inline: auto; }
.g-apps__h { font-size: clamp(44px, 6.4vw, 104px); }
.g-fan { position: absolute; inset: 0; }
.g-card {
  position: absolute; border-radius: 16px; background: #18191e; overflow: hidden;
  box-shadow: var(--g-e2), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  --d: 1; --fx: 0px; --fy: 60vh;
  transform: translate(calc((1 - var(--t, 0)) * var(--fx)), calc((1 - var(--t, 0)) * var(--fy) + var(--dp) * var(--d) * 14vh));
  opacity: clamp(0, calc(var(--t, 0) * 2.5), 1);
}
.g-card__bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: #1e1f25; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.g-card__body { padding: 22px 24px 16px; font-size: clamp(16px, 1.35vw, 22px); line-height: 1.4; }
.g-card__rule { margin: 0; padding: 12px 24px 16px; font-size: 13.5px; color: var(--g-teal-hi); border-top: 1px solid rgba(255, 255, 255, 0.06); }
.g-fan__mail { z-index: 3; left: 50%; width: min(48vw, 780px); margin-left: calc(min(48vw, 780px) / -2); top: 40vh; --d: 1; --fy: 30vh; }
.g-fan__mail .g-card__body { font-size: clamp(18px, 1.6vw, 26px); min-height: 22vh; }
.g-fan__msg, .g-fan__ai { box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.g-fan__msg { z-index: 4; left: 4vw; width: 25vw; top: 52vh; --d: 1.7; --fx: -40vw; --fy: 20vh; }
.g-fan__note { z-index: 2; right: 5vw; width: 25vw; top: 30vh; --d: 0.55; --fx: 40vw; --fy: 10vh; filter: brightness(0.6); }
.g-fan__ai { z-index: 5; right: 7vw; width: 27vw; top: 62vh; --d: 2.1; --fx: 30vw; --fy: 50vh; }
.g-fan__code { z-index: 1; left: 7vw; width: 24vw; top: 30vh; --d: 0.4; --fx: -30vw; --fy: -10vh; filter: brightness(0.5); }
.g-apps__pill { position: absolute; z-index: 7; left: 50%; bottom: 5vh; transform: translate(-50%, calc((1 - var(--t, 0)) * 20vh)); opacity: var(--t, 0); }

/* ---- 6 · translate: giant keycaps, a display-size phrase */
.g-tr { display: grid; place-items: center; overflow: clip; text-align: center; padding: calc(var(--g-bar) + var(--g-subh)) clamp(20px, 5vw, 80px) 0; }
.g-tr__keys { position: absolute; z-index: 0; left: 50%; top: 64%; display: flex; gap: 3vw; pointer-events: none;
  transform: translate(-50%, calc(-50% + var(--dp) * 40vh + var(--t, 0) * 14vh)); opacity: calc(0.5 - var(--t, 0) * 0.3); transition: opacity 0.3s; }
.g-tr.is-live .g-tr__keys { opacity: 0.6; }
.g-cap { width: min(26vw, 46vh); aspect-ratio: 1; border-radius: 22%; display: grid; place-items: center;
  background: linear-gradient(180deg, #24262c, #121317); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), inset 0 -14px 0 rgba(0, 0, 0, 0.45), 0 60px 120px -40px rgba(0, 0, 0, 0.9);
  transition: box-shadow 0.25s, transform 0.25s; }
.g-cap__g { font-size: min(13vw, 23vh); font-weight: 500; color: #7d838c; line-height: 1; }
.g-cap--q .g-cap__g { transform: translateY(0.2em); }
.g-tr.is-live .g-cap { transform: translateY(1.2vh); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.12), inset 0 -4px 0 rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(63, 214, 195, 0.75), 0 30px 80px -30px rgba(0, 0, 0, 0.9); }
.g-tr.is-live .g-cap__g { color: var(--g-teal-hi); }
.g-tr__h { position: absolute; z-index: 2; left: 0; right: 0; top: calc(var(--g-bar) + var(--g-subh) + 4vh); font-size: clamp(30px, 3.4vw, 54px); opacity: calc(0.35 + var(--t, 1) * 0.65); padding: 0 20px; }
.g-tr__phrase { position: relative; z-index: 3; max-width: 1180px; display: grid; justify-items: center; gap: 2.4vh; }
.g-tr__said, .g-tr__got { margin: 0; font-family: var(--sc-font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.06; text-wrap: balance; }
.g-tr__said { font-size: clamp(30px, 4.2vw, 68px); color: #f2f3f5; opacity: calc(1 - var(--u, 0) * 0.62); transform: translateY(calc(var(--u, 0) * -2vh)) ; }
.g-tr__got { font-size: clamp(32px, 4.8vw, 78px); color: var(--g-teal-hi); }
.g-tr__said .g-w { opacity: clamp(0.18, calc((var(--t, 0) * var(--n) - var(--i)) * 0.8 + 0.18), 1); }
.g-tr__got .g-w { display: inline-block; opacity: clamp(0, calc(var(--t, 0) * var(--n) - var(--i)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--t, 0) * var(--n) - var(--i)), 1)) * 0.5em)); }
.g-tr__lbl { display: block; font-family: var(--sc-font-text); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #9aa0aa; margin-bottom: 10px; opacity: 1 !important; transform: none !important; }
.g-tr__got .g-tr__lbl { color: var(--g-teal); opacity: clamp(0, calc((var(--t, 0) - 0.92) * 14), 1) !important; }
.g-tr__pill { display: grid; place-items: center; }
.g-tr__foot { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding-bottom: 4vh !important; padding-top: 6vh !important; background: linear-gradient(transparent, rgba(7, 11, 13, 0.92) 40%); display: grid; justify-items: center; gap: 0; padding: 0 20px; }
.g-tr__foot .g-body { margin: 0 auto; max-width: 46em; font-size: 16px; }
.g-tr__foot .g-ctas { justify-content: center; margin-top: 14px; }
.g-tr__foot .g-fine { margin: 0; }

/* ---- 7 · meetings: three depths */
.g-meet { overflow: clip; }
.g-call { position: absolute; z-index: 1; left: 5vw; top: calc(var(--g-bar) + var(--g-subh) + 3vh); width: min(42vw, 680px); border-radius: 16px; overflow: hidden;
  background: #121317; box-shadow: var(--g-e3), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateY(calc((1 - var(--t, 1)) * 30vh + var(--dp) * 0.2 * 26vh - 2vh)); opacity: clamp(0, calc(var(--t, 1) * 2), 1); filter: brightness(0.8); }
.g-call__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: #1a1b20; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.g-call__bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3b42; }
.g-call__bar span { margin-left: 10px; font-size: 13px; color: #a5abb5; font-weight: 600; }
.g-call__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.g-call__t { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: radial-gradient(120% 120% at 30% 20%, #23252b, #15161a); display: grid; place-items: center; overflow: hidden;
  box-shadow: inset 0 0 0 calc((var(--t, 0) - var(--u, 0)) * 3px) var(--g-teal); }
.g-call__t b { width: clamp(52px, 6vw, 92px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(18px, 1.9vw, 30px); color: #0b0c0f; font-weight: 700;
  box-shadow: 0 0 0 calc((var(--t, 0) - var(--u, 0)) * 10px) rgba(63, 214, 195, 0.18); }
.g-call__t span { position: absolute; left: 10px; bottom: 8px; font-size: 12px; color: #c9ced5; background: rgba(0, 0, 0, 0.45); padding: 2px 8px; border-radius: 6px; }
.g-v1bg { background: #f2b880; } .g-mebg { background: var(--g-teal); } .g-v2bg { background: #9fc3ff; }
.g-call__t--glyvo { background: #0d0e11; }
.g-meet__copy { position: absolute; z-index: 4; left: 5vw; bottom: 5vh; width: min(600px, 44vw); opacity: var(--t, 1); }
.g-meet__copy .g-disp { font-size: clamp(34px, 3.8vw, 62px); }
.g-meet__copy .g-body { font-size: 17px; }
.g-meet__copy::before { content: ""; position: absolute; inset: -40px -60px -30px -80px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(10, 10, 13, 0.92), rgba(10, 10, 13, 0.7) 60%, transparent); }
.g-meet__win { position: absolute; z-index: 3; right: 6vw; top: calc(var(--g-bar) + var(--g-subh) + 2vh); bottom: 4vh; width: min(440px, 32vw);
  transform: translateY(calc((1 - var(--t, 1)) * 50vh + var(--dp) * 0.6 * 26vh)); opacity: clamp(0, calc(var(--t, 1) * 2), 1); }
.g-mt { position: absolute; inset: 0; border-radius: 14px; background: var(--a-bg); color: var(--a-fg); box-shadow: var(--g-e3), inset 0 0 0 1px rgba(255, 255, 255, 0.1); overflow: hidden; display: flex; flex-direction: column; font-size: 14px; }
.g-sum {
  position: absolute; z-index: 5; right: calc(6vw + min(440px, 32vw) - 120px); top: 26vh; width: clamp(380px, 32vw, 520px); padding: 28px 28px 24px; border-radius: 18px;
  background: rgba(30, 31, 36, 0.94); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--g-e3), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: translate(calc((1 - var(--t, 0)) * 50vw), calc(var(--dp) * 1.8 * 26vh)); opacity: clamp(0, calc(var(--t, 0) * 3), 1); font-size: 16px; line-height: 1.5;
}

/* ---- 8 · the iPhone at heroic size */
.g-phone { overflow: clip; }
.g-phone__mac { position: absolute; z-index: 1; left: 50%; top: calc(var(--g-bar) + var(--g-subh) + 9vh); width: min(78vw, 1180px); margin-left: calc(min(78vw, 1180px) / -2);
  transform: translateY(calc(var(--dp) * 0.4 * 26vh)); filter: brightness(0.5); }
.g-phone__mac .g-mac--home { grid-template-columns: 220px 1fr; aspect-ratio: 16 / 9; font-size: 15px; }
.g-phone__h { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--g-bar) + var(--g-subh) + 2vh); text-align: center; font-size: clamp(56px, 8vw, 140px);
  opacity: calc(1 - var(--u, 0)); transform: translateY(calc(var(--u, 0) * -8vh)); letter-spacing: -0.045em; }
.g-iph { position: absolute; z-index: 3; left: 50%; top: calc(var(--g-bar) + var(--g-subh) + 4vh); height: calc(100vh - var(--g-bar) - var(--g-subh) - 7vh); aspect-ratio: 9 / 19.2;
  transform: translate(-50%, calc((1 - var(--t, 0)) * 92vh + var(--dp) * 1.2 * 12vh)); }
.g-iph__frame { height: 100%; }
.g-iph__text { font-size: clamp(14px, 1.9vh, 18px); }
.g-iph__h { font-size: clamp(24px, 3.4vh, 34px); }
.g-kb__row { display: grid; grid-template-columns: 1fr 1fr 1.5fr 1.6fr; gap: 6px; align-items: center; }
.g-kb__row span { height: 4.2vh; border-radius: 7px; background: #3a3a40; display: grid; place-items: center; font-size: 13px; color: #e8e9ec; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.g-kb__row .g-kb__mic { grid-row: span 2; height: 9vh; width: 9vh; justify-self: center; border-radius: 50%; background: var(--g-teal-fill); box-shadow: 0 0 0 4px rgba(63, 214, 195, 0.22); }
.g-kb__row:nth-child(3) { margin-top: -5vh; }
.g-iph__btn--action { box-shadow: 0 0 0 calc(var(--t, 0) * 3px) rgba(63, 214, 195, 0.8), 0 0 calc(var(--t, 0) * 18px) rgba(63, 214, 195, 0.5); }
.g-call-out { position: absolute; z-index: 4; width: min(300px, 24vw); opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 24px)); }
.g-call-out h3 { margin: 0 0 8px; font-size: clamp(20px, 1.8vw, 28px); letter-spacing: -0.02em; }
.g-call-out p { margin: 0; color: var(--sc-ink-soft); font-size: 16px; line-height: 1.5; }
.g-call-out::before { content: ""; position: absolute; inset: -24px -30px; z-index: -1; border-radius: 24px; background: radial-gradient(closest-side, rgba(8, 9, 11, 0.96), rgba(8, 9, 11, 0.85) 70%, transparent); }
.g-call-out--l { left: max(4vw, calc(50% - 39vh - 340px)); top: 50vh; text-align: right; }
.g-call-out--r { right: max(4vw, calc(50% - 39vh - 340px)); top: 34vh; }
.g-call-out--r2 { right: max(4vw, calc(50% - 39vh - 340px)); top: 60vh; }
.g-call-out--r h3, .g-call-out--r2 h3 { color: var(--g-teal-hi); }

@media (prefers-reduced-motion: reduce) {
  .g-stage { --dp: 0; }
}

@media (max-width: 900px) {
  .g-try { grid-template-columns: 1fr !important; align-content: start; gap: 18px; padding: calc(var(--g-bar) + var(--g-subh) + 14px) 18px 14px; }
  .g-try__copy .g-disp, .g-disp { font-size: clamp(32px, 9vw, 44px); }
  .g-try__fine { font-size: 12px; }
  .g-apps__copy { top: calc(var(--g-bar) + var(--g-subh) + 2vh); }
  .g-apps__h { font-size: clamp(34px, 10vw, 48px); }
  .g-apps__copy .g-body { font-size: 15px; }
  .g-card__body { padding: 14px 16px 10px; font-size: 14px; }
  .g-card__rule { padding: 9px 16px 11px; font-size: 12px; }
  .g-card__bar { height: 30px; }
  .g-fan__mail { width: 84vw; margin-left: 0; left: 12vw; top: 47vh; }
  .g-apps__pill { display: none; }
  .g-fan__mail .g-card__body { font-size: 15px; min-height: 0; }
  .g-fan__msg { left: 4vw; width: 80vw; top: 30vh; z-index: 2; }
  .g-fan__note { display: none; }
  .g-fan__ai { right: auto; left: 4vw; width: 80vw; top: 69vh; }
  .g-fan__code { display: none; }
  .g-bub { font-size: 14px; padding: 8px 12px; }

  .g-cap { width: 40vw; }
  .g-cap__g { font-size: 20vw; }
  .g-tr__h { font-size: clamp(26px, 7.4vw, 34px); }
  .g-tr__said { font-size: clamp(26px, 7.6vw, 36px); }
  .g-tr__got { font-size: clamp(28px, 8.4vw, 40px); }
  .g-tr__foot .g-body { font-size: 14px; }
  .g-tr__foot .g-fine { display: none; }

  .g-call { left: 4vw; width: 92vw; top: calc(var(--g-bar) + var(--g-subh) + 1vh); }
  .g-call__t span { font-size: 10px; }
  .g-meet__copy { left: 18px; right: 18px; width: auto; bottom: auto; top: calc(var(--g-bar) + var(--g-subh) + 34vh); }
  .g-meet__copy .g-disp { font-size: clamp(30px, 8.6vw, 40px); }
  .g-meet__copy .g-body { font-size: 14px; }
  .g-meet__copy .g-ticks { display: none; }
  .g-meet__win { left: 4vw; right: 4vw; width: auto; top: 62vh; bottom: -30vh; }
  .g-mt { font-size: 12.5px; }
  .g-sum { left: 12vw; right: 4vw; width: auto; top: 66vh; background: #1d1e23; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: 13.5px; padding: 18px; }

  .g-phone__mac { width: 150vw; margin-left: -75vw; top: 34vh; }
  .g-phone__mac .g-mac--home { grid-template-columns: 1fr; aspect-ratio: 16 / 10; }
  .g-try__pill { top: 62%; }
  .g-phone__h { font-size: clamp(40px, 12vw, 56px); }
  .g-iph { top: calc(var(--g-bar) + var(--g-subh) + 9vh); height: 62vh; }
  .g-call-out { width: auto; left: 18px !important; right: 18px !important; top: auto !important; bottom: 3vh; text-align: center; }
  .g-call-out p { font-size: 14px; }
  .g-call-out { opacity: clamp(0, calc((var(--t, 0) - var(--u, 0)) * 2 - 1), 1); }
  .g-call-out h3 { font-size: 18px; margin-bottom: 4px; }
  .g-kb__row span { height: 3.4vh; font-size: 11px; }
  .g-kb__row .g-kb__mic { height: 6.6vh; width: 6.6vh; }
  .g-kb__row:nth-child(3) { margin-top: -3.6vh; }
}