/* assets/sprint2.css
 *
 * EXTRACTED FROM index.html ON 7 AUGUST 2026. The rules below are byte for byte what was
 * inside <style id="sprint2-validation-styles">, in the same order, and this file is linked
 * from exactly the position that style tag occupied, so the cascade is unchanged.
 *
 * WHY IT MOVED. A host embedding this calculator never receives index.html, so it never
 * received these 170 rules, and the embed manifest has no field that could describe an inline
 * block. The portal lane reported .sdg-stepper rendering as a plain vertical list inside the
 * Grow tab and was exactly right that no rule for it existed in the CSS they were served. It
 * was in here. Their attribution to a stale manifest was the only wrong part, and the manifest
 * was separately stale, which is what made it look like the cause.
 *
 * A NOTE ON THE EIGHT url() PATHS, so nobody reads them as a mistake. They say
 * glass-frame/*.webp with no leading slash. Inside index.html those resolved against the
 * document and 404ed. From here they resolve against /assets/ and return 200. That is a
 * change, and it is deliberate and inert: the only selector using them is .cal-bridge::before,
 * which app.v2.css sets to display none as legacy and which is not in the DOM at all. Verified
 * in the browser before this move, zero .cal-bridge elements on the page.
 *
 * DO NOT PUT RULES BACK INTO index.html. Anything that lives there is invisible to the portal.
 */
.gg-scope .qualifier-q--missing{
      background: linear-gradient(180deg, rgba(254, 226, 226, 0.85) 0%, rgba(254, 215, 215, 0.55) 100%) !important;
      box-shadow:
        0 0 0 2px rgba(220, 38, 38, 0.35) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 12px 24px -14px rgba(220, 38, 38, 0.20) !important;
      animation: qualifier-q-shake 0.4s ease-in-out;
    }
    @keyframes qualifier-q-shake {
      0%, 100% { transform: translateX(0); }
      25% { transform: translateX(-4px); }
      50% { transform: translateX(4px); }
      75% { transform: translateX(-2px); }
    }
.gg-scope .qm-modal__list{
      margin: 0.5rem 0 0.875rem;
      padding-left: 1.25rem;
      font-size: 0.85rem;
      color: #2d3748;
      line-height: 1.5;
    }
.gg-scope .qm-modal__list li{ margin-bottom: 0.2rem; }
.gg-scope .waitlist-toast__list{
      margin: 0.4rem 0 0.5rem;
      padding-left: 1.1rem;
      font-size: 0.78rem;
      color: #2d3748;
      line-height: 1.5;
    }
.gg-scope .waitlist-toast__list li{ margin-bottom: 0.15rem; }
.gg-scope .waitlist-toast__jump{
      margin-top: 0.2rem;
      background: transparent;
      border: 0;
      padding: 0;
      font-size: 0.78rem;
      font-weight: 600;
      color: #b85e0a;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
.gg-scope .waitlist-toast__jump:hover{ color: #f59e0b; }
/* Sprint 3, S&DG 4-step stepper (subtle grey to avoid competing with CTAs) */
.gg-scope .sdg-stepper{
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.4rem 0.25rem;
      margin: 0 0 0.5rem;
      background: transparent;
      border: 0;
      border-radius: 0;
    }
.gg-scope .sdg-stepper__step{
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.18rem 0.5rem 0.18rem 0.18rem;
      border-radius: 999px;
      font-size: 0.74rem;
      font-weight: 600;
      color: #9ca3af;
      transition: color 0.18s ease;
    }
.gg-scope .sdg-stepper__num{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      color: #9ca3af;
      border: 1.5px solid #cbd5e0;
      font-size: 0.72rem;
      font-weight: 700;
      transition: all 0.18s ease;
    }
.gg-scope .sdg-stepper__step.is-current .sdg-stepper__num{
      border-color: #6b7280;
      color: #4b5563;
      box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.10);
    }
.gg-scope .sdg-stepper__step.is-current{ color: #4b5563; }
.gg-scope .sdg-stepper__step.is-done .sdg-stepper__num{
      background: #9ca3af;
      border-color: transparent;
      color: #fff;
    }
.gg-scope .sdg-stepper__step.is-done{ color: #6b7280; }
.gg-scope .sdg-stepper__lbl{ white-space: nowrap; }
.gg-scope .sdg-stepper__line{
      flex: 1;
      height: 2px;
      background: #e3e8ef;
      border-radius: 2px;
      transition: background 0.18s ease;
      min-width: 12px;
    }
.gg-scope .sdg-stepper__line.is-done{ background: #cbd5e0; }
    @media (max-width: 600px) {
/* 2026-06-30: hide the 4-step configurator stepper on mobile (phones) to
         declutter the service card; it stays visible at >600px (tablet/desktop). */
.gg-scope .sdg-stepper{ display: none; }
.gg-scope .sdg-stepper__lbl{ display: none; }
.gg-scope .sdg-stepper__step{ padding: 0.18rem; }
    }
/* Sprint 4, GorillaPerks chip strip */
.gg-scope .gp-strip{
      margin: 0.85rem 0 0.6rem;
      padding: 0.85rem 1rem;
      background: linear-gradient(180deg, rgba(240, 244, 255, 0.92) 0%, rgba(225, 232, 255, 0.85) 100%);
      border: 1px solid rgba(0, 42, 191, 0.18);
      border-radius: 12px;
    }
.gg-scope .gp-strip__label{
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #002ABF;
      margin-bottom: 0.5rem;
    }
.gg-scope .gp-strip__label sup{ font-size: 0.6em; vertical-align: super; }
.gg-scope .gp-strip__label strong{ color: #001a8a; font-weight: 800; }
.gg-scope .gp-strip__chips{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.gg-scope .gp-chip{
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.65rem;
      background: #fff;
      border: 1px solid rgba(0, 42, 191, 0.22);
      border-radius: 999px;
      font-size: 0.74rem;
      font-weight: 500;
      color: #2d3748;
      cursor: default;
      box-shadow: 0 1px 2px rgba(0, 42, 191, 0.06);
    }
.gg-scope .gp-chip__icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px; height: 18px;
      border-radius: 50%;
      background: linear-gradient(135deg, #4d7aff, #002ABF);
      color: #fff;
      font-size: 0.65rem;
      line-height: 1;
    }
.gg-scope .gp-chip__label{ font-weight: 600; color: #1f2937; }
.gg-scope .gp-chip__tip{
      position: absolute;
      bottom: calc(100% + 9px);
      left: 50%;
      transform: translateX(-50%);
      width: 220px;
      max-width: 80vw;
      background: #ffffff;
      color: #4b5563;
      font-size: 0.73rem;
      font-weight: 400;
      letter-spacing: 0;
      padding: 0.65rem 0.8rem;
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.09);
      line-height: 1.45;
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.16s ease, visibility 0s linear 0.16s;
      z-index: 2147483647;
      text-align: left;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.13);
    }
.gg-scope .gp-chip__tip::before{
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border: 7px solid transparent;
      border-top-color: rgba(0, 0, 0, 0.09);
    }
.gg-scope .gp-chip__tip::after{
      content: '';
      position: absolute;
      top: calc(100% - 1px);
      left: 50%;
      transform: translateX(-50%);
      border: 6px solid transparent;
      border-top-color: #ffffff;
    }
.gg-scope .gp-chip:hover .gp-chip__tip,
.gg-scope .gp-chip:focus .gp-chip__tip,
.gg-scope .gp-chip:focus-within .gp-chip__tip{
      visibility: visible;
      opacity: 1;
      transition: opacity 0.15s ease, visibility 0s linear 0s;
    }
/* Sprint 4, GorillaGrants opt-in card (neumorphic) */
.gg-scope .grants-card{
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1.5rem 1.75rem;
      background: linear-gradient(180deg, #ffffff 0%, #f5f6fa 100%);
      border: 0;
      border-radius: 22px;
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(15, 28, 53, 0.04),
        0 1px 2px rgba(15, 28, 53, 0.04),
        0 16px 32px -12px rgba(44, 51, 102, 0.16),
        0 2px 8px -2px rgba(184, 94, 10, 0.08);
    }
.gg-scope .grants-card:hover{
      transform: translateY(-2px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(15, 28, 53, 0.04),
        0 1px 2px rgba(15, 28, 53, 0.04),
        0 22px 40px -14px rgba(44, 51, 102, 0.22),
        0 4px 12px -2px rgba(184, 94, 10, 0.14);
    }
.gg-scope .grants-card__check{ position: absolute; opacity: 0; pointer-events: none; }
.gg-scope .grants-card__check-box{
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      border-radius: 9px;
      border: 0;
      background: #fff;
      color: #fff;
      margin-top: 2px;
      box-shadow:
        inset 1px 1px 3px rgba(15, 28, 53, 0.06),
        inset -1px -1px 3px rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 28, 53, 0.06);
      transition: all 0.18s ease;
    }
.gg-scope .grants-card__check:checked ~ .grants-card__check-box{
      background: linear-gradient(135deg, #f59e0b 0%, #b85e0a 100%);
      box-shadow:
        rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
        rgba(254, 215, 170, 0.69) 1px 1.5px 2px 0px inset,
        rgba(217, 119, 6, 0.6) -2.5px -2px 2px 0px inset,
        rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
        rgba(120, 53, 15, 0.7) -1px -4px 20px 0px inset;
      transform: scale(1.05);
    }
.gg-scope .grants-card__body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.gg-scope .grants-card__title{
      font-size: 1.15rem;
      font-weight: 800;
      color: #002ABF;
      letter-spacing: -0.01em;
      line-height: 1.2;
    }
.gg-scope .grants-card__title strong{ color: #b85e0a; font-weight: 800; }
.gg-scope .grants-card__title sup{ font-size: 0.5em; vertical-align: super; font-weight: 600; }
.gg-scope .grants-card__desc{
      font-size: 0.88rem;
      color: #4a5568;
      line-height: 1.55;
    }
/* Sprint 4, AE arrival banner */
.gg-scope .ae-banner{
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      padding: 0.75rem 1rem;
      margin-bottom: 1rem;
      background: linear-gradient(180deg, rgba(244,247,255,0.95) 0%, rgba(232,238,255,0.85) 100%);
      border: 1px solid rgba(63, 102, 251, 0.30);
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0, 42, 191, 0.08);
    }
.gg-scope .ae-banner__icon{
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px; height: 28px;
      border-radius: 8px;
      background: linear-gradient(135deg, #002ABF, #3f66fb);
      color: #fff;
      margin-top: 1px;
    }
.gg-scope .ae-banner__body{ display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.86rem; line-height: 1.4; color: #0f1c35; }
.gg-scope .ae-banner__body strong{ font-weight: 700; }
.gg-scope .ae-banner__sub{ font-size: 0.78rem; color: #4a5568; font-weight: 400; }
/* Sprint 4, Cal.com bridging disclosure (glass card) */
.gg-scope .cal-bridge{
      position: relative;
      margin: 0 0 1rem;
      padding: 0;
      background: rgba(255, 255, 255, 0.55);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      border: 0;
      border-radius: 14px;
      overflow: hidden;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 18px -10px rgba(44, 51, 102, 0.15);
      transition: box-shadow 0.18s ease;
    }
.gg-scope .cal-bridge::before{
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background:
        url('glass-frame/top-left.webp')     top left     / 22px 22px no-repeat,
        url('glass-frame/top-right.webp')    top right    / 22px 22px no-repeat,
        url('glass-frame/bottom-left.webp')  bottom left  / 22px 22px no-repeat,
        url('glass-frame/bottom-right.webp') bottom right / 22px 22px no-repeat,
        url('glass-frame/top.webp')    22px top    / calc(100% - 44px) 22px repeat-x,
        url('glass-frame/bottom.webp') 22px bottom / calc(100% - 44px) 22px repeat-x,
        url('glass-frame/left.webp')   left 22px   / 22px calc(100% - 44px) repeat-y,
        url('glass-frame/right.webp')  right 22px  / 22px calc(100% - 44px) repeat-y;
      mix-blend-mode: multiply;
      z-index: 1;
    }
.gg-scope .cal-bridge > *{ position: relative; z-index: 2; }
.gg-scope .cal-bridge[open]{
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 24px -10px rgba(44, 51, 102, 0.22);
    }
.gg-scope .cal-bridge__head{
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.85rem 1rem;
      cursor: pointer;
      list-style: none;
      font-size: 0.82rem;
      font-weight: 500;
      color: #2d3748;
      user-select: none;
    }
.gg-scope .cal-bridge__head::-webkit-details-marker{ display: none; }
.gg-scope .cal-bridge__icon{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px; height: 22px;
      border-radius: 6px;
      background: rgba(63, 102, 251, 0.15);
      color: #002ABF;
    }
.gg-scope .cal-bridge__chev{
      margin-left: auto;
      font-size: 1.1rem;
      color: #718096;
      transform: rotate(180deg);
      transition: transform 0.18s ease;
    }
.gg-scope .cal-bridge[open] .cal-bridge__chev{ transform: rotate(0deg); }
.gg-scope .cal-bridge__body{
      padding: 0 1rem 1rem;
      font-size: 0.78rem;
      color: #4a5568;
      line-height: 1.45;
    }
.gg-scope .cal-bridge__list{
      list-style: none;
      margin: 0;
      padding: 0.5rem 0;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
.gg-scope .cal-bridge__list li{
      padding: 0.4rem 0.7rem;
      background: rgba(255, 255, 255, 0.7);
      border: 1px solid rgba(15, 28, 53, 0.05);
      border-radius: 8px;
      font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
      font-size: 0.74rem;
      color: #2d3748;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
.gg-scope .cal-bridge__note{
      margin: 0.5rem 0 0;
      font-style: italic;
      font-size: 0.72rem;
      color: #718096;
    }
/* Sprint 4, Investor portal tier notice */
.gg-scope .inv-notice{
      margin: 0.75rem 0 0.5rem;
      padding: 0.85rem 1rem;
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      border-radius: 12px;
      font-size: 0.82rem;
      line-height: 1.45;
    }
.gg-scope .inv-notice__icon{
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px; height: 26px;
      border-radius: 7px;
      font-size: 0.86rem;
      font-weight: 700;
      color: #fff;
    }
.gg-scope .inv-notice__body{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.gg-scope .inv-notice__body strong{ color: #0f1c35; font-weight: 700; }
.gg-scope .inv-notice__body span{ color: #4a5568; }
.gg-scope .inv-notice--free{
      background: rgba(22, 163, 74, 0.06);
      border: 1px solid rgba(22, 163, 74, 0.25);
    }
.gg-scope .inv-notice--free .inv-notice__icon{
      background: linear-gradient(135deg, #22c55e, #16a34a);
    }
.gg-scope .inv-notice--standard{
      background: rgba(63, 102, 251, 0.05);
      border: 1px solid rgba(63, 102, 251, 0.20);
    }
.gg-scope .inv-notice--standard .inv-notice__icon{
      background: linear-gradient(135deg, #3f66fb, #002ABF);
    }
.gg-scope .inv-notice--call{
      background: rgba(184, 94, 10, 0.05);
      border: 1px solid rgba(184, 94, 10, 0.25);
    }
.gg-scope .inv-notice--call .inv-notice__icon{
      background: linear-gradient(135deg, #f59e0b, #b85e0a);
    }
.gg-scope .inv-notice__cta{
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      margin-top: 0.4rem;
      padding: 0.4rem 0.8rem;
      background: linear-gradient(180deg, #f59e0b 0%, #b85e0a 100%);
      color: #fff !important;
      border-radius: 8px;
      font-size: 0.78rem;
      font-weight: 600;
      text-decoration: none;
      max-width: max-content;
      box-shadow: 0 1px 3px rgba(184, 94, 10, 0.3);
    }
.gg-scope .inv-notice__cta:hover{ filter: brightness(1.04); }
    /* Sprint mobile audit, comprehensive responsive fixes */
    @media (max-width: 820px) {
/* Client cards: force 1-col stack with horizontal layout (icon left, content right). */
.gg-scope .client-grid.client-grid--compact{ grid-template-columns: 1fr !important; gap: 0.625rem !important; }
.gg-scope .client-grid.client-grid--compact .client-card{
        display: grid !important;
        grid-template-columns: 84px 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 0.4rem 0.85rem !important;
        align-items: center !important;
        padding: 0.85rem 1rem !important;
        text-align: left !important;
      }
.gg-scope .client-grid.client-grid--compact .client-card__icon{
        grid-area: 1 / 1 / span 3 !important;
        width: 100% !important;
        max-width: 84px !important;
        height: 84px !important;
        margin: 0 !important;
      }
.gg-scope .client-grid.client-grid--compact .client-card__logo{
        grid-column: 2 !important;
        height: 18px !important;
        justify-content: flex-start !important;
        margin: 0 !important;
      }
.gg-scope .client-grid.client-grid--compact .client-card__logo-img{ width: auto !important; }
.gg-scope .client-grid.client-grid--compact .client-card__heading{
        grid-column: 2 !important;
        text-align: left !important;
        margin: 0 !important;
        font-size: 0.95rem !important;
      }
.gg-scope .client-grid.client-grid--compact .client-card__desc{
        grid-column: 2 !important;
        text-align: left !important;
        -webkit-line-clamp: 2 !important;
        font-size: 0.78rem !important;
        margin: 0 !important;
      }
.gg-scope .client-grid.client-grid--compact .client-card__radio{
        position: absolute !important;
        top: 0.85rem !important;
        left: 0.85rem !important;
        right: auto !important;
        z-index: 3 !important;
      }
    }
    /* Commitment buttons: let them wrap cleanly into 3-up rows on narrow screens */
    @media (max-width: 480px) {
.gg-scope .svc__commit-bar{
        flex-wrap: wrap;
        gap: 0.4rem 0.4rem;
      }
.gg-scope .svc__commit-bar-label{
        flex-basis: 100%;
        margin-bottom: 0.2rem;
      }
.gg-scope .svc__commit-bar-btn{
        flex: 1 1 calc(33.333% - 0.3rem);
        padding: 0.55rem 0.5rem !important;
        font-size: 0.78rem !important;
      }
/* Toast: shrink width on small screens so it doesn't overflow */
.gg-scope .waitlist-toast{
        width: calc(100vw - 1.5rem) !important;
        right: 0.75rem !important;
        bottom: 5.5rem !important;
        padding: 0.8rem !important;
      }
.gg-scope .waitlist-toast__title{ font-size: 0.86rem !important; }
/* SDG stepper: hide labels on very narrow */
.gg-scope .sdg-stepper{ padding: 0.5rem 0.6rem; gap: 0.25rem; }
.gg-scope .sdg-stepper__step{ padding: 0.18rem; }
/* CPM card: ensure value doesn't wrap awkwardly */
/* Margin calculator: stack rows */
.gg-scope .margin-row__nums{ grid-template-columns: 1fr 1fr !important; }
/* Service header: prevent waitlist pill from pushing title */
.gg-scope .svc__title{ flex-wrap: wrap; row-gap: 0.3rem; }
/* Bundle tracker: stack header on narrow */
.gg-scope .ms-tracker__head{ flex-wrap: wrap; }
.gg-scope .ms-tracker__lbl{ font-size: 0.78rem; }
/* AE banner: tighten */
.gg-scope .ae-banner{ padding: 0.6rem 0.8rem; }
.gg-scope .ae-banner__body{ font-size: 0.82rem; }
.gg-scope .ae-banner__sub{ font-size: 0.74rem; }
    }
    /* Avoid horizontal overflow anywhere */
    @media (max-width: 820px) {
body,
.gg-scope .container,
.gg-scope .page,
.gg-scope .calc__grid{ overflow-x: hidden; }
.gg-scope .container{ padding-left: 0.875rem; padding-right: 0.875rem; }
    }
    /* Mobile audit fix #2, restore quote summary on final page so users can
       review what they're paying for before clicking Stripe / Book a call. */
    @media (max-width: 880px) {
.gg-scope .youreset__summary{ display: block !important; margin-bottom: 1rem; }
    }
/* Sprint 5, explicit font-family on inline-styled components.
       Almarai for headings, Inter for body. */
/* ============================================================
       Boot skeleton - shows instantly while Babel compiles the JSX
       bundles, then fades out the moment React mounts into #root.
       Layout/sizing mirror the real step-1 UI (step bar, intro,
       client-type panel, summary). (2026-06-03)
       ============================================================ */
/* ═══════════════════════════════════════════════════════════════════════════
   THE BOOT SKELETON IS DELIBERATELY NOT SCOPED. FIXED 10 AUGUST 2026.

   #gg-skeleton is a SIBLING of #root, both direct children of body. The
   calculator puts .gg-scope on #root when it mounts. So every rule below used
   to read `.gg-scope #gg-skeleton ...`, which can never match: the skeleton is
   not inside the mount, and at boot the mount has no class at all yet.

   Measured on the live page before the fix: 38 skeleton rules, all of them
   scope-prefixed, and document.querySelectorAll('.gg-scope #gg-skeleton')
   returned ZERO. The skeleton was rendering as raw unstyled divs with no
   background, so instead of a full-page placeholder you saw bare blocks with
   the loading page showing through. Nicole reported exactly that.

   HOW IT BROKE. The 6 August pass that confined app.css to .gg-scope ran over
   all three stylesheets, and the third one was this block whilst it was still
   inline in index.html. The tool prefixed these too. The 7 August extraction to
   this file preserved the block byte for byte, so it carried the fault across
   without creating it.

   DO NOT RE-SCOPE THESE. The skeleton must paint before the mount exists, which
   is the whole point of it, so it can never live inside .gg-scope. This is the
   same category as the six page-chrome rules app.css leaves unscoped.

   NO RISK TO A HOST. Every selector here needs a #gg-skeleton element to exist,
   and a host embedding the calculator never receives our index.html, so it
   never has one.
   ═══════════════════════════════════════════════════════════════════════════ */
#gg-skeleton{ position: fixed; inset: 0; z-index: 9999; background: #efede7; overflow: auto;
      opacity: 1; transition: opacity .42s ease, filter .42s ease, transform .42s ease; -webkit-font-smoothing: antialiased; }
#gg-skeleton.gg-skeleton--out{ opacity: 0; filter: blur(6px); transform: scale(1.012); pointer-events: none; }
/* 2026-07-15: fixed dangling selector that fused with the rule below and disabled it */
#gg-skeleton .gg-sk-wrap{ max-width: 1320px; margin: 0 auto; padding: 20px 32px 32px; box-sizing: border-box; }
    /* Match the app container's responsive max-width so the skeleton occupies
       the same (wider) space on large screens instead of staying at 1320. */
    @media (min-width: 1400px) {
#gg-skeleton .gg-sk-wrap{ max-width: 1550px; } }
    @media (min-width: 1800px) {
#gg-skeleton .gg-sk-wrap{ max-width: 1700px; } }
.gg-sk{ position: relative; overflow: hidden; background: #e4e1d8; border-radius: 8px; }
.gg-sk::after{ content: ""; position: absolute; inset: 0; transform: translateX(-100%);
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
      animation: gg-sk-shimmer 1.45s ease-in-out infinite; }
    @keyframes gg-sk-shimmer { 100% { transform: translateX(100%); } }
    /* Real-UI entrance: blocks rise + fade in, staggered. */
    @keyframes gg-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) {
.gg-sk::after{ animation: none; }
#gg-skeleton .gg-sk{ animation: gg-sk-pulse 1.6s ease-in-out infinite; }
      @keyframes gg-sk-pulse { 0%,100%{opacity:1;} 50%{opacity:.55;} } }
/* step bar (bordered, full width, 6 evenly-spread steps) */
#gg-skeleton .gg-sk-stepbar{ border: 1px solid #e7e3da; background: #faf9f6; border-radius: 16px; height: 122px;
      box-sizing: border-box; padding: 0 26px; margin-bottom: 24px; display: flex; align-items: center; }
#gg-skeleton .gg-sk-steprow{ display: flex; align-items: flex-start; width: 100%; }
#gg-skeleton .gg-sk-step{ display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 0 0 auto; }
#gg-skeleton .gg-sk-dot{ width: 48px; height: 48px; border-radius: 50%; }
#gg-skeleton .gg-sk-dot--active{ background: #cfd6f2; }
#gg-skeleton .gg-sk-steplabel{ width: 74px; height: 10px; border-radius: 5px; }
#gg-skeleton .gg-sk-connector{ flex: 1 1 auto; height: 2px; border-radius: 2px; margin: 24px 10px 0; }
/* main grid mirrors .calc__grid (1fr / 380, 32 gap) */
#gg-skeleton .gg-sk-grid{ display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 32px; align-items: start; }
/* intro */
#gg-skeleton .gg-sk-intro{ margin-bottom: 32px; }
#gg-skeleton .gg-sk-eyebrow{ width: 240px; max-width: 100%; height: 12px; border-radius: 5px; margin-bottom: 16px; }
#gg-skeleton .gg-sk-h1{ width: 280px; max-width: 100%; height: 38px; border-radius: 9px; margin-bottom: 16px; }
#gg-skeleton .gg-sk-introsub{ width: 430px; max-width: 90%; height: 16px; border-radius: 6px; }
/* client-type panel */
#gg-skeleton .gg-sk-panel{ border: 1px solid #e7e3da; background: #faf9f6; border-radius: 20px; padding: 28px 24px; }
#gg-skeleton .gg-sk-peyebrow{ width: 84px; height: 11px; border-radius: 5px; margin-bottom: 16px; }
#gg-skeleton .gg-sk-ptitle{ width: 200px; height: 30px; border-radius: 8px; margin-bottom: 14px; }
#gg-skeleton .gg-sk-psub{ width: 360px; max-width: 90%; height: 14px; border-radius: 6px; margin-bottom: 28px; }
#gg-skeleton .gg-sk-cards3{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
#gg-skeleton .gg-sk-ccard{ height: 270px; border: 1px solid #e7e3da; background: #fff; border-radius: 16px;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; box-sizing: border-box; }
#gg-skeleton .gg-sk-cicon{ width: 84px; height: 84px; border-radius: 50%; }
#gg-skeleton .gg-sk-clogo{ width: 140px; height: 34px; border-radius: 7px; }
#gg-skeleton .gg-sk-cline{ width: 84px; height: 13px; border-radius: 6px; }
#gg-skeleton .gg-sk-cline2{ width: 150px; height: 10px; border-radius: 5px; }
/* summary */
#gg-skeleton .gg-sk-summary{ border: 1px solid #e7e3da; background: #faf9f6; border-radius: 18px; padding: 24px; box-sizing: border-box; }
#gg-skeleton .gg-sk-plancard{ border: 1px solid #e7e3da; background: #fff; border-radius: 14px; padding: 16px;
      display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
#gg-skeleton .gg-sk-avatar{ width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
#gg-skeleton .gg-sk-grow{ flex: 1 1 auto; }
#gg-skeleton .gg-sk-srow{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
#gg-skeleton .gg-sk-savebox{ border: 1px dashed #e3ddcf; border-radius: 12px; padding: 16px; margin-bottom: 20px; }
#gg-skeleton .gg-sk-acctrow{ border: 1px solid #e7e3da; background: #fff; border-radius: 12px; height: 60px;
      box-sizing: border-box; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
#gg-skeleton .gg-sk-totalbox{ border: 1px solid #d7dcf0; background: #f4f6fd; border-radius: 14px; padding: 18px; }
#gg-skeleton .gg-sk-bigtotal{ width: 80px; height: 30px; border-radius: 7px; }
#gg-skeleton .gg-sk-btn{ width: 100%; height: 46px; border-radius: 12px; background: #d7dcf0; margin-top: 16px; }
#gg-skeleton .gg-sk-line{ height: 12px; border-radius: 6px; }
    @media (max-width: 900px) {
#gg-skeleton .gg-sk-wrap{ padding: 16px 14px 24px; }
/* 2026-06-05: minmax(0,1fr) instead of bare 1fr - a bare 1fr track has an
         `auto` minimum, so the fixed-width placeholder bars (e.g. the 430px
         intro line) forced the column wider than the phone viewport and the
         skeleton overflowed horizontally. min 0 lets content shrink to fit. */
#gg-skeleton .gg-sk-grid{ grid-template-columns: minmax(0, 1fr); }
#gg-skeleton .gg-sk-summary{ display: none; }
#gg-skeleton .gg-sk-stepbar{ display: none; }
#gg-skeleton .gg-sk-cards3{ grid-template-columns: minmax(0, 1fr); }
/* auto height + smaller icon so the circle isn't squashed into an ellipse */
#gg-skeleton .gg-sk-ccard{ height: auto; gap: 12px; padding: 16px; }
#gg-skeleton .gg-sk-cicon{ width: 56px; height: 56px; flex-shrink: 0; } }
/* Fix: selected waitlisted Starter/Scale tier radios kept a blue premium-check
       shadow (from app.css ".tier .tier__radio.is-on") under their orange fill,
       because the waitlist rule sets an orange background but no box-shadow. Force
       the orange shadow here (this block loads after app.v2.css). Recommended &
       Enterprise are excluded and keep their own shadows. */
.gg-scope .tier--waitlist.tier--active:not(.tier--recommended):not(.tier--ent) .tier__radio.is-on{
      box-shadow:
        rgba(255, 255, 255, 0.5) -2px -2px 2px -1px,
        rgba(255, 232, 211, 0.69) 1px 1.5px 2px 0px inset,
        rgba(227, 168, 123, 0.63) -2.5px -2px 2px 0px inset,
        rgba(84, 84, 84, 0.35) 2px 2px 8px 0px,
        rgba(184, 94, 10, 0.8) -1px -4px 20px 0px inset !important;
    }
  


/* ═══════════════════════════════════════════════════════════════════════════
   ROUTE-AWARE BOOT SKELETON. 10 August 2026, Nicole.

   THE PROBLEM. index.html is one file for every route, so /partnerships was
   getting the calculator's skeleton: a six-step bar, a client-type panel and a
   summary sidebar, none of which that page has. It has a THREE step bar and
   either a split hero or a rail beside a calendar. So the placeholder promised
   a layout the page then did not deliver, which is worse than no placeholder.

   HOW THE ROUTE IS KNOWN BEFORE ANYTHING RENDERS. A three-line inline script in
   the head, before the stylesheets, puts gg-rt-lp on <html> for /partnerships
   and adds gg-rt-book when a ?t= token is present. It runs during head parsing,
   so the correct variant is chosen on the FIRST paint and nothing flashes.

   DEFAULT IS THE CALCULATOR, because that is most of the traffic and because a
   failure of the script leaves the previous behaviour rather than a blank page.
   ═══════════════════════════════════════════════════════════════════════════ */
#gg-skeleton .gg-sk-wrap--lp,
#gg-skeleton .gg-sk-wrap--book{ display: none; }
.gg-rt-lp #gg-skeleton .gg-sk-wrap--calc{ display: none; }
.gg-rt-lp #gg-skeleton .gg-sk-wrap--lp{ display: block; }
.gg-rt-lp.gg-rt-book #gg-skeleton .gg-sk-wrap--lp{ display: none; }
.gg-rt-lp.gg-rt-book #gg-skeleton .gg-sk-wrap--book{ display: block; }

/* Three steps rather than six: the connectors take the slack. */
#gg-skeleton .gg-sk-stepbar--3 .gg-sk-connector{ flex: 1 1 auto; width: auto; }

/* ── the no-token hero ── */
#gg-skeleton .gg-sk-lpgrid{ display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: start; }
#gg-skeleton .gg-sk-lph1{ height: 46px; border-radius: 10px; margin-bottom: 10px; }
#gg-skeleton .gg-sk-lpbtn{ width: 210px; height: 52px; border-radius: 12px; margin: 38px 0 20px; }
#gg-skeleton .gg-sk-chips{ display: flex; gap: 8px; flex-wrap: wrap; }
#gg-skeleton .gg-sk-chip{ height: 36px; border-radius: 12px; }
#gg-skeleton .gg-sk-lpcard{
  border: 1px solid #e7e3da; background: #faf9f6; border-radius: 18px; padding: 26px;
}
#gg-skeleton .gg-sk-lprow{ display: flex; align-items: center; gap: 12px; margin-top: 16px; }
#gg-skeleton .gg-sk-lpnum{ width: 26px; height: 22px; border-radius: 6px; flex: none; }

/* ── the token state, rail beside the calendar ── */
#gg-skeleton .gg-sk-center{ text-align: center; margin-bottom: 26px; }
#gg-skeleton .gg-sk-pill{ width: 420px; max-width: 100%; height: 44px; border-radius: 14px; margin: 0 auto; }
#gg-skeleton .gg-sk-bookgrid{ display: grid; grid-template-columns: 352px 1fr; gap: 24px; align-items: start; }
#gg-skeleton .gg-sk-rail{ display: flex; flex-direction: column; gap: 14px; }
#gg-skeleton .gg-sk-railcard{
  border: 1px solid #e7e3da; background: #faf9f6; border-radius: 18px; padding: 20px;
}
#gg-skeleton .gg-sk-calbox{
  border: 1px solid #e7e3da; background: #faf9f6; border-radius: 18px; padding: 14px;
}
#gg-skeleton .gg-sk-calinner{ background: #fff; border-radius: 14px; height: 500px; }

@media (max-width: 980px) {
  #gg-skeleton .gg-sk-lpgrid,
  #gg-skeleton .gg-sk-bookgrid{ grid-template-columns: 1fr; gap: 20px; }
}