/* Shared ad styles. Stage is 1080x1350 (4:5, LinkedIn's recommended feed ratio).
   Readability rules baked in here:
   - Headline captions 112-150px (8-11% of frame height), weight 800, tight leading.
   - Nothing meant to be READ is under 56px (4% of height); UI mock chrome may be smaller.
   - Solid backgrounds behind all text; contrast >= 7:1 (AAA) for captions.
   - Safe area: 90px sides, captions start >= 150px from top, nothing readable in the bottom 130px
     except the end card. */
.gs-stage {
  --ink: #0d1b2a;
  --navy: #0b1a33;
  --navy2: #13284d;
  --cream: #f7f2e8;
  --paper: #ffffff;
  --yellow: #ffd23f;
  --green: #16a34a;
  --red: #e5383b;
  --blue: #3b82f6;
  --sans: 'Inter', 'Inter Display', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
}

.gs-scaler { position: relative; overflow: hidden; border-radius: inherit; }
.gs-stage {
  position: absolute; left: 0; top: 0;
  width: 1080px; height: 1350px;
  transform-origin: 0 0;
  overflow: hidden;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
.gs-stage * { box-sizing: border-box; }
.gs-stage > * { position: absolute; }
.theme-dark  { background: var(--navy); color: #fff; }
.theme-light { background: var(--cream); color: var(--ink); }

/* ---------- Brand: the GapSense lockup, visible from frame 0 (logo in first 2s = +17% CTR, LinkedIn) ---------- */
.brand { left: 80px; top: 52px; z-index: 50; }
.hb { display: inline-flex; align-items: center; gap: 22px; }
.hb .sect { height: 86px; width: auto; flex: none; }
.hb .sect path { fill: currentColor; }
.hb-rule { width: 4px; height: 76px; background: currentColor; border-radius: 2px; }
.hb-txt { display: flex; flex-direction: column; line-height: 1; }
.hb-txt b { font-size: 50px; font-weight: 800; letter-spacing: -0.02em; }
.hb-txt small { margin-top: 9px; font-size: 20px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--yellow); }
.theme-light .brand { color: #1a365d; }
.theme-light .brand .hb-txt small { color: #1a365d; opacity: .75; }

/* ---------- Captions: the layer that must survive sound-off, small screens and a glance ---------- */
.cap {
  left: 90px; right: 90px; top: 190px;
  font-size: 118px; line-height: 1.1; font-weight: 800; letter-spacing: -0.035em;
  text-wrap: balance;
}
.cap.xl { font-size: 150px; letter-spacing: -0.045em; }
.cap.md { font-size: 96px; }
.cap.sm { font-size: 80px; letter-spacing: -0.025em; }
.cap.center { text-align: center; }
.cap .sub { display: block; margin-top: 34px; font-size: 64px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; opacity: .82; }
.cap mark, .gs-stage mark {
  color: inherit; padding: 0 .08em; margin: 0 -.04em; border-radius: .08em;
  background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 0 / 0% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.theme-dark .cap mark { color: var(--ink); }
.gs-stage .hl { color: var(--yellow); }
.theme-light .hl { color: #b45309; }

.caret { display: inline-block; width: .08em; height: 1em; background: currentColor; vertical-align: -0.12em; margin-left: .03em; }
.ghost { visibility: hidden; }

/* ---------- Document / UI mocks ---------- */
.doc {
  background: var(--paper); color: var(--ink); border-radius: 26px;
  box-shadow: 0 40px 90px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.04);
  padding: 56px 60px; overflow: hidden;
}
.doc h4 { font-family: var(--sans); font-size: 30px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #64748b; margin: 0 0 14px; }
.doc .title { font-family: var(--serif); font-size: 60px; font-weight: 700; line-height: 1.08; margin-bottom: 10px; letter-spacing: -0.01em; }
.doc .para { font-family: var(--serif); font-size: 46px; line-height: 1.4; }
.bar { height: 22px; border-radius: 11px; background: #e2e8f0; margin: 18px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 700; font-size: 34px;
  padding: 10px 22px; border-radius: 99px; background: #e0ecff; color: #1d4ed8; white-space: nowrap;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--sans); font-weight: 800; font-size: 44px; padding: 26px 46px; border-radius: 22px;
  background: var(--ink); color: #fff;
}
.cursor {
  width: 64px; height: 64px; z-index: 80; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 2l16 10-7 1.5L9.5 21z' fill='%23111' stroke='white' stroke-width='1.6' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

/* ---------- End card (2.5-3s: logo, one line, one CTA, URL) ---------- */
.endcard {
  inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--navy); color: #fff; padding: 0 90px;
}
.ec-logo .hb { gap: 40px; }
.ec-logo .sect { height: 210px; }
.ec-logo .hb-rule { width: 7px; height: 190px; }
.ec-logo .hb-txt b { font-size: 124px; letter-spacing: -0.035em; }
.ec-logo .hb-txt small { margin-top: 18px; font-size: 40px; }
.ec-line { margin-top: 70px; font-size: 76px; line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; }
.ec-cta { margin-top: 74px; font-size: 64px; font-weight: 800; padding: 30px 70px; border-radius: 30px; background: #fff; color: var(--ink); }
.ec-url { margin-top: 40px; font-size: 48px; font-weight: 600; opacity: .8; }
.endcard.light { background: var(--cream); color: var(--ink); }
.endcard.light .ec-cta { background: var(--ink); color: #fff; }

.footnote { left: 90px; right: 90px; bottom: 54px; font-size: 26px; line-height: 1.35; opacity: .7; font-weight: 500; }