/* Publigo — publigo.io site stylesheet.
   Colors come from assets/publigo-tokens.css (--pg-*; synced by scripts/sync-tokens.sh).
   No inline styles anywhere: the CSP is style-src 'self'. */

/* --------------------------------------------------------------------------
   Fonts (self-hosted, SIL OFL 1.1 — see assets/fonts/OFL-*.txt)
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/instrument-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
html { background: var(--pg-color-marketing-background); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--pg-color-marketing-background); color: var(--pg-color-marketing-text); font-family: var(--pg-font-family-body); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a { color: var(--pg-color-marketing-link); }
a:not([class]):hover { color: var(--pg-color-link-hover); }
:focus-visible { outline: 2px solid var(--pg-color-focus-ring); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 24px; }
summary { cursor: pointer; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: 9999px;
  background: var(--pg-color-marketing-text); color: var(--pg-color-marketing-background); font: 600 14px/1.2 var(--pg-font-family-body); text-decoration: none; }
.skip-link:focus { top: 16px; }

/* Header actions + CSS-only mobile menu (<details>), shown below 1100px where the nav links hide. */
.hd-1 { position: relative; }
.hd-actions { display: flex; align-items: center; gap: 8px; }
.hd-7:hover, .hero-8:hover { opacity: 0.88; }
.m-menu { display: none; }
.m-menu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 9999px; color: var(--pg-color-marketing-text); }
.m-menu > summary::-webkit-details-marker { display: none; }
.m-menu > summary:hover { background: var(--pg-color-marketing-card-border); }
.m-menu-panel { position: absolute; right: 16px; top: calc(100% + 8px); z-index: 30; min-width: 220px; display: flex; flex-direction: column;
  padding: 8px; border-radius: 16px; background: var(--pg-color-marketing-card); border: 1px solid var(--pg-color-marketing-card-border);
  box-shadow: 0 12px 32px rgba(18, 19, 26, 0.12); }
.m-menu-panel a { padding: 12px 14px; border-radius: 10px; font-size: 16px; font-weight: 500; color: var(--pg-color-marketing-text); text-decoration: none; }
.m-menu-panel a:hover { background: var(--pg-color-accent-soft); }

/* Badge placeholders (TODO launch: Apple's official, unmodified badges). */
.badge-ph-icon { flex: none; }

/* --------------------------------------------------------------------------
   Legal / support pages (privacy.html, terms.html, support.html)
   -------------------------------------------------------------------------- */
.legal { max-width: 880px; margin: 0 auto; box-sizing: border-box; padding: 56px 72px 120px; font-size: 17px; line-height: 1.65; color: var(--pg-color-marketing-text-secondary); }
.legal-draft { margin: 0 0 48px; padding: 14px 18px; border-radius: 12px; background: var(--pg-color-status-warning-capsule-bg); color: var(--pg-color-status-warning-capsule-text); font-size: 15px; line-height: 1.5; }
.legal-eyebrow { margin: 0; font-family: var(--pg-font-family-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-color-marketing-eyebrow); }
.legal-title { margin: 20px 0 0; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 56px; line-height: 1.05; letter-spacing: -0.01em; color: var(--pg-color-marketing-text); }
.legal-lede { margin: 20px 0 0; font-size: 20px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary); }
.legal-meta { margin: 16px 0 0; font-family: var(--pg-font-family-mono); font-size: 12px; color: var(--pg-color-marketing-text-secondary); }
.legal section { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--pg-color-marketing-hairline); }
.legal h2 { margin: 0; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 32px; line-height: 1.15; color: var(--pg-color-marketing-text); }
.legal h3 { margin: 28px 0 0; font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--pg-color-marketing-text); }
.legal p { margin: 14px 0 0; }
.legal ul { margin: 14px 0 0; padding-left: 22px; }
.legal li { margin-top: 10px; }
.legal li::marker { color: var(--pg-color-accent-tint); }
.legal strong { color: var(--pg-color-marketing-text); font-weight: 600; }
.legal code { font-family: var(--pg-font-family-mono); font-size: 0.88em; }
.legal a { color: var(--pg-color-marketing-link); text-underline-offset: 3px; }
.legal-contact { font-family: var(--pg-font-family-display); font-size: 36px; line-height: 1.2; }
.legal-contact a { text-decoration-thickness: 1px; }
.tbd { padding: 1px 4px; border-radius: 4px; background: var(--pg-color-status-warning-capsule-bg); color: var(--pg-color-status-warning-capsule-text); font-size: 0.92em; }
.legal-draft .tbd { background: transparent; padding: 0; }
.legal-table-wrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--pg-color-marketing-card-border); border-radius: 16px; background: var(--pg-color-marketing-card); }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.legal-table th, .legal-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--pg-color-marketing-card-border); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table th { font-weight: 600; color: var(--pg-color-marketing-text); }
.legal-table td:first-child { color: var(--pg-color-marketing-text); font-weight: 500; width: 40%; }
@media (max-width: 640px) {
  .legal { padding-top: 32px; padding-bottom: 72px; font-size: 16px; }
  .legal-title { font-size: 44px; }
  .legal h2 { font-size: 28px; }
  .legal-contact { font-size: 28px; }
}

/* ==========================================================================
   Landing — site-only colors (mock illustrations). Light default, dark below.
   ========================================================================== */
:root {
  --site-a6a6a6: #a6a6a6;
  --site-5e5e66-on-a8a8b3: #5e5e66;
  --site-18-19-26-0_18-on-255-255-255-0_16: rgba(18, 19, 26, 0.18);
  --site-18-19-26-0_16-on-0-0-0-0_55: rgba(18, 19, 26, 0.16);
  --site-18-19-26-0_06-on-0-0-0-0_35: rgba(18, 19, 26, 0.06);
  --site-ff5f57: #ff5f57;
  --site-febc2e: #febc2e;
  --site-28c840: #28c840;
  --site-2fbf8f: #2fbf8f;
  --site-4a5568: #4a5568;
  --site-8c7b6b: #8c7b6b;
  --site-204-58-16-0_25-on-255-129-89-0_3: rgba(204, 58, 16, 0.25);
  --site-ffffff-on-255-255-255-0_18: #ffffff;
  --site-0-0-0-0_12-on-0-0-0-0_3: rgba(0, 0, 0, 0.12);
  --site-ff5b2e-on-ff6a3d: #ff5b2e;
  --site-255-91-46-0_16-on-255-106-61-0_22: rgba(255, 91, 46, 0.16);
  --site-6e6e76-on-aeaeb2: #6e6e76;
  --site-91-91-214-0_45-on-123-123-234-0_55: rgba(91, 91, 214, 0.45);
  --site-faf8f5-on-16171d: #faf8f5;
  --site-faf8f5-on-12131a: #faf8f5;
  --site-a8a8b3-on-3a3d4a: #a8a8b3;
  --site-14213d: #14213d;
  --site-c8d1e6: #c8d1e6;
  --site-f4ebdd: #f4ebdd;
  --site-20-33-61-0_45: rgba(20, 33, 61, 0.45);
  --site-4a5875: #4a5875;
  --site-e3d6c2: #e3d6c2;
  --site-0b1430: #0b1430;
  --site-1b2a5c: #1b2a5c;
  --site-11-20-48-0_22-on-0-0-0-0_45: rgba(11, 20, 48, 0.22);
  --site-0-0-0-0_25-on-255-255-255-0_16: rgba(0, 0, 0, 0.25);
  --site-05070d: #05070d;
  --site-2b3557: #2b3557;
  --site-d9cdb9: #d9cdb9;
  --site-efebe4-on-16171d: #efebe4;
  --site-20-33-61-0_25: rgba(20, 33, 61, 0.25);
  --site-eaf7f2: #eaf7f2;
  --site-20-33-61-0_28: rgba(20, 33, 61, 0.28);
  --site-e5e5ea: #e5e5ea;
  --site-d1d1d6: #d1d1d6;
  --site-18-19-26-0_08-on-255-255-255-0_1: rgba(18, 19, 26, 0.08);
  --site-12131a-on-f5f5f7: #12131a;
  --site-3a3d4a-on-aeaeb2: #3a3d4a;
  --site-12131a-on-3a3a3c: #12131a;
  --site-f6f6f8-on-2c2c2e: #f6f6f8;
  --site-18-19-26-0_12-on-255-255-255-0_14: rgba(18, 19, 26, 0.12);
  --site-0c0d11-on-16171d: #0c0d11;
  --site-16171d-on-0c0d11: #16171d;
  --site-78-110-118-0_55-on-64-96-104-0_5: rgba(78, 110, 118, 0.55);
  --site-78-110-118-0-on-64-96-104-0: rgba(78, 110, 118, 0);
  --site-176-150-112-0_55-on-150-124-88-0_42: rgba(176, 150, 112, 0.55);
  --site-176-150-112-0-on-150-124-88-0: rgba(176, 150, 112, 0);
  --site-22323a-on-10181d: #22323a;
  --site-2b414a-on-18252b: #2b414a;
  --site-46524f-on-262e2c: #46524f;
  --site-5a584c-on-33322a: #5a584c;
  --site-255-255-255-0_94-on-1c1c1e: rgba(255, 255, 255, 0.94);
  --site-0-0-0-0_22-on-0-0-0-0_45: rgba(0, 0, 0, 0.22);
  --site-1d1d1f-on-ffffff: #1d1d1f;
  --site-e1e1e4-on-3a3a3c: #e1e1e4;
  --site-44-44-48-0_66: rgba(44, 44, 48, 0.66);
  --site-18-19-26-0_08-on-0-0-0-0_45: rgba(18, 19, 26, 0.08);
  --site-e5e5ea-on-48484a: #e5e5ea;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --site-5e5e66-on-a8a8b3: #a8a8b3;
    --site-18-19-26-0_18-on-255-255-255-0_16: rgba(255, 255, 255, 0.16);
    --site-18-19-26-0_16-on-0-0-0-0_55: rgba(0, 0, 0, 0.55);
    --site-18-19-26-0_06-on-0-0-0-0_35: rgba(0, 0, 0, 0.35);
    --site-204-58-16-0_25-on-255-129-89-0_3: rgba(255, 129, 89, 0.3);
    --site-ffffff-on-255-255-255-0_18: rgba(255, 255, 255, 0.18);
    --site-0-0-0-0_12-on-0-0-0-0_3: rgba(0, 0, 0, 0.3);
    --site-ff5b2e-on-ff6a3d: #ff6a3d;
    --site-255-91-46-0_16-on-255-106-61-0_22: rgba(255, 106, 61, 0.22);
    --site-6e6e76-on-aeaeb2: #aeaeb2;
    --site-91-91-214-0_45-on-123-123-234-0_55: rgba(123, 123, 234, 0.55);
    --site-faf8f5-on-16171d: #16171d;
    --site-faf8f5-on-12131a: #12131a;
    --site-a8a8b3-on-3a3d4a: #3a3d4a;
    --site-11-20-48-0_22-on-0-0-0-0_45: rgba(0, 0, 0, 0.45);
    --site-0-0-0-0_25-on-255-255-255-0_16: rgba(255, 255, 255, 0.16);
    --site-efebe4-on-16171d: #16171d;
    --site-18-19-26-0_08-on-255-255-255-0_1: rgba(255, 255, 255, 0.1);
    --site-12131a-on-f5f5f7: #f5f5f7;
    --site-3a3d4a-on-aeaeb2: #aeaeb2;
    --site-12131a-on-3a3a3c: #3a3a3c;
    --site-f6f6f8-on-2c2c2e: #2c2c2e;
    --site-18-19-26-0_12-on-255-255-255-0_14: rgba(255, 255, 255, 0.14);
    --site-0c0d11-on-16171d: #16171d;
    --site-16171d-on-0c0d11: #0c0d11;
    --site-78-110-118-0_55-on-64-96-104-0_5: rgba(64, 96, 104, 0.5);
    --site-78-110-118-0-on-64-96-104-0: rgba(64, 96, 104, 0);
    --site-176-150-112-0_55-on-150-124-88-0_42: rgba(150, 124, 88, 0.42);
    --site-176-150-112-0-on-150-124-88-0: rgba(150, 124, 88, 0);
    --site-22323a-on-10181d: #10181d;
    --site-2b414a-on-18252b: #18252b;
    --site-46524f-on-262e2c: #262e2c;
    --site-5a584c-on-33322a: #33322a;
    --site-255-255-255-0_94-on-1c1c1e: #1c1c1e;
    --site-0-0-0-0_22-on-0-0-0-0_45: rgba(0, 0, 0, 0.45);
    --site-1d1d1f-on-ffffff: #ffffff;
    --site-e1e1e4-on-3a3a3c: #3a3a3c;
    --site-18-19-26-0_08-on-0-0-0-0_45: rgba(0, 0, 0, 0.45);
    --site-e5e5ea-on-48484a: #48484a;
  }
}
:root[data-theme="dark"] {
  --site-5e5e66-on-a8a8b3: #a8a8b3;
  --site-18-19-26-0_18-on-255-255-255-0_16: rgba(255, 255, 255, 0.16);
  --site-18-19-26-0_16-on-0-0-0-0_55: rgba(0, 0, 0, 0.55);
  --site-18-19-26-0_06-on-0-0-0-0_35: rgba(0, 0, 0, 0.35);
  --site-204-58-16-0_25-on-255-129-89-0_3: rgba(255, 129, 89, 0.3);
  --site-ffffff-on-255-255-255-0_18: rgba(255, 255, 255, 0.18);
  --site-0-0-0-0_12-on-0-0-0-0_3: rgba(0, 0, 0, 0.3);
  --site-ff5b2e-on-ff6a3d: #ff6a3d;
  --site-255-91-46-0_16-on-255-106-61-0_22: rgba(255, 106, 61, 0.22);
  --site-6e6e76-on-aeaeb2: #aeaeb2;
  --site-91-91-214-0_45-on-123-123-234-0_55: rgba(123, 123, 234, 0.55);
  --site-faf8f5-on-16171d: #16171d;
  --site-faf8f5-on-12131a: #12131a;
  --site-a8a8b3-on-3a3d4a: #3a3d4a;
  --site-11-20-48-0_22-on-0-0-0-0_45: rgba(0, 0, 0, 0.45);
  --site-0-0-0-0_25-on-255-255-255-0_16: rgba(255, 255, 255, 0.16);
  --site-efebe4-on-16171d: #16171d;
  --site-18-19-26-0_08-on-255-255-255-0_1: rgba(255, 255, 255, 0.1);
  --site-12131a-on-f5f5f7: #f5f5f7;
  --site-3a3d4a-on-aeaeb2: #aeaeb2;
  --site-12131a-on-3a3a3c: #3a3a3c;
  --site-f6f6f8-on-2c2c2e: #2c2c2e;
  --site-18-19-26-0_12-on-255-255-255-0_14: rgba(255, 255, 255, 0.14);
  --site-0c0d11-on-16171d: #16171d;
  --site-16171d-on-0c0d11: #0c0d11;
  --site-78-110-118-0_55-on-64-96-104-0_5: rgba(64, 96, 104, 0.5);
  --site-78-110-118-0-on-64-96-104-0: rgba(64, 96, 104, 0);
  --site-176-150-112-0_55-on-150-124-88-0_42: rgba(150, 124, 88, 0.42);
  --site-176-150-112-0-on-150-124-88-0: rgba(150, 124, 88, 0);
  --site-22323a-on-10181d: #10181d;
  --site-2b414a-on-18252b: #18252b;
  --site-46524f-on-262e2c: #262e2c;
  --site-5a584c-on-33322a: #33322a;
  --site-255-255-255-0_94-on-1c1c1e: #1c1c1e;
  --site-0-0-0-0_22-on-0-0-0-0_45: rgba(0, 0, 0, 0.45);
  --site-1d1d1f-on-ffffff: #ffffff;
  --site-e1e1e4-on-3a3a3c: #3a3a3c;
  --site-18-19-26-0_08-on-0-0-0-0_45: rgba(0, 0, 0, 0.45);
  --site-e5e5ea-on-48484a: #48484a;
}

/* ==========================================================================
   Landing — component classes, converted 1:1 from the Claude Design artboards
   (claude-design/project/web-landing{,-dark}.dc.html). Prefix = section:
   hd header · hero · how (Nasıl çalışır) · team (Ofis) · studio · ai (Kendi AI) ·
   trust (Güven) · phone (iPhone) · price · faq · ft footer · u shared.
   ========================================================================== */
.ai-1 { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 120px 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 64px }
.ai-2 { flex: 1 1 380px; min-width: 0 }
.ai-3 { margin: 20px 0 0; max-width: 560px; font-size: 18px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.ai-4 { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px; max-width: 560px }
.ai-5 { display: flex; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.ai-6 { flex: none; margin-top: 1px; stroke: var(--pg-color-marketing-link) }
.ai-7 { font-weight: 600; color: var(--pg-color-marketing-text) }
.ai-8 { margin-top: 32px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--pg-color-marketing-card); border: 1px solid color-mix(in srgb, var(--pg-color-component-agent-tile-external-tag-background) 10%, transparent) }
.ai-9 { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--site-5e5e66-on-a8a8b3) }
.ai-10 { font-family: var(--pg-font-family-mono); font-size: 14px; line-height: 20px; color: var(--pg-color-marketing-text) }
.ai-11 { flex: 1 1 600px; min-width: 0; box-sizing: border-box; padding: 32px; border-radius: 28px; background: var(--site-efebe4-on-16171d); display: flex; flex-wrap: wrap; align-items: center; gap: 20px }
.ai-12 { margin: 0; flex: 1 1 260px; min-width: 0; box-sizing: border-box; padding: 18px; background: var(--pg-color-system-macos-card); border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 12px 32px rgba(18,19,26,0.08); display: flex; flex-direction: column; gap: 12px }
.ai-13 { margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--site-18-19-26-0_08-on-255-255-255-0_1); display: flex; align-items: center; justify-content: space-between; gap: 8px }
.ai-14 { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--site-12131a-on-f5f5f7) }
.ai-15 { stroke: var(--site-3a3d4a-on-aeaeb2) }
.ai-16 { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--pg-color-status-success-capsule-text) }
.ai-17 { width: 6px; height: 6px; border-radius: 3px; background: var(--pg-color-status-success-icon) }
.ai-18 { align-self: flex-end; max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--site-12131a-on-3a3a3c); color: var(--pg-color-component-agent-tile-glyph-default); font-size: 14px; line-height: 1.4 }
.ai-19 { margin: 0; font-size: 14px; line-height: 1.5; color: var(--pg-color-system-macos-label) }
.ai-20 { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--site-f6f6f8-on-2c2c2e); border: 1px solid color-mix(in srgb, var(--pg-color-component-agent-tile-external-tag-background) 6%, transparent) }
.ai-21 { font-family: var(--pg-font-family-mono); font-size: 11px; line-height: 14px; color: var(--site-3a3d4a-on-aeaeb2) }
.ai-22 { font-size: 13px; line-height: 17px; font-weight: 500; color: var(--site-12131a-on-f5f5f7) }
.ai-23 { flex: none; margin-left: auto; stroke: var(--pg-color-status-success-icon) }
.ai-24 { display: flex; align-items: center; justify-content: space-between; height: 38px; box-sizing: border-box; padding: 0 6px 0 14px; border-radius: 19px; border: 1px solid var(--site-18-19-26-0_12-on-255-255-255-0_14); font-size: 13px; color: var(--pg-color-system-ios-tertiary-label) }
.ai-25 { width: 26px; height: 26px; border-radius: 13px; background: var(--pg-color-marketing-text); display: flex; align-items: center; justify-content: center }
.ai-26 { margin: 0; flex: 1 1 260px; min-width: 0; box-sizing: border-box; padding: 18px; background: var(--pg-color-system-macos-card); border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 12px 32px rgba(18,19,26,0.08); display: flex; flex-direction: column; gap: 14px }
.ai-27 { height: 22px; line-height: 22px; padding: 0 9px; border-radius: 11px; background: var(--pg-color-status-waiting-mac-capsule-bg); color: var(--pg-color-status-waiting-mac-capsule-text); font-size: 11px; font-weight: 600; white-space: nowrap }
.ai-28 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px }
.ai-29 { display: flex; align-items: center; gap: 16px }
.ai-30 { position: relative; flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center }
.ai-31 { position: absolute; left: 0; top: 0; width: 56px; height: 56px; box-sizing: border-box; border-radius: 18px; border: 2px solid var(--pg-color-component-sidebar-icon-copy) }
.ai-32 { width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-department-copy); display: flex; align-items: center; justify-content: center }
.ai-33 { position: absolute; top: -6px; right: -12px; height: 16px; line-height: 16px; padding: 0 6px; border-radius: 8px; background: var(--pg-color-component-agent-tile-external-tag-background); color: var(--pg-color-component-agent-tile-external-tag-label); font-size: 10px; font-weight: 600; box-shadow: 0 0 0 2px var(--pg-color-system-macos-card) }
.ai-34 { font-size: 13px; line-height: 17px; font-weight: 600; color: var(--site-12131a-on-f5f5f7) }
.ai-35 { font-size: 12px; line-height: 16px; color: var(--pg-color-system-macos-secondary-label) }
.ai-36 { position: absolute; left: 0; top: 0; width: 56px; height: 56px; box-sizing: border-box; border-radius: 18px; border: 2px dashed var(--pg-color-system-macos-tertiary-label) }
.ai-37 { position: absolute; left: 0; top: 0; width: 56px; height: 56px; box-sizing: border-box; border-radius: 18px; border: 2px solid var(--pg-color-component-sidebar-icon-studio) }
.ai-38 { width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-component-sidebar-icon-studio); display: flex; align-items: center; justify-content: center }
.ai-39 { padding: 12px 14px; border-radius: 14px; background: var(--site-f6f6f8-on-2c2c2e) }
.ai-40 { margin: 0; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg-color-system-macos-secondary-label) }
.ai-41 { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.4; color: var(--pg-color-system-macos-label) }
.ai-42 { flex: none; stroke: var(--pg-color-system-macos-secondary-label) }
.faq-1 { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 120px 72px; display: flex; flex-wrap: wrap; gap: 48px 64px }
.faq-2 { flex: 1 1 300px; min-width: 0 }
.faq-3 { margin: 20px 0 0; max-width: 360px; font-size: 16px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.faq-4 { color: var(--pg-color-marketing-link); text-decoration: underline; text-underline-offset: 3px }
.faq-5 { flex: 2 1 560px; min-width: 0 }
.faq-6 { padding: 24px 0; border-top: 1px solid var(--pg-color-marketing-hairline) }
.faq-7 { cursor: pointer; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--pg-color-marketing-text) }
.faq-8 { margin: 12px 0 0; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--pg-color-marketing-text-secondary) }
.faq-9 { padding: 24px 0; border-top: 1px solid var(--pg-color-marketing-hairline); border-bottom: 1px solid var(--pg-color-marketing-hairline) }
.ft-1 { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 64px 72px 48px }
.ft-2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 40px }
.ft-3 { display: inline-flex; align-items: center; gap: 12px; color: var(--pg-color-marketing-text); text-decoration: none }
.ft-4 { font-family: var(--pg-font-family-wordmark); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: -0.035em }
.ft-5 { margin: 20px 0 0; font-family: var(--pg-font-family-display); font-size: 28px; line-height: 1.2; color: var(--pg-color-marketing-text) }
.ft-6 { margin: 6px 0 0; font-family: var(--pg-font-family-mono); font-size: 12px; line-height: 16px; color: var(--site-5e5e66-on-a8a8b3) }
.ft-7 { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 32px }
.ft-8 { font-size: 15px; line-height: 24px; font-weight: 500; color: var(--pg-color-marketing-text); text-decoration: none }
.ft-9 { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--pg-color-marketing-card-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 13px; line-height: 1.5; color: var(--site-5e5e66-on-a8a8b3) }
.ft-10 { max-width: 760px }
.hd-1 { border-bottom: 1px solid var(--pg-color-marketing-card-border) }
.hd-2 { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 0 72px; height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px }
.hd-3 { display: inline-flex; align-items: center; gap: 10px; color: var(--pg-color-marketing-text); text-decoration: none }
.hd-4 { font-family: var(--pg-font-family-wordmark); font-weight: 600; font-size: 24px; line-height: 1; letter-spacing: -0.035em }
.hd-5 { display: flex; align-items: center; gap: 28px }
.hd-6 { font-size: 15px; font-weight: 500; color: var(--pg-color-marketing-text-secondary); text-decoration: none }
.hd-7 { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; box-sizing: border-box; border-radius: 20px; background: var(--pg-color-marketing-text); color: var(--pg-color-component-agent-tile-external-tag-label); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap }
.hero-1 { position: relative }
.hero-2 { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 56px 72px 120px; display: flex; flex-wrap: wrap; align-items: center; gap: 56px }
.hero-3 { flex: 1 1 420px; min-width: 0; position: relative; z-index: 1 }
.hero-4 { margin: 24px 0 0; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 64px; line-height: 1.05; letter-spacing: -0.01em; color: var(--pg-color-marketing-text) }
.hero-5 { font-style: italic; color: var(--pg-color-marketing-link) }
.hero-6 { margin: 28px 0 0; max-width: 520px; font-size: 18px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.hero-7 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px }
.hero-8 { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 16px; box-sizing: border-box; border-radius: 12px; background: var(--pg-color-palette-black); border: 1px solid var(--site-a6a6a6); color: var(--pg-color-component-agent-tile-glyph-default); text-decoration: none; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Inter, sans-serif }
.hero-9 { font-size: 30px; line-height: 30px; margin-top: -3px }
.hero-10 { font-size: 11px; line-height: 13px; font-weight: 500 }
.hero-11 { font-size: 20px; line-height: 23px; font-weight: 600; letter-spacing: -0.01em }
.hero-12 { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--site-5e5e66-on-a8a8b3) }
.hero-13 { flex: 0 1 auto; min-width: 0 }
.hero-14 { position: relative; width: 760px }
.hero-15 { position: absolute; right: -72px; top: -72px; z-index: 0 }
.hero-16 { stroke: color-mix(in srgb, var(--pg-color-component-agent-tile-external-tag-background) 10%, transparent) }
.hero-17 { position: relative; z-index: 1; width: 760px; height: 500px; border-radius: 14px; overflow: hidden; background: var(--pg-color-system-macos-floor); color: var(--pg-color-system-macos-label); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, sans-serif; box-shadow: 0 0 0 0.5px var(--site-18-19-26-0_18-on-255-255-255-0_16), 0 28px 72px var(--site-18-19-26-0_16-on-0-0-0-0_55), 0 6px 18px var(--site-18-19-26-0_06-on-0-0-0-0_35) }
.hero-18 { position: absolute; left: 0; top: 0; width: 160px; height: 500px; box-sizing: border-box; z-index: 2; background: var(--pg-color-material-glass-regular-background); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); border-right: 0.5px solid var(--pg-color-material-glass-regular-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 6px 20px rgba(0,0,0,0.06) }
.hero-19 { position: absolute; left: 12px; top: 12px; width: 8px; height: 8px; border-radius: 4px; background: var(--site-ff5f57); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--pg-color-palette-black) 15%, transparent) }
.hero-20 { position: absolute; left: 25px; top: 12px; width: 8px; height: 8px; border-radius: 4px; background: var(--site-febc2e); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--pg-color-palette-black) 15%, transparent) }
.hero-21 { position: absolute; left: 38px; top: 12px; width: 8px; height: 8px; border-radius: 4px; background: var(--site-28c840); box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--pg-color-palette-black) 15%, transparent) }
.hero-22 { position: absolute; left: 7px; right: 7px; top: 34px }
.hero-23 { margin: 0; padding: 0 6px; height: 14px; line-height: 14px; font-size: 7.5px; font-weight: 600; color: var(--pg-color-system-macos-secondary-label) }
.hero-24 { display: flex; align-items: center; gap: 6px; height: 19px; padding: 0 6px; font-size: 9px; font-weight: 600 }
.hero-25 { flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--site-2fbf8f); display: flex; align-items: center; justify-content: center }
.hero-26 { flex: 1; min-width: 0 }
.hero-27 { flex: none; width: 5px; height: 5px; border-radius: 3px; background: var(--pg-color-marketing-link) }
.hero-28 { display: flex; align-items: center; gap: 6px; height: 19px; padding: 0 6px; font-size: 9px }
.hero-29 { flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--site-4a5568); display: flex; align-items: center; justify-content: center }
.hero-30 { flex: none; width: 5px; height: 5px; border-radius: 3px; background: var(--pg-color-status-success-icon) }
.hero-31 { flex: none; width: 11px; height: 11px; border-radius: 3px; background: var(--site-8c7b6b); display: flex; align-items: center; justify-content: center }
.hero-32 { flex: none; width: 5px; height: 5px; border-radius: 3px; background: var(--pg-color-system-macos-tertiary-label) }
.hero-33 { margin: 8px 0 0; padding: 0 6px; height: 14px; line-height: 14px; font-size: 7.5px; font-weight: 600; color: var(--pg-color-system-macos-secondary-label) }
.hero-34 { display: flex; align-items: center; gap: 6px; height: 19px; padding: 0 6px; border-radius: 6px; background: var(--pg-color-system-macos-sidebar-selection); font-size: 9px }
.hero-35 { flex: none; stroke: var(--pg-color-accent-tint) }
.hero-36 { flex: none; stroke: var(--pg-color-component-sidebar-icon-qa) }
.hero-37 { flex: none; stroke: var(--pg-color-component-sidebar-icon-copy) }
.hero-38 { flex: none; stroke: var(--pg-color-component-sidebar-icon-compliance) }
.hero-39 { flex: none; stroke: var(--pg-color-component-sidebar-icon-release) }
.hero-40 { flex: none; stroke: var(--pg-color-system-macos-tertiary-label) }
.hero-41 { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 7px 0 5px; border-radius: 8px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 7.5px; font-weight: 600 }
.hero-42 { stroke: var(--pg-color-marketing-eyebrow) }
.hero-43 { position: absolute; left: 160px; top: 0; width: 600px; height: 38px; box-sizing: border-box; padding: 0 10px 0 14px; display: flex; align-items: center; justify-content: space-between; z-index: 1 }
.hero-44 { font-size: 10.5px; line-height: 12px; font-weight: 600 }
.hero-45 { font-size: 7.5px; line-height: 10px; color: var(--pg-color-system-macos-secondary-label) }
.hero-46 { display: flex; align-items: center; gap: 5px }
.hero-47 { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px 0 7px; border-radius: 10px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 8px; font-weight: 600; box-shadow: inset 0 0 0 0.5px var(--site-204-58-16-0_25-on-255-129-89-0_3) }
.hero-48 { width: 5px; height: 5px; border-radius: 3px; background: var(--pg-color-marketing-link) }
.hero-49 { display: inline-flex; align-items: center; gap: 4px; height: 20px; box-sizing: border-box; padding: 0 8px 0 7px; border-radius: 10px; background: var(--pg-color-material-glass-regular-background); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); border: 0.5px solid var(--pg-color-material-glass-regular-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 6px 20px rgba(0,0,0,0.06); font-size: 8px; font-weight: 500 }
.hero-50 { stroke: var(--pg-color-system-macos-secondary-label) }
.hero-51 { display: flex; align-items: center; gap: 6px }
.hero-52 { display: flex; align-items: center; height: 22px; box-sizing: border-box; padding: 2px; border-radius: 11px; background: var(--pg-color-material-glass-regular-background); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%); border: 0.5px solid var(--pg-color-material-glass-regular-border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 6px 20px rgba(0,0,0,0.06) }
.hero-53 { height: 17px; line-height: 17px; padding: 0 9px; border-radius: 9px; background: var(--site-ffffff-on-255-255-255-0_18); box-shadow: 0 1px 2px var(--site-0-0-0-0_12-on-0-0-0-0_3); font-size: 8px; font-weight: 600 }
.hero-54 { height: 17px; line-height: 17px; padding: 0 9px; font-size: 8px; font-weight: 500; color: var(--pg-color-system-macos-secondary-label) }
.hero-55 { height: 22px; line-height: 22px; padding: 0 10px; border-radius: 11px; background: var(--pg-color-brand-ember-700); color: var(--pg-color-component-agent-tile-glyph-default); font-size: 8.5px; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 2px 6px rgba(204,58,16,0.28) }
.hero-56 { position: absolute; left: 160px; top: 38px; width: 600px; height: 462px; box-sizing: border-box; padding: 8px 12px 6px }
.hero-57 { display: flex; align-items: center; gap: 5px; height: 12px }
.hero-58 { font-size: 9px; line-height: 12px; font-weight: 600 }
.hero-59 { min-width: 12px; height: 12px; line-height: 12px; padding: 0 3px; box-sizing: border-box; border-radius: 6px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 7.5px; font-weight: 600; text-align: center }
.hero-60 { display: flex; gap: 8px; margin-top: 6px }
.hero-61 { flex: 1; min-width: 0; height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 7px; padding: 0 8px; background: var(--pg-color-system-macos-card); border: 1px solid var(--pg-color-system-macos-card-border); border-radius: 10px; box-shadow: 0 1px 2px color-mix(in srgb, var(--pg-color-palette-black) 5%, transparent) }
.hero-62 { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--pg-color-department-compliance); display: flex; align-items: center; justify-content: center }
.hero-63 { flex: 1; min-width: 0; display: flex; flex-direction: column }
.hero-64 { font-size: 8.5px; line-height: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hero-65 { font-size: 7.5px; line-height: 9px; font-weight: 600; color: var(--pg-color-system-macos-secondary-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hero-66 { font-size: 7.5px; line-height: 9px; color: var(--pg-color-system-macos-secondary-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.hero-67 { flex: none; height: 18px; line-height: 18px; padding: 0 9px; border-radius: 9px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 7.5px; font-weight: 600 }
.hero-68 { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--pg-color-component-sidebar-icon-studio); display: flex; align-items: center; justify-content: center }
.hero-69 { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 9px 0 7px; border-radius: 9px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 7.5px; font-weight: 600 }
.hero-70 { position: relative; width: 576px; height: 304px; margin-top: 10px }
.hero-71 { display: flex; gap: 8px; height: 144px }
.hero-72 { position: relative; flex: none; width: 138px; height: 144px; box-sizing: border-box; padding: 9px 8px 8px; background: var(--pg-color-system-macos-card); border: 1px solid var(--pg-color-system-macos-card-border); border-radius: 10px; box-shadow: 0 1px 2px color-mix(in srgb, var(--pg-color-palette-black) 5%, transparent); overflow: hidden }
.hero-73 { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--site-ff5b2e-on-ff6a3d) }
.hero-74 { display: flex; align-items: center; gap: 5px; height: 10px; font-size: 8.5px; font-weight: 600 }
.hero-75 { display: flex; flex-direction: column; align-items: center; margin-top: 6px; text-align: center }
.hero-76 { position: relative; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center }
.hero-77 { position: absolute; left: 0; top: 0; width: 34px; height: 34px; box-sizing: border-box; border-radius: 11px; border: 1.5px solid var(--site-ff5b2e-on-ff6a3d) }
.hero-78 { width: 28px; height: 28px; border-radius: 8px; background: var(--pg-color-department-director); display: flex; align-items: center; justify-content: center }
.hero-79 { margin-top: 4px; font-size: 8.5px; line-height: 10px; font-weight: 600 }
.hero-80 { margin-top: 1px; font-size: 7.5px; line-height: 9px; color: var(--pg-color-system-macos-secondary-label) }
.hero-81 { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--pg-color-system-macos-card-border) }
.hero-82 { display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 7.5px; line-height: 9px; font-weight: 500 }
.hero-83 { display: block; font-size: 7.5px; line-height: 9px; color: var(--pg-color-system-macos-secondary-label) }
.hero-84 { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--pg-color-component-sidebar-icon-strategy) }
.hero-85 { stroke: var(--pg-color-component-sidebar-icon-strategy) }
.hero-86 { display: flex; flex-direction: column; gap: 2px; margin-top: 6px }
.hero-87 { display: flex; align-items: center; gap: 6px; height: 26px }
.hero-88 { position: relative; flex: none; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center }
.hero-89 { width: 20px; height: 20px; border-radius: 6px; background: var(--pg-color-department-strategy); display: flex; align-items: center; justify-content: center }
.hero-90 { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; box-sizing: border-box; border-radius: 5px; background: var(--pg-color-status-success-fill); border: 1.5px solid var(--pg-color-system-macos-card); display: flex; align-items: center; justify-content: center }
.hero-91 { stroke: var(--pg-color-component-agent-tile-done-check) }
.hero-92 { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 }
.hero-93 { position: absolute; left: 0; top: 0; width: 26px; height: 26px; box-sizing: border-box; border-radius: 9px; border: 1.5px solid var(--site-ff5b2e-on-ff6a3d); box-shadow: 0 0 0 3px var(--site-255-91-46-0_16-on-255-106-61-0_22) }
.hero-94 { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; flex: 1 }
.hero-95 { font-size: 8.5px; line-height: 10px; font-weight: 600; white-space: nowrap }
.hero-96 { height: 10px; line-height: 10px; padding: 0 4px; border-radius: 5px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 7px; font-weight: 600; white-space: nowrap }
.hero-97 { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--pg-color-department-copy) }
.hero-98 { stroke: var(--pg-color-component-sidebar-icon-copy) }
.hero-99 { position: relative; height: 48px }
.hero-100 { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 7px; line-height: 9px; font-weight: 600; color: var(--pg-color-system-macos-secondary-label); white-space: nowrap }
.hero-101 { position: absolute; left: 44px; top: 24px; width: 34px; height: 0; border-top: 1.5px dashed var(--pg-color-component-sidebar-icon-copy) }
.hero-102 { position: absolute; left: 18px; top: 11px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center }
.hero-103 { position: absolute; left: 0; top: 0; width: 26px; height: 26px; box-sizing: border-box; border-radius: 9px; border: 1.5px dashed var(--pg-color-component-sidebar-icon-copy) }
.hero-104 { width: 20px; height: 20px; border-radius: 6px; background: var(--pg-color-department-copy); display: flex; align-items: center; justify-content: center }
.hero-105 { position: absolute; left: 78px; top: 11px; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center }
.hero-106 { position: absolute; left: 1px; top: 39px; width: 60px; text-align: center; font-size: 8px; line-height: 9px; font-weight: 600; white-space: nowrap }
.hero-107 { position: absolute; left: 61px; top: 39px; width: 60px; text-align: center; font-size: 8px; line-height: 9px; font-weight: 600; white-space: nowrap }
.hero-108 { position: absolute; left: 0; top: 0; width: 26px; height: 26px; box-sizing: border-box; border-radius: 9px; border: 1.5px dashed var(--pg-color-system-macos-tertiary-label) }
.hero-109 { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--pg-color-component-sidebar-icon-studio) }
.hero-110 { width: 20px; height: 20px; border-radius: 6px; background: var(--pg-color-component-sidebar-icon-studio); display: flex; align-items: center; justify-content: center }
.hero-111 { animation: pg-arc 1.6s linear infinite }
.hero-112 { display: none }
.hero-113 { display: flex; gap: 8px; height: 144px; margin-top: 16px }
.hero-114 { position: relative; flex: none; width: 186px; height: 144px; box-sizing: border-box; padding: 9px 8px 8px; background: var(--pg-color-system-macos-card); border: 1px solid var(--pg-color-system-macos-card-border); border-radius: 10px; box-shadow: 0 1px 2px color-mix(in srgb, var(--pg-color-palette-black) 5%, transparent); overflow: hidden }
.hero-115 { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--pg-color-department-compliance) }
.hero-116 { stroke: var(--pg-color-component-sidebar-icon-compliance) }
.hero-117 { width: 20px; height: 20px; border-radius: 6px; background: var(--pg-color-department-compliance); opacity: 0.45; display: flex; align-items: center; justify-content: center }
.hero-118 { font-size: 7.5px; line-height: 9px; color: var(--pg-color-system-macos-secondary-label); white-space: nowrap }
.hero-119 { width: 20px; height: 20px; border-radius: 6px; background: var(--pg-color-department-compliance); display: flex; align-items: center; justify-content: center }
.hero-120 { display: inline-flex; align-items: center; gap: 4px; font-size: 7.5px; line-height: 10px; color: var(--pg-color-system-macos-secondary-label); white-space: nowrap }
.hero-121 { height: 10px; line-height: 10px; padding: 0 4px; border-radius: 5px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 7px; font-weight: 600 }
.hero-122 { position: absolute; top: -5px; right: -12px; height: 10px; line-height: 10px; padding: 0 3.5px; border-radius: 5px; background: var(--pg-color-component-agent-tile-external-tag-background); color: var(--pg-color-component-agent-tile-external-tag-label); font-size: 6.5px; font-weight: 600; box-shadow: 0 0 0 1.5px var(--pg-color-system-macos-card) }
.hero-123 { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; padding-left: 4px }
.hero-124 { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--pg-color-department-release) }
.hero-125 { stroke: var(--pg-color-component-sidebar-icon-release) }
.hero-126 { width: 20px; height: 20px; border-radius: 6px; background: var(--pg-color-status-waiting-mac-fill); display: flex; align-items: center; justify-content: center }
.hero-127 { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 6px; background: var(--pg-color-component-agent-tile-glyph-default); box-shadow: 0 0 0 0.5px rgba(0,0,0,0.14); display: flex; align-items: center; justify-content: center }
.hero-128 { width: 20px; height: 20px; border-radius: 6px; background: var(--pg-color-department-release); opacity: 0.45; display: flex; align-items: center; justify-content: center }
.hero-129 { position: relative; flex: none; width: 188px; height: 144px; box-sizing: border-box; padding: 9px 8px 8px; background: var(--pg-color-system-macos-card); border: 1px solid var(--pg-color-system-macos-card-border); border-radius: 10px; box-shadow: 0 1px 2px color-mix(in srgb, var(--pg-color-palette-black) 5%, transparent); overflow: hidden }
.hero-130 { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--pg-color-department-qa) }
.hero-131 { stroke: var(--pg-color-component-sidebar-icon-qa) }
.hero-132 { width: 20px; height: 20px; border-radius: 6px; background: var(--pg-color-department-qa); opacity: 0.45; display: flex; align-items: center; justify-content: center }
.hero-133 { margin: 6px 2px 0; font-size: 7.5px; line-height: 10px; color: var(--site-6e6e76-on-aeaeb2) }
.hero-134 { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible }
.hero-135 { fill: var(--pg-color-component-sidebar-icon-strategy) }
.hero-136 { position: absolute; left: 0; top: 0; z-index: 2; offset-path: path('M215 144V148Q215 152 219 152H503Q507 152 507 148V144'); offset-rotate: 0deg; offset-anchor: 50% 50%; offset-distance: 50%; animation: pg-handoff 3s ease-in-out infinite; display: inline-flex; align-items: center; gap: 3px; height: 13px; box-sizing: border-box; padding: 0 5px 0 4px; border-radius: 7px; background: var(--pg-color-system-ios-elevated); border: 1px solid var(--site-91-91-214-0_45-on-123-123-234-0_55); box-shadow: 0 2px 5px rgba(0,0,0,0.10); white-space: nowrap }
.hero-137 { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 7px; line-height: 9px; font-weight: 500 }
.hero-138 { margin-top: 8px; height: 66px; box-sizing: border-box; padding: 6px 10px 5px; background: var(--pg-color-system-macos-card); border: 1px solid var(--pg-color-system-macos-card-border); border-radius: 10px; box-shadow: 0 1px 2px color-mix(in srgb, var(--pg-color-palette-black) 5%, transparent) }
.hero-139 { display: flex; align-items: center; justify-content: space-between; height: 12px }
.hero-140 { font-size: 8.5px; font-weight: 600 }
.hero-141 { font-size: 7px; color: var(--site-6e6e76-on-aeaeb2) }
.hero-142 { margin-top: 3px; display: flex; align-items: center; gap: 6px; height: 13px; font-size: 7.5px; line-height: 9px; white-space: nowrap }
.hero-143 { flex: none; width: 22px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 7px; color: var(--site-6e6e76-on-aeaeb2) }
.hero-144 { flex: none; width: 5px; height: 5px; border-radius: 3px; background: var(--pg-color-component-sidebar-icon-copy) }
.hero-145 { min-width: 0; overflow: hidden; text-overflow: ellipsis }
.hero-146 { font-weight: 600 }
.hero-147 { display: flex; align-items: center; gap: 6px; height: 13px; font-size: 7.5px; line-height: 9px; white-space: nowrap }
.hero-148 { flex: none; width: 5px; height: 5px; border-radius: 3px; background: var(--pg-color-component-sidebar-icon-compliance) }
.hero-149 { flex: none; width: 5px; height: 5px; border-radius: 3px; background: var(--pg-color-component-sidebar-icon-release) }
.hero-150 { position: relative; z-index: 1; margin: 16px 0 0; font-family: var(--pg-font-family-mono); font-size: 12px; line-height: 16px; color: var(--site-5e5e66-on-a8a8b3) }
.how-1 { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px 32px }
.how-2 { height: 170px; box-sizing: border-box; background: var(--pg-color-marketing-card); border: 1px solid var(--pg-color-marketing-card-border); border-radius: 20px; display: flex; align-items: center; justify-content: center }
.how-3 { stroke: color-mix(in srgb, var(--pg-color-marketing-text) 35%, transparent) }
.how-4 { fill: var(--site-faf8f5-on-16171d); stroke: var(--pg-color-marketing-text) }
.how-5 { display: flex; align-items: center; gap: 12px; margin-top: 24px }
.how-6 { font-family: var(--pg-font-family-mono); font-size: 13px; line-height: 16px; color: var(--pg-color-marketing-eyebrow) }
.how-7 { flex: 1; height: 1px; background: color-mix(in srgb, var(--pg-color-component-agent-tile-external-tag-background) 16%, transparent) }
.how-8 { stroke: color-mix(in srgb, var(--pg-color-component-agent-tile-external-tag-background) 45%, transparent) }
.how-9 { margin: 16px 0 0; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 28px; line-height: 1.15; color: var(--pg-color-marketing-text) }
.how-10 { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.how-11 { fill: var(--pg-color-marketing-text-secondary) }
.how-12 { fill: var(--pg-color-marketing-card); stroke: var(--pg-color-accent-tint) }
.page-1 { width: 100%; box-sizing: border-box; overflow-x: clip; background: var(--pg-color-marketing-background); color: var(--pg-color-marketing-text); font-family: var(--pg-font-family-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased }
.phone-1 { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 120px 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 48px }
.phone-2 { flex: 1 1 340px; min-width: 0 }
.phone-3 { margin: 20px 0 0; font-size: 18px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.phone-4 { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 18px }
.phone-5 { padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--pg-color-component-agent-tile-external-tag-background) 10%, transparent) }
.phone-6 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--pg-color-marketing-text) }
.phone-7 { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.phone-8 { position: relative; flex: none; width: 280px; height: 609px; margin: 5px; border-radius: 40px; overflow: hidden; box-shadow: 0 0 0 5px #1B1B1D, 0 30px 60px rgba(18,19,26,0.18); color: var(--pg-color-component-agent-tile-glyph-default); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, sans-serif; background: radial-gradient(90% 60% at 15% 5%, var(--site-78-110-118-0_55-on-64-96-104-0_5) 0%, var(--site-78-110-118-0-on-64-96-104-0) 100%), radial-gradient(80% 50% at 90% 100%, var(--site-176-150-112-0_55-on-150-124-88-0_42) 0%, var(--site-176-150-112-0-on-150-124-88-0) 100%), linear-gradient(180deg, var(--site-22323a-on-10181d) 0%, var(--site-2b414a-on-18252b) 50%, var(--site-46524f-on-262e2c) 85%, var(--site-5a584c-on-33322a) 100%) }
.phone-9 { position: absolute; left: 96px; top: 8px; width: 88px; height: 26px; border-radius: 13px; background: var(--pg-color-palette-black) }
.phone-10 { position: absolute; right: 20px; top: 15px; display: flex; align-items: center; gap: 4px }
.phone-11 { position: absolute; left: 135px; top: 40px }
.phone-12 { position: absolute; left: 0; right: 0; top: 58px; text-align: center; font-size: 14px; line-height: 18px; font-weight: 600; color: var(--pg-color-component-agent-tile-glyph-default) }
.phone-13 { position: absolute; left: 0; right: 0; top: 74px; text-align: center; font-size: 72px; line-height: 78px; font-weight: 600; letter-spacing: -1.5px; color: var(--pg-color-component-agent-tile-glyph-default) }
.phone-14 { position: absolute; left: 10px; top: 396px; width: 260px; box-sizing: border-box; padding: 10px 12px 12px; border-radius: 16px; background: var(--site-255-255-255-0_94-on-1c1c1e); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 8px 22px var(--site-0-0-0-0_22-on-0-0-0-0_45); color: var(--pg-color-system-ios-label) }
.phone-15 { display: flex; align-items: center; justify-content: space-between; height: 14px }
.phone-16 { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; line-height: 14px; font-weight: 600; color: var(--site-1d1d1f-on-ffffff) }
.phone-17 { font-size: 10px; line-height: 14px; color: var(--pg-color-system-macos-secondary-label) }
.phone-18 { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px }
.phone-19 { position: relative; flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center }
.phone-20 { position: absolute; left: 0; top: 0; width: 32px; height: 32px; box-sizing: border-box; border-radius: 10.5px; border: 1.5px solid var(--pg-color-component-sidebar-icon-studio) }
.phone-21 { width: 25px; height: 25px; border-radius: 7px; background: var(--pg-color-component-sidebar-icon-studio); display: flex; align-items: center; justify-content: center }
.phone-22 { font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--pg-color-system-ios-label) }
.phone-23 { font-size: 10.5px; line-height: 14px; color: var(--pg-color-system-macos-secondary-label) }
.phone-24 { display: flex; gap: 3px; height: 4px; margin-top: 9px }
.phone-25 { flex: 1; border-radius: 2px; background: var(--pg-color-component-sidebar-icon-studio) }
.phone-26 { flex: 1; border-radius: 2px; background: var(--site-e1e1e4-on-3a3a3c) }
.phone-27 { position: absolute; left: 32px; top: 532px; width: 36px; height: 36px; border-radius: 18px; box-sizing: border-box; background: var(--site-44-44-48-0_66); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border: 0.5px solid color-mix(in srgb, var(--pg-color-component-agent-tile-glyph-default) 12%, transparent); display: flex; align-items: center; justify-content: center }
.phone-28 { position: absolute; right: 32px; top: 532px; width: 36px; height: 36px; border-radius: 18px; box-sizing: border-box; background: var(--site-44-44-48-0_66); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%); border: 0.5px solid color-mix(in srgb, var(--pg-color-component-agent-tile-glyph-default) 12%, transparent); display: flex; align-items: center; justify-content: center }
.phone-29 { position: absolute; left: 93px; bottom: 6px; width: 94px; height: 4px; border-radius: 2px; background: var(--pg-color-component-agent-tile-glyph-default) }
.phone-30 { flex: 0 1 496px; min-width: 0; display: flex; flex-direction: column; gap: 24px }
.phone-31 { box-sizing: border-box; padding: 20px 24px; border-radius: 24px; background: var(--pg-color-marketing-card); border: 1px solid var(--pg-color-marketing-card-border) }
.phone-32 { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg-color-marketing-text-secondary) }
.phone-33 { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 20px }
.phone-34 { display: flex; flex-direction: column; gap: 8px }
.phone-35 { width: 196px; height: 37px; box-sizing: border-box; padding: 0 14px 0 7px; border-radius: 18.5px; background: var(--pg-color-palette-black); display: flex; align-items: center; justify-content: space-between; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif }
.phone-36 { width: 23px; height: 23px; border-radius: 7px; background: var(--pg-color-component-sidebar-icon-studio); display: flex; align-items: center; justify-content: center }
.phone-37 { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--pg-color-component-agent-tile-glyph-default) }
.phone-38 { position: relative; width: 23px; height: 23px; border-radius: 7px; background: var(--pg-color-component-sidebar-icon-studio); box-shadow: 0 0 0 1.5px var(--pg-color-palette-black), 0 0 0 3px var(--pg-color-department-director-icon-on-dark); display: flex; align-items: center; justify-content: center }
.phone-39 { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; line-height: 16px; font-weight: 600; color: var(--pg-color-brand-ember-300) }
.phone-40 { width: 6px; height: 6px; border-radius: 3px; background: var(--pg-color-department-director-icon-on-dark) }
.phone-41 { margin: 0 0 10px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg-color-marketing-text-secondary) }
.phone-42 { box-sizing: border-box; max-width: 370px; padding: 14px 16px 16px; border-radius: 22px; background: var(--pg-color-system-ios-cell); border: 1px solid rgba(18,19,26,0.08); box-shadow: 0 12px 32px var(--site-18-19-26-0_08-on-0-0-0-0_45); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, sans-serif }
.phone-43 { display: flex; align-items: center; justify-content: space-between; height: 18px }
.phone-44 { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--site-1d1d1f-on-ffffff) }
.phone-45 { font-size: 13px; line-height: 18px; color: var(--pg-color-system-macos-secondary-label) }
.phone-46 { display: flex; align-items: center; gap: 12px; margin-top: 10px }
.phone-47 { position: relative; flex: none; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center }
.phone-48 { position: absolute; left: 0; top: 0; width: 46px; height: 46px; box-sizing: border-box; border-radius: 15px; border: 2px solid var(--site-ff5b2e-on-ff6a3d); box-shadow: 0 0 0 4px var(--site-255-91-46-0_16-on-255-106-61-0_22) }
.phone-49 { width: 36px; height: 36px; border-radius: 10px; background: var(--pg-color-component-sidebar-icon-studio); display: flex; align-items: center; justify-content: center }
.phone-50 { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--pg-color-system-ios-label) }
.phone-51 { font-size: 15px; line-height: 20px; color: var(--pg-color-system-macos-secondary-label) }
.phone-52 { display: block; margin-top: 14px; height: 36px; border-radius: 18px; background: var(--pg-color-brand-ember-700); color: var(--pg-color-component-agent-tile-glyph-default); text-align: center; font-size: 15px; line-height: 36px; font-weight: 600 }
.phone-53 { box-sizing: border-box; padding: 20px; border-radius: 28px; background: radial-gradient(90% 70% at 10% 0%, rgba(78,110,118,0.55) 0%, rgba(78,110,118,0) 100%), linear-gradient(180deg, #2B414A 0%, #46524F 60%, #5A584C 100%); display: flex; flex-wrap: wrap; gap: 16px; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', system-ui, sans-serif }
.phone-54 { position: relative; flex: none; width: 140px; height: 140px; box-sizing: border-box; padding: 12px; border-radius: 22px; background: var(--pg-color-system-ios-cell); color: var(--pg-color-system-ios-label) }
.phone-55 { position: relative; display: block; width: 64px; height: 64px }
.phone-56 { stroke: var(--site-e5e5ea-on-48484a) }
.phone-57 { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center }
.phone-58 { font-size: 14px; line-height: 16px; font-weight: 600; color: var(--pg-color-system-ios-label) }
.phone-59 { font-size: 10px; line-height: 12px; font-weight: 500; color: var(--pg-color-system-macos-secondary-label) }
.phone-60 { position: absolute; right: 12px; top: 12px }
.phone-61 { display: block; margin-top: 6px; font-size: 13px; line-height: 17px; font-weight: 600; color: var(--pg-color-system-ios-label) }
.phone-62 { display: inline-block; margin-top: 4px; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 11px; line-height: 20px; font-weight: 600 }
.phone-63 { flex: 0 1 300px; min-width: 0; height: 140px; box-sizing: border-box; padding: 12px 14px 8px; border-radius: 22px; background: var(--pg-color-system-ios-cell); color: var(--pg-color-system-ios-label); display: flex; flex-direction: column }
.phone-64 { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--pg-color-system-ios-label) }
.phone-65 { min-width: 18px; height: 18px; box-sizing: border-box; padding: 0 5px; border-radius: 9px; background: var(--pg-color-accent-soft); color: var(--pg-color-marketing-eyebrow); font-size: 11px; line-height: 18px; font-weight: 600; text-align: center }
.phone-66 { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; line-height: 14px; color: var(--pg-color-system-macos-secondary-label) }
.phone-67 { display: flex; align-items: center; gap: 10px; height: 48px; margin-top: 4px }
.phone-68 { position: relative; flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center }
.phone-69 { position: absolute; left: 0; top: 0; width: 36px; height: 36px; box-sizing: border-box; border-radius: 12px; border: 2px solid var(--site-ff5b2e-on-ff6a3d) }
.phone-70 { width: 28px; height: 28px; border-radius: 8px; background: var(--pg-color-department-compliance); display: flex; align-items: center; justify-content: center }
.phone-71 { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.phone-72 { font-size: 13px; line-height: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.phone-73 { display: flex; align-items: center; justify-content: space-between; gap: 8px }
.phone-74 { min-width: 0; font-size: 11px; line-height: 14px; color: var(--pg-color-system-macos-secondary-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.phone-75 { flex: none; height: 22px; padding: 0 10px; border-radius: 11px; background: var(--pg-color-brand-ember-700); color: var(--pg-color-component-agent-tile-glyph-default); font-size: 11px; line-height: 22px; font-weight: 600 }
.phone-76 { display: block; height: 1px; margin-left: 46px; background: var(--pg-color-system-ios-separator) }
.phone-77 { display: flex; align-items: center; gap: 10px; height: 48px }
.phone-78 { width: 28px; height: 28px; border-radius: 8px; background: var(--pg-color-component-sidebar-icon-studio); display: flex; align-items: center; justify-content: center }
.phone-79 { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--pg-color-status-waiting-mac-capsule-bg); color: var(--pg-color-status-waiting-mac-capsule-text); font-size: 11px; line-height: 22px; font-weight: 600 }
.phone-80 { stroke: var(--pg-color-status-waiting-mac-capsule-text) }
.price-1 { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px }
.price-2 { display: flex; flex-direction: column; box-sizing: border-box; padding: 40px; border-radius: 24px; background: var(--pg-color-marketing-card); border: 1px solid var(--pg-color-marketing-card-border) }
.price-3 { margin: 0; font-size: 20px; line-height: 26px; font-weight: 600; color: var(--pg-color-marketing-text) }
.price-4 { margin: 20px 0 0; display: flex; align-items: baseline; gap: 8px }
.price-5 { font-family: var(--pg-font-family-display); font-size: 64px; line-height: 1; color: var(--pg-color-marketing-text) }
.price-6 { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.price-7 { list-style: none; margin: 28px 0 0; padding: 28px 0 0; border-top: 1px solid var(--pg-color-marketing-card-border); display: flex; flex-direction: column; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--pg-color-marketing-text) }
.price-8 { display: flex; gap: 10px }
.price-9 { flex: none; margin-top: 2px; stroke: var(--pg-color-status-success-capsule-text) }
.price-10 { display: flex; gap: 10px; color: var(--site-5e5e66-on-a8a8b3) }
.price-11 { flex: none; margin-top: 2px; stroke: var(--pg-color-system-macos-tertiary-label) }
.price-12 { margin-top: auto; padding-top: 32px }
.price-13 { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; box-sizing: border-box; border-radius: 24px; border: 1.5px solid var(--pg-color-marketing-text); color: var(--pg-color-marketing-text); font-size: 15px; font-weight: 600; text-decoration: none }
.price-14 { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px }
.price-15 { font-size: 15px; line-height: 20px; color: var(--site-5e5e66-on-a8a8b3) }
.price-16 { position: relative; display: flex; flex-direction: column; box-sizing: border-box; padding: 40px; border-radius: 24px; background: var(--pg-color-marketing-card); border: 2px solid var(--pg-color-accent-tint); box-shadow: 0 16px 40px color-mix(in srgb, var(--pg-color-marketing-link) 10%, transparent) }
.price-17 { position: absolute; left: 38px; top: -15px; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--pg-color-brand-ember-700); color: var(--pg-color-component-agent-tile-glyph-default); font-size: 13px; line-height: 28px; font-weight: 600 }
.price-18 { margin: 20px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px }
.price-19 { font-size: 18px; line-height: 24px; color: var(--pg-color-marketing-text-secondary) }
.price-20 { display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; box-sizing: border-box; border-radius: 24px; background: var(--pg-color-brand-ember-700); color: var(--pg-color-component-agent-tile-glyph-default); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--pg-color-component-agent-tile-glyph-default) 18%, transparent) }
.price-21 { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--pg-color-marketing-card-border); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 48px }
.price-22 { margin: 0; flex: 1 1 320px; font-family: var(--pg-font-family-display); font-size: 28px; line-height: 1.2; color: var(--pg-color-marketing-text) }
.price-23 { margin: 0; flex: 1 1 420px; font-size: 15px; line-height: 1.6; color: var(--site-5e5e66-on-a8a8b3) }
.studio-1 { margin-top: 64px; box-sizing: border-box; padding: 48px; background: var(--pg-color-marketing-card); border: 1px solid var(--pg-color-marketing-card-border); border-radius: 28px }
.studio-2 { display: flex; flex-wrap: wrap; align-items: center; gap: 40px }
.studio-3 { margin: 0; flex: none }
.studio-4 { margin: 0 0 16px; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg-color-marketing-text-secondary) }
.studio-5 { position: relative; width: 150px; height: 326px; overflow: hidden; background: var(--pg-color-component-agent-tile-glyph-default); box-shadow: 0 0 0 1px rgba(18,19,26,0.14); font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif }
.studio-6 { position: absolute; left: 16px; top: 9px; font-size: 8px; line-height: 10px; font-weight: 600; color: var(--site-14213d) }
.studio-7 { position: absolute; right: 12px; top: 10px }
.studio-8 { position: absolute; left: 12px; top: 30px; font-size: 17px; line-height: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--site-14213d) }
.studio-9 { position: absolute; left: 11px; top: 57px; width: 128px; height: 61px; border-radius: 13px; background: var(--site-14213d) }
.studio-10 { position: absolute; left: 11px; top: 9px; font-size: 7.5px; line-height: 9px; font-weight: 600; letter-spacing: 0.08em; color: var(--site-c8d1e6) }
.studio-11 { position: absolute; left: 11px; top: 21px; font-size: 29px; line-height: 29px; font-weight: 800; letter-spacing: -0.03em; color: var(--site-2fbf8f) }
.studio-12 { position: absolute; left: 48px; top: 36px; font-size: 10.5px; line-height: 12px; font-weight: 600; color: var(--pg-color-component-agent-tile-glyph-default) }
.studio-13 { position: absolute; right: 11px; top: 21px }
.studio-14 { position: absolute; left: 11px; top: 128px; width: 128px; height: 24px; box-sizing: border-box; padding: 0 9px; border-radius: 8px; background: var(--site-f4ebdd); display: flex; align-items: center; gap: 7px }
.studio-15 { width: 12px; height: 12px; border-radius: 6px; background: var(--site-2fbf8f); display: flex; align-items: center; justify-content: center }
.studio-16 { font-size: 9px; line-height: 11px; font-weight: 600; color: var(--site-14213d) }
.studio-17 { position: absolute; left: 11px; top: 158px; width: 128px; height: 24px; box-sizing: border-box; padding: 0 9px; border-radius: 8px; background: var(--site-f4ebdd); display: flex; align-items: center; gap: 7px }
.studio-18 { position: absolute; left: 11px; top: 188px; width: 128px; height: 24px; box-sizing: border-box; padding: 0 9px; border-radius: 8px; background: var(--site-f4ebdd); display: flex; align-items: center; gap: 7px }
.studio-19 { width: 12px; height: 12px; box-sizing: border-box; border-radius: 6px; border: 1.5px solid var(--site-20-33-61-0_45) }
.studio-20 { position: absolute; left: 12px; top: 228px; font-size: 8.5px; line-height: 10px; font-weight: 600; color: var(--site-4a5875) }
.studio-21 { position: absolute; left: 12px; top: 243px; display: flex; gap: 7px }
.studio-22 { width: 12px; height: 12px; border-radius: 6px; background: var(--site-2fbf8f) }
.studio-23 { width: 12px; height: 12px; border-radius: 6px; background: var(--site-e3d6c2) }
.studio-24 { position: absolute; left: 50px; bottom: 6px; width: 50px; height: 3px; border-radius: 2px; background: var(--site-14213d) }
.studio-25 { margin: 12px 0 0; font-family: var(--pg-font-family-mono); font-size: 12px; line-height: 16px; color: var(--site-5e5e66-on-a8a8b3) }
.studio-26 { margin: 0; flex: 1 1 600px; min-width: 0 }
.studio-27 { display: flex; flex-wrap: wrap; gap: 12px }
.studio-28 { position: relative; flex: none; width: 140px; height: 304px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, var(--site-0b1430) 0%, var(--site-1b2a5c) 100%); box-shadow: 0 10px 24px var(--site-11-20-48-0_22-on-0-0-0-0_45), 0 0 0 0.5px var(--site-0-0-0-0_25-on-255-255-255-0_16); font-family: var(--pg-font-family-body) }
.studio-29 { position: absolute; left: 62px; top: 16px; width: 16px; height: 2.5px; border-radius: 2px; background: var(--pg-color-department-director) }
.studio-30 { position: absolute; left: 8px; right: 8px; top: 26px; text-align: center; font-size: 13px; line-height: 14px; font-weight: 800; letter-spacing: -0.03em; color: var(--pg-color-component-agent-tile-glyph-default) }
.studio-31 { position: absolute; left: 18px; top: 66px; width: 104px; height: 226px; box-sizing: border-box; padding: 3px; border-radius: 17px; background: var(--site-05070d); box-shadow: 0 0 0 1px var(--site-2b3557), 0 12px 24px color-mix(in srgb, var(--pg-color-palette-black) 35%, transparent) }
.studio-32 { position: relative; width: 98px; height: 220px; border-radius: 14px; background: var(--pg-color-component-agent-tile-glyph-default); overflow: hidden }
.studio-33 { position: absolute; left: 35px; top: 5px; width: 28px; height: 8px; border-radius: 4px; background: var(--site-05070d) }
.studio-34 { position: absolute; left: 9px; top: 5px; font-size: 5.5px; line-height: 8px; font-weight: 600; color: var(--site-14213d) }
.studio-35 { position: absolute; left: 8px; top: 19px; font-size: 11px; line-height: 13px; font-weight: 800; letter-spacing: -0.02em; color: var(--site-14213d) }
.studio-36 { position: absolute; left: 7px; top: 37px; width: 84px; height: 40px; border-radius: 9px; background: var(--site-14213d) }
.studio-37 { position: absolute; left: 7px; top: 6px; font-size: 5px; line-height: 6px; font-weight: 600; letter-spacing: 0.08em; color: var(--site-c8d1e6) }
.studio-38 { position: absolute; left: 7px; top: 14px; font-size: 19px; line-height: 19px; font-weight: 800; letter-spacing: -0.03em; color: var(--site-2fbf8f) }
.studio-39 { position: absolute; left: 31px; top: 24px; font-size: 7px; line-height: 8px; font-weight: 600; color: var(--pg-color-component-agent-tile-glyph-default) }
.studio-40 { position: absolute; right: 7px; top: 14px }
.studio-41 { position: absolute; left: 7px; top: 84px; width: 84px; height: 16px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; gap: 5px }
.studio-42 { width: 8px; height: 8px; border-radius: 4px; background: var(--site-2fbf8f) }
.studio-43 { font-size: 6px; line-height: 8px; font-weight: 600; color: var(--site-14213d) }
.studio-44 { position: absolute; left: 7px; top: 104px; width: 84px; height: 16px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; gap: 5px }
.studio-45 { position: absolute; left: 7px; top: 124px; width: 84px; height: 16px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; gap: 5px }
.studio-46 { width: 8px; height: 8px; box-sizing: border-box; border-radius: 4px; border: 1px solid var(--site-20-33-61-0_45) }
.studio-47 { position: absolute; left: 8px; top: 150px; font-size: 5.5px; line-height: 7px; font-weight: 600; color: var(--site-4a5875) }
.studio-48 { position: absolute; left: 8px; top: 160px; display: flex; gap: 4.5px }
.studio-49 { width: 8px; height: 8px; border-radius: 4px; background: var(--site-e3d6c2) }
.studio-50 { position: absolute; left: 6px; right: 6px; top: 26px; text-align: center; font-size: 13px; line-height: 14px; font-weight: 800; letter-spacing: -0.03em; color: var(--pg-color-component-agent-tile-glyph-default) }
.studio-51 { position: absolute; left: 8px; top: 19px; font-size: 10px; line-height: 13px; font-weight: 800; letter-spacing: -0.02em; color: var(--site-14213d) }
.studio-52 { position: absolute; left: 8px; top: 40px; font-size: 5.5px; line-height: 7px; font-weight: 600; color: var(--site-4a5875) }
.studio-53 { position: absolute; left: 7px; top: 49px; width: 84px; height: 18px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; font-size: 6.5px; font-weight: 600; color: var(--site-14213d) }
.studio-54 { position: absolute; left: 8px; top: 76px; font-size: 5.5px; line-height: 7px; font-weight: 600; color: var(--site-4a5875) }
.studio-55 { position: absolute; left: 7px; top: 85px; display: flex; gap: 6px }
.studio-56 { width: 16px; height: 16px; border-radius: 8px; background: var(--site-2fbf8f); display: flex; align-items: center; justify-content: center }
.studio-57 { width: 16px; height: 16px; border-radius: 8px; background: var(--site-f4ebdd); display: flex; align-items: center; justify-content: center }
.studio-58 { position: absolute; left: 8px; top: 110px; font-size: 5.5px; line-height: 7px; font-weight: 600; color: var(--site-4a5875) }
.studio-59 { position: absolute; left: 7px; top: 119px; display: flex; gap: 5px }
.studio-60 { height: 16px; padding: 0 7px; border-radius: 5px; background: var(--site-f4ebdd); font-size: 6.5px; line-height: 16px; font-weight: 700; color: var(--site-14213d) }
.studio-61 { height: 16px; padding: 0 7px; border-radius: 5px; background: var(--site-f4ebdd); font-size: 6px; line-height: 16px; font-weight: 600; color: var(--site-4a5875) }
.studio-62 { position: absolute; left: 7px; top: 186px; width: 84px; height: 18px; border-radius: 9px; background: var(--site-2fbf8f); text-align: center; font-size: 7px; line-height: 18px; font-weight: 700; color: var(--site-14213d) }
.studio-63 { position: absolute; left: 7px; top: 37px; width: 84px; height: 30px; border-radius: 8px; background: var(--site-14213d) }
.studio-64 { position: absolute; left: 7px; top: 7px; font-size: 14px; line-height: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--site-2fbf8f) }
.studio-65 { position: absolute; left: 36px; top: 12px; font-size: 6px; line-height: 8px; font-weight: 600; color: var(--site-c8d1e6) }
.studio-66 { position: absolute; left: 8px; top: 76px; display: flex; gap: 4.5px; font-size: 5px; line-height: 7px; font-weight: 600; color: var(--site-4a5875); text-align: center }
.studio-67 { width: 8px }
.studio-68 { position: absolute; left: 8px; top: 88px; font-size: 5.5px; line-height: 7px; font-weight: 600; color: var(--site-14213d) }
.studio-69 { position: absolute; left: 8px; top: 96px; display: flex; gap: 4.5px }
.studio-70 { position: absolute; left: 8px; top: 112px; font-size: 5.5px; line-height: 7px; font-weight: 600; color: var(--site-14213d) }
.studio-71 { position: absolute; left: 8px; top: 120px; display: flex; gap: 4.5px }
.studio-72 { position: absolute; left: 8px; top: 136px; font-size: 5.5px; line-height: 7px; font-weight: 600; color: var(--site-14213d) }
.studio-73 { position: absolute; left: 8px; top: 144px; display: flex; gap: 4.5px }
.studio-74 { position: absolute; left: 8px; top: 38px; font-size: 20px; line-height: 22px; font-weight: 800; letter-spacing: -0.03em; color: var(--site-14213d) }
.studio-75 { position: absolute; left: 8px; top: 62px; font-size: 5.5px; line-height: 7px; font-weight: 600; color: var(--site-4a5875) }
.studio-76 { position: absolute; left: 7px; top: 78px; width: 84px; height: 16px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; justify-content: space-between }
.studio-77 { font-weight: 500; color: var(--site-4a5875) }
.studio-78 { position: relative; width: 13px; height: 8px; border-radius: 4px; background: var(--site-2fbf8f) }
.studio-79 { position: absolute; right: 1px; top: 1px; width: 6px; height: 6px; border-radius: 3px; background: var(--pg-color-component-agent-tile-glyph-default) }
.studio-80 { position: absolute; left: 7px; top: 98px; width: 84px; height: 16px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; justify-content: space-between }
.studio-81 { position: absolute; left: 7px; top: 118px; width: 84px; height: 16px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; justify-content: space-between }
.studio-82 { position: relative; width: 13px; height: 8px; border-radius: 4px; background: var(--site-d9cdb9) }
.studio-83 { position: absolute; left: 1px; top: 1px; width: 6px; height: 6px; border-radius: 3px; background: var(--pg-color-component-agent-tile-glyph-default) }
.studio-84 { position: absolute; left: 35px; top: 42px; width: 28px; height: 28px; border-radius: 14px; background: var(--site-14213d); display: flex; align-items: center; justify-content: center }
.studio-85 { position: absolute; left: 10px; right: 10px; top: 78px; text-align: center; font-size: 6.5px; line-height: 8.5px; font-weight: 700; color: var(--site-14213d) }
.studio-86 { position: absolute; left: 7px; top: 104px; width: 84px; height: 16px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; justify-content: space-between; font-size: 6px; line-height: 8px; font-weight: 600; color: var(--site-14213d) }
.studio-87 { position: absolute; left: 7px; top: 124px; width: 84px; height: 16px; box-sizing: border-box; padding: 0 6px; border-radius: 5px; background: var(--site-f4ebdd); display: flex; align-items: center; justify-content: space-between; font-size: 6px; line-height: 8px; font-weight: 600; color: var(--site-14213d) }
.studio-88 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px }
.studio-89 { margin: 0; font-size: 14px; line-height: 1.5; color: var(--site-5e5e66-on-a8a8b3) }
.studio-90 { width: 16px; height: 16px; border-radius: 8px; background: var(--site-2fbf8f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-color-palette-black) 8%, transparent) }
.studio-91 { width: 16px; height: 16px; border-radius: 8px; background: var(--site-14213d) }
.studio-92 { width: 16px; height: 16px; border-radius: 8px; background: var(--site-f4ebdd); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-color-palette-black) 12%, transparent) }
.studio-93 { width: 16px; height: 16px; border-radius: 8px; background: var(--pg-color-department-director) }
.studio-94 { margin: 64px 0 0; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg-color-marketing-text-secondary) }
.studio-95 { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px }
.studio-96 { height: 272px; border-radius: 20px; background: var(--site-efebe4-on-16171d); display: flex; align-items: center; justify-content: center; overflow: hidden }
.studio-97 { zoom: 0.8; position: relative; flex: none; width: 140px; height: 304px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, var(--site-0b1430) 0%, var(--site-1b2a5c) 100%); box-shadow: 0 10px 24px rgba(11,20,48,0.22); font-family: var(--pg-font-family-body) }
.studio-98 { position: absolute; left: 18px; top: 66px; width: 104px; height: 226px; box-sizing: border-box; padding: 3px; border-radius: 17px; background: var(--site-05070d); box-shadow: 0 0 0 1px var(--site-2b3557) }
.studio-99 { position: absolute; left: 8px; top: 19px; font-size: 11px; line-height: 13px; font-weight: 800; color: var(--site-14213d) }
.studio-100 { position: absolute; left: 7px; top: 14px; font-size: 19px; line-height: 19px; font-weight: 800; color: var(--site-2fbf8f) }
.studio-101 { position: absolute; left: 7px; top: 84px; width: 84px; height: 16px; border-radius: 5px; background: var(--site-f4ebdd) }
.studio-102 { position: absolute; left: 7px; top: 104px; width: 84px; height: 16px; border-radius: 5px; background: var(--site-f4ebdd) }
.studio-103 { position: absolute; left: 7px; top: 124px; width: 84px; height: 16px; border-radius: 5px; background: var(--site-f4ebdd) }
.studio-104 { margin: 16px 0 0; font-size: 17px; line-height: 22px; font-weight: 600; color: var(--pg-color-marketing-text) }
.studio-105 { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--site-5e5e66-on-a8a8b3) }
.studio-106 { zoom: 0.8; position: relative; flex: none; width: 140px; height: 304px; border-radius: 8px; overflow: hidden; background: var(--site-f4ebdd); box-shadow: 0 10px 24px rgba(20,33,61,0.14), 0 0 0 0.5px rgba(0,0,0,0.10); font-family: var(--pg-font-family-body) }
.studio-107 { position: absolute; left: 12px; top: 16px; font-family: var(--pg-font-family-mono); font-size: 6px; line-height: 8px; letter-spacing: 0.1em; color: var(--site-4a5875) }
.studio-108 { position: absolute; left: 12px; top: 28px; font-family: var(--pg-font-family-display); font-style: italic; font-size: 28px; line-height: 26px; color: var(--site-14213d) }
.studio-109 { position: absolute; left: 12px; top: 88px; width: 28px; height: 1px; background: var(--site-14213d) }
.studio-110 { position: absolute; left: 30px; top: 100px; width: 104px; height: 226px; box-sizing: border-box; padding: 3px; border-radius: 17px; background: var(--site-05070d) }
.studio-111 { zoom: 0.8; position: relative; flex: none; width: 140px; height: 304px; border-radius: 8px; overflow: hidden; background: var(--pg-color-component-agent-tile-glyph-default); box-shadow: 0 10px 24px rgba(20,33,61,0.14), 0 0 0 0.5px rgba(0,0,0,0.10); font-family: var(--pg-font-family-body) }
.studio-112 { position: absolute; left: 0; top: 0; right: 0; height: 150px; background: var(--site-2fbf8f) }
.studio-113 { position: absolute; left: 12px; top: 18px; font-size: 19px; line-height: 19px; font-weight: 800; letter-spacing: -0.035em; color: var(--site-14213d) }
.studio-114 { position: absolute; left: 18px; top: 70px; width: 104px; height: 226px; box-sizing: border-box; padding: 3px; border-radius: 17px; background: var(--site-05070d); box-shadow: 0 12px 24px var(--site-20-33-61-0_25) }
.studio-115 { zoom: 0.8; position: relative; flex: none; width: 140px; height: 304px; border-radius: 8px; overflow: hidden; background: linear-gradient(180deg, var(--site-eaf7f2) 0%, var(--pg-color-component-agent-tile-glyph-default) 100%); box-shadow: 0 10px 24px rgba(20,33,61,0.14), 0 0 0 0.5px rgba(0,0,0,0.10); font-family: var(--pg-font-family-body) }
.studio-116 { position: absolute; left: 0; right: 0; top: 22px; text-align: center; font-size: 13px; line-height: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--site-14213d) }
.studio-117 { position: absolute; left: 0; right: 0; top: 40px; text-align: center; font-size: 7px; line-height: 9px; font-weight: 500; color: var(--site-4a5875) }
.studio-118 { position: absolute; left: 18px; top: 64px; width: 104px; height: 226px; box-sizing: border-box; padding: 3px; border-radius: 17px; background: var(--site-05070d); transform: rotate(-7deg); box-shadow: 0 18px 28px var(--site-20-33-61-0_28) }
.studio-119 { zoom: 0.8; position: relative; flex: none; width: 140px; height: 304px; border-radius: 8px; overflow: hidden; background: var(--pg-color-component-agent-tile-glyph-default); box-shadow: 0 10px 24px rgba(20,33,61,0.10), 0 0 0 0.5px rgba(0,0,0,0.12); font-family: var(--pg-font-family-body) }
.studio-120 { position: absolute; left: 12px; top: 18px; font-family: var(--pg-font-family-mono); font-size: 8px; line-height: 10px; font-weight: 500; letter-spacing: 0.06em; color: var(--pg-color-component-agent-tile-glyph-on-amber) }
.studio-121 { position: absolute; left: 12px; top: 31px; font-family: var(--pg-font-family-mono); font-size: 6px; line-height: 8px; color: var(--site-4a5875) }
.studio-122 { position: absolute; left: 18px; top: 56px; width: 104px; height: 226px; box-sizing: border-box; padding: 3px; border-radius: 17px; background: var(--site-e5e5ea); box-shadow: 0 0 0 1px var(--site-d1d1d6) }
.team-1 { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px }
.team-2 { display: flex; flex-direction: column; box-sizing: border-box; padding: 28px; background: var(--pg-color-marketing-card); border: 1px solid var(--pg-color-marketing-card-border); border-radius: 20px }
.team-3 { display: flex; align-items: flex-start; gap: 14px }
.team-4 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-department-director); display: flex; align-items: center; justify-content: center }
.team-5 { min-width: 0 }
.team-6 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--pg-color-marketing-text) }
.team-7 { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--site-5e5e66-on-a8a8b3) }
.team-8 { height: 1px; margin: 20px 0; background: var(--pg-color-marketing-card-border) }
.team-9 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg-color-marketing-text-secondary) }
.team-10 { stroke: var(--pg-color-status-success-icon) }
.team-11 { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--pg-color-marketing-text) }
.team-12 { margin: 18px 0 0; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pg-color-marketing-text-secondary) }
.team-13 { stroke: var(--pg-color-status-danger-fill) }
.team-14 { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.team-15 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-department-strategy); display: flex; align-items: center; justify-content: center }
.team-16 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-department-copy); display: flex; align-items: center; justify-content: center }
.team-17 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-component-sidebar-icon-studio); display: flex; align-items: center; justify-content: center }
.team-18 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-department-compliance); display: flex; align-items: center; justify-content: center }
.team-19 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-department-release); display: flex; align-items: center; justify-content: center }
.team-20 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-department-qa); display: flex; align-items: center; justify-content: center }
.team-21 { display: flex; flex-direction: column; box-sizing: border-box; padding: 28px; background: var(--pg-color-marketing-text); border: 1px solid var(--pg-color-marketing-text); border-radius: 20px; color: var(--site-faf8f5-on-12131a) }
.team-22 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-brand-ember-700); display: flex; align-items: center; justify-content: center }
.team-23 { margin: 0; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 36px; line-height: 1; color: var(--site-faf8f5-on-12131a) }
.team-24 { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--site-a8a8b3-on-3a3d4a) }
.team-25 { height: 1px; margin: 20px 0; background: color-mix(in srgb, var(--pg-color-component-agent-tile-external-tag-label) 12%, transparent) }
.team-26 { margin: 0; font-size: 15px; line-height: 1.5; color: var(--site-faf8f5-on-12131a) }
.team-27 { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--site-a8a8b3-on-3a3d4a) }
.trust-1 { background: var(--site-0c0d11-on-16171d); color: var(--pg-color-paper-50) }
.trust-2 { margin: 0; font-family: var(--pg-font-family-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-color-brand-ember-300) }
.trust-3 { margin: 16px 0 0; max-width: 900px; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 48px; line-height: 1.1; letter-spacing: -0.01em; color: var(--pg-color-paper-50) }
.trust-4 { margin: 20px 0 0; max-width: 760px; font-size: 18px; line-height: 1.5; color: var(--pg-color-graphite-300) }
.trust-5 { margin-top: 64px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px }
.trust-6 { box-sizing: border-box; padding: 40px; border-radius: 24px; background: var(--site-16171d-on-0c0d11); border: 1px solid color-mix(in srgb, var(--pg-color-component-agent-tile-glyph-default) 8%, transparent) }
.trust-7 { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--pg-color-palette-gray-900); display: flex; align-items: center; justify-content: center }
.trust-8 { margin: 0; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--pg-color-paper-50) }
.trust-9 { list-style: none; margin: 32px 0 0; padding: 0 }
.trust-10 { padding: 20px 0; border-top: 1px solid color-mix(in srgb, var(--pg-color-component-agent-tile-glyph-default) 10%, transparent) }
.trust-11 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--pg-color-paper-50) }
.trust-12 { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--pg-color-graphite-300) }
.trust-13 { padding: 20px 0 0; border-top: 1px solid color-mix(in srgb, var(--pg-color-component-agent-tile-glyph-default) 10%, transparent) }
.trust-14 { margin-top: 96px; padding-top: 48px; border-top: 1px solid color-mix(in srgb, var(--pg-color-component-agent-tile-glyph-default) 12%, transparent) }
.trust-15 { margin: 0; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 88px; line-height: 1; letter-spacing: -0.01em; color: var(--pg-color-paper-50) }
.trust-16 { font-style: italic; color: var(--pg-color-department-director-icon-on-dark) }
.trust-17 { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px }
.trust-18 { margin: 0; font-size: 16px; line-height: 1.5; color: var(--pg-color-graphite-300) }
.trust-19 { display: block; margin-bottom: 6px; font-weight: 600; color: var(--pg-color-paper-50) }
.u-1 { stroke: var(--pg-color-component-agent-tile-external-tag-label) }
.u-2 { margin: 0; font-family: var(--pg-font-family-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pg-color-marketing-eyebrow) }
.u-3 { display: flex; flex-direction: column }
.u-4 { stroke: var(--pg-color-accent-tint) }
.u-5 { flex: none }
.u-6 { position: absolute; left: 0; top: 0 }
.u-7 { border-top: 1px solid var(--pg-color-marketing-card-border) }
.u-8 { max-width: 1440px; margin: 0 auto; box-sizing: border-box; padding: 120px 72px }
.u-9 { margin: 16px 0 0; max-width: 900px; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 48px; line-height: 1.1; letter-spacing: -0.01em; color: var(--pg-color-marketing-text) }
.u-10 { margin: 20px 0 0; max-width: 720px; font-size: 18px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.u-11 { stroke: var(--pg-color-marketing-text) }
.u-12 { margin: 20px 0 0; max-width: 760px; font-size: 18px; line-height: 1.5; color: var(--pg-color-marketing-text-secondary) }
.u-13 { display: flex; align-items: center; gap: 14px }
.u-14 { display: flex; align-items: center; gap: 8px }
.u-15 { font-size: 13px; line-height: 16px; color: var(--site-5e5e66-on-a8a8b3) }
.u-16 { margin: 16px 0 0; font-family: var(--pg-font-family-display); font-weight: 400; font-size: 48px; line-height: 1.1; letter-spacing: -0.01em; color: var(--pg-color-marketing-text) }
.u-17 { display: flex; flex-direction: column; min-width: 0 }

/* Dark-only overrides where the dark artboard differs in more than color. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-1 { color-scheme: dark }
  :root:not([data-theme="light"]) .hero-18 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.45) }
  :root:not([data-theme="light"]) .hero-49 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.45) }
  :root:not([data-theme="light"]) .hero-52 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.45) }
  :root:not([data-theme="light"]) .hero-55 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.4) }
  :root:not([data-theme="light"]) .hero-127 { box-shadow: 0 0 0 1.5px #242427 }
  :root:not([data-theme="light"]) .hero-136 { box-shadow: 0 2px 6px rgba(0,0,0,0.4) }
  :root:not([data-theme="light"]) .hero-137 { color: #F5F5F7 }
  :root:not([data-theme="light"]) .studio-5 { box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 12px 28px rgba(0,0,0,0.45) }
  :root:not([data-theme="light"]) .studio-91 { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.40) }
  :root:not([data-theme="light"]) .studio-96 { box-sizing: border-box; border: 1px solid rgba(255,255,255,0.08) }
  :root:not([data-theme="light"]) .studio-97 { box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.16) }
  :root:not([data-theme="light"]) .studio-106 { box-shadow: 0 10px 24px rgba(0,0,0,0.45) }
  :root:not([data-theme="light"]) .studio-111 { box-shadow: 0 10px 24px rgba(0,0,0,0.45) }
  :root:not([data-theme="light"]) .studio-115 { box-shadow: 0 10px 24px rgba(0,0,0,0.45) }
  :root:not([data-theme="light"]) .studio-119 { box-shadow: 0 10px 24px rgba(0,0,0,0.45) }
  :root:not([data-theme="light"]) .ai-11 { border: 1px solid rgba(255,255,255,0.08) }
  :root:not([data-theme="light"]) .ai-12 { box-shadow: 0 12px 32px rgba(0,0,0,0.40); border: 1px solid rgba(255,255,255,0.08) }
  :root:not([data-theme="light"]) .ai-26 { box-shadow: 0 12px 32px rgba(0,0,0,0.40); border: 1px solid rgba(255,255,255,0.08) }
  :root:not([data-theme="light"]) .trust-1 { border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08) }
  :root:not([data-theme="light"]) .phone-8 { margin: 6px; box-shadow: 0 0 0 5px #1B1B1D, 0 0 0 6px rgba(255,255,255,0.14), 0 30px 60px rgba(0,0,0,0.55); color-scheme: dark }
  :root:not([data-theme="light"]) .phone-14 { border: 0.5px solid rgba(255,255,255,0.14) }
  :root:not([data-theme="light"]) .phone-35 { box-shadow: 0 0 0 1px rgba(255,255,255,0.36) }
  :root:not([data-theme="light"]) .phone-42 { border: 0.5px solid rgba(255,255,255,0.14) }
  :root:not([data-theme="light"]) .phone-53 { background: radial-gradient(70% 60% at 80% 10%, rgba(94,128,122,0.35) 0%, rgba(94,128,122,0) 100%), radial-gradient(60% 50% at 15% 90%, rgba(140,118,88,0.28) 0%, rgba(140,118,88,0) 100%), linear-gradient(160deg, #222C30 0%, #14191C 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) }
}
:root[data-theme="dark"] .page-1 { color-scheme: dark }
:root[data-theme="dark"] .hero-18 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.45) }
:root[data-theme="dark"] .hero-49 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.45) }
:root[data-theme="dark"] .hero-52 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 24px rgba(0,0,0,0.45) }
:root[data-theme="dark"] .hero-55 { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 8px rgba(0,0,0,0.4) }
:root[data-theme="dark"] .hero-127 { box-shadow: 0 0 0 1.5px #242427 }
:root[data-theme="dark"] .hero-136 { box-shadow: 0 2px 6px rgba(0,0,0,0.4) }
:root[data-theme="dark"] .hero-137 { color: #F5F5F7 }
:root[data-theme="dark"] .studio-5 { box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 12px 28px rgba(0,0,0,0.45) }
:root[data-theme="dark"] .studio-91 { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.40) }
:root[data-theme="dark"] .studio-96 { box-sizing: border-box; border: 1px solid rgba(255,255,255,0.08) }
:root[data-theme="dark"] .studio-97 { box-shadow: 0 10px 24px rgba(0,0,0,0.45), 0 0 0 0.5px rgba(255,255,255,0.16) }
:root[data-theme="dark"] .studio-106 { box-shadow: 0 10px 24px rgba(0,0,0,0.45) }
:root[data-theme="dark"] .studio-111 { box-shadow: 0 10px 24px rgba(0,0,0,0.45) }
:root[data-theme="dark"] .studio-115 { box-shadow: 0 10px 24px rgba(0,0,0,0.45) }
:root[data-theme="dark"] .studio-119 { box-shadow: 0 10px 24px rgba(0,0,0,0.45) }
:root[data-theme="dark"] .ai-11 { border: 1px solid rgba(255,255,255,0.08) }
:root[data-theme="dark"] .ai-12 { box-shadow: 0 12px 32px rgba(0,0,0,0.40); border: 1px solid rgba(255,255,255,0.08) }
:root[data-theme="dark"] .ai-26 { box-shadow: 0 12px 32px rgba(0,0,0,0.40); border: 1px solid rgba(255,255,255,0.08) }
:root[data-theme="dark"] .trust-1 { border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08) }
:root[data-theme="dark"] .phone-8 { margin: 6px; box-shadow: 0 0 0 5px #1B1B1D, 0 0 0 6px rgba(255,255,255,0.14), 0 30px 60px rgba(0,0,0,0.55); color-scheme: dark }
:root[data-theme="dark"] .phone-14 { border: 0.5px solid rgba(255,255,255,0.14) }
:root[data-theme="dark"] .phone-35 { box-shadow: 0 0 0 1px rgba(255,255,255,0.36) }
:root[data-theme="dark"] .phone-42 { border: 0.5px solid rgba(255,255,255,0.14) }
:root[data-theme="dark"] .phone-53 { background: radial-gradient(70% 60% at 80% 10%, rgba(94,128,122,0.35) 0%, rgba(94,128,122,0) 100%), radial-gradient(60% 50% at 15% 90%, rgba(140,118,88,0.28) 0%, rgba(140,118,88,0) 100%), linear-gradient(160deg, #222C30 0%, #14191C 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.06) }

/* ==========================================================================
   Motion — exactly as in the artboard (working arc, handoff), with
   prefers-reduced-motion fallbacks.
   ========================================================================== */
@keyframes pg-arc { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -83.84; } }
@keyframes pg-handoff { 0% { offset-distance: 0%; opacity: 0; } 8% { offset-distance: 0%; opacity: 1; } 40% { offset-distance: 100%; opacity: 1; } 80% { offset-distance: 100%; opacity: 1; } 92% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  [data-motion] { animation: none !important; }
  [data-motion="arc"] { stroke-dasharray: none !important; }
  [data-rm-show] { display: inline !important; }
}

/* ==========================================================================
   Responsive — breakpoints from the artboard (1100 / 880 / 640).
   ========================================================================== */
@media (max-width: 1100px) {
  .pg-pad { padding-left: 40px !important; padding-right: 40px !important; }
  .pg-nav-links { display: none !important; }
  .m-menu { display: block; }
}
@media (max-width: 880px) {
  .pg-mock { zoom: 0.72; }
}
@media (max-width: 640px) {
  .pg-pad { padding-left: 16px !important; padding-right: 16px !important; }
  .pg-sec { padding-top: 72px !important; padding-bottom: 72px !important; }
  .pg-h1 { font-size: 44px !important; }
  .pg-h2 { font-size: 36px !important; }
  .pg-big { font-size: 48px !important; }
  .pg-card { padding: 24px !important; }
  .pg-gap { gap: 40px !important; }
  .pg-mock { zoom: 0.44; }
  .m-menu-panel { left: 16px; right: 16px; }
}