.ai-page { --ai-ink: #422d35; --ai-soft: #f8ecef; }
.ai-page h1, .ai-page h2 { text-wrap: balance; }
.ai-hero { background: #f8edef; overflow: hidden; }
.ai-hero-inner { max-width: 80rem; margin: auto; padding: 4.5rem 1.5rem; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 5rem; }
.ai-hero-copy h1 { font-family: var(--font-serif); font-size: clamp(2.5rem,4.5vw,4rem); line-height: 1.06; font-weight: 500; color: var(--ai-ink); margin: 1.25rem 0 1.5rem; }
.ai-hero-copy > p { color: var(--muted); line-height: 1.75; max-width: 34rem; }
.ai-hero-copy .ai-intro { font-size: 1.25rem; color: var(--ai-ink); margin-bottom: 1rem; }
.ai-hero-action { margin-top: 2rem; }
.ai-hero-copy .ai-disclosure { font-size: .75rem; line-height: 1.65; margin-top: 1rem; max-width: 29rem; }
.ai-hero-visual { position: relative; width: 100%; max-width: 25rem; justify-self: end; }
.ai-hero-visual > img { width: 100%; aspect-ratio: 4/5; height: auto; object-fit: cover; object-position: center 30%; border-radius: 9rem 9rem 1.5rem 1.5rem; display: block; }
.ai-visual-caption { position: absolute; bottom: 1.25rem; left: 1.25rem; background: rgba(255,255,255,.95); border-radius: 1rem; padding: 1rem 1.25rem; color: var(--ai-ink); }
.ai-visual-caption span { display: block; font-size: .7rem; margin-bottom: .35rem; color: var(--muted); }
.ai-visual-caption strong { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.1; font-weight: 500; }
.ai-promise-bar { background: var(--cocoa); color: #fff; padding: 1.25rem 1.5rem; }
.ai-promise-bar > div { display: flex; justify-content: center; gap: 4rem; max-width: 80rem; margin: auto; font-size: .875rem; }
.ai-promise-bar span { display: flex; align-items: center; gap: .65rem; }
.ai-promise-bar span::before { content: ''; width: .35rem; height: .35rem; border-radius: 50%; background: var(--petal); }
.ai-section-head { max-width: 45rem; margin: 0 auto 2.5rem; text-align: center; }
.ai-section-head > p { color: var(--muted); line-height: 1.75; margin-top: 1.25rem; }
.ai-benefits, .ai-character-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.5rem; }
.ai-benefits article { padding: 1.75rem; border-radius: 1.25rem; background: #fff; }
.ai-benefits svg { width: 1.5rem; height: 1.5rem; color: var(--rose); margin-bottom: 1.25rem; }
.ai-benefits h3, .ai-character h3 { font-family: var(--font-serif); font-size: 1.6rem; line-height: 1.15; font-weight: 500; margin-bottom: .75rem; }
.ai-benefits p, .ai-character p { color: var(--muted); line-height: 1.75; font-size: .9375rem; }
.ai-cost-note, .ai-gallery-note { text-align: center; max-width: 53rem; margin: 1.75rem auto 0; font-size: .8125rem; color: var(--muted); line-height: 1.7; }
.ai-character { overflow: hidden; padding: .4rem; border-radius: 1.35rem; border: 1px solid #e8dce0; background: #fff; box-shadow: 0 5px 18px rgba(66,45,53,.07); }
.ai-character-image { position: relative; }
.ai-character-image img { display: block; width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; object-position: center top; border-radius: 1rem; }
.ai-character-image > span { position: absolute; bottom: .8rem; left: .8rem; padding: .35rem .7rem; border-radius: 2rem; background: var(--cocoa); color: #fff; font-size: .7rem; }
.ai-character-copy { padding: 1rem .65rem .9rem; }
.ai-character-grid { max-width: 74rem; margin-inline: auto; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.25rem; }
.ai-character h3 { font-size: 1.25rem; margin-bottom: .4rem; }
.ai-character p { font-size: .875rem; line-height: 1.6; }
.ai-gallery-action { display: flex; justify-content: center; margin-top: 2.5rem; }
.ai-gallery-button { gap: 1.25rem; padding: .85rem 1rem .85rem 1.75rem; min-height: 3.5rem; box-shadow: 0 6px 18px rgba(66,45,53,.12); }
.ai-button-icon { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.2); }
.ai-button-icon svg { width: 1rem; height: 1rem; }
.ai-gallery-button:focus-visible { outline: 2px solid var(--ai-ink); outline-offset: 4px; }
.ai-features { background: #f6ecee; padding-block: 3.5rem; }
.ai-features .split { max-width: 68rem; grid-template-columns: .85fr 1.15fr; gap: 3rem; }
.ai-features .section-heading { font-size: clamp(2rem,3vw,2.5rem); }
.ai-features .ai-copy > p { margin-top: .75rem; }
.ai-feature-portrait { width: min(100%,24rem); margin: auto; }
.ai-feature-portrait img { display: block; width: 100%; height: 375px; object-fit: cover; object-position: center 15%; border-radius: 1.5rem; }
.ai-copy > p { color: var(--muted); line-height: 1.75; margin-top: 1.25rem; }
.ai-feature-list { list-style: none; padding: 0; margin-top: 1rem; }
.ai-feature-list li { display: flex; gap: .75rem; padding: .65rem 0; }
.ai-feature-icon { display: flex; flex: 0 0 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: .75rem; background: #fff; color: var(--rose); }
.ai-feature-icon svg { width: 1.15rem; height: 1.15rem; }
.ai-feature-list h3 { font-size: 1rem; margin-bottom: .35rem; }
.ai-feature-list p { font-size: .9375rem; color: var(--muted); line-height: 1.7; }
.ai-copy .ai-feature-source { font-size: .75rem; }
.ai-copy a { color: var(--rose); text-decoration: underline; text-underline-offset: 3px; }
.ai-faq-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 4rem; }
.ai-page .faq-q { min-height: 4.5rem; }
.ai-page .faq-q:focus-visible { outline: 2px solid var(--rose); outline-offset: -4px; }
.ai-final-cta { padding: 6rem 1.5rem; text-align: center; background: var(--ai-soft); }
.ai-final-cta h2 { font-family: var(--font-serif); font-size: clamp(2rem,4vw,3.25rem); font-weight: 500; line-height: 1.1; max-width: 40rem; margin: .75rem auto 1.25rem; }
.ai-final-cta p { color: var(--muted); max-width: 34rem; margin: 0 auto 2rem; line-height: 1.75; }
.ai-final-cta small { display: block; font-size: .75rem; color: var(--muted); margin-top: 1rem; }
@media (max-width: 1023px) {
  .ai-character-grid { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 42rem; }
  .ai-hero-inner { gap: 2.5rem; }
  .ai-hero-copy .ai-intro { font-size: 1.125rem; }
  .ai-promise-bar > div { gap: 1.5rem; }
}
@media (max-width: 767px) {
  .ai-hero-inner { grid-template-columns: 1fr; padding: 3rem 1.5rem; }
  .ai-hero-copy h1 { font-size: 2.5rem; text-wrap: wrap; }
  .ai-hero-visual { max-width: 26rem; justify-self: center; }
  .ai-hero-visual > img { border-radius: 6rem 6rem 1rem 1rem; }
  .ai-promise-bar > div { flex-wrap: wrap; gap: .75rem 1.25rem; font-size: .75rem; }
  .ai-benefits, .ai-faq-layout { grid-template-columns: 1fr; }
  .ai-section-head { text-align: left; margin-bottom: 1.75rem; }
  .ai-benefits { gap: .75rem; }
  .ai-character-grid { gap: .8rem; max-width: 30rem; margin: auto; }
  .ai-features .split { grid-template-columns: 1fr; gap: 2rem; }
  .ai-feature-portrait img { height: 300px; }
  .ai-character-copy { padding: .8rem .35rem; }
  .ai-character h3 { font-size: 1.1rem; }
  .ai-character p { font-size: .8rem; line-height: 1.5; }
  .ai-character-image > span { bottom: .5rem; left: .4rem; font-size: .65rem; padding: .3rem .5rem; }
  .ai-faq-layout { gap: 1.75rem; }
  .ai-cost-note, .ai-gallery-note { text-align: left; }
  .ai-final-cta { padding: 4.5rem 1.5rem; }
}