/* Homepage presentation is scoped; editor and recipient styles stay independent. */
#home-view[hidden], #home-view [hidden] { display: none !important; }
#home-view { --purple: var(--mw-violet-action); --muted: #615f76; --line: #dedfec; --white: #fff; background: #f5f6fc; color: #25243b; }
#home-view :focus-visible, .homepage-header :focus-visible { outline: 3px solid var(--mw-violet-action); outline-offset: 5px; }
#home-view .hero :focus-visible { outline-color: #edbcff; }
/* Keep route focus for assistive technology without framing the static hero title. */
#home-view #home-heading:focus { outline: none; }
.homepage-header { --header-accent: #6845a6; --header-hover: #492780; --header-line: #e3dcef; display: grid; grid-template-columns: auto minmax(max-content, 1fr) auto; gap: 28px; column-gap: 48px; max-width: none; padding: 16px max(5%, calc((100% - 1136px) / 2)); border-bottom: 1px solid var(--header-line); background: #fff; color: #30273b; }
.homepage-header .brand { justify-self: start; min-height: 44px; font-size: 26px; font-weight: 800; letter-spacing: -.015em; color: var(--header-accent); white-space: nowrap; }
.homepage-header nav { display: contents; }
#homepage-navigation { display: flex; align-items: center; justify-content: flex-start; gap: 28px; font-size: 16px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.homepage-header .header-actions { display: flex; justify-self: end; align-items: center; gap: 20px; font-size: 16px; font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
#homepage-navigation > a, .homepage-header .nav-login { display: inline-flex; align-items: center; min-height: 44px; color: var(--header-accent); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 7px; transition: color .2s, text-decoration-color .2s; }
#homepage-navigation > a:is(:hover, :focus-visible), .homepage-header .nav-login:is(:hover, :focus-visible) { color: var(--header-hover); text-decoration-color: currentColor; }
#homepage-navigation > a[aria-current="page"] { color: var(--mw-pink); text-decoration-color: currentColor; }
body:is([data-route="templates"], [data-route="plans"], [data-route="account"]) .homepage-header { --header-accent: #d6c1ff; --header-hover: #f2e5ff; --header-line: #ffffff1f; background: var(--mw-night); color: #f6f3ff; }
body:is([data-route="templates"], [data-route="plans"], [data-route="account"]) .homepage-header :focus-visible { outline-color: var(--mw-pink); }
.homepage-header .button { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.homepage-header .menu-toggle { display: none; border: 1px solid var(--header-line); background: #f5f0fc; color: var(--header-accent); border-radius: 12px; min-width: 44px; min-height: 44px; padding: 8px 12px; align-items: center; justify-content: center; gap: 8px; }
.homepage-header .menu-toggle:is(:hover, :focus-visible) { color: var(--header-hover); border-color: var(--header-accent); }
.homepage-header .menu-icon { font-size: 20px; line-height: 1; }
.homepage-header .menu-label { font-size: 14px; font-weight: 600; }
.homepage-header #homepage-navigation .mobile-auth-link { display: none; }
body:is([data-route="home"], [data-route="login"], [data-route="register"], [data-route="forgot-password"], [data-route="reset-password"], [data-route="auth-callback"]) .homepage-header { --header-accent: #d6c1ff; --header-hover: #f2e5ff; --header-line: #ffffff1f; background: var(--mw-night); color: #f6f3ff; }
body:is([data-route="home"], [data-route="login"], [data-route="register"], [data-route="forgot-password"], [data-route="reset-password"], [data-route="auth-callback"]) .homepage-header :focus-visible { outline-color: #dcb4ff; }
#home-view .button, .homepage-header .button { border-radius: 12px; }
#home-view .button.primary, .homepage-header .button.primary { color: var(--mw-pearl); background: var(--mw-gradient-primary) 0 0 / 200% 100%; border-color: transparent; box-shadow: var(--mw-shadow-primary); }
#home-view .button.primary:hover, .homepage-header .button.primary:hover { background-position: 100% 0; filter: brightness(1.06); }
#home-view .button.secondary { color: #5933b9; border-color: #cec4ed; background: #eeebfa; }
#home-view .button.secondary:hover { background: #e4ddf7; }
#home-view .section-wrap { max-width: 1280px; padding-block: 48px; }
#home-view .hero { max-width: none; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; padding: 40px max(5%, calc((100% - 1136px) / 2)); text-align: left; color: #fff; background: radial-gradient(ellipse at 83% 34%, #61359680, transparent 50%), radial-gradient(ellipse at 8% 0%, #34336680, transparent 55%), #17172f; }
@media (min-width: 801px) {
  #home-view .hero-copy { align-self: start; padding-top: 16px; }
}
#home-view .hero .eyebrow { color: #d2c2fa; font-size: 10px; letter-spacing: .1em; margin-bottom: 20px; }
#home-view .hero .tiny-flower { color: #e7a9ee; }
#home-view .hero h1 { font-family: var(--sans); font-weight: 800; font-size: clamp(38px, 4vw, 56px); line-height: 1.12; letter-spacing: -.04em; margin-bottom: 20px; }
#home-view .hero h1 em { display: block; font-family: inherit; font-style: normal; font-weight: inherit; color: #e8a5f5; }
#home-view .hero h1 em::after { display: none; }
#home-view .hero-description { color: #d5d3e7; font-size: 16px; max-width: 420px; line-height: 1.65; margin: 0 0 24px; padding: 0; }
#home-view .hero .button-row { justify-content: flex-start; gap: 12px; }
#home-view .hero .button.secondary { color: #f4efff; border-color: #7c699f; background: #ffffff09; }
#home-view .hero .button.secondary:hover { background: #ffffff15; }
#home-view .hero-note { color: #c0bdd5; font-size: 12px; margin-top: 16px; max-width: 430px; }
#home-view .gift-demo { display: block; width: 100%; height: 400px; margin: 0; background: radial-gradient(ellipse at 55% 40%, #975bc133, #ffffff03 75%); border: 1px solid #c6a2ed38; border-radius: 24px; color: var(--ink); transform: none; perspective: none; transition: border-color .2s, box-shadow .2s; }
#home-view .gift-demo:hover { border-color: #cfaaee80; box-shadow: 0 16px 50px #0b0b252b; }
#home-view .demo-label { position: absolute; left: 24px; top: 20px; color: #e0d0f9; font-size: 9px; font-weight: 750; letter-spacing: .12em; }
#home-view .gift-demo .art-orbit { width: 88%; left: 6%; top: 14%; height: 65%; border-color: #c8a3e82b; }
#home-view .gift-demo .orbit-two { transform: rotate(34deg); height: 67%; }
#home-view .gift-demo .spark-one { left: 7%; top: 30%; color: #d1adf1; font-size: 28px; }
#home-view .gift-demo .spark-two { right: 6%; bottom: 25%; font-size: 40px; }
/* Position, pointer tilt and float each own a transform; 3D ancestors never flatten. */
#home-view .gift-composition { width: 380px; height: 280px; top: 38px; left: 50%; transform: translateX(-50%); transform-style: preserve-3d; perspective: 900px; animation: none; pointer-events: none; }
#home-view .gift-tilt, #home-view .gift-float { position: absolute; inset: 0; transform-style: preserve-3d; }
#home-view .gift-tilt { transform: rotateX(var(--gift-tilt-x, 0deg)) rotateY(var(--gift-tilt-y, 0deg)); }
#home-view .gift-light { position: absolute; inset: 10px -20px -5px; border-radius: 50%; background: radial-gradient(ellipse at 45% 65%, #ffce9d45, transparent 47%), radial-gradient(ellipse at 68% 35%, #b26dff55, transparent 60%); }
#home-view .gift-shadow { position: absolute; width: 235px; height: 45px; left: 100px; bottom: 14px; border-radius: 50%; background: radial-gradient(ellipse, #06061980, transparent 70%); transform: rotate(-7deg); }
#home-view .gift-frame { position: absolute; padding: 7px 7px 18px; border: 1px solid #fff5e8; border-radius: 5px; background: linear-gradient(145deg, #fffbf4, #e9dfd7); box-shadow: 2px 3px 0 #a292ae, 0 12px 24px #09091d4d; }
#home-view .gift-frame img { display: block; width: 100%; object-fit: cover; border-radius: 2px; }
#home-view .gift-frame--sunset { width: 120px; left: 38px; top: 35px; transform: translateZ(30px) rotateY(12deg) rotateZ(-16deg); }
#home-view .gift-frame--sunset img { height: 130px; }
#home-view .gift-frame--sunset span { display: block; color: #655167; font: italic 9px var(--serif); margin-top: 7px; text-align: center; }
#home-view .gift-frame--flowers { width: 100px; left: 245px; top: 22px; transform: translateZ(-20px) rotateY(-18deg) rotateZ(14deg); }
#home-view .gift-frame--flowers img { height: 100px; }
#home-view .gift-frame--confetti { width: 90px; left: 285px; top: 126px; transform: translateZ(15px) rotateY(-20deg) rotateZ(19deg); }
#home-view .gift-frame--confetti img { height: 90px; }
#home-view .gift-note { position: absolute; left: 150px; top: 9px; width: 115px; padding: 15px 12px 10px; border: 1px solid #fff0d5; border-radius: 4px; background: linear-gradient(140deg, #fff4df, #eed3b4); color: #674269; box-shadow: 2px 3px 0 #c8aa9d, 0 8px 20px #160b2633; transform: translateZ(-35px) rotateZ(-5deg); }
#home-view .gift-note > span:first-child { display: block; font-size: 6px; letter-spacing: .08em; margin-bottom: 10px; }
#home-view .gift-note strong { display: block; font: 19px/1.08 var(--serif); }
#home-view .gift-note em { color: #a4567e; }
#home-view .gift-note .paper-heart { padding-top: 3px; font-size: 23px; color: #a4567e; }
#home-view .gift-box { position: absolute; left: 115px; top: 118px; width: 180px; height: 110px; transform-style: preserve-3d; transform: rotateX(-22deg) rotateY(-30deg) rotateZ(-7deg); }
#home-view .gift-face, #home-view .gift-lid { position: absolute; left: 0; top: 0; width: 180px; height: 110px; border: 1px solid #dca2ed55; backface-visibility: hidden; background: #8550aa; }
#home-view .gift-face--front { transform: translateZ(62px); background: linear-gradient(110deg, #d3a1da, #b576cc 55%, #a16bc2); box-shadow: inset 0 3px 9px #5c2e8233; }
#home-view .gift-face--front::before, #home-view .gift-face--back::before { content: ''; position: absolute; inset: 0 auto 0 69px; width: 42px; background: linear-gradient(90deg, #ca945a, #ffe4ad 35%, #f4c98c 70%, #d4a56f); box-shadow: 2px 0 5px #663b6b33; }
#home-view .gift-face--front > span { position: absolute; bottom: 13px; left: 18px; right: 18px; padding: 5px 3px; border: 1px solid #ead2e6; border-radius: 4px; background: #f9e9f2; color: #754d80; text-align: center; font: italic 11px var(--serif); }
#home-view .gift-face--back { transform: translateZ(-62px) rotateY(180deg); }
#home-view .gift-face--right, #home-view .gift-face--left { width: 124px; left: 28px; background: linear-gradient(120deg, #9260b5, #653f8d); }
#home-view .gift-face--right { transform: translateX(90px) rotateY(90deg); }
#home-view .gift-face--left { transform: translateX(-90px) rotateY(-90deg); }
#home-view .gift-face--top, #home-view .gift-face--bottom { height: 124px; top: -7px; }
#home-view .gift-face--top { transform: translateY(-55px) rotateX(90deg); }
#home-view .gift-face--bottom { transform: translateY(55px) rotateX(-90deg); }
#home-view .gift-lid { width: 190px; height: 18px; left: -5px; top: -16px; }
#home-view .gift-lid--front { transform: translateZ(67px); background: linear-gradient(90deg, #e6bce7, #c490d6); box-shadow: inset 0 2px #ffe2f2, 0 4px 0 #4f2b7340; }
#home-view .gift-lid--right { width: 134px; left: 23px; transform: translateX(95px) rotateY(90deg); background: linear-gradient(90deg, #ad7dc4, #8150a0); }
#home-view .gift-lid--top { height: 134px; top: -12px; transform: translateY(-71px) rotateX(90deg); background: linear-gradient(90deg, transparent 39%, #f5cd96 39%, #ffe6b8 50%, #d9a36c 61%, transparent 61%), linear-gradient(0deg, transparent 35%, #eaba83 35%, #ffe2ae 50%, #f5cd96 65%, transparent 65%), linear-gradient(135deg, #f5d5ed, #c697dc); box-shadow: inset 0 0 0 1px #ffe7f5; }
#home-view .gift-lid--front::after { content: ''; position: absolute; inset: 0 auto 0 74px; width: 42px; background: linear-gradient(90deg, #ddb079, #ffe6b5, #dfb077); }
#home-view .gift-bow { position: absolute; left: 56px; top: -48px; width: 68px; height: 35px; transform: translateZ(7px) rotateX(15deg); transform-style: preserve-3d; }
#home-view .gift-bow i { position: absolute; width: 40px; height: 29px; border: 6px solid #f5d09a; border-radius: 65% 65% 45% 45%; box-shadow: inset 1px 2px 0 #a8764c, 1px 2px 0 #ffe8bc; transform: rotate(-28deg) rotateY(-18deg); }
#home-view .gift-bow i:nth-child(2) { right: 0; transform: rotate(28deg) rotateY(18deg); }
#home-view .gift-bow > span { position: absolute; left: 27px; top: 15px; width: 18px; height: 18px; border-radius: 6px; background: linear-gradient(90deg, #dba96e, #ffe2ac, #eabd85); color: #aa764e; font-size: 15px; text-align: center; transform: translateZ(7px); }
#home-view .gift-heart { position: absolute; width: 25px; height: 25px; }
#home-view .gift-heart--one { left: 17px; top: 189px; transform: translateZ(35px) rotateZ(-16deg); }
#home-view .gift-heart--two { left: 340px; top: 62px; transform: translateZ(20px) rotateZ(18deg) scale(.7); }
#home-view .gift-heart i { display: block; position: relative; width: 22px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, #ffc7cb, #de799c); transform: rotate(-45deg); box-shadow: -3px 3px 0 #9b477c, -6px 8px 12px #100b2933; }
#home-view .gift-heart i::before, #home-view .gift-heart i::after { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #f2a5b7; }
#home-view .gift-heart i::before { top: -11px; background: linear-gradient(135deg, #ffd3ce, #f2a5b7); }
#home-view .gift-heart i::after { left: 11px; }
@keyframes hero-gift-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (min-width: 801px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #home-view .gift-demo[data-motion="active"] .gift-float { animation: hero-gift-float 6s ease-in-out infinite; }
}
#home-view .demo-open { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 16px; white-space: nowrap; border: 1px solid #c4afe8; min-height: 44px; padding: 9px 18px; border-radius: 12px; background: #f3ecff; font-size: 13px; font-weight: 700; color: #4f2c97; box-shadow: 0 5px 20px #0e0c261c; }
#home-view .demo-open > span { font-size: 18px; }
#home-view .demo-caption { position: absolute; bottom: 12px; left: 0; width: 100%; text-align: center; font-size: 10px; color: #c8bfdc; }
#home-view .templates-section { border-top: 0; }
#home-view .section-heading { margin-bottom: 22px; align-items: center; }
#home-view .section-heading h2, #home-view .how-section h2, #home-view .faq-section h2 { font: 750 clamp(30px, 2.8vw, 40px)/1.15 var(--sans); letter-spacing: -.04em; }
#home-view .section-heading h2 em, #home-view .how-section h2 em, #home-view .faq-section h2 em { font: inherit; color: var(--mw-violet-action); }
#home-view .section-heading .eyebrow { margin-bottom: 10px; }
#home-view .resume-draft { flex-shrink: 0; }
#home-view .catalog-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-bottom: 24px; }
#home-view .occasion-filters { display: flex; flex-wrap: wrap; gap: 8px; }
#home-view .occasion-filters button { min-height: 44px; border: 1px solid #dedfec; background: var(--white); padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 600; }
#home-view .occasion-filters button:hover { border-color: var(--purple); }
#home-view .occasion-filters button[aria-pressed="true"] { color: var(--white); background: var(--mw-violet-action); border-color: var(--mw-violet-action); }
#home-view .availability-filter { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 13px; cursor: pointer; margin-left: auto; }
#home-view .availability-filter input { width: 18px; height: 18px; accent-color: var(--purple); }
#home-view #catalog-status { flex-basis: 100%; margin: 0; font-size: 12px; }
#home-view .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
#home-view .template-card { display: block; border: 1px solid #dedfec; border-radius: 20px; padding: 10px; background: var(--white); box-shadow: 0 8px 24px #25243b06; }
#home-view .template-card[data-available="false"] { background: #f0f1f8; border-style: dashed; box-shadow: none; }
#home-view .template-art { height: 290px; border-radius: 12px; }
#home-view a.template-art:hover { transform: none; }
#home-view .circle-arrow { color: #4f2c97; }
#home-view .art-label { font-size: 10px; letter-spacing: .08em; color: var(--ink); background: #fffdf8ee; border: none; padding: 6px 11px; }
#home-view .template-polaroid { width: 175px; left: 13%; top: 50px; }
#home-view .template-polaroid img { height: 178px; }
#home-view .admiration-word { font-size: 47px; top: 113px; right: 8%; }
#home-view .template-info { padding: 20px 14px 12px; }
#home-view .template-info .tags { margin-bottom: 10px; }
#home-view .tags span { font-size: 11px; padding: 3px 10px; background: #eeeafa; color: #5933b9; }
#home-view .template-info h3 { font-size: 22px; margin-bottom: 8px; }
#home-view .template-info p { min-height: 0; font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
#home-view .card-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
#home-view .card-actions .button { min-height: 46px; padding: 10px 18px; }
#home-view .card-actions .text-link { font-size: 13px; }
#home-view .future-label { font-size: 12px; padding: 10px 0; }
#home-view .birthday-art { background: radial-gradient(ellipse at 50% 25%, #664277, #231b35 85%); }
#home-view .album-preview { display: flex; position: absolute; top: 50px; left: 15%; width: 70%; height: 155px; transform: rotate(-7deg); border-radius: 5px 12px 12px 5px; box-shadow: 8px 12px 0 #100d2270, 0 20px 36px #110c2350; }
#home-view .album-page { width: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 12px; background: #faf0df; color: #5b3a54; }
#home-view .album-page:first-child { border-radius: 5px 0 0 5px; border-right: 1px solid #cbbbae; background: linear-gradient(90deg, #fff6e7 90%, #d8c9b8); }
#home-view .album-page:last-child { border-radius: 0 5px 5px 0; background: linear-gradient(90deg, #decdbb, #fff6e7 10%); }
#home-view .album-page img { width: 100%; height: 98px; object-fit: cover; border: 5px solid #fffdf8; box-shadow: 0 3px 8px #30273b18; }
#home-view .album-page > span:last-child { font: italic 10px var(--serif); text-align: center; }
#home-view .album-page strong { font: 25px/1.1 var(--serif); text-align: center; }
#home-view .album-page em { color: #a43e2b; }
#home-view .album-heart { font-size: 30px; color: #a43e2b; line-height: 1; }
#home-view .album-star { position: absolute; top: 50px; right: 10%; font-size: 30px; color: #f5d579; }
#home-view .birthday-word { bottom: 25px; left: 24px; font: 18px var(--serif); max-width: calc(100% - 90px); }
#home-view .birthday-word em { font-size: inherit; }
#home-view .planet { width: 110px; height: 110px; top: 62px; left: 43%; }
#home-view .planet-orbit { width: 250px; left: 27%; top: 88px; }
#home-view .universe-word { font-size: 34px; }
#home-view .story-word { font-size: 42px; }
#home-view .catalog-note { font-size: 12px; margin: 24px 0 0; }
#home-view .catalog-empty { text-align: center; padding: 36px 24px; border: 1px dashed #bcb0df; border-radius: 20px; background: #eeebfa; }
#home-view .catalog-empty > span { color: var(--coral-dark); font-size: 32px; }
#home-view .catalog-empty h3 { margin: 12px 0; font-size: 20px; }
#home-view .catalog-empty p { font-size: 14px; }
#home-view .how-section { max-width: 1150px; padding: 36px 4%; border: 1px solid #e1def2; border-radius: 20px; background: #eeebfa; }
#home-view .how-section h2 { margin-bottom: 32px; }
#home-view .how-section .eyebrow { margin-bottom: 16px; }
#home-view .steps-grid { gap: 36px; margin: 0; }
#home-view .step-number { margin-bottom: 16px; border: 0; border-radius: 12px; background: var(--mw-violet-action); color: #fff; font: 700 16px var(--sans); }
#home-view .steps-grid article:nth-child(2) .step-number { background: #733ac5; }
#home-view .steps-grid article:nth-child(3) .step-number { background: #4b49ba; }
#home-view .steps-grid h3 { font-size: 17px; margin-bottom: 8px; }
#home-view .steps-grid p { font-size: 14px; line-height: 1.65; margin: 0; }
#home-view .faq-section { grid-template-columns: 1fr 1.5fr; gap: 54px; }
#home-view .faq-section h2 { margin-bottom: 18px; }
#home-view .faq-section > div > p:not(.eyebrow) { max-width: 260px; font-size: 14px; }
#home-view .faq-list summary { font-size: 15px; padding-block: 20px; }
#home-view .faq-list p { font-size: 14px; }
.homepage-footer { max-width: none; padding: 28px max(5%, calc((100% - 1136px) / 2)); gap: 32px; background: #f5f6fc; }
.homepage-footer .brand-mark { color: #7040db; }
.homepage-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 12px; }
.homepage-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.homepage-footer nav a:hover { color: var(--purple); text-decoration: underline; text-underline-offset: 4px; }
.homepage-footer > span { font-size: 11px; }
body[data-route="public"] .homepage-header .header-actions { display: none; }
@media (max-width: 1100px) {
  .homepage-header { grid-template-columns: auto minmax(max-content, 1fr) auto; gap: 16px; column-gap: 40px; padding-inline: 3%; }
  .homepage-header .brand { font-size: 21px; }
  .homepage-header .header-actions { gap: 12px; font-size: 14px; }
  .homepage-header .button { font-size: 14px; padding-inline: 12px; }
  #homepage-navigation { gap: 16px; font-size: 15px; }
  #home-view .hero { gap: 28px; }
  #home-view .gift-demo { height: 380px; }
  #home-view .gift-composition { top: 34px; transform: translateX(-50%) scale(.84); }
  #home-view .admiration-word { font-size: 40px; right: 5%; }
  #home-view .template-polaroid { left: 8%; width: 155px; }
  #home-view .availability-filter { margin-left: 0; }
}
@media (min-width: 801px) and (max-width: 900px) {
  .homepage-header { padding-inline: 2%; gap: 14px; }
  #home-view .gift-composition { transform: translateX(-50%) scale(.74); }
}
@media (max-width: 800px) {
  .homepage-header { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 5%; }
  .homepage-header .header-actions { grid-column: 2; grid-row: 1; }
  .homepage-header.is-enhanced .menu-toggle { display: inline-flex; }
  .homepage-header .header-actions > a { display: none; }
  .homepage-header #homepage-navigation .mobile-auth-link { display: inline-flex; }
  body:is([data-route="home"], [data-route="login"], [data-route="register"], [data-route="forgot-password"], [data-route="reset-password"], [data-route="auth-callback"]) .homepage-header .menu-toggle { background: #24223f; border-color: #756590; }
  body:is([data-route="home"], [data-route="login"], [data-route="register"], [data-route="forgot-password"], [data-route="reset-password"], [data-route="auth-callback"]) #homepage-navigation a:hover { background: #342c50; }
  #homepage-navigation { grid-column: 1 / -1; grid-row: 2; flex-direction: column; align-items: stretch; gap: 0; font-size: 16px; padding: 8px 0; border-top: 1px solid var(--header-line); }
  .homepage-header.is-enhanced #homepage-navigation { display: none; }
  .homepage-header.is-enhanced.menu-open #homepage-navigation { display: flex; }
  .homepage-header .nav-templates { display: inline-flex; }
  #homepage-navigation a { padding: 12px; min-height: 48px; border-radius: 10px; }
  #homepage-navigation a:hover { background: #eeebfa; }
  #homepage-navigation .nav-plans { gap: 14px; padding: 0 12px; flex-wrap: wrap; }
  #homepage-navigation .nav-plans button { min-height: 48px; }
  #plans-tooltip { position: static; transform: none; visibility: visible; border: 0; padding: 0; background: transparent; color: var(--header-accent); white-space: normal; }
  body:is([data-route="templates"], [data-route="plans"], [data-route="account"]) .homepage-header .menu-toggle { background: #24223f; border-color: #756590; }
  body:is([data-route="templates"], [data-route="plans"], [data-route="account"]) #homepage-navigation a:hover { background: #342c50; }
  .homepage-header .header-actions { gap: 16px; }
  #home-view .hero { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  #home-view .hero-copy { max-width: 580px; width: 100%; margin: auto; }
  #home-view .hero-copy .eyebrow { justify-content: flex-start; }
  #home-view .hero h1 { font-size: clamp(36px, 8.5vw, 52px); }
  #home-view .hero-description { max-width: 470px; }
  #home-view .gift-demo { max-width: 580px; height: 380px; margin: auto; }
  #home-view .section-wrap:not(.hero) { padding-block: 36px; }
  #home-view .section-heading { display: flex; flex-wrap: wrap; gap: 12px; }
  #home-view .template-grid { gap: 18px; }
  #home-view .template-art { height: 260px; }
  #home-view .template-polaroid { width: 38%; top: 66px; left: 5%; transform: rotate(-7deg); }
  #home-view .template-polaroid img { height: 140px; }
  #home-view .admiration-word { font-size: 28px; right: 5%; top: 100px; width: 48%; }
  #home-view .album-preview { top: 48px; height: 125px; left: 10%; width: 80%; }
  #home-view .album-page { padding: 8px; }
  #home-view .album-page img { height: 73px; }
  #home-view .album-page strong { font-size: 20px; }
  #home-view .album-page > span:last-child { font-size: 8px; }
  #home-view .birthday-word { font-size: 16px; left: 18px; bottom: 15px; }
  #home-view .planet { left: 40%; width: 90px; height: 90px; }
  #home-view .planet-orbit { width: 190px; left: 18%; }
  #home-view .universe-word { font-size: 26px; left: 20px; }
  #home-view .story-word { font-size: 32px; }
  #home-view .template-info { padding-inline: 8px; }
  #home-view .card-actions { gap: 6px 14px; }
  #home-view .how-section { border-radius: 0; border-inline: 0; padding-inline: 5%; }
  #home-view .steps-grid { gap: 20px; }
  #home-view .faq-section { grid-template-columns: 1fr; gap: 18px; }
  #home-view .faq-section > div > p:not(.eyebrow) { max-width: none; }
  .homepage-footer { gap: 8px 28px; }
}
@media (max-width: 540px) {
  .homepage-header { gap: 8px; }
  .homepage-header .brand { font-size: 22px; }
  .homepage-header .header-actions { gap: 12px; font-size: 13px; }
  .homepage-header .menu-label { display: none; }
  #home-view .hero { padding-block: 18px; gap: 16px; }
  #home-view .hero .eyebrow { font-size: 8px; letter-spacing: .07em; margin-bottom: 12px; gap: 7px; }
  #home-view .hero h1 { font-size: clamp(30px, 8.5vw, 46px); margin-bottom: 16px; }
  #home-view .hero-description { font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
  #home-view .hero .button { min-height: 48px; font-size: 12px; padding: 10px 12px; gap: 8px; flex: 1; }
  #home-view .hero .button-row { flex-direction: row; flex-wrap: nowrap; align-items: stretch; padding: 0; gap: 8px; }
  #home-view .hero-note { font-size: 11px; margin-top: 12px; }
  #home-view .gift-demo { height: 280px; border-radius: 18px; }
  #home-view .demo-label { left: 16px; top: 14px; font-size: 8px; }
  #home-view .gift-composition { top: 28px; transform: translateX(-50%) scale(.65); transform-origin: center top; }
  #home-view .gift-box { top: 110px; }
  #home-view .gift-demo .spark-two { right: 4%; bottom: 24%; font-size: 32px; }
  #home-view .demo-open { font-size: 12px; padding-inline: 16px; bottom: 30px; }
  #home-view .demo-caption { bottom: 8px; font-size: 10px; }
  #home-view .section-wrap:not(.hero) { padding-block: 28px; }
  #home-view .section-heading { gap: 4px; margin-bottom: 12px; }
  #home-view .section-heading h2, #home-view .how-section h2, #home-view .faq-section h2 { font-size: 29px; }
  #home-view .occasion-filters { gap: 6px; }
  #home-view .occasion-filters button { padding-inline: 10px; font-size: 12px; }
  #home-view .catalog-controls { gap: 8px; }
  #home-view .availability-filter { width: 100%; }
  #home-view .template-grid { grid-template-columns: 1fr; gap: 18px; }
  #home-view .template-art { height: 280px; }
  #home-view .template-polaroid { width: 38%; top: 60px; left: 5%; }
  #home-view .template-polaroid img { height: 163px; }
  #home-view .admiration-word { font-size: clamp(26px, 8vw, 36px); right: 5%; top: 96px; }
  #home-view .album-preview { height: 140px; top: 50px; width: 76%; left: 12%; }
  #home-view .album-page img { height: 88px; }
  #home-view .album-page strong { font-size: 22px; }
  #home-view .birthday-word { font-size: 16px; bottom: 22px; }
  #home-view .universe-word { font-size: 31px; }
  #home-view .planet { top: 65px; left: 42%; width: 105px; height: 105px; }
  #home-view .planet-orbit { width: 225px; left: 20%; }
  #home-view .story-word { font-size: 38px; }
  #home-view .template-info { padding: 18px 10px 12px; }
  #home-view .template-info h3 { font-size: 21px; }
  #home-view .steps-grid { grid-template-columns: 1fr; gap: 24px; }
  #home-view .steps-grid article { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
  #home-view .step-number { grid-row: span 2; margin: 0; }
  #home-view .how-section { text-align: left; }
  #home-view .how-section .eyebrow { justify-content: flex-start; }
  #home-view .faq-list summary { font-size: 14px; }
  .homepage-footer { align-items: flex-start; flex-direction: column; }
  .homepage-footer nav { gap: 8px 20px; }
}
@media (max-width: 360px) {
  .homepage-header .brand { font-size: 20px; }
  .homepage-header .header-actions { gap: 9px; }
  .homepage-header .menu-toggle { padding-inline: 10px; }
  #home-view .hero .button-row { flex-direction: column; }
  #home-view .gift-composition { transform: translateX(-50%) scale(.59); }
  #home-view .album-page strong { font-size: 21px; }
}