/* Shared spacing and type scale; values apply from the narrowest viewport up. */
:root{
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
  --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
  --page-gutter:var(--space-4);--container-width:100%;--section-space:var(--space-8);
  --layout-gap:var(--space-6);--content-gap:var(--space-6);--card-pad:var(--space-5);
  --header-height:64px;--logo-width:64px;--body-size:15px;--display-size:44px;
  --home-display-size:44px;--heading-size:32px;--subheading-size:20px;
  --quote-size:17px;--callout-size:22px;--film-title-size:24px;--hero-height:240px;
  --button-height:48px;--button-size:14px;--grid-columns:1;
}
@media(min-width:390px){:root{
  --page-gutter:var(--space-5);--section-space:var(--space-10);--body-size:15.5px;
  --display-size:48px;--home-display-size:48px;--heading-size:34px;
  --callout-size:24px;--film-title-size:26px;--hero-height:256px;
}}
@media(min-width:430px){:root{
  --page-gutter:var(--space-6);--card-pad:var(--space-6);--header-height:72px;
  --logo-width:72px;--body-size:16px;--display-size:52px;--home-display-size:52px;
  --heading-size:36px;--subheading-size:21px;--quote-size:18px;
  --callout-size:26px;--film-title-size:28px;--hero-height:280px;
}}
@media(min-width:768px){:root{
  --page-gutter:var(--space-8);--container-width:768px;--section-space:var(--space-12);
  --layout-gap:var(--space-8);--content-gap:var(--space-8);--logo-width:80px;
  --display-size:64px;--home-display-size:72px;--heading-size:40px;--subheading-size:22px;
  --callout-size:28px;--film-title-size:32px;--hero-height:360px;
  --button-height:52px;--button-size:15px;--grid-columns:2;
}}
@media(min-width:1024px){:root{
  --page-gutter:var(--space-10);--container-width:1024px;--card-pad:var(--space-8);
  --header-height:80px;--body-size:16.5px;--display-size:76px;--home-display-size:84px;
  --heading-size:44px;--subheading-size:23px;--quote-size:19px;
  --callout-size:30px;--film-title-size:36px;--hero-height:400px;--grid-columns:3;
}}
@media(min-width:1280px){:root{
  --page-gutter:var(--space-12);--container-width:1280px;--section-space:var(--space-16);
  --layout-gap:var(--space-12);--body-size:17px;--display-size:88px;--home-display-size:96px;
  --heading-size:52px;--subheading-size:24px;--quote-size:20px;
  --callout-size:32px;--film-title-size:40px;--hero-height:448px;--button-height:56px;
}}
@media(min-width:1440px){:root{
  --page-gutter:var(--space-16);--container-width:1440px;--header-height:88px;
  --body-size:18px;--display-size:104px;--home-display-size:112px;
  --heading-size:56px;--subheading-size:26px;--quote-size:22px;
  --callout-size:36px;--film-title-size:44px;--hero-height:480px;
}}
html{scrollbar-gutter:stable;scroll-padding-top:calc(var(--header-height) + var(--space-6))}
body{font-size:var(--body-size);line-height:1.65}
main *,footer *{min-inline-size:0}
main :is(h1,h2,h3,p,blockquote,dt,dd,figcaption),footer a{overflow-wrap:anywhere}
body .header{height:var(--header-height);padding-inline:max(var(--page-gutter),calc((100% - var(--container-width)) / 2 + var(--page-gutter)));gap:var(--space-3)}
body .brand{gap:var(--space-3);flex-shrink:0}
body .brand img{width:var(--logo-width);height:28px;display:block;flex-shrink:0}
body .brand span{padding-left:var(--space-3);max-width:none;font-size:12px;line-height:1.25}
body .hero,body .section{max-width:var(--container-width);margin-inline:auto;padding-inline:var(--page-gutter)}
body .hero{padding-block:calc(var(--header-height) + var(--space-6)) 0}
body .section{padding-block:var(--section-space);margin-top:0}
body .hero h1{font-size:var(--display-size);line-height:1.08;letter-spacing:-.055em;max-width:100%;margin:0}
body:not([class]) .hero h1{font-size:var(--home-display-size)}
body .hero h1>span{white-space:normal;max-width:none;margin-top:var(--space-3);line-height:1.3}
body .hero:is(.hub-hero,.create-hero,.photo-hero,.greeting-hero,.photo-story-hero,.prompts-hero) h1>span{font-size:.55em}
body .hero h1 sup{margin-left:var(--space-2)}
body .section h2,body .cta-section h2,body .section .faq-title h2,body .section .how-title h2,body .section .seo-layout h2,body .section .section-heading h2{font-size:var(--heading-size);line-height:1.18;letter-spacing:-.045em;margin:0}
body main [class] h3,body .gallery-grid .card-info h3{font-size:var(--subheading-size);line-height:1.35}
body main [class] p{font-size:var(--body-size);line-height:1.75}
body .hero-intro{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--space-4);margin:var(--space-6) 0}
body .hero-intro p{max-width:65ch;margin:0}
body .hero-meta{gap:var(--space-3);padding-block:var(--space-4);flex-wrap:wrap;align-items:center}
body .hero-meta>a{max-width:100%;text-align:left;line-height:1.6}
body .hero-film,body .hero .hero-film,body .camera-film,body .greeting-film,body .prompt-film{height:var(--hero-height);margin-top:0}
body .hero-film video,body .card-media video{display:block}
body .film-top,body .film-bottom,body .camera-film-caption,body .greeting-film-caption,body .prompt-film-caption{left:var(--space-4);right:var(--space-4);gap:var(--space-4)}
body .film-bottom,body .camera-film-caption,body .greeting-film-caption,body .prompt-film-caption{bottom:var(--space-4);align-items:flex-end}
body main :is(.film-bottom,.camera-film-caption,.greeting-film-caption,.prompt-film-caption)>p{font-size:var(--film-title-size);line-height:1.2;max-width:calc(100% - 44px - var(--space-4))}
body .button{font-size:var(--button-size);line-height:1.3;min-height:var(--button-height);max-width:100%;padding:var(--space-3) var(--space-6);white-space:normal;overflow-wrap:normal;text-align:center;flex-shrink:0}
body .button.small{min-height:44px;font-size:13px;padding:var(--space-3) var(--space-4);min-width:112px;white-space:nowrap}
body .round,body .copy-tool{width:44px;height:44px;flex-shrink:0}
body .section-try,body .gallery-actions{margin-top:var(--content-gap)}
body .hero-intro .button,body .section-try,body .gallery-actions .button{width:100%}
body .choices,body .filters{gap:var(--space-2)}
body .choices button,body .filters button{min-height:44px;padding:var(--space-2) var(--space-4);font-size:14px;line-height:1.4}
body .single-footer{max-width:var(--container-width);margin-inline:auto;padding:var(--space-6) var(--page-gutter);gap:var(--space-3) var(--space-6)}
body .single-footer a{line-height:1.7}
body :is(.section-heading,.create-heading,.photo-heading,.greeting-heading,.story-heading,.prompts-heading){display:block;margin:0 0 var(--content-gap);gap:var(--layout-gap)}
body :is(.section-heading,.create-heading,.photo-heading,.greeting-heading,.story-heading,.prompts-heading)>p{max-width:none;margin-top:var(--space-4)}
body :is(.statement-grid,.comparison-section,.how-layout,.seo-layout,.director-panel,.create-layout,.create-reference,.photo-layout,.greeting-layout,.story-layout,.story-result,.prompt-reference-layout,.prompt-record-layout,.faq-section,.mode-panel){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--layout-gap)}
body :is(.statement-grid,.how-layout){margin-top:0}
body :is(.benefit-row,.gallery-grid,.control-grid,.collection-grid,.camera-grid,.personal-grid,.occasion-grid,.wish-grid,.story-grid,.storyboard,.visual-word-grid,.prompt-key){display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:var(--space-6)}
body :is(.photo-motion-grid,.finish-grid,.story-qc-grid,.vp-example-grid,.refine-pair,.prompt-example-grid,.photo-prompt-grid,.create-prompt-grid){display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
body .benefit-row{margin-top:var(--content-gap);padding-top:var(--space-6)}
body :is(.control-grid,.camera-grid,.finish-grid){padding-top:var(--space-6)}
body .collection-grid{gap:0;margin-top:0}
body :is(.director-panel,.mode-panel){padding:var(--card-pad)}
body .mode-flow{max-width:100%;width:100%;margin:0}
body main :is(.collection-grid,.occasion-grid,.wish-grid,.photo-motion-grid,.prompt-example-grid,.photo-prompt-grid,.create-prompt-grid,.refine-pair,.visual-word-grid)>article,body .prompt-example-card,body .annotated-prompt,body .prompt-record,body .prompt-card{padding:var(--card-pad)}
body main [class] article>p,body .terms-list dd,body .prompt-key dd{margin-top:var(--space-3)}
body main [class] dd{font-size:var(--body-size);line-height:1.75}
body .comparison-copy>p,body .director-copy>p,body .faq-title>p{margin-top:var(--space-4)}
body .statement-grid>p{justify-self:start;max-width:65ch}
body .choice-label{margin:var(--space-6) 0 var(--space-3)}
body main [class] blockquote{font-size:var(--quote-size);line-height:1.7;margin:var(--space-6) 0 0;padding-top:var(--space-6);overflow-wrap:anywhere}
body main blockquote.annotated-prompt{font-size:var(--callout-size);margin:0;padding:var(--card-pad)}
body .prompt-card{transform:none}
body .prompt-card>p:not(.copy-status){font-size:var(--quote-size);margin:var(--space-6) 0;line-height:1.7}
body .prompt-bottom{padding-top:var(--space-6);gap:var(--space-4)}
body .copy-status{min-height:1.5em}
body :is(.seo-lead,.create-lead,.photo-lead,.greeting-lead,.story-lead,.prompt-record-lead){margin-top:var(--space-4);max-width:65ch}
body :is(.seo-footnote,.refine-note,.photo-prompt-note,.prompts-footnote,.hub-table-note,.guide-note,.source-note,.prompt-edit-note,.photo-context){margin-top:var(--space-6)}
body :is(.seo-guidance,.steps,.scene-outline,.photo-review,.greeting-outline,.assembly-list,.terms-list,.prompt-mode-examples)>:is(article,li,div){padding-block:var(--space-6)}
body :is(.seo-guidance,.steps,.scene-outline,.photo-review,.greeting-outline,.assembly-list,.terms-list,.prompt-mode-examples)>:first-child{padding-top:0}
body :is(.create-reference,.greeting-card-image,.story-result,.prompt-key,.story-table-wrap,.camera-film,.greeting-film,.prompt-film){margin-top:var(--content-gap)}
body .story-result{padding-top:var(--content-gap)}
body :is(.create-reference,.greeting-card-image,.prompt-reference-image) img{max-width:100%;height:auto;min-height:0;display:block}
body .greeting-card-image img{max-height:none}
body .prompt-reference-image{position:static;top:auto}
body .storyboard img{max-height:none}
body .gallery-grid .card-media{height:auto;aspect-ratio:16/11}
body .card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
body .card-info{margin-top:var(--space-4);gap:var(--space-3)}
body .compare{width:100%;height:auto;max-height:none;aspect-ratio:1}
body .transition-list article{grid-template-columns:64px minmax(0,1fr);gap:var(--space-4);padding-block:var(--space-6)}
body .transition-mark span{width:36px;height:48px;flex-shrink:0}
body .transition-mark.match span:after{width:16px;height:16px;margin:var(--space-4) auto}
body .prompt-record div{grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding-block:var(--space-4)}
body .prompt-record div:first-child{padding-top:0}
body .prompt-record div:last-child{padding-bottom:0}
body .wide-film{width:calc(min(100%,var(--container-width)) - var(--page-gutter) * 2);height:var(--hero-height);margin:0 auto}
body .wide-content{left:var(--space-6);right:var(--space-6)}
body .wide-content h2{margin:0 0 var(--space-4);font-size:var(--heading-size);line-height:1.18}
body .wide-content .eyebrow{margin-bottom:var(--space-4)}
body .wide-film .round{bottom:var(--space-4);right:var(--space-4)}
body .faq-list summary{font-size:var(--body-size);line-height:1.6;padding-block:var(--space-5);gap:var(--space-4)}
body .faq-list .faq-answer>p{padding:0 0 var(--space-5);font-size:var(--body-size);line-height:1.75}
body .cta-section{padding:var(--section-space) var(--page-gutter)}
body .cta-section>p{max-width:65ch;margin:var(--space-4) auto var(--space-6)}
body .cta-section .button{width:100%;min-width:0}
body :is(.prompt-next-step,.story-next-link){margin-top:var(--space-6);max-width:100%}
body dialog{width:calc(100% - var(--space-8));max-width:960px;max-height:calc(100dvh - var(--space-8));padding:var(--space-4);overflow:auto}
body .dialog-header{margin-bottom:var(--space-4);gap:var(--space-4)}
body .dialog-header h2{font-size:18px;line-height:1.4;overflow-wrap:anywhere}
body .dialog-header .round{width:44px;height:44px}
body .comparison-table-wrap,body .story-table-wrap{overflow:visible;max-width:100%}
body .hub-comparison table,body .story-table{width:100%;min-width:0;table-layout:fixed;overflow-wrap:anywhere}
body .hub-comparison :is(th,td),body .story-table :is(th,td){padding:var(--space-4);font-size:var(--body-size);line-height:1.7}
body [hidden]{display:none!important}
@media(max-width:767px){
  body .wide-film{height:auto;min-height:var(--hero-height)}
  body .wide-content{position:relative;inset:auto;transform:none;padding:var(--space-8) var(--space-6) var(--space-20)}
  body .hub-comparison table,body .story-table{display:flex;flex-direction:column}
  body .hub-comparison thead,body .story-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  body .hub-comparison tbody,body .story-table tbody{display:block;width:100%}
  body .hub-comparison tbody tr,body .story-table tbody tr{display:block;padding:var(--space-4);margin-top:var(--space-4);border:1px solid var(--border);border-radius:8px;background:var(--panel)}
  body .hub-comparison tbody tr:first-child,body .story-table tbody tr:first-child{margin-top:0}
  body .hub-comparison tbody :is(th,td):nth-child(n),body .story-table tbody td:nth-child(n){display:block;width:100%;border:0;padding:0;margin-top:var(--space-4);font-size:var(--body-size)}
  body .hub-comparison tbody th,body .story-table tbody td:first-child{margin-top:0}
  body [data-label]:before{content:attr(data-label);display:block;font-size:12px;font-weight:600;line-height:1.5;margin-bottom:var(--space-2);color:var(--muted)}
  body .story-table caption{display:block;order:2;padding-top:var(--space-4)}
  body .story-qc-grid article{padding-block:var(--space-4)}
  body .hero-meta>span{font-size:10px;letter-spacing:.04em}
}
@media(min-width:768px){
  body .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  body .brand span{font-size:14px}
  body .hero-intro{flex-direction:row;align-items:center;gap:var(--layout-gap);margin-block:var(--content-gap)}
  body .hero-intro p{flex:1}
  body .hero-intro .button,body .section-try,body .gallery-actions .button{width:auto}
  body .cta-section .button{width:auto;min-width:240px}
  body :is(.photo-motion-grid,.finish-grid,.story-qc-grid,.vp-example-grid,.refine-pair){grid-template-columns:repeat(2,minmax(0,1fr))}
  body :is(.benefit-row,.control-grid,.camera-grid,.personal-grid,.occasion-grid,.wish-grid,.story-grid,.storyboard,.visual-word-grid,.prompt-key)>:last-child:nth-child(odd){grid-column:1/-1}
  body .prompt-record div{grid-template-columns:120px minmax(0,1fr);gap:var(--space-6)}
  body .transition-list article{grid-template-columns:96px minmax(0,1fr);gap:var(--space-6)}
  body .transition-mark span{width:48px;height:64px}
  body .transition-mark.match span:after{margin:var(--space-6) auto}
}
@media(min-width:1024px){
  body .brand span{font-size:16px}
  body :is(.section-heading,.create-heading,.photo-heading,.greeting-heading,.story-heading,.prompts-heading){display:flex;align-items:flex-end}
  body :is(.section-heading,.create-heading,.photo-heading,.greeting-heading,.story-heading,.prompts-heading)>h2{flex:1}
  body :is(.section-heading,.create-heading,.photo-heading,.greeting-heading,.story-heading,.prompts-heading)>p{flex:0 1 32ch;max-width:32ch;margin:0}
  body :is(.statement-grid,.comparison-section,.how-layout,.seo-layout,.director-panel,.create-layout,.create-reference,.photo-layout,.greeting-layout,.story-layout,.story-result,.prompt-reference-layout,.prompt-record-layout,.faq-section,.mode-panel){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  body :is(.prompt-example-grid,.photo-prompt-grid,.create-prompt-grid){grid-template-columns:repeat(3,minmax(0,1fr))}
  body :is(.benefit-row,.control-grid,.camera-grid,.personal-grid,.occasion-grid,.wish-grid,.story-grid,.storyboard,.visual-word-grid,.prompt-key)>:last-child:nth-child(odd){grid-column:auto}
  body .prompt-reference-image{position:sticky;top:calc(var(--header-height) + var(--space-6))}
  body .film-bottom,body .camera-film-caption,body .greeting-film-caption,body .prompt-film-caption{left:var(--space-8);right:var(--space-8);bottom:var(--space-6)}
}
@media(prefers-reduced-motion:reduce){body .prompt-example-card:hover,body .button:hover{transform:none}}