.features-page main > section + section { border-top: 0; }
.features-page .feature-screen { padding-block: 64px; }
.feature-screen .section-heading { display: grid; grid-template-columns: .65fr 1fr; gap: 48px; align-items: start; max-width: none; margin-bottom: 40px; }
.feature-screen .section-heading h2 { font-size: 52px; line-height: 1.1; }
.feature-screen .section-heading p { max-width: 650px; margin: 0; font-size: 18px; }

/* Use the current follow-up artwork's light surface, scale and right/bottom crop. */
.feature-crop { margin: 0; border-radius: 12px; overflow: hidden; background: radial-gradient(ellipse at 90% 0%, #e4dcc1, transparent 65%), radial-gradient(ellipse at 0% 100%, #5c9691, transparent 70%), linear-gradient(125deg, #a4b9af, #c8d4c7 60%, #95babc); }
.feature-canvas { position: relative; isolation: isolate; width: 1280px; height: 520px; zoom: var(--benefit-scale, 1); }
.feature-canvas::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('/assets/gradient-grain.svg'); opacity: .2; }
.feature-sheet { position: absolute; top: 68px; left: 15%; width: 1240px; min-height: 600px; padding: 36px; border-radius: 30px; background: linear-gradient(115deg, #f5f8fa, #f0f7f5); box-shadow: 0 18px 50px #294b4a30, 0 1px 2px #ffffffb3 inset; color: #292d30; }
.feature-ui-heading { display: flex; align-items: center; gap: 20px; }
.feature-ui-heading h3 { margin: 0; font-size: 32px; line-height: 1; letter-spacing: -.03em; }
.feature-ui-heading > span { color: #556163; font-size: 16px; }
.feature-ui-heading .feature-segments { margin-left: auto; }
.feature-sheet h4 { font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.feature-sheet p { color: #556163; font-size: 19px; line-height: 1.5; }
.feature-sheet svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.feature-ui-description { margin-top: 24px; }
.feature-ui-action { display: inline-block; padding: 10px 18px; border: 1px solid #c6d2d6; border-radius: 10px; background: #e1e9ec; color: #34434a; font-size: 17px; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 2px #3b505a12, inset 0 1px 1px #fff; }
.feature-segments { display: flex; padding: 3px; border-radius: 22px; background: #dce4e9; box-shadow: inset 0 1px 2px #fff, 0 2px 4px #3b505a0d; }
.feature-segments > span { padding: 8px 24px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.feature-segments .is-selected { border-radius: 20px; background: #f0f5f8; box-shadow: 0 1px 4px #39526026; }

.feature-home-widgets { display: grid; grid-template-columns: repeat(3, 450px); gap: 22px; margin-top: 36px; }
.feature-widget { padding: 8px; border: 1px solid #c1ccce; border-radius: 26px; background: #e8eff0; box-shadow: 0 8px 20px #294b4a0a; }
.feature-widget-body { min-height: 390px; padding: 26px; border: 1px solid #ccd6d7; border-radius: 20px; background: #f2f7f7; }
.feature-widget-body p { margin-top: 20px; }
.feature-widget-body .feature-ui-action { margin-top: 22px; }
.feature-widget-body .feature-ui-heading { justify-content: space-between; }
.feature-widget-body .feature-ui-heading > span { font-size: 14px; }
.feature-widget-footer { display: flex; align-items: center; justify-content: space-between; padding: 16px; font-size: 16px; font-weight: 600; }

.feature-you-sheet { width: 1420px; }
.feature-you-sheet > .feature-ui-heading { width: 990px; }
.feature-style-layout { display: grid; grid-template-columns: 190px 620px 340px; align-items: start; gap: 24px; margin-top: 28px; }
.feature-scenes { display: grid; gap: 14px; }
.feature-scenes > div { display: flex; align-items: center; justify-content: space-between; padding: 17px 18px; border: 1px solid #cbd6d8; border-radius: 18px; background: #eaf1f2; font-size: 17px; }
.feature-scenes strong { font-weight: 600; }
.feature-scenes > div > span { display: flex; align-items: center; gap: 10px; color: #768385; }
.feature-style-fields { padding: 8px; border: 1px solid #c1ccce; border-radius: 24px; background: #e8eff0; }
.feature-field { padding: 20px; border: 1px solid #d1dcdc; border-radius: 16px; background: #f4f8f7; }
.feature-field + .feature-field { margin-top: 10px; }
.feature-field h4 { font-size: 17px; letter-spacing: 0; }
.feature-field p { margin-top: 12px; font-size: 18px; }
.feature-field-row { display: flex; align-items: center; gap: 18px; }
.feature-field-row .feature-ui-action { margin-top: 12px; }
.feature-ui-input { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 8px 10px 8px 15px; border: 1px solid #d3dddf; border-radius: 12px; background: #e9eff1; color: #768385; font-size: 17px; }
.feature-ui-input > span + span { padding: 4px 15px; border-radius: 7px; background: #dbe5e6; color: #6e7b7d; }
.feature-learned { padding: 24px; }
.feature-learned h4 { font-size: 23px; }
.feature-learned > strong { display: block; margin-top: 25px; font-size: 15px; font-weight: 500; color: #6e7b7d; }

.feature-circle-sheet { width: 1190px; }
.feature-circle-sheet > .feature-ui-heading { width: 990px; }
.feature-circle-sheet .feature-ui-description span { margin-inline: 8px; }
.feature-circle-empty { width: 930px; margin-top: 34px; padding: 36px; border: 1px solid #c1ccce; border-radius: 22px; background: #f4f8f7; box-shadow: inset 0 0 0 5px #ffffff45, inset 0 0 0 6px #cbd4d559; }
.feature-circle-empty p { max-width: 750px; font-size: 23px; line-height: 1.55; }
.feature-circle-empty .feature-ui-action { margin-top: 26px; }

.features-page .feature-overlay .reply-demo { position: relative; padding: 48px 32px; background: radial-gradient(ellipse at 0% 100%, #a4c6c2, transparent 70%), linear-gradient(125deg, #d6e2da, #eee9d9); }
.feature-overlay .reply-demo .tb-reply { font-size: 15px; }
.feature-overlay .reply-demo .tb-text { line-height: 1.45; }
@media (max-width: 800px) {
  .features-page .feature-screen { padding-block: 48px; }
  .feature-screen .section-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .feature-screen .section-heading h2 { font-size: 42px; }
  .feature-screen .section-heading p { font-size: 17px; }
}
@media (max-width: 600px) {
  .features-page .feature-screen { padding-block: 32px; }
  .feature-screen .section-heading h2 { font-size: 32px; }
  .feature-screen .section-heading p { font-size: 16px; }
  .feature-crop { border-radius: 8px; }
  .features-page .feature-overlay .reply-demo { padding: 28px 12px; }
}