:root {
  --ink:#123946;--deep:#083740;--teal:#16a5ac;--teal-dark:#07858e;--cream:#faf7f1;
  --coral:#f28b78;--gold:#f5c66f;--mint:#e1f3ed;--muted:#657b80;--border:#e5e9e5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--ink);background:var(--cream);font-synthesis:none
}
* { box-sizing:border-box }
body { margin:0; min-width:320px; background:radial-gradient(circle at 90% 8%,#fff7e8 0,transparent 25%),var(--cream);line-height:1.5 }
button,input,textarea { font:inherit }
button { cursor:pointer }
button:disabled { opacity:.45;cursor:not-allowed }
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #e29a64; outline-offset:3px }
[hidden] { display:none!important }
.app-shell { max-width:1180px; margin:auto; padding:0 26px }
.topbar { min-height:94px;display:flex;justify-content:space-between;align-items:center;gap:14px;border-bottom:1px solid #e8e8e1 }
.wordmark { text-decoration:none;display:flex;align-items:center;gap:11px;color:#063f46;font-size:25px;font-weight:800;letter-spacing:-1.2px;line-height:1 }
.wordmark em { display:block;font-family:Georgia,serif;font-size:25px;letter-spacing:-.8px;font-style:normal }
.mark { background:#d9f0ed;color:#00949b;border-radius:15px;display:grid;place-items:center;width:44px;height:44px;font-size:28px;transform:rotate(-8deg) }
.demo-tag { font-size:12px;font-weight:700;letter-spacing:.05em;color:#647879;background:#f0f3ef;padding:8px 13px;border-radius:100px }
.eyebrow { font-size:11px;font-weight:800;letter-spacing:.18em;color:var(--teal-dark);margin:0 0 12px }
h1,h2,h3,p { margin-top:0 }
h1,h2 { font-family:Georgia,"Times New Roman",serif;color:var(--deep);letter-spacing:-.04em }
h1 { line-height:1.08;font-size:clamp(42px,5vw,69px) }
h2 { font-size:clamp(27px,3vw,39px);line-height:1.16 }
h3 {font-size:17px}
.button { border:0;border-radius:15px;min-height:49px;padding:12px 22px;font-weight:750;display:inline-flex;align-items:center;justify-content:center;gap:12px;transition:transform .15s,background .15s }
.button:not(:disabled):hover { transform:translateY(-2px) }
.button-primary { background:var(--teal);color:white;box-shadow:0 5px 0 #0d8188 }
.button-primary:hover:not(:disabled) { background:var(--teal-dark) }
.button-large { min-height:61px;padding:15px 32px;border-radius:30px;font-size:17px }
.button-outline { border:1px solid #cadbd8;color:var(--deep);background:white }
.button-small { background:white;border:1px solid #b8dfdc;color:var(--teal-dark);border-radius:13px;min-height:41px;font-size:13px }
.button-wide { width:100% }
.micro {font-size:12px;color:#7a8686;margin:12px 0 0}
.center { text-align:center }
.home-screen {display:grid;grid-template-columns:1.02fr .98fr;column-gap:40px}
.hero-copy {padding:81px 0 85px;align-self:center}
.hero-copy h1 span:first-child {color:#079da6}
.hero-copy h1 span:last-child {color:var(--coral);font-size:.6em;white-space:nowrap}
.hero-lead { max-width:430px;color:#536e73;font-size:19px;line-height:1.65;margin-bottom:30px }
.hero-art { min-height:510px;position:relative;display:flex;align-items:center;justify-content:center;overflow:visible }
.hero-art:before {content:"";width:85%;height:75%;background:#d8f0ed;border-radius:47% 53% 55% 45%;position:absolute;transform:rotate(-10deg) }
.hero-postcard {z-index:1;display:grid;grid-template-columns:69% 31%;width:min(460px,90%);aspect-ratio:1.42;background:white;padding:13px;box-shadow:0 20px 45px #37656d3f;transform:rotate(-8deg);border-radius:5px}
.hero-postcard img { width:100%;height:100%;object-fit:cover;min-width:0 }
.hero-note { display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font:italic clamp(16px,2.2vw,27px)/1.1 Georgia,serif;color:var(--ink) }
.hero-note span {font-size:32px;color:var(--coral)}
.hero-sun {position:absolute;color:#edb951;font-size:86px;right:2%;top:8%}
.hero-heart {position:absolute;color:var(--coral);font-size:63px;left:5%;bottom:10%;transform:rotate(22deg)}
.art-caption {position:absolute;bottom:30px;right:8%;font:italic 20px Georgia,serif;color:#168990;transform:rotate(-6deg)}
.occasions {grid-column:1/-1;padding:12px 0 77px}
.section-line {display:flex;align-items:end;justify-content:space-between;gap:20px}
.section-line p:last-child {color:#71878a;font-size:14px}
.section-line h2 {margin-bottom:19px}
.occasion-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:18px }
.occasion-card { min-height:165px;border:1px solid var(--border);border-radius:22px;background:#fffefa;padding:18px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--ink);transition:transform .15s,border .15s;box-shadow:0 8px 26px #2f5b5310 }
.occasion-card:nth-child(1){background:#e5f4f4}.occasion-card:nth-child(2){background:#fff0e9}.occasion-card:nth-child(3){background:#f4eae5}.occasion-card:nth-child(4){background:#fbf1d5}
.occasion-card:hover {transform:translateY(-4px);border-color:var(--teal)}
.occasion-emoji {font-size:40px;line-height:1.6}
.occasion-card strong {font-size:16px}
.occasion-card small {color:#6a7a7c;font-size:12px}
.footer {border-top:1px solid #e5e8e4;display:flex;align-items:center;gap:8px;color:#718386;font-size:12px;padding:27px 0 34px}
.footer span:first-child{color:var(--coral)}.footer-demo {margin-left:auto}
.editor-screen {padding:30px 0 75px}
.editor-intro {text-align:center}
.text-button {border:0;background:none;color:var(--teal-dark);font-weight:750;padding:5px 0}
.editor-intro h1 {font-size:40px;margin:13px 0 4px}
.editor-intro p {color:var(--muted)}
.steps {max-width:610px;margin:27px auto 35px;list-style:none;display:flex;justify-content:space-between;padding:0;position:relative}
.steps:before {content:"";height:2px;background:#d4e3e0;left:10%;right:10%;position:absolute;top:19px}
.steps li {z-index:1;display:flex;flex-direction:column;align-items:center;gap:5px;width:25%;color:#839393;font-weight:650}
.steps li span {display:grid;place-items:center;background:#e6eeec;width:39px;height:39px;border-radius:50%;border:2px solid var(--cream)}
.steps li small {font-size:12px}
.steps li.current span {background:var(--teal);color:white}
.steps li.current {color:var(--teal-dark)}
.steps li.done span {background:#d7f1eb;color:var(--teal-dark)}
.editor-grid {display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.92fr);align-items:start;gap:32px}
.editor-work,.preview-column {background:#fff;border:1px solid var(--border);border-radius:23px;padding:30px;box-shadow:0 15px 40px #3b665510}
.editor-work { min-height:595px }
.editor-work h2 {margin-bottom:10px}
.step-help {font-size:15px;color:var(--muted);line-height:1.65;max-width:510px;margin-bottom:23px}
.upload-zone {border:2px dashed #9bd8d3;background:#f5fbf9;border-radius:17px;padding:20px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;cursor:pointer}
.upload-zone:hover {background:#ebf8f4}
.upload-icon {font-size:34px;color:var(--teal)}
.upload-zone small {font-size:12px;color:var(--muted)}
.sr-only-file {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mini-title {font-size:14px;font-weight:800;margin:22px 0 12px}
.sample-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sample-option {background:white;border:2px solid transparent;border-radius:12px;padding:4px;color:#637879;font-size:12px;display:flex;flex-direction:column;gap:4px}
.sample-option[aria-pressed="true"] {border-color:var(--teal);color:var(--deep);font-weight:700}
.sample-option img {width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:7px}
.design-options,.review-controls {display:flex;gap:8px;flex-wrap:wrap}
.design-options button,.review-controls button {padding:10px 17px;background:#f5f6f3;border:1px solid #e1e7e4;border-radius:100px;color:#5b7174;font-size:13px;font-weight:750}
.design-options button[aria-pressed="true"],.review-controls button[aria-pressed="true"] {border-color:var(--teal);background:#dbf2ef;color:#067d87}
.field-label {font-size:13px;font-weight:800;display:block;margin:0 0 8px}
textarea,input:not([type="file"]):not([type="checkbox"]) {width:100%;background:#fff;border:1px solid #d7e0db;border-radius:13px;padding:13px 15px;color:var(--ink)}
textarea {resize:vertical;min-height:175px;line-height:1.6}
#recipientForm .field-label {margin-top:14px}
#recipientForm .field-label:first-child {margin-top:0}
.two-fields {display:grid;grid-template-columns:1fr 1fr;gap:13px}
.field-meta {display:flex;justify-content:space-between;color:#7b8c8d;font-size:12px;margin-top:6px}
.idea-panel {display:flex;align-items:center;gap:12px;background:#edf8f6;border-radius:18px;margin-top:25px;padding:15px}
.idea-panel>span {font-size:25px}
.idea-panel strong {font-size:13px}.idea-panel p {font-size:12px;color:#657b80;margin:2px 0 0}
.idea-panel button {margin-left:auto;white-space:nowrap}
.sample-fill {margin:0 0 14px}
.error-message {min-height:1.3em;margin:13px 0;color:#ad3d3b;font-size:13px;font-weight:650}
.editor-nav {display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--border);padding-top:22px}
.preview-head {display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.preview-head .eyebrow {margin:0}.preview-head span {font-size:11px;color:#899597}
.postcard-front {width:100%;aspect-ratio:1.54;display:grid;grid-template-columns:minmax(0,72fr) minmax(0,28fr);padding:10px;overflow:hidden;background:#fff;box-shadow:0 8px 20px #44666b1c;border:1px solid #e5e9e5;border-radius:6px}
.postcard-photo {overflow:hidden;min-height:0}
.postcard-photo img {width:100%;height:100%;object-fit:cover;display:block}
.postcard-scribble {display:flex;align-items:center;justify-content:center;text-align:center;padding:6px;font:italic clamp(12px,1.8vw,21px)/1.15 Georgia,serif;overflow-wrap:anywhere;color:#164550}
.design-soft {background:#eaf2ec;grid-template-columns:minmax(0,78fr) minmax(0,22fr);border:8px solid #f7f8ee}
.design-playful {background:#ffe4d2;grid-template-columns:minmax(0,67fr) minmax(0,33fr);border:8px solid #f9c3ab}
.design-playful .postcard-scribble {color:#bb5b57}
.postcard-back {aspect-ratio:1.54;display:grid;grid-template-columns:55% 45%;background:#fffdf7;margin-top:17px;border:1px solid #e6e2d9;border-radius:6px;padding:23px 17px;box-shadow:0 8px 20px #44666b14;overflow:hidden;color:#385364}
.back-message {font:italic clamp(12px,1.65vw,17px)/1.4 Georgia,serif;padding-right:12px;white-space:pre-wrap;overflow-wrap:anywhere;overflow:hidden}
.back-address {border-left:1px solid #c9cfca;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;padding-left:13px;gap:6px}
.stamp {align-self:flex-end;border:1px dashed #dfa971;border-radius:2px;background:#ffe7bb;width:37px;height:42px;display:grid;place-items:center;font-size:21px;color:#13979c}
.address-lines {white-space:pre-line;overflow-wrap:anywhere;font-size:clamp(9px,1.2vw,13px);line-height:1.65}
.review-card {margin:17px 0}.review-card .postcard-back {margin:0}
.review-controls {justify-content:center}
.review-summary {margin:23px 0 17px;display:flex;align-items:center;justify-content:space-between;background:#eaf5f4;padding:15px;border-radius:12px;font-size:13px}
.review-summary strong {font-size:23px;color:#0b6f77}
.confirm-row {display:flex;align-items:flex-start;gap:10px;font-size:13px;color:#577176;margin-bottom:19px}
.confirm-row input {width:18px;height:18px;flex-shrink:0;accent-color:var(--teal)}
.success-screen {max-width:570px;margin:85px auto 110px;text-align:center}
.success-art {font-size:80px;line-height:1.6}
.success-screen h1 {font-size:clamp(40px,5vw,55px)}
.success-screen h1 span {color:var(--teal)}
.success-screen>p:not(.eyebrow) {font-size:17px;color:#61787b}
.fake-receipt {display:flex;flex-direction:column;gap:9px;background:white;border:1px dashed #b6d5cf;padding:24px;margin:28px 0;border-radius:18px;color:#687f82}
.fake-receipt strong {color:#24535a;font-size:12px}
@media (max-width:800px) {
  .home-screen {grid-template-columns:1fr}
  .hero-copy {padding:50px 0 10px;text-align:center}
  .hero-lead {margin-left:auto;margin-right:auto}
  .hero-art {min-height:390px}
  .occasions {padding-bottom:45px}
  .editor-grid {grid-template-columns:1fr}
  .preview-column {grid-row:1}
  .preview-column .postcard-back {display:none}
  .preview-column .postcard-front {max-width:520px;margin:auto}
  .preview-head {max-width:520px;margin:0 auto 14px}
  .postcard-scribble {font-size:clamp(14px,3vw,24px)}
  .back-message {font-size:clamp(12px,2.5vw,17px)}
  .address-lines {font-size:clamp(10px,2vw,13px)}
}
@media (max-width:560px) {
  .app-shell {padding:0 16px}
  .topbar {min-height:76px}
  .wordmark {font-size:18px;gap:7px}.wordmark em {font-size:19px}.mark {width:34px;height:34px;font-size:20px}
  .demo-tag {font-size:9px;line-height:1.35;max-width:115px;text-align:center}
  .hero-copy {padding-top:39px}.hero-copy h1 {font-size:43px}
  .hero-lead {font-size:16px}
  .hero-art {min-height:285px}.hero-postcard {width:82%;padding:8px}.hero-sun {font-size:55px}.art-caption {font-size:15px;bottom:12px}
  .section-line {display:block}.section-line h2 {font-size:30px;margin-bottom:5px}.section-line p:last-child{margin-bottom:16px}
  .occasion-grid {grid-template-columns:1fr 1fr;gap:11px}.occasion-card {min-height:135px}.occasion-emoji{font-size:31px}
  .editor-screen {padding-top:18px}.editor-intro h1 {font-size:32px}
  .steps {margin:22px auto 24px}
  .editor-grid {gap:15px}
  .preview-column {padding:14px 14px 7px;border-radius:18px}
  .preview-column .micro {display:none}
  .editor-work {padding:21px 18px;border-radius:18px;min-height:auto}
  .editor-work h2 {font-size:31px}
  .idea-panel {flex-wrap:wrap}.idea-panel button {width:100%}
  .postcard-back {padding:14px 11px}.stamp {width:26px;height:30px;font-size:17px}
  .footer {flex-wrap:wrap}.footer-demo{width:100%;margin-left:0}
}
@media (prefers-reduced-motion:reduce) { .button,.occasion-card {transition:none} }