/* A warm invitation, with the emblem as its visual anchor. */
body.app-flow {
  --paper: #fbf7ef;
  --ink: #332d24;
  --muted: #766b5b;
  --gold: #96713a;
  --line: #bba47b40;
  --shadow: 0 8px 30px #5a43200a;
  background: radial-gradient(ellipse at 100% 0, #f1e2cb80, transparent 45%), #fbf7ef;
  color: var(--ink);
}
body.app-flow::before, body.app-flow::after, .app-flow .ambient-film { display: none; }
.app-flow h1, .app-flow h2, .app-flow h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; color: #3c392b; }
.app-flow .topbar { border-bottom: 1px solid var(--line); background: #fbf7eff2; box-shadow: none; backdrop-filter: none; }
.app-flow .brand-mark { width: 42px; height: 42px; box-shadow: 0 0 0 1px #b69b6b50; }
.app-flow .brand strong { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }
.app-flow .brand small { color: #897046; font-size: .58rem; letter-spacing: .12em; }
.app-flow main { max-width: 1440px; margin-inline: auto; }
.app-flow main > section { scroll-margin-top: 88px; }
.app-flow .hero { gap: 36px; padding-top: 44px; }
.app-flow .hero-cover { display: grid; place-items: center; min-width: 0; }
.app-flow .hero h1 em { font-family: Georgia, serif; font-weight: 400; color: #96713a; }
.app-flow .topbar nav { background: #fbf7eff5; }
.app-flow .topbar nav a.active { background: #3e5547; color: #fffaf0; }
.app-flow .guest-reminder-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.app-flow .hero::before, .app-flow .hero::after { display: none; }
.app-flow .hero-copy > .eyebrow { color: #897046; font-size: .65rem; letter-spacing: .16em; }
.app-flow h1 { font-size: clamp(2.8rem, 5vw, 5rem); line-height: 1.15; letter-spacing: -.045em; }
.app-flow .hero-line { max-width: 440px; color: var(--muted); font-size: .9rem; line-height: 1.9; }
.app-flow .home-pills, .app-flow .home-stat-grid { display: none; }
.app-flow .hero-emblem-panel { background: transparent; border: 0; box-shadow: none; padding: 0; min-width: 0; }
.app-flow .hero-emblem { width: min(72vw, 310px); height: auto; aspect-ratio: 1; border-radius: 50%; animation: none; box-shadow: 0 0 0 6px #fbf7ef, 0 0 0 7px #bba47b60, 0 12px 40px #84612615; }
.app-flow .button { min-height: 46px; border-radius: 12px; box-shadow: none; font-size: .8rem; font-weight: 600; transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.app-flow .button.primary { color: #fffaf0; background: #3e5547; border: 1px solid #3e5547; }
.app-flow .button.ghost { color: #5c503c; background: #fffdf980; border: 1px solid #d9cdb9; }
.app-flow .button:active, .app-flow .chip:active { transform: scale(.97); }
.app-flow :focus-visible { outline: 2px solid #96713a; outline-offset: 4px; }
.app-flow .quick-actions { gap: 12px; }
.app-flow .quick-actions a { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.app-flow .quick-actions a > span { display: none; }
.app-flow .quick-actions small { line-height: 1.6; }
.app-flow .countdown-panel { width: 100%; background: #f4ecdd; border: 1px solid #d8c6a5; border-radius: 20px; box-shadow: none; padding: 24px; }
.app-flow .countdown-panel .panel-label { text-align: center; color: #76623f; font: italic 1rem Georgia, serif; text-transform: none; letter-spacing: 0; }
.app-flow .countdown-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.app-flow .countdown-grid div { background: transparent; border: 0; border-right: 1px solid #bba47b55; border-radius: 0; padding: 10px 2px; }
.app-flow .countdown-grid div:last-child { border: 0; }
.app-flow .countdown-grid strong { font-weight: 400; color: #775e32; font-size: clamp(1.7rem, 5vw, 2.6rem); }
.app-flow .countdown-grid span { font-size: .55rem; letter-spacing: .1em; color: #766b5b; font-weight: 600; }
.app-flow .next-event { background: transparent; border: 0; text-align: center; font-size: .75rem; color: #766b5b; }
.app-flow .home-dashboard { grid-template-columns: 1fr; }
.app-flow .pass-banner, .app-flow .access-pass-card { background: #3e5547; border: 1px solid #72816b; border-radius: 22px 6px 22px 6px; box-shadow: none; outline: 1px solid #e7d6a845; outline-offset: -8px; }
.app-flow .pass-banner strong, .app-flow .access-pass-card h3 { color: #fff8e7; }
.app-flow .pass-banner span, .app-flow .pass-banner small, .app-flow .access-pass-card p { color: #e4e3d3; }
.app-flow .pass-seal { background: url('assets/aj-emblem.png') center / cover; border: 1px solid #dec692; box-shadow: none; }
.app-flow .access-pass-card h3 { font-size: clamp(1.5rem, 6vw, 2rem); line-height: 1.18; }
.app-flow .pass-banner::before, .app-flow .pass-banner::after { display: none; }
.app-flow .section-heading { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.app-flow .section-heading > .eyebrow { display: none; }
.app-flow .section-heading h2 { font-size: clamp(2rem, 4vw, 3rem); margin: 0; letter-spacing: -.035em; }
.app-flow .event-card, .app-flow .guest-card, .app-flow .media-card { border: 1px solid #e4dac8; background: #fffdf8; border-radius: 20px; box-shadow: 0 6px 24px #60482006; }
.app-flow .event-card { min-height: 0; gap: 14px; padding: 18px; }
.app-flow .event-card::before, .app-flow .event-card::after { display: none; }
.app-flow .event-card-top b { background: #f1eadc; color: #79643e; border-radius: 6px; font-size: .58rem; }
.app-flow .event-date { color: #79643e; font-size: .65rem; font-weight: 600; line-height: 1.6; }
.app-flow .event-visual { border-radius: 100px 100px 12px 12px; min-height: 160px; }
.app-flow .event-visual span { display: none; }
.app-flow .event-visual::after { background: url('assets/botanical-sprig.svg') center / 138px 138px no-repeat; opacity: .85; }
.app-flow .event-card h3 { font-size: 1.7rem; line-height: 1.2; }
.app-flow .event-card > p { font-size: .8rem; line-height: 1.7; }
.app-flow .event-guide-copy { display: none; }
.app-flow .event-meta { margin: 0; gap: 6px; }
.app-flow .event-meta span { font-size: .62rem; padding: 6px 9px; border: 0; background: #f4efe5; color: #655b47; }
.app-flow .event-detail-button { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: #3e5547; padding: 15px 0 2px; text-align: left; font-weight: 600; }
.app-flow .event-detail-button::after { content: '\2197'; float: right; }
.app-flow .guest-console, .app-flow .guest-list-wrap, .app-flow .portal-card, .app-flow .memory-panel, .app-flow .upload-panel, .app-flow .core-panel { background: #fffdf880; box-shadow: none; border: 1px solid #e4dac8; border-radius: 20px; backdrop-filter: none; }
.app-flow .guest-next-card { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 24px 0; box-shadow: none; }
.app-flow .guest-next-card h2 { font-size: 1.8rem; }
.app-flow .guest-next-card > p { color: var(--muted); line-height: 1.8; font-size: .8rem; }
.app-flow .guest-reminder-grid > span { background: transparent; border-radius: 0; border-right: 1px solid var(--line); }
.app-flow .dress-guide-card { background: #eff0e6; border: 0; border-radius: 12px; }
.app-flow .mini-event-card { background: #fffdf8; border: 1px solid #e4dac8; border-radius: 14px; box-shadow: none; }
.app-flow .chip { border: 1px solid #d9cdb9; background: transparent; color: #665b48; min-height: 40px; box-shadow: none; }
.app-flow .chip.active { color: #fffaf0; background: #3e5547; border-color: #3e5547; }
.app-flow input, .app-flow select, .app-flow textarea { background: #fffefa; border-color: #d9cdb9; border-radius: 10px; min-height: 44px; }
.app-flow input[type='checkbox'] { min-height: 16px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #3e5547; }
.app-flow .check-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.app-flow .check-grid label { padding: 10px; min-height: 44px; font-size: .72rem; line-height: 1.4; }
.app-flow label > span { color: #6a604f; font-weight: 600; }
.app-flow .file-drop { border: 1px dashed #99a18a; background: #f0f1e7; border-radius: 16px; }
.app-flow .media-grid { gap: 16px; }
.app-flow .empty-memory-card { grid-column: 1 / -1; border: 1px dashed #d9cdb9; background: transparent; border-radius: 16px; box-shadow: none; }
.app-flow .media-card { overflow: hidden; }
.app-flow .media-card img, .app-flow .media-card video { aspect-ratio: 4 / 5; object-fit: cover; }
.app-flow .event-detail-card { background: #fbf7ef; border: 1px solid #d9cdb9; border-radius: 24px; }
.app-flow .event-sheet:not([hidden]) .event-detail-card { animation: invitation-sheet 350ms cubic-bezier(.2,.7,.2,1) both; }
.app-flow .planner-tabs { gap: 8px; padding-bottom: 12px; }
.app-flow .planner-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.app-flow .planner-overview-grid article { min-height: 90px; padding: 16px; border-radius: 12px; background: #f4efe4; border: 0; }
.app-flow .planner-tabs { scrollbar-width: none; }
.app-flow .planner-tabs::-webkit-scrollbar { display: none; }
.app-flow .planner-panel.active { animation: invitation-page 300ms ease both; }
.app-flow .active-screen { animation: invitation-page 450ms ease both; }
.reveal-on-scroll { opacity: 0; translate: 0 18px; transition: opacity 650ms ease var(--reveal-delay, 0ms), translate 650ms cubic-bezier(.2,.7,.2,1) var(--reveal-delay, 0ms); }
.reveal-on-scroll.is-revealed { opacity: 1; translate: 0 0; }
@keyframes invitation-page { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes invitation-sheet { from { opacity: 0; transform: translateY(35px); } to { opacity: 1; transform: none; } }
.invitation-curtains { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.curtain { position: absolute; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #e9d3aa 0%, #f9edcf 7%, #d4b783 14%, #eeddb7 21%); box-shadow: inset -12px 0 40px #79623b20; }
.curtain::after { content: ''; position: absolute; inset: 18px; border: 1px solid #af8d5255; border-radius: 0 0 42% 42%; }
.curtain-left { left: 0; transform-origin: left top; animation: curtain-left-open 1700ms cubic-bezier(.65,0,.25,1) 450ms both; }
.curtain-right { right: 0; transform-origin: right top; animation: curtain-right-open 1700ms cubic-bezier(.65,0,.25,1) 450ms both; }
.curtain-seal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; animation: curtain-seal-fade 550ms ease 450ms both; }
.curtain-seal img { border-radius: 50%; box-shadow: 0 0 0 6px #fff3d750, 0 12px 40px #79623b30; }
.curtain-seal span { font: italic 1.5rem Georgia, serif; color: #6b522a; }
@keyframes curtain-left-open { to { transform: translateX(-103%) rotate(-4deg); } }
@keyframes curtain-right-open { to { transform: translateX(103%) rotate(4deg); } }
@keyframes curtain-seal-fade { to { opacity: 0; transform: scale(.92); } }
@media (hover: hover) {
  .app-flow .button:hover { transform: translateY(-2px); box-shadow: 0 6px 16px #59432312; }
  .app-flow .mini-event-card:hover { border-color: #bba47b; }
}
@media (min-width: 981px) {
  .app-flow .hero { align-items: center; }
  .app-flow .hero-copy { grid-column: 1; grid-row: 1 / span 2; }
  .app-flow .hero-cover { grid-column: 2; grid-row: 1; }
  .app-flow .hero-emblem-panel { grid-column: 2; grid-row: 2; }
  .app-flow .event-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
@media (max-width: 980px) {
  .app-flow .hero { gap: 28px; }
  .app-flow .hero-emblem-panel { justify-items: center; }
  .app-flow .hero-emblem { width: 210px; }
  .app-flow .event-rail { grid-template-columns: repeat(2, minmax(0,1fr)); overflow: visible; }
}
@media (max-width: 680px) {
  .app-flow .topbar { padding: 12px 18px; }
  .app-flow .brand { margin: 0; }
  .app-flow .brand small { display: block; font-size: .52rem; }
  .app-flow .topbar nav { left: 0; right: 0; bottom: 0; border-radius: 0; border: 0; border-top: 1px solid var(--line); background: #fbf7eff5; padding: 7px 8px max(10px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px #60482005; }
  .app-flow .topbar nav a { border-radius: 12px; color: #7c7465; min-height: 52px; font-weight: 600; }
  .app-flow .topbar nav a.active { background: #e9ecdf; color: #3e5547; }
  .app-flow .hero { padding: 30px 20px 32px; gap: 26px; }
  .app-flow #home.active-screen { display: flex; flex-direction: column; }
  .app-flow .hero-cover { order: 0; width: 100%; }
  .app-flow .hero-copy { display: contents; text-align: center; }
  .app-flow .hero-copy > .eyebrow { order: 1; margin: 0; text-align: center; }
  .app-flow .hero-copy > h1 { order: 2; margin: -10px 0 0; text-align: center; }
  .app-flow .hero-copy > .hero-line { order: 3; margin: -12px auto 0; text-align: center; }
  .app-flow .hero-emblem-panel { order: 4; }
  .app-flow .hero-actions { order: 5; margin: 0; }
  .app-flow .guest-home-panel { order: 6; width: 100%; }
  .app-flow .quick-actions { order: 7; width: 100%; }
  .app-flow .home-dashboard { order: 8; width: 100%; }
  .app-flow h1 { font-size: clamp(2.5rem, 11vw, 3.7rem); }
  .app-flow .hero-line { font-size: .8rem; margin-inline: auto; }
  .app-flow .hero-actions { justify-content: center; }
  .app-flow .hero-emblem-panel { width: 100%; gap: 28px; }
  .app-flow .hero-emblem { width: 190px; }
  .app-flow .guest-home-panel { text-align: left; }
  .app-flow .guest-home-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .app-flow .guest-home-actions .button { font-size: .66rem; padding: 10px 5px; min-width: 0; }
  .app-flow .mini-event-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-flow .section { padding: 28px 18px 44px; }
  .app-flow .event-rail { grid-template-columns: minmax(0,1fr); margin: 0; padding: 0; gap: 20px; }
  .app-flow .event-card { padding: 18px; }
  .app-flow .event-visual { min-height: 180px; }
  .app-flow .event-detail-card { max-height: 88dvh; }
  .app-flow .media-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .app-flow .media-card div { padding: 10px; }
  .app-flow .media-actions { flex-wrap: wrap; }
  .app-flow .media-actions .button { font-size: .65rem; padding: 8px; }
  .app-flow .hero-copy, .app-flow .hero-emblem-panel, .app-flow .memory-layout > *, .app-flow .portal-grid > *, .app-flow .guest-console, .app-flow .guest-list-wrap { min-width: 0; }
}
/* Scenic stationery and small, useful keepsakes. */
.app-flow { background: #faf6ef; }
.app-flow .hero-cover {
  position: relative;
  min-height: 320px;
  border-radius: 160px 160px 24px 24px;
  background: #f0e4cf url('assets/invitation-garden.jpg') center / cover;
  overflow: hidden;
  isolation: isolate;
}
.app-flow .hero-cover::after { content: ''; position: absolute; inset: 9px; border: 1px solid #fff9e8a0; border-radius: inherit; z-index: -1; }
.app-flow .hero-cover .hero-emblem { width: 150px; box-shadow: 0 0 0 5px #fff7e89c, 0 0 0 6px #b99b6280, 0 10px 30px #7653262a; }
.app-flow .hero-copy > .eyebrow { font-weight: 600; }
.app-flow .countdown-panel { padding: 18px 22px 14px; border-radius: 18px; background: #fffdf8; border: 1px solid #e8ddca; box-shadow: 0 6px 24px #785b2410; position: relative; }
.app-flow .countdown-panel::before { content: ''; position: absolute; width: 26px; height: 2px; background: #b29460; top: 0; left: calc(50% - 13px); }
.app-flow .countdown-panel .panel-label { font: italic .9rem Georgia,serif; margin: 0 0 7px; }
.app-flow .countdown-grid strong { font-size: 2rem; }
.app-flow .countdown-grid div { padding-block: 5px; }
.app-flow .next-event { margin-top: 10px; font-size: .67rem; }
.app-flow .guest-home-panel { margin-top: 0; gap: 14px; }
.widget-section-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-flow .widget-section-title h2 { font-size: 1.16rem; margin: 0; letter-spacing: -.025em; }
.widget-section-title a { font-size: .62rem; color: #6f6b50; white-space: nowrap; padding-block: 10px; }
[data-art='garden'] { --ceremony-art: url('assets/invitation-garden.jpg'); }
[data-art='day'] { --ceremony-art: url('assets/ceremony-day.jpg'); }
[data-art='night'] { --ceremony-art: url('assets/ceremony-night.jpg'); }
[data-art='mehendi'] { --ceremony-art: url('assets/ceremony-mehendi.jpg'); --ceremony-accent: #466846; --ceremony-tint: #edf1e4; }
[data-art='mayra'] { --ceremony-art: url('assets/ceremony-mayra.jpg'); --ceremony-accent: #99683c; --ceremony-tint: #f7edde; }
[data-art='sangeet'] { --ceremony-art: url('assets/ceremony-night.jpg'); --ceremony-accent: #655070; --ceremony-tint: #f0eaf3; }
[data-art='haldi'] { --ceremony-art: url('assets/ceremony-haldi.jpg'); --ceremony-accent: #927018; --ceremony-tint: #faf1d6; }
[data-art='shaadi'] { --ceremony-art: url('assets/ceremony-shaadi.jpg'); --ceremony-accent: #97474e; --ceremony-tint: #f7e9e6; }
[data-art='reception'] { --ceremony-art: url('assets/ceremony-reception.jpg'); --ceremony-accent: #435a70; --ceremony-tint: #e9eef2; }
.app-flow .event-card[data-art] .event-date, .app-flow .event-card[data-art] .event-detail-button { color: var(--ceremony-accent, #79643e); }
.app-flow .event-card[data-art] .event-meta span { background: var(--ceremony-tint, #f4efe5); color: var(--ceremony-accent, #655b47); }
.next-celebration-widget { position: relative; display: grid; grid-template-columns: 100px minmax(0,1fr) 16px; gap: 16px; padding: 10px; background: #fffdf8; color: #3c392b; border: 1px solid #e4dac8; border-radius: 20px; box-shadow: 0 5px 18px #76532608; text-align: left; cursor: pointer; min-height: 134px; }
.next-widget-art { position: relative; min-height: 112px; border-radius: 12px; background: var(--ceremony-art) center / cover; }
.next-widget-art > span { position: absolute; top: 7px; left: 7px; width: 35px; padding: 6px 2px; background: #fffaf0ef; border-radius: 8px; text-align: center; font: 1.15rem/1 Georgia,serif; color: #785e32; }
.next-widget-art small { display: block; font: .48rem/1.6 'Plus Jakarta Sans',sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.next-widget-copy { display: flex; flex-direction: column; justify-content: center; align-items: start; gap: 7px; min-width: 0; }
.next-widget-copy > small { font-size: .52rem; letter-spacing: .12em; color: #9b7a47; }
.next-widget-copy > strong { font: 1.5rem/1.15 'Playfair Display',Georgia,serif; }
.next-widget-copy > span { color: #7c7262; font-size: .65rem; line-height: 1.5; }
.next-widget-copy > b { background: #e9eddf; color: #4a624c; font-size: .54rem; padding: 4px 8px; border-radius: 5px; font-weight: 600; }
.widget-arrow { align-self: center; color: #8d794e; }
.delight-widget-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.delight-widget { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 16px; border: 1px solid #e2decd; border-radius: 18px; background: #eff0e6; color: #3f4736; text-align: left; cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease; }
.widget-kicker { display: flex; justify-content: space-between; gap: 8px; font-size: .57rem; letter-spacing: .035em; font-weight: 600; line-height: 1.5; }
.widget-kicker > span { font-size: .8rem; }
.delight-widget > strong { font: 1.06rem/1.2 'Playfair Display',Georgia,serif; margin-top: 2px; }
.delight-widget > small { font-size: .68rem; color: #69725e; margin-top: 5px; line-height: 1.5; }
.outfit-swatches { display: flex; align-items: center; height: 63px; padding-left: 5px; }
.outfit-swatches i { width: 35px; height: 35px; border-radius: 50%; border: 3px solid #eff0e6; margin-left: -5px; box-shadow: 0 2px 5px #494b3220; }
.album-widget { background: #f8eae1; border-color: #ecdcd0; color: #775545; }
.album-widget > small { color: #8b6d5a; }
.album-illustration { position: relative; display: block; height: 63px; width: 100%; }
.album-illustration i { position: absolute; top: 7px; left: 20px; width: 44px; height: 45px; border: 4px solid #fffdf8; border-bottom-width: 10px; box-shadow: 0 3px 8px #805b3820; background: url('assets/ceremony-night.jpg') center / cover; transform: rotate(-13deg); }
.album-illustration i + i { left: 48px; top: 10px; background-image: url('assets/ceremony-day.jpg'); transform: rotate(12deg); }
.little-note-widget { display: flex; align-items: center; gap: 14px; padding: 15px; border-radius: 14px; border: 1px solid #e5d7bf; background: #f4ebda; }
.little-note-widget > span:first-child { font-size: 1.5rem; color: #96713a; }
.little-note-widget > span:nth-child(2) { min-width: 0; flex: 1; }
.little-note-widget small { display: block; color: #957447; font-size: .5rem; letter-spacing: .09em; margin-bottom: 5px; }
.little-note-widget strong { display: block; font-size: .75rem; line-height: 1.5; }
.app-flow .event-visual { background: var(--ceremony-art, var(--event-bg)) center / cover; border-radius: 14px; min-height: 190px; }
.app-flow .event-visual::before, .app-flow .event-visual::after { display: none; }
.app-flow .event-detail-visual { background: var(--ceremony-art, var(--event-bg)) center / cover; min-height: 180px; border-radius: 16px; }
.app-flow .event-detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.app-flow .event-detail-grid article { background: #fffdf8; border: 1px solid #e8dfcf; border-radius: 12px; padding: 12px; }
.app-flow .event-detail-grid article strong { font-size: .82rem; line-height: 1.5; overflow-wrap: anywhere; }
.app-flow .event-detail-grid article span { font-size: .58rem; }
.app-flow .event-dress-guide { background: #edf0e5; border: 0; border-radius: 14px; box-shadow: none; }
.app-flow .section-heading { position: relative; padding: 24px; min-height: 120px; display: flex; align-items: end; border: 1px solid #e9deca; border-radius: 18px; overflow: hidden; background: linear-gradient(90deg,#fcf8f0 15%,#fcf8f0eb 55%,#fcf8f050), url('assets/invitation-garden.jpg') right 35% / cover; }
.app-flow .section-heading h2 { position: relative; font-size: 2.2rem; max-width: 95%; }
.app-flow .access-pass-card { padding-top: 46px; background: linear-gradient(120deg,#344e40f7 30%,#344e40a8), url('assets/invitation-garden.jpg') center / cover; }
.app-flow .portal-event-pass { background: #fffdf8; border-radius: 14px; border-color: #e6ddcc; }
.app-flow .pass-banner { background: linear-gradient(110deg,#344e40 12%,#344e40d9 60%,#344e4050), url('assets/invitation-garden.jpg') right center / cover; }
.app-flow .pass-banner > span { display: none; }
.app-flow .pass-banner strong { font-size: 1.6rem; }
.app-flow .pass-banner small { font-size: .7rem; }
.app-flow .empty-memory-card { padding: 100px 22px 28px; background: linear-gradient(to bottom,#fffaf000,#fffaf0 78%), url('assets/invitation-garden.jpg') center top / 100% auto no-repeat; text-align: center; min-height: 230px; }
@media (hover:hover) { .delight-widget:hover, .next-celebration-widget:hover { transform: translateY(-3px); box-shadow: 0 10px 22px #76532612; } }
@media (min-width:981px) { .app-flow .hero-cover { min-height: 350px; } .app-flow .hero-copy { align-self: start; } .app-flow .guest-home-panel { margin-top: 28px; } }
@media (max-width:680px) {
  .app-flow .hero { padding-top: 0; gap: 20px; }
  .app-flow .hero-cover { width: calc(100% + 40px); margin-inline: -20px; min-height: 230px; border-radius: 0 0 45% 45% / 0 0 22px 22px; background-position: center; }
  .app-flow .hero-cover::after { display: none; }
  .app-flow .hero-cover .hero-emblem { width: 132px; }
  .app-flow .hero-copy > .eyebrow { font-size: .55rem; }
  .app-flow .hero-copy > h1 { font-size: clamp(2.1rem,10vw,2.7rem); margin-top: -10px; }
  .app-flow .hero-copy > .hero-line { margin-top: -9px; font-size: .72rem; }
  .app-flow .hero-emblem-panel { margin-top: 2px; }
  .app-flow .countdown-panel .panel-label { font-size: .8rem; }
  .app-flow .countdown-grid strong { font-size: 1.9rem; }
  .app-flow .countdown-grid span { margin-top: 5px; font-size: .49rem; }
  .app-flow .guest-home-panel { gap: 12px; }
  .app-flow .section-heading { min-height: 106px; padding: 22px 18px; }
  .app-flow .section-heading h2 { font-size: 1.9rem; }
  .app-flow .event-card { padding: 12px; gap: 12px; }
  .app-flow .event-card-top { padding-inline: 3px; }
  .app-flow .event-card h3, .app-flow .event-card > p, .app-flow .event-meta, .app-flow .event-detail-button { margin-inline: 6px; }
  .app-flow .event-card h3 { font-size: 1.7rem; }
  .app-flow .event-visual { min-height: 185px; }
  .app-flow .home-dashboard { margin-top: 0; }
  .app-flow .pass-banner { padding: 23px; }
}
@media (max-width:360px) {
  .next-celebration-widget { grid-template-columns: 78px minmax(0,1fr) 10px; gap: 10px; }
  .next-widget-copy > strong { font-size: 1.3rem; }
  .delight-widget { padding: 12px; }
  .widget-kicker { font-size: .55rem; }
  .widget-section-title h2 { font-size: 1.05rem; }
}
/* Light floral artwork replaces the plain canvas, including between cards. */
body.app-flow {
  background-color: #faf4e9;
  background-image: url('assets/wedding-wallpaper.jpg');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;
}
.app-flow .event-card { background-color: #fffdf8f5; }
.app-flow .topbar { background-color: #fbf7eff2; }
@media (prefers-reduced-motion: reduce) {
  .app-flow *, .app-flow *::before, .app-flow *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal-on-scroll { opacity: 1; translate: none; }
  .invitation-curtains { display: none; }
}