/* Product benefits and storage plans share the homepage's restrained palette. */
.hero-plan-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 15px; font-size: 10px; color: #62665b; }
.hero-plan-link:hover { color: var(--red); }
.hero-plan-link span { font-size: 15px; }
.hero-footnote { margin-top: 34px; }
.ai-feature { margin-top: 60px; padding: 44px 48px; background: #e8eae2; display: grid; grid-template-columns: 1.25fr 1fr; gap: 66px; align-items: center; }
.ai-copy .eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 8px; }
.coming-soon { padding: 4px 7px; border: 1px solid #9ca58b; color: #536041; font-size: 8px; letter-spacing: .08em; white-space: nowrap; }
.ai-copy h3 { font-size: 32px; line-height: 1.6; letter-spacing: -.04em; margin-top: 19px; }
.ai-copy > p:not(.eyebrow) { font-size: 12px; line-height: 2.15; margin-top: 19px; color: #626957; }
.ai-copy > p.ai-status { font-size: 10px; color: #68745b; }
.ai-flow { min-width: 0; padding: 20px 23px; border: 1px solid #c6cdbb; background: #f4f5ee; }
.ai-flow-top { display: flex; justify-content: space-between; gap: 10px; font-size: 7px; color: #78826b; letter-spacing: .06em; }
.ai-photo-pile { display: flex; justify-content: center; padding: 17px 20px 6px; }
.ai-photo-pile img { width: 43%; border: 4px solid white; box-shadow: 0 3px 8px #20251a21; object-fit: cover; }
.ai-photo-pile img:first-child { transform: rotate(-8deg); }
.ai-photo-pile img:last-child { transform: rotate(7deg); margin-left: -11px; }
.ai-process { display: flex; justify-content: center; gap: 17px; align-items: center; font-size: 10px; color: #65754e; margin: 10px 0 20px; }
.ai-process > span:nth-child(2) { border: 1px solid #b9c6a5; padding: 3px 13px; background: #e7eddf; }
.ai-folders { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ai-folders > div { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 13px 13px 10px; background: #e1e6d7; }
.folder-tab { position: absolute; top: -5px; left: 0; width: 37%; height: 7px; background: #e1e6d7; border-radius: 4px 4px 0 0; }
.ai-folders b { font: 23px/1 var(--display); color: #596848; }
.ai-folders span:not(.folder-tab) { font-size: 9px; font-weight: 600; }
.ai-folders small { display: block; width: 100%; font-size: 7px; color: #707b63; }
.plans { border-top: 1px solid var(--line); background: #eaece5; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.plan-card { display: flex; flex-direction: column; padding: 35px 39px 25px; background: var(--paper); border: 1px solid #d3d7c9; }
.plan-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.plan-top h3 { font: 27px/1 var(--display); }
.plan-top > span { font-size: 10px; color: #727968; }
.plan-capacity { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 30px; }
.plan-capacity strong { font: 85px/1.1 var(--display); letter-spacing: -.015em; }
.plan-capacity strong span { font-size: 28px; margin-left: 7px; }
.plan-capacity > span { font-size: 10px; padding-bottom: 9px; color: #747b6b; }
.plan-price { font-size: 23px; font-weight: 650; margin-top: 13px; }
.plan-price > span { font-size: 11px; font-weight: 400; margin-left: 7px; }
.plan-yearly { font-size: 10px; margin-top: 3px; color: #b5bea8; }
.plan-card ul { list-style: none; padding: 23px 0 26px; margin: 24px 0 0; border-top: 1px solid #d5d9cd; display: grid; gap: 11px; font-size: 12px; }
.plan-card li { position: relative; padding-left: 23px; }
.plan-card li:before { content: '✓'; position: absolute; left: 0; color: #7b8d67; }
.plan-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 46px; margin-top: auto; padding-top: 15px; border-top: 1px solid #d5d9cd; font-size: 11px; font-weight: 600; }
.plan-link span { font-size: 22px; }
.plan-link:hover { color: var(--red); }
.plan-pro { background: #22281e; color: #f4f3ee; border-color: #22281e; }
.plan-pro .plan-top > span, .plan-pro .plan-capacity > span { color: #b5bea8; }
.plan-pro .plan-capacity strong { color: #d4e1bc; }
.plan-pro ul, .plan-pro .plan-link { border-color: #4d5743; }
.plan-pro li:before { color: #bdce9e; }
.plan-pro .plan-link:hover { color: #d4e1bc; }
.plans-shared { text-align: center; font-size: 12px; margin-top: 25px; color: #616959; }
.plans .sample-note { max-width: 930px; margin-inline: auto; text-align: center; }
@media(max-width:1100px) { .ai-feature { gap: 34px; padding: 35px; } .plan-card { padding: 30px; } }
@media(max-width:800px) { .ai-feature { padding: 28px; gap: 28px; grid-template-columns: 1fr 1fr; } .ai-copy h3 { font-size: 26px; } .ai-copy > p:not(.eyebrow) { font-size: 11px; } .ai-flow { padding: 16px; } .ai-folders { gap: 10px; } .ai-folders > div { padding: 12px 9px 9px; } .ai-folders span:not(.folder-tab) { font-size: 8px; } .plan-card { padding: 25px; } .plan-capacity { display: block; } .plan-capacity > span { display: block; padding: 8px 0 0; } .plan-card ul { font-size: 11px; } }
@media(max-width:600px) { .hero-plan-link { font-size: 9px; margin-top: 12px; gap: 7px; } .ai-feature { margin-top: 35px; padding: 27px 22px; grid-template-columns: 1fr; gap: 26px; } .ai-copy .eyebrow { font-size: 7px; gap: 9px; } .ai-copy h3 { font-size: 26px; margin-top: 17px; } .ai-copy > p:not(.eyebrow) { font-size: 11px; margin-top: 15px; } .ai-copy > p.ai-status { font-size: 9px; } .ai-flow { padding: 19px; } .ai-folders { gap: 14px; } .ai-folders > div { padding: 13px 10px 10px; } .ai-folders b { font-size: 24px; } .ai-photo-pile { padding-top: 20px; } .plan-grid { grid-template-columns: 1fr; gap: 20px; } .plan-card { padding: 27px 25px 22px; } .plan-capacity { display: flex; margin-top: 25px; } .plan-capacity strong { font-size: 77px; } .plan-capacity strong span { font-size: 25px; } .plan-capacity > span { font-size: 9px; padding-bottom: 8px; } .plan-price { font-size: 22px; } .plan-card ul { font-size: 11px; margin-top: 22px; } .plan-top h3 { font-size: 25px; } .plan-top > span { font-size: 9px; } .plans-shared { font-size: 10px; text-align: left; } .plans .sample-note { text-align: left; } }