/* Reuse the pricing comparison component and its tokens inside the GO comparison only. */
@import url('./pricing-pages.css');

/* Klingit GO. Scoped to the opt-in dynamic block; shared navigation remains unchanged. */
.klingit-go {
    --go-paper: #f9f5ec;
    --go-sand: #f2e9d5;
    --go-peach: #f4b183;
    background: var(--go-paper);
    color: #212427;
    font-family: Inter, sans-serif;
    letter-spacing: .02em;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    max-width: none !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}
.klingit-go *, .klingit-go *::before, .klingit-go *::after { box-sizing: border-box; }
.klingit-go :where(p, h1, h2, h3, figure, blockquote, .wp-block-group, .wp-block-buttons, details) { margin: 0; }
.klingit-go .go-section { padding: 88px 32px; width: 100%; margin: 0; }
.klingit-go .go-container { max-width: 1240px; margin: 0 auto; width: 100%; }
.klingit-go h1 { font: 500 64px/1.094 PolySans, sans-serif; letter-spacing: -.025em; }
.klingit-go h2 { font: 500 48px/1.045 PolySans, sans-serif; letter-spacing: -.02em; }
.klingit-go h3 { font: 500 24px/1.2 PolySans, sans-serif; }
.klingit-go p + p { margin-top: 20px; }
.klingit-go img { display: block; max-width: 100%; height: auto; }
.klingit-go .go-section-title { text-align: center; margin-bottom: 64px; }
.klingit-go .go-section-title p { max-width: 900px; margin: 24px auto 0; font-size: 14px; }
.klingit-go .go-hero { padding-top: 48px; padding-bottom: 48px; }
.klingit-go .go-hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 100px; align-items: center; }
.klingit-go .go-eyebrow { font-size: 12px; margin-bottom: 16px; }
.klingit-go .go-hero-copy > p:not(.go-eyebrow) { margin-top: 20px; max-width: 530px; }
.klingit-go .go-hero-copy h3 { font-size: 20px; margin: 24px 0 20px; }
/* Keep the Figma montage footprint; motion, timing, hover pause and reduced
   motion come unchanged from the homepage's shared ks-* component. */
.klingit-go .go-hero-image { min-width: 0; container-type: inline-size; }
.klingit-go .go-hero-image .ks-wrap {
    --ks-gap: 1.6cqw;
    aspect-ratio: 981 / 994;
    min-height: 0;
    max-height: none;
}
.klingit-go .go-hero-image .ks-track { margin-top: -25%; }
.klingit-go .go-hero-image .ks-col--up .ks-track { margin-top: -75%; }
.klingit-go .go-hero-image .ks-card { position: relative; border-radius: 1.6cqw; }
.klingit-go .go-hero-image img { width: 100%; height: 100%; object-fit: cover; }
.klingit-go .go-portrait-label {
    position: absolute; inset: auto 1.7cqw 1.7cqw;
    display: flex; flex-direction: column; align-items: flex-start; gap: 1.2cqw;
    font-size: 3cqw; line-height: 1.15; letter-spacing: 0;
}
.klingit-go .go-portrait-label span { background: var(--go-sand); border-radius: 4cqw; padding: .3cqw 1.7cqw; white-space: nowrap; }
.klingit-go .go-portrait-label span + span { font-size: 2.5cqw; }
.klingit-go .wp-block-buttons { display: flex; justify-content: center; gap: 16px; }
.klingit-go .wp-block-button__link { background: #212427; color: #fff; padding: 12px 24px; border-radius: 32px; font: inherit; font-size: 16px; line-height: 1.5; text-decoration: none; }
.klingit-go .go-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.klingit-go .go-hero .go-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.klingit-go .go-services .wp-block-button { width: 100%; }
.klingit-go .go-services .wp-block-button__link { border: 1px solid #898780; background: transparent; color: inherit; width: 100%; text-align: left; padding: 12px 20px; display: flex; align-items: center; gap: 12px; }
.klingit-go .go-services .wp-block-button__link::before { content: ''; flex: 0 0 24px; height: 24px; background: url('../images/go/web.webp') center / contain no-repeat; }
.klingit-go .go-services .wp-block-button:nth-child(3) .wp-block-button__link::before { background-image: url('../images/go/video.webp'); }
.klingit-go .go-services .wp-block-button:nth-child(4) .wp-block-button__link::before { background-image: url('../images/go/text.webp'); }
.klingit-go .go-services .wp-block-button__link::after { content: '›'; margin-left: auto; }
.klingit-go a:hover { filter: brightness(.9); }
.klingit-go :where(a, summary, [tabindex]):focus-visible { outline: 3px solid #825132; outline-offset: 5px; }
.klingit-go .go-proof { text-align: center; }
.klingit-go .go-proof-text { font-family: PolySans, sans-serif; font-size: 24px; font-weight: 500; }
.klingit-go .go-logos { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-top: 48px; }
.klingit-go .go-logos img { max-height: 32px; width: auto; }
.klingit-go .go-tinted { background: var(--go-sand); }
/* Core flow layout adds block gaps to siblings; grid/flex gap owns spacing here. */
.klingit-go :is(.go-people, .go-three, .go-two, .go-logos) > * { margin-block: 0; }
.klingit-go .go-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.klingit-go .go-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; }
.klingit-go .go-benefits { padding-top: 48px; padding-bottom: 48px; }
.klingit-go .go-feature { padding: 24px; background: var(--go-paper); border-radius: 16px; }
.klingit-go .go-icon { margin-bottom: 28px; }
.klingit-go .go-icon img { width: 44px; height: 44px; object-fit: contain; }
.klingit-go .go-feature h3 { font-size: 16px; margin-bottom: 12px; }
.klingit-go .go-feature p:not(.go-icon) { font-size: 14px; }
.klingit-go .go-people { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.klingit-go .go-person img { width: 100%; border-radius: 16px; aspect-ratio: 229 / 250; object-fit: cover; }
.klingit-go .go-person h3 { font-size: 20px; margin: 16px 0 4px; }
.klingit-go .go-person p { font-size: 16px; color: #65645f; }
.klingit-go .go-match { padding-top: 48px; }
.klingit-go .go-banner { border-radius: 16px; padding: 32px; text-align: center; background: linear-gradient(160deg, #f6cdb4 30%, #ffb593 65%, #f2e9d5 80%); }
.klingit-go .go-banner h3 { font-size: 32px; margin-bottom: 24px; }
.klingit-go .go-quote { position: relative; background: var(--go-sand); border-radius: 24px; padding: 48px 64px; }
.klingit-go .go-quote::after { content: '”'; position: absolute; right: 64px; top: 32px; color: var(--go-peach); font: 140px/1 Georgia, serif; }
.klingit-go .go-quote-top { display: flex; align-items: center; gap: 24px; padding-right: 80px; margin-bottom: 48px; }
.klingit-go .go-quote-top > figure { flex: 0 0 100px; }
.klingit-go .go-quote-top img { width: 100px; border-radius: 50%; }
.klingit-go .go-quote-person p { margin-top: 8px; }
.klingit-go .wp-block-quote { border: 0; padding: 0; font-family: PolySans, sans-serif; font-size: 32px; line-height: 1.12; font-weight: 500; }
.klingit-go .go-quote-logo { margin-top: 32px; }
.klingit-go .go-quote-logo img { width: 132px; height: 32px; object-fit: contain; object-position: left; }
.klingit-go .go-explainer { border: 1px solid #d4cbb8; border-radius: 24px; padding: 32px; }
.klingit-go .go-explainer h3 { margin-bottom: 32px; max-width: 440px; }
.klingit-go .go-comparison-scroll { margin-top: 0; }
.klingit-go .go-comparison .kpr-compare-column { flex-basis: 0; min-width: 280px; }
.klingit-go .go-comparison .go-comparison-criteria { min-width: 254px; flex-grow: .77; border-radius: 24px 0 0 24px; }
.klingit-go .go-comparison .kpr-compare-column h3 { height: 64px; font-size: 24px; line-height: 1.2; }
.klingit-go .go-comparison .kpr-compare-column--featured { padding-block: 48px; }
.klingit-go .go-comparison .kpr-compare-features { margin-top: 48px; }
.klingit-go .go-comparison .kpr-compare-features li { min-height: 24px; }
.klingit-go .go-comparison .go-comparison-criteria::before { content: ''; display: block; height: 64px; }
.klingit-go .go-step { display: grid; grid-template-columns: minmax(0, 1fr) 350px; align-items: center; gap: 48px; padding: 48px 0; border-bottom: 1px solid #d8d1c5; }
.klingit-go .go-step:first-of-type { padding-top: 0; }
.klingit-go .go-step:last-child { padding-bottom: 0; border: 0; }
.klingit-go .go-step-number { display: inline-block; background: var(--go-sand); border-radius: 6px; padding: 4px 8px; margin-bottom: 24px; font-size: 14px; }
.klingit-go .go-step-heading { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.klingit-go .go-step-heading p { font-size: 14px; flex-shrink: 0; }
.klingit-go .go-step-image img { width: 100%; border-radius: 24px; }
.klingit-go .go-case img { width: 100%; border-radius: 24px; }
.klingit-go .go-case h3 { font-size: 20px; margin-top: 24px; }
.klingit-go .go-case p { margin-top: 8px; }
.klingit-go .go-case a { color: inherit; font-size: 16px; }
.klingit-go .go-subscriptions .go-two { gap: 32px; grid-auto-rows: 1fr; }
.klingit-go .go-subscription-link { text-align: center; }
.klingit-go .go-subscription-link a { color: inherit; text-decoration: none; }
.klingit-go .go-subscription-link a:hover { text-decoration: underline; }
.klingit-go .go-subscription-link span { margin-left: 12px; }
.klingit-go .go-option { background: var(--go-sand); padding: 40px 48px; border-radius: 24px; }
.klingit-go .go-option-go { background: var(--go-peach); }
.klingit-go .go-option h3 { font-size: 32px; margin-bottom: 24px; }
.klingit-go .go-option p + p { margin-top: 12px; }
.klingit-go .go-subscription-note { text-align: center; font-size: 14px; margin: 40px 0 16px; }
.klingit-go .go-faq details { border-bottom: 1px solid #dcd5c9; padding: 24px; }
.klingit-go .go-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 32px; }
.klingit-go .go-faq summary::-webkit-details-marker { display: none; }
.klingit-go .go-faq summary::after { content: '+'; }
.klingit-go .go-faq details[open] summary::after { content: '−'; }
.klingit-go .go-faq details p { margin-top: 16px; }
@media (max-width: 767px) {
    .klingit-go .go-section { padding: 64px 16px; }
    .klingit-go h1 .go-desktop-break { display: none; }
    .klingit-go .go-hero-copy > p:not(.go-eyebrow) { max-width: 322px; margin-inline: auto; }
    .klingit-go h1 { font-size: 48px; line-height: 1; }
    .klingit-go h2 { font-size: 32px; line-height: 1.05; }
    .klingit-go .go-section-title { margin-bottom: 48px; }
    .klingit-go .go-section-title p { margin-top: 24px; }
    .klingit-go .go-hero { padding-top: 48px; }
    .klingit-go .go-hero-grid, .klingit-go .go-three, .klingit-go .go-two { grid-template-columns: 1fr; gap: 32px; }
    .klingit-go .go-hero-copy { text-align: center; }
    .klingit-go .go-hero .go-services, .klingit-go .go-services { grid-template-columns: 1fr; }
    .klingit-go .go-hero-image { margin-top: 16px; }
    .klingit-go .go-proof-text { font-size: 20px; line-height: 1.2; }
    .klingit-go .go-logos { overflow: hidden; gap: 32px; margin-top: 32px; }
    .klingit-go .go-logos figure { flex: 0 0 auto; }
    .klingit-go .go-logos img { max-height: 24px; max-width: 128px; }
    .klingit-go .go-feature { min-height: 210px; }
    .klingit-go .go-people { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
    .klingit-go .go-person h3 { font-size: 20px; }
    .klingit-go .go-person p { font-size: 12px; }
    .klingit-go .go-banner { padding: 32px 24px; }
    .klingit-go .go-quote { padding: 32px 24px; }
    .klingit-go .go-quote::after { right: 24px; top: 24px; font-size: 100px; }
    .klingit-go .go-quote-top { display: block; padding: 0; margin-bottom: 32px; }
    .klingit-go .go-quote-top img { width: 72px; margin-bottom: 24px; }
    .klingit-go .go-quote-person h3 { font-size: 20px; }
    .klingit-go .go-quote-person p { font-size: 14px; }
    .klingit-go .wp-block-quote { font-size: 20px; line-height: 1.05; }
    .klingit-go .go-explainer { padding: 24px; }
    .klingit-go .go-comparison-scroll { margin-right: -16px; }
    .klingit-go .go-comparison .kpr-compare-column { flex: 0 0 266px; min-width: 0; }
    .klingit-go .go-comparison .kpr-compare-column--featured { padding-block: 40px; }
    .klingit-go .go-comparison .kpr-compare-column h3,
    .klingit-go .go-comparison .go-comparison-criteria::before { height: 32px; }
    .klingit-go .go-comparison .kpr-compare-features { margin-top: 32px; }
    .klingit-go .go-comparison .kpr-compare-column--featured .kpr-compare-features { padding-block: 0; }
    .klingit-go .go-step { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
    .klingit-go .go-step-heading { display: block; }
    .klingit-go .go-step-heading p { margin-top: 12px; }
    .klingit-go .go-step-image img { width: 100%; }
    .klingit-go .go-option { padding: 32px; }
    .klingit-go .go-proof-second { order: 1; }
    .klingit-go .go-faq { order: 2; }
    .klingit-go .go-contact { order: 3; }
    .klingit-go .go-faq h2 { font-size: 48px; }
    .klingit-go .go-faq details { padding: 24px 0; }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .klingit-go .go-hero-grid { gap: 40px; }
    .klingit-go h1 { font-size: 48px; }
    .klingit-go .go-logos { gap: 24px; }
    .klingit-go .go-logos img { max-height: 24px; }
    .klingit-go .go-step { grid-template-columns: 1fr 280px; }
    .klingit-go .go-step-heading { display: block; }
}