/* AGS Rome 2026 offer — the stamp, the seat count, the offer block and the form.
   Shared by the home page and /ags/; both define the index tokens, and the
   fallbacks keep it whole on a page that does not. See ags-offer.js. */
:root{ --ags-red: #D92D20; }  /* 4.9:1 on white — the seat count is text, so it has to read */

/* ── the stamp ─────────────────────────────────────────────────────────── */
.ags-stamp{
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 10px 18px; border: 3px double var(--ags-red); border-radius: 12px;
  color: var(--ags-red); background: rgba(255,255,255,.92);
  font: inherit; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; line-height: 1.1;
  text-align: center; text-decoration: none; transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2px rgba(217,45,32,.08);
  transition: transform .2s cubic-bezier(.16,1,.3,1);
}
.ags-stamp small{ font-size: 10.5px; font-weight: 700; letter-spacing: .16em; }
.ags-stamp b{ font-size: 19px; font-weight: 900; letter-spacing: .06em; }
button.ags-stamp{ cursor: pointer; transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease; }
button.ags-stamp:hover, button.ags-stamp:focus-visible{ transform: rotate(-2deg) scale(1.04); box-shadow: inset 0 0 0 2px rgba(217,45,32,.08), 0 14px 30px rgba(217,45,32,.22); }
button.ags-stamp:focus-visible{ outline: 3px solid var(--violet, #5B20D4); outline-offset: 4px; }

/* the stamp is a button: its last line is a solid pill that reads as one,
   with a soft pulse to draw the eye (off with reduced motion) */
.ags-stamp__cta{
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; padding: 4px 11px;
  border-radius: 100px; background: var(--ags-red); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  animation: agsPulse 2.4s ease-out infinite; transition: background .15s ease;
}
.ags-stamp__cta i{ font-style: normal; transition: transform .2s ease; }
.ags-stamp__cta [hidden]{ display: none; }
button.ags-stamp:hover .ags-stamp__cta{ background: #B42318; animation: none; }
button.ags-stamp:hover .ags-stamp__cta i{ transform: translateX(3px); }
@keyframes agsPulse{ 0%{ box-shadow: 0 0 0 0 rgba(217,45,32,.45); } 70%, 100%{ box-shadow: 0 0 0 9px rgba(217,45,32,0); } }
@media (prefers-reduced-motion: reduce){ .ags-stamp__cta{ animation: none; } }
.ags-stamp--out{ color: var(--faint, #505050); border-color: var(--faint, #505050); transform: rotate(-5deg); }
.ags-stamp--sm{ padding: 6px 12px; border-width: 3px; }
.ags-stamp--sm b{ font-size: 14px; }
.ags-stamp small[hidden]{ display: none; }

/* pressed onto the home page headline: above "business.", its lower edge just
   touching the tops of the letters, so the word stays readable. The bottom
   offset follows the hero h1's own size (.hero .h1 in the index css). */
.ags-stamp--over{
  position: absolute; right: 1%; z-index: 2;
  bottom: calc(.88 * clamp(33px, 5.05vw, 70px));
  padding: 9px 20px; transform: rotate(-7deg);
  box-shadow: inset 0 0 0 2px rgba(217,45,32,.08), 0 10px 26px rgba(20,8,56,.12);
}
.ags-stamp--over b{ font-size: 22px; }
.ags-stamp--over .ags-stamp__cta{ margin-top: 5px; font-size: 11.5px; }
button.ags-stamp--over:hover, button.ags-stamp--over:focus-visible{ transform: rotate(-4deg) scale(1.04); }
.ags-stamp--over.ags-stamp--out{ transform: rotate(-7deg); }
.ags-stamp--over[hidden]{ display: none; }
/* tablet: a smaller headline, so a smaller stamp that still fits above it */
@media (min-width: 641px) and (max-width: 1099px){
  /* a smaller headline here, so the stamp sits a little higher above it */
  .ags-stamp--over{ bottom: calc(1.1 * clamp(33px, 5.05vw, 70px)); padding: 5px 12px; transform: rotate(-5deg); }
  .ags-stamp--over b{ font-size: 15px; }
  .ags-stamp--over small{ font-size: 8.5px; }
  .ags-stamp--over .ags-stamp__cta{ margin-top: 3px; padding: 2px 8px; font-size: 9px; }
}
/* phone: the headline breaks after "engine", leaving room right of
   "of your business." — a compact stamp, "6 months / free" on two lines,
   sits there and hangs into the gap above the lead paragraph. */
@media (max-width: 640px){
  .ags-stamp--over{ right: -12px; bottom: -44px; padding: 5px 8px; gap: 1px; border-width: 3px; transform: rotate(-5deg); }
  .ags-stamp--over b{ max-width: 7em; font-size: clamp(12px, 3.3vw, 18px); line-height: 1.05; letter-spacing: .03em; }
  .ags-stamp--over small{ font-size: clamp(7px, 1.95vw, 10px); letter-spacing: .08em; line-height: 1.1; }
  .ags-stamp--over .ags-stamp__cta{ margin-top: 3px; padding: 2px 7px; gap: 3px; font-size: clamp(7.5px, 2vw, 10px); letter-spacing: .05em; }
  .ags-stamp--over .ags-stamp__long{ display: none; }  /* "16 left · Claim": the stamp keeps its phone width */
  .ags-stamp--over.ags-stamp--out{ transform: rotate(-5deg); }
  button.ags-stamp--over:hover, button.ags-stamp--over:focus-visible{ transform: rotate(-2deg) scale(1.04); }
}
/* under 360px even that does not fit: the stamp drops into the flow under the headline */
@media (max-width: 359px){
  .ags-stamp--over{ position: relative; right: auto; bottom: auto; display: flex; width: max-content; margin: 10px 4px 0 auto; }
}

.ags-stamp--seat{ margin: 4px auto 18px; padding: 12px 26px; display: flex; width: max-content; }
.ags-stamp--seat b{ font-size: 34px; letter-spacing: .02em; }

/* the red line: how many seats are left */
.ags-seats{ margin: 0; font-size: 14px; font-weight: 700; color: var(--ags-red); }
.ags-seats b{ font-size: 1.15em; font-weight: 900; font-variant-numeric: tabular-nums; }
.ags-seats[hidden]{ display: none; }

/* ── stamp beside a hero CTA ───────────────────────────────────────────── */
.ags-hero{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 22px; }
.ags-hero[hidden]{ display: none; }

/* ── the offer block ───────────────────────────────────────────────────── */
.ags-offer{
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(20px, 4vw, 44px);
  margin-top: clamp(28px, 4vw, 40px); padding: clamp(22px, 3.4vw, 36px);
  background: #fff; border: 2px dashed var(--tint-line, #E5DEFE); border-radius: 20px;
}
.ags-offer[hidden]{ display: none; }
.ags-offer .ags-stamp{ padding: 16px 24px; }
.ags-offer .ags-stamp b{ font-size: 26px; }
.ags-offer__title{ margin: 0 0 8px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: var(--ink, #14121C); letter-spacing: -.025em; line-height: 1.2; }
.ags-offer__text{ margin: 0 0 14px; font-size: 15.5px; line-height: 1.55; color: var(--body, #3D3D3D); max-width: 56ch; }
.ags-offer__act{ display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; }
@media (max-width: 640px){
  .ags-offer{ grid-template-columns: 1fr; justify-items: start; }
}

/* ── the form ──────────────────────────────────────────────────────────── */
.ags-modal-open{ overflow: hidden; }
.ags-modal{ position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: 16px; font-family: inherit; }
.ags-modal[hidden]{ display: none; }
.ags-modal__backdrop{ position: absolute; inset: 0; background: rgba(16,8,42,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ags-modal__card{
  position: relative; width: min(100%, 540px);
  max-height: min(92dvh, 860px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 20px; padding: clamp(22px, 4vw, 32px);
  box-shadow: 0 24px 60px rgba(20,8,56,.28); color: var(--body, #3D3D3D);
}
.ags-modal__close{
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; background: none; cursor: pointer;
  border-radius: 50%; display: grid; place-items: center; color: var(--faint, #505050);
}
.ags-modal__close:hover{ background: var(--wash, #F5F7F9); color: var(--ink, #14121C); }
.ags-modal__top{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 40px 18px 0; }
.ags-modal__state{ display: none; }
.ags-modal[data-state="qualify"] .ags-modal__state--qualify,
.ags-modal[data-state="details"] .ags-modal__state--details,
.ags-modal[data-state="code"]    .ags-modal__state--code,
.ags-modal[data-state="soldout"] .ags-modal__state--soldout{ display: block; }
.ags-modal[data-state="done"]    .ags-modal__state--done{ display: block; text-align: center; }
.ags-modal__title{ margin: 0 0 8px; font-size: clamp(20px, 2.4vw, 24px); font-weight: 700; color: var(--ink, #14121C); letter-spacing: -.025em; line-height: 1.2; }
.ags-modal__sub{ margin: 0 0 20px; font-size: 14.5px; line-height: 1.55; color: var(--muted, #464646); }
.ags-modal__sub b{ color: var(--ink, #14121C); overflow-wrap: anywhere; }
.ags-modal__q{ margin: 18px 0 0; }
.ags-modal__label{ display: block; margin: 0 0 9px; font-size: 13.5px; font-weight: 700; color: var(--ink, #14121C); }
.ags-modal__label i{ font-style: normal; font-weight: 500; color: var(--faint, #505050); }
.ags-modal__options{ display: flex; flex-wrap: wrap; gap: 8px; }
.ags-modal__option{
  min-height: 40px; padding: 0 14px; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--hair-2, #DBE3EA); background: #fff;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2, #2E2E2E);
  transition: all .15s ease;
}
.ags-modal__option:hover{ border-color: var(--violet, #5B20D4); color: var(--violet, #5B20D4); }
.ags-modal__option.is-selected{ background: var(--violet, #5B20D4); border-color: var(--violet, #5B20D4); color: #fff; font-weight: 600; }
.ags-modal__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 480px){ .ags-modal__row{ grid-template-columns: 1fr; } }
.ags-modal__field{ display: block; margin-bottom: 14px; }
.ags-modal__input{
  width: 100%; min-height: 48px; padding: 0 14px; box-sizing: border-box;
  border: 1px solid #8A96A3; border-radius: 10px; background: #fff;
  font: inherit; font-size: 15px; color: var(--ink, #14121C);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ags-modal__input:focus{ outline: none; border-color: var(--violet, #5B20D4); box-shadow: 0 0 0 3px rgba(97,37,222,.16); }
.ags-modal__input--code{ font-size: 26px; font-weight: 700; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.ags-modal__error{ margin: 0 0 12px; font-size: 13.5px; color: var(--ags-red); }
.ags-modal__error[hidden]{ display: none; }
.ags-modal__submit{
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 22px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 8px; cursor: pointer; box-sizing: border-box;
  background: var(--violet, #5B20D4); color: #fff; font: inherit; font-size: 15.5px; font-weight: 600; text-decoration: none;
  box-shadow: 0 4px 7px rgba(31,0,217,.30); transition: background .15s ease, opacity .15s ease;
}
.ags-modal__submit svg{ width: 18px; height: 18px; }
.ags-modal__submit:hover{ background: var(--violet-deep, #4A19B1); }
.ags-modal__submit:disabled{ opacity: .45; cursor: not-allowed; }
.ags-modal__state--details .ags-modal__submit, .ags-modal__state--code .ags-modal__submit{ margin-top: 6px; }
.ags-modal__secondary{
  display: block; width: 100%; margin-top: 10px; min-height: 40px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--violet, #5B20D4);
}
.ags-modal__secondary:disabled{ color: var(--faint, #505050); cursor: default; }
.ags-modal__legal{ margin: 12px 0 0; font-size: 12.5px; color: var(--faint, #505050); text-align: center; }
.ags-modal__legal a{ color: inherit; }