@import url("./fonts.257546d50529.css");
@import url("./tokens.cd68033a6aa7.css");

/* Public shell and reusable controls. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--ink); font: 400 16px/1.5 var(--font-sans); }
button, input, textarea, select { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button { color: inherit; }
button:disabled { cursor: not-allowed; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--booky-blue-hover); }
h1, h2, h3, p, ol, ul { margin: 0; }
h1, h2 { letter-spacing: -.6px; }
h2 { font-size: 24px; font-weight: 600; line-height: 32px; }
h3 { font-size: 18px; font-weight: 600; line-height: 26px; }
p { color: var(--muted-2); }
small { color: var(--muted); font-size: 14px; line-height: 20px; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
::selection { color: var(--ink); background: var(--blue-soft); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 24px; top: -80px; padding: 12px 20px; border-radius: 10px; background: var(--blue); color: var(--booky-on-blue); }
.skip-link:focus { top: 12px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--booky-radius-control); padding: 12px 20px; font-size: 14px; font-weight: 600; line-height: 20px; text-align: center; transition: background-color 160ms ease, border-color 160ms ease; }
.button-primary { background: var(--blue); color: var(--booky-on-blue); }
.button-primary:hover { background: var(--booky-blue-hover); color: var(--booky-on-blue); }
.button-secondary { background: var(--surface); color: var(--ink); border-color: var(--booky-strong-border); }
.button-secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--muted); }
.button-quiet { background: transparent; color: var(--blue); padding-inline: 12px; }
.button-quiet:hover { background: var(--blue-soft); }
.button:disabled { background: var(--surface-2); border-color: transparent; color: var(--muted); }
.status-badge, .pricing-popular-badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 8px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 18px; }
.status-badge img { width: 6px; height: 6px; flex-shrink: 0; }
.tone-info, .pricing-popular-badge { background: var(--blue-soft); color: var(--blue); }
.tone-success { background: var(--green-soft); color: var(--green); }
.tone-warning { background: var(--orange-soft); color: var(--orange); }

/* All public headers use the same content grid. */
.landing-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: var(--sidebar); }
.landing-header-container { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; width: min(100% - 160px, 1280px); min-height: 80px; margin: auto; padding-block: 16px; }
.landing-brand-group, .landing-actions, .landing-nav { display: flex; align-items: center; gap: 12px; min-width: 0; }
.landing-brand-group { gap: 24px; }
.landing-brand { display: inline-flex; align-items: center; min-height: 48px; color: var(--blue); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.6px; }
.landing-brand img { width: 90px; max-height: 40px; object-fit: contain; }
.landing-nav { justify-content: center; gap: 8px; }
.landing-nav > a { display: inline-flex; align-items: center; min-height: 48px; padding-inline: 10px; color: var(--muted-2); font-size: 14px; font-weight: 600; }
.landing-nav > a:hover, .landing-nav > a.is-active { color: var(--blue); }
.landing-actions { justify-content: flex-end; }
.landing-actions .button { white-space: nowrap; }
.landing-header--account .landing-header-container { grid-template-columns: minmax(0, 1fr) auto; min-height: 72px; padding-block: 12px; }
.header-context { color: var(--muted); font-size: 14px; white-space: nowrap; }
.landing-menu-toggle, .landing-nav .mobile-nav-signup { display: none; }
.landing-profile-menu { position: relative; }
.landing-profile-menu summary { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 50%; background: var(--blue-soft); color: var(--blue); list-style: none; }
.landing-profile-menu summary::-webkit-details-marker { display: none; }
.landing-profile-popover { position: absolute; right: 0; top: calc(100% + 12px); display: grid; width: 200px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--booky-shadow-sm); }
.landing-profile-popover a, .landing-profile-popover button { display: flex; width: 100%; align-items: center; min-height: 48px; border: 0; border-radius: 8px; padding: 12px; color: var(--ink); background: transparent; text-align: left; font-size: 14px; }
.landing-profile-popover a:hover, .landing-profile-popover button:hover { background: var(--surface-2); }

/* Landing sections — the desktop composition reflows at tablet and phone widths. */
.landing-main { display: flex; flex-direction: column; gap: 80px; width: min(100% - 160px, 1280px); margin: auto; padding-block: 80px; }
.hero-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px; }
.hero-copy { display: grid; justify-items: start; gap: 24px; min-width: 0; }
.hero-copy h1 { font-size: 64px; line-height: 72px; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .button { min-width: 180px; }
.product-preview { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.preview-heading, .preview-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-heading h2 { font-size: 18px; line-height: 26px; letter-spacing: 0; }
.preview-heading .status-badge { flex-shrink: 0; }
.preview-amount { font-size: 32px; line-height: 40px; letter-spacing: -.6px; }
.product-preview > p, .preview-row > span:first-child { color: var(--muted-2); font-size: 14px; }
.preview-trend { display: flex; align-items: flex-end; gap: 8px; height: 104px; }
.preview-trend > span { flex: 1; height: var(--bar-height); background: var(--blue-soft); border-radius: 10px; }
.preview-trend > span:last-child { background: var(--blue); }
.capabilities-section, .subscriptions-section, .faq-section, .section-heading { display: grid; gap: 24px; }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.capability-card { display: grid; align-content: start; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.capability-card img { width: 28px; height: 28px; }
.process-section { display: grid; gap: 24px; padding: 40px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.process-section > h2, .section-heading h2, .faq-section > h2 { font-size: 32px; line-height: 40px; font-weight: 700; }
.process-steps { display: grid; gap: 24px; padding: 0; list-style: none; }
.process-steps li { display: flex; align-items: center; gap: 16px; }
.process-steps li div { display: grid; gap: 4px; }
.process-steps p { font-size: 14px; line-height: 20px; }
.landing-cta { display: grid; justify-items: start; gap: 16px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--blue-soft); }
.landing-cta .button { min-width: 200px; }
.pricing-billing-toggle, .billing-cycle-toggle, .auth-method-toggle { display: flex; gap: 8px; }
.pricing-billing-toggle button, .billing-cycle-toggle button, .auth-method-toggle button { min-height: 48px; padding: 12px 20px; border: 1px solid transparent; border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 600; }
.pricing-billing-toggle button.is-selected, .billing-cycle-toggle button[aria-checked="true"], .auth-method-toggle button.is-selected { border-color: var(--booky-strong-border); background: var(--surface); }
.pricing-tier-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.pricing-tier { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pricing-tier.is-featured { border-color: var(--blue); background: var(--blue-soft); }
.pricing-tier-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pricing-popular-badge { padding: 4px 8px; }
.plan-kicker { color: var(--muted-2); font-size: 12px; }
.pricing-tier-description { flex: 1; font-size: 14px; line-height: 20px; }
.pricing-tier-price { display: grid; gap: 4px; margin-top: 8px; }
.pricing-tier-price strong { color: var(--ink); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.6px; font-variant-numeric: tabular-nums; }
.pricing-tier-price > span, .pricing-tax-note, .pricing-terms { color: var(--muted); font-size: 12px; line-height: 18px; }
.pricing-tier-cta { margin-top: 8px; width: 100%; }
.pricing-comparison { display: grid; gap: 24px; margin-top: 32px; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.pricing-comparison-head, .pricing-feature-row { display: grid; grid-template-columns: minmax(180px, 1.7fr) repeat(var(--pricing-plan-count), minmax(0, 1fr)); align-items: center; gap: 12px; }
.pricing-comparison-head { padding-bottom: 16px; color: var(--blue); font-size: 14px; }
.pricing-comparison-head > :first-child { color: var(--muted-2); }
.pricing-category-row { padding-block: 20px 12px; color: var(--muted); font-size: 12px; font-weight: 600; }
.pricing-feature-row { border-top: 1px solid var(--line); padding-block: 16px; font-size: 14px; }
.pricing-feature-name { display: flex; align-items: center; gap: 8px; color: var(--muted-2); }
.pricing-feature-value { min-width: 0; overflow-wrap: anywhere; }
.pricing-check-icon { color: var(--green); }
.pricing-cross-icon { color: var(--muted); }
.pricing-custom-icon { color: var(--muted-2); font-size: 12px; }
.pricing-hint { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--booky-strong-border); border-radius: 50%; color: var(--muted); font-size: 12px; cursor: help; }
.pricing-hint-copy { display: none; position: absolute; bottom: 28px; left: 0; z-index: 2; width: min(240px, 60vw); padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--ink); box-shadow: var(--booky-shadow-sm); }
.pricing-hint:hover .pricing-hint-copy, .pricing-hint:focus .pricing-hint-copy { display: block; }
.faq-list { display: grid; gap: 16px; }
.faq-list details { border: 1px solid var(--line); border-radius: 16px; padding: 24px; background: var(--surface); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 32px; list-style: none; font-size: 18px; font-weight: 600; line-height: 26px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--blue); font-size: 22px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { margin-top: 16px; max-width: 900px; }
.landing-footer { display: grid; justify-items: start; gap: 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.footer-benefits { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; }
.footer-columns section { display: grid; align-content: start; gap: 12px; }
.footer-columns h3 { font-size: 14px; line-height: 20px; }
.footer-columns a, .footer-columns span { color: var(--muted-2); overflow-wrap: anywhere; }
.footer-columns a:hover { color: var(--blue); }
.landing-footer > small { font-size: 12px; }

/* Compact authentication and registration. */
.auth-page-main { padding: 48px 24px 64px; }
.auth-page-shell { width: min(100%, 440px); margin-inline: auto; transition: max-width 160ms ease; }
.auth-page-shell:has([data-current-step="3"]) { width: min(100%, 480px); }
.wizard-panel { display: grid; gap: 16px; margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.wizard-panel h1, .wizard-panel h2, .wizard-panel h3 { color: var(--ink); font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.6px; }
.form-heading { display: grid; gap: 4px; }
.form-heading p, .wizard-step-copy { color: var(--muted-2); font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.auth-legal { margin: 12px 8px 0; color: var(--muted); font-size: 12px; line-height: 18px; text-align: center; }
.recovery-panel { gap: 24px; }
.recovery-code { color: var(--blue); font-size: 64px; line-height: 72px; letter-spacing: -.6px; }
.auth-method-toggle > button, .billing-cycle-toggle > button { flex: 1; min-width: 0; padding-inline: 12px; }
.field, .panel-form label { display: grid; gap: 8px; min-width: 0; color: var(--muted-2); font-size: 14px; line-height: 20px; font-weight: 600; }
.field input, .field select, .field textarea, .panel-form input, .panel-form select, .panel-form textarea { width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--booky-strong-border); border-radius: 10px; padding: 12px; background: var(--bg); color: var(--ink); font-size: 16px; font-weight: 400; line-height: 24px; }
.field input::placeholder, .panel-form input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus, .panel-form input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.field input[aria-invalid="true"], .email-otp-entry.is-error input { border-color: var(--red); }
.field input:disabled { color: var(--muted); }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-action-combo, .login-phone-combo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.phone-prefix { flex-shrink: 0; color: var(--muted-2); font-size: 14px; font-weight: 500; white-space: nowrap; }
.login-phone-combo { border: 1px solid var(--booky-strong-border); border-radius: 10px; background: var(--bg); padding-left: 12px; gap: 8px; }
.login-phone-combo input { border: 0; padding-left: 4px; }
.login-phone-combo:focus-within { outline: 2px solid var(--blue); outline-offset: 1px; }
.login-phone-combo input:focus { outline: 0; }
.lookup-status-indicator { flex-shrink: 0; display: grid; place-items: center; width: 48px; min-height: 48px; border: 1px solid var(--booky-strong-border); border-radius: 10px; background: var(--surface-2); color: var(--blue); }
.lookup-status-indicator[data-lookup-state="loading"] { opacity: .65; }
.lookup-status-indicator [data-lookup-icon]:empty::before { content: "↗"; }
.lookup-status-indicator[data-lookup-state="valid"] { color: var(--green); }
.lookup-result, .email-verification-status, .login-result { min-width: 0; color: var(--muted-2); font-size: 12px; font-weight: 400; line-height: 18px; overflow-wrap: anywhere; }
.lookup-result:empty, .email-verification-status:empty, .login-result:empty { display: none; }
.lookup-result.is-filled, .email-verification-status.is-filled, .login-result.is-success { color: var(--green); }
.lookup-result.is-error, .email-verification-status.is-error, .login-result.is-error, .errorlist { color: var(--red); }
.errorlist { margin: 0; padding-left: 18px; font-size: 12px; }
.wizard-progress { display: grid; gap: 8px; }
.wizard-progress-labels { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 18px; }
[data-step-label] { color: var(--blue); }
[data-step-count] { color: var(--muted); }
.wizard-tabs { display: flex; gap: 4px; }
.wizard-tab { height: 3px; min-width: 0; flex: 1; background: var(--line); }
.wizard-tab.is-active, .wizard-tab.is-complete { background: var(--blue); }
.wizard-step { display: none; }
.wizard-step.is-active { display: grid; gap: 16px; }
.wizard-step > .panel-kicker { display: none; }
.wizard-footer { display: flex; align-items: center; gap: 12px; }
.wizard-footer:has([data-back][hidden]):has([data-next][hidden]) { display: none; }
.wizard-footer [data-back] { min-width: 68px; padding-inline: 12px; border-color: transparent; background: transparent; color: var(--blue); }
.wizard-footer [data-next] { flex: 1; }
.email-verification-inline, .login-code-panel { display: grid; gap: 16px; }
.login-entry { display: grid; gap: 16px; }
.verification-meta .button { padding: 0 4px; min-height: 32px; font-size: 12px; }
.email-otp-entry { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: min(100%, 328px); }
.email-otp-entry input { width: 100%; min-width: 0; height: 48px; padding: 0; border: 1px solid var(--booky-strong-border); border-radius: 10px; background: var(--bg); color: var(--ink); font-size: 18px; font-weight: 600; line-height: 26px; text-align: center; }
.email-otp-entry input:focus { outline: 2px solid var(--blue); outline-offset: -1px; border-color: var(--blue); }
.email-otp-entry input:disabled { opacity: 1; color: var(--muted); }
.verification-meta, .verification-recovery, .verification-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.verification-meta { color: var(--muted); font-size: 12px; line-height: 18px; }
.verification-actions .button-primary { flex: 1; }
.verification-actions .button-quiet { flex-shrink: 0; }
.verification-recovery .button { min-width: 0; }
.verification-recovery { flex-wrap: wrap; }
.verification-panel { display: grid; gap: 16px; }
.panel-kicker { color: var(--blue); font-size: 12px; font-weight: 500; }
[data-email-entry], [data-phone-entry] { display: grid; gap: 16px; }
.wizard-step[data-verification-state="code"] [data-email-entry],
.wizard-step[data-verification-state="code"] [data-phone-entry],
.wizard-step[data-verification-state="verified"] [data-email-entry],
.wizard-step[data-verification-state="verified"] [data-phone-entry] { display: none; }
.wizard-step[data-verification-state="entry"] .verification-recovery { display: none; }
.subscription-plan-grid { display: grid; gap: 8px; }
.subscription-plan-card { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); text-align: left; }
.subscription-plan-card::before { content: ""; display: block; width: 20px; height: 20px; border: 1px solid var(--booky-strong-border); border-radius: 50%; }
.subscription-plan-card.is-selected { border-color: var(--blue); background: var(--blue-soft); }
.subscription-plan-card.is-selected::before { border: 6px solid var(--blue); background: var(--booky-on-blue); }
.subscription-plan-card:hover { border-color: var(--blue); }
.plan-copy { display: grid; gap: 2px; min-width: 0; }
.plan-copy strong { font-size: 14px; font-weight: 600; line-height: 20px; }
.plan-copy small { color: var(--muted-2); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.subscription-plan-price { display: grid; gap: 2px; min-width: 78px; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.subscription-plan-price em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; }
.plan-validation, .error-note, .warning-note, .success-note, .app-message { border-radius: 10px; padding: 12px; font-size: 14px; line-height: 20px; }
.plan-validation, .error-note, .app-message.error { background: var(--red-soft); color: var(--red); }
.warning-note, .app-message.warning { background: var(--orange-soft); color: var(--orange); }
.success-note, .app-message.success { background: var(--green-soft); color: var(--green); }
.plan-helper, .resend-note { color: var(--muted); font-size: 12px; line-height: 18px; }
.plan-information { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compare-plans-link { display: inline-flex; align-items: center; min-height: 48px; font-size: 12px; }
.selected-plan-summary { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.selected-plan-summary > div { display: grid; gap: 8px; }
.selected-plan-summary span { color: var(--muted); font-size: 12px; }
.selected-plan-summary strong { font-size: 18px; font-weight: 600; }
.selected-plan-summary small { color: var(--ink); font-size: 20px; line-height: 28px; }
.selected-plan-summary .button { border: 0; background: transparent; color: var(--blue); }
.payment-panel { display: grid; gap: 12px; font-size: 14px; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.payment-actions .button { flex: 1; min-width: 120px; }
.onboarding-draft-banner { display: grid; position: relative; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--blue-soft); font-size: 12px; color: var(--muted-2); }
.onboarding-draft-banner > span { padding-right: 24px; }
.onboarding-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.onboarding-draft-banner button { min-height: 40px; border: 1px solid var(--booky-strong-border); border-radius: 8px; padding: 8px 12px; background: var(--surface); color: var(--blue); font-size: 12px; }
.onboarding-draft-minimize { position: absolute; top: 0; right: 0; width: 40px; border: 0 !important; background: transparent !important; }
.onboarding-draft-banner.is-minimized > span, .onboarding-draft-banner.is-minimized .onboarding-draft-actions, .onboarding-draft-banner.is-minimized .onboarding-draft-minimize { display: none; }

/* Invitation acceptance shares the same form foundations. */
.invite-acceptance-shell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 40px; width: min(100% - 80px, 1040px); margin: 48px auto; }
.invite-acceptance-copy { display: grid; gap: 24px; }
.invite-acceptance-copy h1 { font-size: 32px; line-height: 40px; }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 500; }
.relationship-card, .invite-meaning-card { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.relationship-card h2, .invite-meaning-card h2 { font-size: 18px; line-height: 26px; }
.relationship-node, .invite-detail-list div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.relationship-node span, .relationship-node small, .invite-detail-list dt, .invite-detail-list small, .invite-secondary-actions span, .invite-code-fallback { color: var(--muted); font-size: 12px; line-height: 18px; }
.relationship-node strong, .invite-detail-list dd { margin: 0; font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.relationship-connector { color: var(--blue); font-size: 12px; }
.invite-meaning-card ul { padding-left: 20px; color: var(--muted-2); font-size: 14px; }
.invite-step-list { display: flex; flex-wrap: wrap; gap: 8px; }
.invite-step-list span { padding: 6px 10px; border-radius: 999px; color: var(--muted); background: var(--surface-2); font-size: 12px; }
.invite-step-list .is-current { background: var(--blue-soft); color: var(--blue); }
.invite-detail-list, .panel-form, .message-stack { display: grid; gap: 12px; margin: 0; }
.invite-secondary-actions, .invite-action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.invite-code-fallback { padding-top: 12px; border-top: 1px solid var(--line); }
.invite-acceptance-page > .landing-header { padding: 12px 40px; display: flex; justify-content: space-between; align-items: center; }

@media (max-width: 1199px) {
  .landing-header-container, .landing-main { width: calc(100% - 80px); }
  .landing-header-container { grid-template-columns: auto minmax(0, 1fr) auto; }
  .landing-actions .button { padding-inline: 16px; }
  .landing-main { gap: 64px; padding-block: 64px; }
  .hero-section { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 754px; }
  .hero-copy h1 { font-size: 56px; line-height: 64px; }
  .capability-grid { grid-template-columns: minmax(0, 1fr); }
  .auth-page-main { padding-top: 40px; }
}
@media (max-width: 760px) {
  .pricing-comparison { padding: 24px; }
  .pricing-comparison-head { display: none; }
  .pricing-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; margin-top: 12px; border: 0; border-radius: 10px; background: var(--surface-2); }
  .pricing-feature-name { grid-column: 1 / -1; color: var(--ink); font-weight: 600; }
  .pricing-feature-value { display: grid; gap: 4px; }
  .pricing-feature-value::before { content: attr(data-plan-label); color: var(--muted); font-size: 12px; }
  .invite-acceptance-shell { grid-template-columns: minmax(0, 1fr); width: calc(100% - 48px); margin-block: 24px; gap: 24px; }
}
@media (max-width: 700px) {
  .landing-header-container, .landing-main { width: calc(100% - 48px); }
  .landing-header-container { min-height: 72px; grid-template-columns: auto minmax(0, 1fr); padding-block: 12px; gap: 8px; }
  .landing-actions { gap: 12px; }
  .landing-actions .desktop-nav-signup, .header-context { display: none; }
  .landing-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 16px 24px 24px; border-bottom: 1px solid var(--line); background: var(--sidebar); }
  .landing-nav.is-open { display: grid; justify-content: stretch; gap: 8px; }
  .landing-nav > a { padding-inline: 0; }
  .landing-nav .mobile-nav-signup { display: inline-flex; color: var(--booky-on-blue); }
  .landing-menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex-shrink: 0; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
  .landing-menu-toggle span { width: 20px; height: 2px; background: var(--muted-2); transition: transform 160ms ease; }
  .landing-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .landing-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .landing-main { gap: 48px; padding-block: 48px; }
  .hero-section { gap: 32px; }
  .hero-copy h1 { font-size: 32px; line-height: 40px; }
  .hero-actions { display: grid; width: 100%; }
  .product-preview { padding: 24px; }
  .process-section { padding: 24px; }
  .process-section > h2, .section-heading h2, .faq-section > h2 { font-size: 28px; line-height: 36px; }
  .landing-cta { padding: 24px; }
  .pricing-tier { padding: 24px; }
  .pricing-comparison { padding: 20px; margin-top: 16px; }
  .faq-list details { padding: 20px; }
  .faq-list summary { min-height: 48px; font-size: 16px; line-height: 24px; }
  .footer-columns { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .auth-page-main { padding: 24px 24px 48px; }
  .auth-page-shell, .auth-page-shell:has([data-current-step="3"]) { width: 100%; max-width: 440px; }
  .field-grid { grid-template-columns: minmax(0, 1fr); }
  .subscription-plan-card { gap: 10px; }
  .plan-copy small { font-size: 12px; }
  .verification-actions { gap: 8px; }
  .verification-actions .button { padding-inline: 12px; }
  .invite-acceptance-page > .landing-header { padding-inline: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}