/* Shared reading scale, sticky navigation and an original device gallery. */
:root { --header-height: 100px; --reading-size: 17px; }
html { scroll-padding-top: calc(var(--header-offset, var(--header-height)) + 24px); }
body { font-size: var(--reading-size); line-height: 1.75; }
main, section, article, .hero-copy, .theme-description { min-width: 0; }
.wrap { width: min(1320px, calc(100% - 96px)); }
.site-header {
  position: sticky; top: 0; z-index: 60; height: var(--header-height);
  padding-inline: max(28px, calc((100vw - 1390px) / 2)); gap: 24px;
  background: #faf6eef5; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: box-shadow .2s, background .2s;
}
.site-header.is-scrolled { background: #faf6eefc; box-shadow: 0 6px 22px #4026230d; }
.site-header .brand { gap: 12px; }
.site-header .brand > span { font-size: 25px; }
.brand small { font-size: 10px; letter-spacing: 2.5px; }
.site-header .brand img { width: 54px; height: 54px; }
.site-header nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
.site-header nav > a:not(.button) { font-size: 16px; letter-spacing: 0; line-height: 1.35; padding-block: 14px; white-space: nowrap; }
.site-header nav > a[aria-current] { text-decoration: underline; text-decoration-color: #ae8d66; text-underline-offset: 8px; }
.site-header nav .button { font-size: 15px; min-height: 48px; padding: 12px 18px; gap: 12px; white-space: nowrap; }
.site-header .menu-toggle { display: none; min-height: 46px; min-width: 78px; padding: 8px 0 8px 12px; font-size: 16px; letter-spacing: 0; }
.button, .text-link { font-size: 16px; line-height: 1.5; }
.button { min-height: 52px; padding: 16px 24px; letter-spacing: 0; }
.button.small { font-size: 15px; }
.text-link { min-height: 44px; }
.eyebrow, .page-intro .eyebrow, .hero-copy .eyebrow, .card-meta .eyebrow { font-size: 12px; letter-spacing: 1.7px; line-height: 1.7; }
.fine, .pricing-note, .result-count, .footer-bottom, .footer-bottom > div, .swatches small { font-size: 14px; line-height: 1.75; }
.lede, .hero .lede, .page-intro .lede, .theme-description .lede { font-size: 18px; line-height: 1.75; }
.hero .lede { max-width: 450px; }
.hero-note { font-size: 12px; letter-spacing: 1px; line-height: 1.7; }
.ribbon { font-size: 13px; letter-spacing: .6px; flex-wrap: wrap; padding-block: 20px; }
.card-meta > p:not(.eyebrow), .editorial-copy > p:not(.eyebrow), .feature-list p,
.three-columns p, .occasion-story p:not(.eyebrow), .large-steps p:not(.eyebrow),
.about-section p:not(.eyebrow), .prose p, .faq-list details p,
.contact-layout aside > p:not(.eyebrow), .price-card > p:not(.price):not(.eyebrow) { font-size: 17px; line-height: 1.8; }
.feature-list strong { font-size: 18px; margin-bottom: 5px; }
.price small { font-size: 14px; line-height: 1.7; }
.enquiry-form label, .rsvp-form > label { font-size: 16px; }
input, select, textarea { font-size: 16px; line-height: 1.5; min-height: 50px; }
.filter { min-height: 46px; font-size: 16px; padding: 10px 17px; }
.search-label input { font-size: 16px; min-height: 48px; width: 270px; }
.collection-tools { gap: 24px; align-items: center; flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: 5px; }
.theme-description .breadcrumb { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.theme-description .button, .price-card .button { font-size: 16px; line-height: 1.5; }
.theme-description .fine { font-size: 14px; }
.save-theme { width: 46px; height: 46px; flex: 0 0 46px; font-size: 28px; }
.footer-top { gap: 28px; flex-wrap: wrap; }
.footer-bottom { gap: 25px; flex-wrap: wrap; }
.footer-bottom > div { flex-wrap: wrap; row-gap: 12px; }
.footer-bottom a { display: inline-block; padding-block: 6px; }
.skip-link { z-index: 90; }
#toast { font-size: 16px; z-index: 90; }

/* Front-facing iPhone 18 Pro-inspired device, rendered without image assets. */
.device-phone {
  --device-paper: #f8efe0; --device-ink: #72232e; --device-accent: #ae7e43;
  position: relative; width: 100%; aspect-ratio: 0.482; padding: 6px;
  isolation: isolate; flex: 0 0 auto; border-radius: 15.5% / 7.5%;
  border: 1px solid #99968f;
  background: linear-gradient(110deg, #5b5852 0%, #d9d7d2 1.6%, #f9f8f5 2.4%, #b5b2ab 3.8%, #343331 5%, #9b9790 49%, #e1dfda 94%, #f5f3ed 97.5%, #79756d 99%);
  box-shadow: 0 2px 2px #ffffff99 inset, 0 -2px 3px #34312e99 inset,
    0 0 0 1px #3c3b3540, 0 8px 12px -8px #392b2270,
    0 28px 40px -20px #392b2270, 0 50px 55px -28px #392b2230;
}
.device-phone::before { content: ''; position: absolute; inset: 3px; border: 1px solid #111111; border-radius: inherit; background: #101010; z-index: -1; }
.device-screen {
  position: relative; width: 100%; height: 100%; min-height: 0;
  border-radius: 14% / 6.7%; overflow: hidden; isolation: isolate;
  background: var(--device-paper); color: var(--device-ink);
  display: flex; flex-direction: column; border: 2px solid #121212;
}
.device-screen::after { content: ''; pointer-events: none; position: absolute; inset: 0; z-index: 8; border-radius: inherit; box-shadow: inset 1px 1px 2px #ffffff55, inset -1px -1px 2px #00000025; background: linear-gradient(120deg,#ffffff0d,transparent 30%,transparent 74%,#ffffff04); }
.device-status { position: relative; flex: 0 0 36px; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 4px 18px 0; color: var(--device-ink); z-index: 3; font: 600 10px/1 Arial,sans-serif; }
.device-status > svg { width: 35px; height: 12px; }
.dynamic-island { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 25%; height: 19px; border-radius: 30px; background: #080808; box-shadow: inset 0 0 2px #333; }
.dynamic-island::after { content: ''; position: absolute; right: 7px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #304958, #101722 48%, #07090d 75%); box-shadow: 0 0 0 1px #171717; }
.device-invitation { flex: 1; min-height: 0; display: flex; align-items: center; width: 100%; }
.device-phone .theme-preview { width: 100%; max-width: none; max-height: 100%; aspect-ratio: 360/520; background: transparent; box-shadow: none; transform: none; transition: none; }
.device-phone .theme-preview img { object-fit: contain; }
.device-invite-footer { flex: 0 0 77px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 9px; padding: 2px 15px 20px; }
.device-open { border: 1px solid color-mix(in srgb,var(--device-accent) 65%,transparent); background: color-mix(in srgb,var(--device-ink) 6%,transparent); border-radius: 2px; width: 82%; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 10px 4px; font: 11px/1.2 Studio,Arial,sans-serif; color: var(--device-ink); }
.device-brand { font: italic 11px/1.3 Editorial,Georgia,serif; color: var(--device-ink); opacity: .8; }
.device-home { position: absolute; bottom: 6px; left: 34%; width: 32%; height: 3px; border-radius: 4px; background: var(--device-ink); opacity: .7; z-index: 10; pointer-events: none; }
.device-side { position: absolute; display: block; width: 3px; border-radius: 2px 0 0 2px; background: linear-gradient(90deg,#77736c,#d4d0c9,#706d67); box-shadow: inset 0 1px #f1efea, 0 1px 2px #2e282533; }
.device-action { left: -3px; top: 18%; height: 3.5%; }
.device-volume { left: -3px; top: 25%; height: 7%; }
.device-volume::after { content: ''; position: absolute; top: 135%; width: 3px; height: 100%; background: inherit; border-radius: inherit; box-shadow: inherit; }
.device-power { right: -3px; top: 28%; height: 11%; border-radius: 0 2px 2px 0; }
.device-link { display: block; width: min(100%,300px); margin: auto; }
.device-link:focus-visible, .hero-device-main:focus-visible, .hero-device-secondary:focus-visible, .editorial-device:focus-visible { outline-offset: 12px; border-radius: 38px; }

/* Two overlapping phones add depth, while artwork stays on one fixed plane. */
.hero { grid-template-columns: 1.02fr 1fr; gap: 48px; padding-block: 54px 76px; min-height: 810px; }
.hero h1 { font-size: clamp(72px,7.2vw,106px); }
.hero-stage.phone-showcase { min-height: 675px; max-width: 570px; width: 100%; margin: auto; padding-bottom: 50px; background: none; }
.showcase-halo { position: absolute; width: 108%; height: 85%; top: 4%; left: -4%; border-radius: 50%; background: radial-gradient(ellipse,#e3d3bb88 0%,#ece1d044 42%,transparent 68%); pointer-events: none; }
.showcase-label { position: absolute; top: -10px; right: 16px; font: italic 18px/1.5 Editorial,Georgia,serif; color: var(--gold); }
.hero-device-main { display: block; width: 286px; margin-left: 114px; transform: rotate(6deg); position: relative; z-index: 2; transition: transform .35s; }
.hero-device-main:hover { transform: rotate(3deg) translateY(-5px); }
.hero-device-secondary { display: block; position: absolute; width: 229px; top: 64px; left: 0; transform: rotate(-11deg); z-index: 1; transition: transform .35s; }
.hero-device-secondary:hover { transform: rotate(-8deg) translateY(-5px); }
.showcase-note { position: absolute; left: 0; bottom: 108px; color: var(--gold); font: 18px/1.4 Editorial,Georgia,serif; transform: rotate(-5deg); z-index: 3; }
.showcase-note em { font-size: 16px; }
.showcase-picker { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: min(370px,100%); display: grid; grid-template-columns: auto minmax(0,1fr); gap: 16px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.showcase-picker label { font-size: 14px; color: var(--muted); line-height: 1.4; }
.showcase-picker select { font-size: 16px; color: var(--burgundy); background-color: transparent; border: 0; border-bottom: 1px solid #bdab94; margin: 0; min-height: 46px; padding: 10px 25px 10px 8px; cursor: pointer; }

/* The gallery uses the same chassis and consistent dimensions for every theme. */
.theme-grid { gap: 34px; align-items: stretch; }
.theme-card { display: flex; flex-direction: column; }
.theme-card[hidden] { display: none; }
.card-cover { min-height: 0; padding: 36px 40px 39px; overflow: visible; border: 1px solid #e0d5c388; border-radius: 110px 110px 5px 5px; background: radial-gradient(ellipse at 50% 22%,#fbf5e9,#ece2d2); }
.card-cover .device-phone { width: min(100%,265px); transition: transform .3s, box-shadow .3s; }
.card-cover:hover .device-phone { transform: translateY(-6px); }
.card-cover:hover .theme-preview { transform: none; box-shadow: none; }
.theme-card:nth-child(3n+2) .card-cover { background: radial-gradient(ellipse at 50% 22%,#f5f6eb,#e1e6d9); }
.theme-card:nth-child(3n) .card-cover { background: radial-gradient(ellipse at 50% 22%,#f3f7f8,#dde5e9); }
.cover-arrow { width: 38px; height: 38px; font-size: 20px; right: 12px; bottom: 12px; }
.card-meta { display: flex; flex: 1; flex-direction: column; padding-top: 25px; }
.card-meta h3 { font-size: 32px; margin: 9px 0 13px; }
.card-meta > p:not(.eyebrow) { min-height: 0; margin-bottom: 19px; }
.card-actions { margin-top: auto; padding-top: 4px; align-items: center; }
.card-actions .text-link { font-size: 16px; line-height: 1.5; }
.theme-showcase { padding: 55px 48px; border-radius: 160px 160px 4px 4px; }
.theme-showcase .device-link { width: min(100%,310px); }
.theme-showcase .theme-preview { max-width: none; box-shadow: none; }
.theme-detail { gap: 80px; }
.theme-description h1 { font-size: clamp(55px,5.2vw,76px); }
.occasion-story > div:first-child { padding: 45px 60px; border-radius: 140px 140px 4px 4px; }
.occasion-story > div:first-child .theme-preview { max-width: none; }
.occasion-story .device-link { width: min(100%,280px); }
.editorial-visual { min-height: 790px; padding: 90px 45px; }
.editorial-device { display: block; width: min(100%,290px); transform: rotate(-5deg); }
.editorial-visual > .eyebrow { top: 28px; left: 30px; }
.visual-caption { bottom: 26px; left: 25px; right: 25px; text-align: center; font-size: 20px; line-height: 1.45; }
.editorial-copy { padding: 70px 55px; }
.feature-list > div { gap: 17px; }

/* A real sample runs inside the phone. On phones the viewer uses the screen. */
body.preview-is-open { overflow: hidden; }
.preview-dialog { border: 0; padding: 0; width: min(1080px,calc(100% - 48px)); max-width: none; height: min(950px,calc(100dvh - 40px)); max-height: none; border-radius: 16px; background: #f7f1e7; color: var(--text); box-shadow: 0 25px 90px #160e1866; overflow: hidden; }
.preview-dialog::backdrop { background: #20161cbc; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.preview-dialog:not([open]) { display: none; }
.preview-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.preview-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 26px; border-bottom: 1px solid var(--line); background: #faf6ee; flex-shrink: 0; }
.preview-toolbar .eyebrow { font-size: 11px; letter-spacing: 1.3px; margin-bottom: 5px; }
.preview-toolbar h2 { font-size: 30px; letter-spacing: -.6px; }
.preview-tools { display: flex; align-items: center; gap: 22px; }
.preview-fullpage { font-size: 15px; color: var(--burgundy); text-decoration: underline; text-underline-offset: 5px; line-height: 1.5; }
.preview-close { display: flex; align-items: center; gap: 13px; min-height: 46px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 4px; background: transparent; color: var(--burgundy); font-size: 16px; }
.preview-close span { font-size: 25px; line-height: 1; }
.preview-body { display: flex; gap: 65px; justify-content: center; align-items: center; flex: 1; min-height: 0; padding: 24px 40px; position: relative; background: radial-gradient(ellipse at 70% 50%,#e6d8c0aa,transparent 60%); }
.preview-aside { width: 260px; flex-shrink: 0; }
.preview-aside h3 { font-size: 43px; line-height: 1.12; margin: 19px 0 24px; color: var(--burgundy); }
.preview-aside h3 em { color: var(--gold); }
.preview-aside p:not(.eyebrow):not(.fine) { font-size: 17px; }
.preview-aside .fine { font-size: 13px; margin-top: 25px; }
.preview-scroll-hint { margin-top: 35px; color: var(--burgundy); display: flex; align-items: center; gap: 12px; }
.preview-scroll-hint span { font-size: 25px; }
.preview-device-slot { height: 100%; max-height: 800px; min-height: 0; aspect-ratio: .482; }
.preview-device { width: 100%; height: 100%; --device-paper: #faf6ee !important; --device-ink: #3e3330 !important; }
.preview-device .device-status { flex-basis: 37px; }
.preview-device .device-home { background: #171717; }
#preview-frame { display: block; width: 100%; flex: 1; height: 100%; min-height: 0; border: 0; background: #faf6ee; }
.preview-dialog.preview-fullscreen{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0}
.preview-fullscreen .preview-aside{display:none}
.preview-fullscreen .preview-body{display:block;padding:0;overflow:hidden}
.preview-fullscreen .preview-device-slot{width:100%;height:100%;max-height:none;aspect-ratio:auto}
.preview-fullscreen .preview-device{width:100%;height:100%;aspect-ratio:auto;padding:0;border:0;border-radius:0;box-shadow:none;background:none}
.preview-fullscreen .preview-device::before,.preview-fullscreen .device-side,.preview-fullscreen .device-status,.preview-fullscreen .device-home,.preview-fullscreen .device-screen::after{display:none}
.preview-fullscreen .device-screen{width:100%;height:100%;border:0;border-radius:0}
.preview-fullscreen #preview-frame{width:100%;height:100%;flex:1;min-width:0}
.preview-loading { position: absolute; bottom: 6px; right: 25px; font-size: 13px; line-height: 1.3; }

/* Invitation navigation and guest information share the larger reading scale. */
.invitation-v2 { --sample-bar-height: 57px; }
.invitation-v2 .sample-bar { position: sticky; top: 0; min-height: var(--sample-bar-height); z-index: 50; font-size: 15px; padding: 10px 26px; background: #faf6eef8; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.invitation-v2 .sample-bar > span { font-size: 11px; letter-spacing: 1px; }
.invitation-v2 .sample-bar a { font-size: 15px; line-height: 1.5; padding-block: 7px; }
.journey-nav { top: var(--sample-offset, var(--sample-bar-height)); gap: 22px; padding: 8px 22px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.journey-nav a { font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; padding-inline: 4px; letter-spacing: 0; }
.journey-section { scroll-margin-top: calc(var(--sample-offset, var(--sample-bar-height)) + 80px); }
.journey-kicker, .journey-cover > .journey-kicker, .journey-event .journey-kicker, .guide-grid .journey-kicker { font-size: 12px; letter-spacing: 1.5px; line-height: 1.75; }
.journey-section-head > p:last-child:not(.journey-kicker), .story-moment p, .journey-event-body > p:not(.journey-kicker), .guide-grid p:not(.journey-kicker), .journey-faq details p { font-size: 17px; line-height: 1.85; }
.journey-button, .journey-cover > .journey-button, .personalise-sample .journey-button, .journey-form > .journey-button { font-size: 16px; letter-spacing: 0; min-height: 52px; }
.journey-link, .event-buttons .journey-link { font-size: 16px; min-height: 44px; }
.cover-footnote, .sample-disclaimer, .form-demo-note, .event-choice small { font-size: 13px; letter-spacing: 0; line-height: 1.75; }
.cover-guest { font-size: 22px; }
.welcome-letter { font-size: 22px; line-height: 1.85; }
.personalise-sample summary, .personalise-sample form > label { font-size: 16px; }
.personalise-sample summary { min-height: 44px; align-items: center; }
.personalise-sample { max-width: 610px; }
.personalise-sample .journey-button { flex: 0 0 auto; }
.journey-countdown > div > p:last-child { font-size: 16px; }
.journey-countdown .countdown { gap: 24px; }
.journey-countdown .countdown > div { width: 64px; }
.journey-countdown .countdown strong { font-size: 48px; }
.journey-countdown .countdown span { font-size: 11px; letter-spacing: 1px; }
.journey-events { max-width: 840px; }
.journey-event { grid-template-columns: 80px minmax(0,1fr); }
.event-date > span { font-size: 11px; letter-spacing: 1px; }
.event-date strong { font-size: 38px; }
.event-facts > span { font-size: 15px; line-height: 1.6; }
.event-facts svg { width: 18px; height: 18px; }
.story-art > span { font-size: 12px; letter-spacing: 1px; }
.guide-grid { gap: 18px; }
.guide-grid article { padding: 28px 22px; }
.journey-form label, .journey-form legend, .event-choice > span { font-size: 16px; }
.journey-form input, .journey-form select, .journey-form textarea { font-size: 16px; min-height: 50px; }
.journey-form .radio-label input, .journey-form .event-choice input { min-height: 0; width: 19px; height: 19px; }
.journey-form .radio-label { min-height: 42px; }
.response-summary p, .invitation-v2 #rsvp-status, .journey-form #wish-status { font-size: 16px; }
.wish-card cite, .wish-card button { font-size: 14px; }
.wish-card button { min-height: 44px; }
.journey-brand > span { font-size: 12px; letter-spacing: 1px; }
.journey-brand small { font-size: 13px; }
.is-embedded-preview .sample-bar { display: none; }
.invitation-document { scroll-padding-top: 0; }
.is-embedded-preview .journey-nav { top: 0; }
.is-embedded-preview .journey-section { scroll-margin-top: 78px; }
.is-embedded-preview .journey-shell { box-shadow: none; }

@media (min-width: 981px) and (max-width: 1190px) {
  .site-header { padding-inline: 24px; gap: 18px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand > span { font-size: 21px; letter-spacing: 1px; }
  .site-header .brand img { width: 44px; height: 44px; }
  .site-header .brand small { font-size: 9px; letter-spacing: 1.8px; }
  .site-header nav { gap: 16px; }
  .site-header nav > a:not(.button) { font-size: 15px; }
  .site-header nav .button { font-size: 14px; padding-inline: 12px; gap: 8px; }
  .hero { gap: 28px; }
  .hero-device-main { width: 252px; margin-left: 100px; }
  .hero-device-secondary { width: 196px; top: 100px; }
  .showcase-note { font-size: 16px; bottom: 118px; }
  .showcase-note em { font-size: 14px; }
  .card-cover { padding: 35px 28px; }
  .editorial-copy { padding-inline: 38px; }
  .theme-detail { gap: 50px; }
}
@media (max-width: 980px) {
  :root { --header-height: 84px; }
  .wrap { width: calc(100% - 56px); }
  .site-header { padding-inline: 28px; }
  .site-header .menu-toggle { display: block; }
  .site-header nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); padding: 18px 28px 26px; border-bottom: 1px solid var(--line); box-shadow: 0 16px 24px #47302119; max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
  .site-header nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .site-header nav > a:not(.button) { font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-header nav .button { font-size: 16px; align-self: flex-start; margin-top: 22px; min-height: 50px; }
  .hero { grid-template-columns: 1fr 1fr; gap: 30px; min-height: 740px; padding-block: 50px 62px; }
  .hero h1 { font-size: clamp(64px,8vw,85px); letter-spacing: -2.5px; }
  .hero .lede { font-size: 18px; }
  .hero-stage.phone-showcase { min-height: 575px; }
  .hero-device-main { width: 245px; margin-left: 25px; transform: rotate(4deg); }
  .hero-device-secondary { display: none; }
  .showcase-note { display: none; }
  .showcase-label { font-size: 17px; top: -20px; right: 0; }
  .showcase-picker { grid-template-columns: 1fr; gap: 0; bottom: -22px; width: min(260px,100%); }
  .showcase-picker select { padding-left: 0; }
  .theme-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 26px; }
  .theme-grid:not(.collection-grid) .theme-card:last-child { display: none; }
  .card-cover { padding: 34px; }
  .theme-detail { gap: 36px; }
  .theme-showcase { padding: 45px 32px; }
  .editorial-copy { padding: 65px 32px; }
  .editorial-visual { min-height: 770px; padding-inline: 35px; }
  .occasion-story { gap: 45px; }
  .occasion-story > div:first-child { padding: 38px; }
  .pricing-grid { gap: 18px; }
  .price-card { padding: 28px 22px; }
  .preview-body { gap: 35px; padding-inline: 28px; }
  .preview-aside { width: 220px; }
  .preview-aside h3 { font-size: 38px; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide-grid article { display: grid; grid-template-columns: 42px minmax(0,1fr); column-gap: 22px; }
  .guide-grid .guide-icon { grid-row: span 4; }
  .guide-grid .journey-link { justify-content: flex-start; width: fit-content; }
  .journey-countdown { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 45px; padding-top: 44px; }
  .hero-copy { max-width: 600px; }
  .hero h1 { font-size: clamp(64px,11.6vw,91px); line-height: .99; margin-block: 24px; }
  .hero .lede { max-width: 520px; }
  .hero-actions { gap: 18px 24px; }
  .hero-note { margin-top: 25px; }
  .hero-stage.phone-showcase { min-height: 625px; max-width: 440px; margin-top: 12px; padding-bottom: 65px; }
  .hero-device-main { width: 255px; margin-left: 100px; transform: rotate(5deg); }
  .hero-device-secondary { display: block; width: 200px; top: 61px; left: 4px; }
  .showcase-label { right: 6px; top: -10px; }
  .showcase-note { display: block; font-size: 16px; bottom: 104px; left: 2px; }
  .showcase-note em { font-size: 14px; }
  .showcase-picker { grid-template-columns: auto minmax(0,1fr); gap: 14px; width: 100%; bottom: 0; }
  .showcase-picker select { padding-left: 8px; }
  .editorial-split { grid-template-columns: 1fr; }
  .editorial-visual { min-height: 770px; }
  .editorial-copy { padding: 55px 28px 60px; }
  .theme-detail { grid-template-columns: 1fr; gap: 38px; }
  .theme-description { order: 0; }
  .theme-showcase { order: 1; max-width: 520px; width: 100%; margin: auto; padding: 45px 55px; }
  .theme-description h1 { font-size: 62px; }
  .occasion-story { grid-template-columns: 1fr; }
  .occasion-story > div:first-child { order: 2 !important; max-width: 520px; width: 100%; margin: auto; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { padding: 32px; }
  .about-section { grid-template-columns: 1fr; }
  .about-emblem { order: 2; }
  .three-columns { grid-template-columns: 1fr; }
  .preview-aside { display: none; }
  .preview-toolbar { padding: 16px 18px; }
  .preview-tools { gap: 14px; }
  .preview-toolbar h2 { font-size: 26px; }
  .preview-body { padding: 20px; }
  .story-layout, .wishes-layout { grid-template-columns: 1fr; }
  .story-art { max-width: 440px; width: 100%; margin: auto; }
}
@media (max-width: 600px) {
  :root { --header-height: 78px; --reading-size: 16px; }
  .wrap { width: calc(100% - 40px); }
  .site-header { padding-inline: 20px; gap: 12px; }
  .site-header .brand img { width: 46px; height: 46px; }
  .site-header .brand > span { font-size: 22px; letter-spacing: 1px; }
  .site-header .brand small { font-size: 9px; letter-spacing: 2px; }
  .site-header nav { padding-inline: 20px; }
  .hero-actions .button, .hero-actions .text-link { font-size: 16px; }
  .hero-actions .button { width: 100%; padding: 16px 18px; }
  .hero-actions .text-link { margin: auto; }
  .hero .lede, .page-intro .lede, .theme-description .lede { font-size: 18px; }
  .hero-stage.phone-showcase { min-height: 585px; max-width: 365px; }
  .hero-device-main { width: 235px; margin-left: 85px; }
  .hero-device-secondary { width: 177px; left: 2px; top: 70px; }
  .showcase-note { bottom: 91px; font-size: 15px; }
  .showcase-note em { font-size: 13px; }
  .showcase-picker { gap: 10px; }
  .showcase-picker label { font-size: 13px; }
  .showcase-picker select { font-size: 16px; }
  .ribbon { gap: 14px; font-size: 12px; }
  .ribbon > span:nth-child(n+5) { display: none; }
  .section { padding-block: 64px; }
  .section-head h2, .editorial-copy h2 { font-size: 42px; }
  .theme-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .theme-grid:not(.collection-grid) .theme-card:last-child { display: flex; }
  .card-cover { padding: 35px 42px 40px; border-radius: 130px 130px 5px 5px; }
  .card-cover .device-phone { width: min(100%,273px); }
  .card-meta { padding-top: 24px; }
  .card-meta h3 { font-size: 33px; }
  .card-meta > p:not(.eyebrow) { font-size: 17px; }
  .collection-tools { gap: 18px; align-items: stretch; }
  .filters { gap: 5px; }
  .filter { font-size: 15px; padding: 10px 13px; }
  .search-label input { width: 100%; }
  .theme-description .button { display: flex; font-size: 16px; }
  .theme-showcase { padding: 38px 38px; }
  .theme-description h1 { font-size: 60px; }
  .editorial-visual { min-height: 750px; padding: 90px 35px; }
  .editorial-device { width: min(100%,275px); }
  .visual-caption { font-size: 19px; bottom: 24px; }
  .occasion-tile { padding: 25px 17px; }
  .occasion-tile p, .occasion-tile > span:last-child, .steps p { font-size: 16px; }
  .occasion-tile h3 { font-size: 27px; }
  .occasion-tile p { min-height: 0; }
  .occasion-grid { grid-template-columns: 1fr; }
  .occasion-story > div:first-child { padding: 38px; }
  .page-intro h1 { font-size: 54px; }
  .footer-top > p { font-size: 26px; }
  .footer-bottom, .footer-bottom > div { font-size: 14px; }
  .footer-top .text-link { font-size: 16px; }
  .enquiry-form { padding: 28px 20px; }
  .form-pair { grid-template-columns: 1fr; gap: 0; }
  .preview-dialog { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .preview-toolbar { padding: 12px 14px; gap: 12px; flex-wrap: wrap; }
  .preview-toolbar .eyebrow { font-size: 10px; margin-bottom: 4px; }
  .preview-toolbar h2 { font-size: 25px; }
  .preview-tools { display: contents; }
  .preview-close { margin-left: auto; padding: 6px 11px; min-height: 44px; gap: 8px; }
  .preview-fullpage { order: 3; width: 100%; font-size: 14px; line-height: 1.4; }
  .preview-body { padding: 0; display: block; }
  .preview-device-slot { height: 100%; width: 100%; max-height: none; aspect-ratio: auto; }
  .preview-device { aspect-ratio: auto; border: 0; padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .preview-device::before, .preview-device .device-side, .preview-device .device-status, .preview-device .device-home, .preview-device .device-screen::after { display: none; }
  .preview-device .device-screen { border: 0; border-radius: 0; }
  .preview-loading { right: 16px; bottom: 12px; background: #faf6ee; padding: 10px; border: 1px solid var(--line); }
  .invitation-v2 { --sample-bar-height: 58px; }
  .invitation-v2 .sample-bar { padding: 8px 16px; gap: 14px; }
  .invitation-v2 .sample-bar a { font-size: 14px; padding-block: 9px; }
  .invitation-v2 .sample-bar > span { display: none; }
  .journey-cover { padding: 32px 25px; }
  .journey-cover > .journey-kicker { max-width: 310px; font-size: 11px; }
  .cover-footnote { font-size: 12px; }
  .cover-guest { font-size: 21px; }
  .journey-nav { justify-content: flex-start; gap: 16px; padding: 6px 16px; scroll-padding-inline: 16px; }
  .journey-nav a { font-size: 15px; flex: 0 0 auto; }
  .journey-section { padding: 58px 22px; scroll-margin-top: calc(var(--sample-offset, var(--sample-bar-height)) + 78px); }
  .journey-section-head h2 { font-size: 40px; }
  .journey-section-head > p:last-child:not(.journey-kicker) { font-size: 17px; }
  .journey-kicker, .guide-grid .journey-kicker { font-size: 12px; }
  .welcome-letter { font-size: 21px; line-height: 1.85; }
  .journey-countdown { padding: 37px 20px; }
  .journey-countdown .countdown { gap: 16px; }
  .journey-countdown .countdown > div { width: 61px; }
  .journey-countdown .countdown strong { font-size: 43px; }
  .journey-countdown .countdown span { font-size: 11px; }
  .story-art > span { font-size: 12px; }
  .journey-event { grid-template-columns: 60px minmax(0,1fr); padding: 24px 18px; gap: 16px; }
  .journey-event .journey-kicker { font-size: 11px; letter-spacing: 1px; }
  .journey-event h3 { font-size: 31px; }
  .journey-event-body > p:not(.journey-kicker) { font-size: 16px; }
  .event-date > span { font-size: 10px; letter-spacing: .4px; }
  .event-date strong { font-size: 34px; }
  .event-facts > span { font-size: 14px; }
  .event-facts svg { width: 17px; height: 17px; margin-top: 2px; }
  .event-buttons { gap: 6px; }
  .event-buttons .journey-link { font-size: 15px; }
  .guide-grid article { padding: 24px 18px; grid-template-columns: 34px minmax(0,1fr); gap: 0 16px; }
  .guide-icon { width: 34px; height: 34px; }
  .guide-grid p:not(.journey-kicker), .journey-faq details p, .story-moment p { font-size: 16px; }
  .guide-grid h3 { font-size: 29px; }
  .journey-faq summary { font-size: 25px; }
  .journey-form label, .journey-form legend, .event-choice > span { font-size: 16px; }
  .journey-form input, .journey-form select, .journey-form textarea { font-size: 16px; }
  .journey-form .form-pair { grid-template-columns: 1fr; }
  .form-demo-note, .event-choice small { font-size: 13px; }
  .invitation-v2 .rsvp-form, .wishes-layout > .journey-form { padding: 25px 19px; }
  .journey-form > .journey-button { font-size: 16px; }
  .journey-brand > span { font-size: 11px; letter-spacing: .7px; }
  .journey-brand small { font-size: 12px; }
}
@media (max-width: 370px) {
  .site-header .brand > span { font-size: 20px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand img { width: 41px; height: 41px; }
  .hero h1 { font-size: 65px; }
  .hero-stage.phone-showcase { min-height: 565px; }
  .hero-device-main { width: 205px; margin-left: 62px; }
  .hero-device-secondary { width: 159px; top: 80px; }
  .showcase-note { display: none; }
  .showcase-label { font-size: 16px; }
  .card-cover { padding-inline: 31px; }
  .device-invite-footer { flex-basis: 70px; }
  .device-open { font-size: 10px; }
  .theme-showcase { padding-inline: 30px; }
  .journey-event { display: block; padding: 23px 19px; }
  .event-date { width: 66px; margin-bottom: 20px; }
  .journey-section { padding-inline: 18px; }
  .journey-countdown .countdown { gap: 9px; }
  .guide-grid article { display: block; }
}
@media (max-height: 620px) and (min-width: 601px) {
  .preview-dialog { width: 100%; height: 100dvh; margin: 0; border-radius: 0; }
  .preview-toolbar { padding-block: 10px; }
  .preview-body { padding: 0; display: block; }
  .preview-aside { display: none; }
  .preview-device-slot { height: 100%; width: 100%; max-height: none; aspect-ratio: auto; }
  .preview-device { aspect-ratio: auto; border: 0; padding: 0; border-radius: 0; box-shadow: none; background: none; }
  .preview-device::before, .preview-device .device-side, .preview-device .device-status, .preview-device .device-home, .preview-device .device-screen::after { display: none; }
  .preview-device .device-screen { border: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .device-phone, .hero-device-main, .hero-device-secondary, .site-header { transition: none; }
  .card-cover:hover .device-phone, .hero-device-main:hover, .hero-device-secondary:hover { transform: none; }
}