/* Noto Sans, self-hosted from the theme's existing font files. The origin's
   Content-Security-Policy does not permit fonts.gstatic.com, so the Google
   Fonts version of these faces would be blocked in the browser. */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../../src/fonts/notosans-300.woff2) format('woff2'),
         url(../../src/fonts/notosans-300.woff) format('woff');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../../src/fonts/notosans-400.woff2) format('woff2'),
         url(../../src/fonts/notosans-400.woff) format('woff');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../../src/fonts/notosans-500.woff2) format('woff2'),
         url(../../src/fonts/notosans-500.woff) format('woff');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../../src/fonts/notosans-700.woff2) format('woff2'),
         url(../../src/fonts/notosans-700.woff) format('woff');
}
@font-face {
    font-family: 'Noto Sans';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url(../../src/fonts/notosans-500-italic.woff2) format('woff2'),
         url(../../src/fonts/notosans-500-italic.woff) format('woff');
}
:root {
    --c5-black: #121212;
    --c5-white: #FFFFFF;
    --c5-brand-blue: #040FDA;
    --c5-teal: #00E2E0;
    --c5-light-blue: #377EF7;
    --c5-dark-blue: #172D9D;
    --c5-purple: #590FE5;
    --c5-light-purple: #787DFF;
    --c5-e1d1ff: #E1D1FF;

    /* tint of Light Blue, for the demo's user bubbles: a derived surface, not a
       new hue, and it keeps the bubble copy pure black per the text-colour rule */
    --c5-blue-tint: #DEE7FD;

    --c5-border: #E6E6E6;
    --c5-border-strong: #121212;

    /* The site header is position:fixed at every width, so the hero has to
       reserve room for it. Measured against .main-navigation's 1.2rem vertical
       padding plus the logo, with margin for the pill it grows once scrolled. */
    --c5-header-clear: 88px;

    --c5-space-1: 4px;
    --c5-space-2: 8px;
    --c5-space-3: 12px;
    --c5-space-4: 16px;
    --c5-space-5: 24px;
    --c5-space-6: 32px;
    --c5-space-7: 48px;
    --c5-space-8: 64px;
    --c5-space-9: 96px;
    --c5-space-10: 128px;

    --c5-radius-md: 12px;
    --c5-radius-lg: 16px;
    --c5-radius-full: 999px;

    --c5-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

    --font: 'Noto Sans', 'Lato', Arial, sans-serif;
  }
.chatgpt-ads * { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.chatgpt-ads {
    margin: 0;
    font-family: var(--font);
    font-weight: 400;
    color: var(--c5-black);
    background: var(--c5-white);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
  }
.chatgpt-ads ::selection {
    background: var(--c5-brand-blue);
    color: var(--c5-white);
  }
.chatgpt-ads :focus-visible {
    outline: 2px solid var(--c5-brand-blue);
    outline-offset: 3px;
    border-radius: 4px;
  }
.chatgpt-ads section[data-theme="dark"] ::selection {
    background: var(--c5-teal);
    color: var(--c5-black);
  }
.chatgpt-ads section[data-theme="dark"] :focus-visible {
    outline-color: var(--c5-teal);
  }
.chatgpt-ads img { max-width: 100%; display: block; }
.chatgpt-ads h1, .chatgpt-ads h2, .chatgpt-ads h3 {
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
.chatgpt-ads p { margin: 0; }
.chatgpt-ads a { color: inherit; }
.chatgpt-ads .wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding-left: var(--c5-space-6);
    padding-right: var(--c5-space-6);
  }
.chatgpt-ads .measure {
    max-width: 62ch;
  }
/* ---------- noise texture (authentic brand "add noise" guidance) ---------- */
.chatgpt-ads .noise {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
/* ---------- nav ---------- */
.chatgpt-ads .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--c5-space-5) var(--c5-space-6);
    transition: background-color 360ms var(--c5-ease-standard), border-color 360ms var(--c5-ease-standard);
    border-bottom: 1px solid transparent;
  }
.chatgpt-ads .nav.is-scrolled {
    background: rgba(18, 18, 18, 0.72);
    backdrop-filter: blur(12px);
    border-bottom-color: rgba(255,255,255,0.08);
  }
.chatgpt-ads .nav__logo { height: 22px; width: auto; }
.chatgpt-ads .nav__cta {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--c5-white);
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: var(--c5-radius-full);
    padding: 10px 20px;
    transition: opacity 200ms var(--c5-ease-standard), border-color 200ms var(--c5-ease-standard);
  }
.chatgpt-ads .nav__cta:hover { opacity: 0.72; }
/* ---------- buttons ---------- */
.chatgpt-ads .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--c5-space-2);
    font-family: var(--font);
    font-size: 1.7rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--c5-radius-full);
    padding: 16px 32px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 200ms var(--c5-ease-standard), transform 120ms var(--c5-ease-standard), background-color 200ms var(--c5-ease-standard);
  }
.chatgpt-ads .btn:hover { opacity: 0.72; }
.chatgpt-ads .btn:active { transform: scale(0.98); opacity: 0.6; }
.chatgpt-ads .btn--primary-dark {
    background: var(--c5-white);
    color: var(--c5-black);
  }
.chatgpt-ads .btn--primary-light {
    background: var(--c5-black);
    color: var(--c5-white);
  }
.chatgpt-ads .btn--ghost-dark {
    background: transparent;
    color: var(--c5-white);
    border-color: rgba(255,255,255,0.36);
  }
.chatgpt-ads .btn--ghost-dark:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.chatgpt-ads .link-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 200ms var(--c5-ease-standard);
  }
.chatgpt-ads .link-underline:hover { opacity: 0.72; }
/* ---------- reveal on scroll ---------- */
.chatgpt-ads .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms var(--c5-ease-standard), transform 700ms var(--c5-ease-standard);
  }
.chatgpt-ads .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
@media (prefers-reduced-motion: reduce) {.chatgpt-ads .reveal { opacity: 1; transform: none; transition: none; }
html { scroll-behavior: auto; }
  }
/* =====================================================================
     HERO
     ===================================================================== */
.chatgpt-ads .hero {
    position: relative;
    min-height: 72svh;
    background: var(--c5-black);
    color: var(--c5-white);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
.chatgpt-ads .hero__field {
    position: absolute;
    inset: -10%;
    background:
      radial-gradient(52% 60% at 78% 18%, rgba(4,15,218,0.85) 0%, rgba(4,15,218,0) 62%),
      radial-gradient(46% 55% at 90% 46%, rgba(89,15,229,0.75) 0%, rgba(89,15,229,0) 65%),
      radial-gradient(38% 46% at 62% 8%, rgba(0,226,224,0.35) 0%, rgba(0,226,224,0) 70%),
      radial-gradient(60% 70% at 30% 100%, rgba(23,45,157,0.6) 0%, rgba(23,45,157,0) 68%);
    filter: saturate(1.05);
  }
.chatgpt-ads .hero__grain {
    position: absolute;
    inset: 0;
    opacity: 0.06;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
.chatgpt-ads .hero__inner {
    position: relative;
    z-index: 2;
    padding-top: max(var(--c5-space-8), var(--c5-header-clear));
    padding-bottom: var(--c5-space-9);
    display: grid;
    /* the demo column is exactly as wide as the phone card, so shrinking the
       card gives its width back to the headline rather than to empty gutter */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "intro demo"
      "actions demo";
    column-gap: var(--c5-space-8);
    row-gap: var(--c5-space-7);
    align-items: center;
  }
.chatgpt-ads .hero__intro {
    grid-area: intro;
    max-width: 680px;
  }
@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,226,224,0.55); }
    50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(0,226,224,0); }
  }
@media (prefers-reduced-motion: reduce) {  }
.chatgpt-ads .hero h1 {
    font-size: clamp(4rem, 4.6vw, 5.6rem);
    line-height: 1.1;
    max-width: 26ch;
  }
.chatgpt-ads .hero__sub {
    margin-top: var(--c5-space-5);
    max-width: 54ch;
    font-size: 2rem;
    color: var(--c5-white);
    line-height: 1.55;
  }
.chatgpt-ads .hero__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--c5-space-5);
  }
.chatgpt-ads .hero__client-link {
    font-size: 1.7rem;
    color: rgba(255,255,255,0.78);
  }
/* =====================================================================
     SPOTLIGHT DEMO (ad-in-conversation mockup)
     ===================================================================== */
.chatgpt-ads .demo {
    grid-area: demo;
    justify-self: end;
  }
/* The card is a phone window: a fixed 9:19 viewport, height-capped so it never
     outgrows the first screen, with the transcript scrolling inside it. Both
     dimensions derive from whichever constraint binds first, so the ratio holds. */
.chatgpt-ads .demo-card {
    position: relative;
    /* height-bound on a short screen, width-bound on a tall one, and never so
       narrow that the transcript stops being readable */
    width: max(250px, min(292px, calc(66svh * 9 / 19)));
    aspect-ratio: 9 / 19;
    margin-left: auto;
    /* translucent so the nebula field reads through the window: before the first
       bubble arrives it is a pane of glass, not a white block */
    background: rgba(255,255,255,0.74);
    backdrop-filter: blur(14px) saturate(1.1);
    -webkit-backdrop-filter: blur(14px) saturate(1.1);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 28px;
    box-shadow: 0 28px 56px rgba(0,0,0,0.42);
  }
.chatgpt-ads .demo-viewport {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    /* messages dissolve at the window edges instead of hard-clipping mid-glyph */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 22px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 22px), transparent 100%);
  }
/* Bottom-anchored, so translateY(--demo-scroll) shows the top of the
     transcript and translateY(0) shows its end. --demo-scroll is the measured
     overflow, set from script so the travel stays exact at every card width. */
.chatgpt-ads .demo-thread {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    /* generous message spacing: it gives the transcript enough height over the
       window for the scroll travel to actually read as scrolling */
    gap: 22px;
    transform: translateY(var(--demo-scroll, 0px));
    animation: demo-scroll 7.5s ease-in-out infinite;
  }
/* Total loop is 7.5s: 6.5s of conversation (every percentage below is the
     same timeline as before, just rescaled by 6.5/7.5) plus a full extra
     second of blank hold at the end before the next loop starts, per the
     user's ask for more breathing room before the restart. */
@keyframes demo-scroll {
    0%, 14.73% { transform: translateY(var(--demo-scroll, 0px)); }
    28.6% { transform: translateY(calc(var(--demo-scroll, 0px) * 0.62)); }
    39.87% { transform: translateY(calc(var(--demo-scroll, 0px) * 0.3)); }
    53.73%, 84.07% { transform: translateY(0); }
    86.67%, 100% { transform: translateY(var(--demo-scroll, 0px)); }
  }
/* Looping conversation reveal: bubbles/answers/ad appear in sequence, the ad
     holds the longest, then the whole conversation fades together, holds
     blank for a beat, and the 7.5s cycle repeats. Percentages are shared
     timeline positions, not delays, so every step stays in lockstep. */
.chatgpt-ads .demo-step-1, .chatgpt-ads .demo-step-2, .chatgpt-ads .demo-step-3, .chatgpt-ads .demo-step-4 {
    opacity: 0;
    transform: translateY(10px);
  }
@keyframes demo-step-1 {
    0%, 1.3% { opacity: 0; transform: translateY(10px); }
    3.9%, 81.47% { opacity: 1; transform: translateY(0); }
    84.07%, 100% { opacity: 0; transform: translateY(6px); }
  }
@keyframes demo-step-2 {
    0%, 11.27% { opacity: 0; transform: translateY(10px); }
    14.73%, 81.47% { opacity: 1; transform: translateY(0); }
    84.07%, 100% { opacity: 0; transform: translateY(6px); }
  }
@keyframes demo-step-3 {
    0%, 25.13% { opacity: 0; transform: translateY(10px); }
    28.17%, 81.47% { opacity: 1; transform: translateY(0); }
    84.07%, 100% { opacity: 0; transform: translateY(6px); }
  }
@keyframes demo-step-4 {
    0%, 35.53% { opacity: 0; transform: translateY(10px); }
    39%, 81.47% { opacity: 1; transform: translateY(0); }
    84.07%, 100% { opacity: 0; transform: translateY(6px); }
  }
/* The ad is the only step that zooms as it lands, and the only one that
     lifts off the transcript: it arrives from behind the glass with a
     deliberate overshoot (0.82 -> 1.06 -> 1, a small pop rather than a
     settle), then pulses twice at full size before the fade-out. Every stop
     keeps a real offset and blur (never 0 0 Npx), so it reads as elevation
     lifting and dropping, not a decorative halo. The teal pulse peaks were
     boosted (wider blur, higher alpha) per the user's "bolder/more visible" ask. */
@keyframes demo-step-5 {
    0%, 49.4% {
      opacity: 0;
      transform: translateY(10px) scale(0.82);
      box-shadow: 0 2px 6px rgba(18,18,18,0);
    }
    52% {
      opacity: 1;
      transform: translateY(0) scale(1.06);
      box-shadow: 0 14px 44px rgba(0,226,224,0.62);
    }
    54.6% {
      transform: translateY(0) scale(0.99);
      box-shadow: 0 8px 20px rgba(18,18,18,0.16);
    }
    59.8% {
      transform: translateY(0) scale(1);
      box-shadow: 0 14px 40px rgba(0,226,224,0.6);
    }
    65% { box-shadow: 0 8px 20px rgba(18,18,18,0.16); }
    70.2% { box-shadow: 0 14px 40px rgba(0,226,224,0.6); }
    75.4% { box-shadow: 0 8px 20px rgba(18,18,18,0.16); }
    81.47% {
      opacity: 1;
      transform: translateY(0) scale(1);
      box-shadow: 0 8px 22px rgba(18,18,18,0.18);
    }
    84.07%, 100% {
      opacity: 0;
      transform: translateY(6px) scale(0.97);
      box-shadow: 0 4px 10px rgba(18,18,18,0.06);
    }
  }
.chatgpt-ads .demo-step-1 { animation: demo-step-1 7.5s ease-in-out infinite; }
.chatgpt-ads .demo-step-2 { animation: demo-step-2 7.5s ease-in-out infinite; }
.chatgpt-ads .demo-step-3 { animation: demo-step-3 7.5s ease-in-out infinite; }
.chatgpt-ads .demo-step-4 { animation: demo-step-4 7.5s ease-in-out infinite; }
.chatgpt-ads .demo-bubble-row {
    display: flex;
    justify-content: flex-end;
  }
.chatgpt-ads .demo-bubble {
    background: var(--c5-blue-tint);
    color: var(--c5-black);
    border-radius: var(--c5-radius-md);
    padding: 10px 13px;
    max-width: 84%;
    font-size: 1.3rem;
    line-height: 1.5;
  }
.chatgpt-ads .demo-answer-row {
    display: flex;
    justify-content: flex-start;
    max-width: 94%;
  }
.chatgpt-ads .demo-answer {
    font-size: 1.3rem;
    line-height: 1.55;
    color: var(--c5-black);
  }
.chatgpt-ads .demo-ad {
    display: flex;
    gap: var(--c5-space-3);
    padding: var(--c5-space-3);
    /* the only fully opaque surface in the window, so the eye lands on it */
    background: var(--c5-white);
    border: 1px solid var(--c5-border);
    border-radius: var(--c5-radius-md);
    opacity: 0;
    transform: translateY(10px) scale(0.82);
    animation: demo-step-5 7.5s ease-in-out infinite;
  }
/* Reduced motion: the window releases its fixed ratio so the whole
     conversation can be read at once, with nothing clipped and nothing moving. */
@media (prefers-reduced-motion: reduce) {.chatgpt-ads .demo-card {
      width: 100%;
      max-width: 340px;
      aspect-ratio: auto;
    }
.chatgpt-ads .demo-viewport {
      position: static;
      inset: auto;
      overflow: visible;
      -webkit-mask-image: none;
      mask-image: none;
    }
.chatgpt-ads .demo-thread {
      position: static;
      transform: none;
      animation: none;
    }
.chatgpt-ads .demo-step-1, .chatgpt-ads .demo-step-2, .chatgpt-ads .demo-step-3, .chatgpt-ads .demo-step-4 {
      animation: none;
      opacity: 1;
      transform: none;
    }
.chatgpt-ads .demo-ad {
      animation: none;
      opacity: 1;
      transform: none;
      box-shadow: 0 8px 22px rgba(18,18,18,0.18);
    }
  }
.chatgpt-ads .demo-ad__thumb {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    border: 1px solid var(--c5-border);
    background: var(--c5-white);
    display: flex;
    align-items: center;
    justify-content: center;
  }
.chatgpt-ads .demo-ad__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
.chatgpt-ads .demo-ad__badge {
    display: inline-block;
    align-self: flex-start;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--c5-black);
    border: 1px solid var(--c5-border-strong);
    border-radius: 4px;
    padding: 1px 7px;
  }
.chatgpt-ads .demo-ad__title {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--c5-black);
  }
.chatgpt-ads .demo-ad__desc {
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--c5-black);
  }
.chatgpt-ads .demo-ad__cta {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--c5-black);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
/* =====================================================================
     TRUST SECTION
     ===================================================================== */
.chatgpt-ads .trust {
    background: var(--c5-white);
    padding: var(--c5-space-10) 0;
  }
/* claim and lead-in sit side by side; the logo band spans both columns below
     them, because seven real marks need the full measure to stay on one line */
.chatgpt-ads .trust__grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    column-gap: var(--c5-space-9);
    row-gap: var(--c5-space-9);
    align-items: start;
  }
.chatgpt-ads .trust__band {
    grid-column: 1 / -1;
  }
.chatgpt-ads .trust h2 {
    font-size: clamp(3.2rem, 3.8vw, 4.8rem);
    line-height: 1.16;
  }
/* ---------- client proof (embedded in trust section) ---------- */
.chatgpt-ads .proof__label {
    font-size: 1.8rem;
    color: var(--c5-black);
    max-width: 60ch;
  }
/* Spanish runs this block to two paragraphs where the other languages use one.
   .chatgpt-ads p is margin:0, so the second needs its own spacing. */
.chatgpt-ads .proof__label + .proof__label { margin-top: var(--c5-space-4); }
.chatgpt-ads .proof__row {
    display: grid;
    /* Eight tracks so the seven marks fall as a centred 4 + 3. Each mark spans
       two tracks, and the fifth starts one track in, which centres the second
       row of three against the first row of four. */
    /* six marks, laid out as an even 3 + 3. The row is held to roughly the
       width the marks need, otherwise each floats in a far wider cell and the
       band reads as mostly empty space. */
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    max-width: 760px;
    margin-inline: auto;
    row-gap: var(--c5-space-6);
    column-gap: var(--c5-space-4);
  }
/* Client marks ship in their own brand colours, from a set the user
     supplied already resized and optically balanced against each other
     (all on a shared 144.76x52.56 canvas), so every logo shares one height
     here rather than the per-logo tuning an unbalanced set would need. */
.chatgpt-ads .proof__logo {
    height: 78px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
/* Below the width that holds all seven on one line, the band becomes an
     explicit grid so it wraps deliberately (4 + 3) instead of raggedly. */
@media (max-width: 1040px) {
.chatgpt-ads .proof__row { max-width: 100%; column-gap: var(--c5-space-2); row-gap: var(--c5-space-5); }
.chatgpt-ads .proof__logo { height: 64px; }
  }
@media (max-width: 560px) {
.chatgpt-ads .proof__row { column-gap: var(--c5-space-3); row-gap: var(--c5-space-5); }
.chatgpt-ads .proof__logo { height: 44px; }
  }
/* =====================================================================
     TRANSPARENCY (dark)
     ===================================================================== */
.chatgpt-ads .transparency {
    position: relative;
    background: var(--c5-black);
    color: var(--c5-white);
    padding: var(--c5-space-10) 0;
    overflow: hidden;
  }
.chatgpt-ads .transparency__field {
    position: absolute;
    inset: -20%;
    background:
      radial-gradient(45% 60% at 12% 30%, rgba(89,15,229,0.55) 0%, rgba(89,15,229,0) 65%),
      radial-gradient(50% 60% at 85% 78%, rgba(225,209,255,0.28) 0%, rgba(225,209,255,0) 70%);
  }
.chatgpt-ads .transparency__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--c5-space-9);
    align-items: center;
  }
.chatgpt-ads .transparency h2 {
    font-size: clamp(3.2rem, 3.8vw, 4.8rem);
    line-height: 1.16;
    max-width: 14ch;
  }
.chatgpt-ads .transparency__body {
    font-size: 1.8rem;
    color: var(--c5-white);
    line-height: 1.6;
  }
.chatgpt-ads .transparency__points {
    margin-top: var(--c5-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--c5-space-4);
  }
.chatgpt-ads .transparency__point {
    display: flex;
    gap: var(--c5-space-3);
    align-items: flex-start;
    font-size: 1.7rem;
    color: var(--c5-white);
  }
.chatgpt-ads .transparency__point svg { flex-shrink: 0; margin-top: 3px; }
/* =====================================================================
     TECH / MECHANISM
     ===================================================================== */
.chatgpt-ads .tech {
    background: var(--c5-white);
    padding: var(--c5-space-10) 0;
  }
/* Same two-column shape as .transparency__inner: a short title on the
     left, its supporting paragraph on the right, no visual accessory. */
.chatgpt-ads .tech__grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--c5-space-9);
    align-items: center;
  }
.chatgpt-ads .tech h2 {
    font-size: clamp(3.2rem, 3.8vw, 4.8rem);
    line-height: 1.16;
    max-width: 17ch;
  }
.chatgpt-ads .tech__body {
    max-width: 60ch;
    font-size: 1.8rem;
    color: var(--c5-black);
    line-height: 1.6;
  }
@media (max-width: 860px) {.chatgpt-ads .tech__grid { grid-template-columns: 1fr; }
  }
/* =====================================================================
     FINAL CTA + FORM (dark bookend)
     ===================================================================== */
.chatgpt-ads .cta {
    position: relative;
    background: var(--c5-black);
    color: var(--c5-white);
    padding: var(--c5-space-10) 0 var(--c5-space-9);
    overflow: hidden;
  }
.chatgpt-ads .cta__field {
    position: absolute;
    inset: -15%;
    background:
      radial-gradient(55% 65% at 22% 20%, rgba(4,15,218,0.8) 0%, rgba(4,15,218,0) 62%),
      radial-gradient(48% 60% at 92% 30%, rgba(0,226,224,0.3) 0%, rgba(0,226,224,0) 65%),
      radial-gradient(55% 70% at 55% 100%, rgba(89,15,229,0.55) 0%, rgba(89,15,229,0) 70%);
  }
.chatgpt-ads .cta__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--c5-space-9);
    align-items: start;
  }
.chatgpt-ads .cta h2 {
    font-size: clamp(3.4rem, 4.2vw, 5.2rem);
    line-height: 1.18;
    max-width: 20ch;
  }
/* Emphasis without a fill: real Noto Sans italic (the font link carries the
     ital axis) rather than a browser-sheared fake oblique. Weight stays 500,
     matching every other heading, per the brand's never-bold rule. */
.chatgpt-ads .emph {
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.005em;
    padding-right: 0.05em;
  }
.chatgpt-ads .cta__body {
    margin-top: var(--c5-space-5);
    font-size: 1.8rem;
    color: var(--c5-white);
    max-width: 40ch;
    line-height: 1.6;
  }
.chatgpt-ads form.card {
    background: rgba(255,255,255,0.06);
    border-radius: var(--c5-radius-lg);
    padding: var(--c5-space-7);
    backdrop-filter: blur(6px);
  }
.chatgpt-ads .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--c5-space-4);
  }
.chatgpt-ads .field {
    display: flex;
    flex-direction: column;
    gap: var(--c5-space-2);
    margin-bottom: var(--c5-space-5);
  }
.chatgpt-ads .field label {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--c5-white);
  }
.chatgpt-ads .field input, .chatgpt-ads .field textarea {
    font-family: var(--font);
    font-size: 1.6rem;
    color: var(--c5-white);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--c5-radius-md);
    padding: 13px 16px;
    transition: border-color 200ms var(--c5-ease-standard), background-color 200ms var(--c5-ease-standard);
  }
.chatgpt-ads .field input::placeholder, .chatgpt-ads .field textarea::placeholder { color: rgba(255,255,255,0.36); }
.chatgpt-ads .field input:hover, .chatgpt-ads .field textarea:hover { border-color: rgba(255,255,255,0.36); }
.chatgpt-ads .field input:focus, .chatgpt-ads .field textarea:focus {
    outline: none;
    border-color: var(--c5-teal);
    background: rgba(255,255,255,0.07);
  }
.chatgpt-ads .field textarea { resize: vertical; min-height: 96px; }
.chatgpt-ads .consent {
    display: flex;
    align-items: flex-start;
    gap: var(--c5-space-3);
    margin-bottom: var(--c5-space-6);
  }
.chatgpt-ads .consent input {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    accent-color: var(--c5-teal);
    flex-shrink: 0;
  }
.chatgpt-ads .consent label {
    font-size: 1.5rem;
    color: var(--c5-white);
    line-height: 1.5;
  }
.chatgpt-ads .form-submit {
    width: 100%;
    justify-content: center;
  }
.chatgpt-ads .form-success {
    display: none;
    text-align: center;
    padding: var(--c5-space-7) var(--c5-space-4);
  }
.chatgpt-ads .form-success h3 {
    font-size: 2.4rem;
  }
.chatgpt-ads .form-success p {
    margin-top: var(--c5-space-3);
    color: var(--c5-white);
    font-size: 1.7rem;
  }
.chatgpt-ads .form-card.is-submitted .hs-form-host { display: none; }
.chatgpt-ads .form-card.is-submitted .form-success { display: block; }

/* ---------------------------------------------------------------------------
   HubSpot renders its own markup, so the card styling above is mapped onto its
   class names here. Keeping the two blocks adjacent makes it obvious that a
   change to one needs the same change to the other.
   --------------------------------------------------------------------------- */
.chatgpt-ads .form-card {
    background: rgba(255,255,255,0.06);
    border-radius: var(--c5-radius-lg);
    padding: var(--c5-space-7);
    backdrop-filter: blur(6px);
}
.chatgpt-ads .hs-form-host { min-height: 120px; }
.chatgpt-ads .hs-form fieldset { max-width: none; margin: 0; }
.chatgpt-ads .hs-form fieldset.form-columns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--c5-space-4); }
.chatgpt-ads .hs-form fieldset .input { margin: 0 !important; }
.chatgpt-ads .hs-form .hs-form-field { margin-bottom: var(--c5-space-5); }
.chatgpt-ads .hs-form .hs-form-field > label {
    display: block;
    margin-bottom: var(--c5-space-2);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--c5-white);
}
.chatgpt-ads .hs-form .hs-form-field > label .hs-form-required { color: var(--c5-teal); }
.chatgpt-ads .hs-form input.hs-input,
.chatgpt-ads .hs-form textarea.hs-input,
.chatgpt-ads .hs-form select.hs-input {
    width: 100% !important;
    font-family: var(--font);
    font-size: 1.6rem;
    color: var(--c5-white);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: var(--c5-radius-md);
    padding: 13px 16px;
    transition: border-color 200ms var(--c5-ease-standard), background-color 200ms var(--c5-ease-standard);
}
.chatgpt-ads .hs-form input.hs-input::placeholder,
.chatgpt-ads .hs-form textarea.hs-input::placeholder { color: rgba(255,255,255,0.36); }
.chatgpt-ads .hs-form input.hs-input:hover,
.chatgpt-ads .hs-form textarea.hs-input:hover { border-color: rgba(255,255,255,0.36); }
.chatgpt-ads .hs-form input.hs-input:focus,
.chatgpt-ads .hs-form textarea.hs-input:focus,
.chatgpt-ads .hs-form select.hs-input:focus {
    outline: none;
    border-color: var(--c5-teal);
    background: rgba(255,255,255,0.07);
}
.chatgpt-ads .hs-form textarea.hs-input { resize: vertical; min-height: 96px; }
.chatgpt-ads .hs-form select.hs-input option { color: var(--c5-black); }

/* consent block */
.chatgpt-ads .hs-form .legal-consent-container { margin-bottom: var(--c5-space-6); }
.chatgpt-ads .hs-form .legal-consent-container .hs-form-booleancheckbox-display > label {
    display: flex;
    align-items: flex-start;
    gap: var(--c5-space-3);
    font-size: 1.5rem;
    color: var(--c5-white);
    line-height: 1.5;
}
.chatgpt-ads .hs-form .legal-consent-container input[type="checkbox"] {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    accent-color: var(--c5-teal);
    flex-shrink: 0;
}
.chatgpt-ads .hs-form .legal-consent-container p,
.chatgpt-ads .hs-form .hs-richtext {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.72);
    line-height: 1.5;
}
.chatgpt-ads .hs-form .legal-consent-container a,
.chatgpt-ads .hs-form .hs-richtext a { color: var(--c5-teal); }

/* submit */
.chatgpt-ads .hs-form .hs-submit .actions { margin: 0; padding: 0; }
.chatgpt-ads .hs-form input.hs-button {
    width: 100%;
    font-family: var(--font);
    font-size: 1.7rem;
    font-weight: 500;
    cursor: pointer;
    border: 0;
    border-radius: 999px;
    padding: 16px 28px;
    background: var(--c5-white);
    color: var(--c5-black);
    transition: opacity 200ms var(--c5-ease-standard), transform 120ms var(--c5-ease-standard);
}
.chatgpt-ads .hs-form input.hs-button:hover { opacity: 0.72; }
.chatgpt-ads .hs-form input.hs-button:active { transform: scale(0.98); opacity: 0.6; }

/* validation */
.chatgpt-ads .hs-form .hs-error-msgs { list-style: none; margin: var(--c5-space-2) 0 0; padding: 0; }
.chatgpt-ads .hs-form .hs-error-msg,
.chatgpt-ads .hs-form .hs-error-msgs label { font-size: 1.4rem; color: #FFB4AB; }
.chatgpt-ads .hs-form .hs-input.invalid { border-color: #FFB4AB; }
.chatgpt-ads .hs-form .submitted-message { font-size: 1.7rem; color: var(--c5-white); }

@media (max-width: 860px) {
    .chatgpt-ads .hs-form fieldset.form-columns-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .chatgpt-ads .form-card { padding: var(--c5-space-5); }
}
@media (max-width: 860px) {.chatgpt-ads .field-row { grid-template-columns: 1fr; }
  }
/* =====================================================================
     FOOTER
     ===================================================================== */
.chatgpt-ads .footer {
    background: var(--c5-black);
    color: var(--c5-white);
    padding: var(--c5-space-7) 0;
  }
.chatgpt-ads .footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--c5-space-4);
  }
.chatgpt-ads .footer__logo { height: 16px; width: auto; opacity: 0.85; }
.chatgpt-ads .footer__meta {
    font-size: 1.3rem;
    display: flex;
    gap: var(--c5-space-5);
    flex-wrap: wrap;
  }
/* =====================================================================
     RESPONSIVE
     ===================================================================== */
@media (max-width: 980px) {.chatgpt-ads .hero__inner {
      grid-template-columns: 1fr;
      grid-template-areas: "intro" "demo" "actions";
      gap: var(--c5-space-7);
    }
.chatgpt-ads .hero__intro { max-width: none; }
.chatgpt-ads .demo { justify-self: center; width: 100%; max-width: 330px; }
/* On a phone the visitor is already holding the real thing, so the window
       trades some of its height for legible line lengths. The shorter window
       also lengthens the scroll travel, which reads better at this width. */
.chatgpt-ads .demo-card {
      margin-inline: auto;
      width: 100%;
      aspect-ratio: 9 / 13;
    }
.chatgpt-ads .trust__grid { grid-template-columns: 1fr; column-gap: var(--c5-space-6); row-gap: var(--c5-space-7); }
.chatgpt-ads .transparency__inner { grid-template-columns: 1fr; gap: var(--c5-space-6); }
.chatgpt-ads .cta__inner { grid-template-columns: 1fr; gap: var(--c5-space-7); }
  }
@media (max-width: 640px) {.chatgpt-ads .wrap { padding-left: var(--c5-space-5); padding-right: var(--c5-space-5); }
.chatgpt-ads .hero__actions { flex-direction: column; align-items: flex-start; }
.chatgpt-ads form.card { padding: var(--c5-space-5); }
  }

/* press release download, beneath the client mark band */
.chatgpt-ads .trust__pr {
    margin: var(--c5-space-6) 0 0;
    text-align: center;
}
.chatgpt-ads .trust__pr-link {
    display: inline-flex;
    align-items: center;
    gap: var(--c5-space-2);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--c5-brand-blue);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    transition: opacity 200ms var(--c5-ease-standard);
}
.chatgpt-ads .trust__pr-link:hover { opacity: 0.7; }
.chatgpt-ads .trust__pr-icon { flex-shrink: 0; }

@media (max-width: 640px) {
    .chatgpt-ads .trust__pr { margin-top: var(--c5-space-5); }
    .chatgpt-ads .trust__pr-link { font-size: 1.5rem; }
}

/* ============================================================================
   Responsive refinement.

   Two things were wrong at narrow widths. The section rhythm was a flat 128px
   top and bottom at every viewport, which left large empty bands once the
   layout stacked. And the type ramp is anchored to the theme's 10px root
   (html{font-size:62.5%}), so sizes are expressed against that scale here —
   1.8rem is the site's standard body copy, matching .text-medium.

   Vertical space steps down at tablet and again on phones; headings keep
   scaling instead of clamping out.
   ========================================================================== */

@media (max-width: 1024px) {
    .chatgpt-ads .trust,
    .chatgpt-ads .transparency,
    .chatgpt-ads .tech { padding: var(--c5-space-9) 0; }
    .chatgpt-ads .cta { padding: var(--c5-space-9) 0 var(--c5-space-8); }

    .chatgpt-ads .hero__inner {
        padding-top: max(var(--c5-space-7), var(--c5-header-clear));
        padding-bottom: var(--c5-space-8);
    }

    .chatgpt-ads .hero h1 { font-size: clamp(3.8rem, 5.6vw, 5rem); }
    .chatgpt-ads .trust h2,
    .chatgpt-ads .transparency h2,
    .chatgpt-ads .tech h2 { font-size: clamp(3.1rem, 4.6vw, 4.2rem); }
    .chatgpt-ads .cta h2 { font-size: clamp(3.3rem, 5vw, 4.6rem); }
}

@media (max-width: 860px) {
    .chatgpt-ads .trust,
    .chatgpt-ads .transparency,
    .chatgpt-ads .tech { padding: var(--c5-space-8) 0; }
    .chatgpt-ads .cta { padding: var(--c5-space-8) 0 var(--c5-space-7); }
}

@media (max-width: 640px) {
    .chatgpt-ads .trust,
    .chatgpt-ads .transparency,
    .chatgpt-ads .tech { padding: var(--c5-space-7) 0; }
    .chatgpt-ads .cta { padding: var(--c5-space-7) 0 var(--c5-space-6); }

    /* The hero drops its min-height here, so once the headline is taller than
       the viewport the top padding is the only thing keeping the first line
       clear of the fixed site header. */
    .chatgpt-ads .hero { min-height: 0; }
    .chatgpt-ads .hero__inner {
        padding-top: max(var(--c5-space-6), var(--c5-header-clear));
        padding-bottom: var(--c5-space-7);
        row-gap: var(--c5-space-6);
    }

    .chatgpt-ads .hero h1 { font-size: clamp(3.4rem, 8.6vw, 4.4rem); line-height: 1.12; }
    .chatgpt-ads .trust h2,
    .chatgpt-ads .transparency h2,
    .chatgpt-ads .tech h2 { font-size: clamp(2.9rem, 7.6vw, 3.6rem); }
    .chatgpt-ads .cta h2 { font-size: clamp(3rem, 8vw, 3.8rem); }

    .chatgpt-ads .hero__sub { font-size: 1.8rem; }
    .chatgpt-ads .btn { width: 100%; justify-content: center; }
    .chatgpt-ads .hero__actions { width: 100%; gap: var(--c5-space-4); }
}

/* HubSpot renders this form inside a same-origin iframe, so its internals are
   styled by assets/dist/chatgpt-ads/chatgpt-ads-hsform.css, which the page
   script injects into that document. Rules written here cannot reach it. */
.chatgpt-ads .hs-form-host { min-height: 120px; }

/* Shown in place of the form for languages that do not have a HubSpot form yet,
   so the card is visibly awaiting one rather than looking broken or silently
   presenting another language's form. */
.chatgpt-ads .form-placeholder {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(255,255,255,0.24);
    border-radius: var(--c5-radius-md);
    background: rgba(0,0,0,0.35);
}
.chatgpt-ads .form-placeholder p {
    margin: 0;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.6);
}