/* Glossi launch system
   Studio is the source of truth. Supporting pages inherit its neutral
   canvas, Everett display type, 1200px rail, 5px geometry, hairlines,
   spacing registers, and single orange registration mark. */

@font-face {
  font-family: "Everett";
  src: url("/fonts/everett/Everett-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Unica77";
  src: url("/fonts/Unica77LL-Light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Unica77";
  src: url("/fonts/Unica77LL-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Unica77";
  src: url("/fonts/Unica77LL-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Unica77";
  src: url("/fonts/Unica77LL-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Everett";
  src: url("/fonts/everett/Everett-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Everett";
  src: url("/fonts/everett/Everett-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

:root {
  --hero-pad-top: 86px;
  --launch-canvas: #fdfdfd;
  --launch-surface: #f6f6f7;
  --launch-surface-strong: #eff0f1;
  --launch-ink-rgb: 24, 24, 27;
  --launch-ink: #18181b;
  --launch-copy: rgba(var(--launch-ink-rgb), .66);
  --launch-muted: rgba(var(--launch-ink-rgb), .48);
  --launch-line: rgba(var(--launch-ink-rgb), .09);
  --launch-line-strong: rgba(var(--launch-ink-rgb), .16);
  --launch-dark: #151618;
  --launch-orange: #ec5f3f;
  --launch-max: 1200px;
  --launch-nav-height: 60px;
  --launch-nav-rail: var(--launch-max);
  --launch-nav-gutter: 48px;
  --launch-nav-outer: calc(var(--launch-nav-rail) + (var(--launch-nav-gutter) * 2));
  --launch-nav-link-gap: 24px;
  --launch-nav-action-gap: 18px;
  /* Studio uses a fixed 48px desktop rail and moves to 20px only at its
     compact breakpoint. Keeping the shared pages on that exact register
     prevents the visible edge from drifting at tablet and laptop widths. */
  --launch-gutter: 48px;
  --launch-radius: 5px;
  --launch-section: clamp(88px, 9vw, 128px);
  --launch-section-compact: clamp(64px, 7vw, 96px);
  --launch-display: clamp(44px, 5vw, 64px);
  --launch-display-xl: clamp(56px, 5.4vw, 72px);
  --launch-display-lg: clamp(46px, 4.2vw, 56px);
  --launch-display-md: clamp(36px, 3.7vw, 48px);
  --launch-heading: clamp(30px, 3vw, 40px);
  --launch-body-large: clamp(16px, 1.35vw, 19px);
  --launch-frame: min(var(--launch-max), calc(100% - (2 * var(--launch-gutter))));
  --launch-copy-width: 36rem;
  --launch-divider: 1px solid var(--launch-line);
  --launch-display-leading: .98;
  --launch-ease: cubic-bezier(.22, 1, .36, 1);

  /* Existing page families resolve to the Studio contract. */
  --bg-primary: var(--launch-canvas);
  --bg-secondary: var(--launch-surface);
  --bg-tertiary: var(--launch-surface-strong);
  --paper: var(--launch-canvas);
  --surface: var(--launch-surface);
  --surface-2: var(--launch-surface-strong);
  --ink: var(--launch-ink);
  --text-primary: rgba(var(--launch-ink-rgb), .94);
  --text-secondary: var(--launch-copy);
  --text-tertiary: var(--launch-copy);
  --text-muted: var(--launch-muted);
  --muted: var(--launch-copy);
  --line: var(--launch-line);
  --line-strong: var(--launch-line-strong);
  --border-hairline: rgba(var(--launch-ink-rgb), .05);
  --border-subtle: var(--launch-line);
  --border-default: var(--launch-line-strong);
  --brand-canvas: var(--launch-canvas);
  --brand-canvas-soft: var(--launch-surface);
  --brand-panel: var(--launch-surface-strong);
  --brand-ink: var(--launch-ink);
  --brand-copy: var(--launch-copy);
  --brand-muted: var(--launch-muted);
  --brand-line: var(--launch-line);
  --brand-line-strong: var(--launch-line-strong);
  --brand-dark: var(--launch-dark);
  --brand-orange: var(--launch-orange);
  --brand-max: var(--launch-max);
  --brand-radius: var(--launch-radius);
  --brand-pad: var(--launch-gutter);
  --brand-section: var(--launch-section);
  --brand-section-compact: var(--launch-section-compact);
  --brand-display: var(--launch-display);
  --brand-heading: var(--launch-heading);
  --shell: var(--launch-max);
  --gutter: var(--launch-gutter);
  --accent: var(--launch-orange);
  --carbon: var(--launch-dark);
  --ease: var(--launch-ease);
  --radius-sm: var(--launch-radius);
  --radius-md: var(--launch-radius);
  --radius-lg: var(--launch-radius);
  --radius-xl: var(--launch-radius);
  --font-display: "Everett", "Unica77", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Unica77", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html { background: var(--launch-canvas); }
body {
  background: var(--launch-canvas);
  color: var(--launch-ink);
}

/* Shared page contract. Studio owns these values. Page families may change
   composition, but not the outer frame, gutters, type roles, or hairlines. */
:where(.launch-page, .brand-page) {
  font-family: var(--font-body);
}

:where(.page-wrap, .content-layout.cs-page, .pricing-rail, .demo-conversion) {
  width: var(--launch-frame) !important;
  max-width: var(--launch-max) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

:where(.page-wrap, .content-layout.cs-page) {
  padding-inline: 0 !important;
}

:is(
  .studio-hero h1,
  .section-title,
  .page-title,
  .content-title,
  .pp-hero h1,
  .pp-definition h2,
  .pp-section h2,
  .pp-detail h2,
  .pp-outcomes h2,
  .pp-faq h2,
  .pp-commit h2,
  .cust-page h1,
  .cust-page h2,
  .int-page h1,
  .int-page h2,
  .ent-hero-title,
  .ent-section h2
) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.025em;
  text-wrap: balance;
}

:is(.section-label, .content-eyebrow, .pp-eyebrow) {
  color: var(--launch-copy);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}

:where(.pp-shell:not(.pp-nav-inner), .ent-wrap) {
  width: var(--launch-frame) !important;
  max-width: var(--launch-max) !important;
  margin-inline: auto !important;
  box-sizing: border-box;
}

/* Product pages previously drew the 1200px shell on Studio's rail and then
   inset the actual content by another 48px. The shell itself now owns the
   viewport gutter, exactly like Studio: 120px at 1440, 48px at 1280, and
   20px on mobile. Navigation keeps its separate 24px internal alignment. */
.pp-shell:not(.pp-nav-inner) {
  padding-inline: 0 !important;
}

:is(
  .btn,
  .pp-button,
  .pp-nav-cta,
  .card,
  .ent-card,
  .pp-proof,
  .pp-proof-panel,
  .pp-float,
  .pp-truth-item,
  .cust-card,
  .story-card,
  .template-card
) { border-radius: var(--launch-radius); }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--launch-orange);
  outline-offset: 3px;
}

::selection {
  background: rgba(236, 95, 63, .18);
  color: var(--launch-ink);
}

.launch-proof-strip {
  border-bottom: 1px solid var(--launch-line);
  background: var(--launch-canvas);
}
.launch-proof-strip-inner {
  width: min(var(--launch-max), calc(100% - (2 * var(--launch-gutter))));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-inline: 1px solid var(--launch-line);
}
.launch-proof-strip-inner.is-single { grid-template-columns: minmax(0, 1fr); }
.launch-proof-strip-inner.is-single .launch-proof-outcome strong { max-width: 28ch; }
.launch-proof-outcome {
  min-height: 126px;
  padding: 24px;
  color: var(--launch-ink);
  text-decoration: none;
}
.launch-proof-outcome + .launch-proof-outcome { border-left: 1px solid var(--launch-line); }
.launch-proof-outcome span {
  display: block;
  margin-bottom: 22px;
  color: var(--launch-muted);
  font-size: 12px;
}
.launch-proof-outcome strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.launch-proof-outcome:hover strong { color: var(--launch-orange); }

/* ---------------------------------------------------------------------
   Cross-page consistency pass
   The shared layer owns visual roles. Page families still own composition.
   --------------------------------------------------------------------- */

:is(
  .pp-hero h1,
  .pp-type-industry .pp-hero h1,
  .pp-library-hero h1,
  .pp-pipeline-page .pp-pipeline-hero h1,
  .pp-ai-page .ai-hero-copy h1,
  .cust-page .cust-hero h1,
  .ent-hero-title
) {
  max-width: 15ch;
  font-size: var(--launch-display-lg);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.035em;
  text-wrap: balance;
}

:is(
  .pp-section h2,
  .pp-detail h2,
  .pp-outcomes h2,
  .pp-commit h2,
  .ai-centered-head h2,
  .int-section h2,
  .ent-section h2
) {
  font-weight: 400;
  letter-spacing: -.028em;
  text-wrap: balance;
}

:is(
  .pp-proof,
  .pp-detail-visual,
  .pp-truth-grid,
  .pp-output,
  .ai-system-proof,
  .ai-source-proof,
  .ai-direction-proof,
  .ai-agent-proof,
  .int-model-review
) {
  border-radius: var(--launch-radius);
}

/* Enterprise is a page archetype, not a separate brand system. */
.ent-hero .section-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--launch-copy);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.ent-hero .section-label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: var(--launch-orange);
}
.ent-hero .btn-primary {
  border-color: var(--launch-dark);
  background: var(--launch-dark);
  color: #fff;
}
.ent-hero .btn-primary:hover { background: #2a2a2e; border-color: #2a2a2e; }

/* The wide Studio proof used a fixed 620px minimum that forced its aspect
   ratio outside the 1200px rail on laptop-width desktop viewports. */
.pp-studio-page .pp-studio-proof {
  width: 100%;
  min-height: clamp(540px, 48vw, 620px);
}

@media (max-width: 720px) {
  :root {
    --launch-gutter: 20px;
    --launch-section: 72px;
    --launch-section-compact: 56px;
    --launch-display: clamp(40px, 11vw, 48px);
    --launch-heading: clamp(30px, 8vw, 38px);
  }
  html { scroll-padding-top: var(--launch-nav-height, 60px); }

  /* The global drawer replaces the sticky in-page index on phones. */
  .pp-subnav { display: none !important; }

  :is(
    .pp-hero h1,
    .pp-type-industry .pp-hero h1,
    .pp-library-hero h1,
    .pp-pipeline-page .pp-pipeline-hero h1,
    .pp-ai-page .ai-hero-copy h1,
    .cust-page .cust-hero h1,
    .ent-hero-title
  ) {
    max-width: none;
    font-size: clamp(40px, 11vw, 44px);
    line-height: 1.02;
  }

  .pp-hero { padding-block: 56px 64px; }
  .pp-definition { padding-block: 56px; }
  :is(.pp-section, .pp-detail, .pp-faq, .pp-related) { padding-block: 72px; }
  :is(.pp-outcomes, .pp-commit) { padding-block: 64px; }
  .pp-section-head { margin-bottom: 32px; }
  :is(.pp-section h2, .pp-detail h2, .pp-outcomes h2, .pp-commit h2) {
    font-size: clamp(32px, 9vw, 38px);
    line-height: 1.06;
  }

  /* Product proof should read as one scene, not a miniature desktop app. */
  .pp-proof {
    width: calc(100% + var(--launch-gutter));
    border-radius: var(--launch-radius) 0 0 var(--launch-radius);
  }
  .pp-proof-media { aspect-ratio: 5 / 4; }
  .pp-proof-foot { display: none; }
  .pp-proof-panel {
    right: -28px;
    width: 62%;
  }
  :is(.pp-studio-bar, .pp-studio-captures, .tool-breadcrumb, .tool-proof-foot) {
    display: none !important;
  }
  .pp-studio-page .pp-studio-proof {
    width: calc(100% + var(--launch-gutter));
    min-height: 430px;
  }
  .pp-studio-page .pp-studio-stage {
    inset: 0;
    padding: 8px;
  }
  .pp-studio-page .pp-studio-controls { right: -32px; }
  :is(
    .pp-trigger-list > header,
    .pp-trigger-list > footer,
    .pp-run-ledger-shell > header,
    .pp-run-ledger-shell > footer,
    .pp-delivery-window > header,
    .pp-creative-system-proof > header,
    .pp-creative-system-foot
  ) { display: none; }
  body.brand-resources .resources-utility { display: none; }

  .pp-faq-grid { gap: 24px; }
  .pp-faq-heading h2 { font-size: 32px; line-height: 1.06; }
  .pp-faq-heading p { max-width: 30ch; font-size: 16px; line-height: 1.5; }
  .pp-faq summary { min-height: 56px; align-items: center; padding-block: 16px; }

  :is(.pp-output-strip, .pp-related-grid, .ai-use-grid) {
    gap: 12px;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
  }
  :is(.pp-output, .pp-related-grid > a, .ai-use-grid > a) {
    min-width: 86%;
    scroll-snap-align: start;
  }

  .pricing-hero {
    padding-top: 48px !important;
    text-align: left !important;
  }
  .pricing-hero :is(.pricing-hero-inner, h1, p) {
    margin-inline: 0 !important;
    text-align: left !important;
  }

  .launch-proof-strip-inner {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .launch-proof-strip-inner::-webkit-scrollbar { display: none; }
  .launch-proof-outcome {
    min-width: 82%;
    min-height: 118px;
    padding: 22px 20px;
    scroll-snap-align: start;
  }
  .launch-proof-outcome strong { font-size: 23px; }
}

@media (max-width: 430px) {
  .ent-metrics { flex-direction: column; }
  .ent-metric { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* The hero proof compositions are spatial arrangements, not cards. Their
   individual image and control planes keep the shared 5px surface radius. */
.pp-proof.feature-showcase,
.pp-proof.material-system-illustration {
  border-radius: 0;
}