/* Shared landing rhythm. Nested product illustrations keep their own scale. */
:root{--landing-header-height:110px;--landing-gutter:clamp(32px,3.53vw,59px);--landing-space:clamp(48px,4.3vw,72px)}
html{scroll-padding-top:calc(var(--landing-header-height) + 16px)}
main>section[id]{scroll-margin-top:0}
.hero,.photos.section,.learning.section,.websites.section,.about-landing{padding:var(--landing-space) var(--landing-gutter)}
.hero-copy{margin-inline:0}
/* Shift only the copy; its flow space keeps the photo/player row in place. */
@media(min-width:1024px){.hero-copy{position:relative;top:-24px}}
.photos .section-head h2,.learning h2,.websites h2,.about-landing h2{font-size:clamp(2.25rem,3.4vw,3.5rem);font-weight:600;line-height:1.18;letter-spacing:-.025em;margin-top:0;text-wrap:balance}
.hero .intro,.photos .section-head .intro,.learning .intro,.websites .intro,.about-landing .intro{font-size:clamp(1.125rem,1.55vw,1.5rem);line-height:1.5;letter-spacing:0;text-wrap:pretty;margin-top:20px}
.section-head{margin-bottom:32px}
.photos .section-head{margin-bottom:32px}
.hero-actions .button,.websites-copy>.button,.learning-cta,.photo-note .button,.about-landing .button{min-height:56px;font-size:20px;line-height:1.35;padding:14px 24px}
.learning{grid-template-columns:minmax(0,40fr) minmax(0,60fr);column-gap:40px;row-gap:0}
.learning-steps{margin:32px 0 0;gap:12px}
.learning-steps li{font-size:14px;white-space:normal;text-align:center;line-height:1.4}
.learning-steps li:not(:last-child)::after{display:none}
.learning-cta{margin-top:28px;min-width:0;width:fit-content;max-width:100%}
.learning-note,.partner{font-size:16px;line-height:1.5}
.learning-note .icon{flex-shrink:0}
.websites{display:grid;grid-template-columns:minmax(0,38fr) minmax(0,62fr);column-gap:40px;row-gap:28px;min-height:0}
.websites-copy{grid-column:1;min-width:0}
.site-note{position:static;grid-column:1;max-width:32ch;font-size:14px;line-height:1.5;align-self:start}
.site-demo{position:relative;inset:auto;grid-column:2;grid-row:1 / span 2;align-self:center;height:auto;aspect-ratio:1115/654;min-width:0;margin:0}
.site-flow{position:static;grid-column:1 / -1;margin-top:12px;padding:24px 0;min-height:0;gap:24px;border-bottom:0}
.site-flow ol{gap:16px;flex-wrap:wrap}
.site-flow li{font-size:18px;line-height:1.4;gap:12px}
.site-flow p{font-size:14px;line-height:1.5;max-width:30ch}
.site-flow .flow-arrow .icon{width:32px}
.photo-note p{font-size:18px;line-height:1.5;text-wrap:pretty}
.photo-note .button{flex-shrink:0}
@media(max-width:1023px){
  :root{--landing-header-height:0px;--landing-gutter:24px;--landing-space:40px}
  .hero h1{font-size:clamp(1.875rem,5.2vw,2.375rem);line-height:1.18;text-wrap:balance}
  .photos .section-head h2,.learning h2,.websites h2,.about-landing h2{font-size:clamp(1.75rem,4.6vw,2.125rem);line-height:1.2;max-width:100%;letter-spacing:-.02em}
  .hero .intro,.photos .section-head .intro,.learning .intro,.websites .intro,.about-landing .intro{font-size:17px;line-height:1.5;margin-top:16px;max-width:100%}
  .hero-actions .button,.websites-copy>.button,.learning-cta,.photo-note .button,.about-landing .button{font-size:16px;min-height:48px;padding:12px 18px}
  .hero-actions{margin-top:24px}
  .learning,.websites{display:flex;flex-direction:column;gap:0}
  .learning-steps{margin-top:24px;gap:12px}
  .learning-steps li{font-size:14px;height:auto;min-height:104px}
  .learning-cta{width:100%;margin-top:24px}
  .learning-note,.partner,.partner a{font-size:14px;line-height:1.5}
  .partner{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
  .partner a{min-height:44px}
  .learning-demo{margin-top:28px}
  .site-note{display:none}
  .site-demo{aspect-ratio:352/646;margin:28px 0 0;width:100%;align-self:stretch}
  .site-flow{margin-top:28px;padding:20px 0 0;border-top:1px solid var(--line);gap:20px}
  .site-flow ol{gap:8px;flex-wrap:nowrap}
  .site-flow li{flex-direction:column;font-size:14px;gap:8px}
  .site-flow .flow-arrow .icon{width:18px}
  .site-flow p{font-size:14px;align-self:flex-start;max-width:none}
  .photo-note{margin-top:24px;gap:16px}
  .photo-note p{font-size:14px;line-height:1.5;padding:12px 16px}
  .photo-tools a{font-size:17px;line-height:1.4;gap:16px}
  .photos .section-head{margin-bottom:24px}
}
@media(max-width:374px){
  :root{--landing-gutter:20px}
  .hero .intro,.photos .section-head .intro,.learning .intro,.websites .intro,.about-landing .intro{font-size:16px}
  .site-flow ol{gap:5px}
  .site-flow li{font-size:13px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}