/* ---------------------------------------------------------------
   Tokens. Copied verbatim from public/build/build.css: the type
   scale, the shared :root block and the [data-theme="atelier"]
   palette the builder's own chrome wears. This page carries no
   colour the builder does not already use.
--------------------------------------------------------------- */
:root {
    --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-md: 1.125rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.25rem;

    --leading-tight: 1.15;
    --leading-snug: 1.35;
    --leading-control: 1.4;
    --leading-body: 1.6;
    --font-mono:
        ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

    --radius: 6px;
    --radius-lg: 10px;
    --shell-w: 1000px;
    --shell-pad: 30px 18px 40px;
}

[data-theme="atelier"] {
    --paper: #f7f5f1;
    --panel: #fffdfb;
    --ink: #23201c;
    --muted: #6f6a62;
    --accent: #7d6440;
    --border: #e6e0d5;
    --field: #ffffff;
    --field-border: #dcd5c8;
    --on-accent: #ffffff;
    --placeholder: #736e67;
}

/* The eight wedding-theme chip palettes, copied verbatim from
   build.css. Each [data-theme="x"] block sets three custom
   properties that cascade down to whatever element carries the
   attribute -- here, the chip span inside each swatch, exactly
   as the builder's own swatches read them. */
[data-theme="pichcha"] {
    --paper: #fefcfa;
    --accent: #b8903a;
    --ink: #201408;
}
[data-theme="nil-manel"] {
    --paper: #f5f4ff;
    --accent: #7060c0;
    --ink: #180a30;
}
[data-theme="binara"] {
    --paper: #f2f4ff;
    --accent: #3848d0;
    --ink: #080a28;
}
[data-theme="nelum"] {
    --paper: #fff5f8;
    --accent: #d45080;
    --ink: #300018;
}
[data-theme="erabudu"] {
    --paper: #fff8f4;
    --accent: #d05820;
    --ink: #280e00;
}
[data-theme="kohomba"] {
    --paper: #f4f8f0;
    --accent: #6a7a38;
    --ink: #161e08;
}
[data-theme="lily"] {
    --paper: #fefdf8;
    --accent: #c07840;
    --ink: #201008;
}
[data-theme="rosamal"] {
    --paper: #fef8f5;
    --accent: #d08870;
    --ink: #281008;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

[hidden] {
    display: none !important;
}

body {
    min-height: 100vh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    max-width: var(--shell-w);
    margin: 0 auto;
    padding: var(--shell-pad);
}

/* ---------------------------------------------------------------
   Nav. Copied verbatim from public/build/index.html: same
   elements, same ids, same classes, same links, same order, and
   the same build.css rules that render them. The session-only
   controls ship hidden here exactly as they do on the builder for
   a visitor with no session; nothing on this page reveals them,
   because a marketing visitor has no invitation to manage.
--------------------------------------------------------------- */
.brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 22px;
}

.wordmark {
    min-width: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration: none;
}

.brand-links {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.brand-links a,
.brand-links .signout {
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition:
        color 0.15s ease,
        border-color 0.15s ease;
}

.brand-links a:hover,
.brand-links .signout:not(:disabled):hover {
    color: var(--ink);
    border-bottom-color: var(--muted);
}

.brand-links .signout {
    padding: 0;
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 640px) {
    .brand {
        flex-wrap: wrap;
    }

    .brand-links {
        gap: 13px;
    }
}

/* ---------------------------------------------------------------
   Buttons. Copied verbatim from build.css, including the hover,
   active and disabled states. .btn-primary's width:100% and
   margin-top:28px are the form's own context -- this page resets
   both wherever the button sits outside a form, which is every
   use here.
--------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: var(--radius);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-control);
    font-weight: 500;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition:
        transform 0.12s ease,
        opacity 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.btn:hover:not(:disabled) {
    opacity: 0.88;
}

.btn-primary:hover:not(:disabled) {
    opacity: 1;
    filter: brightness(1.08);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary {
    width: auto;
    margin-top: 0;
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--text-base);
}

.btn-secondary {
    background: var(--field);
    border-color: var(--field-border);
    color: var(--ink);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--panel);
    border-color: var(--accent);
    color: var(--accent);
}

.btn-copy {
    flex-shrink: 0;
    padding: 7px 13px;
    font-size: var(--text-sm);
}

/* ---------------------------------------------------------------
   Hero. Centered, generous whitespace, the builder's own paper --
   this is the front door of the tool, not a separate marketing
   surface.
--------------------------------------------------------------- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0 30px;
}

.hero-eyebrow {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.hero-title {
    margin: 18px 0 0;
    max-width: 18ch;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.2rem, 7.5vw, 3.75rem);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.hero-sub {
    margin: 20px 0 0;
    max-width: 42ch;
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--muted);
    text-wrap: pretty;
}

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.hero-actions .btn-primary {
    padding: 14px 28px;
}

.hero-note {
    margin: 0;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--muted);
}

/* ---------------------------------------------------------------
   Sections, shared rhythm for everything between the hero and the
   final CTA.
--------------------------------------------------------------- */

.section-title {
    margin: 0 0 28px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

/* ---------------------------------------------------------------
   Showcase card. The builder's own card surface -- background,
   border, radius, and the only card-elevation shadow in its
   design language, copied from .saved-dialog in build.css --
   reused by the alternating steps below for each step's card.
--------------------------------------------------------------- */
.showcase-card {
    display: flex;
    flex-direction: column;
    padding: 28px 24px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* A mono URL in a field-styled box, with a small
   copy button beside it -- the builder's own credential-value
   plus .btn-copy pairing, not a new pattern. */
.mock-url-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mock-url {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.mock-note {
    margin: 14px 0 0;
    font-size: var(--text-xs);
    line-height: 1.6;
    color: var(--muted);
}

.guest-list {
    display: flex;
    flex-direction: column;
}

.guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
}

.guest-row + .guest-row {
    border-top: 1px solid var(--field-border);
}

.guest-name {
    flex: 0 0 auto;
    min-width: 46px;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--ink);
}

.guest-url {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.field-row {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 18px;
}

.field-row > .field {
    margin-top: 0;
}

.field:first-child {
    margin-top: 0;
}

.label {
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.input {
    width: 100%;
    padding: 11px 13px;
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
}

.input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
}

.input-wrap .input {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 40px;
    background: transparent;
    border: 0;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
}

.input-icon {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    color: var(--placeholder);
    pointer-events: none;
}

.input-icon::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 3.5px;
    height: 1.5px;
    background: currentColor;
}

.input-icon::after {
    content: "";
    position: absolute;
    left: 3.5px;
    top: -2.5px;
    width: 1.5px;
    height: 5px;
    background: currentColor;
    box-shadow: 7px 0 0 currentColor;
}

/* ---------------------------------------------------------------
   Swatches. Copied verbatim from build.css. Rendered here as
   plain <span> rather than <button role="radio">, since this
   page has no selection to make -- see the rules file instruction
   to remove interactivity entirely.
--------------------------------------------------------------- */
.swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.swatch {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px 8px 9px;
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--ink);
}

.swatch.is-selected {
    border-color: #90702d;
}

.swatch-chips {
    display: flex;
    gap: 3px;
}

.swatch-chips i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.swatch-chips i:nth-child(1) {
    background: var(--paper);
}

.swatch-chips i:nth-child(2) {
    background: var(--accent);
}

.swatch-chips i:nth-child(3) {
    background: var(--ink);
}

.swatch-name {
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   How it works + theme pills, rebuilt as one flow: three rows
   that trade which side carries the text and which carries the
   card, mobile stacking text above card every time regardless
   of which side the card sits on at the row breakpoint -- the
   DOM order is always text then card, and .alt-step-reverse
   only changes the visual order once there is room for a row.
--------------------------------------------------------------- */
.alt-steps {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.alt-step {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.alt-step-text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1 1 0;
}

.alt-step-card {
    flex: 0 1 100%;
    max-width: 100%;
}

@media (min-width: 640px) {
    .alt-step-card {
        flex: 0 1 420px;
        max-width: none;
    }
}

.alt-step-label {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}

.alt-step-heading {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.375rem, 3.2vw, 1.75rem);
    line-height: var(--leading-snug);
    letter-spacing: -0.015em;
}

.alt-step-body {
    margin: 0;
    max-width: 42ch;
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--muted);
}

@media (min-width: 760px) {
    .alt-step {
        flex-direction: row;
        align-items: center;
        gap: clamp(40px, 6vw, 72px);
    }

    .alt-step-reverse {
        flex-direction: row-reverse;
    }
}

/* ---------------------------------------------------------------
   FAQ section - SEO and common objections
--------------------------------------------------------------- */
.faq-section {
    padding: 64px 0;
}

.faq-title {
    margin: 0 0 64px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.5rem, 4vw, 2rem);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    text-wrap: balance;
    text-align: center;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    font-size: var(--text-base);
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-q {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--ink);
}

.faq-a {
    margin: 0;
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--muted);
}

@media (min-width: 640px) {
    .faq-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .faq-item {
        gap: 12px;
    }

    .faq-q {
        font-size: var(--text-md);
        line-height: var(--leading-snug);
    }

    .faq-a {
        font-size: var(--text-base);
        line-height: 1.6;
    }
}

/* ---------------------------------------------------------------
   Final CTA. The one place on this page that steps off the
   builder's own paper, into the dark ground the project uses for
   its one full-bleed band. #1a0f00 per spec.
--------------------------------------------------------------- */
.cta-dark {
    background: #1a0f00;
    padding: 32px 0;
    border-radius: var(--radius-lg);
}

.cta-dark-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 24px;
}

.cta-dark-title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    line-height: var(--leading-tight);
    letter-spacing: -0.015em;
    color: #f7f5f1;
}

.cta-dark-sub {
    margin: 14px 0 0;
    font-size: var(--text-sm);
    letter-spacing: 0.02em;
    color: #cbbfae;
}

.cta-dark .btn-primary {
    margin-top: 28px;
    padding: 14px 28px;
}

/* ---------------------------------------------------------------
   Footer. Copied verbatim from build.css.
--------------------------------------------------------------- */
.foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 10px;
    padding-top: 64px;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: center;
}

.foot-name {
    letter-spacing: 0.1em;
}

.foot-sep {
    opacity: 0.55;
}

.foot a {
    color: var(--muted);
    text-decoration: none;
}

.foot a:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   Section dividers
--------------------------------------------------------------- */
.section-divider {
    display: block;
    width: 100%;
    height: 1px;
    border: none;
    background: #e6e0d5;
    margin: 0;
    padding: 0;
}

.showcase-section + .section-divider {
    margin: 64px 0;
}

/* ---------------------------------------------------------------
   Browser window frame for showcase
--------------------------------------------------------------- */

.browser-window {
    display: flex;
    flex-direction: column;
    background: var(--field);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.browser-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f0ede8;
    border-bottom: 1px solid var(--border);
}

.browser-controls {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.control-dot {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #d4ccc1;
}

.control-dot:first-child {
    background: #ff5f57;
}

.control-dot:nth-child(2) {
    background: #febc2e;
}

.control-dot:nth-child(3) {
    background: #28c940;
}

.browser-address {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 12px;
    background: var(--panel);
    border: 1px solid var(--field-border);
    border-radius: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-content {
    display: block;
    width: 100%;
    overflow: hidden;
}

.browser-content img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------
   Wider screens. Mobile-first throughout.
--------------------------------------------------------------- */
{
    .faq-section {
        padding: 64px 0;
    }

    .field-row {
        flex-direction: row;
        gap: 16px;
    }

    .field-row .field {
        flex: 1 1 0;
    }