/* Shared spacing scale and seven responsive size ranges. */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --page: 16px;
  --header-height: 64px;
  --hero-size: 36px;
  --hero-subtitle: 24px;
  --heading-size: 30px;
  --subheading-size: 20px;
  --body-size: 16px;
  --brand-size: 20px;
  --section-space: var(--space-6);
  --heading-gap: var(--space-5);
  --layout-gap: var(--space-5);
  --card-padding: var(--space-4);
  --film-height: 256px;
  --detail-height: 256px;
  --button-height: 44px;
  --button-font: 14px;
  --prompt-result-height: 224px;
}
@media (min-width:375px) {
  :root { --page:24px; --hero-size:38px; --hero-subtitle:26px; --heading-size:32px; --subheading-size:21px; --brand-size:22px; --section-space:var(--space-7); --film-height:280px; --detail-height:280px; --prompt-result-height:208px; }
}
@media (min-width:414px) {
  :root { --hero-size:42px; --hero-subtitle:28px; --heading-size:34px; --subheading-size:22px; --section-space:var(--space-8); --heading-gap:var(--space-6); --card-padding:var(--space-5); --film-height:304px; --detail-height:304px; --button-height:48px; --prompt-result-height:192px; }
}
@media (min-width:768px) {
  :root { --page:32px; --header-height:72px; --hero-size:50px; --hero-subtitle:34px; --heading-size:42px; --subheading-size:24px; --brand-size:23px; --layout-gap:var(--space-6); --film-height:352px; --detail-height:352px; --button-font:15px; --prompt-result-height:144px; }
}
@media (min-width:1024px) {
  :root { --page:48px; --header-height:80px; --hero-size:60px; --hero-subtitle:40px; --heading-size:48px; --subheading-size:26px; --brand-size:24px; --section-space:var(--space-9); --film-height:384px; --detail-height:384px; --prompt-result-height:192px; }
}
@media (min-width:1280px) {
  :root { --page:64px; --hero-size:68px; --hero-subtitle:46px; --heading-size:56px; --subheading-size:28px; --body-size:17px; --heading-gap:var(--space-7); --layout-gap:var(--space-7); --card-padding:var(--space-6); --film-height:432px; --detail-height:432px; --prompt-result-height:176px; }
}
@media (min-width:1440px) {
  :root { --page:max(64px,calc((100vw - 1312px)/2)); --hero-size:76px; --hero-subtitle:52px; --heading-size:62px; --section-space:var(--space-10); --layout-gap:var(--space-8); --film-height:480px; --detail-height:480px; --button-height:56px; --prompt-result-height:160px; }
}
html { scrollbar-gutter:stable; scroll-padding-top:calc(var(--header-height) + var(--space-4)); }
body { min-width:0; }
body .header { height:var(--header-height); padding-inline:var(--page); gap:var(--space-4); }
body .brand { gap:var(--space-3); min-width:0; }
body .brand img { width:28px; height:auto; flex:none; }
body .brand b { font-size:var(--brand-size); }
body .brand small { font-size:12px; }
body .button, body .prompt-actions .button { min-height:var(--button-height); padding:var(--space-3) var(--space-5); font-size:var(--button-font); line-height:1.25; max-width:100%; white-space:normal; text-align:center; }
body .header .button-small { min-height:44px; padding:var(--space-3) var(--space-4); font-size:14px; flex:none; }
body .button:hover { transform:translateY(-2px); }
body .hero, body .hub-hero { padding-bottom:var(--space-5); }
body .hero-content, body .hub-hero .hero-content { padding:calc(var(--header-height) + var(--space-6)) var(--page) var(--space-5); }
body .hero h1 { font-size:var(--hero-size); line-height:1.1; margin:0 0 var(--space-5); max-width:100%; overflow-wrap:break-word; }
body.hub-page .hero h1 .hub-soft { font-size:var(--hero-subtitle); margin-top:var(--space-2); }
body .hero-content p { font-size:var(--body-size); line-height:1.6; max-width:64ch; margin:0 auto var(--space-5); }
body .hero-actions { gap:var(--space-4); margin:0; flex-wrap:wrap; }
body .hero-video, body .hub-film { height:var(--film-height); border-radius:var(--space-4); }
body .hero-bottom { margin:var(--space-4) var(--page) 0; gap:var(--space-4); min-height:var(--space-5); }
body .motion-control { width:44px; height:44px; bottom:calc(100% + var(--space-6)); right:var(--space-4); }
body .film-caption { left:var(--space-4); right:var(--space-4); bottom:var(--space-4); gap:var(--space-4); font-size:12px; }
body .film-caption>span { max-width:calc(100% - 60px); line-height:1.5; }
body .hub-motion { width:44px; height:44px; flex:none; }
body .section { padding:var(--section-space) var(--page); max-width:none; }
body .comparison-section { padding-top:var(--space-5); }
body .gallery-section { padding-top:min(var(--section-space),var(--space-8)); }
body .section-top, body .gallery-section .section-top { margin-bottom:var(--heading-gap); gap:var(--space-5); }
body .section h2 { font-size:var(--heading-size); line-height:1.15; overflow-wrap:break-word; }
body .section h2 br, body .section .comparison-copy h2 br { display:inline; }
body .section h3 { font-size:var(--subheading-size); line-height:1.3; overflow-wrap:break-word; }
body main .section p { font-size:var(--body-size); line-height:1.6; overflow-wrap:break-word; }
body main blockquote { overflow-wrap:break-word; }
body main :where(section,div,article,figure) { min-width:0; }
body main img, body main video { max-width:100%; }
body .intro-grid, body .hub-heading, body .prompt-intro, body .troubleshooting-intro, body .how-header, body .gallery-heading { gap:var(--layout-gap); margin-bottom:var(--heading-gap); }
body .hub-heading>p, body .intro-grid>p, body .prompt-intro>p, body .troubleshooting-intro>p { margin:0; }
body :is(.create-split,.create-refine .create-split,.photo-split,.greeting-split,.album-split,.prompts-split,.idea-layout,.comparison-layout,.faq-section) { gap:var(--layout-gap); }
body :is(.direction-grid,.create-example-grid,.photo-pair-grid,.greeting-scene-grid,.album-example-grid,.album-method-grid,.prompts-library-grid,.camera-cards,.photo-type-grid,.greeting-cards,.source-options,.next-grid,.greeting-story-grid,.greeting-finish-grid,.album-story-grid,.example-grid,.fix-grid,.steps,.prompt-breakdown) { gap:var(--space-5); }
body :is(.create-lead,.photo-lead,.greeting-lead,.album-lead,.prompts-lead,.idea-copy>p) { margin:var(--space-5) 0; }
body :is(.create-still,.photo-still,.greeting-still,.album-still,.prompts-still) { margin:0; display:grid; grid-template-rows:minmax(var(--detail-height),1fr) auto; gap:var(--space-3); align-self:stretch; }
.responsive-image-frame { position:relative; min-height:var(--detail-height); border-radius:var(--space-4); overflow:hidden; }
body :is(.create-still,.photo-still,.greeting-still,.album-still,.prompts-still) .responsive-image-frame img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; border-radius:0; }
body :is(.create-still,.photo-still,.greeting-still,.album-still,.prompts-still) figcaption { margin:0; font-size:12px; line-height:1.6; }
body :is(.idea-film,.prompts-film,.photo-detail-film) { position:relative; align-self:stretch; height:auto; min-height:var(--detail-height); border-radius:var(--space-4); }
body :is(.idea-film,.prompts-film,.photo-detail-film)>video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
body .comparison-frame { height:var(--detail-height); }
body .feature-card { min-height:var(--detail-height); }
body .card-tag { left:var(--space-5); top:var(--space-5); padding:var(--space-2) var(--space-3); }
body .prompt-preview-title { left:var(--space-5); right:var(--space-5); bottom:var(--space-5); font-size:var(--subheading-size); line-height:1.3; overflow-wrap:break-word; }
body :is(.brief-lines,.photo-lines,.greeting-lines,.album-lines) article { padding:var(--space-4) 0; }
body :is(.brief-lines,.photo-lines,.greeting-lines,.album-lines) h3 { margin:0 0 var(--space-3); }
body :is(.brief-lines,.photo-lines,.greeting-lines,.album-lines) p { margin:0; }
body :is(.direction-copy,.direction-text,.create-example-copy,.greeting-scene-copy,.album-example-copy,.camera-cards article,.photo-type-grid article,.greeting-cards article,.next-grid article,.example-grid article,.prompts-library-grid article,.album-method-grid article,.prompt-text) { padding:var(--card-padding); }
body :is(.create-example-copy,.greeting-scene-copy,.album-example-copy,.camera-cards article,.photo-type-grid article,.greeting-cards article,.next-grid article,.prompts-library-grid article,.album-method-grid article) h3 { margin:var(--space-4) 0; }
body :is(.create-example-copy,.greeting-scene-copy) blockquote, body .photo-action blockquote { margin-top:var(--space-5); padding-left:var(--space-4); font-size:16px; line-height:1.6; }
body .prompts-library-grid .prompt-text { padding:0; }
body .prompt-text blockquote { font-size:16px; line-height:1.6; margin-top:var(--space-4); }
body .prompt-text blockquote:only-child { margin:0; }
body .prompt-use { margin-top:var(--space-5); padding-top:var(--space-5); }
body .prompt-use h3 { margin:0 0 var(--space-3); }
body .prompt-replace { margin:var(--space-5) 0 0; padding-top:var(--space-4); }
body .section-cta { margin-top:var(--space-6); }
body .comparison-copy>.button { margin-top:var(--space-5); }
body .gallery-heading { margin-bottom:var(--space-6); }
body .gallery-grid { gap:var(--space-4); }
body .gallery-card { aspect-ratio:1/1.2; }
body .filters, body .choice-group { gap:var(--space-2); }
body .filters button, body .choice-group button { min-height:44px; font-size:13px; line-height:1.25; padding:var(--space-3); }
body .choice-group { margin-bottom:var(--space-5); }
body .gallery-play { width:40px; height:40px; top:var(--space-3); right:var(--space-3); }
body .gallery-meta { left:var(--space-4); right:var(--space-3); bottom:var(--space-4); gap:var(--space-2); }
body .gallery-meta strong { font-size:17px; line-height:1.25; overflow-wrap:break-word; }
body .gallery-meta small { font-size:12px; line-height:1.5; }
body .step { display:flex; flex-direction:column; }
body .step h3 { margin:0 0 var(--space-4); }
body .step p { min-height:0; margin:0 0 var(--space-5); }
body .step-chip { margin-top:auto; min-height:0; padding-bottom:var(--space-4); }
body .prompt-preview { min-height:var(--detail-height); }
body .prompt-controls { padding:var(--card-padding); }
body .scene-example { margin:0 0 var(--space-5); padding-left:var(--space-4); }
body .prompt-result { min-height:var(--prompt-result-height); padding:var(--space-4); margin:var(--space-5) 0; }
body .prompt-result p { font-size:14px; line-height:1.6; margin:var(--space-2) 0 0; }
body .copy-icon { width:44px; height:44px; flex:none; }
body .copy-status { margin-top:var(--space-3); min-height:var(--space-5); }
body .prompt-actions { gap:var(--space-3); flex-wrap:wrap; }
body :is(.photo-prep,.prompt-examples,.greeting-message,.album-strip,.fix-next) { margin-top:var(--space-6); }
body .photo-prep { padding-top:var(--space-5); }
body .greeting-message, body .album-strip { padding:var(--card-padding); }
body .album-strip { gap:var(--space-5); }
body .album-strip div { gap:var(--space-3); }
body :is(.method-guide h3,.photo-prep h3,.examples-heading h3) { margin-bottom:var(--space-5); }
body :is(.photo-note,.greeting-note,.album-note,.create-note,.method-note,.hub-small-note,.gallery-source) { margin-top:var(--space-5); }
body .method-table { width:100%; min-width:0; table-layout:fixed; }
body .method-table th, body .method-table td { padding:var(--card-padding); overflow-wrap:break-word; }
body .faq-section { gap:var(--layout-gap); }
body .faq-heading .eyebrow { margin-bottom:var(--space-5); }
body .faq-heading>p { margin-top:var(--space-4); }
body .faq-list summary { padding:var(--space-5) 0; gap:var(--space-4); font-size:var(--body-size); }
body .faq-answer p { padding:0 0 var(--space-5); margin:0; }
body .cta-section { min-height:0; padding:var(--section-space) var(--page); }
body .cta-content h2, body.hub-page .hub-cta h2 { font-size:var(--heading-size); line-height:1.15; overflow-wrap:break-word; }
body .cta-content>img { margin-bottom:var(--space-5); }
body .cta-content p { font-size:var(--body-size); line-height:1.6; margin:var(--space-5) 0; }
body .site-footer { padding:var(--space-5) var(--page); gap:var(--space-4) var(--space-5); }
body .site-footer a { line-height:1.5; max-width:100%; overflow-wrap:break-word; }
body .video-dialog { padding:var(--space-4); }
body .dialog-top button { width:44px; height:44px; flex:none; }
body .dialog-top h2 { font-size:20px; line-height:1.3; overflow-wrap:break-word; }
body .dialog-top { gap:var(--space-4); margin-bottom:var(--space-4); }
section[id], #methods, #prompt-examples, .hub-page .reveal { scroll-margin-top:0; }
@media (max-width:1023px) {
  body :is(.intro-grid,.hub-heading,.prompt-intro,.troubleshooting-intro,.create-split,.create-refine .create-split,.photo-split,.greeting-split,.album-split,.prompts-split,.idea-layout,.comparison-layout,.faq-section,.prompt-studio) { grid-template-columns:minmax(0,1fr); }
  body :is(.camera-cards,.photo-type-grid,.greeting-cards,.source-options,.next-grid,.greeting-story-grid,.greeting-finish-grid,.album-story-grid,.fix-grid) { grid-template-columns:minmax(0,1fr); }
  body .how-header, body .gallery-heading { flex-direction:column; align-items:flex-start; }
  body :is(.create-example-grid,.greeting-scene-grid,.album-example-grid,.album-method-grid,.prompts-library-grid,.example-grid) { grid-template-columns:minmax(0,1fr); }
  body .comparison-copy p { max-width:64ch; }
}
@media (max-width:767px) {
  body :is(.feature-grid,.direction-grid,.photo-pair-grid,.prompt-breakdown,.steps) { grid-template-columns:minmax(0,1fr); }
  body .hero-bottom>span { max-width:50%; }
  body .hero-bottom .scroll-link { max-width:44%; line-height:1.5; text-align:right; }
  body .feature-card, body .feature-card:nth-child(2) { min-height:var(--detail-height); }
  body .feature-copy { left:var(--space-5); right:var(--space-9); bottom:var(--space-5); }
  body .feature-copy h3 { font-size:var(--subheading-size); }
  body .round-play { width:44px; height:44px; right:var(--space-4); bottom:var(--space-5); }
  body .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
  body .gallery-meta { left:var(--space-3); right:var(--space-3); bottom:var(--space-3); }
  body .gallery-meta strong { font-size:16px; }
  body .gallery-meta small { font-size:11px; }
  body .album-strip { grid-template-columns:minmax(0,1fr); }
  body .album-arrow { transform:rotate(90deg); width:var(--space-5); }
  body .method-scroll { overflow:visible; position:relative; }
  body .method-table, body .method-table tbody { display:block; }
  body .method-table thead { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  body .method-table tbody tr { display:grid; grid-template-columns:minmax(0,1fr); border-bottom:1px solid var(--line); }
  body .method-table tbody tr:last-child { border-bottom:0; }
  body .method-table tbody th, body .method-table tbody td { display:block; width:auto; border-bottom:0; padding:var(--space-4); }
  body .method-table tbody [data-label]::before { content:attr(data-label); display:block; margin-bottom:var(--space-2); color:#737a85; font-size:12px; line-height:1.5; font-weight:400; }
}
@media (prefers-reduced-motion:reduce) {
  body .button:hover { transform:none; }
}