/* ==========================================================================
   Tellafter visual system: "dusk to dawn".
   Night plum carries trust and calm; marigold sunrise carries warmth and continuity.
   Self-hosted fonts only (CSP font-src 'self'). No inline styles anywhere.
   ========================================================================== */

@font-face { font-family: "Young Serif"; src: url("../lib/fonts/young-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../lib/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../lib/fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../lib/fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../lib/fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --lv-night: #2e2347;      /* primary: deep plum */
  --lv-night-2: #3f3161;
  --lv-ink: #231c35;        /* body text */
  --lv-muted: #6a6280;
  --lv-mist: #f4f1fa;       /* page background */
  --lv-paper: #ffffff;
  --lv-line: #e3ddef;
  --lv-lilac: #e9e3f6;
  --lv-sun: #f2b035;        /* marigold accent */
  --lv-sun-deep: #c98a12;
  --lv-sun-soft: #fdf1d8;
  --lv-sage: #3f8f6b;
  --lv-sage-soft: #e3f2ea;
  --lv-rose: #c2415d;
  --lv-rose-soft: #fbe8ed;

  --lv-r-lg: 22px;
  --lv-r-md: 14px;
  --lv-r-sm: 9px;
  --lv-shadow: 0 1px 2px rgba(46, 35, 71, .06), 0 8px 24px -12px rgba(46, 35, 71, .18);

  --bs-body-font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-color: var(--lv-ink);
  --bs-body-bg: var(--lv-mist);
  --bs-body-font-size: 1.0625rem;
  --bs-body-line-height: 1.6;
  --bs-link-color: var(--lv-night-2);
  --bs-link-color-rgb: 63, 49, 97;
  --bs-link-hover-color: var(--lv-night);
  --bs-link-hover-color-rgb: 46, 35, 71;
  --bs-border-color: var(--lv-line);
  --bs-border-radius: var(--lv-r-sm);
  --bs-secondary-color: var(--lv-muted);
  --bs-emphasis-color: var(--lv-ink);
}

/* ---------- Base type ---------- */
body { min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; }
h1, h2, h3, .lv-display {
  font-family: "Young Serif", Georgia, serif; font-weight: 400; color: var(--lv-night); letter-spacing: -.01em; line-height: 1.15;
}
h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem); margin-bottom: .6rem; }
h2 { font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem); margin-top: 2rem; margin-bottom: .75rem; }
h3, .h5, .h6 { font-family: "Figtree", sans-serif; font-weight: 700; color: var(--lv-night); letter-spacing: 0; }
h2.h5, h3.h5 { font-size: 1.1rem; }
h2.h6 { font-size: .95rem; color: var(--lv-muted); font-weight: 600; }
p, li { max-width: 72ch; }
.lead { color: var(--lv-muted); font-size: 1.15rem; }
.text-muted { color: var(--lv-muted) !important; }
a { text-underline-offset: .18em; }
::selection { background: var(--lv-sun-soft); color: var(--lv-night); }
:focus-visible { outline: 3px solid var(--lv-sun); outline-offset: 2px; border-radius: 4px; }
.skip-link { position: absolute; left: .75rem; top: .75rem; z-index: 2000; background: var(--lv-paper); padding: .5rem .9rem; border-radius: var(--lv-r-sm); }

/* ---------- Icons ---------- */
.lv-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Navigation ---------- */
.lv-nav { background: rgba(244, 241, 250, .86); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--lv-line); position: sticky; top: 0; z-index: 1030; }
.lv-nav .nav-link { color: var(--lv-ink); font-weight: 500; padding: .45rem .8rem !important; border-radius: 999px; }
.lv-nav .nav-link:hover, .lv-nav .nav-link:focus { color: var(--lv-night); background: var(--lv-lilac); }
.lv-nav .nav-link.active { background: var(--lv-night); color: #fff; }
.lv-brand { display: flex; align-items: center; gap: .6rem; font-family: "Young Serif", serif; font-size: 1.3rem; color: var(--lv-night) !important; }
.lv-mark { width: 30px; height: 30px; flex: none; }
.lv-nav .dropdown-menu { border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); box-shadow: var(--lv-shadow); padding: .4rem; }
.lv-nav .dropdown-item { border-radius: var(--lv-r-sm); padding: .45rem .75rem; }
.lv-nav .dropdown-item:active { background: var(--lv-night); }
.lv-nav .navbar-toggler { border: 0; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 999px; padding: .55rem 1.2rem; }
.btn-sm { padding: .3rem .85rem; font-size: .875rem; }
.btn-lg { padding: .8rem 1.6rem; font-size: 1.05rem; }
.btn-primary {
  --bs-btn-bg: var(--lv-night); --bs-btn-border-color: var(--lv-night); --bs-btn-hover-bg: var(--lv-night-2); --bs-btn-hover-border-color: var(--lv-night-2);
  --bs-btn-active-bg: #241b39; --bs-btn-active-border-color: #241b39; --bs-btn-disabled-bg: var(--lv-night); --bs-btn-disabled-border-color: var(--lv-night);
}
.btn-sun {
  --bs-btn-color: var(--lv-night); --bs-btn-bg: var(--lv-sun); --bs-btn-border-color: var(--lv-sun);
  --bs-btn-hover-color: var(--lv-night); --bs-btn-hover-bg: #f5bf55; --bs-btn-hover-border-color: #f5bf55;
  --bs-btn-active-color: var(--lv-night); --bs-btn-active-bg: var(--lv-sun-deep); --bs-btn-active-border-color: var(--lv-sun-deep);
}
.btn-outline-primary {
  --bs-btn-color: var(--lv-night); --bs-btn-border-color: #cdc3e3; --bs-btn-hover-color: var(--lv-night); --bs-btn-hover-bg: var(--lv-lilac);
  --bs-btn-hover-border-color: #bfb3da; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--lv-night); --bs-btn-active-border-color: var(--lv-night);
}
.btn-outline-secondary { --bs-btn-color: var(--lv-muted); --bs-btn-border-color: var(--lv-line); --bs-btn-hover-bg: var(--lv-lilac); --bs-btn-hover-color: var(--lv-night); --bs-btn-hover-border-color: var(--lv-line); }
.btn-outline-danger { --bs-btn-color: var(--lv-rose); --bs-btn-border-color: #ecc3cd; --bs-btn-hover-bg: var(--lv-rose); --bs-btn-hover-border-color: var(--lv-rose); }
.btn-success { --bs-btn-bg: var(--lv-sage); --bs-btn-border-color: var(--lv-sage); --bs-btn-hover-bg: #357a5b; --bs-btn-hover-border-color: #357a5b; }
.btn-link { font-weight: 500; }
.btn-outline-light { --bs-btn-color: var(--lv-night); --bs-btn-border-color: #cdc3e3; --bs-btn-hover-bg: var(--lv-lilac); --bs-btn-hover-color: var(--lv-night); --bs-btn-hover-border-color: #cdc3e3; }
.btn-light { --bs-btn-bg: var(--lv-night); --bs-btn-color: #fff; --bs-btn-border-color: var(--lv-night); --bs-btn-hover-bg: var(--lv-night-2); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--lv-night-2); }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--lv-r-sm); border-color: #d8d1e8; padding: .6rem .85rem; background-color: #fff; }
.form-control-sm, .form-select-sm { padding: .3rem .6rem; }
.form-control:focus, .form-select:focus { border-color: var(--lv-night-2); box-shadow: 0 0 0 .25rem rgba(242, 176, 53, .28); }
.form-label { font-weight: 600; color: var(--lv-night); font-size: .95rem; }
.form-text { color: var(--lv-muted); }
.form-check-input:checked { background-color: var(--lv-night); border-color: var(--lv-night); }
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(242, 176, 53, .3); border-color: var(--lv-night-2); }
.text-danger { color: var(--lv-rose) !important; }
progress { accent-color: var(--lv-sun-deep); height: .55rem; width: 10rem; }

/* ---------- Surfaces ---------- */
.lv-card { background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); padding: 1.4rem 1.5rem; box-shadow: var(--lv-shadow); }
.lv-panel { background: var(--lv-paper); border-radius: var(--lv-r-lg); padding: 1.75rem; border: 1px solid var(--lv-line); }
.lv-stat { font-family: "Young Serif", serif; font-size: 1.7rem; color: var(--lv-night); line-height: 1.2; }
.lv-callout { background: var(--lv-sun-soft); border: 1px solid #f3dcaa; border-radius: var(--lv-r-md); padding: 1rem 1.2rem; margin-bottom: 1.25rem; color: #5b4310; }
.lv-callout strong { color: #4a360b; }
.lv-callout-warn { background: var(--lv-rose-soft); border-color: #f2c9d3; color: #6e2234; }
.lv-callout-warn strong { color: #5a1a2a; }
.lv-callout-good { background: var(--lv-sage-soft); border-color: #c4e3d3; color: #24563f; }
.alert { border-radius: var(--lv-r-md); border: 0; }
.alert-success { background: var(--lv-sage-soft); color: #24563f; }
.alert-danger { background: var(--lv-rose-soft); color: #6e2234; }
.badge { font-weight: 600; border-radius: 999px; padding: .35em .7em; }
.text-bg-primary { background: var(--lv-night) !important; }
.text-bg-warning { background: var(--lv-sun) !important; color: var(--lv-night) !important; }
.text-bg-light { background: var(--lv-lilac) !important; color: var(--lv-night) !important; }

.lv-table-wrap { background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); overflow-x: auto; box-shadow: var(--lv-shadow); }
.lv-table-wrap .table { margin: 0; --bs-table-bg: transparent; }
.lv-table-wrap thead th { background: #faf8fd; color: var(--lv-muted); font-weight: 600; font-size: .85rem; border-bottom-color: var(--lv-line); padding: .8rem 1rem; }
.lv-table-wrap td { padding: .75rem 1rem; border-color: #efebf6; }
.lv-table-wrap tbody tr:last-child td { border-bottom: 0; }

.accordion { --bs-accordion-border-color: var(--lv-line); --bs-accordion-border-radius: var(--lv-r-md); --bs-accordion-inner-border-radius: var(--lv-r-md);
  --bs-accordion-active-bg: var(--lv-lilac); --bs-accordion-active-color: var(--lv-night); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(242, 176, 53, .3); }
.accordion-button { font-weight: 600; color: var(--lv-night); }
textarea.form-control { min-height: 6rem; }

/* ---------- Page header used inside the app ---------- */
.lv-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.lv-pagehead h1 { margin: 0; }
.lv-pagehead p { margin: .35rem 0 0; color: var(--lv-muted); }

/* ---------- Home hero: the sunrise and the keepsake stack ---------- */
.lv-hero { position: relative; padding: clamp(2.5rem, 6vw, 5rem) 0 3rem; overflow: hidden; }
.lv-hero::before {
  content: ""; position: absolute; z-index: -1; right: -18vw; top: -12vw; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fde2a6 0%, #f8c76a 26%, rgba(242, 176, 53, .35) 46%, rgba(233, 227, 246, 0) 68%);
}
.lv-hero h1 { font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.1rem); line-height: 1.05; max-width: 15ch; margin-bottom: 1.2rem; }
.lv-hero .lead { font-size: 1.2rem; max-width: 46ch; color: #4f4766; }
.lv-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.lv-hero-note { margin-top: 1.1rem; font-size: .95rem; color: var(--lv-muted); display: flex; align-items: center; gap: .45rem; }

.lv-stack { position: relative; height: 420px; max-width: 460px; margin-inline: auto; }
.lv-keep { position: absolute; background: #fff; border-radius: var(--lv-r-md); box-shadow: 0 2px 4px rgba(46, 35, 71, .08), 0 24px 48px -20px rgba(46, 35, 71, .35); padding: 1.1rem 1.25rem; border: 1px solid var(--lv-line); }
.lv-keep-letter { width: 300px; left: 0; top: 40px; transform: rotate(-5deg); background: #fffdf7; }
.lv-keep-letter .lv-keep-hand { font-family: "Young Serif", serif; color: var(--lv-night); font-size: 1.05rem; line-height: 1.5; margin: .4rem 0 0; }
.lv-keep-photo { width: 220px; right: 0; top: 0; transform: rotate(4deg); padding: .7rem .7rem 1rem; }
.lv-keep-photo .lv-photo { height: 150px; border-radius: 8px; background:
  radial-gradient(circle at 70% 30%, #fde2a6 0 14%, transparent 15%),
  linear-gradient(180deg, #8b7bb8 0%, #c9a0c4 45%, #f6c47a 70%, #5f8f7a 71%, #3e6e5b 100%); }
.lv-keep-photo figcaption { font-size: .85rem; color: var(--lv-muted); margin-top: .55rem; }
.lv-keep-will { width: 280px; left: 90px; bottom: 0; transform: rotate(1.5deg); }
.lv-keep-will .lv-lines span { display: block; height: 7px; border-radius: 4px; background: var(--lv-lilac); margin-top: 8px; }
.lv-keep-will .lv-lines span:nth-child(2) { width: 85%; }
.lv-keep-will .lv-lines span:nth-child(3) { width: 60%; }
.lv-keep-label { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--lv-muted); }
.lv-seal { position: absolute; right: -14px; bottom: -14px; width: 46px; height: 46px; border-radius: 50%; background: var(--lv-sun); color: var(--lv-night);
  display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(201, 138, 18, .7); }
.lv-seal .lv-ico { width: 22px; height: 22px; stroke-width: 2.2; }

@media (prefers-reduced-motion: no-preference) {
  .lv-keep { animation: lv-settle .9s cubic-bezier(.2, .8, .2, 1) both; }
  .lv-keep-photo { animation-delay: .12s; }
  .lv-keep-will { animation-delay: .24s; }
  @keyframes lv-settle { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
}
@media (max-width: 991.98px) { .lv-stack { height: 380px; margin-top: 2rem; transform: scale(.92); } }
@media (max-width: 420px) { .lv-stack { transform: scale(.78); transform-origin: top center; height: 330px; } }

/* ---------- Home: what you can leave ---------- */
.lv-leave { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.lv-leave-item { padding: 1.5rem; border-radius: var(--lv-r-lg); background: var(--lv-paper); border: 1px solid var(--lv-line); }
.lv-leave-item h3 { font-size: 1.15rem; margin: .9rem 0 .35rem; }
.lv-leave-item p { color: var(--lv-muted); margin: 0; font-size: 1rem; }
.lv-ico-badge { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--lv-lilac); color: var(--lv-night); }
.lv-ico-badge .lv-ico { width: 24px; height: 24px; }
.lv-ico-badge.sun { background: var(--lv-sun-soft); color: var(--lv-sun-deep); }
.lv-ico-badge.sage { background: var(--lv-sage-soft); color: var(--lv-sage); }

/* ---------- Home: the release journey (a real sequence) ---------- */
.lv-journey { background: var(--lv-night); color: #ece8f6; border-radius: var(--lv-r-lg); padding: clamp(1.75rem, 4vw, 3rem); margin-top: 3.5rem; position: relative; overflow: hidden; }
.lv-journey::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -220px; height: 300px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(242, 176, 53, .55), rgba(242, 176, 53, 0) 65%); pointer-events: none; }
.lv-journey h2 { color: #fff; margin-top: 0; }
.lv-journey > p { color: #c9c0de; }
.lv-journey ol { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: j; position: relative; z-index: 1; }
.lv-journey li { counter-increment: j; padding-top: 3rem; position: relative; color: #ddd6ee; font-size: .98rem; }
.lv-journey li::before { content: counter(j); position: absolute; top: 0; left: 0; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid rgba(242, 176, 53, .7); color: var(--lv-sun); font-weight: 700; }
.lv-journey li strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .2rem; }

.lv-promise { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-top: 3.5rem; align-items: center; }
@media (min-width: 992px) { .lv-promise { grid-template-columns: 1fr 1.2fr; } }
.lv-promise ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.lv-promise li { display: flex; gap: .75rem; align-items: flex-start; }
.lv-promise li .lv-ico { color: var(--lv-sage); margin-top: .2rem; }

/* ---------- Steps list (How it works, check-in rules) ---------- */
.lv-steps { counter-reset: step; list-style: none; padding-left: 0; }
.lv-steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 1.15rem; }
.lv-steps li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--lv-sun-soft); color: var(--lv-sun-deep); display: grid; place-items: center; font-weight: 700; font-size: .95rem; border: 1px solid #f3dcaa; }

/* ---------- Auth pages ---------- */
.lv-auth { display: grid; gap: 0; grid-template-columns: 1fr; border-radius: var(--lv-r-lg); overflow: hidden; background: var(--lv-paper); border: 1px solid var(--lv-line); box-shadow: var(--lv-shadow); max-width: 1000px; margin: 1rem auto; }
@media (min-width: 900px) { .lv-auth { grid-template-columns: 1fr 1.05fr; } }
.lv-auth-aside { background: var(--lv-night); color: #ddd6ee; padding: 2.5rem; position: relative; overflow: hidden; display: none; }
@media (min-width: 900px) { .lv-auth-aside { display: flex; flex-direction: column; justify-content: space-between; } }
.lv-auth-aside::before { content: ""; position: absolute; width: 420px; height: 420px; right: -170px; bottom: -190px; border-radius: 50%;
  background: radial-gradient(circle, #fde2a6 0%, #f2b035 30%, rgba(242, 176, 53, 0) 66%); }
.lv-auth-aside h2 { color: #fff; font-size: 1.9rem; margin: 0 0 1rem; position: relative; }
.lv-auth-aside ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; position: relative; }
.lv-auth-aside li { display: flex; gap: .65rem; }
.lv-auth-aside li .lv-ico { color: var(--lv-sun); margin-top: .25rem; }
.lv-auth-aside small { position: relative; color: #b4aacd; }
.lv-auth-main { padding: clamp(1.75rem, 4vw, 2.75rem); }
.lv-auth-main h1 { font-size: 2rem; }
.lv-auth-main .lv-card { box-shadow: none; border: 0; padding: 0; }

.lv-or { display: flex; align-items: center; gap: .75rem; color: var(--lv-muted); font-size: .9rem; }
.lv-or::before, .lv-or::after { content: ""; flex: 1; border-top: 1px solid var(--lv-line); }
.lv-social { background: #fff; display: flex; align-items: center; justify-content: center; gap: .6rem; border-color: #d8d1e8; color: var(--lv-ink); }
.lv-social:hover { background: var(--lv-mist); border-color: #cfc6e3; color: var(--lv-ink); }
.lv-social-facebook { background: #1877f2; border-color: #1877f2; color: #fff; }
.lv-social-facebook:hover { background: #166fe5; border-color: #166fe5; color: #fff; }
.lv-auth-main .lv-card.mt-3 { margin-top: 1.5rem !important; }

/* ---------- Dashboard ---------- */
.lv-welcome { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; background: linear-gradient(120deg, var(--lv-night) 0%, #4a3a72 100%);
  color: #e9e4f5; border-radius: var(--lv-r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); position: relative; overflow: hidden; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .lv-welcome { grid-template-columns: 1.4fr 1fr; } }
.lv-welcome::after { content: ""; position: absolute; right: -120px; top: -140px; width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 226, 166, .9) 0%, rgba(242, 176, 53, .5) 30%, rgba(242, 176, 53, 0) 65%); pointer-events: none; }
.lv-welcome h1 { color: #fff; margin: 0 0 .35rem; }
.lv-welcome p { color: #cfc6e4; margin: 0; }
.lv-checkin { position: relative; z-index: 1; display: flex; align-items: center; gap: 1.1rem; justify-self: start; }
@media (min-width: 768px) { .lv-checkin { justify-self: end; } }
.lv-checkin-btn { width: 108px; height: 108px; border-radius: 50%; border: 0; background: var(--lv-sun); color: var(--lv-night); font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 0 0 8px rgba(242, 176, 53, .22), 0 12px 30px -10px rgba(0, 0, 0, .45); display: grid; place-items: center; line-height: 1.15; flex: none; }
.lv-checkin-btn:hover { background: #f5bf55; }
.lv-checkin-btn:active { transform: scale(.97); }
.lv-checkin-meta { color: #e9e4f5; font-size: .95rem; }
.lv-checkin-meta strong { display: block; color: #fff; font-size: 1.15rem; font-family: "Young Serif", serif; font-weight: 400; }

.lv-tiles { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lv-tile { background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; color: inherit; text-decoration: none; }
a.lv-tile:hover { border-color: #cfc6e3; box-shadow: var(--lv-shadow); color: inherit; }
.lv-tile-head { display: flex; align-items: center; justify-content: space-between; color: var(--lv-muted); font-weight: 600; font-size: .9rem; }
.lv-tile p { margin: 0; color: var(--lv-muted); font-size: .95rem; }
.lv-todo { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.lv-todo li { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .85rem; border-radius: var(--lv-r-sm); background: #faf8fd; border: 1px solid #efebf6; }
.lv-todo li .lv-ico { color: var(--lv-sun-deep); margin-top: .2rem; }

/* ---------- Plans ---------- */
.lv-plan-current { border: 2px solid var(--lv-night); }
.lv-plan-current .badge { background: var(--lv-night) !important; }

/* ---------- Misc existing components ---------- */
.lv-qr img { image-rendering: pixelated; width: 200px; height: 200px; border-radius: var(--lv-r-sm); border: 1px solid var(--lv-line); padding: 6px; background: #fff; }
.lv-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .03em; }
.lv-recovery-codes { columns: 2; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; }
.lv-will-preview { background: #fffdf7; border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); padding: clamp(1.5rem, 4vw, 3rem); font-family: "Young Serif", Georgia, serif; max-width: 52rem; box-shadow: var(--lv-shadow); }
.lv-will-preview p, .lv-will-preview li { font-family: Georgia, serif; line-height: 1.75; }
.lv-watermark { color: var(--lv-rose); font-family: "Figtree", sans-serif; font-weight: 700; font-size: .85rem; }
.lv-autosave-status { min-height: 1.2rem; }
.lv-timeline { list-style: none; padding-left: 0; border-left: 2px solid var(--lv-line); margin-left: .5rem; }
.lv-timeline li { padding: 0 0 1rem 1.1rem; position: relative; }
.lv-timeline li::before { content: ""; position: absolute; left: -.45rem; top: .4rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--lv-sun); border: 2px solid var(--lv-mist); }

/* ---------- Footer ---------- */
.lv-footer { background: var(--lv-night); color: #b9b0d1; margin-top: 4rem; }
.lv-footer a { color: #fff; text-decoration: none; }
.lv-footer a:hover { text-decoration: underline; }
.lv-footer .lv-brand { color: #fff !important; }
.lv-footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }

@media (max-width: 575.98px) {
  body { --bs-body-font-size: 1rem; }
  .lv-card { padding: 1.1rem; }
}
.lv-footer .lv-mark rect { fill: #3f3161; }
.lv-tile .lv-ico-badge { width: 38px; height: 38px; border-radius: 11px; }
.lv-tile .lv-ico-badge .lv-ico { width: 20px; height: 20px; }
.lv-social .lv-ico { width: 18px; height: 18px; }
.lv-hero-note .lv-ico { color: var(--lv-sage); }
@media (min-width: 1100px) { .lv-journey ol { grid-template-columns: repeat(5, 1fr); } }
.lv-auth-aside small { max-width: 58%; }

/* ==========================================================================
   Will lifecycle: status pills, tabs, banners, files, history, recipient page
   ========================================================================== */
.lv-pill { display: inline-block; vertical-align: .35em; font-family: "Figtree", sans-serif; font-size: .78rem; font-weight: 700; padding: .2em .75em; border-radius: 999px; background: var(--lv-lilac); color: var(--lv-night); }
.lv-pill-draft { background: #ece9f1; color: #5b5470; }
.lv-pill-final { background: var(--lv-sun); color: var(--lv-night); }
.lv-pill-sent { background: var(--lv-rose-soft); color: #8a2840; }

.lv-willhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.lv-willhead h1 { margin: 0; }
.lv-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--lv-line); margin-bottom: 1.25rem; }
.lv-tabs .nav-link { color: var(--lv-muted); font-weight: 600; padding: .6rem .9rem; border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; }
.lv-tabs .nav-link:hover { color: var(--lv-night); }
.lv-tabs .nav-link.active { color: var(--lv-night); border-bottom-color: var(--lv-sun); }

.lv-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; border-radius: var(--lv-r-md); padding: 1rem 1.25rem; margin-bottom: 1.25rem; border: 1px solid var(--lv-line); background: var(--lv-paper); }
.lv-banner > div { flex: 1 1 22rem; }
.lv-banner p { max-width: none; }
.lv-banner-draft { background: #f7f5fb; }
.lv-banner-final { background: var(--lv-sun-soft); border-color: #f3dcaa; color: #4a360b; }
.lv-banner-sent { background: var(--lv-rose-soft); border-color: #f2c9d3; color: #5a1a2a; }

.lv-rename { max-width: 34rem; }
.lv-period { max-width: 18rem; }
.lv-period input { max-width: 7rem; }

.lv-willcards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.lv-willcard { display: block; background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); padding: 1.15rem 1.25rem; color: inherit; text-decoration: none; }
.lv-willcard:hover { border-color: #cfc6e3; box-shadow: var(--lv-shadow); color: inherit; }

.lv-empty { text-align: center; padding: 2.5rem 1.5rem; border: 2px dashed var(--lv-line); border-radius: var(--lv-r-lg); color: var(--lv-muted); }
.lv-empty .lv-ico { width: 40px; height: 40px; color: var(--lv-sun-deep); margin-bottom: .5rem; }
.lv-empty p { margin-inline: auto; }

.lv-media-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.lv-media-grid-wide { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.lv-media-item { background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); overflow: hidden; }
.lv-media { margin: 0; }
.lv-media video, .lv-media img { display: block; width: 100%; background: #1d1730; }
.lv-media video { aspect-ratio: 16 / 9; }
.lv-media img { aspect-ratio: 4 / 3; object-fit: cover; }
.lv-audio-panel { display: flex; flex-direction: column; align-items: stretch; text-align: center; gap: .75rem; padding: 1.5rem 1rem 1rem; background: linear-gradient(160deg, var(--lv-night), #4a3a72); color: var(--lv-sun); }
.lv-audio-panel .lv-ico { width: 36px; height: 36px; align-self: center; }
.lv-audio-panel audio { width: 100%; }
.lv-media-doc, .lv-media-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; aspect-ratio: 16 / 9; background: #f7f5fb; color: var(--lv-night); font-weight: 700; }
.lv-media-doc .lv-ico { width: 40px; height: 40px; color: var(--lv-night-2); }
.lv-media-pending { color: var(--lv-muted); font-weight: 500; font-size: .95rem; }
.lv-media figcaption { padding: .75rem .9rem .85rem; display: grid; gap: .1rem; }
.lv-media figcaption strong { color: var(--lv-night); overflow-wrap: anywhere; }
.lv-media-edit { border-top: 1px solid var(--lv-line); padding: .5rem .9rem .8rem; font-size: .9rem; }
.lv-media-edit summary { cursor: pointer; color: var(--lv-night-2); font-weight: 600; }

.lv-history { list-style: none; padding: 0 0 0 1.25rem; margin: 0; border-left: 2px solid var(--lv-line); }
.lv-history > li { position: relative; padding: 0 0 1.25rem 1rem; }
.lv-history > li::before { content: ""; position: absolute; left: -1.55rem; top: .35rem; width: .9rem; height: .9rem; border-radius: 50%; background: var(--lv-night-2); border: 3px solid var(--lv-mist); }
.lv-history > li.is-text::before { background: var(--lv-sun); }
.lv-history > li.lv-actor-system::before { background: #b8acd6; }
.lv-history > li.lv-actor-superadmin::before { background: var(--lv-rose); }
.lv-history-head { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.lv-history ul { padding-left: 1.1rem; color: #3d3555; font-size: .95rem; }

.lv-search { max-width: 22rem; }
.lv-search-status { max-width: 11rem; }
.lv-narrow { max-width: 36rem; }

/* Recipient page */
.lv-recipient { background: var(--lv-mist); }
.lv-recipient-head { padding: 1rem 0; border-bottom: 1px solid var(--lv-line); background: rgba(255, 255, 255, .6); }
.lv-recipient-hero { position: relative; padding: 1rem 0 2rem; overflow: hidden; }
.lv-recipient-hero h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); max-width: 18ch; }
.lv-recipient-hero .lead { max-width: 52ch; }
.lv-message { background: var(--lv-paper); border-left: 4px solid var(--lv-sun); border-radius: var(--lv-r-sm); padding: 1.25rem 1.5rem; margin: 0 0 2rem; font-family: "Young Serif", Georgia, serif; color: var(--lv-night); font-size: 1.15rem; line-height: 1.6; max-width: 48rem; box-shadow: var(--lv-shadow); }
.lv-message footer { font-family: "Figtree", sans-serif; font-size: .95rem; color: var(--lv-muted); margin-top: .5rem; }
.lv-message footer::before { content: "\2014\00a0"; }

/* ---------- Recipient code page ---------- */
.lv-gate .lv-ico-badge { display: grid; }
.lv-code-input { max-width: 11rem; font-size: 1.5rem; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Will life cycle page ---------- */
.lv-lifecycle { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: stage; }
@media (min-width: 768px) { .lv-lifecycle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .lv-lifecycle { grid-template-columns: repeat(4, 1fr); } }
.lv-stage { counter-increment: stage; position: relative; background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); padding: 1.5rem 1.4rem 1.4rem; }
.lv-stage::before { content: counter(stage); position: absolute; top: 1.4rem; right: 1.4rem; font-family: "Young Serif", serif; font-size: 1.6rem; color: var(--lv-line); line-height: 1; }
.lv-stage h2 { margin: 1rem 0 .1rem; font-size: 1.45rem; }
.lv-stage-sub { color: var(--lv-muted); margin: 0 0 .9rem; }
.lv-stage ul { padding-left: 1.05rem; margin: 0; display: grid; gap: .4rem; font-size: .98rem; }
.lv-stage-final { background: var(--lv-sun-soft); border-color: #f1d9a3; }
.lv-stage-final::before { color: #ecc777; }
.lv-stage-sent { background: var(--lv-sage-soft); border-color: #c4e3d3; }
.lv-stage-sent::before { color: #a9d3bd; }
@media (min-width: 1200px) {
  .lv-stage:not(:last-child)::after { content: ""; position: absolute; right: -0.95rem; top: 2.2rem; width: .7rem; height: .7rem;
    border-top: 2px solid var(--lv-night-2); border-right: 2px solid var(--lv-night-2); transform: rotate(45deg); opacity: .5; }
}
.lv-lifecycle-more { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 2rem; }

/* ---------- Security page ---------- */
.lv-secure-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .lv-secure-grid { grid-template-columns: repeat(2, 1fr); } }
.lv-secure-item { background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); padding: 1.6rem; }
.lv-secure-item h2 { font-size: 1.4rem; margin: 1rem 0 .7rem; }
.lv-secure-item ul { padding-left: 1.05rem; margin: 0; display: grid; gap: .45rem; }
.lv-secure-item:first-child { background: var(--lv-night); color: #ddd6ee; border-color: var(--lv-night); }
.lv-secure-item:first-child h2 { color: #fff; }
.lv-secure-item:first-child .lv-ico-badge { background: rgba(255,255,255,.12); color: var(--lv-sun); }

/* ---------- Plans (pricing, billing) ---------- */
.lv-plans { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: stretch; }
.lv-plan { position: relative; display: flex; flex-direction: column; background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); padding: 1.5rem 1.35rem 1.35rem; }
.lv-plan h3 { font-family: "Young Serif", serif; font-weight: 400; font-size: 1.35rem; margin: 0 0 .6rem; }
.lv-plan-price { font-family: "Young Serif", serif; font-size: 1.9rem; color: var(--lv-night); line-height: 1.1; }
.lv-plan-term { color: var(--lv-muted); font-size: .92rem; margin: .25rem 0 1rem; }
.lv-plan ul { padding-left: 1.05rem; margin: 0 0 1.25rem; display: grid; gap: .35rem; font-size: .95rem; }
.lv-plan-cta { margin-top: auto; }
.lv-plan-badge { position: absolute; top: -.7rem; left: 1.35rem; background: var(--lv-night); color: #fff; font-size: .78rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px; }
.lv-plan-featured { border: 2px solid var(--lv-sun); background: linear-gradient(180deg, var(--lv-sun-soft) 0%, #fff 55%); box-shadow: var(--lv-shadow); }
.lv-plan-featured .lv-plan-badge { background: var(--lv-sun); color: var(--lv-night); }
.lv-plan-free { background: #faf8fd; }
.lv-narrow-form { max-width: 48rem; }
.lv-plan-price { white-space: nowrap; font-size: 1.75rem; }
.lv-plan-cur { font-family: "Figtree", sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--lv-muted); margin-right: .3rem; vertical-align: .55em; }
.lv-plan-cta .btn { white-space: nowrap; padding-inline: .75rem; }
.lv-stage-final .lv-ico-badge, .lv-stage-sent .lv-ico-badge { background: #fff; }

/* ---------- Message editor, letter and preview ---------- */
.lv-editor { border: 1px solid #d8d1e8; border-radius: var(--lv-r-md); background: #fff; overflow: hidden; }
.lv-editor:focus-within { border-color: var(--lv-night-2); box-shadow: 0 0 0 .25rem rgba(242, 176, 53, .28); }
.lv-editor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; padding: .45rem .5rem; background: #faf8fd; border-bottom: 1px solid var(--lv-line); }
.lv-editor-bar .btn { border-radius: var(--lv-r-sm); padding: .25rem .6rem; font-weight: 500; color: var(--lv-ink); background: transparent; border: 1px solid transparent; }
.lv-editor-bar .btn:hover, .lv-editor-bar .btn:focus-visible { background: var(--lv-lilac); border-color: var(--lv-line); }
.lv-editor-sep { width: 1px; align-self: stretch; background: var(--lv-line); margin: 0 .25rem; }
.lv-editor-text { border: 0; border-radius: 0; min-height: 26rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; line-height: 1.6; resize: vertical; }
.lv-editor-text:focus { box-shadow: none; }

.lv-letter { background: #fffdf7; border: 1px solid var(--lv-line); border-radius: var(--lv-r-lg); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--lv-shadow);
  font-size: 1.08rem; line-height: 1.75; max-width: 52rem; overflow-wrap: anywhere; }
.lv-letter > :last-child { margin-bottom: 0; }
.lv-letter h1, .lv-letter h2 { font-size: 1.6rem; margin-top: 1.6rem; }
.lv-letter h3, .lv-letter h4 { font-family: "Young Serif", serif; font-weight: 400; font-size: 1.25rem; margin-top: 1.4rem; }
.lv-letter > :first-child { margin-top: 0; }
.lv-letter blockquote { border-left: 3px solid var(--lv-sun); padding: .2rem 0 .2rem 1rem; color: #4f4766; font-style: italic; }
.lv-letter table { border-collapse: collapse; margin: 1rem 0; }
.lv-letter th, .lv-letter td { border: 1px solid var(--lv-line); padding: .4rem .7rem; }
.lv-letter pre { background: var(--lv-mist); padding: .8rem; border-radius: var(--lv-r-sm); white-space: pre-wrap; }

.lv-preview-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; background: var(--lv-sun-soft);
  border: 1px solid #f1d9a3; border-radius: var(--lv-r-md); padding: .8rem 1rem; margin-bottom: 1.5rem; color: #5b4310; }
.lv-preview-frame { border: 2px dashed #d8d1e8; border-radius: var(--lv-r-lg); padding: clamp(1rem, 3vw, 2rem); background: var(--lv-mist); }

.lv-newwill-input { max-width: 26rem; }
.lv-upsell { text-align: left; }
.lv-upsell .lv-ico-badge { display: grid; }
.lv-todo li { align-items: center; }
.lv-todo li .lv-ico { margin-top: 0; flex: none; }
.lv-todo .lv-todo-text { flex: 1; }
.lv-todo li .btn { flex: none; white-space: nowrap; }
@media (max-width: 575.98px) { .lv-todo li { flex-wrap: wrap; } .lv-todo li .btn { margin-left: 1.9rem; } }

/* ---------- Support conversation ---------- */
.lv-thread { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.lv-thread-msg { border: 1px solid var(--lv-line); border-radius: var(--lv-r-sm); padding: .85rem 1rem; background: #fff; max-width: 52rem; }
.lv-thread-meta { font-size: .85rem; color: var(--lv-ink-soft, #625a78); margin-bottom: .35rem; }
.lv-thread-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.lv-thread-staff { background: #f6f4fb; border-color: #ddd5ee; margin-left: auto; }
.lv-thread-note { background: #fdf6e3; border-style: dashed; border-color: #e8cf8f; }
.lv-email-error { max-width: 22rem; overflow-wrap: anywhere; }
.lv-tile-link { margin-top: auto; font-weight: 600; font-size: .9rem; color: var(--lv-night); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Form validation ----------
   ASP.NET hides the empty error summary with an inline style, which the site's Content Security Policy blocks,
   so an empty red bullet appeared on every form. Hide it here until there is a real error. */
.validation-summary-valid { display: none; }
.validation-summary-errors { display: block; color: #b4233c; background: #fdecef; border: 1px solid #f3c1cb; border-radius: var(--lv-r-sm); padding: .75rem 1rem; margin-bottom: 1rem; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.validation-summary-errors li:empty { display: none; }
.field-validation-valid { display: none; }
.field-validation-error { display: block; font-size: .875rem; margin-top: .25rem; }
.input-validation-error { border-color: #b4233c; }

/* ---------- Staff: user management and reports ---------- */
.lv-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.lv-chip { display: inline-block; padding: .35rem .85rem; border-radius: 999px; border: 1px solid var(--lv-line); background: var(--lv-paper); color: var(--lv-night); text-decoration: none; font-size: .9rem; }
.lv-chip:hover { border-color: #cfc6e3; color: var(--lv-night); }
.lv-chip.active { background: var(--lv-night); border-color: var(--lv-night); color: #fff; }
.lv-filters .form-label { margin-bottom: .2rem; color: var(--lv-muted); }
.lv-flags { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.lv-flags .badge { font-weight: 500; }
.lv-planbadge { display: inline-block; white-space: nowrap; padding: .15rem .6rem; border-radius: 999px; font-size: .85rem; font-weight: 600; border: 1px solid transparent; }
.lv-planbadge-paid { background: var(--lv-sage-soft); color: #24563f; border-color: #bfe0cf; }
.lv-planbadge-given { background: #e8f0fb; color: #23436e; border-color: #c9d9f0; }
.lv-planbadge-free { background: #f3f1f7; color: var(--lv-night); border-color: var(--lv-line); }
.lv-planbadge-paused { background: var(--lv-rose-soft); color: #7a1f37; border-color: #f2c9d3; }
.lv-planbadge-staff { background: var(--lv-sun-soft); color: #6b4a06; border-color: #f0d9a6; }
.lv-users td { vertical-align: top; }
.lv-dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
.lv-dl dt { color: var(--lv-muted); font-weight: 500; }
.lv-dl dd { margin: 0; }
.lv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.lv-card .lv-kpis { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .75rem; }
.lv-kpi { background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); padding: 1rem 1.1rem; }
.lv-kpi-label { color: var(--lv-muted); font-size: .9rem; }
.lv-kpi-value { font-size: 1.4rem; font-weight: 700; color: var(--lv-night); line-height: 1.2; margin-top: .2rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-kpi-note { color: var(--lv-muted); font-size: .85rem; margin-top: .15rem; }
.lv-kpi-alert { border-color: #f2c9d3; background: #fff8fa; }
.lv-chart { width: 100%; height: auto; display: block; }
.lv-chart text { font-size: 14px; fill: var(--lv-muted); }
.lv-chart .lv-chart-bar { fill: var(--lv-night-2); }
.lv-chart .lv-chart-bar-alt { fill: var(--lv-sun); }
.lv-chart .lv-chart-grid { stroke: var(--lv-line); stroke-width: 1; }
.lv-chart .lv-chart-value { fill: var(--lv-night); font-weight: 600; font-size: 14px; }
.lv-num { text-align: right; font-variant-numeric: tabular-nums; }
.pagination { --bs-pagination-color: var(--lv-night-2); --bs-pagination-hover-color: var(--lv-night); --bs-pagination-active-bg: var(--lv-night); --bs-pagination-active-border-color: var(--lv-night); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(46, 35, 71, .25); }

/* ---------- Home page: stakes, stories, pricing teaser, FAQ, final call to action ---------- */
.lv-stakes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: clamp(2rem, 5vw, 3.5rem) 0 1rem; }
.lv-stakes h2 { max-width: 20ch; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); line-height: 1.1; }
.lv-stakes-body { max-width: 62ch; font-size: 1.1rem; color: #4f4766; }
.lv-stakes-turn { color: #231c35; font-weight: 600; border-left: 3px solid var(--lv-sun); padding-left: 1rem; }
@media (min-width: 992px) { .lv-stakes { grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; } }

.lv-stories-section { padding-top: 1rem; }
.lv-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.lv-story { background: var(--lv-paper); border: 1px solid var(--lv-line); border-radius: var(--lv-r-md); padding: 1.5rem; display: flex; flex-direction: column; }
.lv-story p { color: #4f4766; }
.lv-story-head { display: flex; gap: .85rem; align-items: center; margin-bottom: 1rem; }
.lv-story-head h3 { margin: 0; font-size: 1.25rem; }
.lv-story-head p { margin: 0; font-size: .92rem; color: var(--lv-muted); }
.lv-story-outcome { font-family: "Young Serif", Georgia, serif; font-size: 1.12rem; color: var(--lv-night) !important; margin-top: auto; padding-top: .5rem; }
.lv-story-setup { list-style: none; padding: .9rem 0 0; margin: .75rem 0 0; border-top: 1px dashed var(--lv-line); display: flex; flex-wrap: wrap; gap: .4rem; }
.lv-story-setup li { font-size: .82rem; background: #f6f4fb; border-radius: 999px; padding: .2rem .65rem; color: var(--lv-night); }

.lv-home-pricing { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--lv-sun-soft); border: 1px solid #f0d9a6; border-radius: var(--lv-r-md); padding: 1.75rem 2rem; margin-top: 3rem; }
.lv-home-pricing > div:first-child { flex: 1 1 26rem; }
.lv-home-faq { margin-top: 3rem; }
.lv-faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.lv-faq-grid h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.lv-faq-grid p { color: #4f4766; margin: 0; }
.lv-final-cta { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1rem; margin: 3rem 0 1rem; background: var(--lv-night); color: #fff; border-radius: var(--lv-r-md); }
.lv-final-cta h2 { color: #fff; max-width: 24ch; margin: 0 auto .75rem; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); }
.lv-final-cta p { color: #e3ddef; max-width: none; }
.lv-final-cta .lv-final-note { margin-top: 1.25rem; font-size: .95rem; }
.lv-final-cta .lv-final-note a { color: #fff; }

/* Reminder days picker (Recipients & mark final, Reminders) */
.lv-reminders legend { font-size: 1rem; }
.lv-reminder-chip { border-radius: 999px; min-width: 5.5rem; }
.btn-check:disabled + .lv-reminder-chip { text-decoration: line-through; opacity: .45; }

/* Recipient page: keep a copy before the link expires */
.lv-keepcopy { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between;
    background: var(--lv-paper); border: 1px solid var(--lv-line); border-left: 4px solid var(--lv-sun, #e9b949); border-radius: 12px;
    padding: 1.1rem 1.25rem; margin: 0 0 2rem; }
.lv-keepcopy > div:first-child { flex: 1 1 22rem; }

/* ---------- Fieldset legends: Bootstrap floats legends, which squeezed the controls beside them ---------- */
fieldset > legend { float: none; font-size: 1rem; font-weight: 500; margin-bottom: .5rem; }
fieldset > legend + * { clear: none; }

/* ---------- Sending period picker (Finalize) ---------- */
.lv-period-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.lv-period-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; height: 100%;
  padding: .75rem .9rem; border: 1.5px solid #d8d1e8; border-radius: var(--lv-r-md); background: #fff; cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.lv-period-option:hover { border-color: #bfb3da; background: var(--lv-mist); }
.lv-period-num { font-family: "Young Serif", Georgia, serif; font-size: 1.6rem; line-height: 1.1; color: var(--lv-night); }
.lv-period-unit { font-weight: 600; color: var(--lv-night); }
.lv-period-date { font-size: .82rem; color: var(--lv-muted); }
.btn-check:checked + .lv-period-option { border-color: var(--lv-night); background: var(--lv-lilac); box-shadow: inset 0 0 0 1px var(--lv-night); }
.btn-check:focus-visible + .lv-period-option { outline: 3px solid var(--lv-sun); outline-offset: 2px; }
.lv-period-summary { margin: .75rem 0 0; padding: .7rem .9rem; border-radius: var(--lv-r-sm); background: var(--lv-sun-soft); font-size: .95rem; }

/* ---------- Confirmation dialog (replaces the browser's confirm box) ---------- */
.lv-dialog { border: 0; padding: 0; border-radius: var(--lv-r-lg); width: min(30rem, calc(100vw - 2rem)); box-shadow: 0 24px 60px -20px rgba(35, 28, 53, .45); color: var(--lv-ink); }
.lv-dialog::backdrop { background: rgba(35, 28, 53, .45); backdrop-filter: blur(2px); }
.lv-dialog[open] { animation: lv-dialog-in .18s ease-out; }
@keyframes lv-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lv-dialog[open] { animation: none; } }
.lv-dialog-body { padding: 1.6rem 1.6rem 1.2rem; }
.lv-dialog-icon { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; background: var(--lv-sun-soft); color: var(--lv-sun-deep); margin-bottom: .9rem; }
.lv-dialog-icon.is-danger { background: var(--lv-rose-soft); color: var(--lv-rose); }
.lv-dialog-icon svg { width: 1.5rem; height: 1.5rem; }
.lv-dialog h2 { font-family: "Young Serif", Georgia, serif; font-size: 1.35rem; margin: 0 0 .4rem; color: var(--lv-night); }
.lv-dialog p { margin: 0 0 .5rem; color: var(--lv-muted); }
.lv-dialog-points { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .55rem; }
.lv-dialog-points li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .5rem; align-items: start; font-size: .95rem; }
.lv-dialog-points .lv-pt-ico { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--lv-lilac); color: var(--lv-night); }
.lv-dialog-points .lv-pt-ico svg { width: .95rem; height: .95rem; }
.lv-dialog-points strong { color: var(--lv-ink); }
.lv-dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; padding: 1rem 1.6rem 1.4rem; background: var(--lv-mist); }
@media (max-width: 480px) { .lv-dialog-actions { flex-direction: column-reverse; } .lv-dialog-actions .btn { width: 100%; } }

/* ---------- Dashboard: schedule flow ---------- */
.lv-schedule-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lv-flow-legend { list-style: none; display: flex; gap: .9rem; padding: 0; margin: 0; color: var(--lv-muted); }
.lv-flow-legend li { display: flex; align-items: center; gap: .35rem; }
.lv-dot { width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid #cfc6e3; background: #fff; }
.lv-dot.is-done { background: var(--lv-sage); border-color: var(--lv-sage); }
.lv-dot.is-next { background: var(--lv-sun); border-color: var(--lv-sun-deep); }

.lv-flow { padding: 1rem 0 1.1rem; border-top: 1px solid var(--lv-line); }
.lv-flow:last-child { padding-bottom: 0; }
.lv-flow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-bottom: .8rem; }
.lv-flow-title { font-weight: 600; color: var(--lv-night); text-decoration: none; }
.lv-flow-title:hover { text-decoration: underline; }
.lv-flow-meta { font-size: .85rem; color: var(--lv-muted); }

.lv-flow-track, .lv-flow-reminders { list-style: none; margin: 0; padding: 0; }
.lv-flow-track { --gap: 2.1rem; display: flex; align-items: flex-start; gap: var(--gap); overflow-x: auto; padding: .25rem .25rem .5rem; }
.lv-flow-reminders { display: flex; gap: var(--gap); }
.lv-flow-node {
  position: relative; flex: 0 0 auto; width: 9.25rem; min-height: 7.4rem; display: flex; flex-direction: column; gap: .1rem;
  padding: .65rem .75rem .7rem; border: 1.5px solid var(--lv-line); border-radius: var(--lv-r-md); background: #fff;
}
/* The arrows between steps */
.lv-flow-track > li + li::before, .lv-flow-reminders > li + li::before {
  content: ""; position: absolute; left: calc(-1 * var(--gap) + .3rem); top: 3.1rem; width: calc(var(--gap) - .6rem); height: 2px; background: #cfc6e3;
}
.lv-flow-track > li + li::after, .lv-flow-reminders > li + li::after {
  content: ""; position: absolute; left: -.55rem; top: calc(3.1rem - 4px); border: 5px solid transparent; border-left: 6px solid #cfc6e3; border-right: 0;
}
.lv-flow-group { position: relative; flex: 0 0 auto; padding: .55rem; border: 1.5px dashed #e8c983; border-radius: calc(var(--lv-r-md) + 4px); background: var(--lv-sun-soft); }
.lv-flow-track > .lv-flow-group + li::before, .lv-flow-track > .lv-flow-group + li::after { top: 3.65rem; }
.lv-flow-track > .lv-flow-group + li::after { top: calc(3.65rem - 4px); }
.lv-flow-track > li.lv-flow-group::before { top: 3.65rem; }
.lv-flow-track > li.lv-flow-group::after { top: calc(3.65rem - 4px); }
.lv-flow-loop { margin: .55rem .15rem 0; font-size: .8rem; color: #7a5a12; display: flex; gap: .4rem; align-items: flex-start; max-width: 100%; }
.lv-flow-loop::before { content: "\21BA"; font-size: 1rem; line-height: 1; }
.lv-flow-loop span { flex: 1; min-width: 0; }

.lv-flow-state { align-self: flex-start; font-size: .7rem; font-weight: 600; letter-spacing: .02em; padding: .05rem .5rem; border-radius: 999px; background: var(--lv-mist); color: var(--lv-muted); margin-bottom: .3rem; }
.lv-flow-date { font-family: "Young Serif", Georgia, serif; font-size: 1.05rem; color: var(--lv-night); line-height: 1.2; }
.lv-flow-label { font-weight: 600; font-size: .9rem; line-height: 1.25; margin-top: .15rem; }
.lv-flow-sub { font-size: .78rem; color: var(--lv-muted); line-height: 1.3; overflow-wrap: anywhere; }

.lv-flow-node.is-done { background: #fbfafd; }
.lv-flow-node.is-done .lv-flow-state { background: var(--lv-sage-soft); color: var(--lv-sage); }
.lv-flow-node.is-done .lv-flow-date, .lv-flow-node.is-done .lv-flow-label { color: var(--lv-muted); }
.lv-flow-node.is-next { border-color: var(--lv-sun); box-shadow: 0 0 0 3px rgba(242, 176, 53, .22); }
.lv-flow-node.is-next .lv-flow-state { background: var(--lv-sun); color: var(--lv-night); }
.lv-flow-send { border-color: var(--lv-night); width: 10.5rem; }
.lv-flow-send .lv-flow-state { background: var(--lv-lilac); color: var(--lv-night); }
.lv-flow-send.is-next { background: var(--lv-night); }
.lv-flow-send.is-next .lv-flow-date, .lv-flow-send.is-next .lv-flow-label { color: #fff; }
.lv-flow-send.is-next .lv-flow-sub { color: #d9d2ea; }
.lv-flow-after { border-style: dashed; background: transparent; width: 11rem; }

@media (max-width: 991.98px) {
  .lv-flow-track, .lv-flow-reminders { flex-direction: column; --gap: 1.1rem; overflow: visible; }
  .lv-flow-track { padding-left: .25rem; }
  .lv-flow-node, .lv-flow-send, .lv-flow-after { width: 100%; min-height: 0; display: grid; grid-template-columns: 6.5rem 1fr; column-gap: .75rem; align-items: baseline; }
  .lv-flow-node > .lv-flow-state { grid-column: 1 / -1; justify-self: start; }
  .lv-flow-node > .lv-flow-label, .lv-flow-node > .lv-flow-sub { grid-column: 2; }
  .lv-flow-node > .lv-flow-date { grid-row: span 2; }
  .lv-flow-after > .lv-flow-label, .lv-flow-after > .lv-flow-sub { grid-column: 1 / -1; }
  .lv-flow-group { width: 100%; }
  .lv-flow-track > li + li::before, .lv-flow-reminders > li + li::before,
  .lv-flow-track > .lv-flow-group + li::before, .lv-flow-track > li.lv-flow-group::before {
    left: 1.5rem; top: calc(-1 * var(--gap) + .15rem); width: 2px; height: calc(var(--gap) - .5rem);
  }
  .lv-flow-track > li + li::after, .lv-flow-reminders > li + li::after,
  .lv-flow-track > .lv-flow-group + li::after, .lv-flow-track > li.lv-flow-group::after {
    left: calc(1.5rem - 4px); top: -.45rem; border: 5px solid transparent; border-top: 6px solid #cfc6e3; border-bottom: 0;
  }
}
.btn-danger { --bs-btn-bg: var(--lv-rose); --bs-btn-border-color: var(--lv-rose); --bs-btn-hover-bg: #a8344e; --bs-btn-hover-border-color: #a8344e; --bs-btn-active-bg: #8f2b42; --bs-btn-active-border-color: #8f2b42; }
/* Schedule flow: boxes share the card's width; scrolls sideways only with many reminders on a narrow screen. */
@media (min-width: 992px) {
  .lv-flow-track { --gap: 1.6rem; }
  .lv-flow-track > .lv-flow-node { flex: 1 1 0; width: auto; min-width: 7.6rem; }
  .lv-flow-track > .lv-flow-send { flex-grow: 1.15; }
  .lv-flow-reminders > .lv-flow-node { flex: 1 1 0; width: auto; min-width: 7.6rem; }
  .lv-flow-group { flex: 1 1 0; min-width: 0; }
  .lv-flow-group.n2 { flex-grow: 2.1; } .lv-flow-group.n3 { flex-grow: 3.2; } .lv-flow-group.n4 { flex-grow: 4.3; } .lv-flow-group.n5 { flex-grow: 5.4; } .lv-flow-group.n6 { flex-grow: 6.5; }
}

/* Schedule flow, revised: reminders stack inside their group, so the flow is always four steps wide and never overlaps,
   whatever the number of reminders. The group never shrinks below its content. */
.lv-flow-group { display: flex; flex-direction: column; gap: .45rem; }
.lv-flow-group-title { margin: 0 .15rem; font-size: .8rem; font-weight: 600; color: #7a5a12; line-height: 1.3; }
.lv-flow-track > .lv-flow-group .lv-flow-reminders { display: flex; flex-direction: column; gap: .35rem; }
.lv-flow-reminders > li::before, .lv-flow-reminders > li::after { content: none !important; }
.lv-flow-reminder {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "date state" "sub sub"; align-items: center; column-gap: .5rem;
  padding: .45rem .65rem; border: 1.5px solid #ecd9a8; border-radius: var(--lv-r-sm); background: #fff;
}
.lv-flow-reminder > .lv-flow-date { grid-area: date; font-size: .98rem; }
.lv-flow-reminder > .lv-flow-sub { grid-area: sub; }
.lv-flow-reminder > .lv-flow-state { grid-area: state; margin: 0; align-self: center; }
.lv-flow-reminder.is-done { background: #fbfafd; border-color: var(--lv-line); }
.lv-flow-reminder.is-done .lv-flow-state { background: var(--lv-sage-soft); color: var(--lv-sage); }
.lv-flow-reminder.is-done .lv-flow-date { color: var(--lv-muted); }
.lv-flow-reminder.is-next { border-color: var(--lv-sun); box-shadow: 0 0 0 3px rgba(242, 176, 53, .22); }
.lv-flow-reminder.is-next .lv-flow-state { background: var(--lv-sun); color: var(--lv-night); }
.lv-flow-reminder.is-upcoming .lv-flow-state { background: var(--lv-mist); color: var(--lv-muted); }
@media (min-width: 992px) {
  .lv-flow-track { --gap: 1.5rem; }
  .lv-flow-track > .lv-flow-node { flex: 1 1 0; min-width: 8.5rem; }
  .lv-flow-track > .lv-flow-group { flex: 1.35 1 0; min-width: 11rem; }
  .lv-flow-track > .lv-flow-send { flex-grow: 1.1; }
  /* Arrows between the four steps line up with the first row of each. */
  .lv-flow-track > li + li::before { top: 2.6rem; }
  .lv-flow-track > li + li::after { top: calc(2.6rem - 4px); }
  .lv-flow-track > .lv-flow-group + li::before, .lv-flow-track > li.lv-flow-group::before { top: 2.6rem; }
  .lv-flow-track > .lv-flow-group + li::after, .lv-flow-track > li.lv-flow-group::after { top: calc(2.6rem - 4px); }
}

/* Announcement banners (Staff → Announcements). Calm by default; "important" and "good news" variants. */
.lv-announce { display: flex; align-items: flex-start; gap: 1rem; padding: .9rem 1.1rem; margin-bottom: 1.25rem; border-radius: var(--lv-r-md);
  background: #f1eefa; border: 1px solid #d9d2ee; border-left: 4px solid #2e2347; color: #231c35; }
.lv-announce-text { flex: 1 1 auto; min-width: 0; }
.lv-announce-title { display: block; margin-bottom: .2rem; }
.lv-announce p { margin: 0 0 .35rem; max-width: 70ch; }
.lv-announce-link { font-weight: 600; }
.lv-announce .btn-close { flex: 0 0 auto; margin-top: .15rem; }
.lv-announce-important { background: var(--lv-rose-soft); border-color: #f2c9d3; border-left-color: #a3324d; color: #5a1a2a; }
.lv-announce-good { background: var(--lv-sage-soft); border-color: #c4e3d3; border-left-color: #2f7a57; color: #1f4d38; }