/* ==========================================================================
   Price modal
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20,20,20,.45);
  padding: 24px;
}
.modal.is-open { display: flex; }
.modal__box {
  position: relative;
  background: #fff;
  border-radius: 28px;
  width: 100%;
  max-width: 660px;
  /* Never taller than the screen (dvh tracks Safari's collapsing address bar;
     vh is the old-browser fallback). The box itself does NOT scroll — it's the
     rounded clipping shell, and its overflow:hidden is what keeps the inner
     scroller's bar inside the curved corners in every engine. Scrolling the
     box directly can't work cross-browser: a scroller's own border-radius
     never clips its scrollbar, and Safari ignores scrollbar-track margins. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;      /* header row, then .modal__scroll fills the rest */
  overflow: hidden;
}
/* Real header row — NOT scrolled, NOT just an overlaid button. It occupies
   its own layout space, so .modal__scroll's content structurally can't pass
   "under" the ✕ while scrolling; there's no shared space left to pass through.
   (An absolutely-positioned close button pinned by z-index alone doesn't
   reserve that space — scrolled content still slides underneath it visually.) */
.modal__header {
  flex: 0 0 auto;
  position: relative;
  padding: 44px 56px 0;
}
.modal__close {
  position: absolute;
  top: 22px; right: 22px;
  width: 46px; height: 46px;
  background: none; border: none; cursor: pointer;
  z-index: 3;
}
.modal__title {
  position: relative;
  z-index: 2;
  text-align: center;
  font-size: 24px;          /* Bold 24 */
  font-weight: 700;
  color: var(--orange);
  line-height: 1.25;
  margin: 0 0 26px;
}
/* The actual scroller — everything below the fixed header. */
.modal__scroll {
  flex: 1 1 auto;
  min-height: 0;              /* flex children default to min-height:auto, which
                                  would refuse to shrink below content size and
                                  break scrolling — this lets it actually clip */
  overflow-y: auto;
  padding: 0 56px 40px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Scrollbar skin is global (base.css); the top of .modal__scroll now sits
   below the header (nowhere near the top corners), so only the bottom needs
   clearance from the 28px corner curve. */
.modal__scroll::-webkit-scrollbar-track { margin-bottom: 28px; }
.modal__title .stars { display: inline-flex; align-items: center; gap: 12px; }
.modal__title img { width: 26px; height: 26px; vertical-align: middle; }
.modal__form { position: relative; z-index: 2; }
.modal__form label {
  display: block;
  font-size: 16px;          /* Medium 16 */
  font-weight: 500;
  color: var(--muted);
  margin: 14px 0 8px;
}
.modal__form input,
.modal__form textarea {
  width: 100%;
  border: 2px solid var(--orange);
  border-radius: 12px;
  padding: 16px 22px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text);
  background: #fff;
  resize: vertical;
}
.modal__form input::placeholder,
.modal__form textarea::placeholder { color: rgba(96,96,96,.4); } /* 60% of #606060 */
.modal__submit {
  display: block;
  margin: 26px auto 0;
  background: var(--orange);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border: none; cursor: pointer;
  font-family: inherit;
  padding: 15px 46px;
  border-radius: 16px;
}
/* Submit result message (built by main.js): an on-brand peach pill with the
   GOOD paw that springs in and wags — no out-of-place green, no boredom. */
.form-note {
  position: relative;
  z-index: 3;
  display: flex;                    /* block-level so margin:auto can centre it */
  align-items: center;
  gap: 10px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin: 16px auto 0;
  padding: 11px 22px 11px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  text-align: left;
  transform-origin: center bottom;
  animation: gk-note-pop .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
.form-note.is-success {
  color: var(--orange);
  background: var(--newsletter-bg);
  box-shadow: 0 10px 26px rgba(242, 122, 88, .22);
}
.form-note.is-error {
  color: #c1543b;
  background: #fdece7;
  box-shadow: 0 10px 26px rgba(193, 84, 59, .18);
}
.form-note__paw {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: currentColor;
  transform-origin: 60% 85%;
  animation: gk-paw-wag .55s ease .3s 2;
}
.form-note__paw--warn {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #c1543b;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  animation: none;
}

@keyframes gk-note-pop {
  0%   { opacity: 0; transform: translateY(14px) scale(.6); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes gk-paw-wag {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-18deg); }
  65%      { transform: rotate(12deg); }
  85%      { transform: rotate(-5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .form-note, .form-note__paw { animation: none; }
}

/* ==========================================================================
   Turnstile dog-walk — a solved VISIBLE Cloudflare challenge grows legs and
   trots off the right edge of the screen (main.js gkTurnstileDone). The
   widget div itself is the dog's body: it stays in the form (its hidden
   input carries the token) and exits via translate only. `rotate` is used
   for the waddle because it animates independently of the translate walk
   (individual transform properties don't clobber each other).
   ========================================================================== */
.gk-ts-dog {
  will-change: translate;
  background: #fff;                 /* body panel — survives even if Cloudflare
                                       collapses its iframe mid-walk */
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(9, 48, 70, .16);
}
.gk-ts-walking { animation: gk-dog-waddle .34s ease-in-out infinite; }
@keyframes gk-dog-waddle {
  0%, 100% { rotate: -1.2deg; }
  50%      { rotate: 1.2deg; }
}
.gk-ts-legs i {
  position: absolute;
  bottom: -13px;
  width: 9px;
  height: 16px;
  background: var(--orange);
  border-radius: 0 0 5px 5px;
  transform-origin: top center;
  animation: gk-leg-pop .25s cubic-bezier(.34, 1.56, .64, 1) both;
}
.gk-ts-legs i:nth-child(1) { left: 12%; }
.gk-ts-legs i:nth-child(2) { left: 30%; }
.gk-ts-legs i:nth-child(3) { left: 62%; }
.gk-ts-legs i:nth-child(4) { left: 80%; }
.gk-ts-walking .gk-ts-legs i { animation: gk-leg-swing .22s ease-in-out infinite; }
.gk-ts-walking .gk-ts-legs i:nth-child(2n) { animation-delay: -.11s; }
@keyframes gk-leg-pop {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes gk-leg-swing {
  0%, 100% { transform: rotate(-20deg); }
  50%      { transform: rotate(20deg); }
}
/* Walks rightward, so the tail trails off the left edge and wags. */
.gk-ts-tail {
  position: absolute;
  left: -13px;
  top: 42%;
  width: 15px;
  height: 6px;
  background: var(--orange);
  border-radius: 4px;
  transform-origin: right center;
  animation: gk-tail-wag .2s ease-in-out infinite;
}
@keyframes gk-tail-wag {
  0%, 100% { transform: rotate(16deg); }
  50%      { transform: rotate(-10deg); }
}
.gk-ts-print {
  position: absolute;               /* document-anchored: prints mark the page,
                                       not the screen (JS adds scroll offsets) */
  z-index: 1199;                    /* just under the dog */
  width: 15px;
  height: 15px;
  color: var(--orange);
  pointer-events: none;
  animation: gk-print-fade 1.1s ease-out forwards;
}
.gk-ts-print svg { width: 100%; height: 100%; fill: currentColor; }
@keyframes gk-print-fade {
  0%   { opacity: 0; }
  15%  { opacity: .5; }
  100% { opacity: 0; }
}
.gk-ts-placeholder {
  display: block;
  overflow: hidden;
  transition: height .35s ease, margin .35s ease;
}
.gk-ts-placeholder.is-collapsed { height: 0 !important; margin: 0 !important; }
.gk-ts-return { animation: gk-note-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
/* JS already skips the walk under reduced motion; this is the belt to that
   suspender in case the classes ever land anyway. */
@media (prefers-reduced-motion: reduce) {
  .gk-ts-dog, .gk-ts-walking, .gk-ts-legs i, .gk-ts-tail, .gk-ts-print,
  .gk-ts-return { animation: none !important; transition: none !important; }
}

/* Mobile-only banner elements — hidden by default (desktop).
   Declared BEFORE the media query so the @media display:block wins on mobile. */
.hero__mobile-banner,
.company__mobile-banner { display: none; }