/*
 * The product pages.
 *
 * The site chrome — fonts, brand mark, header, footer — comes from the guide
 * stylesheet, so the two families of pages cannot drift apart. Only what a
 * feature page has and a guide does not lives here. The renderer links
 * gido-stilius.css ahead of this file; a CSS @import would cost a second
 * round trip before any of it applies.
 */

.feature { max-width: 1000px; margin: 0 auto; padding: 56px 28px 24px; }
.feature-head { max-width: 720px; }
.feature-head h1 { margin: 0 0 18px; font-size: clamp(32px, 4vw, 44px); font-weight: 750; line-height: 1.14; letter-spacing: -.035em; }
.feature-head .lead { margin: 0; }

.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.feature-cta-button { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 10px; background: #245f91; color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .15s; }
.feature-cta-button:hover { background: #1d527f; color: #fff; }
.feature-actions small { color: #647780; font-size: 13.5px; }

figure.feature-figure { margin: 36px 0 0; padding: 10px; border: 1px solid #e4e4e7; border-radius: 16px; background: #f4f4f5; }
figure.feature-figure img { display: block; width: 100%; height: auto; border: 1px solid #e4e4e7; border-radius: 11px; background: #fff; }
figure.feature-figure figcaption { padding: 11px 6px 3px; color: #647780; font-size: 13px; line-height: 1.55; }

.feature-points { margin-top: 44px; }
.feature-points h2 { margin: 0 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.feature-points ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.feature-points li { padding: 20px; border: 1px solid #e4e4e7; border-radius: 14px; }
.feature-points h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.feature-points p { margin: 0; color: #405561; font-size: 14.5px; line-height: 1.65; }

.feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; margin-top: 48px; padding-top: 44px; border-top: 1px solid #e4e9eb; }
.feature-split h2 { margin: 0 0 12px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.feature-split p { margin: 0 0 12px; color: #405561; font-size: 15.5px; line-height: 1.7; }
.feature-split p:last-child { margin-bottom: 0; }
.feature-split figure.feature-figure { margin: 0; }

.feature-note { margin: 44px 0 0; padding: 18px 20px; border-radius: 14px; background: #f3f8fc; color: #405561; font-size: 14.5px; line-height: 1.7; }

.feature-more { max-width: 1000px; margin: 0 auto; padding: 44px 28px 48px; }
.feature-more-eyebrow { margin: 0 0 4px; color: #245f91; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.feature-more h2 { margin: 0 0 18px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.feature-more ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.feature-more a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 15px 16px; border: 1px solid #e4e4e7; border-radius: 14px; text-decoration: none; transition: border-color .15s, background .15s; }
.feature-more a:hover { border-color: #245f91; background: #f8fbfe; }
.feature-more strong { color: #18181b; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.feature-more a:hover strong { color: #245f91; }
.feature-more span { color: #71717a; font-size: 13px; line-height: 1.5; }

@media (max-width: 860px) {
  .feature-points ul { grid-template-columns: 1fr; }
  .feature-split { grid-template-columns: 1fr; gap: 24px; }
  .feature-more ul { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  .feature { padding: 40px 22px 20px; }
  .feature-head h1 { font-size: 30px; }
  figure.feature-figure { margin-top: 28px; padding: 7px; }
  .feature-points { margin-top: 36px; }
  .feature-more { padding: 36px 22px 40px; }
  .feature-more ul { grid-template-columns: 1fr; }
}