.design-demo { max-width: 1320px; margin: auto; padding: 0 24px; scroll-margin-top: 24px; }
.design-demo__intro { max-width: 640px; margin: 0 auto 42px; text-align: center; }
.design-demo__intro h2 { font: 400 clamp(29px,4vw,48px)/1.2 "Lora",serif; letter-spacing: -.025em; margin: 0 0 20px; }
.design-demo__intro > p:last-child { font: 400 14px/1.8 "Jost",sans-serif; color: #666; max-width: 490px; margin: auto; }
.design-demo__stage { position: relative; isolation: isolate; overflow: hidden; padding: 50px 24px; background: #eeeae3; min-height: 720px; display: grid; grid-template-columns: minmax(0,1fr); place-items: center; }
.design-demo__stage::before { content: ''; position: absolute; width: 700px; height: 700px; border-radius: 50%; background: #d2d7bb; transform: scale(0); z-index: -1; }
.design-demo__invitation { width: min(350px, 100%); min-width: 0; max-width: 100%; padding: 35px 26px 22px; background: #faf4e9; color: #514236; box-shadow: 0 24px 55px #24221b16; text-align: center; font-family: "Bodoni Moda",serif; }
.design-demo__eyebrow { font: 500 8px/1.6 "Jost",sans-serif; letter-spacing: 2px; margin: 0 0 14px; }
.design-demo__names { display: flex; flex-direction: column; gap: 3px; margin: 0 0 20px; --name-size: 45px; font-size: var(--name-size); line-height: 1.12; font-weight: 600; }
.design-demo__names span { display: block; overflow-wrap: anywhere; min-width: 0; }
.design-demo__names small { font-size: .42em; font-weight: 400; }
.design-demo__invitation.is-long .design-demo__names { --name-size: 29px; --name-growth: 1.08; font-size: var(--name-size); }
.design-demo__invitation.is-very-long .design-demo__names { --name-size: 21px; --name-growth: 1.08; font-size: var(--name-size); }
.design-demo__date { font: 400 9px/1.6 "Jost",sans-serif; letter-spacing: 1.5px; margin: 0 0 24px; }
.design-demo__countdown { display: flex; justify-content: center; gap: 18px; margin-bottom: 25px; }
.design-demo__countdown span { display: grid; gap: 3px; min-width: 28px; }
.design-demo__countdown b { font-size: 22px; font-weight: 400; font-variant-numeric: tabular-nums; }
.design-demo__countdown small { font: 400 8px "Jost",sans-serif; }
.design-demo__block { background: #e9decc55; padding: 18px 14px; margin-top: 12px; border: 1px solid #8e79551a; border-radius: 8px; }
.design-demo__block h4 { font-size: 23px; line-height: 1.2; font-weight: 400; margin: 0 0 9px; }
.design-demo__block > p:last-child, .design-demo__details p:last-child { font: 400 11px/1.7 "Jost",sans-serif; margin: 0; }
.design-demo__details { display: flex; text-align: left; align-items: center; justify-content: space-between; gap: 8px; }
.design-demo__details h4 { font-size: 19px; }
.design-demo__details .design-demo__eyebrow { margin-bottom: 5px; }
.design-demo__signoff { font-size: 13px; margin: 20px 0 0; }
.design-demo__samples { position: absolute; left: 8%; top: 27%; display: flex; gap: 8px; width: 140px; flex-wrap: wrap; }
.design-demo__swatch { width: 30px; height: 42px; background: #40503a; transform: rotate(-8deg); }
.design-demo__swatch:nth-child(2) { background: #f5efd9; transform: translateY(9px) rotate(3deg); }
.design-demo__swatch:nth-child(3) { background: #8e304b; transform: rotate(10deg); }
.design-demo__type { width: 100%; font: 400 82px "Bodoni Moda",serif; margin-top: 24px; }
.design-demo__sample-label { font: 400 8px/1.8 "Jost",sans-serif; letter-spacing: 1.5px; max-width: 115px; }
.design-demo__controls { display: flex; gap: 24px; justify-content: center; margin: 18px 0; }
.design-demo__controls[hidden] { display: none; }
.design-demo__controls button { padding: 8px 0; border: 0; border-bottom: 1px solid #aaa69c; background: transparent; color: #55534d; font: 400 11px "Jost",sans-serif; cursor: pointer; }
.design-demo__controls button:focus-visible,.design-demo a:focus-visible { outline: 2px solid #514236; outline-offset: 5px; }
.design-demo__controls button:disabled { cursor: default; opacity: .6; }
.design-demo__ending { text-align: center; }
.design-demo__ending p { font: 400 11px/1.7 "Jost",sans-serif; color: #666; margin: 16px auto 0; }
.design-demo.is-ready .design-demo__stage { animation: design-scene 30s infinite; }
.design-demo.is-ready .design-demo__stage::before { animation: design-wave 30s infinite; }
.design-demo.is-ready .design-demo__invitation { animation: design-paper 30s infinite; }
.design-demo.is-ready .design-demo__names, .design-demo.is-ready .design-demo__block h4 { animation: design-type 30s infinite; }
.design-demo.is-ready .design-demo__block { animation: design-block 30s infinite, design-content-shape 30s infinite; }
.design-demo.is-ready .design-demo__samples { animation: design-samples 30s infinite; }
.design-demo:not(.is-running) *, .design-demo:not(.is-running) *::before { animation-play-state: paused !important; }
@keyframes design-scene { 0%,12%,96%,100% {background:#eeeae3} 18%,27%,67%,77% {background:#dfe3d4} 35%,44%,84%,90% {background:#ead3d8} 51%,60% {background:#d6e1e8} }
@keyframes design-wave { 0%,12%,27%,44%,60%,77%,100% {transform:translate(-35%,15%) scale(0);opacity:0} 18%,35%,51%,67%,84% {transform:translate(0,0) scale(1.5);opacity:.35} 0%,18%,51%,67%,100% {background:#d2d7bb} 35%,84% {background:#d7a1b1} }
@keyframes design-paper { 0%,12%,96%,100% {background:#faf4e9;--design-paper-color:#faf4e9;color:#514236;transform:translateY(0)} 18%,27%,67%,77% {background:#f5f3df;--design-paper-color:#f5f3df;color:#344b34;transform:translateY(-4px)} 35%,44%,84%,90% {background:#f4cfdb;--design-paper-color:#f4cfdb;color:#742b43;transform:translateY(-6px)} 51%,60% {background:#dce8ee;--design-paper-color:#dce8ee;color:#203d53;transform:translateY(-2px)} }
@keyframes design-type { 0% {font-family:"Bodoni Moda",serif;opacity:1;transform:translateY(0px)} 13.2% {font-family:"Bodoni Moda",serif;opacity:1;transform:translateY(0px)} 14.8% {font-family:"Bodoni Moda",serif;opacity:0;transform:translateY(4px)} 15.2% {font-family:"Jost",sans-serif;opacity:0;transform:translateY(4px)} 16.8% {font-family:"Jost",sans-serif;opacity:1;transform:translateY(0px)} 29.2% {font-family:"Jost",sans-serif;opacity:1;transform:translateY(0px)} 30.8% {font-family:"Jost",sans-serif;opacity:0;transform:translateY(4px)} 31.2% {font-family:"Bodoni Moda",serif;opacity:0;transform:translateY(4px)} 32.8% {font-family:"Bodoni Moda",serif;opacity:1;transform:translateY(0px)} 46.2% {font-family:"Bodoni Moda",serif;opacity:1;transform:translateY(0px)} 47.8% {font-family:"Bodoni Moda",serif;opacity:0;transform:translateY(4px)} 48.2% {font-family:"Jost",sans-serif;opacity:0;transform:translateY(4px)} 49.8% {font-family:"Jost",sans-serif;opacity:1;transform:translateY(0px)} 62.2% {font-family:"Jost",sans-serif;opacity:1;transform:translateY(0px)} 63.8% {font-family:"Jost",sans-serif;opacity:0;transform:translateY(4px)} 64.2% {font-family:"Bodoni Moda",serif;opacity:0;transform:translateY(4px)} 65.8% {font-family:"Bodoni Moda",serif;opacity:1;transform:translateY(0px)} 79.2% {font-family:"Bodoni Moda",serif;opacity:1;transform:translateY(0px)} 80.8% {font-family:"Bodoni Moda",serif;opacity:0;transform:translateY(4px)} 81.2% {font-family:"Jost",sans-serif;opacity:0;transform:translateY(4px)} 82.8% {font-family:"Jost",sans-serif;opacity:1;transform:translateY(0px)} 92.2% {font-family:"Jost",sans-serif;opacity:1;transform:translateY(0px)} 93.8% {font-family:"Jost",sans-serif;opacity:0;transform:translateY(4px)} 94.2% {font-family:"Bodoni Moda",serif;opacity:0;transform:translateY(4px)} 95.8% {font-family:"Bodoni Moda",serif;opacity:1;transform:translateY(0px)} 100% {font-family:"Bodoni Moda",serif;opacity:1;transform:translateY(0px)} }
@keyframes design-block { 0%,12%,96%,100% {background:#e9decc55} 18%,27%,67%,77% {background:#607b4925} 35%,44%,84%,90% {background:#ffffff50} 51%,60% {background:#ffffff65} }
@keyframes design-samples { 0%,10%,100% {opacity:.2;transform:translateY(10px)} 20%,80% {opacity:.8;transform:translateY(0)} }
@media(max-width:900px) { .design-demo__samples {display:none} }
@media(max-width:600px) { .design-demo__stage {padding:26px 14px;min-height:0} .design-demo__invitation {padding:28px 18px 18px} .design-demo__names {--name-size:39px;font-size:var(--name-size)} .design-demo__block h4 {font-size:21px} .design-demo__details h4 {font-size:18px} .design-demo__intro {margin-bottom:28px} }
@media(prefers-reduced-motion:reduce) { .design-demo *, .design-demo *::before {animation:none!important;transition:none!important} }

.design-demo:not(.is-running) .design-demo__names, .design-demo:not(.is-running) .design-demo__block h4 { opacity: 1 !important; }

/* Confirmation page follows the current landing identity. */
.thanks-page { min-height: 100vh; }
.thanks-page .ed-header { padding-block: 24px 12px; }
.thanks-page .ed-header-logo { width: 32px; }
.thanks-content { width: min(100% - 40px, 860px); margin: 0 auto; padding: clamp(42px, 9vw, 100px) 0 64px; }
.thanks-intro { max-width: 700px; margin: 0 auto; text-align: center; }
.thanks-intro .ed-eyebrow { margin-bottom: 18px; color: #666; }
.thanks-intro .ed-title { margin: 0 auto 20px; font: 400 clamp(34px, 7vw, 58px)/1.12 "Lora",serif; letter-spacing: -.025em; }
.thanks-intro > p:last-child { max-width: 610px; margin: 0 auto; color: #666; font: 400 16px/1.75 "Jost",sans-serif; }
.thanks-summary { max-width: 760px; margin: clamp(42px, 7vw, 68px) auto 0; padding: 30px 0 0; border-top: 1px solid rgba(26,26,26,.16); }
.thanks-summary .final-summary-heading { max-width: 640px; margin: 0 auto 25px; text-align: center; }
.thanks-summary .thanks-next-title { margin: 0 0 14px; font: 400 clamp(25px, 5vw, 36px)/1.2 "Lora",serif; letter-spacing: -.025em; }
.thanks-summary .thanks-next-copy { width: auto; max-width: 620px; margin: 0 auto; color: #666; font: 400 15px/1.75 "Jost",sans-serif; }
.thanks-summary .thanks-next-copy a { color: inherit; text-underline-offset: 3px; }
.thanks-summary .final-summary-grid { max-width: 560px; margin: 0 auto; }
.thanks-summary .final-summary-card { padding: 18px 0; border: 0; border-top: 1px solid rgba(26,26,26,.12); border-radius: 0; background: transparent; box-shadow: none; }
.thanks-summary .final-summary-card:hover { transform: none; box-shadow: none; }
.thanks-summary .final-summary-card h3 { margin-bottom: 12px; font: 500 13px/1.5 "Jost",sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.thanks-summary .final-summary-list li { border-bottom-color: rgba(26,26,26,.12); color: #666; font: 400 14px/1.5 "Jost",sans-serif; }
.thanks-summary .final-summary-list strong { color: #1a1a1a; font-weight: 500; }
.thanks-actions { display: flex; justify-content: center; align-items: center; width: 100%; margin: 30px auto 0; }
.thanks-actions .ed-button { width: auto; min-width: 0; max-width: 100%; margin: 0; padding-inline: 28px; white-space: normal; text-align: center; }
@media(max-width:600px) {
  .thanks-content { width: min(100% - 36px, 860px); padding-top: 48px; }
  .thanks-intro .ed-title { max-width: 480px; }
  .thanks-summary { padding-top: 24px; }
  .thanks-summary .thanks-next-copy { font-size: 14px; }
  .thanks-actions .ed-button { width: min(100%, 320px); }
}

/* Size changes move the following content in normal flow; the scene reserves its height. */
.design-demo__invitation { min-height: var(--invitation-height, 0px); }
.design-demo__stage { align-items: start; }
.design-demo.is-ready .design-demo__names { animation: design-type 30s infinite, design-name-size 30s infinite; }
.design-demo.is-ready .design-demo__invitation { animation: design-paper 30s infinite, design-paper-shape 30s infinite; }
.design-demo__sections { display: grid; gap: 12px; position: relative; }
.design-demo__sections .design-demo__block { margin-top: 0; position: relative; }
.design-demo.is-ready .design-demo__sections .design-demo__block:first-child { animation: design-block 30s infinite, design-content-shape 30s infinite, design-reorder-first 30s infinite; }
.design-demo.is-ready .design-demo__sections .design-demo__block:last-child { animation: design-block 30s infinite, design-content-shape 30s infinite, design-reorder-last 30s infinite; }
@keyframes design-name-size {
  0%,12%,96%,100% {font-size:var(--name-size)}
  18%,27%,67%,77% {font-size:calc(var(--name-size) * .8)}
  35%,44%,84%,90% {font-size:calc(var(--name-size) * var(--name-growth,1.2))}
  51%,60% {font-size:calc(var(--name-size) * .9)}
}
@keyframes design-paper-shape { 0%,12%,51%,60%,96%,100% {border-radius:0} 18%,27% {border-radius:12px} 35%,44%,84%,90% {border-radius:38px 38px 14px 14px} 67%,77% {border-radius:4px} }
@keyframes design-reorder-first {
  0% {transform:translateY(0);opacity:1}
  12.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  14.8% {transform:translateY(calc(0px - 28px));opacity:0}
  15.2% {transform:translateY(calc(calc(var(--second-block-height,100px) + 12px) + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  17.2% {transform:translateY(calc(var(--second-block-height,100px) + 12px));opacity:1}
  28.8% {transform:translateY(calc(var(--second-block-height,100px) + 12px));opacity:1;animation-timing-function:ease-in}
  30.8% {transform:translateY(calc(calc(var(--second-block-height,100px) + 12px) - 28px));opacity:0}
  31.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  33.2% {transform:translateY(0px);opacity:1}
  45.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  47.8% {transform:translateY(calc(0px - 28px));opacity:0}
  48.2% {transform:translateY(calc(calc(var(--second-block-height,100px) + 12px) + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  50.2% {transform:translateY(calc(var(--second-block-height,100px) + 12px));opacity:1}
  61.8% {transform:translateY(calc(var(--second-block-height,100px) + 12px));opacity:1;animation-timing-function:ease-in}
  63.8% {transform:translateY(calc(calc(var(--second-block-height,100px) + 12px) - 28px));opacity:0}
  64.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  66.2% {transform:translateY(0px);opacity:1}
  78.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  80.8% {transform:translateY(calc(0px - 28px));opacity:0}
  81.2% {transform:translateY(calc(calc(var(--second-block-height,100px) + 12px) + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  83.2% {transform:translateY(calc(var(--second-block-height,100px) + 12px));opacity:1}
  91.8% {transform:translateY(calc(var(--second-block-height,100px) + 12px));opacity:1;animation-timing-function:ease-in}
  93.8% {transform:translateY(calc(calc(var(--second-block-height,100px) + 12px) - 28px));opacity:0}
  94.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  96.2% {transform:translateY(0px);opacity:1}
  100% {transform:translateY(0);opacity:1}
}
@keyframes design-reorder-last {
  0% {transform:translateY(0);opacity:1}
  12.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  14.8% {transform:translateY(calc(0px - 28px));opacity:0}
  15.2% {transform:translateY(calc(calc(-1 * (var(--first-block-height,130px) + 12px)) + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  17.2% {transform:translateY(calc(-1 * (var(--first-block-height,130px) + 12px)));opacity:1}
  28.8% {transform:translateY(calc(-1 * (var(--first-block-height,130px) + 12px)));opacity:1;animation-timing-function:ease-in}
  30.8% {transform:translateY(calc(calc(-1 * (var(--first-block-height,130px) + 12px)) - 28px));opacity:0}
  31.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  33.2% {transform:translateY(0px);opacity:1}
  45.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  47.8% {transform:translateY(calc(0px - 28px));opacity:0}
  48.2% {transform:translateY(calc(calc(-1 * (var(--first-block-height,130px) + 12px)) + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  50.2% {transform:translateY(calc(-1 * (var(--first-block-height,130px) + 12px)));opacity:1}
  61.8% {transform:translateY(calc(-1 * (var(--first-block-height,130px) + 12px)));opacity:1;animation-timing-function:ease-in}
  63.8% {transform:translateY(calc(calc(-1 * (var(--first-block-height,130px) + 12px)) - 28px));opacity:0}
  64.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  66.2% {transform:translateY(0px);opacity:1}
  78.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  80.8% {transform:translateY(calc(0px - 28px));opacity:0}
  81.2% {transform:translateY(calc(calc(-1 * (var(--first-block-height,130px) + 12px)) + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  83.2% {transform:translateY(calc(-1 * (var(--first-block-height,130px) + 12px)));opacity:1}
  91.8% {transform:translateY(calc(-1 * (var(--first-block-height,130px) + 12px)));opacity:1;animation-timing-function:ease-in}
  93.8% {transform:translateY(calc(calc(-1 * (var(--first-block-height,130px) + 12px)) - 28px));opacity:0}
  94.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  96.2% {transform:translateY(0px);opacity:1}
  100% {transform:translateY(0);opacity:1}
}


/* Fade the whole section so typography and copy switch while hidden. */
.design-demo.is-ready .design-demo__celebration { animation: design-block 30s infinite, design-content-shape 30s infinite, design-section-swipe 30s infinite; }
.design-demo__block h4 { transform:none!important; }
@keyframes design-section-swipe {
  0% {transform:translateY(0);opacity:1}
  12.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  14.8% {transform:translateY(calc(0px - 28px));opacity:0}
  15.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  17.2% {transform:translateY(0px);opacity:1}
  28.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  30.8% {transform:translateY(calc(0px - 28px));opacity:0}
  31.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  33.2% {transform:translateY(0px);opacity:1}
  45.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  47.8% {transform:translateY(calc(0px - 28px));opacity:0}
  48.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  50.2% {transform:translateY(0px);opacity:1}
  61.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  63.8% {transform:translateY(calc(0px - 28px));opacity:0}
  64.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  66.2% {transform:translateY(0px);opacity:1}
  78.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  80.8% {transform:translateY(calc(0px - 28px));opacity:0}
  81.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  83.2% {transform:translateY(0px);opacity:1}
  91.8% {transform:translateY(0px);opacity:1;animation-timing-function:ease-in}
  93.8% {transform:translateY(calc(0px - 28px));opacity:0}
  94.2% {transform:translateY(calc(0px + 28px));opacity:0;animation-timing-function:cubic-bezier(.16,1,.3,1)}
  96.2% {transform:translateY(0px);opacity:1}
  100% {transform:translateY(0);opacity:1}
}
.design-demo__measure, .design-demo__measure * { animation:none!important; transform:none!important; }
.design-demo__measure { position:absolute; visibility:hidden; pointer-events:none; min-height:0!important; height:auto; top:0; left:0; }

/* Photographic openings share the scene clock, including pause and reduced motion. */
@property --design-paper-color { syntax: '<color>'; inherits: true; initial-value: #faf4e9; }
.design-demo__invitation { --paper-pad-x:26px; --paper-pad-top:35px; overflow:hidden; }
.design-demo__hero { position:relative; isolation:isolate; padding-top:0; --photo-space:180px; }
.design-demo__hero > .design-demo__eyebrow, .design-demo__hero > .design-demo__names { position:relative; z-index:1; }
.design-demo__photos { position:absolute; top:calc(-1 * var(--paper-pad-top)); right:calc(-1 * var(--paper-pad-x)); bottom:0; left:calc(-1 * var(--paper-pad-x)); z-index:-1; opacity:0; }
.design-demo__photos img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 35%; opacity:0; }
/* The photographic mask is shared with the editor and final invitation in invitation.css. */
.design-demo.is-ready .design-demo__hero { animation:design-photo-space 30s infinite; }
.design-demo.is-ready .design-demo__photos { animation:design-photo-visible 30s infinite; }
.design-demo.is-ready .design-demo__photos img:nth-child(1) { animation:design-photo-one 30s infinite; }
.design-demo.is-ready .design-demo__photos img:nth-child(2) { animation:design-photo-two 30s infinite; }
.design-demo.is-ready .design-demo__photos img:nth-child(3) { animation:design-photo-three 30s infinite; }
.design-demo.is-ready .design-demo__photos img:nth-child(4) { animation:design-photo-four 30s infinite; }
@keyframes design-photo-space { 0%,12.8%,50.2%,61.8%,96.2%,100% {padding-top:0} 17.2%,45.8%,66.2%,91.8% {padding-top:var(--photo-space)} }
@keyframes design-photo-visible { 0%,12.8%,50.2%,61.8%,96.2%,100% {opacity:0} 17.2%,45.8%,66.2%,91.8% {opacity:1} }
@keyframes design-photo-one { 0%,12.8%,33.2%,100% {opacity:0} 17.2%,28.8% {opacity:1} }
@keyframes design-photo-two { 0%,61.8%,83.2%,100% {opacity:0} 66.2%,78.8% {opacity:1} }
@keyframes design-photo-three { 0%,28.8%,50.2%,100% {opacity:0} 33.2%,45.8% {opacity:1} }
@keyframes design-photo-four { 0%,78.8%,96.2%,100% {opacity:0} 83.2%,91.8% {opacity:1} }
@media(max-width:600px) { .design-demo__invitation {--paper-pad-x:18px;--paper-pad-top:28px} .design-demo__hero {--photo-space:170px} }

/* Contrast enhancement limited to the photographic hero eyebrow. */
.design-demo.is-ready .design-demo__hero > .design-demo__eyebrow { animation:design-photo-eyebrow 30s infinite; }
@keyframes design-photo-eyebrow { 0%,12.8%,50.2%,61.8%,96.2%,100% {color:inherit;font-weight:500;text-shadow:none} 17.2%,45.8%,66.2%,91.8% {color:#211d19;font-weight:700;text-shadow:0 0 4px #ffffffcc} }

/* Direct mobile-first path: names, full-width demonstration, pricing and FAQ. */
.editorial-landing .ed-hero { display:block; min-height:0; padding-top:28px; padding-bottom:40px; }
.editorial-landing .ed-hero-content { max-width:680px; margin-inline:auto; }
.editorial-landing .ed-hero-subtitle { max-width:520px; margin:-10px 0 24px; color:var(--text-muted); font:400 16px/1.5 "Jost",sans-serif; }
.editorial-landing .ed-hero-start { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; width:min(100%,430px); margin:18px 0 0; }
.editorial-landing .ed-hero-start > p { margin:0; color:#666; font:400 14px/1.4 "Jost",sans-serif; }
.editorial-landing .ed-hero-start > p strong { color:var(--text-charcoal); font-weight:600; }
.editorial-landing .ed-hero-start .ed-button { min-height:42px; margin:0; padding:11px 14px; font-size:10px; letter-spacing:1px; white-space:nowrap; }
.editorial-landing .design-demo { width:100%; max-width:none; padding-inline:0; scroll-margin-top:0; }
.design-demo__ending { padding:28px 24px 40px; }
@media(max-width:767px) {
  .editorial-landing,
  .ed-footer { transform:translateX(var(--viewport-center-offset, 0px)); }
  .editorial-landing .ed-header { padding-block:24px 12px; }
  .editorial-landing .ed-hero { padding-top:14px; }
}
@media(min-width:768px) { .editorial-landing .ed-hero { padding-top:40px; padding-bottom:56px; } }

/* One alignment per variant, shared by all three content sections. */
.design-demo__block { text-align:var(--section-align,center); }
.design-demo__details { display:block; }

@keyframes design-content-shape { 0%,12%,96%,100% {border-radius:8px} 18%,27%,67%,77% {border-radius:3px} 35%,44%,84%,90% {border-radius:24px} 51%,60% {border-radius:0} }

.design-demo__ending .design-demo__claim { max-width:420px; font:400 clamp(23px,3vw,30px)/1.35 "Lora",serif; letter-spacing:-.025em; color:var(--text-charcoal); margin:0 auto; }
.design-demo__ending .design-demo__benefit { max-width:520px; margin:12px auto 0; color:#666; font:400 16px/1.55 "Jost",sans-serif; }
.design-demo__ending .design-demo__offer { width:min(100%,420px); margin:28px auto 20px; padding-top:20px; border-top:1px solid rgba(26,26,26,.18); }
.design-demo__ending .design-demo__price-label { margin:0 auto 12px; color:var(--text-charcoal); font:500 14px/1.4 "Jost",sans-serif; letter-spacing:.14em; }
.design-demo__ending .design-demo__price { margin:0 auto; color:var(--text-charcoal); }
.design-demo__ending .design-demo__price strong { font:400 clamp(32px,4vw,38px)/1.1 "Lora",serif; letter-spacing:-.035em; }
.design-demo__ending .design-demo__price-note { margin:14px auto 0; color:#666; font:400 16px/1.5 "Jost",sans-serif; }