/* Homepage visual treatment. Kept separate so the previous design is easy to restore. */
.homepage {
  --line: rgba(178, 199, 207, .15);
  --muted: #a9b5b9;
  --accent: #8be2d5;
  --accent-cyan: #72ddd6;
  --preview-outset: clamp(24px, 2.2vw, 40px);
}

.homepage .site-header {
  background: rgba(8, 12, 14, .82);
  border-bottom-color: rgba(178, 199, 207, .12);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
}
.homepage .header-inner { min-height: 84px; }
.homepage .wordmark { font-size: 1.0625rem; letter-spacing: .13em; font-weight: 600; }
.homepage .desktop-nav { gap: 8px; }
.homepage .desktop-nav a { padding: 10px 14px; border-radius: 8px; color: #b0bdc2; font-size: 1rem; }
.homepage .signin { font-size: 1rem; }
.homepage .desktop-nav a:hover { color: #f3faf8; background: rgba(192, 220, 220, .06); }
.homepage .button { border-radius: 9px; font-size: 1rem; font-weight: 550; }
.homepage .button-light { background: #e4efec; border-color: #e4efec; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
.homepage .button-light:hover { background: #f5fffc; border-color: #f5fffc; }
.homepage .button-small { min-height: 42px; }
.homepage .menu-toggle { min-height: 42px; border-color: var(--line); border-radius: 8px; font-size: .9375rem; }

.homepage .hero { padding-top: clamp(72px, 6vw, 104px); }
.homepage .hero-layout { padding-bottom: 76px; }
.homepage .hero h1 { font-size: clamp(3.25rem, 4.65vw, 5rem); line-height: 1.055; letter-spacing: -.055em; }
.homepage .hero h1 span { color: #b4c5c0; }
.homepage .hero-description { max-width: 520px; gap: 14px; margin-top: 28px; font-size: 1.25rem; line-height: 1.65; color: #a8b5ba; }
.homepage .hero-description p { text-wrap: pretty; }
.homepage .hero-description p:first-child { color: #d2dedc; font-weight: 450; }
.homepage .hero-downloads { gap: 12px; margin-top: 32px; }
.homepage .platform-button {
  min-height: 66px;
  gap: 13px;
  padding: 12px 20px;
  border: 1px solid rgba(181, 205, 211, .23);
  border-radius: 12px;
  background: linear-gradient(180deg, #1c272d, #121a20);
  box-shadow: inset 0 1px 0 rgba(223, 241, 244, .06), 0 8px 24px rgba(0, 0, 0, .15);
  color: #b7c8cc;
  font-size: .8125rem;
  font-weight: 450;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.homepage .platform-button strong { margin-top: 3px; color: #f0f7f5; font-size: 1.125rem; font-weight: 600; }
.homepage .platform-icon { flex-basis: 28px; width: 28px; height: 28px; color: #fff; }
.homepage .trial-note { color: #a0b1b3; font-size: .875rem; }
.homepage .hero-copy > .hero-actions:not(.hero-downloads) { margin-top: 25px; }
.homepage .hero-copy .button-outline { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #b9cbc9; }
.homepage .hero-copy .button-outline:hover { color: #eefaf7; transform: none; }
.homepage .hero-copy .button-outline span { color: var(--accent); }
.homepage .hero-preview {
  --preview-outset: clamp(20px, 1.7vw, 32px);
  border-radius: 16px;
}
/* Give the hero artwork room while keeping workflow previews on the content grid. */
.homepage .hero-preview {
  width: calc(100% + var(--preview-outset) * 2);
  margin-inline: calc(var(--preview-outset) * -1);
}
.homepage .hero-caption { max-width: 40rem; margin: 18px auto 0; padding-inline: 16px; color: #a9babf; font-size: 1.125rem; font-weight: 700; line-height: 1.65; text-align: center; text-wrap: balance; }

.homepage .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .75rem; line-height: 1.5; letter-spacing: .17em; font-weight: 550; }
.homepage .eyebrow::before { content: ""; flex: 0 0 20px; height: 1px; background: currentColor; opacity: .65; }
.homepage .intro { padding-top: 68px; }
.homepage .intro > .eyebrow { white-space: nowrap; }
.homepage .intro .section-heading { display: block; max-width: 860px; margin-top: 22px; }
.homepage .section-heading h2 { font-size: clamp(2.75rem, 4.1vw, 4rem); line-height: 1.1; letter-spacing: -.045em; }
.homepage .workflow-nav { margin-top: 38px; border: 1px solid var(--line); border-radius: 12px; background: rgba(14, 21, 25, .7); overflow: hidden; }
.homepage .workflow-nav a { gap: 16px; min-height: 76px; padding: 20px 26px; font-size: .875rem; letter-spacing: .08em; transition: color .2s, background .2s; }
.homepage .workflow-nav a:not(:first-child) { padding-left: 26px; }
.homepage .workflow-nav a:hover { background: rgba(139, 226, 213, .055); color: #ecfff9; }
.homepage .workflow-nav a:focus-visible { outline-offset: -4px; }
.homepage .workflow-nav span { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid rgba(139, 226, 213, .18); border-radius: 50%; color: #9fcdc4; font-size: .75rem; letter-spacing: .02em; }

.homepage .feature-section { padding-block: 96px; column-gap: clamp(40px, 4.5vw, 72px); row-gap: 24px; }
.homepage .feature-copy .eyebrow { margin-bottom: 22px; white-space: nowrap; }
.homepage .feature-copy h2 { font-size: clamp(2.6rem, 3.85vw, 3.75rem); line-height: 1.1; letter-spacing: -.045em; }
.homepage .feature-copy > p { max-width: 46ch; margin-top: 24px; font-size: 1.125rem; line-height: 1.75; color: #aebbc0; }
.homepage .feature-points { margin-top: 0; border-top: 1px solid var(--line); padding-top: 4px; }
.homepage .feature-points li { margin: 0; padding-block: 11px; gap: 14px; font-size: 1rem; line-height: 1.7; color: #c6d2d4; border-bottom: 1px solid rgba(178, 199, 207, .08); }
.homepage .feature-points li::before { flex: 0 0 12px; color: #92d6ca; }
.homepage .feature-link { min-height: 44px; margin-top: 20px; padding-bottom: 0; border-bottom-color: rgba(139, 226, 213, .35); color: #d0e4de; font-size: 1rem; }
.homepage .feature-link span { color: var(--accent); }
.homepage #collect .feature-media,
.homepage #compose .feature-media,
.homepage #share .feature-media {
  padding: 8px;
  border: 1px solid rgba(171, 190, 205, .2);
  border-radius: 16px;
  background: linear-gradient(155deg, #181b23, #090c11 70%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(230, 243, 255, .035);
}
.homepage .collect-video, .homepage .arrange-video, .homepage .share-video { border-radius: 8px; }
.homepage #share { border-bottom: 0; }

.homepage .pricing-area { padding-block: 92px 80px; background: rgba(9, 14, 17, .92); border-color: var(--line); }
.homepage .pricing-intro { max-width: 1240px; margin-inline: auto; }
.homepage .pricing-heading .eyebrow { margin-bottom: 18px; white-space: nowrap; }
.homepage .pricing-heading h2 { font-size: clamp(2.75rem, 4.1vw, 4rem); line-height: 1.1; letter-spacing: -.045em; }
.homepage .pricing-heading p { margin-top: 18px; font-size: 1.125rem; color: #aebcc2; }
.homepage .pricing-heading h2, .homepage .pricing-heading p { text-wrap: balance; }
.homepage .pricing-video { border-radius: 16px; }
.homepage .pricing-section { max-width: 1160px; margin: 48px auto 0; gap: 24px; }
.homepage .pricing-section.pricing-two-card { max-width: 800px; }
.homepage .pricing-toggle { justify-self: center; width: fit-content; max-width: 100%; margin-bottom: 18px; padding: 5px; gap: 3px; border: 1px solid var(--line); border-radius: 999px; background: #11191e; }
.homepage .pricing-toggle button { min-height: 42px; padding: 9px 25px; border-radius: 999px; color: #9fb1b8; font-size: 1rem; transition: color .2s, background .2s, border-color .2s; }
.homepage .pricing-toggle button.active { color: #dffaf1; border-color: rgba(139, 226, 213, .23); background: #223a39; box-shadow: 0 2px 8px rgba(0, 0, 0, .14); }
.homepage .pricing-toggle button:hover { color: #e8f8f3; }
.homepage .price-card { min-height: 348px; padding: 30px; border: 1px solid rgba(178, 199, 207, .18); border-radius: 16px; background: linear-gradient(155deg, #1a2329, #10171b); box-shadow: 0 10px 32px rgba(0, 0, 0, .1); }
.homepage .price-card.featured { border-color: rgba(139, 226, 213, .5); background: linear-gradient(155deg, #213434, #111e22); box-shadow: 0 18px 48px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(178, 247, 232, .07); }
.homepage .price-card h3 { order: -2; margin: 0 0 12px; color: #d5e4e4; font-size: 1.125rem; font-weight: 550; letter-spacing: -.015em; }
.homepage .price { order: -1; margin: 0 0 24px; gap: 3px; }
.homepage .price > span { font-size: 1.25rem; color: #bbd4d0; }
.homepage .price strong { font-size: 3.5rem; font-weight: 450; letter-spacing: -.045em; }
.homepage .price small { color: #9cafb7; font-size: .875rem; }
.homepage .seat-note { font-size: .875rem; color: #b0c2c6; line-height: 1.8; }
.homepage .billing { margin: 12px 0 25px; color: #93aaaF; font-size: .875rem; }
.homepage .popular-badge { top: -14px; right: 22px; padding: 4px 12px; border-color: #467970; border-radius: 999px; background: #203d37; color: #c8f5e4; font-size: .8125rem; font-weight: 500; letter-spacing: .02em; }
.homepage .price-button { min-height: 48px; border-radius: 9px; border-color: #334a52; background: rgba(35, 53, 60, .55); color: #deefec; font-size: 1rem; font-weight: 550; }
.homepage .price-button:hover { background: #293f43; border-color: #648d8c; }
.homepage .price-button.primary { background: #89dfcf; color: #0b2624; border-color: #89dfcf; box-shadow: inset 0 1px 0 rgba(242, 255, 251, .35); }
.homepage .price-button.primary:hover { background: #a3f0df; border-color: #a3f0df; }
.homepage .seat-picker { font-size: .875rem; }
.homepage .seat-controls button { min-height: 36px; }
.homepage .seat-controls input { height: 36px; }
.homepage .seat-controls button:first-child { border-radius: 6px 0 0 6px; }
.homepage .seat-controls button:last-child { border-radius: 0 6px 6px 0; }
.homepage .pricing-footnote { max-width: 720px; margin-top: 28px; font-size: .875rem; line-height: 1.8; color: #98abb3; }

.homepage .faq { padding-block: 112px; gap: 80px; }
.homepage .faq .eyebrow { white-space: nowrap; }
.homepage .faq h2 { margin-top: 22px; font-size: clamp(2.65rem, 3.65vw, 3.5rem); line-height: 1.1; letter-spacing: -.045em; }
.homepage .faq-list { display: grid; align-content: start; gap: 10px; }
.homepage .faq-list details { border: 1px solid var(--line); border-radius: 12px; padding-inline: 22px; background: rgba(14, 21, 25, .8); }
.homepage .faq-list details[open] { border-color: rgba(139, 226, 213, .3); background: rgba(21, 33, 37, .9); }
.homepage .faq-list summary { align-items: center; min-height: 74px; padding-block: 20px; gap: 20px; font-size: 1rem; color: #d5e1e1; line-height: 1.55; }
.homepage .faq-list summary::after { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; border: 1px solid rgba(178, 199, 207, .18); border-radius: 50%; color: #a4d8ca; font-size: 1rem; line-height: 1; }
.homepage .faq-list details p { margin: 0 32px 22px 0; font-size: 1rem; line-height: 1.75; color: #a9babf; }
.homepage .closing { padding: 80px 40px; overflow: hidden; border: 1px solid rgba(158, 198, 194, .25); border-radius: 20px; background: radial-gradient(ellipse at 50% 0, rgba(74, 121, 112, .18), transparent 65%), linear-gradient(135deg, #142126, #0d1419 70%); box-shadow: 0 24px 64px rgba(0, 0, 0, .2); }
.homepage .closing::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(180, 244, 224, .4), transparent); pointer-events: none; }
.homepage .closing .eyebrow { display: block; color: #a6c8c1; margin: 0 auto 24px; letter-spacing: .12em; text-wrap: balance; }
.homepage .closing .eyebrow::before { content: none; }
.homepage .closing h2 { font-size: clamp(2.85rem, 4.8vw, 4.5rem); letter-spacing: -.045em; }
.homepage .closing .hero-actions { margin-top: 32px; }
.homepage .closing .button-outline { background: rgba(255, 255, 255, .025); border-color: rgba(177, 210, 214, .27); }
.homepage .site-footer { padding-top: 84px; }
.homepage .footer-top { padding-bottom: 60px; }
.homepage .footer-top p { font-size: .875rem; }
.homepage .footer-top nav { gap: 13px; color: #95a7ad; font-size: .875rem; }
.homepage .footer-top nav strong { margin-bottom: 7px; color: #d8e2e1; font-size: .75rem; letter-spacing: .09em; text-transform: uppercase; }
.homepage .footer-bottom { padding-block: 25px 34px; color: #92a5ab; font-size: .8125rem; }
.homepage .footer-social { gap: 8px; }
.homepage .footer-social a { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: #8eaaa9; }
.homepage .footer-social svg { width: 15px; height: 15px; }

@media (hover: hover) and (pointer: fine) {
  .homepage .platform-button:hover { border-color: rgba(148, 224, 212, .6); background: linear-gradient(180deg, #23353b, #17272e); box-shadow: inset 0 1px 0 rgba(223, 241, 244, .1), 0 12px 28px rgba(0, 0, 0, .2); transform: translateY(-2px); }
}
@media (max-width: 1100px) {
  .homepage, .homepage .hero-preview { --preview-outset: 12px; }
  .homepage .header-inner { gap: 22px; }
  .homepage .feature-section { column-gap: 36px; padding-block: 80px; }
  .homepage .price-card { padding: 26px 22px; }
  .homepage .pricing-section { gap: 18px; }
  .homepage .price strong { font-size: 3.1rem; }
  .homepage .faq { gap: 44px; }
}
@media (max-width: 960px) {
  .homepage .hero { padding-top: 72px; }
  .homepage .hero-layout { padding-bottom: 24px; gap: 32px; }
  .homepage .hero h1 { font-size: clamp(3.5rem, 8.3vw, 5rem); }
  .homepage .hero-description { margin-inline: auto; max-width: 520px; }
  .homepage .hero-description p { text-wrap: balance; }
  .homepage .hero-copy { max-width: 700px; }
  .homepage .intro { padding-top: 64px; }
  .homepage .feature-section, .homepage .feature-section.reverse { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "details"; gap: 30px; padding-block: 72px; }
  .homepage .feature-copy, .homepage .feature-details { max-width: 680px; }
  .homepage .feature-copy h2 { font-size: 3.3rem; }
  .homepage .feature-copy > p { max-width: 58ch; }
  .homepage .faq { grid-template-columns: 1fr; gap: 36px; padding-block: 80px; }
}
@media (max-width: 800px) {
  .homepage .header-inner { min-height: 74px; gap: 0; }
  .homepage .desktop-nav { gap: 8px; margin-top: 14px; padding: 12px 0; }
  .homepage .desktop-nav a { padding: 10px 14px; }
  .homepage .wordmark { font-size: .9375rem; }
  .homepage .pricing-area { padding-block: 72px 60px; }
  .homepage .pricing-section, .homepage .pricing-section.pricing-two-card { max-width: 540px; grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .homepage .price-card { min-height: 324px; padding: 28px; }
  .homepage .price strong { font-size: 3.5rem; }
  .homepage .workflow-nav a { justify-content: center; }
  .homepage .closing { padding: 64px 32px; }
  .homepage .site-footer { padding-top: 64px; }
}
@media (max-width: 540px) {
  .homepage, .homepage .hero-preview { --preview-outset: 8px; }
  .homepage .header-inner { min-height: 70px; }
  .homepage .header-inner .wordmark { font-size: .75rem; letter-spacing: .1em; }
  .homepage .header-actions .button { min-height: 40px; font-size: .8125rem; padding: 10px 11px; }
  .homepage .menu-toggle { font-size: .8125rem; min-height: 40px; }
  .homepage .hero { padding-top: 52px; }
  .homepage .hero-layout { gap: 22px; }
  .homepage .hero h1 { font-size: clamp(2.75rem, 11vw, 3.75rem); letter-spacing: -.05em; }
  .homepage .hero-description { margin-top: 24px; font-size: 1.125rem; line-height: 1.7; }
  .homepage .hero-downloads { margin-top: 28px; gap: 10px; }
  .homepage .platform-button { justify-content: center; min-height: 62px; }
  .homepage .hero-copy > .hero-actions:not(.hero-downloads) { margin-top: 18px; }
  .homepage .hero-copy .button-outline { justify-content: center; }
  .homepage .eyebrow { gap: 9px; font-size: .75rem; letter-spacing: .13em; }
  .homepage .eyebrow::before { flex-basis: 16px; }
  .homepage .section-heading h2 { font-size: 2.5rem; }
  .homepage .workflow-nav { margin-top: 30px; }
  .homepage .workflow-nav a { min-height: 94px; gap: 10px; align-items: center; text-align: center; font-size: .75rem; letter-spacing: .035em; }
  .homepage .feature-section, .homepage .feature-section.reverse { padding-block: 64px; gap: 30px; }
  .homepage .feature-copy h2 { font-size: 2.5rem; }
  .homepage .feature-copy > p { font-size: 1.0625rem; line-height: 1.75; }
  .homepage .feature-points li { padding-block: 12px; }
  .homepage #collect .feature-media, .homepage #compose .feature-media, .homepage #share .feature-media { padding: 6px; border-radius: 12px; box-shadow: 0 16px 36px rgba(0, 0, 0, .25); }
  .homepage .collect-video, .homepage .arrange-video, .homepage .share-video { border-radius: 5px; }
  .homepage .pricing-heading h2 { font-size: 2.5rem; }
  .homepage .pricing-heading p { font-size: 1.0625rem; line-height: 1.75; }
  .homepage .pricing-section { margin-top: 28px; }
  .homepage .pricing-toggle { gap: 2px; margin-bottom: 10px; }
  .homepage .pricing-toggle button { padding-inline: 18px; font-size: .875rem; }
  .homepage .price-card { min-height: 318px; padding: 28px 24px; }
  .homepage .faq { padding-block: 68px; }
  .homepage .faq h2 { font-size: 2.65rem; }
  .homepage .faq-list details { padding-inline: 17px; }
  .homepage .faq-list summary { min-height: 72px; gap: 16px; }
  .homepage .faq-list details p { margin-right: 0; }
  .homepage .closing { padding: 52px 22px; border-radius: 16px; }
  .homepage .closing .eyebrow { line-height: 1.8; }
  .homepage .closing h2 { font-size: 2.75rem; }
  .homepage .closing .hero-actions { margin-top: 26px; }
  .homepage .footer-top { padding-bottom: 38px; }
  .homepage .footer-bottom { padding-bottom: 28px; }
}
@media (max-width: 380px) {
  .homepage .header-inner { width: calc(100% - 24px); }
  .homepage .header-actions .button { padding-inline: 8px; }
  .homepage .hero h1 { font-size: 2.4rem; }
  .homepage .pricing-toggle button { padding-inline: 15px; }
  .homepage .closing .eyebrow { letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage .platform-button:hover { transform: none; }
}