@charset "UTF-8";

/* Atelier Amour — warm editorial redesign */
:root {
  color-scheme: light;
  --paper: #fbf8f2;
  --paper-deep: #f3ece2;
  --white: #fffefa;
  --ink: #35292b;
  --ink-soft: #69585a;
  --muted: #8e7b78;
  --line: #e9ddd2;
  --line-strong: #ddc9bb;
  --rose: #a94f67;
  --rose-deep: #82364f;
  --rose-soft: #f5e4e5;
  --rose-pale: #fbf1ef;
  --champagne: #b18a5d;
  --sage: #758675;
  --shadow: 0 28px 70px rgba(92, 61, 50, .10);
  --shadow-soft: 0 14px 34px rgba(92, 61, 50, .075);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 17px;
  font-family: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--paper); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 8% 8%, rgba(230, 190, 177, .20), transparent 30%),
    radial-gradient(ellipse at 94% 78%, rgba(210, 187, 193, .18), transparent 32%),
    linear-gradient(135deg, #fcfaf5 0%, #f8f2eb 54%, #fbf7f1 100%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 4px;
}
[hidden] { display: none !important; }

/* Paper texture and quiet botanical atmosphere */
body::before, body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}
body::before {
  width: 370px; height: 370px; top: -235px; right: -130px;
  border: 1px solid rgba(177, 138, 93, .20);
  box-shadow: 0 0 0 22px rgba(177, 138, 93, .035), 0 0 0 46px rgba(177, 138, 93, .025);
}
body::after {
  width: 290px; height: 290px; bottom: -205px; left: -110px;
  border: 1px solid rgba(169, 79, 103, .13);
  box-shadow: 0 0 0 20px rgba(169, 79, 103, .025), 0 0 0 42px rgba(169, 79, 103, .018);
}
.ambient { position: fixed; z-index: 0; width: 28rem; height: 28rem; border-radius: 50%; pointer-events: none; filter: blur(90px); opacity: .22; }
.ambient-one { top: -23rem; right: 8%; background: #e7b6b4; }
.ambient-two { bottom: -24rem; left: 12%; background: #d5c5c8; }
.grain { position: fixed; z-index: 1; inset: 0; pointer-events: none; opacity: .025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.site-shell { position: relative; z-index: 2; width: min(1160px, calc(100% - 64px)); min-height: 100vh; margin-inline: auto; display: flex; flex-direction: column; }

/* Header */
.site-header {
  min-height: 88px; display: flex; justify-content: space-between; align-items: center; gap: 22px;
  border-bottom: 1px solid rgba(153, 117, 99, .18);
}
.brand-mark { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 750; letter-spacing: -.2px; }
.brand-heart {
  display: grid; place-items: center; width: 36px; height: 36px; color: var(--rose);
  font-size: 17px; border: 1px solid #e8cfd0; border-radius: 50%;
  background: linear-gradient(145deg, #fff 0%, #f7e9e5 100%); box-shadow: 0 4px 12px rgba(125, 68, 67, .07);
}
.step-indicator { width: 176px; display: grid; gap: 9px; color: var(--muted); font-size: 10px; }
.step-track { height: 4px; overflow: hidden; border-radius: 10px; background: #eadfd5; }
.step-track span { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b98b61, #b95e72); transition: width .55s cubic-bezier(.2,.8,.2,1); }

main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 34px 0 42px; }
.page { width: 100%; min-height: min(690px, calc(100vh - 174px)); position: relative; animation: page-in .62s cubic-bezier(.2,.8,.2,1) both; }
.page[hidden] { display: none !important; }
.page.is-active { display: flex; }
@keyframes page-in { from { opacity: 0; transform: translateY(13px) scale(.994); } to { opacity: 1; transform: translateY(0) scale(1); } }

/* Shared type */
.eyebrow { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 0 0 21px; color: var(--champagne); font-size: 11px; font-weight: 700; letter-spacing: .15px; }
.eyebrow-line { display: inline-block; width: 29px; height: 1px; background: linear-gradient(90deg, transparent, var(--champagne)); }
.eyebrow .eyebrow-line:last-child { transform: rotate(180deg); }
h1, h2, h3, p { margin-top: 0; }
.soft-copy { margin: 0; color: var(--muted); font-size: 13px; line-height: 2.1; }
.centered { text-align: center; }

/* Page 1 — invitation cover */
.page-invitation { align-items: center; justify-content: center; }
.invitation-layout {
  width: min(1040px, 100%); min-height: 550px; position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(300px, .92fr) minmax(390px, 1.08fr); align-items: center;
  gap: clamp(38px, 6vw, 82px); padding: 48px clamp(34px, 5vw, 66px);
  border: 1px solid rgba(222, 203, 188, .85); border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(255,255,252,.97), rgba(255,251,246,.94));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.96);
}
.invitation-layout::before { content: ""; position: absolute; inset: 13px; border: 1px solid rgba(190, 157, 124, .18); border-radius: 23px; pointer-events: none; }
.invitation-layout::after { content: "♡"; position: absolute; left: 34px; bottom: 22px; color: rgba(169,79,103,.22); font-size: 42px; font-family: Georgia, serif; transform: rotate(-13deg); }
.portrait-wrap { position: relative; width: min(350px, 100%); aspect-ratio: .88; justify-self: center; display: grid; place-items: center; }
.portrait-frame {
  position: relative; z-index: 2; width: 82%; height: auto; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: 50%; border: 7px solid #fffdfa;
  background: linear-gradient(145deg, #f4e4dc, #eee1df);
  box-shadow: 0 0 0 1px rgba(190, 157, 124, .45), 0 24px 48px rgba(93, 65, 54, .16), 0 0 0 12px rgba(255,255,255,.45);
}
.portrait-frame::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,.66); border-radius: inherit; pointer-events: none; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(177, 138, 93, .42); }
.orbit-a { inset: 2%; transform: rotate(-17deg) scaleY(.89); border-style: dashed; animation: orbit 42s linear infinite; }
.orbit-b { inset: 9%; transform: rotate(31deg) scaleY(.88); border-color: rgba(169, 79, 103, .22); }
@keyframes orbit { to { transform: rotate(343deg) scaleY(.89); } }
.portrait-spark { position: absolute; z-index: 3; color: var(--champagne); text-shadow: 0 2px 12px rgba(177,138,93,.25); }
.spark-a { top: 10%; right: 9%; font-size: 25px; }
.spark-b { bottom: 12%; left: 7%; color: var(--rose); font-size: 28px; }
.invitation-copy { text-align: center; padding-inline: 5px; position: relative; z-index: 1; }
.invitation-copy .eyebrow { margin-bottom: 24px; font-size: 14px; letter-spacing: .25px; }
.invitation-copy h1 { margin: 0 auto 17px; max-width: 490px; color: var(--ink); font-size: clamp(31px, 3.7vw, 47px); line-height: 1.62; font-weight: 850; letter-spacing: -1.4px; }
.invitation-copy .soft-copy { color: #8c7773; font-size: 14px; }
.choice-actions { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 90px; margin-top: 33px; }

/* Buttons */
.btn {
  position: relative; min-height: 54px; padding: 0 29px; border: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  cursor: pointer; font-weight: 800; font-size: 14px; text-decoration: none;
  transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, border-color .28s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled { cursor: not-allowed; opacity: .42; filter: saturate(.65); box-shadow: none; }
.btn-primary {
  color: #fffaf6; background: linear-gradient(135deg, #b96c79 0%, #a94f67 52%, #843b55 100%);
  border: 1px solid rgba(255,255,255,.66); box-shadow: 0 12px 24px rgba(139, 59, 82, .20), inset 0 1px 0 rgba(255,255,255,.26);
}
.btn-primary:not(:disabled):hover { transform: translateY(-3px) scale(var(--yes-scale, 1)); box-shadow: 0 17px 30px rgba(139, 59, 82, .27), inset 0 1px 0 rgba(255,255,255,.3); }
.btn-quiet { color: #806d68; background: #f7f1eb; border: 1px solid #e7d8ca; box-shadow: 0 5px 12px rgba(95,67,52,.04); }
.btn-quiet:not(:disabled):hover { background: #f1e8e0; }
.btn-no {
  --no-scale: 1; --no-opacity: 1;
  z-index: 8; opacity: var(--no-opacity);
  transform: scale(var(--no-scale)); transform-origin: center;
  transition: background .2s ease, box-shadow .2s ease;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.btn-yes { --yes-scale: 1; transform: scale(var(--yes-scale)); transform-origin: center; z-index: 1; min-width: 132px; transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, border-color .28s ease, opacity .2s ease; }
.btn-yes.is-heartbeating { animation: yes-heartbeat .95s ease-in-out 2; }
@keyframes yes-heartbeat {
  0%, 100% { transform: scale(var(--yes-scale)); }
  14% { transform: scale(calc(var(--yes-scale) * 1.075)); }
  28% { transform: scale(var(--yes-scale)); }
  42% { transform: scale(calc(var(--yes-scale) * 1.055)); }
  58% { transform: scale(var(--yes-scale)); }
}
.btn-symbol { font-size: 19px; line-height: 1; }
.page-decoration { position: absolute; display: flex; align-items: center; gap: 18px; color: rgba(169,79,103,.34); }
.decoration-bottom { bottom: 3px; left: 50%; transform: translateX(-50%); font-size: 16px; }
.decoration-bottom i { display: block; width: 70px; height: 1px; background: linear-gradient(90deg, transparent, rgba(177,138,93,.42), transparent); }

/* Page 2 — delighted response */
.page-reaction { align-items: center; justify-content: center; text-align: center; }
.reaction-content {
  width: min(860px, 100%); min-height: 510px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 54px 32px; border: 1px solid rgba(222,203,188,.85); border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 28%, rgba(245,226,221,.58), transparent 42%), #fffefa;
  box-shadow: var(--shadow);
}
.reaction-content::before, .reaction-content::after { content: ""; position: absolute; width: 170px; height: 170px; border: 1px solid rgba(177,138,93,.18); border-radius: 50%; pointer-events: none; }
.reaction-content::before { top: -112px; right: -60px; box-shadow: 0 0 0 16px rgba(177,138,93,.035), 0 0 0 34px rgba(177,138,93,.025); }
.reaction-content::after { bottom: -130px; left: -70px; }
.celebration-ring { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin-bottom: 31px; border: 1px solid #e5c9c6; border-radius: 50%; color: var(--rose); font-size: 42px; background: radial-gradient(circle, #fff 0%, #f8e9e5 72%); box-shadow: 0 9px 28px rgba(141,76,76,.10), inset 0 0 0 8px rgba(255,255,255,.68); animation: ring-pulse 3s ease-in-out infinite; }
.celebration-ring i { position: absolute; inset: -10px; border: 1px dashed rgba(177,138,93,.46); border-radius: 50%; }
@keyframes ring-pulse { 50% { transform: scale(1.045); box-shadow: 0 12px 36px rgba(141,76,76,.16), inset 0 0 0 8px rgba(255,255,255,.72); } }
.reaction-line { max-width: 850px; margin: 0; font-weight: 850; text-align: center; }
.reaction-line-one { color: var(--ink); font-size: clamp(30px, 4.6vw, 52px); line-height: 1.55; animation: line-reveal .75s .08s both; }
.reaction-line-two { margin-top: 6px; color: var(--rose); font-size: clamp(22px, 3.2vw, 37px); line-height: 1.65; animation: line-reveal .75s .36s both; }
@keyframes line-reveal { from { opacity: 0; transform: translateY(18px); filter: blur(5px); } to { opacity: 1; transform: none; filter: blur(0); } }
.reaction-subcopy { margin: 15px 0 29px; }
.btn-large { min-width: 225px; min-height: 58px; border-radius: 999px; font-size: 15px; }
.btn-arrow { font-size: 19px; transition: transform .2s ease; }
.btn:hover .btn-arrow { transform: translateX(-4px); }

/* Shared section headings */
.page-schedule, .page-food { flex-direction: column; justify-content: center; align-items: center; }
.section-heading { width: min(760px, 100%); margin: 0 auto 27px; text-align: center; }
.section-heading .eyebrow { margin-bottom: 10px; }
.section-heading h2 { margin: 0 0 8px; font-size: clamp(29px, 3.35vw, 39px); line-height: 1.5; font-weight: 850; color: var(--ink); letter-spacing: -.7px; }
.section-heading .soft-copy { font-size: 13px; }

/* Page 3 — date and time selection */
.date-grid { width: min(760px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.date-option {
  position: relative; min-height: 110px; padding: 18px 21px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto;
  text-align: right; border: 1px solid #e9ddd2; border-radius: 20px;
  background: linear-gradient(145deg, #fffefa 0%, #faf5ee 100%); box-shadow: 0 7px 20px rgba(88,61,47,.045);
  cursor: pointer; transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.date-option:hover { transform: translateY(-3px); border-color: #d4b9a8; box-shadow: 0 13px 26px rgba(88,61,47,.08); }
.date-option.is-selected { border-color: var(--rose); background: linear-gradient(145deg, #fff8f5, #f6e8e5); box-shadow: 0 9px 25px rgba(139,59,82,.13), inset 0 0 0 1px rgba(169,79,103,.12); transform: translateY(-2px); }
.date-option-number { grid-column: 1; color: #a58e7d; font-size: 10px; font-weight: 700; }
.date-option-day { grid-column: 1; margin-top: 5px; color: var(--ink); font-size: 20px; font-weight: 850; }
.date-option-date { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #8f7770; font-size: 13px; font-weight: 700; letter-spacing: .5px; }
.date-option-check { position: absolute; top: 13px; left: 15px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--rose); font-size: 12px; opacity: 0; transform: scale(.7); transition: .2s ease; }
.date-option.is-selected .date-option-check { opacity: 1; transform: scale(1); }
.time-panel { width: min(760px, 100%); min-height: 94px; margin-top: 22px; padding: 19px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid #e8dcd0; border-radius: 20px; background: #f8f2eb; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.time-panel-copy { display: flex; align-items: center; gap: 14px; }
.time-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: var(--rose); background: #fffdfa; border: 1px solid #eadbd2; font-size: 25px; }
.time-panel h3 { margin: 0; color: var(--ink); font-size: 16px; font-weight: 850; }
.time-input-wrap { display: block; min-width: 160px; }
.time-input-wrap select {
  appearance: none; -webkit-appearance: none; width: 170px; min-height: 49px; padding: 0 16px;
  color: var(--ink); background: #fffefa;
  border: 1px solid #dfcdc0; border-radius: 13px; outline: none;
  direction: rtl; text-align: center; text-align-last: center;
  font-size: 16px; font-weight: 800; cursor: pointer;
  box-shadow: 0 3px 10px rgba(70,49,37,.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a94f67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 13px center;
}
.time-input-wrap select:disabled { opacity: .48; background-color: #f1ebe4; cursor: not-allowed; }
.time-input-wrap select:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(169,79,103,.10); }
.form-message { min-height: 23px; width: min(760px, 100%); margin: 10px auto 0; font-size: 12px; text-align: center; color: var(--rose); }
.form-message.is-error { color: #a6414d; }
.form-message.is-success { color: var(--sage); }
.page-actions { width: min(760px, 100%); display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.page-actions-end { justify-content: flex-end; }
.page-actions .btn { min-width: 160px; }
.btn.is-loading { pointer-events: none; opacity: .65; }

/* Page 4 — food selection */
.compact-heading { margin-bottom: 20px; }
.food-grid { width: min(790px, 100%); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.food-option { min-width: 0; position: relative; overflow: hidden; padding: 9px 9px 14px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: right; border: 1px solid #e8ddd2; border-radius: 19px; background: #fffefa; box-shadow: 0 8px 22px rgba(88,61,47,.05); cursor: pointer; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease; }
.food-option:hover { transform: translateY(-3px); border-color: #d8bcae; box-shadow: 0 14px 28px rgba(88,61,47,.09); }
.food-option.is-selected { border-color: var(--rose); background: #fff8f5; box-shadow: 0 10px 25px rgba(139,59,82,.13), inset 0 0 0 1px rgba(169,79,103,.10); }
.food-image-wrap { height: 142px; position: relative; display: block; overflow: hidden; border-radius: 13px; background: #f3e8e0; }
.food-image-wrap::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(105,67,53,.055); border-radius: inherit; pointer-events: none; }
.food-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.food-option:hover .food-image-wrap img { transform: scale(1.045); }
.food-check { position: absolute; top: 10px; left: 10px; z-index: 2; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.85); border-radius: 50%; color: white; background: var(--rose); box-shadow: 0 4px 12px rgba(80,37,48,.17); opacity: 0; transform: scale(.7); transition: .2s ease; }
.food-option.is-selected .food-check { opacity: 1; transform: scale(1); }
.food-name { padding-inline: 8px; color: var(--ink); font-size: 14px; font-weight: 850; }
.suggestion-panel { width: min(790px, 100%); margin-top: 18px; padding: 18px 20px 16px; border: 1px solid #e8dbd0; border-radius: 20px; background: #f8f2eb; box-shadow: inset 0 1px 0 rgba(255,255,255,.92); }
.suggestion-label { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; color: var(--ink); font-size: 13px; font-weight: 850; }
.suggestion-label small { width: 100%; padding-right: 31px; color: var(--muted); font-size: 11px; font-weight: 400; }
.suggestion-icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--rose); background: #fffdfa; border: 1px solid #e9d8ce; font-size: 15px; }
.suggestion-panel textarea { display: block; width: 100%; min-height: 64px; resize: vertical; padding: 13px 15px; color: var(--ink); background: #fffefa; border: 1px solid #e4d6cb; border-radius: 13px; outline: none; font-size: 12px; line-height: 1.9; }
.suggestion-panel textarea::placeholder { color: #b29e93; }
.suggestion-panel textarea:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(169,79,103,.09); }
.page-food .page-actions { margin-top: 6px; }

/* Page 5 — final note */
.page-final { align-items: center; justify-content: center; overflow: hidden; }
.final-content {
  width: min(850px, 100%); position: relative; overflow: hidden; padding: 44px clamp(24px, 5vw, 58px) 42px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid rgba(222,203,188,.88); border-radius: var(--radius-xl);
  background: radial-gradient(circle at 50% 13%, rgba(245,226,221,.65), transparent 38%), #fffefa;
  box-shadow: var(--shadow);
}
.final-content::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(190,157,124,.17); border-radius: 23px; pointer-events: none; }
.final-heart-scene { position: relative; width: 132px; height: 104px; display: grid; place-items: center; margin-bottom: 4px; }
.final-heart-main { color: var(--rose); font-size: 78px; line-height: 1; text-shadow: 0 12px 24px rgba(139,59,82,.18); animation: heart-float 3s ease-in-out infinite; }
@keyframes heart-float { 50% { transform: translateY(-5px) rotate(-3deg); } }
.final-heart-small { position: absolute; color: var(--champagne); font-family: Georgia,serif; }
.heart-one { top: 8px; right: 2px; font-size: 26px; }
.heart-two { top: -1px; left: 14px; font-size: 19px; }
.heart-three { bottom: 2px; right: 18px; font-size: 20px; }
.page-final .eyebrow { margin: 5px 0 10px; }
.page-final h2 { margin: 0 0 20px; color: var(--rose-deep); font-size: clamp(42px, 5.3vw, 60px); line-height: 1.5; font-weight: 950; letter-spacing: -.8px; }
.final-meeting { max-width: 620px; margin: 0 auto 22px; padding: 13px 22px; color: var(--rose-deep); background: #f8eeea; border: 1px solid #ead7ce; border-radius: 15px; font-size: clamp(15px, 2vw, 19px); line-height: 1.9; font-weight: 800; }
.reminder-text { max-width: 680px; margin: 0 auto 24px; color: var(--ink-soft); font-size: clamp(12px, 1.55vw, 15px); line-height: 2.15; font-weight: 600; text-align: center; white-space: pre-line; }

/* Shared footer and animation layers */
.site-footer { min-height: 48px; display: flex; justify-content: center; align-items: center; gap: 8px; color: #a18d80; font-size: 10px; }
.footer-heart { color: #b86c7c; font-size: 12px; }
.heart-rain { position: absolute; z-index: 5; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; }
.heart-rain.is-running { opacity: 1; }
.rain-heart { position: absolute; top: -35px; left: var(--heart-left, 50%); color: #bb6579; font-size: var(--heart-size, 18px); text-shadow: 0 4px 10px rgba(166,79,103,.16); animation: heart-fall var(--heart-duration, 4.5s) linear var(--heart-delay, 0ms) infinite; will-change: transform, opacity; }
@keyframes heart-fall { 0% { transform: translate3d(0,-30px,0) rotate(0deg) scale(.72); opacity: 0; } 12% { opacity: .86; } 86% { opacity: .72; } 100% { transform: translate3d(var(--heart-drift, 40px), 760px,0) rotate(var(--heart-rotate, 240deg)) scale(1.05); opacity: 0; } }
.transition-overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; background: rgba(250,245,238,.0); pointer-events: none; opacity: 0; transition: opacity .24s ease, background .24s ease; }
.transition-overlay span { color: #a94f67; font-size: 48px; transform: scale(.5); transition: transform .28s cubic-bezier(.2,.8,.2,1); text-shadow: 0 8px 22px rgba(169,79,103,.18); }
.transition-overlay.is-visible { opacity: 1; background: rgba(250,245,238,.74); backdrop-filter: blur(5px); }
.transition-overlay.is-visible span { transform: scale(1); }
.heart-burst-layer { position: fixed; z-index: 30; inset: 0; overflow: visible; pointer-events: none; }
.burst-heart { position: absolute; color: var(--rose); font-size: 17px; animation: burst .9s ease-out forwards; }
@keyframes burst { from { opacity: 1; transform: translate(0,0) scale(.5); } to { opacity: 0; transform: translate(var(--burst-x, 30px),var(--burst-y, -30px)) scale(var(--burst-scale, 1.1)) rotate(18deg); } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Tablet */
@media (max-width: 900px) {
  .site-shell { width: min(100% - 42px, 760px); }
  .invitation-layout { min-height: 500px; grid-template-columns: minmax(250px,.86fr) minmax(300px,1.14fr); gap: 28px; padding: 38px 34px; }
  .portrait-wrap { width: min(300px,100%); }
  .invitation-copy h1 { font-size: clamp(29px,4vw,39px); }
  .food-image-wrap { height: 128px; }
}

/* Mobile */
@media (max-width: 700px) {
  .site-shell { width: calc(100% - 28px); }
  .site-header { min-height: 70px; }
  .brand-mark { gap: 8px; font-size: 11px; }
  .brand-heart { width: 32px; height: 32px; }
  .step-indicator { width: 112px; gap: 7px; font-size: 9px; }
  main { padding: 22px 0 28px; align-items: flex-start; }
  .page { min-height: auto; }
  .page-invitation { align-items: flex-start; }
  .invitation-layout { min-height: 0; grid-template-columns: 1fr; gap: 17px; padding: 31px 22px 40px; border-radius: 25px; }
  .invitation-layout::before { inset: 8px; border-radius: 19px; }
  .invitation-layout::after { left: 19px; bottom: 11px; font-size: 29px; }
  .portrait-wrap { width: 210px; aspect-ratio: 1; }
  .portrait-frame { width: 78%; height: auto; aspect-ratio: 1 / 1; border-width: 5px; border-radius: 50%; }
  .spark-a { font-size: 20px; }
  .spark-b { font-size: 22px; }
  .invitation-copy { padding-inline: 0; }
  .invitation-copy .eyebrow { margin-bottom: 14px; font-size: 12px; }
  .invitation-copy h1 { font-size: clamp(27px,7.6vw,35px); line-height: 1.62; margin-bottom: 9px; }
  .invitation-copy .soft-copy { font-size: 12px; }
  .choice-actions { min-height: 74px; margin-top: 21px; gap: 12px; }
  .btn { min-height: 49px; padding-inline: 22px; font-size: 13px; }
  .btn-yes { min-width: 116px; }
  .page-decoration { display: none; }
  .reaction-content { min-height: 470px; padding: 40px 20px; border-radius: 25px; }
  .celebration-ring { width: 91px; height: 91px; margin-bottom: 25px; font-size: 35px; }
  .reaction-line-one { font-size: clamp(25px,7vw,36px); }
  .reaction-line-two { font-size: clamp(20px,5.7vw,29px); }
  .reaction-subcopy { font-size: 12px; margin-bottom: 22px; }
  .section-heading { margin-bottom: 21px; }
  .section-heading h2 { font-size: 29px; }
  .section-heading .soft-copy { font-size: 11px; }
  .date-grid { gap: 9px; }
  .date-option { min-height: 95px; padding: 14px 13px; border-radius: 16px; }
  .date-option-day { font-size: 17px; }
  .date-option-date { font-size: 11px; }
  .date-option-number { font-size: 9px; }
  .date-option-check { width: 18px; height: 18px; top: 9px; left: 9px; }
  .time-panel { padding: 14px; gap: 10px; margin-top: 15px; border-radius: 16px; }
  .time-icon { width: 38px; height: 38px; border-radius: 12px; font-size: 21px; }
  .time-panel h3 { font-size: 13px; }
  .time-input-wrap { min-width: 130px; }
  .time-input-wrap select { width: 140px; min-height: 45px; font-size: 15px; }
  .form-message { font-size: 11px; }
  .page-actions { margin-top: 5px; }
  .page-actions .btn { min-width: 138px; }
  .food-grid { gap: 10px; }
  .food-option { padding: 7px 7px 11px; gap: 9px; border-radius: 15px; }
  .food-image-wrap { height: clamp(100px, 29vw, 138px); border-radius: 10px; }
  .food-name { font-size: 12px; }
  .food-check { width: 23px; height: 23px; top: 7px; left: 7px; }
  .suggestion-panel { margin-top: 14px; padding: 14px; border-radius: 16px; }
  .suggestion-label { font-size: 12px; margin-bottom: 9px; }
  .suggestion-label small { font-size: 10px; }
  .suggestion-panel textarea { min-height: 59px; padding: 10px 12px; font-size: 11px; }
  .final-content { padding: 34px 19px 30px; border-radius: 25px; }
  .final-content::before { inset: 8px; border-radius: 18px; }
  .final-heart-scene { transform: scale(.88); margin-bottom: -3px; }
  .page-final h2 { font-size: clamp(36px, 9vw, 46px); }
  .final-meeting { font-size: 15px; padding: 11px 13px; }
  .reminder-text { font-size: 11px; }
  .site-footer { min-height: 40px; font-size: 9px; }
}

@media (max-width: 380px) {
  .site-shell { width: calc(100% - 22px); }
  .step-indicator { width: 96px; }
  .date-option-date { font-size: 10px; }
  .time-panel { align-items: flex-start; flex-direction: column; }
  .time-input-wrap { width: 100%; }
  .time-input-wrap select { width: 100%; }
  .food-image-wrap { height: 105px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  /* The user explicitly requested continuous falling hearts on the final page. */
  .rain-heart { animation-duration: var(--heart-duration, 4.5s) !important; animation-iteration-count: infinite !important; }
}

/* v9: responsive invitation actions + 3-second message in the No-button slot */
.choice-actions {
  width: min(410px, 100%);
  min-height: 82px;
  margin: 27px auto 0;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, 2.2vw, 16px);
  overflow: visible;
  isolation: isolate;
}
.no-button-wrap {
  position: relative;
  width: 88%;
  min-width: 0;
  height: 62px;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-no {
  --no-scale: 1;
  --no-opacity: 1;
  position: relative !important;
  inset: auto !important;
  z-index: 2;
  display: inline-flex;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 62px;
  min-height: 62px;
  margin: 0;
  padding: 7px 10px;
  opacity: var(--no-opacity, 1) !important;
  transform: scale(var(--no-scale, 1)) !important;
  transform-origin: center;
  transition: transform .34s cubic-bezier(.2,.8,.2,1), opacity .34s ease, background .2s ease, box-shadow .2s ease !important;
  white-space: normal;
  will-change: transform;
  touch-action: manipulation;
}
.btn-no.is-message-hidden { visibility: hidden; pointer-events: none; }
.btn-no.is-gone { visibility: hidden; pointer-events: none; }
.btn-no #no-label { display: block; max-width: 100%; overflow-wrap: anywhere; }
.btn-no:disabled { filter: none; }
.no-inline-message {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid #e5c6c4;
  border-radius: 999px;
  color: #843b55;
  background: linear-gradient(145deg, #fffaf7, #fff0ef);
  box-shadow: 0 7px 18px rgba(127,58,78,.09), inset 0 1px 0 rgba(255,255,255,.95);
  font-size: clamp(9px, 1.05vw, 12px);
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transform: translateY(5px) scale(.985);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.no-inline-message.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.btn-yes {
  --yes-scale: 1;
  width: 88%;
  min-width: 0;
  min-height: 62px;
  justify-self: center;
  padding-inline: 12px;
  transform: scale(var(--yes-scale, 1));
  transform-origin: center;
  z-index: 1;
  transition: transform .34s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, background .28s ease, border-color .28s ease !important;
}
.btn-yes.is-heartbeating { animation: yes-heartbeat .95s ease-in-out 2; }

/* Jalali calendar — compact, touch-friendly and mobile-first */
.jalali-calendar {
  width: min(560px, 100%);
  padding: 20px 22px 15px;
  border: 1px solid #e8dcd0;
  border-radius: 23px;
  background: linear-gradient(150deg, #fffefa 0%, #faf4ed 100%);
  box-shadow: 0 13px 34px rgba(88,61,47,.065), inset 0 1px 0 rgba(255,255,255,.95);
}
.calendar-toolbar { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; margin-bottom: 17px; }
.calendar-month-title { color: var(--ink); text-align: center; font-size: 19px; font-weight: 850; }
.calendar-nav {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid #ead9cf; border-radius: 13px; color: var(--rose);
  background: #fff; font-size: 27px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 12px rgba(88,61,47,.05); transition: transform .2s ease, background .2s ease;
}
.calendar-nav:active { transform: scale(.94); background: #f8e9e5; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.calendar-weekdays { margin-bottom: 8px; color: #9b8179; text-align: center; font-size: 11px; font-weight: 800; }
.calendar-weekdays span { padding: 5px 0; }
.calendar-day {
  min-width: 0; aspect-ratio: 1 / 1; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 13px; color: var(--ink);
  background: rgba(255,255,255,.74); font-size: 13px; font-weight: 750;
  cursor: pointer; transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.calendar-day:not(:disabled):active { transform: scale(.92); }
.calendar-day:disabled { color: #d2c6bd; background: transparent; cursor: default; }
.calendar-day.is-selected { color: white; border-color: var(--rose); background: linear-gradient(145deg, #bb7280, #913f59); box-shadow: 0 6px 14px rgba(139,59,82,.20); }
.calendar-day:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.calendar-selection { min-height: 22px; margin-top: 13px; color: var(--rose-deep); text-align: center; font-size: 12px; font-weight: 800; }
.time-input-wrap select {
  appearance: none; -webkit-appearance: none; width: 170px; min-height: 49px; padding: 0 16px;
  color: var(--ink); background: #fffefa; border: 1px solid #dfcdc0; border-radius: 13px;
  outline: none; direction: rtl; text-align: center; text-align-last: center; font-size: 16px; font-weight: 800;
  cursor: pointer; box-shadow: 0 3px 10px rgba(70,49,37,.04); color-scheme: light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a94f67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 13px center;
}
.time-input-wrap select:disabled { opacity: .48; background-color: #f1ebe4; cursor: not-allowed; }
.time-input-wrap select:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(169,79,103,.10); }

@media (max-width: 700px) {
  .site-shell { width: calc(100% - 24px); min-width: 0; }
  .invitation-layout { width: 100%; padding: 27px 14px 35px; gap: 17px; }
  .invitation-copy { width: 100%; min-width: 0; }
  .invitation-copy h1 { max-width: 100%; overflow-wrap: anywhere; }
  .choice-actions { width: 100%; max-width: 360px; min-height: 78px; margin-top: 19px; padding: 7px 5px; gap: 9px; }
  .no-button-wrap { width: 88%; height: 58px; justify-self: center; }
  .btn-no, .btn-yes { width: 100%; min-width: 0; height: 58px; min-height: 58px; padding-inline: 7px; font-size: clamp(11px, 3.3vw, 13px); }
  .btn-yes { width: 88%; }
  .no-inline-message { padding-inline: 6px; font-size: clamp(9px, 2.7vw, 10.5px); line-height: 1.35; }
  .jalali-calendar { padding: 15px 11px 11px; border-radius: 18px; }
  .calendar-toolbar { grid-template-columns: 38px 1fr 38px; margin-bottom: 12px; }
  .calendar-nav { width: 36px; height: 36px; border-radius: 11px; }
  .calendar-month-title { font-size: 16px; }
  .calendar-weekdays, .calendar-grid { gap: 3px; }
  .calendar-weekdays { font-size: 9px; }
  .calendar-day { border-radius: 10px; font-size: 12px; }
  .time-panel { flex-direction: row; align-items: center; }
  .time-input-wrap { min-width: 126px; }
  .time-input-wrap select { width: 132px; min-height: 46px; font-size: 15px; }
}
@media (max-width: 380px) {
  .site-shell { width: calc(100% - 20px); }
  .invitation-layout { padding-inline: 11px; }
  .portrait-wrap { width: min(190px, 61vw); }
  .choice-actions { max-width: 330px; gap: 7px; padding-inline: 3px; }
  .no-button-wrap { width: 88%; height: 55px; }
  .btn-no, .btn-yes { height: 55px; min-height: 55px; font-size: 11px; }
  .btn-yes { width: 88%; }
  .no-inline-message { font-size: 9px; }
  .jalali-calendar { padding-inline: 8px; }
  .calendar-weekdays, .calendar-grid { gap: 2px; }
  .calendar-day { font-size: 11px; }
  .time-panel { align-items: center; flex-direction: row; }
  .time-input-wrap { width: auto; }
  .time-input-wrap select { width: 122px; }
}

/* v9 responsive safety: prevent intrinsic content from widening the viewport. */
.site-shell, main, .page, .invitation-layout, .invitation-copy, .time-panel, .time-panel-copy { min-width: 0; max-width: 100%; }
img, svg, video { max-width: 100%; }
@media (max-width: 700px) {
  .site-header { gap: 8px; }
  .brand-mark { min-width: 0; }
  .brand-mark span:last-child { white-space: nowrap; }
  .step-indicator { flex: 0 0 96px; }
  .page-schedule, .page-food, .page-final { width: 100%; }
  .time-panel { width: 100%; }
  .time-panel-copy { flex: 1 1 auto; min-width: 0; }
  .time-panel h3 { white-space: nowrap; }
  .time-input-wrap { flex: 0 0 auto; min-width: 0; }
  .food-grid, .suggestion-panel { width: 100%; }
}

/* v10: full-site responsive pass (pages 1–5) */
.site-shell, .site-header, main, .page, .page > *,
.reaction-content, .jalali-calendar, .food-grid, .suggestion-panel,
.final-content, .invitation-layout, .invitation-copy {
  min-width: 0;
  max-width: 100%;
}
html, body { max-width: 100%; overflow-x: clip; }
main { width: 100%; }
.page { overflow-wrap: anywhere; }
button, select, textarea { max-width: 100%; }
.site-footer { flex-wrap: wrap; text-align: center; }
.visit-note {
  flex-basis: 100%;
  margin-top: -5px;
  color: #9b8981;
  font-size: 9px;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .site-shell { width: min(100% - 36px, 820px); }
  .invitation-layout {
    min-height: 510px;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: clamp(18px, 3vw, 30px);
    padding: 34px clamp(20px, 3.5vw, 32px);
  }
  .portrait-wrap { width: min(290px, 100%); }
  .invitation-copy h1 { font-size: clamp(28px, 4.2vw, 39px); }
  .reaction-content { width: 100%; }
  .jalali-calendar, .time-panel, .form-message, .page-actions { width: min(100%, 720px); }
  .food-grid, .suggestion-panel { width: min(100%, 760px); }
}

@media (max-width: 700px) {
  .site-shell { width: calc(100% - 24px); }
  .site-header { min-height: 66px; gap: 8px; }
  .brand-mark { gap: 7px; font-size: 10.5px; }
  .brand-heart { width: 30px; height: 30px; flex: 0 0 30px; }
  .step-indicator { width: 104px; flex: 0 0 104px; }
  main { align-items: stretch; padding: 16px 0 22px; }
  .page { min-height: 0; width: 100%; }

  /* Page 1 */
  .page-invitation { align-items: center; justify-content: flex-start; }
  .invitation-layout {
    width: 100%; min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: clamp(20px, 5vw, 28px) clamp(12px, 4vw, 19px) 30px;
    border-radius: 23px;
  }
  .invitation-layout::before { inset: 7px; border-radius: 17px; }
  .portrait-wrap { width: clamp(148px, 46vw, 198px); aspect-ratio: 1; }
  .portrait-frame { width: 80%; height: auto; aspect-ratio: 1; border-width: 5px; }
  .invitation-copy { width: 100%; padding-inline: 0; }
  .invitation-copy .eyebrow { margin-bottom: 10px; font-size: clamp(10px, 2.9vw, 12px); }
  .invitation-copy h1 { max-width: 100%; margin-bottom: 7px; font-size: clamp(25px, 7.2vw, 34px); line-height: 1.55; letter-spacing: -.6px; }
  .invitation-copy .soft-copy { font-size: 11px; }
  .choice-actions {
    width: min(100%, 400px); max-width: 100%; min-height: 70px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px; margin-top: 16px; padding: 5px 3px;
  }
  .no-button-wrap { width: 100%; height: 54px; min-width: 0; }
  .btn-no, .btn-yes { width: 100%; min-width: 0; height: 54px; min-height: 54px; padding: 6px 5px; font-size: clamp(11px, 3.2vw, 13px); }
  .btn-yes { width: 100%; }
  .no-inline-message { padding: 5px; font-size: clamp(9px, 2.7vw, 11px); line-height: 1.35; }

  /* Page 2 */
  .page-reaction { align-items: center; justify-content: center; }
  .reaction-content { width: 100%; min-height: 0; padding: clamp(28px, 7vw, 40px) clamp(14px, 4vw, 22px); border-radius: 23px; }
  .celebration-ring { width: 82px; height: 82px; margin-bottom: 20px; font-size: 32px; }
  .reaction-line-one { font-size: clamp(23px, 6.7vw, 35px); line-height: 1.65; overflow-wrap: anywhere; }
  .reaction-line-two { font-size: clamp(18px, 5vw, 27px); line-height: 1.7; overflow-wrap: anywhere; }
  .reaction-subcopy { margin: 12px 0 20px; font-size: 11px; }
  .btn-large { width: min(100%, 260px); min-width: 0; }

  /* Page 3 */
  .page-schedule { align-items: center; justify-content: flex-start; padding: 5px 0 14px; }
  .section-heading { width: 100%; margin-bottom: 13px; }
  .section-heading h2 { margin-bottom: 0; font-size: clamp(25px, 7vw, 31px); }
  .jalali-calendar { width: 100%; padding: 13px 10px 10px; border-radius: 17px; }
  .calendar-toolbar { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 7px; margin-bottom: 10px; }
  .calendar-nav { width: 34px; height: 34px; border-radius: 10px; font-size: 24px; }
  .calendar-month-title { font-size: clamp(14px, 4vw, 17px); }
  .calendar-weekdays, .calendar-grid { gap: clamp(2px, .8vw, 4px); }
  .calendar-weekdays { margin-bottom: 5px; font-size: clamp(8px, 2.45vw, 10px); }
  .calendar-weekdays span { padding: 4px 0; white-space: nowrap; }
  .calendar-day { border-radius: 9px; font-size: clamp(10px, 3vw, 12px); }
  .calendar-selection { margin-top: 9px; font-size: 11px; }
  .time-panel { width: 100%; min-height: 0; margin-top: 12px; padding: 12px; gap: 9px; border-radius: 15px; }
  .time-panel-copy { gap: 9px; flex: 1 1 auto; }
  .time-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; font-size: 19px; }
  .time-panel h3 { font-size: clamp(12px, 3.4vw, 14px); white-space: normal; }
  .time-input-wrap { flex: 0 1 145px; min-width: 0; width: auto; }
  .time-input-wrap select { width: 100%; min-height: 43px; padding-inline: 12px; font-size: 14px; }
  .form-message { width: 100%; margin-top: 7px; font-size: 10.5px; }
  .page-actions { width: 100%; margin-top: 4px; }
  .page-actions .btn { min-width: 0; width: min(100%, 190px); }

  /* Page 4 */
  .page-food { align-items: center; justify-content: flex-start; padding: 5px 0 14px; }
  .compact-heading { margin-bottom: 12px; }
  .food-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .food-option { min-width: 0; padding: 6px 6px 9px; gap: 7px; border-radius: 14px; }
  .food-image-wrap { width: 100%; height: auto; aspect-ratio: 1.38 / 1; border-radius: 9px; }
  .food-image-wrap img { object-fit: cover; }
  .food-name { padding-inline: 4px; font-size: clamp(10px, 3vw, 12px); line-height: 1.6; overflow-wrap: anywhere; }
  .food-check { width: 22px; height: 22px; top: 6px; left: 6px; }
  .suggestion-panel { width: 100%; margin-top: 11px; padding: 12px; border-radius: 15px; }
  .suggestion-label { gap: 7px; margin-bottom: 8px; font-size: 11px; }
  .suggestion-panel textarea { min-height: 58px; padding: 9px 10px; font-size: 11px; }
  .page-food .page-actions { margin-top: 4px; }

  /* Page 5 */
  .page-final { width: 100%; min-height: min(680px, calc(100svh - 120px)); align-items: center; justify-content: center; padding: 8px 0; overflow: hidden; }
  .final-content { width: 100%; padding: clamp(25px, 6vw, 34px) clamp(12px, 4vw, 20px) 25px; border-radius: 22px; }
  .final-content::before { inset: 7px; border-radius: 16px; }
  .final-heart-scene { width: 105px; height: 85px; margin-bottom: 0; transform: scale(.85); }
  .final-heart-main { font-size: 68px; }
  .page-final h2 { margin-bottom: 13px; font-size: clamp(30px, 8.5vw, 43px); line-height: 1.55; letter-spacing: -.4px; overflow-wrap: anywhere; }
  .final-meeting { width: 100%; max-width: 100%; margin-bottom: 15px; padding: 10px 9px; font-size: clamp(13px, 3.8vw, 16px); line-height: 1.9; overflow-wrap: anywhere; }
  .reminder-text { width: 100%; margin-bottom: 18px; font-size: clamp(10px, 2.9vw, 12px); line-height: 2; overflow-wrap: anywhere; }
  .btn-goodbye { min-width: 0; width: min(100%, 240px); }
  .site-footer { min-height: 40px; padding-bottom: 5px; font-size: 9px; }
  .visit-note { font-size: 8px; margin-top: -7px; }
}

@media (max-width: 380px) {
  .site-shell { width: calc(100% - 18px); }
  .step-indicator { width: 90px; flex-basis: 90px; }
  .brand-mark { font-size: 9.5px; }
  .brand-heart { width: 27px; height: 27px; flex-basis: 27px; }
  .invitation-layout { padding-inline: 10px; }
  .portrait-wrap { width: clamp(138px, 43vw, 165px); }
  .choice-actions { gap: 7px; padding-inline: 2px; }
  .no-button-wrap { height: 51px; }
  .btn-no, .btn-yes { height: 51px; min-height: 51px; font-size: 10.5px; }
  .no-inline-message { font-size: 9px; }
  .calendar-weekdays, .calendar-grid { gap: 1.5px; }
  .calendar-weekdays { font-size: 8px; }
  .calendar-day { border-radius: 7px; font-size: 10px; }
  .time-panel { align-items: stretch; }
  .time-panel-copy { min-width: 0; }
  .time-input-wrap { flex-basis: 118px; }
  .time-input-wrap select { font-size: 13px; }
  .food-grid { gap: 7px; }
  .food-image-wrap { aspect-ratio: 1.25 / 1; }
  .food-option { padding: 5px 5px 8px; }
  .food-name { font-size: 10px; }
  .final-content { padding-inline: 10px; }
}

@media (max-height: 700px) and (min-width: 701px) {
  main { padding-top: 18px; padding-bottom: 20px; }
  .page { min-height: 0; }
  .invitation-layout { min-height: 470px; }
  .reaction-content { min-height: 430px; padding-block: 36px; }
  .final-content { padding-block: 30px; }
}


/* v11 — unified responsive hardening for every page */
html, body { width: 100%; max-width: 100%; overflow-x: clip; }
body { min-height: 100vh; min-height: 100svh; }
.site-shell {
  width: min(1160px, calc(100% - 48px));
  min-height: 100vh; min-height: 100svh;
  padding-inline: max(0px, env(safe-area-inset-left)) max(0px, env(safe-area-inset-right));
}
.site-header { padding-top: env(safe-area-inset-top); }
main { width: 100%; min-width: 0; flex: 1 0 auto; }
.page, .page > *, .site-header > *, .time-panel > *, .final-content > * { min-width: 0; }
.page { width: 100%; max-width: 100%; }
.invitation-layout, .reaction-content, .jalali-calendar, .time-panel,
.food-grid, .suggestion-panel, .final-content { width: 100%; max-width: 100%; }
img, svg, video { max-width: 100%; }
button, select, textarea { max-width: 100%; }
.site-footer { flex-wrap: wrap; text-align: center; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.visit-note { flex: 0 0 100%; width: 100%; text-align: center; line-height: 1.7; overflow-wrap: anywhere; }

/* Medium screens and tablets */
@media (max-width: 1024px) {
  .site-shell { width: min(100% - 40px, 900px); }
  .invitation-layout {
    width: 100%;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: clamp(18px, 3vw, 32px);
    padding: 34px clamp(20px, 3vw, 36px);
  }
  .portrait-wrap { width: min(290px, 100%); }
  .invitation-copy h1 { font-size: clamp(28px, 4vw, 42px); }
  .reaction-content { width: min(860px, 100%); }
  .jalali-calendar, .time-panel, .form-message, .page-actions { width: min(760px, 100%); }
  .food-grid, .suggestion-panel { width: min(790px, 100%); }
  .final-content { width: min(850px, 100%); }
}

/* Tablet portrait: stack the invitation cover to avoid squeezed text and portrait. */
@media (max-width: 820px) {
  .site-shell { width: calc(100% - 32px); }
  main { align-items: stretch; padding: 22px 0 26px; }
  .page { min-height: 0; }
  .page-invitation { align-items: center; justify-content: flex-start; }
  .invitation-layout {
    width: min(680px, 100%); min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px; padding: 30px clamp(18px, 4vw, 30px) 30px;
    overflow: visible;
  }
  .portrait-wrap { width: clamp(170px, 30vw, 235px); aspect-ratio: 1; }
  .portrait-frame { width: 82%; aspect-ratio: 1; height: auto; }
  .invitation-copy { width: 100%; padding-inline: 0; }
  .invitation-copy .eyebrow { margin-bottom: 12px; font-size: clamp(11px, 1.8vw, 13px); }
  .invitation-copy h1 { max-width: 100%; font-size: clamp(28px, 4.5vw, 40px); line-height: 1.55; }
  .choice-actions {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: min(430px, 100%); min-height: 72px; margin: 20px auto 0;
    gap: 12px; padding: 5px 8px; overflow: visible;
  }
  .no-button-wrap { width: 100%; height: 58px; min-width: 0; }
  .btn-no, .btn-yes { width: 100%; min-width: 0; min-height: 54px; height: 54px; padding-inline: 8px; }
  .btn-yes { justify-self: stretch; }
  .no-inline-message { padding-inline: 6px; font-size: clamp(9px, 1.5vw, 11px); }

  .page-reaction { align-items: center; justify-content: center; }
  .reaction-content { width: min(700px, 100%); min-height: 0; padding: clamp(36px, 6vw, 56px) clamp(20px, 5vw, 42px); }
  .reaction-line-one { font-size: clamp(28px, 5vw, 43px); overflow-wrap: anywhere; }
  .reaction-line-two { font-size: clamp(22px, 3.8vw, 33px); overflow-wrap: anywhere; }

  .page-schedule, .page-food { align-items: center; justify-content: flex-start; padding: 8px 0 18px; }
  .section-heading { width: min(760px, 100%); margin-bottom: 16px; }
  .jalali-calendar, .time-panel, .form-message, .page-actions { width: min(680px, 100%); }
  .calendar-grid, .calendar-weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .calendar-day { min-width: 0; min-height: 38px; }
  .time-panel { gap: 14px; }
  .time-input-wrap { min-width: 145px; }
  .time-input-wrap select { width: 100%; }
  .food-grid, .suggestion-panel { width: min(700px, 100%); }
  .food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-option { min-width: 0; }
  .food-image-wrap { width: 100%; height: auto; aspect-ratio: 1.45 / 1; }
  .page-final { min-height: 560px; width: 100%; padding: 18px 0; }
  .final-content { width: min(760px, 100%); }
}

/* Phones */
@media (max-width: 700px) {
  .site-shell { width: calc(100% - 24px); }
  .site-header { min-height: 66px; gap: 8px; }
  .brand-mark { gap: 7px; font-size: clamp(9px, 2.7vw, 11px); min-width: 0; }
  .brand-mark span:last-child { white-space: nowrap; }
  .brand-heart { width: 29px; height: 29px; flex: 0 0 29px; }
  .step-indicator { width: clamp(88px, 26vw, 110px); flex: 0 0 clamp(88px, 26vw, 110px); gap: 7px; }
  main { padding: 15px 0 20px; }

  /* Page 1 — no overlap as the Yes button scales up. */
  .invitation-layout { gap: 14px; padding: 22px clamp(12px, 4vw, 20px) 27px; border-radius: 22px; }
  .invitation-layout::before { inset: 7px; border-radius: 16px; }
  .portrait-wrap { width: clamp(145px, 43vw, 190px); }
  .portrait-frame { border-width: 5px; }
  .invitation-copy .eyebrow { margin-bottom: 8px; font-size: clamp(9px, 2.65vw, 11px); }
  .invitation-copy h1 { margin-bottom: 7px; font-size: clamp(24px, 7vw, 32px); line-height: 1.55; letter-spacing: -.5px; }
  .invitation-copy .soft-copy { font-size: 11px; }
  .choice-actions { width: min(100%, 390px); gap: 8px; min-height: 68px; margin-top: 15px; padding: 5px 11px; }
  .no-button-wrap { height: 52px; }
  .btn-no, .btn-yes { min-height: 50px; height: 50px; padding: 5px 4px; font-size: clamp(10px, 3.1vw, 12px); }
  .no-inline-message { font-size: clamp(8px, 2.55vw, 10px); line-height: 1.35; }

  /* Page 2 */
  .reaction-content { width: 100%; padding: 30px clamp(14px, 4vw, 22px); border-radius: 21px; }
  .celebration-ring { width: 82px; height: 82px; margin-bottom: 20px; font-size: 32px; }
  .reaction-line-one { font-size: clamp(22px, 6.5vw, 34px); line-height: 1.65; }
  .reaction-line-two { font-size: clamp(17px, 5vw, 26px); line-height: 1.7; }
  .reaction-subcopy { margin: 10px 0 19px; font-size: 11px; }
  .btn-large { width: min(100%, 270px); min-width: 0; }

  /* Page 3 */
  .page-schedule { padding: 4px 0 16px; }
  .section-heading { margin-bottom: 11px; }
  .section-heading h2 { font-size: clamp(24px, 7vw, 31px); line-height: 1.5; }
  .jalali-calendar { padding: 13px 10px 10px; border-radius: 17px; }
  .calendar-toolbar { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 7px; margin-bottom: 10px; }
  .calendar-nav { width: 36px; height: 36px; }
  .calendar-month-title { font-size: clamp(14px, 4vw, 17px); }
  .calendar-weekdays, .calendar-grid { gap: clamp(1px, .65vw, 3px); }
  .calendar-weekdays { margin-bottom: 5px; font-size: clamp(8px, 2.4vw, 10px); }
  .calendar-weekdays span { padding: 4px 0; white-space: nowrap; }
  .calendar-day { min-height: 36px; border-radius: 9px; font-size: clamp(10px, 3vw, 12px); }
  .calendar-selection { margin-top: 9px; font-size: 11px; }
  .time-panel { width: 100%; margin-top: 11px; padding: 12px; gap: 11px; border-radius: 15px; flex-direction: column; align-items: stretch; }
  .time-panel-copy { gap: 9px; }
  .time-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; font-size: 19px; }
  .time-panel h3 { font-size: 13px; white-space: normal; }
  .time-input-wrap { display: block; width: 100%; min-width: 0; }
  .time-input-wrap select { width: 100%; min-height: 46px; padding-inline: 12px; font-size: 14px; }
  .form-message { width: 100%; margin-top: 7px; font-size: 10px; line-height: 1.8; }
  .page-actions { width: 100%; margin-top: 4px; }
  .page-actions .btn { width: min(100%, 220px); min-width: 0; }

  /* Page 4 */
  .page-food { padding: 4px 0 16px; }
  .compact-heading { margin-bottom: 11px; }
  .food-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .food-option { padding: 6px 6px 9px; gap: 7px; border-radius: 14px; }
  .food-image-wrap { width: 100%; height: auto; aspect-ratio: 1.32 / 1; border-radius: 9px; }
  .food-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
  .food-name { padding-inline: 3px; font-size: clamp(10px, 3vw, 12px); line-height: 1.6; overflow-wrap: anywhere; }
  .food-check { width: 22px; height: 22px; top: 6px; left: 6px; }
  .suggestion-panel { width: 100%; margin-top: 10px; padding: 12px; border-radius: 15px; }
  .suggestion-label { gap: 7px; margin-bottom: 8px; font-size: 11px; }
  .suggestion-panel textarea { min-height: 70px; padding: 9px 10px; font-size: 12px; }
  .page-food .page-actions { margin-top: 5px; }

  /* Page 5 */
  .page-final { width: 100%; min-height: max(520px, calc(100svh - 130px)); padding: 8px 0 14px; }
  .final-content { width: 100%; padding: 27px clamp(12px, 4vw, 20px) 25px; border-radius: 21px; }
  .final-content::before { inset: 7px; border-radius: 15px; }
  .final-heart-scene { width: 105px; height: 84px; margin-bottom: 0; transform: scale(.85); }
  .final-heart-main { font-size: 68px; }
  .page-final h2 { margin-bottom: 13px; font-size: clamp(29px, 8vw, 41px); line-height: 1.55; letter-spacing: -.3px; overflow-wrap: anywhere; }
  .final-meeting { width: 100%; margin-bottom: 14px; padding: 10px 9px; font-size: clamp(13px, 3.7vw, 16px); line-height: 1.9; overflow-wrap: anywhere; }
  .reminder-text { width: 100%; margin-bottom: 17px; font-size: clamp(10px, 2.9vw, 12px); line-height: 2; overflow-wrap: anywhere; }
  .btn-goodbye { width: min(100%, 240px); min-width: 0; }
  .site-footer { min-height: 42px; padding-top: 8px; font-size: 9px; }
  .visit-note { margin-top: 0; font-size: 8px; }
}

@media (max-width: 380px) {
  .site-shell { width: calc(100% - 18px); }
  .brand-mark { font-size: 9px; }
  .step-indicator { flex-basis: 84px; width: 84px; font-size: 9px; }
  .invitation-layout { padding-inline: 9px; }
  .portrait-wrap { width: clamp(136px, 42vw, 158px); }
  .choice-actions { gap: 6px; padding-inline: 9px; }
  .btn-no, .btn-yes { font-size: 10px; }
  .calendar-toolbar { grid-template-columns: 32px minmax(0,1fr) 32px; gap: 5px; }
  .calendar-nav { width: 32px; height: 32px; }
  .calendar-weekdays, .calendar-grid { gap: 1px; }
  .calendar-weekdays { font-size: 7.5px; }
  .calendar-day { min-height: 34px; font-size: 10px; }
  .food-grid { gap: 7px; }
  .food-option { padding: 5px 5px 8px; }
  .food-name { font-size: 10px; }
  .final-content { padding-inline: 9px; }
}

@media (max-height: 680px) and (max-width: 820px) {
  main { align-items: flex-start; }
  .page-invitation, .page-reaction, .page-schedule, .page-food, .page-final { justify-content: flex-start; }
  .page-final { min-height: 520px; }
}