/* GiftPraise gift-session flow stylesheet.
 * Loaded after styles.css. Holds every class used by the create →
 * record → gift → schedule → pay flow, the layouts, the partials
 * (stepper, footer-slim, modal, error pages) and any inline-style
 * replacements. No `style="..."` attributes anywhere in those views
 * - guardrail set 2026-06-07.
 */

/* ---------- Design tokens ---------- */
:root {
    --gp-cream:        #FAF7F2;
    --gp-cream-hi:     #ffffff;
    --gp-purple:       #3D1E4A;
    --gp-purple-50:    rgba(61, 30, 74, 0.5);
    --gp-purple-65:    rgba(61, 30, 74, 0.65);
    --gp-purple-75:    rgba(61, 30, 74, 0.75);
    --gp-purple-85:    rgba(61, 30, 74, 0.85);
    --gp-purple-line:  rgba(61, 30, 74, 0.08);
    --gp-purple-line2: rgba(61, 30, 74, 0.18);
    --gp-orange:       #E85D3A;
    --gp-orange-glow:  0 6px 20px -8px #E85D3A;
    --gp-amber:        #E8A33D;
    --gp-teal:         #77C7D8;
    --gp-red:          #A8351A;
    --gp-radius:       12px;
    --gp-radius-lg:    20px;
    --gp-radius-pill:  999px;
    --gp-serif:        "Fraunces", Georgia, serif;
    --gp-sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Page chrome ---------- */
.gp-page {
    background: var(--gp-cream);
    color: var(--gp-purple);
    font-family: var(--gp-sans);
    display: flex;
    flex-direction: column;
}
.gp-header {
    /* Add the iOS safe-area inset to top padding so the status bar
       on notched devices doesn't float over the logo / avatar. */
    padding: calc(18px + env(safe-area-inset-top)) 32px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border-bottom: 1px solid var(--gp-purple-line);
    box-sizing: border-box;
}
.gp-header-logo {
    font-family: var(--gp-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--gp-purple);
    text-decoration: none;
    letter-spacing: -0.02em;
}
.gp-header-aside {
    font-size: 13px;
    font-weight: 500;
    color: var(--gp-purple);
    text-decoration: none;
    opacity: 0.7;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.gp-header-right {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}
.gp-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--gp-purple);
    color: #FBF4E4;
    font-family: var(--gp-sans);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.gp-avatar:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(61, 30, 74, 0.55);
}
.gp-avatar--image {
    background: var(--gp-purple-line);
    padding: 0;
    overflow: hidden;
}
.gp-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gp-main {
    width: 100%;
    max-width: 720px;
    margin: 32px auto;
    padding: 0 32px;
    box-sizing: border-box;
}
.gp-main--narrow { max-width: 560px; }
.gp-main h1 {
    font-family: var(--gp-serif);
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0 0 6px;
    color: var(--gp-purple);
    text-wrap: balance;
}
.gp-main > p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--gp-purple-75);
    margin: 0 0 18px;
}
.gp-main strong { color: var(--gp-purple); }

/* ============================================================
   /create/collection - setup / invite / dashboard
============================================================ */

/* Invite page */
.gp-invite-link-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.gp-invite-link-input {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--gp-purple);
}
.gp-invite-copy {
    flex-shrink: 0;
    padding: 0 16px;
}
.gp-invite-share-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}
.gp-invite-share-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 10px;
    background: #fff;
    border: 1px solid var(--gp-purple-line);
    border-radius: 14px;
    text-decoration: none;
    color: var(--gp-purple);
    font-size: 13px;
    font-weight: 600;
    transition: border-color 120ms ease, transform 120ms ease;
}
@media (hover: hover) {
    .gp-invite-share-btn:hover {
        border-color: rgba(232, 163, 61, 0.4);
        transform: translateY(-1px);
    }
}
.gp-invite-share-icon {
    font-size: 22px;
    line-height: 1;
}
.gp-invite-progress {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--gp-purple-65);
}
.gp-invite-progress a {
    color: var(--gp-orange);
    font-weight: 600;
    text-decoration: none;
}

/* Dashboard */
.gp-collection-stats {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
}
.gp-collection-stat-card {
    background: #fff;
    border: 1px solid var(--gp-purple-line);
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gp-collection-stat-num {
    font-family: var(--gp-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--gp-purple);
    letter-spacing: -0.02em;
    line-height: 1;
}
.gp-collection-stat-label {
    font-size: 13px;
    color: var(--gp-purple-65);
}
.gp-collection-progress {
    margin-top: 8px;
    height: 8px;
    background: rgba(61, 30, 74, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.gp-collection-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gp-orange) 0%, #f0b768 100%);
    border-radius: 999px;
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gp-collection-group { margin-top: 28px; }
.gp-collection-group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 10px;
    padding: 0 4px;
}
.gp-collection-group-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gp-purple);
}
.gp-collection-group-count {
    font-size: 12px;
    color: var(--gp-purple-50);
    font-weight: 600;
}
.gp-collection-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gp-collection-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid rgba(61, 30, 74, 0.08);
    border-radius: 12px;
}
.gp-collection-row--is-in { border-left: 3px solid rgba(119, 199, 216, 0.55); }
.gp-collection-row--is-pending { border-left: 3px solid rgba(232, 163, 61, 0.3); }
.gp-collection-row--is-joined { border-left: 3px solid rgba(61, 30, 74, 0.12); }
.gp-collection-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gp-orange), #f0b768);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gp-serif);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}
.gp-collection-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.gp-collection-row-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gp-purple);
}
.gp-collection-row-state {
    font-size: 11.5px;
    color: var(--gp-purple-65);
}
.gp-collection-row-amount {
    flex-shrink: 0;
    font-family: var(--gp-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--gp-purple);
}
.gp-collection-empty {
    text-align: center;
    color: var(--gp-purple-65);
    font-size: 14px;
    padding: 20px;
    background: #fff;
    border: 1px dashed var(--gp-purple-line);
    border-radius: 14px;
}
.gp-collection-actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}
.gp-collection-actions .gp-btn { flex: 1; }
.gp-collection-send-hint {
    margin-top: 8px;
    text-align: center;
    font-size: 12.5px;
    color: var(--gp-purple-50);
}

@media (max-width: 540px) {
    .gp-collection-stats { grid-template-columns: 1fr; }
    .gp-invite-share-grid { gap: 8px; }
}

/* ============================================================
   /create/choose - entry chooser
============================================================ */
.gp-choose-main { padding-top: 12px; padding-bottom: 80px; }
.gp-choose-continue {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: rgba(232, 163, 61, 0.08);
    border: 1px solid rgba(232, 163, 61, 0.22);
    border-radius: 14px;
    text-decoration: none;
    color: var(--gp-purple);
    margin: 8px 0 24px;
    transition: background 120ms ease;
}
@media (hover: hover) {
    .gp-choose-continue:hover { background: rgba(232, 163, 61, 0.14); }
}
.gp-choose-continue-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.gp-choose-continue-text strong {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gp-orange);
}
.gp-choose-continue-text span {
    font-size: 13px;
    color: var(--gp-purple-65);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-choose-continue-arrow {
    flex-shrink: 0;
    color: var(--gp-orange);
    font-size: 18px;
    font-weight: 600;
}
.gp-choose-options {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.gp-choose-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 22px;
    background: #fff;
    border: 1px solid var(--gp-purple-line);
    border-radius: 18px;
    text-decoration: none;
    color: var(--gp-purple);
    box-shadow: 0 10px 24px -22px rgba(61, 30, 74, 0.3);
    transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 140ms ease,
                border-color 140ms ease;
}
@media (hover: hover) {
    .gp-choose-option:hover {
        transform: translateY(-2px);
        border-color: rgba(232, 163, 61, 0.35);
        box-shadow: 0 16px 30px -22px rgba(61, 30, 74, 0.32);
    }
}
.gp-choose-option-icon {
    flex-shrink: 0;
    font-size: 30px;
    line-height: 1;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(232, 163, 61, 0.1);
    border-radius: 14px;
}
.gp-choose-option-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.gp-choose-option-title {
    font-family: var(--gp-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--gp-purple);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.gp-choose-option-desc {
    font-size: 13.5px;
    color: var(--gp-purple-65);
    line-height: 1.45;
}
.gp-choose-option-arrow {
    flex-shrink: 0;
    color: var(--gp-orange);
    font-size: 20px;
    font-weight: 600;
}

/* ============================================================
   /create/collection - coming-soon placeholder
============================================================ */
.gp-collection-soon { text-align: center; padding-top: 24px; }
.gp-collection-soon-eyebrow {
    display: inline-block;
    font-family: var(--gp-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gp-orange);
    background: rgba(232, 163, 61, 0.12);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 18px;
}
.gp-collection-soon-note {
    color: var(--gp-purple-65);
    font-size: 14px;
    margin-bottom: 24px;
}
.gp-collection-soon-cta {
    margin-top: 8px;
}

@media (max-width: 540px) {
    .gp-choose-option { padding: 18px 18px; gap: 14px; }
    .gp-choose-option-icon { width: 46px; height: 46px; font-size: 26px; }
    .gp-choose-option-title { font-size: 17px; }
}

/* Cards */
.gp-card {
    padding: 24px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(61, 30, 74, 0.1);
    border-radius: var(--gp-radius-lg);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 40px -24px rgba(61, 30, 74, 0.25);
    box-sizing: border-box;
}
.gp-card--flex-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Buttons */
.gp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 22px;
    border-radius: var(--gp-radius-pill);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    white-space: nowrap;
    border: none;
    transition: transform 0.08s, box-shadow 0.12s, background 0.12s;
}
.gp-btn:active:not(:disabled) { transform: scale(0.97); }
.gp-btn--primary {
    background: var(--gp-orange);
    color: #FFFFFF;
    box-shadow: var(--gp-orange-glow);
}
.gp-btn--primary:hover:not(:disabled) { box-shadow: 0 8px 24px -8px var(--gp-orange); }
.gp-btn--primary:disabled { cursor: not-allowed; opacity: 0.6; }
.gp-btn--secondary {
    background: #FFFFFF;
    color: var(--gp-purple);
    border: 1px solid rgba(61, 30, 74, 0.2);
}
.gp-btn--secondary:hover { background: var(--gp-cream); }
.gp-btn--ghost {
    background: transparent;
    color: var(--gp-orange);
    border: 1px dashed rgba(232, 93, 58, 0.4);
}
.gp-btn--ghost:hover { background: rgba(232, 93, 58, 0.06); }
.gp-btn--full { width: 100%; }

.gp-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
}

/* Forms */
.gp-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gp-field-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gp-purple);
}
.gp-field-label-optional {
    font-weight: 400;
    color: var(--gp-purple-50);
}
.gp-field-hint {
    font-size: 12px;
    color: var(--gp-purple-50);
}
.gp-input {
    font-family: inherit;
    font-size: 16px;
    padding: 9px 12px;
    border: 1px solid rgba(61, 30, 74, 0.2);
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--gp-purple);
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.gp-input:focus { border-color: var(--gp-orange); }
.gp-input--soft { background: var(--gp-cream); border-radius: 8px; padding: 8px 10px; }

/* Inline-banner messaging */
.gp-banner {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}
.gp-banner--error {
    background: rgba(232, 93, 58, 0.07);
    border: 1px solid rgba(232, 93, 58, 0.4);
    color: var(--gp-red);
}
.gp-banner--info {
    background: rgba(119, 199, 216, 0.15);
    border: 1px solid rgba(119, 199, 216, 0.4);
    color: #1F5563;
}
.gp-banner--amber {
    background: rgba(232, 163, 61, 0.14);
    border: 1px solid rgba(232, 163, 61, 0.4);
    color: #7A5713;
}

html {
    /* Kills double-tap-to-zoom on mobile while keeping pinch-zoom for
       accessibility. Also drops the ~300ms tap-delay older browsers add
       when waiting to see if a tap is the start of a double-tap. */
    touch-action: manipulation;
    /* Stop the document from ever scrolling horizontally - layouts
       handle their own horizontal scroll containers (carousel, etc.) so
       any drag that bubbles up to the page itself shouldn't move it
       sideways. */
    overflow-x: hidden;
    /* Kill iOS pull-to-refresh + the rubber-band bounce on overshoot.
       Both confuse users when a swipe past the end of a carousel ends
       up nudging the whole page. */
    overscroll-behavior: none;
}
html, body {
    /* Belt-and-braces - some browsers honour the rule on body only. */
    overflow-x: hidden;
}

.gp-debug-stitch {
    margin: 28px 0 0;
    padding: 18px 18px 16px;
    border: 1px dashed var(--gp-purple-line2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.45);
}
.gp-debug-stitch-status {
    margin: 12px 0 0;
    font-size: 13px;
    color: var(--gp-purple-65);
}
.gp-debug-stitch-result {
    margin: 12px 0 0;
    font-size: 14px;
    color: var(--gp-purple);
}
.gp-debug-stitch-line {
    margin: 4px 0;
    word-break: break-all;
}
.gp-debug-stitch-line strong {
    color: var(--gp-purple);
    font-weight: 600;
    margin-right: 4px;
}
.gp-debug-recipient-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
}
.gp-debug-recipient-list li {
    padding: 6px 10px;
    background: rgba(61, 30, 74, 0.05);
    border-radius: 8px;
    word-break: break-all;
}
.gp-debug-recipient-urls {
    display: block;
    margin-top: 4px;
    font-size: 12px;
}
.gp-debug-stitch-result a {
    color: var(--gp-orange);
    text-decoration: underline;
    font-weight: 500;
}
.gp-body {
    margin: 0;
    background: var(--gp-cream);
    /* Body fills the viewport so any space below a short .gp-page (now
       content-sized rather than forced to 100vh) shows cream. The page
       itself stays exactly as tall as header + main + footer. */
    min-height: 100vh;
    /* Set the default font on body so elements positioned outside .gp-page
       (e.g. the fixed #upload-overlay, modals, dialogs) inherit the brand
       sans instead of the browser-default serif. Page-specific font rules
       like .gp-home / .gp-verify-page still win for their scope. */
    font-family: var(--gp-sans);
    color: var(--gp-purple);
}
/* Universal border-box reset. Tailwind used to provide this as part of
   its preflight reset; now that styles.css is no longer loaded we need
   it explicitly so padding never inflates element widths. Scoped under
   .gp-body so it's still a site-wide default but won't leak into any
   embedded contexts that opt out. */
.gp-body,
.gp-body *,
.gp-body *::before,
.gp-body *::after {
    box-sizing: border-box;
}

.gp-schedule-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 4px 22px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gp-purple-75);
}
.gp-schedule-note-icon {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--gp-orange);
}

/* Rotate-to-portrait lock. The overlay sits hidden by default and only
   appears on landscape orientation + coarse pointer (touch) + narrow
   short viewport - i.e. phones held sideways. Desktop landscape and
   portrait phones never see it. */
.gp-rotate-lock {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: var(--gp-purple);
    color: var(--gp-cream);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 24px;
    text-align: center;
    font-family: var(--gp-sans);
}
.gp-rotate-lock svg { color: var(--gp-amber); }
.gp-rotate-lock h2 {
    font-family: var(--gp-serif);
    font-size: 22px;
    font-weight: 600;
    margin: 4px 0 0;
    letter-spacing: -0.01em;
}
.gp-rotate-lock p {
    font-size: 14px;
    line-height: 1.5;
    max-width: 320px;
    margin: 0;
    color: rgba(251, 244, 228, 0.75);
}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 500px) {
    .gp-rotate-lock { display: flex; }
}

/* ---------- Recipients "+ N others" inline trigger + modal ---------- */
.gp-recipients-toggle {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--gp-orange);
    text-decoration: underline;
    cursor: pointer;
}
.gp-recipients-toggle:hover { color: #d4502f; }

.gp-recipients-modal {
    position: fixed;
    inset: 0;
    margin: auto;
    border: 0;
    padding: 0;
    background: transparent;
    max-width: 420px;
    width: calc(100% - 32px);
    max-height: calc(100dvh - 32px);
    color: var(--gp-purple);
}
.gp-recipients-modal::backdrop {
    background: rgba(61, 30, 74, 0.45);
    backdrop-filter: blur(2px);
}
.gp-recipients-modal-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px -20px rgba(61, 30, 74, 0.45);
    overflow: hidden;
}
.gp-recipients-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--gp-purple-line);
}
.gp-recipients-modal-title {
    margin: 0;
    font-family: var(--gp-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.gp-recipients-modal-close {
    background: none;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--gp-purple-65);
}
.gp-recipients-modal-close:hover { color: var(--gp-purple); }
.gp-recipients-modal-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    max-height: 60vh;
    overflow-y: auto;
}
.gp-recipients-modal-list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 18px;
}
.gp-recipients-modal-list li + li { border-top: 1px solid var(--gp-purple-line); }
.gp-recipients-modal-name {
    font-size: 14.5px;
    font-weight: 500;
}
.gp-recipients-modal-email {
    font-size: 12.5px;
    color: var(--gp-purple-65);
}


/* ---------- Profile page ---------- */
.gp-profile-main {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 14px 28px 64px;
    box-sizing: border-box;
}
/* Compact profile hero - avatar + identity column with name, email,
   and a one-line link out to /profile/settings where the chrome
   (remove picture, last signed in, sign out) lives. Keeps the page
   focused on the welcome CTA + work below it. */
.gp-profile-hero {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--gp-purple-line);
}
.gp-profile-avatar-lg {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--gp-purple);
    color: var(--gp-cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gp-sans);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
    transition: transform 120ms ease;
}
@media (hover: hover) {
    .gp-profile-avatar-lg:not(.gp-profile-avatar-lg--static):hover { transform: scale(1.03); }
}
.gp-profile-avatar-lg--static {
    cursor: default;
}
.gp-profile-avatar-lg--image { background: var(--gp-purple-line); }
.gp-profile-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gp-profile-identity {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.gp-profile-avatar-form { display: none; }
.gp-profile-errors { margin-top: 20px; }
.gp-profile-name {
    font-family: var(--gp-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--gp-purple);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.gp-profile-email {
    margin: 0;
    font-size: 12.5px;
    color: var(--gp-purple-65);
}
.gp-profile-settings-link {
    align-self: flex-start;
    margin-top: 2px;
    font-size: 12px;
    color: var(--gp-orange);
    text-decoration: none;
    font-weight: 600;
}
@media (hover: hover) {
    .gp-profile-settings-link:hover { text-decoration: underline; }
}

/* Settings page (/profile/settings) - the chrome that used to clutter
   the profile hero. Rows of label / value with a couple of small
   action links (change picture, remove picture). */
.gp-settings-main {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 28px 64px;
    box-sizing: border-box;
}
.gp-settings-header { margin-bottom: 22px; }
.gp-settings-title {
    font-family: var(--gp-serif);
    font-size: clamp(24px, 4vw, 30px);
    font-weight: 600;
    color: var(--gp-purple);
    letter-spacing: -0.02em;
    margin: 0 0 6px;
}
.gp-settings-sub {
    margin: 0;
    font-size: 14px;
    color: var(--gp-purple-65);
}
.gp-settings-card {
    background: #fff;
    border: 1px solid var(--gp-purple-line);
    border-radius: 16px;
    padding: 6px 22px;
}
.gp-settings-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 16px 0;
    border-bottom: 1px solid var(--gp-purple-line);
    min-height: 48px;
}
.gp-settings-row:last-child { border-bottom: 0; }
.gp-settings-row-label {
    flex-shrink: 0;
    min-width: 140px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gp-purple-65);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.gp-settings-row-value {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}
.gp-settings-row-value--text {
    color: var(--gp-purple);
    font-size: 14px;
}
.gp-settings-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--gp-purple);
    color: var(--gp-cream);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gp-sans);
    font-size: 18px;
    font-weight: 600;
    flex-shrink: 0;
    cursor: pointer;
    overflow: hidden;
}
.gp-settings-avatar--image { background: var(--gp-purple-line); }
.gp-settings-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gp-settings-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gp-settings-inline-form { margin: 0; }
.gp-settings-action-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: var(--gp-orange);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    align-self: flex-start;
}
.gp-settings-action-link--danger { color: var(--gp-red, #b94c4c); }
@media (hover: hover) {
    .gp-settings-action-link:hover { text-decoration: underline; }
}
.gp-settings-signout {
    margin: 24px 0 0;
    text-align: center;
}
.gp-settings-signout-btn {
    background: transparent;
    border: 1px solid var(--gp-purple-line2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-purple);
    padding: 10px 22px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
@media (hover: hover) {
    .gp-settings-signout-btn:hover {
        background: var(--gp-purple);
        color: var(--gp-cream);
    }
}

@media (max-width: 540px) {
    .gp-settings-main { padding: 24px 18px 48px; }
    .gp-settings-card { padding: 4px 18px; }
    .gp-settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 0;
    }
    .gp-settings-row-label { min-width: 0; }
}
/* Welcome card - the page-level CTA above the section list. Most users
   come here to start a new GiftPraise; this makes that intent the
   single most prominent action. Soft orange wash so it reads as warm
   without competing visually with the user's existing work below. */
.gp-profile-welcome {
    margin-top: 0;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--gp-purple-line);
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 24px -20px rgba(61, 30, 74, 0.18);
}
.gp-profile-welcome-text { min-width: 0; flex: 1; }
.gp-profile-welcome-greet {
    font-family: var(--gp-serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--gp-purple);
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.gp-profile-welcome-wave {
    font-family: var(--gp-sans);
    font-size: 22px;
    line-height: 1;
}
.gp-profile-welcome-sub {
    font-size: 14px;
    color: var(--gp-purple-65);
    margin: 0;
}
.gp-profile-welcome-cta {
    background: var(--gp-orange);
    color: #fff;
    font-family: var(--gp-sans);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 22px;
    border-radius: 999px;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    box-shadow: 0 6px 16px -6px rgba(232, 163, 61, 0.6);
    transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
/* Only apply hover on devices that actually have a hover state - on
   touch, iOS Safari sticks the hover after a tap and the darker
   orange persists when the user comes back to the page. */
@media (hover: hover) {
    .gp-profile-welcome-cta:hover {
        transform: translateY(-1px);
        background: #d8923a;
        box-shadow: 0 10px 22px -8px rgba(232, 163, 61, 0.7);
    }
}

.gp-profile-group {
    margin-top: 22px;
}
.gp-profile-group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}
.gp-profile-group-title {
    font-family: var(--gp-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--gp-purple);
    margin: 0;
    letter-spacing: -0.01em;
}
.gp-profile-group-count {
    font-size: 12.5px;
    color: var(--gp-purple-50);
}
.gp-profile-empty {
    margin: 0;
    padding: 14px 18px;
    font-size: 14px;
    color: var(--gp-purple-65);
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed var(--gp-purple-line2);
    border-radius: 14px;
}
.gp-profile-empty a {
    color: var(--gp-orange);
    text-decoration: none;
    font-weight: 500;
}
.gp-profile-empty a:hover { text-decoration: underline; }
.gp-profile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.gp-profile-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--gp-purple-line);
    border-radius: 14px;
    padding: 14px 16px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gp-profile-item:hover {
    border-color: var(--gp-purple-line2);
    box-shadow: 0 6px 16px -10px rgba(61, 30, 74, 0.25);
}
.gp-profile-item-link {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: var(--gp-purple);
    border-radius: 10px;
    outline: none;
}
.gp-profile-item-link:focus-visible {
    box-shadow: 0 0 0 2px var(--gp-orange);
}
.gp-profile-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Tiles for Sent / Delivered render as <div> instead of <a> - the
   create flow is locked once a GiftPraise is paid for. The static
   variant kills the pointer cursor + any future hover affordance so
   the tile reads as a stat card rather than a broken link. */
.gp-profile-item-link--static {
    cursor: default;
}
.gp-profile-item-title {
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-profile-item-meta {
    font-size: 12.5px;
    color: var(--gp-purple-65);
    line-height: 1.4;
}
.gp-profile-item-meta strong {
    color: var(--gp-purple);
    font-weight: 700;
}
.gp-profile-item-stats {
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    color: var(--gp-purple-50);
    line-height: 1.4;
}
.gp-profile-item-stats strong {
    color: var(--gp-purple);
    font-weight: 600;
}

/* Message-list style tile: avatar + body + right time + chevron. The
   stat bubble + footnote treatment are gone; instead each tile reads
   as one row in a conversation list - title bold up top, single line
   status beneath, recipient initial in a coloured badge on the left. */
.gp-profile-item-link--list {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
}
.gp-profile-item-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gp-serif);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    background: rgba(61, 30, 74, 0.08);
    color: var(--gp-purple-65);
}
.gp-profile-item-avatar--lit {
    background: linear-gradient(135deg, var(--gp-orange), #f0b768);
    color: #fff;
}
.gp-profile-item-statline {
    display: flex;
    align-items: baseline;
    gap: 5px;
    font-size: 12.5px;
    color: var(--gp-purple-65);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gp-profile-item-recipname {
    color: var(--gp-purple);
    font-weight: 500;
    flex-shrink: 0;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gp-profile-item-sep { color: var(--gp-purple-50); flex-shrink: 0; }
.gp-profile-item-state {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.gp-profile-item-state.is-engaged { color: #2c7a3e; font-weight: 600; }
.gp-profile-item-state.is-pending { color: var(--gp-purple-50); font-style: italic; }
.gp-profile-item-time {
    flex-shrink: 0;
    align-self: center;
    font-size: 11.5px;
    color: var(--gp-purple-50);
    white-space: nowrap;
}
.gp-profile-item-chevron {
    flex-shrink: 0;
    align-self: center;
    font-size: 20px;
    line-height: 1;
    color: var(--gp-purple-50);
    transition: transform 120ms ease, color 120ms ease;
}
@media (hover: hover) {
    .gp-profile-item-link:hover .gp-profile-item-chevron,
    .gp-profile-item-link:focus-visible .gp-profile-item-chevron {
        color: var(--gp-orange);
        transform: translateX(2px);
    }
}
.gp-profile-badge {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 10px;
    border-radius: 999px;
    line-height: 1;
}
.gp-profile-badge--draft     { background: rgba(61, 30, 74, 0.08);   color: var(--gp-purple); }
.gp-profile-badge--sent      { background: rgba(232, 163, 61, 0.18); color: #8a5a14; }
.gp-profile-badge--delivered { background: rgba(119, 199, 216, 0.25); color: #1f6776; }

/* ============================================================
   Sent-tile drill-down (/profile/stats/{slug})
============================================================ */
.gp-stats-page { background: var(--gp-cream); }
.gp-stats-main {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 28px 64px;
    box-sizing: border-box;
}

/* Title + subtitle - the title is whatever the sender named the
   GiftPraise (acts as the occasion in this app's model), subtitle
   anchors it with who it's for and how long ago it went out. */
.gp-stats-header {
    margin-bottom: 24px;
}
.gp-stats-title {
    font-family: var(--gp-serif);
    font-size: clamp(26px, 4.5vw, 34px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--gp-purple);
    margin: 0 0 6px;
    line-height: 1.15;
}
.gp-stats-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--gp-purple-65);
}
.gp-stats-subtitle strong {
    color: var(--gp-purple);
    font-weight: 600;
}

/* Two-card stat summary - primary card shows recipient open progress,
   secondary card shows total view count. */
.gp-stats-summary {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 12px;
    margin-bottom: 32px;
}
.gp-stats-card {
    background: #fff;
    border: 1px solid rgba(61, 30, 74, 0.08);
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 10px 24px -22px rgba(61, 30, 74, 0.4);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gp-stats-card--primary {
    background: #fff;
}
.gp-stats-num {
    font-family: var(--gp-serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--gp-purple);
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.gp-stats-num strong { font-weight: 600; }
.gp-stats-of {
    font-size: 14px;
    color: var(--gp-purple-50);
    font-weight: 500;
    font-family: var(--gp-sans);
}
.gp-stats-label {
    font-size: 13px;
    color: var(--gp-purple-65);
    margin-top: 2px;
}
.gp-stats-progress {
    margin-top: 8px;
    height: 8px;
    background: rgba(61, 30, 74, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
.gp-stats-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gp-orange) 0%, #f0b768 100%);
    border-radius: 999px;
    transition: width 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Recipient groups - Opened first, then Pending. */
.gp-stats-group { margin-top: 28px; }
.gp-stats-group-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 12px;
    padding: 0 4px;
    font-family: var(--gp-sans);
}
.gp-stats-group-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gp-purple);
}
.gp-stats-group-count {
    font-size: 12px;
    color: var(--gp-purple-50);
    font-weight: 600;
}
.gp-stats-recipients {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.gp-stats-recipient {
    background: #fff;
    border: 1px solid rgba(61, 30, 74, 0.08);
    border-radius: 12px;
    transition: background 120ms ease;
    overflow: hidden;
}
.gp-stats-recipient-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 8px 14px;
    text-decoration: none;
    color: inherit;
    border-radius: 12px;
    outline: none;
}
.gp-stats-recipient-link:focus-visible {
    box-shadow: inset 0 0 0 2px var(--gp-orange);
}
@media (hover: hover) {
    .gp-stats-recipient-link:hover {
        background: rgba(232, 163, 61, 0.04);
    }
}
.gp-stats-recipient--opened { border-left: 3px solid rgba(119, 199, 216, 0.55); }
.gp-stats-recipient--pending {
    border-left: 3px solid rgba(232, 163, 61, 0.3);
}
.gp-stats-recipient-id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.gp-stats-recipient-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gp-orange), #f0b768);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gp-serif);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    flex-shrink: 0;
}
.gp-stats-recipient--pending .gp-stats-recipient-avatar {
    background: linear-gradient(135deg, rgba(61, 30, 74, 0.18), rgba(61, 30, 74, 0.32));
}
.gp-stats-recipient-meta { min-width: 0; }
.gp-stats-recipient-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gp-purple);
    line-height: 1.2;
}
.gp-stats-recipient-state {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.gp-stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.gp-stats-pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.gp-stats-pill--ok      { background: rgba(119, 199, 216, 0.25); color: #1f6776; }
.gp-stats-pill--pending { background: rgba(232, 163, 61, 0.18); color: #8a5a14; }
.gp-stats-line     {
    font-size: 12.5px;
    color: var(--gp-purple-65);
}

/* ============================================================
   Recipient detail page (/profile/{session}/recipient/{recipient})
============================================================ */
.gp-recipient-eyebrow {
    font-family: var(--gp-sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gp-orange);
    font-weight: 700;
    margin: 0 0 8px;
}
.gp-recipient-sent {
    margin: 6px 0 0;
    font-size: 13px;
    color: var(--gp-purple-65);
}
.gp-recipient-sent strong {
    color: var(--gp-purple);
    font-weight: 600;
}
.gp-recipient-sent span {
    color: var(--gp-purple-50);
    font-size: 12px;
}
.gp-recipient-preview-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-orange);
    background: rgba(232, 163, 61, 0.1);
    border: 1px solid rgba(232, 163, 61, 0.2);
    padding: 7px 14px;
    border-radius: 999px;
    text-decoration: none;
    transition: background 120ms ease, transform 120ms ease;
}
@media (hover: hover) {
    .gp-recipient-preview-link:hover {
        background: rgba(232, 163, 61, 0.18);
        transform: translateY(-1px);
    }
}
.gp-recipient-group { margin-top: 28px; }
.gp-recipient-channels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gp-recipient-channel {
    background: #fff;
    border: 1px solid rgba(61, 30, 74, 0.08);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 6px 18px -18px rgba(61, 30, 74, 0.35);
}
.gp-recipient-channel.is-lit {
    border-left: 3px solid rgba(119, 199, 216, 0.55);
}
.gp-recipient-channel-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.gp-recipient-channel-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(61, 30, 74, 0.06);
    color: rgba(61, 30, 74, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 160ms ease, color 160ms ease;
}
.gp-recipient-channel.is-lit .gp-recipient-channel-icon {
    background: rgba(119, 199, 216, 0.3);
    color: #1f6776;
}
.gp-recipient-channel-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.gp-recipient-channel-name strong {
    font-size: 14.5px;
    color: var(--gp-purple);
    font-weight: 600;
}
.gp-recipient-channel-state {
    font-size: 12px;
    color: var(--gp-purple-65);
}
.gp-recipient-channel.is-lit .gp-recipient-channel-state {
    color: #1f6776;
    font-weight: 600;
}
/* Open history - single unified card with thin rows. Each row leads
   with a small channel pill, time in the middle, UA + country dim on
   the right. No per-event card chrome - reads as a clean log. */
.gp-recipient-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(61, 30, 74, 0.08);
    border-radius: 12px;
    overflow: hidden;
}
.gp-recipient-event {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(61, 30, 74, 0.05);
}
.gp-recipient-event:last-child { border-bottom: 0; }
.gp-recipient-event-channel {
    flex-shrink: 0;
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(61, 30, 74, 0.08);
    color: var(--gp-purple-65);
    min-width: 48px;
    text-align: center;
}
.gp-recipient-event-channel--email  { background: rgba(119, 199, 216, 0.25); color: #1f6776; }
.gp-recipient-event-channel--sms    { background: rgba(232, 163, 61, 0.18); color: #8a5a14; }
.gp-recipient-event-when {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.2;
}
.gp-recipient-event-when strong {
    font-size: 13px;
    color: var(--gp-purple);
    font-weight: 600;
}
.gp-recipient-event-when span {
    font-size: 11px;
    color: var(--gp-purple-50);
}
.gp-recipient-event-tail {
    flex-shrink: 0;
    text-align: right;
    font-size: 11.5px;
    color: var(--gp-purple-65);
    white-space: nowrap;
}

@media (max-width: 540px) {
    .gp-recipient-event {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px 10px;
    }
    .gp-recipient-event-tail {
        flex-basis: 100%;
        text-align: left;
        font-size: 11px;
        margin-left: 60px;
    }
}

@media (max-width: 540px) {
    .gp-stats-main { padding: 20px 16px 40px; }

    .gp-stats-header { margin-bottom: 16px; }
    .gp-stats-title  { margin-bottom: 4px; }

    /* Keep the two cards side-by-side on phones but lighter on padding.
       Stacking made the second 'total views' card feel like dead space. */
    .gp-stats-summary {
        grid-template-columns: 1.5fr 1fr;
        gap: 8px;
        margin-bottom: 22px;
    }
    .gp-stats-card { padding: 14px 16px; border-radius: 14px; }
    .gp-stats-num  { font-size: 24px; }
    .gp-stats-of   { font-size: 13px; }
    .gp-stats-label { font-size: 12px; }
    .gp-stats-progress { margin-top: 6px; height: 6px; }

    .gp-stats-group { margin-top: 20px; }
    .gp-stats-group-head { margin-bottom: 8px; }
    .gp-stats-recipients { gap: 6px; }

    /* Stay in row layout on mobile - avatar + name on the left, channels
       + stat line stacked on the right - so each card stays compact and
       readable rather than ballooning into a column. */
    .gp-stats-recipient-link { padding: 8px 12px; gap: 10px; }
    .gp-stats-recipient-avatar { width: 28px; height: 28px; font-size: 13px; }
    .gp-stats-line { font-size: 11px; }
}

/* Profile-tile aside: only drafts get an aside now (the Draft badge).
   Sent tiles are click-anywhere with no right-side affordance, so the
   whole tile is one big tab target. */
.gp-profile-item-aside {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

@media (max-width: 540px) {
    .gp-profile-main { padding: 14px 18px 48px; }
    .gp-profile-hero { flex-wrap: wrap; gap: 14px; }

    .gp-profile-welcome {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 20px;
        gap: 14px;
    }
    .gp-profile-welcome-greet { font-size: 20px; justify-content: center; }
    .gp-profile-welcome-cta { width: 100%; padding: 14px 22px; box-sizing: border-box; }
}


/* Slim footer */
.gp-footer-slim {
    /* Top + bottom padding to lift the attribution off the border without
       crowding the iOS home-indicator safe-area inset on devices that have one. */
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(61, 30, 74, 0.05);
    font-family: var(--gp-sans);
    font-size: 11.5px;
    color: var(--gp-purple-50);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.gp-footer-slim-sep { color: var(--gp-purple-50); }
.gp-footer-slim-attribution {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
.gp-footer-slim-heart {
    vertical-align: -1px;
    fill: currentColor;
}
.gp-footer-slim-legal {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

/* Top nav-progress bar */
#nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: linear-gradient(to right, var(--gp-amber), var(--gp-orange));
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(232, 93, 58, 0.5);
    transition: width 0.3s ease-out, opacity 0.2s;
}
html.is-navigating body {
    opacity: 0.5;
    pointer-events: none;
    cursor: wait;
}
html.is-navigating #nav-progress { opacity: 1 !important; }

/* gpModal (confirm/alert). z-index bumped above the rotate-lock
   (1000000) so the alert always sits in front of any other fixed
   overlay the page might be showing. */
#gp-modal {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(61, 30, 74, 0.55);
    backdrop-filter: blur(3px);
    font-family: var(--gp-sans);
    pointer-events: auto;
    opacity: 1 !important;
}
#gp-modal-card {
    background: var(--gp-cream);
    border: 1px solid rgba(61, 30, 74, 0.1);
    border-radius: 18px;
    max-width: 440px;
    width: 100%;
    box-shadow: 0 30px 60px -20px rgba(61, 30, 74, 0.4);
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.gp-modal-head { padding: 24px 24px 6px; }
.gp-modal-title {
    font-family: var(--gp-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 8px;
    color: var(--gp-purple);
}
.gp-modal-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--gp-purple-75);
    margin: 0;
}
.gp-modal-actions {
    display: flex;
    gap: 8px;
    padding: 18px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.gp-modal-btn {
    padding: 11px 18px;
    border-radius: var(--gp-radius-pill);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}
.gp-modal-btn--cancel {
    background: #FFFFFF;
    color: var(--gp-purple);
    border: 1px solid rgba(61, 30, 74, 0.2);
}
.gp-modal-btn--ok {
    background: var(--gp-orange);
    color: #FFFFFF;
    box-shadow: 0 6px 18px -8px var(--gp-orange);
}

/* Legal modal */
#legal-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(61, 30, 74, 0.55);
    backdrop-filter: blur(3px);
    font-family: var(--gp-sans);
}
#legal-modal-card {
    background: var(--gp-cream);
    border: 1px solid rgba(61, 30, 74, 0.1);
    border-radius: 18px;
    max-width: 680px;
    width: 100%;
    max-height: min(88vh, 760px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px -20px rgba(61, 30, 74, 0.4);
    overflow: hidden;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.legal-modal-head {
    padding: 20px 24px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.legal-modal-title {
    font-family: var(--gp-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    color: var(--gp-purple);
}
.legal-modal-close {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gp-purple-65);
    padding: 6px;
    border-radius: var(--gp-radius-pill);
    line-height: 0;
}
.legal-tabs {
    display: flex;
    gap: 4px;
    padding: 14px 24px 0;
    border-bottom: 1px solid var(--gp-purple-line);
}
.legal-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-purple-65);
    padding: 10px 14px;
    cursor: pointer;
}
.legal-tab.is-active {
    color: var(--gp-purple) !important;
    border-bottom-color: var(--gp-orange) !important;
}
.legal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 18px 24px 24px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--gp-purple-85);
}
.legal-pane h2 {
    font-family: var(--gp-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gp-purple);
    margin: 22px 0 8px;
}
.legal-pane h2:first-child { margin-top: 0; }
.legal-pane p, .legal-pane ul { margin: 0 0 12px; }
.legal-pane ul { padding-left: 20px; }
.legal-pane li { margin-bottom: 4px; }
.legal-pane a { color: var(--gp-orange); text-decoration: underline; text-underline-offset: 2px; }
.legal-pane strong { color: var(--gp-purple); }

/* Error pages */
.gp-error-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 24px;
    max-width: 680px;
    width: 100%;
    margin: 0 auto;
}
.gp-error-code {
    font-family: var(--gp-serif);
    font-size: clamp(96px, 18vw, 168px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: var(--gp-orange);
    margin: 0 0 8px;
}
.gp-error-headline {
    font-family: var(--gp-serif);
    font-size: clamp(26px, 4vw, 36px);
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--gp-purple);
}
.gp-error-body {
    font-size: 16px;
    line-height: 1.6;
    color: var(--gp-purple-75);
    margin: 0 0 28px;
    max-width: 480px;
}
.gp-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Stepper styles already largely live in the partial. The classes still
 * resolve fine; only the body of the partial uses styles, no inline. */

/* ---------- Pay-return page ---------- */
.gp-pay-return-main {
    flex: 1;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 32px 80px;
    text-align: center;
    box-sizing: border-box;
}
.gp-pay-return-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 22px;
}
.gp-pay-return-icon--success { background: rgba(232, 163, 61, 0.14); color: var(--gp-orange); }
.gp-pay-return-icon--pending { background: rgba(232, 163, 61, 0.18); color: var(--gp-amber); }
.gp-pay-return-title {
    font-family: var(--gp-serif);
    font-size: clamp(28px, 4vw, 38px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    color: var(--gp-purple);
}
.gp-pay-return-body {
    font-size: 16px;
    line-height: 1.55;
    color: var(--gp-purple-75);
    margin: 0 0 28px;
}
.gp-header-static {
    font-size: 13px;
    font-weight: 500;
    color: var(--gp-purple-65);
}

/* ---------- Pay page (order summary + Stripe Payment Element) ---------- */
.summary-row {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    align-items: start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(61, 30, 74, 0.08);
}
.summary-row:first-child { padding-top: 0; }
.summary-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gp-purple-65);
    padding-top: 2px;
}
.summary-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--gp-purple);
    line-height: 1.4;
    min-width: 0;
    word-break: break-word;
}
.summary-value-recipient-meta {
    font-weight: 500;
    color: var(--gp-purple-65);
}
.summary-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--gp-purple-65);
    margin-top: 4px;
}
.summary-missing {
    font-weight: 500;
    color: var(--gp-purple-50);
    font-style: italic;
}
.summary-edit {
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-orange);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: var(--gp-radius-pill);
    border: 1px solid transparent;
    align-self: center;
}
.summary-edit:hover { background: rgba(232, 93, 58, 0.06); border-color: rgba(232, 93, 58, 0.2); }
.summary-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 18px;
    border-top: 2px solid rgba(61, 30, 74, 0.1);
}
.summary-total-label,
.summary-total-value {
    font-family: var(--gp-serif);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gp-purple);
}
.summary-total-label { font-size: 20px; }
.summary-total-value { font-size: 22px; }
.summary-breakdown {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed rgba(61, 30, 74, 0.18);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.summary-line {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: var(--gp-purple-75);
}
@media (max-width: 640px) {
    .summary-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label edit" "value value";
        gap: 4px 12px;
        padding: 12px 0;
    }
    .summary-label { grid-area: label; padding-top: 0; }
    .summary-value { grid-area: value; font-size: 14px; }
    .summary-edit  { grid-area: edit; align-self: start; padding: 2px 8px; font-size: 12px; }
    .summary-total-label { font-size: 17px; }
    .summary-total-value { font-size: 19px; }
}

#payment-card { margin-top: 20px; }
.gp-banner--stripe-missing { margin-top: 20px; }
.gp-payment-head {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gp-purple-65);
    margin-bottom: 14px;
}
#payment-element { min-height: 60px; }
.gp-payment-loading {
    padding: 18px 0;
    text-align: center;
    color: var(--gp-purple-50);
    font-size: 14px;
}
.gp-payment-loading--error {
    color: var(--gp-red);
    background: rgba(232, 93, 58, 0.07);
    border: 1px solid rgba(232, 93, 58, 0.4);
    border-radius: 10px;
    padding: 14px 16px;
    text-align: left;
    line-height: 1.45;
}
#payment-message {
    display: none;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(232, 93, 58, 0.07);
    border: 1px solid rgba(232, 93, 58, 0.4);
    border-radius: 10px;
    color: var(--gp-red);
    font-size: 14px;
}
#payment-message.is-visible { display: block; }
#submit-payment {
    margin-top: 18px;
    width: 100%;
    transition: opacity 0.15s;
}
.gp-pay-back { display: flex; flex-wrap: nowrap; gap: 10px; justify-content: center; margin-top: 24px; }
.gp-pay-test-note {
    text-align: center;
    font-size: 12px;
    color: var(--gp-purple-50);
    margin: 14px 0 0;
}

/* ---------- Gift page (brand cards + amount chips) ---------- */
.gp-fieldset {
    border: none;
    margin: 0;
    padding: 0;
}
.gp-fieldset legend {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gp-purple-65);
    margin-bottom: 6px;
}
.brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}
.brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    background: #FFFFFF;
    /* Solid 2px border at all times - prevents the row jumping height
       when the selected state's matching 2px orange border replaces a
       1px neutral one. */
    border: 2px solid rgba(61, 30, 74, 0.12);
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--gp-purple);
    text-align: center;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
}
.brand-card input { position: absolute; opacity: 0; pointer-events: none; }
@media (hover: hover) {
    .brand-card:hover { border-color: rgba(61, 30, 74, 0.3); }
}
.brand-card.is-selected {
    border-color: var(--gp-orange);
    background: rgba(232, 93, 58, 0.14);
    color: #8a3a1f;
    /* No font-weight or shadow change on selected - both subtly shifted
       the card's measured height and caused the section to contract /
       snap back when the user picked. Selection is signalled by colour +
       border only. */
}
.amount-row { display: flex; flex-wrap: wrap; gap: 8px; }
.amount-chip {
    flex: 1 1 60px;
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 2px solid rgba(61, 30, 74, 0.12);
    border-radius: var(--gp-radius-pill);
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    color: var(--gp-purple);
    transition: border-color 0.12s, background 0.12s, transform 0.08s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    position: relative;
}
.amount-chip input { position: absolute; opacity: 0; pointer-events: none; }
.amount-chip:hover { border-color: rgba(61, 30, 74, 0.3); }
.amount-chip:active { transform: scale(0.95); transition-duration: 0s; }
.amount-chip.is-selected {
    border-color: var(--gp-orange);
    background: var(--gp-orange);
    color: #FFFFFF;
    box-shadow: 0 4px 14px -8px var(--gp-orange);
}
.gp-gift-actions { display: flex; flex-wrap: nowrap; gap: 10px; align-items: center; }
.gp-gift-actions .gp-btn--primary { flex: 1; }
.gp-gift-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--gp-purple-50);
    margin: 0;
    text-align: center;
}
form.gp-card.gp-card--gift { gap: 14px; }
@media (max-width: 640px) {
    .brand-card { padding: 9px 10px; font-size: 14px; }
    .amount-chip { padding: 9px 12px; font-size: 14px; }
}

/* ---------- Schedule page (choice radios + custom date picker) ---------- */
form.gp-card.gp-card--schedule { gap: 14px; width: 100%; }
@media (max-width: 640px) {
    form.gp-card.gp-card--schedule { gap: 12px; }
    form.gp-card.gp-card--schedule button[type="submit"] { width: 100%; }
}
.choice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border: 2px solid rgba(61, 30, 74, 0.1);
    border-radius: 14px;
    cursor: pointer;
    background: transparent;
    transition: border-color 0.15s, background 0.15s;
    min-width: 0;
}
.choice.is-selected {
    border-color: var(--gp-orange);
    background: rgba(232, 93, 58, 0.04);
}
.choice input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--gp-orange);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.choice-body { flex: 1; min-width: 0; }
.choice-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gp-purple);
    margin-bottom: 2px;
}
.choice-desc {
    font-size: 13px;
    color: var(--gp-purple-65);
    line-height: 1.5;
}
@media (max-width: 640px) {
    .choice { padding: 14px; }
}

#scheduled-fields { min-width: 0; }
#scheduled-fields.is-hidden { display: none; }

.gp-picker {
    margin-top: 4px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(61, 30, 74, 0.1);
    border-radius: 14px;
    box-shadow: 0 8px 24px -18px rgba(61, 30, 74, 0.25);
    font-family: var(--gp-sans);
    color: var(--gp-purple);
}
.gp-picker-summary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    margin-bottom: 14px;
    background: linear-gradient(135deg, var(--gp-cream-hi) 0%, var(--gp-cream) 100%);
    border-radius: 10px;
}
.gp-picker-summary-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gp-amber);
}
.gp-picker-summary-value {
    font-family: var(--gp-serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--gp-purple);
}
.gp-picker-month {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.gp-picker-monthtitle {
    font-family: var(--gp-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.gp-picker-navbtn {
    width: 34px;
    height: 34px;
    border-radius: var(--gp-radius-pill);
    border: 1px solid rgba(61, 30, 74, 0.1);
    background: #FFFFFF;
    color: var(--gp-purple);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.gp-picker-navbtn:hover { background: var(--gp-cream); }
.gp-picker-navbtn:disabled { opacity: 0.3; cursor: not-allowed; }
.gp-picker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gp-purple-50);
    text-align: center;
}
.gp-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.gp-picker-day {
    height: 38px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--gp-purple);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}
.gp-picker-day:hover { background: var(--gp-cream); }
.gp-picker-day.is-today {
    background: rgba(232, 163, 61, 0.12);
    font-weight: 700;
}
.gp-picker-day.is-selected {
    background: var(--gp-orange);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 4px 12px -4px var(--gp-orange);
}
.gp-picker-day.is-selected:hover { background: #d44a2b; }
.gp-picker-day.is-disabled {
    color: rgba(61, 30, 74, 0.2);
    cursor: not-allowed;
    background: transparent;
}
.gp-picker-day.is-disabled:hover { background: transparent; }
.gp-picker-day.is-outside { color: rgba(61, 30, 74, 0.25); }
.gp-picker-timeline {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(61, 30, 74, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.gp-picker-timeline-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--gp-purple);
}
.gp-picker-time {
    display: flex;
    align-items: center;
    gap: 6px;
}
.gp-picker-time select {
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    color: var(--gp-purple);
    background: var(--gp-cream);
    border: 1px solid rgba(61, 30, 74, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    text-align: center;
    text-align-last: center;
    min-width: 64px;
}
.gp-picker-colon {
    font-weight: 700;
    color: var(--gp-purple);
}
@media (max-width: 640px) {
    .gp-picker { padding: 12px; }
    .gp-picker-summary { padding: 8px 12px; margin-bottom: 10px; }
    .gp-picker-summary-value { font-size: 17px; word-break: break-word; }
    .gp-picker-monthtitle { font-size: 15px; }
    .gp-picker-navbtn { width: 30px; height: 30px; font-size: 14px; }
    .gp-picker-weekdays { gap: 2px; }
    .gp-picker-grid { gap: 2px; }
    .gp-picker-day { height: 34px; font-size: 13px; }
    .gp-picker-time select { min-width: 56px; padding: 7px 8px; font-size: 15px; }
}
@media (max-width: 360px) {
    .gp-picker-day { height: 30px; font-size: 12px; }
    .gp-picker-weekdays { font-size: 10px; }
}

/* ---------- Record page ---------- */
.gp-mode-toggle {
    display: flex;
    gap: 8px;
    /* Top + bottom gaps around the preview/page region match the card's
       padding (24px), so the Record button has equal breathing room above
       and below within the card. */
    margin-bottom: 24px;
    padding: 4px;
    background: rgba(61, 30, 74, 0.04);
    border-radius: 12px;
}
.mode-btn {
    flex: 1;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--gp-purple-65);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.mode-btn.active {
    background: #FFFFFF !important;
    color: var(--gp-purple) !important;
    box-shadow: 0 2px 6px -2px rgba(61, 30, 74, 0.2);
}
.mode-btn:disabled {
    color: rgba(61, 30, 74, 0.4);
    cursor: not-allowed;
    opacity: 0.7;
}

#preview-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 14px;
    position: relative;
    background: var(--gp-purple);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 640px) {
    #preview-wrap {
        aspect-ratio: 4/3;
        max-height: 38vh;
    }
}
.gp-preview-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gp-purple);
    z-index: 4;
}
.gp-audio-toggle {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 999px;
    background: rgba(61, 30, 74, 0.92);
    color: #fff;
    font: 500 12px var(--gp-sans);
    cursor: pointer;
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}
.gp-audio-toggle[hidden] { display: none; }
.gp-audio-toggle:hover { background: rgba(61, 30, 74, 1); }
.gp-audio-toggle-icon { display: none; }
.gp-audio-toggle.is-muted .gp-audio-toggle-icon--muted { display: inline-block; }
.gp-audio-toggle:not(.is-muted) .gp-audio-toggle-icon--unmuted { display: inline-block; }
.gp-preview-spinner[hidden] { display: none; }
.gp-preview-spinner-ring {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--gp-amber);
    animation: gp-spin 0.8s linear infinite;
}
@keyframes gp-spin {
    to { transform: rotate(360deg); }
}
#preview-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 55%;
    max-width: 240px;
    max-height: 80%;
    pointer-events: none;
    z-index: 1;
}
#preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2;
    transform: none;
    -webkit-user-select: none;
    user-select: none;
}
#audio-indicator {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--gp-cream);
    text-align: center;
    padding: 32px;
}
#audio-bars {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 60px;
}
#audio-bars span {
    display: block;
    width: 6px;
    border-radius: 3px;
    animation: bar 1s ease-in-out infinite;
}
#audio-bars span:nth-child(1) { height: 20%;  background: var(--gp-orange); }
#audio-bars span:nth-child(2) { height: 60%;  background: var(--gp-amber);  animation-delay: 0.15s; }
#audio-bars span:nth-child(3) { height: 100%; background: var(--gp-teal);   animation-delay: 0.3s; }
#audio-bars span:nth-child(4) { height: 60%;  background: var(--gp-amber);  animation-delay: 0.45s; }
#audio-bars span:nth-child(5) { height: 20%;  background: var(--gp-orange); animation-delay: 0.6s; }
#audio-indicator p { margin: 0; font-size: 14px; opacity: 0.8; }

#timer {
    display: none;
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 12px;
    background: var(--gp-orange);
    color: #FFFFFF;
    border-radius: var(--gp-radius-pill);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    z-index: 3;
}
.rec-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #FFFFFF;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    animation: rec-pulse 1s ease-in-out infinite;
}
#progress-track {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
    z-index: 3;
}
#progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--gp-amber), var(--gp-orange));
    transition: width 0.1s linear;
    box-shadow: 0 0 12px rgba(232, 93, 58, 0.6);
}
#countdown {
    display: none;
    position: absolute;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(61, 30, 74, 0.55);
    backdrop-filter: blur(2px);
    z-index: 5;
}
#countdown-number {
    font-family: var(--gp-serif);
    font-size: 160px;
    line-height: 1;
    font-weight: 600;
    color: var(--gp-cream);
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    animation: countdown-pop 1s ease-out;
}

#controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 24px;
}
@media (max-width: 640px) {
    #controls { flex-wrap: nowrap !important; gap: 8px !important; }
}

#record-error {
    margin-bottom: 14px;
    padding: 12px 14px 12px 16px;
    background: rgba(232, 93, 58, 0.08);
    border: 1px solid rgba(232, 93, 58, 0.33);
    border-left: 4px solid var(--gp-orange);
    border-radius: 10px;
    color: var(--gp-red);
    font-size: 14px;
    line-height: 1.45;
    align-items: flex-start;
    gap: 10px;
    justify-content: space-between;
}
#record-error[hidden],
#record-error.is-hidden { display: none !important; }
#record-error-text { flex: 1; min-width: 0; word-break: break-word; }
#record-error-dismiss {
    background: transparent;
    border: none;
    color: var(--gp-red);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    opacity: 0.6;
}

#upload-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--gp-cream);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    text-align: center;
    /* No scrollbars: the content fits comfortably inside any phone viewport
       and we don't want a residual scroll from the page underneath to bleed
       through if the user happened to be mid-scroll when save fired. */
    overflow: hidden;
}
html.gp-overlay-open,
html.gp-overlay-open body {
    /* Hide both axes so neither the document nor the body can scroll while
       the fullscreen "Saving..." overlay is up. */
    overflow: hidden !important;
}
.big-spinner {
    width: 56px;
    height: 56px;
    border: 4px solid rgba(61, 30, 74, 0.15);
    border-top-color: var(--gp-orange);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}
#upload-overlay h2 {
    font-family: var(--gp-serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--gp-purple);
    margin: 0;
    letter-spacing: -0.02em;
}
#upload-overlay p {
    font-size: 15px;
    color: var(--gp-purple-75);
    margin: 0;
}
.upload-progress {
    width: min(280px, 80%);
    height: 6px;
    background: rgba(61, 30, 74, 0.1);
    border-radius: var(--gp-radius-pill);
    overflow: hidden;
}
#upload-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--gp-amber), var(--gp-orange));
    border-radius: var(--gp-radius-pill);
    transition: width 0.3s ease-out;
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: -2px;
    margin-right: 8px;
}

@keyframes bar {
    0%, 100% { transform: scaleY(0.4); }
    50%      { transform: scaleY(1); }
}
@keyframes rec-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}
@keyframes countdown-pop {
    0%   { transform: scale(1.6); opacity: 0; }
    30%  { transform: scale(1);   opacity: 1; }
    100% { transform: scale(0.85); opacity: 0.85; }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ---------- Recipients block + CSV upload ---------- */
.gp-recipients-head {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--gp-purple);
    margin-bottom: 4px;
}
.gp-recipients-head .gp-field-label-optional { font-weight: 400; color: var(--gp-purple-50); }
.gp-btn--small { padding: 9px 14px; font-size: 13px; }
.gp-recipients-hint {
    font-size: 12px;
    color: var(--gp-purple-50);
    margin: 0 0 12px;
}
.gp-recipients-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}
.gp-recipients-actions .gp-add-recipient { margin-top: 0; }
.gp-recipients-actions.is-hidden { display: none; }
.gp-recipients-rows {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* Card chrome stripped - recipients sit as inline fields within the
   form rather than as nested cards. The Recipient N label + remove
   button anchor each block; a thin divider between adjacent rows
   provides separation when there's more than one. */
.recipient-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
.recipient-row + .recipient-row {
    padding-top: 18px;
    border-top: 1px solid var(--gp-purple-line);
}
.recipient-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gp-purple-65);
}
.remove-recipient {
    background: transparent;
    border: none;
    color: var(--gp-purple-50);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 13px;
}
.recipient-row.is-only .remove-recipient,
.recipient-row.is-only .recipient-row-label { display: none; }
.recipient-row.is-only .recipient-row-head { display: none; }
.gp-input--sms {
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233D1E4A' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'><path d='M2.5 3.5h11v7h-7l-3 2.5v-2.5h-1z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
}
.gp-add-recipient {
    margin-top: 12px;
    padding: 10px 16px;
    background: transparent;
    color: var(--gp-orange);
    border: 1px dashed rgba(232, 93, 58, 0.4);
    border-radius: var(--gp-radius-pill);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.gp-add-recipient:hover { background: rgba(232, 93, 58, 0.06); }

/* Create-page form spacing */
form.gp-card { gap: 16px; }
@media (max-width: 640px) {
    form.gp-card { gap: 14px; }
    form.gp-card button[type="submit"] { width: 100%; }
}

/* Mobile tightening shared across the flow pages */
@media (max-width: 640px) {
    .gp-header { padding: 12px 20px !important; }
    .gp-main { margin: 14px auto !important; padding: 0 20px !important; }
    .gp-card { padding: 16px !important; }
    .gp-main h1 {
        font-size: clamp(22px, 5vw, 28px) !important;
        margin-bottom: 4px !important;
    }
    .gp-main > p { font-size: 14px !important; margin-bottom: 10px !important; }
}

/* ============================================================
   Marketing / interior pages
   Migrated from inline style="..." attributes per the project
   guardrail (see CLAUDE.md). Keep page-specific marketing CSS
   below this banner.
   ============================================================ */

/* Pricing - disclaimer note at end of content */
.gp-pricing-note {
    font-size: 13px;
    opacity: 0.7;
    margin-top: 32px;
}

/* Interior (legal) layout - shared by /terms, /privacy, /refunds */
.gp-legal-page {
    min-height: 100vh;
    background: var(--gp-cream);
    color: var(--gp-purple);
    font-family: var(--gp-sans);
    display: flex;
    flex-direction: column;
}
.gp-legal-header {
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
}
.gp-legal-logo {
    font-family: "Fraunces", Georgia, serif;
    font-size: 24px;
    font-weight: 600;
    color: #3D1E4A;
    text-decoration: none;
    letter-spacing: -0.02em;
}
.gp-legal-back {
    font-size: 13px;
    font-weight: 500;
    color: #3D1E4A;
    text-decoration: none;
    opacity: 0.7;
}
.gp-legal-main {
    flex: 1;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 32px 80px;
}
.gp-legal-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #E8A33D;
    margin-bottom: 12px;
}
.gp-legal-heading {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.05;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin: 0 0 32px;
    color: #3D1E4A;
}
.gp-legal-content {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(61, 30, 74, 0.85);
}

/* Marketing footer (full footer used on home/pricing/legal pages) */
.gp-marketing-footer {
    margin-top: auto;
    border-top: 1px solid #E85D3A40;
    background: #E85D3A12;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #3D1E4A;
}
.gp-marketing-footer-grid {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 32px 24px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
}
.gp-marketing-footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.gp-marketing-footer-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E8A33D;
}
.gp-marketing-footer-wordmark {
    font-family: "Fraunces", Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: #3D1E4A;
    letter-spacing: -0.02em;
}
.gp-marketing-footer-lede {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(61, 30, 74, 0.7);
    margin: 0;
    max-width: 280px;
}
.gp-marketing-footer-heading {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #3D1E4A;
    margin-bottom: 14px;
}
.gp-marketing-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}
.gp-marketing-footer-link {
    color: rgba(61, 30, 74, 0.7);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.gp-marketing-footer-link.active {
    color: #3D1E4A;
}
.gp-marketing-footer-bar {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 32px 28px;
    border-top: 1px solid #3D1E4A14;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 12px;
    color: rgba(61, 30, 74, 0.6);
}
@media (max-width: 720px) {
    .gp-marketing-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .gp-marketing-footer-grid > div:first-child {
        grid-column: 1 / -1;
    }
}

/* Home page - hero + animated background flair */
.gp-home {
    min-height: 100vh;
    background: var(--gp-cream);
    color: #3D1E4A;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    display: flex;
    flex-direction: column;
}
.gp-home-hero {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 95px 24px 80px;
    overflow: hidden;
}
.gp-home-flair {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.gp-home-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.16;
    animation: flair-blob 14s ease-in-out infinite;
}
.gp-home-blob--a {
    left: -10%;
    top: -12%;
    width: 360px;
    height: 360px;
    background: #E8A33D;
}
.gp-home-blob--b {
    right: -12%;
    bottom: -14%;
    width: 420px;
    height: 420px;
    background: #77C7D8;
    opacity: 0.18;
    filter: blur(80px);
    animation-duration: 18s;
    animation-direction: reverse;
}
.gp-home-blob--c {
    left: 55%;
    top: 10%;
    width: 280px;
    height: 280px;
    background: #E85D3A;
    opacity: 0.08;
    animation-duration: 22s;
}
.gp-home-dot {
    position: absolute;
    border-radius: 50%;
    opacity: 0.32;
    animation: flair-drift 7s ease-in-out infinite;
}
.gp-home-dot--1 { left:  8%; top: 14%; width: 10px; height: 10px; background: #E85D3A; }
.gp-home-dot--2 { left: 18%; top: 72%; width:  7px; height:  7px; background: #3D1E4A; animation-duration: 9s;  animation-delay: 1.2s; }
.gp-home-dot--3 { left: 12%; top: 44%; width:  5px; height:  5px; background: #77C7D8; animation-duration: 8s;  animation-delay: 2.4s; }
.gp-home-dot--4 { left: 86%; top: 20%; width:  8px; height:  8px; background: #E8A33D; animation-duration: 10s; animation-delay: 0.6s; }
.gp-home-dot--5 { left: 92%; top: 62%; width:  6px; height:  6px; background: #E85D3A; animation-duration: 7.5s; animation-delay: 1.8s; }
.gp-home-dot--6 { left: 78%; top: 84%; width:  9px; height:  9px; background: #3D1E4A; animation-duration: 9.5s; animation-delay: 3s; }
.gp-home-dot--7 { left: 40%; top:  8%; width:  5px; height:  5px; background: #77C7D8; animation-duration: 8.5s; animation-delay: 2s; }
.gp-home-dot--8 { left: 60%; top: 92%; width:  6px; height:  6px; background: #E8A33D; animation-duration: 9s;   animation-delay: 0.4s; }
.gp-home-spark {
    position: absolute;
    opacity: 0.45;
    animation: flair-twinkle 4.5s ease-in-out infinite;
}
.gp-home-spark--1 { left: 22%; top: 28%; }
.gp-home-spark--2 { left: 82%; top: 40%; animation-delay: 2s; }
.gp-home-spark--3 { left: 30%; top: 86%; animation-delay: 1s; }
.gp-home-spark--4 { left: 70%; top: 12%; animation-delay: 3s; }
@keyframes flair-drift {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(8px, -10px); }
}
@keyframes flair-twinkle {
    0%, 100% { transform: scale(0.7); opacity: 0.25; }
    50%      { transform: scale(1.1); opacity: 0.6; }
}
@keyframes flair-blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, 14px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    .gp-home-flair * { animation: none !important; }
}

.gp-home-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 18px 24px;
    background: #E85D3A12;
    border-bottom: 1px solid #E85D3A40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #E85D3A;
}
.gp-home-banner-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E85D3A;
    box-shadow: 0 0 0 5px #E85D3A26;
}
.gp-home-stage {
    position: relative;
    z-index: 1;
    max-width: 660px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}
.gp-home-envelope {
    display: block;
    overflow: visible;
}
.envelope-wrap {
    display: inline-block;
    transform-origin: 50% 90%;
    animation: envelope-bob 4.2s ease-in-out infinite;
}
.envelope-shadow {
    transform-origin: 120px 196px;
    animation: envelope-shadow 4.2s ease-in-out infinite;
}
.envelope-eyes {
    transform-origin: 120px 116px;
    animation: envelope-blink 5.5s ease-in-out infinite;
}
@keyframes envelope-bob {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50%      { transform: translateY(-6px) rotate(1.2deg); }
}
@keyframes envelope-shadow {
    0%, 100% { transform: scaleX(1);    opacity: 0.18; }
    50%      { transform: scaleX(0.88); opacity: 0.12; }
}
@keyframes envelope-blink {
    0%, 92%, 100% { transform: scaleY(1); }
    95%           { transform: scaleY(0.1); }
}
@media (prefers-reduced-motion: reduce) {
    .envelope-wrap, .envelope-shadow, .envelope-eyes { animation: none; }
}

.gp-home-title {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(44px, 7vw, 76px);
    line-height: 1;
    letter-spacing: -0.035em;
    font-weight: 600;
    margin: 0;
    color: #3D1E4A;
}
.gp-home-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 620px;
}
.gp-home-rule-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #3D1E4A55);
}
.gp-home-rule-line--right {
    background: linear-gradient(to left, transparent, #3D1E4A55);
}
.gp-home-tagline {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(20px, 2.6vw, 26px);
    line-height: 1.3;
    font-weight: 500;
    font-style: italic;
    margin: 0;
    color: #3D1E4A;
    max-width: 480px;
}
.gp-home-card {
    margin-top: 8px;
    padding: 28px 32px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid #3D1E4A22;
    border-radius: 20px;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 40px -20px #3D1E4A40;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(15px, 1.7vw, 17px);
    line-height: 1.65;
    color: rgba(61, 30, 74, 0.85);
    max-width: 580px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.gp-home-card-lede {
    margin: 0;
    text-align: center;
}
.gp-home-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.gp-home-tag {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #FFFFFF;
    padding: 6px 12px;
    background: #E85D3A;
    border: 1px solid #E85D3A;
    border-radius: 999px;
    box-shadow: 0 2px 8px -2px #E85D3A80;
}

/* ============================================================
   Auth / magic-link verify + sent pages (hero design)
   ============================================================ */
.gp-verify-page {
    min-height: 100vh;
    background: var(--gp-cream);
    color: #3D1E4A;
    display: flex;
    flex-direction: column;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.gp-verify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px 0;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.gp-verify-logo {
    font-family: "Fraunces", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: #3D1E4A;
    text-decoration: none;
    letter-spacing: -0.02em;
}
.gp-verify-back {
    font-size: 13px;
    font-weight: 500;
    color: rgba(61, 30, 74, 0.7);
    text-decoration: none;
}
.gp-verify-back:hover { color: #3D1E4A; }

.gp-verify-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(24px, 6vh, 80px) 24px clamp(40px, 8vh, 100px);
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    gap: 18px;
}
.gp-verify-mascot {
    display: block;
    width: 220px;
    height: auto;
    margin: 6px 0 0;
}
.gp-verify-title {
    font-family: "Fraunces", Georgia, serif;
    font-size: clamp(36px, 6vw, 56px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 600;
    margin: 0;
    color: #3D1E4A;
}
.gp-verify-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    max-width: 520px;
}
.gp-verify-rule-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #3D1E4A55);
}
.gp-verify-rule-line--right {
    background: linear-gradient(to left, transparent, #3D1E4A55);
}
.gp-verify-tagline {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(15px, 2vw, 18px);
    color: rgba(61, 30, 74, 0.78);
    margin: 0;
    white-space: nowrap;
}
.gp-verify-errors {
    width: 100%;
    max-width: 540px;
}
.gp-verify-card {
    width: 100%;
    max-width: 540px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #3D1E4A22;
    border-radius: 18px;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 40px -24px #3D1E4A55;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}
.gp-verify-fields {
    display: flex;
    gap: 10px;
}
.gp-verify-input {
    flex: 1;
    font: inherit;
    font-size: 16px;
    padding: 13px 16px;
    border: 1.5px solid rgba(61, 30, 74, 0.18);
    border-radius: 12px;
    background: #FFFFFF;
    color: #3D1E4A;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.gp-verify-input::placeholder { color: rgba(61, 30, 74, 0.42); }
.gp-verify-input:focus {
    outline: none;
    border-color: #E85D3A;
    box-shadow: 0 0 0 3px #E85D3A22;
}
.gp-verify-submit {
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background: #E85D3A;
    border: 0;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    transition: background 120ms ease, transform 80ms ease;
    box-shadow: 0 8px 24px -10px #E85D3A88;
}
.gp-verify-submit:hover { background: #d4502f; }
.gp-verify-submit:active { transform: translateY(1px); }
.gp-verify-hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(61, 30, 74, 0.6);
    max-width: 480px;
}
.gp-verify-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--gp-orange);
    text-decoration: underline;
    cursor: pointer;
}
.gp-verify-link:hover { color: #d4502f; }

/* ---------- Welcome (one-shot post-signup) ---------- */
.gp-welcome-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 24px clamp(40px, 8vh, 80px);
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    gap: 14px;
}
.gp-welcome-mascot {
    display: block;
    width: 280px;
    max-width: 80vw;
    height: auto;
    margin-top: -8px;
}
.gp-welcome-title {
    font-family: var(--gp-serif);
    font-size: clamp(32px, 5.5vw, 48px);
    line-height: 1.05;
    letter-spacing: -0.035em;
    font-weight: 600;
    margin: 0;
    color: var(--gp-purple);
}
.gp-welcome-lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--gp-purple-75);
    max-width: 480px;
}
.gp-welcome-list {
    list-style: none;
    margin: 8px 0 4px;
    padding: 0;
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
}
.gp-welcome-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--gp-purple-line);
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--gp-purple-85);
}
.gp-welcome-list strong {
    color: var(--gp-purple);
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}
.gp-welcome-bullet {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--gp-orange);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--gp-sans);
    font-size: 13px;
    font-weight: 600;
}
.gp-welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin-top: 12px;
}
.gp-welcome-cta { text-align: center; }
@media (max-width: 540px) {
    .gp-welcome-mascot { width: 200px; }
}

/* "Check your inbox" variant */
.gp-verify-card--message {
    text-align: center;
    padding: 28px 24px 22px;
    gap: 14px;
}
.gp-verify-sent-lede {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: #3D1E4A;
}
.gp-verify-sent-meta {
    margin: 0;
    font-size: 13px;
    color: rgba(61, 30, 74, 0.65);
}
.gp-verify-secondary {
    align-self: center;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #3D1E4A;
    text-decoration: underline;
}

@media (max-width: 540px) {
    .gp-verify-header { padding: 16px 18px 0; }
    .gp-verify-stage  { padding: 18px 16px 40px; gap: 14px; }
    .gp-verify-mascot { width: 168px; }
    .gp-verify-fields { flex-direction: column; gap: 10px; }
    .gp-verify-tagline { white-space: normal; }
}
.gp-header-user {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(61, 30, 74, 0.75);
}
.gp-header-user form {
    margin: 0;
}
.gp-header-signout {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: rgba(61, 30, 74, 0.7);
    text-decoration: underline;
    cursor: pointer;
}
.gp-header-signout:hover { color: #3D1E4A; }

.gp-footer-slim-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(61, 30, 74, 0.62);
}
.gp-footer-slim-signout-form {
    margin: 0;
    display: inline;
}
.gp-footer-slim-signout {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: rgba(61, 30, 74, 0.7);
    text-decoration: underline;
    cursor: pointer;
}
.gp-footer-slim-signout:hover { color: #3D1E4A; }