@font-face {
    font-family: PPNeue;
    src: url("/fonts/PPNeueMontreal-Variable.woff2") format("woff2");
    font-display: swap;
    font-weight: 100 900;
}

@font-face {
    font-family: Simplon;
    src: url("/fonts/SimplonMono-400.woff2") format("woff2");
    font-display: swap;
    font-weight: 400;
}

:root {
    --gg-ink: #291210;
    --gg-muted: #6d625f;
    --gg-accent: #47201c;
    --gg-paper: #f8f6f2;
    --gg-blush: #f3e9e3;
    --gg-line: rgba(71, 32, 28, 0.16);
    --gg-shadow: 0 18px 42px rgba(41, 18, 16, 0.1);
    --gg-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.gg-programmatic-page {
    --primary: #47201c;
    --secondary: #291210;
    min-width: 0;
    margin: 0;
    color: var(--gg-ink);
    background:
      radial-gradient(circle at 8% 0%, rgba(243, 233, 227, 0.9), transparent 30rem),
      linear-gradient(180deg, #fff 0, var(--gg-paper) 36rem, #f2ece8 100%);
    font-family: PPNeue, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

.gg-programmatic-page *,
.gg-programmatic-page *::before,
.gg-programmatic-page *::after { box-sizing: border-box; }

.gg-programmatic-page :where(img, svg, video, canvas, iframe) { max-width: 100%; }

.gg-programmatic-page :where(h1, h2, h3, h4) {
    color: var(--gg-ink);
    font-family: PPNeue, Arial, sans-serif;
    font-weight: 350;
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.gg-programmatic-page h1 { font-size: clamp(2.65rem, 7vw, 5.8rem); }
.gg-programmatic-page h2 { font-size: clamp(2rem, 4.5vw, 3.75rem); }
.gg-programmatic-page h3 { font-size: clamp(1.3rem, 2.8vw, 2rem); }
.gg-programmatic-page :where(h1, h2) { font-weight: 350 !important; }

.gg-programmatic-page :where(.text-orange-300, .text-orange-400, .text-orange-500, .text-orange-600) {
    color: #6b3b35 !important;
}

.gg-programmatic-page :where(.bg-orange-500, .bg-orange-600, .bg-orange-700, .bg-orange-800) {
    background-color: var(--gg-accent) !important;
    color: #fff !important;
}

.gg-programmatic-page :where(.from-orange-500, .from-orange-600) { --tw-gradient-from: #6b3b35 !important; }
.gg-programmatic-page :where(.to-red-500, .to-red-600) { --tw-gradient-to: #291210 !important; }

.gg-programmatic-page a:not([class]) { color: var(--gg-accent); text-underline-offset: 0.18em; }
.gg-programmatic-page :where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #9b6158;
    outline-offset: 3px;
}

.gg-programmatic-page .gg-programmatic-shell {
    position: relative;
    z-index: 1000;
    display: flex;
    width: min(100% - 32px, 1440px);
    min-height: 72px;
    margin: 16px auto 30px;
    padding: 8px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid var(--gg-line);
    border-radius: 40px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--gg-shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.gg-programmatic-page .gg-programmatic-brand {
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    gap: 10px;
    color: var(--gg-ink);
    font-size: 1.05rem;
    font-weight: 650;
    text-decoration: none;
}

.gg-programmatic-page .gg-programmatic-brand img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.gg-programmatic-page .gg-programmatic-nav {
    display: flex;
    padding: 4px;
    align-items: center;
    gap: 2px;
    border-radius: 30px;
    background: rgba(107, 94, 91, 0.12);
}

.gg-programmatic-page .gg-programmatic-nav a,
.gg-programmatic-page .gg-programmatic-action {
    min-height: 44px;
    padding: 11px 19px;
    border-radius: 28px;
    color: var(--gg-ink);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 180ms var(--gg-ease), color 180ms var(--gg-ease), transform 180ms var(--gg-ease);
}

.gg-programmatic-page .gg-programmatic-nav a:hover,
.gg-programmatic-page .gg-programmatic-nav a:focus-visible { background: rgba(255, 255, 255, 0.82); }

.gg-programmatic-page .gg-programmatic-action {
    border: 1px solid var(--gg-accent);
    color: #fff;
    background: var(--gg-accent);
    box-shadow: 0 8px 20px rgba(71, 32, 28, 0.16);
}

.gg-programmatic-page .gg-programmatic-action:hover { transform: translateY(-1px); }

.gg-programmatic-page > :where(main, article, .container, .content, .page, #app) {
    width: min(100% - 32px, 1180px);
    margin-inline: auto;
}

.gg-programmatic-page :where(article, main article, .card, .content-card, .section-card) {
    border-color: var(--gg-line);
    border-radius: clamp(20px, 3vw, 38px);
}

.gg-programmatic-page .gg-programmatic-legacy-header { display: none !important; }

.gg-programmatic-page .gg-programmatic-conversion {
    display: grid;
    width: min(100% - 32px, 1320px);
    min-height: 620px;
    margin: clamp(72px, 10vw, 150px) auto 48px;
    grid-template-columns: minmax(0, 1.04fr) minmax(360px, 0.96fr);
    overflow: hidden;
    border: 1px solid var(--gg-line);
    border-radius: 52px;
    color: #fff;
    background: var(--gg-accent);
    box-shadow: 0 28px 80px rgba(41, 18, 16, 0.18);
}

.gg-programmatic-page .gg-programmatic-conversion__copy {
    display: flex;
    padding: clamp(42px, 7vw, 94px);
    flex-direction: column;
    justify-content: center;
}

.gg-programmatic-page .gg-programmatic-conversion__eyebrow {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font: 500 0.72rem/1.2 Simplon, ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gg-programmatic-page .gg-programmatic-conversion h2 {
    max-width: 9ch;
    margin: 26px 0 0;
    color: #fff;
    font-size: clamp(3.6rem, 6.6vw, 7.5rem);
    line-height: 0.86;
    letter-spacing: -0.07em;
}

.gg-programmatic-page .gg-programmatic-conversion__body {
    max-width: 39ch;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1.05rem, 1.7vw, 1.3rem);
    line-height: 1.45;
}

.gg-programmatic-page .gg-programmatic-conversion__actions {
    display: flex;
    margin-top: 36px;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gg-programmatic-page .gg-programmatic-conversion__primary,
.gg-programmatic-page .gg-programmatic-conversion__secondary {
    display: inline-flex;
    min-height: 58px;
    padding: 0 25px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 180ms var(--gg-ease), color 180ms var(--gg-ease), transform 180ms var(--gg-ease);
}

.gg-programmatic-page .gg-programmatic-conversion__primary {
    border-color: #fff;
    color: var(--gg-ink);
    background: #fff;
}

.gg-programmatic-page .gg-programmatic-conversion__primary:hover,
.gg-programmatic-page .gg-programmatic-conversion__secondary:hover { transform: translateY(-2px); }
.gg-programmatic-page .gg-programmatic-conversion__secondary:hover { background: rgba(255, 255, 255, 0.12); }

.gg-programmatic-page .gg-programmatic-conversion__note {
    max-width: 54ch;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.85rem;
    line-height: 1.45;
}

.gg-programmatic-page .gg-programmatic-conversion__media {
    min-width: 0;
    padding: 12px;
    background: var(--gg-blush);
}

.gg-programmatic-page .gg-programmatic-conversion__media img {
    width: 100%;
    height: 100%;
    min-height: 596px;
    border-radius: 42px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 900px) {
    .gg-programmatic-page .gg-programmatic-conversion {
      min-height: 0;
      grid-template-columns: 1fr;
      border-radius: 40px;
    }

    .gg-programmatic-page .gg-programmatic-conversion__media {
      min-height: 420px;
      order: -1;
    }

    .gg-programmatic-page .gg-programmatic-conversion__media img { min-height: 396px; }
}

@media (max-width: 760px) {
    .gg-programmatic-page .gg-programmatic-shell {
      width: calc(100% - 20px);
      min-height: 62px;
      margin: 10px auto 20px;
      padding: 7px 8px;
      border-radius: 26px;
    }

    .gg-programmatic-page .gg-programmatic-brand span { display: none; }
    .gg-programmatic-page .gg-programmatic-brand img { width: 42px; height: 42px; }
    .gg-programmatic-page .gg-programmatic-nav { margin-left: auto; }
    .gg-programmatic-page .gg-programmatic-nav a { display: none; }
    .gg-programmatic-page .gg-programmatic-nav a:first-child {
      display: inline-flex;
      min-height: 40px;
      padding: 10px 15px;
      align-items: center;
    }
    .gg-programmatic-page .gg-programmatic-action { display: none; }
    .gg-programmatic-page h1 { font-size: clamp(2.35rem, 13vw, 4rem); }
    .gg-programmatic-page .gg-programmatic-conversion {
      width: calc(100% - 20px);
      margin-top: 72px;
      border-radius: 32px;
    }
    .gg-programmatic-page .gg-programmatic-conversion__copy { padding: 42px 24px 48px; }
    .gg-programmatic-page .gg-programmatic-conversion h2 { font-size: clamp(3.15rem, 15vw, 5rem); }
    .gg-programmatic-page .gg-programmatic-conversion__actions { align-items: stretch; flex-direction: column; }
    .gg-programmatic-page .gg-programmatic-conversion__primary,
    .gg-programmatic-page .gg-programmatic-conversion__secondary { width: 100%; }
    .gg-programmatic-page .gg-programmatic-conversion__media { min-height: 320px; padding: 8px; }
    .gg-programmatic-page .gg-programmatic-conversion__media img { min-height: 304px; border-radius: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    .gg-programmatic-page *,
    .gg-programmatic-page *::before,
    .gg-programmatic-page *::after { scroll-behavior: auto !important; transition: none !important; }
}