.features-content { display: flex; flex-direction: column; gap: 100px; padding: 70px 0 90px; }
.features-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.features-content h1 { color: var(--accent); font-size: clamp(48px, 6vw, 76px); line-height: 1.05; letter-spacing: -2.8px; text-wrap: balance; }
.features-lead { max-width: 660px; color: var(--ink); font-size: 22px; line-height: 34px; }
.feature-kicker { color: var(--accent); font: 13px/22px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.feature-kicker { letter-spacing: .07em; text-transform: uppercase; }
.features-jumps { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 4px; }
.features-jumps a, .feature-home-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--accent); }
.feature-section { display: flex; flex-direction: column; gap: 48px; scroll-margin-top: 32px; }
.section-intro { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.section-intro h2, .purchase-note h2 { color: var(--accent); font-size: clamp(30px, 3.5vw, 44px); line-height: 1.2; letter-spacing: -1px; }
.section-intro > p:last-child { color: var(--muted); font-size: 18px; line-height: 30px; }
.free-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 70px; }
.free-features article, .feature-copy { display: flex; flex-direction: column; gap: 14px; }
.features-content h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--ink); font-family: Georgia, serif; font-size: 25px; line-height: 34px; font-weight: 400; letter-spacing: -.5px; scroll-margin-top: 32px; }
.features-content article p, .purchase-note p { color: var(--muted); font-size: 17px; line-height: 29px; text-wrap: pretty; }
.features-content article strong { font-weight: 400; color: var(--ink); }
.free-features a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent); }
.purchase-flag { display: inline-flex; align-items: center; flex-shrink: 0; padding: 4px 9px; border: 1px solid var(--rule); border-radius: 999px; color: var(--accent); font: 12px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; white-space: nowrap; }
.personality-features, .extra-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px 70px; }
.feature-with-preview { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.feature-copy { flex: 1; }
.feature-visual { position: relative; width: 100%; max-width: 440px; aspect-ratio: 1 / 1.38; align-self: center; isolation: isolate; }
.feature-screen { display: block; position: absolute; left: 6%; top: 0; height: auto; width: 62%; max-width: none; border-radius: 16px; z-index: 1; box-shadow: 0 0 0 1px rgb(242 238 229 / .18), 0 0 30px rgb(0 0 0 / .65); }
.feature-detail { display: block; position: absolute; right: 0; top: 40%; width: 49%; height: auto; z-index: 5; filter: drop-shadow(0 0 12px rgb(0 0 0 / .42)) drop-shadow(0 9px 14px rgb(0 0 0 / .28)); }
.feature-visual--wide-detail .feature-detail { width: 76%; top: 43%; }
.feature-visual--print .feature-detail { width: 51%; top: 27%; transform: rotate(3deg); }
.free-features .feature-with-preview { gap: 28px; }
.purchase-note { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 0 0; border-top: 1px solid var(--rule); max-width: 760px; }
.feature-home-link { gap: 10px; }
:root[data-feature-layout="list"] .free-features, :root[data-feature-layout="list"] .personality-features, :root[data-feature-layout="list"] .extra-features { display: flex; flex-direction: column; }
:root[data-feature-layout="list"] .feature-with-preview { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
@media (max-width: 700px) {
  .features-content { padding: 40px 0 60px; gap: 70px; }
  .features-content h1 { font-size: clamp(44px, 9vw, 60px); letter-spacing: -1.8px; }
  .features-intro { gap: 20px; }
  .features-lead { font-size: 20px; line-height: 31px; }
  .features-jumps { gap: 0 20px; }
  .feature-section { gap: 32px; }
  .free-features, .personality-features, .extra-features { grid-template-columns: 1fr; gap: 32px; }
  .personality-features, .extra-features { gap: 48px; }
  .feature-visual { max-width: 370px; }
  :root[data-feature-layout="list"] .feature-with-preview { grid-template-columns: 1fr; }
  .features-content h3 { font-size: 24px; line-height: 33px; }
  .purchase-note { padding-top: 32px; }
}

.film-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 70px; scroll-margin-top: 32px; }
.film-feature .feature-copy { min-width: 0; }
.film-compass { position: relative; width: min(100%, 520px); aspect-ratio: 760 / 620; align-self: center; justify-self: center; margin-bottom: 36px; }
.film-compass figure { position: absolute; width: 28%; aspect-ratio: 1; }
.film-compass img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 57% center; border-radius: 50%; box-shadow: 0 0 0 1px rgb(242 238 229 / .12), 0 0 18px rgb(0 0 0 / .3); }
.film-compass figcaption { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--accent); font-family: Georgia, serif; font-size: clamp(16px, 2vw, 20px); line-height: 26px; }
.film-compass .film-compass-neutral { width: 16%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.film-compass-spring { left: 9%; top: 3%; }
.film-compass-summer { right: 9%; top: 3%; }
.film-compass-autumn { left: 9%; bottom: 3%; }
.film-compass-winter { right: 9%; bottom: 3%; }
.film-arrows { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--accent); }
.film-arrows path { vector-effect: non-scaling-stroke; }
.feature-visual--story .feature-detail { width: 70%; top: 27%; }
.feature-visual--privacy .feature-detail { width: 64%; top: 34%; }
.feature-visual--lock { aspect-ratio: 1 / 1.38; }
.feature-screen--lock { aspect-ratio: 402 / 874; overflow: hidden; container-type: inline-size; background: #25332d; color: white; }
.lock-wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-screen--lock::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(0 0 0 / .25), transparent 50%, rgb(0 0 0 / .4)); }
.lock-date, .lock-time { position: absolute; z-index: 2; left: 0; width: 100%; text-align: center; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.lock-date { top: 11%; font-size: 5cqw; line-height: 1.4; font-weight: 500; }
.lock-time { top: 14%; font-size: 28cqw; line-height: 1; letter-spacing: -.06em; font-weight: 200; }
.lock-padlock { position: absolute; z-index: 2; top: 5%; left: 46%; width: 8%; height: auto; }
.lock-action { position: absolute; z-index: 2; bottom: 5%; width: 20%; height: auto; }
.lock-action--analogish { right: 8%; }
.lock-action--flashlight { left: 8%; }
.lock-home { position: absolute; z-index: 2; width: 34%; height: 4px; left: 33%; bottom: 1.3%; border-radius: 99px; background: white; }
.feature-visual-caption { position: absolute; left: 6%; bottom: -24px; color: var(--muted); font: 13px/20px -apple-system, BlinkMacSystemFont, sans-serif; }

.feature-visual--exif { aspect-ratio: 1 / 1.2; }
.feature-visual--exif .feature-screen { width: 94%; left: 0; top: 34%; border-radius: 12px; }
.feature-visual--exif .feature-detail { width: 70%; top: 3%; }

@media (max-width: 700px) {
  .film-feature { grid-template-columns: 1fr; gap: 24px; }
}

.film-notes { display: flex; flex-direction: column; gap: 12px; }
.film-notes > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
.film-notes dt { color: var(--accent); font: 18px/26px Georgia, serif; }
.film-notes dd { color: var(--muted); font-size: 16px; line-height: 26px; }

.features-heading { display: flex; flex-direction: column; gap: 28px; }
.help-tabs.features-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features-next { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 40px; border-top: 1px solid var(--rule); max-width: 760px; }
.features-next h2, .features-overview h2 { color: var(--accent); font-size: 30px; line-height: 1.25; }
.features-next p { color: var(--muted); font-size: 18px; line-height: 30px; }
.features-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px; }
.features-overview article { display: flex; flex-direction: column; gap: 16px; }
:root[data-feature-layout="list"] .features-overview { grid-template-columns: 1fr; }
@media (max-width: 700px) {
  .features-heading { gap: 24px; }
  .features-overview { grid-template-columns: 1fr; gap: 32px; }
}