@layer reset, structure, elements;

@layer reset {
  :root {
    --gg-surface: #ffffff;
    --gg-text: #15181c;
    --gg-text-mid: #474d54;
    --gg-text-dim: #687078;
    --gg-foot-ink: #888e95;
    --gg-accent: #de520b;
    --gg-accent-hover: #c44607;
    --gg-frame-bg: #edeff2;
    --gg-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--gg-surface);
    color: var(--gg-text);
    font: 400 17px/1.52 var(--gg-font);
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }
}

@layer structure {
  .gg-viewport {
    padding: 28px 20px 42px;
  }

  .gg-card {
    max-width: 622px;
    margin-inline: auto;
  }

  .gg-footer {
    max-width: 622px;
    margin: 28px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--gg-foot-ink);
  }
}

@layer elements {
  .gg-title {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.21;
    font-weight: 800;
    letter-spacing: -0.35px;
  }

  .gg-subtitle {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.46;
    color: var(--gg-text-mid);
  }

  .gg-media {
    margin: 0 0 24px;
  }

  .gg-image {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    margin-inline: auto;
    border-radius: 13px;
    background: var(--gg-frame-bg);
  }

  .gg-cta-btn {
    display: block;
    padding: 17px 22px;
    border-radius: 11px;
    background: var(--gg-accent);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
  }

  .gg-cta-btn:hover,
  .gg-cta-btn:active {
    background: var(--gg-accent-hover);
  }

  .gg-subnote {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--gg-text-dim);
  }

  .gg-footer-note { margin: 0 0 1em; }

  .gg-footer-links { display: block; margin-bottom: 1em; }

  .gg-footer-entity { margin: 0; font-size: 11px; line-height: 1.6; }

  .gg-footer a { color: var(--gg-foot-ink); }

  @media (min-width: 620px) {
    .gg-title { font-size: 38px; }
    .gg-subtitle { font-size: 20px; }

    .gg-cta-btn {
      display: inline-block;
      min-width: 362px;
    }
  }
}