/* Homepage only: the real creation example leads; the original guide stays below. */
.home-page { --home-mint: #91e9b4; background: #0d0d11; }
.home-page main, .home-page footer, .home-page .global-header-inner { width: min(1200px, calc(100% - 64px)); }
.home-page [hidden] { display: none !important; }
.home-page a, .home-page button { -webkit-tap-highlight-color: transparent; }
.home-page :is(a, button, summary):focus-visible { outline: 2px solid var(--home-mint); outline-offset: 5px; }
.home-page .global-header { background: #0d0d11ed; }
.home-page .global-create { background: var(--home-mint); border-color: var(--home-mint); color: #102018; }
.home-page .kicker { color: var(--home-mint); font-size: 10px; font-weight: 600; letter-spacing: .16em; }
.home-hero { display: grid; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: clamp(35px, 5vw, 76px); padding: 64px 0 58px; min-height: 665px; }
.home-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 25px; color: #c9c2b7; font-size: 10px; font-weight: 600; letter-spacing: .18em; }
.home-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--home-mint); }
.home-hero h1 { margin: 0 0 26px; font: 400 clamp(62px, 6.5vw, 90px)/1.01 var(--heading-font); letter-spacing: -3.8px; }
.home-hero h1 span, .home-hero h1 em { display: block; }
.home-hero h1 em { color: var(--home-mint); font-weight: 400; }
.home-intro { max-width: 390px; margin: 0 0 29px; color: #b8b3ac; font-size: 16px; line-height: 1.8; text-wrap: pretty; }
.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 22px; }
.home-primary { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 54px; padding: 14px 21px; border: 1px solid var(--home-mint); border-radius: 7px; color: #102018; background: var(--home-mint); font: 650 14px/1.4 var(--body-font); text-decoration: none; transition: background .18s, border-color .18s; }
.home-primary:hover { background: #b0f2ca; border-color: #b0f2ca; }
.home-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.home-watch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: none; color: var(--ink); font: 500 12px/1.5 var(--body-font); cursor: pointer; }
.home-watch:hover { color: var(--home-mint); }
.home-watch .home-icon { width: 14px; height: 14px; }
.home-credit-note { margin: 16px 0 0; color: #8f8b84; font-size: 11px; line-height: 1.7; }
.home-guide-link { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; margin-top: 31px; color: #a8a49d; font-size: 12px; text-decoration: none; }
.home-guide-link span { border-bottom: 1px solid #f7f1e32c; }
.home-guide-link:hover { color: var(--ink); }
.home-demo { min-width: 0; margin: 0; overflow: hidden; border: 1px solid #f7f1e320; border-radius: 13px; background: #141419; }
.home-demo-top, .home-demo-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 21px; }
.home-demo-top { border-bottom: 1px solid #f7f1e312; }
.home-demo-top > span:first-child { color: #ccc5b9; font-size: 9px; font-weight: 500; letter-spacing: .16em; }
.home-demo-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--home-mint); font-size: 9px; }
.home-demo-badge::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.home-demo-composition { display: grid; grid-template-columns: minmax(0, .53fr) 24px minmax(0, 1fr); gap: 15px; align-items: center; padding: 22px; background: #111115; }
.home-demo-inputs { min-width: 0; }
.home-input { margin: 0; }
.home-input figcaption { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; color: #bfb8ac; font-size: 9px; }
.home-input figcaption span { color: #6f6f79; font-size: 8px; }
.home-input :is(img, video) { display: block; width: 100%; height: 133px; border: 1px solid #f7f1e31c; border-radius: 7px; object-fit: contain; background: #09090c; }
.home-input-plus { display: block; margin: 8px 0 9px; color: #7b7b83; text-align: center; font: 22px/1 var(--heading-font); }
.home-recipe-arrow { width: 23px; height: 23px; margin-top: 12px; color: var(--home-mint); }
.home-demo-output { min-width: 0; }
.home-output-label { display: flex; align-items: center; justify-content: space-between; margin: 0 0 7px; color: var(--home-mint); font-size: 9px; letter-spacing: .03em; }
.home-output-label span { color: #8a8790; font-size: 9px; font-variant-numeric: tabular-nums; }
.home-demo-output video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 408px; border: 1px solid #f7f1e326; border-radius: 8px; object-fit: contain; background: #09090c; }
.home-demo-bottom { min-height: 56px; padding-block: 8px; border-top: 1px solid #f7f1e312; }
.home-demo-bottom > span { color: #8f8b92; font-size: 10px; }
.home-demo-bottom .home-watch { min-height: 36px; font-size: 10px; }
.home-demo-error { margin: 0; padding: 10px 20px; border-top: 1px solid #f7f1e312; color: #ffd166; font-size: 11px; }
.home-process { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 29px 0 31px; border-block: 1px solid #f7f1e320; }
.home-process article { display: grid; grid-template-columns: 25px 1fr; align-content: start; gap: 2px 13px; padding-right: 28px; }
.home-process article + article { padding-left: 30px; border-left: 1px solid #f7f1e31c; }
.home-process-number { padding-top: 3px; color: #77777f; font-size: 10px; font-variant-numeric: tabular-nums; }
.home-process h2 { margin: 0 0 6px; font: 550 14px/1.5 var(--body-font); letter-spacing: 0; }
.home-process p { grid-column: 2; margin: 0; color: #9e9a93; font-size: 12px; line-height: 1.7; }
.home-style { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 48px 0; }
.home-style .kicker { margin-bottom: 11px; }
.home-style h2 { margin: 0 0 9px; font: 400 clamp(28px, 3vw, 38px)/1.15 var(--heading-font); letter-spacing: -.8px; }
.home-style p:not(.kicker) { margin: 0; color: #a6a198; font-size: 13px; }
.home-style-action { flex-shrink: 0; }
.home-style-action a { display: inline-flex; align-items: center; justify-content: center; gap: 19px; min-height: 46px; padding: 11px 17px; border: 1px solid #f7f1e32e; border-radius: 7px; color: var(--ink); font-size: 12px; text-decoration: none; }
.home-style-action a:hover { border-color: var(--home-mint); color: var(--home-mint); }
.home-style-action span { display: block; margin-top: 9px; color: #8c8984; font-size: 10px; text-align: center; }
.home-page .video-section { padding: 51px 0 56px; }
.home-page .video-section .section-title { display: flex; align-items: end; justify-content: space-between; gap: 24px; max-width: none; }
.home-page .video-section h2 { margin-bottom: 0; font-size: 40px; font-weight: 400; letter-spacing: -1px; }
.home-page .video-section > p { max-width: 700px; margin-top: 15px; font-size: 13px; }
.home-page .video-card, .home-page .video-card.hot { border-color: #f7f1e31f; background: #15151b; }
.home-page .video-card::before { display: none; }
.home-page .video-card:hover { transform: none; border-color: #91e9b459; background: #19191f; }
.home-page .video-meta { padding: 12px; }
.home-page .video-index { color: #86828b; font-size: 9px; }
.home-page .video-card h3 { margin: 7px 0 10px; font-size: 12px; font-weight: 500; }
.home-page .video-cta { color: #c4bfb3; font-size: 10px; font-weight: 400; }
.home-gallery-more { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; margin: 22px auto 0; padding: 8px 17px; border: 1px solid #f7f1e326; border-radius: 7px; background: transparent; color: #bdb7aa; font: 500 11px var(--body-font); cursor: pointer; }
.home-gallery-more:hover { border-color: var(--home-mint); color: var(--home-mint); }
.home-page .meaning-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 55px; padding: 63px 0 36px; }
.home-page .meaning-intro h2 { margin-bottom: 0; font-size: 44px; font-weight: 400; letter-spacing: -1px; }
.home-page .meaning-intro .section-title { max-width: 360px; }
.home-page .meaning-intro p { font-size: 14px; }
.home-page .meaning-intro .quick-answer { margin: 16px 0 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #aaa59b; font-size: 13px; }
.home-meaning-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.home-meaning-tags span { padding: 4px 8px; border: 1px solid #f7f1e322; border-radius: 5px; color: #c0b9ad; font-size: 10px; }
.home-meaning-more { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; margin-top: 9px; color: var(--home-mint); font-size: 11px; text-underline-offset: 4px; }
.home-page .generator-section .generator-shell { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; padding: 30px; border-color: #f7f1e322; background: #15151a; box-shadow: none; }
.home-page .generator-section .generator-copy h2 { max-width: 470px; font-size: 36px; }
.home-page .generator-section .generator-copy > p:not(.kicker):not(.generator-style-link) { max-width: 510px; font-size: 13px; }
.home-page .generator-section .button { min-height: 44px; font-size: 12px; font-weight: 600; }
.home-page .generator-section .button.primary { color: #102018; border-color: var(--home-mint); background: var(--home-mint); }
.home-studio-steps { display: grid; gap: 0; margin: 0; padding-left: 30px; border-left: 1px solid #f7f1e31f; }
.home-studio-steps span { padding: 19px 0; color: #c6beb0; font-size: 13px; }
.home-studio-steps span + span { border-top: 1px solid #f7f1e316; }
.home-page .answer-grid article { min-height: auto; padding: 20px; border-color: #f7f1e319; background: #15151a; }
.home-page .answer-grid .label { margin-bottom: 18px; color: #9c998f; font-size: 9px; font-weight: 500; }
.home-page .answer-grid h2 { font-size: 18px; font-weight: 500; }
.home-page .answer-grid p { margin-bottom: 0; font-size: 12px; }
.home-page .seo-searches { padding-bottom: 39px; }
.home-page .seo-searches .kicker { color: #89868a; }
.home-page .search-chip-grid { gap: 7px; }
.home-page .search-chip-grid a { padding: 7px 10px; font-size: 11px; font-weight: 400; background: none; }
.home-page .content-section:not(.video-section):not(.meaning-intro) { padding-block: 56px; }
.home-page .content-section:not(.video-section):not(.meaning-intro) h2 { font-size: clamp(28px, 3.5vw, 42px); font-weight: 400; }
.home-page .content-section p, .home-page .check-list li, .home-page details p { font-size: 14px; }
.home-page .timeline article { background: #15151a; }
.home-page .timeline article::before { box-shadow: none; }
.home-page summary { font-size: 14px; font-weight: 500; }
.home-page footer { margin-top: 0; padding-top: 29px; }
.home-page footer p, .home-page .footer-links a { font-size: 11px; }

@media (max-width: 1100px) {
  .home-hero { gap: 32px; min-height: 620px; padding-top: 48px; }
  .home-hero h1 { font-size: clamp(58px, 6.5vw, 75px); letter-spacing: -2.8px; }
  .home-intro { font-size: 14px; }
  .home-demo-composition { gap: 10px; padding: 17px; grid-template-columns: minmax(0, .53fr) 20px minmax(0, 1fr); }
  .home-input :is(img, video) { height: 118px; }
  .home-page .video-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-page .video-meta { padding: 9px; }
}
@media (max-width: 800px) {
  .home-page main, .home-page footer { width: min(600px, calc(100% - 40px)); }
  .home-page .global-header-inner { width: 100%; padding-inline: 20px; }
  .home-hero { grid-template-columns: 1fr; gap: 25px; min-height: auto; padding: 30px 0 31px; }
  .home-hero-copy { text-align: center; }
  .home-eyebrow { justify-content: center; margin-bottom: 16px; }
  .home-hero h1 { font-size: clamp(43px, 11vw, 68px); letter-spacing: -2.2px; margin-bottom: 18px; }
  .home-intro { max-width: 350px; margin: 0 auto 19px; font-size: 13px; line-height: 1.75; }
  .home-actions { justify-content: center; gap: 8px 20px; }
  .home-primary { min-height: 50px; padding: 12px 18px; font-size: 13px; }
  .home-credit-note { margin-top: 11px; font-size: 10px; }
  .home-guide-link { min-height: 32px; margin-top: 9px; font-size: 10px; }
  .home-demo { width: min(100%, 490px); margin-inline: auto; }
  .home-demo-composition { grid-template-columns: minmax(0, .53fr) 22px minmax(0, 1fr); gap: 15px; padding: 19px; }
  .home-input :is(img, video) { height: clamp(115px, 24vw, 145px); }
  .home-demo-output video { height: 300px; max-height: none; aspect-ratio: auto; }
  .home-process { padding-block: 24px; }
  .home-process article { grid-template-columns: 1fr; gap: 7px; padding-right: 14px; }
  .home-process article + article { padding-left: 17px; }
  .home-process-number { padding: 0; }
  .home-process h2 { font-size: 12px; margin-bottom: 0; }
  .home-process p { grid-column: 1; font-size: 10px; line-height: 1.7; }
  .home-style { align-items: flex-start; padding-block: 34px; gap: 20px; }
  .home-style h2 { font-size: 29px; }
  .home-style p:not(.kicker) { font-size: 12px; }
  .home-style-action a { gap: 10px; font-size: 11px; padding-inline: 12px; }
  .home-page .video-section { padding-block: 35px; }
  .home-page .video-section h2 { font-size: 33px; }
  .home-page .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .home-page .video-card:first-child { grid-column: auto; grid-row: auto; }
  .home-page .video-meta { padding: 12px; }
  .home-page .meaning-intro { grid-template-columns: 1fr; gap: 20px; padding: 39px 0 24px; }
  .home-page .meaning-intro h2 { font-size: 36px; }
  .home-page .generator-section .generator-shell { grid-template-columns: 1fr; gap: 25px; padding: 23px; }
  .home-page .generator-section .generator-copy h2 { font-size: 31px; }
  .home-studio-steps { padding-left: 0; border-left: 0; border-top: 1px solid #f7f1e31f; }
  .home-studio-steps span { padding-block: 14px; font-size: 12px; }
  .home-page .meaning-intro p { margin-bottom: 0; }
  .home-page .answer-grid { grid-template-columns: 1fr; gap: 9px; }
  .home-page .answer-grid article { padding: 17px; }
  .home-page .answer-grid .label { margin-bottom: 8px; }
  .home-page .answer-grid h2 { margin-bottom: 7px; font-size: 17px; }
  .home-page .content-section:not(.video-section):not(.meaning-intro) { padding-block: 37px; }
  .home-page .content-section.contrast { margin-inline: 0; padding-inline: 20px; }
}
@media (max-width: 440px) {
  .home-page main, .home-page footer { width: calc(100% - 36px); }
  .home-demo-top, .home-demo-bottom { padding-inline: 14px; }
  .home-demo-top > span:first-child { font-size: 8px; letter-spacing: .12em; }
  .home-demo-badge { font-size: 8px; }
  .home-demo-composition { gap: 9px; padding: 15px; grid-template-columns: minmax(0, .54fr) 19px minmax(0, 1fr); }
  .home-hero-copy .home-watch { justify-content: center; width: 44px; padding: 0; border: 1px solid #f7f1e32c; border-radius: 50%; }
  .home-hero-copy .home-watch [data-home-play-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .home-input :is(img, video) { height: 96px; }
  .home-demo-output video { height: 257px; }
  .home-input figcaption { font-size: 8px; }
  .home-recipe-arrow { width: 19px; }
  .home-style { flex-direction: column; gap: 21px; }
  .home-style-action { width: 100%; display: flex; align-items: center; gap: 15px; }
  .home-style-action span { margin: 0; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page { scroll-behavior: auto; }
  .home-page *, .home-page *::before, .home-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}