/* HoneyGold onboarding — layout follows site article; accents use --granola-honeygold */

body.product-honeygold.honeygold-onboard-page {
    --hg-accent: var(--granola-honeygold);
    --hg-accent-soft: #e8c66a;
    --hg-accent-glow: rgba(208, 154, 0, 0.28);
}

body.honeygold-onboard-page #primary {
    padding-top: 18px;
    margin-top: 36px;
}

body.honeygold-onboard-page .site-main {
    padding-top: 18px;
    padding-bottom: 50px;
}

body.honeygold-onboard-page article.hg-onboard-article {
    width: 100%;
    max-width: 1160px;
    margin: 10px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

body.honeygold-onboard-page .entry-header.hg-onboard-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin-bottom: 0.5em;
}

/* Override .entry-header p (max-width 580px) so eyebrow centers with title, not shifted left */
body.honeygold-onboard-page .entry-header.hg-onboard-header .hg-onboard-eyebrow {
    font-size: 1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-align: center;
    width: 100%;
    max-width: none;
    margin: 0 0 0.75em;
    padding: 0;
    color: var(--hg-accent);
}

body.honeygold-onboard-page .entry-header.hg-onboard-header .hg-onboard-eyebrow a {
    color: var(--hg-accent);
    text-decoration: none;
}

body.honeygold-onboard-page .entry-header.hg-onboard-header .hg-onboard-eyebrow a:hover {
    text-decoration: underline;
}

body.honeygold-onboard-page .entry-header.hg-onboard-header .entry-title {
    margin-top: 0.25em;
    margin-bottom: 1rem;
    width: 100%;
    text-align: center;
}

body.honeygold-onboard-page .entry-header.hg-onboard-header .hg-onboard-intro {
    font-size: 1.2em;
    line-height: 1.52;
    font-weight: 400;
    color: #2f353c;
    text-align: center;
    width: 100%;
    max-width: 52rem;
    margin: 1.25em auto 0;
    letter-spacing: 0.2px;
}

body.honeygold-onboard-page .entry-content.hg-onboard-content {
    margin-top: 2em;
}

.hg-onboard-steps {
    margin-bottom: 2rem;
}

#hg-onboard-step-indicator {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hg-onboard-step-item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1em;
    line-height: 1.3;
    color: #5c6368;
}

.hg-onboard-step-item.is-active {
    color: #2f353c;
    font-weight: 700;
}

.hg-onboard-step-item.is-done {
    color: var(--hg-accent);
}

.hg-onboard-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-size: 0.85em;
    font-weight: 700;
}

.hg-onboard-step-item.is-active .hg-onboard-step-num,
.hg-onboard-step-item.is-done .hg-onboard-step-num {
    background: var(--hg-accent);
    border-color: var(--hg-accent);
    color: #fff;
}

.hg-onboard-panel-title {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.3;
    color: #2f353c;
    margin: 0 0 0.5em;
}

.hg-onboard-panel-lead {
    font-size: 1.2em;
    line-height: 1.52;
    font-weight: 400;
    color: #2f353c;
    margin: 0 0 1.5em;
    letter-spacing: 0.2px;
}

.hg-onboard-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.hg-onboard-plan-card {
    display: block;
    border: 2px solid #e0dcd3;
    border-radius: 8px;
    padding: 1.25rem 1.35rem;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
}

.hg-onboard-plan-card:hover {
    border-color: var(--hg-accent-soft);
}

.hg-onboard-plan-card.is-selected,
.hg-onboard-plan-card:has(input:checked) {
    border-color: var(--hg-accent);
    box-shadow: 0 0 0 1px var(--hg-accent);
}

.hg-onboard-plan-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hg-onboard-plan-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
    color: #2f353c;
}

.hg-onboard-plan-price {
    font-size: 1.25em;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--hg-accent);
}

.hg-onboard-plan-meta,
.hg-onboard-plan-note {
    font-size: 1.1em;
    line-height: 1.45;
    color: #5c6368;
    margin: 0.35rem 0 0;
}

.hg-onboard-field {
    margin-bottom: 1.25rem;
}

.hg-onboard-field label {
    display: block;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    color: #2f353c;
    margin-bottom: 0.4rem;
}

.hg-onboard-field input,
.hg-onboard-field select {
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.75rem;
    border: 1px solid #c8c4bb;
    border-radius: 4px;
    font-size: 1.125em;
    line-height: 1.3;
    font-weight: 300;
    color: #2f353c;
    box-sizing: border-box;
    background: #fff;
}

.hg-onboard-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

@media (max-width: 640px) {
    .hg-onboard-plan-grid {
        grid-template-columns: 1fr;
    }

    .hg-onboard-field-row {
        grid-template-columns: 1fr;
    }

    body.honeygold-onboard-page article.hg-onboard-article {
        padding: 0 12px;
    }
}

.hg-onboard-review {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem 1.5rem;
    margin: 0 0 1.25rem;
    font-size: 1.125em;
    line-height: 1.45;
}

.hg-onboard-review dt {
    font-weight: 700;
    margin: 0;
    color: #2f353c;
}

.hg-onboard-review dd {
    margin: 0;
    font-weight: 300;
    color: #2f353c;
}

.hg-onboard-actions[hidden],
.hg-onboard-panels[hidden],
.hg-onboard-steps[hidden],
.hg-onboard-provision[hidden] {
    display: none !important;
}

.hg-onboard-global-error {
    max-width: 40rem;
    margin: 0 auto 1.25rem;
    text-align: center;
}

.hg-onboard-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* Shared onboard buttons (override global .view-more-btn hover) */
/* Review step: payment frequency (before Stripe) */
body.honeygold-onboard-page .hg-onboard-billing-pick {
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(47, 53, 60, 0.12);
}

body.honeygold-onboard-page .hg-onboard-billing-pick-label {
    margin: 0 0 0.75rem;
    font-size: 0.95em;
    font-weight: 600;
    color: #2f353c;
}

body.honeygold-onboard-page .hg-billing-segmented {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

body.honeygold-onboard-page .hg-billing-segment {
    flex: 1 1 10rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(47, 53, 60, 0.2);
    border-radius: 4px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.honeygold-onboard-page .hg-billing-segment input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.honeygold-onboard-page .hg-billing-segment.is-selected,
body.honeygold-onboard-page .hg-billing-segment:has(input:checked) {
    border-color: var(--hg-accent, var(--granola-honeygold));
    box-shadow: 0 0 0 1px var(--hg-accent, var(--granola-honeygold));
}

body.honeygold-onboard-page .hg-billing-segment-title {
    font-weight: 600;
    font-size: 1em;
}

body.honeygold-onboard-page .hg-billing-segment-detail {
    font-size: 0.95em;
    font-weight: 600;
    color: #2f353c;
}

body.honeygold-onboard-page .hg-billing-segment-sub {
    font-size: 0.82em;
    line-height: 1.35;
    color: #5c636a;
}

body.honeygold-onboard-page .hg-onboard-billing-note,
body.honeygold-onboard-page .hg-onboard-review-pay-lead {
    margin: 0.85rem 0 0;
    font-size: 0.92em;
    line-height: 1.45;
    color: #5c636a;
}

body.honeygold-thanks-page .hg-thanks-card {
    max-width: 36rem;
    margin: 0 auto;
}

body.honeygold-thanks-page .hg-thanks-list {
    margin: 0 0 1.25rem;
    padding-left: 1.25rem;
    line-height: 1.5;
}

body.honeygold-thanks-page .hg-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

body.honeygold-onboard-page .hg-onboard-actions .view-more-btn {
    font-family: inherit;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* Primary — Continue: HoneyGold outline default, fill on hover */
body.honeygold-onboard-page .hg-onboard-btn-primary,
body.honeygold-onboard-page #hg-onboard-next.view-more-btn {
    background-color: transparent !important;
    border: 2px solid var(--hg-accent) !important;
    color: var(--hg-accent) !important;
}

body.honeygold-onboard-page .hg-onboard-btn-primary:hover,
body.honeygold-onboard-page .hg-onboard-btn-primary:focus,
body.honeygold-onboard-page #hg-onboard-next.view-more-btn:hover,
body.honeygold-onboard-page #hg-onboard-next.view-more-btn:focus {
    background-color: var(--hg-accent) !important;
    border-color: var(--hg-accent) !important;
    color: #2f353c !important;
}

/* Secondary — Back (neutral outline, matches site default buttons) */
body.honeygold-onboard-page .hg-onboard-btn-secondary,
body.honeygold-onboard-page #hg-onboard-back.view-more-btn {
    background-color: transparent !important;
    border: 1px solid #2f353c !important;
    color: #2f353c !important;
}

body.honeygold-onboard-page .hg-onboard-btn-secondary:hover,
body.honeygold-onboard-page .hg-onboard-btn-secondary:focus,
body.honeygold-onboard-page #hg-onboard-back.view-more-btn:hover,
body.honeygold-onboard-page #hg-onboard-back.view-more-btn:focus {
    background-color: #2f353c !important;
    border-color: #2f353c !important;
    color: #f7f4ed !important;
}

.hg-onboard-error {
    color: #b42318;
    font-size: 1.125em;
    line-height: 1.45;
    margin: 0.75rem 0 0;
}

.hg-onboard-success {
    color: #0d6b4d;
    font-size: 1.125em;
    font-weight: 700;
}

.hg-onboard-meta {
    font-size: 1em;
    line-height: 1.45;
    color: #5c6368;
    word-break: break-all;
}

.hg-onboard-provision {
    margin-top: 2.5rem;
}

.hg-onboard-provision-card {
    border: 1px solid #e0dcd3;
    border-radius: 8px;
    padding: 1.75rem 2rem;
    background: #fff;
}

.hg-onboard-spinner {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid #e0dcd3;
    border-top-color: var(--hg-accent);
    border-radius: 50%;
    animation: hg-onboard-spin 0.8s linear infinite;
    margin-bottom: 1.25rem;
}

@keyframes hg-onboard-spin {
    to {
        transform: rotate(360deg);
    }
}

.hg-onboard-provision-elapsed {
    font-size: 1.125em;
    line-height: 1.45;
    color: #5c6368;
    margin: 0 0 1.25rem;
}

.hg-provision-step-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hg-provision-step {
    position: relative;
    padding: 0.55rem 0 0.55rem 2rem;
    font-size: 1.125em;
    line-height: 1.45;
    color: #5c6368;
}

.hg-provision-step::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: #ddd;
}

.hg-provision-step--active {
    color: #2f353c;
    font-weight: 700;
}

.hg-provision-step--active::before {
    background: var(--hg-accent);
    box-shadow: 0 0 0 3px var(--hg-accent-glow);
}

.hg-provision-step--done {
    color: var(--hg-accent);
    font-weight: 600;
}

.hg-provision-step--done::before {
    background: var(--hg-accent);
}

.hg-onboard-provision-status {
    margin: 1.25rem 0 0;
    font-size: 1.125em;
    line-height: 1.45;
    color: #5c6368;
}

.hg-onboard-provision-result {
    margin-top: 1.25rem;
    font-size: 1.125em;
    line-height: 1.45;
}

/* Sandbox landing page */
body.honeygold-sandbox-page #primary {
    padding-top: 18px;
    margin-top: 36px;
}

body.honeygold-sandbox-page article.hg-sandbox-article {
    width: 100%;
    max-width: 1160px;
    margin: 10px auto 0;
    padding: 0 20px 3rem;
    box-sizing: border-box;
}

body.honeygold-sandbox-page .entry-header.hg-onboard-header .entry-title {
    margin-bottom: 1rem;
}

body.honeygold-sandbox-page .entry-header.hg-onboard-header .hg-onboard-intro {
    margin-top: 1.25em;
}

body.honeygold-sandbox-page .entry-content.hg-sandbox-content {
    max-width: 48rem;
    margin: 0 auto;
}

.hg-sandbox-list {
    margin: 0 0 1.5rem 1.25em;
    padding: 0;
    font-size: 1.125em;
    line-height: 1.55;
    color: #2f353c;
}

.hg-sandbox-list li {
    margin-bottom: 0.65em;
}

.hg-sandbox-includes,
.hg-sandbox-pricing-note,
.hg-sandbox-compare {
    margin-bottom: 2rem;
}

.hg-sandbox-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0 1rem;
}

.hg-sandbox-meta {
    text-align: center;
    font-size: 1em;
    margin: 0;
}

.hg-sandbox-meta a {
    color: var(--hg-accent, var(--granola-honeygold));
    font-weight: 600;
}

/* Starter sign-in — centered content block */
body.honeygold-signin-page .entry-content.hg-onboard-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

body.honeygold-signin-page #hg-signin-panel.hg-onboard-panel {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    text-align: center;
}

body.honeygold-signin-page .hg-sandbox-list {
    list-style: none;
    margin: 0 auto 1.5rem;
    padding: 0;
    text-align: center;
    max-width: 36rem;
}

body.honeygold-signin-page .hg-signin-actions {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}

body.honeygold-signin-page .hg-onboard-error {
    text-align: center;
    max-width: 36rem;
    margin: 0 auto 1rem;
}

body.honeygold-signin-page .hg-onboard-meta,
body.honeygold-signin-page .hg-onboard-provision-result {
    text-align: center;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

body.honeygold-signin-page .hg-sandbox-meta {
    margin-top: 2rem;
}