:root {
    --ink: #17131d;
    --muted: #6f6875;
    --paper: #f7f4ef;
    --card: #fffdfa;
    --line: #ded8d0;
    --purple: #7355d9;
    --purple-soft: #ece7fb;
    --green: #1f7a55;
    --green-soft: #e4f4ec;
    --red: #a43a43;
    --red-soft: #fae9ea;
    --amber: #8a5a16;
    --amber-soft: #fbf0d8;
    --shadow: 0 18px 60px rgba(32, 20, 39, 0.08);
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color: var(--ink);
    background: var(--paper);
}
* {
    box-sizing: border-box;
}
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 90% 10%, #eee7ff 0, transparent 28rem),
        var(--paper);
}
button,
input,
textarea,
select {
    font: inherit;
}
a {
    color: inherit;
}
button {
    cursor: pointer;
}
.boot {
    padding: 3rem;
    text-align: center;
    color: var(--muted);
}
.shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.nav {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    border-bottom: 1px solid rgba(23, 19, 29, 0.08);
    background: rgba(247, 244, 239, 0.86);
    backdrop-filter: blur(16px);
    position: sticky;
    top: 0;
    z-index: 10;
}
.brand {
    display: flex;
    gap: 0.7rem;
    align-items: center;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.brand img {
    width: 34px;
    height: 34px;
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.nav-email {
    font-size: 0.88rem;
    color: var(--muted);
    max-width: 210px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
main {
    width: min(1080px, 92vw);
    margin: 0 auto;
    flex: 1;
    padding: 3rem 0 5rem;
}
.footer {
    padding: 2rem 5vw;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--muted);
    font-size: 0.88rem;
}
.footer a {
    margin-left: 1rem;
}
.hero {
    padding: 6.5rem 0 5rem;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: center;
}
.eyebrow {
    display: inline-flex;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    background: var(--purple-soft);
    color: #5338ad;
    font-weight: 700;
    font-size: 0.82rem;
}
.hero h1 {
    font-size: clamp(3rem, 7vw, 6.2rem);
    line-height: 0.92;
    letter-spacing: -0.065em;
    margin: 1.25rem 0 1.5rem;
}
.hero p {
    font-size: 1.2rem;
    line-height: 1.65;
    color: var(--muted);
    max-width: 640px;
}
.hero-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.privacy-demo {
    background: var(--ink);
    color: #fff;
    border-radius: 28px;
    padding: 1.4rem;
    box-shadow: var(--shadow);
    transform: rotate(1.5deg);
}
.demo-head {
    font-size: 0.8rem;
    color: #c5becb;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.demo-question {
    font-size: 1.45rem;
    font-weight: 750;
    margin: 0.8rem 0 1.2rem;
}
.private-pill {
    border: 1px solid #51485b;
    border-radius: 14px;
    padding: 1rem;
    margin: 0.7rem 0;
    background: #211b28;
}
.private-pill strong {
    display: block;
    color: #d8caff;
    margin-bottom: 0.25rem;
}
.demo-result {
    background: #f2ecff;
    color: #2f205f;
    border-radius: 15px;
    padding: 1rem;
    margin-top: 1rem;
}
.demo-result small {
    display: block;
    color: #69598c;
    margin-bottom: 0.25rem;
}
.section {
    padding: 3rem 0;
}
.section h2 {
    font-size: 2.3rem;
    letter-spacing: -0.04em;
}
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.step,
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.4rem;
    box-shadow: 0 5px 25px rgba(30, 20, 35, 0.035);
}
.step-num {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--purple-soft);
    color: var(--purple);
    display: grid;
    place-items: center;
    font-weight: 800;
}
.step h3 {
    margin: 0.9rem 0 0.4rem;
}
.step p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}
.btn {
    border: 0;
    border-radius: 12px;
    padding: 0.78rem 1.05rem;
    background: var(--ink);
    color: #fff;
    font-weight: 750;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 44px;
}
.btn:hover {
    filter: brightness(1.12);
}
.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
}
.btn-purple {
    background: var(--purple);
}
.btn-danger {
    background: var(--red);
}
.btn-small {
    padding: 0.55rem 0.75rem;
    min-height: 36px;
    font-size: 0.88rem;
}
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.7rem;
}
.page-head h1 {
    font-size: 2.35rem;
    letter-spacing: -0.045em;
    margin: 0 0 0.4rem;
}
.page-head p {
    margin: 0;
    color: var(--muted);
}
.auth-wrap {
    max-width: 460px;
    margin: 4rem auto;
}
.auth-wrap h1 {
    font-size: 2.5rem;
    letter-spacing: -0.05em;
}
.auth-wrap .card {
    padding: 1.8rem;
}
.field {
    margin-bottom: 1rem;
}
.field label {
    font-weight: 700;
    display: block;
    margin-bottom: 0.45rem;
}
.hint {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.45;
}
.input,
.textarea,
.select {
    width: 100%;
    border: 1px solid #cfc7d2;
    background: #fff;
    border-radius: 12px;
    padding: 0.82rem 0.9rem;
    color: var(--ink);
    outline: none;
}
.input:focus,
.textarea:focus,
.select:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(115, 85, 217, 0.12);
}
.textarea {
    min-height: 96px;
    resize: vertical;
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.4rem;
}
.error {
    padding: 0.85rem 1rem;
    border: 1px solid #efc4c8;
    background: var(--red-soft);
    color: var(--red);
    border-radius: 12px;
    margin: 1rem 0;
}
.success {
    padding: 0.85rem 1rem;
    border: 1px solid #bce3cf;
    background: var(--green-soft);
    color: var(--green);
    border-radius: 12px;
    margin: 1rem 0;
}
.notice {
    padding: 0.85rem 1rem;
    border: 1px solid #ead4a3;
    background: var(--amber-soft);
    color: var(--amber);
    border-radius: 12px;
    margin: 1rem 0;
}
.decision-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.decision-card {
    text-decoration: none;
    display: block;
}
.decision-card h3 {
    margin: 0.2rem 0 0.55rem;
}
.meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.88rem;
}
.status {
    display: inline-flex;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.status-collecting {
    background: var(--purple-soft);
    color: #553bb0;
}
.status-closed {
    background: var(--green-soft);
    color: var(--green);
}
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--muted);
}
.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
.mode-option {
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 1rem;
    cursor: pointer;
    background: #fff;
}
.mode-option:has(input:checked) {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(115, 85, 217, 0.1);
}
.mode-option input {
    accent-color: var(--purple);
}
.mode-option strong {
    display: block;
    margin: 0.2rem 0;
}
.option-row {
    display: flex;
    gap: 0.5rem;
    margin: 0.55rem 0;
}
.option-row .input {
    flex: 1;
}
.option-row button {
    flex: 0 0 auto;
}
.create-card {
    max-width: 760px;
    margin: auto;
}
.progress-wrap {
    margin: 1.4rem 0;
}
.progress-label {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 0.92rem;
    margin-bottom: 0.5rem;
}
.progress-native {
    width: 100%;
    height: 10px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #e6dfd8;
}
.progress-native::-webkit-progress-bar {
    background: #e6dfd8;
    border-radius: 999px;
}
.progress-native::-webkit-progress-value {
    background: var(--purple);
    border-radius: 999px;
}
.progress-native::-moz-progress-bar {
    background: var(--purple);
    border-radius: 999px;
}
.clipboard-fallback {
    position: fixed;
    left: -9999px;
    top: -9999px;
}
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 1.1rem;
}
.option-list {
    display: grid;
    gap: 0.55rem;
}
.option-item {
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: #f6f2ed;
    border: 1px solid #e3dcd4;
}
.side-card h3 {
    margin-top: 0;
}
.invite-list {
    display: grid;
    gap: 0.55rem;
    max-height: 360px;
    overflow: auto;
}
.invite-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem;
    background: #f7f4ef;
    border-radius: 10px;
}
.invite-row span {
    font-size: 0.86rem;
    color: var(--muted);
}
.privacy-banner {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 16px;
    background: var(--purple-soft);
    color: #44317f;
    margin-bottom: 1.2rem;
}
.privacy-icon {
    font-size: 1.3rem;
}
.ballot {
    max-width: 720px;
    margin: 0 auto;
}
.ballot h1 {
    font-size: 2.35rem;
    letter-spacing: -0.045em;
}
.rating-card {
    margin: 1rem 0;
}
.rating-card h3 {
    margin: 0.1rem 0 1rem;
    font-size: 1.15rem;
}
.rating-scale {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.45rem;
}
.rating-choice {
    position: relative;
}
.rating-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.rating-choice label {
    display: block;
    text-align: center;
    padding: 0.75rem 0.35rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}
.rating-choice input:checked + label {
    background: var(--purple-soft);
    border-color: var(--purple);
    color: #5234aa;
}
.constraint {
    margin-top: 0.85rem;
    border-top: 1px solid #e5ded7;
    padding-top: 0.85rem;
}
.constraint label {
    font-weight: 650;
}
.constraint input {
    accent-color: var(--red);
}
.constraint-fields {
    margin-top: 0.7rem;
}
.submitted-mark {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: var(--green);
    font-weight: 750;
}
.result-hero {
    text-align: center;
    padding: 2.2rem;
}
.result-icon {
    font-size: 2.2rem;
}
.result-label {
    color: var(--muted);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 800;
}
.result-winner {
    font-size: clamp(2.2rem, 6vw, 4rem);
    letter-spacing: -0.055em;
    margin: 0.4rem 0;
}
.result-summary {
    color: var(--muted);
    max-width: 610px;
    margin: 0.6rem auto;
    line-height: 1.6;
}
.runner {
    margin-top: 1.2rem;
    color: var(--muted);
}
.tie-options {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
}
.tie-options span {
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: var(--purple-soft);
    font-weight: 750;
    color: #5035a8;
}
.prose {
    max-width: 760px;
    margin: 0 auto;
}
.prose h1 {
    font-size: 2.6rem;
    letter-spacing: -0.05em;
}
.prose h2 {
    margin-top: 2.2rem;
}
.prose p,
.prose li {
    line-height: 1.7;
    color: #4e4852;
}
.prose code {
    background: #eee8e1;
    border-radius: 5px;
    padding: 0.15rem 0.3rem;
}
.loading {
    padding: 4rem;
    text-align: center;
    color: var(--muted);
}
@media (max-width: 820px) {
    .hero {
        grid-template-columns: 1fr;
        padding-top: 3rem;
        gap: 2rem;
    }
    .privacy-demo {
        transform: none;
    }
    .steps,
    .decision-grid,
    .detail-layout,
    .mode-grid {
        grid-template-columns: 1fr;
    }
    .nav-email {
        display: none;
    }
    .page-head {
        flex-direction: column;
    }
    .rating-scale {
        grid-template-columns: 1fr 1fr;
    }
    .footer {
        flex-direction: column;
    }
    .hero h1 {
        font-size: 3.5rem;
    }
}
@media (max-width: 480px) {
    main {
        width: min(94vw, 1080px);
        padding-top: 1.6rem;
    }
    .nav {
        padding: 0 3vw;
    }
    .brand span {
        display: none;
    }
    .rating-scale {
        grid-template-columns: 1fr 1fr;
    }
    .form-actions {
        flex-direction: column;
    }
    .form-actions .btn {
        width: 100%;
    }
    .hero-actions .btn {
        width: 100%;
    }
}

/* v0.2 templates + structured constraints */
.template-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}
.template-option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-height: 96px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem;
    background: #fff;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}
.template-option:hover {
    border-color: #cfc3ec;
    background: #fdfbff;
    transform: translateY(-1px);
}
.template-option:has(input:checked) {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(115, 85, 217, 0.1);
    background: #fdfbff;
}
.template-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.template-icon {
    display: block;
    flex: 0 0 auto;
}
.template-copy {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding-top: 0.08rem;
}
.template-copy strong {
    display: block;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--ink);
}
.template-copy small {
    display: block;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
    font-weight: 600;
}
.feature-note {
    padding: 1rem;
    border: 1px solid #d9d0f2;
    background: #f5f1ff;
    border-radius: 14px;
    margin: 0 0 1.1rem;
    color: #453572;
}
.feature-note.compact {
    margin: 1.1rem 0;
}
.option-editor {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1rem;
    margin: 0.75rem 0;
    background: #fff;
}
.option-editor-head {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}
.option-editor-head .option-label {
    flex: 1;
}
.option-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #ece6df;
}
.mini-field {
    display: block;
}
.mini-field > span,
.constraint-number-grid label > span {
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
    color: var(--muted);
    margin-bottom: 0.35rem;
}
.tag-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.check-chip {
    position: relative;
}
.check-chip input {
    position: absolute;
    opacity: 0;
}
.check-chip span {
    display: inline-flex;
    padding: 0.48rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.check-chip input:checked + span {
    background: var(--purple-soft);
    border-color: var(--purple);
    color: #5137aa;
}
.meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
}
.meta-chips span {
    display: inline-flex;
    padding: 0.3rem 0.5rem;
    border-radius: 999px;
    background: #ece7e1;
    color: #5c545f;
    font-size: 0.75rem;
    font-weight: 700;
}
.structured-section {
    margin: 1.2rem 0 1.8rem;
    padding: 1.3rem;
}
.section-kicker {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.72rem;
    font-weight: 850;
    color: var(--purple);
    margin-bottom: 0.3rem;
}
.structured-section h2,
.ballot section > h2 {
    margin: 0.15rem 0 0.45rem;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
}
.ai-interpreter {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px dashed #cfc3ec;
    border-radius: 14px;
    background: #fbf9ff;
}
.interpreter-actions {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.65rem;
}
.interpretation-box {
    margin-top: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    background: var(--green-soft);
    color: var(--green);
}
.interpretation-box p {
    margin: 0.25rem 0;
}
.interpretation-box small {
    display: block;
    line-height: 1.4;
}
.structured-fields {
    display: grid;
    gap: 0.75rem;
}
.constraint-input-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem;
    background: #fff;
}
.constraint-number-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin-top: 0.7rem;
}
.constraint-number-grid small {
    font-weight: 600;
}
.ballot-context {
    font-size: 0.98rem;
    margin-bottom: 1.2rem;
}
.result-highlights {
    display: grid;
    gap: 0.45rem;
    max-width: 590px;
    margin: 1rem auto 0;
    text-align: left;
}
.result-highlights div {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border-radius: 11px;
    background: #f6f2fb;
    color: #4b3d68;
    font-size: 0.9rem;
}
.result-highlights span {
    color: var(--green);
    font-weight: 900;
}
@media (max-width: 820px) {
    .template-grid,
    .option-meta-grid,
    .constraint-number-grid {
        grid-template-columns: 1fr;
    }
}

/* v0.3 beta-readiness */
.skip-link {
    position: fixed;
    left: 1rem;
    top: -4rem;
    z-index: 1000;
    background: #fff;
    color: var(--ink);
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    font-weight: 800;
}
.skip-link:focus {
    top: 1rem;
}
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.verification-banner {
    width: min(94vw, 1080px);
    margin: 0.7rem auto 0;
    padding: 0.8rem 1rem;
    border: 1px solid #ead4a3;
    background: var(--amber-soft);
    color: var(--amber);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.verification-banner span {
    margin-left: 0.35rem;
}
.terms-check {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.terms-check input {
    margin-top: 0.18rem;
    accent-color: var(--purple);
}
.schedule-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}
.toggle-field {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    background: #faf8f5;
    margin: 1rem 0;
}
.toggle-field input {
    margin-top: 0.2rem;
    accent-color: var(--purple);
}
.toggle-field span {
    display: grid;
    gap: 0.25rem;
}
.toggle-field small {
    color: var(--muted);
    line-height: 1.35;
}
.schedule-summary {
    margin: 1rem 0;
    padding: 0.75rem 0.85rem;
    background: #f6f2ed;
    border-radius: 12px;
    color: #5a525d;
}
.action-grid {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.manage-section {
    margin-top: 1.2rem;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
}
.manage-section summary {
    font-weight: 800;
    cursor: pointer;
}
.schedule-inline {
    display: grid;
    gap: 0.7rem;
    margin-top: 0.9rem;
}
.schedule-inline label > span {
    display: block;
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--muted);
    margin-bottom: 0.35rem;
}
.invite-row > div {
    display: grid;
    gap: 0.15rem;
}
.invite-row small {
    color: var(--muted);
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.side-card hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 1rem 0;
}
.compact-textarea {
    min-height: 110px;
}
.full-button {
    width: 100%;
    margin-top: 0.7rem;
}
.rating-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
}
.btn:focus-visible,
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible,
a:focus-visible,
summary:focus-visible,
label:has(input:focus-visible) {
    outline: 3px solid rgba(115, 85, 217, 0.35);
    outline-offset: 2px;
}
.btn[disabled] {
    filter: none;
}
.error,
.success,
.notice {
    line-height: 1.45;
}
@media (max-width: 820px) {
    .schedule-grid {
        grid-template-columns: 1fr;
    }
    .verification-banner {
        align-items: flex-start;
        flex-direction: column;
    }
    .action-grid .btn {
        flex: 1 1 45%;
    }
}
@media (max-width: 480px) {
    .action-grid {
        display: grid;
        grid-template-columns: 1fr;
    }
    .action-grid .btn {
        width: 100%;
    }
    .nav-actions {
        gap: 0.35rem;
    }
    .nav-actions .btn {
        padding: 0.48rem 0.58rem;
    }
    .verification-banner {
        width: 94vw;
    }
    .page-head h1,
    .ballot h1 {
        font-size: 2rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}
.privacy-delivered {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--green);
    background: var(--green-soft);
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
}

/* v0.4 product experience */
.wizard-card {
    max-width: 820px;
}
.wizard-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.55rem;
    margin: -0.15rem 0 1.6rem;
}
.wizard-progress span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: #f1ede8;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 800;
}
.wizard-progress span b {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #ded8d0;
    color: #6d6571;
}
.wizard-progress span.active {
    background: var(--purple-soft);
    color: #4e35a3;
}
.wizard-progress span.active b {
    background: var(--purple);
    color: #fff;
}
.wizard-step h2 {
    font-size: 1.65rem;
    letter-spacing: -0.03em;
    margin: 0.2rem 0 0.3rem;
}
.wizard-intro {
    margin: 0 0 1.35rem;
}
.wizard-step[hidden] {
    display: none;
}
.consideration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1rem 0;
}
.consideration-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}
.consideration-card > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--purple-soft);
    color: var(--purple);
    font-weight: 900;
}
.consideration-card div {
    display: grid;
    gap: 0.15rem;
}
.consideration-card small {
    color: var(--muted);
    line-height: 1.35;
}
.participant-field {
    max-width: 250px;
    margin-top: 1.2rem;
}
.advanced-settings {
    margin: 1rem 0 1.2rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #faf8f5;
}
.advanced-settings summary {
    padding: 1rem;
    font-weight: 800;
    cursor: pointer;
}
.advanced-inner {
    padding: 0 1rem 1rem;
}
.availability-note {
    background: #f2f7ff;
    border-color: #cedbf4;
    color: #304c7d;
}
.availability-fieldset {
    border: 0;
    border-bottom: 1px solid #e5ded7;
    padding: 0 0 1rem;
    margin: 0 0 1rem;
}
.availability-fieldset legend {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--muted);
    margin-bottom: 0.55rem;
}
.availability-scale {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}
.availability-choice {
    position: relative;
}
.availability-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.availability-choice span {
    height: 100%;
    display: grid;
    gap: 0.15rem;
    padding: 0.7rem;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    cursor: pointer;
}
.availability-choice strong {
    font-size: 0.83rem;
}
.availability-choice small {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--muted);
}
.availability-choice input:checked + span {
    background: var(--purple-soft);
    border-color: var(--purple);
    color: #5137aa;
}
.availability-choice input[value="UNAVAILABLE"]:checked + span {
    background: var(--red-soft);
    border-color: #d98d95;
    color: var(--red);
}
.availability-privacy {
    margin-top: 0.4rem;
}
.fit-panel {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 1rem;
    align-items: stretch;
    max-width: 600px;
    margin: 1.2rem auto;
}
.fit-score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px solid #d9d0f2;
    background: #f7f3ff;
    border-radius: 18px;
    padding: 1rem;
}
.fit-score strong {
    font-size: 2.35rem;
    letter-spacing: -0.05em;
    color: #4f35ad;
}
.fit-score span {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 850;
    font-size: 0.72rem;
    color: #6d5e91;
}
.fit-score small {
    margin-top: 0.3rem;
    color: var(--muted);
    font-weight: 700;
}
.fit-components {
    display: grid;
    gap: 0.45rem;
}
.fit-component {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0.8rem;
    border-radius: 11px;
    background: #f6f2ed;
    text-align: left;
    font-size: 0.86rem;
}
.fit-level {
    font-size: 0.78rem;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #ece7e1;
}
.fit-excellent,
.fit-strong {
    background: var(--green-soft);
    color: var(--green);
}
.fit-good {
    background: var(--purple-soft);
    color: #5137aa;
}
.fit-mixed {
    background: var(--amber-soft);
    color: var(--amber);
}
.fit-low {
    background: var(--red-soft);
    color: var(--red);
}
.runner-card {
    display: inline-grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #faf8f5;
}
.runner-card span {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.runner-card em {
    font-size: 0.78rem;
    font-style: normal;
    color: var(--muted);
}
.tie-options span {
    display: grid;
    gap: 0.12rem;
}
.tie-options small {
    font-size: 0.7rem;
    color: #745eb0;
}
.recovery-card {
    max-width: 600px;
    margin: 1.2rem auto 0;
    text-align: left;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #faf8f5;
}
.recovery-card p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0.35rem 0 0;
}
@media (max-width: 820px) {
    .consideration-grid {
        grid-template-columns: 1fr;
    }
    .fit-panel {
        grid-template-columns: 1fr;
    }
    .fit-score {
        min-height: 130px;
    }
}
@media (max-width: 560px) {
    .wizard-progress {
        grid-template-columns: 1fr;
    }
    .wizard-progress span {
        display: none;
    }
    .wizard-progress span.active:last-of-type,
    .wizard-progress span.active:not(:has(~ .active)) {
        display: flex;
    }
    .availability-scale {
        grid-template-columns: 1fr;
    }
    .runner-card {
        grid-template-columns: 1fr;
        text-align: left;
    }
}

/* v0.7 growth + monetization */
.nav-text-link {
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
    color: var(--muted);
    padding: 0.45rem 0.25rem;
}
.nav-text-link:hover {
    color: var(--ink);
}
.plan-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border: 1px solid #d9d0f2;
    background: linear-gradient(115deg, #faf7ff, #fffdfa);
    border-radius: 18px;
    padding: 1rem 1.15rem;
    margin-bottom: 1.4rem;
}
.plan-strip > div {
    display: grid;
    gap: 0.25rem;
}
.plan-strip strong {
    font-size: 1.05rem;
}
.plan-strip small {
    color: var(--muted);
}
.finalized-chip {
    color: var(--green);
    font-weight: 800;
}
.discovery-box {
    border: 1px solid #d9d0f2;
    background: #fbf9ff;
    border-radius: 16px;
    padding: 1rem;
    margin: 0 0 1.2rem;
}
.discovery-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.discovery-head > div {
    display: grid;
    gap: 0.2rem;
}
.discovery-head small {
    color: var(--muted);
    line-height: 1.4;
}
.discovery-controls {
    display: grid;
    grid-template-columns: 1.3fr 1fr auto;
    gap: 0.55rem;
    margin-top: 0.85rem;
}
.discovery-source-line,
.option-public-meta {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    margin: 0.35rem 0.15rem;
}
.discovery-source-line a,
.source-link {
    color: #5b43b5;
    font-size: 0.78rem;
    font-weight: 750;
    text-decoration: none;
}
.source-link {
    display: inline-flex;
    margin-top: 0.35rem;
}
.saved-group-select {
    margin: 1.15rem 0;
    max-width: 520px;
}
.suggestions-panel {
    margin: 1rem 0;
}
.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.panel-head h3 {
    margin: 0.1rem 0;
}
.suggestion-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
}
.suggestion-row:first-of-type {
    margin-top: 0.8rem;
}
.suggestion-row > div:first-child {
    display: grid;
    gap: 0.1rem;
}
.suggestion-row small {
    color: var(--muted);
    font-size: 0.75rem;
}
.btn-ghost {
    background: transparent;
    color: var(--muted);
    border: 0;
}
.lock-note {
    margin-top: 0.65rem;
}
.participant-suggestion {
    margin: 1rem 0;
    background: #fbf9ff;
    border-color: #d9d0f2;
}
.participant-suggestion h3 {
    margin: 0.15rem 0 0.3rem;
}
.suggestion-inline {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
    margin-top: 0.75rem;
}
.finalization-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin: 1rem 0;
    border-color: #d9d0f2;
    background: linear-gradient(120deg, #fffdfa, #faf7ff);
}
.finalization-card h2 {
    margin: 0.15rem 0 0.35rem;
}
.finalization-card.finalized {
    border-color: #bce3cf;
    background: linear-gradient(120deg, #fffdfa, #eef9f3);
}
.finalization-card.finalized .result-icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}
.finalize-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
.final-actions {
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin-top: 0.8rem;
}
.pricing-head {
    text-align: center;
    max-width: 760px;
    margin: 2rem auto 2.5rem;
}
.pricing-head h1 {
    font-size: clamp(2.7rem, 6vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.06em;
    margin: 0.8rem 0;
}
.pricing-head p {
    color: var(--muted);
    font-size: 1.08rem;
    line-height: 1.6;
}
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    max-width: 850px;
    margin: auto;
}
.price-card {
    padding: 1.8rem;
    position: relative;
}
.price-card.featured {
    border-color: #bfb0ef;
    box-shadow: 0 18px 60px rgba(80, 54, 160, 0.12);
}
.plan-name {
    display: block;
    font-weight: 850;
    font-size: 1.2rem;
}
.price {
    font-size: 2.5rem;
    letter-spacing: -0.05em;
    font-weight: 900;
    margin: 0.35rem 0;
}
.price-card p {
    color: var(--muted);
}
.price-card ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.6rem;
    margin: 1.4rem 0;
}
.price-card li:before {
    content: "✓";
    color: var(--green);
    font-weight: 900;
    margin-right: 0.5rem;
}
.popular {
    position: absolute;
    right: 1rem;
    top: 1rem;
    background: var(--purple-soft);
    color: #5238aa;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 850;
}
.pricing-privacy {
    max-width: 850px;
    margin: 1.2rem auto;
}
.billing-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 1rem;
}
.billing-card h2 {
    font-size: 2rem;
    margin: 0.5rem 0;
}
.plan-badge {
    display: inline-flex;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    background: #ece7e1;
    font-size: 0.75rem;
    font-weight: 900;
}
.plan-badge.plus {
    background: var(--purple-soft);
    color: #5137aa;
}
.feature-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.65rem;
    line-height: 1.4;
}
.feature-list li {
    padding: 0.15rem 0;
}
.groups-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1rem;
}
.group-grid {
    display: grid;
    gap: 0.75rem;
}
.group-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.group-card h3 {
    margin: 0 0 0.2rem;
}
.group-card p {
    margin: 0;
    color: var(--muted);
}
.group-card > div:last-child {
    display: flex;
    gap: 0.4rem;
}
.group-editor {
    position: sticky;
    top: 90px;
    height: max-content;
}
.group-editor h3 {
    margin: 0.15rem 0 1rem;
}
.public-final {
    text-align: center;
    max-width: 720px;
    margin: 3.5rem auto;
}
.public-final h1 {
    font-size: clamp(3rem, 8vw, 5.5rem);
    letter-spacing: -0.065em;
    margin: 0.55rem 0;
}
.final-mark {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green);
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 900;
    margin: 0 auto 1rem;
}
.final-question {
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0.2rem 0 1.5rem;
}
.final-event {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}
.final-event span {
    color: var(--muted);
}
.final-note {
    color: var(--muted);
    line-height: 1.6;
}
.final-privacy {
    text-align: left;
    margin-top: 2rem;
}
.final-brand {
    justify-content: center;
    margin-top: 2rem;
}
.final-brand img {
    width: 28px;
    height: 28px;
}
@media (max-width: 820px) {
    .discovery-controls,
    .pricing-grid,
    .billing-layout,
    .groups-layout,
    .finalize-grid {
        grid-template-columns: 1fr;
    }
    .group-editor {
        position: static;
    }
    .plan-strip,
    .suggestion-row,
    .discovery-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .suggestion-inline {
        grid-template-columns: 1fr;
    }
    .finalization-card {
        grid-template-columns: 1fr;
    }
    .nav-text-link {
        display: none;
    }
}

.provider-attribution {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--muted);
}
.provider-attribution a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* v0.7.2 clarity + visual cleanup */
body {
    background:
        radial-gradient(
            circle at 88% 6%,
            rgba(226, 217, 255, 0.82) 0,
            transparent 25rem
        ),
        linear-gradient(180deg, #f8f5f0 0, #f6f3ee 100%);
}
main {
    width: min(1060px, 92vw);
    padding-top: 2.6rem;
}
.nav {
    height: 68px;
    background: rgba(248, 245, 240, 0.9);
    box-shadow: 0 1px 0 rgba(23, 19, 29, 0.03);
}
.nav-actions {
    gap: 0.9rem;
}
.nav-new {
    padding-inline: 0.9rem;
}
.nav-email {
    display: none;
}
.account-menu {
    position: relative;
}
.account-menu summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--muted);
}
.account-menu summary::-webkit-details-marker {
    display: none;
}
.account-dot {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 0.72rem;
}
.account-menu[open] .account-dot {
    background: var(--purple);
}
.account-popover {
    position: absolute;
    right: 0;
    top: 42px;
    width: 270px;
    padding: 0.8rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(31, 20, 39, 0.14);
    display: grid;
    gap: 0.2rem;
    z-index: 30;
}
.account-popover a,
.account-popover button {
    border: 0;
    background: transparent;
    text-align: left;
    padding: 0.62rem 0.7rem;
    border-radius: 9px;
    text-decoration: none;
    color: var(--ink);
    font-weight: 700;
}
.account-popover a:hover,
.account-popover button:hover {
    background: #f5f1ec;
}
.account-email {
    font-size: 0.78rem;
    color: var(--muted);
    padding: 0.35rem 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.plan-inline {
    display: inline-flex;
    width: max-content;
    align-items: center;
    gap: 0.25rem;
    border-radius: 999px;
    padding: 0.28rem 0.58rem;
    background: var(--purple-soft);
    color: #573cb3;
    font-size: 0.72rem;
    font-weight: 850;
    text-decoration: none;
}
.plan-inline.free {
    background: #eeeae5;
    color: var(--muted);
}
.hero {
    padding: 5.3rem 0 4.6rem;
    gap: 4.6rem;
}
.hero h1 {
    max-width: 720px;
    font-size: clamp(3.2rem, 6.7vw, 6rem);
}
.hero p {
    font-size: 1.14rem;
    max-width: 670px;
}
.trust-line {
    margin-top: 1.15rem;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 700;
}
.privacy-demo {
    transform: none;
    border-radius: 26px;
    padding: 1.55rem;
    background: linear-gradient(155deg, #1b1621, #251d2e);
}
.private-pill {
    background: rgba(255, 255, 255, 0.045);
}
.section-heading {
    max-width: 650px;
    margin-bottom: 1.4rem;
}
.section-heading h2 {
    margin: 0.7rem 0 0;
}
.page-head {
    margin-bottom: 1.9rem;
}
.page-head h1 {
    font-size: 2.6rem;
}
.title-with-plan {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.dashboard-head {
    align-items: center;
}
.decision-grid-clean {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}
.decision-card-clean {
    display: block;
    background: rgba(255, 253, 250, 0.86);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.25rem;
    text-decoration: none;
    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}
.decision-card-clean:hover {
    transform: translateY(-2px);
    border-color: #cbbfe8;
    box-shadow: 0 14px 40px rgba(30, 20, 35, 0.07);
}
.decision-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.decision-card-top > div {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.decision-type {
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}
.decision-card-clean h3 {
    font-size: 1.14rem;
    margin: 1rem 0 0.8rem;
    line-height: 1.3;
}
.decision-response-row {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    color: var(--muted);
    font-size: 0.78rem;
}
.decision-response-row strong {
    color: var(--ink);
    font-size: 0.82rem;
}
.mini-progress {
    height: 5px;
    background: #ece7e1;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.7rem;
}
.mini-progress span {
    display: block;
    height: 100%;
    background: var(--purple);
    border-radius: 999px;
}
.clean-empty {
    border: 1px dashed #cec6d0;
    background: transparent;
    box-shadow: none;
    border-radius: 20px;
}
.empty-icon {
    font-size: 2rem;
    color: var(--purple);
    margin-bottom: 0.7rem;
}
.wizard-card {
    border-color: #e1dbe3;
    box-shadow: 0 20px 70px rgba(38, 24, 47, 0.06);
}
.wizard-step {
    padding-top: 0.2rem;
}
.wizard-intro {
    max-width: 650px;
}
.consideration-card {
    box-shadow: none;
}
.advanced-settings {
    background: transparent;
    border-color: #e5dfd8;
}
.advanced-settings summary {
    font-size: 0.9rem;
    color: var(--muted);
}
.privacy-line {
    margin: 1rem 0;
    padding: 0.72rem 0;
    border-top: 1px solid #ebe5de;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}
.privacy-line strong {
    color: var(--ink);
}
.discovery-box {
    background: linear-gradient(120deg, #fbf9ff, #fffdfa);
    box-shadow: none;
}
.discovery-head strong {
    font-size: 1rem;
}
.decision-page-head {
    margin-bottom: 1.4rem;
}
.back-link {
    display: inline-flex;
    margin-bottom: 1.25rem;
    color: var(--muted);
    font-size: 0.88rem;
    font-weight: 750;
    text-decoration: none;
}
.back-link:hover {
    color: var(--ink);
}
.decision-title-row h1 {
    font-size: clamp(2.4rem, 5vw, 4rem);
    letter-spacing: -0.055em;
    line-height: 1.03;
    margin: 0.65rem 0 0.55rem;
    max-width: 800px;
}
.decision-title-row p {
    color: var(--muted);
    max-width: 720px;
    line-height: 1.6;
    margin: 0;
}
.decision-overview {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.1rem 0 1.5rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.8rem;
}
.response-stat {
    display: flex;
    align-items: baseline;
    gap: 0.42rem;
    white-space: nowrap;
}
.response-stat strong {
    font-size: 1.8rem;
    letter-spacing: -0.05em;
}
.response-stat span {
    color: var(--muted);
    font-size: 0.86rem;
}
.overview-progress {
    min-width: 160px;
}
.overview-progress .mini-progress {
    margin: 0 0 0.45rem;
}
.overview-progress small {
    color: var(--muted);
}
.decision-primary-actions {
    display: flex;
    gap: 0.55rem;
    justify-content: flex-end;
}
.clean-section {
    padding: 1.4rem 0;
    border-top: 1px solid var(--line);
    margin-top: 1.4rem;
}
.section-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.7rem;
}
.section-row h2 {
    font-size: 1.65rem;
    letter-spacing: -0.035em;
    margin: 0.2rem 0 0;
}
.clean-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}
.clean-options .option-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fffdfa;
    padding: 0.9rem 1rem;
}
.quiet-rule-line {
    color: var(--muted);
    font-size: 0.82rem;
    margin-top: 0.85rem;
}
.clean-manage {
    margin: 1.5rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 0.1rem 0;
}
.clean-manage > summary {
    padding: 1rem 0;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}
.manage-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0 0 1rem;
}
.manage-actions .schedule-inline {
    flex: 1 1 100%;
    border-top: 1px solid #eee8e1;
    margin-top: 0.4rem;
    padding-top: 0.9rem;
}
.danger-text {
    color: var(--red);
}
.invite-dialog {
    width: min(620px, 92vw);
    max-height: 86vh;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 1.3rem;
    background: #fffdfa;
    color: var(--ink);
    box-shadow: 0 28px 90px rgba(22, 14, 29, 0.25);
}
.invite-dialog::backdrop {
    background: rgba(19, 14, 25, 0.45);
    backdrop-filter: blur(4px);
}
.dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.dialog-head h2 {
    font-size: 1.8rem;
    letter-spacing: -0.04em;
    margin: 0.2rem 0;
}
.icon-button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 999px;
    background: #f0ebe5;
    color: var(--muted);
    font-size: 1.4rem;
}
.dialog-divider {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--muted);
    font-size: 0.75rem;
    margin: 1rem 0;
}
.dialog-divider:before,
.dialog-divider:after {
    content: "";
    height: 1px;
    background: var(--line);
    flex: 1;
}
.invite-dialog .invite-list {
    max-height: 220px;
    overflow: auto;
    margin-top: 0.8rem;
}
.invite-dialog .full-button {
    margin-top: 0.65rem;
}
.result-stage {
    text-align: center;
    padding: 3.2rem 1rem 2.5rem;
    margin: 1.2rem 0 2rem;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.result-spark {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 1.4rem;
}
.result-label {
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--muted);
}
.result-stage h2 {
    font-size: clamp(2.8rem, 7vw, 5rem);
    letter-spacing: -0.06em;
    line-height: 1;
    margin: 0.55rem auto 0.9rem;
    max-width: 800px;
}
.hero-fit {
    display: inline-grid;
    grid-template-columns: auto auto;
    column-gap: 0.45rem;
    align-items: baseline;
    margin: 0.35rem auto 0.8rem;
}
.hero-fit strong {
    font-size: 2rem;
    letter-spacing: -0.05em;
    color: #563ab3;
}
.hero-fit span {
    font-weight: 850;
    color: #563ab3;
}
.hero-fit small {
    grid-column: 1/-1;
    color: var(--muted);
    font-weight: 700;
}
.result-stage .result-summary {
    max-width: 650px;
    margin: 0.6rem auto 1rem;
}
.result-stage .result-highlights {
    max-width: 620px;
    margin: 1rem auto;
}
.result-details {
    max-width: 620px;
    margin: 1.2rem auto;
    text-align: left;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.result-details summary {
    padding: 0.85rem 0;
    cursor: pointer;
    font-weight: 800;
}
.result-details .fit-panel {
    margin: 0.2rem auto 1rem;
}
.result-no-fit .result-spark {
    background: var(--amber-soft);
    color: var(--amber);
}
.finalization-card {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.2rem;
    box-shadow: none;
}
.finalization-card:not(.finalized) {
    grid-template-columns: 1fr;
}
.suggestions-panel {
    border-top: 1px solid var(--line);
}
.clean-price {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fffdfa;
    padding: 1.7rem;
    position: relative;
}
.clean-price.featured {
    border-color: #bfb0ef;
    box-shadow: 0 16px 50px rgba(80, 54, 160, 0.1);
}
.clean-price .price {
    font-size: 2.6rem;
}
.clean-price ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.7rem;
    margin: 1.35rem 0;
}
.clean-price li:before {
    content: "✓";
    color: var(--green);
    font-weight: 900;
    margin-right: 0.5rem;
}
.pricing-trust {
    text-align: center;
    color: var(--muted);
    font-weight: 700;
    margin: 1.5rem auto;
}
.clean-billing {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fffdfa;
    padding: 1.6rem;
}
.billing-note {
    padding: 1.4rem 0;
    color: var(--muted);
    line-height: 1.6;
}
.billing-note strong {
    color: var(--ink);
    font-size: 1.05rem;
}
.billing-note p {
    margin: 0.4rem 0;
}
.billing-layout {
    align-items: start;
}
.footer {
    padding-block: 1.5rem;
}
@media (max-width: 820px) {
    .decision-grid-clean,
    .clean-options {
        grid-template-columns: 1fr;
    }
    .decision-overview {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .decision-primary-actions {
        justify-content: flex-start;
    }
    .decision-response-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    .account-summary-text {
        display: none;
    }
    .nav-actions {
        gap: 0.45rem;
    }
    .nav-text-link {
        display: none;
    }
    .nav-new {
        display: inline-flex;
    }
    .hero {
        grid-template-columns: 1fr;
        padding-top: 3.5rem;
        gap: 2.5rem;
    }
    .privacy-demo {
        max-width: 560px;
    }
    .result-stage {
        padding-inline: 0;
    }
    .clean-price {
        padding: 1.35rem;
    }
}
@media (max-width: 560px) {
    main {
        width: min(94vw, 1060px);
        padding-top: 1.8rem;
    }
    .brand span {
        display: none;
    }
    .nav {
        padding-inline: 4vw;
    }
    .page-head,
    .dashboard-head {
        align-items: flex-start;
        flex-direction: column;
    }
    .dashboard-head .btn {
        width: 100%;
    }
    .decision-primary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
    .decision-primary-actions .btn {
        width: 100%;
    }
    .response-stat strong {
        font-size: 1.55rem;
    }
    .decision-title-row h1 {
        font-size: 2.45rem;
    }
    .hero h1 {
        font-size: 3.4rem;
    }
    .steps {
        grid-template-columns: 1fr;
    }
    .pricing-head h1 {
        font-size: 3rem;
    }
    .manage-actions {
        align-items: stretch;
    }
    .manage-actions > .btn {
        width: 100%;
    }
    .schedule-inline {
        grid-template-columns: 1fr !important;
    }
    .footer {
        flex-direction: column;
    }
    .account-popover {
        right: -6px;
    }
}

/* v0.7.5 crisp brand icon rendering */
.sc-icon {
    --icon-fg: var(--purple);
    --icon-bg: var(--purple-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--icon-bg);
    color: var(--icon-fg);
    flex: 0 0 32px;
    vertical-align: middle;
    line-height: 0;
}
.sc-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    shape-rendering: auto;
}
.sc-icon-purple {
    --icon-fg: #6044bd;
    --icon-bg: #eee9fc;
}
.sc-icon-green {
    --icon-fg: #176a49;
    --icon-bg: #e4f4ec;
}
.sc-icon-amber {
    --icon-fg: #8a5a16;
    --icon-bg: #fbf0d8;
}
.sc-icon-rose {
    --icon-fg: #a44059;
    --icon-bg: #fae8ed;
}
.sc-icon-sky {
    --icon-fg: #356a93;
    --icon-bg: #e7f1f8;
}
.sc-icon-inline {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 8px;
}
.sc-icon-inline svg {
    width: 18px;
    height: 18px;
}
.sc-icon-tiny {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
    border-radius: 7px;
}
.sc-icon-tiny svg {
    width: 16px;
    height: 16px;
}
.sc-icon-large {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    border-radius: 14px;
}
.sc-icon-large svg {
    width: 24px;
    height: 24px;
}
.template-icon {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex: 0 0 auto;
}
.template-icon > .sc-icon {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.trust-line,
.pricing-trust,
.quiet-rule-line,
.decision-type,
.meta > span,
.result-highlights > div {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.consideration-icon {
    display: block;
}
.consideration-icon .sc-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
}
.consideration-icon .sc-icon svg {
    width: 24px;
    height: 24px;
}
.feature-note-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}
.empty-icon .sc-icon,
.result-spark .sc-icon,
.result-icon .sc-icon,
.final-mark .sc-icon,
.privacy-icon .sc-icon {
    margin: auto;
}
.result-spark,
.result-icon,
.final-mark,
.privacy-icon {
    font-size: 0;
}
.result-spark,
.result-no-fit .result-spark {
    background: transparent !important;
}
.result-highlights > div > span:last-child {
    flex: 1;
}
.pricing-trust {
    justify-content: center;
}
.quiet-rule-line {
    align-items: flex-start;
}

/* v0.7.5 multi-email chip input */
.email-chip-field {
    margin-top: 0.2rem;
}
.email-chip-box {
    min-height: 52px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
    cursor: text;
}
.email-chip-box:focus-within {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(115, 85, 217, 0.1);
}
.email-chip-box.has-invalid {
    border-color: #d15f5f;
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(209, 95, 95, 0.08);
}
.email-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}
.email-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    padding: 0.38rem 0.48rem 0.38rem 0.62rem;
    border: 1px solid rgba(115, 85, 217, 0.2);
    border-radius: 999px;
    background: rgba(115, 85, 217, 0.08);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
}
.email-chip > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.email-chip-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(46, 157, 106, 0.13);
    color: #23845a;
    font-size: 0.68rem;
    font-weight: 900;
}
.email-chip.invalid {
    border-color: rgba(193, 64, 64, 0.28);
    background: rgba(202, 72, 72, 0.08);
    color: #9b3434;
}
.email-chip-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(202, 72, 72, 0.15);
    color: #b73f3f;
    font-size: 0.68rem;
    font-weight: 900;
}
.email-chip button {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.65;
}
.email-chip button:hover {
    background: rgba(23, 19, 29, 0.08);
    opacity: 1;
}
.email-chip-entry {
    flex: 1 1 180px;
    min-width: 150px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    padding: 0.35rem 0.15rem;
}
.email-chip-entry::placeholder {
    color: #968e9e;
}
.email-chip-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: flex-start;
    margin-top: 0.42rem;
}
.email-chip-count {
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--purple);
    white-space: nowrap;
}
.email-chip-error {
    min-height: 1.2em;
    margin-top: 0.28rem;
    color: #b73f3f;
    font-size: 0.8rem;
    font-weight: 700;
}
.required-mark {
    color: #b73f3f;
}
.invite-warning-banner {
    margin: 0 0 1rem;
}
@media (max-width: 640px) {
    .email-chip-meta {
        display: block;
    }
    .email-chip-count {
        display: block;
        margin-top: 0.25rem;
    }
    .email-chip > span:first-child {
        max-width: 190px;
    }
}

/* v0.7.6 supportive authentication */
.auth-supportive {
    max-width: 520px;
}
.auth-card {
    padding: 1.45rem;
}
.auth-card form {
    display: grid;
}
.auth-switch {
    margin: 1rem 0 0;
    text-align: center;
}
.password-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.password-input-wrap .password-input {
    padding-right: 5.3rem;
}
.password-toggle {
    position: absolute;
    right: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--purple);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;
    padding: 0.4rem 0.45rem;
    border-radius: 8px;
    cursor: pointer;
}
.password-toggle:hover {
    background: rgba(115, 85, 217, 0.08);
}
.password-toggle:focus-visible {
    outline: 2px solid var(--purple);
    outline-offset: 2px;
}
.password-rules {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.7rem;
    margin-top: 0.55rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid #ebe4f3;
    border-radius: 12px;
    background: #fbf9ff;
}
.password-rule {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.25;
    transition: color 0.16s ease;
}
.password-rule-icon {
    width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 17px;
    border-radius: 50%;
    background: #eee9f3;
    color: #81798a;
    font-size: 0.68rem;
    font-weight: 900;
}
.password-rule.passed {
    color: #176a49;
}
.password-rule.passed .password-rule-icon {
    background: #e4f4ec;
    color: #176a49;
}
.password-rule.failed {
    color: #a64747;
}
.password-rule.failed .password-rule-icon {
    background: #fae9e9;
    color: #a64747;
}
.field-error {
    min-height: 1.15em;
    margin-top: 0.3rem;
    color: #b73f3f;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.35;
}
.input.input-invalid {
    border-color: #c95353;
    background: #fffafa;
    box-shadow: 0 0 0 3px rgba(201, 83, 83, 0.08);
}
.input.input-invalid:focus {
    border-color: #c95353;
    box-shadow: 0 0 0 3px rgba(201, 83, 83, 0.12);
}
.auth-card .error {
    margin-bottom: 0.85rem;
}
@media (max-width: 520px) {
    .password-rules {
        grid-template-columns: 1fr;
    }
    .auth-card {
        padding: 1.15rem;
    }
}

/* v0.7.7 motion polish */
:root {
    --motion-fast: 160ms;
    --motion-base: 240ms;
    --motion-slow: 360ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sc-page-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes sc-card-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes sc-modal-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes sc-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes sc-chip-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes sc-result-in {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes sc-progress-in {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* Page-level entrance: enough motion to feel deliberate, never sluggish. */
main > * {
    animation: sc-page-in var(--motion-slow) var(--motion-ease) both;
}
main > *:nth-child(2) {
    animation-delay: 35ms;
}
main > *:nth-child(3) {
    animation-delay: 70ms;
}
main > *:nth-child(4) {
    animation-delay: 105ms;
}

/* Cards and repeated content gently stage in instead of appearing all at once. */
.decision-grid-clean > *,
.group-grid > *,
.steps > *,
.pricing-grid > *,
.clean-options > *,
.consideration-grid > * {
    animation: sc-card-in var(--motion-slow) var(--motion-ease) both;
}
.decision-grid-clean > *:nth-child(2),
.group-grid > *:nth-child(2),
.steps > *:nth-child(2),
.pricing-grid > *:nth-child(2),
.clean-options > *:nth-child(2),
.consideration-grid > *:nth-child(2) {
    animation-delay: 45ms;
}
.decision-grid-clean > *:nth-child(3),
.group-grid > *:nth-child(3),
.steps > *:nth-child(3),
.clean-options > *:nth-child(3),
.consideration-grid > *:nth-child(3) {
    animation-delay: 90ms;
}
.decision-grid-clean > *:nth-child(4),
.group-grid > *:nth-child(4),
.clean-options > *:nth-child(4),
.consideration-grid > *:nth-child(4) {
    animation-delay: 135ms;
}
.decision-grid-clean > *:nth-child(n + 5),
.group-grid > *:nth-child(n + 5),
.clean-options > *:nth-child(n + 5),
.consideration-grid > *:nth-child(n + 5) {
    animation-delay: 160ms;
}

/* Buttons, cards, inputs, badges and interactive rows transition instead of snapping. */
.btn,
.icon-button,
.password-toggle,
.email-chip button,
.account-menu summary,
.account-popover a,
.account-popover button {
    transition:
        transform var(--motion-fast) var(--motion-ease),
        background-color var(--motion-base) var(--motion-ease-soft),
        border-color var(--motion-base) var(--motion-ease-soft),
        box-shadow var(--motion-base) var(--motion-ease-soft),
        color var(--motion-base) var(--motion-ease-soft),
        opacity var(--motion-base) var(--motion-ease-soft);
}
.btn:not(:disabled):active,
.icon-button:active,
.password-toggle:active {
    transform: scale(0.975);
}

.input,
textarea,
select,
.email-chip-box,
.template-option,
.option-item,
.card,
.decision-card-clean,
.clean-price,
.clean-billing,
.plan-inline,
.status,
.eyebrow {
    transition:
        border-color var(--motion-base) var(--motion-ease-soft),
        box-shadow var(--motion-base) var(--motion-ease-soft),
        background-color var(--motion-base) var(--motion-ease-soft),
        color var(--motion-base) var(--motion-ease-soft),
        transform var(--motion-base) var(--motion-ease);
}

/* Keep hover movement restrained and consistent. */
.card:hover {
    transform: translateY(-1px);
}
.template-option:hover,
.option-item:hover {
    transform: translateY(-1px);
}

/* Progress fills and state changes get a short visual handoff. */
.mini-progress span,
.progress span,
.progress-bar span {
    transform-origin: left center;
    animation: sc-progress-in 420ms var(--motion-ease) both;
    transition:
        width var(--motion-slow) var(--motion-ease),
        background-color var(--motion-base) var(--motion-ease-soft);
}

/* Chip entry/removal feels connected to the user's action. */
.email-chip {
    animation: sc-chip-in 200ms var(--motion-ease) both;
    transition:
        background-color var(--motion-base) var(--motion-ease-soft),
        border-color var(--motion-base) var(--motion-ease-soft),
        color var(--motion-base) var(--motion-ease-soft),
        transform var(--motion-fast) var(--motion-ease),
        opacity var(--motion-fast) var(--motion-ease);
}
.email-chip:hover {
    transform: translateY(-1px);
}

/* Auth feedback should change softly instead of flashing. */
.password-rule,
.password-rule-icon,
.field-error,
.error,
.success,
.notice {
    transition:
        color var(--motion-base) var(--motion-ease-soft),
        background-color var(--motion-base) var(--motion-ease-soft),
        border-color var(--motion-base) var(--motion-ease-soft),
        opacity var(--motion-base) var(--motion-ease-soft),
        transform var(--motion-base) var(--motion-ease);
}

/* Dialog entrance is intentionally a touch slower than normal UI state changes. */
dialog[open],
.invite-dialog[open] {
    animation: sc-modal-in 300ms var(--motion-ease) both;
}
dialog[open]::backdrop,
.invite-dialog[open]::backdrop {
    animation: sc-backdrop-in 260ms ease-out both;
}

/* The result reveal gets a little more ceremony without adding a fake loading delay. */
.result-stage,
.public-final {
    animation: sc-result-in 440ms var(--motion-ease) both;
}
.result-stage .result-spark,
.public-final .final-mark {
    animation: sc-card-in 500ms var(--motion-ease) 80ms both;
}
.result-stage h2,
.public-final h1 {
    animation: sc-page-in 460ms var(--motion-ease) 120ms both;
}
.result-stage .hero-fit,
.result-stage .result-summary,
.public-final .final-question {
    animation: sc-page-in 420ms var(--motion-ease) 170ms both;
}

/* Details/menus feel less abrupt when they appear. */
.account-popover,
.clean-manage[open] > :not(summary),
.result-details[open] > :not(summary),
.advanced-settings[open] > :not(summary) {
    animation: sc-page-in 220ms var(--motion-ease) both;
}

/* Respect accessibility preferences and avoid motion in print. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* v0.7.8 organizer identity */
.name-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.account-name {
    font-weight: 750;
    color: var(--ink);
    margin-bottom: 2px;
}
.organizer-context {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0 4px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
}
.organizer-context > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.organizer-context small {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}
.organizer-context strong {
    font-size: 14px;
    color: var(--ink);
}
.organizer-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--purple-soft);
    color: var(--purple);
    font-weight: 800;
}
@media (max-width: 640px) {
    .name-fields {
        grid-template-columns: 1fr;
    }
}

/* v0.7.12 inline validation — appended to the user-supplied stylesheet baseline */
.input.input-invalid,
.textarea.input-invalid,
.select.input-invalid,
.password-input.input-invalid,
.email-chip-box.has-invalid,
.validation-invalid .input,
.validation-invalid .select,
.validation-invalid .rating-scale,
.validation-invalid .availability-scale {
    border-color: var(--red) !important;
    background-color: var(--red-soft) !important;
    box-shadow: 0 0 0 3px rgba(164, 58, 67, 0.10) !important;
}
.field-has-error > label,
.field-has-error > span,
.validation-invalid > legend,
.validation-invalid > label {
    color: var(--red);
}
.field-error,
.email-chip-error {
    display: block;
    margin-top: 0.38rem;
    color: var(--red);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}
.field-error:empty,
.email-chip-error:empty { display: none; }
.validation-invalid {
    border-color: rgba(164,58,67,.6) !important;
}
.rating-card.validation-invalid {
    box-shadow: 0 0 0 3px rgba(164,58,67,.08);
}
.terms-field.field-has-error .terms-check {
    color: var(--red);
}
.form-submit-message {
    margin-top: 0.8rem;
}
.form-submit-message:empty { display:none; }
.discovery-controls > .field-error { grid-column: 1 / -1; }
.suggestion-inline > .field-error { grid-column: 1 / -1; }

/* v0.8.0 decision clarity, autosave, previews, attention states, and demo */
.draft-toolbar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.draft-status {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.72);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
}
.decision-framing {
    margin: 1rem 0 0.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid #ece6df;
}
.decision-final-actions {
    align-items: center;
    flex-wrap: wrap;
}
.decision-final-actions .btn-purple {
    margin-left: auto;
}
.dashboard-section {
    margin: 0 0 2.25rem;
}
.dashboard-section .section-row {
    margin-bottom: 0.85rem;
}
.attention-section {
    padding: 1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(236,231,251,.68), rgba(255,253,250,.5));
    border: 1px solid rgba(115,85,217,.13);
}
.attention-count {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 .5rem;
    border-radius: 999px;
    background: var(--purple);
    color: #fff;
    font-size: .78rem;
    font-weight: 850;
}
.attention-card {
    border-color: rgba(115,85,217,.22);
}
.attention-chip {
    display: inline-flex;
    width: fit-content;
    margin: -0.1rem 0 0.65rem;
    padding: 0.32rem 0.58rem;
    border-radius: 999px;
    font-size: .74rem;
    line-height: 1.1;
    font-weight: 850;
}
.attention-green { background: var(--green-soft); color: var(--green); }
.attention-purple { background: var(--purple-soft); color: #5137aa; }
.attention-amber { background: var(--amber-soft); color: var(--amber); }
.attention-red { background: var(--red-soft); color: var(--red); }
.attention-muted { background: #eee9e3; color: var(--muted); }

.preview-dialog {
    width: min(760px, 92vw);
    max-height: 88vh;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 1.15rem;
    background: var(--card);
    box-shadow: 0 28px 90px rgba(30,20,35,.22);
}
.preview-dialog::backdrop {
    background: rgba(23,19,29,.42);
    backdrop-filter: blur(3px);
}
.preview-tabs {
    display: inline-flex;
    gap: .3rem;
    padding: .28rem;
    margin: .75rem 0 1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f2eee9;
}
.preview-tab {
    border: 0;
    border-radius: 999px;
    padding: .58rem .8rem;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}
.preview-tab.active {
    background: #fff;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(30,20,35,.08);
}
.preview-panel {
    min-height: 340px;
}
.preview-footer {
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
    text-align: center;
}
.participant-preview {
    max-width: 620px;
    margin: 0 auto;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}
.preview-privacy { margin-bottom: .55rem; }
.participant-preview h3 {
    margin: .8rem 0 .35rem;
    font-size: 1.75rem;
    letter-spacing: -.03em;
}
.preview-context {
    margin: .2rem 0 .7rem;
    color: var(--muted);
    line-height: 1.55;
}
.preview-deadline {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .65rem .75rem;
    margin: .7rem 0;
    border-radius: 12px;
    background: var(--green-soft);
    color: #315e4a;
    font-size: .86rem;
}
.preview-options {
    display: grid;
    gap: .5rem;
    margin-top: .9rem;
}
.preview-option {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .72rem .8rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fffdfa;
}
.preview-option > span {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: .75rem;
    font-weight: 850;
}
.email-preview-shell {
    max-width: 620px;
    margin: 0 auto;
}
.email-preview-meta {
    display: grid;
    gap: .3rem;
    margin-bottom: .65rem;
    color: var(--muted);
    font-size: .78rem;
}
.email-preview-card {
    padding: 1.6rem;
    border: 1px solid #e4ddd6;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 38px rgba(30,20,35,.07);
}
.email-preview-card h3 {
    margin: .8rem 0 .6rem;
    font-size: 1.8rem;
    letter-spacing: -.035em;
}
.email-preview-card > p {
    color: #4e4852;
    line-height: 1.6;
}
.email-preview-detail,
.email-preview-private {
    padding: .9rem;
    margin: .85rem 0;
    border-radius: 13px;
    background: #f6f2fb;
    color: #4b3d68;
    line-height: 1.5;
}
.email-preview-detail strong,
.email-preview-detail small { display:block; }
.email-preview-detail p { margin: .4rem 0; color:#655b72; }
.email-preview-private { background: var(--green-soft); color:#315e4a; }
.preview-fake-button {
    pointer-events: none;
    margin-top: .25rem;
}

.demo-page {
    display: grid;
    gap: 1.5rem;
}
.demo-headline { margin-bottom: .2rem; }
.demo-progress-nav {
    position: sticky;
    top: 82px;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .55rem;
    padding: .55rem;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: rgba(247,244,239,.94);
    backdrop-filter: blur(14px);
}
.demo-step {
    display: flex;
    align-items: center;
    gap: .55rem;
    border: 0;
    border-radius: 13px;
    padding: .7rem .8rem;
    background: transparent;
    color: var(--muted);
    font-weight: 800;
    cursor: pointer;
}
.demo-step b {
    display:grid;
    place-items:center;
    width:26px;
    height:26px;
    border-radius:999px;
    background:#e7e0da;
    color:#6d6571;
}
.demo-step.active {
    background: var(--purple-soft);
    color:#4e35a3;
}
.demo-step.active b { background:var(--purple); color:#fff; }
.demo-panel {
    padding: 1rem 0 2rem;
}
.demo-two-col {
    display:grid;
    grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);
    gap:1rem;
    align-items:start;
}
.demo-organizer-card,
.demo-ballot-card { padding:1.5rem; }
.demo-organizer-card h2,
.demo-ballot-card h2 {
    margin:.45rem 0;
    font-size:2rem;
    letter-spacing:-.035em;
}
.demo-organizer-card > p { color:var(--muted); line-height:1.55; }
.demo-callout {
    padding:1.35rem;
    border:1px solid #d9d0f2;
    border-radius:18px;
    background:#f9f6ff;
}
.demo-callout h3 { margin:.45rem 0; }
.demo-callout p { margin:.35rem 0 0; color:var(--muted); line-height:1.6; }
.demo-actions {
    display:flex;
    justify-content:flex-end;
    gap:.6rem;
    margin-top:1rem;
}
.demo-rating-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.8rem 0;
    border-bottom:1px solid var(--line);
}
.demo-rating {
    padding:.35rem .55rem;
    border-radius:999px;
    background:#eee9e3;
    color:var(--muted);
    font-size:.76rem;
    font-weight:800;
}
.demo-rating.selected { background:var(--purple-soft); color:#5137aa; }
.demo-private-limit {
    display:flex;
    gap:.65rem;
    align-items:center;
    margin-top:1rem;
    padding:.8rem;
    border-radius:13px;
    background:#f6f2fb;
}
.demo-private-limit div { display:grid; gap:.18rem; }
.demo-private-limit small { color:var(--muted); }
.demo-result-stage { margin:0; }
.privacy-explainer {
    margin: 2rem 0;
    padding: 1.2rem 0;
}
.privacy-explainer-head {
    max-width: 720px;
    margin-bottom: 1rem;
}
.privacy-explainer-head h2 {
    margin:.65rem 0 .4rem;
    font-size:2rem;
    letter-spacing:-.035em;
}
.privacy-explainer-head p { color:var(--muted); }
.privacy-explainer-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:.8rem;
}
.privacy-card {
    padding:1.1rem;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fffdfa;
}
.privacy-card h3 { margin:.65rem 0 .45rem; }
.privacy-card ul {
    margin:.45rem 0 0;
    padding-left:1.1rem;
    display:grid;
    gap:.45rem;
    color:#4e4852;
    line-height:1.45;
}
.privacy-can { border-color:#c9e8d8; background:#fbfffd; }
.privacy-cannot { border-color:#d9d0f2; background:#fcfaff; }
.privacy-participant { border-color:#d9d0f2; }
.privacy-prose .privacy-explainer {
    max-width: 980px;
    width: min(92vw, 980px);
    margin-left: 50%;
    transform: translateX(-50%);
}
.section-cta { margin-top:1.1rem; }

@media (max-width: 820px) {
    .draft-toolbar { justify-content:flex-start; }
    .decision-final-actions .btn { flex:1 1 100%; }
    .decision-final-actions .btn-purple { margin-left:0; }
    .demo-two-col,
    .privacy-explainer-grid { grid-template-columns:1fr; }
    .demo-progress-nav { top:74px; }
}
@media (max-width: 560px) {
    .attention-section { margin-left:0; margin-right:0; padding:.75rem; }
    .preview-dialog { width:96vw; padding:.85rem; }
    .preview-tabs { width:100%; display:grid; grid-template-columns:1fr 1fr; }
    .demo-progress-nav { position:static; grid-template-columns:1fr; }
    .demo-actions { flex-direction:column; }
    .demo-actions .btn { width:100%; }
}


/* v0.8.1 micro-polish: interaction feedback, tactile states, loading, mobile, and accessibility */
:root {
    --focus-ring: rgba(115, 85, 217, 0.22);
    --soft-shadow: 0 10px 32px rgba(30, 20, 35, 0.065);
    --lift-shadow: 0 16px 44px rgba(30, 20, 35, 0.09);
}

html { color-scheme: light; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(115,85,217,.18); }
button, a, summary, input, textarea, select { -webkit-tap-highlight-color: transparent; }

/* Keep anchored validation and detail targets clear of the sticky navigation. */
.field,
.mini-field,
.option-editor,
.rating-card,
.clean-section,
#group-result { scroll-margin-top: 96px; }

/* Buttons feel tactile, preserve hierarchy, and communicate async work immediately. */
.btn {
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.btn-purple:not(:disabled):hover {
    filter: none;
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(83, 56, 174, .20);
}
.btn-secondary:not(:disabled):hover {
    filter: none;
    background: rgba(255,255,255,.82);
    border-color: #c9bfd0;
    transform: translateY(-1px);
}
.btn-ghost:not(:disabled):hover {
    filter: none;
    background: #f1ece6;
}
.btn:disabled,
.btn[aria-busy="true"] {
    filter: none;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}
.btn[aria-busy="true"] {
    opacity: .78;
    pointer-events: none;
    cursor: wait;
}
.btn[aria-busy="true"]::before {
    content: "";
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 999px;
    animation: sc-spin .7s linear infinite;
}
.button-confirmed { box-shadow: 0 0 0 3px rgba(31,122,85,.1); }
@keyframes sc-spin { to { transform: rotate(360deg); } }

/* Inputs get a quiet hover state before the stronger focus/error states. */
.input:not(:disabled):not(.input-invalid):hover,
.textarea:not(:disabled):hover,
.select:not(:disabled):hover,
.email-chip-box:hover {
    border-color: #bfb6c3;
}
.input::placeholder,
.textarea::placeholder { color: #918996; opacity: 1; }
.input:disabled,
.textarea:disabled,
.select:disabled {
    background: #f1ede8;
    color: #8a828d;
    cursor: not-allowed;
}
.field > label,
.mini-field > span { line-height: 1.35; }
.required-mark { font-weight: 850; }

/* Keyboard focus is consistent on custom controls, cards, tabs, and menu items. */
.decision-card-clean:focus-visible,
.demo-step:focus-visible,
.preview-tab:focus-visible,
.account-menu summary:focus-visible,
.icon-button:focus-visible,
.email-chip button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}
.nav-text-link.nav-active {
    color: var(--ink);
    position: relative;
}
.nav-text-link.nav-active::after {
    content: "";
    position: absolute;
    left: .25rem;
    right: .25rem;
    bottom: -.48rem;
    height: 2px;
    border-radius: 999px;
    background: var(--purple);
}

/* Cards stay light, but interactive cards read more clearly as clickable. */
.decision-card-clean,
.group-card,
.option-editor,
.consideration-card,
.price-card,
.clean-billing { box-shadow: 0 4px 18px rgba(30,20,35,.035); }
.decision-card-clean:hover { box-shadow: var(--lift-shadow); }
.decision-card-clean:focus-visible { border-color: #b9a8e8; box-shadow: var(--lift-shadow); }
.clean-options .option-item:hover { border-color: #d1c8d4; box-shadow: 0 7px 22px rgba(30,20,35,.045); }

/* Empty states are intentionally compact and keep their actions grouped. */
.empty-state h2,
.empty-state h3 { margin-bottom: .45rem; }
.empty-state p {
    max-width: 540px;
    margin: .35rem auto 1.2rem;
    line-height: 1.55;
}
.clean-empty > .btn { margin: .25rem .2rem; }

/* Loading is visible without flashing a large empty block. */
.loading-state {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 750;
}
.loading-spinner {
    width: 19px;
    height: 19px;
    border: 2px solid #d8d0dc;
    border-top-color: var(--purple);
    border-radius: 999px;
    animation: sc-spin .75s linear infinite;
}

/* Non-blocking notifications replace browser alerts for normal operational feedback. */
.toast-region {
    position: fixed;
    right: 18px;
    top: 84px;
    z-index: 1200;
    width: min(380px, calc(100vw - 36px));
    display: grid;
    gap: .55rem;
    pointer-events: none;
}
.toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .65rem;
    align-items: center;
    padding: .78rem .82rem;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,253,250,.97);
    box-shadow: 0 18px 52px rgba(30,20,35,.15);
    color: var(--ink);
    opacity: 0;
    transform: translateY(-6px) scale(.985);
    transition: opacity 180ms ease, transform 220ms var(--motion-ease);
    pointer-events: auto;
    backdrop-filter: blur(14px);
}
.toast-visible { opacity: 1; transform: translateY(0) scale(1); }
.toast-leaving { opacity: 0; transform: translateY(-4px) scale(.985); }
.toast-mark {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--green);
    font-weight: 900;
}
.toast-error .toast-mark { background: var(--red-soft); color: var(--red); }
.toast-notice .toast-mark { background: var(--amber-soft); color: var(--amber); }
.toast-copy { min-width: 0; line-height: 1.4; font-size: .86rem; font-weight: 700; }
.toast-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    font-size: 1.1rem;
}
.toast-close:hover { background: #f0ebe5; color: var(--ink); }

/* Menus and dialogs get more deliberate hover, spacing, and scroll treatment. */
.account-popover { padding: .72rem; }
.account-name { padding: .42rem .7rem .05rem; }
.account-menu[open] .account-popover { box-shadow: 0 22px 64px rgba(31,20,39,.17); }
.icon-button:hover { background: #e9e2da; color: var(--ink); transform: rotate(2deg); }
.invite-dialog,
.preview-dialog { scrollbar-gutter: stable; }
.invite-dialog::-webkit-scrollbar,
.preview-dialog::-webkit-scrollbar { width: 10px; }
.invite-dialog::-webkit-scrollbar-thumb,
.preview-dialog::-webkit-scrollbar-thumb { background: #d7cfd8; border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
.preview-tab:hover:not(.active) { color: var(--ink); background: rgba(255,255,255,.45); }

/* Progress and attention states stay readable while still feeling alive. */
.mini-progress { box-shadow: inset 0 1px 2px rgba(30,20,35,.04); }
.attention-card:hover { border-color: rgba(115,85,217,.38); }
.attention-chip { letter-spacing: .005em; }
.draft-status { transition: border-color var(--motion-base), background var(--motion-base), color var(--motion-base); }

/* Demo step changes stay in place instead of forcing the viewport downward. */
.demo-panel[hidden] { display: none; }
.demo-panel h2[tabindex="-1"] { outline: none; }
.demo-step[aria-selected="true"] { cursor: default; }
.demo-step:not(.active):hover { background: rgba(255,255,255,.55); color: var(--ink); }

/* Small-screen controls are easier to hit and dialogs use the available viewport cleanly. */
@media (max-width: 560px) {
    .toast-region {
        top: 76px;
        right: 10px;
        width: calc(100vw - 20px);
    }
    .invite-dialog,
    .preview-dialog {
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 28px);
        padding: 1rem;
    }
    .dialog-head { position: sticky; top: -1rem; z-index: 2; padding: .3rem 0 .65rem; background: linear-gradient(#fffdfa 80%, rgba(255,253,250,0)); }
    .decision-primary-actions { gap: .45rem; }
    .clean-empty > .btn { width: 100%; margin: .25rem 0; }
    .preview-panel { min-height: 0; }
}

@media (pointer: coarse) {
    .btn,
    .icon-button,
    .preview-tab,
    .demo-step,
    .account-menu summary { min-height: 44px; }
}
@media (hover: none) {
    .card:hover,
    .decision-card-clean:hover,
    .template-option:hover,
    .option-item:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .loading-spinner,
    .btn[aria-busy="true"]::before { animation: none !important; }
    .toast { transition: none !important; }
}

/* ========================================================================== */
/* Secret Consensus v1.0.0 — completion, profile, groups, ballot polish      */
/* ========================================================================== */

.decision-created-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    margin-bottom: 1.15rem;
    border: 1px solid rgba(40, 143, 96, .24);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(235, 249, 241, .96), rgba(255, 253, 250, .96));
    box-shadow: 0 10px 28px rgba(36, 107, 74, .07);
}
.decision-created-banner > div { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.decision-created-banner strong,
.decision-created-banner span { display: block; }
.decision-created-banner strong { color: var(--ink); margin-bottom: .18rem; }
.decision-created-banner span { color: var(--muted); line-height: 1.4; font-size: .9rem; }

.option-editor-head { align-items: center; }
.option-order-controls { display: inline-flex; gap: .25rem; flex: 0 0 auto; }
.option-order-controls .icon-button { width: 34px; height: 34px; min-height: 34px; font-weight: 800; }
.option-duplicate-error:not(:empty) { margin: .38rem 0 0 4.6rem; }
.discovery-filter-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; margin: .65rem 0; }
.discovery-filter-row label { display: grid; gap: .3rem; color: var(--muted); font-size: .76rem; font-weight: 800; }
.discovery-why { margin-top: .42rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.discovery-why strong { color: var(--ink); }

.saved-group-select { padding: .9rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.45); }
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.saved-group-picker-row { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .65rem; }
.group-avatar {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--purple-soft);
    color: var(--purple);
    font-weight: 900;
    letter-spacing: .02em;
    flex: 0 0 auto;
}
.group-avatar.small { width: 36px; height: 36px; border-radius: 11px; font-size: .76rem; }
.group-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.group-card-main { display: flex; align-items: center; gap: .85rem; min-width: 0; }
.group-card-main h3 { margin: 0; }
.group-card-main p { margin: .2rem 0 0; color: var(--muted); }
.group-card-main small { display: block; margin-top: .18rem; color: var(--muted); }
.group-card-title { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.group-card-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.recent-chip { display: inline-flex; border-radius: 999px; padding: .18rem .42rem; background: var(--green-soft); color: var(--green); font-size: .67rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }

.ballot-progress-wrap { position: sticky; top: 70px; z-index: 5; margin: 0 0 1rem; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,250,.94); box-shadow: 0 7px 24px rgba(26,18,31,.07); backdrop-filter: blur(12px); }
.ballot-progress-copy { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .42rem; }
.ballot-progress-copy strong { font-size: .83rem; }
.ballot-progress-copy span { color: var(--muted); font-size: .72rem; }
.ballot-progress { height: 7px; }
.rating-card-index { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .22rem; }
.ballot-saved-banner { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center; margin: 1rem 0; padding: 1rem; border-radius: 16px; border: 1px solid rgba(40,143,96,.25); background: var(--green-soft); }
.ballot-saved-banner strong,
.ballot-saved-banner span,
.ballot-saved-banner small { display: block; }
.ballot-saved-banner span { margin-top: .15rem; color: #3f6955; font-size: .86rem; }
.ballot-saved-banner small { margin-top: .28rem; color: var(--muted); }
.ballot-saved-banner.just-saved { animation: ballotSavedPulse 650ms ease both; }
@keyframes ballotSavedPulse { 0% { transform: translateY(4px); opacity: .55; } 100% { transform: translateY(0); opacity: 1; } }
.deadline-locked-notice { margin: 1rem 0; }

.recovery-card { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(196,137,35,.22); border-radius: 15px; background: var(--amber-soft); text-align: left; }
.recovery-card > strong { display: block; margin-bottom: .45rem; }
.recovery-card ul { margin: .4rem 0 .65rem 1.15rem; padding: 0; }
.recovery-card li + li { margin-top: .35rem; }

.profile-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1.2rem; align-items: start; }
.profile-main { display: grid; gap: 1rem; }
.profile-card { padding: 1.2rem; }
.profile-card h2 { margin: .12rem 0 .5rem; }
.profile-card form { margin-top: .95rem; }
.profile-summary { position: sticky; top: 86px; padding: 1.1rem; }
.profile-summary h3 { margin: .75rem 0 .15rem; }
.profile-summary > p { margin: 0 0 1rem; color: var(--muted); overflow-wrap: anywhere; }
.profile-status-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .62rem 0; border-top: 1px solid var(--line); font-size: .83rem; }
.profile-status-row:last-of-type { margin-bottom: .8rem; border-bottom: 1px solid var(--line); }
.status-good { color: var(--green); }
.status-warn { color: var(--amber); }
.account-dot-large { width: 44px; height: 44px; font-size: .95rem; }
.danger-zone { border-color: rgba(190,69,69,.2); }
.danger-zone h2 { color: #8f3333; }
.danger-button { background: #a83f3f; color: white; border-color: #a83f3f; }
.danger-button:hover { background: #923636; border-color: #923636; }
.delete-account-dialog { max-width: 520px; }

@media (max-width: 820px) {
    .profile-layout { grid-template-columns: 1fr; }
    .profile-summary { position: static; order: -1; }
    .discovery-filter-row { grid-template-columns: 1fr 1fr; }
    .ballot-progress-wrap { top: 64px; }
}
@media (max-width: 620px) {
    .decision-created-banner { align-items: stretch; flex-direction: column; }
    .decision-created-banner .btn { width: 100%; }
    .discovery-filter-row { grid-template-columns: 1fr; }
    .option-editor-head { grid-template-columns: auto 1fr; }
    .option-order-controls { grid-row: 1 / span 2; flex-direction: column; }
    .option-editor-head .remove-option { grid-column: 2; justify-self: start; }
    .group-card { align-items: flex-start; flex-direction: column; }
    .group-card-actions { width: 100%; }
    .group-card-actions .btn { flex: 1; }
    .ballot-progress-copy { align-items: flex-start; flex-direction: column; gap: .15rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ballot-saved-banner.just-saved { animation: none !important; }
}

/* v1.0.1 hotfix: keep the async Saved Groups page stable while data loads. */
.groups-page-content {
    min-height: 420px;
    animation: none !important;
}

html {
    scrollbar-gutter: stable;
}


.progress-fill {
    display: block;
    height: 100%;
    background: var(--purple);
    border-radius: 999px;
}
.progress-0 { width: 0%; }
.progress-1 { width: 1%; }
.progress-2 { width: 2%; }
.progress-3 { width: 3%; }
.progress-4 { width: 4%; }
.progress-5 { width: 5%; }
.progress-6 { width: 6%; }
.progress-7 { width: 7%; }
.progress-8 { width: 8%; }
.progress-9 { width: 9%; }
.progress-10 { width: 10%; }
.progress-11 { width: 11%; }
.progress-12 { width: 12%; }
.progress-13 { width: 13%; }
.progress-14 { width: 14%; }
.progress-15 { width: 15%; }
.progress-16 { width: 16%; }
.progress-17 { width: 17%; }
.progress-18 { width: 18%; }
.progress-19 { width: 19%; }
.progress-20 { width: 20%; }
.progress-21 { width: 21%; }
.progress-22 { width: 22%; }
.progress-23 { width: 23%; }
.progress-24 { width: 24%; }
.progress-25 { width: 25%; }
.progress-26 { width: 26%; }
.progress-27 { width: 27%; }
.progress-28 { width: 28%; }
.progress-29 { width: 29%; }
.progress-30 { width: 30%; }
.progress-31 { width: 31%; }
.progress-32 { width: 32%; }
.progress-33 { width: 33%; }
.progress-34 { width: 34%; }
.progress-35 { width: 35%; }
.progress-36 { width: 36%; }
.progress-37 { width: 37%; }
.progress-38 { width: 38%; }
.progress-39 { width: 39%; }
.progress-40 { width: 40%; }
.progress-41 { width: 41%; }
.progress-42 { width: 42%; }
.progress-43 { width: 43%; }
.progress-44 { width: 44%; }
.progress-45 { width: 45%; }
.progress-46 { width: 46%; }
.progress-47 { width: 47%; }
.progress-48 { width: 48%; }
.progress-49 { width: 49%; }
.progress-50 { width: 50%; }
.progress-51 { width: 51%; }
.progress-52 { width: 52%; }
.progress-53 { width: 53%; }
.progress-54 { width: 54%; }
.progress-55 { width: 55%; }
.progress-56 { width: 56%; }
.progress-57 { width: 57%; }
.progress-58 { width: 58%; }
.progress-59 { width: 59%; }
.progress-60 { width: 60%; }
.progress-61 { width: 61%; }
.progress-62 { width: 62%; }
.progress-63 { width: 63%; }
.progress-64 { width: 64%; }
.progress-65 { width: 65%; }
.progress-66 { width: 66%; }
.progress-67 { width: 67%; }
.progress-68 { width: 68%; }
.progress-69 { width: 69%; }
.progress-70 { width: 70%; }
.progress-71 { width: 71%; }
.progress-72 { width: 72%; }
.progress-73 { width: 73%; }
.progress-74 { width: 74%; }
.progress-75 { width: 75%; }
.progress-76 { width: 76%; }
.progress-77 { width: 77%; }
.progress-78 { width: 78%; }
.progress-79 { width: 79%; }
.progress-80 { width: 80%; }
.progress-81 { width: 81%; }
.progress-82 { width: 82%; }
.progress-83 { width: 83%; }
.progress-84 { width: 84%; }
.progress-85 { width: 85%; }
.progress-86 { width: 86%; }
.progress-87 { width: 87%; }
.progress-88 { width: 88%; }
.progress-89 { width: 89%; }
.progress-90 { width: 90%; }
.progress-91 { width: 91%; }
.progress-92 { width: 92%; }
.progress-93 { width: 93%; }
.progress-94 { width: 94%; }
.progress-95 { width: 95%; }
.progress-96 { width: 96%; }
.progress-97 { width: 97%; }
.progress-98 { width: 98%; }
.progress-99 { width: 99%; }
.progress-100 { width: 100%; }

/* v1.0.6 — production-stable Groups loading geometry.
   The async loading state matches the final two-column layout so slower
   production API responses cannot create a visible structural jump. */
.groups-loading-layout {
    align-items: start;
}
.group-card-skeleton,
.group-editor-skeleton {
    pointer-events: none;
}
.group-card-skeleton {
    min-height: 104px;
}
.group-skeleton-copy {
    display: grid;
    gap: .5rem;
    min-width: 170px;
}
.skeleton-block,
.skeleton-line,
.skeleton-button,
.skeleton-label,
.skeleton-input {
    display: block;
    background: #ece7e1;
    border-radius: 999px;
}
.skeleton-block.group-avatar {
    color: transparent;
}
.skeleton-line {
    height: 12px;
}
.skeleton-title { width: 145px; height: 16px; }
.skeleton-meta { width: 92px; }
.group-skeleton-actions {
    min-width: 142px;
}
.skeleton-button {
    width: 74px;
    height: 36px;
    border-radius: 11px;
}
.skeleton-button-small { width: 60px; }
.group-editor-skeleton {
    min-height: 330px;
}
.skeleton-field {
    display: grid;
    gap: .5rem;
    margin: 1rem 0;
}
.skeleton-label { width: 54px; height: 11px; }
.skeleton-label-wide { width: 78px; }
.skeleton-input {
    width: 100%;
    height: 45px;
    border-radius: 12px;
}
.skeleton-input-tall { height: 86px; }
.group-skeleton-submit {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--muted);
    font-size: .9rem;
    font-weight: 750;
}
@media (max-width: 820px) {
    .group-skeleton-actions { min-width: 0; width: 100%; }
    .skeleton-button { flex: 1; }
}



/* v1.0.9 — production animation timing fix.
   Keep temporary async placeholders motionless so production latency cannot
   expose one entrance animation for loading UI and a second for real content.
   Final rendered content keeps the original v0.7.7 motion system unchanged. */
.loading-state,
.loading-state *,
.groups-loading-layout,
.groups-loading-layout * {
    animation: none !important;
    transform: none !important;
}

/* v1.0.10 — navigation lifecycle fix only. Original entrance motion remains unchanged. */

/* ========================================================================== */
/* Secret Consensus v1.0.11 — responsive polish                              */
/* Conservative mobile/tablet refinement. No motion or router changes.        */
/* ========================================================================== */

/* Prevent long user-generated content from becoming page-level overflow. */
html,
body,
#app,
.shell,
main {
    max-width: 100%;
}
body {
    overflow-x: clip;
}
main > *,
.card,
.step,
.field,
.mini-field,
.decision-card-clean,
.group-card,
.option-editor,
.clean-section,
.profile-card,
.preview-panel,
.participant-preview {
    min-width: 0;
}
h1,
h2,
h3,
p,
li,
small,
strong,
.hint,
.meta,
.group-card-main,
.decision-card-clean,
.preview-option,
.email-chip {
    overflow-wrap: anywhere;
}
img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* Fluid shell spacing between desktop and phone sizes. */
main {
    width: min(1060px, calc(100% - clamp(2rem, 7vw, 5rem)));
}
.nav,
.footer {
    padding-inline: clamp(1rem, 5vw, 3.5rem);
}

/* Tablet: retain the desktop hierarchy while giving content more room. */
@media (max-width: 1024px) {
    main {
        width: min(1060px, calc(100% - 2.5rem));
    }
    .hero {
        gap: 2.5rem;
    }
    .groups-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    }
    .profile-layout {
        grid-template-columns: minmax(0, 1fr) 250px;
    }
}

/* Mobile/tablet reflow. */
@media (max-width: 768px) {
    main {
        width: calc(100% - 2rem);
        padding-top: 2rem;
        padding-bottom: 3.5rem;
    }

    .nav {
        min-height: 64px;
        height: auto;
        padding-block: .65rem;
        gap: .8rem;
    }
    .brand {
        flex: 0 0 auto;
        min-width: 0;
    }
    .nav-actions {
        min-width: 0;
        margin-left: auto;
    }
    .nav-new {
        margin: 0;
    }
    .account-menu summary {
        min-width: 44px;
        justify-content: center;
    }
    .account-popover {
        right: 0;
        width: min(290px, calc(100vw - 2rem));
        max-width: calc(100vw - 2rem);
    }

    .page-head,
    .dashboard-head,
    .section-row {
        gap: .75rem;
    }
    .page-head h1 {
        font-size: clamp(2rem, 8vw, 2.6rem);
        line-height: 1.05;
    }
    .decision-title-row h1 {
        font-size: clamp(2.15rem, 9vw, 3rem);
    }
    .section-row h2 {
        font-size: clamp(1.4rem, 6vw, 1.65rem);
    }

    .card,
    .step,
    .decision-card-clean,
    .profile-card,
    .price-card,
    .demo-organizer-card,
    .demo-ballot-card {
        padding: 1.1rem;
    }
    .wizard-card {
        padding: 1.15rem;
    }

    .groups-layout,
    .billing-layout,
    .profile-layout,
    .demo-two-col,
    .privacy-explainer-grid {
        grid-template-columns: 1fr;
    }
    .group-editor,
    .profile-summary {
        position: static;
    }

    .wizard-progress {
        gap: .4rem;
    }
    .wizard-progress span {
        justify-content: center;
        padding: .62rem .5rem;
        text-align: center;
    }

    .decision-overview {
        grid-template-columns: 1fr;
        gap: .85rem;
    }
    .decision-primary-actions {
        justify-content: flex-start;
        width: 100%;
        flex-wrap: wrap;
    }
    .decision-primary-actions .btn {
        flex: 1 1 180px;
    }

    .form-actions,
    .manage-actions,
    .hero-actions {
        flex-wrap: wrap;
    }

    .preview-dialog,
    .invite-dialog {
        max-width: calc(100vw - 1.5rem);
    }
    .participant-preview,
    .email-preview-card {
        padding: 1rem;
    }

    .footer {
        padding-block: 1.4rem;
    }
    .footer > span:last-child {
        display: flex;
        flex-wrap: wrap;
        gap: .85rem;
    }
    .footer a {
        margin-left: 0;
    }
}

/* Phone polish: designed spacing rather than a compressed desktop layout. */
@media (max-width: 560px) {
    main {
        width: calc(100% - 1.25rem);
        padding-top: 1.35rem;
        padding-bottom: 2.75rem;
    }
    .nav {
        padding-inline: .75rem;
    }
    .brand img {
        width: 32px;
        height: 32px;
    }
    .nav-actions {
        gap: .35rem;
    }
    .nav-actions .btn,
    .nav-new {
        min-height: 40px;
        padding: .5rem .65rem;
    }

    .hero {
        padding: 2.4rem 0 3rem;
        gap: 1.6rem;
    }
    .hero h1 {
        font-size: clamp(2.7rem, 14vw, 3.4rem);
        line-height: .96;
        margin-block: 1rem 1.15rem;
    }
    .hero p {
        font-size: 1.02rem;
        line-height: 1.55;
    }
    .section {
        padding: 2rem 0;
    }
    .section h2,
    .privacy-explainer-head h2 {
        font-size: clamp(1.75rem, 8vw, 2.15rem);
    }

    .page-head {
        margin-bottom: 1.3rem;
    }
    .page-head,
    .dashboard-head,
    .section-row {
        align-items: stretch;
        flex-direction: column;
    }
    .page-head > .btn,
    .dashboard-head > .btn,
    .section-row > .btn {
        width: 100%;
    }

    .card,
    .step,
    .decision-card-clean,
    .profile-card,
    .price-card,
    .privacy-card,
    .attention-card {
        border-radius: 16px;
        padding: 1rem;
    }

    .decision-card-top {
        align-items: flex-start;
    }
    .decision-response-row {
        gap: .2rem;
    }
    .decision-primary-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
    }
    .decision-primary-actions .btn {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .group-card-main {
        align-items: flex-start;
    }
    .group-card-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }
    .group-card-actions .btn {
        width: 100%;
        margin: 0;
    }

    .wizard-progress {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 1.15rem;
    }
    .wizard-progress span {
        display: grid;
        justify-items: center;
        gap: .35rem;
        padding: .55rem .25rem;
        font-size: .72rem;
        line-height: 1.2;
    }
    .wizard-progress span b {
        width: 23px;
        height: 23px;
    }
    .wizard-step h2 {
        font-size: 1.45rem;
    }

    .consideration-grid,
    .template-grid,
    .mode-grid {
        grid-template-columns: 1fr;
    }
    .participant-field {
        max-width: none;
    }

    .availability-scale,
    .rating-scale {
        grid-template-columns: 1fr;
    }
    .availability-choice span {
        min-height: 58px;
    }

    .email-chip-box {
        padding: .5rem;
    }
    .email-chip-list,
    .email-chip {
        max-width: 100%;
    }
    .email-chip > span:first-child {
        max-width: min(230px, 65vw);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .preview-dialog,
    .invite-dialog {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: 18px;
        padding: .85rem;
    }
    .preview-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        border-radius: 14px;
    }
    .preview-tab {
        min-width: 0;
        border-radius: 11px;
    }
    .participant-preview h3,
    .email-preview-card h3 {
        font-size: 1.5rem;
    }
    .preview-option {
        align-items: flex-start;
    }

    .ballot-progress-wrap {
        top: 62px;
        margin-inline: -.15rem;
    }
    .ballot-saved-banner {
        align-items: flex-start;
    }

    .form-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem;
    }
    .form-actions .btn,
    .full-button {
        width: 100%;
        margin: 0;
    }

    .empty-state {
        padding: 2.5rem .75rem;
    }
    .footer {
        padding-inline: 1rem;
    }
}

/* Very small phones: avoid two-up action groups becoming cramped. */
@media (max-width: 390px) {
    .decision-primary-actions,
    .group-card-actions {
        grid-template-columns: 1fr;
    }
    .nav-actions .btn {
        font-size: .82rem;
    }
    .account-popover {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
    }
}


/* ========================================================================== */
/* Secret Consensus v1.0.12 — mobile primary navigation                     */
/* Keep core destinations visible on phones without changing desktop layout. */
/* ========================================================================== */
.nav-primary-links,
.nav-utility-actions {
    display: flex;
    align-items: center;
    gap: .9rem;
}
.nav-home-link {
    display: none;
}

@media (max-width: 820px) {
    .nav {
        flex-wrap: wrap;
        align-items: center;
        min-height: 64px;
        height: auto;
        padding-block: .65rem;
        gap: .8rem;
        row-gap: .45rem;
    }
    .nav-actions {
        display: contents;
    }
    .nav-utility-actions {
        margin-left: auto;
        gap: .45rem;
        order: 2;
    }
    .nav-primary-links {
        order: 3;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .35rem;
        padding-top: .45rem;
        border-top: 1px solid rgba(23, 19, 29, 0.08);
    }
    .nav-primary-links .nav-text-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: .45rem .35rem;
        border-radius: 9px;
        font-size: .82rem;
        font-weight: 750;
        text-align: center;
        white-space: nowrap;
    }
    .nav-primary-links .nav-text-link:hover,
    .nav-primary-links .nav-text-link.nav-active {
        background: rgba(111, 78, 221, 0.08);
    }
    .nav-primary-links .nav-text-link.nav-active::after {
        display: none;
    }
    .nav-home-link {
        display: flex;
    }
    .demo-progress-nav {
        top: 118px;
    }
}

@media (max-width: 560px) {
    .nav {
        row-gap: .45rem;
        padding-bottom: .55rem;
    }
    .nav-primary-links {
        gap: .25rem;
    }
    .nav-primary-links .nav-text-link {
        min-height: 36px;
        font-size: .78rem;
        padding-inline: .25rem;
    }
}


/* ========================================================================== */
/* Secret Consensus v1.0.13 — 769–820px header breakpoint correction         */
/* Header sizing now follows the two-row navigation breakpoint continuously. */
/* ========================================================================== */