/* Guided contact (home page): one question at a time, tap to answer, then a tier suggestion with a short celebration.
   Smoothness rule: everything that moves animates transform and opacity only (GPU, no layout or paint per frame). */
.cg {
  --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --text-xs: 0.875rem; --text-sm: 0.9375rem; --text-md: 1rem; --text-xl: 1.5625rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --color-ink: #FAFAFB; --color-ink-2: #F4F2FB; --color-rule: rgb(255 255 255 / 0.14); --color-wash: rgb(255 255 255 / 0.06);
  --color-accent: #6F00FF; --color-accent-2: #3EE6B0; --color-accent-glow: #9A5CFF; --color-link: #E6DAFF; --color-ember-text: #BFFBE6; --color-focus: #9A5CFF;
  --color-field: rgb(10 10 12 / 0.9); --color-error: #ff8a78; --radius-field: 14px; --tracking-display: -0.02em;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
/* Buttons: only where the page has none of its own (:where keeps this at zero strength, so the home page's own buttons win). */
:where(.cg) :where(.btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 28px; border-radius: 999px; border: 1px solid var(--color-rule); background: none; color: var(--color-ink); font: 600 var(--text-md) var(--font-display); text-decoration: none; cursor: pointer; }
:where(.cg) :where(.btn-primary) { border-color: transparent; color: #0A0A0C; background: linear-gradient(100deg, #9A5CFF, #3EE6B0); }
.cg { position: relative; overflow: hidden; overflow: clip; }   /* clip, not hidden: a hidden box would stop the Continue row from sticking to the screen */
.cg [hidden] { display: none !important; }
.cg-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.cg-bar { height: 4px; border-radius: 4px; background: var(--color-wash); overflow: hidden; margin-bottom: var(--space-lg); }
.cg-bar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2)); transform-origin: left center; transform: scaleX(0); transition: transform .45s var(--ease-out); }
.cg-step { }
.cg-step.cg-in { animation: cg-in .32s var(--ease-out); }
.cg-step.cg-back { animation: cg-in-back .32s var(--ease-out); }
@keyframes cg-in { from { opacity: 0; transform: translate3d(18px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes cg-in-back { from { opacity: 0; transform: translate3d(-18px, 0, 0); } to { opacity: 1; transform: none; } }
.cg-q { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl, 1.5rem); line-height: 1.15; letter-spacing: var(--tracking-display); margin: 0 0 var(--space-xs); }
.cg-q:focus { outline: none; }
.cg-sub { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.cg-parts { display: grid; gap: var(--space-md) var(--space-lg); grid-template-columns: minmax(0, 1fr); }
.cg-parts.cg-cols-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cg-groups { display: grid; gap: var(--space-sm) var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.cg-part-wrap > .cg-sub { margin-bottom: var(--space-xs); }
.cg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-group { margin: 0 0 8px; font: 600 var(--text-xs, .75rem)/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-ink-2); }
.cg-desc { min-height: 1.5em; margin: 10px 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }
.cg-opt { position: relative; display: inline-flex; align-items: center; width: auto; min-height: 38px; padding: 7px 34px 7px 14px; text-align: left; color: var(--color-ink); background: var(--color-field); border: 1px solid var(--color-rule); border-radius: 999px; font: 500 0.8125rem/1.25 var(--font-body); cursor: pointer; transition: border-color .18s ease; }
.cg-opt:hover { border-color: var(--color-accent-glow); }
.cg-opt:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Selected: the brand's indigo-to-mint edge (the same gradient as the filled buttons) fades in over the plain border */
.cg-opt::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: linear-gradient(100deg, var(--color-accent-glow), var(--color-accent-2)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.cg-opt[aria-pressed="true"]::before { opacity: 1; }
.cg-opt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(100deg, rgb(111 0 255 / 0.16), rgb(62 230 176 / 0.1)); opacity: 0; transition: opacity .22s ease; pointer-events: none; }
.cg-opt[aria-pressed="true"]::after { opacity: 1; }
.cg-opt > span { position: relative; z-index: 1; }
.cg-tick { position: absolute; z-index: 1; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; fill: none; stroke: var(--color-accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .28s var(--ease-out); }
.cg-opt[aria-pressed="true"] .cg-tick { stroke-dashoffset: 0; }
.cg-nav { position: sticky; bottom: 10px; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); padding: 8px 10px; border-radius: 999px; background: rgb(10 10 12 / 0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--color-rule); }
.cg-nav .btn { min-width: 120px; }
.cg-back-btn { background: none; border: 0; padding: 10px 4px; color: var(--color-link); font: 500 var(--text-sm) var(--font-body); text-decoration: underline; cursor: pointer; }
.cg-back-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cg-hint { min-height: 1.4em; margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-error); }

/* The result: the suggested tier. No confetti; a calm, one-off reveal in the brand's own colours. */
.cg-result { position: relative; text-align: center; }
.cg-kicker { display: inline-block; margin-bottom: var(--space-sm); font: 600 var(--text-xs) var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--color-ember-text); }
.cg-tier { margin: 0; overflow: hidden; padding-bottom: .08em; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 6.5vw, 3.6rem); line-height: 1.05; letter-spacing: var(--tracking-display); }
.cg-tier:focus { outline: none; }
/* The same indigo-to-mint wave as the flowing word in the headings, held still here */
.cg-tier-word { display: inline-block; background-color: var(--color-accent); background-image: repeating-linear-gradient(100deg, var(--color-accent-glow) 0px, var(--color-accent-2) 125px, var(--color-accent-glow) 250px); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.cg-price { margin: var(--space-sm) 0 var(--space-md); color: var(--color-ink-2); }
.cg-price b { color: var(--color-ink); font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.cg-why { list-style: none; margin: 0 auto var(--space-md); padding: 0; display: grid; gap: 8px; max-width: 440px; text-align: left; }
.cg-why li { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border: 1px solid var(--color-rule); border-radius: var(--radius-field); background: var(--color-field); font-size: var(--text-sm); }
.cg-why li::before { content: '✓'; color: var(--color-accent-2); font-weight: 700; }
.cg-note { margin: 0 0 var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.cg-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-sm); }
.cg-result.cg-celebrate .cg-kicker { animation: cg-rise .5s var(--ease-out) both; }
.cg-result.cg-celebrate .cg-tier-word { animation: cg-lift .8s var(--ease-out) .1s both; }
.cg-result.cg-celebrate .cg-price { animation: cg-rise .5s var(--ease-out) .3s both; }
.cg-result.cg-celebrate .cg-why li { animation: cg-rise .5s var(--ease-out) both; animation-delay: calc(.42s + var(--i, 0) * 80ms); }
.cg-result.cg-celebrate .cg-note, .cg-result.cg-celebrate .cg-actions { animation: cg-rise .5s var(--ease-out) .75s both; }
@keyframes cg-lift { from { opacity: 0; transform: translate3d(0, 105%, 0); } to { opacity: 1; transform: none; } }
@keyframes cg-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
/* One soft band of indigo-to-mint light crosses the card, once */
.cg-sweep { position: absolute; top: -40px; bottom: -40px; left: 0; width: 45%; pointer-events: none; opacity: 0; background: linear-gradient(100deg, transparent, rgb(154 92 255 / 0.16) 35%, rgb(62 230 176 / 0.18) 65%, transparent); will-change: transform, opacity; }
.cg-result.cg-celebrate .cg-sweep { animation: cg-sweep 1.1s var(--ease-out) .05s both; }
@keyframes cg-sweep { 0% { opacity: 0; transform: translate3d(-120%, 0, 0) skewX(-12deg); } 25% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; transform: translate3d(340%, 0, 0) skewX(-12deg); } }
@media (max-width: 560px) { .cg-nav .btn { min-width: 0; flex: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cg-step.cg-in, .cg-step.cg-back, .cg-result.cg-celebrate * { animation: none !important; }
  .cg-bar i, .cg-opt, .cg-opt::before, .cg-opt::after, .cg-tick { transition: none; }
  .cg-sweep { display: none; }
}
.cg-stage { display: grid; align-content: start; }
#contact-guide { scroll-margin-top: 96px; }
.cg { scroll-margin-top: 104px; }

/* Pages with several questions side by side */
.cg-part { margin: 0 0 var(--space-xs); font: 600 var(--text-md)/1.3 var(--font-display); color: var(--color-ink); }
.cg-later { margin: var(--space-sm) 0 0; font-size: var(--text-sm); color: var(--color-ink-2); }

.cg-send-wrap { display: grid; gap: var(--space-xs); justify-items: center; margin-top: var(--space-md); }
.cg-send-sub { margin: 0; font-size: var(--text-sm); color: var(--color-ink-2); text-align: center; }
.cg-send { width: 100%; max-width: 360px; }

.cg-resume { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.cg-resume .cg-back-btn { display: inline; padding: 0; }

/* On a wide screen everything fits, so the button row needs no bar behind it */
@media (min-width: 900px) { .cg-nav { position: static; padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } }

@media (max-width: 560px) {
  .cg-chips { gap: 6px; }
  .cg-opt { min-height: 38px; padding: 7px 30px 7px 12px; font-size: 0.8125rem; }
  .cg-tick { right: 10px; width: 13px; height: 13px; margin-top: -6.5px; }
  .cg-group { margin-bottom: 6px; }
}

.cg { text-align: left; }
.cg-result { text-align: center; }
.cg-sub, .cg-desc, .cg-group { max-width: none; margin-inline: 0; text-align: left; }

.cg-redo { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 10px 8px; color: var(--color-ink-2); font: 500 var(--text-sm) var(--font-body); cursor: pointer; border-radius: 999px; }
.cg-redo:hover { color: var(--color-ink); }
.cg-redo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cg-redo-ic { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.cg-redo:hover .cg-redo-ic { transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .cg-redo-ic { transition: none; } }
#contact-guide .cg-sub, #contact-guide .cg-desc, #contact-guide .cg-group { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }